/* =========================================
   Skylinebrett Premium Wizard CSS (V3.2 Hybrid)
   ========================================= */

:root {
    --wiz-bg-page: #FFFFFF;
    /* White (Requested to match main page) */
    --wiz-bg-panel: #FFFFFF;
    /* White Panel */

    --wiz-primary: #111111;
    /* Deep Black */
    --wiz-accent: #A67C52;
    /* Gold */
    --wiz-border-light: #E5E5E5;
    --wiz-border-focus: #111111;

    --wiz-text-main: #1F1F1F;
    --wiz-text-muted: #767676;

    --wiz-radius-card: 4px;
    --wiz-radius-btn: 2px;

    --wiz-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.04);
    --wiz-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.08);

    --wiz-space-container: clamp(1.5rem, 5vw, 4rem);

    --wiz-font-head: 'Montserrat', sans-serif;
    --wiz-font-body: 'Inter', sans-serif;
}

/* Base Reset within Wizard */
.wizard-wrapper {
    box-sizing: border-box;
    font-family: var(--wiz-font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--wiz-text-main);
    background-color: var(--wiz-bg-page);
    width: 100%;
    margin: 0;
    padding: 0;
}

.wizard-wrapper * {
    box-sizing: border-box;
    font-family: inherit;
}

.wizard-wrapper h1,
.wizard-wrapper h2,
.wizard-wrapper h3,
.wizard-wrapper button {
    font-family: var(--wiz-font-head);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Mobile-only element — always hidden on desktop */
#mobile-step4-panel { display: none; }

/* =========================================
   SPLIT LAYOUT
   ========================================= */
.wizard-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
}

/* Mobile: Reorder to show Preview → Stepper → Config */
@media (max-width: 1023px) {
    .wizard-wrapper {
        display: flex;
        flex-direction: column;
    }

    .config-pane {
        display: contents !important; /* !important overrides the base display:flex that appears later in source order */
        order: 2; /* Belt-and-suspenders: if display:contents ever fails, this still places config after preview */
    }

    .config-inner {
        display: contents;
    }

    /* Preview first — most critical element */
    .preview-pane {
        order: 1;
    }

    /* Stepper directly below preview */
    .stepper {
        order: 2;
    }

    .wizard-step {
        order: 3;
    }

    .checkout-dock {
        order: 4;
    }
}

@media (min-width: 1024px) {
    .wizard-wrapper {
        /* Left: 40%, Right: 60% (Requested) */
        grid-template-columns: 40% 60%;
    }
}

/* =========================================
   LEFT: PREVIEW PANE (Sticky)
   ========================================= */
/* --- Preview Label (Mobile Only) --- */
.preview-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--wiz-primary);
    margin-bottom: 20px;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
}

@media (max-width: 1023px) {
    .preview-label {
        display: block;
        margin-bottom: 6px; /* Tighter than default 20px */
        font-size: 0.7rem;
    }
}

.preview-pane {
    background-color: var(--wiz-bg-panel);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow: hidden;
    min-height: 40vh;
    border-right: none;
}

@media (max-width: 1023px) {
    .preview-pane {
        min-height: 0; /* Let content define height, no artificial min */
        justify-content: flex-start;
        padding: 8px 16px 0; /* Tight top padding, no bottom (disclaimer handles it) */
    }
}

@media (min-width: 1024px) {
    .preview-pane {
        position: sticky;
        top: 110px; /* Offset to account for sticky site header + announcement bar */
        height: calc(100vh - 110px);
        justify-content: flex-start;
        padding-top: 30px;
    }
}

/* Mobile Expand Logic */
.preview-pane.mobile-collapsed .preview-img-container {
    max-height: 250px;
}

.preview-pane.mobile-expanded {
    min-height: 80vh;
    z-index: 1000;
}

/* Preview Image Area */
.preview-img-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Important for scaling: container context */
    container-type: inline-size;
}

#preview-board-img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Capture loading overlay */
.preview-img-container.capturing {
    pointer-events: none;
}
.preview-img-container.capturing::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 8px;
    z-index: 10;
    animation: capturingPulse 0.8s ease-in-out infinite alternate;
}
@keyframes capturingPulse {
    from { opacity: 0.5; }
    to   { opacity: 1;   }
}

/* Dynamic Overlay (Engraving) */
.preview-overlay {
    position: absolute;
    top: 30%; /* Balanced position */
    left: 50%;
    transform: translate(-50%, 0);
    width: 75%;
    z-index: 6;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#preview-motif-img {
    width: 12cqw; /* Scalable with container */
    max-width: 60px;
    height: auto;
    display: none;
    margin: 0;
    filter: invert(14%) sepia(21%) saturate(1013%) hue-rotate(341deg) brightness(97%) contrast(88%);
}

.preview-text-group {
    text-align: center;
}

#preview-text-main {
    font-family: 'Montserrat', sans-serif;
    font-size: 6cqw; /* Scalable with container */
    color: #66391E;
    margin: 0;
    line-height: 1.1;
    text-transform: none;
}

#preview-text-sub {
    font-family: 'Montserrat', sans-serif;
    font-size: 4.5cqw; /* Scalable with container */
    color: #66391E;
    display: block;
    text-transform: none;
}

