/* ===============================
   Helpal Navbar – Fixed Dropdowns (Cleaned)
   - Works across Chrome/Edge/Firefox (mobile + desktop)
   - Messages/Notifications dropdowns are absolute on mobile
   =============================== */

.helpal-promo-shell {
  position: sticky;
  top: 0;
  z-index: 1035;
  padding: 0.55rem 0 0;
  background: linear-gradient(180deg, rgba(250, 252, 255, 0.96), rgba(250, 252, 255, 0));
}

.helpal-promo-banner {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 0.9rem 1.15rem;
  border: 1px solid rgba(12, 74, 110, 0.12);
  background:
    radial-gradient(circle at left center, rgba(255, 209, 102, 0.34), transparent 32%),
    linear-gradient(135deg, #0f766e 0%, #0f4c81 46%, #0b1f33 100%);
  box-shadow: 0 18px 40px rgba(11, 31, 51, 0.18);
}

.helpal-promo-glow {
  position: absolute;
  inset: auto -12% -120% auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.24), transparent 68%);
  pointer-events: none;
}

.helpal-promo-track {
  display: flex;
  align-items: center;
  gap: 2rem;
  position: relative;
  min-width: 100%;
}

.helpal-promo-banner--sliding .helpal-promo-track {
  width: max-content;
  animation: helpalPromoSlide 20s linear infinite;
}

.helpal-promo-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  min-width: max-content;
}

.helpal-promo-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.38rem 0.72rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #f8fafc;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.helpal-promo-text {
  color: #f8fafc;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.helpal-promo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #facc15 0%, #f97316 100%);
  color: #111827;
  font-size: 0.83rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 20px rgba(249, 115, 22, 0.28);
}

.helpal-promo-cta:hover {
  color: #111827;
  transform: translateY(-1px);
}

