/* ========== Theme tokens (mirrors figma defaults) ========== */
:root {
    --color-bg-from: #f9fafb;        /* gray-50 */
    --color-bg-to: #f3f4f6;          /* gray-100 */
    --color-card: #ffffff;
    --color-border: #e5e7eb;         /* gray-200 */
    --color-border-input: #d1d5db;   /* gray-300 */
    --color-text: #111827;           /* gray-900 */
    --color-text-muted: #374151;     /* gray-700 */
    --color-text-soft: #6b7280;      /* gray-500 */
    --color-required: #ef4444;       /* red-500 */
    --color-primary: #2563eb;        /* blue-600 */
    --color-primary-hover: #1d4ed8;  /* blue-700 */
    --color-primary-active: #1e40af; /* blue-800 */
    --color-focus-ring: rgba(59, 130, 246, 0.5);
    --color-error: #dc2626;
    --color-error-bg: #fef2f2;
    --color-success-bg: #ecfdf5;
    --color-success-border: #a7f3d0;

    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);

    --radius-md: 0.5rem;
    --radius-input: 0.375rem;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;

    --max-content: min(75vw, 1440px); /* 75% of viewport, capped at 1440px */
    --nav-h: 56px;
}

/* Root font scales with viewport width. Min 16px (small screens),
   max 20px (cap on 2K+); all rem-based fonts and spacing follow.
   A brand may pin this to a fixed px via brandInterop (inline style wins) when
   it needs an exact text size instead of the responsive curve — e.g. San Marino
   mail "Tahoma 11" pins the root to 12.57px so body (0.875rem) renders at ~11px. */
html {
    font-size: clamp(16px, 12px + 0.3125vw, 20px);
    /* Stop iOS Safari from auto-inflating some text blocks in landscape
       (makes certain labels look larger than others). Keep CSS sizes as-is. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

* { box-sizing: border-box; }

/* ========== Navigation ========== */
.form-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--color-card);
    box-shadow: var(--shadow-md);
    z-index: 50;
    border-bottom: 1px solid var(--color-border);
}

.form-nav-inner {
    max-width: var(--max-content);
    margin: 0 auto;
    padding: var(--space-3) var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.form-nav-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.form-nav-links {
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.form-nav-link {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease;
}
.form-nav-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.form-nav-lang {
    display: flex;
    align-items: center;
}

.form-nav-lang-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 4px 26px 4px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    background: var(--color-card);
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%236b7280' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 9px 5px;
}
.form-nav-lang-select:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}
.form-nav-lang-select:hover {
    border-color: var(--color-primary);
}

/* ========== Page layout ========== */
.form-page {
    max-width: var(--max-content);
    /* Top margin clears the fixed nav; auto sides center horizontally. */
    margin: var(--nav-h) auto 0;
    padding: var(--space-6);

    /* Vertically center the form within the area BELOW the fixed nav. The box sits
       below the nav (margin-top) and has symmetric padding, so a short form gets
       equal space top and bottom. Taller-than-viewport content scrolls naturally.
       Use dvh (dynamic viewport height) so the page matches the *visible* window on
       iOS Safari — plain 100vh overshoots (excludes the toolbar) and forces a scroll
       that pushes the centered form off-center. vh is kept as an older-browser fallback. */
    min-height: calc(100vh - var(--nav-h));                  /* ultra-old fallback */
    min-height: calc(100dvh - var(--nav-h));                 /* dynamic viewport (Safari 15.4+) */
    min-height: calc(var(--app-vh, 100dvh) - var(--nav-h));  /* JS-measured window height (all browsers) */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* No fixed top nav (e.g. wizard layout) — use the full viewport, no nav offset. */
.form-page--flush {
    margin-top: 0;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: var(--app-vh, 100dvh);
}

.form-stack > * + * { margin-top: var(--space-5); }

/* ========== Wizard layout ========== */
.form-progress-card {
    background: var(--color-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-4);
}

.form-progress-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}

