/* ============================================================
   waitinglist.html only (25 Sep 2026). Loaded AFTER style-v2.css,
   which the homepage shares, so nothing here can touch index.html.

   Adam: "something nicer than plain square white boxes". The fields
   become dusk-glass: deep navy, inset into the panel, rounded, lit
   orange on focus - the same light-from-the-horizon idea as the
   panel's DEPTH block in style-v2.css.

   ⚠️ Fields stay OPAQUE (--input-bg): Chrome's :-webkit-autofill can
   only be flattened with an opaque inset shadow, so a translucent
   field would flash pale blue on autofill.
   Contrast on #10295A: white 13.9:1, placeholder #8EA0C2 5.6:1.
   ============================================================ */

:root {
  --input-bg:     #10295A;
  --input-bg-hi:  #133067;
  --input-ink:    #FFFFFF;
  --input-line:   rgba(201,211,230,.26);
  --radius:       10px;
}

.form__input {
  padding: 15px 16px;
  color: var(--input-ink);
  /* The artwork's six strips, parked at zero height on the field's foot:
     focus raises them to 3px. Same colours and order as the step rule. */
  background:
    linear-gradient(90deg,
      var(--s1) 0 21%, var(--s2) 21% 42%, var(--s3) 42% 59%,
      var(--s4) 59% 71%, var(--s5) 71% 87%, var(--s6) 87% 100%)
      left bottom / 100% 0 no-repeat,
    var(--input-bg);
  border: 1px solid var(--input-line);
  border-radius: var(--radius);
  box-shadow: inset 0 2px 6px rgba(0,6,22,.45), 0 1px 0 rgba(255,255,255,.05);
  caret-color: var(--peach);
  transition: border-color .18s ease, box-shadow .2s ease, background-size .28s cubic-bezier(.2,.7,.2,1);
}
.form__input::placeholder { color: #8EA0C2; opacity: 1; }
.form__input:hover { border-color: rgba(201,211,230,.42); }
.form__input:focus {
  outline: none;
  background-size: 100% 3px, auto;
  border-color: rgba(255,178,122,.70);
  box-shadow: inset 0 2px 6px rgba(0,6,22,.35), 0 0 0 3px rgba(255,178,122,.14);
}
.form__input--otp { color: var(--input-ink); }

.form__input:-webkit-autofill,
.form__input:-webkit-autofill:hover,
.form__input:-webkit-autofill:focus,
.form__input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
          box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--input-ink) !important;
  caret-color: var(--peach);
}

/* intl-tel-input: the flag + dial code sit INSIDE the navy field now,
   so they go light. The dropdown list keeps its white panel. */
.iti__selected-country { border-radius: var(--radius) 0 0 var(--radius); }
.iti__selected-dial-code { color: var(--input-ink); }
.iti__arrow { border-top-color: var(--mist); }
.iti__arrow--up { border-bottom-color: var(--mist); }
.iti__selected-country,
.iti__selected-country-primary { background: transparent; }
.iti__selected-country:hover,
.iti__selected-country-primary:hover,
.iti__selected-country[aria-expanded="true"],
.iti__selected-country[aria-expanded="true"] .iti__selected-country-primary { background: rgba(255,255,255,.06); }

/* Country dropdown, themed to the panel (Adam, 25 Sep 2026): a raised navy
   sheet one step lighter than the fields, white names, mist dial codes, and
   the hovered/keyboard row lit in the CTA orange. Overrides the white
   dropdown rules in style-v2.css as well as the library's own variables.
   Contrast: white on #13306A 12.4:1, #A9B8D6 dial code 7.0:1. */
.iti {
  --iti-dropdown-bg: #13306A;
  --iti-border-color: rgba(201,211,230,.22);
  --iti-hover-color: #1C4185;
  --iti-dialcode-color: #A9B8D6;
  --iti-search-icon-color: #A9B8D6;
  --iti-arrow-color: var(--mist);
}
.iti__dropdown-content {
  background: #13306A;
  border: 1px solid rgba(201,211,230,.22);
  border-radius: var(--radius);
  box-shadow: 0 24px 50px -18px rgba(0,6,22,.85), 0 0 0 1px rgba(0,6,22,.35);
}
.iti__search-input {
  color: var(--input-ink);
  background: #0F2A5C;
  border-bottom: 1px solid rgba(201,211,230,.18);
  border-radius: var(--radius) var(--radius) 0 0;
  caret-color: var(--peach);
}
.iti__search-input::placeholder { color: #8EA0C2; opacity: 1; }
.iti__search-input:focus { background: #112F66; }
.iti__search-input + .iti__country-list { border-top: 0; }
.iti__country-list {
  background: #13306A;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,211,230,.35) transparent;
}
.iti__country-list::-webkit-scrollbar { width: 8px; }
.iti__country-list::-webkit-scrollbar-thumb { background: rgba(201,211,230,.30); border-radius: 8px; }
.iti__country { color: var(--input-ink); }
.iti__country-name { color: var(--input-ink); }
.iti__dial-code { color: #A9B8D6; }
.iti__country { border-left: 3px solid transparent; }
.iti__country:hover,
.iti__country.iti__highlight {
  background: #1C4185;               /* lighter navy, white 9.6:1 */
  border-left-color: var(--orange);
}
.iti__country.iti__highlight .iti__dial-code { color: #FFD2B0; }
.iti__divider, .iti__country-list .iti__divider { border-bottom-color: rgba(201,211,230,.18); }
.iti__no-results { color: #A9B8D6; }
.iti__search-clear:hover,
.iti__search-clear:focus-visible { background: rgba(255,255,255,.08); }

/* Consent tick: a rounded navy box that fills orange when ticked. */
.form__check input {
  -webkit-appearance: none;
          appearance: none;
  width: 20px; height: 20px;
  margin: 0;
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  background: var(--input-bg);
  border: 1px solid rgba(201,211,230,.42);
  border-radius: 6px;
  box-shadow: inset 0 1px 3px rgba(0,6,22,.45);
  transition: background-color .15s ease, border-color .15s ease;
}
.form__check input::before {
  content: "";
  width: 10px; height: 6px;
  margin-top: -2px;
  border-left: 2px solid var(--night);
  border-bottom: 2px solid var(--night);
  transform: rotate(-45deg) scale(0);
  transition: transform .15s ease;
}
.form__check input:checked { background: var(--orange); border-color: var(--orange); }
.form__check input:checked::before { transform: rotate(-45deg) scale(1); }
.form__check input:focus-visible { outline: 2px solid var(--peach); outline-offset: 2px; }

/* Buttons and panel pick up the same rounding. */
.btn, .a11y-cta { border-radius: var(--radius); }
@media (min-width: 640px) and (min-aspect-ratio: 1/1) {
  .panel { border-radius: 18px; }
}

/* Landscape phones: style-v2.css compacts the fields; keep that height. */
@media (min-width: 640px) and (min-aspect-ratio: 1/1) and (max-height: 520px) {
  .form__input { padding: 10px 13px; }
}