/* Alignment Classes */
.preview-overlay.layout-left {
    flex-direction: row;
    gap: 15px;
}

.preview-overlay.layout-right {
    flex-direction: row-reverse;
    gap: 15px;
}

.preview-overlay.layout-bottom {
    flex-direction: column;
}

/* Custom Image Wrapper Styling */
.preview-img-container img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Overlay for Text/Icon (from original CSS) */
.skyline-overlay {
    position: absolute;
    pointer-events: none;
    mix-blend-mode: multiply;
}

/* Overlay for Text/Icon (from original CSS) */
.skyline-overlay {
    position: absolute;
    pointer-events: none;
    mix-blend-mode: multiply;
}

/* Preview Disclaimer — collapsible on mobile */
.preview-disclaimer {
    margin-top: 10px;
    text-align: center;
    max-width: 500px;
}

/* Desktop: show full text inline */
.disclaimer-toggle {
    display: none; /* hidden on desktop */
}

.disclaimer-text {
    font-size: 0.75rem;
    color: var(--wiz-text-muted);
    line-height: 1.4;
    font-style: italic;
    margin: 0;
}

/* Mobile: show toggle button, text hidden by default */
@media (max-width: 1023px) {
    .preview-disclaimer {
        margin-top: 6px;
        padding-bottom: 12px;
    }

    .disclaimer-toggle {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: none;
        border: none;
        font-size: 0.7rem;
        color: var(--wiz-text-muted);
        cursor: pointer;
        padding: 4px 0;
        font-family: var(--wiz-font-body);
    }

    .disclaimer-text {
        display: none !important; /* hidden on mobile initially */
    }

    .disclaimer-toggle svg {
        flex-shrink: 0;
        opacity: 0.6;
    }

    .disclaimer-toggle[aria-expanded="true"] + .disclaimer-text {
        display: block !important;
        margin-top: 5px;
        font-size: 0.7rem;
        color: var(--wiz-text-muted);
        line-height: 1.4;
        font-style: italic;
    }
}

/* =========================================
   RIGHT: CONFIG PANE
   ========================================= */
.config-pane {
    background-color: var(--wiz-bg-page);
    padding: var(--wiz-space-container);
    padding-bottom: 120px;
    /* Space for Sticky Footer */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.config-inner {
    width: 100%;
    max-width: 580px;
}

/* =========================================
   STEPPER COMPONENT
   ========================================= */
.stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    position: relative;
    width: 100%;
}

.stepper::before {
    content: '';
    position: absolute;
    top: 15px;
    /* Half of circle height roughly */
    left: 0;
    right: 0;
    height: 2px;
    background: #E0E0E0;
    z-index: 0;
}

.step {
    position: relative;
    z-index: 1;
    background: var(--wiz-bg-page);
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.step:hover {
    opacity: 0.8;
}

.step-circle {
    width: 32px;
    height: 32px;
    border: 2px solid #E0E0E0;
    background: var(--wiz-bg-panel);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #999;
    transition: all 0.3s ease;
}

.step-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 1px;
    transition: color 0.3s;
}

/* Active Step */
.step.active .step-circle {
    border-color: var(--wiz-primary);
    background: var(--wiz-primary);
    color: white;
    box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.1);
}

.step.active .step-title {
    color: var(--wiz-primary);
}

/* Completed Step (Optional enhancement) */
.step.completed .step-circle {
    background: var(--wiz-primary);
    border-color: var(--wiz-primary);
    color: white;
}

.step.completed .step-title {
    color: var(--wiz-primary);
}

/* =========================================
   CONTENT TYPOGRAPHY
   ========================================= */
.section-headline {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    font-weight: 800;
    color: var(--wiz-primary);
}

/* NEW: Branded Headline Style "01 TITLE" */
.headline-branded {
    font-family: var(--wiz-font-head);
    font-size: 1.6rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--wiz-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.headline-branded .num {
    color: var(--wiz-accent);
    font-size: 1.6rem;
}

.section-sub {
    color: var(--wiz-text-muted);
    margin-bottom: 2.5rem;
    font-size: 1rem;
}

.section-sub-heading {
    font-size: 0.85rem;
    margin-bottom: 15px;
    color: var(--wiz-primary);
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
}

/* =========================================
   OPTION CARDS (GRID)
   ========================================= */
.option-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin-bottom: 40px;
}

.option-label {
    cursor: pointer;
    position: relative;
    display: block;
}

.option-label input {
    display: none;
}

.card-visual {
    background: var(--wiz-bg-panel);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--wiz-radius-card);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--wiz-shadow-card);
    height: 100%;
}

.card-visual.align-left {
    align-items: flex-start;
    text-align: left;
}

.card-img {
    width: 100%;
    height: 100px;
    object-fit: contain;
    margin-bottom: 15px;
    mix-blend-mode: multiply;
}

.card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--wiz-primary);
    display: block;
    margin-bottom: 4px;
    font-family: var(--wiz-font-head);
}

.card-meta {
    font-size: 0.8rem;
    color: var(--wiz-text-muted);
    display: block;
}

.card-price {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
    width: 100%;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--wiz-accent);
    font-family: var(--wiz-font-head);
}

.card-price small {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--wiz-text-muted);
    margin-right: 4px;
    vertical-align: middle;
    text-transform: uppercase;
}

