/* ===========================================================================
 * order-form.css — the Mognetize OS trial ORDER FORM
 * ---------------------------------------------------------------------------
 * A static-CSS port of the Tube Profits Challenge "Upgrade to VIP" order modal
 * (tube-profits-challenge/src/components/vip-order/VipOrderModal.tsx +
 * VipOtoCard.tsx + the intl-tel-input overrides from RegistrationForm.tsx —
 * see Reports/assets/2026-09-21-start-round-2/research/tpc-modal/). Same shape
 * and rhythm, MOS colours instead of TPC's maroon:
 *   dark MOS hero (brand lockup → headline → violet bandeau) → bundle image
 *   straddling the dark/white seam → Select Product (4 plans) → Your Details
 *   (every field mandatory but "Apt, suite, unit", phone via intl-tel-input)
 *   → Payment Information (inline Stripe Elements) → Add-On Offers
 *   (cream/mint dashed "tear-here" coupon cards) → collapsible Summary →
 *   consent → green submit → trust line.
 *
 * Used by BOTH the homepage popup and the standalone /start page, so the two
 * can never drift apart.
 *
 * COLOUR RULE: every colour is declared ONCE in the token block below and
 * referenced with var() everywhere else (scripts/check-brand-tokens.mjs counts
 * raw hex literals and they may only ever go down).
 * ======================================================================== */

/* Tokens the money button needs OUTSIDE the form too: .mof-submit is used on
   /start's Option 2 card and the homepage bundle band, with no .mof ancestor. */
.mof,
.mof-submit {
  --mof-line-soft: #e2e8f0;
  --mof-slate-400: #94a3b8;
  --mof-white: #fff;
  --mof-green: #16a34a;
  --mof-green-bright: #22c55e;
  --mof-green-shadow: rgba(5, 46, 20, 0.3);
}

.mof {
  /* ── ink + chrome (slate scale) ─────────────────────────────────────── */
  --mof-ink: #0f172a;
  --mof-ink-mid: #1e293b;
  --mof-ink-soft: #334155;
  --mof-muted: #64748b;
  --mof-line: #cbd5e1;
  --mof-line-hair: #f1f5f9;
  --mof-tint: #f8fafc;

  /* ── brand (shared.css :root on /start; literal fallback on the home page,
       which loads this file WITHOUT shared.css) ───────────────────────── */
  --mof-violet: var(--violet-deep, #5a3fd0);
  --mof-violet-bright: var(--violet, #8163ff);
  --mof-bg-deep: var(--bg, #080818);
  /* 2026-09-21 PM: the bandeau was reference-gold; the brand has ONE spine. */
  --mof-band: var(--violet-deep, #5a3fd0);
  --mof-band-ink: #fff;
  --mof-ease: var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1));

  /* ── money green (the submit + the coupon rules) ────────────────────── */
  --mof-emerald: #16a34a;
  --mof-save-bg: #d1fae5;
  --mof-save-ink: #065f46;

  /* ── coupon cards (TPC cream / mint) ────────────────────────────────── */
  --mof-cream: #fff6e1;
  --mof-mint: #e7f7ec;

  /* ── states ─────────────────────────────────────────────────────────── */
  --mof-error: #dc2626;
  --mof-error-ink: #b91c1c;
  --mof-error-bg: #fef2f2;
  --mof-error-line: #fecaca;
  --mof-warn-bg: #fffbeb;
  --mof-warn-line: #fde68a;
  --mof-micro-ink: #5b5570;

  background: var(--mof-white);
  color: var(--mof-ink);
  font-family: Inter, system-ui, "Segoe UI", Roboto, sans-serif;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

/* ── HERO ─────────────────────────────────────────────────────────────── */
/* Its OWN background: a dark MOS gradient (never the TPC maroon). The
   oversized bottom padding reserves the room the bundle image pulls back
   into. overflow:hidden keeps the sliding bandeau off the scrollbar. */
.mof-hero {
  position: relative;
  overflow: hidden;
  padding: 24px 20px 96px;
  color: var(--mof-white);
  text-align: center;
  background:
    radial-gradient(closest-side at 50% 0, rgba(129, 99, 255, 0.4), transparent 72%),
    linear-gradient(180deg, var(--mof-bg-deep) 0%, var(--mof-violet) 190%);
}
@media (min-width: 640px) {
  .mof-hero { padding-bottom: 128px; }
}
.mof-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  color: var(--mof-white);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 20;
  transition: background 0.15s ease;
}
.mof-close:hover { background: rgba(255, 255, 255, 0.28); }

/* Brand lockup — mirrors public/index.html .brand (mark + wordmark). */
.mof-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 14px;
}
.mof-brand img { display: block; width: 30px; height: 30px; }
.mof-brand-txt {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--mof-white);
}
.mof-hero h2 {
  margin: 0 auto;
  max-width: 560px;
  font-size: 20px;
  font-family: Fraunces, Georgia, serif;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.012em;
}
@media (min-width: 640px) { .mof-hero h2 { font-size: 26px; } }