.form-progress-step {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.form-progress-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.form-progress-percent {
    font-size: 0.875rem;
    color: var(--color-text-soft);
}

.form-progress-track {
    width: 100%;
    height: 8px;
    background: var(--color-border);
    border-radius: 9999px;
    overflow: hidden;
}

.form-progress-fill {
    height: 100%;
    /* Top page-counter bar. Per-brand color, independent of the button color
       (--color-progress); falls back to the primary color when unset. */
    background: var(--color-progress, var(--color-primary));
    border-radius: 9999px;
    transition: width 0.3s ease;
}

/* Wizard section headers are static (no collapse). */
.form-section-header--static {
    cursor: default;
}
.form-section-header--static:hover {
    background: transparent;
}

/* Wizard footer: Previous on the left, Next/Submit on the right. */
.form-wizard-nav {
    background: var(--color-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-4) var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.btn-wizard-prev,
.btn-wizard-next,
.btn-wizard-submit {
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-input);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: 0;
    transition: background-color 0.15s ease;
}

.btn-wizard-prev {
    background: #e5e7eb;          /* gray-200 */
    color: var(--color-text-muted);
}
.btn-wizard-prev:hover { background: #d1d5db; /* gray-300 */ }
.btn-wizard-prev:disabled {
    background: #f3f4f6;
    color: var(--color-text-soft);
    cursor: not-allowed;
}

.btn-wizard-next {
    background: var(--color-primary);
    color: #ffffff;
}
.btn-wizard-next:hover { background: var(--color-primary-hover); }

.btn-wizard-submit {
    background: #16a34a;          /* green-600 */
    color: #ffffff;
}
.btn-wizard-submit:hover { background: #15803d; /* green-700 */ }
.btn-wizard-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* ========== Section card ========== */
.form-section {
    background: var(--color-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    scroll-margin-top: calc(var(--nav-h) + var(--space-4));
}

.form-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid var(--color-border);
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
    user-select: none;
}
.form-section-header:hover { background: #f9fafb; }

.form-section-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.form-chevron {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
    transition: transform 0.3s ease;
}
.form-chevron.open { transform: rotate(180deg); }

.form-section-body {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ========== 12-col grid rows ========== */
.form-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-4);
}

.form-cell {
    grid-column: span var(--col-span, 12) / span var(--col-span, 12);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

@media (max-width: 640px) {
    /* On phones the form should fill the window — drop the 75vw cap and
       shrink the page gutters so the card uses the full width. */
    :root {
        --max-content: 100%;
    }

    .form-page {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }

    .form-section-body {
        padding: var(--space-4);
    }

    .form-cell {
        grid-column: span 12 / span 12;
    }

    .form-nav-links {
        display: none;
    }

    .form-help-tooltip {
        left: auto;
        right: 0;
        transform: none;
        min-width: 0;
        max-width: calc(100vw - 32px);
        word-break: break-word;
    }
}

/* ========== Form controls ========== */
.form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.required {
    color: var(--color-required);
    margin-left: 2px;
}

.form-input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: 0.875rem;
    color: var(--color-text);
    background: var(--color-card);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-input);
    outline: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
    line-height: 1.4;
}
.form-input:focus {
    /* Keep a visible border on focus instead of transparent: iOS WebKit (incl. Chrome
       on iPad) often fails to repaint the box-shadow ring when iOS auto-scrolls the
       focused field above the keyboard, making a transparent-bordered field look like
       it vanished. A 1px colored border is the always-visible fallback; width stays 1px
       so there's no reflow/jump on any device. */
    border-color: var(--color-focus-ring);
    box-shadow: 0 0 0 2px var(--color-focus-ring);
}
.form-input:disabled {
    cursor: not-allowed;
    background-color: #f3f4f6;
    color: var(--color-text-soft);
    border-color: var(--color-border);
}

.form-textarea {
    resize: vertical;
    min-height: 96px;
}

.form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: calc(var(--space-3) + 20px);
}

.form-select:disabled {
    cursor: not-allowed;
    background-image: none;
    padding-right: var(--space-3);
    background-color: #f3f4f6;
    color: var(--color-text-soft);
    border-color: var(--color-border);
}

.form-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: 0.875rem;
}
.form-checkbox input { width: 16px; height: 16px; }
.form-checkbox.is-locked {
    cursor: not-allowed;
}
.form-checkbox.is-locked input {
    cursor: not-allowed;
    opacity: 0.5;
}

/* ========== Combobox (Country search) ========== */
.form-combobox {
    position: relative;
}

.form-combobox .form-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: calc(var(--space-3) + 20px);
}

.form-combobox-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    margin: 0;
    padding: var(--space-1) 0;
    list-style: none;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    box-shadow: var(--shadow-md);
    max-height: 240px;
    overflow-y: auto;
}

