/**
 * SkyKaro — components.css
 * Base styles for the reusable homepage / landing-page components.
 *
 * These classes were referenced throughout the markup but had no rules
 * anywhere in the stylesheets — the page templates only defined the grid
 * containers around them. Everything here uses design-system.css tokens
 * so light and dark themes both work without per-component overrides.
 */

/* ══════════════════════════════════════════════════════════
   HERO
   The search card sits ON the hero image (see index.php),
   matching the pattern used across the SkyTeam family sites.
═══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: min(100vh, 900px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  inset: -2%;                       /* bleed so the zoom never shows an edge */
  /* Plain url() first as the fallback; image-set() wins wherever it is
     understood and hands WebP to browsers that accept it (148KB vs 198KB). */
  background-image: url('/img/hero-beach.jpg');
  background-image: image-set(url('/img/hero-beach.webp') type('image/webp'),
                              url('/img/hero-beach.jpg')  type('image/jpeg'));
  background-size: cover;
  background-position: center 35%;
  will-change: transform;
  animation: heroZoom 20s ease-in-out infinite alternate;
  z-index: -3;
}

@keyframes heroZoom {
  from { transform: scale(1.00); }
  to   { transform: scale(1.07); }
}

/* Darken toward the left so the headline stays readable on any photo */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(105deg,
      rgba(13,16,34,0.88) 0%,
      rgba(19,23,50,0.72) 42%,
      rgba(27,31,59,0.42) 72%,
      rgba(17,156,135,0.14) 100%);
}

/* Fade the bottom of the hero into the page background */
.hero-fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 160px;
  z-index: -1;
  background: linear-gradient(to top, var(--sk-bg) 0%, transparent 100%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 140px 24px 88px;
}

.hero-copy { max-width: 680px; margin-bottom: 36px; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(17,156,135,0.16);
  border: 1px solid rgba(17,156,135,0.38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 8px 18px;
  border-radius: var(--sk-r-full);
  font-family: var(--font-heading);
  font-weight: 700; font-size: 13px;
  color: #fff;
  margin-bottom: 24px;
}
.hero-eyebrow .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sk-teal); flex-shrink: 0;
  animation: pulseDot 2s infinite;
}

.hero-title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(2.5rem, 5.2vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 20px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.28);
}
.hero-title .teal-line {
  background: linear-gradient(90deg, var(--sk-teal), var(--sk-teal-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: rgba(255,255,255,0.86);
  max-width: 540px;
  line-height: 1.65;
  margin-bottom: 26px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.3);
}

.hero-trust-chips { display: flex; gap: 9px; flex-wrap: wrap; }
.hero-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.13);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.22);
  padding: 7px 15px;
  border-radius: var(--sk-r-full);
  font-size: 13px; font-weight: 600; color: #fff;
  white-space: nowrap;
}

/* The search card — lives inside the hero */
.hero-search { max-width: 1080px; }

/* Floating particles */
.hero-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(17,156,135,0.55);
  animation: floatUp linear infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes floatUp {
  0%   { transform: translateY(0) scale(1);     opacity: 0.7; }
  100% { transform: translateY(-100vh) scale(0.3); opacity: 0; }
}

/* Scroll cue */
.hero-scroll-cue {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  animation: float 2.6s ease-in-out infinite;
  transition: background var(--sk-t-fast), border-color var(--sk-t-fast);
}
.hero-scroll-cue:hover { background: rgba(255,255,255,0.22); border-color: var(--sk-teal); }

@media (max-width: 900px) {
  .hero { min-height: auto; }
  .hero-inner { padding: 118px 20px 64px; }
  .hero-copy { margin-bottom: 28px; }
  .hero-scroll-cue { display: none; }
}
@media (max-width: 600px) {
  .hero-inner { padding: 104px 16px 52px; }
  .hero-sub { margin-bottom: 20px; }
  .hero-chip { font-size: 12px; padding: 6px 12px; }
}

