: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;
  border-bottom: 1px solid rgba(245, 179, 1, 0.12);
  box-shadow: 0 4px 24px -12px rgba(0, 0, 0, 0.35);
}

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

.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); }

/* Shown instead of Sign In/Create Account on the auth/login page itself (see
   _SiteNav's "compact" mode) — a second "Sign In" CTA pointing at the same
   page the visitor is already on would be redundant. */
.fda-nav-tagline { color: rgba(255, 255, 255, 0.55); font-size: .9rem; padding-left: 1rem; white-space: nowrap; }

/* White nav variant (currently just the Home page — see ViewData["LightNav"]
   in _Layout.cshtml). Overrides the shared .fda-navbar's dark styling rather
   than a second markup variant, so nav structure/JS stays identical. */
.fda-light-nav-body .fda-navbar {
  background: #ffffff;
  border-bottom: 1px solid var(--fda-border);
  box-shadow: 0 2px 12px -6px rgba(11, 27, 58, 0.08);
}
.fda-light-nav-body .fda-navbar .nav-link { color: var(--fda-ink); }
.fda-light-nav-body .fda-navbar .nav-link:hover { color: var(--fda-navy); }
.fda-light-nav-body .fda-nav-tagline { color: var(--fda-muted); }
.fda-light-nav-body .fda-btn-outline {
  border-color: var(--fda-navy);
  color: var(--fda-navy) !important;
}
.fda-light-nav-body .fda-btn-outline:hover { background: var(--fda-bg-alt); }
.fda-light-nav-body .navbar-toggler-icon { filter: invert(1); }
.fda-light-nav-body .dropdown-toggle.nav-link { color: var(--fda-ink); }

/* ---------- 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;
}
.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-body only wraps _AuthLayout pages (Login/Register/RegisterPending).
   The Home page's own signed-out hero reuses this same .fda-auth-shell markup
   but through the plain _Layout.cshtml body instead — so the backdrop below
   lives on the shell itself, not the body, meaning it renders correctly in
   BOTH contexts. */
.fda-auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr; /* mobile-first: stacked until the tablet breakpoint below */
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--fda-navy) 0%, var(--fda-navy-dark) 100%);
}

/* Soft, heavily-blurred photo backdrop (real photo, Pexels free-use license,
   no visible airline branding) — reads as ambient navy/gold bokeh rather
   than a literal scene. inset:-60px + scale hides the blur's own feathered
   edge from ever showing inside the shell. */
.fda-auth-shell::before {
  content: '';
  position: absolute;
  inset: -60px;
  background: url('/images/hero-bg.jpg') center right / cover no-repeat;
  filter: blur(42px) saturate(1.15);
  transform: scale(1.08);
  z-index: 0;
}
.fda-auth-shell::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6,15,36,.88) 0%, rgba(6,15,36,.72) 38%, rgba(11,27,58,.6) 68%, rgba(11,27,58,.48) 100%);
  z-index: 1;
}

/* Nav-merge: ONLY on the pages that actually render .fda-auth-shell (Login —
   Register/RegisterPending use _AuthLayout too but have their own separate
   white topbar, so floating a transparent nav there would overlap it and go
   unreadable, hence the :has() scoping instead of a blanket .fda-auth-body
   rule). Float the nav, transparent, directly over the shell instead of
   stacking a solid block above it — the shell then starts at the very top
   of the page (header no longer occupies flow space) so the SAME blurred
   photo shows straight through behind the nav too, with no seam. */
.fda-auth-body:has(.fda-auth-shell) header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
}
.fda-auth-body:has(.fda-auth-shell) .fda-navbar {
  background: transparent;
  border-bottom: none;
  box-shadow: none;
}
/* Only here (nav is absolutely positioned, out of flow) does the hero need
   extra top clearance so its badge/headline don't sit under the floating nav. */
.fda-auth-body:has(.fda-auth-shell) .fda-auth-hero { padding-top: 7rem; }

.fda-auth-hero {
  position: relative;
  z-index: 2;
  color: #ffffff;
  padding: 3.5rem 2.5rem 3rem 3.5rem;
  /* Block flow, not flex-centered — content anchors near the top instead
     of floating in the vertical middle of a tall viewport. */
  display: block;
}

/* Ambient glow orbs — pure depth/atmosphere, no content */
.fda-auth-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 1;
}
.fda-auth-glow-1 {
  width: 22rem; height: 22rem;
  background: radial-gradient(circle, rgba(245,179,1,0.24), 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.3), 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-hero-plane-icon {
  position: absolute;
  top: 2.25rem;
  right: 3rem;
  z-index: 2;
  color: rgba(255, 255, 255, 0.65);
  font-size: 1.35rem;
  transform: rotate(45deg);
}

.fda-auth-hero-inner { max-width: 34rem; position: relative; z-index: 2; }

.fda-auth-badge {
  display: block;
  color: var(--fda-teal);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.fda-auth-hero-title {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 2.9rem; /* ~46px */
  line-height: 1.15;
  letter-spacing: -.015em;
  margin-bottom: 1.1rem;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.3);
}

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

.fda-auth-hero-sub {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
  line-height: 1.55;
  margin-bottom: 2rem;
  max-width: 30rem;
}

/* Vertical list, icon left / text right — deliberately not the earlier 2x2
   grid: this reference's feature list reads as a simple scannable stack. */
.fda-auth-feature-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: 2rem;
}