/* ── BANDEAU ──────────────────────────────────────────────────────────── */
/* A full-bleed violet strip inside the hero, under the headline. It slides in
   from the left every time the dialog opens AND on every plan switch — the
   .is-in class is toggled off/on by order-form.js to re-trigger it. */
.mof-bandeau {
  margin: 16px -20px 0;
  padding: 9px 20px;
  background: var(--mof-band);
  color: var(--mof-band-ink);
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
  transform: translateX(-100%);
  opacity: 0;
}
@media (min-width: 640px) { .mof-bandeau { font-size: 12.5px; } }
.mof-bandeau.is-in {
  transform: translateX(0);
  opacity: 1;
  transition:
    transform 600ms var(--mof-ease) 150ms,
    opacity 600ms var(--mof-ease) 150ms;
}
@media (prefers-reduced-motion: reduce) {
  .mof-bandeau,
  .mof-bandeau.is-in { transform: none; opacity: 1; transition: none; }
}

/* Bundle mockup straddling the dark→white seam: the hero reserved the room
   with its oversized bottom padding, this pulls back up into it. Keep this
   wrapper TRANSPARENT — a white background here would paint over the dark
   band and kill the straddle. */
.mof-bundle {
  margin-top: -80px;
  padding: 0 20px 8px;
  text-align: center;
  position: relative;
  z-index: 10;
}
@media (min-width: 640px) { .mof-bundle { margin-top: -112px; } }
.mof-bundle img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto;
}

/* ── SECTION LABELS ───────────────────────────────────────────────────── */
.mof-label { padding: 20px 20px 0; }
.mof-label span {
  display: block;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--mof-line-soft);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mof-ink-soft);
}
.mof-label .mof-label-opt {
  display: inline;
  border: 0;
  padding: 0;
  margin-left: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--mof-slate-400);
}
.mof-sec { padding: 8px 20px 16px; }

/* ── SELECT PRODUCT ───────────────────────────────────────────────────── */
.mof-product {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border: 1px solid var(--mof-line);
  border-radius: 8px;
  background: var(--mof-white);
}
.mof-radio {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 2px solid var(--mof-emerald);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mof-radio i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--mof-emerald);
  display: block;
}
.mof-product-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mof-product-name { font-size: 13px; font-weight: 700; color: var(--mof-ink); }
.mof-product-price { font-size: 12px; color: var(--mof-ink-soft); }