.card-delivery-time {
    font-size: 0.7rem;
    color: var(--wiz-text-muted);
    margin-top: 4px;
    opacity: 0.75;
    display: block;
    text-align: center;
}

/* Interactions */
.option-label:hover .card-visual {
    transform: translateY(-4px);
    box-shadow: var(--wiz-shadow-hover);
    border-color: #ccc;
}

/* Selected State */
.option-label input:checked+.card-visual,
.option-label.selected .card-visual {
    border: 2px solid var(--wiz-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background: #FFFEFC;
}

/* Out of Stock State */
.option-label.out-of-stock .card-visual {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(100%);
    background-color: #fafafa;
}

.option-label.out-of-stock:hover .card-visual {
    border-color: #ddd;
    box-shadow: none;
    transform: none;
}

/* B2B Toggles & Cards */
.b2b-pos-card:hover {
    border-color: #d1bba4 !important;
}

.b2b-pos-card.active {
    border-color: var(--wiz-primary) !important;
    background: #FFFEFC !important;
}

.b2b-toggle-label input:checked+.slider {
    background: #4CAF50 !important;
}

.b2b-toggle-label input:checked+.slider .knob {
    transform: translateX(20px);
}

/* Checkmark */
.check-mark {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--wiz-primary);
    color: white;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s;
}

.check-mark svg {
    width: 12px;
    height: 12px;
}

.option-label input:checked+.card-visual .check-mark,
.option-label.selected .card-visual .check-mark {
    opacity: 1;
    transform: scale(1);
}

/* Badges */
.card-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--wiz-accent);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 2;
}

/* =========================================
   INPUT TEXT FIELDS
   ========================================= */
.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
    color: var(--wiz-text-muted);
    letter-spacing: 1px;
}

.input-group input[type="text"] {
    width: 100%;
    padding: 16px;
    border: 1px solid var(--wiz-border-light);
    font-size: 1rem;
    font-family: var(--wiz-font-body);
    color: var(--wiz-primary);
    background: var(--wiz-bg-panel);
    border-radius: var(--wiz-radius-card);
    transition: border 0.2s;
}

.input-group input[type="text"]:focus {
    outline: none;
    border-color: var(--wiz-primary);
}

/* =========================================
   STICKY FOOTER ACTION BAR
   ========================================= */
.sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

@media (min-width: 1024px) {
    .sticky-footer {
        position: sticky;
        bottom: 20px;
        border: none;
        background: transparent;
        backdrop-filter: none;
        padding: 0;
        margin-top: 40px;
        /* Changed from auto to 40px to sit closer to content */
    }
}

@media (min-width: 1024px) {
    .mobile-only-row {
        display: none !important;
    }
}


/* Footer Price Styling */
.price-summary-footer .price-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #888;
    margin-right: 5px;
    letter-spacing: 0.5px;
}

.price-summary-footer .price-value {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--wiz-primary);
}

.footer-btn-group {
    /* Alignment */
    justify-content: flex-end;
}


.price-summary {
    display: none;
    /* Hidden by default, shown via JS in last step */
    flex-direction: column;
}

.price-summary.visible {
    display: flex;
}

.price-label {
    font-size: 0.75rem;
    color: var(--wiz-text-muted);
    font-weight: 600;
    text-transform: uppercase;
}

.price-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--wiz-primary);
    font-family: var(--wiz-font-head);
}

.btn-primary {
    background: var(--wiz-primary);
    color: white;
    border: none;
    padding: 18px 32px;
    font-size: 1.1rem;
    font-weight: 800;
    border-radius: 0;
    /* Boxy look */
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%;
}

.btn-primary:hover {
    background: #000;
    color: white;
}

.btn-ghost {
    background: transparent;
    color: var(--wiz-text-muted);
    border: 1px solid var(--wiz-border-light);
    padding: 12px 24px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--wiz-radius-btn);
    cursor: pointer;
    text-transform: uppercase;
}

.btn-ghost:hover {
    border-color: var(--wiz-primary);
    color: var(--wiz-primary);
}

/* =========================================
   SUMMARY STEP
   ========================================= */
.summary-card-block {
    background: var(--wiz-bg-panel);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--wiz-radius-card);
    padding: 24px;
    margin-bottom: 30px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 15px;
}

.summary-row:last-child {
    border: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.s-key {
    font-size: 0.85rem;
    color: var(--wiz-text-muted);
}

.s-val {
    font-size: 0.95rem;
    color: var(--wiz-primary);
    font-weight: 600;
}

.qty-select {
    padding: 8px 12px;
    font-size: 1rem;
    border: 1px solid var(--wiz-border-light);
    border-radius: var(--wiz-radius-btn);
    background-color: var(--wiz-bg-page);
    color: var(--wiz-primary);
    cursor: pointer;
    min-width: 80px;
}

/* Hidden Wizard Steps */
.wizard-step {
    display: none;
}

.wizard-step.active {
    display: block;
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Helpers */
.sr-only {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

.text-link {
    color: var(--wiz-text-muted);
    text-decoration: underline;
    font-size: 0.75rem;
}

/* MODAL */
.wizard-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    /* Max z-index */
    /* Max z-index */
    display: none;
    /* Remove flex here to avoid jQuery fadeIn conflict */
}

.wizard-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 1;
}

.wizard-modal-content {
    position: absolute;
    /* Changed from relative to absolute for centering */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 40px;
    max-width: 90%;
    width: 600px;
    /* specific max width */
    max-height: 90vh;
    z-index: 2;
    /* Above overlay */
    border-radius: 4px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    overflow-y: auto;
}

/* Optimize modal for mobile */
@media (max-width: 600px) {
    .wizard-modal-content {
        padding: 30px 15px;
        width: 95%;
        max-width: 95%;
        border-radius: 8px;
    }
}

.wizard-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
}

