/**
 * De zwevende bestelpil en de bottom sheet, gedeeld door beide
 * bestelpagina's: "Broodjes bestellen per persoon" (de winkelwagen) en
 * "Lunch bestellen voor groep" (de kassabon). Zo zien en werken ze
 * hetzelfde.
 *
 * Wordt ingeladen vanuit includes/functions/producten-pagina.php, op de
 * sjablonen Producten.php en Groepsbestelling.php.
 *
 * Hier staan ook de kleur- en maatvariabelen, omdat beide pagina's ze
 * nodig hebben.
 */

:root {
    --vvb-bruin: #a6865a;
    --vvb-bruin-donker: #7a5c33;
    --vvb-bruin-licht: #f3ece1;
    --vvb-rand: #d9d2c6;
    --vvb-veld: #faf8f5;
    /* Het groen dat het thema al gebruikt voor "Plaats bestelling". Zo
       hebben de pil en beide bestelknoppen dezelfde kleur. */
    --vvb-groen: #1cc102;
    --vvb-radius: 8px;

    /* Wordt door vvb-producten.js op de echte onderkant van de plakkende
       header plus de kier hieronder gezet. Deze waarde is de terugval. */
    --vvb-sticky-top: 108px;
    --vvb-kier: 16px;
}

/* Op desktop staat de winkelwagen of de kassabon gewoon naast de inhoud. */
.vvb-cart-pill {
    display: none;
}

/* De sluitknop wordt door de javascript in de kassabon gezet en hoort
   alleen bij de sheet. Op desktop zou hij als los kruisje in de zijbalk
   blijven staan. */
aside.b210-go__right .vvb-sheet__sluiten {
    display: none;
}

@media screen and (max-width: 1024px) {

    .vvb-cart-pill {
        display: block;
    }

    .vvb-pill {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 95;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 52px;
        padding: 0 18px;
        border: 0;
        border-radius: 999px;
        background: var(--vvb-groen);
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    }

    .vvb-pill:focus-visible {
        outline: 3px solid #fff;
        outline-offset: -5px;
    }

    .vvb-cart-pill.is-leeg .vvb-pill {
        display: none;
    }

    /* --- bottom sheet --- */

    /* De kassabon van de groepsbestelling is de sheet van die pagina. Hij
       blijft op zijn plek in de dom staan: de knop "Plaats bestelling"
       zit erin en moet binnen het formulier blijven. */
    .vvb-sheet,
    aside.b210-go__right {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, .25);
        transform: translateY(100%);
        transition: transform .2s ease;
        visibility: hidden;
    }

    body.vvb-sheet-open .vvb-sheet,
    body.vvb-sheet-open aside.b210-go__right {
        transform: translateY(0);
        visibility: visible;
    }

    body.vvb-sheet-open .vvb-pill {
        display: none;
    }

    .vvb-sheet__kop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid var(--vvb-rand);
    }

    .vvb-sheet__kop h2 {
        margin: 0;
        font-size: 20px;
    }

    .vvb-sheet__sluiten {
        width: 44px;
        height: 44px;
        border: 0;
        background: none;
        font-size: 20px;
        cursor: pointer;
        color: #000;
    }

    .vvb-sheet__inhoud {
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 8px 16px;
    }

    .vvb-sheet__voet {
        flex: 0 0 auto;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--vvb-rand);
    }

    /* Het thema laat alinea's zweven; hier moet de totaalregel gewoon
       boven de knop staan. */
    .vvb-sheet__voet .total {
        float: none;
        display: block;
        width: 100%;
        margin: 0 0 10px;
        font-weight: 600;
    }

    .vvb-sheet__afrekenen {
        display: block;
        min-height: 48px;
        line-height: 48px;
        border-radius: var(--vvb-radius);
        background: var(--vvb-groen);
        color: #fff;
        text-align: center;
        text-decoration: none;
        font-weight: 600;
    }

    /* De kassabon krijgt dezelfde opbouw als de winkelwagensheet: een kop,
       een meeschuivend middenstuk en een vaste voet.
       Het thema stuurt deze elementen aan met heel lange selectors
       (.row.producten_row.groepsbestelling ...). Die wegen zwaarder dan
       alles wat hier redelijkerwijs te schrijven valt, dus staat er
       !important op de eigenschappen die daarmee botsen. */
    aside.b210-go__right {
        top: auto;
        height: auto;
        border: 0;
        border-radius: 16px 16px 0 0;
        padding: 0 !important;
        background: #fff !important;
        overflow: hidden;
    }

    /* De sluitknop wordt door de javascript vooraan het blok gezet; hij
       hoort rechtsboven in de kop te staan. */
    aside.b210-go__right .vvb-sheet__sluiten {
        display: block;
        position: absolute;
        top: 6px;
        right: 8px;
        z-index: 2;
    }

    aside.b210-go__right > h3 {
        flex: 0 0 auto;
        margin: 0 !important;
        padding: 14px 56px 14px 16px !important;
        background: #fff !important;
        border-bottom: 1px solid var(--vvb-rand);
        font-size: 20px !important;
        text-align: left !important;
    }

    aside.b210-go__right #b210-receipt {
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        margin: 0 !important;
        padding: 8px 16px;
    }

    aside.b210-go__right .b210-go__total {
        flex: 0 0 auto;
        margin: 0 !important;
        padding: 14px 16px 0;
        border-top: 1px solid var(--vvb-rand);
    }

    aside.b210-go__right .b210-go__btn {
        flex: 0 0 auto;
        /* Het thema zet hier een vaste breedte; daardoor stak de knop
           met zijn marge buiten de sheet. */
        width: auto !important;
        margin: 10px 16px calc(14px + env(safe-area-inset-bottom)) !important;
        min-height: 48px;
        border: 0;
        border-radius: var(--vvb-radius) !important;
        background: var(--vvb-groen) !important;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
    }

    /* Donkere laag achter de sheet. */
    body.vvb-sheet-open::after {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 99;
        background: rgba(0, 0, 0, .4);
    }
}