/* ── PLAN RADIOS (4 trials: Basic 14 · Pro 14 · Max 14 · 90-day bundle) ── */
.mof-plans { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 640px) { .mof-plans { grid-template-columns: 1fr 1fr; } }
.mof-plan-option {
  position: relative;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mof-plan-input {
  position: absolute;
  top: 50%;
  left: 13px;
  width: 16px;
  height: 16px;
  margin: -8px 0 0;
  opacity: 0;
  cursor: pointer;
}
.mof-plan-option .mof-radio i { opacity: 0; transition: opacity 0.12s ease; }
.mof-plan-input:checked ~ .mof-radio i { opacity: 1; }
.mof-plan-input:focus-visible ~ .mof-radio { outline: 2px solid var(--mof-violet); outline-offset: 2px; }
@supports selector(:has(*)) {
  .mof-plan-option:has(.mof-plan-input:checked) {
    border-color: var(--mof-violet);
    box-shadow: 0 0 0 1px var(--mof-violet);
  }
}

/* ── FORM FIELDS ──────────────────────────────────────────────────────── */
.mof-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 640px) { .mof-grid { grid-template-columns: 1fr 1fr; } }
.mof-fld { position: relative; }
.mof-fld.wide { grid-column: 1 / -1; }
@media (max-width: 639px) { .mof-fld.wide { grid-column: auto; } }
.mof-fld > svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--mof-slate-400);
  pointer-events: none;
  z-index: 2;
}
.mof-fld input,
.mof-fld select {
  width: 100%;
  padding: 12px 12px 12px 36px;
  border: 1px solid var(--mof-line);
  border-radius: 8px;
  background: var(--mof-white);
  color: var(--mof-ink);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mof-fld select {
  padding-right: 32px;
  appearance: none;
  cursor: pointer;
}
.mof-fld input::placeholder { color: var(--mof-slate-400); }
.mof-fld input:focus,
.mof-fld select:focus {
  outline: none;
  border-color: var(--mof-violet);
  box-shadow: 0 0 0 3px rgba(90, 63, 208, 0.25);
}
/* TPC error styling: the offending field goes red and keeps a red ring on
   focus, and a per-field message appears under it. */
.mof-fld.invalid input,
.mof-fld.invalid select,
.mof-fld.invalid .iti input {
  border-color: var(--mof-error);
  background: var(--mof-error-bg);
}
.mof-fld.invalid input:focus,
.mof-fld.invalid select:focus {
  border-color: var(--mof-error);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}
.mof-fld-msg {
  display: none;
  margin: 4px 0 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--mof-error-ink);
}
.mof-fld.invalid .mof-fld-msg { display: block; }
.mof-fld .mof-chev {
  position: absolute;
  right: 12px;
  top: 21px;
  transform: translateY(-50%);
  color: var(--mof-slate-400);
  font-size: 12px;
  pointer-events: none;
}

/* ── PHONE (intl-tel-input v28, vendored in ./vendor/intl-tel-input) ───── */
/* The plugin wraps the <input> in .iti and injects its own country button, so
   the field's own leading icon is dropped and the plugin's button takes that
   slot. Sizes match the other fields exactly (44px, 8px radius). */
.mof-fld--tel > svg { display: none; }
.mof-fld--tel .iti { width: 100%; display: block; }
.mof-fld--tel .iti input,
.mof-fld--tel input[type="tel"] { padding-left: 12px; }
.mof-fld--tel .iti--separate-dial-code input,
.mof-fld--tel .iti--allow-dropdown input { padding-left: 0; }
.mof-fld--tel .iti__country-container { padding: 1px; }
.mof-fld--tel .iti__selected-country {
  background: transparent;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}
.mof-fld--tel .iti__selected-dial-code { font-size: 14px; color: var(--mof-ink); }
.mof-fld--tel .iti__dropdown-content,
.mof-fld--tel .iti__country-list {
  border-radius: 8px;
  border-color: var(--mof-line);
  box-shadow: 0 12px 32px rgba(8, 4, 54, 0.18);
}
.mof-fld--tel .iti__search-input { font-family: inherit; font-size: 14px; }
.mof-fld--tel .iti__country-name,
.mof-fld--tel .iti__dial-code { font-size: 13.5px; }