@keyframes helpalPromoSlide {
  from {
    transform: translateX(-6%);
  }
  to {
    transform: translateX(-51%);
  }
}

  .navbar {
    --nav-bg: #ffffff;
    --nav-border: #dee2e6;
    --nav-text: #212529;
    --nav-muted: #495057;
    --nav-hover-bg: rgba(67, 97, 238, 0.06);
    --nav-active-bg: rgba(67, 97, 238, 0.10);
    --nav-active: #4361ee;
    --nav-radius: 14px;
    --nav-shadow: 0 14px 34px rgba(18, 20, 22, 0.08);
  
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom: 1px solid rgba(222, 226, 230, 0.85);
    padding: 0.7rem 0;
    z-index: 1030;
    backdrop-filter: saturate(180%) blur(14px);
  }

  .helpal-navbar {
    transition: box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
  }
  
  .navbar.shadow-sm {
    box-shadow: var(--nav-shadow) !important;
  }
  
  .navbar.sticky-top {
    backdrop-filter: saturate(160%) blur(10px);
  }
  
  /* Brand */
  .navbar-brand {
    gap: 0.6rem;
    padding: 0;
    margin-right: 1.15rem;
    display: flex;
    align-items: center;
  }

  .navbar-brand-mark {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
      radial-gradient(circle at 30% 30%, rgba(255,255,255,0.72), rgba(255,255,255,0.2) 46%, transparent 65%),
      linear-gradient(145deg, rgba(67, 97, 238, 0.18), rgba(15, 23, 42, 0.04));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.64),
      0 12px 24px rgba(17, 24, 39, 0.08);
    border: 1px solid rgba(67, 97, 238, 0.14);
  }
  
  .navbar-brand img {
    height: 58px;
    width: 58px;
    object-fit: contain;
    border-radius: 18px;
    background: #fff;
    padding: 3px;
  }

  .navbar-brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
  }

  .navbar-brand-title {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #182230;
  }

  .navbar-brand-subtitle {
    font-size: 0.74rem;
    font-weight: 600;
    color: #667085;
    letter-spacing: 0.01em;
  }
  
  /* Toggler */
  .navbar-toggler {
    border: 1px solid var(--nav-border);
    border-radius: 12px;
    padding: 0.45rem 0.6rem;
  }
  
  .navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(67, 97, 238, 0.18);
  }
  
  /* Links */
  .navbar-nav .nav-link {
    color: var(--nav-text);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  }
  
  .navbar-nav .nav-link .bi {
    font-size: 1.05rem;
    opacity: 0.9;
  }
  
  .navbar-nav .nav-link:hover {
    background: var(--nav-hover-bg);
    color: var(--nav-active);
    transform: translateY(-1px);
  }
  
  .navbar-nav .nav-link.active,
  .navbar-nav .nav-item.show > .nav-link {
    background: var(--nav-active-bg);
    color: var(--nav-active);
    box-shadow: inset 0 0 0 1px rgba(67, 97, 238, 0.08);
  }

  .nav-link-login {
    border: 1px solid rgba(67, 97, 238, 0.12);
    background: rgba(248, 250, 252, 0.85);
  }

  .helpal-navbar__primary {
    gap: 0.15rem;
  }

  .helpal-navbar__utilities {
    gap: 0.2rem;
  }

  .nav-guest-auth__group {
    padding-left: 0.35rem;
  }

  .nav-signup-btn {
    border-radius: 999px;
    padding: 0.72rem 1.1rem;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(67, 97, 238, 0.18);
  }

  .nav-signup-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(67, 97, 238, 0.22);
  }

  .nav-signup-btn--secondary {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(67, 97, 238, 0.18);
    box-shadow: none;
  }

  .nav-signup-btn--secondary:hover {
    background: rgba(67, 97, 238, 0.06);
    border-color: rgba(67, 97, 238, 0.34);
  }

  #currencyMenu {
    padding-inline: 0.72rem;
    border: 1px solid rgba(222, 226, 230, 0.9);
    background: rgba(248, 250, 252, 0.82);
  }

  #currencyMenu:hover {
    border-color: rgba(67, 97, 238, 0.24);
    background: rgba(239, 244, 255, 0.92);
  }

  .nav-account-link {
    padding: 0.35rem 0.55rem 0.35rem 0.4rem;
    border: 1px solid rgba(222, 226, 230, 0.9);
    background: rgba(248, 250, 252, 0.85);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
  }

  .nav-account-link:hover {
    border-color: rgba(67, 97, 238, 0.24);
    background: rgba(239, 244, 255, 0.92);
  }
  
  /* Badge */
  .navbar .badge.rounded-pill {
    font-size: 0.68rem;
    padding: 0.35em 0.55em;
    border: 2px solid #fff;
  }
  
  /* Dropdown menus – global */
  .navbar .dropdown-menu {
    border: 1px solid var(--nav-border);
    border-radius: var(--nav-radius);
    box-shadow: 0 18px 40px rgba(18, 20, 22, 0.14);
    padding: 0.55rem;
    margin-top: 0.6rem;
    min-width: 240px;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(16px);
  }
  
  .navbar .dropdown-header {
    font-weight: 800;
    color: #343a40;
    font-size: 0.78rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 0.55rem 0.65rem;
  }
  
  .navbar .dropdown-item {
    border-radius: 12px;
    padding: 0.55rem 0.65rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 600;
    color: #212529;
    transition: background 160ms ease;
    white-space: normal;
  }
  
  .navbar .dropdown-item .bi {
    font-size: 1.05rem;
    opacity: 0.95;
  }
  
  .navbar .dropdown-item:hover {
    background: rgba(67, 97, 238, 0.08);
    color: var(--nav-active);
  }

  .nav-item-community .dropdown-menu {
    min-width: 220px;
  }

  .helpal-navbar .container {
    align-items: center;
  }

  .nav-account-menu {
    min-width: 270px;
  }
  
  .navbar .dropdown-divider {
    display: none;
  }
  
  .navbar .dropdown-item.text-danger:hover {
    background: rgba(249, 65, 68, 0.10);
    color: #f94144 !important;
  }
  
  /* ================
     Messages/Notifications (split icon + caret)
     ================ */
  .nav-icon-dd {
    position: relative;
  }
  
  /* Desktop panel sizing */
  .nav-dropdown-panel {
    width: 340px;
    max-width: calc(100vw - 1.25rem);
  }

  .nav-icon-link {
    min-width: 44px;
    justify-content: center !important;
  }

  .nav-icon-link__label {
    font-size: 0.92rem;
    font-weight: 700;
    margin-left: 0.45rem;
  }

  .nav-caret-toggle {
    min-width: 34px;
    justify-content: center !important;
  }

  .helpal-navbar__collapse {
    align-items: center;
  }
  
  /* Notifications internal scroll */
  .nav-dropdown-panel--notifications .nav-dropdown-scroll {
    max-height: 55vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Slightly nicer spacing inside notifications */
  .nav-dropdown-panel--notifications .dropdown-item {
    padding: 0.75rem 1rem;
  }
  
  /* Ensure dropdowns are never clipped by parents */
  .navbar .navbar-collapse,
  .navbar .navbar-nav,
  .navbar .nav-item {
    overflow: visible !important;
  }
  
  /* ===============================
     Mobile (<= 991.98px)
     =============================== */
@media (max-width: 991.98px) {
  .nav-guest-auth {
    grid-column: 1 / -1;
  }

  .nav-guest-auth__group {
    width: 100%;
    justify-content: center;
    padding-left: 0;
    margin-inline: auto;
  }

  .nav-guest-auth__group .nav-link-login,
  .nav-guest-auth__group .nav-signup-btn {
    flex: 1 1 0;
    justify-content: center;
    max-width: 100%;
  }

  #currencyMenu {
    width: 100%;
    justify-content: center;
  }
    .helpal-promo-shell {
      padding-top: 0.45rem;
    }

    .helpal-promo-banner {
      border-radius: 16px;
      padding: 0.8rem 0.95rem;
    }

    .helpal-promo-copy {
      gap: 0.7rem;
    }

    .helpal-promo-text {
      font-size: 0.88rem;
      white-space: normal;
    }

    .helpal-promo-banner--sliding .helpal-promo-track {
      animation-duration: 18s;
    }

    .navbar-brand img {
      height: 50px !important;
      width: 50px !important;
    }

    .navbar-brand-copy {
      display: flex !important;
      min-width: 0;
      max-width: calc(100vw - 170px);
    }

    .navbar-brand-mark {
      width: 60px;
      height: 60px;
      border-radius: 18px;
      flex: 0 0 auto;
    }

    .navbar-brand-title {
      font-size: 0.92rem;
      line-height: 1.05;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .navbar-brand-subtitle {
      font-size: 0.64rem;
      line-height: 1.15;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  
    /* Collapse panel */
    .navbar-collapse {
      margin-top: 0.75rem;
      background:
        radial-gradient(circle at top right, rgba(67, 97, 238, 0.08), transparent 28%),
        #fff;
      border: 1px solid rgba(222, 226, 230, 0.96);
      border-radius: 20px;
      padding: 0.7rem;
      box-shadow: 0 18px 38px rgba(18, 20, 22, 0.12);
    }
  
    /* Left nav stack */
    .navbar-nav.me-auto {
      gap: 0.25rem;
      padding-bottom: 0.35rem;
      border-bottom: 0;
      margin-bottom: 0.25rem;
    }
  
    .navbar-nav .nav-link {
      width: 100%;
      justify-content: flex-start;
      padding: 0.65rem 0.75rem;
      border-radius: 14px;
    }
  
    /* Right actions grid */
    .navbar-nav.ms-auto {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.45rem;
      margin-top: 0.45rem;
      padding-top: 0.35rem;
      border-top: 0;
      align-items: stretch;
    }
  
    .navbar-nav.ms-auto > .nav-item {
      width: 100%;
      min-width: 0;
    }
  
    /* Tile look (avoid affecting dropdown toggles) */
    .navbar-nav.ms-auto .nav-link:not(.dropdown-toggle):not(.dropdown-toggle-split) {
      justify-content: center;
      padding: 0.58rem 0.45rem;
      border: 1px solid rgba(222, 226, 230, 0.9);
      background: rgba(248, 249, 250, 0.76);
      min-height: 44px;
      font-size: 0.88rem;
    }
  
    /* Messages/Notifications split buttons become a joined control */
    .nav-icon-dd .d-flex {
      width: 100%;
    }
  
    .nav-icon-dd .nav-icon-link,
    .nav-icon-dd .nav-caret-toggle {
      border: 1px solid rgba(222, 226, 230, 0.9);
      background: rgba(248, 249, 250, 0.76);
      padding: 0.58rem 0.4rem;
      justify-content: flex-start;
      min-height: 44px;
      font-size: 0.9rem;
    }
  
    .nav-icon-dd .nav-icon-link {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  
    .nav-icon-dd .nav-caret-toggle {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      max-width: 42px;
      justify-content: center;
    }

    .nav-account-link {
      width: 100%;
      min-height: 46px;
      padding: 0.42rem 0.65rem 0.42rem 0.45rem;
      border-radius: 16px;
      justify-content: flex-start !important;
    }

    .nav-account-link img,
    .nav-account-link > div.rounded-circle {
      width: 28px !important;
      height: 28px !important;
      margin-right: 0.6rem !important;
    }

    .nav-link-login,
    .nav-signup-btn {
      width: 100%;
      justify-content: center;
      min-height: 44px;
      padding: 0.65rem 0.85rem;
      font-size: 0.9rem;
    }

    .nav-dashboard-item--primary,
    .nav-primary-community,
    .nav-primary-student-menu,
    .nav-primary-expert-menu {
      display: none !important;
    }

    .nav-mobile-dashboard-item .nav-link,
    .nav-mobile-community-item .nav-link,
    .nav-mobile-logout-item .nav-link,
    .nav-mobile-requests-item .nav-link {
      width: 100%;
      justify-content: flex-start !important;
      min-height: 46px;
      border-radius: 16px;
      border: 1px solid rgba(222, 226, 230, 0.9);
      background: rgba(248, 249, 250, 0.76);
      font-weight: 700;
      padding: 0.7rem 0.85rem;
    }

    .nav-mobile-user-item {
      order: 1;
    }

    .nav-mobile-requests-item {
      order: 2;
    }

    .nav-mobile-messages-item {
      order: 3;
    }

    .nav-mobile-notifications-item {
      order: 4;
    }

    .nav-mobile-dashboard-item {
      order: 5;
    }

    .nav-mobile-community-item {
      order: 6;
    }

    .nav-mobile-logout-item {
      order: 7;
      grid-column: 1 / -1;
    }

    .nav-mobile-dashboard {
      color: var(--nav-active);
      border-color: rgba(67, 97, 238, 0.18) !important;
      background: rgba(239, 244, 255, 0.92) !important;
    }

    .nav-mobile-logout {
      border: 1px solid rgba(220, 38, 38, 0.16);
      background: rgba(254, 242, 242, 0.9);
    }

    .nav-mobile-logout:hover {
      background: rgba(254, 226, 226, 0.96);
      color: #b91c1c !important;
    }
  
    /* ✅ CORE FIX:
       On mobile, keep dropdown menus ABSOLUTE (popover style).
       This prevents weird "boxed" behaviour across browsers. */
    .helpal-navbar__collapse {
      position: relative;
    }

    .helpal-navbar__utilities .nav-icon-dd,
    .helpal-navbar__utilities .nav-account-item {
      position: static;
    }

    .helpal-navbar__utilities .nav-mobile-requests-item,
    .helpal-navbar__utilities .nav-mobile-community-item {
      position: relative;
    }

    .navbar .nav-icon-dd .dropdown-menu {
      position: absolute !important;
      width: min(320px, calc(100vw - 1.4rem));
      margin-top: 0.5rem;
      left: auto !important;
      transform: none !important;
    }

    .nav-account-item .dropdown-menu {
      width: min(320px, calc(100vw - 1.4rem));
      margin-top: 0.55rem;
      left: auto !important;
      transform: none !important;
    }

    .nav-mobile-requests-item .dropdown-menu,
    .nav-mobile-community-item .dropdown-menu {
      position: absolute !important;
      left: auto !important;
      right: 0 !important;
      width: min(320px, calc(100vw - 1.4rem));
      margin-top: 0.55rem;
      transform: none !important;
    }

    .nav-account-item .dropdown-menu,
    .navbar .dropdown-menu {
      border-radius: 18px;
      padding: 0.45rem;
    }

    .nav-account-menu {
      max-height: min(72vh, 560px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .nav-dropdown-panel .dropdown-item,
    .nav-account-menu .dropdown-item {
      padding: 0.55rem 0.65rem;
      font-size: 0.88rem;
    }

    .nav-dropdown-panel--notifications .dropdown-item {
      padding: 0.65rem 0.8rem;
    }

    .nav-account-menu .dropdown-header,
    .nav-dropdown-panel .dropdown-header {
      font-size: 0.72rem;
      padding: 0.45rem 0.6rem;
    }
  
    /* Align end */
    .navbar .nav-icon-dd .dropdown-menu.dropdown-menu-lg-end,
    .navbar .nav-icon-dd .dropdown-menu.dropdown-menu-end,
    .navbar .nav-icon-dd [class*="dropdown-menu-end"] {
      right: 0.45rem !important;
      left: auto;
    }

    .nav-icon-dd--messages .dropdown-menu {
      right: 0.8rem !important;
    }

    .nav-icon-dd--notifications .dropdown-menu {
      right: 0.35rem !important;
    }

    .nav-account-item .dropdown-menu {
      right: 0.35rem !important;
    }

    .nav-dropdown-panel--messages {
      width: min(302px, calc(100vw - 1.1rem));
    }

    .nav-dropdown-panel--notifications {
      width: min(314px, calc(100vw - 1.1rem));
    }
  
    /* Notifications panel height on mobile */
    .nav-dropdown-panel--notifications .nav-dropdown-scroll {
      max-height: 46vh;
    }
  }
  
  /* Extra small */
  @media (max-width: 576px) {
    .helpal-promo-pill {
      font-size: 0.68rem;
      padding: 0.32rem 0.62rem;
    }

    .helpal-promo-cta {
      padding: 0.46rem 0.72rem;
      font-size: 0.78rem;
    }

    .navbar-brand img {
      height: 46px !important;
      width: 46px !important;
    }

    .navbar-brand-mark {
      width: 56px;
      height: 56px;
      border-radius: 16px;
    }

    .navbar-brand-copy {
      max-width: calc(100vw - 150px);
    }

    .navbar-brand-title {
      font-size: 0.88rem;
    }

    .navbar-brand-subtitle {
      font-size: 0.6rem;
    }
  
    .navbar-nav.ms-auto {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nav-icon-dd .nav-caret-toggle {
      max-width: 36px;
    }

    .navbar .nav-icon-dd .dropdown-menu,
    .nav-account-item .dropdown-menu {
      width: calc(100vw - 1.2rem);
    }

    .nav-icon-dd--messages .dropdown-menu {
      right: 0.55rem !important;
    }

    .nav-icon-dd--notifications .dropdown-menu,
    .nav-account-item .dropdown-menu {
      right: 0.15rem !important;
    }
  }
  
  /* Scroll shadow */
  .navbar.navbar--scrolled {
    box-shadow: 0 10px 28px rgba(18, 20, 22, 0.10) !important;
    background: rgba(255, 255, 255, 0.98) !important;
  }
  
  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .helpal-promo-banner--sliding .helpal-promo-track,
    .navbar-nav .nav-link,
    .navbar .dropdown-item {
      transition: none !important;
      animation: none !important;
    }
  }