/* public/assets/css/form-v2.css — V2 Medical Form styles */

/* ─── Brand-aligned prominent stepper ────────────────────────────────── */
:root {
    --aar-orange: #f78930;
    --aar-orange-dark: #e07a20;
    --aar-orange-soft: #fff1e3;
    --aar-ink: #1a1a1a;
    --aar-ink-muted: #4b5563;
    --aar-line: #d4d4d4;
    --aar-line-soft: #e5e7eb;
    --aar-success: #198754;
    --aar-success-soft: #f0fff4;
}

/* ─── Segmented progress header (brand-aligned, original layout) ─── */
.v2-progress-header {
    margin-bottom: 1rem;
}

.v2-step-counter {
    font-family:
        "Figtree",
        system-ui,
        -apple-system,
        sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--aar-ink);
    letter-spacing: 0.02em;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.v2-step-counter strong {
    color: var(--aar-orange);
    font-weight: 800;
    font-size: 1.4rem;
}

.v2-progress-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 0.7rem;
}

.v2-progress-bar .segment {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: #d4d4d4;
    transition: background 0.25s ease;
    position: relative;
    cursor: not-allowed;
}

.v2-progress-bar .segment.done {
    background: var(--aar-orange);
    cursor: pointer;
}

.v2-progress-bar .segment.active {
    background: var(--aar-orange);
    cursor: default;
}

.v2-progress-bar .segment[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--aar-ink);
    color: #fff;
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    font-weight: 600;
}

/* ─── Circular icon stepper (brand-aligned, AAR orange) ─────────────── */
.v2-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    margin: 0.5rem 0 1rem;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.v2-stepper::-webkit-scrollbar {
    display: none;
}

.v2-stepper__item {
    flex: 1 1 0;
    min-width: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    cursor: not-allowed;
    padding: 0 0.25rem;
}

/* Connector line (drawn on the right of each item except the last) */
.v2-stepper__item::after {
    content: "";
    position: absolute;
    top: 22px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--aar-line);
    z-index: 0;
}
.v2-stepper__item:last-child::after {
    display: none;
}

/* Circle */
.v2-stepper__circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--aar-line);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b9b9b9;
    font-size: 1.15rem;
    z-index: 1;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.2s ease,
        box-shadow 0.25s ease;
}

.v2-stepper__label {
    margin-top: 0.55rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #6b7280;
    line-height: 1.15;
    max-width: 110px;
    word-break: break-word;
    transition: color 0.2s ease;
}

/* Done state — orange ring with check-tinted icon */
.v2-stepper__item.is-done .v2-stepper__circle {
    border-color: var(--aar-orange);
    color: var(--aar-orange);
    background: #fff;
}
.v2-stepper__item.is-done::after {
    background: var(--aar-orange);
}
.v2-stepper__item.is-done {
    cursor: pointer;
}
.v2-stepper__item.is-done .v2-stepper__label {
    color: var(--aar-ink);
}

/*
 * Static stepper — a progress indicator, not navigation.
 *
 * The rules above are written for the JS wizard, where a completed step can be
 * clicked to go back (`pointer`) and a future one cannot (`not-allowed`). Flows
 * that render one step per page load have no clickable steps at all, so both
 * cursors mislead. Opt out with `.v2-stepper--static` (see products/mci/partials/_steps).
 */
.v2-stepper--static .v2-stepper__item,
.v2-stepper--static .v2-stepper__item.is-done {
    cursor: default;
}

/* Active state — solid orange filled circle */
.v2-stepper__item.is-active .v2-stepper__circle {
    background: var(--aar-orange);
    border-color: var(--aar-orange);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(247, 137, 48, 0.18);
    transform: scale(1.05);
}
.v2-stepper__item.is-active .v2-stepper__label {
    color: var(--aar-orange-dark);
    font-weight: 700;
}

.v2-step-title {
    font-family:
        "Figtree",
        system-ui,
        -apple-system,
        sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--aar-ink);
    margin-bottom: 0.15rem;
    text-align: start;
}