/* ── PAYMENT ──────────────────────────────────────────────────────────── */
.mof-card {
  padding: 13px 16px;
  border: 1px solid var(--mof-line);
  border-radius: 8px;
  background: var(--mof-white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mof-card.focused {
  border-color: var(--mof-violet);
  box-shadow: 0 0 0 3px rgba(90, 63, 208, 0.25);
}
.mof-card-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--mof-warn-line);
  border-radius: 8px;
  background: var(--mof-warn-bg);
  color: var(--mof-violet);
  font-size: 12.5px;
}

/* ── OTO CARDS (TPC "tear-here coupon") ───────────────────────────────── */
.mof-otos { padding: 8px 20px 16px; display: grid; gap: 12px; }
.mof-oto {
  border: 2px dashed var(--mof-green);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.mof-oto.selected {
  box-shadow: 0 0 0 2px var(--mof-white), 0 0 0 4px var(--mof-emerald);
}
.mof-oto-badge {
  padding: 8px 10px;
  background: var(--mof-green);
  color: var(--mof-white);
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  animation: mof-blink 1.4s ease-in-out infinite;
}
@keyframes mof-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .mof-oto-badge { animation: none; }
}
.mof-oto-body {
  background: var(--mof-cream);
  cursor: pointer;
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
}
.mof-oto.bundle .mof-oto-body { background: var(--mof-mint); }
.mof-oto-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 16px 0;
}
.mof-oto-chev {
  flex: 0 0 auto;
  margin-top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--mof-green);
  color: var(--mof-white);
  font-size: 12px;
  font-weight: 900;
  line-height: 20px;
  text-align: center;
}
.mof-oto-check {
  flex: 0 0 auto;
  margin-top: 2px;
  width: 20px;
  height: 20px;
  border: 2px solid var(--mof-slate-400);
  border-radius: 4px;
  background: var(--mof-white);
  color: transparent;
  font-size: 13px;
  font-weight: 900;
  line-height: 17px;
  text-align: center;
  transition: all 0.15s ease;
}
.mof-oto.selected .mof-oto-check {
  background: var(--mof-emerald);
  border-color: var(--mof-emerald);
  color: var(--mof-white);
}
.mof-oto-title {
  flex: 1;
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--mof-ink);
}
@media (min-width: 640px) { .mof-oto-title { font-size: 15px; } }
.mof-oto-price {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
  line-height: 1.25;
}
.mof-oto-price b {
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: var(--mof-green);
}
.mof-oto-price s {
  display: block;
  font-size: 11px;
  color: var(--mof-slate-400);
}
.mof-oto-main { padding: 12px 16px 16px; }
.mof-oto-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}
@media (min-width: 640px) {
  .mof-oto-split { grid-template-columns: 112px 1fr; gap: 16px; }
}
.mof-oto-split img {
  display: block;
  width: 96px;
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--mof-line-soft);
  object-fit: cover;
}
@media (min-width: 640px) {
  .mof-oto-split img { width: 112px; margin: 0; }
}
.mof-oto-blurb { margin: 0; font-size: 13px; line-height: 1.65; color: var(--mof-ink-mid); }
.mof-oto-hook {
  font-weight: 800;
  color: var(--mof-error-ink);
  text-decoration: underline;
  text-decoration-color: var(--mof-error-ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.mof-oto-cta { margin: 8px 0 0; font-size: 12.5px; font-weight: 700; color: var(--mof-ink); }

/* ── SUMMARY ──────────────────────────────────────────────────────────── */
.mof-sum-wrap { padding: 0 20px 8px; }
.mof-sum-toggle {
  color: var(--mof-ink);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--mof-line);
  border-radius: 8px;
  background: var(--mof-white);
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}
.mof-sum-toggle:hover { background: var(--mof-tint); }
.mof-sum-toggle .t { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.mof-sum-toggle .v { display: flex; align-items: center; gap: 8px; }
.mof-sum-toggle .v b { font-size: 15px; font-weight: 900; }
.mof-sum-toggle .v i {
  font-style: normal;
  color: var(--mof-muted);
  transition: transform 0.2s ease;
}
.mof-sum-toggle[aria-expanded="true"] .v i { transform: rotate(180deg); }
.mof-sum {
  margin-top: 8px;
  border: 1px solid var(--mof-line-soft);
  border-radius: 8px;
  overflow: hidden;
  font-size: 13px;
  color: var(--mof-ink-soft);
  background: var(--mof-white);
}
.mof-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--mof-line-hair);
}
.mof-sum-row:first-child { border-top: 0; padding: 12px 16px; }
.mof-sum-row .lbl { padding-right: 8px; }
.mof-sum-row .amt { text-align: right; white-space: nowrap; }
.mof-sum-row .amt b { font-weight: 700; color: var(--mof-ink); }
.mof-sum-row .amt s { margin-left: 8px; font-size: 11px; color: var(--mof-slate-400); }
.mof-sum-violet { font-weight: 700; color: var(--mof-violet); }
.mof-sum-free { font-weight: 700; color: var(--mof-green); }
.mof-sum-save { margin-top: 6px; text-align: right; }
.mof-sum-save span {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--mof-save-bg);
  color: var(--mof-save-ink);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mof-sum-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 16px;
  border-top: 2px solid var(--mof-line);
  background: var(--mof-tint);
}
.mof-sum-total .lbl { font-size: 14px; font-weight: 700; color: var(--mof-ink); }
.mof-sum-total .amt { font-size: 18px; font-weight: 900; color: var(--mof-ink); }
.mof-sum-foot {
  padding: 4px 16px 12px;
  background: var(--mof-tint);
  font-size: 11px;
  color: var(--mof-muted);
}
.mof-sum-foot b { color: var(--mof-ink-soft); }

