/* =========================================================
   NANCYS CHECKOUT WIZARD V2
   ========================================================= */


/*
|--------------------------------------------------------------------------
| Desktop-Aufteilung
|--------------------------------------------------------------------------
*/

.checkout-v2-grid {
    display: grid !important;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(560px, 1.18fr) !important;

    align-items: start !important;

    gap:
        clamp(36px, 5vw, 78px) !important;
}


.checkout-v2-grid
#nancys-order-form {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
}


/*
|--------------------------------------------------------------------------
| Linke Seite
|--------------------------------------------------------------------------
*/

.checkout-v2-sidebar-host {
    min-width: 0;
}


.checkout-v2-sidebar {
    margin-top: 32px;
}


.checkout-v2-sidebar-card {
    position: sticky;

    top: 118px;

    padding:
        28px;

    border:
        1px solid
        rgba(255,255,255,0.15);

    border-radius:
        28px;

    background:
        rgba(255,255,255,0.09);

    box-shadow:
        0 24px 60px
        rgba(0,0,0,0.10);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    color:
        #fff;
}


.checkout-v2-eyebrow {
    display: block;

    margin-bottom: 9px;

    color:
        var(--nancys-yellow);

    font-size: 12px;
    font-weight: 900;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}


.checkout-v2-sidebar-card h3 {
    margin:
        0 0 20px;

    color:
        #fff;

    font-size:
        clamp(24px, 2vw, 34px);

    line-height:
        1.08;
}


.checkout-v2-side-lines {
    display: grid;

    gap: 7px;

    padding-bottom:
        20px;

    color:
        rgba(255,255,255,0.84);

    font-size:
        15px;

    line-height:
        1.45;
}


.checkout-v2-side-lines span {
    display: block;
}


.checkout-v2-side-lines
.is-muted {
    color:
        rgba(255,255,255,0.60);
}


.checkout-v2-side-referral {
    margin-bottom:
        12px;

    padding:
        11px 13px;

    border-radius:
        14px;

    background:
        rgba(245,189,33,0.18);

    color:
        #fff;

    font-size:
        13px;

    font-weight:
        800;
}


.checkout-v2-side-delivery {
    margin-bottom:
        14px;

    padding:
        12px 14px;

    border:
        1px solid
        rgba(255,255,255,0.14);

    border-radius:
        14px;

    color:
        rgba(255,255,255,0.88);

    font-size:
        13px;

    line-height:
        1.4;
}


.checkout-v2-side-total {
    display: flex;

    align-items: end;
    justify-content: space-between;

    gap: 20px;

    padding-top:
        20px;

    border-top:
        1px solid
        rgba(255,255,255,0.18);
}


.checkout-v2-side-total span {
    color:
        rgba(255,255,255,0.68);

    font-size:
        13px;

    text-transform:
        uppercase;

    letter-spacing:
        0.06em;
}


.checkout-v2-side-total strong {
    color:
        #fff;

    font-size:
        26px;

    line-height:
        1;
}


/*
|--------------------------------------------------------------------------
| Progress
|--------------------------------------------------------------------------
*/

.checkout-progress {
    gap: 6px;
}


.checkout-progress-item {
    opacity: 0.45;

    cursor: default;

    transition:
        opacity 160ms ease,
        background 160ms ease,
        transform 160ms ease;
}


.checkout-progress-item.is-available {
    opacity: 0.72;

    cursor: pointer;
}


.checkout-progress-item.is-current {
    opacity: 1;

    background:
        rgba(255,255,255,0.17);

    transform:
        translateY(-1px);
}


.checkout-progress-item.is-complete {
    opacity: 1;
}


.checkout-progress-item.is-complete b {
    background:
        #fff;

    color:
        var(--nancys-green);
}


.checkout-progress-item.is-complete b::before {
    content: "✓";

    font-size: 13px;
}


.checkout-progress-item.is-complete b {
    font-size: 0;
}


/*
|--------------------------------------------------------------------------
| Wizard-Schritte
|--------------------------------------------------------------------------
*/

.checkout-step {
    transition:
        box-shadow 180ms ease,
        transform 180ms ease,
        opacity 180ms ease;
}


.checkout-step:not(.is-current) {
    box-shadow:
        0 8px 30px
        rgba(7,63,120,0.05);
}


