@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

/* Airport dropdown styles */
.group:hover .group-hover\:block {
  display: block !important;
}

/* Ensure dropdown stays visible when hovering over it */
.group .absolute:hover {
  display: block !important;
}

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  /* line-height: 0; */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.unit {
  border: 0.5px solid #222;
  width: 1.8em;
  height: 1.8em;
  display: inline-block;
  margin: 0;
}

.unit span {
  font-size: 0.5em;
}

.seat,
.facility {
  width: 1.8em;
  height: 1.8em;
  z-index: 10000;
}

p {
  font-size: 0.8em;
}

.wing {
  z-index: 1;
}
.deck {
  border: none;
  border-left: 2px solid #222;
  border-right: 2px solid #222;
  position: sticky;
  text-align: center;
  margin: auto;
  background-color: whitesmoke;
  z-index: 2;
  padding-left: 1.5rem;
}

@media (max-width: 768px) {
  .deck {
    position: relative;
    margin: auto;
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
  }
  
  /* Enable horizontal scroll for seatmap grids on mobile */
  .grid-container {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: calc(100vw - 32px); /* Account for page padding */
  }
  
  /* Ensure seatmap grid doesn't overflow - be specific to avoid affecting nav grids */
  .grid-container .grid,
  .seatmap-section .grid {
    min-width: max-content;
    width: max-content;
  }
  
  /* Only constrain seatmap section */
  .seatmap-section {
    overflow-x: hidden;
  }
  
  /* Fix footer overflow on mobile */
  footer {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }
  
  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Adjust footer text sizing for mobile */
  footer h3 {
    font-size: 1rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  footer a, footer p {
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
  }
  
  footer ul {
    margin-top: 0.5rem !important;
  }
  
  footer li {
    margin-bottom: 0.25rem !important;
  }
  
  /* Reduce padding on mobile */
  footer > div {
    padding: 2rem 1rem !important;
  }
}

.deck div {
  position: absolute;
  left: 12px;
}

.wing {
  border: 2px dashed #222;
  z-index: 0;
}

.plane-nose {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #B0C4DE;
  /* Light steel blue */
  position: relative;
}

.plane-nose:before {
  content: '';
  position: absolute;
  top: 25px;
  left: -50px;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 75px solid #B0C4DE;
  /* Light steel blue */
}

.mobile-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-table-wrapper table {
  min-width: 640px;
}

@media (min-width: 640px) {
  .mobile-table-wrapper table {
    min-width: 100%;
  }
}

.responsive-iframe,
.responsive-iframe iframe {
  width: 100%;
  max-width: 100%;
}

.responsive-iframe iframe {
  height: 100%;
}

.break-anywhere {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ===== MOBILE UX IMPROVEMENTS ===== */

/* Bottom navigation iOS safe area */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Hide bottom nav when keyboard is open (mobile landscape or small height) */
@media (max-height: 500px) {
  nav[aria-label="Mobile bottom navigation"] {
    display: none;
  }
}

/* Scrollbar hide for horizontal carousels */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Scroll gradient indicators */
.scroll-gradient-right {
  position: relative;
}
.scroll-gradient-right::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to right, transparent, white);
  pointer-events: none;
  z-index: 10;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .transition-all,
  .transition-colors,
  .transition-shadow,
  .transition-transform,
  .transition-opacity {
    transition: none !important;
  }
  .animate-spin,
  .animate-pulse,
  .animate-ping {
    animation: none !important;
  }
}

/* Banner dismiss animation */
.banner-dismiss {
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

/* Premium content blur for non-signed-in users */
.blur-premium {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
}

.blur-premium-container {
  position: relative;
}

.blur-premium-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px);
  z-index: 10;
  border-radius: 0.75rem;
}
/* Newsletter iframe isolation styles */
.newsletter-iframe-wrapper {
  /* Reset any inherited styles */
  all: initial;
  /* Apply necessary styles */
  display: block;
  width: 100%;
  max-width: 20rem; /* max-w-xs equivalent */
  margin: 0.75rem auto 0;
}

.newsletter-iframe-wrapper iframe {
  /* Reset all inherited styles for the iframe */
  all: initial;
  /* Apply specific iframe styles */
  display: block !important;
  width: 100% !important;
  height: 52px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background-color: transparent !important;
  box-shadow: none !important;
  vertical-align: initial !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  /* Force transparent background */
  opacity: 1 !important;
  visibility: visible !important;
}

