@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);
}

/* Picker hotel pins (the candidate hotels in the picker, distinct from the
   trip's chosen hotel). Navy keeps them clearly separated from the warm
   day-color palette (#FF6B54, #FFAA5C, #FB7185, etc.) so users can scan the
   map without color collisions. Rounded square matches the shape language
   used by hotel-aware map products (Booking, Google Maps). */
.tripr-pin-hotel.tripr-pin-picker {
  background: #1e3a8a;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

.tripr-pin-hotel.tripr-pin-picker:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.55);
}

/* Triprr's Choice — picks keep the regular navy pin but get a small coral
   star disk in the NE corner. Keeps the map readable as "all hotels" while
   the disk lets users spot the algorithmically-curated picks at a glance.
   Anchored via .tripr-pin-picker-choice on the pin div; the disk itself is
   a ::after pseudo so the JS just toggles one class. */
.tripr-pin-hotel.tripr-pin-picker.tripr-pin-picker-choice {
  position: relative;
  overflow: visible;
}

.tripr-pin-hotel.tripr-pin-picker.tripr-pin-picker-choice::after {
  content: "✦";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-coral-500);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

/* List/Map toggle inside the picker (mobile only). */
.picker-tab-group {
  display: inline-flex;
  background: #f5f3f1;
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.picker-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: #78716c;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.picker-tab.picker-tab-active {
  background: white;
  color: #1c1917;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Hotel picker loading state — applied while a filter submission is in
   flight. Subtle dim on the cards + a thin animated bar at the very top.
   Works on mobile and desktop with zero JS to drive the visuals. */
.picker-loading-wrap {
  position: relative;
}

.picker-loading-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  overflow: hidden;
  z-index: 50;
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.picker-loading-bar::before {
  content: '';
  position: absolute;
  left: -30%;
  top: 0;
  bottom: 0;
  width: 30%;
  background: linear-gradient(90deg, transparent, #f97362, transparent);
  animation: picker-loading-slide 1.2s ease-in-out infinite;
  animation-play-state: paused;
}

.picker-loading-results {
  transition: opacity 180ms ease;
}

.picker-loading-wrap.is-loading .picker-loading-bar {
  opacity: 1;
}
.picker-loading-wrap.is-loading .picker-loading-bar::before {
  animation-play-state: running;
}
.picker-loading-wrap.is-loading .picker-loading-results {
  opacity: 0.45;
  pointer-events: none;
}

@keyframes picker-loading-slide {
  0%   { left: -30%; }
  100% { left: 100%; }
}

/* Restaurant picker filter bar — collapsed state shows just sort chips
   + a "Filters" toggle on the right. The full panel only renders when the
   user opens it. Saves vertical space so users see restaurants first. */
.picker-filters-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.picker-filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: white;
  border: 1px solid #e7e2dd;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #44403c;
  text-decoration: none;
  transition: border-color 120ms ease, color 120ms ease;
}

.picker-filters-toggle:hover {
  border-color: #f97362;
  color: #f97362;
}

.picker-filters-toggle-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #f97362;
  color: white;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}

.picker-filters-toggle-caret {
  font-size: 9px;
  color: #a8a29e;
  margin-left: 2px;
}

.picker-filters-panel {
  background: #f5f3f1;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.picker-filters-panel .picker-filter-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.picker-filters-panel .picker-filter-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #78716c;
}

/* Hotel picker filter strip — range slider + star chip group. */
.picker-filters {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 16px;
}

.picker-filter-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.picker-filter-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.picker-filter-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #78716c;
}

.picker-filter-value {
  font-size: 14px;
  font-weight: 800;
  color: #292524;
}

.range-slider {
  position: relative;
  height: 22px;
  margin: 4px 11px; /* room for the 22px handles to overhang the track edges */
  user-select: none;
  touch-action: none;
  background: #e7e2dd;
  border-radius: 999px;
  height: 4px;
}

.range-slider-track {
  /* The .range-slider element IS the visible track. This empty target node
     just exists to keep DOM hooks stable for measurement in JS. */
  position: absolute;
  inset: 0;
}

.range-slider-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: #292524;
  border-radius: 999px;
  pointer-events: none;
}

.range-slider-handle {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  margin-top: -11px;
  background: white;
  border: none;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: grab;
  touch-action: none;
  transition: box-shadow 120ms ease, transform 120ms ease;
}

.range-slider-handle:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.18);
}

.range-slider-handle:active {
  cursor: grabbing;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 6px 16px rgba(0, 0, 0, 0.22);
  transform: scale(1.08);
}

/* Star chip group */
.picker-chip-group {
  display: inline-flex;
  gap: 4px;
  background: #f5f3f1;
  border-radius: 999px;
  padding: 3px;
}

.picker-chip {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #78716c;
  padding: 5px 14px;
  border-radius: 999px;
  transition: background 120ms ease, color 120ms ease;
}