.wizard-modal-content img {
    max-width: 100%;
    height: auto;
}

/* --- CHECKOUT DOCK (Unified Structure) --- */
.checkout-dock {
    background: #FFFFFF;
    border: 1px solid var(--wiz-border-light);
    border-radius: var(--wiz-radius-btn);
    padding: 24px;
    width: 100%;
    margin-top: 10px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
}

/* Receipt Section (Hidden by default, shown in Step 4) */
.receipt-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--wiz-border-light);
}

.receipt-title {
    display: none; /* Redundant — label already shown above preview image */
}

.receipt-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    font-size: 0.83rem;
}

.receipt-row span:first-child {
    color: var(--wiz-text-muted);
    font-size: 0.8rem;
}

.receipt-val {
    font-weight: 600;
    text-align: right;
    color: #1a1a1a; /* Neutral — only price rows stay coloured via inline style */
}

.receipt-divider {
    border: none;
    border-top: 1px dashed var(--wiz-border-light);
    margin: 15px 0 0 0;
}

/* Dock Controls (Qty & Price) */
.dock-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.qty-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid var(--wiz-border-light);
    border-radius: var(--wiz-radius-btn);
    background: #FDFDFD;
}

.qty-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--wiz-primary);
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-btn:hover {
    background: #f0f0f0;
}

#quantity-input {
    width: 50px;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    color: var(--wiz-primary);
    pointer-events: none;
    appearance: textfield;
    -moz-appearance: textfield;
}

#quantity-input::-webkit-outer-spin-button,
#quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.price-wrapper {
    text-align: right;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: 20px;
}

.price-label {
    display: block;
    font-size: 0.7rem;
    color: var(--wiz-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.price-display {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--wiz-primary);
    line-height: 1;
    font-family: 'Montserrat', sans-serif;
}

/* Dock Actions */
.dock-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#btn-next {
    width: 100%;
    background: var(--wiz-primary);
    color: white;
    border: none;
    padding: 18px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: var(--wiz-radius-btn);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: transform 0.1s, background 0.2s;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
}

#btn-next:hover {
    background: #000;
}

#btn-next:active {
    transform: scale(0.98);
}

#btn-prev {
    display: block;
    text-align: center;
    color: var(--wiz-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    padding: 0;
    min-height: unset;
}

#btn-prev:hover {
    color: var(--wiz-primary);
}

/* =========================================
   CITY PRESELECTED CONFIRMATION VIEW
   ========================================= */
.city-confirmed-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 32px 24px 24px;
    background: var(--wiz-bg-panel);
    border: 2px solid var(--wiz-primary);
    border-radius: var(--wiz-radius-card);
    margin-bottom: 8px;
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}

.city-confirmed-img-wrap {
    position: relative;
    width: 180px;
    height: 110px;
}
.city-confirmed-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.city-confirmed-check {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--wiz-primary);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.city-confirmed-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--wiz-text);
    text-align: center;
}
.city-confirmed-region {
    font-size: 0.78rem;
    color: var(--wiz-text-muted);
    text-align: center;
    margin-top: -6px;
}

/* ── Board Preselected View ── */
/* Cards use existing .option-label / .card-visual styles — no extra card CSS needed */
#btn-change-board {
    display: block;
    width: 100%;
    text-align: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--wiz-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    padding: 14px 20px;
    min-height: 44px;
    font-family: inherit;
}
#btn-change-board:hover { color: var(--wiz-primary); }

/* "Andere Stadt auswählen" — gleich wie #btn-prev */
#btn-change-city {
    display: block;
    text-align: center;
    color: var(--wiz-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    padding: 14px 20px;
    min-height: 44px;
}
#btn-change-city:hover { color: var(--wiz-primary); }

/* "oder Neu beginnen" wrapper */
#reset-wrapper {
    text-align: center;
    padding: 0;
}
.btn-reset-oder {
    font-size: 0.75rem;
    color: var(--wiz-text-muted);
    opacity: 0.6;
    letter-spacing: 0.5px;
}
.btn-reset-link {
    display: inline;
    color: var(--wiz-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}
.btn-reset-link:hover {
    color: var(--wiz-primary);
}

/* Mobile Sticky Logic */
@media (max-width: 1023px) {

    /* Hide announcement bar on the configurator page (wizard.css is only loaded there) */
    .announcement-bar {
        display: none !important;
    }

    /* ── #btn-next: reduce vertical padding to 14px → 44px total (WCAG minimum) ── */
    #btn-next {
        padding: 14px 18px;
    }

    /* ── Slim mode: Steps 1–3 (only the nav button visible) ── */
    .checkout-dock {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 10px 10px 0 0;
        border: none;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        padding: 8px 16px;
        z-index: 100;
        margin-top: 0;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.10);
        transition: padding 0.25s ease, border-radius 0.25s ease;
    }

    /* ── Expanded mode: Step 4 (receipt + price + qty visible) ── */
    .checkout-dock.is-step-summary {
        padding: 20px;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.15);
    }

    /* Scroll clearance: slim dock (~60px) + mini strip (44px) = 104px + margin */
    .config-inner {
        padding-bottom: 120px;
    }

    /* Step 4: more clearance for the expanded dock */
    .config-inner.is-step-summary {
        padding-bottom: 260px;
    }

    .receipt-section {
        margin-bottom: 15px;
        padding-bottom: 10px;
        font-size: 0.85rem;
    }
}

