/* =============================================================================
   AI-Wise Navbar Styles
   Extracted from ai-wise.css — loads on every page that includes ai-navbar.blade.php
   ============================================================================= */

/* -----------------------------------------------------------------------------
   HEADER — node 256:9076 (80px × 1440px)
   ----------------------------------------------------------------------------- */
:root {
  --navigation-height: 80px;
}

.ai-header {
  height: 80px;
  width: 100%;
  background: #111111;
  border-bottom: 1px solid #262626;
  display: flex;
  align-items: center;
  padding: 13px 40px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9100;
}


/* 3-column flex: logo LEFT | pill CENTER | actions RIGHT */
.app-navigation__container {
  justify-content: unset;
}
.app-navigation__left-section {
  flex: 1;
  justify-content: flex-start;
}
.app-navigation__ai-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1027px) {
  .app-navigation__ai-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Hide the desktop toggle pill on mobile */
  .app-navigation__ai-toggle .ai-toggle-pill {
    display: none !important;
  }
}

/* -----------------------------------------------------------------------------
   MOBILE MODE PILL — compact active-mode indicator for inner pages
   Shown only on mobile (≤1027px), hidden on home page via @unless($isHomePage)
   Design tokens from Figma nodes 366:10448 (AI wise) and 366:10560 (Classic)
   ----------------------------------------------------------------------------- */
.app-navigation__mobile-mode-pill {
  display: none; /* hidden by default; shown on mobile via media query below */
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px 0 12px;
  background: #212301;
  border: 1px solid #353800;
  border-radius: 18px;
  box-shadow:
    0px 1px 2px 0px rgba(10, 13, 18, 0.10),
    0px 1px 3px 0px rgba(10, 13, 18, 0.10);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 1027px) {
  .app-navigation__mobile-mode-pill {
    display: flex;
  }
}

.app-navigation__mobile-mode-pill__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.app-navigation__mobile-mode-pill__icon img {
  width: 16px;
  height: 16px;
  filter: none;
}

.app-navigation__mobile-mode-pill__label {
  font-family: 'Neue', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  color: #e0e846;
  letter-spacing: 0;
}

.app-navigation__mobile-mode-pill__chevron {
  flex-shrink: 0;
  margin-left: 2px;
}
.app-navigation__right-section {
  flex: 1;
  justify-content: flex-end;
}

/* 3-section header: logo LEFT | toggle CENTERED | nav RIGHT
   Uses CSS Grid with 3 equal columns so toggle is always viewport-centered */
.ai-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  max-width: 1720px;
  height: 54px;
  margin: 0 auto;
}

.ai-header__left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.ai-header__logo {
  width: 110px;
  height: 40px;
  display: block;
  flex-shrink: 0;
}

.ai-header__logo img {
  width: 110px;
  height: 40px;
  object-fit: contain;
}

/* -----------------------------------------------------------------------------
   AI/CLASSIC TOGGLE PILL — node 256:15888
   ----------------------------------------------------------------------------- */
.ai-toggle-pill {
  width: 304px;
  height: 54px;
  border-radius: 46px;
  border: 1px solid #4e5200;   /* brand/900 — home page variant */
  padding: 8px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: auto;
}

/* Darker border for non-home pages */
.ai-toggle-pill--dark {
  border-color: #353800;        /* brand/950 */
}

