/* Non-UPF verification flow: the Payment step's form, ported from the ip-b2b
   prototype (js/verification-flow.js paymentStepHTML + the vf- rules in
   pages/wise.css), and the frame both steps share. Same bridging approach as
   brand-intelligence.css: the prototype themes off shared design tokens, so
   rather than hardcode hexes we map those token names onto the app's own
   palette variables once, on the form root (.vf-pay), and then keep the
   prototype's rules as they were written.

   The frame (.vf-flow) is the step column with the design's progress pane
   docked to its right: WciProgressTracker (the steps, the billable foods and
   the running total), the same rail on Attest and on Payment. The tracker is a
   design-system component and themes off the design tokens itself, so it sits
   outside the .vf-pay bridge.

   Light mode only, like the rest of the app, so the prototype's html.dark
   rules are dropped. */

.vf-pay {
    /* token bridge: prototype tokens → app palette (tokens.css) */
    --surface: var(--color-white);
    --surface-2: var(--color-oyster-100);
    --surface-3: var(--color-oyster-200);
    --border: var(--color-oyster-200);
    --border-strong: var(--color-oyster-300);
    --text: var(--color-oyster-900);
    --text-muted: var(--color-oyster-600);
    --text-subtle: var(--color-oyster-500);
    --primary: var(--color-primary);
    --sec-green: var(--color-success-500);
    --sec-green-text: var(--color-success-text);
    --ter-amber: var(--color-warning-500);
    --ter-amber-text: var(--color-warning-text);
    --sec-red: var(--color-danger-500);
    --sec-red-text: var(--color-danger-text);
    /* Flow accent. The prototype resolves both to the brand blue (wise.css
       "no green/teal"): --vf-fill for filled chrome, --vf-ink for accent text. */
    --vf-fill: var(--primary);
    --vf-ink: var(--primary);
    --r-md: 10px;
    --r-sm: 8px;
    --radius-pill: 999px;
    --shadow-1: 0 1px 3px 0 rgba(26, 16, 44, .1), 0 1px 2px 0 rgba(26, 16, 44, .06);
    font-family: var(--font-family-primary);
}

/* Frame: the step column, and the progress rail docked to its right. The rail
   column is sized by the tracker itself (auto), so folding the tracker to its
   114px rail hands the width back to the step. Below lg the rail drops under
   the step. */
.vf-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.vf-flow-main { min-width: 0; }

@media (min-width: 1024px) {
    .vf-flow { grid-template-columns: minmax(0, 1fr) auto; }
    .vf-flow-rail { position: sticky; top: 20px; }
}

/* WciProgressTracker is cut for a module row (a 300px flex item, as tall as the
   row). Docked in a page column it takes the column's width and its own height.
   0,3,0 beats the tracker's scoped 0,2,0 and loses to its collapsed-rail rule. */
.vf-flow .vf-flow-rail .vf-progress-pane {
    flex: none;
    width: 340px;
    height: auto;
    max-height: none;
    align-self: auto;
}

@media (max-width: 1023px) {
    .vf-flow .vf-flow-rail .vf-progress-pane { width: 100%; }
}

/* Loading and empty lines inside the tracker's items block (host-drawn). */
.vf-flow-rail .vfp-empty { padding: 20px 0; text-align: center; font-size: 0.8rem; color: var(--text-subtle); }

.vf-pay-form {
    width: 100%;
    padding: 24px 26px 28px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-1);
}

.vf-pay-title {
    font-family: var(--font-family-serif);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--text);
}

.vf-pay-desc { margin: 0 0 20px; font-size: 0.82rem; color: var(--text-muted); line-height: 1.55; }

.vf-field-label {
    display: block;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-muted);
    margin: 16px 0 7px;
}

.vf-methods { display: flex; gap: 10px; flex-wrap: wrap; }

.vf-method {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.vf-method .material-icons { font-size: 17px; }

.vf-method.is-active {
    border-color: var(--primary);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.vf-method:disabled { opacity: 0.5; cursor: not-allowed; }

/* The card pill, which the Stripe element mounts into. The coupon and billing fields
   are WciInputs now (Components/DesignSystem). */
.vf-card-input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    min-height: 44px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* The Stripe card element mounts into this box, so it has to be free to size
   itself; the pill around it supplies the chrome. */
.vf-card-input .vf-card-el { flex: 1; min-width: 0; }

.vf-card-glyph { color: var(--text-subtle); font-size: 19px; }

.vf-card-input:focus-within {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border-strong));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
    outline: none;
}

