:root {
  --fda-navy: #0b1b3a;
  --fda-navy-dark: #060f24;
  --fda-blue: #1a56db;
  --fda-teal: #f5b301; /* aligned to fdalerts.com's real gold/amber brand accent (--primary-color: #febd01) */
  --fda-ink: #101728;
  --fda-muted: #5b6478;
  --fda-border: #e6e9f0;
  --fda-bg-alt: #f6f8fc;
}

html, body {
  font-family: "Inter", "Segoe UI", sans-serif;
  color: var(--fda-ink);
  background-color: #ffffff;
}

h1, h2, h3, h4, h5, .fda-brand {
  font-family: "Poppins", "Inter", sans-serif;
}

a { text-decoration: none; }

/* ---------- Navbar ---------- */
.fda-navbar {
  background: var(--fda-navy);
  padding-top: .85rem;
  padding-bottom: .85rem;
}

.fda-brand {
  font-weight: 700;
  font-size: 1.4rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.fda-brand-mark {
  background: var(--fda-teal);
  color: var(--fda-navy-dark);
  border-radius: .5rem;
  padding: .1rem .5rem;
  font-size: 1.1rem;
}

.fda-brand-light { color: #ffffff; }

.fda-navbar .nav-link {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 500;
  padding-left: 1rem;
  padding-right: 1rem;
}

.fda-navbar .nav-link:hover { color: #ffffff; }

.fda-btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #ffffff !important;
  font-weight: 600;
  padding: .45rem 1.1rem;
  border-radius: .5rem;
}

.fda-btn-outline:hover { background: rgba(255, 255, 255, 0.1); }

/* ---------- Hero (cinematic — matches the Admin homepage/Login redesign's premium language) ---------- */
.fda-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 10%, rgba(245,179,1,0.18), transparent 45%),
    radial-gradient(circle at 6% 90%, rgba(26,86,219,0.3), transparent 50%),
    linear-gradient(160deg, var(--fda-navy) 0%, var(--fda-navy-dark) 100%);
  color: #ffffff;
  padding: 5rem 0 6.5rem;
}
.fda-hero .container { position: relative; z-index: 2; }
.fda-hero-glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }
.fda-hero-glow-1 { width: 24rem; height: 24rem; background: radial-gradient(circle, rgba(245,179,1,0.22), transparent 70%); top: -7rem; right: -5rem; animation: fdaGlowFloat 10s ease-in-out infinite; }
.fda-hero-glow-2 { width: 20rem; height: 20rem; background: radial-gradient(circle, rgba(26,86,219,0.32), transparent 70%); bottom: -7rem; left: -5rem; animation: fdaGlowFloat 12s ease-in-out infinite reverse; }
.fda-hero-grid-lines {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 2.75rem 2.75rem;
  mask-image: radial-gradient(ellipse 65% 55% at 30% 35%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 65% 55% at 30% 35%, #000 30%, transparent 80%);
  pointer-events: none;
}
/* Reuses .fda-auth-badge/.fda-auth-feature-list/.fda-auth-ticket verbatim
   (same classes as the Login hero) — just needs its own sized, positioned
   wrapper here since the homepage hero isn't the same two-panel flex shell
   Login uses. */
.fda-hero-ticket-wrap { position: relative; height: 13.5rem; margin-top: 1.75rem; }

.fda-hero-flightpath { position: absolute; top: 8%; right: 3%; width: 55%; max-width: 30rem; height: auto; z-index: 1; pointer-events: none; }
.fda-hero-plane {
  position: absolute; top: 8%; right: 3%;
  color: var(--fda-teal); font-size: 1.1rem; z-index: 1;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
  offset-path: path('M10,150 C150,40 340,180 505,55');
  offset-rotate: auto;
  animation: fdaPlaneFly 7s linear infinite;
}

.fda-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8rem;
  font-weight: 600;
  color: var(--fda-teal);
  margin-bottom: .75rem;
}

.fda-hero-title {
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.fda-hero-sub {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
  max-width: 42rem;
  margin-bottom: 1.75rem;
}

.fda-section .fda-hero-sub { color: var(--fda-muted); }

.fda-btn-primary {
  background: var(--fda-teal);
  border: none;
  color: var(--fda-navy-dark) !important;
  font-weight: 600;
  border-radius: .6rem;
  padding: .7rem 1.6rem;
}

.fda-btn-primary:hover { background: #14ad9d; }

.fda-btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff !important;
  font-weight: 600;
  border-radius: .6rem;
  padding: .7rem 1.6rem;
}

.fda-btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }

.fda-section .fda-btn-ghost {
  border-color: var(--fda-border);
  color: var(--fda-navy) !important;
}

/* ---------- Search card ---------- */
.fda-search-card {
  background: #ffffff;
  color: var(--fda-ink);
  border-radius: 1rem;
  padding: 1.75rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 30px 60px -20px rgba(6, 15, 36, 0.45);
  position: relative;
  overflow: hidden;
  /* Deliberately no 3D tilt — this is a real, clickable search form, not a
     decorative element (see the Admin homepage's own hero-login-card fix:
     rotateY/rotateX on an interactive card breaks click hit-testing). */
}
.fda-search-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--fda-navy), var(--fda-teal));
}