/* Additional style to ensure the iframe container doesn't interfere */
.newsletter-iframe-container {
  background-color: transparent !important;
  overflow: hidden;
  border-radius: 12px;
  height: 52px;
}
/* Route Map Tooltip Styles */
.leaflet-popup-content-wrapper {
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.leaflet-popup-content {
  margin: 12px;
  min-width: 180px;
}

.leaflet-popup-content a {
  text-decoration: none;
  transition: color 0.2s;
}

.leaflet-popup-content a:hover {
  text-decoration: underline;
}

/* Route line hover effect */
.leaflet-interactive:hover {
  cursor: pointer;
}

/* Airport marker hover effect */
.leaflet-marker-icon:hover {
  cursor: pointer;
}
  :root {
    --safe-bg: #fafafa;
    --safe-card: #ffffff;
    --safe-ink: #0a0a0a;
    --safe-muted: #737373;
    --safe-border: rgba(10,10,10,0.08);
    --safe-border-strong: rgba(10,10,10,0.14);
    --safe-accent: #2563eb;
    --safe-accent-soft: #eff6ff;
    --safe-success: #16a34a;
    --safe-success-soft: #f0fdf4;
    --safe-warn: #ca8a04;
    --safe-warn-soft: #fefce8;
    --safe-danger: #dc2626;
    --safe-danger-soft: #fef2f2;
  }

  /* ===== GLOBAL GRADIENT KILL ===== */
  /* Replace ALL indigo/purple gradients with solid colors */
  .bg-gradient-to-r.from-indigo-500,
  .bg-gradient-to-r.from-indigo-600,
  [class*="from-indigo-500"][class*="to-purple"],
  [class*="from-indigo-600"][class*="to-purple"],
  [class*="from-indigo-500"][class*="to-indigo"],
  [class*="from-indigo-600"][class*="to-indigo"] {
    background: var(--safe-ink) !important;
    background-image: none !important;
  }
  [class*="from-blue-50"][class*="to-indigo-50"],
  [class*="from-blue-50"][class*="to-indigo-100"],
  [class*="from-indigo-50"][class*="to-purple-50"],
  [class*="from-indigo-50"][class*="to-blue-50"],
  [class*="from-indigo-100"][class*="to-purple-100"] {
    background: var(--safe-accent-soft) !important;
    background-image: none !important;
  }
  /* Generic pale soft gradients across any two 50-tier colors */
  .bg-gradient-to-br[class*="from-"][class*="-50"][class*="to-"][class*="-50"],
  .bg-gradient-to-r[class*="from-"][class*="-50"][class*="to-"][class*="-50"] {
    background-image: none !important;
    background-color: var(--safe-bg) !important;
  }
  /* Soft pale-50-to-100 pairs → accent-soft */
  .bg-gradient-to-br[class*="from-blue-50"][class*="to-indigo-100"],
  .bg-gradient-to-br[class*="from-indigo-50"][class*="to-blue-100"] {
    background-image: none !important;
    background-color: var(--safe-accent-soft) !important;
  }
  [class*="from-yellow-50"][class*="to-orange-50"] {
    background: #fffbeb !important;
    background-image: none !important;
  }
  [class*="from-amber-500"][class*="to-amber-600"] {
    background: var(--safe-ink) !important;
    background-image: none !important;
  }
  [class*="from-green-50"][class*="to-emerald-50"] {
    background: var(--safe-success-soft) !important;
    background-image: none !important;
  }

  /* ===== INDIGO → ACCENT/INK ===== */
  .bg-indigo-600 { background-color: var(--safe-ink) !important; }
  .bg-indigo-700 { background-color: var(--safe-ink) !important; }
  .hover\:bg-indigo-500:hover { background-color: #27272a !important; }
  .hover\:bg-indigo-700:hover { background-color: #27272a !important; }
  .bg-indigo-50 { background-color: var(--safe-accent-soft) !important; }
  .bg-indigo-100 { background-color: var(--safe-accent-soft) !important; }
  .text-indigo-600 { color: var(--safe-accent) !important; }
  .text-indigo-700 { color: var(--safe-accent) !important; }
  .text-indigo-500 { color: var(--safe-accent) !important; }
  .text-indigo-400 { color: var(--safe-accent) !important; }
  .text-indigo-800 { color: var(--safe-ink) !important; }
  .text-indigo-900 { color: var(--safe-ink) !important; }
  .text-indigo-100 { color: rgba(255,255,255,0.7) !important; }
  .hover\:text-indigo-600:hover { color: var(--safe-accent) !important; }
  .hover\:text-indigo-400:hover { color: var(--safe-accent) !important; }
  .hover\:text-indigo-800:hover { color: #1e40af !important; }
  .hover\:bg-indigo-50:hover { background-color: var(--safe-accent-soft) !important; }
  .border-indigo-200 { border-color: var(--safe-border) !important; }
  .border-indigo-300 { border-color: var(--safe-border-strong) !important; }
  .border-indigo-500 { border-color: var(--safe-accent) !important; }
  .ring-indigo-500,
  .ring-indigo-600 { --tw-ring-color: var(--safe-accent) !important; }
  .focus\:ring-indigo-500:focus,
  .focus\:ring-indigo-600:focus { --tw-ring-color: var(--safe-accent) !important; }
  .focus-visible\:outline-indigo-600:focus-visible { outline-color: var(--safe-accent) !important; }
  .focus\:border-indigo-500:focus,
  .focus\:border-indigo-600:focus { border-color: var(--safe-accent) !important; }
  .focus\:ring-inset:focus.focus\:ring-indigo-600:focus { --tw-ring-color: var(--safe-accent) !important; }

  /* Sessions/forms: ring-gray-300 on inputs → softer Safe border */
  .ring-gray-300 { --tw-ring-color: var(--safe-border-strong) !important; }
  .ring-gray-100, .ring-gray-200 { --tw-ring-color: var(--safe-border) !important; }
  .ring-white\/20 { --tw-ring-color: rgba(255,255,255,0.18) !important; }

  /* Indigo tinted rings / backgrounds used on pricing featured card */
  .ring-indigo-200, .ring-indigo-500, .ring-indigo-600\/20 {
    --tw-ring-color: var(--safe-accent) !important;
  }
  .group-hover\:text-indigo-600 { color: var(--safe-accent) !important; }
  .group-hover\:bg-indigo-600 { background-color: var(--safe-ink) !important; }

  /* ===== PURPLE → INK ===== */
  .bg-purple-600, .bg-purple-700 { background-color: var(--safe-ink) !important; }
  .hover\:bg-purple-700:hover { background-color: #27272a !important; }
  .text-purple-500, .text-purple-600 { color: var(--safe-accent) !important; }
  .text-purple-700, .text-purple-800, .text-purple-900 { color: var(--safe-ink) !important; }
  .hover\:text-purple-800:hover { color: #1e40af !important; }
  .bg-purple-50 { background-color: var(--safe-bg) !important; }
  .bg-purple-100, .bg-purple-200 { background-color: var(--safe-accent-soft) !important; }
  .hover\:bg-purple-50:hover, .hover\:bg-purple-200:hover { background-color: var(--safe-accent-soft) !important; }
  .hover\:border-purple-300:hover { border-color: var(--safe-border-strong) !important; }

  /* Orange soft bg explicit (for stat cards) */
  .bg-orange-50 { background-color: var(--safe-bg) !important; }
  .bg-orange-100 { background-color: var(--safe-warn-soft) !important; }

  /* Yellow-500 (star colors, trophies) kept as Safe warn */
  .text-yellow-500, .text-yellow-600 { color: var(--safe-warn) !important; }
  .text-yellow-400 { color: var(--safe-warn) !important; }

  /* ===== EMERALD (dashboard usage cards) ===== */
  .bg-emerald-50 { background-color: var(--safe-success-soft) !important; }
  .bg-emerald-100 { background-color: var(--safe-success-soft) !important; }
  .bg-emerald-500, .bg-emerald-600 { background-color: var(--safe-ink) !important; }
  .text-emerald-100 { color: rgba(255,255,255,0.7) !important; }
  .text-emerald-500, .text-emerald-600, .text-emerald-700, .text-emerald-800 { color: var(--safe-success) !important; }
  .border-emerald-200 { border-color: var(--safe-border) !important; }

  /* ===== GREEN-700 (success-text variants) ===== */
  .text-green-500 { color: var(--safe-success) !important; }

  /* ===== ORANGE / PINK / ROSE → INK (neutralize warm accents) ===== */
  .bg-orange-600, .bg-pink-600, .bg-rose-600 { background-color: var(--safe-ink) !important; }
  .hover\:bg-orange-700:hover, .hover\:bg-pink-700:hover, .hover\:bg-rose-700:hover { background-color: #27272a !important; }
  .bg-orange-50, .bg-pink-50, .bg-rose-50 { background-color: var(--safe-bg) !important; }
  .bg-orange-100, .bg-pink-100, .bg-rose-100 { background-color: var(--safe-accent-soft) !important; }
  .text-orange-600, .text-pink-600, .text-rose-600 { color: var(--safe-accent) !important; }
  .text-orange-700, .text-pink-700, .text-rose-700 { color: var(--safe-ink) !important; }
  .text-orange-800, .text-pink-800, .text-rose-800 { color: var(--safe-ink) !important; }

  /* ===== AMBER → INK ===== */
  .bg-amber-600 { background-color: var(--safe-ink) !important; }
  .hover\:bg-amber-700:hover { background-color: #27272a !important; }
  .text-amber-500 { color: var(--safe-accent) !important; }
  .text-amber-600 { color: var(--safe-accent) !important; }
  .hover\:text-amber-600:hover { color: var(--safe-accent) !important; }

  /* ===== BLUE → INK (CTAs) / ACCENT (text) =====
     The Safe palette uses ink for primary buttons and accent-blue only for
     interactive text/hover states. Blue Tailwind buttons become ink. */
  .bg-blue-600 { background-color: var(--safe-ink) !important; }
  .bg-blue-700 { background-color: #27272a !important; }
  .hover\:bg-blue-700:hover { background-color: #27272a !important; }
  .hover\:bg-blue-800:hover { background-color: #18181b !important; }
  .bg-blue-50  { background-color: var(--safe-accent-soft) !important; }
  .bg-blue-100 { background-color: var(--safe-accent-soft) !important; }
  .text-blue-600 { color: var(--safe-accent) !important; }
  .text-blue-700 { color: #1d4ed8 !important; }
  .text-blue-500 { color: var(--safe-accent) !important; }
  .text-blue-800 { color: #1e40af !important; }
  .text-blue-900 { color: var(--safe-ink) !important; }
  .hover\:text-blue-500:hover { color: var(--safe-accent) !important; }
  .hover\:text-blue-600:hover { color: var(--safe-accent) !important; }
  .hover\:text-blue-700:hover { color: #1d4ed8 !important; }
  .hover\:text-blue-800:hover { color: #1e40af !important; }
  .border-blue-200 { border-color: var(--safe-border) !important; }
  .border-blue-500 { border-color: var(--safe-accent) !important; }
  .focus\:ring-blue-500:focus { --tw-ring-color: var(--safe-accent) !important; }
  .focus\:border-blue-500:focus { border-color: var(--safe-accent) !important; }
  /* Blue gradient buttons — kill the gradient, use ink solid */
  [class*="from-blue-500"][class*="to-blue"],
  [class*="from-blue-600"][class*="to-blue"],
  .bg-gradient-to-r.from-blue-600,
  .bg-gradient-to-br.from-blue-600 {
    background-image: none !important;
    background-color: var(--safe-ink) !important;
  }

  /* ===== SECONDARY NEUTRAL GRAYS — unify the page background ===== */
  .bg-gray-50  { background-color: var(--safe-bg) !important; }
  .bg-gray-100 { background-color: var(--safe-bg) !important; }

  /* ===== FORM CONTROL FIELDS ===== */
  input[type="date"],
  input[type="text"]:not([data-keep-style]),
  input[type="email"]:not([data-keep-style]),
  input[type="search"]:not([data-keep-style]),
  select:not([data-keep-style]),
  textarea:not([data-keep-style]) {
    border-radius: 6px;
  }

  /* ===== "Choose files" native upload button — neutralize violet default ===== */
  input[type="file"]::file-selector-button {
    background-color: #fff !important;
    color: var(--safe-ink) !important;
    border: 1px solid var(--safe-border-strong) !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
    margin-right: 12px !important;
    cursor: pointer !important;
    transition: background 0.12s ease;
  }
  input[type="file"]::file-selector-button:hover {
    background-color: #fafafa !important;
  }
  /* Tailwind's file:* classes — override to Safe palette */
  .file\:bg-blue-50::file-selector-button,
  .file\:bg-indigo-50::file-selector-button {
    background-color: #fff !important;
    color: var(--safe-ink) !important;
  }
  .file\:text-indigo-700::file-selector-button {
    color: var(--safe-ink) !important;
  }

  /* ===== YELLOW/AMBER SOFT BGs — softer Safe-neutral ===== */
  .bg-yellow-50 { background-color: var(--safe-warn-soft, #fefce8) !important; }
  .bg-yellow-100 { background-color: var(--safe-warn-soft, #fefce8) !important; }
  .text-yellow-700 { color: var(--safe-muted) !important; }
  .text-yellow-800 { color: var(--safe-ink) !important; }

  /* ===== GREEN SEMANTIC COLOURS — keep success but tame soft bg ===== */
  .bg-green-50 { background-color: var(--safe-success-soft) !important; }
  .bg-green-100 { background-color: var(--safe-success-soft) !important; }
  .text-green-600 { color: var(--safe-success) !important; }
  .text-green-700 { color: var(--safe-success) !important; }
  .text-green-800 { color: var(--safe-success) !important; }
  .bg-green-600 { background-color: var(--safe-ink) !important; }
  .hover\:bg-green-700:hover { background-color: #27272a !important; }

  /* ===== VIOLET / SKY accent soft bgs — demote to neutral ===== */
  .bg-violet-50, .bg-violet-100 { background-color: var(--safe-bg) !important; }
  .bg-sky-50, .bg-sky-100 { background-color: var(--safe-accent-soft) !important; }
  .text-violet-600, .text-violet-700, .text-violet-800, .text-violet-900 { color: var(--safe-ink) !important; }
  .text-sky-600, .text-sky-700 { color: var(--safe-accent) !important; }
  .border-violet-200 { border-color: var(--safe-border) !important; }

  /* ===== TEAL / CYAN / LIME / FUCHSIA — nav mega-menu icons ===== */
  .bg-teal-50, .bg-teal-100, .bg-cyan-50, .bg-cyan-100,
  .bg-lime-50, .bg-lime-100, .bg-fuchsia-50, .bg-fuchsia-100 {
    background-color: var(--safe-bg) !important;
  }
  .bg-teal-500, .bg-teal-600, .bg-cyan-500, .bg-cyan-600,
  .bg-lime-500, .bg-lime-600, .bg-fuchsia-500, .bg-fuchsia-600 {
    background-color: var(--safe-ink) !important;
  }
  .text-teal-500, .text-teal-600, .text-cyan-500, .text-cyan-600,
  .text-lime-500, .text-lime-600, .text-fuchsia-500, .text-fuchsia-600 {
    color: var(--safe-accent) !important;
  }

  /* ===== SLATE — subtle grayscale ===== */
  .bg-slate-50 { background-color: var(--safe-bg) !important; }
  .text-slate-600 { color: var(--safe-muted) !important; }
  .text-slate-800 { color: var(--safe-ink) !important; }

  /* Nav mega-menu gradient hover pills — convert rainbow card bg → neutral card */
  .bg-gradient-to-r[class*="hover\\:from-"],
  .bg-gradient-to-br[class*="hover\\:from-"] {
    background-image: none !important;
    background-color: #fafafa !important;
  }

  /* Solid bold gradient cards (dashboard usage stats, trial banner, etc.)
     Any `bg-gradient-to-{r,br}` whose from/to are -500/-600 tier
     becomes Safe ink. Keep white text inside by not touching text classes. */
  .bg-gradient-to-r[class*="from-"][class*="-500"][class*="to-"][class*="-500"],
  .bg-gradient-to-r[class*="from-"][class*="-500"][class*="to-"][class*="-600"],
  .bg-gradient-to-r[class*="from-"][class*="-600"][class*="to-"][class*="-600"],
  .bg-gradient-to-r[class*="from-"][class*="-600"][class*="to-"][class*="-700"],
  .bg-gradient-to-br[class*="from-"][class*="-500"][class*="to-"][class*="-500"],
  .bg-gradient-to-br[class*="from-"][class*="-500"][class*="to-"][class*="-600"],
  .bg-gradient-to-br[class*="from-"][class*="-600"][class*="to-"][class*="-600"],
  .bg-gradient-to-br[class*="from-"][class*="-600"][class*="to-"][class*="-700"] {
    background-image: none !important;
    background-color: var(--safe-ink) !important;
  }
  /* Matching bg-opacity white boxes inside those gradient cards stay readable */
  .bg-gradient-to-r .bg-white.bg-opacity-20,
  .bg-gradient-to-br .bg-white.bg-opacity-20 {
    background-color: rgba(255,255,255,0.15) !important;
  }

  /* ===== ROUND CORNERS — unify tight 6–10px radii ===== */
  .rounded-xl { border-radius: 10px !important; }
  .rounded-2xl { border-radius: 12px !important; }

  /* ================================================================
     SAFE COMPONENT CLASSES — available site-wide (no .fsm-show scope).
     Pages opt in by using these classes instead of Tailwind color utils.
     ================================================================ */

  /* Mono-label utility — global */
  .mono-label {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--safe-muted);
    font-weight: 500;
  }

  /* Safe tag capsules — global */
  .safe-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 4px;
    font-weight: 500;
    border: 1px solid transparent;
  }
  .safe-tag-success { background: var(--safe-success-soft); color: var(--safe-success); }
  .safe-tag-accent  { background: var(--safe-accent-soft);  color: var(--safe-accent);  }
  .safe-tag-warn    { background: #fefce8;                  color: var(--safe-warn);    }
  .safe-tag-danger  { background: #fef2f2;                  color: var(--safe-danger);  }
  .safe-tag-neutral { background: #f4f4f5; color: #52525b; border-color: var(--safe-border); }

  /* Safe buttons — global */
  .safe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.2;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  }
  .safe-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .safe-btn-primary { background: var(--safe-ink); color: #fff; }
  .safe-btn-primary:hover:not(:disabled) { background: #27272a; color: #fff; }
  .safe-btn-secondary { background: #fff; color: var(--safe-ink); border-color: var(--safe-border); }
  .safe-btn-secondary:hover:not(:disabled) { background: #fafafa; }
  .safe-btn-accent { background: var(--safe-accent); color: #fff; }
  .safe-btn-accent:hover:not(:disabled) { background: #1d4ed8; color: #fff; }

  .safe-card {
    background: var(--safe-card);
    border: 1px solid var(--safe-border);
    border-radius: 10px;
  }

  .safe-card-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--safe-border);
  }

  /* Seatmap card wrapper — card + header strip + scrollable canvas */
  .safe-seatmap-card {
    background: var(--safe-card);
    border: 1px solid var(--safe-border);
    border-radius: 12px;
  }
  .safe-seatmap-header {
    padding: 10px 16px;
    background: #fafafa;
    border-bottom: 1px solid var(--safe-border);
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .safe-seatmap-header-label {
    font-size: 11px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--safe-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
  }
  .safe-seatmap-header-sep { margin: 0 4px; color: var(--safe-border-strong); }
  .safe-seatmap-header-tools { display: flex; gap: 4px; align-items: center; }
  .safe-seatmap-tool {
    width: 26px; height: 26px;
    border: 1px solid var(--safe-border);
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--safe-muted);
    padding: 0;
    font-family: inherit;
    line-height: 1;
    transition: all 0.12s ease;
  }
  .safe-seatmap-tool:hover {
    color: var(--safe-ink);
    border-color: var(--safe-border-strong);
  }
  .safe-seatmap-tool-readout {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--safe-muted);
    padding: 0 6px;
    min-width: 38px;
    text-align: center;
  }
  .safe-seatmap-tool-divider {
    width: 1px; height: 14px;
    background: var(--safe-border);
    margin: 0 4px;
  }
  .safe-seatmap-canvas { padding: 0; background: var(--safe-card); }

  /* Top picks / right-rail card */
  .safe-picks-card {
    background: var(--safe-card);
    border: 1px solid var(--safe-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
  }

  /* Seatmap seat-rendering (non-scoped so the generic /seatmaps/:id
     page can opt in by adding `safe-seat` class to seat divs). */
  .safe-seat {
    box-shadow: none !important;
    border-radius: 4px !important;
  }
  .safe-seat:hover {
    transform: none !important;
    box-shadow: 0 0 0 2px rgba(10,10,10,0.12) !important;
  }
  .safe-seat .safe-seat-label {
    font-size: 8px;
    letter-spacing: -0.02em;
    line-height: 1;
    text-shadow: none;
    font-weight: 500;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  @media (min-width: 640px) { .safe-seat .safe-seat-label { font-size: 10px; } }
  @media (min-width: 1024px) { .safe-seat .safe-seat-label { font-size: 11px; } }

  /* ================================================================
     Seatmap-configuration cabin labels (Main Deck / First Class / etc.)
     appear on flight-seatmaps, seatmaps, and aircraft show pages.
     Tighten globally so every page treats them as Safe mono labels.
     ================================================================ */
  /* Match both the flight-seatmap wrapper (#seatmap-configuration) and
     the bare partial render on aircraft/seatmap pages (grid-container ancestor). */
  main #seatmap-configuration h2,
  main .seatmap-container + h2,
  main [data-seatmap-zoom-target="grid"] h2 {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--safe-muted) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
  }
  main #seatmap-configuration h3,
  main [data-seatmap-zoom-target="grid"] h3 {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--safe-muted) !important;
  }
  main #seatmap-configuration h3 span,
  main [data-seatmap-zoom-target="grid"] h3 span {
    font-size: 11px !important;
    letter-spacing: 0.02em !important;
    color: var(--safe-muted) !important;
  }

  /* ================================================================
     NAV MEGA MENU — unify rainbow icon chips to Safe neutral treatment.
     Every nav item uses a `.flex.h-9.w-9 rounded-lg bg-{color}-100 text-{color}-600
     group-hover:bg-{color}-600 group-hover:text-white` icon chip.
     Rather than edit every entry in the 629-line mega-menu partial,
     override the pattern here so every chip reads as Safe neutral.
     ================================================================ */
  nav .flex.h-9.w-9.rounded-lg[class*="bg-"][class*="-100"],
  nav .h-8.w-8.rounded-lg[class*="bg-"][class*="-100"],
  nav .h-10.w-10.rounded-lg[class*="bg-"][class*="-100"] {
    background-color: #f4f4f5 !important;
    color: var(--safe-muted) !important;
  }
  nav .group:hover .flex.h-9.w-9.rounded-lg,
  nav .group:hover .h-8.w-8.rounded-lg,
  nav .group:hover .h-10.w-10.rounded-lg {
    background-color: var(--safe-ink) !important;
    color: #fff !important;
  }
  /* Nav item hover backgrounds: hover:bg-{color}-50 / -100 → neutral */
  nav .group[class*="hover\\:bg-"]:hover,
  nav a[class*="hover\\:bg-indigo-50"]:hover,
  nav a[class*="hover\\:bg-blue-50"]:hover,
  nav a[class*="hover\\:bg-purple-50"]:hover,
  nav a[class*="hover\\:bg-pink-50"]:hover,
  nav a[class*="hover\\:bg-emerald-50"]:hover,
  nav a[class*="hover\\:bg-teal-50"]:hover,
  nav a[class*="hover\\:bg-amber-50"]:hover,
  nav a[class*="hover\\:bg-orange-50"]:hover,
  nav a[class*="hover\\:bg-green-50"]:hover,
  nav a[class*="hover\\:bg-yellow-50"]:hover,
  nav a[class*="hover\\:bg-fuchsia-50"]:hover {
    background-color: #fafafa !important;
  }
  /* Nav item text hover: group-hover:text-{color}-600 → Safe accent */
  nav .group:hover .group-hover\\:text-indigo-600,
  nav .group:hover .group-hover\\:text-blue-600,
  nav .group:hover .group-hover\\:text-purple-600,
  nav .group:hover .group-hover\\:text-pink-600,
  nav .group:hover .group-hover\\:text-emerald-600,
  nav .group:hover .group-hover\\:text-teal-600,
  nav .group:hover .group-hover\\:text-amber-600,
  nav .group:hover .group-hover\\:text-orange-600,
  nav .group:hover .group-hover\\:text-green-600,
  nav .group:hover .group-hover\\:text-yellow-600,
  nav .group:hover .group-hover\\:text-fuchsia-600 {
    color: var(--safe-accent) !important;
  }
  /* Section eyebrow icons (before the section title) — map to muted */
  nav svg.text-indigo-600,
  nav svg.text-blue-600,
  nav svg.text-purple-600,
  nav svg.text-pink-600,
  nav svg.text-emerald-600,
  nav svg.text-teal-600,
  nav svg.text-amber-600,
  nav svg.text-orange-600,
  nav svg.text-green-600,
  nav svg.text-yellow-600 {
    color: var(--safe-muted) !important;
  }
  /* Mega-menu panel — lighter ring, smaller radius */
  nav [data-dropdown-target="menu"] .bg-white.rounded-xl.shadow-2xl {
    box-shadow: 0 12px 40px -12px rgba(0,0,0,0.12), 0 0 0 1px var(--safe-border) !important;
    --tw-ring-color: transparent !important;
  }

  /* ===== ROUTE MAPS pages (from_airport / to_airport / from_country /
     to_country / city_pair / airline) shared hero normalization.
     Each page declares its own inline .route-map-hero linear-gradient
     with page-scoped dark slate. Beat them all with one global rule. ===== */
  .route-map-hero {
    background: var(--safe-card) !important;
    background-image: none !important;
    border: 1px solid var(--safe-border) !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
  }
  .route-map-hero::before { display: none !important; }
  .route-map-hero .text-slate-300,
  .route-map-hero .text-slate-400 { color: var(--safe-muted) !important; }
  .route-map-hero .text-white,
  .route-map-hero .font-medium.text-white { color: var(--safe-ink) !important; }
  .route-map-hero a.hover\\:text-white:hover { color: var(--safe-ink) !important; }
  .route-map-hero .bg-slate-800\\/50 {
    background-color: #fafafa !important;
    border: 1px solid var(--safe-border) !important;
  }
  .route-map-hero .bg-white\\/20 {
    background-color: var(--safe-ink) !important;
    color: #fff !important;
  }
  .route-map-hero .w-px.h-10.bg-slate-600,
  .route-map-hero .bg-slate-600,
  .route-map-hero .bg-slate-700 { background-color: var(--safe-border) !important; }
  .route-map-hero .bg-white.rounded-2xl.shadow-xl,
  .route-map-hero .bg-white.rounded-xl.shadow-lg {
    background: #fff !important;
    border: 1px solid var(--safe-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  /* Glassmorphic stat-card across route_maps views — flatten to Safe */
  .stat-card {
    background: var(--safe-card) !important;
    border: 1px solid var(--safe-border) !important;
    backdrop-filter: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }
  .stat-card:hover {
    background: #fafafa !important;
    border-color: var(--safe-border-strong) !important;
    transform: none !important;
  }

  /* Dark leaflet canvas background — light panel to match Safe */
  .leaflet-container { background: #fafafa !important; }

  /* Route-map page hover card states — swap transform-lift for border shift */
  .airline-card:hover,
  .flight-card:hover,
  .resource-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--safe-border-strong) !important;
    background: #fafafa !important;
  }
  .destination-item:hover {
    background: #fafafa !important;
    padding-left: initial !important;
  }
  .country-row:hover,
  .airport-row:hover,
  .faq-item:hover { background-color: #fafafa !important; }

  /* Feature/Resource gradient icon tiles on route maps pages */
  .bg-gradient-to-br[class*="shadow-indigo-500"],
  .bg-gradient-to-br[class*="shadow-blue-500"],
  .bg-gradient-to-br[class*="shadow-purple-500"],
  .bg-gradient-to-br[class*="shadow-green-500"] {
    box-shadow: none !important;
  }

  /* ===== FOOTER — tighten to Safe typography on the ink background =====
     Footer is already on #0a0a0a ink; normalize typography to match
     Safe (mono eyebrows, softer white muted link color). */
  footer[aria-labelledby="footer-heading"] h3 {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.55) !important;
  }
  footer[aria-labelledby="footer-heading"] .lg\:block h3 {
    font-size: 10px !important;
  }
  footer[aria-labelledby="footer-heading"] ul a,
  footer[aria-labelledby="footer-heading"] ul .text-sm {
    font-size: 12.5px !important;
    color: rgba(255,255,255,0.6) !important;
    transition: color 0.12s ease !important;
  }
  footer[aria-labelledby="footer-heading"] ul a:hover {
    color: #fff !important;
  }
  footer[aria-labelledby="footer-heading"] p.text-sm,
  footer[aria-labelledby="footer-heading"] p.text-xs {
    color: rgba(255,255,255,0.55) !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
  }
  footer[aria-labelledby="footer-heading"] p.text-xs {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: rgba(255,255,255,0.5) !important;
  }
  footer[aria-labelledby="footer-heading"] .border-t.border-gray-700 {
    border-top-color: rgba(255,255,255,0.1) !important;
  }
  /* Newsletter heading — promote to a proper section headline */
  footer[aria-labelledby="footer-heading"] .mt-8 h3 {
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: -0.005em !important;
    color: #fff !important;
  }
  footer[aria-labelledby="footer-heading"] summary svg {
    color: rgba(255,255,255,0.45) !important;
    width: 14px !important;
    height: 14px !important;
  }

  /* ===== ADMIN / plain `bg-white shadow rounded-lg` stat cards =====
     Normalize the common admin/dashboard card pattern that doesn't use
     sized shadow utilities (shadow-sm/md/lg/xl). Plain .shadow leaks
     through the generic card rules below. */
  main .bg-white.shadow.rounded-lg,
  main .bg-white.shadow.overflow-hidden.rounded-lg {
    box-shadow: none !important;
    border: 1px solid var(--safe-border) !important;
    border-radius: 10px !important;
  }
  /* Stat card muted labels (dt.text-gray-500) */
  main dl dt.text-gray-500 {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--safe-muted) !important;
  }
  main dl dd.text-lg.font-medium.text-gray-900,
  main dl dd.text-2xl.font-medium.text-gray-900 {
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    color: var(--safe-ink) !important;
  }
  main svg.text-gray-400 {
    color: var(--safe-muted) !important;
  }

  /* ===== Filter chip active state (toggled by seat_filter_controller) ===== */
  button[data-seat-filter-target="chip"].safe-chip-active {
    color: var(--safe-accent) !important;
    background: var(--safe-accent-soft) !important;
    border-color: var(--safe-accent) !important;
  }

  /* ===== FAQ Section (.safe-faq-section) — tighter rows ===== */
  .safe-faq-section .space-y-4 > * + *,
  .safe-faq-section .space-y-6 > * + * {
    margin-top: 8px !important;
  }
  .safe-faq-section .border.border-gray-200.rounded-lg {
    border-color: var(--safe-border) !important;
    border-radius: 8px !important;
  }
  .safe-faq-section button {
    padding: 12px 16px !important;
    font-size: 13px !important;
  }
  .safe-faq-section button span {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--safe-ink) !important;
  }
  .safe-faq-section button svg {
    width: 14px !important;
    height: 14px !important;
    color: var(--safe-muted) !important;
  }
  .safe-faq-section button:hover { background-color: #fafafa !important; }
  .safe-faq-section .hidden.px-4,
  .safe-faq-section .hidden.px-4.sm\:px-6 {
    padding: 0 16px 12px !important;
  }
  .safe-faq-section .hidden p {
    font-size: 13px !important;
    color: var(--safe-muted) !important;
    line-height: 1.55 !important;
  }

  /* ===== LAYOUT SHELL ===== */
  html.h-full { background: var(--safe-bg) !important; }

  /* ===== SHADOWS — lighter ===== */
  .shadow-xl { box-shadow: 0 4px 24px -8px rgba(0,0,0,0.08) !important; }
  .shadow-lg { box-shadow: 0 4px 16px -4px rgba(0,0,0,0.06) !important; }
  .shadow-2xl { box-shadow: 0 8px 32px -8px rgba(0,0,0,0.12) !important; }

  /* ===== CARDS — normalize `bg-white + shadow-* + rounded-*` patterns
     so every page's "card" reads the same: white background, thin border,
     no shadow. This is the single biggest lever for cross-page consistency.
     Scoped to main page content via body > main so nav/footer keep intent. */
  main .bg-white.shadow-sm,
  main .bg-white.shadow,
  main .bg-white.shadow-md {
    box-shadow: none !important;
    border: 1px solid var(--safe-border) !important;
  }
  main .bg-white.shadow-lg,
  main .bg-white.shadow-xl {
    box-shadow: 0 2px 8px -2px rgba(0,0,0,0.04) !important;
    border: 1px solid var(--safe-border) !important;
  }
  main .bg-white.rounded-md,
  main .bg-white.rounded-lg { border-radius: 10px !important; }
  main .bg-white.rounded-xl { border-radius: 12px !important; }

  /* Border-b on section headers — soften to Safe border */
  main .border-b.border-gray-200 { border-bottom-color: var(--safe-border) !important; }
  main .border-t.border-gray-200 { border-top-color: var(--safe-border) !important; }
  main .border.border-gray-100,
  main .border.border-gray-200,
  main .border.border-gray-300 { border-color: var(--safe-border) !important; }

  /* ===== FONTS ===== */
  .font-display {
    font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
    font-weight: 600;
  }
  .font-body {
    font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
  }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */