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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── Swipe card back content ──
   Layout for the structured back face (category pill, name, chip row,
   description, official-site link). The .card-back rule above sets the
   cream background and rotateY; .card-back-content overrides the centering
   to top-aligned column flow. */
.card-back-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 16px;
  color: #2A2722;
}
.card-back-name {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 14px 0;
}
.card-back-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.card-back-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 107, 91, 0.1);
  color: #C7382B;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.card-back-chip-star {
  color: #F59E0B;
}
.card-back-desc {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #2A2722;
}
.card-back-link {
  margin-top: 14px;
  font-size: 11px;
  font-weight: 700;
  color: #FF6B5B;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
}
.card-back-flip-cue {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 9px;
  font-weight: 600;
  color: #c4bdb2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  pointer-events: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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;
}

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

/* 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-emoji {
  font-size: 2.4rem;
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── Random City Overlay ── */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

.chapter-break {
  position: relative;
}

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

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

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

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

.pref-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 0;
  background: #FFFAF5;
  border: 1.5px solid #f0e0d0;
  border-radius: 0.75rem;
  font-weight: 800;
  color: #57504a;
  font-size: 0.8125rem;
}
.pref-pill-active {
  background: #FF6B5B;
  border-color: #FF6B5B;
  color: #ffffff;
}
.pref-pill-caption {
  font-size: 0.5625rem;
  font-weight: 700;
  color: #999;
  display: block;
}
.pref-pill-active .pref-pill-caption {
  color: rgba(255, 255, 255, 0.85);
}
.pref-vibe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.875rem 0.5rem;
  background: #FFFAF5;
  border: 1.5px solid #f0e0d0;
  border-radius: 0.875rem;
  text-align: center;
}
.pref-vibe-icon {
  font-size: 1.5rem;
  line-height: 1;
}
.pref-vibe-label {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #2d2724;
}
.pref-vibe-caption {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #999;
}
.pref-vibe-active {
  background: #FF6B5B;
  border-color: #FF6B5B;
}
.pref-vibe-active .pref-vibe-label {
  color: #ffffff;
}
.pref-vibe-active .pref-vibe-caption {
  color: rgba(255, 255, 255, 0.85);
}
.pref-seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.875rem 0.5rem;
  background: #FFFAF5;
  border: 1.5px solid #f0e0d0;
  border-radius: 0.875rem;
  text-align: center;
}
.pref-seg-icon {
  font-size: 1.375rem;
  margin-bottom: 0.25rem;
  display: block;
}
.pref-seg-label {
  font-size: 0.75rem;
  font-weight: 800;
  color: #57504a;
}
.pref-seg-caption {
  font-size: 0.5625rem;
  font-weight: 600;
  color: #999;
  margin-top: 0.125rem;
  line-height: 1.3;
}
.pref-seg-active {
  background: #FF6B5B;
  border-color: #FF6B5B;
}
.pref-seg-active .pref-seg-label,
.pref-seg-active .pref-seg-caption {
  color: #ffffff;
}
.pref-card {
  background: #ffffff;
  border-radius: 1.125rem;
  padding: 1rem;
  margin-bottom: 0.875rem;
  box-shadow: 0 1px 2px rgba(45,39,36,0.04), 0 4px 12px rgba(45,39,36,0.03);
}
.pref-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.pref-card-title {
  font-size: 0.875rem;
  font-weight: 800;
  color: #2d2724;
}
.pref-card-required {
  font-size: 0.5625rem;
  font-weight: 800;
  color: #FF6B5B;
  letter-spacing: 0.08em;
  margin-left: auto;
}
.pref-hero {
  padding: 1.125rem 1.125rem 0.875rem;
  position: relative;
  text-align: center;
}
.pref-hero-flag { font-size: 2.25rem; display: block; }
.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);
}