.fda-search-note {
  font-size: .82rem;
  color: var(--fda-muted);
}

/* ---------- Full-width authenticated search bar (Home hero) ---------- */
.fda-search-bar { padding: 1.5rem 1.75rem 1.25rem; }
.fda-trip-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--fda-navy); color: #fff; font-weight: 600; font-size: .85rem;
  padding: .5rem 1rem; border-radius: 999px; margin-bottom: .9rem;
}
.fda-search-row {
  display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; position: relative;
}
.fda-search-field { flex: 1 1 11rem; min-width: 10rem; }
.fda-search-combo {
  width: 100%; display: flex; align-items: center; gap: .5rem;
  background: var(--fda-bg-alt); border: 1px solid var(--fda-border); border-radius: .7rem;
  padding: .65rem .9rem; font-weight: 600; color: var(--fda-ink); text-align: left;
}
/* City names make this text longer than a bare 3-letter code — truncate
   gracefully instead of wrapping/overflowing the field. min-width:0 is
   needed alongside flex:1 here: a flex item won't shrink below its content
   size (so ellipsis never triggers) without it. */
.fda-search-combo span:not(.placeholder) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fda-search-combo:hover, .fda-search-combo.active { border-color: var(--fda-teal); }
.fda-search-combo span.placeholder { color: var(--fda-muted); font-weight: 400; }
.fda-swap-btn {
  flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid var(--fda-border); background: #fff; color: var(--fda-navy);
  display: flex; align-items: center; justify-content: center; margin-bottom: .1rem;
}
.fda-swap-btn:hover { background: var(--fda-bg-alt); }
.fda-search-submit {
  flex: 0 0 auto; white-space: nowrap; padding: .75rem 1.5rem;
}
.fda-hero-badge { font-size: .85rem; color: rgba(255,255,255,0.85); }

/* position:fixed and appended straight to <body> by JS (not nested inside
   .fda-search-card, which clips overflow for its own colored top-bar
   pseudo-element) — coordinates are computed from the anchor field's own
   bounding rect on open, since a static CSS position can't reach outside
   its clipped ancestor otherwise. */
.fda-combo-panel {
  display: none; position: fixed;
  width: 18rem; max-width: 90vw; background: #fff; border: 1px solid var(--fda-border);
  border-radius: .8rem; box-shadow: 0 20px 45px -20px rgba(6,15,36,0.35); z-index: 1050; padding: .75rem;
}
.fda-combo-panel.open { display: block; }
.fda-combo-panel .form-control { margin-bottom: .5rem; }
.fda-combo-list { list-style: none; margin: 0; padding: 0; max-height: 15rem; overflow-y: auto; }
.fda-combo-list li {
  padding: .55rem .6rem; border-radius: .5rem; cursor: pointer; font-weight: 600; color: var(--fda-ink);
  display: flex; align-items: baseline; gap: .5rem;
}
.fda-combo-list li:hover, .fda-combo-list li.highlighted { background: var(--fda-bg-alt); }
.fda-combo-list li.empty { color: var(--fda-muted); font-weight: 400; cursor: default; }
.fda-combo-list li.empty:hover { background: none; }
.fda-combo-code { font-weight: 700; letter-spacing: .02em; }
.fda-combo-city { font-weight: 400; font-size: .85rem; color: var(--fda-muted); }

@media (max-width: 767px) {
  .fda-search-row { flex-direction: column; align-items: stretch; }
  .fda-swap-btn { align-self: center; }
  .fda-search-submit { width: 100%; }
}