.ai-toggle-pill__tab {
  width: 144px;
  height: 38px;
  border-radius: 38px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Neue', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  border: none;
  background: transparent;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

/* Active tab — yellow background (used for whichever tab is current) */
.ai-toggle-pill__tab--active {
  background: #e0e846;          /* brand/300 */
  color: #111111;               /* gray/980 */
  box-shadow: 0px 1px 3px 0px rgba(10,13,18,0.1), 0px 1px 2px -1px rgba(10,13,18,0.1);
}

/* Inactive tab text color */
.ai-toggle-pill__tab--inactive-ai,
.ai-toggle-pill__tab--inactive-classic {
  color: #eef291;               /* brand/100 */
}

/* Stars icon inside AI tab — 18px × 18px */
.ai-toggle-pill__ai-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ai-toggle-pill__ai-icon img {
  width: 18px;
  height: 18px;
}

/* Icon turns black when AI tab is active (yellow bg), original when inactive */
.ai-toggle-pill__tab--active .ai-toggle-pill__ai-icon img {
  filter: brightness(0);
}

.ai-toggle-pill__tab--inactive-ai .ai-toggle-pill__ai-icon img {
  filter: none;
}

/* -----------------------------------------------------------------------------
   RIGHT NAV PILL — node 256:9084
   ----------------------------------------------------------------------------- */
.ai-header__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.ai-header__advisor-btn {
  width: 168px;
  height: 40px;
  border-radius: 44px;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Neue', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.1px;
  color: #d9d9d9;               /* gray/300 */
  background: transparent;
  border: none;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}

.ai-header__advisor-btn:hover {
  color: #e8e8e8;
}

.ai-header__nav-pill {
  background: #1a1a1a;          /* gray/950 */
  border: 1px solid #383838;    /* gray/800 */
  border-radius: 36px;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 7px 10px 7px 16px;
  gap: 10px;
}

.ai-header__nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ai-header__nav-icon img {
  width: 20px;
  height: 20px;
}

.ai-header__divider {
  width: 1px;
  height: 24px;
  background: #383838;          /* gray/800 */
  flex-shrink: 0;
}

.ai-header__avatar {
  width: 24px;
  height: 24px;
  border-radius: 200px;
  background: #383838;          /* gray/800 */
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-header__avatar img {
  width: 15px;
  height: 15px;
}

/* Pill user avatar — Figma 353:8790 (I353:8790;9268:69780) */
.ai-header__pill-avatar {
  width: 24px;
  height: 24px;
  border-radius: 200px;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4f4f4f;
}

.ai-header__pill-avatar-img {
  width: 24px;
  height: 24px;
  border-radius: 200px;
  object-fit: cover;
  display: block;
}

.ai-header__pill-avatar-initials {
  font-family: 'Neue', sans-serif;
  font-weight: 600;
  font-size: 9px;
  line-height: 1;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0;
}

/* -----------------------------------------------------------------------------
   RESPONSIVE — navbar overrides only
   ----------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .ai-header {
    padding: 8px 16px;
  }

  .ai-header__advisor-btn {
    display: none;
  }

  .ai-toggle-pill {
    width: 240px;
    height: 44px;
    padding: 4px;
  }

  .ai-toggle-pill__tab {
    flex: 1;
    width: auto;
    height: 34px;
    font-size: 14px;
    padding: 0 4px;
  }
}

/*
 * Hide the global-search-trigger from the AI navbar UI.
 * main.js (mobileMenu.ui) moves .global-search-trigger into
 * .app-navigation__left-section or __right-section.
 * The trigger must exist in the DOM AND be "rendered" (not display:none)
 * for main.js to initialize the listing filter strategies correctly.
 * We use opacity+absolute positioning so it is invisible but still rendered.
 */
.app-navigation .global-search-trigger,
.app-navigation__left-section .global-search-trigger,
.app-navigation__right-section .global-search-trigger {
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}



/* ── Inquiry pages: hide AI/Classic toggle & advisor button ── */
body.inq-sc-page .app-navigation__ai-toggle,
body.inq-rl-page .app-navigation__ai-toggle,
body.inq-ci-page .app-navigation__ai-toggle,
body.inq-sc-page .ai-header__advisor-btn,
body.inq-rl-page .ai-header__advisor-btn,
body.inq-ci-page .ai-header__advisor-btn {
    display: none !important;
}

/* -----------------------------------------------------------------------------
   BURGER MENU DROPDOWN — Figma node 351:9118
   ----------------------------------------------------------------------------- */

/* Home nav item only visible in mobile sidebar, hidden in desktop dropdown */
.ai-burger-dropdown__item--mobile-only {
  display: none;
}

/* Mobile-only sidebar elements: hidden on desktop */
.ai-burger-dropdown__mobile-header,
.ai-burger-dropdown__mobile-close,
.ai-burger-dropdown__mobile-pill-wrap,
.ai-burger-dropdown__mobile-spacer {
  display: none;
}

/* Wrapper makes the pill icon the dropdown anchor */
.ai-header__burger-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* Dropdown panel */
.ai-burger-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 240px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow:
    0px 12px 16px -4px rgba(10, 13, 18, 0.08),
    0px 4px 6px -2px rgba(10, 13, 18, 0.03),
    0px 2px 2px -1px rgba(10, 13, 18, 0.04);
  /* Override generic .dropdown__box sizing */
  max-height: none !important;
  width: 240px !important;
  z-index: 9200;
  overflow: hidden;
}

/* Header row: avatars + label (desktop) */
.ai-burger-dropdown__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid #ebebeb;
  background: transparent;
  border-radius: 0;
  margin: 0;
  text-decoration: none;
}

/* Overlapping avatar stack — reuses app-navigation__advisor-link-avatars/avatar,
   just overrides border colour to white (dropdown has white bg) and increases overlap */
.ai-burger-dropdown__avatars {
  align-items: center;
  flex-shrink: 0;
}

/* Home page: tighter overlap (-8px) */
.ai-burger-dropdown__avatars--home > :not([hidden]) ~ :not([hidden]) {
  margin-left: -8px !important;
}

/* Other pages: more overlap (-16px) */
.ai-burger-dropdown__avatars:not(.ai-burger-dropdown__avatars--home) > :not([hidden]) ~ :not([hidden]) {
  margin-left: -16px !important;
}

.ai-burger-dropdown__avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-color: #ffffff !important;
}

.ai-burger-dropdown__header-label {
  font-family: 'Neue Text', 'Neue', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: #212324;
  flex: 1;
}

/* Menu items list */
.ai-burger-dropdown__list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.ai-burger-dropdown__item {
  padding: 0 6px 2px;
}

.ai-burger-dropdown__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s ease;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

.ai-burger-dropdown__link:hover {
  background: rgba(70, 70, 70, 0.06);
}

.ai-burger-dropdown__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-burger-dropdown__label {
  font-family: 'Neue', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #464646;
}

/* Divider between blog and log-in */
.ai-burger-dropdown__divider {
  height: 1px;
  background: #ebebeb;
  margin: 2px 0;
  padding: 0;
}

/* ── Logged-in user header (Figma 353:8792) ── */
.ai-burger-dropdown__header--user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid #f2f2f2;
  text-decoration: none;
}

.ai-burger-dropdown__user-avatar-wrap {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 200px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;
  position: relative;
}

.ai-burger-dropdown__user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 200px;
  object-fit: cover;
  display: block;
}

.ai-burger-dropdown__user-avatar-fallback {
  width: 40px;
  height: 40px;
  border-radius: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f2f2;
  font-family: 'Neue', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #4f4f4f;
  text-transform: uppercase;
}

.ai-burger-dropdown__user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ai-burger-dropdown__user-name {
  font-family: 'Neue Text', 'Neue', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: #383838;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.ai-burger-dropdown__user-email {
  font-family: 'Neue', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #a8a8a8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

/* Signin modal border-radius overrides */
#signin-modal .dialog__container,
#signup-modal .dialog__container {
  border-radius: 16px;
}

#signin-modal .auth-form__input-group,
#signup-modal .auth-form__input-group {
  border-radius: 8px;
  overflow: hidden;
}

#signin-modal .auth-modal--content__form--submit-btn,
#signup-modal .auth-modal--content__form--submit-btn,
#signin-modal .auth-modal--content--google-btn,
#signup-modal .auth-modal--content--google-btn {
  border-radius: 8px;
}

/* Position dropdown correctly relative to the pill container */
.ai-header__nav-pill {
  position: relative;
}

/* =============================================================================
   MOBILE MODE POPUP (Figma 366-11501)
   375×331px panel, bg #111111, border-radius 0 0 20px 20px
   Only visible on mobile (≤1027px).
   ============================================================================= */

.mobile-mode-popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9150;
}

.mobile-mode-popup--open {
  display: block;
}

/* Backdrop: full-screen dark + blur */
.mobile-mode-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Panel — Figma: 375×331px, bg #111111, border-radius 0 0 20px 20px */
.mobile-mode-popup__panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #111111;
  border-radius: 0 0 20px 20px;
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  animation: mobile-popup-slide-in 0.22s ease-out both;
}

@keyframes mobile-popup-slide-in {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.mobile-mode-popup--closing .mobile-mode-popup__panel {
  animation: mobile-popup-slide-out 0.18s ease-in both;
}

@keyframes mobile-popup-slide-out {
  from { transform: translateY(0);     opacity: 1; }
  to   { transform: translateY(-100%); opacity: 0; }
}

/* Row 1: header — logo left, close button right */
.mobile-mode-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
}

.mobile-mode-popup__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.mobile-mode-popup__logo img {
  width: 110px;
  height: 40px;
  object-fit: contain;
}

.mobile-mode-popup__close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

