/* ============================================================
   Rayna Tours · Visa Intake — design system
   ============================================================ */

:root {
  --orange: #F2600C;
  --orange-dark: #D14E04;
  --red: #E23744;
  --bg: #FAF7F2;
  --card: #FFFFFF;
  --ink: #1F2933;
  --muted: #6B7280;
  --line: #F3E8DF;
  --line-strong: #E8D9CB;
  --success: #0E9F6E;
  --error: #DC2626;
  --error-bg: #FEF2F2;
  /* "we filled this in, please check it" — amber, deliberately distinct from
     both the orange focus ring and the red error state */
  --check: #B45309;
  --check-line: #E9C46A;
  --check-bg: #FFFBEB;
  --shadow-sm: 0 1px 3px rgba(31, 41, 51, .07), 0 1px 2px rgba(31, 41, 51, .05);
  --shadow-md: 0 10px 30px -8px rgba(31, 41, 51, .16);
  --shadow-lg: 0 24px 60px -16px rgba(210, 78, 4, .28);
  --radius: 16px;
  --font-head: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-text-size-adjust: 100%;
}

main { flex: 1; width: 100%; }

h1, h2, h3 { font-family: var(--font-head); line-height: 1.2; }

button { font-family: inherit; cursor: pointer; }

/* ---------- Topbar ---------- */

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: transparent;
}
/* on other screens (cream page) keep a light frosted strip so the dark logo
   stays legible when content scrolls under it */
body:not([data-screen="welcome"]) .topbar {
  background: rgba(250, 247, 242, .85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
/* two logo variants: full-color (dark text) for light pages, reversed
   (white text, colored flags) for the dark twilight hero. Default state is the
   welcome/dark screen, so show the reversed one and hide the color one. */
.wordmark .wordmark-logo--color { display: none; }
.wordmark .wordmark-logo--reversed { display: block; }
body:not([data-screen="welcome"]) .wordmark .wordmark-logo--color { display: block; }
body:not([data-screen="welcome"]) .wordmark .wordmark-logo--reversed { display: none; }
/* the topbar is transparent, and it sits ABOVE the hero section — so the area
   behind it is the body. Darken the body on the welcome screen (matching the
   twilight top) so the transparent bar blends into the hero and the white logo
   stays visible. No overflow here → scrolling is unaffected. */
body[data-screen="welcome"] { background: #15123A; }

.topbar-inner {
  max-width: 1080px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
}

.wordmark {
  display: inline-flex; align-items: center;
  text-decoration: none;
}
.wordmark-logo {
  height: 38px; width: auto; display: block;
  transition: transform .18s ease;
}
.wordmark:hover .wordmark-logo { transform: scale(1.03); }

.topbar-chip {
  font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--orange-dark); background: #FDEBDD;
  padding: 6px 12px; border-radius: 999px;
}

/* ---------- Hero ---------- */

/* ---- Twilight welcome backdrop (full-bleed) ---- */

/* NOTE: scope to `section` — <body> also carries data-screen="welcome"
   (set by app.js), and an unqualified selector would put overflow:hidden
   on the body and break page scrolling. */
section[data-screen="welcome"] {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,
    #15123A 0%,
    #241653 30%,
    #3A1E63 58%,
    #4A2168 100%);
}
/* warm sunset bloom behind the headline + globe */
section[data-screen="welcome"]::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% 34%, rgba(242, 96, 12, .55) 0%, rgba(226, 55, 68, .22) 34%, transparent 62%);
}
/* melt the dark backdrop into the cream footer at the very bottom */
section[data-screen="welcome"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, var(--bg) 100%);
}

.hero {
  position: relative; overflow: visible; z-index: 1;
  background: transparent;
  color: #fff;
  padding: 96px 24px 130px;
  text-align: center;
}

.hero-inner { position: relative; max-width: 760px; margin: 0 auto; z-index: 2; }

.hero-eyebrow {
  display: inline-block;
  font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  padding: 7px 16px; border-radius: 999px; margin-bottom: 26px;
}

.hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 700; letter-spacing: -.01em;
  text-shadow: 0 2px 24px rgba(140, 30, 0, .25);
}
.hero h1 span { color: #FFE3C7; }

.hero-sub {
  margin: 20px auto 36px; max-width: 540px;
  font-size: 1.08rem; color: rgba(255, 255, 255, .92);
}

/* ---- twinkling stars ---- */
.hero-stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-stars i {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s, 2px); height: var(--s, 2px); border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px 1px rgba(255, 255, 255, .7);
  opacity: .85;
  animation: twinkle 3.2s ease-in-out infinite; animation-delay: var(--d, 0s);
}
@keyframes twinkle {
  0%, 100% { opacity: .25; transform: scale(.7); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* ---- rotating globe ---- */
.hero-globe {
  position: absolute; top: 50%; left: 50%;
  width: min(660px, 96vw); height: min(660px, 96vw);
  transform: translate(-50%, -46%);
  z-index: 1; pointer-events: none;
  opacity: .95;
  filter: drop-shadow(0 0 60px rgba(242, 96, 12, .45));
  animation: globe-float 9s ease-in-out infinite;
}
@keyframes globe-float {
  0%, 100% { transform: translate(-50%, -46%); }
  50%      { transform: translate(-50%, -49%); }
}

.globe-land { animation: globe-spin 34s linear infinite; }
@keyframes globe-spin { from { transform: translateX(0); } to { transform: translateX(-400px); } }

.globe-arc {
  fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.4;
  stroke-dasharray: 3 6; stroke-linecap: round;
  animation: arc-dash 5s linear infinite;
}
@keyframes arc-dash { to { stroke-dashoffset: -90; } }

.arc-dot {
  fill: #fff;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, .9));
  animation: arc-travel 5s ease-in-out infinite;
}
.arc-dot-2 { animation-duration: 6.5s; }
@keyframes arc-travel { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }

.city { fill: #fff; }
.city-ring {
  fill: none; stroke: #fff; stroke-width: 1.4;
  transform-box: fill-box; transform-origin: center;
  animation: city-pulse 2.6s ease-out infinite; animation-delay: var(--d, 0s);
}
@keyframes city-pulse {
  0%   { transform: scale(.5); opacity: .9; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* ---- plane + Rayna Tours banner ---- */
.banner-plane {
  position: absolute; top: 12%; left: 0; z-index: 4;
  display: flex; align-items: center;
  will-change: transform;
  animation: banner-fly 24s linear infinite;
}
@keyframes banner-fly {
  from { transform: translateX(-70vw); }
  to   { transform: translateX(125vw); }
}
.banner-flag {
  background: rgba(255, 255, 255, .95); color: var(--orange-dark);
  font-family: var(--font-head); font-weight: 700; font-size: .92rem;
  letter-spacing: .01em; white-space: nowrap;
  padding: 7px 16px; border-radius: 9px;
  box-shadow: 0 6px 18px -6px rgba(120, 20, 0, .5);
  transform-origin: right center;
  animation: banner-flutter 2.6s ease-in-out infinite;
}
@keyframes banner-flutter {
  0%, 100% { transform: rotate(-1.2deg) skewX(-3deg); }
  50%      { transform: rotate(1.2deg)  skewX(3deg); }
}
.banner-rope { width: 22px; height: 2px; background: rgba(255, 255, 255, .7); }
.banner-jet {
  width: 40px; height: 40px; fill: #fff;
  transform: rotate(90deg);
  filter: drop-shadow(0 4px 8px rgba(120, 20, 0, .4));
  animation: jet-bob 2.6s ease-in-out infinite;
}
@keyframes jet-bob {
  0%, 100% { transform: rotate(90deg) translateX(0); }
  50%      { transform: rotate(90deg) translateX(-3px); }
}

/* ---- drifting clouds ---- */
.hero-clouds { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.cloud {
  position: absolute; border-radius: 999px;
  background: rgba(255, 224, 196, .1);
  filter: blur(7px);
}
.cloud::before, .cloud::after {
  content: ''; position: absolute; border-radius: 999px; background: inherit;
}
.cloud-1 { top: 22%; width: 120px; height: 34px; animation: cloud-drift 40s linear infinite; }
.cloud-1::before { width: 60px; height: 60px; top: -26px; left: 18px; }
.cloud-1::after  { width: 44px; height: 44px; top: -14px; left: 66px; }
.cloud-2 { top: 58%; width: 90px; height: 26px; opacity: .8; animation: cloud-drift 55s linear infinite 8s; }
.cloud-2::before { width: 46px; height: 46px; top: -22px; left: 14px; }
.cloud-3 { top: 40%; width: 150px; height: 40px; opacity: .6; animation: cloud-drift 70s linear infinite 20s; }
.cloud-3::before { width: 70px; height: 70px; top: -32px; left: 30px; }
@keyframes cloud-drift {
  from { transform: translateX(-30vw); }
  to   { transform: translateX(120vw); }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: none; border-radius: 999px;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  padding: 14px 30px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn svg { width: 20px; height: 20px; }

.btn-hero {
  background: #fff; color: var(--orange-dark);
  box-shadow: 0 12px 32px -8px rgba(120, 20, 0, .45);
}
.btn-hero:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(120, 20, 0, .5); }

.btn-primary { background: var(--orange); color: #fff; box-shadow: var(--shadow-md); }
.btn-primary:hover { background: var(--orange-dark); transform: translateY(-1px); }
.btn-primary:disabled { opacity: .6; cursor: wait; transform: none; }

.btn-secondary {
  background: transparent; color: var(--orange-dark);
  border: 2px solid var(--orange); box-shadow: none;
}
.btn-secondary:hover { background: #FDEBDD; }

.btn-ghost {
  background: transparent; color: var(--muted); border: none;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  padding: 14px 22px; border-radius: 999px;
}
.btn-ghost:hover { color: var(--ink); background: var(--line); }

/* ---------- Sections / choice cards ---------- */

.choice-section { max-width: 880px; margin: -64px auto 0; padding: 0 24px 72px; position: relative; z-index: 3; }

.section-title { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; }
.section-sub { color: var(--muted); margin-top: 6px; }

.choice-section .section-title, .choice-section .section-sub { text-align: center; }
.choice-section .section-title { color: #fff; text-shadow: 0 2px 16px rgba(140, 30, 0, .3); }
.choice-section .section-sub { color: rgba(255, 255, 255, .9); margin-bottom: 28px; }

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.choice-card {
  position: relative; display: flex; align-items: flex-start; gap: 18px; text-align: left;
  background: var(--card); border: 2px solid transparent; border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-md);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.choice-card:hover { transform: translateY(-4px); border-color: var(--orange); box-shadow: var(--shadow-lg); }

.choice-icon {
  flex: 0 0 52px; width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  background: #FDEBDD; color: var(--orange-dark);
}
.choice-icon svg { width: 32px; height: 32px; }

.choice-body { display: flex; flex-direction: column; gap: 4px; }
.choice-body strong { font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; }
.choice-body span { color: var(--muted); font-size: .92rem; }

.choice-arrow {
  margin-left: auto; align-self: center; font-size: 1.3rem; color: var(--orange);
  transition: transform .18s ease;
}
.choice-card:hover .choice-arrow { transform: translateX(4px); }

.choice-badge {
  position: absolute; top: 14px; right: 14px;
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #8A5A00; background: #FFF3D6; border: 1px solid #F2DFAE;
  padding: 4px 10px; border-radius: 999px;
}

/* ---------- Country grid ---------- */

.page-head { max-width: 880px; margin: 0 auto; padding: 44px 24px 8px; }

.back-link {
  background: none; border: none; color: var(--muted);
  font-size: .95rem; font-weight: 500; padding: 4px 0; margin-bottom: 14px;
}
.back-link:hover { color: var(--orange-dark); }

.country-grid {
  max-width: 880px; margin: 20px auto 72px; padding: 0 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}

.country-card {
  display: flex; align-items: center; gap: 18px; text-align: left;
  background: var(--card); border: 2px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  position: relative; overflow: hidden;
}
.country-card:not(.disabled):hover { transform: translateY(-4px); border-color: var(--orange); box-shadow: var(--shadow-lg); }

/* Real SVG flags rather than emoji: Windows ships no glyphs for
   regional-indicator pairs, so Chrome there rendered "ID" instead of the
   Indonesian flag and the team saw a different page than macOS users. */
.country-flag {
  width: 46px; height: auto; flex: 0 0 auto; border-radius: 4px;
  box-shadow: 0 3px 6px rgba(31, 41, 51, .18), 0 0 0 1px rgba(31, 41, 51, .07);
}

.title-flag {
  width: 36px; height: auto; vertical-align: -3px; margin-right: 12px;
  border-radius: 3px; box-shadow: 0 0 0 1px rgba(31, 41, 51, .08);
}

.country-body { display: flex; flex-direction: column; gap: 3px; }
.country-body strong { font-family: var(--font-head); font-size: 1.18rem; font-weight: 600; }
.country-body span { color: var(--muted); font-size: .88rem; }

.country-chip {
  margin-top: 8px; align-self: flex-start;
  font-size: .74rem; font-weight: 600; color: var(--orange-dark);
  background: #FDEBDD; padding: 3px 10px; border-radius: 999px;
}

.country-card.disabled { cursor: not-allowed; }
.country-card.disabled .country-flag,
.country-card.disabled .country-body { filter: grayscale(1); opacity: .55; }

.ribbon {
  position: absolute; top: 14px; right: -34px; transform: rotate(38deg);
  background: var(--muted); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 40px;
}

/* ---------- Progress wizard ---------- */

.progress {
  position: sticky; top: 61px; z-index: 30;
  max-width: 880px; margin: 10px auto 0; padding: 14px 24px;
  display: flex; gap: 4px; overflow-x: auto;
  background: var(--bg);
}

.progress-step {
  flex: 1; min-width: 84px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: relative;
}
.progress-step::before {
  content: ''; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px;
  background: var(--line-strong);
}
.progress-step:first-child::before { display: none; }
.progress-step.done::before, .progress-step.active::before { background: var(--orange); }

.progress-dot {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; z-index: 1;
  font-family: var(--font-head); font-weight: 600; font-size: .85rem;
  background: #fff; color: var(--muted); border: 2px solid var(--line-strong);
  transition: all .2s ease;
}
.progress-step.active .progress-dot { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: 0 0 0 5px #FDEBDD; }
.progress-step.done .progress-dot { background: var(--orange); border-color: var(--orange); color: #fff; }

.progress-label {
  font-size: .74rem; font-weight: 600; color: var(--muted);
  white-space: nowrap;
}
.progress-step.active .progress-label { color: var(--orange-dark); }

/* ---------- Wizard card / form fields ---------- */

.wizard-card {
  max-width: 720px; margin: 22px auto 80px;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow-md);
  padding: 36px 40px;
}

.step-title { font-size: 1.3rem; font-weight: 600; margin-bottom: 4px; }
.step-sub { color: var(--muted); font-size: .92rem; margin-bottom: 26px; }

.field { margin-bottom: 20px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-row .field { margin-bottom: 20px; }

.field label {
  display: block; font-weight: 600; font-size: .9rem; margin-bottom: 7px;
}
.field label .req { color: var(--error); margin-left: 2px; }

.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: #FFFDFB; border: 1.5px solid var(--line-strong); border-radius: 12px;
  padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea {
  resize: vertical; min-height: 132px;
  line-height: 1.6; word-spacing: .12em;   /* long answers stay readable */
}

/* Month + year: two equal halves, never one wide and one narrow. */
.month-year { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Amount with its currency in front; the GBP equivalent underneath. */
.money-input { display: flex; align-items: stretch; }
.money-input .money-symbol {
  display: flex; align-items: center; padding: 0 12px; min-width: 56px;
  justify-content: center; font-weight: 600; color: var(--muted);
  border: 1.5px solid var(--line-strong); border-right: 0;
  border-radius: 12px 0 0 12px; background: var(--line);
}
.money-input input { border-radius: 0 12px 12px 0 !important; flex: 1; min-width: 0; }
.field .money-gbp { font-size: .82rem; color: var(--muted); margin-top: 5px; min-height: 1em; }

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(242, 96, 12, .13);
}

.field .help { font-size: .8rem; color: var(--muted); margin-top: 5px; }

.field.invalid input, .field.invalid select, .field.invalid textarea {
  border-color: var(--error); background: var(--error-bg);
}
.field .field-error {
  display: none; font-size: .82rem; color: var(--error); font-weight: 500; margin-top: 5px;
}
.field.invalid .field-error { display: block; }

/* repeat fields: one card per record */
.repeat-items { display: grid; gap: 12px; margin-bottom: 10px; }
.repeat-item { border: 1px solid var(--line-strong); border-radius: 12px; padding: 14px 16px 2px; background: var(--card); }
.repeat-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: var(--muted); font-size: .85rem; }
.repeat-remove { padding: 4px 10px; font-size: .8rem; }
.repeat-add { margin-top: 4px; }

/* Read off a document and not yet checked by a human. The tint is what makes
   OCR prefill safe: it says "verify me", not "done". It clears on first edit.
   An invalid field outranks it — a real error matters more than a reminder. */
.field.is-prefilled input, .field.is-prefilled select, .field.is-prefilled textarea {
  border-color: var(--check-line); background: var(--check-bg);
}
.field.is-prefilled.invalid input,
.field.is-prefilled.invalid select,
.field.is-prefilled.invalid textarea {
  border-color: var(--error); background: var(--error-bg);
}
.field .prefill-hint {
  font-size: .82rem; color: var(--check); font-weight: 500; margin-top: 5px;
}
.field.invalid .prefill-hint { display: none; }

/* the identity documents already attached in the first step */
.docs-attached {
  margin: -6px 0 18px; font-size: .88rem; color: var(--muted);
}

/* the portal's own published requirement list for the chosen visa */
.docs-required {
  margin: 0 0 20px; padding: 14px 16px; border-radius: 12px;
  background: #FFF8F0; border: 1px solid var(--line);
}
.docs-required-title { margin: 0 0 8px; font-size: .9rem; font-weight: 600; }
.docs-required ul { margin: 0; padding-left: 18px; }
.docs-required li {
  font-size: .85rem; color: var(--muted); line-height: 1.5; margin-bottom: 4px;
}

/* yes/no pills */
.bool-group { display: flex; gap: 10px; }
.bool-pill {
  flex: 0 0 auto; padding: 10px 26px; border-radius: 999px;
  border: 1.5px solid var(--line-strong); background: #FFFDFB;
  font-weight: 600; font-size: .95rem; color: var(--muted);
  transition: all .15s ease;
}
.bool-pill.selected { background: var(--orange); border-color: var(--orange); color: #fff; }
.bool-pill:not(.selected):hover { border-color: var(--orange); color: var(--orange-dark); }

/* filterable checkbox list (Oman's countries visited in the last 5 years) */
.multi-select {
  border: 1.5px solid var(--line-strong); border-radius: 12px;
  background: #FFFDFB; padding: 10px;
}
.field.invalid .multi-select { border-color: var(--error); background: var(--error-bg); }
.multi-select .multi-filter { margin-bottom: 8px; }
.multi-options {
  max-height: 190px; overflow-y: auto;
  border-top: 1px solid var(--line); padding-top: 6px;
}
.multi-option {
  display: flex; align-items: center; gap: 8px;
  font-weight: 400; font-size: .92rem; margin-bottom: 0;
  padding: 5px 6px; border-radius: 8px; cursor: pointer;
}
.multi-option:hover { background: #FFF7F0; }
.multi-option input { width: auto; margin: 0; accent-color: var(--orange); }
.multi-count { font-size: .82rem; color: var(--muted); margin-top: 8px; }

/* ---------- Documents step ---------- */

.dropzone-list { display: flex; flex-direction: column; gap: 16px; }

.dropzone {
  border: 2px dashed var(--line-strong); border-radius: 14px;
  padding: 20px; display: flex; align-items: center; gap: 16px;
  background: #FFFDFB; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.dropzone:hover, .dropzone.dragover {
  border-color: var(--orange); background: #FFF7F0;
  box-shadow: 0 0 0 4px rgba(242, 96, 12, .1);
}
.dropzone.invalid { border-color: var(--error); background: var(--error-bg); }
.dropzone.filled { border-style: solid; border-color: var(--success); background: #F4FBF8; }

.dz-icon {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; font-size: 22px;
  background: #FDEBDD;
}
.dropzone.filled .dz-icon { background: #DCF3EA; }

.dz-body { flex: 1; min-width: 0; }
.dz-body strong { display: block; font-size: .95rem; font-weight: 600; }
.dz-body .dz-help { font-size: .8rem; color: var(--muted); }
.dz-body .dz-file {
  font-size: .82rem; color: var(--success); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dz-body .dz-error { font-size: .82rem; color: var(--error); font-weight: 500; }

/* Documents upload while the form is being filled, so each zone shows its own
   progress rather than the whole form stalling at submit. */
.dropzone.uploading { border-style: solid; border-color: var(--orange); background: #FFF7F0; cursor: progress; }
.dropzone.uploading .dz-icon { background: #FDEBDD; }
.dz-body .dz-progress {
  display: block; height: 4px; margin-top: 6px; border-radius: 999px;
  background: rgba(242, 96, 12, .18); overflow: hidden;
}
.dz-body .dz-progress-bar {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--orange); transition: width .18s ease;
}

.dz-thumb {
  flex: 0 0 56px; width: 56px; height: 56px; border-radius: 10px;
  object-fit: cover; border: 1px solid var(--line-strong);
}

.dz-remove {
  flex: 0 0 auto; background: none; border: none; color: var(--muted);
  font-size: 1.1rem; padding: 6px; border-radius: 8px;
}
.dz-remove:hover { color: var(--error); background: var(--error-bg); }

.dz-req {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--orange-dark); background: #FDEBDD;
  padding: 3px 8px; border-radius: 999px; margin-left: 8px;
}

/* Typed supporting documents: a document-type dropdown that reveals the
   uploader once a type is chosen. */
.dz-body .dz-type {
  display: block; width: 100%; margin: 6px 0; padding: 8px 10px;
  font-size: .85rem; border: 1px solid var(--line-strong); border-radius: 10px;
  background: #fff; cursor: pointer;
}
.dz-body .dz-prompt { font-size: .8rem; color: var(--orange-dark); font-weight: 500; }
/* Before a type is picked the zone is a plain type-picker, not a drop target. */
.dropzone.needs-type { cursor: default; border-style: solid; }
.dropzone.needs-type:hover { border-color: var(--line-strong); background: #FFFDFB; box-shadow: none; }

/* ---------- Review step ---------- */

.review-group { margin-bottom: 22px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.review-head {
  display: flex; align-items: center; justify-content: space-between;
  background: #FFF7F0; padding: 12px 18px;
}
.review-head h4 { font-family: var(--font-head); font-size: .95rem; font-weight: 600; }
.review-edit {
  background: none; border: none; color: var(--orange-dark); font-weight: 600; font-size: .85rem;
}
.review-edit:hover { text-decoration: underline; }

.review-rows { padding: 8px 18px; }
.review-row {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 8px 0; border-bottom: 1px dashed var(--line);
  font-size: .9rem;
}
.review-row:last-child { border-bottom: none; }
.review-row dt { color: var(--muted); }
.review-row dd { font-weight: 600; text-align: right; max-width: 60%; overflow-wrap: break-word; }

.form-error-banner {
  display: none; background: var(--error-bg); border: 1px solid #FECACA; color: var(--error);
  border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; font-size: .9rem; font-weight: 500;
}
.form-error-banner.visible { display: block; }

/* ---------- Wizard nav ---------- */

.wizard-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line);
}

.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .4); border-top-color: #fff;
  animation: spin .7s linear infinite; display: none;
}
.btn.loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Success ---------- */

.success-card {
  max-width: 560px; margin: 70px auto 90px; padding: 48px 40px;
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow-md); text-align: center;
}

.success-check { width: 92px; height: 92px; margin: 0 auto 22px; }
.check-circle {
  stroke: var(--success); stroke-width: 4;
  stroke-dasharray: 202; stroke-dashoffset: 202;
  animation: draw .7s ease forwards;
}
.check-mark {
  stroke: var(--success); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 44; stroke-dashoffset: 44;
  animation: draw .45s ease .55s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.success-card h2 { font-size: 1.7rem; margin-bottom: 10px; }
.success-sub { color: var(--muted); max-width: 400px; margin: 0 auto 26px; }

.ref-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: #FFF7F0; border: 1.5px dashed var(--orange);
  border-radius: 12px; padding: 12px 18px; margin-bottom: 12px;
}
.ref-pill span {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 1.15rem; font-weight: 700; letter-spacing: .04em; color: var(--orange-dark);
}
.copy-btn { background: none; border: none; color: var(--orange-dark); padding: 4px; border-radius: 6px; }
.copy-btn:hover { background: #FDEBDD; }
.copy-btn svg { width: 18px; height: 18px; display: block; }

.success-note { font-size: .84rem; color: var(--muted); margin-bottom: 28px; }

/* ---------- Modal ---------- */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(31, 41, 51, .55); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 24px;
  animation: fade-in .2s ease;
}
@keyframes fade-in { from { opacity: 0; } }

.modal {
  background: var(--card); border-radius: 20px; box-shadow: var(--shadow-lg);
  max-width: 420px; width: 100%; padding: 38px 34px; text-align: center;
  animation: pop-in .25s cubic-bezier(.34, 1.4, .64, 1);
}
@keyframes pop-in { from { opacity: 0; transform: scale(.92) translateY(10px); } }

.modal-art { font-size: 52px; margin-bottom: 14px; }
.modal h3 { font-size: 1.3rem; margin-bottom: 10px; }
.modal p { color: var(--muted); font-size: .95rem; margin-bottom: 26px; }

/* ---------- Toast ---------- */

.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 70; background: var(--ink); color: #fff;
  padding: 12px 22px; border-radius: 999px; font-size: .9rem; font-weight: 500;
  box-shadow: var(--shadow-md);
  animation: toast-in .25s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } }

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  padding: 22px 24px; text-align: center;
  color: var(--muted); font-size: .84rem;
  background: var(--bg);
}

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .topbar-inner { padding: 12px 18px; }
  .wordmark-logo { height: 30px; }
  .topbar-chip { font-size: .7rem; padding: 5px 10px; }

  .choice-grid, .country-grid, .field-row { grid-template-columns: 1fr; }
  .field-row .field:last-child { margin-bottom: 0; }

  .wizard-card { padding: 26px 20px; margin: 16px 16px 60px; border-radius: 16px; }
  .success-card { margin: 40px 16px 60px; padding: 40px 26px; }

  .hero { padding: 64px 20px 150px; }
  .hero-sub { font-size: 1rem; }
  .hero-globe { width: min(520px, 112vw); height: min(520px, 112vw); opacity: .7; }
  .banner-flag { font-size: .82rem; padding: 6px 12px; }
  .banner-jet { width: 34px; height: 34px; }
  .choice-section { margin-top: -104px; padding-bottom: 56px; }
  .page-head { padding: 32px 20px 8px; }
  .country-grid { padding: 0 20px; }

  .progress { top: 57px; padding: 12px 18px; }
  .progress-label { display: none; }
  .progress-step { min-width: 40px; }

  .choice-card, .country-card { padding: 20px; }
  .review-row dd { max-width: 55%; }

  /* comfortable tap targets */
  .back-link { padding: 8px 0; }
  .bool-pill { padding: 12px 24px; }
}

@media (max-width: 420px) {
  .hero { padding: 52px 16px 140px; }
  .hero-eyebrow { margin-bottom: 20px; font-size: .74rem; }
  .choice-section { padding: 0 16px 48px; }
  .btn { padding: 13px 24px; font-size: .95rem; }
  .btn-hero { width: 100%; }
  .wizard-card { padding: 22px 16px; margin: 14px 12px 52px; }

  .choice-card { flex-direction: column; gap: 12px; }
  .choice-arrow { display: none; }
  .choice-badge { top: 12px; right: 12px; }

  .wizard-nav { flex-direction: column-reverse; gap: 12px; align-items: stretch; }
  .wizard-nav .btn, .wizard-nav .btn-ghost { width: 100%; }

  .review-row { flex-direction: column; gap: 2px; }
  .review-row dd { max-width: 100%; text-align: left; }

  .modal { padding: 30px 22px; }
  .toast {
    left: 16px; right: 16px; bottom: 16px;
    transform: none; text-align: center;
    animation: toast-in-mobile .25s ease;
  }
}

@keyframes toast-in-mobile { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .globe-land, .globe-arc, .arc-dot, .city-ring,
  .banner-plane, .banner-flag, .banner-jet, .cloud,
  .hero-globe, .hero-stars i {
    animation: none !important;
  }
  .hero-stars i { opacity: .7; }
  html { scroll-behavior: auto; }
  .banner-plane { display: none; }
}