/* Respect reduced-motion for all the ambient animation */
@media (prefers-reduced-motion: reduce) {
  .hero-bg, .hero-particle, .hero-scroll-cue, .hero-eyebrow .live-dot { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   TRUST BAR
═══════════════════════════════════════════════════════════ */
.trust-bar {
  background: var(--sk-card);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-r-xl);
  padding: 18px 32px;
  max-width: 1080px;
  margin: -34px auto 0;
  position: relative;
  z-index: 5;
  box-shadow: var(--sk-shadow-md);
}

.trust-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--sk-text-secondary);
  white-space: nowrap;
}

.trust-icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--sk-teal-muted);
  border: 1px solid rgba(17,156,135,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

/* The vertical rules between items are decorative — hide them when
   the row wraps, otherwise they end up stranded on their own line. */
.trust-divider {
  width: 1px; height: 30px;
  background: var(--sk-border);
  flex-shrink: 0;
}

@media (max-width: 1000px) {
  .trust-bar { padding: 18px 20px; }
  .trust-row { justify-content: center; gap: 14px 24px; }
  .trust-divider { display: none; }
}
@media (max-width: 560px) {
  .trust-bar { border-radius: var(--sk-r-lg); }
  .trust-item { font-size: 12.5px; gap: 7px; }
  .trust-icon { width: 26px; height: 26px; font-size: 13px; border-radius: 8px; }
}

/* ══════════════════════════════════════════════════════════
   DESTINATION CARDS
═══════════════════════════════════════════════════════════ */
.dest-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 232px;
}
/* First card is the hero tile — twice as tall */
.dest-grid .dest-card:first-child { grid-row: span 2; }

.dest-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--sk-r-xl);
  background: var(--sk-bg-subtle);
  box-shadow: var(--sk-shadow-card);
  transition: transform var(--sk-t-base), box-shadow var(--sk-t-base);
  isolation: isolate;
}
.dest-card:hover { transform: translateY(-5px); box-shadow: var(--sk-shadow-card-hover); }
.dest-card:focus-visible { outline: 3px solid var(--sk-teal); outline-offset: 3px; }

.dest-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--sk-t-slow);
}
.dest-card:hover img { transform: scale(1.07); }

.dest-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(13,16,34,0.90) 0%,
    rgba(13,16,34,0.45) 42%,
    rgba(13,16,34,0.05) 75%,
    transparent 100%);
  transition: opacity var(--sk-t-base);
}
.dest-card:hover .dest-overlay { opacity: 0.9; }

.dest-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  z-index: 1;
}

.dest-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
  color: #fff;
}
.dest-country {
  font-size: 13px;
  color: rgba(255,255,255,0.72);
  margin-top: 2px;
}
.dest-price {
  flex-shrink: 0;
  background: var(--sk-teal);
  color: var(--sk-primary);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: var(--sk-r-full);
  box-shadow: 0 4px 14px rgba(16,20,42,0.12);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .dest-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .dest-grid .dest-card:first-child { grid-row: span 1; }
  .dest-name { font-size: 18px; }
}
@media (max-width: 560px) {
  .dest-grid { grid-template-columns: 1fr; grid-auto-rows: 190px; gap: 14px; }
}

/* ══════════════════════════════════════════════════════════
   STATS STRIP
═══════════════════════════════════════════════════════════ */
.stat-card {
  text-align: center;
  padding: 8px 20px;
}
.stat-number {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1.05;
  color: var(--sk-primary);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.stat-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--sk-text-muted);
}

@media (max-width: 700px) {
  .stat-card { padding: 8px 6px; }
  .stat-label { font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════
   HOW-IT-WORKS STEPS
═══════════════════════════════════════════════════════════ */
.step-card {
  position: relative;
  background: var(--sk-card);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-r-xl);
  padding: 34px 26px 30px;
  text-align: center;
  box-shadow: var(--sk-shadow-card);
  transition: transform var(--sk-t-base), box-shadow var(--sk-t-base), border-color var(--sk-t-base);
}
.step-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sk-shadow-card-hover);
  border-color: rgba(17,156,135,0.28);
}

.step-number {
  position: absolute;
  top: -17px; left: 50%;
  transform: translateX(-50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sk-teal), var(--sk-teal-dark));
  color: var(--sk-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: 900; font-size: 15px;
  box-shadow: var(--sk-teal-glow);
  border: 3px solid var(--sk-bg-white);
}