/* ---------- Travellers stepper panel (shares .fda-combo-panel's shell) ---------- */
.fda-travellers-panel { width: 20rem; padding: 1rem 1.25rem; }
.fda-stepper-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .75rem 0; border-bottom: 1px solid var(--fda-border);
}
.fda-stepper-row:last-of-type { border-bottom: none; }
.fda-stepper-row strong { display: block; font-size: .95rem; color: var(--fda-ink); }
.fda-stepper-sub { font-size: .78rem; color: var(--fda-muted); }
.fda-stepper-controls { display: flex; align-items: center; gap: .6rem; }
.fda-stepper-controls span { min-width: 1.4rem; text-align: center; font-weight: 700; }
.fda-stepper-btn {
  width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--fda-border);
  background: var(--fda-bg-alt); color: var(--fda-navy); display: flex; align-items: center; justify-content: center;
}
.fda-stepper-btn:hover { background: #e9edf5; }
#heroTravellersDone { margin-top: .75rem; }

/* ---------- flatpickr theme — dark navy header, gold-tinted available days,
   matching the OTA-reference calendar the search bar itself is built from ---------- */
.flatpickr-calendar {
  border-radius: 1rem; box-shadow: 0 20px 45px -20px rgba(6,15,36,0.4); border: none; font-family: "Inter", sans-serif;
}
.flatpickr-months { background: var(--fda-navy); border-radius: 1rem 1rem 0 0; padding: .5rem 0; }
.flatpickr-current-month { color: #fff; font-weight: 700; }
.flatpickr-current-month .cur-month, .flatpickr-current-month input.cur-year { color: #fff; font-weight: 700; }
.flatpickr-prev-month, .flatpickr-next-month { color: #fff !important; fill: #fff !important; }
.flatpickr-prev-month:hover, .flatpickr-next-month:hover { color: var(--fda-teal) !important; }
.flatpickr-prev-month svg, .flatpickr-next-month svg { fill: #fff; }
.flatpickr-weekdays { background: var(--fda-navy); }
span.flatpickr-weekday { background: var(--fda-navy); color: rgba(255,255,255,0.65); font-weight: 700; text-transform: uppercase; font-size: .72rem; }
.flatpickr-day { border-radius: .6rem; font-weight: 600; }
/* Enabled == a real available date (see refreshAvailability's enable: dates) — everything else (disabled/out of range) stays flatpickr's default muted look.
   :not(.selected) matters here, not just tidiness: the old selector had an
   accidentally-duplicated :not(.flatpickr-disabled) clause, which pushed its
   specificity above .flatpickr-day.selected below — so a date that was both
   enabled AND selected (exactly the "auto-pick the first available date"
   case) rendered with this gold "just enabled" background instead of the
   navy "selected" one. Excluding .selected here removes the conflict outright
   rather than relying on getting the specificity race right. */
.flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):not(.selected) {
  background: #fff7e6; border-color: #fde8b8;
}
.flatpickr-day:not(.flatpickr-disabled):hover { background: var(--fda-teal); border-color: var(--fda-teal); color: var(--fda-navy); }
.flatpickr-day.selected, .flatpickr-day.selected:hover {
  background: var(--fda-navy); border-color: var(--fda-navy); color: #fff;
}
.flatpickr-day.today { border-color: var(--fda-navy); }

/* ---------- Sections ---------- */
.fda-section {
  padding: 5rem 0;
}

.fda-section-alt { background: var(--fda-bg-alt); }

.fda-section-title {
  font-weight: 700;
  font-size: 2rem;
  color: var(--fda-navy);
}

.fda-section-sub { color: var(--fda-muted); }

/* ---------- Feature cards ---------- */
.fda-feature-card {
  border: 1px solid var(--fda-border);
  border-radius: .9rem;
  padding: 1.75rem;
  height: 100%;
  transition: transform .15s ease, box-shadow .15s ease;
}

.fda-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 35px -20px rgba(16, 23, 40, 0.2);
}

.fda-feature-icon {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: var(--fda-teal);
  font-size: 1.1rem;
  margin-bottom: .75rem;
}

.fda-feature-card h5 { font-weight: 600; margin-bottom: .5rem; }
.fda-feature-card p { color: var(--fda-muted); margin-bottom: 0; font-size: .92rem; }

/* ---------- Route chips ---------- */
.fda-route-chip {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--fda-border);
  border-radius: .7rem;
  padding: .85rem .5rem;
  font-weight: 600;
  color: var(--fda-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  transition: border-color .15s ease, background .15s ease;
}

.fda-route-chip:hover {
  border-color: var(--fda-teal);
  background: #f0fdfb;
}

.fda-route-arrow { color: var(--fda-teal); font-weight: 700; }

/* ---------- Journey (search → compare → book) ---------- */
/* Uses --fda-blue, a token already defined but otherwise unused, so this
   section reads as its own visual beat against the gold-accented hero/
   features above it without introducing a brand-new color. */
.fda-eyebrow-blue { color: var(--fda-blue); }

.fda-journey-steps { display: flex; align-items: flex-start; gap: 1rem; }
.fda-journey-step {
  flex: 1; background: #fff; border: 1px solid var(--fda-border); border-radius: 1rem;
  padding: 1.75rem 1.5rem; position: relative;
}
.fda-journey-number {
  position: absolute; top: -1rem; left: 1.5rem; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; background: var(--fda-blue); color: #fff; font-family: "Poppins", sans-serif;
  font-weight: 700; font-size: .85rem; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -4px rgba(26, 86, 219, .5);
}
.fda-journey-arrow { display: flex; align-items: center; padding-top: 2.5rem; color: var(--fda-blue); font-size: 1.25rem; }
.fda-journey-step h5 { font-weight: 600; margin: 1rem 0 .4rem; }
.fda-journey-step p { color: var(--fda-muted); font-size: .88rem; margin: 0; }

.fda-journey-mock {
  background: var(--fda-bg-alt); border-radius: .7rem; padding: 1rem; height: 6rem;
  display: flex; flex-direction: column; justify-content: center; gap: .5rem;
}
.fda-mock-row { height: .5rem; border-radius: .3rem; background: #dbe1ee; width: 100%; }
.fda-mock-row-short { width: 60%; }
.fda-journey-mock-search { position: relative; }
.fda-mock-search-icon {
  position: absolute; right: .9rem; bottom: .9rem; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--fda-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .8rem;
}
.fda-mock-price-row {
  display: flex; align-items: center; gap: .5rem; background: #fff; border-radius: .5rem;
  padding: .45rem .6rem; font-size: .8rem; color: var(--fda-muted);
}
.fda-mock-price-row i { font-size: .8rem; }
.fda-mock-price-row .fda-mock-bar { flex: 1; height: .4rem; border-radius: .3rem; background: #dbe1ee; }
.fda-mock-price-row-selected { color: #0a8a5f; font-weight: 600; }
.fda-mock-price-row-selected i { color: #0a8a5f; }
.fda-journey-mock-confirm { flex-direction: row; align-items: center; }
.fda-mock-confirm-icon {
  width: 2.5rem; height: 2.5rem; min-width: 2.5rem; border-radius: 50%; background: #e6f9f2; color: #0a8a5f;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.fda-journey-mock-confirm strong { display: block; font-size: .85rem; color: var(--fda-ink); }
.fda-journey-mock-confirm span { font-size: .78rem; color: var(--fda-muted); }

/* ---------- Trust badge row ---------- */
.fda-trust-row { padding: 2.5rem 0; border-top: 1px solid var(--fda-border); border-bottom: 1px solid var(--fda-border); }
.fda-trust-item { display: flex; align-items: center; gap: .75rem; justify-content: center; }
.fda-trust-item i { font-size: 1.3rem; color: var(--fda-blue); }
.fda-trust-item strong { display: block; font-size: .88rem; color: var(--fda-ink); }
.fda-trust-item span { display: block; font-size: .76rem; color: var(--fda-muted); }

@media (max-width: 767px) {
  .fda-trust-item { justify-content: flex-start; }
}

@media (max-width: 900px) {
  .fda-journey-steps { flex-direction: column; }
  .fda-journey-arrow { display: none; }
}

/* ---------- Stat card ---------- */
.fda-stat-card {
  background: var(--fda-navy);
  border-radius: 1rem;
  padding: 2rem;
  color: #ffffff;
}

.fda-stat-row {
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.fda-stat-number {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 2.1rem;
  color: var(--fda-teal);
}

.fda-stat-label {
  font-size: .82rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: .25rem;
}

/* ---------- Results page ---------- */
.fda-results-section { min-height: 60vh; display: flex; align-items: center; }
.fda-results-card { max-width: 44rem; text-align: center; }

/* ---------- Footer ---------- */
.fda-footer {
  background: var(--fda-navy-dark);
}

.text-secondary-light { color: rgba(255, 255, 255, 0.65); }

.fda-footer-links li { margin-bottom: .5rem; }
.fda-footer-links a { color: rgba(255, 255, 255, 0.75); }
.fda-footer-links a:hover { color: var(--fda-teal); }

.fda-footer-divider {
  border-color: rgba(255, 255, 255, 0.12);
  margin: 2rem 0 1.5rem;
}

@media (max-width: 991.98px) {
  .fda-hero-title { font-size: 2.25rem; }
  .fda-stat-row { flex-wrap: wrap; gap: 1.5rem; }
}

/* ---------- Auth (split-screen Login/Register) ----------
   Restructured per an explicit design brief: CSS Grid (hard column tracks,
   not flex-basis) so the hero and login column can never bleed into each
   other; hero content in normal block flow anchored near the top-left
   (not vertically centered); a calmer, less "3D" ticket card; and a wider,
   more generously spaced login card. Three real breakpoints — desktop
   (≥1100px, 54/46), tablet (768–1099px, 48/52), mobile (<768px, stacked,
   photo dropped, ticket hidden) — replacing the old single ≤991px cutoff
   that tried to serve both tablet and phone at once. */
.fda-auth-body { margin: 0; background: var(--fda-navy-dark); }

.fda-auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr; /* mobile-first: stacked until the tablet breakpoint below */
  grid-template-rows: auto 1fr auto; /* top bar / hero+form / trust strip+footer */
  position: relative;
  overflow-x: hidden; /* never overflow-y: a login card taller than the viewport must scroll, not clip */
  background:
    radial-gradient(circle at 60% 10%, rgba(245, 179, 1, 0.16), transparent 45%),
    linear-gradient(160deg, var(--fda-navy) 0%, var(--fda-navy-dark) 100%);
}

/* Top utility bar — spans both columns, sits directly on the shell's own
   background rather than carrying one of its own. */
.fda-auth-topbar {
  grid-column: 1 / -1;
  display: flex; justify-content: flex-end; align-items: center; gap: .4rem;
  padding: 1rem 2.5rem 0;
  color: rgba(255,255,255,.75); font-size: .85rem; position: relative; z-index: 4;
}
.fda-auth-topbar i { color: var(--fda-teal); }
.fda-auth-topbar strong { color: #fff; font-weight: 600; margin-left: .3rem; }
.fda-auth-topbar .fda-auth-topbar-divider { color: rgba(255,255,255,.3); margin: 0 .3rem; }

/* Bottom trust strip + footer — spans both columns, own solid navy so it
   reads as a distinct closing band rather than part of the hero photo. */
.fda-auth-trust-footer { grid-column: 1 / -1; background: var(--fda-navy-dark); position: relative; z-index: 4; }
.fda-auth-trust-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
  padding: 2rem 2.5rem; border-bottom: 1px solid rgba(255,255,255,.08);
}
.fda-auth-trust-item { display: flex; align-items: flex-start; gap: .85rem; }
.fda-auth-trust-icon {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: .65rem;
  background: rgba(245,179,1,.14); color: var(--fda-teal);
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.fda-auth-trust-item strong { display: block; color: #fff; font-size: .92rem; margin-bottom: .2rem; }
.fda-auth-trust-item span { display: block; color: rgba(255,255,255,.6); font-size: .8rem; line-height: 1.4; }

.fda-auth-footer-bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem;
  padding: 1.1rem 2.5rem; color: rgba(255,255,255,.55); font-size: .82rem;
}
.fda-auth-footer-bar a { color: rgba(255,255,255,.75); text-decoration: none; }
.fda-auth-footer-bar a:hover { color: var(--fda-teal); }
.fda-auth-footer-bar .fda-auth-footer-links { display: flex; align-items: center; gap: .6rem; }

@media (max-width: 767.98px) {
  .fda-auth-topbar { padding: .85rem 1.25rem 0; font-size: .78rem; justify-content: center; }
  .fda-auth-trust-strip { grid-template-columns: 1fr 1fr; padding: 1.5rem 1.25rem; gap: 1.25rem; }
  .fda-auth-footer-bar { padding: 1rem 1.25rem; justify-content: center; text-align: center; }
}

.fda-auth-hero {
  position: relative;
  color: #ffffff;
  padding: 4.375rem 2.5rem 3rem 3.5rem; /* top 70px, right 40px, left 56px */
  /* Block flow, not flex-centered — content anchors near the top instead
     of floating in the vertical middle of a tall viewport. */
  display: block;
  overflow: hidden; /* the photo/glow must not push the column wider than its grid track */
  /* Real photo (Pexels, free-use license — no visible airline branding),
     with a navy gradient over it: fully opaque where the headline/feature
     list sit so text stays readable, fading out toward the right so the
     sunset/wing is genuinely visible, not just a tint. */
  background:
    linear-gradient(100deg, rgba(6,15,36,.94) 0%, rgba(6,15,36,.8) 32%, rgba(11,27,58,.4) 58%, rgba(11,27,58,.12) 100%),
    url('/images/hero-bg.jpg') center right / cover no-repeat;
}

/* Ambient glow orbs — pure depth/atmosphere, no content */
.fda-auth-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.fda-auth-glow-1 {
  width: 22rem; height: 22rem;
  background: radial-gradient(circle, rgba(245,179,1,0.28), transparent 70%);
  top: -6rem; right: -4rem;
  animation: fdaGlowFloat 9s ease-in-out infinite;
}
.fda-auth-glow-2 {
  width: 18rem; height: 18rem;
  background: radial-gradient(circle, rgba(26,86,219,0.35), transparent 70%);
  bottom: -5rem; left: -5rem;
  animation: fdaGlowFloat 11s ease-in-out infinite reverse;
}
@keyframes fdaGlowFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(1.2rem, -1rem) scale(1.08); }
}

.fda-auth-grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  pointer-events: none;
}

.fda-auth-flightpath { position: absolute; top: 12%; right: 2%; width: 60%; max-width: 34rem; height: auto; z-index: 1; pointer-events: none; }
.fda-auth-plane {
  position: absolute;
  color: var(--fda-teal);
  font-size: 1.1rem;
  z-index: 1;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
  offset-path: path('M10,150 C150,40 340,180 505,55');
  offset-rotate: auto;
  animation: fdaPlaneFly 7s linear infinite;
  top: 12%; right: 2%;
}
@keyframes fdaPlaneFly {
  0% { offset-distance: 0%; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

.fda-auth-hero-inner { max-width: 40.625rem; /* 650px */ position: relative; z-index: 2; }

/* Brand + badge on one row, both scaled down slightly so neither dominates */
.fda-auth-hero-topline { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

.fda-auth-logo-card {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: #ffffff;
  border-radius: .7rem;
  padding: .45rem .9rem;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--fda-navy);
  box-shadow: 0 12px 24px -10px rgba(0,0,0,0.45);
}

.fda-auth-logo-text { color: var(--fda-teal); }

.fda-auth-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(11, 27, 58, 0.35);
  border: 1px solid rgba(245, 179, 1, 0.4);
  color: var(--fda-teal);
  border-radius: 2rem;
  padding: .3rem .9rem;
  font-size: .875rem; /* ~14px */
  font-weight: 600;
  letter-spacing: .02em;
}

.fda-auth-badge-dot {
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: var(--fda-teal);
  display: inline-block;
}

.fda-auth-hero-title {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 3.375rem; /* ~54px */
  line-height: 1.05;
  margin-bottom: 1.25rem;
  max-width: 34rem; /* keep it from stretching unnecessarily wide, per brief */
}

.fda-auth-accent { color: var(--fda-teal); }

.fda-auth-hero-sub {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.125rem; /* 18px */
  line-height: 1.6;
  margin-bottom: 2.25rem;
  max-width: 31.25rem; /* 500px */
}

.fda-auth-feature-list {
  display: flex;
  flex-direction: column;
  gap: .875rem; /* 14px */
  max-width: 40.625rem; /* 650px — never stretches the full hero width */
}

.fda-auth-feature {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  border-radius: 1rem; /* 16px */
  padding: 1rem 1.15rem;
  min-height: 5.5rem; /* ~88px, per brief's 82–94px range */
  display: flex;
  gap: .85rem;
  align-items: center;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.fda-auth-feature:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(245, 179, 1, 0.3);
  transform: translateX(.25rem);
}

.fda-auth-feature-icon {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .7rem;
  background: var(--fda-teal);
  color: var(--fda-navy-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 6px 14px -6px rgba(245,179,1,0.55);
}

.fda-auth-feature strong { display: block; font-size: 1.125rem; /* 18px */ margin-bottom: .15rem; }
.fda-auth-feature p { font-size: .9375rem; /* 15px */ color: rgba(255, 255, 255, 0.62); margin: 0; line-height: 1.35; }

/* Decorative "boarding pass" card — belongs entirely to the hero column.
   position:absolute is scoped to .fda-auth-hero (position:relative), and
   the hero column itself is a hard grid track, so `right` here can never
   cross the boundary into the login column no matter the viewport width —
   it's inset FROM that same boundary, not floating past it. */
.fda-auth-ticket {
  position: absolute;
  z-index: 3;
  right: 2.5rem; /* 40px */
  /* Kept a positive inset (not the brief's literal -30px) deliberately:
     .fda-auth-hero has overflow:hidden (needed so the photo/glow can't
     widen the grid column), and the hero stretches to the grid row's full
     height — so a negative bottom offset doesn't "float past the fold"
     the way it would in a shorter, auto-height box, it gets silently
     clipped by that same overflow:hidden. This keeps the card's full
     content visible at every required breakpoint, including 1440×900. */
  bottom: 1.5rem;
  width: 16.5rem;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 1.1rem;
  padding: 1.1rem 1.2rem 1rem;
  color: var(--fda-ink);
  box-shadow: 0 24px 48px -20px rgba(0,0,0,0.5);
  transform: rotate(-2deg); /* subtle tilt only — no heavy 3D perspective */
}
.fda-ticket-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.fda-ticket-airline { font-size: .74rem; font-weight: 700; color: var(--fda-navy); display: flex; align-items: center; gap: .35rem; text-transform: uppercase; letter-spacing: .02em; }
.fda-ticket-status {
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  background: #e6f9f2; color: #0a8a5f; border-radius: 999px; padding: .2rem .55rem;
}
.fda-ticket-route { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.fda-ticket-point { text-align: left; }
.fda-ticket-point-end { text-align: right; }
.fda-ticket-point strong { display: block; font-family: "Poppins", sans-serif; font-size: 1.3rem; line-height: 1; }
.fda-ticket-point span { font-size: .7rem; color: var(--fda-muted); }
.fda-ticket-line { flex: 1; text-align: center; color: var(--fda-teal); font-size: .95rem; position: relative; }
.fda-ticket-line::before, .fda-ticket-line::after {
  content: ''; position: absolute; top: 50%; width: 35%; height: 1px; background: var(--fda-border);
}
.fda-ticket-line::before { left: 0; }
.fda-ticket-line::after { right: 0; }
.fda-ticket-divider { display: flex; align-items: center; gap: .3rem; margin: .5rem 0 .8rem; }
.fda-ticket-divider span { flex: 1; height: 1px; border-top: 1px dashed var(--fda-border); }
.fda-ticket-divider i { font-size: .3rem; color: var(--fda-border); }
.fda-ticket-bottom { display: flex; justify-content: space-between; }
.fda-ticket-bottom div { display: flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; color: var(--fda-navy); }
.fda-ticket-bottom i { color: var(--fda-muted); font-size: .85rem; }

.fda-auth-form-panel {
  display: flex;
  align-items: center; /* vertical centering via flex, not top:50%/translateY */
  justify-content: center;
  padding: 3rem; /* 48px */
  position: relative;
  background: #07142f;
}

.fda-auth-form-card {
  width: 100%;
  max-width: 35rem; /* 560px */
  background: #ffffff;
  border-radius: 1.5rem; /* 24px */
  padding: 3rem 2.75rem; /* 48px 44px */
  box-shadow:
    0 1px 2px rgba(16,24,40,0.04),
    0 25px 70px -20px rgba(11,27,58,0.45);
  position: relative;
  overflow: hidden;
}
.fda-auth-form-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  border-radius: 1.5rem 1.5rem 0 0;
  background: linear-gradient(90deg, var(--fda-navy), var(--fda-teal));
}

.fda-auth-sheet-handle { display: none; }

.fda-auth-card-head { margin-bottom: 2.125rem; /* subtitle → email: 34px */ }
.fda-auth-card-head h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 2.625rem; /* ~42px */
  color: var(--fda-navy);
  line-height: 1.1;
}
.fda-auth-card-head p { margin-top: .5rem; /* 8px */ font-size: 1rem; }

/* ---- Precise vertical rhythm for the form itself (scoped to the auth
   card so this never touches Register/Booking/other forms sharing the
   same .fda-field-group/.form-check/.btn markup elsewhere on the site). ---- */
.fda-auth-form-card form > .mb-3 { margin-bottom: 1.5rem !important; } /* label → next label: 24px */
.fda-auth-form-card form > .mb-2 { margin-bottom: 1.25rem !important; } /* password → remember: 20px */
.fda-auth-form-card .fda-field-label { margin-bottom: .625rem; } /* label → input: 10px */
.fda-auth-form-card .form-check.mb-4 { margin-bottom: 1.75rem !important; } /* remember → button: 28px */
.fda-auth-form-card button[type="submit"] { margin-bottom: 0; }
.fda-auth-form-card .fda-auth-divider { margin: 1.75rem 0 1.5rem; } /* button → divider: 28px, divider → create account: 24px */

.fda-auth-form-card .fda-field-group .form-control,
.fda-auth-form-card .fda-field-group .form-select {
  height: 3.625rem; /* 58px */
  border-radius: .75rem; /* 12px */
  background: #f6f8fc;
  border: 1px solid #dde3ee;
  font-size: 1rem;
}
.fda-auth-form-card .fda-field-group .form-control:focus,
.fda-auth-form-card .fda-field-group .form-select:focus {
  border-color: var(--fda-navy);
  box-shadow: 0 0 0 3px rgba(11,27,58,.1);
  background: #fff;
}

.fda-auth-form-card .btn {
  height: 3.75rem; /* 60px */
  font-size: 1.125rem; /* 18px */
  border-radius: .75rem; /* 12px */
}
.fda-auth-form-card .fda-btn-ghost-navy { height: 3.5rem; /* 56px */ font-size: 1rem; }
.fda-auth-form-card .fda-btn-navy:hover { transform: translateY(-1px); }

.fda-btn-navy {
  background: var(--fda-navy);
  border: none;
  color: #ffffff;
  font-weight: 600;
  border-radius: .7rem;
  padding: .8rem 1.6rem;
  transition: background .15s ease, transform .1s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
}

.fda-btn-navy:hover { background: var(--fda-navy-dark); color: #ffffff; }

/* Layered "lift" shadow + tactile press effect, matching the Admin panel's own premium button language */
.fda-btn-3d {
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 8px 0 -2px var(--fda-navy-dark), 0 16px 24px -10px rgba(11,27,58,0.5);
}
.fda-btn-3d:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 9px 0 -2px var(--fda-navy-dark), 0 20px 28px -10px rgba(11,27,58,0.55); }
.fda-btn-3d:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 2px 0 -2px var(--fda-navy-dark), 0 6px 12px -6px rgba(11,27,58,0.4); }

.fda-btn-ghost-navy {
  background: #fff;
  border: 1.5px solid var(--fda-border);
  color: var(--fda-navy);
  font-weight: 600;
  border-radius: .7rem;
  padding: .75rem 1.6rem;
  transition: border-color .15s ease, background .15s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
}
.fda-btn-ghost-navy:hover { border-color: var(--fda-navy); background: var(--fda-bg-alt); color: var(--fda-navy); }

.fda-auth-divider {
  display: flex; align-items: center; text-align: center;
  margin: 1.5rem 0 1rem; color: var(--fda-muted); font-size: .78rem;
}
.fda-auth-divider::before, .fda-auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--fda-border); }
.fda-auth-divider span { padding: 0 .85rem; white-space: nowrap; }

.fda-auth-trust-line {
  text-align: center; font-size: .76rem; color: var(--fda-muted);
  margin: 1.25rem 0 0; display: flex; align-items: center; justify-content: center; gap: .35rem;
}
.fda-auth-trust-line i { color: #15803d; }

/* Desktop ≥1100px — the full 54/46 split the brief specifies. */
@media (min-width: 1100px) {
  .fda-auth-shell { grid-template-columns: 54% 46%; }
}

/* Tablet 768–1099px — narrower hero column (48/52), content scales down a
   notch so the headline/paragraph/cards still fit comfortably. The ticket
   card is dropped at this width rather than shrunk: three feature cards
   plus the ticket genuinely don't both fit in a column this narrow without
   overlapping — full-width feature cards are the more important content
   of the two. */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .fda-auth-shell { grid-template-columns: 48% 52%; }
  .fda-auth-hero { padding: 3rem 2rem 3rem 2.5rem; }
  .fda-auth-hero-title { font-size: 2.5rem; }
  .fda-auth-hero-sub { font-size: 1rem; }
  .fda-auth-ticket { display: none; }
}

/* Mobile <768px — single column; photo dropped (a busy background behind a
   short stacked header reads as noise, not premium, at this width); ticket
   and flightpath removed entirely; login card goes full-width. */
@media (max-width: 767.98px) {
  .fda-auth-shell { grid-template-columns: 1fr; }
  .fda-auth-hero {
    padding: 2.25rem 1.5rem 3.5rem;
    background: linear-gradient(160deg, var(--fda-navy) 0%, var(--fda-navy-dark) 100%);
  }
  .fda-auth-hero-title { font-size: 2rem; max-width: none; }
  .fda-auth-hero-sub { font-size: 1rem; margin-bottom: 1.5rem; }
  .fda-auth-feature strong { font-size: 1rem; }
  .fda-auth-feature p { font-size: .85rem; }
  .fda-auth-ticket, .fda-auth-flightpath, .fda-auth-plane { display: none; }
  .fda-auth-form-panel { padding: 1.25rem; background: transparent; }
  .fda-auth-form-card { padding: 2.25rem 1.5rem; border-radius: 1.25rem; }
  .fda-auth-card-head h2 { font-size: 2rem; }
}

@media (max-width: 400px) {
  .fda-auth-hero-title { font-size: 1.75rem; }
  .fda-auth-feature { padding: .7rem .85rem; min-height: auto; }
}

/* ---------- Registration page (wide multi-section form, mirrors Admin's own Agent registration layout) ---------- */

.fda-register-topbar { background: #fff; border-bottom: 1px solid var(--fda-border); padding: 1rem 0; }
.fda-register-topbar .fda-brand { color: var(--fda-navy); }

.fda-register-hero {
  background: linear-gradient(155deg, var(--fda-navy) 0%, var(--fda-navy-dark) 140%);
  padding: 3rem 0 8rem;
  position: relative;
  overflow: hidden;
}
.fda-register-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  color: var(--fda-teal); border-radius: 999px; padding: .4rem 1rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.fda-register-title { color: #fff; font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin: 1rem 0 .75rem; }
.fda-register-title .accent { color: var(--fda-teal); }
.fda-register-lede { color: rgba(255,255,255,.75); max-width: 640px; font-size: 1rem; }
.fda-trust-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
  color: #fff; border-radius: 999px; padding: .5rem 1rem; font-size: .82rem; font-weight: 500;
}
.fda-trust-pill i { color: var(--fda-teal); }

.fda-register-card-wrap { margin-top: -6rem; position: relative; z-index: 2; padding-bottom: 4rem; }

.fda-form-card {
  background: #fff;
  border: 1px solid var(--fda-border);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 24px 48px -24px rgba(11,27,58,.3);
  padding: 1.85rem 1.85rem 1.6rem;
  margin-bottom: 1.25rem;
}
.fda-form-section-header {
  display: flex; gap: .85rem; align-items: flex-start;
  margin-bottom: 1.35rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--fda-border);
}
.fda-form-section-icon {
  width: 44px; height: 44px; min-width: 44px; border-radius: .6rem;
  background: linear-gradient(150deg, #fff, var(--fda-bg-alt));
  color: var(--fda-navy); display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.8), 0 6px 14px -8px rgba(11,27,58,.25);
}
.fda-form-section-header h5 { font-size: 1.02rem; margin-bottom: .2rem; }
.fda-form-section-header p { color: var(--fda-muted); font-size: .84rem; margin: 0; }

.fda-field-label { font-size: .84rem; font-weight: 600; color: var(--fda-ink); margin-bottom: .4rem; display: block; }
.fda-field-label .req { color: #e11d48; margin-left: 2px; }

.fda-field-group { position: relative; }
.fda-field-group > i.fda-field-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--fda-muted); font-size: .92rem; pointer-events: none; z-index: 2;
}
.fda-field-group .form-control, .fda-field-group .form-select {
  padding-left: 2.5rem; background: var(--fda-bg-alt); border: 1px solid var(--fda-border);
  border-radius: 10px; padding-top: .65rem; padding-bottom: .65rem; font-size: .9rem;
}
/* Password fields with a show/hide toggle need room on the right too —
   without this the placeholder/typed text runs straight into the icon at
   any narrower field width (first caught on the login card at tablet
   widths, but it's the same layout everywhere this pattern is used). */
.fda-field-group:has(.fda-toggle-visibility) .form-control { padding-right: 2.75rem; }
.fda-field-group .form-control:focus, .fda-field-group .form-select:focus {
  border-color: var(--fda-navy); box-shadow: 0 0 0 3px rgba(11,27,58,.1); background: #fff;
}
.fda-field-group .fda-toggle-visibility {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--fda-muted); z-index: 2; padding: 0;
}

.fda-file-upload {
  border: 1.5px dashed var(--fda-border); border-radius: 10px; padding: .6rem .9rem;
  display: flex; align-items: center; gap: .65rem; background: var(--fda-bg-alt);
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.fda-file-upload:hover { border-color: var(--fda-navy); background: #fff; }
.fda-file-upload input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.fda-file-upload .fda-file-icon {
  width: 34px; height: 34px; min-width: 34px; border-radius: 8px; background: var(--fda-bg-alt); color: var(--fda-navy);
  display: flex; align-items: center; justify-content: center;
}
.fda-file-upload .fda-file-text strong { display: block; font-size: .82rem; color: var(--fda-ink); }
.fda-file-upload .fda-file-text span { font-size: .72rem; color: var(--fda-muted); }

.fda-pwd-checklist {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem;
  background: var(--fda-bg-alt); border: 1px solid var(--fda-border); border-radius: 10px;
  padding: .8rem 1rem; margin-top: .85rem;
}
.fda-pwd-check-item { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--fda-muted); transition: color .15s ease; }
.fda-pwd-check-item i { color: #cbd5e1; transition: color .15s ease; }
.fda-pwd-check-item.met { color: #15803d; }
.fda-pwd-check-item.met i { color: #22c55e; }

.fda-register-submit-bar {
  background: #fff; border-radius: 1rem; border: 1px solid var(--fda-border);
  padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem; box-shadow: 0 1px 2px rgba(16,24,40,.04);
}