/* ===== Onboarding (welcome flow) ===== */
.ob-stage {
  background: linear-gradient(180deg, #FFF7ED 0%, #FDF2E9 100%);
  overflow: hidden;
  z-index: 50;
}
.ob-track {
  width: 600%;
  height: 100%;
  display: flex;
  transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ob-screen {
  width: calc(100% / 6);
  height: 100%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.ob-skip {
  position: absolute;
  top: calc(18px + env(safe-area-inset-top, 0px));
  right: 20px;
  z-index: 10;
  background: transparent;
  border: 0;
  font-size: 13px;
  font-weight: 600;
  color: #9ca3af;
  cursor: pointer;
}
.ob-dots {
  position: absolute;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  left: 0; right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.ob-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 0;
  background: #e5e7eb;
  cursor: pointer;
  transition: width 200ms, background 200ms, border-radius 200ms;
}
.ob-dot.on {
  background: #FF6B5B;
  width: 22px;
  border-radius: 4px;
}
.ob-next {
  position: absolute;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  right: 22px;
  z-index: 10;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(135deg, #FF6B5B, #F59E0B);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(255, 107, 91, 0.4);
  cursor: pointer;
  animation: ob-pulse-cta 1.6s ease-in-out infinite;
}
.ob-next.hidden { display: none; }
.ob-cta-final {
  position: absolute;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  left: 22px; right: 22px;
  z-index: 10;
  height: 48px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(135deg, #FF6B5B, #F59E0B);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(255, 107, 91, 0.4);
  cursor: pointer;
  animation: ob-pulse-cta 1.6s ease-in-out infinite;
}
.ob-cta-final.hidden { display: none; }
@keyframes ob-pulse-cta {
  0%, 100% { transform: scale(1);    box-shadow: 0 6px 18px rgba(255,107,91,.4); }
  50%      { transform: scale(1.04); box-shadow: 0 8px 22px rgba(255,107,91,.55); }
}
/* ----- Screen 1: Welcome ----- */
.ob-welcome {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  text-align: center;
}
.ob-welcome-stack { width: 100%; }
.ob-welcome-emoji {
  position: absolute;
  opacity: .55;
  font-size: 22px;
  animation: ob-welcome-float 6s ease-in-out infinite;
}
.ob-welcome-emoji-1 { top: 12%; left: 14%; animation-delay: 0s; }
.ob-welcome-emoji-2 { top: 22%; right: 16%; animation-delay: 1s; font-size: 18px; }
.ob-welcome-emoji-3 { bottom: 32%; left: 16%; animation-delay: 2s; font-size: 20px; }
.ob-welcome-emoji-4 { bottom: 22%; right: 18%; animation-delay: .5s; font-size: 18px; }
@keyframes ob-welcome-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.ob-welcome-wordmark {
  font-size: 56px;
  font-weight: 900;
  color: #FF6B5B;
  letter-spacing: -0.02em;
  line-height: 1;
  animation: ob-welcome-fade 600ms ease-out both;
}
.ob-welcome-headline {
  font-size: 24px;
  font-weight: 800;
  color: #1f2937;
  margin-top: 26px;
  line-height: 1.1;
  animation: ob-welcome-fade 600ms ease-out both 200ms;
}
.ob-welcome-sub {
  font-size: 14px;
  color: #6b7280;
  margin-top: 12px;
  line-height: 1.4;
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
  animation: ob-welcome-fade 600ms ease-out both 400ms;
}
@keyframes ob-welcome-fade {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ----- Screens 2/3/4: Wake / Wind / Pace questions ----- */
.ob-question {
  display: flex;
  flex-direction: column;
  padding: calc(70px + env(safe-area-inset-top, 0px)) 28px 0;
  text-align: center;
}
.ob-question-eyebrow {
  font-size: 11px;
  font-weight: 800;
  color: #FF6B5B;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.ob-question-headline {
  font-size: 24px;
  font-weight: 900;
  color: #1f2937;
  line-height: 1.2;
  margin-top: 10px;
}
.ob-question-sub {
  font-size: 13px;
  color: #6b7280;
  margin: 8px auto 0;
  max-width: 260px;
  line-height: 1.4;
}
.ob-question-options {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ob-q-opt {
  background: #fff;
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  text-align: left;
  cursor: pointer;
  transition: border-color 200ms, box-shadow 200ms, transform 100ms;
  appearance: none;
  -webkit-appearance: none;
}
.ob-q-opt:active { transform: scale(.98); }
.ob-q-opt.on {
  border-color: #FF6B5B;
  box-shadow: 0 6px 18px rgba(255,107,91,.18);
  background: linear-gradient(135deg, #FFF7ED, #FEF3C7);
}
.ob-q-opt-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: #FFF7ED;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.ob-q-opt.on .ob-q-opt-icon {
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.ob-q-opt-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ob-q-opt-label { font-size: 14px; font-weight: 800; color: #1f2937; line-height: 1.1; }
.ob-q-opt-sub   { font-size: 11px; color: #9ca3af; }
.ob-q-opt-time  { font-size: 13px; font-weight: 800; color: #FF6B5B; }

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

/* ----- Screen 6: You're ready ----- */
.ob-ready {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(50px + env(safe-area-inset-top, 0px)) 24px 0;
  text-align: center;
  position: relative;
}
.ob-ready-headline { font-size: 22px; font-weight: 900; color: #1f2937; line-height: 1.15; }
.ob-ready-sub      { font-size: 12px; color: #6b7280; margin-top: 6px; max-width: 240px; line-height: 1.4; }

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

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

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

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

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

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

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