/* --- Step 3: Personalization Refinement (Final) --- */

/* Choice Cards (Gatekeeper) */
.choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 30px;
}

.choice-card {
    background: #fff;
    border: 2px solid transparent;
    padding: 20px;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    position: relative;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.choice-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.choice-card.active {
    border-color: var(--wiz-primary);
    background: #fff;
}

.choice-card.active::after {
    content: '✓';
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--wiz-primary);
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.choice-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
    color: var(--wiz-primary);
}

/* Form Container */
.personalization-form {
    background: #fff;
    padding: 30px;
    /* Updated from 20 to 30 to match ref */
    border-radius: 8px;
    display: none;
    border: 1px solid var(--wiz-border-light);
}

.personalization-form.visible {
    display: block;
    animation: fadeIn 0.3s ease;
}

.form-group {
    margin-bottom: 35px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 35px;
}

.form-group:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Inputs & Labels (Step 3 Specific) */
.personalization-form .label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

.personalization-form label {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--wiz-primary);
    margin-bottom: 0;
}

.personalization-form input[type="text"] {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--wiz-border-light);
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
    background: #fff;
    color: var(--wiz-primary);
    transition: border 0.2s;
}

.personalization-form input[type="text"]:focus {
    border-color: var(--wiz-primary);
    outline: none;
}

/* Option Grids (Step 3 Override) */
.personalization-form .option-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
}

/* Option Items (Refined) */
.option-item {
    position: relative;
    border: 1px solid var(--wiz-border-light);
    border-radius: 4px;
    padding: 15px 10px;
    /* Adjusted padding as requested */
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    background: #fff;
    transition: all 0.2s;
    overflow: hidden;
    /* Added to keep long names from breaking out */
}

.option-item.selected {
    border: 2px solid var(--wiz-primary);
    background: #fcfcfc;
}

/* Typography Hierarchy Fix for Fonts */
.font-preview {
    font-size: 1.6rem;
    color: var(--wiz-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    /* Ensure it takes full width for ellipsis to work */
    margin-bottom: 4px;
    line-height: 1.2;
    text-transform: none;
    /* Override inherited uppercase from label */
    letter-spacing: normal;
    padding: 0 4px;
    box-sizing: border-box;
}

.font-name {
    font-size: 0.7rem;
    color: #777;
    text-transform: capitalize;
    font-weight: 400;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Laser Icons */
.laser-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    margin-bottom: 8px;
    filter: grayscale(100%) contrast(120%);
    opacity: 0.7;
    transition: all 0.2s;
}

.option-item.selected .laser-icon,
.option-item:hover .laser-icon {
    opacity: 1;
    transform: scale(1.1);
    filter: none;
}

/* Badges */
.badge-free {
    background: #e8f5e9;
    color: #4CAF50;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-cost {
    background: #fff3e0;
    color: var(--wiz-accent);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.icon-price-tag {
    position: absolute;
    top: -1px;
    right: -1px;
    background: var(--wiz-accent);
    color: #fff;
    font-size: 0.6rem;
    padding: 2px 5px;
    border-radius: 0 3px 0 3px;
    z-index: 2;
}

.hidden-option {
    display: none !important;
}

.toggle-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 10px;
    background: #f8f8f8;
    color: var(--wiz-primary);
    border: 1px solid #eee;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: background 0.2s;
    text-align: center;
}

.toggle-btn:hover {
    background: #eee;
}

/* PREVIEW ALIGNMENT LAYOUTS */
.preview-overlay.layout-bottom {
    flex-direction: column-reverse;
}

.preview-overlay.layout-left {
    flex-direction: row;
}

.preview-overlay.layout-right {
    flex-direction: row-reverse;
}

/* Ensure generic gap handling handled by inline style or here */
.preview-overlay {
    gap: 5px;
    /* Space between motif and text */
}

/* Ensure motif visual quality */
.preview-motif {
    /* Use 'image-rendering: auto' for SVG, 'pixelated' maybe for retro icons but SVG should be fine */
    max-width: 80px;
    /* Limit size */
    max-height: 80px;
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    .choice-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   B2B MODE SPECIFIC STYLES
   ========================================= */

/* 1. Upload Area */
.b2b-upload-area {
    border: 2px dashed var(--wiz-border-light);
    border-radius: var(--wiz-radius-card);
    background: #fafafa;
    transition: border-color 0.25s ease, background 0.25s ease;
    margin-bottom: 20px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.b2b-upload-area:hover {
    border-color: var(--wiz-primary);
    background: #f5f5f5;
}

/* File input — click handled via JS on upload area, no overlay needed */
.b2b-upload-area input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

/* --- IDLE STATE ---------------------------------------------------------- */
.b2b-upload-idle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 28px 24px 22px;
    text-align: center;
}

.b2b-upload-area.has-file .b2b-upload-idle {
    display: none;
}

.b2b-upload-icon {
    font-size: 2.2rem;
    line-height: 1;
    color: #ccc;
    margin-bottom: 4px;
    transition: color 0.2s;
}

.b2b-upload-area:hover .b2b-upload-icon {
    color: var(--wiz-primary);
}

.b2b-upload-title {
    font-family: var(--wiz-font-head);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--wiz-text-dark);
    margin-bottom: 2px;
}

.b2b-upload-hint {
    font-size: 0.8rem;
    color: #aaa;
    letter-spacing: 0.03em;
}

.btn-upload-fake {
    display: inline-block;
    background: var(--wiz-primary);
    color: var(--wiz-bg-page);
    padding: 10px 22px;
    font-family: var(--wiz-font-head);
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-top: 14px;
    pointer-events: none;
    border-radius: var(--wiz-radius-btn);
    transition: background 0.25s ease;
}

.b2b-upload-area:hover .btn-upload-fake {
    background: var(--wiz-accent);
}

/* --- SUCCESS STATE ------------------------------------------------------- */
.b2b-upload-area.has-file {
    border: 2px solid #43a047;
    background: #f6fdf6;
    cursor: default;
}

/* Container — holds one or more file rows + optional add-more button */
.b2b-file-status {
    width: 100%;
    box-sizing: border-box;
}

/* Individual file row */
.b2b-file-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    border-bottom: 1px solid rgba(67,160,71,0.15);
}

