@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');._wrap_1cg7e_1 {
  position: relative;
}

._avatar_1cg7e_9 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--border-subtle);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  padding: 0;
}

._avatar_1cg7e_9:hover {
  border-color: #4030F0;
  box-shadow: 0 0 0 3px rgba(64, 48, 240, 0.14);
}

._avatarImg_1cg7e_49 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

._initials_1cg7e_63 {
  font-size: 13px;
  font-weight: var(--fw-bold, 700);
  color: #fff;
  line-height: 1;
  user-select: none;
}

/* ── Dropdown menu ── */
._menu_1cg7e_81 {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  animation: _menuIn_1cg7e_1 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 600;
}

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

._menuHeader_1cg7e_119 {
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._menuName_1cg7e_133 {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}

._menuEmail_1cg7e_145 {
  font-size: 12px;
  color: var(--text-muted);
  word-break: break-all;
}

._menuDivider_1cg7e_157 {
  height: 1px;
  background: var(--border-subtle);
}

._menuItem_1cg7e_167 {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 11px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: var(--fw-medium);
  font-family: var(--font-text);
  color: var(--text-body);
  text-align: left;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}

._menuItem_1cg7e_167:hover {
  background: var(--surface-sunken);
  color: var(--text-strong);
}
._btn_1bpx0_1 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #4030F0;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 7px 16px 7px 7px;
  font-family: var(--font-text, system-ui, sans-serif);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: opacity 0.18s, transform 0.18s;
  white-space: nowrap;
}

._btn_1bpx0_1:hover {
  opacity: 0.86;
  transform: translateY(-1px);
}

._btn_1bpx0_1:active {
  transform: translateY(0);
}

._icon_1bpx0_55 {
  flex-shrink: 0;
  overflow: visible;
}

@keyframes _ring-out-1_1bpx0_1 {
  0%   { r: 54; opacity: 0.55; }
  100% { r: 86; opacity: 0; }
}

@keyframes _ring-out-2_1bpx0_1 {
  0%   { r: 54; opacity: 0.28; }
  100% { r: 106; opacity: 0; }
}

._ring1_1bpx0_85 { animation: _ring-out-1_1bpx0_1 2.6s ease-out infinite; }
._ring2_1bpx0_87 { animation: _ring-out-2_1bpx0_1 2.6s ease-out infinite 0.9s; }

@keyframes _sparkle-spin_1bpx0_1 {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(45deg) scale(1.10); }
  100% { transform: rotate(90deg) scale(1); }
}

._sparkle_1bpx0_103 {
  transform-origin: 50px 50px;
  animation: _sparkle-spin_1bpx0_1 3.2s ease-in-out infinite;
}
/* ── Outer sticky wrapper ── */
._outer_1s6jq_3 {
  position: sticky;
  top: 16px;
  z-index: 200;
  padding: 0 24px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

/* Non-sticky variant — used on destination pages so section nav can own the top.
   Absolute so the hero fills the full viewport from top; nav overlays it. */
._outerScrollable_1s6jq_31 {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
}

/* Flow variant — used on itinerary pages: nav is in normal document flow and
   scrolls away as the user scrolls. Not sticky, not overlaid.
   padding-top mirrors the sticky top:16px gap so the pill appears to float. */
._outerFlow_1s6jq_51 {
  position: relative;
  top: 0;
  padding: 16px 24px 0;
  margin-bottom: 24px;
}

/* ── Floating pill ── */
._pill_1s6jq_67 {
  pointer-events: auto;
  width: 100%;
  max-width: 1160px;
  display: flex;
  align-items: center;
  gap: 24px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 10px 12px 10px 22px;
  box-shadow: var(--shadow-md);
}

/* ── Logo ── */
._logo_1s6jq_101 {
  flex-shrink: 0;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: opacity var(--dur-fast) var(--ease-out);
}

._logo_1s6jq_101:hover {
  opacity: 0.8;
}

._logoImg_1s6jq_125 {
  height: 28px;
  width: auto;
  display: block;
}

/* ── Desktop nav links ── */
._links_1s6jq_139 {
  display: flex;
  gap: 2px;
  flex: 1;
  margin-left: 8px;
  align-items: center;
}

._link_1s6jq_139 {
  font-size: 14.5px;
  font-weight: var(--fw-medium);
  font-family: var(--font-text);
  color: var(--text-body);
  text-decoration: none;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

._link_1s6jq_139:hover {
  background: var(--surface-sunken);
  color: var(--text-strong);
}

._linkActive_1s6jq_197 {
  background: var(--surface-sunken);
  color: var(--text-strong);
}

/* "Plan a trip" accent link */
._linkPlan_1s6jq_209 {
  color: var(--brand);
  font-weight: var(--fw-semibold);
}

._linkPlan_1s6jq_209:hover {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

/* Holiday Intelligence — always visible in nav */
._linkIntelligence_1s6jq_231 {
  color: var(--brand);
  font-weight: var(--fw-semibold);
}

._linkIntelligence_1s6jq_231:hover {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

/* ── Discover dropdown trigger ── */
._discoverWrapper_1s6jq_253 {
  position: relative;
}

/* Bridge the 10px gap between the trigger button and the megaDropdown.
   Without this, moving the cursor from the button into the gap fires
   onMouseLeave on the wrapper and closes the menu prematurely. */
._discoverWrapper_1s6jq_253::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 10px; /* must match top: calc(100% + 10px) on .megaDropdown */
}

._discoverTrigger_1s6jq_285 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-text);
}

._chevron_1s6jq_305 {
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}

._chevronOpen_1s6jq_315 {
  transform: rotate(180deg);
}

/* ═══════════════════════════════════════════════════════════════
   DISCOVER MEGA-DROPDOWN — two-panel layout
   ═══════════════════════════════════════════════════════════════ */

._megaDropdown_1s6jq_279 {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 860px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  z-index: 300;
  display: flex;
  overflow: hidden;
}

/* ── Left sidebar ── */
._megaSidebar_1s6jq_361 {
  width: 200px;
  flex-shrink: 0;
  background: var(--surface-sunken);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  padding: 12px 0 12px;
}

/* Search */
._megaSearch_1s6jq_383 {
  position: relative;
  margin: 0 10px 8px;
}

._megaSearchIcon_1s6jq_393 {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

._megaSearchInput_1s6jq_411 {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px 7px 30px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font-family: var(--font-text);
  font-size: var(--fs-sm);
  color: var(--text-body);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}

._megaSearchInput_1s6jq_411:focus {
  border-color: var(--brand);
}

._megaSearchInput_1s6jq_411::placeholder {
  color: var(--text-muted);
}

/* Region list */
._megaRegionList_1s6jq_457 {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
}

._megaRegionItem_1s6jq_473 {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-body);
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  position: relative;
}

._megaRegionItem_1s6jq_473:hover {
  background: var(--surface-card);
  color: var(--text-strong);
}

._megaRegionActive_1s6jq_521 {
  background: var(--surface-card);
  color: var(--brand);
  font-weight: var(--fw-semibold);
}

._megaRegionActive_1s6jq_521::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: var(--brand);
  border-radius: 0 2px 2px 0;
}

._megaRegionIcon_1s6jq_555 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  flex-shrink: 0;
  color: var(--text-muted);
}

._megaRegionActive_1s6jq_521 ._megaRegionIcon_1s6jq_555 {
  color: var(--brand);
}

._megaRegionLabel_1s6jq_581 {
  flex: 1;
}

._megaRegionArrow_1s6jq_589 {
  color: var(--text-muted);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}

._megaRegionItem_1s6jq_473:hover ._megaRegionArrow_1s6jq_589,
._megaRegionActive_1s6jq_521 ._megaRegionArrow_1s6jq_589 {
  opacity: 1;
}

/* View all regions button */
._megaViewAllBtn_1s6jq_615 {
  margin: 8px 10px 0;
  padding: 7px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: none;
  cursor: pointer;
  font-family: var(--font-text);
  font-size: var(--fs-xs, 12px);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-align: center;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

._megaViewAllBtn_1s6jq_615:hover {
  background: var(--surface-card);
  color: var(--brand);
  border-color: var(--brand);
}

/* ── Right panel ── */
._megaPanel_1s6jq_663 {
  flex: 1;
  min-width: 0;
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Panel header */
._megaPanelHeader_1s6jq_683 {
  display: flex;
  align-items: center;
  gap: 7px;
}

._megaPanelFlag_1s6jq_695 {
  font-size: 18px;
  line-height: 1;
}

._megaPanelTitle_1s6jq_705 {
  font-family: var(--font-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}

._megaPanelArrow_1s6jq_719 {
  color: var(--text-muted);
  margin-left: 2px;
}

/* 4-column destination cards grid */
._megaDestGrid_1s6jq_731 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

._megaDestCard_1s6jq_743 {
  text-decoration: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  display: flex;
  flex-direction: column;
}

._megaDestCard_1s6jq_743:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

._megaDestImg_1s6jq_777 {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-sunken);
}

._megaDestImg_1s6jq_777 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--ease-out);
}

._megaDestCard_1s6jq_743:hover ._megaDestImg_1s6jq_777 img {
  transform: scale(1.05);
}