/* ── CONSENT + SUBMIT ─────────────────────────────────────────────────── */
.mof-foot { padding: 12px 20px 24px; }
.mof-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--mof-ink-soft);
  cursor: pointer;
}
.mof-consent input {
  flex: 0 0 auto;
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--mof-emerald);
  cursor: pointer;
}
.mof-consent a { color: var(--mof-violet); font-weight: 500; }
.mof-consent b { color: var(--mof-ink); font-weight: 700; }
.mof-error {
  display: none;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid var(--mof-error-line);
  border-radius: 8px;
  background: var(--mof-error-bg);
  color: var(--mof-error-ink);
  font-size: 13px;
}
.mof-error.show { display: block; }
.mof-submit {
  display: block;
  width: 100%;
  padding: 16px 12px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--mof-green-bright) 0%, var(--mof-green) 100%);
  color: var(--mof-white);
  text-shadow: 0 1px 3px rgba(5, 46, 20, 0.62), 0 0 2px rgba(5, 46, 20, 0.42);
  font-family: inherit;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 3px 9px var(--mof-green-shadow), 0 14px 32px -6px rgba(34, 197, 94, 0.68);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
@media (min-width: 640px) { .mof-submit { font-size: 19px; } }
.mof-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -4px rgba(22, 163, 74, 0.6);
}
.mof-submit:disabled {
  background: var(--mof-line-soft);
  color: var(--mof-slate-400);
  text-shadow: none;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.mof-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--mof-muted);
}
.mof-trust svg { width: 14px; height: 14px; }
.mof-micro { font-size: 12.5px; color: var(--mof-micro-ink); text-align: center; margin: 8px 0 0; }

/* POLISH 2026-09-13: press feedback on the money button (Emil: buttons must feel responsive). */
.mof-submit:not(:disabled) { transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), background 0.15s ease, box-shadow 0.15s ease; }
.mof-submit:active:not(:disabled) { transform: scale(0.98); }