.fda-auth-feature {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.fda-auth-feature-icon {
  flex: none;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(245, 179, 1, 0.2), rgba(245, 179, 1, 0.04));
  border: 1px solid rgba(245, 179, 1, 0.4);
  color: var(--fda-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  box-shadow: 0 6px 16px -8px rgba(245, 179, 1, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.fda-auth-feature strong { display: block; font-size: 1.05rem; margin-bottom: .2rem; }
.fda-auth-feature p { font-size: .86rem; color: rgba(255, 255, 255, 0.6); margin: 0; line-height: 1.4; }

/* Stats strip — every figure here must be real (see _AuthHero.cshtml's own
   comment): a live destinations count plus two honest qualitative badges,
   not invented "500+ agencies" style numbers. */
.fda-auth-stats {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(6, 15, 36, 0.5);
  border-radius: 1.1rem;
  padding: 1.5rem 1.75rem;
}
.fda-auth-stat { text-align: left; }
.fda-auth-stat strong { display: block; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--fda-teal); }
.fda-auth-stat span { display: block; font-size: .78rem; color: rgba(255, 255, 255, 0.65); margin-top: .2rem; }

/* Transparent — the shell's own blurred backdrop (::before/::after) shows
   straight through, so only the card itself reads as a solid white surface. */
.fda-auth-form-panel {
  display: flex;
  flex-direction: column;
  align-items: center; /* vertical centering via flex, not top:50%/translateY */
  justify-content: center;
  padding: 3rem; /* 48px */
  position: relative;
  z-index: 2;
}

/* A genuine floating card — elevated off the panel with a soft shadow, plain
   white (no accent chrome), matching the reference's clean partner-login card. */
.fda-auth-form-card {
  width: 100%;
  max-width: 27rem; /* 432px */
  background: #ffffff;
  border-radius: 1.75rem;
  padding: 2.5rem 2.25rem;
  box-shadow: 0 30px 60px -28px rgba(11, 27, 58, 0.22), 0 6px 16px -8px rgba(11, 27, 58, 0.08);
  position: relative;
}

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

.fda-auth-card-head { margin-bottom: 1.75rem; }
.fda-auth-card-head h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 2rem; /* ~32px */
  color: var(--fda-navy);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.fda-auth-card-head p { margin-top: .4rem; font-size: .95rem; color: var(--fda-muted); }

/* ---- 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 */
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--fda-muted);
}
.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-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-navy:hover { transform: translateY(-1px); }

.fda-btn-navy {
  background: linear-gradient(135deg, var(--fda-navy), var(--fda-navy-dark));
  border: none;
  color: #ffffff;
  font-weight: 600;
  border-radius: .7rem;
  padding: .8rem 1.6rem;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  box-shadow: 0 14px 26px -14px rgba(11, 27, 58, 0.55);
}

.fda-btn-navy:hover {
  background: linear-gradient(135deg, var(--fda-navy-dark), #04091a);
  color: #ffffff;
  box-shadow: 0 18px 32px -14px rgba(11, 27, 58, 0.65);
}

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

.fda-auth-signup-line { text-align: center; font-size: .9rem; color: var(--fda-muted); margin: 1.75rem 0 .25rem; }
.fda-auth-signup-line a { color: var(--fda-navy); font-weight: 700; }
.fda-auth-signup-line a:hover { color: var(--fda-teal); }

.fda-auth-page-footer { margin-top: 2.5rem; text-align: center; width: 100%; max-width: 27rem; }
.fda-auth-footer-links { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; font-size: .82rem; }
.fda-auth-footer-links a { color: rgba(255, 255, 255, 0.7); }
.fda-auth-footer-links a:hover { color: var(--fda-teal); }
.fda-auth-footer-links span { color: rgba(255, 255, 255, 0.25); }
.fda-auth-footer-copy { margin: .6rem 0 0; font-size: .78rem; color: rgba(255, 255, 255, 0.5); }

/* 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/stats still fit comfortably. */
@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; }
}

/* Mobile <768px — single column; photo dropped (a busy background behind a
   short stacked header reads as noise, not premium, at this width); 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; }
  .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-form-panel { padding: 1.75rem 1.1rem; }
  .fda-auth-form-card { padding: 1.75rem 1.5rem; border-radius: 1.25rem; }
  .fda-auth-card-head h2 { font-size: 1.75rem; }
}

@media (max-width: 480px) {
  .fda-auth-stats { flex-direction: column; gap: .1rem; }
  .fda-auth-stat { border-bottom: 1px solid rgba(255, 255, 255, 0.12); padding: .6rem 0; }
  .fda-auth-stat:last-child { border-bottom: none; }
}

@media (max-width: 400px) {
  .fda-auth-hero-title { font-size: 1.75rem; }
  .fda-auth-feature-icon { width: 2.35rem; height: 2.35rem; font-size: .9rem; }
}

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