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

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

.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: hidden;
  z-index: 9991;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 350ms cubic-bezier(0.32, 0.72, 0, 1), opacity 200ms ease;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -8px 40px rgba(45, 41, 38, 0.12);
}

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

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

/* ── 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); } 60% { transform: scale(1.15) rotate(5deg); } 100% { transform: scale(1) rotate(0); } }
@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-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;
  }
}