/* Non-UPF verification Payment step — ported from the ip-b2b prototype
   (js/verification-flow.js paymentStepHTML + the vf-/vfp- rules in
   pages/wise.css). 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 page
   root, and then keep the prototype's rules as they were written.

   The prototype's right-hand module is a progress pane (stepper + foods +
   total). The app already carries the stepper in VerificationStepHeader, so
   only the foods list and the running total are ported here; the vfp-step*,
   percentage-ring and collapse-rail rules are deliberately left behind.

   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);
}

/* Layout — the prototype's payment step is a single form column with the foods
   module docked to its right. Below lg the module drops under the form. */
.vf-pay-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (min-width: 1024px) {
    .vf-pay-layout { grid-template-columns: minmax(0, 1fr) 360px; }
    .vf-pay-aside { position: sticky; top: 20px; }
}

.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-select { position: relative; }

.vf-select-el {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    padding: 11px 38px 11px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text);
    font-family: inherit;
    font-size: 0.86rem;
    cursor: pointer;
}

.vf-select-chevron {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    pointer-events: none; color: var(--text-subtle); font-size: 20px;
}

.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; }

/* Text inputs — the card pill, the coupon pill and the billing fields all share
   one treatment: surface-2 fill, strong border, brand focus ring. */
.vf-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    outline: 0;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text);
    padding: 0 18px;
    min-height: 44px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vf-input::placeholder { color: color-mix(in srgb, var(--text-subtle) 60%, transparent); }

.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,
.vf-input:focus,
.vf-select-el:focus {
    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;
}

.vf-input:disabled { opacity: 0.6; cursor: not-allowed; }

/* 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-field { display: flex; flex-direction: column; gap: 5px; }

.vf-field > .vf-field-label { margin: 0; }

.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-apply {
    padding: 0 22px;
    min-height: 44px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: var(--color-white);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    box-shadow: var(--shadow-1);
    transition: filter 0.15s ease;
}

.vf-apply:hover:not(:disabled) { filter: brightness(1.07); }

.vf-apply--ghost {
    background: var(--surface);
    color: var(--text-muted);
    border: 1px solid var(--border-strong);
    padding: 0 16px;
}

.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; }

.vf-admin-field .vf-input {
    border-color: color-mix(in srgb, var(--ter-amber) 55%, var(--border));
    background: var(--surface);
    padding: 0 16px;
    min-height: 40px;
    font-size: 0.85rem;
}

.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); }

.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-pay-btn {
    width: 100%;
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: var(--color-white);
    font-family: var(--font-family-serif);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-1);
    transition: filter 0.15s ease, opacity 0.15s ease;
}

.vf-pay-btn .material-icons { font-size: 18px; }

.vf-pay-btn:hover:not(:disabled) { filter: brightness(1.07); }

.vf-pay-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.4); }

.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; }

/* ---------- Foods module (right) ----------
   The prototype's progress pane with the stepper removed: its header, the
   billable line items and the running-total footer. */
.vfp-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
    box-shadow: var(--shadow-1);
}

.vfp-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-2) 65%, transparent);
}

.vfp-title { flex: 1; min-width: 0; font-size: 0.86rem; font-weight: 700; color: var(--text); line-height: 1.2; }

.vfp-count { font-size: 0.68rem; font-weight: 600; color: var(--vf-ink); white-space: nowrap; }

.vfp-items { padding: 12px 14px 4px; }

.vfp-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 0;
    border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.vfp-item:first-of-type { border-top: 0; }

.vfp-item-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.vfp-item-name {
    font-size: 0.76rem; font-weight: 600; color: var(--text); line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.vfp-item-brand { font-size: 0.66rem; color: var(--text-subtle); }

.vfp-item-cost { font-size: 0.78rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

.vfp-empty { padding: 26px 14px; text-align: center; font-size: 0.8rem; color: var(--text-subtle); }

/* Compact pager — the prototype's list is short enough not to need one, but a
   real portfolio is not, and the Previous/Next button pair from the old table
   does not fit a 360px column. */
.vfp-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 14px;
    border-top: 1px solid var(--border);
    font-size: 0.7rem;
    color: var(--text-muted);
}

.vfp-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
}

.vfp-pager-btn .material-icons { font-size: 16px; }

.vfp-pager-btn:hover:not(:disabled) { color: var(--primary); border-color: var(--primary); }

.vfp-foot {
    border-top: 1px solid var(--border);
    padding: 12px 14px 14px;
    background: color-mix(in srgb, var(--surface-2) 45%, transparent);
}

.vfp-foot-row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.76rem; color: var(--text-muted); padding: 3px 0;
}

.vfp-foot-row--discount { color: var(--sec-green-text); font-weight: 600; }

.vfp-foot-total { margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--border); font-weight: 700; color: var(--text); }

.vfp-foot-amt { font-family: var(--font-family-serif); font-size: 1.05rem; color: var(--vf-ink); }

.vfp-foot-note { font-size: 0.68rem; color: var(--text-subtle); margin-top: 8px; }