/* 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;
}

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

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

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