@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/instrument-serif-regular-50498e62.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/instrument-serif-italic-d221f42c.woff2") format("woff2");
}

.font-editorial {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.font-editorial em {
  font-style: italic;
}

/* Leaflet custom pin markers */
.tripr-pin {
  background: transparent !important;
  border: none !important;
}

.tripr-pin-number {
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border: 2.5px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.tripr-pin-letter {
  background: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border: 2.5px solid currentColor;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.tripr-pin-hotel {
  background: #44403c;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border: 2.5px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Shadows as utilities */
.shadow-card {
  box-shadow: 0 4px 20px rgba(45, 41, 38, 0.08);
}

.shadow-elevated {
  box-shadow: 0 8px 32px rgba(45, 41, 38, 0.12);
}

.shadow-coral-glow {
  box-shadow: 0 2px 8px rgba(255, 107, 84, 0.3);
}

/* Coral-to-sunset gradient */
.bg-gradient-coral {
  background: linear-gradient(135deg, #FF6B54, #FFAA5C);
}

/* Shimmer animation for loading states */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-shimmer {
  background: linear-gradient(90deg, var(--color-warm-gray-100) 25%, var(--color-warm-gray-200) 50%, var(--color-warm-gray-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Floating plane animation */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.animate-float {
  animation: float 2s ease-in-out infinite;
}

/* Gentle pulse for empty state emojis */
@keyframes gentle-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

.animate-gentle-pulse {
  animation: gentle-pulse 2.5s ease-in-out infinite;
}

/* Indeterminate progress bar */
@keyframes progress-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

.animate-progress {
  animation: progress-indeterminate 1.8s ease-in-out infinite;
}

/* Button press states */
.press-primary {
  transition: transform 100ms ease;
}
.press-primary:active {
  transform: scale(0.97);
}

.btn-cta-primary {
  background-color: #FF6B54;
  background-image: linear-gradient(135deg, #FF6B54, #FFAA5C);
}

.press-card {
  transition: transform 100ms ease;
}
.press-card:active {
  transform: scale(0.98);
}

.press-icon {
  transition: transform 80ms ease;
}
.press-icon:active {
  transform: scale(0.90);
}

/* Focus ring */
.focus-coral:focus-visible {
  outline: 3px solid rgba(255, 107, 84, 0.3);
  outline-offset: 2px;
}

/* Hide scrollbar for day tabs */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Thin warm scrollbar — used by the swipe saved-list rail */
.scrollbar-warm {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 107, 84, 0.25) transparent;
}
.scrollbar-warm::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.scrollbar-warm::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-warm::-webkit-scrollbar-thumb {
  background: rgba(255, 107, 84, 0.25);
  border-radius: 999px;
  transition: background 0.15s ease;
}
.scrollbar-warm::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 107, 84, 0.45);
}

/* Smooth scroll */
html, main {
  scroll-behavior: smooth;
}

/* ── Mobile UX ── */

/* Prevent 300ms tap delay and accidental double-tap zoom */
html {
  touch-action: manipulation;
}

/* Prevent body overscroll bounce (only scroll containers should bounce) */
html, body {
  overscroll-behavior: none;
}

/* Interactive elements should not be selectable */
button, a, [role="button"], .press-primary, .press-card, .press-icon, nav {
  -webkit-user-select: none;
  user-select: none;
}

/* Scroll containers get contained overscroll */
.overscroll-contain {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Ensure inputs are 16px+ to prevent Safari zoom on focus */
input, select, textarea {
  font-size: max(16px, 1em);
}

/* ── View Transitions ── */

/* Default transition: crossfade (for tab switches, general navigation) */
::view-transition-old(root) {
  animation: vt-fade-out 200ms ease-out both;
}
::view-transition-new(root) {
  animation: vt-fade-in 200ms ease-in both;
}

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

/* Slide-right transition (navigating deeper: cities -> swipe) */
.vt-slide-right::view-transition-old(root) {
  animation: vt-slide-out-left 250ms ease-out both;
}
.vt-slide-right::view-transition-new(root) {
  animation: vt-slide-in-right 250ms ease-out both;
}

@keyframes vt-slide-out-left {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-30%); opacity: 0; }
}
@keyframes vt-slide-in-right {
  from { transform: translateX(30%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Slide-left transition (navigating back: itinerary -> cities) */
.vt-slide-left::view-transition-old(root) {
  animation: vt-slide-out-right 250ms ease-out both;
}
.vt-slide-left::view-transition-new(root) {
  animation: vt-slide-in-left 250ms ease-out both;
}

@keyframes vt-slide-out-right {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(30%); opacity: 0; }
}
@keyframes vt-slide-in-left {
  from { transform: translateX(-30%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Scale-up transition (building -> itinerary reveal) */
.vt-scale-up::view-transition-old(root) {
  animation: vt-fade-out 250ms ease-out both;
}
.vt-scale-up::view-transition-new(root) {
  animation: vt-scale-in 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes vt-scale-in {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ── Standalone (installed PWA) mode ── */
@media (display-mode: standalone) {
  /* Extra top padding in standalone mode for status bar area */
  body {
    padding-top: env(safe-area-inset-top);
  }
}

/* ── Ripple effect ── */
.ripple-container {
  position: relative;
  overflow: hidden;
}

.ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 107, 84, 0.15);
  transform: scale(0);
  pointer-events: none;
  z-index: 1;
}

/* ── Bottom Sheet ── */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  z-index: 9990;
  opacity: 0;
  transition: opacity 300ms ease;
}

.sheet-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 85vh;
  background: white;
  border-radius: 24px 24px 0 0;
  overflow-y: auto;
  z-index: 9991;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 350ms cubic-bezier(0.32, 0.72, 0, 1), opacity 200ms ease;
  padding-bottom: 0;
  box-shadow: 0 -8px 40px rgba(45, 41, 38, 0.12);
  will-change: transform, opacity;
}

.sheet-panel.sheet-open {
  transform: translateY(0);
  opacity: 1;
}

.sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: #d1d5db;
  margin: 8px auto 0;
}

/* Day-tabs scroll wrap — fade gradient on the right edge so pills scroll
   under the summary info button without visually clipping. */
.day-tabs-scroll-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(250, 246, 241, 0) 0%, rgba(250, 246, 241, 1) 70%);
}

/* ── Swipe page: Frosted Glass chrome ── */
@keyframes swipe-float-emoji { 0% { transform: translateY(100vh) rotate(0); opacity: 0; } 10% { opacity: 0.15; } 90% { opacity: 0.15; } 100% { transform: translateY(-100px) rotate(360deg); opacity: 0; } }
@keyframes swipe-slide-down { 0% { transform: translateY(-30px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes swipe-card-up { 0% { transform: translateY(60px) scale(0.9); opacity: 0; } 60% { transform: translateY(-6px) scale(1.02); } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes swipe-btn-pop { 0% { transform: scale(0) rotate(-20deg); opacity: 0; } 60% { transform: scale(1.15) rotate(5deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes swipe-progress-fill { 0% { width: 0; } 100% { width: var(--p); } }
@keyframes swipe-pulse-glow { 0%, 100% { box-shadow: 0 4px 20px rgba(255,107,84,0.25); } 50% { box-shadow: 0 8px 36px rgba(255,107,84,0.45); } }
@keyframes swipe-build-enter { 0% { transform: translateY(20px) scale(0.95); opacity: 0; } 60% { transform: translateY(-3px) scale(1.02); } 100% { transform: translateY(0) scale(1); opacity: 1; } }

/* ── Swipe card flip ──
   The flip is applied to .flip-inner (a child of the card shell) so it
   composes cleanly with the drag/swipe transforms applied to the parent
   shell by swipe_card_controller.js. */
.flip-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}
.flip-inner[data-flipped="true"] {
  transform: rotateY(180deg);
}
.card-face {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.card-back {
  transform: rotateY(180deg);
  background: #FAF9F6; /* cream — matches app background */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ── Editorial back-of-card (used on both mobile and desktop) ──────────
   The .card-back-editorial-* rules render a single editorial layout shared
   by both card shells. Mobile is the default; @media (min-width: 1024px)
   bumps padding and type sizes for desktop.
*/

.card-back-editorial .card-back-editorial-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  background: #FFF9F2;
  overflow-y: auto;
}

.card-back-editorial-verdict {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 800;
  text-transform: uppercase;
}
.card-back-editorial-verdict--must_see         { background: linear-gradient(135deg, #10B981 0%, #047857 100%); }
.card-back-editorial-verdict--worth_it         { background: linear-gradient(135deg, #3B82F6 0%, #1E40AF 100%); }
.card-back-editorial-verdict--niche            { background: linear-gradient(135deg, #A855F7 0%, #6B21A8 100%); }
.card-back-editorial-verdict--if_you_have_time { background: linear-gradient(135deg, #A89788 0%, #574A40 100%); }

.card-back-editorial-name {
  margin: 14px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 800;
  color: #2A2420;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.card-back-editorial-reason {
  margin: 8px 0 0;
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.4;
  color: #574A40;
}

.card-back-editorial-rule {
  width: 36px;
  height: 2px;
  background: #F87060;
  margin: 14px 0;
}

.card-back-editorial-what-it-is {
  margin: 0;
  font-size: 13px;
  color: #574A40;
  line-height: 1.55;
}

.card-back-editorial-activities {
  margin-top: 14px;
}
.card-back-editorial-activities-label {
  margin: 0 0 10px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: #A89788;
  padding-bottom: 10px;
  border-bottom: 1px solid #F2EDE7;
}

.card-back-editorial-activity-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.card-back-editorial-activity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid #F2EDE7;
}
.card-back-editorial-activity:last-child {
  border-bottom: none;
}

.card-back-editorial-activity-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.card-back-editorial-activity-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #2A2420;
}

.card-back-editorial-activity-note {
  font-size: 11.5px;
  font-style: italic;
  color: #92400E;
  font-weight: 500;
  line-height: 1.3;
}

.card-back-editorial-chip-row {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
  align-items: center;
}

.card-back-editorial-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: #F2EDE7;
  color: #574A40;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.card-back-editorial-chip--cost {
  background: #1F2937;
  color: #fff;
}

.card-back-editorial-foot {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-back-editorial-link {
  font-size: 12px;
  font-weight: 600;
  color: #E0594A;
  text-decoration: none;
}
.card-back-editorial-link:hover {
  text-decoration: underline;
}

.card-back-editorial-flip-cue {
  font-size: 11px;
  color: #A89788;
}

/* Desktop overrides — slightly more breathing room and larger type. */
@media (min-width: 1024px) {
  .card-back-editorial .card-back-editorial-content { padding: 26px 28px; }
  .card-back-editorial-name      { margin-top: 18px; font-size: 30px; }
  .card-back-editorial-reason    { margin-top: 10px; font-size: 15px; }
  .card-back-editorial-rule      { margin: 18px 0; }
  .card-back-editorial-what-it-is { font-size: 14px; }
  .card-back-editorial-activities { margin-top: 18px; }
  .card-back-editorial-activities-label { margin-bottom: 12px; padding-bottom: 12px; }
  .card-back-editorial-activity  { padding: 14px 0; gap: 12px; }
  .card-back-editorial-activity-name { font-size: 14.5px; }
  .card-back-editorial-activity-note { font-size: 12px; }
  .card-back-editorial-foot      { padding-top: 14px; }
}

/* ===== Onboarding hint =====
   Activated by adding `.is-onboarding` to the top card element.
   Drives a tilt-right + tilt-left loop and synchronizes the
   existing LIKE/NOPE stamp opacities. Removes itself when the
   class is removed (first user interaction). */

@keyframes swipe-onboarding-tilt {
  0%, 10%   { transform: translate(0, 0) rotate(0deg); }
  20%, 32%  { transform: translate(40px, 0) rotate(10deg); }
  42%, 50%  { transform: translate(0, 0) rotate(0deg); }
  60%, 72%  { transform: translate(-40px, 0) rotate(-10deg); }
  82%, 100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes swipe-onboarding-like-stamp {
  0%, 19%   { opacity: 0; }
  20%, 32%  { opacity: 1; }
  38%, 100% { opacity: 0; }
}

@keyframes swipe-onboarding-nope-stamp {
  0%, 59%   { opacity: 0; }
  60%, 72%  { opacity: 1; }
  78%, 100% { opacity: 0; }
}

.is-onboarding[data-swipe-card-target="card"] {
  animation: swipe-onboarding-tilt 4s ease-in-out infinite;
}

.is-onboarding[data-swipe-card-target="card"] [data-swipe-card-target="likeOverlay"] {
  animation: swipe-onboarding-like-stamp 4s ease-in-out infinite;
}

.is-onboarding[data-swipe-card-target="card"] [data-swipe-card-target="nopeOverlay"] {
  animation: swipe-onboarding-nope-stamp 4s ease-in-out infinite;
}

@keyframes fit-badge-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.fit-badge-pulse { animation: fit-badge-pulse 300ms ease-out; }

.swipe-bg-emoji { position: fixed; font-size: 24px; pointer-events: none; z-index: 0; opacity: 0; }
.swipe-build-ticket { background: white; border-radius: 20px; box-shadow: 0 4px 24px rgba(45,41,38,0.08); position: relative; overflow: hidden; }
.swipe-build-ticket::before { content: ''; position: absolute; inset: 5px; border: 1.5px dashed rgba(255,107,84,0.1); border-radius: 16px; pointer-events: none; }
.swipe-perf { border-top: 2px dashed #F0EBE7; position: relative; }
.swipe-perf::before, .swipe-perf::after { content: ''; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: #FAF9F6; }
.swipe-perf::before { left: -8px; }
.swipe-perf::after { right: -8px; }
.swipe-barcode { display: flex; gap: 1.5px; opacity: 0.15; }
.swipe-barcode div { width: 2px; border-radius: 1px; background: #D6D3D1; }

/* ── Leaflet zoom controls: match frosted glass style ── */
.leaflet-control-zoom {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px !important;
}

.leaflet-control-zoom a {
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 4px 20px rgba(45, 41, 38, 0.08) !important;
  color: #57534e !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: transform 80ms ease, background 150ms ease;
}

.leaflet-control-zoom a:hover {
  background: rgba(255, 255, 255, 0.9) !important;
}

.leaflet-control-zoom a:active {
  transform: scale(0.9);
}

.leaflet-control-zoom a:focus {
  outline: none !important;
  box-shadow: 0 4px 20px rgba(45, 41, 38, 0.08) !important;
}

/* ── Itinerary page: Frosted Glass chrome ── */
@keyframes itin-float-emoji { 0% { transform: translateY(100vh) rotate(0); opacity: 0; } 10% { opacity: 0.12; } 90% { opacity: 0.12; } 100% { transform: translateY(-100px) rotate(360deg); opacity: 0; } }
@keyframes itin-slide-down { 0% { transform: translateY(-20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes itin-card-up { 0% { transform: translateY(40px) scale(0.95); opacity: 0; } 60% { transform: translateY(-4px) scale(1.01); } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes itin-pulse-glow { 0%, 100% { box-shadow: 0 4px 20px rgba(255,107,84,0.25); } 50% { box-shadow: 0 8px 36px rgba(255,107,84,0.45); } }

.itin-bg-emoji { position: fixed; font-size: 24px; pointer-events: none; z-index: 0; opacity: 0; }
.itin-save-ticket { background: white; border-radius: 20px; box-shadow: 0 4px 24px rgba(45,41,38,0.08); position: relative; overflow: hidden; }
.itin-save-ticket::before { content: ''; position: absolute; inset: 5px; border: 1.5px dashed rgba(255,107,84,0.1); border-radius: 16px; pointer-events: none; }

.itin-map-pane-mobile {
  height: 35vh;
  min-height: 200px;
  opacity: 0;
  animation: itin-card-up 600ms cubic-bezier(0.34, 1.56, 0.64, 1) both 550ms;
}

/* Itinerary desktop shell pins to the viewport — page never scrolls.
   Each column manages its own internal scroll. Scoped to lg: so the
   unlayered `display: flex` doesn't beat Tailwind's `.hidden` on mobile. */
@media (min-width: 1024px) {
  .itin-desktop-shell {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .itin-desktop-shell > .itin-desktop-container {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 0 !important; /* override pb-24 from desktop_container_class */
  }
}

/* Itinerary desktop grid. Two states: 2-column default, 3-column when right
   panel is open via data-right-panel-open="true" on the itinerary root. */
.itin-grid {
  display: grid;
  grid-template-columns: minmax(420px, 38%) 1fr;
  gap: 1.5rem;
  transition: grid-template-columns 240ms ease-out;
  flex: 1 1 0;
  min-height: 0;
  padding-bottom: 1.5rem;
}

[data-right-panel-open="true"] .itin-grid {
  grid-template-columns: minmax(380px, 32%) 1fr minmax(380px, 32%);
}

/* When the right panel opens, let the desktop container widen instead of
   squeezing the map column. Cap is generous; smaller viewports still flex. */
@media (min-width: 1024px) {
  [data-right-panel-open="true"] .itin-desktop-container {
    max-width: min(1760px, 100%);
  }
}

.itin-grid-list {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
}

.itin-grid-map {
  min-height: 0;
  height: 100%;
}

.itin-grid-right {
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  display: none;
}

/* Subtle scrollbars for itinerary scroll columns. Thin, warm-toned, fades on hover. */
.itin-grid-list,
.itin-grid-right {
  scrollbar-width: thin;
  scrollbar-color: rgba(45, 41, 38, 0.15) transparent;
}

.itin-grid-list::-webkit-scrollbar,
.itin-grid-right::-webkit-scrollbar {
  width: 6px;
}

.itin-grid-list::-webkit-scrollbar-track,
.itin-grid-right::-webkit-scrollbar-track {
  background: transparent;
}

.itin-grid-list::-webkit-scrollbar-thumb,
.itin-grid-right::-webkit-scrollbar-thumb {
  background-color: rgba(45, 41, 38, 0.15);
  border-radius: 999px;
  transition: background-color 200ms ease;
}

.itin-grid-list:hover::-webkit-scrollbar-thumb,
.itin-grid-right:hover::-webkit-scrollbar-thumb {
  background-color: rgba(45, 41, 38, 0.28);
}

[data-right-panel-open="true"] .itin-grid-right {
  display: block;
}

/* ══════════════════════════════════════════════
   Cities (Home) page styles
   ══════════════════════════════════════════════ */

/* ── Globe + Boarding Pass ── */

.globe-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 0 16px;
  position: relative;
  overflow: hidden;
}

.hotwire-native .globe-wrap {
  padding-top: env(safe-area-inset-top);
}

@media (min-width: 1024px) {
  .globe-wrap {
    padding: 0;
    align-items: flex-start;
    text-align: left;
    overflow: visible;
  }
}

.globe {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #a8e6cf 0%, #55b89a 25%, #3498db 50%, #2980b9 70%, #1a5276 100%);
  position: relative;
  box-shadow:
    inset -20px -20px 40px rgba(0, 0, 0, 0.15),
    inset 10px 10px 30px rgba(255, 255, 255, 0.2),
    0 0 60px rgba(52, 152, 219, 0.25),
    0 0 120px rgba(52, 152, 219, 0.1);
  cursor: pointer;
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.globe::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.35), transparent 55%);
}

@keyframes globe-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.globe { animation: globe-breathe 3.5s ease-in-out infinite; }

.globe-land {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
}

.globe-dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(160, 210, 160, 0.6);
}

@keyframes globe-orbit {
  0% { transform: rotate(0deg) translateX(120px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(120px) rotate(-360deg); }
}

.orbit-dot {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
}

@keyframes glow-ring {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.1; transform: scale(1.3); }
}

.glow-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(52, 152, 219, 0.2);
  animation: glow-ring 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes emoji-burst {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
  60% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5) translateY(-60px); }
}

.emoji-particle {
  position: absolute;
  font-size: 24px;
  pointer-events: none;
  animation: emoji-burst 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 20;
}

@keyframes float-emoji {
  0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 0.12; }
  90% { opacity: 0.12; }
  100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}

.bg-emoji {
  position: fixed;
  font-size: 26px;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}

@media (min-width: 1024px) {
  .bg-emoji { display: none; }
}

@keyframes arc-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.globe-arc {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  border: 2px dashed transparent;
  border-top-color: rgba(255, 107, 84, 0.2);
  border-right-color: rgba(255, 170, 92, 0.15);
  animation: arc-spin 15s linear infinite;
  pointer-events: none;
}

.globe-arc-2 {
  position: absolute;
  inset: -35px;
  border-radius: 50%;
  border: 1px dashed transparent;
  border-bottom-color: rgba(52, 152, 219, 0.12);
  border-left-color: rgba(52, 152, 219, 0.08);
  animation: arc-spin 22s linear infinite reverse;
  pointer-events: none;
}

@keyframes plane-orbit {
  0% { transform: rotate(0deg) translateX(115px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(115px) rotate(-360deg); }
}

.plane-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
  animation: plane-orbit 8s linear infinite;
  z-index: 5;
  color: #FFAA5C;
  filter: drop-shadow(0 2px 4px rgba(255, 170, 92, 0.4));
}

/* Desktop globe — larger and aligned for two-column hero */
@media (min-width: 1024px) {
  .globe--desktop {
    width: 480px;
    height: 480px;
  }

  .globe--desktop .globe-dot {
    transform: scale(2.2);
    transform-origin: center;
  }

  .globe--desktop .orbit-dot {
    animation-name: globe-orbit-desktop;
  }

  .globe--desktop .plane-orbit {
    animation-name: plane-orbit-desktop;
  }
}

@keyframes globe-orbit-desktop {
  0% { transform: rotate(0deg) translateX(280px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(280px) rotate(-360deg); }
}

@keyframes plane-orbit-desktop {
  0% { transform: rotate(0deg) translateX(275px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(275px) rotate(-360deg); }
}

/* Search */
.frost-search {
  backdrop-filter: blur(20px) saturate(180%);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 107, 84, 0.12);
  border-radius: 20px;
  transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.frost-search:focus-within {
  border-color: rgba(255, 107, 84, 0.3);
  box-shadow: 0 4px 24px rgba(255, 107, 84, 0.15);
  transform: scale(1.02);
}

@keyframes search-glow {
  0%, 100% { box-shadow: 0 4px 20px rgba(255, 107, 84, 0.08); }
  50% { box-shadow: 0 8px 32px rgba(255, 107, 84, 0.2); }
}

.search-glow { animation: search-glow 3s ease-in-out infinite; }

/* Boarding pass ticket */
.ticket {
  display: flex;
  align-items: stretch;
  background: white;
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(45, 41, 38, 0.08);
  overflow: visible;
  cursor: pointer;
  transition: all 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.ticket:active {
  transform: translateY(-6px) rotate(-1deg);
  box-shadow: 0 12px 40px rgba(255, 107, 84, 0.15);
}

.ticket-flag {
  width: 76px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FFF0ED, #FFDFDA);
  border-radius: 18px 0 0 18px;
  transition: all 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ticket:active .ticket-flag { background: linear-gradient(135deg, #FFE0D9, #FFC8BE); }

.ticket-flag-svg {
  display: inline-flex;
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ticket:active .ticket-flag-svg { transform: scale(1.25) rotate(-8deg); }

.ticket-perf {
  width: 0;
  flex-shrink: 0;
  border-left: 2px dashed #E8E5E1;
  position: relative;
}

.ticket-perf::before,
.ticket-perf::after {
  content: '';
  position: absolute;
  left: -8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.05);
}

.ticket-perf::before { top: -7px; }
.ticket-perf::after { bottom: -7px; }

.ticket-info {
  flex: 1;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ticket::after {
  content: '';
  position: absolute;
  right: -9px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  box-shadow: inset 2px 0 4px rgba(0, 0, 0, 0.04);
}

.plan-btn {
  font-size: 12px;
  font-weight: 800;
  color: #FF6B54;
  transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ticket:active .plan-btn { transform: translateX(4px) scale(1.1); color: #E85A44; }

.barcode {
  display: flex;
  gap: 2px;
  margin-top: 4px;
  justify-content: flex-end;
}

.barcode-line {
  width: 2.5px;
  border-radius: 1px;
  transition: background 300ms ease;
}

.ticket:active .barcode-line { background: #FFAA5C !important; }

.region-header {
  backdrop-filter: blur(12px);
  background: rgba(255, 240, 237, 0.6);
  border-radius: 14px;
  padding: 10px 16px;
}

.region-badge {
  background: linear-gradient(135deg, #FF6B54, #FFAA5C);
  color: white;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 100px;
}

/* ── Random City Overlay ── */

.random-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
}

.random-overlay.is-active {
  pointer-events: auto;
  opacity: 1;
}

.random-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 350ms ease-out;
}

.random-overlay.is-active .random-backdrop {
  opacity: 1;
}

@keyframes random-globe-spin {
  0% { transform: translateY(-80px) scale(0) rotate(0deg); opacity: 0; }
  30% { opacity: 1; }
  70% { transform: translateY(0) scale(1.2) rotate(540deg); opacity: 1; }
  100% { transform: translateY(0) scale(0) rotate(720deg); opacity: 0; }
}

.random-globe-emoji {
  font-size: 64px;
  position: absolute;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}

.random-globe-emoji.is-animating {
  animation: random-globe-spin 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes random-card-stamp {
  0% { transform: scale(0) rotate(-8deg); opacity: 0; }
  60% { transform: scale(1.06) rotate(1deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.random-card {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: scale(0);
}

.random-card.is-visible {
  animation: random-card-stamp 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes random-card-exit {
  0% { transform: scale(1) rotate(0deg); opacity: 1; }
  100% { transform: scale(0.5) rotate(15deg) translateY(-40px); opacity: 0; }
}

.random-card.is-exiting {
  animation: random-card-exit 300ms ease-in forwards;
}

@keyframes random-label-fade {
  0% { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.random-label {
  position: relative;
  z-index: 1;
  opacity: 0;
}

.random-label.is-visible {
  animation: random-label-fade 300ms ease-out forwards;
}

@keyframes random-btn-slide {
  0% { transform: translateY(30px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.random-buttons {
  position: relative;
  z-index: 1;
  opacity: 0;
}

.random-buttons.is-visible {
  animation: random-btn-slide 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Surprise me button */
.surprise-btn {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: rgba(255, 255, 255, 0.8);
  border: 1.5px solid rgba(255, 107, 84, 0.2);
  border-radius: 100px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 700;
  color: #FF6B54;
  cursor: pointer;
  transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 20px rgba(255, 107, 84, 0.1);
}

.surprise-btn:active {
  transform: scale(0.95);
  border-color: rgba(255, 107, 84, 0.4);
  box-shadow: 0 4px 24px rgba(255, 107, 84, 0.25);
}

/* ── Trip Config Day Slider ── */
.day-slider-wrap {
  text-align: center;
  padding: 0 4px;
}

.day-slider-value {
  font-size: 40px;
  font-weight: 800;
  background: linear-gradient(135deg, #FF6B54, #FFAA5C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.day-slider-label {
  font-size: 13px;
  font-weight: 700;
  color: #A8A5A0;
  margin-top: 2px;
}

.day-slider-track {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #E8E5E1;
  margin: 16px 0 4px;
}

.day-slider-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #FF6B54, #FFAA5C);
  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.day-slider-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}

.day-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: white;
  border: 3px solid #FF6B54;
  box-shadow: 0 2px 10px rgba(255, 107, 84, 0.3);
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms ease;
}

.day-slider-input::-webkit-slider-thumb:active {
  transform: scale(1.2);
  box-shadow: 0 4px 16px rgba(255, 107, 84, 0.45);
}

.day-slider-input::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: white;
  border: 3px solid #FF6B54;
  box-shadow: 0 2px 10px rgba(255, 107, 84, 0.3);
  cursor: pointer;
}

.day-slider-bounds {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: #A8A5A0;
}

.cat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: 16px;
  flex: 1 1 calc(33.33% - 7px);
  min-width: 0;
  cursor: pointer;
  transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.cat-pill-emoji {
  font-size: 24px;
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cat-pill-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cat-pill-active {
  background: linear-gradient(135deg, rgba(255, 107, 84, 0.08), rgba(255, 170, 92, 0.08));
  border: 1.5px solid rgba(255, 107, 84, 0.25);
  box-shadow: 0 2px 12px rgba(255, 107, 84, 0.12);
}

.cat-pill-active .cat-pill-emoji {
  transform: scale(1.15);
}

.cat-pill-active .cat-pill-label {
  color: #FF6B54;
}

.cat-pill-inactive {
  background: white;
  border: 1.5px solid #E8E5E1;
  box-shadow: 0 1px 4px rgba(45, 41, 38, 0.04);
}

.cat-pill-inactive .cat-pill-emoji {
  opacity: 0.4;
  filter: grayscale(0.8);
}

.cat-pill-inactive .cat-pill-label {
  color: #A8A5A0;
}

.cat-pill-inactive:active {
  transform: scale(0.95);
}


/* ══════════════════════════════════════════════
   My Trips page styles
   ══════════════════════════════════════════════ */

@keyframes bp-float-emoji { 0% { transform: translateY(100vh) rotate(0); opacity: 0; } 10% { opacity: 0.12; } 90% { opacity: 0.12; } 100% { transform: translateY(-100px) rotate(360deg); opacity: 0; } }
.bp-bg-emoji { position: fixed; font-size: 24px; pointer-events: none; z-index: 0; opacity: 0; }

@keyframes bp-slide-down { 0% { transform: translateY(-20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes bp-card-in { 0% { transform: translateX(40px) scale(0.95); opacity: 0; } 60% { transform: translateX(-4px) scale(1.01); } 100% { transform: translateX(0) scale(1); opacity: 1; } }

/* Boarding pass ticket */
.bp-ticket {
  display: flex;
  align-items: stretch;
  background: white;
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(45, 41, 38, 0.08);
  overflow: visible;
  position: relative;
  transition: all 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bp-ticket:active {
  transform: translateY(-6px) rotate(-1deg);
  box-shadow: 0 12px 40px rgba(255, 107, 84, 0.15);
}

/* Photo section */
.bp-photo {
  width: 90px;
  flex-shrink: 0;
  border-radius: 18px 0 0 18px;
  overflow: hidden;
  position: relative;
}

.bp-photo img { width: 100%; height: 100%; object-fit: cover; min-height: 110px; }

.bp-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,107,84,0.2), rgba(255,170,92,0.1));
}

.bp-photo-placeholder {
  width: 100%;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FFF0ED, #FFDFDA);
}

/* Perforation */
.bp-perf {
  width: 0;
  flex-shrink: 0;
  border-left: 2px dashed #E8E5E1;
  position: relative;
}

.bp-perf::before,
.bp-perf::after {
  content: '';
  position: absolute;
  left: -8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.05);
}

.bp-perf::before { top: -7px; }
.bp-perf::after { bottom: -7px; }

/* Info section */
.bp-info {
  flex: 1;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

/* Right cutout */
.bp-ticket::after {
  content: '';
  position: absolute;
  right: -9px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  box-shadow: inset 2px 0 4px rgba(0, 0, 0, 0.04);
}

/* Route arrow */
.bp-route {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bp-route-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #FF6B54, #FFAA5C);
  position: relative;
}

.bp-route-line::after {
  content: '\2708';
  position: absolute;
  right: -2px;
  top: -8px;
  font-size: 12px;
}

.bp-barcode { display: flex; gap: 1.5px; }
.bp-barcode div { width: 2px; border-radius: 1px; background: #E8E5E1; }

/* Status dot */
@keyframes bp-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } }
.bp-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: bp-pulse 2s ease-in-out infinite;
}


/* ══════════════════════════════════════════════
   Profile page styles
   ══════════════════════════════════════════════ */

@keyframes stack-fan {
  0% { transform: translateY(40px) rotate(0deg) scale(0.85); opacity: 0; }
  100% { transform: translateY(0) rotate(var(--pr, 0deg)) scale(1); opacity: var(--fo, 1); }
}

.page-stack { position: relative; padding-bottom: 10px; }

.page-bg-1, .page-bg-2 {
  position: absolute;
  left: 8px; right: 8px;
  height: 100%;
  background: white;
  border-radius: 22px;
  box-shadow: 0 2px 12px rgba(45, 41, 38, 0.06);
}

.page-bg-2 { bottom: -12px; --pr: -2deg; --fo: 0.3; animation: stack-fan 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both 0ms; }
.page-bg-1 { bottom: -6px; --pr: 2deg; --fo: 0.5; animation: stack-fan 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both 80ms; }

.page-main {
  background: white;
  border-radius: 22px;
  box-shadow: 0 8px 40px rgba(45, 41, 38, 0.1);
  position: relative;
  z-index: 2;
  overflow: visible;
  --pr: 0deg; --fo: 1;
  animation: stack-fan 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both 160ms;
}

.page-main::before {
  content: '';
  position: absolute;
  top: 6px; left: 6px; right: 6px; bottom: 6px;
  border: 1.5px dashed rgba(255, 107, 84, 0.1);
  border-radius: 18px;
  pointer-events: none;
  z-index: 1;
}

.pp-top { padding: 24px 24px 20px; text-align: center; }

.pp-corner-tl, .pp-corner-tr {
  position: absolute;
  width: 20px; height: 20px;
  border-color: rgba(255, 107, 84, 0.15);
  border-style: solid;
  border-width: 0;
}
.pp-corner-tl { top: 14px; left: 14px; border-top-width: 2px; border-left-width: 2px; border-radius: 6px 0 0 0; }
.pp-corner-tr { top: 14px; right: 14px; border-top-width: 2px; border-right-width: 2px; border-radius: 0 6px 0 0; }

@keyframes badge-drop {
  0% { transform: translateY(-20px) scale(0.5); opacity: 0; }
  50% { transform: translateY(4px) scale(1.08); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.pp-title-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #FFF5F3, #FFF0ED);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 16px;
  opacity: 0;
  animation: badge-drop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both 350ms;
}

.pp-title-text { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: #FF6B54; }

@keyframes av-slam {
  0% { transform: scale(0) rotate(-25deg); }
  40% { transform: scale(1.25) rotate(8deg); }
  60% { transform: scale(0.92) rotate(-3deg); }
  80% { transform: scale(1.05) rotate(1deg); }
  100% { transform: scale(1) rotate(0); }
}

.pp-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF6B54, #FFAA5C);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  box-shadow: 0 6px 24px rgba(255, 107, 84, 0.25);
  animation: av-slam 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both 450ms;
  position: relative;
}

@keyframes emoji-pop {
  0% { transform: scale(0) rotate(-20deg); opacity: 0; }
  60% { transform: scale(1.3) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(var(--er, 0deg)); opacity: 1; }
}

@keyframes emoji-float {
  0%, 100% { transform: translateY(0) rotate(var(--er, 0deg)); }
  50% { transform: translateY(-5px) rotate(calc(var(--er, 0deg) + 10deg)); }
}

.pp-emoji-accent {
  position: absolute;
  font-size: 16px;
  z-index: 6;
  opacity: 0;
  animation: emoji-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both,
             emoji-float 3s ease-in-out infinite;
}

.pp-emoji-1 { top: -8px; right: -12px; --er: -5deg; animation-delay: 700ms, 700ms; }
.pp-emoji-2 { top: -4px; left: -14px; --er: 8deg; animation-delay: 800ms, 800ms; }
.pp-emoji-3 { bottom: -8px; right: 4px; --er: -3deg; animation-delay: 900ms, 900ms; }

@keyframes text-up {
  0% { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.pp-name { opacity: 0; animation: text-up 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both 650ms; }
.pp-email { opacity: 0; animation: text-up 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both 720ms; }

@keyframes field-pop {
  0% { transform: translateY(12px) scale(0.9); opacity: 0; }
  60% { transform: translateY(-2px) scale(1.02); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.pp-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0 0;
  text-align: left;
}

.pp-fields:has(> .pp-field:only-child) {
  grid-template-columns: 1fr;
}

.pp-field {
  padding: 10px 12px;
  background: #FAFAF9;
  border-radius: 14px;
  opacity: 0;
  animation: field-pop 450ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.pp-field:nth-child(1) { animation-delay: 800ms; }
.pp-field:nth-child(2) { animation-delay: 900ms; }

.pp-field-label { font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: #A8A29E; margin-bottom: 2px; }
.pp-field-value { font-size: 13px; font-weight: 700; color: #2D2926; }

.pp-perf {
  border-top: 2.5px dashed #F0EBE7;
  position: relative;
}
.pp-perf::before, .pp-perf::after {
  content: '';
  position: absolute;
  top: -11px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: white;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.04);
}
.pp-perf::before { left: -10px; }
.pp-perf::after { right: -10px; }

.pp-bottom {
  padding: 18px 20px 14px;
  background: linear-gradient(135deg, #FFFAF8, #FFF5F3);
  border-radius: 0 0 22px 22px;
}

@keyframes stamp-slam {
  0% { transform: scale(3) rotate(-12deg); opacity: 0; }
  35% { opacity: 1; }
  50% { transform: scale(0.88) rotate(4deg); }
  70% { transform: scale(1.06) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.pp-stats { display: flex; justify-content: space-around; }

.pp-stat {
  text-align: center;
  opacity: 0;
  animation: stamp-slam 600ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.pp-stat:nth-child(1) { animation-delay: 1000ms; }
.pp-stat:nth-child(2) { animation-delay: 1150ms; }
.pp-stat:nth-child(3) { animation-delay: 1300ms; }

.pp-stat-emoji { font-size: 22px; display: block; margin-bottom: 4px; }
.pp-stat-num { font-size: 1.5rem; font-weight: 800; color: #FF6B54; line-height: 1; }
.pp-stat-lbl { font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #A8A29E; margin-top: 3px; }

@keyframes bc-sweep {
  0% { clip-path: inset(0 100% 0 0); opacity: 0; }
  100% { clip-path: inset(0 0 0 0); opacity: 0.2; }
}

.pp-bc {
  display: flex; gap: 2px; justify-content: center;
  padding: 10px 0 4px;
  opacity: 0;
  animation: bc-sweep 600ms ease-out both 1500ms;
}
.pp-bc-line { width: 2px; border-radius: 1px; background: #D6D3D1; }

@keyframes edit-in {
  0% { opacity: 0; transform: translateY(20px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.pp-edit {
  background: white;
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(45, 41, 38, 0.07);
  padding: 20px;
  opacity: 0;
  animation: edit-in 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both 1400ms;
}

.pp-flbl { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: #A8A29E; }

.pp-signout { opacity: 0; animation: edit-in 400ms ease-out both 1550ms; }

@keyframes float-bg-profile {
  0% { transform: translateY(100vh) rotate(0); opacity: 0; }
  10% { opacity: 0.1; }
  90% { opacity: 0.1; }
  100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}
.bg-emoji-p { position: fixed; font-size: 26px; pointer-events: none; z-index: 0; opacity: 0; }

/* Guest passport */
@keyframes guest-in {
  0% { transform: translateY(24px) scale(0.96); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.guest-passport {
  background: white;
  border-radius: 24px;
  box-shadow: 0 8px 40px rgba(45, 41, 38, 0.08);
  overflow: hidden;
  position: relative;
  animation: guest-in 600ms cubic-bezier(0.34, 1.56, 0.64, 1) both 200ms;
}

.guest-passport::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 2px dashed rgba(255, 107, 84, 0.1);
  border-radius: 20px;
  pointer-events: none;
}


/* ── Hotwire Native: hide web-only UI when inside native iOS/Android shell ── */
.hotwire-native nav.fixed.bottom-5 { display: none !important; }
.hotwire-native main { padding-bottom: 0 !important; }
.hotwire-native .pb-24 { padding-bottom: 1.25rem !important; }
.hotwire-native body { padding-top: 0; overflow-x: hidden; }
html.hotwire-native { overflow-x: hidden; }
.hotwire-native [data-page="mytrips"],
.hotwire-native [data-page="profile"] { padding-top: env(safe-area-inset-top); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .press-primary:active,
  .press-card:active,
  .press-icon:active {
    transform: none;
  }
  .animate-float,
  .animate-gentle-pulse,
  .animate-shimmer,
  .animate-progress {
    animation: none;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
  .ripple-circle {
    display: none;
  }
}

/* ══════════════════════════════════════════════
   Itinerary edit mode visibility
   ══════════════════════════════════════════════ */
[data-controller~="itinerary-edit"] .edit-only { display: none; }
[data-controller~="itinerary-edit"][data-editing="true"] .edit-only { display: flex; }
[data-controller~="itinerary-edit"][data-editing="true"] .view-only { display: none; }

/* ══════════════════════════════════════════════
   Sortable drag feel
   ══════════════════════════════════════════════ */

/* Warm up the compositor in edit mode so the first drag is smooth.
   Without this, the first drag paints slightly janky because the browser
   has to promote the dragged card to its own layer mid-drag. */
[data-controller~="itinerary-edit"][data-editing="true"] [data-sortable-day-target="card"] {
  will-change: transform;
}

/* Undo toast entrance (the slot centers horizontally; we translate Y only) */
@keyframes undo-toast-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-undo-toast-in {
  animation: undo-toast-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* === Custom drag animation (real-card-follows-finger) === */

/* The slot that stays visible while a card is picked up.
   Quiet warm-gray recess — no coral, no border, no animation. */
[data-sortable-day-target="slot"] {
  background: #F4F1EE;
  box-shadow:
    inset 0 1px 2px rgba(76, 45, 30, 0.06),
    inset 0 -1px 0 rgba(255, 255, 255, 0.5);
}

/* Siblings animate their transforms via FLIP while a drag is active. */
[data-controller~="sortable-day"].is-dragging-list [data-sortable-day-target="card"]:not(.is-lifted),
[data-controller~="sortable-day"].is-dragging-list [data-sortable-day-target="divider"],
[data-controller~="sortable-day"].is-dragging-list [data-sortable-day-lunch-marker-value="true"] {
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* While a drag is active inside the desktop shell, every day-list wrapper
   needs overflow: visible so the lifted (position: fixed) card isn't
   clipped when the pointer crosses into another day. The .backdrop-blur-xl
   on the list wrapper creates a containing block for fixed descendants,
   so the card stays a DOM child of the origin list — and would be clipped
   by overflow: hidden. The override is scoped to .itin-desktop-shell so
   mobile within-day drag is unaffected. */
.itin-desktop-shell:has([data-controller~="sortable-day"].is-dragging-list) [data-sortable-day-target="list"] {
  overflow: visible;
}

/* Drag handle on touch devices: claim the gesture before iOS does.
   touch-action: none stops the page from scrolling under the finger,
   and disabling selection/callout prevents the magnifier from hijacking the press. */
.drag-handle {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* The lifted card itself — position:fixed so it follows the pointer,
   pointer-events: none so it doesn't intercept hits on siblings. */
.is-lifted {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 50;
  pointer-events: none;
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow:
    0 2px 4px rgba(76, 45, 30, 0.08),
    0 14px 28px -6px rgba(76, 45, 30, 0.22),
    0 30px 60px -16px rgba(76, 45, 30, 0.25) !important;
  transition: box-shadow 200ms ease;
}

/* === Chapter break divider (used for the "If you have time" overflow section) === */
/* Inset divider between consecutive attraction rows. Unlayered rule so it
   reliably renders over whatever Tailwind utilities sit on the row. */
.card-divider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 78px;
  right: 12px;
  border-top: 1px solid rgba(139, 127, 114, 0.1);
  pointer-events: none;
}

.chapter-break {
  position: relative;
}

.chapter-break::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50%;
  border-top: 1.5px dashed rgba(255, 107, 84, 0.35);
}

.chapter-break-pill {
  position: relative;
  background: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 107, 84, 0.35);
  box-shadow: 0 2px 4px rgba(76, 45, 30, 0.04);
}

/* In edit mode, a chapter-break with no overflow rows below it still needs to
   show (so users have a drop target when dragging a card into overflow).
   Tailwind's `.hidden` utility is inside @layer utilities and loses to any
   unlayered rule, so this single rule reliably overrides the hidden class and
   ensures the pill stays centered. */
[data-controller~="itinerary-edit"][data-editing="true"] .chapter-break.hidden {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ══════════════════════════════════════════════
   Preferences UI components
   ══════════════════════════════════════════════ */

.pref-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 0;
  background: #FFFAF5;
  border: 1.5px solid #f0e0d0;
  border-radius: 0.75rem;
  font-weight: 800;
  color: #57504a;
  font-size: 0.8125rem;
}
.pref-pill-active {
  background: #FF6B5B;
  border-color: #FF6B5B;
  color: #ffffff;
}
.pref-pill-caption {
  font-size: 0.5625rem;
  font-weight: 700;
  color: #999;
  display: block;
}
.pref-pill-active .pref-pill-caption {
  color: rgba(255, 255, 255, 0.85);
}
.pref-vibe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.875rem 0.5rem;
  background: #FFFAF5;
  border: 1.5px solid #f0e0d0;
  border-radius: 0.875rem;
  text-align: center;
}
.pref-vibe-icon {
  font-size: 1.5rem;
  line-height: 1;
}
.pref-vibe-label {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #2d2724;
}
.pref-vibe-caption {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #999;
}
.pref-vibe-active {
  background: #FF6B5B;
  border-color: #FF6B5B;
}
.pref-vibe-active .pref-vibe-label {
  color: #ffffff;
}
.pref-vibe-active .pref-vibe-caption {
  color: rgba(255, 255, 255, 0.85);
}
.pref-seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.875rem 0.5rem;
  background: #FFFAF5;
  border: 1.5px solid #f0e0d0;
  border-radius: 0.875rem;
  text-align: center;
}
.pref-seg-icon {
  font-size: 1.375rem;
  margin-bottom: 0.25rem;
  display: block;
}
.pref-seg-label {
  font-size: 0.75rem;
  font-weight: 800;
  color: #57504a;
}
.pref-seg-caption {
  font-size: 0.5625rem;
  font-weight: 600;
  color: #999;
  margin-top: 0.125rem;
  line-height: 1.3;
}
.pref-seg-active {
  background: #FF6B5B;
  border-color: #FF6B5B;
}
.pref-seg-active .pref-seg-label,
.pref-seg-active .pref-seg-caption {
  color: #ffffff;
}
.pref-card {
  background: #ffffff;
  border-radius: 1.125rem;
  padding: 1rem;
  margin-bottom: 0.875rem;
  box-shadow: 0 1px 2px rgba(45,39,36,0.04), 0 4px 12px rgba(45,39,36,0.03);
}
.pref-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.pref-card-title {
  font-size: 0.875rem;
  font-weight: 800;
  color: #2d2724;
}
.pref-card-required {
  font-size: 0.5625rem;
  font-weight: 800;
  color: #FF6B5B;
  letter-spacing: 0.08em;
  margin-left: auto;
}
.pref-hero {
  padding: 1.125rem 1.125rem 0.875rem;
  position: relative;
  text-align: center;
}
.pref-hero-flag { display: block; line-height: 1; }
.pref-hero-city { font-size: 1.375rem; font-weight: 800; margin-top: 0.25rem; }
.pref-hero-sub  { font-size: 0.75rem; color: #999; font-weight: 700; }
.pref-cta {
  background: #FF6B5B;
  color: #ffffff;
  padding: 0.9375rem;
  text-align: center;
  border-radius: 0.875rem;
  font-weight: 800;
  font-size: 0.875rem;
  box-shadow: 0 6px 16px rgba(255,107,91,0.35);
  display: block;
  width: 100%;
  border: 0;
}
.pref-cta-wrap {
  flex-shrink: 0;
  padding: 0.75rem 1rem 1rem;
  position: relative;
  z-index: 10;
}

/* === Swipe page coach-pill / build-ticket animations (added 2026-04-30) === */

@keyframes swipe-empty-plane-bob {
  0%, 100% { transform: translateY(0)    rotate(-4deg); }
  50%      { transform: translateY(-8px) rotate(4deg); }
}
.swipe-empty-plane {
  display: inline-block;
  animation: swipe-empty-plane-bob 3.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .swipe-empty-plane { animation: none; }
}

@keyframes swipe-cta-pulse-strong {
  0%, 100% { box-shadow: 0 6px 22px rgba(255, 107, 84, 0.5); }
  50%      { box-shadow: 0 8px 32px rgba(255, 107, 84, 0.85); }
}

@keyframes swipe-cta-pulse-stronger {
  0%, 100% { box-shadow: 0 8px 28px rgba(255, 107, 84, 0.6); }
  50%      { box-shadow: 0 10px 40px rgba(255, 107, 84, 1); }
}

@keyframes swipe-cta-shake-medium {
  0%, 100% { transform: scale(1.05) translateX(0)    rotate(0deg); }
  10%      { transform: scale(1.05) translateX(-3px) rotate(-1deg); }
  20%      { transform: scale(1.05) translateX(3px)  rotate(1deg); }
  30%      { transform: scale(1.05) translateX(-2px) rotate(-0.8deg); }
  40%      { transform: scale(1.05) translateX(2px)  rotate(0.8deg); }
  50%      { transform: scale(1.05) translateX(-1px) rotate(0); }
  60%, 99% { transform: scale(1.05) translateX(0)    rotate(0); }
}

@keyframes swipe-cta-shake-urgent {
  0%        { transform: scale(1.06) translateX(0)    translateY(0)    rotate(0deg); }
  3%        { transform: scale(1.06) translateX(-6px) translateY(-1px) rotate(-2deg); }
  6%        { transform: scale(1.06) translateX(6px)  translateY(1px)  rotate(2deg); }
  9%        { transform: scale(1.06) translateX(-5px) translateY(-1px) rotate(-1.6deg); }
  12%       { transform: scale(1.06) translateX(5px)  translateY(1px)  rotate(1.6deg); }
  15%       { transform: scale(1.06) translateX(-3px) translateY(0)    rotate(-1deg); }
  18%       { transform: scale(1.06) translateX(3px)  translateY(0)    rotate(1deg); }
  21%       { transform: scale(1.06) translateX(-2px) translateY(0)    rotate(-0.5deg); }
  24%       { transform: scale(1.06) translateX(2px)  translateY(0)    rotate(0.5deg); }
  27%       { transform: scale(1.06) translateX(-1px) translateY(0)    rotate(0); }
  30%, 100% { transform: scale(1.06) translateX(0)    translateY(0)    rotate(0deg); }
}

/* All states use the slim single-row layout — no inner dashed border anywhere */
.swipe-build-ticket::before {
  display: none;
}

/* Normalize the button_to wrapper so the ticket sits identically to the disabled
   (which is just a bare div). The form/button add their own margins by default. */
#swipe-build-section form.button_to,
#swipe-build-section form.button_to > button {
  display: block;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  width: 100%;
}

/* Recommended (fits) — coral gradient + soft pulse + medium shake */
.swipe-build-ticket--recommended {
  background: linear-gradient(135deg, #FF6B54, #FFAA5C);
  color: white;
  border: none;
  transform: scale(1.05);
}
.swipe-build-ticket--recommended .text-warm-gray-800,
.swipe-build-ticket--recommended .text-warm-gray-700,
.swipe-build-ticket--recommended .text-warm-gray-400,
.swipe-build-ticket--recommended .text-warm-gray-300 {
  color: white;
}
.swipe-build-ticket--recommended .bg-gradient-coral {
  background: white !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  color: #FF6B54;
}
.swipe-build-ticket--recommended .bg-gradient-coral .text-white,
.swipe-build-ticket--recommended .bg-gradient-coral svg,
.swipe-build-ticket--recommended .bg-gradient-coral i {
  color: #FF6B54 !important;
}

/* Recommended-warning (tight/overflow) — same gradient, urgent animation */
.swipe-build-ticket--recommended-warning {
  background: linear-gradient(135deg, #FF6B54, #FFAA5C);
  color: white;
  border: none;
  transform: scale(1.06);
}
.swipe-build-ticket--recommended-warning .text-warm-gray-800,
.swipe-build-ticket--recommended-warning .text-warm-gray-700,
.swipe-build-ticket--recommended-warning .text-warm-gray-400,
.swipe-build-ticket--recommended-warning .text-warm-gray-300 {
  color: white;
}
.swipe-build-ticket--recommended-warning .bg-gradient-coral {
  background: white !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  color: #FF6B54;
}
.swipe-build-ticket--recommended-warning .bg-gradient-coral .text-white,
.swipe-build-ticket--recommended-warning .bg-gradient-coral svg,
.swipe-build-ticket--recommended-warning .bg-gradient-coral i {
  color: #FF6B54 !important;
}

/* Complete — deck exhausted. Calm coral, no shake. */
.swipe-build-ticket--complete {
  background: linear-gradient(135deg, #FF6B54, #FFAA5C);
  color: white;
  border: none;
}
.swipe-build-ticket--complete .text-warm-gray-800,
.swipe-build-ticket--complete .text-warm-gray-700,
.swipe-build-ticket--complete .text-warm-gray-400,
.swipe-build-ticket--complete .text-warm-gray-300 {
  color: white;
}
.swipe-build-ticket--complete .bg-gradient-coral {
  background: white !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  color: #FF6B54;
}
.swipe-build-ticket--complete .bg-gradient-coral .text-white,
.swipe-build-ticket--complete .bg-gradient-coral svg,
.swipe-build-ticket--complete .bg-gradient-coral i {
  color: #FF6B54 !important;
}

@media (prefers-reduced-motion: no-preference) {
  .swipe-build-ticket--recommended {
    animation:
      swipe-cta-pulse-strong 1.2s ease-in-out infinite,
      swipe-cta-shake-medium 1.4s ease-in-out infinite;
  }
  .swipe-build-ticket--recommended-warning {
    animation:
      swipe-cta-pulse-stronger 0.9s ease-in-out infinite,
      swipe-cta-shake-urgent 2.4s ease-in-out infinite;
  }
}

/* Swipe onboarding hint — text-only with action hierarchy */
.swipe-onboarding-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  color: #8C8680;
  line-height: 1;
}
.swipe-onboarding-hint.hidden {
  display: none;
}
.swipe-onboarding-hint__skip { color: #A8A29E; }
.swipe-onboarding-hint__skip-arrow {
  color: #A8A29E;
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.swipe-onboarding-hint__save {
  color: #FF6B54;
  font-weight: 700;
}
.swipe-onboarding-hint__save-arrow {
  color: #FF6B54;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.swipe-onboarding-hint__divider {
  width: 1px;
  height: 11px;
  background: rgba(0, 0, 0, 0.12);
  margin: 0 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .swipe-onboarding-hint__save-arrow {
    animation: swipe-onboarding-nudge 1.6s ease-in-out infinite;
  }
}

@keyframes swipe-onboarding-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}

/* City request bottom sheet */
.city-request-sheet--open .city-request-sheet {
  pointer-events: auto;
}
.city-request-sheet--open .city-request-sheet__backdrop {
  opacity: 1;
}
.city-request-sheet--open .city-request-sheet__panel {
  --tw-translate-y: 0%;
  translate: var(--tw-translate-x, 0) 0;
  transform: translateY(0);
}

@media (min-width: 1024px) {
  /* Closed-state centering: panel sits centered but invisible. */
  .city-request-sheet__panel {
    transform: translate(-50%, -50%);
    translate: none;
  }

  /* Open-state on desktop: keep the centering transform, reveal via opacity. */
  .city-request-sheet--open .city-request-sheet__panel {
    transform: translate(-50%, -50%);
    translate: none;
    opacity: 1;
    pointer-events: auto;
  }
}

/* ===== Onboarding (welcome flow) ===== */
.ob-stage {
  background: linear-gradient(180deg, #FFF7ED 0%, #FDF2E9 100%);
  overflow: hidden;
  z-index: 50;
}
.ob-track {
  width: 600%;
  height: 100%;
  display: flex;
  transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ob-screen {
  width: calc(100% / 6);
  height: 100%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.ob-skip {
  position: absolute;
  top: calc(18px + env(safe-area-inset-top, 0px));
  right: 18px;
  z-index: 10;
  background: rgba(255,255,255,.85);
  border: 0;
  font-size: 16px;
  font-weight: 700;
  color: #6b7280;
  cursor: pointer;
  padding: 12px 20px;
  border-radius: 999px;
  min-height: 48px;
}
.ob-back {
  position: absolute;
  bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  left: 24px;
  z-index: 10;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.92);
  color: #1f2937;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.ob-back.hidden { display: none; }
.ob-progress {
  position: absolute;
  top: 0;
  left: 0; right: 0;
  height: 4px;
  z-index: 11;
  background: rgba(255, 107, 91, 0.12);
  pointer-events: none;
}
.ob-progress-fill {
  height: 100%;
  width: calc(100% / 6);
  background: linear-gradient(90deg, #FF6B5B, #F59E0B);
  transition: width 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ob-next {
  position: absolute;
  bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  right: 24px;
  z-index: 10;
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(135deg, #FF6B5B, #F59E0B);
  color: #fff;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(255, 107, 91, 0.45);
  cursor: pointer;
  animation: ob-pulse-cta 1.6s ease-in-out infinite;
}
.ob-next.hidden { display: none; }
.ob-cta-final {
  position: absolute;
  bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  left: 24px; right: 24px;
  z-index: 10;
  height: 56px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(135deg, #FF6B5B, #F59E0B);
  color: #fff;
  font-weight: 800;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(255, 107, 91, 0.42);
  cursor: pointer;
  animation: ob-pulse-cta 1.6s ease-in-out infinite;
}
.ob-cta-final.hidden { display: none; }
@keyframes ob-pulse-cta {
  0%, 100% { transform: scale(1);    box-shadow: 0 6px 18px rgba(255,107,91,.4); }
  50%      { transform: scale(1.04); box-shadow: 0 8px 22px rgba(255,107,91,.55); }
}
.ob-sign-in {
  position: absolute;
  top: calc(18px + env(safe-area-inset-top, 0px));
  left: 18px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 107, 91, 0.25);
  font-size: 14px;
  font-weight: 700;
  color: #FF6B5B;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 999px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(255, 107, 91, 0.12);
}
.ob-sign-in:hover { background: #fff; border-color: rgba(255, 107, 91, 0.45); }
.ob-sign-in.hidden { display: none; }
.ob-email-card {
  width: 100%;
  max-width: 360px;
  margin: 4px auto 18px;
  padding: 0 4px;
}
.ob-email-input {
  width: 100%;
  height: 56px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #1f2937;
  font-size: 16px;
  padding: 0 24px;
  outline: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
  -webkit-appearance: none;
  appearance: none;
}
.ob-email-input::placeholder { color: #9ca3af; }
.ob-email-input:focus { border-color: #FF6B5B; box-shadow: 0 0 0 4px rgba(255,107,91,.18); }
.ob-email-card-sub {
  margin: 6px 0 0;
  font-size: 12px;
  color: #9ca3af;
  text-align: center;
}
/* ----- Screen 1: Welcome ----- */
.ob-welcome {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  text-align: center;
}
.ob-welcome-stack { width: 100%; }
.ob-welcome-emoji {
  position: absolute;
  opacity: .65;
  font-size: 32px;
  animation: ob-welcome-float 6s ease-in-out infinite;
}
.ob-welcome-emoji-1 { top: 12%; left: 14%; animation-delay: 0s; }
.ob-welcome-emoji-2 { top: 22%; right: 16%; animation-delay: 1s; font-size: 28px; }
.ob-welcome-emoji-3 { bottom: 32%; left: 16%; animation-delay: 2s; font-size: 30px; }
.ob-welcome-emoji-4 { bottom: 22%; right: 18%; animation-delay: .5s; font-size: 28px; }
@keyframes ob-welcome-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.ob-welcome-wordmark {
  font-size: 72px;
  font-weight: 900;
  color: #FF6B5B;
  letter-spacing: -0.02em;
  line-height: 1;
  animation: ob-welcome-fade 600ms ease-out both;
}
.ob-welcome-headline {
  font-size: 32px;
  font-weight: 800;
  color: #1f2937;
  margin-top: 32px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  animation: ob-welcome-fade 600ms ease-out both 200ms;
}
.ob-welcome-sub {
  font-size: 17px;
  color: #6b7280;
  margin-top: 16px;
  line-height: 1.45;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  animation: ob-welcome-fade 600ms ease-out both 400ms;
}
@keyframes ob-welcome-fade {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ----- Screens 2/3/4: Wake / Wind / Pace questions ----- */
.ob-question {
  display: flex;
  flex-direction: column;
  padding: calc(82px + env(safe-area-inset-top, 0px)) 24px calc(140px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}
.ob-question-eyebrow {
  font-size: 12px;
  font-weight: 800;
  color: #FF6B5B;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.ob-question-headline {
  font-size: 30px;
  font-weight: 900;
  color: #1f2937;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-top: 12px;
}
.ob-question-sub {
  font-size: 15px;
  color: #6b7280;
  margin: 12px auto 0;
  max-width: 320px;
  line-height: 1.45;
}
.ob-question-options {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ob-q-opt {
  background: #fff;
  border: 2px solid transparent;
  border-radius: 18px;
  padding: 18px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  text-align: left;
  cursor: pointer;
  transition: border-color 200ms, box-shadow 200ms, transform 100ms;
  appearance: none;
  -webkit-appearance: none;
}
.ob-q-opt:active { transform: scale(.98); }
.ob-q-opt.on {
  border-color: #FF6B5B;
  box-shadow: 0 6px 18px rgba(255,107,91,.18);
  background: linear-gradient(135deg, #FFF7ED, #FEF3C7);
}
.ob-q-opt-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: #FFF7ED;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}
.ob-q-opt.on .ob-q-opt-icon {
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.ob-q-opt-text { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ob-q-opt-label { font-size: 17px; font-weight: 800; color: #1f2937; line-height: 1.15; }
.ob-q-opt-sub   { font-size: 13px; color: #9ca3af; line-height: 1.3; }
.ob-q-opt-time  { font-size: 15px; font-weight: 800; color: #FF6B5B; }

/* Smaller phones: tighten so option cards stay above the floating nav. */
@media (max-height: 760px) {
  .ob-question {
    padding-top: calc(56px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  }
  .ob-question-headline { font-size: 24px; margin-top: 8px; }
  .ob-question-sub      { font-size: 13px; margin-top: 8px; }
  .ob-question-options  { margin-top: 18px; gap: 8px; }
  .ob-q-opt             { padding: 12px 14px; }
  .ob-q-opt-icon        { width: 40px; height: 40px; font-size: 22px; }
  .ob-q-opt-label       { font-size: 15px; }
  .ob-q-opt-sub         { font-size: 12px; }

  .ob-ready {
    padding-top: calc(40px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
  }
  .ob-ready-headline    { font-size: 24px; }
  .ob-ready-sub         { font-size: 13px; margin-top: 6px; }
  .ob-mini-phone        { width: 170px; margin: 14px auto 10px; }

  .ob-next              { width: 60px; height: 60px; font-size: 26px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .ob-back              { width: 44px; height: 44px; font-size: 20px; bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
  .ob-cta-final         { height: 50px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

/* ----- Screen 5: Swipe sandbox ----- */
.ob-swipe {
  display: flex;
  flex-direction: column;
  padding-top: calc(56px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  position: relative;
  box-sizing: border-box;
  height: 100%;
}
.ob-swipe-reset {
  position: absolute;
  top: calc(18px + env(safe-area-inset-top, 0px));
  left: 20px;
  z-index: 9;
  font-size: 13px;
  font-weight: 700;
  color: #6b7280;
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.ob-swipe-coach {
  background: rgba(255,255,255,.95);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 800;
  color: #1f2937;
  box-shadow: 0 3px 10px rgba(0,0,0,.06);
  margin: 0 auto;
  width: fit-content;
}
.ob-swipe-cardstage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px 4px;
  position: relative;
  min-height: 0;
}
.ob-swipe-card {
  width: 100%;
  height: 100%;
  max-height: 320px;
  border-radius: 22px;
  box-shadow: 0 14px 36px rgba(0,0,0,.24);
  overflow: hidden;
  cursor: grab;
  transition: transform 200ms ease-out;
  background: #ddd;
  position: relative;
  user-select: none;
}
.ob-swipe-card:active { cursor: grabbing; }
.ob-swipe-card.is-dragging { transition: none; animation: none !important; }
.ob-swipe-card.inviting {
  animation: ob-swipe-tilt 4s ease-in-out infinite;
}
.ob-swipe-card.inviting .ob-swipe-stamp-like {
  animation: ob-swipe-stamp-like 4s ease-in-out infinite;
}
.ob-swipe-card.inviting .ob-swipe-stamp-nope {
  animation: ob-swipe-stamp-nope 4s ease-in-out infinite;
}
@keyframes ob-swipe-tilt {
  0%, 8%   { transform: translate(0, 0) rotate(0deg); }
  18%, 30% { transform: translate(50px, -10px) rotate(12deg); }
  40%, 50% { transform: translate(0, 0) rotate(0deg); }
  60%, 72% { transform: translate(-50px, -10px) rotate(-12deg); }
  82%, 100%{ transform: translate(0, 0) rotate(0deg); }
}
@keyframes ob-swipe-stamp-like {
  0%, 14%   { opacity: 0; }
  20%, 32%  { opacity: 1; }
  38%, 100% { opacity: 0; }
}
@keyframes ob-swipe-stamp-nope {
  0%, 56%   { opacity: 0; }
  62%, 74%  { opacity: 1; }
  80%, 100% { opacity: 0; }
}
.ob-swipe-card-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}
.ob-swipe-card-grad {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(0,0,0,.78), transparent);
  pointer-events: none;
}
.ob-swipe-card-text {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  padding: 18px;
  color: #fff;
  text-align: left;
  pointer-events: none;
}
.ob-swipe-card-name { font-size: 22px; font-weight: 800; line-height: 1.1; }
.ob-swipe-card-sub  { font-size: 13px; opacity: .85; margin-top: 4px; line-height: 1.3; }
.ob-swipe-stamp {
  position: absolute;
  top: 22px;
  padding: 6px 14px;
  border: 3px solid;
  font-size: 22px;
  font-weight: 900;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  letter-spacing: 2px;
}
.ob-swipe-stamp-like { left: 18px; color: #16a34a; border-color: #16a34a; transform: rotate(-15deg); }
.ob-swipe-stamp-nope { right: 18px; color: #dc2626; border-color: #dc2626; transform: rotate(15deg); }
.ob-swipe-celebration {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease-out;
  padding: 0 32px;
  text-align: center;
}
.ob-swipe-celebration.visible { opacity: 1; }
.ob-swipe-celebration-emoji {
  font-size: 64px;
  animation: ob-swipe-celebrate 600ms cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes ob-swipe-celebrate {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.ob-swipe-celebration-text { font-size: 22px; font-weight: 900; color: #1f2937; margin-top: 12px; }
.ob-swipe-celebration-sub  { font-size: 13px; color: #6b7280; margin-top: 4px; }
.ob-swipe-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 12px 0 8px;
}
.ob-swipe-btn {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 6px 16px rgba(0,0,0,.1);
  font-size: 22px;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ob-swipe-btn-heart {
  background: linear-gradient(135deg, #FB923C, #FF6B5B);
  color: #fff;
  box-shadow: 0 8px 22px rgba(255,107,91,.45);
}
.ob-swipe-count {
  font-size: 14px;
  font-weight: 800;
  color: #6b7280;
}

/* ----- Screen 6: You're ready ----- */
.ob-ready {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(60px + env(safe-area-inset-top, 0px)) 24px calc(120px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  position: relative;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}
.ob-ready-headline { font-size: 30px; font-weight: 900; color: #1f2937; line-height: 1.15; letter-spacing: -0.01em; }
.ob-ready-sub      { font-size: 15px; color: #6b7280; margin-top: 10px; max-width: 320px; line-height: 1.45; }

.ob-mini-phone {
  width: 220px;
  aspect-ratio: 9/19;
  border-radius: 26px;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  overflow: hidden;
  background: #fff;
  margin: 22px auto 16px;
  position: relative;
  cursor: pointer;
}
.ob-mini-screen { position: absolute; inset: 0; opacity: 0; transition: opacity 380ms ease-out; }
.ob-mini-screen.active { opacity: 1; }

.ob-mini-counter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
  box-shadow: 0 3px 10px rgba(0,0,0,.07);
  font-size: 13px;
  font-weight: 800;
  color: #1f2937;
}
.ob-mini-counter-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ob-mini-subline {
  font-size: 12px;
  color: #6b7280;
  margin-top: 6px;
  max-width: 280px;
  line-height: 1.4;
}
.ob-mini-track {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  justify-content: center;
}
.ob-mini-dot {
  width: 18px; height: 3px;
  border-radius: 2px;
  border: 0;
  background: #e5e7eb;
  cursor: pointer;
}
.ob-mini-dot.on { background: #FF6B5B; }
.ob-mini-hint  { font-size: 9px; color: #9ca3af; margin-top: 6px; }

/* ----- Screen 6 mini-mockup content (rendered inside .ob-mini-screen) ----- */
.canvas-mini {
  width: 100%; height: 100%;
  background: linear-gradient(180deg, #FFF7ED 0%, #FFF5F0 100%);
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* mp1 — Cities mini */
.mp1-logo { text-align: center; font-size: 9px; font-weight: 900; color: #1f2937; padding-top: 10px; }
.mp1-logo span { font-size: 11px; color: #FF6B5B; }
.mp1-globe-wrap { display: flex; justify-content: center; margin-top: 4px; margin-bottom: 2px; }
.mp1-globe { width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #84e1c5 0%, #14b8a6 35%, #047857 100%); position: relative; }
.mp1-globe::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle at 30% 35%, transparent 1.5%, #facc15 2%, transparent 2.5%), radial-gradient(circle at 60% 55%, transparent 1.5%, #facc15 2.2%, transparent 2.7%); }
.mp1-tagline-h { font-size: 9px; font-weight: 900; color: #1f2937; line-height: 1; text-align: center; }
.mp1-tagline-s { font-size: 5.5px; color: #9ca3af; font-weight: 600; text-align: center; margin-top: 1px; }
.mp1-search { margin: 5px 8px 4px; height: 14px; border-radius: 999px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.05); display: flex; align-items: center; padding: 0 7px; gap: 3px; font-size: 5px; color: #9ca3af; }
.mp1-region { margin: 3px 8px; background: linear-gradient(135deg, #FFF7ED, #FED7AA); border-radius: 5px; padding: 3px 7px; font-size: 5px; font-weight: 900; color: #FF6B5B; text-transform: uppercase; letter-spacing: .4px; display: flex; align-items: center; justify-content: space-between; }
.mp1-cities { padding: 0 8px; display: flex; flex-direction: column; gap: 3px; flex: 1; overflow: hidden; }
.mp1-ticket { display: flex; align-items: center; background: #fff; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.06); height: 22px; overflow: hidden; }
.mp1-ticket-flag { width: 22px; height: 100%; background: linear-gradient(135deg, #FEE2E2, #FECACA); display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.mp1-ticket-info { flex: 1; padding: 0 5px; text-align: left; display: flex; align-items: center; justify-content: space-between; }
.mp1-ticket-name { font-size: 6px; font-weight: 800; color: #1f2937; line-height: 1; }
.mp1-ticket-plan { color: #FF6B5B; font-size: 4.5px; font-weight: 900; }
.mp1-nav { margin: auto 8px 6px; background: #fff; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.06); display: flex; align-items: center; justify-content: space-around; padding: 3px 12px; height: 18px; }
.mp1-nav-item { font-size: 8px; color: #d1d5db; }
.mp1-nav-item.on { color: #FF6B5B; }

/* mp2 — Preferences mini */
.mp2-hero { text-align: center; padding: 10px 8px 6px; }
.mp2-flag { font-size: 16px; }
.mp2-city-name { font-size: 11px; font-weight: 900; color: #1f2937; margin-top: 1px; }
.mp2-city-sub { font-size: 5.5px; color: #9ca3af; font-weight: 700; margin-top: 1px; }
.mp2-card { margin: 3px 8px; background: #fff; border-radius: 7px; padding: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.05); }
.mp2-card-head { display: flex; align-items: center; gap: 3px; margin-bottom: 3px; }
.mp2-card-title { font-size: 6.5px; font-weight: 800; color: #1f2937; flex: 1; text-align: left; }
.mp2-card-req { font-size: 4.5px; font-weight: 800; color: #FF6B5B; }
.mp2-day-num { text-align: center; font-size: 22px; font-weight: 900; color: #FF6B5B; line-height: 1; }
.mp2-day-label { text-align: center; font-size: 6px; color: #6b7280; }
.mp2-day-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, #FF6B5B 0%, #FF6B5B 22%, #f3f4f6 22%, #f3f4f6 100%); margin: 4px 4px 0; }
.mp2-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.mp2-cat { height: 24px; border-radius: 5px; background: #fff; border: 1.2px solid transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.mp2-cat.on { background: linear-gradient(135deg, #FFF7ED, #FEF3C7); border-color: #FF6B5B; }
.mp2-cat-icon { font-size: 11px; }
.mp2-cat-label { font-size: 4.5px; font-weight: 800; color: #9ca3af; letter-spacing: .3px; text-transform: uppercase; }
.mp2-cat.on .mp2-cat-label { color: #FF6B5B; }
.mp2-cta { margin: auto 8px 8px; height: 18px; border-radius: 999px; background: linear-gradient(135deg, #FF6B5B, #F59E0B); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 7px; font-weight: 800; }

/* mps — Swipe mini (locked & unlocked variants share most styles) */
.mps-top { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 4px; }
.mps-back { width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center; font-size: 7px; color: #6b7280; }
.mps-coach { background: rgba(255,255,255,.95); border-radius: 999px; padding: 3px 8px; font-size: 5.5px; font-weight: 800; color: #1f2937; display: flex; gap: 3px; align-items: center; }
.mps-spacer { width: 16px; }
.mps-cardstage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 4px 11px; }
.mps-card { width: 100%; height: 100%; max-height: 170px; border-radius: 9px; box-shadow: 0 8px 18px rgba(0,0,0,.22); overflow: hidden; position: relative; }
.mps-card-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.mps-card-grad { position: absolute; inset-inline: 0; bottom: 0; height: 50%; background: linear-gradient(to top, rgba(0,0,0,.78), transparent); }
.mps-card-text { position: absolute; bottom: 0; left: 0; right: 0; padding: 5px 7px; color: #fff; text-align: left; }
.mps-card-name { font-size: 8px; font-weight: 800; line-height: 1.1; }
.mps-card-sub { font-size: 5px; opacity: .85; margin-top: 1px; line-height: 1.3; }
.mps-actions { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 4px 0; }
.mps-action-btn { width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.1); display: flex; align-items: center; justify-content: center; font-size: 9px; color: #6b7280; }
.mps-action-btn.heart { background: linear-gradient(135deg, #FB923C, #FF6B5B); color: #fff; }
.mps-action-count { font-size: 6.5px; font-weight: 800; color: #6b7280; }
.mps-build { margin: 0 8px 8px; background: #fff; border-radius: 8px; padding: 5px 7px; box-shadow: 0 4px 10px rgba(0,0,0,.08); display: flex; align-items: center; justify-content: space-between; }
.mps-build-text { text-align: left; }
.mps-build-caption { font-size: 4.5px; font-weight: 900; color: #d1d5db; text-transform: uppercase; letter-spacing: .5px; }
.mps-build-title { font-size: 7px; font-weight: 900; color: #1f2937; }
.mps-build-icon-locked { width: 17px; height: 17px; border-radius: 50%; background: #f3f4f6; color: #9ca3af; font-size: 8px; display: flex; align-items: center; justify-content: center; }
.mps-build.unlocked .mps-build-caption { color: #FF6B5B; }
.mps-build-icon-unlocked { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, #FB923C, #FF6B5B); color: #fff; font-size: 9px; display: flex; align-items: center; justify-content: center; animation: ob-mini-pulse 1.4s ease-in-out infinite; }
@keyframes ob-mini-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* mp5 — Itinerary mini */
.mp5-top { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 4px; }
.mp5-btn { width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center; font-size: 7px; color: #6b7280; }
.mp5-pill { background: #fff; border-radius: 999px; padding: 2px 7px 2px 4px; font-size: 6.5px; font-weight: 800; color: #1f2937; display: flex; align-items: center; gap: 3px; }
.mp5-meta { text-align: center; font-size: 5.5px; color: #9ca3af; font-weight: 700; padding: 0 8px; margin-bottom: 4px; }
.mp5-day-pills { display: flex; gap: 3px; padding: 0 8px 4px; overflow-x: auto; }
.mp5-day-pill { display: flex; align-items: center; gap: 2px; background: #fff; border-radius: 999px; padding: 2px 6px; font-size: 5px; font-weight: 800; color: #6b7280; flex-shrink: 0; }
.mp5-day-pill.all { background: #1f2937; color: #fff; }
.mp5-day-tick { width: 1.5px; height: 6px; border-radius: 1px; }
.mp5-map { margin: 0 8px; height: 56px; border-radius: 6px; background: linear-gradient(135deg, #d4f1ee 0%, #a7ecd9 100%); position: relative; overflow: hidden; }
.mp5-map-pin { position: absolute; width: 11px; height: 11px; border-radius: 50%; color: #fff; font-size: 5.5px; font-weight: 900; display: flex; align-items: center; justify-content: center; border: 1.2px solid #fff; }
.mp5-day-section { padding: 4px 8px; }
.mp5-day-header { display: flex; align-items: center; gap: 3px; margin-bottom: 3px; }
.mp5-day-bar { width: 1.5px; height: 8px; border-radius: 1px; background: #FF6B5B; }
.mp5-day-title { font-size: 7px; font-weight: 900; color: #1f2937; }
.mp5-day-tag { background: #FEE2E2; color: #FF6B5B; font-size: 4.5px; font-weight: 900; padding: 1px 3px; border-radius: 2px; }
.mp5-attraction { background: #fff; border-radius: 5px; padding: 3px 5px; display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.mp5-attraction-num { width: 10px; height: 10px; border-radius: 50%; background: #FF6B5B; color: #fff; font-size: 5.5px; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mp5-attraction-photo { width: 14px; height: 14px; border-radius: 3px; background: linear-gradient(135deg, #FBBF24, #F59E0B); flex-shrink: 0; }
.mp5-attraction-info { flex: 1; min-width: 0; text-align: left; }
.mp5-attraction-name { font-size: 5.5px; font-weight: 800; color: #1f2937; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp5-meal { background: #FFF7ED; border-radius: 5px; padding: 3px 5px; display: flex; align-items: center; gap: 4px; }
.mp5-meal-icon { font-size: 9px; }
.mp5-meal-text { flex: 1; text-align: left; }
.mp5-meal-name { font-size: 5.5px; font-weight: 800; color: #1f2937; }

.mp5-meal-cta { background: #F59E0B; color: #fff; font-size: 4.5px; font-weight: 900; padding: 2px 4px; border-radius: 3px; }

/* === Trip preferences — desktop quick-day chips === */
.day-quick {
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--color-warm-gray-200);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-warm-gray-700);
  cursor: pointer;
  transition: all 0.15s ease;
}
.day-quick:hover {
  border-color: var(--color-coral-500);
  color: var(--color-coral-500);
}
.day-quick--active {
  background: var(--color-coral-500);
  border-color: var(--color-coral-500);
  color: #fff;
}
.day-quick--active:hover {
  background: var(--color-coral-600);
  border-color: var(--color-coral-600);
  color: #fff;
}

/* === Trip preferences — desktop "interest" tiles === */
.interest-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: 16px;
  border-radius: 16px;
  border: 1.5px solid var(--color-warm-gray-100);
  background: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
}
.interest-tile:hover {
  border-color: var(--color-warm-gray-200);
  transform: translateY(-2px);
  box-shadow: var(--shadow, 0 1px 2px rgba(40,20,10,.04), 0 8px 24px rgba(40,20,10,.05));
}
.interest-tile__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--color-coral-100);
  color: var(--color-coral-500);
  display: grid;
  place-items: center;
  font-size: 18px;
}
.interest-tile__name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--color-warm-gray-800);
}
.interest-tile__sub {
  font-size: 12px;
  color: var(--color-warm-gray-500);
  line-height: 1.35;
}
.interest-tile__check {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--color-warm-gray-100);
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: transparent;
  font-weight: 900;
  transition: all 0.15s ease;
}
/* Active state (mirrors existing .cat-pill-active toggle from the Stimulus controller) */
.interest-tile.cat-pill-active {
  border-color: var(--color-coral-500);
  background: var(--color-coral-100);
  box-shadow: 0 0 0 4px rgba(255, 107, 84, 0.08);
}
.interest-tile.cat-pill-active .interest-tile__icon {
  background: var(--color-coral-500);
  color: #fff;
}
.interest-tile.cat-pill-active .interest-tile__check {
  background: var(--color-coral-500);
  border-color: var(--color-coral-500);
  color: #fff;
}

/* ══════════════════════════════════════════════
   Desktop sheet + right-panel positioning
   ══════════════════════════════════════════════
   Inside the desktop shell (.itin-desktop-shell), in-page sheets occupy
   the right side of the page (over where the right grid column lives)
   instead of floating from the bottom. Mobile shell keeps today's
   bottom-sheet behavior because these rules are scoped to
   .itin-desktop-shell. */
@media (min-width: 1024px) {
  .itin-desktop-shell .sheet-backdrop {
    display: none !important;
  }

  .itin-desktop-shell .sheet-panel {
    /* Inside the .itin-grid-right cell. Fill the cell; no floating. */
    position: absolute !important;
    inset: 0 !important;
    transform: none !important;
    width: 100%;
    max-width: none;
    max-height: none;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
    background: white;
    z-index: 1;
    opacity: 1;
    display: none;
    overflow-y: auto;
  }

  .itin-desktop-shell .sheet-panel.sheet-open {
    display: block;
    transform: none !important;
    opacity: 1 !important;
  }

  .itin-desktop-shell .sheet-handle {
    display: none;
  }

  /* The right-column close X button. Hidden by default; shown whenever the
     right panel is open (in-page sheet OR picker). Lives inside the
     .itin-grid-right cell, anchored to its top-right corner. */
  .itin-right-close-btn {
    display: none;
  }

  [data-right-panel-open="true"] .itin-right-close-btn {
    display: flex;
  }

  /* Right-panel slide-in: the picker frame inside .itin-grid-right starts
     20px to the right and fades in when data-right-panel-open becomes true. */
  .itin-grid-right > * {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 240ms ease-out 60ms, transform 240ms ease-out 60ms;
  }

  [data-right-panel-open="true"] .itin-grid-right > * {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===== Onboarding desktop shell ===== */
.ob-form-root {
  display: contents;
}

.ob-desktop {
  position: fixed;
  inset: 0;
  flex-direction: column;
  background: linear-gradient(180deg, #FFF7ED 0%, #FDF2E9 60%, #FEF3C7 100%);
  overflow: hidden;
  z-index: 50;
}
@media (min-width: 1024px) {
  .ob-desktop { display: flex; }
}

.obd-progress {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: rgba(255, 107, 91, 0.12);
  z-index: 12;
  pointer-events: none;
}
.obd-progress-fill {
  height: 100%;
  width: calc(100% / 6);
  background: linear-gradient(90deg, #FF6B5B, #F59E0B);
  transition: width 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.obd-skip {
  position: absolute;
  top: 24px;
  right: 32px;
  z-index: 11;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 14px;
  font-weight: 700;
  color: #6b7280;
  cursor: pointer;
  padding: 10px 18px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  transition: color 150ms, border-color 150ms;
}
.obd-skip:hover { color: #1f2937; border-color: rgba(0, 0, 0, 0.12); }

.obd-track-mask {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.obd-track {
  position: absolute;
  inset: 0;
  display: block;
  transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}
.obd-screen {
  position: absolute;
  top: 0; bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 48px 120px;
  box-sizing: border-box;
  overflow-y: auto;
}
.obd-screen:nth-child(1) { left: 0%; }
.obd-screen:nth-child(2) { left: 100%; }
.obd-screen:nth-child(3) { left: 200%; }
.obd-screen:nth-child(4) { left: 300%; }
.obd-screen:nth-child(5) { left: 400%; }
.obd-screen:nth-child(6) { left: 500%; }

/* ----- Desktop screen 0: Welcome ----- */
.obd-welcome-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: 1200px;
  width: 100%;
}
.obd-welcome-copy { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.obd-welcome-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 107, 91, 0.12);
  color: #FF6B5B;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.obd-welcome-headline {
  font-size: 64px;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #1f2937;
  margin: 0;
}
.obd-welcome-headline-em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: #FF6B5B;
}
.obd-welcome-sub {
  font-size: 17px;
  line-height: 1.6;
  color: #6b7280;
  max-width: 480px;
  margin: 0;
}
.obd-welcome-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
}
.obd-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FF6B5B, #F59E0B);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  border: 0;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(255, 107, 91, 0.35);
  transition: transform 150ms, box-shadow 150ms;
}
.obd-cta-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(255, 107, 91, 0.45); }
.obd-cta-arrow { font-size: 18px; }
.obd-welcome-time { font-size: 13px; color: #9ca3af; }

.obd-welcome-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.obd-welcome-art-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1;
  border-radius: 32px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 107, 91, 0.18) 0%, transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(245, 158, 11, 0.18) 0%, transparent 55%),
    linear-gradient(135deg, #FFFBEB, #FFF7ED);
  box-shadow: 0 24px 60px rgba(255, 107, 91, 0.18);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.obd-welcome-art-card .obd-welcome-emoji {
  position: absolute;
  font-size: 48px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.12));
  animation: ob-welcome-float 6s ease-in-out infinite;
}
.obd-welcome-art-card .obd-welcome-emoji-1 { top: 16%; left: 12%; animation-delay: 0s; }
.obd-welcome-art-card .obd-welcome-emoji-2 { top: 14%; right: 16%; animation-delay: .8s; font-size: 56px; }
.obd-welcome-art-card .obd-welcome-emoji-3 { bottom: 20%; left: 18%; animation-delay: 1.6s; font-size: 52px; }
.obd-welcome-art-card .obd-welcome-emoji-4 { bottom: 14%; right: 14%; animation-delay: 2.4s; font-size: 60px; }
.obd-welcome-art-card .obd-welcome-emoji-5 { top: 50%; left: 6%; animation-delay: 3.2s; font-size: 38px; }
.obd-welcome-art-card .obd-welcome-emoji-6 { top: 52%; right: 6%; animation-delay: 4.0s; font-size: 38px; }
.obd-welcome-art-card .obd-welcome-wordmark {
  font-size: 96px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #FF6B5B;
  line-height: 1;
}

/* ----- Desktop screens 1/2/3: Questions ----- */
.obd-question {
  padding: 80px 48px 120px;
}
.obd-question-card {
  width: 100%;
  max-width: 960px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 36px;
  padding: 72px 72px 64px;
  box-shadow: 0 36px 72px rgba(0, 0, 0, 0.07);
  text-align: center;
}
.obd-question-eyebrow {
  font-size: 12px;
  font-weight: 800;
  color: #FF6B5B;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.obd-question-headline {
  font-size: 48px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #1f2937;
  line-height: 1.08;
  margin: 14px 0 0;
}
.obd-question-sub {
  font-size: 18px;
  color: #6b7280;
  margin: 16px auto 0;
  max-width: 560px;
  line-height: 1.5;
}
.obd-question-options {
  margin-top: 48px;
  display: grid;
  gap: 16px;
  text-align: left;
}
.obd-question-options-2col { grid-template-columns: 1fr 1fr; }
.obd-question-options-3col { grid-template-columns: repeat(3, 1fr); }

.obd-q-opt {
  background: #fff;
  border: 2px solid #f3f4f6;
  border-radius: 20px;
  padding: 22px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: border-color 200ms, box-shadow 200ms, transform 100ms;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
}
.obd-q-opt:hover { border-color: #FFD0C8; }
.obd-q-opt:active { transform: scale(0.98); }
.obd-q-opt.on {
  border-color: #FF6B5B;
  background: linear-gradient(135deg, #FFF7ED, #FEF3C7);
  box-shadow: 0 12px 28px rgba(255, 107, 91, 0.18);
}
.obd-q-opt-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: #FFF7ED;
  display: grid;
  place-items: center;
  font-size: 26px;
  flex-shrink: 0;
}
.obd-q-opt.on .obd-q-opt-icon {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.obd-q-opt-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.obd-q-opt-label { font-size: 17px; font-weight: 800; color: #1f2937; line-height: 1.15; }
.obd-q-opt-sub { font-size: 13px; color: #9ca3af; line-height: 1.3; }
.obd-q-opt-time { font-size: 16px; font-weight: 800; color: #FF6B5B; flex-shrink: 0; }

/* Pace tiles (3-up, vertical) */
.obd-q-opt-tile {
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 36px 22px;
  text-align: center;
}
.obd-q-opt-icon-lg {
  width: 68px; height: 68px;
  font-size: 36px;
  border-radius: 18px;
}
.obd-q-opt-tile .obd-q-opt-label { font-size: 19px; }
.obd-q-opt-tile .obd-q-opt-sub { font-size: 14px; max-width: 220px; }

/* ----- Desktop screen 4: Swipe sandbox ----- */
.obd-swipe { padding: 64px 48px 120px; }
.obd-swipe-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 220px;
  gap: 56px;
  align-items: center;
  max-width: 1100px;
  width: 100%;
}
.obd-swipe-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  color: #6b7280;
}
.obd-swipe-side-glyph {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 36px;
  background: rgba(0, 0, 0, 0.04);
  color: #6b7280;
  margin-bottom: 6px;
}
.obd-swipe-side-glyph-like {
  background: rgba(255, 107, 91, 0.12);
  color: #FF6B5B;
}
.obd-swipe-side-label { font-size: 16px; font-weight: 800; color: #1f2937; }
.obd-swipe-side-sub { font-size: 12px; line-height: 1.4; max-width: 160px; }

.obd-swipe-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.obd-swipe-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FF6B5B;
}
.obd-swipe-headline {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #1f2937;
  margin: 4px 0 0;
}
.obd-swipe-sub {
  font-size: 14px;
  color: #6b7280;
  max-width: 380px;
  margin: 0 0 16px;
}
.obd-swipe .obd-swipe-cardstage {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 3 / 4;
}
.obd-swipe .ob-swipe-card { max-height: none; height: 100%; }
.obd-swipe-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
}
.obd-swipe-reset {
  font-size: 13px;
  font-weight: 700;
  color: #6b7280;
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
}
.obd-swipe-count {
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
  background: rgba(255, 107, 91, 0.12);
  color: #FF6B5B;
  padding: 8px 14px;
  border-radius: 999px;
}

/* ----- Desktop screen 5: Ready ----- */
.obd-ready { padding: 32px 48px 140px; display: flex; flex-direction: column; gap: 28px; }

.obd-ready-banner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 10px 12px 10px 24px;
  box-shadow: 0 8px 24px rgba(15,23,42,.06), 0 2px 6px rgba(15,23,42,.03);
  display: flex;
  align-items: center;
  gap: 18px;
}
.obd-ready-banner-text {
  font-size: 16px;
  font-weight: 800;
  color: #1f2937;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.obd-ready-banner-input {
  flex: 1;
  height: 48px;
  border: 0;
  background: #f9fafb;
  border-radius: 999px;
  padding: 0 22px;
  font-size: 15px;
  color: #1f2937;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background 150ms, box-shadow 150ms;
}
.obd-ready-banner-input::placeholder { color: #9ca3af; }
.obd-ready-banner-input:focus {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,107,91,.18);
}
.obd-ready-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
  max-width: 1280px;
  width: 100%;
}
.obd-ready-copy { display: flex; flex-direction: column; gap: 18px; }
.obd-ready-headline {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #1f2937;
  margin: 8px 0 0;
}
.obd-ready-sub {
  font-size: 17px;
  line-height: 1.6;
  color: #6b7280;
  max-width: 480px;
  margin: 0;
}
.obd-ready-steps {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.obd-ready-steps li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 15px;
  color: #4b5563;
  line-height: 1.5;
}
.obd-ready-steps li strong { color: #1f2937; font-weight: 800; }
.obd-ready-step-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  margin-top: 1px;
}
.obd-ready-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.obd-mini-laptop {
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  background: #1f2937;
  padding: 4px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.22);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.obd-mini-laptop-chrome {
  height: 22px;
  background: #1f2937;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  flex-shrink: 0;
}
.obd-mini-laptop-dot { width: 8px; height: 8px; border-radius: 50%; }
.obd-mini-laptop-url {
  flex: 1;
  text-align: center;
  font-size: 10px;
  color: #9ca3af;
  letter-spacing: 0.04em;
}
.obd-mini-laptop-screen {
  position: relative;
  flex: 1;
  background: #fff;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}
.obd-mini-laptop .ob-mini-screen {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  transition: opacity 380ms ease-out;
}
.obd-mini-laptop .ob-mini-screen.active { opacity: 1; }

.obd-mini-track {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.obd-mini-hint {
  font-size: 12px;
  color: #9ca3af;
}

/* ----- Desktop mockup canvas (shared) ----- */
.md-canvas {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #FFF7ED 0%, #fff 100%);
  display: flex;
  flex-direction: column;
  font-size: 9px;
  color: #1f2937;
}
.md-topnav {
  height: 22px;
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  flex-shrink: 0;
}
.md-topnav-brand { font-weight: 800; color: #1f2937; font-size: 9px; }
.md-topnav-brand span { color: #FF6B5B; font-size: 11px; }
.md-topnav-link { color: #FF6B5B; font-weight: 700; font-size: 8px; }
.md-topnav-spacer { flex: 1; }
.md-topnav-signin { color: #6b7280; font-size: 8px; font-weight: 600; }
.md-topnav-cta {
  background: #FF6B5B;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
}

/* ----- md-1: Cities ----- */
.md-cities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 14px 24px 8px;
  align-items: center;
}
.md-cities-left { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.md-cities-wordmark { color: #1f2937; font-weight: 800; font-size: 11px; }
.md-cities-wordmark span { font-size: 13px; color: #FF6B5B; }
.md-cities-pill {
  border: 1px solid rgba(255, 107, 91, 0.4);
  color: #FF6B5B;
  font-size: 7px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
}
.md-cities-headline {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 16px;
  line-height: 1.05;
  color: #1f2937;
  font-weight: 400;
}
.md-cities-headline em {
  font-style: italic;
  color: #FF6B5B;
}
.md-cities-sub { color: #9ca3af; font-size: 7px; }
.md-cities-search {
  width: 100%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 8px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.md-cities-surprise {
  margin-left: auto;
  color: #FF6B5B;
  font-weight: 700;
}
.md-cities-right {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.md-cities-globe {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #a7f3d0 0%, transparent 30%),
    radial-gradient(circle at 60% 60%, #14b8a6 0%, transparent 35%),
    radial-gradient(circle at 50% 50%, #0ea5e9 40%, #0369a1 100%);
  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.3);
  position: relative;
}
.md-cities-globe::before, .md-cities-globe::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 107, 91, 0.4);
}
.md-cities-globe::after { inset: -12px; border-color: rgba(245, 158, 11, 0.3); }
.md-cities-region {
  margin: 0 24px;
  background: rgba(255, 107, 91, 0.08);
  color: #FF6B5B;
  padding: 4px 10px;
  font-size: 8px;
  font-weight: 800;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  letter-spacing: 0.06em;
}
.md-cities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px 24px 14px;
}
.md-cities-ticket {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.md-cities-flag {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  display: grid;
  place-items: center;
  font-size: 12px;
}
.md-cities-name { flex: 1; font-weight: 800; font-size: 9px; }
.md-cities-plan { color: #FF6B5B; font-size: 7px; font-weight: 800; letter-spacing: 0.05em; }

/* ----- md-2: Trip preferences ----- */
.md-prefs {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  padding: 14px 24px;
  flex: 1;
  align-items: stretch;
}
.md-prefs-hero {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, #fee2e2 0%, #d1d5db 50%, #4b5563 100%);
  height: 200px;
}
.md-prefs-hero-flag {
  position: absolute;
  top: 8px; left: 8px;
  background: rgba(255, 255, 255, 0.95);
  font-size: 7px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
}
.md-prefs-hero-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.7) 100%);
}
.md-prefs-hero-city {
  position: absolute;
  bottom: 10px; left: 12px;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.md-prefs-form { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.md-prefs-headline {
  font-size: 14px;
  font-weight: 900;
  color: #1f2937;
  letter-spacing: -0.01em;
}
.md-prefs-headline em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: #FF6B5B;
}
.md-prefs-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.md-prefs-card-head {
  font-size: 8px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 4px;
}
.md-prefs-card-head span:first-child { font-size: 9px; }
.md-prefs-req {
  margin-left: auto;
  background: rgba(255, 107, 91, 0.12);
  color: #FF6B5B;
  font-size: 6px;
  padding: 1px 5px;
  border-radius: 999px;
  letter-spacing: 0.06em;
}
.md-prefs-slider {
  display: flex;
  align-items: center;
  gap: 8px;
}
.md-prefs-slider-track {
  flex: 1;
  height: 4px;
  background: rgba(255, 107, 91, 0.15);
  border-radius: 999px;
  position: relative;
}
.md-prefs-slider-fill {
  position: absolute;
  inset: 0;
  width: 35%;
  background: #FF6B5B;
  border-radius: 999px;
}
.md-prefs-slider-thumb {
  position: absolute;
  left: 35%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #FF6B5B;
}
.md-prefs-day-pill {
  background: rgba(255, 107, 91, 0.12);
  border-radius: 6px;
  padding: 3px 6px;
  text-align: center;
  flex-shrink: 0;
}
.md-prefs-day-num {
  font-size: 14px;
  font-weight: 900;
  color: #FF6B5B;
  line-height: 1;
}
.md-prefs-day-label {
  font-size: 6px;
  font-weight: 800;
  color: #4b5563;
  letter-spacing: 0.08em;
}
.md-prefs-quick { display: flex; gap: 4px; flex-wrap: wrap; }
.md-prefs-quick span {
  font-size: 7px;
  font-weight: 700;
  color: #6b7280;
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 999px;
}
.md-prefs-quick span.on { background: #FF6B5B; color: #fff; }
.md-prefs-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.md-prefs-tile {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 6px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.md-prefs-tile span { font-size: 11px; }
.md-prefs-tile div { font-size: 6px; font-weight: 700; color: #4b5563; }
.md-prefs-tile.on {
  border-color: #FF6B5B;
  background: linear-gradient(135deg, #FFF7ED, #FEF3C7);
}
.md-prefs-cta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding: 4px 4px;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}
.md-prefs-cta-meta { font-size: 6px; color: #6b7280; font-weight: 600; }
.md-prefs-cta-spacer { flex: 1; }
.md-prefs-cta-secondary {
  background: #fff;
  border: 1px solid #e5e7eb;
  font-size: 7px;
  font-weight: 800;
  color: #4b5563;
  padding: 3px 6px;
  border-radius: 6px;
}
.md-prefs-cta {
  background: #FF6B5B;
  color: #fff;
  font-size: 7px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 6px;
}

/* ----- md-3 / md-4: Swipe ----- */
.md-swipe {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 10px;
  padding: 10px 14px;
  flex: 1;
  min-height: 0;
}
.md-swipe-left, .md-swipe-right {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.md-swipe-rail-head {
  font-size: 7px;
  font-weight: 800;
  color: #6b7280;
  letter-spacing: 0.08em;
  display: flex;
  justify-content: space-between;
}
.md-swipe-rail-head span {
  background: rgba(255, 107, 91, 0.12);
  color: #FF6B5B;
  padding: 1px 5px;
  border-radius: 999px;
}
.md-swipe-rail-empty {
  font-size: 7px;
  color: #9ca3af;
  text-align: center;
  padding: 18px 4px;
}
.md-swipe-saved { display: flex; flex-direction: column; gap: 4px; }
.md-swipe-saved-row {
  background: #fff;
  border-radius: 6px;
  padding: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.md-swipe-saved-img {
  width: 18px; height: 18px;
  border-radius: 4px;
  background: linear-gradient(135deg, #cbd5e1, #64748b);
  flex-shrink: 0;
}
.md-swipe-saved-name { font-size: 7px; font-weight: 700; }

.md-swipe-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.md-swipe-coach {
  font-size: 7px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.95);
  padding: 2px 8px;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.md-swipe-card {
  position: relative;
  width: 80%;
  max-width: 130px;
  aspect-ratio: 3/4;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
  transform: rotate(-3deg);
}
.md-swipe-card-photo {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #6b7280, #cbd5e1 50%, #93c5fd);
}
.md-swipe-card-photo-alt { background: linear-gradient(135deg, #fde68a, #f59e0b 50%, #b45309); }
.md-swipe-card-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.65) 100%);
}
.md-swipe-stamp {
  position: absolute;
  top: 10px; left: 10px;
  border: 2px solid #22c55e;
  color: #22c55e;
  font-weight: 900;
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 4px;
  transform: rotate(-12deg);
  letter-spacing: 0.08em;
}
.md-swipe-card-cat {
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(255, 255, 255, 0.95);
  font-size: 6px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
  letter-spacing: 0.06em;
}
.md-swipe-card-text {
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  color: #fff;
}
.md-swipe-card-name { font-size: 8px; font-weight: 900; line-height: 1.1; }

.md-swipe-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.md-swipe-action {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 9px;
  color: #4b5563;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.md-swipe-action.heart {
  background: #FF6B5B;
  color: #fff;
}
.md-swipe-count { font-size: 7px; color: #6b7280; }

.md-swipe-rail-trip {
  background: #fff;
  border-radius: 6px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.md-swipe-flag { font-size: 12px; }
.md-swipe-trip-name { font-size: 9px; font-weight: 900; }
.md-swipe-trip-meta { font-size: 6px; color: #6b7280; }
.md-swipe-rail-coach {
  background: linear-gradient(135deg, #FFF7ED, #FEF3C7);
  border-radius: 6px;
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.md-swipe-coach-title { font-size: 7px; font-weight: 800; }
.md-swipe-coach-sub { font-size: 6px; color: #6b7280; }
.md-swipe-build {
  background: #f3f4f6;
  border-radius: 6px;
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.md-swipe-build.unlocked {
  background: linear-gradient(135deg, #FF6B5B, #F59E0B);
  color: #fff;
}
.md-swipe-build-meta {
  font-size: 5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #6b7280;
}
.md-swipe-build.unlocked .md-swipe-build-meta { color: rgba(255, 255, 255, 0.85); }
.md-swipe-build-row {
  font-size: 7px;
  font-weight: 900;
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: 0.06em;
}

/* ----- md-5: Itinerary ----- */
.md-itin {
  display: grid;
  grid-template-columns: 1.05fr 1.05fr;
  gap: 8px;
  padding: 8px 14px 12px;
  flex: 1;
  min-height: 0;
}
.md-itin-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.md-itin-tabs { display: flex; gap: 4px; }
.md-itin-tab {
  background: #f3f4f6;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 7px;
  font-weight: 800;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 3px;
}
.md-itin-tab span {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
}
.md-itin-tab.on { background: #1f2937; color: #fff; }
.md-itin-hotels {
  background: #fff;
  border-radius: 6px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.md-itin-hotels-icon { font-size: 12px; }
.md-itin-hotels-text { flex: 1; }
.md-itin-hotels-title { font-size: 7px; font-weight: 800; }
.md-itin-hotels-sub { font-size: 6px; color: #9ca3af; }
.md-itin-hotels-cta { font-size: 7px; color: #FF6B5B; font-weight: 800; }
.md-itin-day { display: flex; flex-direction: column; gap: 3px; }
.md-itin-day-head {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 900;
}
.md-itin-day-bar {
  width: 3px;
  height: 12px;
  border-radius: 2px;
}
.md-itin-stop {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border-radius: 6px;
  padding: 3px 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.md-itin-stop-num {
  width: 16px; height: 16px;
  border-radius: 50%;
  color: #fff;
  font-size: 7px;
  font-weight: 900;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.md-itin-stop-photo {
  width: 22px; height: 22px;
  border-radius: 4px;
  background: linear-gradient(135deg, #cbd5e1, #475569);
  flex-shrink: 0;
}
.md-itin-stop-text { flex: 1; min-width: 0; }
.md-itin-stop-time { font-size: 6px; color: #9ca3af; font-weight: 700; }
.md-itin-stop-name { font-size: 7px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-itin-meal {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  font-size: 6px;
  font-weight: 800;
  padding: 3px 6px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
}
.md-itin-meal span {
  background: #f59e0b;
  color: #fff;
  padding: 0px 5px;
  border-radius: 4px;
}
.md-itin-right { position: relative; min-width: 0; }
.md-itin-map {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(34, 197, 94, 0.05) 0%, rgba(245, 158, 11, 0.05) 100%),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.02) 0 2px, transparent 2px 14px),
    #fef3c7;
  border: 1px solid rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.md-itin-pin {
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  border: 2px solid #fff;
}

/* ----- Desktop bottom nav bar ----- */
.obd-nav {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  z-index: 11;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 40px;
  background: linear-gradient(180deg, rgba(254, 243, 199, 0) 0%, rgba(254, 243, 199, 0.85) 60%, rgba(254, 243, 199, 0.95) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}
[data-onboarding-current-value="0"] .obd-nav {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}
.obd-nav .obd-next,
.obd-nav .obd-cta-final {
  margin-left: auto;
}
.obd-nav::before {
  content: "";
  position: absolute;
  top: 0; left: 32px; right: 32px;
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
}
.obd-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  color: #4b5563;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: color 150ms, border-color 150ms;
}
.obd-back:hover { color: #1f2937; border-color: rgba(0, 0, 0, 0.16); }
.obd-back.hidden { display: none; }
.obd-back-arrow { font-size: 16px; line-height: 1; }

.obd-next {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(135deg, #FF6B5B, #F59E0B);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(255, 107, 91, 0.35);
  transition: transform 150ms, box-shadow 150ms;
}
.obd-next:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(255, 107, 91, 0.45); }
.obd-next.hidden { display: none; }
.obd-next-arrow { font-size: 16px; line-height: 1; }

.obd-cta-final {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(135deg, #FF6B5B, #F59E0B);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(255, 107, 91, 0.35);
  transition: transform 150ms, box-shadow 150ms;
}
.obd-cta-final:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(255, 107, 91, 0.45); }
.obd-cta-final.hidden { display: none; }

.obd-sign-in {
  position: absolute;
  top: 24px;
  left: 32px;
  z-index: 11;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 107, 91, 0.25);
  font-size: 14px;
  font-weight: 700;
  color: #FF6B5B;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(255, 107, 91, 0.12);
  transition: background 150ms, border-color 150ms, transform 150ms;
}
.obd-sign-in:hover { background: #fff; border-color: rgba(255, 107, 91, 0.45); transform: translateY(-1px); }
.obd-sign-in.hidden { display: none; }
.obd-email-card {
  margin-top: 28px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.05);
}

.obd-email-card-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #4b5563;
  margin-bottom: 10px;
}
.obd-email-input {
  width: 100%;
  height: 52px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #1f2937;
  font-size: 15px;
  padding: 0 22px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.obd-email-input::placeholder { color: #9ca3af; }
.obd-email-input:focus { border-color: #FF6B5B; box-shadow: 0 0 0 3px rgba(255,107,91,.18); }
.obd-email-card-sub {
  margin: 8px 0 0;
  font-size: 12px;
  color: #9ca3af;
}