/* Configurator flow and review: Step n of N, the sticky bar, the sticky Order Summary, the one price
   component, the itemised review and the payment cards (aesthetic findings 2, 7, 8, 12, 24 and 33).
   Loaded after css/configurator.css, so equal-specificity rules here win. Text on the orange header is
   white: text on orange is always white (Ethan, 19 Oct 2026). */

/* ---------------------------------------------------------------------------------------------
   0. Sticky needs scrollable ancestors out of the way. main and .configurator-content both set
   overflow to hidden/auto, which made each a scroll container that never scrolls: the nav footer and
   the Order Summary were "sticky" inside a box as tall as their content, so they never stuck.
   overflow-x: clip keeps the horizontal guard without creating a scroll container.
   --------------------------------------------------------------------------------------------- */
.configurator-main { overflow: visible; overflow-x: clip; }
.configurator-content { overflow: visible; overflow-x: clip; }

/* ---------------------------------------------------------------------------------------------
   1. One price component (finding 24): amount, unit, qualifier; "Included" for zero.
   js: VRConfigurator.priceHtml. The same colours and sizes on every step.
   --------------------------------------------------------------------------------------------- */
.configurator-main .price:has(> .price-amount) {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.4rem;
}
.configurator-main .price-amount {
    font-weight: 700;
    color: #1f2937;
    font-variant-numeric: tabular-nums;
}
.configurator-main .price-unit,
.configurator-main .price-qualifier {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #475569;
}
.configurator-main .price--included .price-amount {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 0.05rem 0.6rem;
}
/* Amounts and totals share the ink colour (they were orange on some steps, black on others) */
.price-widget .price-line.total,
.pricing-summary .price-line.total { color: #1f2937; }
.order-item .item-price { color: #1f2937; font-weight: 700; }

/* The Order Summary list used to scroll inside a 300px box, cutting the third item in half; the whole
   sidebar scrolls instead (section 4), so every line is visible */
.order-items { max-height: none; overflow: visible; }

.price-context {
    margin: 0.6rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #475569;
    text-align: left;
}

/* ---------------------------------------------------------------------------------------------
   2. Progress: "Step n of N" and a thin bar under the tracker on phones (finding 33), and the note
   on the package step at every width.
   --------------------------------------------------------------------------------------------- */
.progress-summary { max-width: 420px; margin: 0 auto; text-align: center; color: #ffffff; }
.progress-summary-text,
.progress-summary-bar { display: none; }
.progress-summary-text { margin: 0.75rem 0 0.4rem; font-weight: 700; font-size: 0.95rem; color: #ffffff; } /* style.css p would make it grey */
.progress-summary-name { font-weight: 600; }
.progress-summary-name::before { content: "\00b7"; margin: 0 0.35rem 0 0.15rem; }
.progress-summary-bar {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
    overflow: hidden;
}
.progress-summary-bar > span {
    display: block;
    height: 100%;
    width: 0;
    background: #ffffff;
    border-radius: inherit;
    transition: width 0.25s ease;
}
.progress-summary-note {
    margin: 0.75rem auto 0;
    max-width: 46ch;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.4;
    color: #ffffff;
}
.progress-summary-note[hidden] { display: none; }
@media (max-width: 768px) {
    .progress-summary-text { display: block; }
    .progress-summary-bar { display: block; }
}

/* Use Cases is required: the asterisk sits with its heading, in the heading colour */
.required-mark { margin-left: 0.1rem; }

/* style.css breaks words anywhere under 768px, which cut "Classroom" in two and let flex rows shrink a
   word to one letter. Break at spaces and slashes only; a word breaks mid-word only if it cannot fit at all. */
.use-case-option .label-text { min-width: 0; word-break: normal; overflow-wrap: break-word; }
.pricing-note,
.consent-hint,
.price-context,
.progress-summary-note,
.nav-footer .next-blocked-hint,
.flow-bar-status span { word-break: normal; overflow-wrap: break-word; }

/* ---------------------------------------------------------------------------------------------
   3. Bottom bar: Back, the reason Next is off, and Next, in one row with Next always at the right
   edge (finding 2); Step n of N and the running total above them on phones and tablets (finding 12).
   --------------------------------------------------------------------------------------------- */
/* The bar really sticks now, so it is slimmer than the 118px it was when it only sat at the end of the page */
.nav-footer {
    padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom, 0px));
    /* above the cards' info badges and package badges (z-index 10), below the header, modals, the cookie banner and the chat bubble */
    z-index: 90;
}
.nav-footer .nav-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}
.nav-footer .next-blocked-hint {
    flex: 1 1 auto;
    margin: 0;
    max-width: none;
    text-align: right;
    font-size: 0.9rem;
    line-height: 1.35;
}
.nav-footer #next-btn { margin-left: auto; }
.nav-footer .btn-primary:disabled {
    background: #cbd5e1 !important;
    background-color: #cbd5e1 !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
    opacity: 1;
}

.flow-bar-status { display: none; }
.flow-bar-total[hidden] { display: none; }

@media (max-width: 1024px) {
    .nav-footer {
        padding: 0.6rem 0 calc(0.6rem + env(safe-area-inset-bottom, 0px));
        border-top-width: 1px;
        box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.14);
    }
    .nav-footer .container { padding: 0 1rem; }
    .flow-bar-status {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        margin: 0 0 0.5rem;
        font-size: 0.875rem;
        color: #1f2937;
    }
    .flow-bar-step { font-weight: 700; padding-top: 0.15rem; white-space: nowrap; }
    .flow-bar-total {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: flex-end;
        gap: 0 0.4rem;
        text-align: right;
    }
    .flow-bar-total-amount { font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
    .flow-bar-total-note { flex-basis: 100%; font-size: 0.75rem; color: #475569; }

    .nav-footer .nav-buttons { flex-wrap: wrap; gap: 0.5rem 0.75rem; padding: 0; }
    .nav-footer .next-blocked-hint { order: -1; flex: 0 0 100%; text-align: left; font-size: 0.85rem; }
    .nav-footer .nav-buttons button {
        width: auto;
        min-width: 0;
        min-height: 44px;
        padding: 0.55rem 1.1rem;
    }
    .nav-footer #prev-btn { flex: 0 0 auto; }
    .nav-footer #next-btn { flex: 1 1 auto; margin-left: 0; }
    /* Room for the bar under the last control */
    .configurator-content { padding-bottom: calc(9rem + env(safe-area-inset-bottom, 0px)); }
}

/* A focused field scrolled into view must not sit under the bar */
html:has(.nav-footer) { scroll-padding-bottom: calc(var(--flow-bar-h, 100px) + 1rem); }

/* The chat bubble sat on top of Next; lift it clear of the bar (js sets --flow-bar-h) */
body:has(.nav-footer) .whatsapp-widget { bottom: calc(var(--flow-bar-h, 100px) + 12px); }

/* ---------------------------------------------------------------------------------------------
   4. Sticky Order Summary on desktop (finding 12)
   --------------------------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    .content-grid { align-items: start; }
    .price-sidebar {
        position: sticky;
        top: calc(var(--header-height, 82px) + 1rem);
        align-self: start;
        height: auto;
        overflow: visible;
        padding-bottom: 0;
    }
    /* Only the item list scrolls (when the order is long); the Total and the VAT line stay in view */
    .price-widget {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - var(--header-height, 82px) - 7rem);
        max-height: calc(100dvh - var(--header-height, 82px) - 7rem);
    }
    .price-widget .order-items { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}

/* ---------------------------------------------------------------------------------------------
   5. Review (findings 7 and 8)
   --------------------------------------------------------------------------------------------- */
/* Itemised table: name, quantity, unit price, line total */
.order-table {
    display: table; /* style.css makes every table display:block under 768px */
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    color: #1f2937;
}
.order-table th,
.order-table td {
    padding: 0.65rem 0.5rem;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
    vertical-align: top;
}
.order-table thead th {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #475569;
    background: #f8fafc;
}
.order-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.order-table tbody th { font-weight: 600; }
.order-table .is-included { color: #475569; font-weight: 600; }
.package-contents { margin-top: 0.5rem; }
.package-contents h5 { margin: 0 0 0.5rem; font-size: 1rem; color: #1f2937; }
.order-table--contents { font-size: 0.9rem; }
.order-table--contents tbody th { font-weight: 500; }
.package-empty { margin: 0; color: #475569; }

/* A package price is one figure, so the box is smaller than before and its qualifier sits beside it */
.review-content .package-price-large {
    font-size: 1.6rem;
    padding: 0.75rem 1rem;
    color: #1f2937;
}
.review-content .package-price-large .price-qualifier { font-size: 0.875rem; }

/* Shipping sits above the totals; brand-styled radios */
.shipping-section {
    margin: 0 0 1.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}
.shipping-section h4 { margin: 0 0 0.75rem; font-size: 1.1rem; color: #1f2937; }
.shipping-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.shipping-option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #1f2937;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.shipping-option:hover { border-color: #F89521; }
.shipping-option:has(input:checked) { border-color: #F89521; background: #fff7ed; }
.configurator-main .shipping-option input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    display: grid;
    place-content: center;
    flex: none;
    width: 1.3rem;
    height: 1.3rem;
    margin: 0;
    border: 2px solid #94a3b8 !important;
    border-radius: 50%;
    background-color: #fff !important;
    cursor: pointer;
}
.configurator-main .shipping-option input[type="radio"]::before {
    content: "";
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 50%;
    background: #F89521;
    transform: scale(0);
    transition: transform 0.12s ease;
}
.configurator-main .shipping-option input[type="radio"]:checked { border-color: #F89521 !important; }
.configurator-main .shipping-option input[type="radio"]:checked::before { transform: scale(1); }
.configurator-main .shipping-option input[type="radio"]:focus-visible { outline: 3px solid #1f2937; outline-offset: 2px; }
.shipping-required-note { margin: 0.75rem 0 0; font-size: 0.9rem; font-weight: 600; color: #92400e; }
.shipping-address { margin-top: 1rem; }
.shipping-address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.shipping-address .form-group label { display: block; margin-bottom: 0.25rem; font-weight: 600; text-align: left; }
.shipping-address .form-group input { width: 100%; box-sizing: border-box; }

/* Totals use the full width and the note is body text, not a squeezed right-hand column */
.pricing-summary { margin-top: 0; padding: 1.25rem 1.5rem; }
.pricing-summary .pricing-breakdown { max-width: none; margin: 0; }
.pricing-summary .price-line {
    margin: 0;
    padding: 0.6rem 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 1rem;
}
.pricing-summary .price-line.total {
    margin-top: 0.25rem;
    padding-top: 0.9rem;
    border-top: 2px solid #cbd5e1;
    border-bottom: 0;
    font-size: 1.35rem;
}
.pricing-note {
    margin: 1rem 0 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #475569;
    text-align: left;
    overflow-wrap: break-word;
}
.pricing-note a { color: inherit; text-decoration: underline; }

/* Consents, the reason beside the gated buttons, and payment cards at full strength */
.consent-hint {
    margin: 0.25rem 0 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #b0281e;
    text-align: center;
}
.consent-hint[hidden] { display: none; }
.payment-card .consent-hint { margin: 0 0 0.6rem; font-size: 0.85rem; }

.quote-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.75rem; margin: 1rem 0 0; text-align: center; }
#generated-quote-container { flex-basis: 100%; text-align: center; }
#generated-quote-code { display: inline-block; padding: 0.5rem 0.75rem; border: 1px dashed var(--primary-color); border-radius: 8px; font-weight: 600; }
#generated-quote-container .btn-secondary { margin-left: 0.5rem; }

.payment-card.disabled { opacity: 1; filter: none; }
.payment-card.disabled:hover { transform: none; box-shadow: none; border-color: #e2e8f0; }
.payment-btn:disabled,
.payment-btn.is-disabled,
.payment-btn.invoice-btn:disabled,
.payment-btn.card-btn:disabled {
    background: #e5e7eb !important;
    color: #4b5563 !important;
    cursor: not-allowed;
}
/* Card payment not possible for this order (over 1,000 pounds or a Meta Quest): muted, with the reason in the note */
.payment-card.payment-card--unavailable { background: #f8fafc; }
.payment-card.payment-card--unavailable h4,
.payment-card.payment-card--unavailable p { color: #475569; }
.payment-card.payment-card--unavailable .payment-icon { background: #94a3b8; }

@media (max-width: 768px) {
    .review-content { padding: 1rem; }
    .pricing-summary { padding: 1rem; }
    .shipping-section { padding: 1rem; }
    .payment-options { padding: 1.25rem; }
}
@media (max-width: 700px) {
    .shipping-methods { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .shipping-address-grid { grid-template-columns: 1fr; }

    /* Itemised table on phones: the item name on its own line, then "qty x unit price" and the line total */
    .order-table:not(.order-table--contents) thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .order-table:not(.order-table--contents),
    .order-table:not(.order-table--contents) tbody { display: block; }
    .order-table:not(.order-table--contents) tbody tr {
        display: grid;
        grid-template-columns: auto auto 1fr auto;
        column-gap: 0.35rem;
        padding: 0.7rem 0;
        border-bottom: 1px solid #e2e8f0;
    }
    .order-table:not(.order-table--contents) tbody th,
    .order-table:not(.order-table--contents) tbody td { padding: 0; border: 0; }
    .order-table:not(.order-table--contents) .col-item { grid-column: 1 / -1; margin-bottom: 0.25rem; }
    .order-table:not(.order-table--contents) .col-qty::after { content: " \00d7"; }
    .order-table:not(.order-table--contents) .col-line { grid-column: 4; font-weight: 700; }
    /* An included line reads "Qty 3" and Included, with no unit price */
    .order-table:not(.order-table--contents) .row-included .col-unit { display: none; }
    .order-table:not(.order-table--contents) .row-included .col-qty::before { content: "Qty "; }
    .order-table:not(.order-table--contents) .row-included .col-qty::after { content: ""; }
}

/* Order Summary quantity box: configurator.css gives phones 16px side padding inside a 40px field, which clips the number */
.order-item .qty-input-mini { padding: 0; text-align: center; }