.v2-step-desc {
    font-size: 0.9rem;
    color: var(--aar-ink-muted);
    margin-bottom: 0;
    text-align: start;
}

/* ─── Member sub-pagination ──────────────────────────────────────────── */
.member-substepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.65rem 0.85rem;
    background: var(--aar-orange-soft);
    border: 1px solid #fbd6b3;
    border-radius: 8px;
}

.member-substepper__label {
    font-weight: 700;
    color: var(--aar-ink);
    font-size: 0.95rem;
}

.member-substepper__label strong {
    color: var(--aar-orange-dark);
}

.member-substepper__pips {
    display: flex;
    gap: 4px;
}

.member-substepper__pip {
    width: 18px;
    height: 6px;
    border-radius: 3px;
    background: #fff;
    border: 1px solid #f0bf94;
}

.member-substepper__pip.is-done {
    background: var(--aar-orange);
    border-color: var(--aar-orange);
}

.member-substepper__pip.is-active {
    background: var(--aar-orange-dark);
    border-color: var(--aar-orange-dark);
}

.member-substepper__nav {
    display: flex;
    gap: 0.4rem;
}

.member-substepper__btn {
    background: #fff;
    border: 1px solid var(--aar-orange);
    color: var(--aar-orange-dark);
    padding: 0.3rem 0.85rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.member-substepper__btn:hover:not(:disabled) {
    background: var(--aar-orange);
    color: #fff;
}

.member-substepper__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.members_row.member-page {
    display: none;
}

.members_row.member-page.is-active {
    display: flex;
}

/* ─── OCR Review screen ──────────────────────────────────────────────── */
.ocr-review-card {
    background: #fff;
    border: 1px solid var(--aar-line-soft);
    border-radius: 10px;
    padding: 1.25rem;
}

.ocr-review-card__intro {
    background: var(--aar-success-soft);
    border: 1px solid #b6e2c4;
    color: #14532d;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.ocr-review-card__intro i {
    font-size: 1.25rem;
    color: var(--aar-success);
}

.product-buy-flow-actions {
    align-items: center;
    background: #fff;
    border: 1px solid #efcdbb;
    border-radius: 10px;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 1rem;
    padding: 1rem 1.1rem;
}

.product-buy-flow-actions__copy {
    min-width: 0;
}

.product-buy-flow-actions__title {
    color: var(--aar-ink);
    font-size: 0.92rem;
    font-weight: 800;
    margin-bottom: 0.15rem;
}

.product-buy-flow-actions__text {
    color: #5f5651;
    font-size: 0.82rem;
    line-height: 1.45;
}

.product-buy-flow-actions .btn {
    flex: 0 0 auto;
    min-width: 140px;
}

.ocr-review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
}

.ocr-review-field {
    background: #fafafa;
    border: 1px solid var(--aar-line-soft);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    position: relative;
}

.ocr-review-field__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--aar-ink-muted);
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.ocr-review-field__value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--aar-ink);
    word-break: break-word;
}

.ocr-review-field__value--empty {
    color: #9ca3af;
    font-weight: 400;
    font-style: italic;
}

