body {
        min-height: 0 !important;
        height: auto !important;
        display: block !important;
    }


    :root {
        --primary: #6C5CE7;
        --primary-dark: #5649C0;
        --secondary: #00CEFF;
        --accent: #FF7675;
        --dark: #2D3436;
        --light: #F5F6FA;
        --success: #00B894;
        --warning: #FDCB6E;
        --danger: #FF7675;
        --text-light: #74878d;
    }

    /* HERO */
    .purchase-hero {
        position: relative;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        background-size: cover;
        background-position: center;
        min-height: 190px;
        display: flex;
        align-items: center;
        overflow: hidden;
        transition: background-image 0.3s ease;
    }

    .hero-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.18);
    }

    .hero-content {
        position: relative;
        z-index: 2;
        text-align: center;
        padding: 28px 20px;
        color: white;
        width: 100%;
    }

    .hero-title {
        font-size: 2.5rem;
        font-weight: 700;
        line-height: 1.1;
        margin: 0 0 8px;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    }

    .hero-subtitle {
        font-size: 1.1rem;
        margin: 0;
        opacity: 0.92;
    }

    .back-button {
        position: absolute;
        top: 12px;
        left: 15px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: white;
        text-decoration: none;
        background: rgba(255,255,255,0.18);
        padding: 7px 12px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .back-button:hover {
        color: white;
        background: rgba(255,255,255,0.28);
    }

    /* STAGE NAVIGATION */
    .purchase-steps {
        position: sticky;
        top: 0;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 11px 15px;
        background: rgba(255,255,255,0.97);
        border-bottom: 1px solid rgba(0,0,0,0.08);
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .purchase-step {
        display: flex;
        align-items: center;
        gap: 7px;
        color: var(--text-light);
        font-size: 0.85rem;
        font-weight: 600;
        white-space: nowrap;
    }

    .step-dot {
        width: 27px;
        height: 27px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #e9e9ee;
        color: #777;
        font-size: 0.78rem;
        font-weight: 700;
    }

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

    .purchase-step.active .step-dot {
        background: var(--primary);
        color: white;
    }

    .purchase-step.completed .step-dot {
        background: var(--success);
        color: white;
    }

    .step-line {
        width: 35px;
        height: 1px;
        background: #ddd;
    }

    /* MAIN */
    .purchase-section {
        min-height: 0;
        padding: 28px 0 45px;
        background: var(--light);
    }

    .purchase-container {
        max-width: 800px;
    }

    .purchase-step-panel {
        display: none;
        background: white;
        border-radius: 12px;
        padding: 25px;
        box-shadow: 0 3px 18px rgba(0,0,0,0.06);
    }

    .purchase-step-panel:not(.active) {
        display: none;
    }

    .purchase-step-panel.active {
        display: block;
    }

    .panel-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .panel-kicker,
    .section-kicker {
        display: block;
        color: var(--primary);
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 3px;
    }

    .panel-heading h2 {
        margin: 0;
        color: var(--dark);
        font-size: 1.65rem;
        line-height: 1.2;
    }

    /* TICKET */
    .ticket-summary {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
    }

    .ticket-summary-main {
        min-width: 0;
    }

    .ticket-summary h3 {
        margin: 0;
        font-size: 1.35rem;
        color: var(--dark);
    }

    .ticket-price {
        flex-shrink: 0;
        color: var(--primary);
        font-size: 1.25rem;
        font-weight: 700;
    }

    .ticket-description {
        margin: 8px 0 0;
        color: #4f5a5d;
        font-size: 0.94rem;
        line-height: 1.5;
        white-space: pre-line;
    }

    .ticket-selection-row {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 20px;
        padding: 20px 0;
    }

    .quantity-selector {
        max-width: 270px;
    }

    .form-label {
        display: block;
        margin-bottom: 6px;
        color: var(--dark);
        font-size: 0.9rem;
        font-weight: 600;
    }

    .quantity-control {
        display: flex;
        align-items: center;
        width: 165px;
        height: 44px;
    }

    .quantity-button {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border: 1px solid #d8d8df;
        background: #f8f8fa;
        color: var(--dark);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .quantity-button:first-child {
        border-radius: 7px 0 0 7px;
    }

    .quantity-button:last-child {
        border-radius: 0 7px 7px 0;
    }

    .quantity-button:hover {
        color: var(--primary);
        background: #f0effc;
    }

    .quantity-control input[type="number"] {
        width: 77px;
        height: 44px;
        padding: 6px;
        border: 1px solid #d8d8df;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        text-align: center;
        font-size: 1rem;
        font-weight: 600;
    }

    .quantity-control input[type="number"]:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: none;
    }

    .form-hint {
        margin-top: 6px;
        color: var(--text-light);
        font-size: 0.78rem;
    }

    .availability-note {
        color: var(--danger);
        font-size: 0.85rem;
        font-weight: 600;
    }

    /* TIMESLOTS */
    .timeslot-section,
    .dining-location-section,
    .menu-selection-section {
        margin-top: 18px;
        padding-top: 20px;
        border-top: 1px solid #eee;
    }

    .section-heading-row {
        margin-bottom: 13px;
    }

    .section-heading-row h3 {
        margin: 0;
        color: var(--dark);
        font-size: 1.08rem;
    }

    .section-heading-row h3 small {
        font-size: 0.76rem;
        font-weight: 400;
        color: var(--text-light);
    }

    .required-asterisk {
        color: var(--danger);
    }

    .timeslot-instructions {
        margin-bottom: 8px;
        color: var(--text-light);
        font-size: 0.82rem;
    }

    .timeslot-scroll {
        max-height: 270px;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain; /* add this line */
        padding: 2px 4px 4px 2px;
        border: 1px solid #eee;
        border-radius: 8px;
        background: #fafafa;
    }

    .timeslot-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
        gap: 7px;
    }

    .timeslot-item {
        position: relative; /* add this line */
    }

    .timeslot-item input[type="radio"] {
        position: absolute;
        /* belt-and-braces: keep its footprint negligible even if something else goes sideways */
        width: 1px;
        height: 1px;
        margin: -1px;
        opacity: 0;
        pointer-events: none;
    }

    .timeslot-item label {
        min-height: 74px;
        padding: 10px 9px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        background: white;
        border: 1px solid #dddde4;
        border-radius: 8px;
        cursor: pointer;
        transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    }

    .timeslot-item input[type="radio"]:checked + label {
        border-color: var(--primary);
        background: rgba(108,92,231,0.06);
        box-shadow: 0 0 0 1px var(--primary);
    }

    .timeslot-date {
        font-size: 0.76rem;
        color: var(--text-light);
        line-height: 1.2;
    }

    .timeslot-time {
        margin-top: 2px;
        color: var(--primary);
        font-size: 1.05rem;
    }

    .timeslot-availability {
        margin-top: 2px;
        color: var(--danger);
        font-size: 0.68rem;
        font-weight: 600;
    }

    .timeslot-message {
        margin-top: 10px;
        color: var(--danger);
        font-size: 0.84rem;
        font-weight: 600;
    }

    /* DINING */
    .dining-location-options {
        display: grid;
        gap: 8px;
    }

    .choice-card {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 48px;
        margin: 0;
        padding: 10px 42px 10px 12px;
        border: 1px solid #dddde4;
        border-radius: 8px;
        background: white;
        cursor: pointer;
    }

    .choice-card:has(input:checked) {
        border-color: var(--primary);
        background: rgba(108,92,231,0.05);
        box-shadow: 0 0 0 1px var(--primary);
    }

    .choice-card input {
        margin-right: 10px;
        accent-color: var(--primary);
    }

    .choice-card-content {
        min-width: 0;
    }

    .choice-card-title {
        color: var(--dark);
        font-size: 0.9rem;
        font-weight: 600;
    }

    .choice-card-title small {
        color: var(--text-light);
        font-weight: 400;
    }

    .dining-location-info-button {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        padding: 4px;
        border: 0;
        background: transparent;
        color: var(--primary);
        cursor: pointer;
    }

    /* MENUS */
    .menu-selection-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .menu-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 10px;
        border: 1px solid #e0e0e5;
        border-radius: 9px;
        background: white;
    }

    .menu-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
    }

    .menu-card-header h4 {
        margin: 0;
        color: var(--dark);
        font-size: 0.98rem;
        line-height: 1.25;
    }

    .menu-price {
        flex-shrink: 0;
        color: var(--primary);
        font-size: 0.9rem;
    }

    .menu-description {
        margin-top: 7px;
        color: #596467;
        font-size: 0.82rem;
        line-height: 1.4;
    }

    .menu-description p:last-child {
        margin-bottom: 0;
    }

    .menu-per-person-note {
        margin-top: 5px;
        color: var(--text-light);
        font-size: 0.78rem;
        line-height: 1.35;
    }

    .menu-per-person-note i {
        margin-right: 4px;
    }

    .menu-quantity-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: auto;
        padding-top: 10px;
        border-top: 1px solid #eee;
    }

    .menu-quantity-row label {
        margin: 0;
        color: var(--dark);
        font-size: 0.82rem;
        font-weight: 600;
    }

    .menu-quantity-control {
        display: flex;
        align-items: center;
        width: 136px;
        height: 44px;
    }

    .menu-quantity-control .ticket-menu-quantity {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .menu-quantity-button {
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid #d8d8df;
        background: #f8f8fa;
        color: var(--dark);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .menu-quantity-button:first-child {
        border-radius: 7px 0 0 7px;
    }

    .menu-quantity-button:last-child {
        border-radius: 0 7px 7px 0;
    }

    .menu-quantity-button:hover {
        color: var(--primary);
        background: #f0effc;
    }

    .ticket-menu-quantity {
        width: 48px;
        height: 44px;
        padding: 6px 2px;
        border: 1px solid #d8d8df;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        text-align: center;
        font-size: 1rem;
        font-weight: 600;
        appearance: textfield;
        -moz-appearance: textfield;
    }

    .ticket-menu-quantity::-webkit-outer-spin-button,
    .ticket-menu-quantity::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* CUSTOMER */
    .customer-fields {
        display: grid;
        gap: 15px;
    }

    .form-group {
        margin: 0;
    }

    input[type="text"],
    input[type="email"],
    input[type="number"],
    select {
        width: 100%;
        padding: 9px 11px;
        border: 1px solid #d8d8df;
        border-radius: 7px;
        color: var(--dark);
        font-size: 0.94rem;
        background: white;
    }

    input:focus,
    select:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 2px rgba(108,92,231,0.12);
    }

    input.client-invalid,
    select.client-invalid {
        border-color: var(--danger);
        background: rgba(255, 118, 117, 0.05);
    }

    input.client-invalid:focus,
    select.client-invalid:focus {
        border-color: var(--danger);
        box-shadow: 0 0 0 2px rgba(255, 118, 117, 0.15);
    }

    .checkbox-row {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        margin: 0;
        color: #4f5a5d;
        font-size: 0.84rem;
        cursor: pointer;
    }

    .checkbox-row input {
        margin-top: 3px;
        accent-color: var(--primary);
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        min-width: 18px;
        min-height: 18px;
    }

    .input-error {
        margin-top: 5px;
        color: var(--danger);
        font-size: 0.8rem;
    }

    .checkbox-error {
        font-weight: 600;
        padding: 4px 8px;
        background: rgba(255, 118, 117, 0.1);
        border-radius: 4px;
        border-left: 3px solid var(--danger);
    }

    .checkbox-row.checkbox-error {
        color: var(--danger);
        font-weight: 600;
        padding: 8px;
        background: rgba(255, 118, 117, 0.08);
        border-radius: 6px;
        border: 1px solid var(--danger);
    }

    .checkbox-row.checkbox-error input {
        accent-color: var(--danger);
    }

    /* CHECKOUT */
    .checkout-summary {
        padding: 16px;
        border-radius: 9px;
        background: #f7f7fa;
    }

    .price-breakdown {
        width: 100%;
    }

    .price-row {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 7px;
        color: #505b5e;
        font-size: 0.88rem;
    }

    .price-row span:last-child {
        white-space: nowrap;
        font-weight: 600;
    }

    .price-divider {
        margin: 10px 0;
        border-top: 1px solid #dddde4;
    }

    .price-total-row {
        margin: 0;
        color: var(--dark);
        font-size: 1.12rem;
        font-weight: 700;
    }

    .info-message {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        margin-top: 15px;
        padding: 11px 13px;
        border-radius: 7px;
        background: #eaf5fc;
        color: #18588a;
        font-size: 0.78rem;
        line-height: 1.45;
    }

    .info-message i {
        margin-top: 2px;
    }

    /* ACTIONS */
    .step-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 24px;
        padding-top: 18px;
        border-top: 1px solid #eee;
    }

    .ticket-button,
    .secondary-step-button {
        min-height: 42px;
        padding: 9px 17px;
        border-radius: 7px;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.15s, transform 0.15s;
    }

    .ticket-button {
        border: 0;
        background: var(--primary);
        color: white;
    }

    .ticket-button:hover {
        background: var(--primary-dark);
        color: white;
        transform: translateY(-1px);
    }

    .secondary-step-button {
        border: 1px solid #d8d8df;
        background: white;
        color: var(--dark);
    }

    .secondary-step-button:hover {
        border-color: var(--primary);
        color: var(--primary);
    }

    .checkout-actions .ticket-button {
        min-width: 190px;
    }

    .ticket-button.disabled {
        background: var(--text-light);
        cursor: not-allowed;
    }

    .alert-message {
        display: flex;
        gap: 9px;
        margin-bottom: 15px;
        padding: 11px 13px;
        border-radius: 7px;
        font-size: 0.84rem;
    }

    .alert-danger {
        background: #ffebee;
        color: #c62828;
    }

    .global-error {
        margin-bottom: 15px;
    }

    /* MODAL */
    .dining-location-description-modal .modal-body {
        color: var(--dark);
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .dining-location-description-modal .modal-body p:last-child {
        margin-bottom: 0;
    }

    .description-toggle {
        display: none;
        align-items: center;
        gap: 5px;
        margin-top: 6px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--primary);
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
    }

    .description-toggle i {
        font-size: 0.7rem;
        transition: transform 0.2s;
    }

    .description-toggle.expanded i {
        transform: rotate(180deg);
    }

    /* MOBILE */
    @media (max-width: 768px) {
        .purchase-hero {
            min-height: 125px;
        }

        .hero-content {
            padding: 31px 16px 18px;
        }

        .hero-title {
            font-size: 1.45rem;
            margin-bottom: 4px;
        }

        .hero-subtitle {
            font-size: 0.88rem;
        }

        .back-button {
            top: 8px;
            left: 10px;
            padding: 5px 8px;
            font-size: 0;
            width: 32px;
            height: 32px;
            justify-content: center;
            border-radius: 50%;
        }

        .back-button i {
            font-size: 0.9rem;
        }

        .purchase-steps {
            justify-content: space-between;
            gap: 4px;
            padding: 8px 10px;
        }

        .purchase-step {
            flex-direction: column;
            gap: 2px;
            font-size: 0.63rem;
        }

        .step-dot {
            width: 24px;
            height: 24px;
            font-size: 0.7rem;
        }

        .step-line {
            flex: 1;
            max-width: 30px;
        }

        .purchase-section {
            padding: 12px 0 25px;
        }

        .purchase-container {
            padding-left: 10px;
            padding-right: 10px;
        }

        .purchase-step-panel {
            padding: 15px;
            border-radius: 9px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .panel-heading {
            margin-bottom: 14px;
        }

        .panel-heading h2 {
            font-size: 1.22rem;
        }

        .ticket-summary {
            gap: 10px;
            padding-bottom: 13px;
        }

        .ticket-summary h3 {
            font-size: 1.05rem;
        }

        .ticket-price {
            font-size: 1rem;
        }

        .ticket-description {
            font-size: 0.82rem;
            line-height: 1.42;
        }

        .ticket-selection-row {
            display: block;
            padding: 14px 0;
        }

        .quantity-selector {
            max-width: none;
        }

        .availability-note {
            margin-top: 9px;
            font-size: 0.75rem;
        }

        .timeslot-section,
        .dining-location-section,
        .menu-selection-section {
            margin-top: 13px;
            padding-top: 14px;
        }

        .section-heading-row {
            margin-bottom: 9px;
        }

        .section-heading-row h3 {
            font-size: 0.95rem;
        }

        .timeslot-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 7px;
        }

        .timeslot-item label {
            min-height: 60px;
            padding: 7px 5px;
        }

        .timeslot-date {
            font-size: 0.66rem;
        }

        .timeslot-time {
            font-size: 0.9rem;
        }

        .timeslot-availability {
            font-size: 0.6rem;
        }

        .choice-card {
            min-height: 43px;
            padding: 8px 38px 8px 9px;
        }

        .choice-card-title {
            font-size: 0.8rem;
        }

        .menu-selection-grid {
            grid-template-columns: 1fr;
            gap: 7px;
        }

        .menu-card {
            padding: 8px;
        }

        .menu-card-header h4 {
            font-size: 0.88rem;
        }

        .menu-price {
            font-size: 0.82rem;
        }

        .menu-description {
            font-size: 0.75rem;
            line-height: 1.35;
        }

        .menu-quantity-row {
            margin-top: 8px;
            padding-top: 8px;
        }

        .customer-fields {
            gap: 11px;
        }

        .form-label {
            margin-bottom: 4px;
            font-size: 0.82rem;
        }

        input[type="text"],
        input[type="email"],
        input[type="number"],
        select {
            padding: 8px 9px;
            font-size: 0.88rem;
        }

        .checkbox-row {
            font-size: 0.76rem;
        }

        .checkbox-row input {
            width: 18px;
            height: 18px;
            min-width: 18px;
            min-height: 18px;
        }

        .step-actions {
            margin-top: 17px;
            padding-top: 13px;
        }

        .ticket-button,
        .secondary-step-button {
            min-height: 40px;
            padding: 8px 13px;
            font-size: 0.82rem;
        }

        .step-actions .ticket-button {
            flex: 1;
        }

        .secondary-step-button {
            flex-shrink: 0;
        }

        .checkout-actions {
            align-items: stretch;
        }

        .checkout-actions .ticket-button {
            min-width: 0;
        }

        .checkout-summary {
            padding: 12px;
        }

        .price-row {
            font-size: 0.78rem;
            margin-bottom: 5px;
        }

        .price-total-row {
            font-size: 1rem;
        }

        .info-message {
            font-size: 0.72rem;
            padding: 9px 10px;
        }

        .ticket-description {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .ticket-description.expanded {
            -webkit-line-clamp: unset;
            line-clamp: unset;
            display: block;
        }
    }

/* Date context stays visible through each checkout stage. */
html[lang="nl"] .purchase-hero span.desc-nl, html[lang="nl"] .purchase-date-bar span.desc-nl, html[lang="nl"] .purchase-form span.desc-nl,
html[lang="en"] .purchase-hero span.desc-en, html[lang="en"] .purchase-date-bar span.desc-en, html[lang="en"] .purchase-form span.desc-en { display: inline !important; }
html[lang="nl"] .purchase-hero span.desc-en, html[lang="nl"] .purchase-date-bar span.desc-en, html[lang="nl"] .purchase-form span.desc-en,
html[lang="en"] .purchase-hero span.desc-nl, html[lang="en"] .purchase-date-bar span.desc-nl, html[lang="en"] .purchase-form span.desc-nl { display: none !important; }
body { overflow-x: clip; }
.purchase-hero { min-height: 208px; }
.purchase-hero .hero-content { padding-top: 54px; padding-bottom: 20px; }
.purchase-hero .hero-title { overflow-wrap: anywhere; }
.hero-chosen-date { display: inline-flex; align-items: center; gap: 9px; margin: 13px 0 0; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.93); color: #32296b; font-weight: 800; font-size: 1.03rem; }
.purchase-date-bar { position: sticky; top: 0; z-index: 110; background: #342a6b; color: #fff; box-shadow: 0 2px 7px rgba(24,20,56,.12); }
.purchase-date-bar-inner { display: flex; align-items: center; justify-content: flex-start; gap: 9px; max-width: 800px; min-height: 39px; font-size: .81rem; }
.purchase-date-bar i { color: #d8d1ff; }
.purchase-date-bar strong { white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; }
.purchase-date-divider { flex: 0 0 auto; width: 3px; height: 3px; border-radius: 50%; background: #d8d1ff; }
.purchase-date-kind { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .9; }
.purchase-steps { top: 39px; }
.ticket-summary-date { margin: 8px 0 0; color: #5343b4; font-size: .95rem; font-weight: 800; }
.ticket-summary-date i { margin-right: 4px; }
.checkout-date-review { display: flex; align-items: flex-start; gap: 12px; border: 2px solid #6c5ce7; background: #f3f0ff; border-radius: 11px; padding: 16px; margin-bottom: 18px; color: #332b73; }
.checkout-date-review > div { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.checkout-date-review small { color: #594cb3; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 800; }
.checkout-date-review strong { font-size: 1.15rem; line-height: 1.24; }
.checkout-date-review > a { font-size: .82rem; font-weight: 800; white-space: nowrap; }
.checkout-date-icon { display: grid; place-items: center; background: #e2ddff; width: 36px; height: 36px; border-radius: 9px; flex: 0 0 auto; }
.date-confirmation { display: flex; gap: 11px; align-items: flex-start; margin: 18px 0 0; padding: 16px; border: 1px solid #c9c1f5; border-radius: 10px; background: #faf9ff; color: #2f2867; cursor: pointer; }
.date-confirmation:has(input:checked) { border-color: #5d50c7; background: #f1eeff; }
.date-confirmation input { margin: 3px 0 0; width: 19px; height: 19px; flex: 0 0 auto; cursor: pointer; }
.date-confirmation > span { display: flex; flex-direction: column; gap: 4px; line-height: 1.4; }
.date-confirmation strong { font-size: .98rem; }
.date-confirmation small { color: #686581; font-size: .8rem; }
.date-confirmation-error { margin: 8px 0; }
.food-stage-note { display: flex; align-items: center; gap: 12px; background: #f3f0ff; color: #5144a1; padding: 12px 14px; border-radius: 10px; margin-bottom: 18px; }
.food-stage-note i { flex: 0 0 auto; }
.food-stage-note p { margin: 0; font-size: .9rem; line-height: 1.5; }
.menu-limit-status { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 6px 10px; border-radius: 7px; background: #f1efff; color: #5548aa; font-size: .78rem; font-weight: 700; }
.menu-limit-status.is-full { background: #e8f7f2; color: #087b62; }
.menu-card.has-selection { border-color: #796aec; background: #fbfaff; box-shadow: 0 0 0 1px rgba(108,92,231,.17); }
.menu-card.menu-limit-reached:not(.has-selection) { background: #f6f6f8; opacity: .68; }
.menu-quantity-button:disabled, .menu-quantity-button:disabled:hover { background: #f0f0f3; color: #a5a5b0; border-color: #dddddf; cursor: not-allowed; }
@media (max-width: 768px) {
    .purchase-hero { min-height: 184px; }
    .purchase-hero .hero-content { padding: 51px 12px 15px; }
    .purchase-hero .hero-title { font-size: clamp(1.5rem, 5vw, 2rem); }
    .hero-chosen-date { margin-top: 10px; padding: 9px 12px; font-size: .91rem; }
    .purchase-hero .back-button { width: auto; height: 32px; padding: 5px 10px; border-radius: 17px; font-size: .75rem; }
    .purchase-date-bar-inner { padding-left: 14px; padding-right: 14px; min-height: 38px; font-size: .77rem; }
    .purchase-steps { top: 38px; }
    .purchase-container { padding-left: 14px; padding-right: 14px; }
    .purchase-step-panel { padding: 18px; }
    .checkout-date-review { padding: 12px; gap: 9px; }
    .checkout-date-review strong { font-size: 1rem; }
    .checkout-date-icon { display: none; }
    .date-confirmation { padding: 14px; }
}