.step-icon {
  width: 62px; height: 62px;
  margin: 12px auto 18px;
  border-radius: var(--sk-r-lg);
  background: var(--sk-teal-muted);
  border: 1.5px solid rgba(17,156,135,0.2);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--sk-t-spring), background var(--sk-t-base);
}
.step-card:hover .step-icon { transform: rotate(-6deg) scale(1.08); background: rgba(17,156,135,0.2); }

/* Connector line between steps on desktop */
.step-connector {
  position: absolute;
  top: 50%; right: -13px;
  width: 26px; height: 2px;
  background: linear-gradient(90deg, var(--sk-teal), transparent);
  z-index: 1;
}
@media (max-width: 900px) { .step-connector { display: none; } }

/* ══════════════════════════════════════════════════════════
   REVIEW CARDS
═══════════════════════════════════════════════════════════ */
.review-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .review-grid { grid-template-columns: 1fr; } }

.review-card {
  position: relative;
  background: var(--sk-card);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-r-xl);
  padding: 28px 26px 24px;
  box-shadow: var(--sk-shadow-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--sk-t-base), box-shadow var(--sk-t-base);
}
.review-card:hover { transform: translateY(-4px); box-shadow: var(--sk-shadow-card-hover); }

/* Decorative quote mark */
.review-card::before {
  content: '\201C';
  position: absolute;
  top: 8px; right: 22px;
  font-family: Georgia, serif;
  font-size: 66px;
  line-height: 1;
  color: var(--sk-teal);
  opacity: 0.14;
  pointer-events: none;
}

.review-stars {
  color: #FFC107;
  font-size: 16px;
  letter-spacing: 2px;
}

.review-text {
  font-size: 15px;
  line-height: 1.72;
  color: var(--sk-text-secondary);
  flex: 1;
}

.review-author {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14.5px;
  color: var(--sk-text);
  padding-top: 12px;
  border-top: 1px solid var(--sk-border-light);
}

.review-date {
  font-size: 12.5px;
  color: var(--sk-text-muted);
  margin-top: -8px;
}

/* ══════════════════════════════════════════════════════════
   NEWSLETTER
═══════════════════════════════════════════════════════════ */
.newsletter-form {
  display: flex;
  gap: 10px;
  max-width: 480px;
  width: 100%;
  flex-wrap: wrap;
}

.newsletter-input {
  flex: 1;
  min-width: 220px;
  height: 50px;
  padding: 0 22px;
  border-radius: var(--sk-r-full);
  border: 1.5px solid var(--sk-border);
  background: var(--sk-bg-white);
  color: var(--sk-text);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: border-color var(--sk-t-fast), box-shadow var(--sk-t-fast);
}
.newsletter-input::placeholder { color: var(--sk-text-muted); }
.newsletter-input:focus {
  border-color: var(--sk-teal);
  box-shadow: 0 0 0 3px rgba(17,156,135,0.14);
}
[data-theme="dark"] .newsletter-input { background: rgba(255,255,255,0.05); }

.newsletter-form .btn { height: 50px; }

@media (max-width: 520px) {
  .newsletter-form { flex-direction: column; }
  .newsletter-form .btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   SEARCH FORM — passenger field wrapper
   (referenced by include/v2-search-form.php, previously unstyled)
═══════════════════════════════════════════════════════════ */
.sf-pax-field { min-width: 0; }
@media (max-width: 900px) {
  .sf-pax-field { grid-column: 1 / -1; }
}

/* ══════════════════════════════════════════════════════════
   WHY-US CARDS  (moved out of index.php inline styles)
═══════════════════════════════════════════════════════════ */
.why-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .why-grid { grid-template-columns: 1fr; } }

.why-card {
  position: relative;
  overflow: hidden;
  background: var(--sk-card);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-r-xl);
  padding: 34px 26px;
  box-shadow: var(--sk-shadow-card);
  transition: transform var(--sk-t-base), box-shadow var(--sk-t-base);
}
.why-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sk-teal), var(--sk-purple));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--sk-t-base);
}
.why-card:hover { transform: translateY(-5px); box-shadow: var(--sk-shadow-card-hover); }
.why-card:hover::after { transform: scaleX(1); }

