/*!
 * Federal Apostille Portal v2 — Public CSS
 * Modern, minimal, accessible. Scoped to .fapv2-shell / #fapv2-app to avoid
 * theme bleed. CSS variables let you re-brand without touching JS.
 */

.fapv2-shell {
    --c-bg:        #ffffff;
    --c-panel:     #ffffff;
    --c-muted:     #f9fafb;
    --c-text:      #1f2937;
    --c-text-soft: #6b7280;
    --c-line:      #e5e7eb;
    --c-line-2:    #d1d5db;
    --c-primary:   #0b3d91;
    --c-primary-2: #1e57c4;
    --c-state:     #b45309;
    --c-state-2:   #d97706;
    --c-success:   #047857;
    --c-danger:    #b91c1c;
    --c-focus:     #2563eb;
    --r:           8px;
    --r-lg:        12px;
    --shadow:      0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
    --font:        system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    font-family: var(--font);
    color: var(--c-text);
    line-height: 1.5;
    box-sizing: border-box;
}
.fapv2-shell *,
.fapv2-shell *::before,
.fapv2-shell *::after { box-sizing: inherit; }

.fapv2-noscript {
    background:#fef3c7;border:1px solid #f59e0b;padding:12px 16px;border-radius:var(--r);margin-bottom:16px;
}

/* ── skeleton ─────────────────────────────────────────────────────────── */

.fapv2-skeleton {
    padding: 48px 24px; text-align: center; color: var(--c-text-soft);
}
.fapv2-skeleton-bar {
    height: 14px; background: var(--c-muted); border-radius: 4px;
    margin: 0 auto 12px; max-width: 280px;
    animation: fapv2-shimmer 1.4s ease-in-out infinite;
}
.fapv2-skeleton-bar.short { max-width: 160px; }
@keyframes fapv2-shimmer {
    0%,100% { opacity:.5; } 50% { opacity:1; }
}

/* ── layout ───────────────────────────────────────────────────────────── */

.fapv2-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
}
@media (max-width: 860px) {
    .fapv2-grid { grid-template-columns: 1fr; }
}

.fapv2-main {
    background: var(--c-panel); border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: 28px;
}
@media (max-width: 520px) {
    .fapv2-main { padding: 20px; border-radius: var(--r); }
}

/* ── section nav (anchor links to the 4 sections) ─────────────────────── */

.fapv2-rail {
    display: flex; flex-wrap: wrap; gap: 4px;
    list-style: none; padding: 4px; margin: 0 0 24px;
    background: var(--c-muted); border-radius: 999px;
    position: sticky; top: 8px; z-index: 5;
}
.fapv2-rail__item {
    flex: 1; min-width: 0;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px;
    font-size: 13px; color: var(--c-text-soft);
    text-decoration: none;
    transition: background .15s, color .15s;
    cursor: pointer;
}
.fapv2-rail__item:hover { background: rgba(255,255,255,.6); color: var(--c-primary); }
.fapv2-rail__item.is-done   { color: var(--c-success); background: rgba(4,120,87,.08); }
.fapv2-rail__num {
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-line); color: var(--c-text); font-weight: 700; font-size: 12px;
    flex-shrink: 0;
}
.fapv2-rail__item.is-done   .fapv2-rail__num { background: var(--c-success); color: #fff; }
.fapv2-rail__label { white-space: nowrap; }
@media (max-width: 520px) {
    .fapv2-rail__label { display: none; }
    .fapv2-rail { position: static; }
}

/* Make the order summary sidebar follow the customer down the page so
   the running total + process map stays in view as they fill out the
   form. Falls back to static on narrow screens (where it stacks below). */
@media (min-width: 861px) {
    .fapv2-summary { position: sticky; top: 16px; align-self: start; max-height: calc(100vh - 32px); overflow-y: auto; }
}

/* ── sections (single-page layout) ────────────────────────────────────── */

/* Each of the 4 sections sits stacked on the single page. They share the
   same outer panel chrome so the customer reads top-to-bottom. The first
   section has no top border; subsequent sections are separated by a hairline.
   scroll-margin-top reserves space for the theme's sticky header so anchor
   jumps from the section nav don't land under it. */
.fapv2-section { scroll-margin-top: 96px; }
.fapv2-section + .fapv2-section {
    margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--c-line);
}
@media (max-width: 520px) {
    .fapv2-section + .fapv2-section { margin-top: 22px; padding-top: 22px; }
}