/* Billing fields (invoice). The prototype has no billing form — it shows a note
   and stops — so this grid is an in-idiom extension: the same label + pill
   input, two-up where the fields are short. */
.vf-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

.vf-fields-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }

@media (max-width: 560px) { .vf-fields-row { grid-template-columns: minmax(0, 1fr); } }

.vf-note {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--primary) 8%, var(--surface-2));
    border: 1px solid var(--border);
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.vf-note .material-icons { font-size: 18px; color: var(--primary); flex-shrink: 0; }

.vf-note strong { color: var(--text); }

/* Note variants the prototype has no state for: a fully discounted order and a
   failed submission. Same box, semantic tint. */
.vf-note--good {
    background: color-mix(in srgb, var(--sec-green) 10%, var(--surface-2));
    border-color: color-mix(in srgb, var(--sec-green) 35%, var(--border));
}

.vf-note--good .material-icons { color: var(--sec-green-text); }

.vf-note--bad {
    background: color-mix(in srgb, var(--sec-red) 8%, var(--surface-2));
    border-color: color-mix(in srgb, var(--sec-red) 32%, var(--border));
    color: var(--sec-red-text);
}

.vf-note--bad .material-icons { color: var(--sec-red-text); }

.vf-note--bad strong,
.vf-note--bad a { color: var(--sec-red-text); }

.vf-note-err { color: var(--sec-red-text); font-size: 0.78rem; margin-top: 6px; }

.vf-coupon { display: flex; gap: 10px; }

.vf-applied {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--sec-green-text);
}

.vf-applied .material-icons { font-size: 17px; }

.vf-admin {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--ter-amber) 45%, var(--border));
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--ter-amber) 9%, transparent);
}

.vf-admin-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ter-amber-text);
    margin-bottom: 10px;
}

.vf-admin-head .material-icons { font-size: 17px; }

.vf-admin-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; }

@media (max-width: 560px) { .vf-admin-grid { grid-template-columns: 1fr; } }

.vf-admin-field { display: flex; flex-direction: column; gap: 5px; }

.vf-admin-field span { font-size: 0.68rem; color: var(--ter-amber-text); font-weight: 600; }

/* The admin-only discount fields are WciInputs (.adm-input). .vf-pay lifts this to 0,3,0:
   WISEintelligence.styles.css (the scoped .adm-input rule, 0,2,0) is linked after this sheet. */
.vf-pay .vf-admin-field .adm-input {
    border-color: color-mix(in srgb, var(--ter-amber) 55%, var(--border));
    background: var(--surface);
}

.vf-admin-note { font-size: 0.72rem; color: var(--ter-amber-text); margin-top: 8px; }

/* Agreement bar — the prototype's attestation row, reused here for the VSA. */
.vf-attest {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
}

.vf-attest:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; }

.vf-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--text-subtle);
    border-radius: 6px;
}

.vf-check .material-icons { font-size: 22px; }

.vf-attest.is-checked .vf-check { color: var(--primary); }

/* The attestation on the Attest step stays in reach under a long table
   (wise.css 16608-16613, .vf-attest--sticky). */
.vf-attest--sticky {
    position: sticky;
    bottom: 12px;
    z-index: 5;
    box-shadow: 0 -6px 18px color-mix(in srgb, var(--text) 10%, transparent), var(--shadow-1);
}

/* The Attest step's card is a <button> (role=checkbox): it sheds the button look. */
button.vf-attest { width: 100%; text-align: left; font: inherit; color: inherit; }

/* Nothing selected yet: the attestation has no subject, so it cannot be ticked. */
.vf-attest.is-disabled { cursor: not-allowed; }
.vf-attest.is-disabled .vf-check { opacity: 0.5; }

.vf-attest-text { font-size: 0.86rem; color: var(--text); line-height: 1.5; padding-top: 3px; }

.vf-attest-text .vf-link {
    /* Inline, not the button default inline-block: on a narrow column the
       agreement name has to break across lines with the sentence around it. */
    display: inline;
    text-align: left;
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}

.vf-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 0.72rem;
    color: var(--text-subtle);
}

.vf-secure .material-icons { font-size: 14px; }