.b2b-file-row:last-of-type {
    border-bottom: none;
}

/* Circular green checkmark badge */
.b2b-file-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #43a047;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(67,160,71,0.28);
}

/* Filename */
.b2b-file-name {
    flex: 1;
    font-family: var(--wiz-font-head);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--wiz-text-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Remove (×) button */
.b2b-file-remove {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid #ddd;
    background: #fff;
    cursor: pointer;
    font-size: 0.95rem;
    color: #bbb;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    pointer-events: auto;
    position: relative;
    z-index: 20;
    line-height: 1;
}

.b2b-file-remove:hover {
    border-color: #e53935;
    color: #e53935;
    background: #fff5f5;
}

/* "+ Weitere Datei wählen" button */
.b2b-file-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px 18px;
    background: none;
    border: none;
    border-top: 1px dashed rgba(67,160,71,0.35);
    font-size: 0.78rem;
    font-family: var(--wiz-font-body);
    color: #43a047;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    pointer-events: auto;
    position: relative;
    z-index: 20;
    box-sizing: border-box;
}

.b2b-file-add:hover {
    background: rgba(67,160,71,0.07);
    color: #2e7d32;
}

/* 2. Tier Grid Kacheln */
.tier-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.tier-box {
    border: 1px solid var(--wiz-border-light);
    text-align: center;
    padding: 12px 5px;
    border-radius: var(--wiz-radius-btn);
    cursor: pointer;
    transition: all 0.2s;
    background: var(--wiz-bg-page);
    color: var(--wiz-text-muted);
}

.tier-box:hover {
    border-color: var(--wiz-accent);
}

.tier-box.active {
    border-color: var(--wiz-primary);
    background: var(--wiz-primary);
    color: var(--wiz-bg-page);
}

.tier-box.active .tier-discount {
    color: var(--wiz-accent);
}

.tier-qty {
    display: block;
    font-family: var(--wiz-font-head);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.tier-discount {
    display: block;
    font-size: 0.75rem;
    color: var(--wiz-accent);
    text-transform: uppercase;
    font-weight: 700;
}

/* 3. Plus/Minus Zähler */
.qty-input-group {
    display: flex;
    border: 1px solid var(--wiz-border-light);
    border-radius: var(--wiz-radius-btn);
    overflow: hidden;
    width: 100%;
    height: 50px;
}

.qty-btn {
    background: #f4f4f4;
    border: none;
    width: 50px;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background 0.2s;
    color: var(--wiz-primary);
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-btn:hover {
    background: var(--wiz-border-light);
}

.qty-input-group input {
    flex: 1;
    text-align: center;
    border: none;
    border-left: 1px solid var(--wiz-border-light);
    border-right: 1px solid var(--wiz-border-light);
    font-family: var(--wiz-font-head);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--wiz-primary);
    appearance: textfield;
    -moz-appearance: textfield;
    margin: 0;
    padding: 0;
}

.qty-input-group input::-webkit-outer-spin-button,
.qty-input-group input::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

/* =========================================
   MOBILE OPTIMIERUNGEN (max-width)
   Desktop-Layouts bleiben unberührt.
   ========================================= */

/* --- A. Preview Pane – kompakter auf Mobile --- */
@media (max-width: 1023px) {
    .preview-pane {
        min-height: 28vh;
        padding: 10px 16px;
    }

    .preview-img-container {
        max-width: 360px;
        margin: 0 auto;
    }

    .preview-disclaimer {
        font-size: 0.7rem;
        margin-top: 8px;
    }
}

/* --- B. Option Card Grid – 2 Spalten auf kleinen Screens --- */
@media (max-width: 480px) {
    .option-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px;
    }

    .card-img {
        height: 70px;
    }

    .card-visual {
        padding: 14px 10px;
    }
}