/* ── steps ────────────────────────────────────────────────────────────── */

.fapv2-step h2 {
    margin: 0; font-size: 22px; font-weight: 700; color: var(--c-text);
}
.fapv2-step__header {
    display: flex; align-items: center; gap: 12px; margin: 0 0 12px;
}
.fapv2-step__badge {
    flex-shrink: 0;
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-primary); color: #fff;
    font-weight: 700; font-size: 15px;
    box-shadow: 0 1px 3px rgba(11,61,145,.25);
}
.fapv2-step__lede {
    margin: 0 0 18px; color: var(--c-text-soft);
}
.fapv2-step__nav {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--c-line);
}
.fapv2-h3 { margin: 26px 0 12px; font-size: 16px; font-weight: 700; }

/* ── submit bar (bottom of the review section) ───────────────────────── */

.fapv2-submit-bar {
    margin-top: 24px;
}
.fapv2-submit-bar .fapv2-btn--block { width: 100%; }

/* Prominent error callout shown directly above the Submit button when
   tokenization or the /submit endpoint rejects the order. The previous
   tiny red text below the card iframe was easy for customers to miss,
   which generated "the submit button doesn't work" support tickets. */
.fapv2-submit-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid var(--c-danger);
    border-radius: var(--r);
    padding: 14px 18px;
    margin: 0 0 14px;
    color: #991b1b;
    font-size: 15px;
    line-height: 1.5;
}
.fapv2-submit-error[hidden] { display: none; }
.fapv2-submit-error strong { color: var(--c-danger); }
.fapv2-submit-error__hint {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #7f1d1d;
}

/* ── missing-list (shown above submit when not all sections complete) ── */

.fapv2-missing {
    background: #fff7ed; border: 1px solid #fed7aa; border-left: 4px solid var(--c-state-2);
    border-radius: var(--r); padding: 14px 18px; margin: 18px 0 6px;
    font-size: 14px;
}
.fapv2-missing strong { color: var(--c-state); }
.fapv2-missing ul { margin: 8px 0 0; padding-left: 20px; }
.fapv2-missing li { margin: 4px 0; }
.fapv2-missing a {
    color: var(--c-primary); text-decoration: underline; cursor: pointer;
}
.fapv2-missing a:hover { text-decoration: none; }

/* ── non-Hague destination disclosure ────────────────────────────────── */

/* Shown directly under the Destination country dropdown when the selected
   country is NOT a Hague Apostille Convention member. The apostille alone
   isn't sufficient for those destinations — embassy / consulate
   legalization is also required. */
.fapv2-non-hague {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-left: 4px solid var(--c-state-2);
    border-radius: var(--r);
    padding: 14px 18px;
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--c-text);
}
.fapv2-non-hague strong {
    display: block;
    color: var(--c-state);
    font-size: 15px;
    margin-bottom: 6px;
}
.fapv2-non-hague p { margin: 0; }
.fapv2-non-hague p + p { margin-top: 6px; }

/* ── locked checkbox (e.g., scan add-on under scan_only delivery) ────── */

.fapv2-checkbox--locked {
    background: #f0f7ff;
    border: 1px solid #c7d6ec;
    border-left: 3px solid var(--c-primary);
    border-radius: var(--r);
    padding: 10px 12px;
    cursor: not-allowed;
}
.fapv2-checkbox--locked input { cursor: not-allowed; }
.fapv2-field__note-inline {
    display: block;
    font-size: 12px;
    color: var(--c-text-soft);
    font-style: normal;
    margin-top: 4px;
}

/* ── review empty state ──────────────────────────────────────────────── */

.fapv2-review__empty {
    color: var(--c-text-soft); font-style: italic; margin: 0;
}
.fapv2-review__empty a {
    color: var(--c-primary); text-decoration: underline; font-style: normal;
}

/* ── jurisdiction explainer ──────────────────────────────────────────── */

.fapv2-explainer {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px;
}
@media (max-width: 640px) { .fapv2-explainer { grid-template-columns: 1fr; } }

