/* /css/theme.css - OPTIMIZED v2 */

/* =========================
   THEME: Purple → Gold
   ========================= */
:root{
  --purple:#6A00FF; --orchid:#A855F7; --gold:#FFD700; --gold-classic:#D4AF37;
  --bg:#EFE7FF; --card:#FFFFFF; --text:#191A1F; --muted:#6B7280; --br:#E5E7EB;
  --btn:#1F2937; --btn-text:#FFFFFF;
  --r-pill:999px; --r-card:22px;
  --shadow:0 16px 32px rgba(0,0,0,.10);
  --shadow-soft:0 10px 20px rgba(0,0,0,.08);
}

/* Critical above-the-fold styles */
.topbar, .brand, .hero h1, .container {
  opacity: 0;
  animation: fadeIn 0.3s ease-in-out forwards;
}
@keyframes fadeIn {
  to { opacity: 1; }
}

/* Global */
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{text-decoration:none;color:inherit}

/* Layout helpers */
.container{max-width:1100px;margin:0 auto;padding:18px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gap{gap:12px}
.spread{justify-content:space-between}
.small{font-size:12px}
.muted{color:var(--muted)}

/* Topbar gradient */
.topbar{
  background:linear-gradient(90deg,var(--purple) 0%,var(--orchid) 46%,var(--gold) 100%);
  padding:16px 0; position:sticky; top:0; z-index:10; box-shadow:0 2px 0 rgba(0,0,0,.04);
}
.brand{color:#fff;font-weight:700}

/* Pills (header buttons) */
.pill,.pill:visited{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.30);
  backdrop-filter:saturate(140%) blur(2px)
}
.pill:hover{background:rgba(255,255,255,.28)}
.pill.ghost{background:rgba(255,255,255,.08)}
.pill.solid{background:#fff; color:#1f2937; border:1px solid var(--br)}
.pill.gradient{
  background:linear-gradient(135deg,var(--purple) 0%, var(--gold) 100%);
  color:#fff; border:none; box-shadow:0 8px 18px rgba(106,0,255,.25), 0 4px 10px rgba(212,175,55,.25)
}
.badge{display:inline-block;padding:8px 12px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.28);font-size:12px}

/* Flag pills */
.pill.flag{background:#fff;color:#1f2937;border:1px solid var(--br)}
.pill.flag .emoji{font-size:14px;line-height:1}

/* Hero */
.hero{
  margin-top:22px; background:var(--card); border:1px solid var(--br);
  border-radius:var(--r-card); padding:28px; box-shadow:var(--shadow)
}
.hero h1{margin:0 0 10px; font-size:42px}

/* Cards & buttons */
.card{background:var(--card);border:1px solid var(--br);border-radius:var(--r-card);box-shadow:var(--shadow-soft)}
.btn{display:inline-block;padding:12px 18px;border-radius:var(--r-pill);background:var(--btn);color:var(--btn-text);border:1px solid var(--btn)}
.btn:hover{filter:brightness(1.05)}
.btn.gradient{background:linear-gradient(135deg,var(--purple) 0%, var(--gold) 100%);border:none;color:#fff;
  box-shadow:0 8px 18px rgba(106,0,255,.25), 0 4px 10px rgba(212,175,55,.25)}
.btn.gradient:hover{filter:brightness(1.06)}
.btn.ghost{background:#fff;color:var(--text);border:1px solid var(--br)}
/* New partner gradients */
.btn.grad-kiwi{
  background:linear-gradient(135deg,#16a34a 0%, var(--gold) 100%); /* green→gold */
  border:none;color:#fff; box-shadow:0 8px 18px rgba(22,163,74,.25), 0 4px 10px rgba(212,175,55,.25)
}
.btn.grad-avia{
  background:linear-gradient(135deg,#2563eb 0%, var(--gold) 100%); /* blue→gold */
  border:none;color:#fff; box-shadow:0 8px 18px rgba(37,99,235,.25), 0 4px 10px rgba(212,175,55,.25)
}

.foot{padding:26px 18px 36px}

/* Airline chip */
.chip{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:999px;
  background:#EEF2FF;border:1px solid #E0E7FF;color:#3730A3;font-weight:700
}

/* Results grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}

/* Optional: perceptual gradient */
@supports (color: oklch(0 0 0)){
  .topbar{
    background:linear-gradient(in oklab 90deg,
      oklch(55% 0.2 300) 0%,
      oklch(72% 0.12 320) 46%,
      oklch(84% 0.14 95) 100%);
  }
}

/* EXTRA: Pill form controls */
.field input, .field select {
  width:100%; padding:12px 16px; border:1px solid var(--br);
  border-radius:var(--r-pill); background:#fff; outline:none;
  box-shadow:0 2px 0 rgba(0,0,0,.03) inset;
}
.field input:focus, .field select:focus {
  border-color:#C7B5FF; box-shadow:0 0 0 3px rgba(106,0,255,.12);
}
.form-row{display:flex;gap:12px;flex-wrap:wrap}
.form-row > .field{min-width:220px;flex:1}
.toggle{
  display:inline-block; padding:10px 16px; border-radius:var(--r-pill);
  background:#fff; border:1px solid var(--br); cursor:pointer;
}
.toggle[aria-expanded="true"]{ background:rgba(255,255,255,.7); border-color:#d8d8d8 }
#advanced{display:none}
#advanced.open{display:block}
.lang-switch .pill{padding:8px 12px}

/* Flag image inside language pills */
.flag-img{
  width:18px; height:12px; border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
  display:inline-block; object-fit:cover;
}
/* utilities for spacing (avoid inline styles) */
.ml-8 { margin-left: 8px; }
.mb-8 { margin-bottom: 8px; }

/* === Cookie Banner (CSP-safe, no inline styles) === */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: rgba(20, 20, 30, 0.95);
  color: #fff;
  backdrop-filter: saturate(120%) blur(4px);
  box-shadow: 0 -6px 20px rgba(0,0,0,.25);
  padding: 12px 16px;
}
.cookie-content {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cookie-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.35;
}
.cookie-link { color: #ffd56a; text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; }

.cookie-actions .btn.accept {
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  background: linear-gradient(135deg, #7c3aed, #f59e0b);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.cookie-actions .btn.accept:hover { opacity: .95; }

/* Enhanced focus states for accessibility */
.btn:focus-visible, 
.pill:focus-visible, 
.chip:focus-visible,
.field input:focus-visible,
.field select:focus-visible {
  outline: 2px solid #6A00FF;
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .muted { color: #000; opacity: 0.9; }
  .pill.ghost { border-color: #000; }
  .card { border-color: #000; }
  .btn.ghost { border-color: #000; }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .topbar, .brand, .hero h1, .container {
    animation: none;
    opacity: 1;
  }
}

/* Print styles */
@media print {
  .topbar { background: #000 !important; color: #000 !important; }
  .btn, .pill { border: 1px solid #000 !important; background: #fff !important; color: #000 !important; }
  .card { box-shadow: none !important; border: 1px solid #000 !important; }
  .cookie-banner { display: none !important; }
}

@media (max-width: 560px) {
  .cookie-content { flex-direction: column; align-items: stretch; gap: 8px; }
  .cookie-actions { justify-content: flex-end; }
  
  /* Mobile optimizations */
  .container { padding: 12px; }
  .hero { padding: 20px; margin-top: 16px; }
  .hero h1 { font-size: 32px; }
  .row { gap: 8px; }
  .pill { padding: 8px 12px; }
}
/* =========================
   ENHANCED SITE-WIDE HOVER EFFECTS
   Add this to the end of your theme.css
   ========================= */

/* Enhanced button hover effects throughout the site */
.btn, .pill, .chip, .card, .hero {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Button hover effects */
.btn:hover, .pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Card hover effects */
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

/* Chip hover effects */
.chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Form element enhancements */
.field input:focus, .field select:focus {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(106,0,255,0.15);
}

/* Navigation pill enhancements */
.pill.gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(106,0,255,0.25), 0 6px 15px rgba(212,175,55,0.25);
}

/* Hero section enhancement */
.hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .btn, .pill, .chip, .card, .hero,
  .field input, .field select {
    transition: none !important;
    transform: none !important;
  }
}

/* CSP-safe flag guard */
html:not(.i18n-ready) .flag{ visibility:hidden }