._megaDestInfo_1s6jq_815 {
  padding: 7px 9px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

._megaDestName_1s6jq_829 {
  font-family: var(--font-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._megaDestSub_1s6jq_849 {
  font-family: var(--font-text);
  font-size: var(--fs-xs, 11px);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* View all destinations link */
._megaViewAllDests_1s6jq_869 {
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--brand);
  padding: 0;
  text-align: left;
  transition: opacity var(--dur-fast) var(--ease-out);
}

._megaViewAllDests_1s6jq_869:hover {
  opacity: 0.75;
}

/* AI guide banner */
._megaAiBanner_1s6jq_905 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, var(--brand-soft, #ebe9fe) 0%, rgba(139, 92, 246, 0.08) 100%);
  border: 1px solid var(--brand-soft, #ebe9fe);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
}

._megaAiContent_1s6jq_927 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

._megaAiIcon_1s6jq_941 {
  font-size: 18px;
  flex-shrink: 0;
  color: var(--brand);
}

._megaAiTitle_1s6jq_953 {
  font-family: var(--font-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  margin: 0;
  white-space: nowrap;
}

._megaAiSub_1s6jq_971 {
  font-family: var(--font-text);
  font-size: var(--fs-xs, 11px);
  color: var(--text-muted);
  margin: 2px 0 0;
  line-height: 1.4;
}

._megaAiBtn_1s6jq_987 {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

._megaAiBtn_1s6jq_987:hover {
  background: #7c3aed;
  box-shadow: 0 4px 14px rgba(109, 40, 217, 0.35);
}

/* ── Right controls ── */
._right_1s6jq_1031 {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Primary CTA — Login (near-black) */
._loginBtn_1s6jq_1049 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  font-family: var(--font-text);
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--ink-900, #0c0e12);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

._loginBtn_1s6jq_1049:hover {
  background: #1e2128;
  box-shadow: 0 4px 16px rgba(12, 14, 18, 0.28);
}

/* ── Hamburger (mobile only) ── */
._hamburger_1s6jq_1091 {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  align-items: center;
  justify-content: center;
  color: var(--text-body);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

._hamburger_1s6jq_1091:hover {
  background: var(--surface-sunken);
}

/* ── Mobile drawer ──
   Absolutely positioned so opening it overlays the page instead of pushing
   content down — the header's own box height stays fixed to the pill. */
._drawer_1s6jq_1133 {
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* left:0, right:0, AND an explicit width are over-constrained for an
     absolutely-positioned box — per spec, 'right' gets silently ignored,
     which left the drawer flush against the left edge instead of centered.
     Auto inline margins resolve the over-constraint by centering instead. */
  margin: 8px auto 0;
  width: calc(100% - 48px);
  max-width: 1160px;
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--dur-slow) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

._drawerOpen_1s6jq_1179 {
  pointer-events: auto;
  max-height: 80vh;
  opacity: 1;
  overflow-y: auto;
}

._drawerLinks_1s6jq_1193 {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-5) var(--space-6);
  gap: 2px;
}

/* Section label inside drawer (e.g. "Discover") */
._drawerRegionLabel_1s6jq_1209 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  padding: var(--space-3) 0 var(--space-1);
  display: block;
}

._drawerSectionLabel_1s6jq_1225 {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--space-3) 0 var(--space-1);
}

._drawerLink_1s6jq_1193 {
  display: block;
  width: 100%;
  text-align: left;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  font-family: var(--font-text);
  color: var(--text-body);
  text-decoration: none;
  padding: var(--space-3) 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}

._drawerLink_1s6jq_1193:hover {
  color: var(--text-strong);
}

._drawerBook_1s6jq_1283 {
  margin-top: var(--space-4);
  width: 100%;
  padding: 13px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--ink-900, #0c0e12);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  font-family: var(--font-text);
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

._drawerBook_1s6jq_1283:hover {
  background: #1e2128;
}

/* ── Drawer: logged-in user row ── */
._drawerUserRow_1s6jq_1325 {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

._drawerUserName_1s6jq_1345 {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}

._drawerSignOut_1s6jq_1357 {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-align: left;
  padding: 0;
  font-family: var(--font-text);
  transition: color var(--dur-fast) var(--ease-out);
}

._drawerSignOut_1s6jq_1357:hover {
  color: #dc2626;
}

/* Hide Login button in Nav when on mobile (avatar shown in drawer) */
@media (max-width: 768px) {
  ._loginBtn_1s6jq_1049 {
    display: none;
  }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  ._links_1s6jq_139 {
    display: none;
  }

  ._loginBtn_1s6jq_1049 {
    display: none;
  }

  ._hamburger_1s6jq_1091 {
    display: flex;
  }
}

/* nav-outer-hero-mobile / nav-outer-static-mobile: these are literal
   (non-module) classes applied alongside the CSS-module ones — see
   responsive.css, which is a plain stylesheet. Defining them here would get
   hashed by CSS Modules and silently fail to match the JSX className. */

/* Small screens — tighten pill padding */
@media (max-width: 480px) {
  ._outer_1s6jq_3 {
    padding: 0 12px;
    margin-bottom: 16px;
  }

  ._pill_1s6jq_67 {
    padding: 8px 8px 8px 16px;
    gap: 12px;
  }

  ._logoImg_1s6jq_125 {
    height: 24px;
  }
}

/* ── Drawer plan link accent ── */
._drawerLinkPlan_1s6jq_1481 {
  color: var(--brand);
  font-weight: var(--fw-semibold);
}

._drawerLinkIntelligence_1s6jq_1491 {
  color: var(--brand);
  font-weight: var(--fw-semibold);
}

/* ── Logo separator ── */
._logoSep_1s6jq_1503 {
  width: 1px;
  height: 20px;
  background: var(--border-subtle, #e5e7eb);
  flex-shrink: 0;
  align-self: center;
  margin: 0 -14px;
}

/* ── Icon inside nav links ── */
._linkIcon_1s6jq_1523 {
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity var(--dur-fast) var(--ease-out);
}

._link_1s6jq_139:hover ._linkIcon_1s6jq_1523,
._linkActive_1s6jq_197 ._linkIcon_1s6jq_1523 {
  opacity: 1;
}

/* ── Notification bell button (logged-in only) ── */
._notifBtn_1s6jq_1547 {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

._notifBtn_1s6jq_1547:hover {
  background: var(--surface-sunken);
  color: var(--text-strong);
}

._notifDot_1s6jq_1591 {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  pointer-events: none;
}
._footer_odbyk_1 {
  background: var(--surface-inverse);
  padding: 56px 0 28px;
  margin-top: 0;
}

._inner_odbyk_13 {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

._top_odbyk_25 {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  margin-bottom: var(--space-10);
}

/* ── Brand ── */
._brand_odbyk_43 {
  max-width: 240px;
}

._logo_odbyk_51 {
  margin-bottom: var(--space-2);
}

._logoImg_odbyk_59 {
  height: 26px;
  width: auto;
  display: block;
  opacity: 0.92;
}

._tagline_odbyk_73 {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.4);
  line-height: var(--lh-relaxed);
}

/* ── Nav columns ── */
._cols_odbyk_87 {
  display: flex;
  gap: 44px;
  flex-wrap: wrap;
}

._col_odbyk_87 {}

._colHeading_odbyk_103 {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  margin-bottom: var(--space-4);
}

._colLink_odbyk_121 {
  display: block;
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.58);
  text-decoration: none;
  margin-bottom: var(--space-2);
  transition: color var(--dur-fast) var(--ease-out);
}

._colLink_odbyk_121:hover {
  color: rgba(255,255,255,0.88);
}

/* ── Bottom bar ── */
._bottom_odbyk_149 {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: var(--space-6);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--fs-overline);
  color: rgba(255,255,255,0.50);
}

._legal_odbyk_171 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

._legal_odbyk_171 a {
  color: rgba(255,255,255,0.50);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

._legal_odbyk_171 a:hover {
  color: rgba(255,255,255,0.82);
}

._dot_odbyk_203 {
  opacity: 0.4;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  ._top_odbyk_25 {
    flex-direction: column;
    gap: var(--space-8);
  }

  ._brand_odbyk_43 {
    max-width: 100%;
  }

  ._cols_odbyk_87 {
    gap: var(--space-8);
  }

  ._bottom_odbyk_149 {
    flex-direction: column;
    gap: var(--space-2);
  }
}
/* ── Overlay ── */
._overlay_9kp9y_3 {
  position: fixed;
  inset: 0;
  background: rgba(12, 14, 18, 0.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: _fadeIn_9kp9y_1 0.18s ease;
}

@keyframes _fadeIn_9kp9y_1 {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Card ── */
._card_9kp9y_43 {
  position: relative;
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
  border-radius: 20px;
  padding: 32px 28px 28px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.22);
  animation: _cardIn_9kp9y_1 0.26s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 90svh;
  overflow-y: auto;
}

@keyframes _cardIn_9kp9y_1 {
  from { transform: scale(0.94) translateY(16px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);    opacity: 1; }
}

/* ── Close ── */
._closeBtn_9kp9y_83 {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--surface-sunken, #f5f6f7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted, #6b7280);
  transition: background var(--dur-fast, 0.12s) ease, color var(--dur-fast, 0.12s) ease;
  flex-shrink: 0;
}

._closeBtn_9kp9y_83:hover {
  background: var(--border-subtle, rgba(0,0,0,0.08));
  color: var(--text-strong, #0c0e12);
}

/* ── Logo ── */
._logoWrap_9kp9y_131 {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

._logo_9kp9y_131 {
  height: 26px;
  width: auto;
}

/* ── Back button ── */
._backBtn_9kp9y_155 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: var(--fw-medium, 500);
  color: var(--text-muted, #6b7280);
  margin-bottom: 16px;
  padding: 0;
  transition: color var(--dur-fast, 0.12s) ease;
}

._backBtn_9kp9y_155:hover {
  color: var(--text-strong, #0c0e12);
}

/* ── Headings ── */
._title_9kp9y_195 {
  font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
  font-size: 22px;
  font-weight: var(--fw-bold, 700);
  color: var(--text-strong, #0c0e12);
  margin: 0 0 8px;
  line-height: 1.2;
  text-align: center;
}

._sub_9kp9y_215 {
  font-size: 14px;
  color: var(--text-muted, #6b7280);
  line-height: 1.55;
  margin: 0 0 24px;
  text-align: center;
}

/* ── Google button wrapper ── */
._googleWrap_9kp9y_233 {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

._googleBtn_9kp9y_245 {
  /* GIS renders its own button inside here; we size the container */
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Force GIS button to fill container width */
._googleBtn_9kp9y_245 > div,
._googleBtn_9kp9y_245 > iframe {
  width: 100% !important;
}

/* ── Divider ── */
._divider_9kp9y_277 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  color: var(--text-muted, #6b7280);
  font-size: 12px;
  font-weight: var(--fw-medium, 500);
}

._divider_9kp9y_277::before,
._divider_9kp9y_277::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle, rgba(0,0,0,0.08));
}

/* ── Phone row ── */
._phoneRow_9kp9y_315 {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

._dialSelect_9kp9y_327 {
  flex-shrink: 0;
  width: 96px;
  height: 48px;
  border: 1px solid var(--border-strong, rgba(0,0,0,0.18));
  border-radius: var(--radius-lg, 12px);
  padding: 0 8px 0 10px;
  font-size: 14px;
  font-family: var(--font-text);
  color: var(--text-strong, #0c0e12);
  background: var(--surface-card, #fff);
  cursor: pointer;
  transition: border-color var(--dur-fast, 0.12s) ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  padding-right: 22px;
}

._dialSelect_9kp9y_327:focus {
  outline: none;
  border-color: #4030F0;
  box-shadow: 0 0 0 3px rgba(64, 48, 240, 0.12);
}

._phoneInput_9kp9y_379 {
  flex: 1;
  height: 48px;
  border: 1px solid var(--border-strong, rgba(0,0,0,0.18));
  border-radius: var(--radius-lg, 12px);
  padding: 0 16px;
  font-size: 15px;
  font-family: var(--font-text);
  color: var(--text-strong, #0c0e12);
  background: var(--surface-card, #fff);
  transition: border-color var(--dur-fast, 0.12s) ease, box-shadow var(--dur-fast, 0.12s) ease;
}

._phoneInput_9kp9y_379::placeholder {
  color: var(--text-placeholder, #9ca3af);
}

._phoneInput_9kp9y_379:focus {
  outline: none;
  border-color: #4030F0;
  box-shadow: 0 0 0 3px rgba(64, 48, 240, 0.12);
}

/* ── Primary button ── */
._primary_9kp9y_427 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  border: none;
  border-radius: var(--radius-pill, 9999px);
  background: #4030F0;
  color: #fff;
  font-size: 15px;
  font-weight: var(--fw-semibold, 600);
  font-family: var(--font-text);
  cursor: pointer;
  transition: background 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
  margin-top: 4px;
}

._primary_9kp9y_427:hover:not(:disabled) {
  background: #3526d4;
  box-shadow: 0 8px 28px rgba(64, 48, 240, 0.36);
}

._primary_9kp9y_427:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Spinner inside button ── */
._spinner_9kp9y_487 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  animation: _spin_9kp9y_487 0.7s linear infinite;
  display: inline-block;
}

@keyframes _spin_9kp9y_487 {
  to { transform: rotate(360deg); }
}

/* ── Error (global, centered — Google auth failure) ── */
._error_9kp9y_517 {
  font-size: 13px;
  color: #dc2626;
  margin: 4px 0 10px;
  text-align: center;
}

/* ── Inline field error ── */
._fieldError_9kp9y_533 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: var(--fw-medium, 500);
  color: #dc2626;
  margin: 5px 0 0;
  line-height: 1.4;
}

/* ── Input error state ── */
._inputError_9kp9y_557,
._inputError_9kp9y_557:focus {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

/* ── Field wrapper: input + its inline error stacked ── */
._fieldWrap_9kp9y_571 {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── Legal ── */
._legal_9kp9y_587 {
  font-size: 11.5px;
  color: var(--text-placeholder, #9ca3af);
  text-align: center;
  margin-top: 14px;
  line-height: 1.5;
}

._legal_9kp9y_587 a {
  color: var(--text-muted, #6b7280);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── OTP section ── */
._demoBanner_9kp9y_617 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: rgba(64, 48, 240, 0.06);
  border: 1px solid rgba(64, 48, 240, 0.18);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px;
  color: #4030F0;
  margin-bottom: 20px;
  text-align: center;
}

._otpRow_9kp9y_647 {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
}

._otpBox_9kp9y_661 {
  width: 46px;
  height: 56px;
  border: 1.5px solid var(--border-strong, rgba(0,0,0,0.18));
  border-radius: 12px;
  text-align: center;
  font-size: 22px;
  font-weight: var(--fw-bold, 700);
  color: var(--text-strong, #0c0e12);
  background: var(--surface-card, #fff);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
  font-family: var(--font-text);
  caret-color: #4030F0;
}

._otpBox_9kp9y_661:focus {
  outline: none;
  border-color: #4030F0;
  box-shadow: 0 0 0 3px rgba(64, 48, 240, 0.12);
}

._otpBoxFilled_9kp9y_703 {
  border-color: #4030F0;
  background: rgba(64, 48, 240, 0.04);
}

._resend_9kp9y_713 {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  margin-top: 14px;
}

._resendBtn_9kp9y_727 {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: var(--fw-semibold, 600);
  color: #4030F0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

._resendBtn_9kp9y_727:hover {
  color: #3526d4;
}

/* ── Profile form ── */
._profileForm_9kp9y_761 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._nameRow_9kp9y_773 {
  display: flex;
  gap: 10px;
}

._input_9kp9y_557 {
  width: 100%;
  height: 48px;
  border: 1px solid var(--border-strong, rgba(0,0,0,0.18));
  border-radius: var(--radius-lg, 12px);
  padding: 0 16px;
  font-size: 15px;
  font-family: var(--font-text);
  color: var(--text-strong, #0c0e12);
  background: var(--surface-card, #fff);
  box-sizing: border-box;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

._input_9kp9y_557::placeholder {
  color: var(--text-placeholder, #9ca3af);
}

._input_9kp9y_557:focus {
  outline: none;
  border-color: #4030F0;
  box-shadow: 0 0 0 3px rgba(64, 48, 240, 0.12);
}

._inputFull_9kp9y_831 {
  width: 100%;
}

/* ── Mobile — bottom sheet ── */
@media (max-width: 480px) {
  ._overlay_9kp9y_3 {
    align-items: flex-end;
    padding: 0;
  }

  ._card_9kp9y_43 {
    padding: 28px 20px calc(24px + env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
    max-width: 100%;
    /* Slide up from bottom */
    animation: _cardInMobile_9kp9y_1 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes _cardInMobile_9kp9y_1 {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  ._otpBox_9kp9y_661 {
    width: 40px;
    height: 50px;
    font-size: 20px;
  }

  ._otpRow_9kp9y_647 {
    gap: 6px;
  }
}
/* ── Overlay / backdrop ─────────────────────────────────────────────────── */
._overlay_1g27n_3 {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: flex-end;        /* slide-up from bottom on mobile */
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: background 0.28s ease;
  pointer-events: none;
}

._overlay_1g27n_3._open_1g27n_27 {
  background: rgba(0, 0, 0, 0.44);
  pointer-events: all;
}

/* ── Card ───────────────────────────────────────────────────────────────── */
._card_1g27n_39 {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: #ffffff;
  border-radius: 24px 24px 0 0;
  padding: 32px 28px 28px;
  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.12), 0 -1px 0 rgba(0, 0, 0, 0.06);

  /* slide-up enter animation */
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

._overlay_1g27n_3._open_1g27n_27 ._card_1g27n_39 {
  transform: translateY(0);
}

/* ── Close button ───────────────────────────────────────────────────────── */
._closeBtn_1g27n_77 {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #f3f4f6;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

._closeBtn_1g27n_77:hover {
  background: #e5e7eb;
  color: #111827;
}

/* ── Maya identity ──────────────────────────────────────────────────────── */
._mayaWrap_1g27n_123 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

._mayaAvatar_1g27n_137 {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand, #4030F0) 0%, #7c3aed 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(64, 48, 240, 0.32);
}

/* sparkle icon animates inside the avatar */
._sparkle_1g27n_163 {
  transform-origin: center;
  transform-box: fill-box;
  animation: _sparkleSpin_1g27n_1 6s linear infinite;
}

@keyframes _sparkleSpin_1g27n_1 {
  to { transform: rotate(360deg); }
}

._onlineBadge_1g27n_183 {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #15803d;
  letter-spacing: 0.02em;
}

._onlineDot_1g27n_211 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: _pulse_1g27n_1 1.8s ease-in-out infinite;
}

@keyframes _pulse_1g27n_1 {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  50%       { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
}

/* ── Heading & subtitle ─────────────────────────────────────────────────── */
._title_1g27n_241 {
  font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-strong, #0c0e12);
  margin-bottom: 8px;
  line-height: 1.2;
}

._subtitle_1g27n_259 {
  font-size: 13.5px;
  color: var(--text-muted, #6b7280);
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 360px;
}

/* ── Option cards ───────────────────────────────────────────────────────── */
._options_1g27n_277 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

._option_1g27n_277 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1.5px solid rgba(0, 0, 0, 0.09);
  background: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.14s ease;
}

._option_1g27n_277:hover {
  border-color: rgba(64, 48, 240, 0.25);
  box-shadow: 0 4px 18px rgba(64, 48, 240, 0.10);
  transform: translateY(-1px);
}

/* Voice option — darker card */
._optionVoice_1g27n_331 {
  background: var(--text-strong, #0c0e12);
  border-color: transparent;
}

._optionVoice_1g27n_331:hover {
  border-color: transparent;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.24);
}

/* Icon circle */
._optIconWrap_1g27n_353 {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(64, 48, 240, 0.08);
  color: var(--brand, #4030F0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Voice icon circle — inverted */
._optIconVoice_1g27n_379 {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Text column */
._optBody_1g27n_391 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

._optLabel_1g27n_407 {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-strong, #0c0e12);
  display: block;
}

._optionVoice_1g27n_331 ._optLabel_1g27n_407 {
  color: #fff;
}

._optSub_1g27n_429 {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  display: block;
}

._optionVoice_1g27n_331 ._optSub_1g27n_429 {
  color: rgba(255, 255, 255, 0.55);
}

._optChevron_1g27n_449 {
  color: rgba(0, 0, 0, 0.22);
  flex-shrink: 0;
  transition: transform 0.14s ease;
}

._option_1g27n_277:hover ._optChevron_1g27n_449 {
  transform: translateX(2px);
}

._optionVoice_1g27n_331 ._optChevron_1g27n_449 {
  color: rgba(255, 255, 255, 0.35);
}

/* ── Divider ─────────────────────────────────────────────────────────────── */
._divider_1g27n_479 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

._divLine_1g27n_493 {
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

._divText_1g27n_505 {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #9ca3af;
  white-space: nowrap;
}

/* ── Trending items ──────────────────────────────────────────────────────── */
._trending_1g27n_525 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

._trendItem_1g27n_539 {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
  padding: 4px 0;
}

._trendItem_1g27n_539:hover ._trendText_1g27n_555 {
  color: var(--text-strong, #0c0e12);
}

._trendDot_1g27n_563 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand, #4030F0);
  opacity: 0.45;
  flex-shrink: 0;
  margin-top: 5px;
}

._trendText_1g27n_555 {
  font-size: 12.5px;
  color: var(--text-muted, #6b7280);
  line-height: 1.5;
  transition: color 0.14s ease;
}

._trendText_1g27n_555 strong {
  color: var(--text-body, #374151);
  font-weight: 600;
}

/* ── Trust footer ────────────────────────────────────────────────────────── */
._trust_1g27n_609 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #9ca3af;
  margin-top: 4px;
}

/* ── Desktop: centred bottom-sheet style (not slide-up) ─────────────────── */
@media (min-width: 600px) {
  ._overlay_1g27n_3 {
    align-items: center;
  }

  ._card_1g27n_39 {
    border-radius: 20px;
    padding: 36px 32px 30px;
    max-width: 420px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);

    /* desktop: scale+fade instead of slide */
    transform: scale(0.94) translateY(0);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.28s ease;
  }

  ._overlay_1g27n_3._open_1g27n_27 ._card_1g27n_39 {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
/* ── AI FAB — fixed bottom-right ────────────────────────────────────────────── */

._fab_fkdhf_5 {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 900;

  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  cursor: pointer;

  background: #4030F0;
  box-shadow: 0 12px 32px rgba(64, 48, 240, 0.44);

  display: flex;
  align-items: center;
  justify-content: center;

  /* Hidden by default — scale to 0, invisible */
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition:
    opacity   0.28s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    background var(--dur-fast, 0.15s) ease,
    box-shadow 0.28s ease;
}

/* Shown state */
._fabVisible_fkdhf_67 {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

._fab_fkdhf_5:hover {
  background: #3526d4;
  box-shadow: 0 20px 48px rgba(64, 48, 240, 0.52);
}

._fab_fkdhf_5:hover ._tooltip_fkdhf_89 {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

._fab_fkdhf_5:active {
  transform: scale(0.94);
}

/* ── Sparkle icon — breathes gently ── */
._icon_fkdhf_109 {
  flex-shrink: 0;
  overflow: visible;
}

._sparkle_fkdhf_119 {
  transform-origin: 50px 50px;
  animation: _sparkleBreathe_fkdhf_1 3.6s ease-in-out infinite;
}

@keyframes _sparkleBreathe_fkdhf_1 {
  0%, 100% { transform: scale(1)    rotate(0deg);  opacity: 1; }
  50%       { transform: scale(0.82) rotate(22deg); opacity: 0.6; }
}

/* ── Tooltip ── */
._tooltip_fkdhf_89 {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  transition:
    opacity   0.18s ease,
    transform 0.18s ease;

  background: var(--ink-900, #0c0e12);
  color: #fff;
  font-family: var(--font-text, sans-serif);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 999px;
  pointer-events: none;
}

._tooltip_fkdhf_89::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink-900, #0c0e12);
}

/* ── Mobile ── */
@media (max-width: 768px) {
  ._fab_fkdhf_5 {
    width: 56px;
    height: 56px;
    bottom: 24px;
    right: 20px;
  }

  ._icon_fkdhf_109 {
    width: 24px;
    height: 24px;
  }
}
/* ── Destination page layout — nav overlays hero ── */
._destLayout_1ud5f_3 {
  position: relative;
}

/* ── Page loader ── */
._loader_1ud5f_13 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--surface-page);
}

._loaderSpinner_1ud5f_29 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--border-subtle);
  border-top-color: var(--brand);
  animation: _spin_1ud5f_1 0.75s linear infinite;
}

@keyframes _spin_1ud5f_1 {
  to { transform: rotate(360deg); }
}

/* ── 404 ── */
._notFound_1ud5f_57 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-24) var(--gutter);
}

._notFound_1ud5f_57 h1 {
  font-size: 80px;
  font-weight: var(--fw-heavy);
  color: var(--border-strong);
  line-height: 1;
}

._notFound_1ud5f_57 p {
  font-size: var(--fs-body-lg);
  color: var(--text-muted);
}

._notFound_1ud5f_57 a {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--brand);
  text-decoration: underline;
}

/* ── Auth modal ── */
._authOverlay_1ud5f_119 {
  position: fixed;
  inset: 0;
  background: rgba(12,14,18,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: _fadeIn_1ud5f_1 var(--dur-base) var(--ease-out);
}

@keyframes _fadeIn_1ud5f_1 {
  from { opacity: 0; }
  to   { opacity: 1; }
}

._authCard_1ud5f_157 {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 28px 24px 32px;
  width: 100%;
  max-width: 360px;
  box-shadow: var(--shadow-xl);
  text-align: center;
  animation: _scaleIn_1ud5f_1 var(--dur-slow) cubic-bezier(0.22, 0.68, 0, 1.18);
}

@keyframes _scaleIn_1ud5f_1 {
  from { transform: scale(0.94) translateY(12px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);    opacity: 1; }
}

._authClose_1ud5f_191 {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-2);
}

._authClose_1ud5f_191 button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

._authClose_1ud5f_191 button:hover {
  background: var(--surface-sunken);
}

._authIcon_1ud5f_239 {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--brand-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
}

._authTitle_1ud5f_261 {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  margin-bottom: var(--space-2);
}

._authSub_1ud5f_277 {
  font-size: var(--fs-sm);
  color: var(--text-body);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-6);
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}

._authActions_1ud5f_297 {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

._authPrimary_1ud5f_309 {
  width: 100%;
  padding: 13px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

._authPrimary_1ud5f_309:hover {
  background: var(--brand-strong);
  box-shadow: var(--shadow-brand);
}

._authSecondary_1ud5f_345 {
  width: 100%;
  padding: 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface-card);
  color: var(--text-strong);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

._authSecondary_1ud5f_345:hover {
  background: var(--surface-sunken);
}
/**
 * maya.css — styles for the Maya AI chat + voice screens.
 * Imported once in App.tsx, scoped to .maya-page wrapper.
 */

/* ── Page shell ──────────────────────────────────────────────────────────────── */

/* maya-page fills whatever height remains below the sticky Nav */
.maya-page {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--surface-page, #f4f1ea);
  overflow: hidden;
  padding-top: 10px;
}

/* Full-height card that stretches to fill maya-page */
.maya-shell {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 1050px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  border-left: 0.5px solid var(--border, #e4e0d4);
  border-right: 0.5px solid var(--border, #e4e0d4);
  overflow: hidden;
  background: var(--surface, #fff);
}

.maya-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 0.5px solid var(--border, #e4e0d4);
}

.maya-topbar-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary, #888780);
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 18px;
}

.maya-topbar-close:hover {
  background: rgba(64, 48, 240, 0.08);
  color: #4030F0;
}

/* ── Guide banner header (chat page) ─────────────────────────────────────────── */

/* Legacy class kept so existing CSS references don't break */
.maya-guide-banner {
  flex-shrink: 0;
  position: relative;
  border-bottom: 0.5px solid rgba(64, 48, 240, 0.12);
  background: #fff;
  overflow: hidden;
}

.maya-guide-banner-hero {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
}

/* ── Hero banner ─────────────────────────────────────────────────────────────── */

.maya-hero-banner {
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border-bottom: 0.5px solid rgba(64, 48, 240, 0.14);
  /* Animate height when switching full ↔ sleek */
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Static full-composition banner image */
.maya-hero-banner-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
  object-position: center center;
  user-select: none;
  pointer-events: none;
}

/* ── Dynamic destination banner ──────────────────────────────────────────────── */

.maya-hero-banner--dest {
  height: 148px;
}

/* Destination photo — covers the full banner */
.maya-hero-banner-dest-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* Dark scrim — heavier at top for logo legibility */
.maya-hero-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.52) 0%,
    rgba(0,0,0,0.18) 55%,
    rgba(0,0,0,0.38) 100%
  );
  pointer-events: none;
}

/* Logo + tagline row, anchored top-left */
.maya-hero-banner-dest-content {
  position: absolute;
  top: 14px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* White wordmark on photo */
.maya-hero-banner-dest-logo {
  height: 20px;
  width: auto;
  object-fit: contain;
  object-position: left center;
  display: block;
  opacity: 0.90;
}

.maya-hero-banner-dest-tag {
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.01em;
}

/* The pill itself — lavender gradient, rounded */
.maya-guide-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(120deg, #edeaff 0%, #e2deff 60%, #d9d5ff 100%);
  border-radius: 20px;
  padding: 10px 14px 10px 42px; /* left pad makes room for overflowing avatar */
  min-height: 74px;
  overflow: visible;
}

/* Avatar circle — overflows the pill on the left */
.maya-guide-avatar-wrap {
  position: absolute;
  left: -40px; /* overflows the pill left edge */
  top: 50%;
  transform: translateY(-50%);
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7B67FF 0%, #4030F0 100%);
  border: 3px solid #fff;
  box-shadow: 0 4px 16px rgba(64, 48, 240, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 2;
}

.maya-guide-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Center: brand wordmark */
.maya-guide-pill-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  position: relative;
  z-index: 1;
}

.maya-guide-banner-img {
  height: 36px;
  width: auto;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.maya-guide-pill-subtitle {
  font-size: 10.5px;
  color: rgba(64, 48, 240, 0.65);
  letter-spacing: 0.02em;
  margin: 0;
}

/* Sparkle decorations inside the pill */
.maya-guide-sparkle {
  position: absolute;
  color: #7B67FF;
  opacity: 0.55;
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
  user-select: none;
}

/* Purple chat orb on the right */
.maya-guide-chat-orb {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7B67FF 0%, #4030F0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 12px rgba(64, 48, 240, 0.36);
  position: relative;
  z-index: 1;
}

/* Close button on the outer banner */
.maya-guide-close {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  border: 0.5px solid rgba(64, 48, 240, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-tertiary, #888780);
  backdrop-filter: blur(4px);
  transition: background 0.15s, color 0.15s;
  z-index: 3;
}

.maya-guide-close:hover {
  background: rgba(64, 48, 240, 0.1);
  color: #4030F0;
}

/* Keep legacy classes so VoicePage.tsx doesn't break */
.maya-guide-avatar {
  width: 50px; height: 50px; border-radius: 50%;
  background: linear-gradient(135deg, #7B67FF 0%, #4030F0 100%);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 2px 12px rgba(64, 48, 240, 0.32);
}
.maya-guide-logo {
  height: 42px; object-fit: contain; flex: 1; min-width: 0; max-width: 230px;
}
.maya-guide-chat-orb-legacy {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, #7B67FF 0%, #4030F0 100%);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 2px 10px rgba(64, 48, 240, 0.28);
}

/* ── Chat layout ─────────────────────────────────────────────────────────────── */

.maya-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

.maya-col-left {
  width: 500px;
  flex-shrink: 0;
  border-right: 0.5px solid var(--border, #e4e0d4);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.maya-col-right {
  flex: 1;
  min-width: 0;
  padding: 0;
  background: #f7f6f2;
  overflow-y: auto;
}

.maya-agent-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border-bottom: 0.5px solid var(--border, #e4e0d4);
}

/* Scrollable messages area — grows to fill available height */
.maya-messages {
  flex: 1;
  min-height: 0;
  padding: 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surface, #fff);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Input row fixed at the bottom of the left column */
.maya-input-row {
  flex-shrink: 0;
  padding: 10px 20px 15px;
  background: var(--surface, #fff);
}

/* Bordered input container — brand outline wraps input + send button */
.maya-input-wrapper {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--brand, #4030F0);
  border-radius: 14px;
  padding: 6px 6px 6px 14px;
  background: #fff;
  transition: box-shadow 0.15s;
}

.maya-input-wrapper:focus-within {
  box-shadow: 0 0 0 3px rgba(64, 48, 240, 0.12);
}

.maya-input-wrapper.awaiting-glow {
  box-shadow: 0 0 0 3px rgba(64, 48, 240, 0.18);
  animation: input-pulse 2s ease-in-out infinite;
}

/* ── Journey timeline (right column) ────────────────────────────────────────── */

.maya-journey-timeline {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 0.5px solid var(--border, #e4e0d4);
}

.maya-journey-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary, #888780);
  margin: 0;
}

.maya-journey-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.maya-journey-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
}

/* Vertical connector line between steps */
.maya-journey-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 11px;
  top: 22px;
  bottom: -14px;
  width: 1px;
  background: var(--border, #e4e0d4);
}

.maya-journey-step.step-current::after {
  background: #4030F0;
  opacity: 0.3;
}

.maya-journey-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.step-current .maya-journey-dot {
  background: #4030F0;
  box-shadow: 0 0 0 3px rgba(64, 48, 240, 0.15);
}

.step-upcoming .maya-journey-dot {
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, #e4e0d4);
}

.maya-journey-step-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 2px 0 14px;
}

.maya-journey-label {
  font-size: 13px;
  line-height: 1.4;
}

.step-current .maya-journey-label {
  font-weight: 600;
  color: #4030F0;
}

.step-upcoming .maya-journey-label {
  color: var(--text-primary, #1a1a18);
  font-weight: 500;
}

.maya-journey-step-sub {
  font-size: 11px;
  color: var(--text-tertiary, #888780);
  margin-top: 2px;
  line-height: 1.4;
}

.step-current .maya-journey-step-sub {
  color: rgba(64, 48, 240, 0.6);
}

.maya-text-input {
  flex: 1;
  background: transparent;
  border-radius: 0;
  padding: 6px 4px;
  font-size: 13px;
  border: none;
  outline: none;
  color: var(--text-strong, #0F1115);
  font-family: inherit;
}

.maya-text-input::placeholder {
  color: var(--text-muted, #7C828D);
}

.maya-send-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--brand, #4030F0);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.maya-send-btn:hover { opacity: 0.85; }
.maya-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Chat bubbles ────────────────────────────────────────────────────────────── */

/* Row wrapper for AI messages: avatar + bubble side by side */
.bubble-ai-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  align-self: flex-start;
  max-width: 82%;
}

/* Small AI avatar orb */
.bubble-ai-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7B67FF 0%, #4030F0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(64, 48, 240, 0.28);
  margin-bottom: 16px; /* align with bottom of bubble, account for timestamp */
}

/* AI bubble content area */
.bubble-ai-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.bubble-ai {
  background: var(--surface-sunken, #F5F6F7);
  border-radius: 4px 16px 16px 16px;
  padding: 10px 14px;
  align-self: flex-start;
}

/* Row wrapper for user messages */
.bubble-user-row {
  display: flex;
  justify-content: flex-end;
  align-self: flex-end;
  max-width: 82%;
}

/* Column of bubble + timestamp */
.bubble-user-outer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
}

.bubble-user {
  background: var(--indigo-50, #EEEDFE);
  border: 1px solid var(--indigo-100, #DEDBFD);
  border-radius: 16px 4px 16px 16px;
  padding: 10px 14px;
  color: var(--text-strong, #0F1115);
  align-self: flex-end;
}

/* "You" avatar circle */
.bubble-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--indigo-100, #DEDBFD);
  color: var(--brand, #4030F0);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 18px; /* align with bottom of bubble + timestamp */
}

/* Timestamp + status row below bubbles */
.bubble-timestamp {
  font-size: 10px;
  color: var(--text-tertiary, #888780);
  letter-spacing: 0.01em;
  padding: 0 2px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.bubble-read-ticks {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: #4030F0;
}

/* ── Voice layout ────────────────────────────────────────────────────────────── */

.maya-voice-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: var(--surface-page, #f4f1ea);
  border-right: 0.5px solid var(--border, #e4e0d4);
  text-align: center;
}

.maya-voice-right {
  flex: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.maya-voice-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #4030F0;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: border-color 0.15s ease;
  box-shadow: 0 4px 20px rgba(64, 48, 240, 0.32);
}

.maya-voice-avatar.awaiting-glow {
  animation: awaitingGlow 1.6s ease-in-out infinite;
  border: 2px solid #4030F0 !important;
}

.maya-voice-controls {
  display: flex;
  gap: 24px;
  align-items: center;
}

.maya-voice-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--surface, #fff);
  border: 0.5px solid var(--text-tertiary, #888780);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.15s;
}

.maya-voice-btn:hover { opacity: 0.8; }

.maya-voice-btn.end-call {
  width: 56px;
  height: 56px;
  background: #e24b4a;
  border: none;
}

.maya-voice-btn.end-call:hover { opacity: 0.9; }

.maya-voice-btn.muted {
  background: var(--text-primary, #1a1a18);
  border-color: var(--text-primary, #1a1a18);
}

/* ── Waveform bars ───────────────────────────────────────────────────────────── */

.wbar {
  width: 3px;
  background: #4030F0;
  border-radius: 2px;
  height: 8px;
  display: inline-block;
  animation: wave 1s ease-in-out infinite;
}

.wbar.idle {
  animation: none;
  height: 8px;
}

@keyframes wave {
  0%, 100% { height: 8px; }
  50%       { height: 32px; }
}

/* ── Typing / reveal animations ──────────────────────────────────────────────── */

/* Legacy typing-indicator (kept for VoicePage) */
.typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}

.typing-indicator .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-tertiary, #888780);
  animation: typingDot 1.2s ease-in-out infinite;
}

.typing-indicator .dot:nth-child(2) { animation-delay: 0.15s; }
.typing-indicator .dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}


/* ── Typing indicator (three-dot wave) ───────────────────────────────────────
   Canonical WhatsApp/iMessage-style loader. Kept deliberately minimal:
   - only transform + opacity animate, so it runs entirely on the GPU compositor
     and can't be stuttered by main-thread work;
   - translateZ(0) promotes each dot to its own layer up front (no mid-animation
     layer churn);
   - the row does NOT animate in — an entrance tween on the container was making
     the dots look like they "buffered" on appear.
   The React node is memoised (see TypingIndicator) so it never remounts while
   visible, which is what would otherwise restart the animation and read as jank. */
.typing-ai-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  align-self: flex-start;
}

.typing-ai-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7B67FF 0%, #4030F0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(64, 48, 240, 0.32);
}

.typing-ai-bubble {
  background: #edeaff;
  border-radius: 4px 16px 16px 16px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
}

.typing-ai-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.typing-ai-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7B67FF;
  transform: translateZ(0);
  animation: dot-wave 1.4s ease-in-out infinite both;
}
.typing-ai-dot:nth-child(2) { animation-delay: 0.18s; }
.typing-ai-dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes dot-wave {
  0%, 70%, 100% { transform: translate3d(0, 0, 0)     scale(0.8); opacity: 0.4; }
  35%           { transform: translate3d(0, -5px, 0)  scale(1);   opacity: 1;   }
}

@media (prefers-reduced-motion: reduce) {
  .typing-ai-dot { animation: dot-fade 1.4s ease-in-out infinite both; }
  @keyframes dot-fade { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
}

/* ── Suggestion chips ────────────────────────────────────────────────────────── */

.maya-chips-row {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--surface, #fff);
  border-top: 0.5px solid var(--border, #e4e0d4);
}

.maya-chips-row::-webkit-scrollbar { display: none; }

.maya-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(64, 48, 240, 0.22);
  background: rgba(64, 48, 240, 0.04);
  color: var(--text-secondary, #5f5e5a);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}

.maya-chip:hover {
  background: rgba(64, 48, 240, 0.09);
  border-color: rgba(64, 48, 240, 0.4);
  color: #4030F0;
}

.maya-chip svg { flex-shrink: 0; opacity: 0.7; }

/* Multi-row chip grid (initial state inside messages area) */
.maya-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

/* ── Inspiration cards ───────────────────────────────────────────────────────── */

.maya-inspiration-section {
  margin-top: 16px;
}

.maya-inspiration-heading {
  font-size: 13px;
  font-weight: 600;
  color: #4030F0;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.maya-inspiration-plus {
  font-size: 15px;
  font-weight: 700;
  color: #4030F0;
}

/* Horizontal landscape cards — row */
.maya-inspiration-grid {
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 125px;
}

.maya-inspiration-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  /* Landscape ratio: wide and short */
  aspect-ratio: 16 / 5;
  cursor: pointer;
  font-family: inherit;
  border: none;
  padding: 0;
  background: #e4e0d4;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.maya-inspiration-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.22);
}

.maya-inspiration-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gradient overlay + text — left side for landscape cards */
.maya-inspiration-info {
  position: absolute;
  inset: 0;
  padding: 0 14px;
  background: linear-gradient(to right, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.18) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.maya-inspiration-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-align: left;
  line-height: 1.2;
}

.maya-inspiration-sub {
  font-size: 10.5px;
  color: rgba(255,255,255,0.82);
  text-align: left;
}

/* Arrow badge — right center */
.maya-inspiration-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #fff;
  line-height: 1;
  font-weight: 700;
}

.line-reveal {
  animation: lineReveal 0.35s ease both;
}

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

.check-pop {
  display: inline-flex;
  animation: checkPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes checkPop {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

.field-pending-active { animation: pendingPulse 1.4s ease-in-out infinite; }

.checklist-empty.active-field {
  border-color: #4030F0;
  animation: pendingRing 1.4s ease-in-out infinite;
}

@keyframes pendingPulse {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1; }
}

@keyframes pendingRing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(64, 48, 240, 0.12); }
  50%       { box-shadow: 0 0 0 3px rgba(64, 48, 240, 0.12); }
}

@keyframes awaitingGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(64, 48, 240, 0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(64, 48, 240, 0.15); }
}

/* ── Right panel header ──────────────────────────────────────────────────────── */

.maya-right-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.maya-right-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #1a1a18);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.maya-right-panel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #4030F0;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.maya-right-panel-sub {
  font-size: 11px;
  color: var(--text-tertiary, #888780);
  margin: 0 0 14px;
  line-height: 1.45;
}

/* Brief fields container */
.maya-brief-fields {
  margin-bottom: 4px;
}

/* New brief field rows with icons */
.brief-field-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--border, #e4e0d4);
}

.brief-field-row:last-of-type {
  border-bottom: none;
}

.brief-field-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(64, 48, 240, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #4030F0;
}

.brief-field-icon.filled {
  background: rgba(15, 110, 86, 0.08);
  color: #0f6e56;
}

.brief-field-info {
  flex: 1;
  min-width: 0;
}

.brief-field-label-sm {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #1a1a18);
  display: block;
  margin-bottom: 2px;
}

.brief-field-desc-sm {
  font-size: 11px;
  color: var(--text-tertiary, #888780);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-height: 1.4;
}

/* Right side: "Not set" label + checkbox */
.brief-field-right-col {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.brief-not-set-text {
  font-size: 11px;
  color: var(--text-tertiary, #888780);
  white-space: nowrap;
}

.brief-field-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border, #e4e0d4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.brief-field-check.done {
  background: #0f6e56;
  border-color: #0f6e56;
}

/* "Why we ask" row */
.maya-why-row {
  margin-top: 8px;
  border-radius: 10px;
  background: rgba(64, 48, 240, 0.05);
  border: 0.5px solid rgba(64, 48, 240, 0.1);
  overflow: hidden;
}

.maya-why-toggle-new {
  background: none;
  border: none;
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-family: inherit;
  gap: 8px;
}

.maya-why-text-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}

.maya-why-label {
  font-size: 12px;
  font-weight: 600;
  color: #4030F0;
}

.maya-why-desc {
  font-size: 11px;
  color: var(--text-tertiary, #888780);
}

.maya-why-body {
  font-size: 11.5px;
  color: var(--text-secondary, #5f5e5a);
  line-height: 1.55;
  margin: 0;
  padding: 0 12px 12px;
}

/* Expert-reviewed badge row — warm beige */
.maya-expert-row {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #faf4e8;
  border: 0.5px solid #e2c98a;
  display: flex;
  align-items: center;
  gap: 10px;
}

.maya-expert-shield {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(180, 130, 40, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #8b6220;
}

.maya-expert-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.maya-expert-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #7a5018;
}

.maya-expert-sub {
  font-size: 10px;
  color: #a07840;
  line-height: 1.4;
}

/* Avatar cluster — stacked on the right */
.maya-expert-avatars {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  flex-shrink: 0;
}

.maya-expert-avatar-img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #faf4e8;
  object-fit: cover;
  margin-left: -9px;
  display: block;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.maya-expert-avatars img:last-child {
  margin-left: 0;
}

/* Journey section — extends .maya-why-row */
.maya-journey-section {
  margin-top: 8px;
}

/* Expanded steps container — padded inside the card */
.maya-journey-steps-body {
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 0.5px solid rgba(64,48,240,0.08);
}

/* Keep legacy .maya-journey-timeline for any other uses */
.maya-journey-timeline {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 0.5px solid var(--border, #e4e0d4);
}

/* Handpicked experiences promo card */
.maya-promo-card {
  margin-top: 18px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #0f6e56 0%, #1a8a6e 100%);
  padding: 16px;
  color: #fff;
  position: relative;
}

.maya-promo-card-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
  margin: 0 0 6px;
}

.maya-promo-card-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.3;
}

.maya-promo-card-sub {
  font-size: 11.5px;
  opacity: 0.82;
  margin: 0 0 14px;
  line-height: 1.5;
}

.maya-promo-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
  backdrop-filter: blur(4px);
}

.maya-promo-card-btn:hover { background: rgba(255, 255, 255, 0.3); }

.maya-promo-card-deco {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.maya-promo-card-deco2 {
  position: absolute;
  bottom: -20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

/* ── Brief panel ─────────────────────────────────────────────────────────────── */

.brief-spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--border, #e4e0d4);
  border-top-color: var(--text-tertiary, #888780);
  display: inline-block;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.brief-progress-track {
  height: 3px;
  background: var(--border, #e4e0d4);
  border-radius: 2px;
  overflow: hidden;
}

.brief-progress-fill {
  height: 100%;
  background: #0f6e56;
  border-radius: 2px;
  transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.brief-celebrate-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: #e1f5ee;
  border: 0.5px solid #b6e8d4;
  border-radius: 10px;
  margin-bottom: 12px;
  animation: briefCelebrateIn 0.4s cubic-bezier(0.34, 1.5, 0.64, 1) both;
}

.brief-celebrate-icon {
  font-size: 16px;
  display: inline-block;
  animation: briefIconSpin 0.5s ease 0.1s both;
}

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

@keyframes briefIconSpin {
  from { transform: scale(0) rotate(-20deg); }
  to   { transform: scale(1) rotate(0deg); }
}

.brief-done-card {
  padding: 14px;
  background: #e1f5ee;
  border: 0.5px solid #b6e8d4;
  border-radius: 14px;
  animation: briefDoneIn 0.45s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

@keyframes briefDoneIn {
  from { opacity: 0; transform: scale(0.95) translateY(4px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.brief-done-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.brief-done-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #0f6e56;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.brief-done-title {
  margin: 0 0 1px;
  font-size: 13px;
  font-weight: 600;
  color: #0f6e56;
}

.brief-done-sub {
  font-size: 11px;
  color: #0f6e56;
  opacity: 0.75;
}

.brief-done-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 0.5px solid #b6e8d4;
}

.brief-done-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
}

.brief-done-label { color: #2a7a5e; flex-shrink: 0; min-width: 70px; }
.brief-done-value { font-weight: 500; color: var(--text-primary, #1a1a18); flex: 1; text-align: right; }

.brief-done-tags {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.brief-done-tag {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  background: rgba(255,255,255,0.55);
  border-radius: 8px;
  padding: 4px 8px;
}

.brief-done-tag-label {
  color: #2a7a5e;
  flex-shrink: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.brief-done-tag-value {
  color: var(--text-primary, #1a1a18);
  font-weight: 500;
  flex: 1;
  text-align: right;
}

.brief-done-photo-wrap {
  position: relative;
  height: 80px;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  margin: -14px -14px 12px;
  width: calc(100% + 28px);
}

.brief-done-photo { width: 100%; height: 100%; object-fit: cover; display: block; }

.brief-done-photo-label {
  position: absolute;
  bottom: 7px;
  left: 10px;
  right: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brief-ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  color: var(--text-tertiary, #888780);
  font-size: 11px;
  border-radius: 4px;
}

.brief-ghost-btn:hover { background: none; color: var(--text-secondary, #5f5e5a); }

.brief-field-value {
  margin-left: auto;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 55%;
}

.brief-extra-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40%;
}

/* ── Checklist rows ──────────────────────────────────────────────────────────── */

.checklist-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.checklist-empty {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid var(--text-tertiary, #888780);
  display: inline-block;
  flex-shrink: 0;
}

/* ── Completion card ─────────────────────────────────────────────────────────── */

.completion-card {
  align-self: stretch;
  border-radius: 16px;
  overflow: hidden;
  border: 0.5px solid var(--border, #e4e0d4);
  background: var(--surface, #fff);
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  animation: completionCardIn 0.5s cubic-bezier(0.34, 1.3, 0.64, 1) 200ms both;
}

@keyframes completionCardIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.completion-hero {
  position: relative;
  width: 100%;
  height: 170px;
  overflow: hidden;
  background: linear-gradient(135deg, #1a6b82, #2d9b6f);
}

.completion-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.completion-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.55) 100%);
  display: flex;
  align-items: flex-end;
  padding: 14px 16px;
}

.completion-destination-name {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.completion-body { padding: 16px 16px 14px; }

.completion-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.completion-chip {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 20px;
  background: #e1f5ee;
  color: #0f6e56;
  border: 0.5px solid #b6e8d4;
  white-space: nowrap;
}

.completion-credit {
  margin: 0;
  padding: 6px 16px 10px;
  font-size: 10px;
  color: var(--text-tertiary, #888780);
  border-top: 0.5px solid var(--border, #e4e0d4);
}

/* ── Caption words ───────────────────────────────────────────────────────────── */

.caption-word       { color: var(--text-secondary, #5f5e5a); transition: color 0.15s ease; }
.caption-word-active { color: var(--text-primary, #1a1a18); font-weight: 600; }

/* ── Maya question line ──────────────────────────────────────────────────────── */

.maya-question-line {
  margin-top: 10px !important;
  padding-top: 10px;
  border-top: 0.5px solid var(--border, #e4e0d4);
  color: var(--text-primary, #1a1a18);
}

/* ── Notice blocks ───────────────────────────────────────────────────────────── */

.maya-notice {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
  margin: 4px 0;
}

.maya-notice.error {
  background: #fee2e2;
  color: #991b1b;
  border: 0.5px solid #fca5a5;
}

.maya-notice.info {
  background: rgba(64, 48, 240, 0.07);
  color: #2a21a0;
  border: 0.5px solid rgba(64, 48, 240, 0.2);
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .maya-body {
    flex-direction: column;
    min-height: 0;
  }

  .maya-col-left {
    border-right: none;
    border-bottom: 0.5px solid var(--border, #e4e0d4);
  }

  .maya-voice-left {
    border-right: none;
    border-bottom: 0.5px solid var(--border, #e4e0d4);
    padding: 28px 20px;
  }

  .maya-shell {
    margin: 16px auto;
    border-radius: 12px;
  }
}

@media (max-width: 600px) {
  .maya-shell {
    border-left: none;
    border-right: none;
  }

  .maya-topbar { padding: 12px 16px; }
  .maya-agent-header { padding: 12px 16px; }
  .maya-guide-close { right: 4px; top: 4px; width: 22px; height: 22px; }
  /* Legacy classes for VoicePage */
  .maya-guide-avatar { width: 42px; height: 42px; }
  .maya-guide-logo { height: 34px; }
  .maya-guide-chat-orb-legacy { width: 36px; height: 36px; }
  .maya-messages { padding: 14px 14px; gap: 10px; }
  .maya-chips-row { padding: 6px 14px 8px; gap: 6px; }
  .maya-input-row { padding: 10px 14px 15px; }
  .maya-col-right { padding: 14px; }
  .maya-text-input { font-size: 16px; }
  .maya-voice-left { padding: 24px 16px; }
  .maya-voice-right { padding: 16px; }
}

/* ── Brief extras divider (item 4) ──────────────────────────────────────────── */

.brief-extras-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 4px;
}

.brief-extras-divider::before,
.brief-extras-divider::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: var(--border, #e4e0d4);
}

.brief-extras-divider span {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary, #888780);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ── Creating your trip overlay (item 6) ─────────────────────────────────────── */

.creating-trip-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(15, 10, 50, 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: overlayFadeIn 0.35s ease both;
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.creating-trip-modal {
  background: #fff;
  border-radius: 24px;
  padding: 40px 32px 32px;
  width: min(340px, 88vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 32px 80px rgba(64, 48, 240, 0.18), 0 8px 24px rgba(0,0,0,0.06);
  animation: modalSlideUp 0.35s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.creating-trip-icon {
  margin-bottom: 6px;
}

.creating-trip-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #1a1a18);
  margin: 0;
  text-align: center;
  letter-spacing: -0.01em;
}

.creating-trip-sub {
  font-size: 13px;
  color: var(--text-tertiary, #888780);
  margin: 0;
  text-align: center;
  line-height: 1.4;
}

.creating-trip-track {
  width: 100%;
  height: 4px;
  background: rgba(64, 48, 240, 0.12);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 12px;
}

.creating-trip-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #7B67FF 0%, #4030F0 100%);
  border-radius: 2px;
  /* Fill 0→100% in pure CSS over the overlay's lifetime (kept in sync with
     CREATING_TRIP_MS in ChatPage). transform:scaleX is GPU-composited, so it
     stays smooth instead of the per-frame width writes it replaced. */
  transform-origin: left center;
  animation: creating-fill 2.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes creating-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .creating-trip-fill { animation-duration: 0.01s; }
}

/* ── Chat toolbar (new trip + history menu) ──────────────────────────────────── */

.maya-chat-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  height: 36px;
  border-bottom: 0.5px solid rgba(64, 48, 240, 0.10);
  background: rgba(255, 255, 255, 0.96);
}

.maya-chat-toolbar-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  color: var(--text-secondary, #5f5e5a);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}

.maya-chat-toolbar-btn:hover {
  background: rgba(64, 48, 240, 0.07);
  color: #4030F0;
}

.maya-chat-toolbar-btn--new {
  color: #4030F0;
  font-weight: 600;
}

.maya-chat-toolbar-btn--new:hover {
  background: rgba(64, 48, 240, 0.10);
}

.maya-chat-toolbar-label {
  font-size: 11.5px;
}

/* ── Chat history drawer ─────────────────────────────────────────────────────── */

.maya-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  z-index: 200;
  animation: maya-fade-in 0.18s ease;
}

.maya-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 88vw);
  background: #fff;
  z-index: 201;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.14);
  animation: maya-slide-in-left 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

@keyframes maya-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes maya-slide-in-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

.maya-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 0.5px solid var(--border, #e4e0d4);
  flex-shrink: 0;
}

.maya-drawer-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #1a1916);
}

.maya-drawer-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary, #5f5e5a);
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  line-height: 1;
  transition: background 0.15s;
}

.maya-drawer-close:hover {
  background: rgba(64, 48, 240, 0.07);
  color: #4030F0;
}

.maya-drawer-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  overflow-y: auto;
  flex: 1;
}

.maya-drawer-empty {
  padding: 24px 16px;
  font-size: 13px;
  color: var(--text-tertiary, #888780);
  text-align: center;
}

.maya-drawer-item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}

.maya-drawer-item:hover {
  background: rgba(64, 48, 240, 0.05);
}

.maya-drawer-item--active {
  background: rgba(64, 48, 240, 0.08);
}

.maya-drawer-item--active .maya-drawer-item-title {
  color: #4030F0;
}

.maya-drawer-item-icon {
  margin-top: 1px;
  flex-shrink: 0;
  color: var(--text-tertiary, #888780);
}

.maya-drawer-item--active .maya-drawer-item-icon {
  color: #4030F0;
}

.maya-drawer-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.maya-drawer-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #1a1916);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.maya-drawer-item-badge {
  font-size: 10px;
  font-weight: 600;
  color: #0f6e56;
  background: rgba(15, 110, 86, 0.10);
  padding: 1px 6px;
  border-radius: 10px;
  display: inline-block;
  width: fit-content;
}

.maya-drawer-item-date {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-tertiary, #888780);
  margin-top: 1px;
  white-space: nowrap;
}

/* ── Chat page loading skeleton ──────────────────────────────────────────────── */

.maya-chat-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.maya-chat-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0.65;
}

.maya-chat-loading-sparkle {
  animation: maya-pulse 1.4s ease-in-out infinite;
}

@keyframes maya-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.95); }
  50%       { opacity: 1;   transform: scale(1.05); }
}

.maya-chat-loading-text {
  font-size: 13px;
  color: var(--text-secondary, #5f5e5a);
  margin: 0;
}

/* ── Hero banner full / sleek states ─────────────────────────────────────────── */

/* Full tall state */
.maya-hero-banner--full {
  height: 200px;
}

/* Sleek narrow strip */
.maya-hero-banner--sleek {
  height: 56px;
  overflow: hidden;
}

.maya-hero-banner-sleek-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  user-select: none;
  pointer-events: none;
}

.maya-hero-banner-sleek-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.30) 60%, rgba(0,0,0,0.10) 100%);
  pointer-events: none;
}

.maya-hero-banner-sleek-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #4030F0 0%, #7B67FF 100%);
}

.maya-hero-sleek-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
}

.maya-hero-sleek-wordmark {
  height: 16px;
  width: auto;
  object-fit: contain;
  opacity: 0.90;
  flex-shrink: 0;
}

/* ── Planning pills ───────────────────────────────────────────────────────────── */

/* Small pill on full-state destination banner */
.maya-hero-planning-pill {
  position: absolute;
  bottom: 12px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0.5px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
  z-index: 2;
}

.maya-hero-planning-pill:hover {
  background: rgba(255,255,255,0.28);
}

/* On generic light-background banner */
.maya-hero-planning-pill--on-light {
  background: rgba(64,48,240,0.10);
  border-color: rgba(64,48,240,0.20);
  color: #4030F0;
}

.maya-hero-planning-pill--on-light:hover {
  background: rgba(64,48,240,0.16);
}

/* Larger pill shown in the sleek strip */
.maya-hero-planning-pill-lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 0.5px solid rgba(255,255,255,0.40);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
  letter-spacing: 0.01em;
}

.maya-hero-planning-pill-lg:hover {
  background: rgba(255,255,255,0.30);
}

/* ── Context chips (per AI message) ──────────────────────────────────────────── */

.maya-context-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding: 0 2px;
}

.maya-context-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: rgba(64,48,240,0.06);
  border: 0.5px solid rgba(64,48,240,0.22);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: #4030F0;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s;
  font-family: inherit;
  white-space: nowrap;
}

.maya-context-chip-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: #4030F0;
}

.maya-context-chip:hover {
  background: rgba(64,48,240,0.13);
  border-color: rgba(64,48,240,0.40);
}

.maya-context-chip:active {
  background: rgba(64,48,240,0.20);
  transform: scale(0.97);
}

/* ── Travelomore insight card ────────────────────────────────────────────────── */

.maya-insight-card {
  margin: 12px 0 8px;
  padding: 11px 13px;
  background: linear-gradient(135deg, #f0eeff 0%, #e8e4ff 100%);
  border: 0.5px solid rgba(64,48,240,0.18);
  border-radius: 12px;
}

.maya-insight-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
}

.maya-insight-logo {
  height: 16px;
  width: auto;
  object-fit: contain;
  object-position: left center;
  display: block;
  flex-shrink: 0;
}

.maya-insight-label {
  font-size: 11px;
  font-weight: 700;
  color: #4030F0;
  letter-spacing: 0.01em;
}

.maya-insight-body {
  font-size: 11.5px;
  color: #2a1f80;
  line-height: 1.55;
  margin: 0;
}

/* ── Journey horizontal stepper ──────────────────────────────────────────────── */

.maya-journey-section-h {
  margin-top: 12px;
  padding: 12px;
  background: var(--surface-page, #f4f1ea);
  border: 0.5px solid var(--border, #e4e0d4);
  border-radius: 12px;
}

.maya-journey-heading-h {
  font-size: 12px;
  font-weight: 700;
  color: #4030F0;
  margin: 0 0 12px;
}

.maya-journey-stepper {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.maya-journey-step-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.maya-journey-connector {
  flex: 1;
  height: 1.5px;
  background: #e4e0d4;
  margin-top: 13px; /* half of 28px circle */
  min-width: 4px;
}

.maya-journey-connector--done {
  background: #4030F0;
  opacity: 0.35;
}

.maya-journey-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.maya-journey-circle--current {
  background: #4030F0;
  box-shadow: 0 2px 8px rgba(64,48,240,0.30);
  color: #fff;
}

.maya-journey-circle--done {
  background: rgba(64,48,240,0.15);
  color: #4030F0;
}

.maya-journey-circle--future {
  background: transparent;
  border: 1.5px solid #d4d0e0;
  color: #c0bcd0;
}

.maya-journey-step-label {
  font-size: 9px;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
  max-width: 46px;
}

.maya-journey-step-label.current {
  color: #4030F0;
  font-weight: 700;
}

.maya-journey-step-label.done {
  color: #7B67FF;
}

.maya-journey-step-label.future {
  color: #c0bcd0;
}

/* ── Packages widget ─────────────────────────────────────────────────────────── */

.maya-packages-widget {
  background: var(--surface, #fff);
  border: 0.5px solid var(--border, #e4e0d4);
  border-radius: 16px;
  padding: 14px;
  margin-top: 4px;
  animation: lineReveal 0.35s ease both;
}

.maya-packages-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.maya-packages-header-left {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
}

.maya-packages-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #1a1a18);
  line-height: 1.3;
}

.maya-packages-viewall {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: #4030F0;
  white-space: nowrap;
  padding: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.maya-packages-viewall:hover { opacity: 0.75; }

.maya-packages-subtitle {
  font-size: 11px;
  color: var(--text-tertiary, #888780);
  margin: 0 0 12px;
  line-height: 1.4;
}

/* Horizontal scroll track */
.maya-packages-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.maya-packages-scroll::-webkit-scrollbar { display: none; }

/* Individual card */
.maya-package-card {
  flex: 0 0 160px;
  scroll-snap-align: start;
  border: 0.5px solid var(--border, #e4e0d4);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface, #fff);
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.maya-package-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

.maya-package-card-img {
  position: relative;
  height: 90px;
  overflow: hidden;
}

.maya-package-card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.maya-package-badge {
  position: absolute;
  top: 7px;
  left: 7px;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}

.maya-package-card-body {
  padding: 9px 10px 10px;
}

.maya-package-nd {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary, #888780);
  margin-bottom: 3px;
  letter-spacing: 0.02em;
}

.maya-package-name {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-primary, #1a1a18);
  line-height: 1.3;
  margin-bottom: 6px;
}

.maya-package-price-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
}

.maya-package-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary, #1a1a18);
}

.maya-package-saving {
  font-size: 10px;
  font-weight: 600;
  color: #0f6e56;
}

/* OR divider */
.maya-packages-or-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
}

.maya-packages-or-line {
  flex: 1;
  height: 0.5px;
  background: var(--border, #e4e0d4);
}

.maya-packages-or-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-tertiary, #888780);
  letter-spacing: 0.05em;
}

/* Continue section */
.maya-packages-continue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.maya-packages-continue-sub {
  font-size: 11px;
  color: var(--text-secondary, #5f5e5a);
  flex: 1;
  line-height: 1.4;
}

.maya-packages-continue-btn {
  background: none;
  border: 0.5px solid rgba(64,48,240,0.30);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: #4030F0;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s;
}

.maya-packages-continue-btn:hover {
  background: rgba(64,48,240,0.07);
}

/* ── Trip Summary Bar (full-width) ────────────────────────────────────────── */

/* Legacy — kept for compat, overridden below */
.tsb-root {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: #fff;
  border-bottom: 0.5px solid var(--border, #e4e0d4);
  flex-wrap: wrap;
}

/* New full-bar design */
.tsb-fullbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: #fff;
  border-bottom: 0.5px solid var(--border, #e4e0d4);
  min-height: 52px;
}

.tsb-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f0ede6;
  display: block;
}

.tsb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tsb-thumb--gradient {
  background: linear-gradient(135deg, #4030F0 0%, #7b6cf6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
}

.tsb-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tsb-trip-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong, #0F1115);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tsb-trip-name--placeholder {
  font-weight: 500;
  color: var(--text-muted, #7C828D);
}

.tsb-fullbar--new {
  background: var(--gray-50, #F5F6F7);
}

.tsb-meta-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.tsb-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--text-muted, #7C828D);
  white-space: nowrap;
}

.tsb-meta-item svg {
  color: var(--text-muted, #7C828D);
  flex-shrink: 0;
}

/* Keep old chip classes for backward compat (unused in new TSB) */
.tsb-chips-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.tsb-bar-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  background: rgba(64,48,240,0.07);
  color: #4030F0;
}

.tsb-edit-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle, #DFE1E5);
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-brand, #3422D6);
  cursor: pointer;
  transition: background 0.15s;
}

.tsb-edit-btn:hover { background: var(--surface-sunken, #F5F6F7); }

.tsb-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.tsb-action-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle, #DFE1E5);
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted, #7C828D);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.tsb-action-btn:hover {
  background: var(--surface-sunken, #F5F6F7);
  color: var(--text-strong, #0F1115);
}

/* Edit Trip Modal */
.etm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 21, 0.45);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.etm-panel {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(15, 17, 21, 0.16);
  width: 100%;
  max-width: 460px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.etm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* .etm-title matches <span className="etm-title"> in EditTripModal */
.etm-title, .etm-header h2 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-strong, #0F1115);
  margin: 0;
}

/* .etm-close matches <button className="etm-close"> */
.etm-close, .etm-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted, #7C828D);
  padding: 4px;
  line-height: 1;
  border-radius: 6px;
  transition: background 0.15s;
}

.etm-close:hover, .etm-close-btn:hover { background: var(--gray-50, #F5F6F7); }

.etm-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ETField: flex row with icon + body */
.etm-field {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

.etm-field-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--indigo-50, #EEEDFE);
  color: var(--brand, #4030F0);
  flex-shrink: 0;
  margin-top: 22px;
}

.etm-field-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

/* .etm-field-label matches <label className="etm-field-label"> */
.etm-field-label, .etm-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #7C828D);
}

/* .etm-field-input matches <input className="etm-field-input"> */
.etm-field-input, .etm-input {
  padding: 9px 12px;
  border: 1.5px solid var(--border-subtle, #DFE1E5);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-strong, #0F1115);
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}

.etm-field-input:focus, .etm-input:focus {
  border-color: var(--brand, #4030F0);
}

.etm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* .etm-cancel matches <button className="etm-cancel"> */
.etm-cancel, .etm-cancel-btn {
  padding: 9px 18px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle, #DFE1E5);
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted, #7C828D);
  cursor: pointer;
  transition: background 0.15s;
}

.etm-cancel:hover, .etm-cancel-btn:hover { background: var(--gray-50, #F5F6F7); }

/* .etm-save matches <button className="etm-save"> */
.etm-save, .etm-save-btn {
  padding: 9px 20px;
  border-radius: 8px;
  border: none;
  background: var(--brand, #4030F0);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s;
}

.etm-save:hover, .etm-save-btn:hover { opacity: 0.88; }

/* Legacy chip classes */
.tsb-left {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.tsb-dest {
  font-size: 12.5px;
  font-weight: 700;
  color: #0F1115;
  letter-spacing: -0.01em;
}

.tsb-complete-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: rgba(15,110,86,0.1);
  color: #0f6e56;
  font-size: 10px;
  font-weight: 600;
  border-radius: 20px;
  letter-spacing: 0.01em;
}

.tsb-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tsb-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 500;
  background: rgba(64,48,240,0.07);
  color: #4030F0;
  white-space: nowrap;
}

.tsb-chip--group   { background: rgba(14,105,198,0.08); color: #0e69c6; }
.tsb-chip--dates   { background: rgba(15,110,86,0.08);  color: #0f6e56; }
.tsb-chip--duration{ background: rgba(100,90,200,0.09); color: #5a4dc4; }
.tsb-chip--budget  { background: rgba(160,120,0,0.09);  color: #7a5a00; }

/* ── Live Packages Panel ───────────────────────────────────────────────────── */

.lpp-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 48px 32px;
  text-align: center;
  gap: 12px;
}

.lpp-placeholder-sparkle {
  margin-bottom: 4px;
}

.lpp-placeholder-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #0F1115;
}

.lpp-placeholder-sub {
  margin: 0;
  font-size: 13px;
  color: #888;
  line-height: 1.5;
  max-width: 260px;
}

/* Scrollable panel root */
.lpp-root {
  padding: 20px 22px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Header row */
.lpp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lpp-header-title {
  font-size: 16px;
  font-weight: 700;
  color: #0F1115;
  letter-spacing: -0.02em;
}

.lpp-header-count {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(64,48,240,0.10);
  color: #4030F0;
  font-size: 11.5px;
  font-weight: 600;
}

/* Preference chips section */
.lpp-pref-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lpp-pref-label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #999;
}

.lpp-pref-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lpp-pref-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
}

.lpp-pref-chip--confirmed {
  background: rgba(64,48,240,0.09);
  color: #4030F0;
}

.lpp-pref-chip--new {
  background: rgba(15,110,86,0.09);
  color: #0f6e56;
  animation: chip-pop 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

.lpp-pref-chip--learning {
  background: rgba(0,0,0,0.05);
  color: #888;
}

@keyframes chip-pop {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* "Matching packages" header row */
.lpp-matching-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lpp-matching-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-strong, #0F1115);
  letter-spacing: -0.02em;
}

.lpp-filter-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-subtle, #DFE1E5);
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted, #7C828D);
  transition: background 0.15s;
  flex-shrink: 0;
}

.lpp-filter-btn:hover { background: var(--surface-sunken, #F5F6F7); }

/* Package cards container — 3-column grid */
.lpp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Individual card */
.lpp-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s;
  animation: card-in 0.3s ease;
}

.lpp-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10), 0 0 0 0.5px rgba(0,0,0,0.06);
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lpp-card-img {
  position: relative;
  height: 110px;
  overflow: hidden;
}

.lpp-card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lpp-card-pkg-badge {
  position: absolute;
  top: 8px;
  left: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.lpp-card-match-pct {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  backdrop-filter: blur(4px);
}

.lpp-card-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lpp-card-nd {
  margin: 0;
  font-size: 11px;
  color: #999;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.lpp-card-name {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: #0F1115;
  letter-spacing: -0.01em;
}

.lpp-card-price {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #4030F0;
}

/* Why it matches toggle */
.lpp-why-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 5px 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: color 0.15s;
}

.lpp-why-toggle:hover,
.lpp-why-toggle--open {
  color: #4030F0;
}

.lpp-why-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 8px 10px;
  background: rgba(64,48,240,0.04);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.lpp-why-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11.5px;
  color: #444;
  line-height: 1.4;
}

.lpp-why-item svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Card actions */
.lpp-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.lpp-action-fav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--border-subtle, #DFE1E5);
  cursor: pointer;
  color: var(--text-muted, #7C828D);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.lpp-action-fav:hover {
  background: var(--indigo-50, #EEEDFE);
  color: var(--brand, #4030F0);
  border-color: var(--indigo-100, #DEDBFD);
}

.lpp-action-view {
  flex: 1;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--brand, #4030F0);
  color: #fff;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.lpp-action-view:hover {
  background: var(--brand-strong, #3422D6);
}

/* Footer */
.lpp-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #aaa;
  padding-top: 2px;
}

.lpp-viewall-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 20px;
  background: rgba(64,48,240,0.07);
  border: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #4030F0;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.15s;
}

.lpp-viewall-btn:hover {
  background: rgba(64,48,240,0.13);
}

/* ── State 2: Custom trip ──────────────────────────────────────────────────── */

.lpp-state2-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(0,0,0,0.06);
}

.lpp-state2-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(64,48,240,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lpp-state2-title {
  margin: 0 0 2px;
  font-size: 14.5px;
  font-weight: 700;
  color: #0F1115;
  letter-spacing: -0.01em;
}

.lpp-state2-sub {
  margin: 0 0 6px;
  font-size: 12px;
  color: #777;
}

.lpp-state2-count {
  margin: 0;
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 20px;
  background: rgba(0,0,0,0.05);
  font-size: 11px;
  font-weight: 600;
  color: #888;
}

/* Mismatch reasons card */
.lpp-mismatch-card {
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lpp-mismatch-card-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #aaa;
}

.lpp-mismatch-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.lpp-mismatch-row svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.lpp-mismatch-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #0F1115;
  margin-bottom: 1px;
}

.lpp-mismatch-expl {
  display: block;
  font-size: 11.5px;
  color: #777;
}

/* Custom-trip callout */
.lpp-custom-callout {
  background: rgba(64,48,240,0.05);
  border: 1px solid rgba(64,48,240,0.12);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lpp-custom-callout-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: #4030F0;
}

.lpp-custom-callout-body {
  margin: 0;
  font-size: 12.5px;
  color: #555;
  line-height: 1.55;
}

/* Progress steps */
.lpp-progress-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 4px;
}

.lpp-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.lpp-progress-line {
  flex: 1;
  height: 1.5px;
  background: rgba(64,48,240,0.15);
  margin: 0 4px;
  margin-bottom: 18px;
}

.lpp-progress-line--done {
  background: #4030F0;
}

.lpp-progress-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(64,48,240,0.18);
  transition: background 0.2s;
}

.lpp-progress-dot.done {
  background: #4030F0;
}

.lpp-progress-dot.active {
  background: #4030F0;
  box-shadow: 0 0 0 3px rgba(64,48,240,0.2);
}

.lpp-progress-label {
  font-size: 10.5px;
  color: #aaa;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

.lpp-progress-label.active {
  color: #4030F0;
  font-weight: 600;
}

/* ── LPP status row (updated match indicator) ──────────────────────────────── */

.lpp-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.lpp-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  flex-shrink: 0;
}

.lpp-status-text {
  font-size: 11.5px;
  color: #10b981;
  font-weight: 600;
}

.lpp-count-line {
  font-size: 13px;
  font-weight: 700;
  color: #0F1115;
  margin-bottom: 10px;
}

.lpp-count-strong { color: #0F1115; }
.lpp-count-dim    { font-weight: 400; color: #888; font-size: 12px; }

/* ── LPP card redesign ─────────────────────────────────────────────────────── */

/* Card sizes to its content rather than stretching to the grid column */
.lpp-card {
  width: max-content;
  max-width: 100%;
}

.lpp-card-img--lg {
  height: 160px !important;
}

/* Heart overlay on photo */
.lpp-card-heart-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  transition: background 0.15s;
}

.lpp-card-heart-overlay:hover { background: #fff; }

/* Card body — tighter gap for more info */
.lpp-card-body {
  padding: 12px 12px 12px !important;
  gap: 6px !important;
}

/* Card name */
.lpp-card-name {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-strong, #0F1115);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* Duration row */
.lpp-card-duration-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lpp-card-dur-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--text-muted, #7C828D);
}

.lpp-card-dur-item svg {
  color: var(--text-muted, #7C828D);
  flex-shrink: 0;
}

/* Location row */
.lpp-card-location-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--text-muted, #7C828D);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lpp-card-location-row svg {
  color: var(--text-muted, #7C828D);
  flex-shrink: 0;
}

.lpp-card-location-row span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Price + match% row */
.lpp-card-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}

.lpp-card-price {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-strong, #0F1115);
}

.lpp-card-price strong {
  color: var(--brand, #4030F0);
  font-weight: 700;
}

.lpp-card-match-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.lpp-card-per-person {
  font-size: 10.5px;
  color: var(--text-muted, #7C828D);
  font-weight: 400;
}

/* WHY IT MATCHES section */
.lpp-why-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lpp-why-divider {
  height: 0.5px;
  background: var(--border-subtle, #DFE1E5);
  margin-bottom: 4px;
}

.lpp-why-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted, #7C828D);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.lpp-why-value {
  font-size: 11.5px;
  color: var(--text-muted, #7C828D);
  margin: 0;
  line-height: 1.4;
}

/* Legacy why-always (unused but kept for safety) */
.lpp-why-always {
  padding: 8px 12px 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lpp-why-always .lpp-why-item {
  font-size: 11.5px;
  color: #555;
  line-height: 1.4;
}

/* View package — flex:1 */
.lpp-action-view--fw {
  flex: 1;
  text-align: center;
}

/* Name-row compat (unused after redesign) */
.lpp-card-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lpp-card-locations {
  padding: 5px 12px 0;
  font-size: 11px;
  color: #888;
  font-weight: 500;
}

/* ── Chat column header ────────────────────────────────────────────────────── */

.maya-chat-header {
  padding: 16px 20px 0;
  border-bottom: 0.5px solid var(--border-subtle, #DFE1E5);
  flex-shrink: 0;
}

/* Top row: avatar+title on left, three-dot on right */
.mch-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mch-avatar-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mch-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #7B67FF 0%, var(--brand, #4030F0) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(64,48,240,0.25);
}

.mch-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mch-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong, #0F1115);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mch-essentials {
  font-size: 12px;
  font-weight: 500;
  color: var(--brand, #4030F0);
}

.mch-menu-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted, #7C828D);
  flex-shrink: 0;
  transition: background 0.15s;
}

.mch-menu-btn:hover { background: var(--surface-sunken, #F5F6F7); }

/* Meta chips row below title */
.mch-meta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 0 12px;
  border-top: none;
  margin-top: 10px;
  border-top: 0.5px solid var(--border-subtle, #DFE1E5);
}

.mch-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted, #7C828D);
  white-space: nowrap;
}

.mch-meta-item svg {
  color: var(--text-muted, #7C828D);
  flex-shrink: 0;
}

/* Fallback title if no meta (legacy) */
.maya-chat-planning-title {
  font-size: 13px;
  font-weight: 600;
  color: #0F1115;
}

/* ── Zero-state workspace override ─────────────────────────────────────────── */

.maya-page > .pt-workspace {
  min-height: 100vh;
}

@media (max-width: 768px) {
  .maya-page > .pt-workspace {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .maya-page > .pt-workspace .pt-col-left,
  .maya-page > .pt-workspace .pt-col-right {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .maya-page > .pt-workspace .pt-card {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .maya-page > .pt-workspace .pt-fields-grid {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .maya-page > .pt-workspace .pt-field-card {
    min-width: 0;
    box-sizing: border-box;
  }
}

/* ── Zero-state cards: edge-to-edge on mobile (≤640px) ─────────────────────── */
@media (max-width: 640px) {
  .maya-page > .pt-workspace .pt-card {
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ── Mobile-only elements: hidden on desktop ───────────────────────────────── */
.maya-mobile-header { display: none; }
.tsb-name-bar       { display: none; }
.tsb-kebab-btn      { display: none; }

/* ── Mobile responsive adjustments ────────────────────────────────────────── */

@media (max-width: 760px) {
  .maya-body { flex-direction: column; }
  .maya-col-left  { flex: none; width: 100% !important; border-right: none; border-bottom: 0.5px solid var(--border, #e4e0d4); }
  .maya-col-right { flex: none; min-height: 320px; }
  .tsb-root    { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tsb-fullbar { flex-wrap: wrap; min-height: auto; padding: 8px 14px; }
  .tsb-chips-bar { order: 3; width: 100%; }
  .tsb-edit-btn  { order: 2; }
}

/* On phones (≤640px): hide right brief panel, chat takes full screen */
@media (max-width: 640px) {
  .maya-col-right { display: none !important; }
  .maya-col-left  { border-bottom: none; }
  .maya-page { padding-top: 0; }
  .maya-shell { margin: 0; border-radius: 0; border-left: none; border-right: none; }

  /* ── Hide Nav; ChatPage fills viewport ── */
  .guide-page-root > :first-child { display: none !important; }
  .maya-page { flex: 1; min-height: 0; }

  /* ── Mobile header: back arrow + logo ── */
  .maya-mobile-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    flex-shrink: 0;
    background: #fff;
    border-bottom: 1px solid var(--border-subtle, #e8e8e8);
  }

  .maya-mobile-back {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #4030F0;
  }

  .maya-mobile-logo {
    height: 21px;
    width: auto;
    object-fit: contain;
    display: block;
    font-size: 0;
  }

  /* ── TSB: 2-row layout (name row + chips row) ── */
  .tsb-fullbar {
    flex-wrap: wrap;
    flex-direction: row;
    overflow-x: visible;
    padding: 0;
    gap: 0;
    min-height: auto;
  }

  /* Row 1: icon + trip name + status + kebab */
  .tsb-name-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 6px;
    flex-basis: 100%;
    box-sizing: border-box;
    order: 1;
  }

  .tsb-name-bar-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .tsb-name-bar-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .tsb-name-bar-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tsb-name-bar-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted, #6b7280);
  }

  .tsb-name-bar-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
  }

  .tsb-kebab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    flex-shrink: 0;
  }

  /* Row 2: chips (center, horizontal scroll) */
  .tsb-center {
    order: 2;
    flex: 1;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 10px 14px;
    gap: 6px;
    min-width: 0;
    align-items: center;
  }

  .tsb-center::-webkit-scrollbar { display: none; }

  /* Edit btn: end of chips row */
  .tsb-actions {
    order: 3;
    flex-shrink: 0;
    padding: 4px 14px 10px 4px;
    display: flex !important;
  }

  .tsb-action-btn { display: none !important; }

  .tsb-edit-btn {
    flex-shrink: 0;
    padding: 5px 8px;
    border-radius: 8px;
    gap: 0;
    min-height: 32px;
  }

  /* Hide desktop thumbnail + trip-name (replaced by name-bar) */
  .tsb-thumb      { display: none !important; }
  .tsb-trip-name  { display: none !important; }

  /* Chips */
  .tsb-meta-item {
    flex-shrink: 0;
    background: var(--gray-100, #F5F6F7);
    border: 1px solid var(--border-subtle, #DFE1E5);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 11px;
    gap: 4px;
    white-space: nowrap;
  }

  .tsb-meta-item svg { display: none; }

  /* ── Chat bubbles ── */
  .bubble-ai {
    padding: 13px 15px;
    border-radius: 6px 18px 18px 18px;
    font-size: 15px;
  }

  .bubble-user {
    padding: 13px 15px;
    border-radius: 18px 6px 18px 18px;
    border: none;
    font-size: 15px;
  }

  /* ── Input bar: pill input + separate round send button ── */
  .maya-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 10px;
    background: #fff;
  }

  .maya-input-wrapper {
    flex: 1;
    border: 1px solid #E3E4E8;
    border-radius: 999px;
    padding: 0;
    background: #F7F8FA;
    box-shadow: none !important;
  }

  .maya-input-wrapper.awaiting-glow {
    box-shadow: none !important;
  }

  .maya-text-input {
    padding: 11px 14px;
    font-size: 14px;
    background: transparent;
  }

  .maya-send-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    flex-shrink: 0;
    padding: 0;
  }
}

/* ══════════════════════════════════════════════════════════════
   ZERO-STATE BOTTOM SHEET (mobile field editor)
   ══════════════════════════════════════════════════════════════ */

.zs-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 200;
  animation: zsBackdropIn 0.2s ease;
}

@keyframes zsBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.zs-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 20px 20px 0 0;
  z-index: 201;
  max-height: 80dvh;
  display: flex;
  flex-direction: column;
  animation: zsSheetUp 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes zsSheetUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.zs-sheet-handle {
  width: 36px;
  height: 4px;
  background: #D1D5DB;
  border-radius: 2px;
  margin: 12px auto 0;
  flex-shrink: 0;
}

.zs-sheet-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid #F0F0F0;
  flex-shrink: 0;
}

.zs-sheet-header-icon {
  color: #4030F0;
  display: flex;
  align-items: center;
}

.zs-sheet-header-title {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: #0F1115;
}

.zs-sheet-close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #6B7280;
  display: flex;
  align-items: center;
}

.zs-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  -webkit-overflow-scrolling: touch;
}

.zs-sheet-footer {
  padding: 12px 20px max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid #F0F0F0;
  flex-shrink: 0;
}

.zs-sheet-save {
  width: 100%;
  padding: 14px;
  background: #4030F0;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

/* Text input in sheet */
.zs-sheet-input {
  width: 100%;
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 16px;
  color: #0F1115;
  background: #F9FAFB;
  outline: none;
  box-sizing: border-box;
  margin-bottom: 16px;
}

.zs-sheet-input:focus {
  border-color: #4030F0;
  background: #fff;
}

/* Destination quick-select chips */
.zs-sheet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.zs-sheet-chip {
  padding: 7px 14px;
  border: 1.5px solid #E5E7EB;
  border-radius: 999px;
  background: #F9FAFB;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
  touch-action: manipulation;
}

.zs-sheet-chip--active {
  background: #EEEDFE;
  border-color: #4030F0;
  color: #4030F0;
  font-weight: 600;
}

/* Option grid (dates, trip type) */
.zs-sheet-grid {
  display: grid;
  gap: 8px;
}

.zs-sheet-grid--months {
  grid-template-columns: repeat(3, 1fr);
}

.zs-sheet-grid--types {
  grid-template-columns: repeat(2, 1fr);
}

.zs-sheet-option {
  padding: 12px 10px;
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  background: #F9FAFB;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  text-align: center;
  touch-action: manipulation;
  transition: border-color 0.12s, background 0.12s;
}

.zs-sheet-option--active {
  background: #EEEDFE;
  border-color: #4030F0;
  color: #4030F0;
  font-weight: 600;
}

/* Duration stepper */
.zs-sheet-stepper-wrap {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.zs-sheet-stepper {
  display: flex;
  align-items: center;
  gap: 24px;
}

.zs-sheet-step-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid #E5E7EB;
  background: #F9FAFB;
  font-size: 22px;
  color: #374151;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
}

.zs-sheet-step-val {
  font-size: 28px;
  font-weight: 700;
  color: #0F1115;
  min-width: 80px;
  text-align: center;
}

.zs-sheet-step-unit {
  font-size: 14px;
  font-weight: 400;
  color: #6B7280;
}

/* Travellers */
.zs-sheet-travellers {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.zs-sheet-traveller-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid #F3F4F6;
}

.zs-sheet-traveller-row:last-child {
  border-bottom: none;
}

.zs-sheet-traveller-info {
  flex: 1;
}

.zs-sheet-traveller-label {
  font-size: 15px;
  font-weight: 600;
  color: #0F1115;
  margin: 0;
}

.zs-sheet-traveller-sub {
  font-size: 12px;
  color: #9CA3AF;
  margin: 2px 0 0;
}

.zs-sheet-travellers .zs-sheet-stepper {
  gap: 16px;
}

.zs-sheet-travellers .zs-sheet-step-btn {
  width: 40px;
  height: 40px;
  font-size: 18px;
}

.zs-sheet-travellers .zs-sheet-step-val {
  font-size: 18px;
  font-weight: 600;
  min-width: 28px;
}

/* ── Resume or New Screen ──────────────────────────────────────────────────── */

.rns-root {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  background: var(--bg, #faf9f7);
}

.rns-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 360px;
  width: 100%;
  background: #fff;
  border: 1px solid var(--border, #e4e0d4);
  border-radius: 20px;
  padding: 36px 28px 28px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.rns-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #f0eeff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.rns-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary, #1a1814);
  margin: 0 0 8px;
  line-height: 1.2;
}

.rns-sub {
  font-size: 14px;
  color: var(--text-secondary, #6b6760);
  margin: 0 0 20px;
  line-height: 1.5;
}

.rns-trip-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #f0eeff;
  border: 1px solid #d6d0ff;
  border-radius: 99px;
  padding: 6px 14px;
  margin-bottom: 24px;
}

.rns-trip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4030F0;
  flex-shrink: 0;
}

.rns-trip-label {
  font-size: 13px;
  font-weight: 600;
  color: #4030F0;
}

.rns-btn {
  width: 100%;
  padding: 13px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  border: none;
}

.rns-btn + .rns-btn {
  margin-top: 10px;
}

.rns-btn--primary {
  background: #4030F0;
  color: #fff;
}

.rns-btn--primary:hover { opacity: 0.88; }

.rns-btn--secondary {
  background: var(--gray-100, #F5F6F7);
  color: var(--text-primary, #1a1814);
  border: 1px solid var(--border, #e4e0d4);
}

.rns-btn--secondary:hover { background: #ededec; }

.rns-all-btn {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary, #6b6760);
  padding: 4px 8px;
}

.rns-all-btn:hover { color: var(--text-primary, #1a1814); }

/* ── Mobile header action buttons (active chat) ────────────────────────────── */

.maya-mobile-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

.maya-mobile-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--text-secondary, #6b6760);
  border-radius: 8px;
  transition: background 0.15s;
}

.maya-mobile-action-btn:hover {
  background: var(--gray-100, #F5F6F7);
  color: var(--text-primary, #1a1814);
}



/* ============================================================
   Travelomore Design Tokens — single source of truth.
   Import this file once at the app root.
   ============================================================ */
:root {
  /* ── Brand: Electric Indigo ── */
  --indigo-50:  #EEEDFE;
  --indigo-100: #DEDBFD;
  --indigo-200: #C0B9FB;
  --indigo-300: #9C90F8;
  --indigo-400: #7361F4;
  --indigo-500: #4030F0;
  --indigo-600: #3422D6;
  --indigo-700: #281BA8;
  --indigo-800: #1D1480;
  --indigo-900: #150E5C;

  /* ── Ink ── */
  --ink-900: #0F1115;
  --ink-800: #16191F;
  --ink-700: #1F232B;

  /* ── Neutrals ── */
  --gray-0:   #FFFFFF;
  --gray-25:  #FAFAFB;
  --gray-50:  #F5F6F7;
  --gray-100: #ECEDEF;
  --gray-200: #DFE1E5;
  --gray-300: #C8CBD1;
  --gray-400: #A6ABB4;
  --gray-500: #7C828D;
  --gray-600: #5A606B;
  --gray-700: #3F444E;
  --gray-800: #282C33;
  --gray-900: #15181D;

  /* ── Semantic ── */
  --green-500:  #1FA463;
  --green-300:  #2FB46B;
  --amber-500:  #E8920C;
  --red-500:    #E5484D;
  --blue-500:   #2E84E8;

  /* ── Semantic aliases ── */
  --brand:           var(--indigo-500);
  --brand-strong:    var(--indigo-600);
  --brand-soft:      var(--indigo-50);
  --brand-on:        #FFFFFF;

  --surface-page:    var(--gray-25);
  --surface-card:    var(--gray-0);
  --surface-sunken:  var(--gray-50);
  --surface-inverse: var(--ink-900);
  --surface-glass:   rgba(255,255,255,0.14);

  --text-strong:     var(--ink-900);
  --text-body:       var(--gray-700);
  --text-muted:      var(--gray-500);
  --text-on-dark:    #FFFFFF;
  --text-on-dark-dim:rgba(255,255,255,0.72);
  --text-brand:      var(--indigo-600);

  --border-subtle:   var(--gray-200);
  --border-strong:   var(--gray-300);
  --border-on-dark:  rgba(255,255,255,0.22);

  --control-ink:     var(--ink-900);
  --control-ink-hover: var(--ink-700);
  --field-bg:        var(--gray-0);
  --field-border:    var(--gray-200);
  --field-focus:     var(--indigo-500);

  --overlay-bottom:  linear-gradient(180deg, rgba(12,14,18,0) 0%, rgba(12,14,18,0.10) 38%, rgba(12,14,18,0.78) 100%);
  --overlay-flat:    rgba(12,14,18,0.32);

  /* ── Typography ── */
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-text:    "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "SF Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    800;

  --fs-display-2xl: 76px;
  --fs-display-xl:  58px;
  --fs-display-lg:  44px;
  --fs-h1:  34px;
  --fs-h2:  28px;
  --fs-h3:  22px;
  --fs-title: 18px;
  --fs-body-lg: 17px;
  --fs-body:  15px;
  --fs-sm:    13px;
  --fs-xs:    12px;
  --fs-overline: 11px;

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-normal:  1.5;
  --lh-relaxed: 1.62;

  --ls-tighter: -0.03em;
  --ls-tight:   -0.015em;
  --ls-normal:  0em;
  --ls-wide:    0.04em;
  --ls-overline:0.14em;

  /* ── Spacing (4px base) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --container-max: 1200px;
  --gutter: 24px;
  --section-y: 96px;

  /* ── Radius ── */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-pill: 999px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(15,17,21,0.06);
  --shadow-sm: 0 2px 6px rgba(15,17,21,0.07);
  --shadow-md: 0 8px 20px rgba(15,17,21,0.08);
  --shadow-lg: 0 18px 40px rgba(15,17,21,0.10);
  --shadow-xl: 0 30px 70px rgba(15,17,21,0.14);
  --shadow-brand: 0 10px 28px rgba(64,48,240,0.30);

  --ring-brand: 0 0 0 3px rgba(64,48,240,0.28);
  --ring-error: 0 0 0 3px rgba(229,72,77,0.26);

  /* ── Motion ── */
  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;
  --dur-slowest: 560ms;

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emph:   cubic-bezier(0.16, 1, 0.3, 1);

  --press-scale: 0.97;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast:    0ms;
    --dur-base:    0ms;
    --dur-slow:    0ms;
    --dur-slowest: 0ms;
    --press-scale: 1;
  }
}
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  /* Firefox: light, subtle overlay scrollbar — thin width, low opacity.
     No gutter reservation — scrollbar overlays content, doesn't partition. */
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 120, 128, 0.24) transparent;
}
body {
  font-family: var(--font-text);
  background: var(--surface-page);
  color: var(--text-strong);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* Light overlay scrollbar (Chrome/Edge/Safari) — a subtle, low-opacity thumb
   that stays visible but doesn't dominate or partition the viewport. */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(120, 120, 128, 0.24);
  border-radius: 100px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(120, 120, 128, 0.38);
}
h1, h2, h3, h4, h5 { font-family: var(--font-display); }
button { font-family: var(--font-text); cursor: pointer; }
img    { display: block; max-width: 100%; }
a      { color: inherit; text-decoration: none; }
.overline {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--brand);
}
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (max-width: 768px) {
  :root {
    --section-y: 56px;
    --gutter: 20px;
  }
}
/**
 * responsive.css — Global mobile responsive overrides for Travelomore.
 * Imported in shell/src/main.tsx after global.css.
 *
 * Breakpoints:
 *   Mobile:         <640px
 *   Large mobile:   640px–767px
 *   Tablet:         768px–1023px
 *   Desktop:        1024px+
 *
 * IMPORTANT: All rules here use max-width so desktop is NEVER affected.
 * Desktop UI is preserved exactly — only smaller viewports change.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   GLOBAL BASE — applies across all pages
   ───────────────────────────────────────────────────────────────────────────── */

/* Prevent horizontal overflow globally on mobile.
   IMPORTANT: only set this on body, never on html too. Setting overflow-x
   on BOTH forces overflow-y:auto on both (an overflow computed-value quirk),
   which makes body register as its own scroll container — and since
   position:sticky anchors to the nearest scroll container, the sticky Nav
   ends up anchored to body's (non-scrolling) box instead of the real
   viewport, so it just scrolls away instead of sticking. With only body
   set, the standard overflow-propagation-to-viewport behavior keeps body
   itself overflow:visible and the viewport handles clipping instead. */
@media (max-width: 1023px) {
  body {
    overflow-x: hidden;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   DESTINATION PAGE — no site nav on mobile; the hero has its own
   back/favourite buttons overlaid on the image instead (see DestinationPage
   .module.css .mobileHeroBar).
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .nav-outer-dest {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   HOMEPAGE — nav floats over the hero image on mobile instead of pushing it
   down, so the hero fills the top of the screen with no gap of plain page
   background above the pill (nav-outer-hero-mobile, set in App.tsx/Nav.tsx).
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-outer-hero-mobile {
    position: absolute !important;
    top: 16px !important;
    left: 0;
    right: 0;
    margin-bottom: 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PACKAGE DETAILS PAGE — nav slides off-screen while scrolling down and
   back in on scroll up, on both mobile and desktop (nav-outer-hide-on-scroll
   / nav-outer-hidden, toggled by Nav.tsx). The page's own Overview/Day Plan
   tab bar (.pkd-sticky-subnav) is the one that stays persistently sticky.
   ───────────────────────────────────────────────────────────────────────────── */
.nav-outer-hide-on-scroll {
  position: fixed !important;
  top: 16px !important;
  left: 0;
  right: 0;
  margin-bottom: 0 !important;
  transition: transform 0.28s ease;
}

.nav-outer-hide-on-scroll.nav-outer-hidden {
  transform: translateY(-140%);
}

/* ─────────────────────────────────────────────────────────────────────────────
   NAV — Mobile drawer improvements
   ───────────────────────────────────────────────────────────────────────────── */

/* On mobile the drawer can be very long (all regions + destinations).
   Make it more navigable with better visual separation. */
@media (max-width: 767px) {
  /* Reduce top offset so pill doesn't eat too much real estate */
  /* The outer header already handles sticky positioning */

  /* Improve pill on very small screens */
  .nav-pill-shrink {
    padding: 8px 10px 8px 16px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   FOOTER — responsive (already has some, enhancing)
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  /* Already handled in Footer.module.css */
}

/* ─────────────────────────────────────────────────────────────────────────────
   HOME MFE — LoggedInWelcome, PersonalizedBanner, HowItWorks
   ───────────────────────────────────────────────────────────────────────────── */

/* LoggedInWelcome — currently always uses desktop layout */
@media (max-width: 640px) {
  /* Ensure welcome banner stacks well */
  [class*="LoggedInWelcome"] [class*="inner"] {
    padding: 40px 20px 32px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PACKAGES PAGE — this uses inline styles, so we target scoped CSS classes
   injected via the <style> tag inside the component
   ───────────────────────────────────────────────────────────────────────────── */

/* These target the .pkg-page wrapper that PackagesPage renders */
@media (max-width: 1023px) {
  /* The sidebar (filter panel) disappears; show toggle button */
  .pkg-sidebar-overlay {
    display: block !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PACKAGE DETAILS PAGE — sticky section sub-nav offset
   Sits below the floating main nav pill while it's visible, leaving a clear
   gap rather than overlapping it. The main nav hides while scrolling down
   (nav-outer-hide-on-scroll, see above) and toggles body.tm-nav-hidden when
   it does — at that point this bar has nothing to sit below anymore, so it
   closes the gap and sticks flush at the very top instead. It reopens the
   gap the moment you scroll up and the nav slides back in.
   ───────────────────────────────────────────────────────────────────────────── */

.pkd-sticky-subnav {
  top: 90px;
  transition: top 0.28s ease;
}

@media (max-width: 1023px) {
  .pkd-sticky-subnav {
    top: 82px;
  }
}

@media (max-width: 480px) {
  .pkd-sticky-subnav {
    top: 78px;
  }
}

body.tm-nav-hidden .pkd-sticky-subnav {
  top: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PACKAGE DETAILS PAGE — sticky bottom CTA bar on mobile
   ───────────────────────────────────────────────────────────────────────────── */

/* Sticky bottom bar (we'll add this class in the TSX component) */
.pkd-mobile-cta-bar {
  display: none;
}

@media (max-width: 1023px) {
  .pkd-mobile-cta-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 400;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-subtle);
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    gap: 12px;
    align-items: center;
  }

  .pkd-mobile-cta-price {
    flex: 1;
    min-width: 0;
  }

  .pkd-mobile-cta-price-val {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-strong);
    font-family: var(--font-display);
    line-height: 1.1;
  }

  .pkd-mobile-cta-price-sub {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-text);
  }

  .pkd-mobile-cta-btn {
    flex-shrink: 0;
    padding: 14px 28px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-text);
    cursor: pointer;
    min-height: 48px;
    white-space: nowrap;
    transition: background 0.15s ease, box-shadow 0.15s ease;
  }

  .pkd-mobile-cta-btn:hover {
    background: var(--brand-strong);
    box-shadow: 0 4px 16px rgba(64, 48, 240, 0.35);
  }

  /* Add bottom padding to page content so it doesn't hide behind sticky bar */
  .pkd-page-content {
    padding-bottom: 88px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PACKAGE DETAILS PAGE — hero top padding
   The main nav is position:fixed on this page (nav-outer-hide-on-scroll)
   and out of document flow entirely, so nothing reserves space for it —
   without this, the floating pill would sit on top of the hero's
   breadcrumb/title instead of floating above it with clear space.
   ───────────────────────────────────────────────────────────────────────────── */
.pkd-hero-wrap {
  padding-top: 104px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PACKAGE DETAILS PAGE — 2-col → 1-col layout on tablet/mobile
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  /* Hero section — tighter padding, but keep enough top clearance for the
     floating fixed nav pill (~78px tall on mobile + 16px gap) */
  .pkd-hero-wrap {
    padding: 90px 14px 0 !important;
  }

  .pkd-hero-section {
    min-height: 320px !important;
    padding: 22px 22px 22px !important;
  }

  .pkd-hero-title {
    font-size: 28px !important;
    letter-spacing: -0.025em !important;
  }

  .pkd-gallery-strip {
    display: none !important;
  }

  /* Trip fact chips — let them wrap 2-up cleanly instead of near-full-width */
  .pkd-hero-chips {
    margin-bottom: 32px !important;
  }

  .pkd-hero-chip {
    min-width: calc(50% - 6px) !important;
  }

  /* Tab nav — tighter */
  .pkd-tab-nav-inner {
    padding: 0 16px !important;
  }

  /* Legacy tab-nav price+CTA (removed from markup, no longer duplicates the
     sidebar/mobile CTA — rule kept as a no-op guard in case it returns). */
  .pkd-tab-price {
    display: none !important;
  }

  /* Body grid — single column */
  .pkd-body-grid {
    grid-template-columns: 1fr !important;
    padding: 24px 16px 0 !important;
  }

  /* Grid items default to min-width:auto, so they refuse to shrink below
     their content's natural (max-content) width even though their track is
     only viewport-wide — this was the actual cause of content being clipped
     on the right on mobile (global overflow-x:hidden hid the overflow
     instead of showing a scrollbar). Force them to respect the track. */
  .pkd-body-grid > * {
    min-width: 0 !important;
  }

  /* Hide sticky right sidebar; mobile CTA bar takes over */
  .pkd-right-sidebar {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PACKAGE DETAILS PAGE — Day Plan / Hotel cards use hardcoded px grid columns
   (300px/400px + 1fr) that never collapse, crushing the text column and
   truncating content on narrow screens. Stack them on mobile.
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .day-card,
  .hotel-card {
    grid-template-columns: 1fr !important;
  }

  .day-card > div:first-child,
  .hotel-card > div:first-child {
    width: 100% !important;
    height: 180px !important;
    min-height: 180px !important;
  }

  /* Overview section: "The Journey" + "What's Included" 2-col → stacked */
  .pkd-overview-grid {
    grid-template-columns: 1fr !important;
  }

  /* "Everything Else" info cards: 3-col → stacked */
  .pkd-info-cards-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  /* Season card month grid: 6 cols is too tight on small phones */
  .pkd-month-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .pkd-hero-section {
    min-height: 240px !important;
    padding: 18px !important;
    border-radius: 20px !important;
  }

  .pkd-hero-title {
    font-size: 22px !important;
  }

  .pkd-tab-nav-inner {
    padding: 0 12px !important;
  }

  .pkd-body-grid {
    padding: 16px 12px 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   TRAVELLER DETAILS — layout + sticky bottom CTA
   ───────────────────────────────────────────────────────────────────────────── */

/* Hide left sidebar on tablet/mobile; form takes full width */
@media (max-width: 1023px) {
  .tdp-left-sidebar {
    display: none !important;
  }

  .tdp-layout {
    padding: 16px 12px 100px !important;
  }
}

.tdp-sticky-bar {
  display: none;
}

@media (max-width: 1023px) {
  .tdp-sticky-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 300;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-subtle);
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    align-items: center;
    gap: 12px;
  }

  .tdp-sticky-bar-summary {
    flex: 1;
    min-width: 0;
  }

  .tdp-sticky-bar-total {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-strong);
    font-family: var(--font-display);
    line-height: 1.1;
  }

  .tdp-sticky-bar-label {
    font-size: 12px;
    color: var(--text-muted);
  }

  .tdp-sticky-bar-btn {
    flex-shrink: 0;
    padding: 14px 24px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-text);
    cursor: pointer;
    min-height: 48px;
    white-space: nowrap;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   BOOKING CONFIRMATION PAGE — 2-col → 1-col on tablet/mobile
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .bcp-container {
    padding: 16px 16px 0 !important;
  }

  .bcp-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .bcp-container {
    padding: 12px 12px 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   BOTTOM SHEET — generic utility class for mobile modals / panels
   ───────────────────────────────────────────────────────────────────────────── */

/* Use on overlay wrappers to convert desktop modals to bottom sheets */
@media (max-width: 640px) {
  .mobile-bottom-sheet-overlay {
    align-items: flex-end !important;
  }

  .mobile-bottom-sheet-card {
    border-radius: 20px 20px 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90svh;
    overflow-y: auto;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   HORIZONTAL SCROLL CHIP ROWS — no scroll on desktop, scroll on mobile
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .mobile-chip-scroll {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .mobile-chip-scroll::-webkit-scrollbar {
    display: none;
  }

  .mobile-chip-scroll > * {
    flex-shrink: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SAFE AREA HELPERS
   ───────────────────────────────────────────────────────────────────────────── */

/* Pages with sticky bottom bars need bottom padding to avoid content hiding */
@media (max-width: 1023px) {
  .has-mobile-sticky-bar {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   MISC MOBILE UTILITIES
   ───────────────────────────────────────────────────────────────────────────── */

/* Hide on mobile */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}

@media (max-width: 1023px) {
  .hide-tablet { display: none !important; }
}

/* Show only on mobile */
.show-mobile { display: none !important; }

@media (max-width: 767px) {
  .show-mobile { display: block !important; }
}

.show-mobile-flex { display: none !important; }

@media (max-width: 767px) {
  .show-mobile-flex { display: flex !important; }
}