.why-icon {
  width: 58px; height: 58px;
  border-radius: var(--sk-r-lg);
  background: var(--sk-teal-muted);
  border: 1.5px solid rgba(17,156,135,0.2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  transition: transform var(--sk-t-spring), background var(--sk-t-base);
}
.why-card:hover .why-icon { background: var(--sk-teal); transform: rotate(6deg) scale(1.08); }
.why-icon .material-symbols-outlined { color: var(--sk-teal-dark); font-size: 27px; transition: color var(--sk-t-base); }
.why-card:hover .why-icon .material-symbols-outlined { color: var(--sk-primary); }

.why-title {
  font-family: var(--font-heading);
  font-weight: 800; font-size: 18px;
  margin-bottom: 9px;
}
.why-text {
  font-size: 14.5px;
  color: var(--sk-text-secondary);
  line-height: 1.68;
}

/* ══════════════════════════════════════════════════════════
   SECTION HEADER (title + action on one row)
═══════════════════════════════════════════════════════════ */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.section-head--center { flex-direction: column; align-items: center; text-align: center; }

/* ══════════════════════════════════════════════════════════
   STATS STRIP CONTAINER
═══════════════════════════════════════════════════════════ */
.stats-strip {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sk-primary) 0%, var(--sk-primary-light) 100%);
  border-radius: var(--sk-r-2xl);
  padding: 44px 36px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stats-strip::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: rgba(17,156,135,0.09);
  pointer-events: none;
}
.stats-strip .stat-card { border-right: 1px solid rgba(255,255,255,0.1); }
.stats-strip .stat-card:last-child { border-right: none; }
.stats-strip .stat-number {
  background: linear-gradient(135deg, var(--sk-teal), #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stats-strip .stat-label { color: rgba(255,255,255,0.62); }

@media (max-width: 760px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); gap: 26px 0; padding: 34px 20px; }
  .stats-strip .stat-card:nth-child(2) { border-right: none; }
}

/* ══════════════════════════════════════════════════════════
   STEPS GRID CONTAINER
═══════════════════════════════════════════════════════════ */
.steps-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, 1fr);
  position: relative;
}
@media (max-width: 900px) { .steps-grid { grid-template-columns: 1fr; gap: 34px; } }

/* ══════════════════════════════════════════════════════════
   NEWSLETTER SECTION
═══════════════════════════════════════════════════════════ */
.newsletter-section {
  background: linear-gradient(135deg, var(--sk-teal-muted), rgba(124,92,252,0.06));
  border: 1px solid rgba(17,156,135,0.2);
  border-radius: var(--sk-r-2xl);
  padding: 52px 40px;
  text-align: center;
}
.newsletter-section .newsletter-form { margin: 0 auto; justify-content: center; }
@media (max-width: 640px) { .newsletter-section { padding: 34px 20px; } }

/* ══════════════════════════════════════════════════════════
   HEADER VARIANTS + PAGE OFFSET
   The header is position:fixed. It used to be transparent on every
   page, which made the white nav text invisible on light pages
   (login, booking confirmation, 404, the legal pages). It now has
   two explicit variants driven by $heroPage in v2-header.php.
═══════════════════════════════════════════════════════════ */
:root { --sk-header-h: 70px; }

/* Solid variant — used on every page WITHOUT a dark hero */
.sk-header--solid {
  background: var(--sk-card);
  border-bottom: 1px solid var(--sk-border);
  box-shadow: var(--sk-shadow-xs);
}
.sk-header--solid .sk-logo        { color: var(--sk-text); }
.sk-header--solid .sk-nav-link    { color: var(--sk-text-secondary); }
.sk-header--solid .sk-nav-link:hover  { background: var(--sk-bg-subtle); color: var(--sk-text); }
.sk-header--solid .sk-nav-link.active { background: var(--sk-teal-muted); color: var(--sk-teal-dark); }
.sk-header--solid .sk-hamburger,
.sk-header--solid .sk-theme-btn {
  background: var(--sk-bg-subtle);
  border-color: var(--sk-border);
  color: var(--sk-text);
}