.ocr-review-field__source {
    position: absolute;
    top: 0.55rem;
    right: 0.65rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    background: var(--aar-success-soft);
    color: var(--aar-success);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.ocr-review-card__edit-toggle {
    margin-top: 1rem;
    text-align: end;
}

.ocr-review-card__edit-btn {
    background: transparent;
    border: 1px solid var(--aar-line);
    color: var(--aar-ink-muted);
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.ocr-review-card__edit-btn:hover {
    border-color: var(--aar-orange);
    color: var(--aar-orange-dark);
}

.ocr-review-card__edit-note {
    background: #fff7ed;
    border: 1px solid #fdba74;
    color: #9a3412;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    margin-top: 1rem;
    font-size: 0.85rem;
    display: none;
}

.ocr-review-card.is-editing .ocr-review-card__edit-note {
    display: block;
}

.ocr-review-card.is-editing .ocr-review-field {
    background: #fff;
    border-color: var(--aar-orange);
    border-style: dashed;
}

/* ─── Hide default jQuery Steps tab headers ────────────────────────── */
.wizard > .steps {
    display: none !important;
}

/* Override vendor wizard.css .current/.done/.error color !important */
.current {
    color: inherit !important;
}
.done {
    color: inherit !important;
}

/* ─── Wizard content area ──────────────────────────────────────────── */
.wizard > .content {
    min-height: 10em;
    overflow: hidden;
    height: auto;
    background: #fff;
    margin: 0;
    border-radius: 0;
}

.wizard > .content > .body {
    position: relative;
    float: none;
    width: 100%;
    height: auto;
    padding: 0;
    overflow: visible;
}

/* White card inside the gray content area */
.wizard > .content > .body fieldset {
    background: #fff;
    border-radius: 12px;
    padding: 2rem;
    margin: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* For fieldsets that don't have a card wrapper, add padding */
.wizard > .content > .body {
    padding: 0;
}

/* Remove outer card styling so the gray/white card effect works */
#v2-wizard-form .wizard-section-card,
.wizard-section-card:has(#v2-wizard-form) {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

/* Processing / uploading overlays */
#is-processing,
#is-uploading {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    z-index: 9999;
    text-align: center;
    padding-top: 40vh;
}

#is-processing::after {
    content: "Saving your data...";
    font-size: 1.1rem;
    color: var(--aar-ink);
    font-weight: 600;
}

#is-uploading::after {
    content: "Uploading documents...";
    font-size: 1.1rem;
    color: var(--aar-ink);
    font-weight: 600;
}

#done-uploading {
    display: none;
    text-align: center;
    padding: 3rem 0;
}

/* Action buttons */
#v2-wizard-form .actions {
    padding: 0 1.5rem 1.5rem;
    text-align: right;
}

#v2-wizard-form .actions ul {
    display: inline-flex;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

#v2-wizard-form .actions a {
    display: inline-block;
    padding: 0.55rem 1.4rem;
    font-size: 0.9rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.15s ease;
}

#v2-wizard-form .actions a[href="#next"],
#v2-wizard-form .actions a[href="#finish"] {
    background: var(--aar-orange);
    color: #fff !important;
    border: 1px solid var(--aar-orange);
}

#v2-wizard-form .actions a[href="#next"]:hover,
#v2-wizard-form .actions a[href="#finish"]:hover {
    background: var(--aar-orange-dark);
    border-color: var(--aar-orange-dark);
}

#v2-wizard-form .actions a[href="#previous"] {
    background: #fff;
    color: var(--aar-ink) !important;
    border: 1px solid var(--aar-line);
}

#v2-wizard-form .actions a[href="#previous"]:hover {
    background: #f5f5f5;
}

#v2-wizard-form .actions .disabled a {
    opacity: 0.5;
    pointer-events: none;
}

/* ─── Product buy wizard shell (PA / Travel dev flows) ─────────────── */
.product-buy-wizard {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    max-width: 920px;
    margin: 1.5rem auto 6rem;
    color: var(--aar-ink);
    font-family:
        "Open Sans",
        "Figtree",
        system-ui,
        -apple-system,
        sans-serif;
    letter-spacing: 0;
}

.product-buy-wizard [data-product-wizard-step][hidden] {
    display: none !important;
}

.product-buy-flow [hidden] {
    display: none !important;
}

.product-buy-wizard [data-product-wizard-step],
.product-buy-wizard .product-buy-panel {
    background: #fff;
    border: 1px solid #efcdbb;
    border-radius: 10px;
    padding: 2rem 2.25rem;
    margin: 0 auto 1.25rem;
    box-shadow: none;
}

.product-buy-flow [data-ocr-upload-section],
.product-buy-flow [data-ocr-next-section],
.product-buy-flow .product-buy-submit-panel {
    scroll-margin-top: 1.5rem;
}

.product-buy-flow .product-buy-panel--summary {
    padding: 1.5rem;
}

.product-buy-wizard .product-buy-progress {
    max-width: 920px;
    margin: 0 auto 1.7rem;
    padding: 0 0.25rem;
}

