/* Self-hosted Roboto (latin, latin-ext). Replaces the render-blocking
   fonts.googleapis.com request. Variable font: one file per style covers all weights. */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/roboto-latin-ext-italic.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/roboto-latin-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/roboto-latin-ext-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/roboto-latin-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Self-hosted Poppins (latin, latin-ext) in the three weights the Pay3 artboards use: 300 for
   benefit copy, 400 for body and labels, 700 for headings. Static weights, not a variable font —
   Google publishes Poppins as one file per weight. Only the Pay3 variant asks for this family;
   accounts stays on Roboto, so nothing here is fetched on an accounts page. */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/poppins-latin-300.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/poppins-latin-ext-300.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-latin-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-latin-ext-400.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins-latin-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins-latin-ext-700.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Design tokens. A brand stylesheet (themes/*.css) overrides these, and a variant stylesheet
   (variants/*.css) overrides the brand's — both re-declare :root, so cascade order decides and
   MainLayout emits them in that order. */
:root {
    color-scheme: light;

    /* ── Colour ──────────────────────────────────────────────────────────── */
    --app-background: #ffffff;
    --heading-color: #2f2f2f;
    --muted-text: #6e6e6e;
    --hero-background: #ece3d0;
    --button-background: #111111;
    --button-text: #ffffff;
    --error-color: #9e1f1f;
    --error-background: #fff1f1;
    --error-text: #5a2020;
    --error-border: #f2c8c8;
    --success-background: #f0f8f1;
    --success-text: #1b4d20;
    --success-border: #c6e0c9;

    /* ── Typeface ────────────────────────────────────────────────────────── */
    /* Roboto is the only face this kit ships (see the @font-face rules above). A brand or variant
       that wants a different one overrides this token; nothing else in the kit names a family. */
    --font-family-base: "Roboto", sans-serif;

    /* ── Type scale ──────────────────────────────────────────────────────── */
    --font-size-3xs: 0.65rem;
    --font-size-2xs: 0.7rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8rem;
    --font-size-md: 0.85rem;
    --font-size-lg: 0.9rem;
    --font-size-xl: 0.95rem;
    --font-size-2xl: 1rem;
    --font-size-3xl: 1.05rem;
    --font-size-4xl: 1.9rem;
    --font-size-5xl: 2rem;

    /* Roles a variant restyles without disturbing the scale itself. */
    --font-size-display: var(--font-size-4xl);
    --font-size-heading: var(--font-size-3xl);
    --font-size-action: var(--font-size-xs);

    --line-height-tight: 1.2;
    --line-height-snug: 1.35;
    --line-height-body: 1.48;
    --line-height-relaxed: 1.58;

    /* ── Spacing ─────────────────────────────────────────────────────────── */
    --space-2xs: 0.3rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.25rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
    --space-3xl: 2.5rem;

    /* ── Radius ──────────────────────────────────────────────────────────── */
    --radius-control: 0;

    /* Separate from --radius-control, which shapes inputs and selects: Pay3 draws pill buttons over
       square fields, so one token cannot carry both. */
    --radius-button: 0;
    --radius-surface: 0;
    --radius-circle: 50%;
}

body {
    font-family: var(--font-family-base);
    background: var(--app-background);
    color: #2f2f2f;
}

.app-shell {
    min-height: 100vh;
    background: var(--app-background);
}

.app-header {
    display: flex;
    justify-content: center;
    margin: 1.9rem 0 var(--space-md);
    padding: 0 var(--space-xl);
}

.brand-header-content {
    width: min(1180px, 100%);
    display: flex;
    justify-content: center;
}

.brand-logo-link,
.brand-wordmark-link {
    color: inherit;
    text-decoration: none;
}

.brand-logo-image {
    max-width: min(380px, 80vw);
    width: 100%;
    height: auto;
}

/* The Pay3 lockup is a compact mark rather than a wordmark, so it holds a fixed height and lets its
   width follow, instead of stretching to the header the way .brand-logo-image does. 3.875rem is the
   62px both marks are drawn at on the artboards. */
.brand-pay3-logo {
    height: 3.875rem;
    width: auto;
    max-width: 80vw;
}

/* 43px on the mobile artboards against 62 on the desktop ones, and the switch is the layout's own
   900px breakpoint rather than 600 — between the two the page is already in its mobile stack. */
@media (max-width: 899px) {
    .brand-pay3-logo {
        height: 2.6875rem;
    }
}

.brand-wordmark {
    font-size: clamp(1.35rem, 4vw, 2rem);
    font-weight: 600;
    letter-spacing: 0.18rem;
}

.app-main {
    padding-bottom: var(--space-xl);
}

.app-content {
    background: transparent;
}

.campaign-shell {
    width: 100%;
}

.app-footer {
    background: var(--footer-background, transparent);
    border-top: 1px solid #e7e7e7;
    margin-top: var(--space-3xl);
    padding: var(--space-md) var(--space-xl);
}

.brand-footer-content {
    width: min(1180px, 100%);
    margin: 0 auto;
    font-size: var(--font-size-2xs);
    color: #8b8b8b;
}

.brand-footer-content p {
    margin-bottom: var(--space-xs);
}

.brand-footer-content a {
    color: inherit;
}

.brand-terms {
    color: #959595;
}

/* ─── Custom Select ──────────────────────────────────────────────────────── */
.custom-select-native {
    display: none;
}

.custom-select {
    position: relative;
    display: block;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--pico-form-element-spacing-vertical, 0.4rem) var(--pico-form-element-spacing-horizontal, 0.75rem);
    background: var(--pico-form-element-background-color, #fff);
    border: var(--pico-border-width, 1px) solid var(--pico-form-element-border-color, #bbb);
    border-radius: var(--radius-control);
    color: var(--pico-form-element-color, #2f2f2f);
    font-size: var(--font-size-lg);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
}

.custom-select-trigger:focus {
    border-color: var(--pico-primary, #333);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

.custom-select-arrow {
    flex-shrink: 0;
    margin-left: var(--space-xs);
    font-size: var(--font-size-xs);
    transition: transform 0.18s ease;
    color: var(--pico-muted-color, #6e6e6e);
}

.custom-select.cs-open .custom-select-arrow {
    transform: rotate(180deg);
}

.custom-select-display {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
}

.custom-select-display.cs-placeholder {
    color: var(--pico-muted-color, #9e9e9e);
}

.custom-select-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 200;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--pico-form-element-border-color, #bbb);
    border-top: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 14rem;
    overflow-y: auto;
}

.custom-select.cs-open .custom-select-options {
    display: block;
}

.custom-select-option {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-lg);
    color: #2f2f2f;
    cursor: pointer;
    user-select: none;
    transition: background 0.1s;
}

.custom-select-option:hover {
    background: #f4f4f4;
}

.custom-select-option.cs-selected {
    background: #eeeeee;
    font-weight: 500;
}

/* Mobile: show native select, hide custom select */
@media (max-width: 960px) {
    .custom-select-native {
        display: block;
        width: 100%;
        margin-bottom: 0;
        box-sizing: border-box;
        border-radius: var(--radius-control);
        border: var(--pico-border-width, 1px) solid var(--pico-form-element-border-color, #bbb);
        background: var(--pico-form-element-background-color, #fff);
        color: var(--pico-form-element-color, #2f2f2f);
        font: inherit;
        font-size: var(--font-size-lg);
        padding: 0.4rem 0.75rem;
    }

    .custom-select-native:focus {
        outline: none;
        border-color: var(--pico-primary, #333);
        box-shadow: 0 0 0 2px rgb(0 0 0 / 8%);
    }

    .custom-select {
        display: none;
    }
}

.error-panel {
    width: min(680px, calc(100% - 2.5rem));
    margin: 3rem auto;
    text-align: center;
}

.error-panel h1 {
    margin-bottom: var(--space-md);
    color: var(--heading-color);
}

.error-panel .error-reference {
    margin-top: var(--space-xl);
    color: var(--muted-text);
    font-size: var(--font-size-sm);
}