/* ============================================================
   Add-a-Title wizard  (Views/Create/PrintWizard.vbhtml)
   Paginated step flow (left) + live book preview (right).
   Theme-aware via Falcon --falcon-* vars + html.dark overrides.
   ============================================================ */

.title-wizard {
    /* wizard accents (bookvault blue) */
    --wiz-accent: #4c9ed6;
    --wiz-accent-dark: #3b88bd;
    --wiz-accent-soft: #cfe4f5;
    --wiz-step-label: #6cb2e6;
    --wiz-selected: #28b56a;
    --wiz-preview-bg: #e8f1fa;
    --wiz-pill-bg: #ffffff;

    display: flex;
    align-items: stretch;
    gap: 0;
    position: relative;   /* contains the absolute .wiz-splash overlay */
    margin: 0 -0.5rem 0; /* bleed sideways only; keep top spacing */
    border-radius: 0.75rem;
    background: var(--falcon-card-bg);
    box-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.05);
    /* NOTE: no overflow:hidden — it would break the sticky preview */
}

html.dark .title-wizard {
    --wiz-preview-bg: #1c2634;
    --wiz-accent-soft: #2a3f56;
    --wiz-pill-bg: #212e3f;
}

/* ---- Left column : the steps ---- */
.wiz-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 3rem clamp(1.25rem, 4vw, 3.25rem) 0.5rem;
    background: var(--falcon-card-bg);
    border-radius: 0.75rem 0 0 0.75rem;
}

/* ---- Right column : the live preview ---- */
.wiz-preview {
    flex: 0 0 42%;
    min-width: 380px;
    position: relative;
    background: var(--wiz-preview-bg);
    padding: 1.5rem;
    border-radius: 0 0.75rem 0.75rem 0;
}

.wiz-preview-sticky {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 160px);
    min-height: 460px;
}

/* ============================================================
   Progress stepper
   ============================================================ */
.wiz-stepper {
    position: relative;
    margin: 0.5rem auto 2.5rem;   /* room below for the labels + gap to STEP 1 */
    max-width: 880px;             /* wider to fit the 10 section labels */
    width: 100%;
}

.wiz-stepper-track {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: var(--wiz-accent-soft);
    margin: 0 6px;
}

.wiz-stepper-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 999px;
    background: var(--wiz-accent);
    width: 0;
    transition: width 0.35s ease;
}

.wiz-stepper-nodes {
    position: absolute;
    left: 6px;
    right: 6px;
    top: 0;
    height: 10px;              /* match the track so dots centre on the line */
    display: flex;
    align-items: center;       /* vertically centre each dot on the track */
    justify-content: space-between;
}

.wiz-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: default;
    background: none;
    border: none;
    padding: 0;
    line-height: 0;
}

.wiz-node .wiz-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--wiz-accent-soft);
    border: 2px solid var(--wiz-accent-soft);
    transition: all 0.25s ease;
}

.wiz-node.is-done .wiz-dot {
    background: var(--wiz-accent);
    border-color: var(--wiz-accent);
}

.wiz-node.is-current .wiz-dot {
    width: 20px;
    height: 20px;
    background: #fff;
    border: 3px solid var(--wiz-accent);
    box-shadow: 0 2px 6px rgba(76, 158, 214, 0.5);
}

.wiz-node .wiz-node-label {
    position: absolute;
    top: 50%;              /* = line centre (node is centred on the track) */
    left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;      /* consistent gap below the line for every label */
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--falcon-tertiary-color, #9da9bb);
}