/* Content must clear the fixed header on non-hero pages */
body.no-hero { padding-top: var(--sk-header-h); }

/* The dark hero blocks on the interior pages were authored with a
   64–80px top padding, i.e. less than the 70px header — their
   headings were rendering underneath it. */
.about-hero, .blog-hero, .post-hero, .contact-hero, .faq-hero,
.dest-hero, .route-hero, .results-header, .booking-hero {
  padding-top: calc(var(--sk-header-h) + 38px);
}

/* Theme toggle */
.sk-theme-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--sk-t-fast), border-color var(--sk-t-fast), color var(--sk-t-fast);
}
.sk-theme-btn:hover { background: rgba(255,255,255,0.22); }
.sk-theme-btn .material-symbols-outlined { font-size: 20px; }
.sk-header.scrolled .sk-theme-btn {
  background: var(--sk-bg-subtle);
  border-color: var(--sk-border);
  color: var(--sk-text);
}

/* Active state in the mobile drawer */
.sk-mob-link.active { background: var(--sk-teal-muted); color: var(--sk-teal-dark); }

/* Scrolled state must win over the overlay variant in dark mode too */
[data-theme="dark"] .sk-header.scrolled,
[data-theme="dark"] .sk-header--solid { background: rgba(19,23,41,0.97); border-bottom-color: var(--sk-border); }
[data-theme="dark"] .sk-header.scrolled .sk-logo,
[data-theme="dark"] .sk-header--solid .sk-logo { color: var(--sk-text); }
[data-theme="dark"] .sk-mobile-nav { background: var(--sk-card); }

/* ══════════════════════════════════════════════════════════
   FOOTER — 5-column layout + legal disclaimer
═══════════════════════════════════════════════════════════ */
.footer-top { grid-template-columns: 1.6fr 1fr 0.9fr 0.9fr 1.1fr; gap: 40px; }
@media (max-width: 1080px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; } }
@media (max-width: 760px)  { .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px)  { .footer-top { grid-template-columns: 1fr; gap: 28px; } }

.footer-brand { max-width: 300px; }
.footer-contact-list { gap: 16px !important; }
.footer-family-badge strong { color: var(--sk-teal); }

.footer-disclaimer {
  max-width: 1280px;
  margin: 12px auto 0;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255,255,255,0.28);
}

/* ══════════════════════════════════════════════════════════
   EXIT-INTENT POPUP
   Now driven by [hidden] rather than a class, so it is genuinely
   removed from the accessibility tree when closed.
═══════════════════════════════════════════════════════════ */
#cta-popup[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════
   ACCESSIBILITY UTILITIES
═══════════════════════════════════════════════════════════ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -60px; left: 16px;
  z-index: 2000;
  padding: 10px 20px;
  border-radius: 0 0 var(--sk-r-md) var(--sk-r-md);
  background: var(--sk-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700; font-size: 14px;
  transition: top var(--sk-t-fast);
}
.skip-link:focus { top: 0; }

/* Give keyboard users a visible focus ring everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--sk-teal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════
   SEARCH FORM — responsive overrides
   ui-enhancements.css declares `@media (max-width:900px){ .sf-swap-wrap
   {display:none} }` BEFORE the base `.sf-swap-wrap{display:flex}` rule.
   Equal specificity means the later base rule wins, so the swap button was
   never actually hidden — it kept occupying a full grid cell on tablet and
   mobile and pushed the fields out of alignment. components.css loads last,
   so re-declaring the overrides here makes them stick.
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .sf-grid      { grid-template-columns: 1fr 1fr; }
  .sf-swap-wrap { display: none; }
}
@media (max-width: 600px) {
  .sf-grid      { grid-template-columns: 1fr; }
  .sf-pax-row   { flex-direction: column; gap: 8px; }
  .sf-search-btn{ width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   FLIGHT RESULTS — segments, and the round-trip return step
═══════════════════════════════════════════════════════════ */
.leg-hint {
  background: var(--sk-teal-muted);
  border: 1px solid rgba(17,156,135,0.25);
  border-radius: var(--sk-r-lg);
  padding: 12px 18px;
  font-size: 14px;
  color: var(--sk-text-secondary);
  margin-bottom: 14px;
}
.leg-hint strong { color: var(--sk-teal-dark); }