.product-buy-wizard .product-buy-stepper {
    justify-content: center;
    margin: 0;
    padding: 0.15rem 0 0.5rem;
}

.product-buy-wizard .v2-stepper__item {
    min-width: 96px;
    max-width: 140px;
    cursor: not-allowed;
}

.product-buy-wizard .v2-stepper__item::after {
    top: 18px;
    height: 2px;
    background: #ead7cc;
}

.product-buy-wizard .v2-stepper__circle {
    width: 36px;
    height: 36px;
    border-color: #e5c6b6;
    color: #9a7a68;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: none;
}

.product-buy-wizard .v2-stepper__label {
    margin-top: 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #6f625c;
    line-height: 1.15;
    max-width: 112px;
}

.product-buy-wizard .v2-stepper__item.is-done .v2-stepper__circle,
.product-buy-wizard .v2-stepper__item.is-active .v2-stepper__circle {
    width: 38px;
    height: 38px;
}

.product-buy-wizard .v2-stepper__item.is-done .v2-stepper__circle {
    background: var(--aar-orange);
    border-color: var(--aar-orange);
    color: #fff;
}

.product-buy-wizard .v2-stepper__item.is-active .v2-stepper__circle {
    background: #fff;
    border-color: var(--aar-orange);
    color: var(--aar-orange-dark);
    box-shadow: 0 0 0 4px rgba(247, 137, 48, 0.12);
    transform: none;
}

.product-buy-wizard .v2-stepper__item.is-active .v2-stepper__label {
    color: #a34708;
}

.product-buy-wizard .v2-stepper__item.is-done::after {
    background: var(--aar-orange);
}

.product-buy-wizard .product-wizard-actions {
    max-width: 920px;
    background: #fff;
    border: 1px solid #f0d8cb;
    border-radius: 10px;
    padding: 1rem;
    margin: 1rem auto 0 !important;
    box-shadow: 0 8px 22px rgba(26, 26, 26, 0.05);
}

.product-buy-wizard .product-wizard-actions .btn {
    min-width: 120px;
    border-radius: 6px;
    padding: 0.65rem 1.25rem;
    font-size: 0.86rem;
    font-weight: 700;
}

/*
 * `.product-buy-submit-panel` is in these selectors alongside
 * `.product-wizard-actions`: the panel is where the single-page flows (MCI, and
 * the PA/Travel submit step) put their CTA, and it was getting no hover state at
 * all — the button simply did not react to the pointer.
 */
.product-buy-wizard .product-wizard-actions .btn-primary,
.product-buy-wizard .product-wizard-actions .buyonline-btn,
.product-buy-wizard .product-buy-submit-panel .btn-primary,
.product-buy-wizard .product-buy-submit-panel .buyonline-btn {
    background: var(--aar-orange);
    border-color: var(--aar-orange);
    color: #fff;
}

.product-buy-wizard .product-wizard-actions .btn-primary:hover,
.product-buy-wizard .product-wizard-actions .buyonline-btn:hover,
.product-buy-wizard .product-buy-submit-panel .btn-primary:hover,
.product-buy-wizard .product-buy-submit-panel .buyonline-btn:hover {
    background: var(--aar-orange-dark);
    border-color: var(--aar-orange-dark);
}

.product-buy-wizard .product-wizard-actions .btn-outline-secondary {
    background: transparent;
    border-color: transparent;
    color: #5c4f49;
}

.product-buy-wizard .card {
    border-color: #efd3c5;
    border-radius: 8px;
    box-shadow: none;
}

.product-buy-wizard .card-body {
    padding: 1rem;
}

/*
 * ─── Flush (borderless) wizard variant ─────────────────────────────
 *
 * PA and Travel drop the outer container chrome: the summary panel, every
 * section card, and the Back/Next bar lose their 1px border, radius and
 * shadow so the flow reads as one continuous page instead of a stack of
 * boxes-inside-a-box. Opt-in via `product-buy-flow--flush` on the wizard
 * root rather than changing `.product-buy-wizard` itself — MCI shares those
 * base rules and keeps the bordered look. Health PI opted in alongside
 * PA/Travel.
 *
 * Scoped to the OUTER containers only. Inner chrome (the document card
 * header rule, review card, table borders) is deliberately untouched: it is
 * what still separates one block from the next once the outer box is gone.
 */