.checkout-step.is-current {
    box-shadow:
        0 20px 55px
        rgba(7,63,120,0.13);
}


.checkout-step.is-complete
.checkout-step-header {
    cursor: pointer;
}


.checkout-step:not(.is-current)
.checkout-step-header {
    border-bottom: 0;
}


.checkout-step-complete-summary {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-left: auto;

    padding-left: 16px;
}


.checkout-step-summary-text {
    color:
        var(--nancys-muted);

    font-size:
        13px;

    font-weight:
        700;

    text-align: right;
}


.checkout-step-edit {
    appearance: none;

    border: 0;

    background:
        transparent;

    color:
        var(--nancys-blue);

    font: inherit;

    font-size:
        13px;

    font-weight:
        800;

    cursor: pointer;

    text-decoration:
        underline;

    text-underline-offset:
        3px;
}


/*
|--------------------------------------------------------------------------
| Weiter-Buttons
|--------------------------------------------------------------------------
*/

.checkout-step-actions {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    margin-top:
        24px;

    padding-top:
        20px;

    border-top:
        1px solid #eee7dd;
}


.checkout-next-button {
    appearance: none;

    min-height:
        56px;

    padding:
        13px 22px;

    border:
        0;

    border-radius:
        999px;

    background:
        var(--nancys-blue);

    color:
        #fff;

    font:
        inherit;

    font-size:
        15px;

    font-weight:
        800;

    cursor:
        pointer;

    box-shadow:
        0 10px 24px
        rgba(7,63,120,0.18);

    transition:
        transform 150ms ease,
        box-shadow 150ms ease;
}


.checkout-next-button:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 14px 30px
        rgba(7,63,120,0.23);
}


/*
|--------------------------------------------------------------------------
| Lieferminimum
|--------------------------------------------------------------------------
*/

.checkout-minimum-box {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    margin:
        0 0 18px;

    padding:
        17px 18px;

    border:
        1px solid
        rgba(216,38,46,0.18);

    border-radius:
        18px;

    background:
        #fff5f3;
}


.checkout-minimum-copy {
    display: grid;

    gap: 4px;
}


.checkout-minimum-copy strong {
    color:
        var(--nancys-red);

    font-size:
        15px;

    line-height:
        1.35;
}


.checkout-minimum-copy span {
    color:
        var(--nancys-muted);

    font-size:
        13px;

    line-height:
        1.4;
}


.checkout-upgrade-button {
    flex: 0 0 auto;

    min-height:
        44px;

    padding:
        10px 15px;

    border:
        0;

    border-radius:
        999px;

    background:
        var(--nancys-red);

    color:
        #fff;

    font:
        inherit;

    font-size:
        13px;

    font-weight:
        800;

    cursor:
        pointer;
}


/*
|--------------------------------------------------------------------------
| Finaler Button gesperrt
|--------------------------------------------------------------------------
*/

.checkout-final-button:disabled,
.checkout-final-button.is-blocked {
    opacity:
        0.42;

    cursor:
        not-allowed;

    box-shadow:
        none !important;

    transform:
        none !important;
}


/*
|--------------------------------------------------------------------------
| Fallback
|--------------------------------------------------------------------------
*/

.checkout-v2-sidebar-fallback {
    display: none;
}


/*
|--------------------------------------------------------------------------
| Tablet / Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 980px) {

    .checkout-v2-grid {
        display: block !important;
    }


    .checkout-v2-sidebar {
        display: none;
    }


    .checkout-step-summary-text {
        display: none;
    }


    .checkout-progress {
        margin-bottom:
            4px;
    }

}


@media (max-width: 700px) {

    .checkout-progress {
        margin-left:
            -2px;

        margin-right:
            -2px;
    }


    .checkout-progress-item {
        padding:
            7px 10px;

        font-size:
            12px;
    }


    .checkout-step-header {
        align-items:
            center;
    }


    .checkout-step-header p {
        display: none;
    }


    .checkout-step-edit {
        font-size:
            12px;
    }


    .checkout-step-actions {
        display: block;
    }


    .checkout-next-button {
        width: 100%;
    }


    .checkout-minimum-box {
        display: grid;
    }


    .checkout-upgrade-button {
        width: 100%;
    }

}