.picker-chip.picker-chip-active {
  background: white;
  color: #292524;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Restaurant candidate pins — deep teal rounded square with fork-and-knife
   emoji. Teal reads as "food" semantically (matches the selected-meal pin)
   and contrasts cleanly against the warm day-color palette so users can
   instantly tell attractions from restaurants on the map. */
.tripr-pin-restaurant {
  background: #0f766e;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  border: 2.5px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

.tripr-pin-restaurant.tripr-pin-picker { /* allow shared selected styling */ }

.tripr-pin-restaurant:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.55);
}

.leaflet-marker-icon.tripr-pin-picker-selected .tripr-pin-restaurant.tripr-pin-picker,
.tripr-pin-restaurant.tripr-pin-picker.tripr-pin-picker-selected {
  background: #fbbf24;
  color: #422006;
  width: 48px;
  height: 48px;
  font-size: 22px;
  border-radius: 10px;
  border: 3px solid white;
  box-shadow: 0 6px 20px rgba(251, 191, 36, 0.65);
  margin-left: -8px;
  margin-top: -8px;
}

/* Already-selected meal pin (lunch/dinner already chosen for this day):
   muted teal so users see "decided" pins without confusing them with
   selectable candidates. */
.tripr-pin-restaurant-selected {
  background: #0d9488;
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border: 2.5px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Standalone hotels-map page floating controls (mobile primary surface). */
.hotels-map-floating-btn {
  position: absolute;
  z-index: 9994;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #1c1917;
  box-shadow: 0 4px 14px rgba(45, 41, 38, 0.22);
  text-decoration: none;
}

.hotels-map-floating-btn-tl {
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 12px;
}

.hotels-map-floating-toggle {
  position: absolute;
  z-index: 9994;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: 12px;
  display: inline-flex;
  background: #f5f3f1;
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  box-shadow: 0 4px 14px rgba(45, 41, 38, 0.22);
  text-decoration: none;
}

.hotels-map-floating-toggle-tab {
  font-size: 12px;
  font-weight: 700;
  color: #78716c;
  padding: 6px 16px;
  border-radius: 999px;
  transition: background 120ms ease, color 120ms ease;
}

.hotels-map-floating-toggle-tab.hotels-map-floating-toggle-tab-active {
  background: white;
  color: #1c1917;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Floating single-hotel card shown when a pin is tapped on the hotels-map
   page. Sits at the bottom of the viewport, animates in/out. */
.picker-floating-card {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 16px;
  background: white;
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: 0 12px 32px rgba(45, 41, 38, 0.22);
  z-index: 9994;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1), opacity 180ms ease;
}

.picker-floating-card.picker-floating-card-in {
  transform: translateY(0);
  opacity: 1;
}

/* Selected picker pin — sticky, persists until the user picks another or
   closes the picker. Distinct color (amber) + clearly larger size + thick
   border so the chosen pin is unmistakable amongst the coral peers.
   We use width/height (not transform) because Leaflet applies its own
   positioning transform to the wrapper, which would clobber a scale(). */
.leaflet-marker-icon.tripr-pin-picker-selected {
  z-index: 1000 !important;
}

.leaflet-marker-icon.tripr-pin-picker-selected .tripr-pin-hotel.tripr-pin-picker,
.tripr-pin-hotel.tripr-pin-picker.tripr-pin-picker-selected {
  background: #fbbf24;
  color: #422006;
  width: 48px;
  height: 48px;
  font-size: 22px;
  border-radius: 10px;
  border: 3px solid white;
  box-shadow: 0 6px 20px rgba(251, 191, 36, 0.65);
  /* Recenter the now-larger pin on the original anchor point.
     iconSize is 32px, iconAnchor is [16,16]. The inner element grows from
     32 -> 48 (=+16), so we shift up+left by half that to keep the visual
     center aligned with the geographic point. */
  margin-left: -8px;
  margin-top: -8px;
}

/* 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;
}

/* ── Map pin popup: compact pill ── */
.leaflet-popup.tripr-popup .leaflet-popup-content-wrapper {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 999px;
}

.leaflet-popup.tripr-popup .leaflet-popup-content {
  margin: 0;
  padding: 0;
  font-family: inherit;
  line-height: 1.2;
}

.leaflet-popup.tripr-popup .leaflet-popup-tip-container {
  width: 18px;
  height: 9px;
  margin-left: -9px;
}

.leaflet-popup.tripr-popup .leaflet-popup-tip {
  background: white;
  box-shadow: 0 6px 22px rgba(45, 41, 38, 0.16);
  width: 12px;
  height: 12px;
}

.tripr-popup-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: white;
  border: none;
  border-radius: 999px;
  padding: 6px 12px 6px 6px;
  box-shadow: 0 6px 22px rgba(45, 41, 38, 0.16);
  font-family: inherit;
  text-align: left;
  white-space: nowrap;
  max-width: 260px;
  color: #292524;
}