/* Row 2: pill wrap — centered, 24px below header */
.mobile-mode-popup__pill-wrap {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* Popup pill — Figma: 254px wide, 54px tall, same as mobile hero */
.ai-toggle-pill--popup {
  width: 254px;
  height: 44px;
  padding: 4px;
  border-color: #4e5200;
}

.ai-toggle-pill--popup .ai-toggle-pill__tab {
  flex: 1;
  width: auto;
  height: 34px;
  font-size: 14px;
  padding: 0 4px;
}

/* Row 3: search slot — 24px below pill */
.mobile-mode-popup__search-slot {
  width: 100%;
  margin-top: 24px;
}

/* Hidden state */
.mobile-mode-popup__search--hidden {
  display: none !important;
}

/* ── Mobile hero search bars — duplicated here from search-home-page.blade.php
   so they render correctly on non-home pages (PLP, detail, etc.) ── */

/* Classic search bar (Figma 366-12127) */
.mobile-hero__classic-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 56px;
  background: #262626;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 0.5px solid rgba(0, 0, 0, 0.6);
  border-radius: 8px;
  padding: 8px 10px 8px 16px;
  cursor: pointer;
}

.mobile-hero__classic-search__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.mobile-hero__classic-search__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-hero__classic-search__placeholder {
  font-family: 'Neue', 'Neue', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: normal;
  letter-spacing: -0.4395px;
  color: #757575;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-hero__classic-search__es-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Neue', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: normal;
  letter-spacing: -0.4395px;
  color: #ffffff;
  -webkit-appearance: none;
  appearance: none;
}

.mobile-hero__classic-search__es-input::placeholder {
  color: #757575;
}

/* Search button (Figma 366-12132): bg #c8d200, 32px circle */
.mobile-hero__classic-search__btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 18px;
  background: #c8d200;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s;
}

.mobile-hero__classic-search__btn:hover {
  background: #b3bc00;
}

.mobile-hero__classic-search__btn svg {
  width: 16px;
  height: 16px;
}

/* AI search bar */
.mobile-hero__ai-search {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  background: #262626;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 0.5px solid rgba(200, 210, 0, 0.3);
  border-radius: 8px;
  padding: 8px 10px 8px 16px;
}

.mobile-hero__ai-search__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  font-family: 'Neue', 'Neue', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.4395px;
  color: #ffffff;
  overflow: hidden;
  min-height: 24px;
  max-height: 120px;
}

.mobile-hero__ai-search__input::placeholder {
  color: #757575;
}

.mobile-hero__ai-search__btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 18px;
  background: #3a3a3a;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s;
}

.mobile-hero__ai-search__btn--active {
  background: #c8d200;
}

.mobile-hero__ai-search__btn--active svg path {
  stroke: #111111;
}

/* Glow animation on both bars when inside search-bar-glow-wrapper in popup */
#popup-classic-search-bar-wrapper .mobile-hero__classic-search,
#popup-ai-search-bar-wrapper .mobile-hero__ai-search {
  border: 1px solid rgba(200, 210, 0, 0.2);
  border-radius: 16px;
  animation: search-bar-sweep 4s ease-in-out infinite;
}

/* Wrapper full-width in popup */
#popup-classic-search-bar-wrapper,
#popup-ai-search-bar-wrapper {
  width: 100%;
}

/* AI search bar in popup — matches home hero style */
.mobile-mode-popup__ai-search {
  align-items: flex-start;
  min-height: 115px;
}

.mobile-mode-popup__ai-input {
  min-height: 60px;
  max-height: 120px;
  align-self: flex-start;
}

/* Send button stays at bottom-right, rounded rect to match home hero */
.mobile-mode-popup__ai-search .mobile-hero__ai-search__btn {
  align-self: flex-end;
  margin-top: auto;
  border-radius: 8px;
  background: #595959;
}

.mobile-mode-popup__ai-search .mobile-hero__ai-search__btn--active {
  background: #c8d200;
}

.mobile-mode-popup__ai-search .mobile-hero__ai-search__btn--active svg path {
  stroke: #111111;
}

/* Classic search bar — cursor pointer */
.mobile-mode-popup__classic-search {
  cursor: pointer;
}

/* Row 4: tagline — Figma: color #f3f5c4, font 14px, accent #c8d200 */
.mobile-mode-popup__tagline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Neue', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  color: #f3f5c4;
}