.fapv2-explainer__card {
    border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 18px;
    background: linear-gradient(180deg, #fff 0%, var(--c-muted) 100%);
}
.fapv2-explainer__card h3 { margin: 8px 0 6px; font-size: 17px; }
.fapv2-explainer__card p  { margin: 0 0 8px; color: var(--c-text-soft); font-size: 14px; }
.fapv2-explainer__card ul {
    margin: 8px 0 12px; padding-left: 18px; font-size: 14px; color: var(--c-text);
}
.fapv2-explainer__card li { margin: 2px 0; }
.fapv2-explainer__badge {
    display: inline-block; font-size: 11px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px;
}
.fapv2-explainer__definition {
    background: var(--c-muted);
    border-radius: 6px;
    padding: 10px 12px;
    margin: 8px 0 12px !important;
    font-size: 13px;
    line-height: 1.5;
}

/* Both info cards share a neutral border so neither looks like a clickable
   selectable option — they're informational only, the actual jurisdiction
   pick happens inside the "Add a document" modal. */
.fapv2-explainer__card--federal { border-color: var(--c-line-2); }
.fapv2-explainer__card--federal .fapv2-explainer__badge { background: var(--c-text-soft); color: #fff; }
.fapv2-explainer__card--state   { border-color: var(--c-line-2); }
.fapv2-explainer__card--state   .fapv2-explainer__badge { background: var(--c-text-soft); color: #fff; }
.fapv2-explainer__price {
    font-weight: 700; margin: 8px 0 0 !important; color: var(--c-text);
}
.fapv2-explainer__note {
    font-size: 12px !important; color: var(--c-state) !important;
}

.fapv2-explainer-compact summary {
    cursor: pointer; padding: 10px 14px; background: var(--c-muted);
    border-radius: var(--r); font-weight: 600; margin-bottom: 14px;
    list-style: none; user-select: none;
}
.fapv2-explainer-compact summary::-webkit-details-marker { display: none; }
.fapv2-explainer-compact summary::before { content: '▸ '; color: var(--c-text-soft); }
.fapv2-explainer-compact[open] summary::before { content: '▾ '; }

/* ── resume banner (shown when a saved draft exists) ──────────────────── */

.fapv2-resume {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #f0f7ff 0%, #fff7ed 100%);
    border: 1px solid #c5cfdb;
    border-left: 4px solid var(--c-primary);
    border-radius: var(--r-lg);
    padding: 16px 20px;
    margin: 0 0 22px;
}
.fapv2-resume__main { flex: 1; min-width: 260px; }
.fapv2-resume__main strong {
    color: var(--c-primary);
    font-size: 15px;
    display: block;
    margin-bottom: 4px;
}
.fapv2-resume__main p {
    margin: 0;
    font-size: 13.5px;
    color: var(--c-text-soft);
    line-height: 1.5;
}
.fapv2-resume__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
@media (max-width: 540px) {
    .fapv2-resume { flex-direction: column; align-items: stretch; }
    .fapv2-resume__actions { width: 100%; }
    .fapv2-resume__actions .fapv2-btn { flex: 1; justify-content: center; }
}

/* ── "Add Your Documents" instructional title between cards + cart ───── */

.fapv2-add-prompt {
    margin: 20px 0 14px;
    padding: 16px 20px;
    background: var(--c-muted);
    border-radius: var(--r);
    border-left: 4px solid var(--c-primary);
}
.fapv2-add-prompt h3 {
    margin: 0 0 6px;
    font-size: 17px;
    color: var(--c-primary);
    font-weight: 700;
}
.fapv2-add-prompt p {
    margin: 0;
    font-size: 14px;
    color: var(--c-text);
    line-height: 1.55;
}

/* ── cart ─────────────────────────────────────────────────────────────── */

.fapv2-cart {
    border: 1px solid var(--c-line); border-radius: var(--r-lg);
    padding: 16px; background: var(--c-panel); margin-top: 16px;
}
.fapv2-cart__head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px; font-weight: 600;
}
.fapv2-cart__count { color: var(--c-text-soft); font-weight: 500; font-size: 13px; }
.fapv2-cart__empty {
    text-align: center; padding: 20px; color: var(--c-text-soft);
    border: 2px dashed var(--c-line); border-radius: var(--r);
    margin-bottom: 12px;
}
.fapv2-cart__list { list-style: none; padding: 0; margin: 0 0 12px; }
.fapv2-cart__row {
    display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--c-line);
}
.fapv2-cart__row:last-child { border-bottom: 0; }
.fapv2-cart__row-main { flex: 1; min-width: 0; }
.fapv2-cart__row-title { font-weight: 600; margin-bottom: 4px; }
.fapv2-cart__row-tags { margin-bottom: 4px; }
.fapv2-cart__row-files { font-size: 13px; color: var(--c-text-soft); }
.fapv2-cart__row-actions { display: flex; flex-direction: column; gap: 4px; }

.fapv2-chip {
    display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px;
    background: var(--c-muted); color: var(--c-text-soft); margin-right: 4px; margin-bottom: 2px;
}

/* ── buttons & links ──────────────────────────────────────────────────── */

.fapv2-btn {
    appearance: none; border: 0; font: inherit; font-weight: 600;
    padding: 10px 18px; border-radius: var(--r); cursor: pointer;
    background: var(--c-line); color: var(--c-text);
    transition: background .15s, color .15s, transform .05s;
    text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
}
.fapv2-btn:active:not([disabled]) { transform: translateY(1px); }
.fapv2-btn:disabled { opacity: .5; cursor: not-allowed; }
.fapv2-btn--primary { background: var(--c-primary); color: #fff; }
.fapv2-btn--primary:hover:not([disabled]) { background: var(--c-primary-2); }
.fapv2-btn--ghost { background: transparent; color: var(--c-text); border: 1px solid var(--c-line-2); }
.fapv2-btn--ghost:hover:not([disabled]) { background: var(--c-muted); }
.fapv2-btn--block { width: 100%; justify-content: center; }
.fapv2-btn--lg { padding: 14px 22px; font-size: 16px; }
.fapv2-btn__icon { font-weight: 700; font-size: 16px; }

.fapv2-link {
    background: none; border: 0; color: var(--c-primary); font: inherit; padding: 0;
    cursor: pointer; text-decoration: underline; font-size: 13px;
}
.fapv2-link--danger { color: var(--c-danger); }
.fapv2-link:hover { opacity: .85; }

/* ── forms ────────────────────────────────────────────────────────────── */

.fapv2-field { margin-bottom: 18px; }
.fapv2-field label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
    color: var(--c-text);
    line-height: 1.4;
}
.fapv2-field legend {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    padding: 0;
    color: var(--c-text);
}
.fapv2-field input[type="text"],
.fapv2-field input[type="email"],
.fapv2-field input[type="tel"],
.fapv2-field input[type="number"],
.fapv2-field input[type="search"],
.fapv2-field select,
.fapv2-field textarea {
    width: 100%;
    padding: 12px 14px !important;
    border: 1px solid var(--c-line-2) !important;
    border-radius: var(--r) !important;
    font: inherit !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    background: #fff !important;
    color: var(--c-text) !important;
    transition: border-color .15s, box-shadow .15s;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    min-height: 46px;
    margin: 0;
}
.fapv2-field select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23566275' d='M6 8L0 0h12z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 38px !important;
    cursor: pointer;
}
.fapv2-field input:focus,
.fapv2-field select:focus,
.fapv2-field textarea:focus {
    outline: 0 !important;
    border-color: var(--c-primary) !important;
    box-shadow: 0 0 0 3px rgba(11, 61, 145, .15) !important;
}
.fapv2-field input::placeholder,
.fapv2-field textarea::placeholder { color: #94a3b8; }
.fapv2-field__help { font-size: 13px; color: var(--c-text-soft); margin: 6px 0 0; }
.fapv2-required {
    color: #b91c1c;
    font-weight: 700;
    margin-left: 2px;
}
.fapv2-optional {
    color: var(--c-text-soft);
    font-weight: 400;
    font-size: 13px;
}
.fapv2-field__autofill {
    background: var(--c-muted); border-radius: var(--r); padding: 10px 14px;
    margin: 0; font-size: 14px; line-height: 1.4;
}
.fapv2-field__autofill strong { color: var(--c-primary); }
.fapv2-field__autofill span {
    display: block; color: var(--c-text-soft); font-size: 12px; margin-top: 2px;
}
.fapv2-field__note {
    background: #fff7ed; border-left: 3px solid var(--c-state); padding: 8px 12px;
    border-radius: 6px; font-size: 13px; color: var(--c-state); margin: 8px 0 0;
}

.fapv2-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fapv2-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 520px) {
    .fapv2-grid-2, .fapv2-grid-3 { grid-template-columns: 1fr; }
}