.product-buy-flow--flush .product-buy-panel,
.product-buy-flow--flush [data-product-wizard-step],
.product-buy-flow--flush .card,
.product-buy-flow--flush .product-wizard-actions {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/*
 * Padding went with the border: a borderless box indented from the page edge
 * reads as a misalignment, not as a card. Vertical rhythm is kept so the
 * sections do not collide.
 */
.product-buy-flow--flush .product-buy-panel,
.product-buy-flow--flush [data-product-wizard-step] {
    padding: 0;
}

.product-buy-flow--flush .product-buy-panel--summary {
    padding: 0;
}

.product-buy-flow--flush .card-body {
    padding: 0;
}

.product-buy-flow--flush .product-wizard-actions {
    padding: 1rem 0 0;
}

.product-buy-wizard h6,
.product-buy-wizard .section-title {
    color: var(--aar-ink);
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 0.8rem;
}

.product-buy-wizard p,
.product-buy-wizard small,
.product-buy-wizard .text-muted {
    color: #5f5651 !important;
    font-size: 0.82rem;
    line-height: 1.5;
}

.product-buy-wizard .buyonline-label,
.product-buy-wizard .form-label,
.product-buy-wizard label {
    color: #2b2725;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.product-buy-wizard .buyonline-input,
.product-buy-wizard .form-control,
.product-buy-wizard .form-select {
    border-color: #dcc8bd;
    border-radius: 6px;
    color: var(--aar-ink);
    font-size: 0.9rem;
    min-height: 42px;
}

.product-buy-wizard .buyonline-input:focus,
.product-buy-wizard .form-control:focus,
.product-buy-wizard .form-select:focus {
    border-color: var(--aar-orange);
    box-shadow: 0 0 0 0.16rem rgba(247, 137, 48, 0.16);
}

.product-buy-wizard input[type="file"].form-control,
.product-buy-wizard input[type="file"].buyonline-input {
    min-height: 84px;
    border: 1px dashed #dfaa90;
    background: #fffaf7;
    color: #7a5a48;
    padding: 1.15rem 1rem;
    cursor: pointer;
}

.product-buy-wizard .product-upload-dropzone {
    align-items: center;
    background: #fff;
    border: 1px dashed #d8a78d;
    border-radius: 6px;
    color: #2b2725;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 116px;
    padding: 1.15rem;
    position: relative;
    text-align: center;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
    width: 100%;
}

.product-buy-wizard .product-upload-dropzone:hover,
.product-buy-wizard .product-upload-dropzone:focus-within {
    background: #fffaf7;
    border-color: var(--aar-orange);
    box-shadow: 0 0 0 0.16rem rgba(247, 137, 48, 0.1);
}

.product-buy-wizard .product-upload-dropzone.has-file {
    background: #f0fff4;
    border-color: var(--aar-success);
}

.product-buy-wizard .product-upload-dropzone .product-upload-input {
    inset: 0;
    min-height: 100%;
    opacity: 0.01;
    padding: 0;
    position: absolute;
    width: 100%;
    z-index: 2;
}

.product-buy-wizard .product-upload-dropzone__icon {
    color: #a66a41;
    font-size: 2.8rem;
    line-height: 1;
    margin-bottom: 0.7rem;
}

.product-buy-wizard
    .product-upload-dropzone.has-file
    .product-upload-dropzone__icon {
    color: var(--aar-success);
}

.product-buy-wizard .product-upload-dropzone__title {
    color: var(--aar-ink);
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.25;
}

.product-buy-wizard .product-upload-dropzone__hint {
    color: #5f5651;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.35;
    margin-top: 0.2rem;
}

.product-buy-wizard
    .product-upload-dropzone.has-file
    .product-upload-dropzone__hint {
    color: #166534;
}

.product-buy-wizard input[type="file"]::file-selector-button {
    background: transparent;
    border: 0;
    color: #a34708;
    font-weight: 800;
    margin-right: 0.85rem;
    padding: 0;
}

.product-buy-wizard .product-document-card {
    background: #fff;
    border: 1px solid #efd3c5;
    border-radius: 8px;
    padding: 1rem;
}

.product-buy-wizard .product-document-card--plain {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.product-buy-wizard .card.product-document-card {
    padding: 0;
}

.product-buy-wizard .product-document-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid #f0d8cb;
    padding-bottom: 0.55rem;
    margin-bottom: 1rem;
}

.product-buy-wizard .product-document-card__title {
    color: var(--aar-ink);
    font-size: 0.96rem;
    font-weight: 800;
}

.product-buy-wizard .product-document-card__title span {
    color: #5f5651;
    font-size: 0.82rem;
    font-weight: 700;
}

.product-buy-wizard .product-document-card__status {
    background: #f2ece9;
    border-radius: 999px;
    color: #6b5c55;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    padding: 0.32rem 0.75rem;
    white-space: nowrap;
}

/*
 * Verified state for the pill. It used to be a hardcoded "Waiting for upload" that
 * nothing ever changed, so a card whose documents were verified still told the
 * customer it was waiting on them. ocr-autofill.js drives the text and this class.
 */
.product-buy-wizard .product-document-card__status--done {
    background: var(--aar-success-soft);
    color: var(--aar-success);
}

.product-buy-wizard .product-document-card__subhead {
    color: #5f5651;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 0.25rem 0 0.9rem;
}

.product-buy-wizard .alert {
    border-radius: 8px;
    font-size: 0.84rem;
}

.product-buy-wizard #proceed {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-width: 180px;
}

/*
 * Card section titles inside the wizard.
 *
 * `.h6` is NOT in this Bootstrap build, so `class="h6"` is inert — and the
 * product layout renders its slot inside #hero, whose `#hero h2 {font-size:24px;
 * margin-bottom:30px}` is an ID selector that outranks every class rule here.
 * A heading therefore needs #hero in its own selector to win, which is why this
 * is declared twice rather than once.
 *
 * Use `<h2 class="wizard-card-title">` so the heading level stays correct while
 * the size matches the wizard's own h6 treatment.
 */
#hero .product-buy-wizard .wizard-card-title,
.product-buy-wizard .wizard-card-title {
    color: var(--aar-ink);
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 0.8rem;
}

/*
 * `overflow-x: auto` makes overflow-y compute to `auto` too (CSS Overflow §3),
 * so a table even a pixel taller than its box sprouts a stray VERTICAL
 * scrollbar next to the rows. These tables only ever need to scroll sideways.
 */
.product-buy-wizard .table-responsive {
    overflow-y: hidden;
}

.product-buy-wizard .table {
    margin-bottom: 0;
    font-size: 0.86rem;
}

.product-buy-wizard .table th {
    color: #8f420c;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.product-buy-wizard .table td {
    color: #2f2925;
    vertical-align: middle;
}

.product-buy-summary-table {
    overflow-x: auto;
}

/* OCR verify button states */
.ocr-verify-btn.btn-success {
    pointer-events: none;
}

/* Responsive fixes for small screens */
@media (max-width: 576px) {
    .wizard > .content > .body fieldset {
        margin: 1rem 0.75rem;
        padding: 1.25rem;
    }
    .product-buy-wizard [data-product-wizard-step],
    .product-buy-wizard .product-buy-panel {
        margin: 1rem 0.75rem;
        padding: 1.25rem;
    }
    .product-buy-flow-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .product-buy-flow-actions .btn {
        width: 100%;
    }
    .product-buy-wizard .product-buy-progress,
    .product-buy-wizard .product-wizard-actions {
        margin-left: 0.75rem;
        margin-right: 0.75rem;
        padding-left: 0;
        padding-right: 0;
    }
    .v2-step-title {
        font-size: 1.05rem;
    }
    .v2-step-counter {
        font-size: 1rem;
        margin-bottom: 0.6rem;
    }
    .v2-step-counter strong {
        font-size: 1.2rem;
    }
    .v2-progress-bar {
        gap: 4px;
    }
    .v2-progress-bar .segment {
        height: 6px;
    }
    .v2-step-desc {
        font-size: 0.82rem;
    }
    .v2-stepper {
        padding-bottom: 4px;
    }
    .v2-stepper__item {
        min-width: 64px;
    }
    .v2-stepper__circle {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
    }
    .v2-stepper__item::after {
        top: 17px;
        height: 2px;
    }
    .v2-stepper__label {
        font-size: 0.68rem;
        margin-top: 0.4rem;
        max-width: 70px;
    }
}

@media (max-width: 768px) {
    .product-buy-wizard {
        margin-bottom: 7rem;
    }

    .product-buy-wizard .product-buy-stepper {
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .product-buy-wizard .v2-stepper__item {
        flex: 0 0 92px;
        min-width: 92px;
    }

    .product-buy-wizard [data-product-wizard-step],
    .product-buy-wizard .product-buy-panel {
        padding: 1.25rem;
    }

    .product-buy-flow-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .product-buy-wizard .product-document-card__header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.55rem;
    }

    .product-buy-wizard .product-wizard-actions {
        position: sticky;
        bottom: 0;
        z-index: 20;
        border-radius: 10px 10px 0 0;
        margin: 1rem 0 0 !important;
        padding: 0.75rem !important;
    }

    .product-buy-wizard .product-wizard-actions .btn {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Fix toastr colors overridden by Bootstrap 5 .toast */
#toast-container > .toast-success {
    background-color: #51a351 !important;
    color: #fff !important;
}
#toast-container > .toast-error {
    background-color: #bd362f !important;
    color: #fff !important;
}
#toast-container > .toast-warning {
    background-color: #f89406 !important;
    color: #fff !important;
}
#toast-container > .toast-info {
    background-color: #2f96b4 !important;
    color: #fff !important;
}

