/* =========================================================
   NANCYS CHECKOUT UX V2.2
   Compact desktop workspace
   ========================================================= */


/* ---------------------------------------------------------
   Internal cart step
   --------------------------------------------------------- */

.nancys-checkout-compact-v22
.checkout-step.nancys-checkout-cart-step-v22,

.nancys-checkout-compact-v22
.checkout-progress-item.nancys-checkout-cart-progress-v22 {

    display: none !important;
}


/* ---------------------------------------------------------
   Compact progress
   --------------------------------------------------------- */

.nancys-checkout-compact-v22
.checkout-progress {

    display: flex;

    align-items: center;

    gap: 7px;
}


.nancys-checkout-compact-v22
.checkout-progress-item {

    flex: 1 1 0;

    min-width: 0;

    justify-content: center;
}


/* ---------------------------------------------------------
   Desktop app workspace
   --------------------------------------------------------- */

@media (min-width: 981px) {

    body.nancys-checkout-workspace-v22 {

        overflow: hidden;
    }


    body.nancys-checkout-workspace-v22
    .nancys-checkout-page {

        height:
            calc(
                100dvh
                - 94px
                - var(
                    --wp-admin--admin-bar--height,
                    0px
                )
            );

        min-height: 0;

        overflow: hidden;
    }


    body.nancys-checkout-workspace-v22
    .nancys-checkout-page
    > .section {

        height: 100%;

        min-height: 0;

        overflow: hidden;

        padding:
            22px 0 18px;
    }


    body.nancys-checkout-workspace-v22
    .checkout-v2-grid {

        height: 100%;

        min-height: 0;

        align-items: stretch !important;

        grid-template-columns:
            minmax(300px, 0.78fr)
            minmax(560px, 1.22fr)
            !important;

        gap:
            clamp(
                30px,
                4vw,
                64px
            )
            !important;
    }


    /*
     * Linke Spalte:
     * Intro + Warenkorb bleiben im sichtbaren Workspace.
     */

    body.nancys-checkout-workspace-v22
    .checkout-v2-sidebar-host {

        height: 100%;

        min-height: 0;

        overflow-y: auto;

        overscroll-behavior:
            contain;

        padding-right: 8px;
    }


    body.nancys-checkout-workspace-v22
    .checkout-v2-sidebar {

        margin-top: 22px;
    }


    body.nancys-checkout-workspace-v22
    .checkout-v2-sidebar-card {

        position: static;

        top: auto;

        max-height: none;
    }


    /*
     * Rechte Spalte:
     * Nur diese Fläche scrollt während des Checkouts.
     */

    body.nancys-checkout-workspace-v22
    #nancys-order-form {

        height: 100%;

        min-height: 0;

        overflow-y: auto;

        overscroll-behavior:
            contain;

        scrollbar-gutter:
            stable;

        padding-right: 8px;
    }


    /*
     * Fortschritt bleibt oben sichtbar.
     */

    body.nancys-checkout-workspace-v22
    .checkout-progress {

        position: sticky;

        top: 0;

        z-index: 30;

        margin:
            0 0 14px;

        padding:
            8px 0 13px;

        background:
            linear-gradient(
                180deg,
                #fbf3e3 0%,
                #fbf3e3 78%,
                rgba(
                    251,
                    243,
                    227,
                    0
                )
                100%
            );
    }


    /*
     * Eingeklappte Schritte kompakter.
     */

    body.nancys-checkout-workspace-v22
    .checkout-step {

        margin-bottom: 10px;
    }


    body.nancys-checkout-workspace-v22
    .checkout-step:not(.is-current)
    .checkout-step-header {

        min-height: 72px;

        padding-top: 15px;
        padding-bottom: 15px;
    }


    body.nancys-checkout-workspace-v22
    .checkout-step.is-current {

        scroll-margin-top: 82px;
    }


    body.nancys-checkout-workspace-v22
    .checkout-step-complete-summary {

        max-width: 52%;
    }


    body.nancys-checkout-workspace-v22
    .checkout-step-summary-text {

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;
    }

}


/* ---------------------------------------------------------
   Medium desktop / notebook
   --------------------------------------------------------- */

@media (
    min-width: 981px
)
and (
    max-height: 760px
) {

    body.nancys-checkout-workspace-v22
    .nancys-checkout-page
    > .section {

        padding:
            14px 0 10px;
    }


    body.nancys-checkout-workspace-v22
    .checkout-v2-sidebar {

        margin-top: 14px;
    }

}


/* ---------------------------------------------------------
   Mobile / tablet
   --------------------------------------------------------- */

@media (max-width: 980px) {

    body.nancys-checkout-workspace-v22 {

        overflow: visible;
    }


    body.nancys-checkout-workspace-v22
    .nancys-checkout-page {

        height: auto;

        overflow: visible;
    }


    body.nancys-checkout-workspace-v22
    #nancys-order-form {

        height: auto;

        overflow: visible;

        padding-right: 0;
    }


    .nancys-checkout-compact-v22
    .checkout-progress {

        overflow-x: auto;

        justify-content: flex-start;

        scrollbar-width: none;
    }


    .nancys-checkout-compact-v22
    .checkout-progress::-webkit-scrollbar {

        display: none;
    }


    .nancys-checkout-compact-v22
    .checkout-progress-item {

        flex:
            0 0 auto;
    }

}