.fapv2-checkbox {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-weight: 400 !important;
    font-size: 14px !important;
    padding: 10px 12px;
    border: 1px solid var(--c-line);
    border-radius: var(--r);
    background: #fff;
    transition: background .15s, border-color .15s;
    line-height: 1.45;
    margin: 0;
}
.fapv2-checkbox:hover { background: var(--c-muted); border-color: var(--c-line-2); }
.fapv2-checkbox input[type="checkbox"] {
    margin: 2px 0 0 !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px;
    accent-color: var(--c-primary);
    cursor: pointer;
}
.fapv2-checkbox span {
    font-size: 14px !important;
    line-height: 1.45;
    color: var(--c-text);
}
.fapv2-checkbox span em {
    color: var(--c-text-soft);
    font-style: italic;
}
.fapv2-checkbox span strong { color: var(--c-primary); }

.fapv2-radio-group { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.fapv2-radio-group--stacked { grid-template-columns: 1fr; }
@media (max-width: 480px) { .fapv2-radio-group { grid-template-columns: 1fr; } }
.fapv2-radio-card {
    display: block; padding: 14px 16px; border: 1.5px solid var(--c-line-2);
    border-radius: var(--r); cursor: pointer; font-weight: 600 !important;
    transition: border-color .15s, background .15s;
}
.fapv2-radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.fapv2-radio-card span { display: block; font-weight: 400; color: var(--c-text-soft); font-size: 13px; margin-top: 4px; }
.fapv2-radio-card.is-selected { border-color: var(--c-primary); background: #f0f7ff; }
.fapv2-radio-card.is-disabled { opacity: .45; cursor: not-allowed; }

.fapv2-callout {
    background: var(--c-muted); border-radius: var(--r); padding: 14px 16px; margin-top: 12px;
}
.fapv2-callout p { margin: 6px 0; font-size: 13px; color: var(--c-text); }
.fapv2-callout address {
    font-style: normal; font-family: ui-monospace, Menlo, Consolas, monospace;
    line-height: 1.6; margin: 6px 0; padding: 10px 14px; background: #fff; border-radius: 6px;
}
.fapv2-callout__note {
    background: #f0f7ff;
    border-left: 3px solid var(--c-primary);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--c-text) !important;
}

/* ── dropzone & files ─────────────────────────────────────────────────── */

.fapv2-dropzone {
    border: 2px dashed var(--c-line-2); border-radius: var(--r);
    background: var(--c-muted); padding: 22px; text-align: center;
    transition: border-color .15s, background .15s;
}
.fapv2-dropzone.is-over { border-color: var(--c-primary); background: #eaf2fc; }
.fapv2-dropzone__label { display: block; cursor: pointer; font-weight: 600; font-size: 14px !important; margin-bottom: 0 !important; }
.fapv2-dropzone__label span { display: block; font-weight: 400; font-size: 13px; color: var(--c-text-soft); margin-top: 4px; }

.fapv2-files { list-style: none; padding: 0; margin: 12px 0 0; }
.fapv2-files li {
    display: flex; gap: 10px; align-items: center;
    padding: 8px 10px; background: var(--c-muted); border-radius: 6px; margin-bottom: 6px;
    font-size: 13px;
}
.fapv2-files__name { flex: 1; word-break: break-all; }
.fapv2-files__size { color: var(--c-text-soft); }

/* ── modal ────────────────────────────────────────────────────────────── */

.fapv2-modal {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(15, 23, 42, .55);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 20px; overflow-y: auto;
    animation: fapv2-fade .15s ease-out;
}
@keyframes fapv2-fade { from { opacity:0 } to { opacity:1 } }
.fapv2-modal__panel {
    background: #fff; border-radius: var(--r-lg);
    width: 100%; max-width: 620px; box-shadow: 0 30px 60px rgba(15, 23, 42, .25);
    margin: 40px auto;
}
.fapv2-modal__head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 22px; border-bottom: 1px solid var(--c-line);
}
.fapv2-modal__head h3 { margin: 0; font-size: 18px; }
.fapv2-modal__close {
    background: none; border: 0; font-size: 24px; line-height: 1;
    color: var(--c-text-soft); cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.fapv2-modal__close:hover { background: var(--c-muted); color: var(--c-text); }
.fapv2-modal__body { padding: 22px; max-height: 70vh; overflow-y: auto; }
.fapv2-modal__foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 16px 22px; border-top: 1px solid var(--c-line); background: var(--c-muted);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* ── review ───────────────────────────────────────────────────────────── */

.fapv2-review { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
@media (max-width: 640px) { .fapv2-review { grid-template-columns: 1fr; } }
.fapv2-review__block {
    background: var(--c-muted); border-radius: var(--r); padding: 14px 16px;
}
.fapv2-review__block h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-soft); }
.fapv2-review__items { list-style: none; padding: 0; margin: 0; }
.fapv2-review__items li {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--c-line);
}
.fapv2-review__items li:last-child { border-bottom: 0; }
.fapv2-review__title { font-weight: 600; }
.fapv2-review__qty   { color: var(--c-text-soft); font-weight: 400; }
.fapv2-review__meta  { font-size: 12px; color: var(--c-text-soft); }
.fapv2-review__price { font-weight: 600; white-space: nowrap; }