button.tripr-popup-pill {
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 150ms ease;
}

button.tripr-popup-pill:hover {
  box-shadow: 0 8px 28px rgba(45, 41, 38, 0.22);
}

button.tripr-popup-pill:active {
  transform: scale(0.97);
}

button.tripr-popup-pill:focus-visible {
  outline: 2px solid #FF6B54;
  outline-offset: 2px;
}

.tripr-popup-badge {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.tripr-popup-text {
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.tripr-popup-name {
  font-size: 13px;
  font-weight: 600;
  color: #292524;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

.tripr-popup-meta {
  font-size: 11px;
  font-weight: 500;
  color: #78716c;
  margin-top: 1px;
}

.tripr-popup-chevron {
  flex: 0 0 auto;
  color: #A8A29E;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  margin-left: 2px;
}

button.tripr-popup-pill:hover .tripr-popup-chevron {
  color: #FF6B54;
}

/* ── 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;
}

.day-slider-locked-zone {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(168, 165, 160, 0.22),
      rgba(168, 165, 160, 0.22) 4px,
      rgba(168, 165, 160, 0.08) 4px,
      rgba(168, 165, 160, 0.08) 8px
    );
  border-radius: 0 3px 3px 0;
  pointer-events: none;
  z-index: 1;
}

/* Fill turns gray when the slider is past the anonymous cap */
.day-slider-fill--locked {
  background: linear-gradient(90deg, #C4C1BC, #A8A5A0) !important;
}

/* The right-side day counter turns from coral → gray when over cap.
   Scoped to .day-slider-counter so the mobile .day-slider-wrap (which also
   gets the locked class) doesn't grow a grey backdrop around the slider. */
.day-slider-counter.day-slider-counter--locked {
  background: #F4F0EB !important;
}
.day-slider-counter--locked [data-trip-preferences-target="dayValue"] {
  color: #A8A5A0 !important;
}
/* Mobile counter uses gradient text — override to flat gray */
.day-slider-wrap.day-slider-counter--locked .day-slider-value {
  background: none !important;
  -webkit-text-fill-color: #A8A5A0 !important;
  color: #A8A5A0 !important;
}

/* Quick-day chip: shared base */
.day-quick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #57534E;
  background: #F4F0EB;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease, border-color 160ms ease;
  text-decoration: none;
  line-height: 1;
}

.day-quick:hover {
  background: #EBE7E1;
  transform: translateY(-1px);
}

.day-quick--active {
  background: #FF6B54;
  color: white;
  box-shadow: 0 3px 10px rgba(255, 107, 84, 0.25);
}

.day-quick--active:hover {
  background: #FF5A40;
  color: white;
}

/* Locked quick-day chip — same silhouette, muted palette, soft coral hint */
.day-quick--locked {
  background: #FFF6F1;
  color: #B8826A;
  border-color: #FFE4DD;
}

.day-quick--locked:hover {
  background: #FFE4DD;
  color: #FF6B54;
  transform: translateY(-1px);
}

.day-quick--locked .day-quick-lock-icon {
  font-size: 11px;
  opacity: 0.65;
}

/* Submit button locked-out state */
.submit-locked {
  background: #C4C1BC !important;
  color: white !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  opacity: 0.9;
}

/* Inline cap-lock card — hidden by default, revealed with .day-slider-cap-card--show */
.day-slider-cap-card {
  display: none;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, #FFF6F1 0%, #FFEDDF 100%);
  border: 1px solid #FFCEB8;
  box-shadow: 0 6px 20px rgba(255, 107, 84, 0.10);
}

.day-slider-cap-card--show {
  display: flex;
  animation: cap-card-in 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.day-slider-cap-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(255, 107, 84, 0.18);
}

.day-slider-cap-card-body {
  flex: 1;
  min-width: 0;
}

.day-slider-cap-card-title {
  font-size: 15px;
  font-weight: 800;
  color: #2D2926;
  margin: 0 0 4px;
  line-height: 1.3;
}

.day-slider-cap-card-sub {
  font-size: 13px;
  color: #57534E;
  margin: 0 0 12px;
  line-height: 1.4;
}

.day-slider-cap-card-ctas {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.day-slider-cap-card-cta {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.day-slider-cap-card-cta:hover {
  transform: translateY(-1px);
}

.day-slider-cap-card-cta--primary {
  background: #FF6B54;
  color: white;
  box-shadow: 0 4px 14px rgba(255, 107, 84, 0.3);
}

.day-slider-cap-card-cta--primary:hover {
  background: #FF5A40;
}

.day-slider-cap-card-cta--secondary {
  background: white;
  color: #FF6B54;
  border: 1.5px solid #FFCEB8;
}

.day-slider-cap-card-cta--secondary:hover {
  border-color: #FF6B54;
}

/* Free / no-credit-card badge inside the cap-lock card. */
.day-slider-cap-card-badge {
  display: inline-block;
  margin: 0 0 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #ECFDF5;       /* emerald-50 */
  color: #047857;            /* emerald-700 */
  border: 1px solid #A7F3D0; /* emerald-200 */
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.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,
[data-controller~="itinerary-edit"] .edit-only-inline { display: none; }
[data-controller~="itinerary-edit"][data-editing="true"] .edit-only { display: flex; }
[data-controller~="itinerary-edit"][data-editing="true"] .edit-only-inline { display: inline; }
[data-controller~="itinerary-edit"][data-editing="true"] .view-only { display: none; }

.edit-page-tint {
  transition: background-color 200ms ease-out;
}

[data-editing="true"] .edit-page-tint {
  background-color: rgb(255 251 235); /* matches Tailwind amber-50 */
}

.edit-mode-pulse-dot {
  animation: edit-mode-pulse 1.5s ease-out infinite;
}

@keyframes edit-mode-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(249, 115, 22, 0); }
  100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}

/* ══════════════════════════════════════════════
   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;
}
.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: 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;
}
.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;
}
.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 (4-screen welcome flow) ===== */

/* Mobile shell — scoped to <lg viewports so Tailwind's lg:hidden takes
   precedence on desktop. Without this, my .ob-stage display:flex would
   override .lg:hidden's display:none in the cascade and the mobile shell
   would render on top of the desktop shell. */
@media (max-width: 1023.98px) {
.ob-stage {
  position: fixed; inset: 0;
  background: linear-gradient(180deg, #FAF6EE 0%, #FFF2E0 100%);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.ob-progress {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: #F1ECE3; z-index: 10;
}
.ob-progress-fill {
  height: 100%; background: linear-gradient(90deg,#FF6B54,#FBBF24);
  border-radius: 0 2px 2px 0; transition: width 350ms ease;
}
.ob-back {
  position: absolute; top: 14px; left: 14px; z-index: 10;
  width: 36px; height: 36px; border-radius: 999px; background: white;
  border: 1px solid #E7E5E4; color: #78716C; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.ob-skip {
  position: absolute; top: 22px; right: 20px; z-index: 10;
  font-size: 14px; font-weight: 700; color: #A8A29E; background: transparent;
  border: none; padding: 8px 6px;
}
.ob-track {
  position: absolute; top: 72px; left: 0; bottom: 88px; right: 0;
  display: flex; transition: transform 320ms ease; width: 400%;
}
.ob-screen {
  flex: 0 0 25%; padding: 32px 24px 0; display: flex; flex-direction: column;
  justify-content: flex-start; align-items: center; text-align: center;
  overflow-y: auto;
}
.ob-screen.ob-swipe { justify-content: flex-start; padding-top: 24px; overflow: hidden; }
.ob-next {
  position: absolute; bottom: 24px; right: 20px; z-index: 10;
  width: 56px; height: 56px; border-radius: 50%; border: none; color: white;
  background: linear-gradient(135deg,#FF6B54,#FBBF24);
  box-shadow: 0 8px 20px rgba(255,107,84,0.35); font-size: 24px;
}
.ob-cta-final {
  position: absolute; bottom: 24px; left: 20px; right: 20px; z-index: 10;
  height: 56px; border-radius: 16px; border: none; color: white; font-weight: 800;
  font-size: 16px;
  background: linear-gradient(135deg,#FF6B54,#FBBF24);
  box-shadow: 0 8px 20px rgba(255,107,84,0.35);
}
.ob-form-root .hidden { display: none !important; }

/* Screen 1 — Swipe sandbox */
.ob-swipe-eyebrow {
  font-size: 12px; color: #A8A29E; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.ob-swipe-coach {
  font-family: 'Instrument Serif', Georgia, serif; font-size: 44px;
  letter-spacing: -0.02em; color: #3F3D3A; line-height: 1.0;
  padding: 0 12px; font-weight: 400;
}
.ob-swipe-coach em { font-style: italic; color: #FF6B54; }
.ob-swipe-coach-sub { font-size: 15px; color: #78716C; margin-top: 10px; line-height: 1.45; padding: 0 16px; max-width: 320px; }
} /* end mobile-only swipe text */

/* Swipe card itself — shared by both mobile and desktop shells */
.ob-swipe-cardstage { width: 100%; flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 0; position: relative; }
.ob-swipe-card {
  width: 100%; max-width: 320px; aspect-ratio: 3/4.4; border-radius: 24px;
  background-size: cover; background-position: center;
  box-shadow: 0 18px 40px rgba(0,0,0,0.22); position: relative; overflow: hidden;
  transform: rotate(-4deg);
  transform-origin: center 90%;
}
/* Auto-tilt invitation: card waggles right→center→left→center on a loop
   so first-time users see the gesture before they touch anything. */
@keyframes ob-swipe-invite-card {
  0%   { transform: rotate(0deg); }
  18%  { transform: rotate(12deg); }
  35%  { transform: rotate(0deg); }
  53%  { transform: rotate(-12deg); }
  70%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
@keyframes ob-swipe-invite-like {
  0%, 18%, 100% { opacity: 0; }
  10%           { opacity: 0.55; }
}
@keyframes ob-swipe-invite-nope {
  0%, 53%, 100% { opacity: 0; }
  45%           { opacity: 0.55; }
}
.ob-swipe-card.inviting {
  animation: ob-swipe-invite-card 3.4s ease-in-out infinite;
}
.ob-swipe-card.inviting .ob-swipe-stamp-like {
  animation: ob-swipe-invite-like 3.4s ease-in-out infinite;
}
.ob-swipe-card.inviting .ob-swipe-stamp-nope {
  animation: ob-swipe-invite-nope 3.4s ease-in-out infinite;
}
/* Subtle "drag me" pulse on the photo edges to draw the eye to the card */
.ob-swipe-card.inviting::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 26px; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(255, 107, 84, 0);
  animation: ob-swipe-invite-glow 3.4s ease-in-out infinite;
}
@keyframes ob-swipe-invite-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 84, 0); }
  18%, 53% { box-shadow: 0 0 0 6px rgba(255, 107, 84, 0.22); }
  35%, 70% { box-shadow: 0 0 0 0 rgba(255, 107, 84, 0); }
}
.ob-swipe-card-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ob-swipe-card-grad { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 50%,rgba(0,0,0,0.7) 100%); }
.ob-swipe-card-text { position: absolute; left: 18px; right: 18px; bottom: 18px; color: white; }
.ob-swipe-card-name { font-weight: 800; font-size: 22px; line-height: 1.1; }
.ob-swipe-card-sub  { font-size: 13px; opacity: 0.9; margin-top: 5px; line-height: 1.35; }
.ob-swipe-stamp { position: absolute; top: 18px; font-weight: 900; font-size: 18px; padding: 4px 10px; border-radius: 8px; letter-spacing: 1px; opacity: 0; transition: opacity 200ms; }
.ob-swipe-stamp-like { right: 18px; border: 3px solid #34d399; color: #34d399; transform: rotate(15deg); }
.ob-swipe-stamp-nope { left: 18px; border: 3px solid #ef4444; color: #ef4444; transform: rotate(-15deg); }
.ob-swipe-celebration { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,251,245,0.96); border-radius: 24px; opacity: 0; pointer-events: none; transition: opacity 240ms; }
.ob-swipe-celebration.on { opacity: 1; }
.ob-swipe-celebration-emoji { font-size: 56px; }
.ob-swipe-celebration-text  { font-weight: 800; font-size: 26px; margin-top: 4px; }
.ob-swipe-celebration-sub   { font-size: 14px; color: #78716C; margin-top: 8px; padding: 0 24px; }

/* Mobile-only continued: hint pills, signin hint */
@media (max-width: 1023.98px) {
.ob-swipe-signin-hint { font-size: 13px; color: #A8A29E; margin-top: 18px; }
.ob-swipe-signin-link { color: #FF6B54; font-weight: 700; text-decoration: none; }

/* Swipe hint row — left/right action pills with a bouncing finger between them */
.ob-swipe-hints {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-top: 14px;
}
.ob-swipe-hint {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  background: white; border: 1px solid #E7E5E4;
  font-size: 13px; font-weight: 700; color: #78716C;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ob-swipe-hint-arrow { font-size: 16px; }
.ob-swipe-hint-left  .ob-swipe-hint-arrow { color: #ef4444; }
.ob-swipe-hint-right .ob-swipe-hint-arrow { color: #34d399; }
.ob-swipe-hint-finger {
  font-size: 22px;
  animation: ob-swipe-finger 3.4s ease-in-out infinite;
}
@keyframes ob-swipe-finger {
  0%   { transform: translateX(0) scale(1); }
  18%  { transform: translateX(14px) scale(1.1); }
  35%  { transform: translateX(0) scale(1); }
  53%  { transform: translateX(-14px) scale(1.1); }
  70%  { transform: translateX(0) scale(1); }
  100% { transform: translateX(0) scale(1); }
}

/* Screen 2 — How it works */
.ob-how-eyebrow { font-size: 12px; color: #A8A29E; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; }
.ob-how-headline { font-family: 'Instrument Serif', Georgia, serif; font-size: 44px; line-height: 1.0; letter-spacing: -0.02em; color: #3F3D3A; margin-top: 0; max-width: 340px; padding: 0 8px; font-weight: 400; }
.ob-how-headline em { font-style: italic; color: #FF6B54; }
.ob-how-steps { width: 100%; max-width: 340px; margin-top: 32px; display: flex; flex-direction: column; align-items: stretch; }
.ob-how-step {
  display: flex; align-items: center; gap: 14px; padding: 18px;
  background: white; border-radius: 16px; border: 1px solid #F1ECE3;
  position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.ob-how-step-num {
  position: absolute; top: -9px; left: -9px; width: 24px; height: 24px;
  border-radius: 50%; background: linear-gradient(135deg,#FF6B54,#FBBF24);
  color: white; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 3px solid #FFFBF5;
}
.ob-how-step-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.ob-how-step-text { flex: 1; text-align: left; }
.ob-how-step-label { font-weight: 800; font-size: 15px; color: #2D2926; line-height: 1.15; }
.ob-how-step-sub   { font-size: 13px; color: #78716C; margin-top: 4px; line-height: 1.35; }
.ob-how-connector  { height: 18px; width: 2px; background: linear-gradient(180deg,#FF6B54,#FBBF24); margin-left: 38px; opacity: 0.35; }

/* Screen 3 — One question */
.ob-question-eyebrow { font-size: 12px; color: #A8A29E; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; }
.ob-question-headline { font-family: 'Instrument Serif', Georgia, serif; font-size: 44px; line-height: 1.0; letter-spacing: -0.02em; color: #3F3D3A; margin-top: 0; max-width: 340px; padding: 0 8px; font-weight: 400; }
.ob-question-headline em { font-style: italic; color: #FF6B54; }
.ob-question-sub { font-size: 14px; color: #78716C; margin-top: 10px; line-height: 1.45; max-width: 340px; padding: 0 16px; }
.ob-question-options { width: 100%; max-width: 360px; margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.ob-q-opt {
  background: white; border: 2px solid #E7E5E4; border-radius: 16px;
  padding: 16px 18px; display: flex; align-items: center; gap: 14px;
  text-align: left; transition: all 160ms;
}
.ob-q-opt.on { border-color: #FF6B54; box-shadow: 0 4px 12px rgba(255,107,84,0.18); }
.ob-q-opt-icon { font-size: 28px; flex-shrink: 0; }
.ob-q-opt-text { flex: 1; }
.ob-q-opt-label { display: block; font-weight: 800; font-size: 16px; color: #2D2926; line-height: 1.15; }
.ob-q-opt-sub   { display: block; font-size: 13px; color: #78716C; margin-top: 3px; line-height: 1.35; }

/* Screen 4 — Ready */
.ob-ready-icon-tile {
  width: 64px; height: 64px; border-radius: 18px;
  background: linear-gradient(135deg,#FFE7E1,#FFF5E0);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(255,107,84,0.12);
}
.ob-ready-eyebrow { font-size: 12px; color: #A8A29E; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; }
.ob-ready-headline { font-family: 'Instrument Serif', Georgia, serif; font-size: 44px; line-height: 1.0; letter-spacing: -0.02em; color: #3F3D3A; max-width: 340px; padding: 0 8px; font-weight: 400; }
.ob-ready-headline em { font-style: italic; color: #FF6B54; }
.ob-ready-sub { font-size: 14px; color: #78716C; margin-top: 12px; line-height: 1.55; max-width: 320px; padding: 0 16px; }

.ob-email-card {
  width: 100%; max-width: 360px; margin-top: 24px; background: white;
  border: 2px solid #E7E5E4; border-radius: 16px;
  display: flex; align-items: center; gap: 12px;
  padding: 4px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: border-color 160ms, box-shadow 160ms;
}
.ob-email-card:focus-within {
  border-color: #FF6B54; box-shadow: 0 4px 14px rgba(255,107,84,0.15);
}
.ob-email-card::before {
  content: "📧"; font-size: 18px; flex-shrink: 0; opacity: 0.6;
}
.ob-email-input {
  flex: 1; padding: 16px 0; font-size: 16px; font-weight: 600;
  color: #2D2926; background: transparent; border: none; outline: none;
}
.ob-email-input::placeholder { color: #A8A29E; font-weight: 500; }
.ob-email-card-sub { font-size: 12px; color: #A8A29E; font-weight: 600; text-align: center; margin-top: 10px; }

.ob-divider { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 360px; margin-top: 20px; }
.ob-divider-line { flex: 1; height: 1px; background: #E7E5E4; }
.ob-divider-text { font-size: 11px; color: #A8A29E; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; }
.ob-google-wrap { width: 100%; max-width: 360px; margin-top: 16px; }
.ob-google-wrap a, .ob-google-wrap button {
  background: white !important;
  border: 1.5px solid #E7E5E4 !important;
  border-radius: 14px !important;
  height: 52px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: 14px; color: #2D2926;
  width: 100%;
  transition: border-color 160ms, box-shadow 160ms;
}
.ob-google-wrap a:hover, .ob-google-wrap button:hover {
  border-color: #C7C2B9 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
} /* end @media (max-width: 1023.98px) — mobile shell scope */

/* Desktop shell */
.obd-desktop {
  position: fixed; inset: 0; background: #FFFBF5; overflow: hidden;
  flex-direction: column;
}
.obd-progress {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: #F1ECE3; z-index: 10;
}
.obd-progress-fill { height: 100%; background: linear-gradient(90deg,#FF6B54,#FBBF24); transition: width 350ms ease; }
.obd-skip {
  position: absolute; top: 22px; right: 28px; z-index: 10;
  font-size: 12px; font-weight: 700; color: #A8A29E; background: white;
  border: 1px solid #E7E5E4; border-radius: 999px; padding: 8px 16px;
}
.obd-track-mask { position: absolute; top: 56px; bottom: 76px; left: 0; right: 0; overflow: hidden; }
.obd-track { display: flex; height: 100%; transition: transform 380ms ease; width: 400%; }
.obd-screen { flex: 0 0 25%; padding: 0 56px; display: flex; align-items: center; justify-content: center; }

.obd-swipe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; width: 100%; max-width: 1000px; align-items: center; }
.obd-swipe-copy { max-width: 420px; }
.obd-swipe-headline { font-family: 'Instrument Serif', Georgia, serif; font-size: 60px; line-height: 1.0; letter-spacing: -0.02em; color: #3F3D3A; }
.obd-swipe-headline em { font-style: italic; color: #FF6B54; }
.obd-swipe-sub { font-size: 16px; line-height: 1.55; color: #78716C; margin-top: 14px; max-width: 420px; }
.obd-swipe-signin-hint { font-size: 13px; color: #A8A29E; margin-top: 22px; }
.obd-swipe-signin-link { color: #FF6B54; font-weight: 700; text-decoration: none; }
.obd-swipe-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 480px; }
.obd-swipe-stage .ob-swipe-card { max-width: 320px; }

.obd-how-stack { width: 100%; max-width: 920px; display: flex; flex-direction: column; align-items: center; }
.obd-how-headline { font-family: 'Instrument Serif', Georgia, serif; font-size: 56px; line-height: 1.05; color: #3F3D3A; text-align: center; max-width: 700px; }
.obd-how-headline em { font-style: italic; color: #FF6B54; }
.obd-how-row { display: flex; gap: 18px; margin-top: 46px; align-items: stretch; }
.obd-how-step { flex: 1; padding: 24px 18px; background: white; border: 1px solid #F1ECE3; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 200px; }
.obd-how-step-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 14px; }
.obd-how-step-label { font-weight: 800; font-size: 16px; color: #2D2926; }
.obd-how-step-sub { font-size: 13px; color: #78716C; margin-top: 6px; line-height: 1.45; }
.obd-how-arrow { display: flex; align-items: center; color: #FF6B54; font-size: 24px; font-weight: 300; }

.obd-question-card { width: 100%; max-width: 680px; }
.obd-question-card .obd-question-eyebrow { display: block; text-align: center; font-size: 11px; font-weight: 700; color: #A8A29E; text-transform: uppercase; letter-spacing: 0.1em; }
.obd-question-headline { font-family: 'Instrument Serif', Georgia, serif; font-size: 56px; text-align: center; color: #3F3D3A; line-height: 1.05; margin-top: 6px; }
.obd-question-headline em { font-style: italic; color: #FF6B54; }
.obd-question-sub { font-size: 16px; text-align: center; color: #78716C; margin-top: 12px; max-width: 460px; margin-left: auto; margin-right: auto; }
.obd-question-options-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 34px; }
.obd-q-opt { background: white; border: 2px solid #E7E5E4; border-radius: 16px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; transition: all 160ms; text-align: left; }
.obd-q-opt.on { border-color: #FF6B54; box-shadow: 0 4px 14px rgba(255,107,84,0.18); }
.obd-q-opt-icon { font-size: 28px; }
.obd-q-opt-text { flex: 1; }
.obd-q-opt-label { display: block; font-weight: 800; font-size: 15px; color: #2D2926; }
.obd-q-opt-sub { display: block; font-size: 12px; color: #78716C; margin-top: 3px; }

.obd-ready-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; width: 100%; max-width: 1000px; align-items: center; }
.obd-ready-copy { max-width: 440px; }
.obd-ready-headline { font-family: 'Instrument Serif', Georgia, serif; font-size: 60px; line-height: 1.0; color: #3F3D3A; }
.obd-ready-headline em { font-style: italic; color: #FF6B54; }
.obd-ready-sub { font-size: 16px; color: #78716C; margin-top: 14px; line-height: 1.55; max-width: 440px; }
.obd-ready-form { width: 100%; max-width: 360px; }
.obd-email-card { background: white; border: 2px solid #E7E5E4; border-radius: 14px; padding: 0; }
.obd-email-input { width: 100%; padding: 16px 18px; font-size: 14px; font-weight: 600; color: #2D2926; background: transparent; border: none; outline: none; }
.obd-cta-primary { width: 100%; height: 54px; margin-top: 14px; border-radius: 14px; background: linear-gradient(135deg,#FF6B54,#FBBF24); color: white; font-weight: 800; font-size: 14px; border: none; box-shadow: 0 8px 20px rgba(255,107,84,0.35); cursor: pointer; }
.obd-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.obd-divider-line { flex: 1; height: 1px; background: #E7E5E4; }
.obd-divider-text { font-size: 11px; color: #A8A29E; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.obd-google-wrap { width: 100%; }
.obd-ready-sub-tiny { font-size: 11px; color: #A8A29E; font-weight: 600; text-align: center; margin-top: 14px; }

.obd-nav { position: absolute; bottom: 18px; left: 28px; right: 28px; z-index: 10; display: flex; justify-content: space-between; align-items: center; }
.obd-back { background: white; border: 1px solid #E7E5E4; border-radius: 999px; padding: 10px 18px; font-weight: 700; font-size: 13px; color: #78716C; }
.obd-next { padding: 0 22px; height: 44px; border-radius: 14px; background: linear-gradient(135deg,#FF6B54,#FBBF24); color: white; font-weight: 800; font-size: 14px; border: none; box-shadow: 0 8px 20px rgba(255,107,84,0.35); display: inline-flex; align-items: center; gap: 8px; }

/* ===== Code-entry screen ===== */
.code-stage { min-height: 100vh; background: #FFFBF5; padding: 18px; display: flex; flex-direction: column; }
.code-chrome-top { display: flex; align-items: center; justify-content: space-between; }
.code-back { width: 36px; height: 36px; border-radius: 999px; background: white; border: 1px solid #E7E5E4; display: inline-flex; align-items: center; justify-content: center; color: #78716C; font-size: 16px; }
.code-wordmark { font-weight: 900; font-size: 18px; letter-spacing: -0.02em; color: #2D2926; }
.code-wordmark-mark { color: #FF6B54; font-size: 14px; margin-left: 4px; }
.code-card { max-width: 420px; margin: 32px auto 0; padding: 24px; text-align: center; }
.code-icon { width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(135deg,#FFE7E1,#FFF5E0); margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 32px; box-shadow: 0 4px 14px rgba(255,107,84,0.12); }
.code-headline { font-family: 'Instrument Serif', Georgia, serif; font-size: 40px; line-height: 1.0; color: #3F3D3A; letter-spacing: -0.02em; font-weight: 400; }
.code-sub { font-size: 15px; color: #78716C; margin-top: 12px; line-height: 1.5; padding: 0 8px; }
.code-sub strong { color: #3F3D3A; font-weight: 700; }
.code-error { background: #FEE2E2; color: #B91C1C; font-size: 13px; font-weight: 600; padding: 10px 14px; border-radius: 12px; margin-top: 18px; }
.code-form { margin-top: 24px; }
.code-row { display: flex; gap: 10px; justify-content: center; }
.code-box { width: 50px; height: 62px; border-radius: 14px; border: 2px solid #E7E5E4; background: white; text-align: center; font-weight: 800; font-size: 30px; color: #2D2926; font-family: 'SF Mono', Menlo, monospace; outline: none; }
.code-box:focus { border-color: #FF6B54; box-shadow: 0 0 0 3px rgba(255,107,84,0.18); }
.code-cta { width: 100%; height: 50px; margin-top: 18px; border-radius: 14px; background: linear-gradient(135deg,#FF6B54,#FBBF24); color: white; font-weight: 800; border: none; box-shadow: 0 8px 20px rgba(255,107,84,0.35); }
.code-resend { text-align: center; font-size: 14px; color: #A8A29E; margin-top: 24px; }
.code-resend-btn { background: transparent; border: none; color: #A8A29E; font-weight: 600; font-size: 14px; }
.code-resend-btn:not(:disabled) { color: #FF6B54; cursor: pointer; }
.code-wrong-email { text-align: center; font-size: 14px; color: #A8A29E; margin-top: 8px; }
.code-wrong-email a { color: #A8A29E; text-decoration: underline; text-decoration-color: #E7E5E4; }

@media (min-width: 1024px) {
  .code-card { max-width: 520px; padding: 48px; margin-top: 80px; }
  .code-icon { width: 64px; height: 64px; font-size: 32px; margin-bottom: 22px; }
  .code-headline { font-size: 42px; }
  .code-sub { font-size: 16px; margin-top: 14px; }
  .code-box { width: 56px; height: 68px; border-radius: 14px; font-size: 32px; }
  .code-cta { width: auto; padding: 0 28px; height: 50px; align-self: flex-end; }
  .code-form { display: flex; flex-direction: column; align-items: center; }
}