/* =============================================
   AMAZINO — Navbar Auth Styles
   ============================================= */

:root {
  --main-color       : rgb(124, 29, 124);
  --main-color-hover : rgb(144, 86, 144);
  --secondary-color  : #B19470;
}

/* ── Sign In Button ──────────────────────────── */
.sp-navbar__btn-signin {
  display        : inline-flex;
  align-items    : center;
  gap            : 6px;
  padding        : 8px 20px;
  border-radius  : 999px;
  background     : var(--main-color);
  color          : #fff !important;
  font-size      : 0.82rem;
  font-weight    : 700;
  letter-spacing : 0.06em;
  text-decoration: none;
  border         : 2px solid transparent;
  transition     : background 0.22s, transform 0.18s, box-shadow 0.22s;
  box-shadow     : 0 2px 10px rgba(124,29,124,0.25);
  white-space    : nowrap;
}
.sp-navbar__btn-signin:hover {
  background : var(--main-color-hover);
  transform  : translateY(-2px);
  box-shadow : 0 6px 18px rgba(124,29,124,0.35);
  color      : #fff !important;
}
.sp-navbar__btn-signin:active { transform: translateY(0); }

/* ── User Pill Wrapper ───────────────────────── */
.nav-user-pill-wrap {
  position: relative;
  display : inline-block;
}

/* ── User Pill ───────────────────────────────── */
.nav-user-pill {
  display        : inline-flex;
  align-items    : center;
  gap            : 8px;
  padding        : 4px 12px 4px 4px;
  border-radius  : 999px;
  background     : rgba(124,29,124,0.1);
  border         : 1.5px solid rgba(124,29,124,0.2);
  text-decoration: none;
  color          : inherit;
  cursor         : pointer;
  transition     : background 0.2s, box-shadow 0.2s, transform 0.18s;
  white-space    : nowrap;
  user-select    : none;
}
.nav-user-pill:hover {
  background : rgba(124,29,124,0.18);
  box-shadow : 0 4px 14px rgba(124,29,124,0.15);
  transform  : translateY(-1px);
  color      : inherit;
}

/* Avatar */
.nav-user-avatar {
  flex-shrink  : 0;
  width        : 32px;
  height       : 32px;
  border-radius: 50%;
  overflow     : hidden;
}
.nav-user-avatar-initials {
  width          : 100%;
  height         : 100%;
  display        : flex;
  align-items    : center;
  justify-content: center;
  background     : linear-gradient(135deg, var(--main-color), var(--main-color-hover));
  color          : #fff;
  font-size      : 0.7rem;
  font-weight    : 700;
  letter-spacing : 0.04em;
}
.nav-user-avatar-img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
}

/* Name + role */
.nav-user-info {
  display       : flex;
  flex-direction: column;
  line-height   : 1.15;
}
.nav-user-name {
  font-size  : 0.82rem;
  font-weight: 700;
  color      : #1a1a1a;
}
.nav-user-role {
  font-size     : 0.65rem;
  color         : var(--main-color);
  font-weight   : 600;
  text-transform: capitalize;
  letter-spacing: 0.03em;
}

/* Caret */
.nav-user-arrow {
  font-size : 0.7rem;
  color     : var(--main-color);
  opacity   : 0.7;
  transition: transform 0.2s;
}

/* ── Dropdown ─────────────────────────────────
   IMPORTANT: controlled by JS (.open class)
   NOT by :hover — so it works on mobile too
─────────────────────────────────────────────── */
.nav-user-dropdown {
  display      : none;        /* hidden by default */
  position     : absolute;
  top          : calc(100% + 10px);
  right        : 0;
  min-width    : 190px;
  background   : #fff;
  border-radius: 14px;
  box-shadow   : 0 8px 32px rgba(124,29,124,0.15), 0 1px 4px rgba(0,0,0,0.06);
  border       : 1px solid rgba(124,29,124,0.08);
  padding      : 6px;
  z-index      : 9999;
}

/* JS adds .open to show it */
.nav-user-dropdown.open {
  display  : block;
  animation: ddFadeIn 0.18s ease;
}

@keyframes ddFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Caret rotates when dropdown is open */
.nav-user-dropdown.open ~ * .nav-user-arrow,
#navCaret.open { transform: rotate(180deg); }

/* ── Dropdown items ──────────────────────────── */
.nav-dd-item {
  display        : flex;
  align-items    : center;
  gap            : 10px;
  padding        : 9px 12px;
  border-radius  : 9px;
  font-size      : 0.82rem;
  font-weight    : 500;
  color          : #333;
  text-decoration: none;
  background     : transparent;
  border         : none;
  width          : 100%;
  cursor         : pointer;
  transition     : background 0.15s, color 0.15s;
  text-align     : left;
}
.nav-dd-item i {
  font-size : 0.9rem;
  color     : var(--main-color);
  width     : 16px;
  flex-shrink: 0;
}
.nav-dd-item:hover {
  background: rgba(124,29,124,0.07);
  color     : var(--main-color);
}

.nav-dd-sep {
  height    : 1px;
  background: rgba(124,29,124,0.08);
  margin    : 4px 6px;
}

.nav-dd-logout       { color: #c0392b; }
.nav-dd-logout i     { color: #c0392b; }
.nav-dd-logout:hover { background: rgba(192,57,43,0.07); color: #c0392b; }

/* ── Dark navbar variant ─────────────────────── */
.navbar-dark .nav-user-pill,
.sp-navbar--dark .nav-user-pill {
  background  : rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.2);
}
.navbar-dark .nav-user-name,
.sp-navbar--dark .nav-user-name { color: #fff; }
.navbar-dark .nav-user-role,
.sp-navbar--dark .nav-user-role { color: rgba(255,255,255,0.75); }
.navbar-dark .nav-user-arrow,
.sp-navbar--dark .nav-user-arrow { color: rgba(255,255,255,0.6); }

/* ── Mobile ──────────────────────────────────── */
@media (max-width: 768px) {
  .nav-user-pill    { padding: 5px 10px 5px 5px; }
  .nav-user-info    { display: none; }
  .nav-user-arrow   { display: none; }
  .nav-user-dropdown { right: auto; left: 0; }
}