.fapv2-card-host {
    border: 1px solid var(--c-line-2);
    border-radius: var(--r);
    padding: 14px;
    min-height: 64px;
    background: #fff;
    position: relative;
    /* CRITICAL — clip Square's iframe overflow. Square renders the card
       form inside an iframe that's ~450px tall (most of it transparent),
       but only ~80px of visible content. Without overflow:hidden the
       transparent portion of the iframe extends DOWN past the host and
       sits invisibly on top of the acknowledgment checkbox, missing list,
       and Submit button — intercepting all real mouse clicks even though
       the elements visually appear above it. Programmatic .click() works
       because it targets the element directly, but customers report
       "the Submit button doesn't do anything" when they actually click. */
    overflow: hidden;
}
.fapv2-card-loading {
    color: var(--c-text-soft);
    font-size: 14px;
    text-align: center;
    padding: 12px 8px;
    background: var(--c-muted);
    border-radius: 6px;
}
.fapv2-card-loading--error {
    background: #fef2f2;
    color: var(--c-danger);
    border: 1px solid #fecaca;
}
.fapv2-card-error { color: var(--c-danger); font-size: 14px; min-height: 1.4em; margin: 6px 0 0; }

/* ── summary sidebar ──────────────────────────────────────────────────── */

.fapv2-summary { position: sticky; top: 20px; }
.fapv2-summary__inner {
    background: var(--c-panel); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 22px;
}
.fapv2-summary__inner h3 { margin: 0 0 14px; font-size: 16px; }
.fapv2-sum-row {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 6px 0; font-size: 14px;
}
.fapv2-sum-row--sub {
    border-top: 1px solid var(--c-line); margin-top: 6px; padding-top: 10px; font-weight: 600;
}
.fapv2-sum-row--total {
    border-top: 2px solid var(--c-text); margin-top: 8px; padding-top: 10px;
    font-size: 18px; font-weight: 700;
}
.fapv2-summary__note  { font-size: 12px; color: var(--c-text-soft); margin: 12px 0 0; line-height: 1.45; }
.fapv2-summary__empty { font-size: 13px; color: var(--c-text-soft); margin: 0 0 12px; padding: 10px 12px; background: var(--c-muted); border-radius: 6px; }