.day-offset {
  font-size: 11px; font-weight: 800;
  color: var(--sk-orange, #F59E0B);
  margin-left: 2px; vertical-align: super;
}

/* Segment breakdown */
.seg-toggle {
  margin-top: 12px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-heading); font-weight: 700; font-size: 12.5px;
  color: var(--sk-teal-dark);
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 0;
}
.seg-toggle .chev { transition: transform var(--sk-t-fast); }
.seg-toggle.open .chev { transform: rotate(180deg); }

.seg-list {
  margin-top: 10px; padding: 14px 16px;
  background: var(--sk-bg-subtle);
  border-radius: var(--sk-r-lg);
  display: flex; flex-direction: column; gap: 10px;
}
.seg-list[hidden] { display: none; }
.seg-row { display: flex; align-items: flex-start; gap: 12px; }
.seg-logo { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; border-radius: 6px; background: #fff; }
.seg-carrier { font-family: var(--font-heading); font-weight: 700; font-size: 13px; }
.seg-aircraft { color: var(--sk-text-muted); font-weight: 500; }
.seg-times { font-size: 13px; color: var(--sk-text-secondary); margin-top: 2px; display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.seg-arrow { color: var(--sk-text-muted); }
.seg-dur { color: var(--sk-text-muted); font-size: 12px; }

.layover-pill {
  align-self: flex-start;
  background: var(--sk-card);
  border: 1px dashed var(--sk-border);
  border-radius: var(--sk-r-full);
  padding: 5px 14px; font-size: 12px; color: var(--sk-text-muted);
  margin-left: 38px;
}
.layover-pill .overnight {
  color: var(--sk-orange, #F59E0B); font-weight: 700; margin-left: 6px;
}

/* Selected outbound */
.flight-card.is-selected {
  border-color: var(--sk-teal);
  box-shadow: 0 0 0 3px rgba(17,156,135,0.15), var(--sk-shadow-card-hover);
}

/* Return options panel */
.return-panel {
  grid-column: 1 / -1;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px dashed var(--sk-border);
}
.return-panel[hidden] { display: none; }

.ret-head {
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  color: var(--sk-teal-dark); margin-bottom: 12px;
  text-transform: uppercase; letter-spacing: 0.6px;
}

.ret-loading, .ret-error {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--sk-text-secondary); padding: 14px 0;
}
.ret-error { color: #B91C1C; }
.spinner {
  width: 16px; height: 16px; flex-shrink: 0;
  border: 2px solid var(--sk-border);
  border-top-color: var(--sk-teal);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.ret-row {
  display: grid;
  grid-template-columns: 150px 1fr 160px;
  gap: 16px; align-items: center;
  padding: 14px 16px; margin-bottom: 10px;
  background: var(--sk-bg-subtle);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-r-lg);
  transition: border-color var(--sk-t-fast), transform var(--sk-t-fast);
}
.ret-row:hover { border-color: rgba(17,156,135,0.4); transform: translateY(-1px); }
.ret-row:last-child { margin-bottom: 0; }

.ret-airline { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; }
.ret-logo { width: 24px; height: 24px; object-fit: contain; border-radius: 6px; background: #fff; flex-shrink: 0; }

.ret-route { display: flex; align-items: center; gap: 14px; }
.ret-time { font-family: var(--font-heading); font-weight: 800; font-size: 16px; }
.ret-code { font-size: 11px; color: var(--sk-text-muted); font-weight: 600; }
.ret-mid  { flex: 1; text-align: center; }
.ret-dur  { font-size: 12px; font-weight: 700; color: var(--sk-text-secondary); }

.ret-price-col { text-align: right; }
.ret-price { font-family: var(--font-heading); font-weight: 900; font-size: 20px; color: var(--sk-primary); }
.ret-price-sub { font-size: 11px; color: var(--sk-text-muted); margin-bottom: 8px; }
.ret-btn { margin-top: 4px; font-size: 12.5px; padding: 9px 0; }

@media (max-width: 720px) {
  .ret-row { grid-template-columns: 1fr; gap: 10px; }
  .ret-price-col { text-align: left; }
  .layover-pill { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════
   FORM CONTROLS — shared base
   These were defined ONLY inside flight-details.php's inline <style>, but
   contact.php, login.php and the admin pages all use the same class names.
   Result: the contact form rendered as raw unstyled browser inputs. Base
   styles belong here so every form on the site looks the same.
═══════════════════════════════════════════════════════════ */
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group.full { grid-column: 1 / -1; }

.form-grid   { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.form-grid-3 { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 580px) {
  .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
}

.form-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--sk-text-muted);
}

.form-input,
.form-select,
.form-textarea,
textarea.form-input {
  width: 100%;
  padding: 12px 18px;
  border-radius: var(--sk-r-full);
  border: 1.5px solid var(--sk-border);
  background: var(--sk-bg-white);
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--sk-text);
  outline: none;
  transition: border-color var(--sk-t-fast), box-shadow var(--sk-t-fast), background var(--sk-t-fast);
  -webkit-appearance: none;
  appearance: none;
}

/* Multi-line controls need square-ish corners, not pills */
textarea.form-input, .form-textarea {
  border-radius: var(--sk-r-lg);
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

/* Native select needs its own chevron once appearance is stripped */
.form-select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A96A8' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  cursor: pointer;
}

.form-input::placeholder, .form-textarea::placeholder { color: var(--sk-text-muted); }

.form-input:focus, .form-select:focus, .form-textarea:focus, textarea.form-input:focus {
  border-color: var(--sk-teal);
  box-shadow: 0 0 0 3.5px rgba(17,156,135,.14);
}

.form-input.error, .form-select.error, .form-textarea.error {
  border-color: #EF4444;
  box-shadow: 0 0 0 3.5px rgba(239,68,68,.12);
}

.form-select option { background: var(--sk-card); color: var(--sk-text); }

.form-helper {
  font-size: 12px;
  color: var(--sk-text-muted);
  padding-left: 2px;
}

[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] textarea.form-input { background: rgba(255,255,255,.05); }

/* Checkbox / radio accent */
input[type="checkbox"], input[type="radio"] { accent-color: var(--sk-teal); }

/* ── Hero supporting city line ─────────────────────────────
   Sits under .hero-sub. Deliberately quieter than the sub: it is scannable
   evidence, not a second headline. */
.hero-cities {
  margin-top: 10px;
  max-width: 46ch;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(255,255,255,0.72);
}

/* ── Wholesale band ────────────────────────────────────────
   Two columns: the argument left, the proof right. Carriers render as text
   chips, not logos — see the note in index.php. */
.wholesale-band {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: start;
  background: var(--sk-card);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-r-2xl);
  padding: 44px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--sk-e2);
}
@media (max-width: 900px) { .wholesale-band { grid-template-columns: 1fr; gap: 30px; padding: 30px 26px; } }
@media (max-width: 560px) { .wholesale-band { padding: 26px 22px; } }
.wholesale-copy .section-title { margin: 8px 0 14px; }
.wholesale-copy .section-subtitle { margin-bottom: 24px; }

.wholesale-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.gds-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--sk-r-full);
  background: var(--sk-bg-subtle); border: 1px solid var(--sk-border);
  font-size: 12px; font-weight: 700; color: var(--sk-text-secondary);
  white-space: nowrap;
}
.gds-badge svg { color: var(--sk-teal-text); flex-shrink: 0; }
.gds-badge strong { color: var(--sk-text); }