@media (max-width: 360px) {
    .option-grid {
        grid-template-columns: 1fr !important;
    }
}

/* --- C. Step 3 – Schriftart & Motiv-Grid 2-spaltig auf Mobile --- */
@media (max-width: 600px) {
    .personalization-form .option-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .font-preview {
        font-size: 1.3rem;
    }
}

/* --- D. Stepper Labels – auf sehr kleinen Screens ausblenden (nur Nummern zeigen) --- */
@media (max-width: 420px) {
    .step-title {
        display: none;
    }

    .step {
        padding: 0 4px;
    }

    .step-circle {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
}

/* --- E. Checkout Dock – scrollbar bei viel Inhalt (Step 4) --- */
@media (max-width: 1023px) {
    .checkout-dock {
        max-height: 55vh;
        overflow-y: auto;
        /* Scrollbar optisch minimieren */
        scrollbar-width: thin;
        scrollbar-color: #ddd transparent;
    }

    .checkout-dock::-webkit-scrollbar {
        width: 4px;
    }

    .checkout-dock::-webkit-scrollbar-thumb {
        background: #ddd;
        border-radius: 4px;
    }
}

/* --- F. Config Pane – weniger Padding & kleinere Headlines auf Mobile --- */
@media (max-width: 480px) {
    .config-pane {
        padding: 1rem;
        padding-bottom: 130px;
    }

    .headline-branded {
        font-size: 1.2rem;
        gap: 6px;
        margin-bottom: 14px;
    }

    .headline-branded .num {
        font-size: 1.2rem;
    }

    .section-headline {
        font-size: 1.4rem;
    }

    .section-sub {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }
}

/* --- G. B2B Tier-Grid – 3-spaltig auf Tablet/Mobile --- */
@media (max-width: 768px) {
    .tier-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .tier-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .tier-qty {
        font-size: 0.95rem;
    }

    .tier-discount {
        font-size: 0.65rem;
    }
}

@media (max-width: 360px) {
    .tier-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Choice Grid (Step 3 Gatekeeper) – 1 Spalte auf Mobile --- */
@media (max-width: 480px) {
    .choice-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .choice-card {
        padding: 14px 16px;
    }
}

/* --- Personalization Form – weniger inneres Padding auf Mobile --- */
@media (max-width: 480px) {
    .personalization-form {
        padding: 18px;
    }

    .form-group {
        margin-bottom: 24px;
        padding-bottom: 24px;
    }
}

/* --- Cart Error Box --- */
.wizard-cart-error-box {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fff5f5;
    border: 1px solid #f5c2c2;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 12px;
    color: #c0392b;
    font-size: 0.85rem;
    line-height: 1.5;
}

.wizard-cart-error-box svg {
    flex-shrink: 0;
    margin-top: 2px;
    stroke: #c0392b;
}

.wizard-cart-error-box a {
    color: #c0392b;
    text-decoration: underline;
}

/* =========================================
   PILLAR 1 — Touch Target Fixes (Mobile)
   ========================================= */
@media (max-width: 1023px) {

    /* Qty Buttons: 40 → 44px */
    .checkout-dock .qty-btn {
        width: 44px;
        height: 44px;
    }

    /* Stepper circles: vergößere Tap-Fläche ohne Optik zu ändern */
    .step {
        padding: 6px 8px;
        min-height: 44px;
        justify-content: center;
    }

    /* "Alle anzeigen"-Buttons: min 44px Höhe */
    .toggle-btn {
        padding: 14px 10px;
        min-height: 44px;
    }

    /* City/Board-Karten: mehr Abstand zwischen Karten */
    #city-selector.option-grid,
    #board-selector.option-grid {
        gap: 12px;
    }

    /* Font/Motiv-Karten: etwas mehr Luft */
    .personalization-form .option-grid {
        gap: 8px !important;
    }

    .option-item {
        min-height: 88px;
        padding: 14px 8px;
    }

    /* Gatekeeper Choice-Cards */
    .choice-card {
        min-height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* =========================================
   PILLAR 2 — Mini Preview Strip (Mobile, bottom)
   ========================================= */
.wiz-mini-preview {
    display: none; /* hidden on desktop */
}

@media (max-width: 1023px) {
    .wiz-mini-preview {
        position: fixed;
        bottom: 60px; /* sits above slim dock (~60px tall) */
        left: 0;
        right: 0;
        height: 44px;
        background: rgba(255, 255, 255, 0.97);
        border-top: 1px solid rgba(0, 0, 0, 0.07);
        z-index: 99; /* just below dock (100) */
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 16px;
        transform: translateY(100%); /* slides up from bottom */
        transition: transform 0.3s ease;
        pointer-events: none;
    }

    .wiz-mini-preview.is-visible {
        transform: translateY(0);
    }

    /* Hide on step 4 — receipt section already shows full summary */
    .wiz-mini-preview.is-step-summary {
        display: none !important;
    }

    #wiz-mini-thumb {
        width: 32px;
        height: 32px;
        object-fit: contain;
        border-radius: 3px;
        background: #f5f0ea;
        flex-shrink: 0;
    }

    #wiz-mini-summary {
        font-size: 0.75rem;
        font-weight: 600;
        color: #1F1F1F;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        font-family: var(--wiz-font-body);
    }
}

/* =========================================
   PILLAR 3 — Keyboard Safe (Mobile)
   ========================================= */
@media (max-width: 1023px) {

    /* Dock fade-out when keyboard is open */
    .checkout-dock {
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    .checkout-dock.keyboard-open {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* iOS Auto-Zoom prevention: font-size must be >= 16px on all inputs */
    .personalization-form input[type="text"],
    #city-search,
    #b2b-custom-city-name,
    #b2b-logo-pos-custom,
    #input-text1,
    #input-text2 {
        font-size: 1rem; /* 16px — iOS zooms in only below this */
    }

    /* Focus highlight on text inputs */
    .personalization-form input[type="text"]:focus,
    #input-text1:focus,
    #input-text2:focus {
        border-color: #A67C52;
        box-shadow: 0 0 0 3px rgba(166, 124, 82, 0.15);
        outline: none;
    }
}

/* =========================================
   PILLAR 4 — Loading Feedback
   ========================================= */

/* Spinner element */
.btn-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: wizSpin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes wizSpin {
    to { transform: rotate(360deg); }
}

/* Button state during capture */
#btn-next.is-capturing {
    background: #444;
    cursor: wait;
    justify-content: center;
    gap: 12px;
}