.mobile-mode-popup__tagline-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.mobile-mode-popup__tagline-accent {
  color: #c8d200;
  font-weight: 600;
}

/* Only show on mobile */
@media (min-width: 1028px) {
  .mobile-mode-popup {
    display: none !important;
  }
}

/* When popup is open, pull sticky bars behind the popup overlay.
   .listing__top-bar has z-index:20 + position:sticky which creates a
   stacking context that can paint over fixed overlays in some browsers.
   .filter-toolbar__filter-bar is forced to z-index:10001 on mobile by
   filter-modal-spacing-fix.css and must also be suppressed here. */
body.mobile-popup--open .listing__top-bar,
body.mobile-popup--open .filter-toolbar__filter-bar,
body.mobile-popup--open .filter-toolbar {
  z-index: 0 !important;
}

body.mobile-popup--open .app-navigation {
  z-index: 0 !important;
}

/* =============================================================================
   Search bar + tagline styles for mobile-mode-popup
   Mirrors the hero section styles from search-home-page.blade.php
   ============================================================================= */

@keyframes search-bar-sweep {
  0%   { box-shadow: 0 0 4px 0px rgba(200, 210, 0, 0.12); border-color: rgba(200, 210, 0, 0.20); }
  40%  { box-shadow: 0 0 4px 0px rgba(200, 210, 0, 0.50); border-color: rgba(200, 210, 0, 0.55); }
  60%  { box-shadow: 0 0 4px 0px rgba(200, 210, 0, 0.50); border-color: rgba(200, 210, 0, 0.55); }
  100% { box-shadow: 0 0 4px 0px rgba(200, 210, 0, 0.12); border-color: rgba(200, 210, 0, 0.20); }
}

/* Wrapper */
.mobile-mode-popup__search-slot .search-bar-glow-wrapper {
  width: 100%;
  max-width: 100%;
  margin-top: 0;
}


/* Taglines */
.mobile-mode-popup .mobile-hero__tagline {
  font-family: 'Neue', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 40px;
  letter-spacing: -0.32px;
  color: #f3f5c4;
  text-align: left;
  white-space: nowrap;
  margin: 16px 0 0;
  padding: 0;
  width: 100%;
  display: block;
}