/* Right column: a bordered panel so the chips read as a set rather than as
   loose text floating beside the copy. */
.wholesale-carriers {
  background: var(--sk-bg-subtle);
  border: 1px solid var(--sk-border-light);
  border-radius: var(--sk-r-xl);
  padding: 22px;
}
.carrier-head {
  font-family: var(--font-heading);
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--sk-text-muted);
  margin-bottom: 14px;
}
.carrier-grid {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.carrier-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px;
  border-radius: var(--sk-r-full);
  border: 1px solid var(--sk-border);
  background: var(--sk-card);
  font-family: var(--font-heading);
  font-weight: 700; font-size: 12.5px;
  color: var(--sk-text-secondary);
  white-space: nowrap;
}
.carrier-chip img { height: 17px; width: auto; object-fit: contain; }
.carrier-note {
  margin-top: 16px;
  font-size: 11px; line-height: 1.6;
  color: var(--sk-text-muted);
}

/* ── Currency switcher (header) ────────────────────────────
   Display-only: see include/Currency.php. Deliberately quiet — it must not
   compete with the phone CTA, which is the conversion path that matters.

   NOTE: this block was destroyed once by a scripted replacement of the
   neighbouring wholesale rules that overshot its end anchor, which left the
   switcher and both converted-price classes completely unstyled. If you edit
   this region with a script, verify .sk-cur-btn and .price-alt survive. */