/* ── process map (generic order-journey block below the summary) ───────── */

.fapv2-process-map {
    background: var(--c-panel);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: 18px 20px;
    margin-top: 14px;
    font-size: 13.5px;
}
.fapv2-process-map__title {
    margin: 0 0 12px; font-size: 13px; text-transform: uppercase;
    letter-spacing: .06em; color: var(--c-text-soft); font-weight: 700;
}
.fapv2-process-map__list { list-style: none; padding: 0; margin: 0; }
.fapv2-process-map__item {
    display: flex; gap: 12px;
    padding: 8px 0; position: relative;
}
.fapv2-process-map__item + .fapv2-process-map__item { border-top: 1px dashed var(--c-line); }
.fapv2-process-map__num {
    flex: 0 0 26px; height: 26px; border-radius: 50%;
    background: var(--c-primary); color: #fff; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.fapv2-process-map__body { flex: 1; min-width: 0; }
.fapv2-process-map__step { font-weight: 600; color: var(--c-text); }
.fapv2-process-map__step em { font-style: normal; color: var(--c-text-soft); font-weight: 500; }
.fapv2-process-map__desc { font-size: 12.5px; color: var(--c-text-soft); margin-top: 2px; line-height: 1.45; }
.fapv2-process-map__foot {
    margin: 12px 0 0; padding: 8px 12px; background: var(--c-muted); border-radius: 6px;
    font-size: 12px; color: var(--c-text-soft); line-height: 1.45;
}

.fapv2-confirm__note { color: var(--c-text-soft); font-weight: 400; font-size: 14px; }
.fapv2-confirm__delivery {
    background: #f0f7ff; border-left: 4px solid var(--c-primary);
    padding: 12px 16px; border-radius: 6px; margin: 14px 0; font-size: 14px;
}

/* ── confirmation ─────────────────────────────────────────────────────── */

.fapv2-confirm {
    background: var(--c-panel); border-radius: var(--r-lg); box-shadow: var(--shadow);
    padding: 36px 28px; text-align: center;
}
.fapv2-confirm__check {
    width: 64px; height: 64px; border-radius: 50%; background: var(--c-success); color: #fff;
    font-size: 32px; line-height: 64px; margin: 0 auto 14px;
}
.fapv2-confirm h2 { margin: 0 0 8px; }
.fapv2-confirm__num {
    background: var(--c-muted); border-radius: var(--r); padding: 16px; margin: 20px auto; max-width: 360px;
}
.fapv2-confirm__num span { font-size: 12px; color: var(--c-text-soft); letter-spacing: .06em; text-transform: uppercase; }
.fapv2-confirm__num strong { display: block; font-size: 24px; margin-top: 4px; font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--c-primary); }