.form-combobox-option {
    padding: var(--space-2) var(--space-3);
    font-size: 0.875rem;
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
}
.form-combobox-option:hover { background: #f3f4f6; }
.form-combobox-option.selected {
    background: rgba(37, 99, 235, 0.08);
    color: var(--color-primary);
    font-weight: 500;
}

.form-combobox-empty {
    padding: var(--space-2) var(--space-3);
    font-size: 0.75rem;
    color: var(--color-text-soft);
}

.form-help {
    margin: var(--space-1) 0 0 0;
    font-size: 0.75rem;
    color: var(--color-text-soft);
}

.form-help-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--color-text-soft);
    color: var(--color-text-soft);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    user-select: none;
    vertical-align: middle;
}
.form-help-tip:hover { color: var(--color-text-muted); border-color: var(--color-text-muted); }

.form-help-tooltip {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    min-width: 180px;
    max-width: 260px;
    padding: 6px 8px;
    background: #111827;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    border-radius: 4px;
    box-shadow: var(--shadow-md);
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.12s ease, visibility 0s linear 0.12s;
    pointer-events: none;
}
.form-help-tip:hover .form-help-tooltip,
.form-help-tip:focus-visible .form-help-tooltip {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.12s ease, visibility 0s;
}

.form-error {
    margin: var(--space-1) 0 0 0;
    font-size: 0.75rem;
    color: var(--color-error);
}

.form-banner-error {
    background: var(--color-error-bg);
    border: 1px solid #fecaca;
    color: var(--color-error);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

/* ========== Submit ========== */
.form-submit-card {
    background: var(--color-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
}

.btn-submit {
    width: 100%;
    background: var(--color-primary);
    color: #ffffff;
    padding: var(--space-3) var(--space-6);
    border: 0;
    border-radius: var(--radius-input);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.05s ease;
}
.btn-submit:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-lg); }
.btn-submit:active { background: var(--color-primary-active); transform: translateY(1px); }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-input);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}
.btn-secondary:hover { background: rgba(37, 99, 235, 0.06); }

/* ========== Success card ========== */
.form-success-card {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
    text-align: center;
}
.form-success-card h2 { margin: 0 0 var(--space-2); }
.form-success-card p { margin: 0 0 var(--space-4); color: var(--color-text-muted); }

.form-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    max-width: var(--max-content);
    margin: 0 auto;
    padding: var(--space-6);
    color: var(--color-text-soft);
    /* Center within the FULL visible window, with no nav offset — during loading the
       nav isn't rendered yet, so subtracting --nav-h here would push the spinner ~28px
       above true center and mismatch the boot loader. Same window-sensitive height
       stack as elsewhere (vh fallback → dvh for iOS toolbar → JS-measured --app-vh). */
    min-height: 100vh;
    min-height: 100dvh;
    min-height: var(--app-vh, 100dvh);
}
.form-loading__spinner {
    /* Scale with the window: ~7% of the smaller viewport side, clamped 28–48px. */
    width: clamp(28px, 7vmin, 48px);
    height: clamp(28px, 7vmin, 48px);
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: form-loading-spin 0.8s linear infinite;
}
@keyframes form-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .form-loading__spinner { animation-duration: 1.6s; }
}

/* ========== Draft banner ========== */
/* Lives on the same row as the brand logo (logo top-right, this pill top-left),
   aligned to the form column's left edge. Fixed positioning takes it OUT of the
   document flow so it does NOT sit between the logo and the form, nor push the
   form down. Height matches the 84px logo top bar so the pill is vertically
   centered against the logo. */
.form-draft-banner {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--max-content);
    box-sizing: border-box;
    height: 84px;               /* match .form-topbar height (site.css) */
    padding: 0 var(--space-6);  /* match .form-topbar__inner so edges line up */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    z-index: 20;
    pointer-events: none;       /* only the pill is interactive; logo stays clickable */
}
.form-draft-pill {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: var(--radius-md);
    font-size: 13px;
    color: #78350f;
}
.form-draft-discard {
    border: none;
    background: transparent;
    color: #78350f;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    padding: 0;
}
.form-draft-discard:hover { color: #451a03; }

/* ========== Repeater (repeatable field group) ========== */
.form-repeater {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.form-repeater-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.015);
}
.form-repeater-grid {
    flex: 1 1 auto;
    min-width: 0;
}
.form-repeater-remove {
    flex: 0 0 auto;
    margin-top: 1.65rem; /* aligns with input top, below the labels */
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-input);
    background: transparent;
    color: var(--color-error);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.form-repeater-remove:hover {
    background: var(--color-error-bg);
    border-color: var(--color-error);
}
.form-repeater-add {
    align-self: flex-start;
}

@media (max-width: 640px) {
    .form-repeater-remove {
        margin-top: 0;
        align-self: flex-end;
    }
}