fieldset {
    margin-bottom: 1rem !important;
}
.form-control:disabled {
    background-color: transparent !important;
    opacity: 1;
}

/* ─── Pre-filled summary (proposer step shortener) ─────────────────── */
.prefilled-summary {
    background: var(--aar-success-soft);
    border: 1px solid #b6e2c4;
    border-radius: 10px;
    padding: 0.85rem 1rem;
}

.prefilled-summary__head {
    color: #14532d;
    font-size: 0.92rem;
    margin-bottom: 0.5rem;
}

.prefilled-summary__head i {
    color: var(--aar-success);
}

.prefilled-summary__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.prefilled-summary__chips li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #fff;
    border: 1px solid #cdebd5;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.78rem;
}

.prefilled-summary__chip-label {
    color: var(--aar-ink-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.68rem;
}

.prefilled-summary__chip-value {
    color: var(--aar-ink);
    font-weight: 700;
}

/* ─── OCR-verified locked fields ───────────────────────────────────── */
.ocr-locked-field {
    border-color: var(--aar-success) !important;
    background-color: var(--aar-success-soft) !important;
    cursor: not-allowed !important;
}

.ocr-locked-field.is-unlocked {
    background-color: #fff !important;
    border-style: dashed !important;
    border-color: var(--aar-orange) !important;
    cursor: text !important;
    pointer-events: auto !important;
}

/* A .advanced_select2 <select> is clipped to 1x1px and Select2 renders its own
   box beside it, so the two rules above style something invisible. Restate them
   on the rendered control. Note select.css sets the Select2 border with
   !important, so these need it too. */
.ocr-locked-field + .select2-container .select2-selection {
    border-color: var(--aar-success) !important;
    background-color: var(--aar-success-soft) !important;
    cursor: not-allowed !important;
}

.ocr-locked-field.is-unlocked + .select2-container .select2-selection {
    background-color: #fff !important;
    border-style: dashed !important;
    border-color: var(--aar-orange) !important;
    cursor: pointer !important;
}

.ocr-field-wrapper {
    position: relative;
}

.ocr-field-edit {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    border: 0;
    color: var(--aar-orange-dark);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.1rem 0.3rem;
}

.ocr-field-edit:hover {
    text-decoration: underline;
}