.fapv2-panels {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px;
}
@media (max-width: 640px) { .fapv2-panels { grid-template-columns: 1fr; } }
.fapv2-panel {
    border-radius: var(--r); padding: 16px; text-align: left; border: 1px solid;
}
.fapv2-panel address {
    font-style: normal; font-family: ui-monospace, Menlo, Consolas, monospace;
    line-height: 1.6; margin: 10px 0 14px;
}
.fapv2-panel--federal { border-color: var(--c-primary); }
.fapv2-panel--federal .fapv2-panel__head { color: var(--c-primary); }
.fapv2-panel--state   { border-color: var(--c-state); }
.fapv2-panel--state   .fapv2-panel__head { color: var(--c-state); }
.fapv2-panel__head { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }

/* ── tracking form ────────────────────────────────────────────────────── */

/* New scoped tracking-form rules — matches /ova_sev/federal-apostille/
 * navy + gold theme. Heavy use of !important to defeat theme overrides
 * (Ovatheme styles bleed into <h2>, <p>, <code>, <input>, <button>). */

#fapv2-track-root.fapv2-track-root,
#fapv2-track-root.fapv2-track-root * {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
#fapv2-track-root.fapv2-track-root {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 36px;
    background: #ffffff;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(10,37,64,.06);
    color: #1a2333;
    line-height: 1.6;
    font-size: 16px;
}
@media (max-width: 600px) {
    #fapv2-track-root.fapv2-track-root { padding: 22px 20px; border-radius: 8px; }
}
#fapv2-track-root .fapv2-track-root__head {
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e3e8ef;
}
#fapv2-track-root .fapv2-track-root__head h2 {
    color: #0a2540 !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    margin: 0 0 10px !important;
    padding: 0 0 10px !important;
    border: 0 !important;
    border-bottom: 2px solid #c9a548 !important;
    display: inline-block !important;
    letter-spacing: -.3px !important;
    background: transparent !important;
    text-transform: none !important;
    line-height: 1.2 !important;
}
#fapv2-track-root .fapv2-track-root__head p {
    color: #566275 !important;
    margin: 0 !important;
    font-size: 15px !important;
    background: transparent !important;
    line-height: 1.6 !important;
}
#fapv2-track-root .fapv2-track-root__head code {
    background: #f0f4fa !important;
    color: #0a2540 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    font-size: .92em !important;
    border: 1px solid #d8e0eb !important;
    text-decoration: none !important;
}
#fapv2-track-root .fapv2-track-root__form { margin: 0 !important; padding: 0 !important; }
#fapv2-track-root .fapv2-track-root__label {
    display: block !important;
    color: #0a2540 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    margin: 0 0 8px !important;
}
#fapv2-track-root .fapv2-track-root__row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
@media (max-width: 480px) {
    #fapv2-track-root .fapv2-track-root__row { flex-direction: column; }
}
#fapv2-track-root .fapv2-track-root__row input[type="text"] {
    flex: 1;
    padding: 12px 14px !important;
    border: 1px solid #c5cfdb !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #0a2540 !important;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    font-size: 15px !important;
    letter-spacing: .04em !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    min-height: 44px;
}
#fapv2-track-root .fapv2-track-root__row input[type="text"]:focus {
    outline: 0 !important;
    border-color: #0a2540 !important;
    box-shadow: 0 0 0 3px rgba(10,37,64,.12) !important;
}
#fapv2-track-root .fapv2-track-root__row button {
    background: #0a2540 !important;
    color: #fff !important;
    border: 0 !important;
    padding: 0 26px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    transition: background .15s ease;
    line-height: 1 !important;
    min-height: 44px;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}