.mobile-mode-popup .mobile-hero__tagline--ai {
  white-space: normal;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mobile-mode-popup .mobile-hero__tagline--ai-icon {
  flex-shrink: 0;
  vertical-align: middle;
}

.mobile-mode-popup .mobile-hero__tagline--highlight {
  color: #c8d200;
  font-weight: 600;
}

/* Hidden state for inactive tab */
.mobile-mode-popup .mobile-mode-popup__search--hidden {
  display: none !important;
}

/* =============================================================================
   MOBILE BURGER SIDEBAR (Figma 366:19323 — "Sidebar navigation")
   Full-height dark sidebar, slides in from the left on mobile (≤1027px).
   Desktop dropdown behaviour is preserved — these rules only apply ≤1027px.
   ============================================================================= */

@media (max-width: 1027px) {

  /* ── Overlay backdrop ── */
  .ai-burger-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    /* Figma 366:19325 — Background overlay fill */
    background: rgba(17, 17, 17, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9300;
  }

  .ai-burger-sidebar-overlay--open {
    display: block;
  }

  /* ── Sidebar panel (Figma 366:19326 "Content", width:311, height:812, bg #111111) ── */
  .ai-burger-dropdown {
    border: none !important;
    /* Override desktop absolute dropdown */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 311px !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    background: #111111 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 9400 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: none;
    flex-direction: column;
    padding: 0;
    transform: translateX(-100%);
    transition: transform 0.26s ease, opacity 0.26s ease;
    opacity: 0;
  }

  /* Open state — JS toggles .hidden / .visible classes via createDropdown() */
  .ai-burger-dropdown:not(.hidden) {
    display: flex;
  }

  .ai-burger-dropdown.visible {
    transform: translateX(0);
    opacity: 1;
  }

  /* Show mobile-only elements inside sidebar */
  .ai-burger-dropdown__mobile-header,
  .ai-burger-dropdown__mobile-close,
  .ai-burger-dropdown__mobile-pill-wrap {
    display: flex;
  }

  /* ── Header row (Figma 366:19327 — height:64, logo at y:24, x:16) ── */
  .ai-burger-dropdown__mobile-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px 12px 0 16px;
    height: 64px;
    flex-shrink: 0;
  }

  .ai-burger-dropdown__mobile-logo {
    display: flex;
    align-items: center;
  }

  .ai-burger-dropdown__mobile-logo img {
    height: 26px;
    width: auto;
  }

  /* Close button (Figma 366:19380 — x:327 in 375 frame, y:12, 36×36)
     Panel is 311px wide → close btn starts at 327px from left edge of viewport,
     which is 16px to the right of the panel edge */
  .ai-burger-dropdown__mobile-close {
    position: fixed;
    top: 12px;
    left: 327px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 9401;
    flex-shrink: 0;
  }

  .ai-burger-dropdown__mobile-close svg path {
    stroke: #ffffff;
  }

  /* ── Toggle pill section (Figma 366:19332 — x:8, y:0, width:295, height:64) ── */
  .ai-burger-dropdown__mobile-pill-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 8px;
    margin-top: 0;
    flex-shrink: 0;
  }

  /* Pill component (Figma 366:19333 — width:257, height:40, padding:1px) */
  .ai-burger-dropdown__mobile-pill {
    display: flex;
    align-items: center;
    width: 257px;
    height: 40px;
    padding: 1px;
    background: #1a1a1a;
    border-radius: 999px;
    border: 1px solid #353800;
    box-shadow: 0px 1px 2px -1px rgba(10, 13, 18, 0.10), 0px 1px 3px 0px rgba(10, 13, 18, 0.10);
    gap: 0;
  }

  /* Active tab — AI wise (Figma 366:19334 — width:130, height:38, bg Brand/900 #4e5200) */
  .ai-burger-dropdown__mobile-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease;
    text-decoration: none;
    border: none;
    background: transparent;
    padding: 0;
  }

  .ai-burger-dropdown__mobile-tab--ai {
    width: 130px;
    gap: 8px;
    background: #4e5200;
  }

  .ai-burger-dropdown__mobile-tab--ai .ai-burger-dropdown__mobile-tab-icon {
    /* icon stars-02: x:30 within tab, width:18, height:18 */
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .ai-burger-dropdown__mobile-tab--ai .ai-burger-dropdown__mobile-tab-label {
    /* text "AI wise" at x:56, width:44, height:24 */
    font-family: 'Neue Text', 'Neue', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    color: #e0e846;
  }

  .ai-burger-dropdown__mobile-tab--classic {
    width: 131px;
    justify-content: center;
  }

  .ai-burger-dropdown__mobile-tab--classic .ai-burger-dropdown__mobile-tab-label {
    /* text "Classic search" at x:20.5, width:90, height:24 */
    font-family: 'Neue Text', 'Neue', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    color: #757575;
  }

  /* ── Nav items list (Figma 366:19331 — x:0, y:88, width:311) ── */

  /* Home item only shows on mobile (desktop dropdown doesn't have it) */
  .ai-burger-dropdown__item--mobile-only {
    display: list-item;
  }

  /* Use flex order to push the advisor card to the bottom:
     mobile-header=1, pill-wrap=2, list=3, user-card=4, spacer=5, advisor-card=6 */
  .ai-burger-dropdown__mobile-header    { order: 1; }
  .ai-burger-dropdown__mobile-pill-wrap { order: 2; }
  .ai-burger-dropdown__list             { order: 3; flex-shrink: 0; }
  .ai-burger-dropdown__header--user     { order: 4; }
  .ai-burger-dropdown__mobile-spacer    { order: 5; }

  /* Guest/logged-in advisor card always at bottom */
  a.ai-burger-dropdown__header          { order: 6; }

  .ai-burger-dropdown__list {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  /* Each item wrapper (Figma 366:19339 — x:8, width:295, height:44) */
  .ai-burger-dropdown__item {
    padding: 0 8px 0;
  }

  /* Link row (Figma 366:19341 Content — height:40, text+icon at x:12,y:8) */
  .ai-burger-dropdown__link {
    display: flex;
    align-items: center;
    gap: 8px;
    /* x:12 from item left = 12px padding-left (item has x:8 in panel, content x:12 in item) */
    padding: 8px 12px;
    height: 44px;
    border-radius: 8px;
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 100%;
    font: inherit;
    text-align: left;
    transition: background 0.15s ease;
  }

  .ai-burger-dropdown__link:hover {
    background: rgba(255, 255, 255, 0.06);
  }

  /* Icon (Figma 366:19343 — width:20, height:20) */
  .ai-burger-dropdown__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ai-burger-dropdown__icon img {
    filter: none;
    width: 16px;
    height: 16px;
  }

  /* Inline SVGs using currentColor */
  .ai-burger-dropdown__icon svg {
    color: #D9D9D9;
  }

  .ai-burger-dropdown__icon svg path {
    stroke: #D9D9D9;
  }

  /* Label (Figma 366:19344 text — height:24, color white) */
  .ai-burger-dropdown__label {
    font-family: 'Neue Text', 'Neue', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #D9D9D9;
  }

  /* Divider */
  .ai-burger-dropdown__divider {
    height: 1px;
    background: #262626;
    margin: 4px 8px;
    padding: 0;
  }

  /* Spacer — pushes footer card to bottom */
  .ai-burger-dropdown__mobile-spacer {
    display: block;
    flex: 1;
    min-height: 12px;
  }

  /* ── Footer cards (Figma 366:19374/19375 — advisor + user card at bottom) ── */
  a.ai-burger-dropdown__header,
  .ai-burger-dropdown__header.ai-burger-dropdown__header--user {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    /* Figma 366:19376 — avatar group x:12, y:16 within 295×64 card */
    padding: 12px 12px;
    /* Card bg: #262626 (Gray/900), border-radius: 12px, margin: 0 8px → width 295px */
    background: #262626;
    border-radius: 12px;
    margin: 12px 8px 8px;
    border-bottom: none !important;
    text-decoration: none;
    flex-shrink: 0;
  }

  .ai-burger-dropdown__header-label {
    /* Figma 366:19379 text — x:112 (112-12=100 from card left, which is avatar 104px) */
    font-family: 'Neue Text', 'Neue', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: #ffffff;
  }

  /* Avatar stack in the footer card — same size 32×32 as Figma 366:19377 */
  .ai-burger-dropdown__avatars {
    margin-left: 12px;
  }

  .ai-burger-dropdown__avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-color: #262626 !important;
  }

  /* Logged-in user avatar */
  .ai-burger-dropdown__user-avatar-wrap {
    border-color: rgba(255, 255, 255, 0.12) !important;
  }

  .ai-burger-dropdown__user-avatar-fallback {
    background: #383838;
    color: #ffffff;
  }

  .ai-burger-dropdown__user-name {
    color: #ffffff;
  }

  .ai-burger-dropdown__user-email {
    color: #757575;
  }

  /* Body scroll lock when sidebar is open */
  body.ai-burger-sidebar--open {
    overflow: hidden !important;
  }

  /* ── Close button (Figma 366:19380 — x:327, y:12, 36×36px) ──
     Injected into <body> by JS so position:fixed is viewport-relative */
  #ai-burger-sidebar-close {
    display: none;
    position: fixed;
    /* x:327 in 375px frame */
    left: 327px;
    /* y:12 */
    top: 12px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 9402;
  }

  #ai-burger-sidebar-close.ai-burger-sidebar-close--open {
    display: flex;
  }


} /* end @media (max-width: 1027px) */

/* =============================================================================
   AI-WISE NAV TAB BAR  (navMode='tabs')
   Figma node 418:17166 — My collection | Inquiries | Create proposal
   ============================================================================= */

/* Container: flex row, gap 8px, aligns to full height */
.ai-navbar-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  
}

/* Tab base
   Figma _Dropdown header navigation button (418:17170 / 418:17173):
   h 40px, px 6px, py 4px, overflow hidden
   font: Neue Plak Regular, 16px, line-height 24px
   inactive color: #757575 (#757575 = --colors/gray-(light-mode)/500)
   no bottom border when inactive */
.ai-navbar-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 4px 6px;
  overflow: hidden;
  font-family: 'Neue', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #757575;
  text-decoration: none;
  white-space: nowrap;
  /* button reset */
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

/* Active tab (Figma 418:17167):
   color: white (#ffffff = --colors/base/white)
   border-bottom: 1px solid white */
.ai-navbar-tab--active {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

.ai-navbar-tab:hover:not(.ai-navbar-tab--active) {
  color: #a8a8a8;
  text-decoration: none;
}

@media (max-width: 1027px) {
  .ai-navbar-tabs {
    gap: 4px;
  }

  .ai-navbar-tab {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .ai-navbar-tabs {
    display: none;
  }
}