/* Capture overlay: higher opacity + slightly faster pulse */
.preview-img-container.capturing::after {
    background: rgba(255, 255, 255, 0.72);
    animation: capturingPulse 0.6s ease-in-out infinite alternate;
}

/* Toast notification */
.wiz-toast {
    position: fixed;
    bottom: 90px; /* sits above the sticky checkout-dock */
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1F1F1F;
    color: #fff;
    padding: 12px 20px;
    border-radius: 24px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    z-index: 200;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    font-family: var(--wiz-font-body);
}

.wiz-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


/* ============================================================
   MOBILE STEP INDICATOR — outside the wizard box
   ============================================================ */
.wiz-mobile-steps {
    display: none; /* desktop: hidden */
}

@media (max-width: 1023px) {
    /* Hide the original stepper inside the wizard */
    .stepper { display: none !important; }

    /* External step indicator */
    .wiz-mobile-steps {
        display: flex;
        align-items: flex-start;
        padding: 5px 24px 10px;
        gap: 0;
    }

    .wiz-ms-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        flex-shrink: 0;
    }

    .wiz-ms-num {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: 1.5px solid #d0d0d0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.68rem;
        font-weight: 700;
        color: #c0c0c0;
        background: transparent;
        transition: all 0.2s;
    }

    .wiz-ms-label {
        font-size: 0.58rem;
        color: #c0c0c0;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        white-space: nowrap;
        transition: color 0.2s;
    }

    /* Connecting line — centred on the circles */
    .wiz-ms-line {
        flex: 1;
        height: 1.5px;
        background: #e5e5e5;
        margin-top: 12px; /* half of 26px circle = 13px, minus 1px for line thickness */
        transition: background 0.2s;
        min-width: 12px;
    }

    /* Navigable steps — cursor feedback */
    .wiz-ms-step.is-done,
    .wiz-ms-step.is-active { cursor: pointer; }
    .wiz-ms-step.is-done:active .wiz-ms-num { opacity: 0.65; }

    /* Done step */
    .wiz-ms-step.is-done .wiz-ms-num {
        background: var(--wiz-primary);
        border-color: var(--wiz-primary);
        color: #fff;
    }
    .wiz-ms-step.is-done + .wiz-ms-line {
        background: var(--wiz-primary);
    }

    /* Active step */
    .wiz-ms-step.is-active .wiz-ms-num {
        border-color: var(--wiz-primary);
        color: var(--wiz-primary);
        box-shadow: 0 0 0 3px rgba(166,124,82,0.12);
    }
    .wiz-ms-step.is-active .wiz-ms-label {
        color: var(--wiz-primary);
        font-weight: 700;
    }

    /* Step 4: larger, prominent preview image */
    .preview-pane.is-summary-preview {
        min-height: 38vh;
    }
    .preview-pane.is-summary-preview .preview-img-container {
        max-width: 440px;
    }

    /* Mobile Step 4 — summary panel below image */
    #mobile-step4-panel {
        display: none;
    }
    .preview-pane.show-mobile-summary #mobile-step4-panel {
        display: block;
        background: #fff;
        border-top: 1px solid #eae6de;
        padding: 16px 18px 12px;
    }
    .m-s4-title {
        font-family: 'Montserrat', sans-serif;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: var(--wiz-primary, #a67c52);
        margin-bottom: 10px;
    }
    .m-s4-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 7px 0;
        border-bottom: 1px solid #f3f0ea;
        font-size: 0.82rem;
        gap: 8px;
    }
    .m-s4-row:last-child { border-bottom: none; }
    .m-s4-row > span:first-child { color: #999; white-space: nowrap; }
    .m-s4-val {
        font-weight: 600;
        color: var(--wiz-dark, #1a1a1a);
        text-align: right;
        max-width: 60%;
        word-break: break-word;
    }
}