#fapv2-track-root .fapv2-track-root__row button:hover {
    background: #11365e !important;
    color: #fff !important;
}

#fapv2-track-root .fapv2-track-root__loading {
    color: #566275 !important;
    padding: 20px 0 !important;
    text-align: center;
    font-style: italic;
}
#fapv2-track-root .fapv2-track-root__error {
    margin-top: 18px;
    background: #fff5f5 !important;
    border: 1px solid #fecaca !important;
    border-left: 4px solid #b91c1c !important;
    padding: 14px 18px !important;
    border-radius: 6px;
    color: #7f1d1d !important;
}
#fapv2-track-root .fapv2-track-root__card {
    margin-top: 22px;
    padding: 24px 26px;
    background: #fbfcfe;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
}
#fapv2-track-root .fapv2-track-root__num {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    font-weight: 700 !important;
    color: #0a2540 !important;
    font-size: 20px !important;
    letter-spacing: .04em;
    margin: 0 0 8px !important;
    background: transparent !important;
}
#fapv2-track-root .fapv2-track-root__status {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0a2540 !important;
    margin: 0 0 12px !important;
    padding: 0 0 10px !important;
    border-bottom: 2px solid #c9a548 !important;
    display: inline-block !important;
    background: transparent !important;
}
#fapv2-track-root .fapv2-track-root__row-meta {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 6px 0;
    font-size: 14px;
    color: #1a2333;
}
#fapv2-track-root .fapv2-track-root__row-meta span {
    color: #566275 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 12px !important;
    min-width: 160px;
    font-weight: 600 !important;
}
#fapv2-track-root .fapv2-track-root__row-meta strong {
    color: #0a2540 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}
#fapv2-track-root .fapv2-track-root__lanes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}
@media (max-width: 540px) {
    #fapv2-track-root .fapv2-track-root__lanes { grid-template-columns: 1fr; }
}
#fapv2-track-root .fapv2-track-root__lane {
    background: #ffffff;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    padding: 14px 16px;
}
#fapv2-track-root .fapv2-track-root__lane--federal { border-left: 4px solid #0a2540; }
#fapv2-track-root .fapv2-track-root__lane--state   { border-left: 4px solid #c9a548; }
#fapv2-track-root .fapv2-track-root__lane-head {
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #566275 !important;
    font-weight: 700 !important;
}
#fapv2-track-root .fapv2-track-root__lane-status {
    font-weight: 700 !important;
    color: #0a2540 !important;
    margin-top: 4px;
    font-size: 15px !important;
}
#fapv2-track-root .fapv2-track-root__h3 {
    margin: 22px 0 10px !important;
    color: #0a2540 !important;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
#fapv2-track-root .fapv2-track-root__timeline {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
#fapv2-track-root .fapv2-track-root__timeline li {
    padding: 12px 0 12px 22px !important;
    margin: 0 0 0 6px !important;
    border-left: 2px solid #e3e8ef !important;
    position: relative;
    list-style: none !important;
}
#fapv2-track-root .fapv2-track-root__timeline li::before {
    content: '';
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #0a2540;
    position: absolute;
    left: -6px;
    top: 16px;
}
#fapv2-track-root .fapv2-track-root__t-date {
    font-size: 12px !important;
    color: #566275 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600 !important;
}
#fapv2-track-root .fapv2-track-root__t-status {
    font-weight: 700 !important;
    color: #0a2540 !important;
    margin-top: 2px;
    font-size: 15px !important;
}
#fapv2-track-root .fapv2-track-root__t-note {
    font-size: 14px !important;
    color: #566275 !important;
    margin-top: 4px;
}
#fapv2-track-root .fapv2-track-root__badge {
    display: inline-block !important;
    font-size: 10px !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    color: #fff !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    vertical-align: middle;
    margin-right: 6px;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}
#fapv2-track-root .fapv2-track-root__badge--federal { background: #0a2540 !important; }
#fapv2-track-root .fapv2-track-root__badge--state   { background: #c9a548 !important; color: #1a2333 !important; }

/* ── misc ─────────────────────────────────────────────────────────────── */

.fapv2-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.fapv2-error-block {
    background: #fef2f2; border: 1px solid var(--c-danger); color: var(--c-danger);
    padding: 18px; border-radius: var(--r);
}