.sk-cur { position: relative; flex-shrink: 0; }
.sk-cur-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: var(--sk-r-full);
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.10);
  color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 12.5px;
  letter-spacing: .04em; line-height: 1;
  transition: background var(--sk-t-fast), border-color var(--sk-t-fast);
}
.sk-cur-btn:hover { background: rgba(255,255,255,0.18); }
.sk-header.scrolled .sk-cur-btn,
.no-hero .sk-cur-btn {
  border-color: var(--sk-border); background: var(--sk-bg-subtle); color: var(--sk-text);
}
.sk-cur-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 1200;
  width: 262px; max-height: 340px; overflow-y: auto;
  background: var(--sk-card);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-r-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--sk-e4);
  padding: 6px;
}
.sk-cur-menu[hidden] { display: none; }
.sk-cur-note {
  font-size: 11px; line-height: 1.5; color: var(--sk-text-muted);
  padding: 8px 10px 10px; margin: 0 2px 4px;
  border-bottom: 1px solid var(--sk-border-light);
}
.sk-cur-note strong { color: var(--sk-text-secondary); }
.sk-cur-item {
  display: grid; grid-template-columns: 24px auto 1fr; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: var(--sk-r-sm);
  font-size: 13px; color: var(--sk-text); text-decoration: none;
}
.sk-cur-item:hover { background: var(--sk-bg-subtle); }
.sk-cur-item.active { background: var(--sk-teal-muted); }
.sk-cur-code { font-family: var(--font-heading); font-weight: 800; font-size: 12px; }
.sk-cur-name { color: var(--sk-text-muted); font-size: 12px; text-align: right; }
.sk-cur-flag { display: inline-flex; align-items: center; }
.sk-cur-flag .sk-flag { display: block; }
.sk-cur-btn .sk-cur-flag .sk-flag { box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset; }

/* The switcher used to vanish below 900px with no replacement, while the
   converted price lines kept rendering — so a phone visitor saw prices in a
   currency they had no way to change. It now collapses to the flag and code
   only, and the menu anchors to the viewport edge. */
@media (max-width: 900px) {
  .sk-cur-btn { padding: 7px 9px; font-size: 11.5px; gap: 5px; }
  .sk-cur-btn svg:last-child { display: none; }
  .sk-cur-menu { width: min(262px, calc(100vw - 32px)); right: -8px; }
}

/* Converted figure shown beside a USD price. Always secondary — the USD
   number is the one that gets charged. */
.price-alt {
  display: block; margin-top: 3px;
  font-size: 11.5px; font-weight: 600; color: var(--sk-text-muted);
  font-variant-numeric: tabular-nums; letter-spacing: 0;
  text-transform: none;
}
/* Converted total under the checkout figure. Never larger than the USD
   amount above it, and always states who gets charged what. */
.total-alt {
  margin-top: 9px;
  font-size: 11.5px; line-height: 1.6; color: var(--sk-text-muted);
}
.total-alt strong { color: var(--sk-text-secondary); font-variant-numeric: tabular-nums; }
.total-alt span { display: block; margin-top: 2px; }

/* Currency suffix on the indicative destination prices. They are marketing
   "from" figures, not live fares, so they stay USD even when the header shows
   another currency — the label is what stops that reading as a bug. */
.dest-cur {
  font-size: .72em; font-weight: 700; opacity: .75;
  letter-spacing: .04em; margin-left: 1px;
}