.wiz-node.is-current .wiz-node-label {
    color: var(--falcon-emphasis-color, #344050);
    font-weight: 700;
}

.wiz-node.is-clickable {
    cursor: pointer;
}

/* a step that doesn't apply to the chosen binding : dimmed + not clickable */
.wiz-node.is-skipped {
    opacity: 0.35;
    cursor: default;
}

.wiz-node.is-skipped .wiz-node-label {
    text-decoration: line-through;
}

/* ---- Case Options (step 7) : jacket + relocated lamination ---- */
.wiz-jacket-lam {
    max-width: 720px;
    margin: 0.5rem auto 0;
}

/* lamination card relocated under the jacket : drop its card chrome + STEP label
   so it reads as part of the jacket section, not a standalone step */
.wiz-lam-embedded {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
}

.wiz-lam-embedded .card-body > .mb-2.text-center h6:first-child {
    display: none;
}

.wiz-cased-section {
    max-width: 760px;
    margin: 0 auto;
    padding-top: 0.5rem;
}

#pnlClothOptions.wiz-cased-section,
.wiz-jacket-lam {
    border-top: 1px solid var(--falcon-border-color, #e3e6ed);
    margin-top: 1.25rem;
    padding-top: 1.25rem;
}

.wiz-cased-heading {
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    color: var(--wiz-step-label, #6cb2e6);
    margin-bottom: 0.75rem;
}

/* ---- Title Pricing cards (final step) ---- */
.wiz-price-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-align: center;
    padding: 0.9rem 0.65rem;
    border: 1px solid var(--falcon-border-color, #e3e6ed);
    border-radius: 0.7rem;
    background: var(--falcon-card-bg, #fff);
}

.wiz-price-name {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--falcon-emphasis-color, #344050);
}

.wiz-price-amount {
    font-weight: 800;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--wiz-accent-dark, #3b88bd);
}

.wiz-price-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.16rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}

.wiz-price-tag.is-yes {
    background: rgba(40, 181, 106, 0.13);
    color: #1a8a4f;
}

.wiz-price-tag.is-no {
    background: var(--falcon-200, #edf2f9);
    color: var(--falcon-secondary-color, #5e6e82);
}

.wiz-price-card.is-unavailable {
    background: var(--falcon-danger-bg-subtle, #fdecee);
    border-color: rgba(230, 55, 87, 0.28);
}

.wiz-price-warn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    color: #c0324b;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.32;
}

.wiz-price-warn i {
    font-size: 1.15rem;
}

html.dark .wiz-price-tag.is-yes {
    background: rgba(40, 181, 106, 0.2);
    color: #4dd18b;
}

html.dark .wiz-price-card.is-unavailable {
    background: rgba(230, 55, 87, 0.12);
}

html.dark .wiz-price-warn {
    color: #f2889b;
}

/* ============================================================
   Step panels
   ============================================================ */
.wiz-steps {
    flex: 0 0 auto;
}

.wiz-step {
    display: none;
    animation: wizFade 0.3s ease;
}

.wiz-step.is-active {
    display: block;
}

@keyframes wizFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Neutralise the legacy card chrome + disabled dimming inside the wizard:
   the wizard controls progression, so panels are never greyed out. */
.title-wizard .option-box {
    border: none;
    box-shadow: none;
    background: transparent;
    margin-bottom: 0 !important;
}

/* the step sections + their card chrome must not add vertical padding of
   their own — the wizard controls spacing so the header hugs the stepper */
.title-wizard .wiz-step {
    padding: 0;
    margin: 0;
}

.title-wizard .option-box > .card-body,
.title-wizard .wiz-step > .card > .card-body {
    padding: 0;
}

.title-wizard .option-box .card-body > .mb-2.text-center,
.title-wizard .wiz-step > .mb-2.text-center {
    margin-bottom: 0.75rem !important;
}

.title-wizard .option-box.opacity-50,
.title-wizard .opacity-50 {
    opacity: 1 !important;
}

/* Step header : STEP N / Title / subtitle */
.title-wizard .option-box .card-body > .text-center:first-child h6:first-child,
.title-wizard .option-box .card-body > .mb-2.text-center h6:first-child,
.title-wizard .wiz-step > .mb-2.text-center h6:first-child {
    color: var(--wiz-step-label);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.title-wizard .option-box .card-body > .text-center h5,
.title-wizard .option-box .card-body > .mb-2.text-center h5,
.title-wizard .wiz-step > .mb-2.text-center h5 {
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0.35rem;
}

.title-wizard .option-box .card-body > .text-center p,
.title-wizard .option-box .card-body > .mb-2.text-center p,
.title-wizard .wiz-step > .mb-2.text-center p {
    color: var(--falcon-secondary-color, #748194);
    max-width: 34rem;
    margin: 0 auto;
}

/* ============================================================
   Selectable option cards (Binding / Lamination / Stocks ...)
   Reuses DefaultQuoteView markup, restyled to 2-col cards
   with a corner radio + green selected ring.
   ============================================================ */
.title-wizard .select-content > .row {
    max-width: 760px;
    margin: 0.25rem auto 0;
}

.title-wizard .option-card {
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 1rem !important;
}

@media (max-width: 575.98px) {
    .title-wizard .option-card {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.title-wizard .option-card .radio-select {
    height: 100%;
}

.title-wizard .bind-option {
    position: relative;
    border: 1.5px solid var(--falcon-border-color, #e3e6ed);
    border-radius: 0.65rem;
    background: var(--falcon-card-bg);
    padding: 0.85rem 2.5rem 0.85rem 0.85rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    height: 100%;
}

.title-wizard .bind-option:hover {
    border-color: var(--wiz-accent);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}

/* flatten the theme's inner card/shadow chrome so only the outer card shows */
.title-wizard .option-card .form-check,
.title-wizard .option-card .radio-select,
.title-wizard .bind-option .radio-select-content,
.title-wizard .bind-option .bind-select {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

/* corner radio indicator (the real input stays hidden) */
.title-wizard .bind-option::after {
    content: "";
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--falcon-border-color, #c9ced8);
    background: var(--falcon-card-bg);
    transition: all 0.18s ease;
}

.title-wizard .form-check-input:checked + .bind-option,
.title-wizard .option-card:has(.form-check-input:checked) .bind-option {
    border-color: var(--wiz-selected);
    box-shadow: 0 0 0 1px var(--wiz-selected);
}

.title-wizard .form-check-input:checked + .bind-option::after,
.title-wizard .option-card:has(.form-check-input:checked) .bind-option::after {
    border-color: var(--wiz-selected);
    background: var(--wiz-selected);
    box-shadow: inset 0 0 0 3px var(--falcon-card-bg);
}

/* card inner layout : thumbnail + text */
.title-wizard .bind-option .row.m-1 {
    margin: 0 !important;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.title-wizard .bind-option .row.m-1 > .col-xl-6:first-child {
    flex: 0 0 96px;
    width: 96px;
    max-width: 96px;
    padding: 0;
}

.title-wizard .bind-option .row.m-1 > .col-xl-6:last-child {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    padding-left: 0.9rem;
    text-align: left;
}

.title-wizard .bind-option img.chkImg {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 0.45rem;
}

.title-wizard .bind-option .text-800 {
    font-size: 1rem;
    line-height: 1.25;
}

/* description lines : wrap normally, not one word per line */
.title-wizard .bind-option .text-600 {
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}

/* ============================================================
   Nav footer  (Back / Next)
   ============================================================ */
.wiz-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem 0 0.25rem;
    /* keep Back/Next in view without scrolling on tall steps */
    position: sticky;
    bottom: 0;
    background: linear-gradient(to top, var(--falcon-card-bg) 78%, rgba(0, 0, 0, 0));
    z-index: 5;
}

.wiz-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border: none;
    border-radius: 999px;
    font-weight: 600;
    padding: 0.7rem 1.9rem;
    font-size: 0.95rem;
    transition: all 0.18s ease;
    cursor: pointer;
}

.wiz-btn-back {
    background: transparent;
    border: 1.5px solid var(--wiz-accent);
    color: var(--wiz-accent);
}

.wiz-btn-back:hover {
    background: var(--wiz-accent);
    color: #fff;
}

.wiz-nav-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.wiz-btn-finish {
    background: transparent;
    border: 1.5px solid var(--wiz-accent);
    color: var(--wiz-accent);
    padding: 0.7rem 1.4rem;
}

.wiz-btn-finish:hover {
    background: var(--wiz-accent);
    color: #fff;
}

.wiz-btn-next {
    background: var(--wiz-accent);
    color: #fff;
    box-shadow: 0 4px 12px rgba(76, 158, 214, 0.35);
}

.wiz-btn-next:hover {
    background: var(--wiz-accent-dark);
}

.wiz-btn:disabled,
.wiz-btn.is-disabled {
    background: var(--falcon-secondary-bg, #e9ecef);
    color: var(--falcon-tertiary-color, #a5adba);
    border-color: transparent;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================
   Live preview panel
   ============================================================ */
.wiz-preview-book {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;   /* allow the canvas to own the height */
}

/* ---- three.js live book preview ---- */
.wiz-scene {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: wizBookIn 0.45s ease;
}

#wizBookCanvas {
    display: block;
    width: 100%;
    height: 100%;
}

@keyframes wizBookIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* empty state (no binding chosen yet) */
.wiz-preview-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    opacity: 0.65;
}

.wiz-preview-empty img {
    max-width: 220px;
    width: 55%;
    height: auto;
}

/* spec pills (top-left) */
/* one left-hand column holding the spec pills then the availability pills */
.wiz-pill-overlay {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 78%;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    z-index: 2;
    pointer-events: none;
}

.wiz-pill-overlay .wiz-pill {
    pointer-events: auto;
}

.wiz-spec-pills {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
}

/* page-count colour-mode selector */
.wiz-colmode .btn {
    font-weight: 600;
}

/* informational note (e.g. toner printing guidance) : reads as guidance, not a field */
.wiz-info-note {
    display: flex;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.6rem 0.85rem;
    border-radius: 0.6rem;
    background: var(--falcon-info-bg-subtle, rgba(13, 110, 253, 0.06));
    color: var(--falcon-secondary-color, #5e6e82);
    font-size: 0.82rem;
    line-height: 1.45;
}

.wiz-info-note i {
    margin-top: 0.15rem;
    color: var(--falcon-info, #2c7be5);
}

/* availability pills : stacked ABOVE the specs (order:-1) in the same left column */
.wiz-avail-pills {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
}

.wiz-pill-overlay .wiz-avail-pills {
    order: -1;
}

/* wide preview panels : enough room to put availability back on the right */
@media (min-width: 1400px) {
    .wiz-pill-overlay {
        left: 0;
        right: 0;
        max-width: none;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    /* back to source order (specs left, availability right) */
    .wiz-pill-overlay .wiz-avail-pills {
        order: 0;
        max-width: 42%;
        align-items: flex-end;
    }

    .wiz-pill-overlay .wiz-spec-pills {
        max-width: 56%;
    }
}

.wiz-pill {
    background: var(--wiz-pill-bg);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-size: 0.82rem;
    color: var(--falcon-secondary-color, #6c757d);
    box-shadow: 0 3px 10px rgba(30, 50, 80, 0.1);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: wizFade 0.25s ease;
}

.wiz-pill .wiz-pill-val {
    color: var(--falcon-emphasis-color, #344050);
    font-weight: 700;
}

/* eye toggle to hide/show all preview pills : bottom-right, above the hint pill */
.wiz-spec-toggle {
    position: absolute;
    bottom: 3.2rem;
    right: 0;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    color: var(--wiz-accent-dark, #3b88bd);
    font-size: 0.82rem;
    font-weight: 600;
    z-index: 3;
}

/* collapsed : hide every pill except the toggle itself */
.wiz-preview-sticky.pills-hidden .wiz-spec-pills .wiz-pill,
.wiz-preview-sticky.pills-hidden .wiz-avail-pills .wiz-pill {
    display: none !important;
}

/* spec pills jump to their step : show they are interactive */
#wizSpecPills .wiz-pill {
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

#wizSpecPills .wiz-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(30, 50, 80, 0.18);
}

.wiz-pill.is-hidden {
    display: none;
}

.wiz-pill .flag-icon {
    margin-left: 0.15rem;
    border-radius: 3px;
}

/* bottom hint pill */
.wiz-preview-hint {
    align-self: center;
    margin-top: auto;
    background: var(--wiz-pill-bg);
    border-radius: 999px;
    padding: 0.55rem 1.2rem;
    font-size: 0.85rem;
    color: var(--falcon-secondary-color, #6c757d);
    box-shadow: 0 3px 10px rgba(30, 50, 80, 0.1);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ============================================================
   Mobile controls : flags row, specs drawer, preview toggle
   (hidden on desktop; activated < 992px)
   ============================================================ */
.wiz-mobile-bar,
.wiz-mobile-flags,
.wiz-spec-drawer,
.wiz-drawer-backdrop,
.wiz-preview-close {
    display: none;
}

@media (max-width: 991.98px) {
    /* tighten the top so the flags + buttons don't dominate the screen */
    .wiz-main {
        padding-top: 1.25rem;
    }

    .wiz-stepper {
        margin-bottom: 1.1rem;
    }

    /* flags under the stepper : compact single strip */
    .wiz-mobile-flags {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem;
        margin: 0 0 0.6rem;
    }

    .wiz-mobile-flags .wiz-avail-pills {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem;
        margin: 0;
    }

    .wiz-mobile-flags .wiz-pill {
        font-size: 0.72rem;
        padding: 0.32rem 0.7rem;
    }

    /* the inline preview is hidden; shown as an overlay via the Preview button */
    .wiz-preview {
        display: none;
    }

    .wiz-preview.preview-open {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1050;
        overflow: auto;
        padding: 1rem 1rem 5rem;
        border-radius: 0;
    }

    /* the eye "Hide details" toggle isn't used on mobile (specs live in the drawer) */
    .wiz-spec-toggle {
        display: none !important;
    }

    /* close button for the mobile preview overlay */
    .wiz-preview.preview-open .wiz-preview-close {
        display: inline-flex;
        position: fixed;
        top: 0.85rem;
        right: 0.85rem;
        z-index: 1055;
        width: 2.4rem;
        height: 2.4rem;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 999px;
        background: var(--wiz-pill-bg, #fff);
        color: var(--falcon-emphasis-color, #344050);
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
        font-size: 1.15rem;
        cursor: pointer;
    }

    /* Specifications / Preview buttons : sit under the flags, above the step */
    .wiz-mobile-bar {
        display: flex;
        gap: 0.6rem;
        justify-content: center;
        margin: 0 0 0.9rem;
    }

    .wiz-mbtn {
        flex: 1 1 0;
        max-width: 200px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        border: 1.5px solid var(--wiz-accent);
        color: var(--wiz-accent);
        background: transparent;
        border-radius: 999px;
        padding: 0.45rem 0.85rem;
        font-weight: 600;
        font-size: 0.82rem;
        cursor: pointer;
    }

    /* right-slide specifications drawer */
    .wiz-spec-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(88vw, 360px);
        background: var(--falcon-card-bg);
        box-shadow: -6px 0 20px rgba(0, 0, 0, 0.15);
        transform: translateX(100%);
        transition: transform 0.25s ease;
        z-index: 1060;
    }

    .wiz-spec-drawer.is-open {
        transform: translateX(0);
    }

    .wiz-spec-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.1rem;
        font-weight: 700;
        border-bottom: 1px solid var(--falcon-border-color, #e3e6ed);
    }

    .wiz-drawer-close {
        border: none;
        background: none;
        font-size: 1.15rem;
        cursor: pointer;
        color: var(--falcon-secondary-color, #6c757d);
    }

    .wiz-spec-drawer-body {
        padding: 1rem 1.1rem;
        overflow: auto;
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
    }

    .wiz-spec-drawer-body .wiz-spec-pills {
        position: static;
        max-width: 100%;
        gap: 0.55rem;
    }

    .wiz-drawer-backdrop.is-open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1045;
    }
}

/* ============================================================
   Responsive : stack preview beneath steps on small screens
   ============================================================ */
@media (max-width: 991.98px) {
    .title-wizard {
        flex-direction: column;
        margin: 0;
    }

    .wiz-preview-sticky {
        position: relative;
        top: 0;
        height: auto;
        min-height: 360px;
    }

    .wiz-pill-overlay {
        position: relative;
        max-width: 100%;
    }

    .wiz-spec-pills,
    .wiz-avail-pills {
        flex-direction: row;
        flex-wrap: wrap;
        max-width: 100%;
        margin-bottom: 0.75rem;
        align-items: flex-start;
    }
}

/* ============================================================
   Size step  (SizeSelectView : list + custom + mm grid plot)
   ============================================================ */
.title-wizard .size-unit-toggle {
    display: flex;
    width: max-content;
    margin: 0 auto 1.75rem;
    background: var(--wiz-accent-soft);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
}

.title-wizard .size-unit-btn {
    margin: 0;
    padding: 0.4rem 1.7rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--falcon-secondary-color, #5e6e82);
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
}

.title-wizard .form-check-input:checked + .size-unit-btn {
    background: var(--wiz-accent);
    color: #fff;
    box-shadow: 0 2px 6px rgba(76, 158, 214, 0.4);
}

.title-wizard .size-select-grid {
    max-width: 820px;
    margin: 0 auto;
    align-items: center;
}

.title-wizard .size-group-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--falcon-tertiary-color, #9da9bb);
    margin-bottom: 0.5rem;
}

.title-wizard .size-list {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.title-wizard .size-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.35rem 0.4rem;
    border-radius: 0.45rem;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.12s ease;
}

.title-wizard .size-row:hover,
.title-wizard .size-row:has(.size-radio:checked) {
    background: var(--wiz-accent-soft);
}

.title-wizard .size-radio {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--wiz-selected);
    cursor: pointer;
}

.title-wizard .size-dims {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--falcon-emphasis-color, #344050);
    white-space: nowrap;   /* keep "W x H" together, never split across lines */
    flex: 0 0 auto;
}

.title-wizard .size-dims .size-x {
    margin: 0 0.35rem;
    font-weight: 400;
    color: var(--falcon-tertiary-color, #9da9bb);
}

.title-wizard .size-name {
    color: var(--falcon-secondary-color, #5e6e82);
    font-weight: 500;
}

.title-wizard .size-custom {
    border: 1.5px solid transparent;
    border-radius: 0.55rem;
    padding: 0.4rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.title-wizard .size-custom.is-active {
    border-color: var(--wiz-selected);
    background: rgba(40, 181, 106, 0.06);
}

.title-wizard .size-custom .form-control {
    border-radius: 0.45rem;
}

/* the wizard advances with Next, so the legacy Confirm button is hidden */
.title-wizard .size-confirm {
    display: none;
}

.title-wizard .size-plot {
    width: 100%;
    display: flex;
    justify-content: center;
}

.title-wizard .size-plot-svg {
    width: 100%;
    max-width: 480px;
    height: auto;
    display: block;
}

/* ============================================================
   Text Stock step  (grouped CREAM / BOND / COATED)
   ============================================================ */
.title-wizard .stock-groups {
    max-width: 600px;
    margin: 1.25rem auto 0;
    text-align: left;
}

.title-wizard .stock-group {
    margin-bottom: 1.4rem;
}

.title-wizard .stock-group-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--falcon-emphasis-color, #344050);
    margin-bottom: 0.1rem;
}

.title-wizard .stock-group-desc {
    font-size: 0.85rem;
    color: var(--falcon-secondary-color, #5e6e82);
    margin-bottom: 0.5rem;
}

.title-wizard .stock-list {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.title-wizard .stock-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    padding: 0.4rem 0.55rem;
    border-radius: 0.45rem;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.12s ease;
}

.title-wizard .stock-row:hover,
.title-wizard .stock-row:has(.stock-radio:checked) {
    background: var(--wiz-accent-soft);
}

.title-wizard .stock-radio {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--wiz-selected);
    cursor: pointer;
}

.title-wizard .stock-gsm {
    color: var(--falcon-emphasis-color, #344050);
}

.title-wizard .stock-premium {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
    background: var(--wiz-selected);
    padding: 0.14rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
}

/* ============================================================
   Bespoke step  (BespokeCreateView : accordion groups)
   ============================================================ */
.title-wizard .bespoke-list {
    max-width: 820px;
    margin: 1rem auto 0;
}

.title-wizard .bespoke-card {
    border: 1.5px solid var(--falcon-border-color, #e3e6ed);
    border-radius: 0.65rem;
    background: var(--falcon-card-bg);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.title-wizard .bespoke-acc.is-open .bespoke-card {
    border-color: var(--wiz-accent);
    box-shadow: 0 4px 16px rgba(76, 158, 214, 0.12);
}

.title-wizard .bespoke-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.title-wizard .bespoke-thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 0.5rem;
}

.title-wizard .bespoke-head-text {
    flex: 1 1 auto;
    min-width: 0;
}

.title-wizard .bespoke-name {
    font-weight: 700;
    margin: 0;
    color: var(--falcon-emphasis-color, #344050);
}

.title-wizard .bespoke-desc {
    display: none;
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--falcon-secondary-color, #5e6e82);
}

.title-wizard .bespoke-acc.is-open .bespoke-desc {
    display: block;
}

.title-wizard .bespoke-acc-toggle {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--wiz-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.title-wizard .bespoke-acc.is-open .bespoke-acc-toggle {
    background: #fff;
    color: var(--wiz-accent);
    border: 1.5px solid var(--wiz-accent);
}

.title-wizard .bespoke-acc-icon::before {
    content: "+";
    font-size: 1.35rem;
    line-height: 1;
    font-weight: 400;
}

.title-wizard .bespoke-acc.is-open .bespoke-acc-icon::before {
    content: "\2212"; /* minus */
}

.title-wizard .bespoke-warn {
    font-size: 0.78rem;
    color: var(--falcon-warning, #d4820a);
    margin: 0.75rem 0 0;
}

.title-wizard .bespoke-body {
    display: none;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--falcon-border-color, #e3e6ed);
}

.title-wizard .bespoke-acc.is-open .bespoke-body {
    display: block;
}

.title-wizard .bespoke-added {
    margin: 0;
    font-weight: 600;
    color: var(--wiz-selected);
}

.title-wizard .bespoke-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.title-wizard .bespoke-choice {
    flex: 1 1 0;
    min-width: 110px;
    max-width: 160px;
}

.title-wizard .bespoke-choice-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.6rem;
    border: 1.5px solid var(--falcon-border-color, #e3e6ed);
    border-radius: 0.55rem;
    cursor: pointer;
    height: 100%;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.title-wizard .bespoke-choice-label:hover {
    border-color: var(--wiz-accent);
}

.title-wizard .bespoke-choice:has(.besOption:checked) .bespoke-choice-label {
    border-color: var(--wiz-accent);
    background: var(--wiz-accent-soft);
}

.title-wizard .bespoke-choice-label img.chkImg {
    width: 100%;
    height: auto;
    border-radius: 0.4rem;
}

.title-wizard .bespoke-choice-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--falcon-emphasis-color, #344050);
}

.title-wizard .bespoke-colpick {
    width: 100%;
    height: 28px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}

/* ============================================================
   Summary / metadata step  (Book Details + pricing + add)
   The generic .option-box flatten rule is reverted here so the
   summary reads as clean panels.
   ============================================================ */
.title-wizard #pnlSummary {
    max-width: 860px;
    margin: 1rem auto 0;
    text-align: left;
}

.title-wizard #pnlSummary .option-box {
    border: 1.5px solid var(--falcon-border-color, #e3e6ed) !important;
    border-radius: 0.65rem;
    background: var(--falcon-card-bg) !important;
    margin-bottom: 1.1rem !important;
}

.title-wizard #pnlSummary .option-box > .card-body {
    padding: 1.35rem 1.5rem;
}

.title-wizard #pnlSummary h5 {
    font-weight: 700;
    color: var(--falcon-emphasis-color, #344050);
}

/* Book Type selector */
.title-wizard #pnlSummary .book-type-grid {
    gap: 0.5rem;
}

.title-wizard #pnlSummary .book-type-btn {
    border-radius: 0.6rem;
    border-width: 1.5px;
    font-weight: 600;
    gap: 0.15rem;
    transition: all 0.15s ease;
}

.title-wizard #pnlSummary .btn-check:checked + .book-type-btn {
    background: var(--wiz-accent);
    border-color: var(--wiz-accent);
    color: #fff;
    box-shadow: 0 3px 10px rgba(76, 158, 214, 0.28);
}

/* Declaration switches : plain rows, no box around them */
.title-wizard #pnlSummary .form-switch {
    padding: 0.4rem 0.25rem 0.4rem 3rem;
    border: none;
    background: none;
    margin-bottom: 0.35rem !important;
}

.title-wizard #pnlSummary .form-check-input:checked {
    background-color: var(--wiz-accent);
    border-color: var(--wiz-accent);
}

/* the two summary cards are split into wizard steps 9 & 10 : keep them hidden
   until the JS tags them as steps (prevents a flash of both on load) */
.title-wizard #pnlSummary > .card.option-box:not(.is-active) {
    display: none;
}

/* Title / ISBN inputs */
.title-wizard #pnlSummary .form-floating > .form-control,
.title-wizard #pnlSummary .form-control-lg {
    border-radius: 0.5rem;
}

/* Pricing rail cards */
.title-wizard #pnlSummary #pnlPricing {
    gap: 0.5rem 0;
}

/* ============================================================
   Mobile / responsive pass  (whole wizard)
   ============================================================ */
@media (max-width: 991.98px) {
    .wiz-main {
        padding: 1.5rem 1.1rem 0.5rem;
        border-radius: 0.75rem 0.75rem 0 0;
    }

    .wiz-preview {
        min-width: 0;
        border-radius: 0 0 0.75rem 0.75rem;
        padding: 1rem;
    }

    /* keep the preview a sensible height when stacked below the steps */
    .wiz-preview-sticky {
        height: 62vw;
        max-height: 460px;
    }

    /* summary metadata stacks */
    .title-wizard #pnlSummary .option-box .row > [class*="col-"] {
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 767.98px) {
    /* stepper : drop the text labels, keep the dotted progress line */
    .title-wizard .wiz-node-label {
        display: none;
    }

    .title-wizard .wiz-stepper {
        margin-bottom: 1.25rem;
    }

    /* one option card per row */
    .title-wizard .option-card {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* size step : list above the plot, plot centered */
    .title-wizard .size-plot-svg {
        max-width: 340px;
    }

    /* bespoke choices : 2 per row */
    .title-wizard .bespoke-choice {
        flex: 1 1 40%;
        min-width: 0;
        max-width: none;
    }

    /* summary : book-details columns stack */
    .title-wizard #pnlSummary .card-body .row > .col-6,
    .title-wizard #pnlSummary .card-body .row > [class*="col-md-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 479.98px) {
    .wiz-main {
        padding: 1.25rem 0.85rem 0.5rem;
    }

    .title-wizard .wiz-btn {
        padding: 0.6rem 1.25rem;
        font-size: 0.9rem;
    }

    /* book type : 2 per row on very small screens */
    .title-wizard #pnlSummary .book-type-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* bespoke thumbnails a touch smaller */
    .title-wizard .bespoke-thumb {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
    }
}

/* ============================================================
   Summary / metadata step — cleaner layout & pricing
   (scoped to the wizard; the shared view markup is untouched)
   ============================================================ */

/* stack the crammed 2-column rows into a clean vertical flow */
.title-wizard #pnlSummary .card-body > .row {
    display: block;
}
.title-wizard #pnlSummary .card-body > .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    flex: none;
}

/* the Add/pricing card (step 10) : keep it a flex column so the order-* utilities
   can put Title Pricing above the "I have my own ISBN?" block */
.title-wizard #pnlSummary > .option-box:last-child > .card-body > .row {
    display: flex;
    flex-direction: column;
}

/* Title + promo : centred, sensible width */
.title-wizard #pnlSummary #txtTitle {
    /*max-width: 460px;*/
    margin: 0 auto;
}
.title-wizard #pnlSummary .input-group {
    max-width: 320px;
    margin: 0.75rem auto 0;
}

/* Book Type / declarations : give them the full width, centred */
.title-wizard #pnlSummary .book-type-grid {
    max-width: 620px;
    margin: 0 auto;
}
.title-wizard #pnlSummary .form-switch {
    max-width: 620px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* divider between the two summary panels handled by the card borders */
.title-wizard #pnlSummary .option-box + .option-box {
    margin-top: 1.25rem !important;
}

/* ---- Title Pricing : tidy partner cards, no letter-by-letter wrap ---- */
.title-wizard #pnlSummary #pnlPricing {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.title-wizard #pnlSummary #pnlPricing > [class*="col-"] {
    flex: 1 1 160px;
    max-width: 210px;
    width: auto;
    /* the .wiz-price-card inside owns the border/padding/background now */
}
.title-wizard #pnlSummary #pnlPricing h6.fs-2 {
    white-space: nowrap;
    font-size: 0.95rem !important;
    font-weight: 700;
    margin-bottom: 0.35rem;
}
.title-wizard #pnlSummary #pnlPricing .fs-3 {
    font-size: 1.35rem !important;
    font-weight: 700;
    color: var(--wiz-accent-dark);
    margin: 0.15rem 0 0.35rem;
}
.title-wizard #pnlSummary #pnlPricing h6.mb-1 {
    font-size: 0.72rem !important;
    font-weight: 500;
    color: var(--falcon-secondary-color, #6c7a8c);
    margin-bottom: 0.15rem !important;
}
/* "can't print here" note : compact pill, not a tall red column */
.title-wizard #pnlSummary #pnlPricing .alert-danger {
    font-size: 0.72rem;
    line-height: 1.2;
    margin-top: 0.4rem !important;
}
.title-wizard #pnlSummary #pnlPricing .alert-danger .icon-item {
    transform: scale(0.5) !important;
    margin: 0 auto !important;
}

/* "I have my own ISBN?" block : centred, tidy */
.title-wizard #pnlSummary #pnlNoISBN .col-lg-4 {
    margin: 0 auto;
}

/* ---- Preview view controls (jacket show/hide) ---- */
.title-wizard .wiz-view-controls {
    position: absolute;
    bottom: 3.4rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 0.75rem;
    z-index: 3;
    pointer-events: none;
}
.title-wizard .wiz-view-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--wiz-pill-bg, #fff);
    border: 1.5px solid var(--wiz-accent);
    color: var(--wiz-accent-dark);
    border-radius: 999px;
    padding: 0.45rem 1.15rem;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(30, 50, 80, 0.12);
    transition: background 0.15s ease, color 0.15s ease;
}
.title-wizard .wiz-view-btn:hover {
    background: var(--wiz-accent);
    color: #fff;
}

/* ============================================================
   Splash screen (start manually / upload PDF) + auto-fill
   ============================================================ */
.title-wizard { position: relative; }

.wiz-splash {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--falcon-card-bg);
    border-radius: 0.75rem;
    padding: 2rem;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.wiz-splash.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.wiz-splash-inner {
    max-width: 720px;
    width: 100%;
    text-align: center;
}

.wiz-splash-sub {
    color: var(--falcon-secondary-color, #5e6e82);
    max-width: 34rem;
    margin: 0 auto 2rem;
}

.wiz-splash-cards {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    flex-wrap: wrap;
}

.wiz-splash-card {
    flex: 1 1 260px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 1.5rem;
    border: 1.5px solid var(--falcon-border-color, #e3e6ed);
    border-radius: 0.85rem;
    background: var(--falcon-card-bg);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.wiz-splash-card:hover {
    border-color: var(--wiz-accent);
    box-shadow: 0 10px 26px rgba(76, 158, 214, 0.16);
    transform: translateY(-3px);
}

.wiz-splash-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wiz-accent-soft);
    color: var(--wiz-accent-dark);
    font-size: 1.6rem;
    margin-bottom: 0.25rem;
}

.wiz-splash-title {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--falcon-emphasis-color, #344050);
}

.wiz-splash-text {
    font-size: 0.88rem;
    color: var(--falcon-secondary-color, #5e6e82);
}

.wiz-splash-progress {
    margin-top: 2rem;
}

.wiz-splash-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--wiz-accent-soft);
    overflow: hidden;
    max-width: 340px;
    margin: 0.5rem auto;
}

.wiz-splash-bar-fill {
    height: 100%;
    width: 0;
    background: var(--wiz-accent);
    border-radius: 999px;
    transition: width 0.2s ease;
}

.wiz-splash-hint {
    font-size: 0.8rem;
    color: var(--falcon-secondary-color, #5e6e82);
}

/* auto-fill banner */
.wiz-auto-note {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    background: #fff7e6;
    border: 1px solid #f5c451;
    color: #7a5b12;
    border-radius: 0.6rem;
    padding: 0.7rem 0.9rem;
    margin-bottom: 1rem;
    font-size: 0.88rem;
}

html.dark .wiz-auto-note {
    background: #3a3016;
    color: #f0d79a;
}

.wiz-auto-note-close {
    margin-left: auto;
    border: none;
    background: none;
    font-size: 1.25rem;
    line-height: 1;
    color: inherit;
    cursor: pointer;
    opacity: 0.6;
}

.wiz-auto-note-close:hover { opacity: 1; }

/* highlight auto-filled fields */
.wiz-autofilled {
    box-shadow: 0 0 0 2px #f5c451 !important;
    border-radius: 0.45rem !important;
    position: relative;
}

.title-wizard .size-row.wiz-autofilled,
.title-wizard #pnlCustom.wiz-autofilled {
    box-shadow: 0 0 0 2px #f5c451 !important;
    background: #fff7e6;
}

/* Record Gothic — used for cloth foil text in the 3D preview.
   The font files aren't in the repo, so the @font-face is disabled to avoid a
   404 on every load; the canvas falls back to a condensed gothic
   ('Arial Narrow','Oswald','Poppins',sans-serif). To enable the exact typeface,
   drop RecordGothic.woff2 / .woff into Content/fonts/ and un-comment the block.
@font-face {
    font-family: 'Record Gothic';
    src: url('/Content/fonts/RecordGothic.woff2') format('woff2'),
         url('/Content/fonts/RecordGothic.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
*/

/* ============================================================
   Quote tool : "Your Quote" summary step (PageType = "Quote")
   Rendered by Views/Shared/_QuoteSummary.vbhtml (Quote project).
   ============================================================ */
/* The Quote page has no Falcon .container, so the wizard's sideways bleed
   margin (margin: 0 -0.5rem) would push it wider than the viewport and add a
   horizontal scrollbar. Frame it with a normal margin instead. */
.title-wizard.is-quote { margin: 1rem; }

/* Keep Back / Next anchored to the bottom of the step panel so they don't
   jump around as steps vary in height (wiz-main is a flex column that stretches
   to the preview height). They also stick to the viewport bottom while a tall
   step (the summary) scrolls, so they stay reachable. */
.title-wizard.is-quote .wiz-nav {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    background: var(--falcon-card-bg, #fff);
    padding-top: 0.75rem;
    padding-bottom: 1rem;
    z-index: 4;
}

.wiz-quote-summary { max-width: 860px; margin: 0 auto; }

/* ---- price grid : separated rounded cells (per the mockup) ---- */
.wiz-quote-price-card {
    background: transparent;
    border: 0;
    box-shadow: none;
}
.wiz-quote-price-card > .card-body { padding: 0; }
.wiz-quote-price-table {
    border-collapse: separate;
    border-spacing: 6px;
    margin: 0;
    width: 100%;
    table-layout: fixed;
}
.wiz-quote-price-table thead th,
.wiz-quote-price-table tbody td {
    background: #f8fbfe;
    border: 1px solid #eaf1f9;
    border-radius: .5rem;
    padding: .6rem .5rem;
    font-size: .9rem;
    white-space: nowrap;
    color: #5e6e82;
    font-weight: 500;
}
.wiz-quote-price-table thead th {
    background: #dce9fa;
    border-color: #cfe0f5;
    font-weight: 600;
    color: #55677f;
}
.wiz-quote-price-table thead th:first-child,
.wiz-quote-price-table tbody td:first-child { text-align: left; }
.wiz-quote-price-table tbody td:first-child {
    background: #e9eff7;
    color: #344050;
    font-weight: 700;
}
.wiz-quote-price-table tbody td { color: #344050; font-weight: 600; }
.wiz-quote-price-table .flag-icon {
    box-shadow: 0 0 3px rgba(0, 0, 0, .18);
    vertical-align: middle;
}

/* ---- sell panels : soft blue-grey cards ---- */
.wiz-sell-panel {
    background: #eef3fa;
    border: 0;
    box-shadow: none;
    border-radius: .75rem;
}
.wiz-sell-panel .form-control,
.wiz-sell-panel .form-select,
.wiz-sell-panel .input-group-text {
    border-color: #e3ebf5;
    border-radius: .5rem;
    background: #fff;
}
.wiz-sell-panel .input-group > .form-control { border-radius: .5rem; }
.wiz-sell-panel .input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.wiz-sell-panel .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.wiz-sell-panel .input-group-text { color: #5e6e82; }

/* grey "Apply / Applied!" button */
.wiz-apply-btn {
    background: #d8e2ef;
    color: #5e6e82;
    border: 0;
    border-radius: .5rem;
    font-weight: 600;
}
.wiz-apply-btn:hover { background: #c6d4e6; color: #4d5969; }

/* ---- shipping estimate cards ---- */
.wiz-ship-card {
    background: #fff;
    border: 1px solid #e3ebf5;
    border-radius: .625rem;
    padding: .75rem .9rem;
    margin-bottom: .6rem;
}
.wiz-ship-logo {
    width: 56px;
    height: 26px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    margin-bottom: .35rem;
}
.wiz-ship-name { font-weight: 700; font-size: .9rem; margin: 0 0 .35rem; color: #344050; }
.wiz-ship-row { display: flex; justify-content: space-between; font-size: .85rem; color: #5e6e82; }
.wiz-ship-row.wiz-ship-total { font-weight: 700; color: #344050; }

/* ---- retail profit cards (logo + green total badge) ---- */
.wiz-quote-summary .wiz-wholesale { margin-top: .25rem; }
.wiz-profit-card {
    background: #fff;
    border: 1px solid #e3ebf5;
    border-radius: .625rem;
    padding: .75rem .9rem;
}
.wiz-profit-logo { height: 26px; margin-bottom: .5rem; }
.wiz-profit-logo img { max-height: 26px; max-width: 60%; width: auto; }
.wiz-profit-row {
    display: flex;
    justify-content: space-between;
    font-size: .85rem;
    color: #5e6e82;
    margin-bottom: .1rem;
}
.wiz-profit-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #28b56a;
    color: #fff;
    font-weight: 700;
    border-radius: .5rem;
    padding: .4rem .75rem;
    margin-top: .5rem;
}
.wiz-profit-none {
    color: #e63757;
    font-size: .8rem;
    text-align: center;
    margin-top: .4rem;
}
.wiz-quote-summary .quote-email-button { cursor: pointer; }

/* ---- Quote modals (Bootstrap 4) : rounded, friendlier ---- */
.wiz-quote-modal .modal-content {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 12px 42px rgba(30, 50, 80, .28);
}
.wiz-modal-head {
    position: relative;
    text-align: center;
    padding: 1.75rem 1.25rem 1rem;
    background: linear-gradient(180deg, #eef3fb, #ffffff);
}
.wiz-modal-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--wiz-accent, #4c9ed6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin: 0 auto .6rem;
}
.wiz-modal-close {
    position: absolute;
    top: .85rem;
    right: .85rem;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0;
    background: rgba(0, 0, 0, .06);
    color: #5e6e82;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    z-index: 5;
}
.wiz-modal-close:hover { background: rgba(0, 0, 0, .12); color: #344050; }
.wiz-modal-close-light { background: rgba(255, 255, 255, .75); }
.wiz-modal-close-light:hover { background: #fff; }

.wiz-tmpl-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem .85rem;
    border: 1px solid #e3ebf5;
    border-radius: .6rem;
    margin-bottom: .5rem;
}
.wiz-tmpl-row:last-child { margin-bottom: 0; }
.wiz-tmpl-name { font-weight: 600; color: #344050; }
.wiz-tmpl-name i { color: var(--wiz-accent, #4c9ed6); margin-right: .35rem; }
.wiz-tmpl-action { min-width: 118px; text-align: right; }

/* ---- Quote "Get 5% Off" offer modal (matches the marketing mockup) ---- */
/* overflow visible so the close button (which overhangs the top-right corner)
   isn't clipped; the rounding/clipping is handled by .wiz-offer-inner instead. */
.wiz-offer-modal .modal-content { box-shadow: none; overflow: visible; }
.wiz-offer-inner {
    position: relative;
    /* clouds tile along the very bottom of the blue card */
    background: #e8f1fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='120' viewBox='0 0 300 120'%3E%3Cpath fill='%23dbeaf6' d='M0 120 V78 C25 50 75 50 100 78 C125 50 175 50 200 78 C225 50 275 50 300 78 V120 Z'/%3E%3Cpath fill='%23ffffff' d='M0 120 V92 C25 66 75 66 100 92 C125 66 175 66 200 92 C225 66 275 66 300 92 V120 Z'/%3E%3C/svg%3E") repeat-x left bottom;
    background-size: auto 80px;
    border-radius: 1.1rem;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(30, 50, 80, .3);
}
.wiz-offer-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 40px;
    height: 40px;
    background: #fff;
    color: #5e6e82;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
    z-index: 10;
}
.wiz-offer-close:hover { background: #f4f7fb; color: #344050; }
/* bookvault logo, top-right of the offer card */
.wiz-offer-logo {
    position: absolute;
    top: 1.15rem;
    right: 1.5rem;
    width: 130px;
    height: auto;
    opacity: .85;
    pointer-events: none;
    z-index: 3;
}
.wiz-offer-body {
    position: relative;
    z-index: 2;
    padding: 2.5rem 2.25rem 96px;   /* bottom clears the cloud band */
}
.wiz-offer-title {
    color: #e0392f;
    font-weight: 800;
    font-size: 2.6rem;
    line-height: 1;
    margin: 0 0 .4rem;
}
.wiz-offer-sub {
    color: #344050;
    font-size: 1.05rem;
    margin: 0 0 1.5rem;
}
.wiz-offer-input {
    display: flex;
    gap: .6rem;
    max-width: 470px;
}
.wiz-offer-input .form-control {
    border: 0;
    border-radius: .7rem;
    padding: .85rem 1rem;
    height: auto;
    font-size: 1rem;
    box-shadow: 0 4px 14px rgba(30, 50, 80, .08);
}
.wiz-offer-send {
    flex: 0 0 auto;
    width: 56px;
    border: 0;
    border-radius: .7rem;
    background: #e0392f;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background .15s ease;
}
.wiz-offer-send:hover { background: #c72f26; }
/* Seamless two-tone cloud band that tiles horizontally (repeat-x). */
.quote-intro-clouds {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='120' viewBox='0 0 300 120'%3E%3Cpath fill='%23dbeaf6' d='M0 120 V78 C25 50 75 50 100 78 C125 50 175 50 200 78 C225 50 275 50 300 78 V120 Z'/%3E%3Cpath fill='%23ffffff' d='M0 120 V92 C25 66 75 66 100 92 C125 66 175 66 200 92 C225 66 275 66 300 92 V120 Z'/%3E%3C/svg%3E") repeat-x center bottom;
    background-size: auto 100%;
}

/* Mobile : the "how would you like to start" splash should sit at the top of the
   card, not float vertically-centred in a tall panel. */
@media (max-width: 991.98px) {
    .wiz-splash { align-items: flex-start; padding-top: 1.75rem; }
    .wiz-splash-card { padding: 1.25rem 1rem; }
}

/* ---- Quote branded intro splash (shown on page open, like the old quote) ---- */
.quote-intro {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* stays blue toward the bottom so the (white) clouds are visible against it */
    background: linear-gradient(180deg, #f4f9fd 0%, #cfe4f5 100%);
    padding: 2rem;
    overflow: hidden;
    transition: opacity .45s ease, visibility .45s ease;
}
.quote-intro.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.quote-intro-inner { position: relative; z-index: 2; max-width: 640px; }
.quote-intro-logo { max-width: 240px; width: 60%; margin-bottom: 1.5rem; }
.quote-intro-title {
    font-weight: 800;
    color: #344050;
    font-size: clamp(1.6rem, 4.5vw, 2.75rem);
    margin-bottom: 1.75rem;
}
.quote-intro-btn {
    border: 0;
    background: var(--wiz-accent, #4c9ed6);
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    padding: .85rem 2.25rem;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(76, 158, 214, .35);
    transition: background .15s ease, transform .15s ease;
}
.quote-intro-btn:hover { background: var(--wiz-accent-dark, #3b88bd); transform: translateY(-2px); }
.quote-intro-clouds {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 20vh;
    max-height: 180px;
    display: block;
    z-index: 1;
}

/* ---- Quote : mobile tweaks for the price grid + offer modal ---- */
@media (max-width: 767.98px) {
    /* price grid : drop country names (keep flags), shrink so cells don't overlap */
    .wiz-qp-country { display: none; }
    .wiz-quote-price-table { border-spacing: 3px; }
    .wiz-quote-price-table thead th,
    .wiz-quote-price-table tbody td {
        font-size: .72rem;
        padding: .45rem .25rem;
        white-space: normal;      /* let "Cost to print" wrap instead of overflowing */
    }
    .wiz-quote-price-table tbody td:first-child { text-align: center; }

    /* offer modal : fit small screens */
    .wiz-offer-inner { background-size: auto 62px; }
    .wiz-offer-body { padding: 1.75rem 1.25rem 74px; }
    .wiz-offer-title { font-size: 2rem; }
    .wiz-offer-logo { width: 92px; top: .9rem; right: 1.1rem; }
}

/* price grid : a country that can't be printed shows one greyed-out span */
.wiz-quote-price-table tbody td.wiz-qp-na {
    background: #dfe4ea;
    border-color: #d3dae2;
    color: #8a95a5;
    font-weight: 600;
}

/* ---- Quote : info note (e.g. foiling needs matt lamination) ---- */
.wiz-info-note {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    max-width: 720px;
    margin: 1.25rem auto 0;
    padding: .7rem .9rem;
    background: #eaf4fc;
    border: 1px solid #cfe4f5;
    border-left: 4px solid var(--wiz-accent, #4c9ed6);
    border-radius: .5rem;
    color: #344050;
    font-size: .85rem;
}
.wiz-info-note i { color: var(--wiz-accent, #4c9ed6); margin-top: .15rem; }

/* ---- Quote (desktop) : left column scrolls internally so Back/Next stay put ----
   Without this the nav sits at the bottom of a card whose height changes per step,
   so it appears to jump. Fixing the column height makes the sticky nav land in the
   same place on every step. Mobile keeps normal page scrolling (preview stacks). */
@media (min-width: 992px) {
    .title-wizard.is-quote .wiz-main {
        height: calc(100vh - 2rem);
        overflow-y: auto;
    }
    .title-wizard.is-quote .wiz-preview-sticky {
        height: calc(100vh - 5rem);
        min-height: 0;
    }
}

/* ---- Quote : narrow-desktop squeeze (992-1400px) ----
   The preview column takes 42% (min 380px) from 992px up, so the step column can
   get too tight for two option cards side by side - the labels then wrapped one
   character per line (their `overflow-wrap: anywhere` lets them shrink to nothing).
   Give the preview less room and stack the option cards until there's space. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .title-wizard.is-quote .wiz-preview {
        flex: 0 0 34%;
        min-width: 300px;
    }
    .title-wizard.is-quote .option-card {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* never let an option label collapse to a single-character column */
.title-wizard .option-card,
.title-wizard .bind-option,
.title-wizard .bind-option .bind-select { min-width: 0; }
.title-wizard .bind-option .text-600 { overflow-wrap: break-word; }

/* ---- Toast alerts ----
   The layout renders #AlertError / #AlertSuccess in normal flow above the page
   body, so showing one pushed the whole page down (and it jumped back up on
   fade-out). Float them over the page so they never affect layout. */
#AlertError,
#AlertSuccess {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    width: 560px;
    max-width: calc(100% - 2rem);
    padding: 0 !important;
    margin: 0;
}
#AlertError .alert,
#AlertSuccess .alert {
    margin: 0;
    box-shadow: 0 10px 30px rgba(30, 50, 80, .25);
}

/* toast contents : icon + message + close */
#AlertError .alert,
#AlertSuccess .alert {
    align-items: center;
    gap: .8rem;
    border: 1px solid;
    border-radius: .75rem;
    padding: .9rem 1.1rem;
    font-size: .92rem;
    line-height: 1.35;
}
#AlertError .alert { background: #fdecee; border-color: #f5c2c9; color: #a32036; }
#AlertSuccess .alert { background: #e8f7ef; border-color: #b7e4cb; color: #1a7a49; }
.bv-alert-icon { font-size: 1.35rem; flex: 0 0 auto; }
#AlertError .bv-alert-icon { color: #e63757; }
#AlertSuccess .bv-alert-icon { color: #28b56a; }
#AlertError .flex-1,
#AlertSuccess .flex-1 { flex: 1 1 auto; }
.bv-alert-close {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    opacity: .55;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: opacity .15s ease, background .15s ease;
}
.bv-alert-close:hover { opacity: 1; background: rgba(0, 0, 0, .07); }