/* ------------------------------------------------------------------------------------------------
   De kassa op een handheld.

   Gevraagd door Martijn, 08-09-2026, na het testen op een Sunmi L3.

   Wat een handheld is, technisch gezien: de app opent gewoon /WebshopOrder/NewOrder in een
   webweergave -- zie DeviceNavigationService in de app-bron, waar handheld en kassa dezelfde weg
   nemen. Het is dus hetzelfde kassascherm als op een grote kassa, alleen op een scherm van 360 bij
   800 in plaats van 1900 bij 1000. Het scherm van de L3 is 720 bij 1600 met puntdichtheid 320.

   Alles hieronder staat in een medialaag die pas aangaat onder de 600. Op een gewone kassa verandert
   er dus niets; dit bestand hoeft alleen maar toegevoegd te worden.

   Gemeten voor deze ronde, op 360 breed:
     - de pagina was 403 breed en schoof zijwaarts;
     - de kolom met producten was 382 breed en liep dus buiten beeld;
     - een producttegel was 63 bij 250, met een foto van 178 hoog. Vandaar de witte vlakken;
     - de bon stond op 784 van boven, ver onder de rand van het scherm.
   ------------------------------------------------------------------------------------------------ */

/* Logo bovenaan het categoriepaneel: alleen op de handheld (Martijn 30-10-2026). */
.categorie-paneel-logo { display: none; }

@media (max-width: 600px) {

    /* --- de kop en de tabbladen passen niet meer (KA7, 14-09-2026) ----------------------------- */

    /* Gemeld door Martijn: "wij hebben een keukenprinter toegevoegd waardoor er een extra knop in de
       header is bijgekomen (bestellingen) en binnen orderbeheer ook nog 2 extra tabjes. Nu is de
       responsiveness niet meer correct in deze tabjes en de header."

       Gemeten op 390 breed, met drie knoppen in de kop: de laatste liep 41 px buiten beeld. Met de
       extra knop erbij is dat erger. En de drie tabbladen van orderbeheer persten zich in de breedte
       tot "Zoek bestelling" over twee regels brak, terwijl de andere twee op een regel stonden.

       Zijwaarts schuiven in plaats van persen. Dat is wat een telefoon doet met een rij die niet
       past, en het is het enige dat elke knop bereikbaar houdt -- wat je ook toevoegt. */

    /* Waarom het überhaupt buiten beeld liep. De balk is een flexrij met links het klantlogo en
       rechts het menuknopje; het middenstuk mag zichzelf breed maken en kromp niet mee. Gemeten op
       390 breed: het middenstuk begon op 77 en liep door tot 431 -- 41 px voorbij de rand. Een
       flexvak krimpt van zichzelf niet onder zijn inhoud, en dus schoof de laatste knop er gewoon
       uit. Het middenstuk moet dus wél krimpen, en wat er dan niet meer past schuift binnen de rij
       zelf. */
    .header .header-center {
        flex: 1 1 auto;
        min-width: 0;
    }

    .header .header-center .top-menu {
        min-width: 0;
        max-width: 100%;
    }

    .header .top-menu > ul {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;

        /* Niet blijven hangen tussen twee knoppen in. */
        scroll-snap-type: x proximity;

        /* Een schuifbalk kost hier hoogte en de kop is al krap; vegen werkt gewoon. */
        scrollbar-width: none;
    }

    .header .top-menu > ul::-webkit-scrollbar {
        display: none;
    }

    .header .top-menu > ul > li {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    /* En een tikje krapper, zodat de drie knoppen die er nu staan ook zónder vegen allemaal in beeld
       staan: 331 px aan knoppen in een vak van 307. De ruimte zit in de lucht naast de opschriften,
       niet in de opschriften zelf -- die blijven leesbaar en de knop blijft even hoog. Komt er een
       vierde knop bij, dan schuift het; dat is de vangnetregel hierboven. */
    .header .header-center .top-menu ul {
        gap: 2px !important;
    }

    .header .header-center .top-menu li a {
        padding: 4px 4px !important;
        gap: 3px !important;
    }

    /* Hetzelfde voor de tabbladen. Bootstrap laat ze anders afbreken, en dan staat het ene woord
       onder het andere en lijkt het scherm stuk. */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs .nav-item {
        flex: 0 0 auto;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
    }

    /* De bestellijst zelf is breder dan het scherm -- gemeten 1148 px -- maar die stond al in een
       eigen schuifvak (.table-responsive) en trekt de pagina dus niet scheef. Nagemeten en zo
       gelaten: een tabel van een handheld een kaartenlijst maken is een ander gesprek, en niet wat
       er is gevraagd. */

    /* --- niets schuift zijwaarts -------------------------------------------------------------- */

    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .container.body,
    .main_container,
    #rightCol.right_col,
    .modal-xpanel-reservation,
    .container-fluid.px-0,
    .row.orderpage-height,
    .row.orderpage-height > .col-md-12 {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* De drie kolommen van het kassascherm -- categorieen, producten, bon -- staan op een breed
       scherm naast elkaar. Hier onder elkaar, elk over de volle breedte. */
    .products-container,
    .row.orderpage-height > .col-md-12 > .col-md-4,
    .row.orderpage-height > .col-md-12 > .col-md-7 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* --- de producten: drie op een rij, en verder niets dan wat nodig is ------------------------
     *
     * Op een breed scherm kiest een stukje javascript het aantal kolommen naar het aantal producten
     * in de categorie: drie, vier of vijf. Op een handheld past er maar een ding, en dat is drie.
     * Vandaar dat alle drie de klassen hier hetzelfde doen. */
    .product-grid,
    .product-grid.kolommen-3,
    .product-grid.kolommen-4,
    .product-grid.kolommen-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        padding: 6px !important;
    }

    /* De foto was 178 hoog bij een tegel van nog geen 110 breed. Dat is bijna vierkant kwijt aan
       beeld, en daaronder bleef ruimte over waar niets stond. Nu een strook die past bij de
       breedte van de tegel. */
    .product-item .card__image {
        height: 68px !important;
    }

    .product-grid.jm-knopschaal .product-item .card__image {
        height: calc(68px * var(--jm-knop-schaal, 1)) !important;
    }

    .product-item .card_item {
        border-radius: 10px;
    }

    /* De naam mag twee regels; daarna afbreken. Zonder deze regels rekte de tegel mee met de langste
       naam en stonden er witte vlakken onder de korte namen. */
    .product-item .card__footer {
        padding: 4px 6px !important;
        min-height: 0 !important;
        height: auto !important;
        gap: 2px;
    }

    /* De naam mag hoogstens twee regels. "Broodje Gerookte Zalm" liep over drie regels en dat maakt
       de rij eronder scheef. Gevraagd door Martijn, 08-09-2026: "3 rijen met productnaam is
       verboden, dus maak de tekst passend voor maximaal 2 rijen."
       Kleinere letter zodat de meeste namen in twee regels passen, en een harde grens erachter voor
       de namen die dat alsnog niet doen. */
    .product-item .card__title,
    .product-item .card__title.item-title,
    .product-item p.card__title {
        font-size: 10px !important;

        /* Gewone tekst, niet vet. De naam stond dik gedrukt, en op een scherm vol tegels schreeuwt
           dan alles even hard. Het prijskaartje mag opvallen, de naam hoort gewoon leesbaar te
           zijn. Gevraagd door Martijn, 09-09-2026, meekijkend op de Sunmi L3. */
        font-weight: 400 !important;
        line-height: 1.15 !important;
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        max-height: 24px !important;
    }

    /* Een rij tegels is zo hoog als de hoogste tegel, en die hoogte kreeg elke tegel in die rij.
       Onder een korte naam bleef daardoor een wit vlak staan. Nu is elke tegel zo hoog als hij
       zelf nodig heeft. Gemeld door Martijn, 08-09-2026. */
    .product-grid {
        align-items: start !important;
    }

    /* Het prijskaartje op de foto. Dat was 59 bij 22 op een tegel van 104 breed: meer dan de helft
       van de tegel. Gevraagd door Martijn, 08-09-2026: "Maak het prijslabel ook een stuk kleiner." */
    .product-item .card__price,
    .product-item span.card__price {
        font-size: 9px !important;
        padding: 1px 5px !important;
        line-height: 1.3 !important;
        min-width: 0 !important;
    }

        .product-item .card__price .currencySymbol,
        .product-item .card__price .productPrice {
            font-size: 9px !important;
        }

    /* De zoekbalk gaat weg op een handheld.
     *
     * Gevraagd door Martijn, 08-09-2026. Hij was 362 breed op een scherm van 360 en stak er dus
     * net buiten, maar de reden om hem weg te halen is een andere: op een handheld typ je niet,
     * je tikt. Elke rij die je niet nodig hebt is een rij producten meer.
     *
     * Hij wordt niet met display weggehaald maar buiten beeld gezet. Een veld dat er niet is kan
     * geen letters ontvangen, en de streepjescodelezer van de handheld tikt zijn code juist in dat
     * veld. Zo blijft scannen werken terwijl er niets meer in beeld staat. */
    .product-filter-wrapper {
        position: absolute !important;
        left: -10000px !important;
        top: 0 !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
    }

    /* --- de balk bovenaan ---------------------------------------------------------------------- */

    /* Die was 66 hoog op een scherm van 800. Op een handheld is elke rij die je niet nodig hebt een
       rij producten minder. */
    #topbar-menu.header {
        min-height: 0 !important;
        padding: 2px 6px !important;
    }

    .header-left img.klantlogo {
        max-height: 24px !important;
        height: 24px !important;
        width: auto !important;
    }

    /* Het Jimani-logo gaat weg op een handheld. Gevraagd door Martijn, 08-09-2026: op dit schermpje
       is de ruimte voor de knoppen die je nodig hebt -- Kassa en Zoek bestelling -- en niet voor een
       merknaam die er de hele dag bij staat. */
    .header-right .logo,
    .header-right .logoJimani {
        display: none !important;
    }

    /* En die twee knoppen blijven staan, met hun opschrift erbij zodat je ziet waar je op drukt. */
    .header-center,
    .header-center .top-menu,
    .header-center .top-menu ul {
        display: flex !important;
        align-items: center;
        gap: 4px;
        flex-wrap: nowrap;
    }

        .header-center .top-menu li {
            font-size: 12px !important;
        }

            .header-center .top-menu li a {
                padding: 4px 8px !important;
            }

            .header-center .top-menu li .menu-icons {
                width: 20px !important;
                height: 20px !important;
            }

    /* --- de categorienaam is de knop naar de categorieën ----------------------------------------
     *
     * Gevraagd door Martijn, 08-09-2026: "laat de categorienaam staan (met icoon) wanneer je dan
     * daarop klikt, dan opent de categoriepagina. Dat is veel logischer dan een aparte knop."
     *
     * Op een grote kassa staat de lijst met categorieën links vast in beeld; hier is daar geen plek
     * voor. De lijst schuift over het scherm en gaat weer dicht zodra je kiest. Het openen en
     * sluiten doet js/jimani-handheld.js. */

    .products-container .title_left {
        padding: 2px 8px !important;
        cursor: pointer;
    }

        .products-container .title_left h1,
        .products-container .title_left h2,
        .products-container .title_left h3 {
            font-size: 16px !important;
            margin: 0 !important;
        }

        /* Een pijltje erachter, zodat te zien is dat je erop kunt drukken. Alleen achter het blok met de categorienaam
           (#WebshopTitle): verhuist dat blok naar de retailkop (jimani-handheld.js), dan werd het zoekblok de eerste en stond
           er een los pijltje linksboven boven de tegels (Martijn 06-11-2026, iPhone). */
        .products-container .title_left .product-title-toolbar > .d-flex:first-child:has(#WebshopTitle)::after {
            content: "\25BE";
            margin-left: 6px;
            font-size: 14px;
            color: #6c757d;
        }

        /* Naam en pijltje op een regel: met een lange categorienaam en het icoon brak het pijltje af naar de regel eronder
           (los pijltje boven de eerste tegel). De naam wordt nu ingekort. (Martijn 06-11-2026) */
        .products-container .title_left .product-title-toolbar > .d-flex:has(> #WebshopTitle) {
            flex-wrap: nowrap !important;
            min-width: 0;
            max-width: 100%;
        }

            .products-container .title_left .product-title-toolbar > .d-flex > #WebshopTitle {
                min-width: 0;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .products-container .title_left #WebshopTitle .kassakop {
                display: flex;
                min-width: 0;
                max-width: 100%;
            }

            .products-container .title_left #WebshopTitle .kassakop > :not(img) {
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

    /* Onder de 991 stond de lijst op display:none -- er was toch geen plek voor. Nu is er wel een
       plek: hij schuift over het scherm. */
    #categorySideMenu.category-side-menu {
        display: flex !important;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 78vw !important;
        max-width: 280px !important;
        padding: 8px !important;
        transform: translateX(-100%);
        transition: transform .2s ease;
        z-index: 2000 !important;
        overflow-y: auto !important;
        align-items: stretch !important;
    }

        #categorySideMenu.category-side-menu.categorieen-open {
            transform: translateX(0);
            box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.35);
        }

        /* Logo van de klant bovenaan het paneel, gecentreerd (Martijn 30-10-2026). */
        #categorySideMenu .categorie-paneel-logo {
            display: flex !important;
            justify-content: center;
            align-items: center;
            padding: 14px 8px 12px;
            flex: 0 0 auto;
        }

        #categorySideMenu .categorie-paneel-logo img {
            max-height: 72px;
            max-width: 80%;
            width: auto;
            height: auto;
            object-fit: contain;
        }

        #categorySideMenu .categorie-paneel-naam {
            font-size: 18px;
            font-weight: 600;
            text-align: center;
        }

        /* Het inklappijltje van de grote kassa heeft hier geen taak meer. */
        #categorySideMenu .category-toggle {
            display: none !important;
        }

        #categorySideMenu .category-item {
            width: 100% !important;
            justify-content: flex-start !important;
            padding: 8px 6px !important;
        }

        #categorySideMenu .category-label {
            display: block !important;
            opacity: 1 !important;
            font-size: 14px !important;
            white-space: normal !important;
        }

    /* --- zo min mogelijk witruimte tussen balk, categorienaam en producten ----------------------
     *
     * Gevraagd door Martijn, 08-09-2026: "haal de spacing weg (houd dit minimaal) tussen header,
     * categorie en producten, teveel witruimte". Elke rij die je terugwint is een rij producten. */

    #rightCol.right_col {
        padding-top: 0 !important;
    }

    .modal-xpanel-reservation {
        margin: 0 !important;
        padding: 0 !important;
    }

    .row.orderpage-height > .col-md-12 {
        padding: 0 !important;
    }

    .products-container .row {
        margin: 0 !important;
    }

    #productsContainer {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* ------------------------------------------------------------------------------------------------
   De bon op een handheld: een lade die van onderen omhoog komt.

   Gemeten voor deze ronde: de bon stond op 748 van boven op een scherm van 800, en de betaalknoppen
   op 1359. Je kon er alleen bij door binnen het middenblok naar beneden te schuiven, langs alle
   producten heen. Op een grote kassa staat de bon rechts vast in beeld; die plek is er hier niet.

   Nu staat er onderaan een balk met het totaal. Tik erop en de bon schuift omhoog over de producten,
   met de betaalknoppen erin. Tik op sluiten en hij gaat weer naar beneden. Het openen en sluiten
   doet js/jimani-handheld.js.
   ------------------------------------------------------------------------------------------------ */

@media (max-width: 600px) {

    .row.orderpage-height > .col-md-12 > .col-md-4 {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        /* De volle hoogte van het scherm. Gevraagd door Martijn, 09-09-2026 (AC5): "Wanneer je een
           tafel opent op de blauwe regel, maak dan de popup de volledige hoogte van het scherm."
           Op 82 procent bleef er een strook producten boven de lade staan, en dan lees je een bon
           met de kaart er half doorheen.

           Twee regels: dvh is de hoogte die je echt ziet -- op Android krimpt en groeit die met de
           adresbalk mee -- en vh eronder voor het geval dvh niet wordt begrepen. */
        height: 100vh !important;
        height: 100dvh !important;
        background: #fff;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        box-shadow: 0 -6px 24px rgba(16, 24, 40, 0.18);
        transform: translateY(100%);
        transition: transform .22s ease;
        z-index: 1500 !important;
        overflow-y: auto !important;
        padding: 8px !important;
    }

    body.bon-open .row.orderpage-height > .col-md-12 > .col-md-4 {
        transform: translateY(0);
    }

    /* Meldingen altijd boven de bonlade (1500), de betaalknoppen (1600) en vensters (2200). Het wachtvenster van Tap to Pay stond
       erachter: je zag pas iets na het sluiten van de bestelling. (T3, Martijn 30-09-2026) */
    .swal2-container {
        z-index: 2300 !important;
    }

    /* De balk onderaan met het totaal. Hij staat er altijd, ook als de bon dicht is, zodat je in één
       oogopslag ziet wat er op de bon staat. */
    .handheld-bonbalk {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1400;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 12px;
        background: #0d6efd;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        box-shadow: 0 -2px 10px rgba(16, 24, 40, 0.18);
    }

        .handheld-bonbalk .handheld-bonbalk-aantal {
            font-weight: 500;
            opacity: 0.9;
        }

        .handheld-bonbalk .handheld-bonbalk-totaal {
            font-size: 16px;
        }

    /* Ruimte onder de producten, zodat de balk de laatste rij niet bedekt. */
    .row.orderpage-height > .col-md-12 > .col-md-7 {
        padding-bottom: 52px !important;
    }

    /* Sluitknop in de lade zelf. */
    /* Het kruisje om de bon weer weg te doen.
     *
     * Hier stond een grijs streepje bovenaan de lade, zoals een lade die je omlaag veegt. Op het
     * toestel las niemand dat als "hier ga je uit". Martijn, 09-09-2026: een kruisje, met vierkant
     * en rand, aan de rechterkant bij de kop Bestellingen.
     *
     * De maat is die van de andere knoppen in het systeem: 40 bij 40 met hoek 8. Het kruis is
     * getekend met twee streepjes en niet met een plaatje: een plaatje is een blauw vierkantje met
     * een wit kruis erin, en dat wordt onzichtbaar op een witte knop. Zelfde aanpak als de
     * terugknop in css/jimani-knoppen.css. */
    .handheld-bonkop {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .handheld-bon-sluiten {
        position: relative;
        flex: 0 0 auto;
        margin-left: auto;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid #d7dce5;
        border-radius: 8px;
        background: #fff;
    }

    .handheld-bon-sluiten::before,
    .handheld-bon-sluiten::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 16px;
        height: 2px;
        margin: -1px 0 0 -8px;
        background: #2b2f38;
        border-radius: 1px;
    }

    .handheld-bon-sluiten::before {
        transform: rotate(45deg);
    }

    .handheld-bon-sluiten::after {
        transform: rotate(-45deg);
    }



    body.bon-open .handheld-bonbalk {
        display: none;
    }
}

@media (max-width: 600px) {

    /* De betaalknoppen blijven onderin de lade staan.
     *
     * Gemeten 08-09-2026: met twee regels op de bon stonden Contant en Pin op 878, terwijl de lade
     * tot 800 loopt. Je moest dus eerst binnen de lade naar beneden schuiven om te kunnen afrekenen.
     * Nu plakken ze onderaan, hoe lang de bon ook is. */
    body.bon-open #webshopPayRow.webshop-pay-row {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1600;
        background: #fff;
        padding: 6px 8px !important;
        margin: 0 !important;
        box-shadow: 0 -4px 14px rgba(16, 24, 40, 0.12);
    }

    /* Ruimte onderin de lade, zodat de laatste bonregel niet achter die knoppen verdwijnt. */
    body.bon-open .row.orderpage-height > .col-md-12 > .col-md-4 {
        padding-bottom: 84px !important;
    }

    /* Niets in de lade steekt buiten het scherm. Gemeten: enkele blokken liepen door tot 369. */
    .row.orderpage-height > .col-md-12 > .col-md-4 .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .row.orderpage-height > .col-md-12 > .col-md-4 [class*="col-"] {
        max-width: 100%;
    }

    /* De drie knoppen onder de bon -- opmerkingen, Diversen, Overig -- op één regel.
     *
     * Gemeld door Martijn, 08-09-2026: "Ik mis de overige knop in de rij met 2 knoppen, maak hier
     * dus 3 van (maak dit passend op 1 regel)." Er stonden er twee op de eerste regel en viel de
     * derde eronder, waardoor het leek alsof hij ontbrak. */
    .kassa-knoppenrij,
    .bon-knoppenrij {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }

        .kassa-knoppenrij > *,
        .bon-knoppenrij > * {
            flex: 1 1 0 !important;
            min-width: 0 !important;
            font-size: 11px !important;
            padding: 6px 4px !important;
            white-space: nowrap;
        }
}

@media (max-width: 600px) {

    /* Twee smalle kolommen in de betaalrij liepen door tot 369 op een scherm van 360. */
    .row.orderpage-height > .col-md-12 > .col-md-4 .col-md-1 {
        padding-left: 2px !important;
        padding-right: 2px !important;
        max-width: 100% !important;
    }
}

/* ------------------------------------------------------------------------------------------------
   Vensters boven de lade.

   De bon schuift als lade over het scherm en staat daarmee hoog in de stapel. Een venster dat
   daarna opengaat -- de betaalpopup bijvoorbeeld -- kwam eronder terecht: je zag de kop nog net
   boven de bon uitsteken en verder niets. Dat is precies wat Martijn zag toen hij zei dat betalen
   op een handheld niet werkt. Gemeten 08-09-2026.

   Twee dingen: elk venster komt boven de lade, en de lade gaat vanzelf dicht zodra er een venster
   opengaat (dat laatste doet js/jimani-handheld.js).
   ------------------------------------------------------------------------------------------------ */

@media (max-width: 600px) {

    .modal {
        z-index: 2200 !important;
    }

    .modal-backdrop {
        z-index: 2100 !important;
    }

    /* De betaalpopup zelf: kop op één regel en niets buiten beeld.
     *
     * Gemeld door Martijn, 08-09-2026: "Betaal popup klopt ook niet, valt ook buiten beeld en is
     * gewoon veel te groot qua tekst. De header test moet veel kleiner (moet op 1 regel), de 4
     * knoppen moeten kleiner en passend."
     *
     * Gemeten: de inhoud liep door tot 395 breed en 885 hoog op een scherm van 360 bij 800. */
    /* Drie procent lucht links en rechts, zodat je ziet dat het een venster is en niet het scherm
     * zelf. Het liep van rand tot rand en dan is er geen verschil meer tussen wat eronder ligt en
     * wat erop staat. Gevraagd door Martijn, 10-09-2026, meekijkend op de Sunmi L3. */
    #webshopPaymentModal .modal-dialog,
    #choosePaymentModal .modal-dialog {
        margin: 2vh 3% !important;
        max-width: 94% !important;
        width: 94% !important;
        height: 96vh !important;
    }

    #webshopPaymentModal .modal-content,
    #choosePaymentModal .modal-content {
        height: 100% !important;
        border-radius: 16px !important;
        overflow-y: auto !important;
    }

    #webshopPaymentModal .modal-title,
    #choosePaymentModal .modal-title,
    #webshopPaymentModal .wp-title,
    #webshopPaymentModal h4,
    #webshopPaymentModal h5 {
        font-size: 16px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin: 0 !important;
    }

    /* De twee kolommen van de betaalpopup -- de bon links, het te betalen bedrag rechts -- passen
       niet naast elkaar op 360. Onder elkaar dus. */
    #webshopPaymentModal .wp-body,
    #webshopPaymentModal .wp-right {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 6px !important;
    }

    #webshopPaymentModal .wp-body {
        flex-wrap: wrap !important;
    }

    /* De vier knoppen onderin passend op één regel. */
    #webshopPaymentModal .wp-quick-amounts {
        gap: 4px !important;
        margin: 0 0 8px 0 !important;
    }

        #webshopPaymentModal .wp-quick-amount-btn {
            flex: 1 1 0 !important;
            min-width: 0 !important;
            padding: 6px 4px !important;
            font-size: 12px !important;
            white-space: nowrap;
        }

    #webshopPaymentModal .webshop-payment-table {
        font-size: 12px !important;
        width: 100% !important;
    }

    #webshopPaymentModal table,
    #webshopPaymentModal tbody,
    #webshopPaymentModal tr,
    #webshopPaymentModal td {
        max-width: 100% !important;
    }
}

@media (max-width: 600px) {

    /* De voet van de betaalpopup: terugknop links, bevestigen rechts. Op 360 pasten die niet naast
       elkaar en liep de rij door tot 389. Nu twee helften die samen precies het scherm vullen, en
       hij blijft onderin staan zodat bevestigen altijd bereikbaar is. */
    #webshopPaymentModal .wp-footer {
        position: sticky !important;
        bottom: 0;
        z-index: 2;
        background: #fff;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 6px !important;
        margin: 0 !important;
        box-shadow: 0 -4px 12px rgba(16, 24, 40, 0.10);
    }

        #webshopPaymentModal .wp-footer-left,
        #webshopPaymentModal .wp-footer-right {
            flex: 1 1 0 !important;
            min-width: 0 !important;
            gap: 6px !important;
        }

        #webshopPaymentModal .wp-footer button {
            flex: 1 1 0 !important;
            min-width: 0 !important;
            font-size: 12px !important;
            padding: 8px 6px !important;
            white-space: nowrap;
        }

            #webshopPaymentModal .wp-footer button .system-icons {
                width: 16px !important;
                height: 16px !important;
            }

    /* Contant en Terug te geven staan naast elkaar; op 360 net te breed. */
    #webshopPaymentModal .wp-contant-rij {
        gap: 6px !important;
        width: 100% !important;
    }

        #webshopPaymentModal .wp-contant-helft {
            flex: 1 1 0 !important;
            min-width: 0 !important;
        }

            #webshopPaymentModal .wp-contant-helft input {
                width: 100% !important;
                min-width: 0 !important;
            }
}

@media (max-width: 600px) {

    /* De rekening in de betaalpopup: elke regel op één regel.
     *
     * Gemeld door Martijn, 08-09-2026: "De rekening wanneer je op contant of pin klikt moet gewoon
     * veel kleiner, deze is nu lomp en lang." Elke bonregel besloeg twee regels omdat de naam
     * afbrak; met acht producten paste de rekening niet meer op het scherm. */
    #webshopPaymentModal .webshop-payment-table td {
        padding: 2px 4px !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        vertical-align: middle;
    }

    /* de naam krimpt, de bedragen niet
     *
     * Eerst kreeg de naamkolom alle ruimte en vielen de bedragen buiten de tabel. Nu heeft de
     * naam hoogstens de helft en breekt hij af met puntjes; wat er rechts staat blijft heel. */
    #webshopPaymentModal .webshop-payment-table {
        table-layout: fixed;
    }

    #webshopPaymentModal .webshop-payment-table .webshop-line-text {
        max-width: 50%;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #webshopPaymentModal .webshop-payment-table .webshop-currency-cell,
    #webshopPaymentModal .webshop-payment-table .webshop-value-cell {
        white-space: nowrap !important;
        width: 1%;
    }

    /* De voet ligt over de inhoud heen; daarom ruimte eronder in het venster zelf. */
    #webshopPaymentModal .modal-content {
        padding-bottom: 96px !important;
    }

    /* De balk met het totaal hoort niet over een venster heen te staan. */
    body.modal-open .handheld-bonbalk {
        display: none !important;
    }
}

@media (max-width: 600px) {

    /* De bedragkolommen een vaste maat.
     *
     * Met table-layout: fixed verdeelt de browser de breedte over de kolommen, en een kolom van 1%
     * wordt dan ook echt 1% -- de bedragen vielen weg. Nu staat er hoeveel ruimte ze krijgen. */
    #webshopPaymentModal .webshop-payment-table .webshop-currency-cell {
        width: 22px !important;
        white-space: nowrap !important;
    }

    #webshopPaymentModal .webshop-payment-table .webshop-value-cell {
        width: 70px !important;
        white-space: nowrap !important;
    }

    /* De voet onderaan het scherm in plaats van onderaan zijn eigen blok. Sticky hing hem halverwege
       op, want zijn blok is korter dan het venster. */
    #webshopPaymentModal .wp-footer {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2210;
    }
}

/* ------------------------------------------------------------------------------------------------
   De bonregels op een handheld.

   Gemeld door Martijn, 08-09-2026:
     "Wanneer je de bestelgeschiedenis opent moet dit veel kleiner, haal de afbeelding weg en zet
      elke regel op 1 regel (in plaats van 2)"
     "Tussen elke regel hoort een streep, maar dit is nu niet kloppend."

   Gemeten: een bonregel was 115 hoog. Dat komt door twee dingen: het rijtje met naam, aantal en
   prijs is 36 hoog, en daaronder staat de knop Korting op een eigen regel van 38. Met de marges
   erbij pasten er nog geen zeven regels op het scherm.

   Nu: geen afbeelding, alles op een regel, en de knop Korting als klein knopje achteraan diezelfde
   regel. Tussen de regels een streep die overal even zwaar is.
   ------------------------------------------------------------------------------------------------ */

@media (max-width: 600px) {

    .receipt-item {
        padding: 4px 2px !important;
        margin: 0 !important;
        border-top: 0 !important;
        border-bottom: 1px solid #e4e7ec !important;
        border-radius: 0 !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        row-gap: 0 !important;
    }

        .receipt-item:last-child {
            border-bottom: 0 !important;
        }

        /* De afbeelding hoort niet op een handheld: hij is er toch te klein voor om iets te zeggen,
           en hij kost breedte die de naam beter kan gebruiken. */
        .receipt-item .card__image_cart,
        .receipt-item img {
            display: none !important;
        }

        .receipt-item > .col-md-12 {
            padding: 0 !important;
            min-height: 0 !important;
        }

        .receipt-item p,
        .receipt-item .fs-15 {
            font-size: 12px !important;
            line-height: 1.2 !important;
            margin: 0 !important;
        }

        /* De knop Korting stond op een eigen regel en maakte elke bonregel twee keer zo hoog. */
        .receipt-item .webshop-item-discount-list {
            width: auto !important;
            margin: 0 0 0 auto !important;
            padding: 0 !important;
        }

            .receipt-item .webshop-item-discount-btn {
                font-size: 10px !important;
                padding: 2px 8px !important;
                margin: 0 !important;
                line-height: 1.3 !important;
            }

        .receipt-item .product-quantity .btn {
            width: 26px !important;
            height: 26px !important;
            padding: 0 !important;
        }

        .receipt-item .receipt-item-quantity {
            width: 34px !important;
            height: 26px !important;
            padding: 0 !important;
            font-size: 12px !important;
        }

        .receipt-item .formatted-price-currency,
        .receipt-item .diverse-item-price-currency,
        .receipt-item .diverse-item-price-value,
        .receipt-item .formatted-price-value {
            font-size: 12px !important;
        }

        /* Groter tikvlak voor een vinger (28-09-2026, 't Plein): was 24 px. */
        .receipt-item .delete-item {
            width: 40px !important;
            height: 40px !important;
            min-width: 40px;
            min-height: 40px;
        }

        .receipt-item .delete-item i {
            font-size: 18px;
        }
}

@media (max-width: 600px) {

    /* Het rijtje met naam, aantal en prijs nam de volle breedte, waardoor de knop Korting eronder
       viel. Nu neemt het alleen de ruimte die het nodig heeft en past alles op een regel. */
    .receipt-item > .col-md-12 {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: calc(100% - 76px) !important;
    }

    .receipt-item > .col-md-12 > .col-md-2:first-child {
        display: none !important;
    }

    .receipt-item > .col-md-12 > .col-md-3 {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }
}

@media (max-width: 600px) {

    /* de naam eerst, de rest zo smal mogelijk
     *
     * Na het samenvouwen tot een regel was de naam van het product weg: de knoppen voor het
     * aantal, de prijs, het prullenbakje en de knop Korting namen samen de hele breedte. Nu
     * krijgen die alle vier een vaste, krappe maat en houdt de naam wat overblijft -- met
     * puntjes als hij niet past. */
    .receipt-item > .col-md-12 > .col-md-3 {
        flex: 1 1 0 !important;
        min-width: 60px !important;
        max-width: none !important;
        overflow: hidden;
    }

        .receipt-item > .col-md-12 > .col-md-3 p {
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }

    .receipt-item > .col-md-12 > .col-md-4.product-quantity {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
    }

    .receipt-item .product-quantity .btn {
        width: 24px !important;
        height: 24px !important;
    }

    .receipt-item .receipt-item-quantity {
        width: 28px !important;
        height: 24px !important;
        margin: 0 2px !important;
    }

    .receipt-item > .col-md-12 > .col-md-2 {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        gap: 2px;
    }

    .receipt-item > .col-md-12 > .col-md-1 {
        flex: 0 0 auto !important;
        width: auto !important;
        padding: 0 2px !important;
    }

    .receipt-item > .col-md-12 {
        max-width: calc(100% - 66px) !important;
        gap: 2px;
    }
}

@media (max-width: 600px) {

    /* De onderdelen van een bonregel botsten op elkaar: de knop Korting kwam over de prijs en het
       prullenbakje heen. Alles op een regel houden lukt alleen als elk onderdeel weet hoe smal het
       mag worden. Daarom hier per onderdeel een maat, en het euroteken eruit -- dat staat al bij het
       totaal onderaan en kost hier alleen breedte. */
    .receipt-item > .col-md-12 {
        flex-wrap: nowrap !important;
        overflow: hidden !important;
        max-width: calc(100% - 52px) !important;
    }

    .receipt-item .formatted-price-currency,
    .receipt-item .currencySymbol {
        display: none !important;
    }

    .receipt-item .formatted-price-value {
        min-width: 42px !important;
        text-align: right !important;
    }

    .receipt-item .webshop-item-discount-btn {
        font-size: 9px !important;
        padding: 2px 5px !important;
        max-width: 48px !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .receipt-item > .col-md-12 > .col-md-3 {
        min-width: 74px !important;
    }
}

/* ------------------------------------------------------------------------------------------------
   De bonregel als raster.

   Met alleen maar duwen en trekken aan de kolommen van het oude raamwerk bleef er telkens iets
   botsen: eerst viel de naam weg, daarna de prijs. Daarom hier één keer opschrijven hoe een
   bonregel op een handheld is opgebouwd:

       [ naam ................ ] [ - 1 + ] [ prijs ] [ x ] [ Korting ]

   De naam krijgt wat overblijft en breekt af met puntjes; de rest heeft een vaste maat. Alles staat
   op één regel, met een streep eronder. (08-09-2026)
   ------------------------------------------------------------------------------------------------ */

@media (max-width: 600px) {

    .receipt-item {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        align-items: center !important;
        column-gap: 4px !important;
        overflow: visible !important;
    }

        .receipt-item > .col-md-12 {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) auto auto auto !important;
            align-items: center !important;
            column-gap: 4px !important;
            width: auto !important;
            max-width: none !important;
            flex: none !important;
            overflow: visible !important;
        }

            /* De afbeelding staat er niet meer, dus die telt niet mee in het raster. */
            .receipt-item > .col-md-12 > .col-md-2:first-child {
                display: none !important;
            }

            .receipt-item > .col-md-12 > .col-md-3,
            .receipt-item > .col-md-12 > .col-md-4,
            .receipt-item > .col-md-12 > .col-md-2,
            .receipt-item > .col-md-12 > .col-md-1 {
                width: auto !important;
                max-width: none !important;
                flex: none !important;
                min-width: 0 !important;
                padding: 0 !important;
            }

            .receipt-item > .col-md-12 > .col-md-3 {
                overflow: hidden !important;
            }

        .receipt-item > .webshop-item-discount-list {
            grid-column: 2 !important;
            margin: 0 !important;
        }
}

@media (max-width: 600px) {

    /* De knop Korting als klein teken.
     *
     * Het woord "Korting" nam een vijfde van de regel, en dat ging ten koste van de productnaam --
     * die werd afgekapt tot "1 x B...". Op een handheld is een procentteken genoeg: de knop staat
     * op dezelfde plek en doet hetzelfde. (08-09-2026) */
    .receipt-item .webshop-item-discount-btn {
        font-size: 0 !important;
        width: 28px !important;
        max-width: 28px !important;
        padding: 3px 0 !important;
        text-align: center;
    }

        .receipt-item .webshop-item-discount-btn::after {
            content: "%";
            font-size: 13px;
            font-weight: 600;
            line-height: 1;
        }

    /* En de knoppen voor het aantal wat krapper, zodat de naam meer ruimte houdt. */
    .receipt-item .product-quantity .btn {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
    }

    .receipt-item .receipt-item-quantity {
        width: 26px !important;
        height: 22px !important;
    }
}

@media (max-width: 600px) {

    /* De knop had een min-width van 62 en een hoogte van 38 uit de gewone kassa-opmaak; daar kwam
       mijn maat niet doorheen. Nu staat het er expliciet bij. (08-09-2026) */
    .receipt-item .webshop-item-discount-btn {
        min-width: 28px !important;
        height: 26px !important;
    }

    .receipt-item .receipt-item-quantity,
    .receipt-item .product-quantity input {
        min-width: 26px !important;
        width: 26px !important;
    }
}

@media (max-width: 600px) {

    /* Alleen de naam van het product, niet het "1 x" ervoor.
     *
     * Het aantal staat al in het vakje ernaast, dus het stond er twee keer -- en op 85 punten
     * breedte kostte dat vier tekens van de naam: "1 x Bro...". De regel bestaat uit een los stukje
     * tekst met daarachter de naam in vet; met een lettergrootte van nul valt het losse stukje weg
     * en blijft de naam staan. (08-09-2026) */
    .receipt-item > .col-md-12 > .col-md-3 p {
        font-size: 0 !important;
    }

        .receipt-item > .col-md-12 > .col-md-3 p strong,
        .receipt-item > .col-md-12 > .col-md-3 p b,
        .receipt-item > .col-md-12 > .col-md-3 p span {
            font-size: 12px !important;
        }

    /* Nog wat ruimte terugwinnen voor de naam. */
    .receipt-item .formatted-price-value {
        min-width: 38px !important;
    }

    .receipt-item .product-quantity input.form-control {
        width: 26px !important;
        min-width: 26px !important;
        padding: 0 !important;
    }
}

@media (max-width: 600px) {

    /* De drie knoppen onder de bon op één regel.
     *
     * Gemeld door Martijn, 08-09-2026: "Ik mis de overige knop in de rij met 2 knoppen, maak hier
     * dus 3 van (maak dit passend op 1 regel)." Hij ontbrak niet: opmerkingen en Diversen vulden de
     * regel en Overig viel eronder, buiten beeld. */
    .webshop-receipt-action-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        /* Iets lager: de knoppen plakten tegen de bonregels aan. Gevraagd door Martijn,
         * 09-09-2026, meekijkend op de Sunmi L3, en op 10-09-2026 nog een stukje verder omlaag. */
        margin: 30px 0 0 0 !important;
    }

        .webshop-receipt-action-row > [class*="col-"] {
            flex: 1 1 0 !important;
            width: auto !important;
            max-width: none !important;
            padding: 0 !important;

            /* Zonder dit blijft elke kolom minstens zo breed als zijn eigen opschrift, en dan zijn
               de drie knoppen alsnog ongelijk: gemeten 103, 76 en 62 op 09-09-2026. */
            min-width: 0 !important;

            /* Elk dertig procent van de breedte. Even breed waren ze al, maar ze kwamen samen niet
               verder dan de helft van het vak en stonden er klein bij. Gevraagd door Martijn,
               09-09-2026: "ik wil ze dezelfde breedte hebben maar ieder 30% van het scherm." */
            flex: 1 1 30% !important;
            max-width: 30% !important;
        }

        .webshop-receipt-action-row .action-pill-btn {
            width: 100% !important;

            /* Tien in plaats van elf: bij dertig procent breedte werd "opmerkingen" anders afgekapt
               tot "opmerkin...". Gemeten 09-09-2026. */
            font-size: 10px !important;
            padding: 6px 2px !important;
            gap: 4px !important;
            white-space: nowrap;
            overflow: hidden;
        }

            .webshop-receipt-action-row .action-pill-btn i {
                font-size: 12px !important;
            }
}

/* ------------------------------------------------------------------------------------------------
   De vensters Opmerking en Diversen op een handheld.

   Gemeld door Martijn, 08-09-2026: "Ook de diversen popup klopt niet, is uit proportie, velden staan
   niet netjes en toetsenbord problemen."

   Gemeten: de drie velden -- naam, aantal en prijs -- staan naast elkaar in drie kolommen. Op 360
   punten breedte werd het opschrift "Naam van de diverse post" over vier regels gebroken, bleef er
   voor het veld zelf een hokje van twee tekens over, en liep "Prijs (niet verplicht)" met veld en
   al buiten beeld.

   Onder elkaar dus, elk over de volle breedte.
   ------------------------------------------------------------------------------------------------ */

@media (max-width: 600px) {

    .diverse-product-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

        .diverse-product-grid > div {
            width: 100% !important;
            min-width: 0 !important;
        }

    .diverse-field-label {
        display: block !important;
        text-align: left !important;
        font-size: 12px !important;
        margin-bottom: 2px !important;
        white-space: normal !important;
    }

    .diverse-input,
    .diverse-price-input,
    .diverse-comment-textarea,
    #WebshoOrdersCommentsModal textarea,
    #WebshoOrdersDiverseModal input[type="text"],
    #WebshoOrdersDiverseModal select {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
    }

    /* Het aantal blijft een rijtje van min, veld en plus, maar dan over de volle breedte. */
    .diverse-qty-wrap {
        display: flex !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }

        .diverse-qty-input {
            width: 56px !important;
            text-align: center;
        }

    /* De twee vensters zelf, met ruimte onderaan zodat het toetsenbord van het toestel het
       invoerveld niet bedekt.

       Ze stonden over de volle breedte en raakten daarmee allebei de randen van het scherm.
       Martijn, 09-09-2026: "haal aan beide kanten van de popup 3% af, zodat het de zijkant niet
       raakt." Dat is dezelfde regel als voor de rest van de handheld: een scherm is honderd procent
       breed en we gebruiken er vierennegentig van. */
    #WebshoOrdersDiverseModal .modal-dialog,
    #WebshoOrdersCommentsModal .modal-dialog {
        margin: 0 3vw !important;
        max-width: 94vw !important;
        width: 94vw !important;
    }

    /* Boven waren de hoeken rond en onder niet. Nu alle vier hetzelfde. */
    #WebshoOrdersDiverseModal .modal-content,
    #WebshoOrdersCommentsModal .modal-content {
        border-radius: 12px !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
    }
}

@media (max-width: 600px) {

    /* Het prijsvak zat om het veld heen en bleef op zijn eigen maat staan; het veld erbinnen was
       daardoor nog geen half scherm breed. (08-09-2026) */
    .diverse-price-wrap {
        width: 100% !important;
    }
}

/* ------------------------------------------------------------------------------------------------
   Tafel parkeren op een handheld.

   Gemeld door Martijn, 08-09-2026: "Tafel parkeren werkt niet, popup is out of screen, en werkt niet
   bij aanklikken. Maak dit scherm ook veel kleiner en pas dit aan."

   Het aantikken zelf werkt: een tik zet de tafel in het veld en sluit het venster (nagespeeld met
   tafel 190). Dat het niet reageerde kwam doordat het venster buiten beeld viel -- dat is met de
   vensteropmaak hierboven opgelost.

   Wat overblijft is de maat: een tafeltegel was 150 bij 150, dus er paste er één op een rij en je
   moest schuiven om bij de derde te komen. Nu drie op een rij, net als de producten.
   ------------------------------------------------------------------------------------------------ */

@media (max-width: 600px) {

    #parkingTableModal .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    #parkingTableModal .modal-content {
        max-height: 100vh !important;
        overflow-y: auto !important;
    }

    /* De tegels staan in een rij die op een breed scherm netjes uitwaaiert; hier een raster van
       drie. De knop om een tafel bij te maken telt gewoon mee. */
    #parkingTableModal .parking-table-btn,
    #parkingTableModal .unpaidParkingTable,
    #parkingTableModal .parking-new-table-btn {
        width: 100% !important;
        min-width: 0 !important;
        height: 84px !important;
        min-height: 0 !important;
        font-size: 13px !important;
        padding: 4px !important;
    }

    #parkingTableModal .parking-table-list,
    #parkingTableModal .modal-body > div:has(> .parking-table-btn),
    #parkingTableModal .parking-tables-wrap {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #parkingTableModal .modal-body {
        padding: 8px !important;
    }
}

/* ------------------------------------------------------------------------------------------------
   De knoppen in de balk bovenaan.

   Gevraagd door Martijn, 08-09-2026: "Zorg wel dat zoek bestelling en kassa wel als knop zichtbaar
   is."

   In de balk stond alleen het plusje van Kassa, zonder opschrift. Zoek bestelling zat achter het
   menuknopje. Nu staan ze er allebei, met hun naam erbij; js/jimani-handheld.js neemt Zoek
   bestelling over uit het linkermenu.
   ------------------------------------------------------------------------------------------------ */

@media (max-width: 600px) {

    .header-center .top-menu ul {
        display: flex !important;
        align-items: center;
        gap: 6px;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
    }

    .header-center .top-menu li {
        display: flex !important;
        align-items: center;
    }

        .header-center .top-menu li a {
            display: flex !important;
            align-items: center;
            gap: 4px;
            padding: 4px 8px !important;
            font-size: 12px !important;
            white-space: nowrap;
        }

        /* Het opschrift stond op een handheld verstopt; juist daar wil je zien waar je op drukt. */
        .header-center .top-menu li .nav-text,
        .header-center .top-menu li span {
            display: inline !important;
            font-size: 12px !important;
        }

        .header-center .top-menu li .menu-icons,
        .header-center .top-menu li img {
            width: 18px !important;
            height: 18px !important;
            margin: 0 !important;
        }

    /* De streepjescode van een bon: hij blijft bestaan voor de scanner, maar neemt geen breedte meer
       in. Zelfde reden als bij het zoekveld boven de producten. */
    .bon-zoeken {
        position: absolute !important;
        left: -10000px !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
    }
}

@media (max-width: 600px) {

    /* Staat het toetsenbord open, dan blijft het venster erboven.
       ------------------------------------------------------------------------------------------
       Op een handheld vult een venster het hele scherm, en het toetsenbord komt eroverheen aan de
       onderkant. Van de vier rijen waren er dan nog twee te zien; de bovenste twee zaten achter
       het venster. Het toetsenbord geeft zijn hoogte door als --toetsenbord-hoogte, en daar
       stoppen we het venster nu. Gemeld door Martijn, 08-09-2026 (H9). */
    body.jimani-toetsenbord-open .modal {
        bottom: var(--toetsenbord-hoogte, 0px);
        height: auto;
    }

    body.jimani-toetsenbord-open .modal-content {
        max-height: calc(100vh - var(--toetsenbord-hoogte, 0px)) !important;
    }
}

@media (max-width: 600px) {

    /* De twee vensters met een tekstvak dragen een eigen regel met een ID erin, en die won van de
       regel hierboven. Daarom staan ze hier nog een keer, met de hoogte van het toetsenbord eraf.
       En de dialoog erbinnen hangt aan de onderkant van zijn vak: zonder grens bleef die even hoog
       en stak hij er onderuit. (H9, 08-09-2026) */
    body.jimani-toetsenbord-open #WebshoOrdersDiverseModal .modal-content,
    body.jimani-toetsenbord-open #WebshoOrdersCommentsModal .modal-content,
    body.jimani-toetsenbord-open .modal-dialog {
        max-height: calc(100vh - var(--toetsenbord-hoogte, 0px)) !important;
    }
}


/* ------------------------------------------------------------------------------------------------
   Het betaalscherm op een handheld.

   Gemeld door Martijn op de Sunmi L3, 09-09-2026, punt voor punt terwijl hij meekeek:

     a. "Selecteer betaalmethode staat veel te groot, maak deze een stuk kleiner en passend op een
         regel, dezelfde regel als het kruisje."
     b. "Haal de tekst Kies hoe u voor de ... weg."
     c. "In het besteloverzicht staat het euroteken veel te veel naar links, laat dit aansluiten op
         dezelfde positie als het euroteken op totaal inclusief btw. Zorg dan dat alle teksten op
         een regel passen."
     d. "Er zit heel veel wit na de lichtblauwe regel, haal dit weg, en haal totaal exclusief btw en
         btw weg. Dit staat al op de bon, dus voor de handheld niet relevant."
     9. "Het besteloverzicht heeft een vaste hoogte, dat moet niet. Maak het scherm even hoog als de
         laatste tekstregel."
    10. "Openstaand bedrag staat veel te groot en mag helemaal weg, want dit staat dubbel."
    11. "Het bedrag terug te geven staat links uitgelijnd, maar lijn dit rechts uit."
    13. "In de footer staat een terugknop en restant via andere. Beide knoppen weg, alleen de knop
         Betaal nu."

   Deze regels gelden voor allebei de vensters: het kiesvenster (#choosePaymentModal) en het venster
   waarin je contant of anders afrekent (#webshopPaymentModal). Ze stonden alleen op het eerste, en
   juist het tweede is het venster waar Martijn naar keek -- vandaar dat hij op 09-09-2026 bij AC9
   dezelfde punten nog een keer moest melden: "Hier eten" weg, en totaal exclusief btw, btw en totaal
   inclusief btw weg.

   Alles met !important: de opmaak van dit venster wordt door het venster zelf in de pagina gezet
   (een style-blok uit webshop.payment.popup.js) en komt dus na dit bestand.
   ------------------------------------------------------------------------------------------------ */

@media (max-width: 600px) {

    /* a. De kop op een regel, naast het kruisje. */
    #choosePaymentModal .modal-header,
    #webshopPaymentModal .modal-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px;
        padding: 12px 14px !important;
    }

    #choosePaymentModal .payment-title,
    #webshopPaymentModal .payment-title {
        font-size: 18px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* b. De uitleg eronder zegt niets wat de knoppen niet al zeggen. */
    #choosePaymentModal .payment-subtitle,
    #webshopPaymentModal .payment-subtitle {
        display: none !important;
    }

    /* c. Het euroteken van een bestelregel komt op dezelfde plek als dat van Totaal incl. btw.
     *
     * De regels staan in een tabel met drie kolommen: tekst, euroteken, bedrag. Die twee laatste
     * kolommen waren zo breed als de tabel toeliet, waardoor het euroteken ver naar links stond.
     * Nu zijn ze precies zo breed als hun inhoud, en duwt de tekstkolom ze naar rechts -- net als in
     * de regel Totaal incl. btw, waar euroteken en bedrag naast elkaar rechts staan. */
    .webshop-payment-table {
        width: 100% !important;
        table-layout: auto !important;
    }

    .webshop-payment-table .webshop-currency-cell,
    .webshop-payment-table .webshop-value-cell {
        width: 1% !important;
        white-space: nowrap !important;
    }

    .webshop-payment-table .webshop-currency-cell {
        padding-right: 4px !important;
    }

    /* En de omschrijving past op een regel; wat niet past wordt afgekapt. */
    .webshop-payment-table .webshop-line-text {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 0;
    }

    /* d en 9. Geen wit tussen de lichtblauwe streep en het totaal, en geen vaste hoogte: het vak is
     * zo hoog als de laatste regel. */
    #choosePaymentModal .wp-border,
    #webshopPaymentModal .wp-border {
        justify-content: flex-start !important;
        height: auto !important;
        min-height: 0 !important;
    }

    #choosePaymentModal .wp-left,
    #webshopPaymentModal .wp-left,
    #choosePaymentModal .wp-table-container,
    #webshopPaymentModal .wp-table-container {
        height: auto !important;
        min-height: 0 !important;
        flex: 0 0 auto !important;
    }

    /* d. Totaal exclusief btw, BTW en Totaal incl. BTW blijven staan (klein). Ze gingen weg omdat ze op de bon staan;
     * Martijn wil ze zien bij het afrekenen. (29-09-2026: "wanneer je contant klikt mis ik in de grijze balk de prijs ex
     * btw, btw en prijs incl. btw.") */
    #choosePaymentModal .wp-border > div > .d-flex.justify-content-between,
    #webshopPaymentModal .wp-border > div > .d-flex.justify-content-between {
        font-size: 13px;
        line-height: 1.3;
    }

    /* AC9. Het openstaande bedrag blijft, en past op een regel.
     *
     * Martijn, 09-09-2026: "Haal ook totaal incl. btw weg en laat het openstaand bedrag staan, maar
     * maak dit passend op 1 regel inclusief het bedrag."
     *
     * Eerder ging dit bedrag juist weg omdat het dubbel stond: er stond een regel lager Totaal incl.
     * btw met hetzelfde getal. Nu die regel weg is, is dit het enige bedrag dat er nog staat -- en
     * dan hoort het er te zijn. */
    #choosePaymentModal .wp-payable-row,
    #webshopPaymentModal .wp-payable-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin: 0 0 10px !important;
        white-space: nowrap !important;
    }

    #choosePaymentModal .wp-payable-label,
    #webshopPaymentModal .wp-payable-label {
        font-size: 15px !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #choosePaymentModal .wp-payable-amount,
    #webshopPaymentModal .wp-payable-amount {
        font-size: 18px !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }

    /* AC9. "Hier eten" onder de kop van het besteloverzicht zegt niets over het afrekenen. */
    #choosePaymentModal .wp-order-header .text-muted,
    #webshopPaymentModal .wp-order-header .text-muted {
        display: none !important;
    }

    /* AC8. Het besteloverzicht net zo breed als de knop eronder.
     *
     * Martijn, 09-09-2026: "Wanneer je betalen klikt dan zie je onder selecteer betaalmethode de
     * bestellijst, alleen deze staat nu minder breed. Deze mag veel breder (dezelfde breedte als de
     * contante betaling knop)." Gemeten op 360 breed: de lijst was 178 en de knop eronder 348.
     *
     * Het vak stond op flex 1 1 40 procent uit de opmaak die het venster zelf meebrengt. Op een
     * scherm van 360 is veertig procent geen kolom maar een strook. */
    /* En het vak eromheen hield aan weerskanten tweeenveertig punten vrij. Op een scherm van 360 is
     * dat vierentachtig punten die niemand ziet; de knop eronder houdt er zes aan. Gemeten: het
     * besteloverzicht was 276 breed en de knop Betaal nu 348. */
    #choosePaymentModal .modal-content,
    #webshopPaymentModal .modal-content,
    #choosePaymentModal .wp-body,
    #webshopPaymentModal .wp-body {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Zes punten was te krap: alles plakte tegen de rand. Nu veertien, en met de drie procent
     * eromheen staat er genoeg lucht omheen. Gemeld door Martijn, 10-09-2026: "hier moet echt meer
     * spacing in zitten". */
    #choosePaymentModal .x_content2,
    #webshopPaymentModal .x_content2,
    #choosePaymentModal .modal-body,
    #webshopPaymentModal .modal-body,
    #choosePaymentModal .modal-header,
    #webshopPaymentModal .modal-header,
    #choosePaymentModal .wp-body,
    #webshopPaymentModal .wp-body,
    #choosePaymentModal .modal-footer,
    #webshopPaymentModal .modal-footer {
        padding-left: 3% !important;
        padding-right: 3% !important;
    }

    /* De rand van het besteloverzicht houdt zijn eigen lucht van binnen; zijn buitenkant valt nu
     * precies samen met die van de knop eronder. */
    #choosePaymentModal .wp-border,
    #webshopPaymentModal .wp-border {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #choosePaymentModal .wp-body,
    #webshopPaymentModal .wp-body {
        display: block !important;
    }

    #choosePaymentModal .wp-left,
    #webshopPaymentModal .wp-left,
    #choosePaymentModal .wp-right,
    #webshopPaymentModal .wp-right {
        width: 100% !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 11. Terug te geven hoort rechts te staan, zoals elk bedrag. */
    #choosePaymentModal .wp-terug-veld .webshop-amount-input,
    #webshopPaymentModal .wp-terug-veld .webshop-amount-input,
    #choosePaymentModal #webshopChangeAmount,
    #webshopPaymentModal #webshopChangeAmount {
        flex: 1 1 auto !important;
        justify-content: flex-end !important;
        text-align: right !important;
        padding-right: 10px !important;
    }

    /* 13. Alleen Betaal nu in de voet. De terugknop en Restant via andere betaalmethode gaan weg;
     * die laatste stond toch al uit. */
    #choosePaymentModal .wp-footer-left,
    #webshopPaymentModal .wp-footer-left {
        display: none !important;
    }

    #choosePaymentModal .wp-footer-right,
    #webshopPaymentModal .wp-footer-right {
        width: 100% !important;
        max-width: none !important;
        flex: 1 1 100% !important;
    }

    /* Bon printen / Geen bon op de eerste rij, Betaal nu er breed onder. Naast elkaar viel Betaal nu buiten het
       venster en was hij nauwelijks te raken. (Martijn 30-09-2026) */
    #webshopPaymentModal .wp-footer-right {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    #webshopPaymentModal .wp-footer-right .receipt-payment-group {
        display: flex !important;
        width: 100% !important;
        gap: 8px !important;
    }

    #webshopPaymentModal .wp-footer-right .receipt-payment-group .receipt-icon-button {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        justify-content: center !important;
    }

    #webshopPaymentModal .wp-footer-right #webshopPayConfirmButton {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-height: 56px !important;
        font-size: 18px !important;
    }
}

/* ------------------------------------------------------------------------------------------------
   Nooit een schuifbalk opzij.

   Regel van Martijn, 09-09-2026: "Ik zie een horizontale scrollbar wanneer ik de order open, dit is
   verboden." En eerder die ochtend: "Er mag nooit een verticale scrollbar zichtbaar zijn."

   Gemeten op de Sunmi L3: het bonvak is 352 breed, maar het vak eromheen wilde 391 en de rij met de
   drie knoppen 371 op 294 beschikbaar. Twee oorzaken:
     - de drie kolommen mochten niet krimpen (flex 0 0 30%), dus bij weinig ruimte staken ze eruit;
     - het opschrift in een knop kon niet inkorten, want een tekst in een flexvak krimpt niet uit
       zichzelf.
   Beide zijn hieronder rechtgezet. Het afkappen op het vak eromheen staat er als vangnet: er hoort
   niets meer buiten te steken, en mocht dat ooit weer gebeuren dan zie je er in elk geval geen
   schuifbalk van.
   ------------------------------------------------------------------------------------------------ */

@media (max-width: 600px) {

    .row.orderpage-height > .col-md-12 > .col-md-4,
    .receipt.payment-container,
    .webshop-receipt-panel,
    .receipt-details {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* Een tekst in een flexvak krimpt niet uit zichzelf: min-width staat op auto en dat is zo breed
       als het woord. Vandaar dat "opmerkingen" de rij breder maakte dan het vak. */
    .webshop-receipt-action-row .action-pill-btn > * {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .webshop-receipt-action-row .action-pill-btn > i {
        flex: 0 0 auto !important;
    }
}

/* ------------------------------------------------------------------------------------------------
   Het eigen toetsenbord hoort bovenop.

   Gemeld door Martijn, 09-09-2026: "Het toetsenbord doet het NERGENS. Het probleem zit dat het
   toetsenbord niet op de voorgrond staat, daardoor kan ik deze niet bedienen." Eerder die ochtend
   ook al voor het zoeken bij parkeertafels, opmerkingen en diversen.

   Gevonden: het toetsenbord staat op z-index 2000 (css/pos-toetsenbord.css) en hangt aan de body.
   Op een handheld zet dit bestand elk venster op 2200, zodat een venster boven de bonlade komt.
   Daarmee kwam elk venster ook boven het toetsenbord, en tikte je dus op het venster in plaats van
   op een toets.

   Het toetsenbord gaat daarom boven de vensters staan. Hoger dan de voet van het betaalvenster
   (2210) en hoger dan het venster zelf (2200).
   ------------------------------------------------------------------------------------------------ */

@media (max-width: 600px) {

    .jimani-toetsenbord {
        z-index: 2400 !important;
    }
}

/* ------------------------------------------------------------------------------------------------
   De drie knoppen zo breed als het scherm toelaat.

   Gevraagd door Martijn, 09-09-2026: "maak iedere knop +40 breder."

   Dat past niet. Gemeten op de Sunmi L3: het scherm is 360 breed, de bonlade 352, het vak eromheen
   334 en de rij zelf 294. Bij dertig procent is een knop 91 breed. Er veertig bij optellen maakt
   131, en drie keer 131 plus de ruimte ertussen is 405 -- meer dan het scherm zelf.

   Wat wel kan: de rij de volle breedte van het vak geven, en de vierde lege kolom weghalen die er
   ongemerkt een kwart van opat. Daarmee gaat een knop van 83 naar 111 -- achtentwintig erbij. Dat is
   het maximum zonder dat er iets buiten beeld valt, en een schuifbalk opzij is verboden.
   ------------------------------------------------------------------------------------------------ */

@media (max-width: 600px) {

    /* Het vak eromheen hield twintig punten vrij aan weerszijden. Op een handheld is dat veertig
       punten die niemand ziet. Acht is genoeg om het niet tegen de rand te laten plakken.

       Hier stond eerst een negatieve marge op de rij zelf, om die ruimte terug te pakken. Dat werkte
       niet: de rij stak dan rechts buiten de lade en Overig viel half weg. Gemeten op de Sunmi L3,
       09-09-2026. */
    .receipt.payment-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Het bonvak vult de lade, zodat de knoppen onderaan blijven staan waar ze stonden.
     *
     * Gemeld door Martijn op de Sunmi L3, 09-09-2026: "Ja volledig scherm werkt, maar de 3 knoppen
     * moeten wel op dezelfde positie blijven als ze waren. Dus zet die naar beneden en zorg dat het
     * hele bestellingscherm dus langer wordt."
     *
     * Het vak stond op 100vh min 212 punten -- een maat die klopte toen de lade 82 procent van het
     * scherm was. Nu de lade het hele scherm vult bleef het vak op 516 staan in een lade van 728, en
     * hing er onder de knoppen een strook wit van tweehonderd punten. Het vak groeit nu mee met de
     * lade; de knoppenrij zakt daarmee vanzelf naar onderen. */
    body.bon-open .receipt.payment-container {
        --webshop-receipt-panel-height: 100%;
        height: 100% !important;
        flex: 1 1 auto !important;
    }

    .webshop-receipt-action-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 4px !important;
    }

        .webshop-receipt-action-row > [class*="col-"] {
            flex: 1 1 33.333% !important;
            max-width: 33.333% !important;
        }

        /* En er stond een vierde, lege kolom in die rij: onzichtbaar, maar hij nam wel een kwart van
           de breedte in. Vandaar dat drie knoppen samen niet verder kwamen dan driekwart. Gemeten
           09-09-2026: vier kolommen van 83 op een rij van 342. Op een breed scherm houdt hij de
           knoppen op hun plek, op een handheld is er geen ruimte voor niets. */
        .webshop-receipt-action-row > .onzichtbaar-met-ruimte {
            display: none !important;
        }
}

/* ------------------------------------------------------------------------------------------------
   Geen halve centimeter schuiven in een lege bestelling.

   Gemeld door Martijn, 09-09-2026: "Wanneer ik in een lege bestelling sta dan kan ik met mijn vinger
   scrollen voor een halve centimeter, dit hoort niet."

   Gemeten op 360 bij 728: het bonvak is 597 hoog en zijn inhoud 608 -- elf punten te veel. Dat zijn
   precies de twaalf punten die de knoppenrij er eerder deze ochtend bij kreeg toen die iets lager
   moest komen te staan. Die ruimte wordt hieronder onderaan het vak weer weggehaald: de knoppen
   blijven even ver van de bonregels af staan, maar het vak past weer.
   ------------------------------------------------------------------------------------------------ */

@media (max-width: 600px) {

    /* Het vak is 597 hoog: acht boven, vierhonderdvijf voor de bon en vierentachtig onderaan voor
       de betaalknoppen die vast in beeld staan. Het blok met de bon bleef op 516 staan in plaats van
       mee te krimpen naar 505, want de kolom eromheen was geen flexvak en dan doet flex-grow-1 en
       min-h-0 niets. Nu wel, en dan past het precies. */
    body.bon-open .row.orderpage-height > .col-md-12 > .col-md-4 {
        display: flex !important;
        flex-direction: column !important;
    }

        body.bon-open .row.orderpage-height > .col-md-12 > .col-md-4 > .flex-grow-1 {
            flex: 1 1 auto !important;
            min-height: 0 !important;
        }
}

/* ------------------------------------------------------------------------------------------------
   Eén kruisje op de kopregel van de bon.

   Gemeld door Martijn, 09-09-2026: "Wanneer ik op de handheld de bestelling open zie ik ineens drie
   iconen: een leeg vierkantje zonder icoon en twee kruisen. Haal de twee linker iconen weg en
   behoud alleen het kruisje dat donkergrijs zwart is."

   Gemeten op het toestel: het waren er twee knoppen, niet drie. Links de knop Tafel verlaten -- een
   smal vakje van dertien bij tweeendertig met een rood kruisje erin, wat er als een leeg vierkantje
   plus een kruis uitziet. Rechts het kruisje van 40 bij 40 dat de lade sluit.

   Let op: hiermee is Tafel verlaten op een handheld niet meer aan te tikken. Dat kan omdat opslaan
   je sinds vanochtend zelf terugbrengt naar het kassascherm; op een breed scherm blijft de knop
   gewoon staan.
   ------------------------------------------------------------------------------------------------ */

@media (max-width: 600px) {

    .webshop-order-header .webshop-order-verlaat-tafel {
        display: none !important;
    }
}

/* ------------------------------------------------------------------------------------------------
   Een bonregel met een opmerking of met diversen eronder valt niet meer door elkaar.

   Gemeld door Martijn, 09-09-2026, met een foto van het toestel: "de middelste regel gaat qua
   layout heel veel mis, zoveel dat ik uberhaupt niet kan zien wat het is." Op die regel stond een
   product met een opmerking, en daaronder een diversenregel met een eigen opmerking. Alles liep
   door elkaar heen: naam, aantal, prijs en de diversen stonden naast elkaar op een strook van
   nog geen driehonderd punten breed.

   Hoe het in elkaar zit: een bonregel bestaat uit meerdere blokken onder elkaar -- de productregel,
   dan de supplementen, dan de diversen. Twee van de varianten in de opmaak zetten die blokken als
   bootstrap-kolommen neer, en die gaan op een smal scherm naast elkaar staan in plaats van eronder.

   Hieronder staan ze op een handheld gegarandeerd onder elkaar, elk over de volle breedte. Binnen
   zo'n blok blijft alles staan zoals het was: naam links, aantal en bedragen rechts.
   ------------------------------------------------------------------------------------------------ */

@media (max-width: 600px) {

    .webshop-receipt-panel .receipt-item,
    .webshop-receipt-panel .parentRow,
    #PreviousInvoiceList .receipt-item,
    #PreviousInvoiceList .parentRow {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

        .webshop-receipt-panel .receipt-item > *,
        .webshop-receipt-panel .parentRow > *,
        #PreviousInvoiceList .receipt-item > *,
        #PreviousInvoiceList .parentRow > * {
            width: 100% !important;
            max-width: 100% !important;
            flex: 0 0 auto !important;
        }

    /* De opmerking hoort onder de naam en niet ernaast. */
    .webshop-receipt-panel .commentsColumn,
    #PreviousInvoiceList .commentsColumn {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* De lege kolommetjes die op een breed scherm de uitlijning verzorgen, nemen hier alleen ruimte
       in. Een diversenregel begon daardoor pas op een derde van de breedte. */
    #PreviousInvoiceList .diverse-item-row > .col-md-2:empty,
    #PreviousInvoiceList .supplement-item > .col-md-2:empty,
    #PreviousInvoiceList .supplement-item > .col-md-1:empty {
        display: none !important;
    }
}

/* Het bestelnummer naast de kop, zolang er geen tafel is gekozen. Zie js/jimani-handheld.js.
   Geldt op de kassa en op de handheld, dus buiten de medialaag. */
.webshop-order-badge.bestelnummer-verborgen {
    display: none !important;
}

/* ------------------------------------------------------------------------------------------------
   Het venster Instellingen op de handheld.

   Gevraagd door Martijn, 09-09-2026: achter het klantlogo een venster met de kop Instellingen, een
   kruisje rechtsboven, en drie knoppen -- bonprinter wisselen, kassalade of portemonnee wisselen,
   gebruiker wisselen. "Blauwe knoppen met icoon en naam en witte achtergrond, blauwe border."

   Het kruisje is hetzelfde als dat van de bonlade: veertig bij veertig met een rand, en met twee
   streepjes getekend in plaats van een plaatje.
   ------------------------------------------------------------------------------------------------ */

@media all { /* Het venster Instellingen is op elke breedte in de huisstijl (Martijn 11-11-2026); was alleen onder de 600 breed */

    .handheld-instellingen-venster .modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid #e7e9ee;
    }

    .handheld-instellingen-venster .modal-title {
        font-size: 18px;
        font-weight: 700;
        margin: 0;
        color: #2b2f38;
    }

    .handheld-instellingen-venster .modal-body {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 16px;
    }

    /* Blauw op wit, met een blauwe rand. */
    .handheld-instelknop {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 52px;
        padding: 10px 14px;
        border: 1px solid #2f80ff;
        border-radius: 8px;
        background: #fff;
        color: #2f80ff;
        font-size: 15px;
        font-weight: 600;
        text-align: left;
    }

        .handheld-instelknop i {
            font-size: 18px;
            width: 22px;
            text-align: center;
            flex: 0 0 auto;
        }

        .handheld-instelknop:active {
            background: #eef3fd;
        }

        /* Er staat een nieuwe versie klaar: oranje met witte tekst, zodat het opvalt. (Martijn 30-09-2026) */
        .handheld-instelknop.handheld-instelknop-update,
        .handheld-instelknop.handheld-instelknop-update i {
            background: #E37839;
            border-color: #E37839;
            color: #fff;
        }
}

/* Het kruisje van een handheldvenster. Buiten de medialaag, want de vorm is overal dezelfde; alleen
   getoond waar het venster staat. */
.handheld-venster-sluiten {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #d7dce5;
    border-radius: 8px;
    background: #fff;
}

    .handheld-venster-sluiten::before,
    .handheld-venster-sluiten::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 16px;
        height: 2px;
        margin: -1px 0 0 -8px;
        background: #2b2f38;
        border-radius: 1px;
    }

    .handheld-venster-sluiten::before {
        transform: rotate(45deg);
    }

    .handheld-venster-sluiten::after {
        transform: rotate(-45deg);
    }

/* ------------------------------------------------------------------------------------------------
   De keuzelijst in het venster Instellingen.

   Gevraagd door Martijn, 09-09-2026 (AB3 en AB4): bonprinter en kassalade wisselen vanaf het toestel
   zelf. De lijst staat in hetzelfde venster en niet in een tweede venster erover: op een scherm van
   360 breed is dat een laag te veel, en er mag niets over de drie procent aan weerskanten vallen.
   ------------------------------------------------------------------------------------------------ */

.handheld-instelkeuze:empty {
    display: none;
}

.handheld-instelkeuze {
    margin-top: 14px;
    border-top: 1px solid #e3e6ec;
    padding-top: 12px;
}

.handheld-instelkop {
    font-size: 13px;
    color: #5b6472;
    margin-bottom: 8px;
}

.handheld-instelkeus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    margin-bottom: 8px;
    padding: 8px 12px;
    border: 1px solid #d7dde5;
    border-radius: 10px;
    background: #fff;
    color: #212529;
    font-size: 15px;
    text-align: left;
}

    .handheld-instelkeus.gekozen {
        border-color: #0d3fd6;
        color: #0d3fd6;
        font-weight: 600;
    }

.handheld-instelleeg {
    padding: 8px 2px;
    color: #8b8b95;
    font-size: 13px;
}


/* --- het bedrag op de betaalknop (10-09-2026) -------------------------------------------------- */

/* Op de handheld staat de knop "Betaal nu" onderaan, en daar hoorde het bedrag bij: je ziet de
   bonbalk niet meer als de bon openstaat. De knop heeft daar al een tweede regel voor -- die stond
   alleen leeg zolang er geen deelbetaling liep. Het vullen gebeurt in js/jimani-handheld.js; hier
   staat alleen dat de twee regels onder elkaar horen.

   Gemeld door Martijn, 10-09-2026: "ik zie in de betaal nu knop niet het bedrag. Dit moet worden
   toegevoegd op regel 2." */
@media (max-width: 600px) {
    #PayButton {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1.2;
    }

        #PayButton #totalPaymentAmountWithCurrencySymbol {
            display: block;
            font-size: 15px;
            font-weight: 600;
            opacity: .92;
        }
}


/* --- de betaalkeuze op de handheld (10-09-2026) ------------------------------------------------ */

/* Gemeld door Martijn, meekijkend op de Sunmi L3: "Haal bij handheld cadeaubon en betalingen op
   rekening weg. Haal ook de 2 headers weg, contant en betaal op andere manier. Maak nu alle vakjes
   iets minder breed, dus hou hier een 3% spacing aan binnen de popup, zodat de borders de rand niet
   raken."

   Alleen op een smal scherm. Op de kassa blijven de cadeaubon, het betalen op rekening en de twee
   kopjes gewoon staan: daar is ruimte genoeg en daar worden ze gebruikt. */
@media (max-width: 600px) {

    /* Twee manieren die op een handheld niet aan de beurt komen. */
    /* Er zijn twee betaalkeuzevensters in het systeem: een met namen op de knoppen en een zonder.
       In dat tweede hebben de knoppen geen naam, alleen een pictogram -- vandaar dat ze ook op het
       pictogram worden gezocht. */
    #choosePaymentModal #ChooseCoupon,
    #choosePaymentModal #ChoosePayOnAccount,
    #webshopPaymentModal #ChooseCoupon,
    #webshopPaymentModal #ChoosePayOnAccount,
    #choosePaymentModal .payment-option:has(.payment-icon.gift),
    #choosePaymentModal .payment-option:has(.payment-icon.invoice),
    #webshopPaymentModal .payment-option:has(.payment-icon.gift),
    #webshopPaymentModal .payment-option:has(.payment-icon.invoice) {
        display: none !important;
    }

    /* Met nog maar twee keuzes zeggen "1. Contant" en "2. Betaal op een andere manier" niets meer;
       ze kosten alleen ruimte op een scherm dat er weinig van heeft. */
    #choosePaymentModal .section-title,
    #webshopPaymentModal .section-title {
        display: none !important;
    }

    /* De drie procent wordt een laag hoger geteld, op .wp-body. Telde elke laag zijn eigen drie
       procent, dan stond er negenentwintig pixels lucht in plaats van tien. */
    #choosePaymentModal .payment-section,
    #choosePaymentModal .wp-left,
    #choosePaymentModal .wp-right,
    #webshopPaymentModal .payment-section,
    #webshopPaymentModal .wp-left,
    #webshopPaymentModal .wp-right {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #choosePaymentModal .payment-option,
    #webshopPaymentModal .payment-option {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ===== De kop op een handheld (body.jm-handheld, handheld-kop.js) =====
   Geen menuknop; links een plus met Bestelling en orderbeheer; Kassa blijft in de balk. (Martijn 29-09-2026: "Handheld
   heeft GEEN menu knop, dus haal dit weg. Zet Kassa altijd in de header en links een plus icoon met een dropdown") */
html body.jm-handheld #topbar-menu .header-left #sidebarOpenCloseButton, html body.jm-handheld #topbar-menu .header-left .btn-toggle-open-close { display: none !important; }
body.jm-handheld #topbar-menu nav.top-menu li.handheld-verborgen { display: none !important; }
.handheld-plushouder { position: relative; display: inline-flex; align-items: center; margin: 0 8px; }
.handheld-plus {
    width: 40px; height: 40px; border-radius: 10px; border: 1px solid #dfe4ec; background: #fff; color: var(--jm-kop-accent, #1a73e8);
    display: inline-flex; align-items: center; justify-content: center; font-size: 18px; padding: 0;
}
.handheld-plus[aria-expanded="true"] { background: var(--jm-kop-accent, #1a73e8); border-color: var(--jm-kop-accent, #1a73e8); color: #fff; }
.handheld-plusmenu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 3000; min-width: 200px; padding: 6px;
    background: #fff; border: 1px solid #e3e7ee; border-radius: 12px; box-shadow: 0 8px 24px rgba(15, 23, 42, .15);
    display: flex; flex-direction: column; gap: 2px;
}
.handheld-plusmenu[hidden] { display: none; }
.handheld-plusmenu-item {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; color: #1d2430;
    text-decoration: none; font-size: 15px; white-space: nowrap;
}
    .handheld-plusmenu-item:hover, .handheld-plusmenu-item:active { background: #f1f5fb; color: #1d2430; }
    .handheld-plusmenu-item img { width: 20px; height: 20px; margin: 0 !important; }

/* ===== Dezelfde plus in de kop op de computer en de kassa: het restaurant in de kassamodule (R2, handheld-kop.js) =====
   Martijn 02-10-2026: "Header (computer + handheld): plusje (Reservering aanmaken, bestellingen, orderbeheer),
   Reserveringen, Floorplan, Kassa." De items met data-kop-plus staan in het menu van de plus; de plus zelf is geen
   menu-item met een gekleurd vlak bij zweven, alleen de knop. */
#topbar-menu nav.top-menu li.handheld-verborgen { display: none !important; }
#topbar-menu nav.top-menu > ul > li.kop-plus { padding: 0; display: flex; align-items: center; }
#topbar-menu nav.top-menu > ul > li.kop-plus:hover { background-color: transparent !important; }
/* Actief is alleen de kleur van de knop zelf: de pagina-markering (current-page, op /webshoporder en /WebshopOrderManagement
   omdat de plus die items bevat) gaf het hele kopvak een vlak, groter dan het vierkantje. (Martijn 04-10-2026, T22) */
#topbar-menu nav.top-menu > ul > li.kop-plus.current-page,
#topbar-menu nav.top-menu > ul > li.kop-plus.current-page:hover { background-color: transparent !important; box-shadow: none !important; }
#topbar-menu nav.top-menu > ul > li.kop-plus .handheld-plushouder { margin: 0; }
/* Vast op het scherm: het midden van de balk schuift op een tablet (overflow) en zou het menu afknippen. */
.handheld-plusmenu.kop-plusmenu-vast { position: fixed; }
#topbar-menu nav.top-menu > ul > li.kop-plus-actief .handheld-plus { border-color: var(--jm-kop-accent, #1a73e8); }
#topbar-menu nav.top-menu li.kop-plus .handheld-plusmenu-item,
#topbar-menu nav.top-menu li.kop-plus:hover .handheld-plusmenu-item { color: #1d2430 !important; gap: 8px; font-size: 15px !important; }
#topbar-menu nav.top-menu li.kop-plus .handheld-plusmenu-item:hover { background: #f1f5fb; }
#topbar-menu nav.top-menu li.kop-plus .handheld-plusmenu-item span,
#topbar-menu nav.top-menu li.kop-plus:hover .handheld-plusmenu-item span {
    display: inline !important; background-color: transparent !important; color: inherit !important; font-size: inherit !important;
}

/* Elke knop in de balk houdt zijn eigen kleur, op elke pagina: Reserveringen en Floorplan het oranje van het restaurant,
   Kassa het kassablauw -- actief en bij zweven (li[data-kop-kleur], _Layout.cshtml). De kleuren staan in
   jimani-vensters.css (--jm-kop-restaurant, --jm-kop-kassa). (Martijn 03-10-2026: restaurantschermen in horeca-oranje) */
#topbar-menu nav.top-menu > ul > li[data-kop-kleur="restaurant"] { --jm-kopknop: var(--jm-kop-restaurant, #F37120); --jm-kopknop-zweef: var(--jm-kop-restaurant-zweef, #F5843D); }
#topbar-menu nav.top-menu > ul > li[data-kop-kleur="kassa"] { --jm-kopknop: var(--jm-kop-kassa, #0d6efd); --jm-kopknop-zweef: var(--jm-kop-kassa, #0d6efd); }
/* Activiteiten in de kassamodule (KB-9, 05-10-2026): het groen van activiteiten (jm-module-activiteiten). */
#topbar-menu nav.top-menu > ul > li[data-kop-kleur="activiteiten"] { --jm-kopknop: var(--jm-kop-activiteiten, #00DC1B); --jm-kopknop-zweef: var(--jm-kop-activiteiten-zweef, #33E348); }
/* Salon in de kassamodule (KB-15, 05-10-2026): het roze van de salon (jm-module-salon). */
#topbar-menu nav.top-menu > ul > li[data-kop-kleur="salon"] { --jm-kopknop: var(--jm-kop-salon, #db2777); --jm-kopknop-zweef: var(--jm-kop-salon-zweef, #e2558f); }
/* Tickets in de kassamodule (KB-17, 05-10-2026): het paars van ticketing (jm-module-ticketing). */
#topbar-menu nav.top-menu > ul > li[data-kop-kleur="tickets"] { --jm-kopknop: var(--jm-kop-ticketing, #9600DC); --jm-kopknop-zweef: var(--jm-kop-ticketing-zweef, #A933E3); }
#topbar-menu nav.top-menu > ul > li[data-kop-kleur].current-page { background-color: var(--jm-kopknop) !important; }
/* Zweven alleen waar echt gezweefd kan worden (muis): op iOS Safari blijft :hover na een tik hangen, en dan kleurde elke span in de knop
   mee, ook een lege telmelding (leeg wit vakje naast Bestellingen, 31-10-2026). De telmelding houdt altijd zijn eigen bolletje. */
@media (hover: hover) {
#topbar-menu nav.top-menu > ul > li[data-kop-kleur]:hover,
#topbar-menu nav.top-menu > ul > li[data-kop-kleur]:hover span:not(.notificationSpanCount) { background-color: var(--jm-kopknop-zweef) !important; }
#topbar-menu nav.top-menu > ul > li[data-kop-kleur].current-page:hover { background-color: var(--jm-kopknop) !important; }
}
#topbar-menu nav.top-menu > ul > li[data-kop-kleur].current-page:hover { background-color: var(--jm-kopknop) !important; }

/* De kop van de kassamodule ook op de restaurantschermen. Die laden het stijlbestand van horeca (custom.css, voor het
   oranje), en daarin staan het midden van de balk (menu en bonzoeker naast elkaar) en de bonzoeker niet: die regels
   komen uit webshop.css. Zonder deze regels zakte "Scan de bon" als kaal veld onder het logo. (Martijn 03-10-2026) */
body.jm-module-restaurant #topbar-menu .header-center { display: flex; align-items: center; justify-content: center; }
body.jm-module-restaurant #topbar-menu .header-center > nav.top-menu { flex: 0 1 auto; min-width: 0; }
body.jm-module-restaurant #topbar-menu .header-right .site_title { margin-right: 48px !important; }
body.jm-module-restaurant .bon-zoeken {
    display: flex; align-items: center; gap: 8px; margin-left: 16px; padding: 4px 12px;
    border: 1px solid #e5e5e5; border-radius: 999px; background: #f7f7f8;
}
body.jm-module-restaurant .bon-zoeken .bon-zoeken-icoon { color: #8a8a8f; flex-shrink: 0; }
body.jm-module-restaurant .bon-zoeken i { color: #8a8a8f; font-size: 16px; }
body.jm-module-restaurant .bon-zoeken input { border: 0; outline: 0; background: transparent; width: 180px; font-size: 14px; color: #46454a; }

/* De balk "Geen verbinding" viel achter de blauwe balk onderaan (handheld-bonbalk, 40 hoog, z 1400): erboven zetten.
   (Martijn 29-09-2026: "De geen verbinding balk is nu niet leesbaar, deze zit achter de blauwe balk.") */
body:has(.handheld-bonbalk) .kassa-offlinebalk { bottom: 40px; z-index: 1450; }


/* ===== De balk onderaan op de handheld, nieuwe vorm (29-09-2026) =====
   Zwevend en afgerond, met een telletje, "Bestelling bekijken", het totaal en een pijltje omhoog. Leeg: rustig grijs.
   (Martijn 29-09-2026: "Kun je tevens de layout van de blauwe balk aanpassen, ik vind deze niet mooi. Kun je hier iets
   mooiers op verzinnen.") */
.handheld-bonbalk {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    min-height: 56px;
    padding: 8px 14px 8px 8px !important;
    border-radius: 16px;
    background: linear-gradient(135deg, #1a73e8, #0b57d0) !important;
    box-shadow: 0 8px 24px rgba(11, 87, 208, .35);
    gap: 12px !important;
    cursor: pointer;
}
    .handheld-bonbalk .handheld-bonbalk-teller {
        flex: 0 0 auto;
        min-width: 40px;
        height: 40px;
        padding: 0 8px;
        border-radius: 12px;
        background: rgba(255, 255, 255, .18);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        font-weight: 700;
    }
    .handheld-bonbalk .handheld-bonbalk-aantal {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 15px;
        font-weight: 600;
        opacity: 1 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .handheld-bonbalk .handheld-bonbalk-totaal {
        flex: 0 0 auto;
        font-size: 18px !important;
        font-weight: 700;
    }
    .handheld-bonbalk .handheld-bonbalk-pijl {
        flex: 0 0 auto;
        font-size: 14px;
        opacity: .85;
    }
    .handheld-bonbalk.leeg {
        background: #eef1f6 !important;
        color: #6b7280;
        box-shadow: 0 4px 14px rgba(15, 23, 42, .10);
    }
        .handheld-bonbalk.leeg .handheld-bonbalk-teller { background: #dfe4ec; color: #6b7280; }
        .handheld-bonbalk.leeg .handheld-bonbalk-totaal { color: #6b7280; }

/* Ruimte onder de producten voor de zwevende balk, en de balk Geen verbinding erboven. */
.row.orderpage-height > .col-md-12 > .col-md-7 { padding-bottom: 84px !important; }
body:has(.handheld-bonbalk) .kassa-offlinebalk { bottom: 74px !important; left: 10px; right: 10px; border-radius: 12px; }

/* Met een tafel staan de betaalknoppen op twee rijen (114 hoog): de lade houdt dan meer ruimte vrij, zodat opmerkingen,
   Diversen en Overig er niet onder vallen. (29-09-2026) */
@media (max-width: 600px) {
    body.bon-open:has(#webshopPayRow.pay-row-met-opslaan) .row.orderpage-height > .col-md-12 > .col-md-4 {
        padding-bottom: 122px !important;
    }
}

/* ===== Contante betaling op de handheld (tot 600 px), 29-09-2026 =====
   Martijn: "Zet de header tekst contante betaling in dezelfde lijn als het kruisje en verplaats alles iets omhoog, zodat
   er bijna nooit een verticale scroll hoeft te zijn." / "een witte balk die contant en terug te geven niet helemaal laat
   zien. Dit moet gewoon doorlopen." / "een witte balk om de knop betaal nu. Deze mag weg en vul de prijs in bij betaal
   nu." / "Haal tevens openstaand bedrag weg. De 11,60 komt terug in de betaal nu knop." */
@media (max-width: 600px) {
    #webshopPaymentModal .modal-dialog { margin: 6px auto 0 !important; height: auto !important; }
    #webshopPaymentModal .modal-content { height: auto !important; max-height: calc(100vh - 12px) !important; padding: 0 0 8px !important; overflow-y: auto !important; }
    #webshopPaymentModal .modal-header { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; padding: 10px 14px 4px !important; }
    #webshopPaymentModal .modal-header .paymentModal-title { font-size: 22px !important; line-height: 1.2 !important; margin: 0 !important; order: 0; }
    #webshopPaymentModal .modal-header .btn-close { order: 1; margin: 0 !important; position: static !important; }
    #webshopPaymentModal .webshop-payment-summary { height: auto !important; max-height: none !important; overflow: visible !important; padding-bottom: 0 !important; }
    #webshopPaymentModal .wp-body { height: auto !important; padding-top: 2px !important; }
    #webshopPaymentModal .wp-payable-row { display: none !important; }
    #webshopPaymentModal .wp-quick-amount-btn { min-height: 52px !important; height: 52px !important; }
    /* De knop Betaal nu onderaan in het venster zelf, zonder witte balk eromheen, met het bedrag erin. */
    #webshopPaymentModal .wp-footer { position: static !important; box-shadow: none !important; background: transparent !important; padding: 4px 10px 0 !important; height: auto !important; }
    #webshopPaymentModal .wp-footer-right { width: 100% !important; max-width: none !important; flex: 1 1 auto !important; }
    #webshopPaymentModal #webshopPayConfirmButton { border-radius: 14px !important; min-height: 56px !important; height: 56px !important; font-size: 18px !important; }
    #webshopPaymentModal #webshopPayConfirmButton span, #webshopPaymentModal #webshopPayConfirmButton #webshopPayButtonAmount { display: inline !important; }
}

/* ===== De kop van de kassa-indeling (_POSLayout, #topbar-menu.jm-poskop) op tablet staand en telefoon =====
   (R5 LOOP RESTAURANT, 03-10-2026; gevonden bij R2/R4.) Op 768 staand liep de kop 300 px buiten het scherm (logo, plus,
   Reserveringen, Floorplan, Kassa, bonzoeker, tandwiel en het Jimani-logo naast elkaar). Op 375 stond het tandwiel midden
   in de kop (pos.css zet .header-right daar absoluut in het midden) bovenop de plus: het actieve item "Floorplan" (dat
   onder de plus staat) zag eruit als een leeg wit vakje. Responsive-regelset: alles op een regel, niets buiten beeld. */
@media (max-width: 1100px) {
    #topbar-menu.jm-poskop { padding-left: 12px !important; padding-right: 12px !important; gap: 8px; }
    #topbar-menu.jm-poskop .header-center { flex: 1 1 auto; min-width: 0; }
    #topbar-menu.jm-poskop .header-center > nav.top-menu ul { gap: 6px !important; }
    #topbar-menu.jm-poskop .header-center > nav.top-menu > ul > li:not(.kop-plus) { padding: 8px 10px; }
    #topbar-menu.jm-poskop .bon-zoeken { margin-left: 8px; padding: 4px 10px; }
    #topbar-menu.jm-poskop .bon-zoeken input { width: 92px; }
    /* Met een klantlogo links stond het Jimani-logo rechts er nog eens bij; op een smal scherm weg (zoals op de handheld). */
    #topbar-menu.jm-poskop .header-right .logo { display: none !important; }
}

@media (max-width: 767px) {
    #topbar-menu.jm-poskop .header-center { display: flex !important; justify-content: flex-end; }
    #topbar-menu.jm-poskop .header-right { position: static !important; left: auto !important; transform: none !important; }
}

/* De plus brandt als je op een van zijn pagina's bent (op de telefoon ook Reserveringen en Floorplan): gevuld in de kleur
   van het actieve kopitem, niet alleen een blauwe rand om een wit vakje. */
#topbar-menu.jm-poskop nav.top-menu > ul > li.kop-plus-actief .handheld-plus,
#topbar-menu nav.top-menu > ul > li.kop-plus-actief .handheld-plus {
    background: var(--jm-kop-accent, #0d6efd);
    border-color: var(--jm-kop-accent, #0d6efd);
    color: #fff;
}

/* Op de handheld staat de plus links (handheld-kop.js); ook die brandt op een van zijn pagina's (Floorplan, Reserveringen). */
.handheld-plushouder.kop-plus-actief .handheld-plus {
    background: var(--jm-kop-accent, #0d6efd);
    border-color: var(--jm-kop-accent, #0d6efd);
    color: #fff;
}

/* ===== Kopknoppen: zweven is precies actief (Martijn 05-10-2026, T78) =====
   Elke knop in de kop (plus, Reserveringen, Floorplan, Kassa en de knoppen van de andere modules) reageert bij zweven en
   actief hetzelfde: het volle vlak in zijn kleur, witte tekst, icoon ongewijzigd, zelfde vorm en maat. Geen lichtere
   zweeftint meer, en geen wit vakje om "Kassa" (de oude regel .top-menu li.current-page:hover span in de modulestijlen).
   De kleur: een knop met data-kop-kleur houdt die (restaurant oranje, kassa blauw, 03-10-2026), de rest de modulekleur
   van de kop (.top-menu .current-page in de modulestijl). Geen tekstselectie bij (dubbel)klikken; een focusring alleen
   bij het toetsenbord. */
body { --jm-kopkleur: #0d6efd; }
body.jm-module-horeca, body.jm-module-restaurant { --jm-kopkleur: #F37120; }
body.jm-module-activiteiten, body.jm-module-hotel { --jm-kopkleur: #00DC1B; }
body.jm-module-salon { --jm-kopkleur: #0C4B33; }
body.jm-module-ticketing { --jm-kopkleur: #9600DC; }

#topbar-menu nav.top-menu > ul > li {
    --jm-kopvlak: var(--jm-kopknop, var(--jm-kopkleur, #0d6efd));
    -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
#topbar-menu nav.top-menu > ul > li[data-kop-kleur] { --jm-kopknop-zweef: var(--jm-kopknop); }
#topbar-menu nav.top-menu > ul > li:not(.kop-plus):hover,
#topbar-menu nav.top-menu > ul > li:not(.kop-plus).current-page {
    background-color: var(--jm-kopvlak) !important;
    color: #fff !important;
}
#topbar-menu nav.top-menu > ul > li:not(.kop-plus):hover a,
#topbar-menu nav.top-menu > ul > li:not(.kop-plus):hover span:not(.notificationSpanCount),
#topbar-menu nav.top-menu > ul > li:not(.kop-plus):hover label,
#topbar-menu nav.top-menu > ul > li:not(.kop-plus):hover .jm-menulabel,
#topbar-menu nav.top-menu > ul > li:not(.kop-plus):hover svg,
#topbar-menu nav.top-menu > ul > li:not(.kop-plus).current-page a,
#topbar-menu nav.top-menu > ul > li:not(.kop-plus).current-page span:not(.notificationSpanCount),
#topbar-menu nav.top-menu > ul > li:not(.kop-plus).current-page label,
#topbar-menu nav.top-menu > ul > li:not(.kop-plus).current-page .jm-menulabel,
#topbar-menu nav.top-menu > ul > li:not(.kop-plus).current-page svg {
    color: #fff !important;
    background-color: transparent !important;
}
/* Telmeldingen in een kopknop (Bestellingen) houden hun eigen bolletje: span.notificationSpanCount valt hierboven buiten. */

/* De plus: zweven = actief, in de kleur van de kop (--jm-kop-accent: oranje op een restaurantscherm, anders blauw). */
#topbar-menu nav.top-menu > ul > li.kop-plus .handheld-plus:hover,
.handheld-plushouder .handheld-plus:hover {
    background: var(--jm-kop-accent, #0d6efd);
    border-color: var(--jm-kop-accent, #0d6efd);
    color: #fff;
}

/* Geen standaard focuskader na een klik; wel een nette ring bij toetsenbordfocus. */
#topbar-menu nav.top-menu > ul > li a:focus,
#topbar-menu nav.top-menu > ul > li a:active,
.handheld-plus:focus { outline: none; box-shadow: none; }
#topbar-menu nav.top-menu > ul > li a:focus-visible {
    outline: 2px solid var(--jm-kopvlak);
    outline-offset: 4px;
    border-radius: 6px;
}
.handheld-plus:focus-visible {
    outline: 2px solid var(--jm-kop-accent, #0d6efd);
    outline-offset: 2px;
}


/* ================================================================================================
   Mollie Tap-handheld en retail (Martijn 14-10-2026, met foto's van de Tap in een winkel met jurken
   en tassen). Gemeten op 360 breed (Sunmi L3) en 393 breed (Tap). De oorzaken stonden ook op de
   Sunmi, maar daar was nog geen retail met maten en kortingen getest.
   ================================================================================================ */

/* Punt 1. Het kruisje stond ver naar links: een algemene regel ("html body .modal .modal-content >
   .modal-header:not(.jm-venster)", 60 px rechts) houdt ruimte vrij voor een los gezet kruisje, maar hier
   staat het kruisje gewoon in de rij. Vandaar deze zwaardere kiezer. */
html body .modal.handheld-instellingen-venster .modal-content > .modal-header.jm-vorm:not(.jm-venster) {
    padding: 14px 12px 14px 20px !important;
}

    html body .modal.handheld-instellingen-venster .modal-header .handheld-venster-sluiten {
        margin: 0 !important;
    }

.handheld-appversie {
    margin-top: 4px;
    font-size: 12px;
    color: #8a909c;
    text-align: center;
}

/* Punt 4. Een gekozen maat of kleur alleen met de oranje rand, zonder het ovale vinkje. Het vinkje
   stond tussen titel en prijs, en de lichtoranje achtergrond van de spans maakte er een ovaal van.
   Bij supplementen (meer keuzes tegelijk) blijft het vinkje staan. */
#productDetailsModalContent .product-variant-box .supplement-check,
#productDetailsModalContent .product-variant-box.selected .supplement-check {
    display: none !important;
}

#productDetailsModalContent .product-variant-box.selected span {
    background-color: transparent !important;
}

@media (max-width: 600px) {

    /* Punt 2. Geen schuifbalk op een telefoon. activities.css zet op alles "scrollbar-width: thin"
       met een grijze baan. Nieuwere webweergaven (de Tap) tekenen dan een vaste balk in plaats van de
       verdwijnende balk van een telefoon. Schuiven blijft gewoon werken. */
    html, body, * {
        scrollbar-width: none !important;
    }

        ::-webkit-scrollbar {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
        }

    /* Punt 3a. Maten in een raster van drie: de titel boven, de prijs eronder, allebei passend. Het
       vakje was 74 breed met 16 px binnenrand per kant, en de prijs (52 breed) drukte de titel weg tot "X..". */
    #productDetailsModalContent .product-variants-container .product-variant-box {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2px;
        height: auto;
        min-height: 52px;
        padding: 6px 4px;
        white-space: nowrap;
    }

        #productDetailsModalContent .product-variants-container .product-variant-box .supplement-title {
            width: auto;
            max-width: 100%;
            font-size: 15px;
            font-weight: 600;
            text-align: center;
        }

        #productDetailsModalContent .product-variants-container .product-variant-box .supplement-price {
            margin: 0 !important;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 12px;
            color: #6b6b70;
            opacity: 1;
            filter: none;
        }

    /* Punt 3b. Onder in het productvenster: aantal en totaal op een regel, de knop eronder over de hele
       breedte. Het totaal past altijd: het mag krimpen, het aantal niet. */
    .modal-footer.product-modal-footer > .col-md-12 {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 10px 6px;
        width: 100%;
        padding: 0 2px 10px !important;
    }

        .modal-footer.product-modal-footer > .col-md-12 > .quantity-section {
            flex: 0 0 auto !important;
            width: auto !important;
            max-width: none !important;
            margin: 0 !important;
        }

        .modal-footer.product-modal-footer > .col-md-12 > .col-md-4.quantity-section {
            padding: 0 !important;
            gap: 6px;
        }

            .modal-footer.product-modal-footer .quantity-section .btn.range-div {
                width: 38px !important;
                min-width: 38px !important;
                height: 40px;
                flex: 0 0 38px !important;
                margin: 0 !important;
            }

            /* jm-maat-invoer (jimani-velden.css) gaf het vakje 91 breed; daar kwam het totaal niet meer naast. */
            .modal-footer.product-modal-footer .quantity-section input.form-control.jm-maat-invoer,
            .modal-footer.product-modal-footer .quantity-section input.form-control {
                width: 46px !important;
                min-width: 46px !important;
                max-width: 46px !important;
                height: 40px;
                flex: 0 0 46px !important;
                padding: 0 !important;
            }

        .modal-footer.product-modal-footer > .col-md-12 > .col-md-4:not(.quantity-section):not(.price-cart-section) {
            flex: 1 1 0 !important;
            min-width: 0 !important;
            width: auto !important;
            max-width: none !important;
            padding: 0 !important;
        }

            .modal-footer.product-modal-footer > .col-md-12 > .col-md-4:not(.quantity-section):not(.price-cart-section) > div {
                justify-content: flex-end !important;
                flex-wrap: nowrap;
                min-width: 0;
            }

            .modal-footer.product-modal-footer h3 {
                font-size: 15px !important;
                white-space: nowrap;
            }

                /* Het woord "Totaal" kleiner dan het bedrag: het bedrag is wat telt. */
                .modal-footer.product-modal-footer h3.me-2 {
                    font-size: 13px !important;
                    margin-right: 4px !important;
                    color: #6b6b70;
                }

            .modal-footer.product-modal-footer .total-price-value {
                display: flex;
                flex-direction: column-reverse;
                align-items: flex-end;
                line-height: 1.15;
            }

                /* Met een actieprijs: de oude prijs klein en doorgestreept onder de nieuwe, niet ernaast. */
                .modal-footer.product-modal-footer .total-price-value .item-Actualprice,
                .modal-footer.product-modal-footer .total-price-value .item-Actualprice * {
                    font-size: 12px !important;
                    padding: 0 !important;
                }

        .modal-footer.product-modal-footer > .col-md-12 > .price-cart-section {
            flex: 0 0 100% !important;
            width: 100% !important;
            max-width: 100% !important;
            padding: 0 !important;
        }

            .modal-footer.product-modal-footer .add-cart-btn .cart-icon {
                display: none !important;
            }

            .modal-footer.product-modal-footer .add-cart-btn .cart-content,
            .modal-footer.product-modal-footer .add-cart-btn .cart-text,
            .modal-footer.product-modal-footer .add-cart-btn .title {
                position: static !important;
                min-width: 0;
                font-size: 15px !important;
            }

            .modal-footer.product-modal-footer .add-cart-btn {
                width: 100% !important;
                height: 50px;
                justify-content: center;
                padding: 0 12px !important;
                font-size: 15px !important;
                white-space: nowrap;
            }

    /* De bonregel: de naam mag over twee regels, zodat de maat ("Maxi-jurk - M") niet achter puntjes wegvalt. */
    #receiptItems .receipt-item > .col-md-12 > .col-md-3 p,
    #receiptItems .receipt-item > .col-md-12 > .col-md-3 p strong {
        white-space: normal !important;
    }

    #receiptItems .receipt-item > .col-md-12 > .col-md-3 p {
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere;
    }

    /* Punt 5. De bonregel: [ naam ] [ - 1 + ] [ prijs ] [ prullenbak ], met de prijs in een vaste
       kolom. Een prijs van wisselende breedte duwde de aantalvakjes heen en weer. Bij een korting staat
       de oude prijs klein en doorgestreept onder de nieuwe, binnen die kolom. Erboven viel hij bij de
       eerste regel buiten beeld (punt 8). */
    .receipt-item > .col-md-12 {
        grid-template-columns: minmax(0, 1fr) auto 64px 40px !important;
    }

    /* Een diversen-regel onder een product ("1 x Korting: est", met opmerking) in dezelfde prijs- en prullenbakkolom als de
       productregel erboven (Martijn 26-10-2026): zelfde breedtes 64 en 40. */
    #receiptItems .receipt-item .supplement-table > .diverse-item {
        grid-template-columns: minmax(0, 1fr) 64px 40px !important;
        column-gap: 4px !important;
    }

        #receiptItems .receipt-item .supplement-table > .diverse-item > .col-md-1 {
            justify-self: end !important;
        }

        /* Zelfde vak als de prullenbak van de productregel (56 breed, over de kolom heen naar links), dan staat het icoon er recht onder. */
        #receiptItems .receipt-item .supplement-table > .diverse-item .delete-item {
            width: 56px !important;
        }

        #receiptItems .receipt-item .supplement-table > .diverse-item > .formatted-price {
            min-width: 0 !important;
        }

        .receipt-item > .col-md-12 > .formatted-price {
            justify-content: flex-end !important;
            text-align: right;
        }

    .receipt-item .webshop-price-with-original {
        display: inline-flex !important;
        flex-direction: column-reverse;
        align-items: flex-end;
        line-height: 1.15;
        position: static !important;
    }

        .receipt-item .webshop-price-with-original .webshop-original-price {
            position: static !important;
            transform: none !important;
            font-size: 10px !important;
            color: #8a909c;
            margin: 0 !important;
        }

    /* Punt 5. De kortingen weer met hun naam ("Winter actie 20%") in plaats van alleen een "%". Met
       meer kortingen in de winkel wist niemand welke welke was. Ze staan op een eigen regel onder het
       product, dus de naam kost de productnaam niets. */
    .receipt-item > .webshop-item-discount-list {
        display: flex !important;
        flex-wrap: wrap;
        gap: 6px;
        margin: 2px 0 6px !important;
    }

    .receipt-item .webshop-item-discount-btn {
        font-size: 12px !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 28px !important;
        padding: 0 10px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .receipt-item .webshop-item-discount-btn::after {
            content: none !important;
        }

    /* Punt 6. Diversen: het aantal en de prijs naast elkaar. */
    #WebshoOrdersDiverseModal .diverse-product-grid {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        gap: 12px 10px !important;
    }

        #WebshoOrdersDiverseModal .diverse-product-grid > div:first-child {
            grid-column: 1 / -1;
        }

        #WebshoOrdersDiverseModal .diverse-product-grid .diverse-field-label.text-center {
            text-align: left !important;
        }

        #WebshoOrdersDiverseModal .diverse-product-grid .diverse-qty-btn {
            width: 40px;
            min-width: 40px;
        }

        #WebshoOrdersDiverseModal .diverse-product-grid .diverse-qty-wrap {
            width: auto !important;
            max-width: none !important;
            gap: 6px;
        }

        #WebshoOrdersDiverseModal .diverse-product-grid input.diverse-qty-input,
        #WebshoOrdersDiverseModal .diverse-product-grid input.diverse-qty-input.jm-maat-invoer {
            width: 48px !important;
            min-width: 48px !important;
            max-width: 48px !important;
            flex: 0 0 48px !important;
        }
}

/* Een heel smal scherm (320, oudere telefoons): het woord "Totaal" weg, het bedrag blijft naast het aantal. */
@media (max-width: 350px) {
    .modal-footer.product-modal-footer h3.me-2 {
        display: none !important;
    }

    .modal-footer.product-modal-footer .add-cart-btn,
    .modal-footer.product-modal-footer .add-cart-btn .title {
        font-size: 14px !important;
    }

    #WebshoOrdersDiverseModal .diverse-product-grid .diverse-qty-btn {
        width: 36px !important;
        min-width: 36px !important;
    }
}

/* Vensters zonder in- en uitschuiven op de kassa (handheld, kassa-app, layout=pos).

   Martijn 14-10-2026, op de Mollie Tap: "elke knop duurt ongeveer 1 seconde". Een Bootstrap-venster schuift 0,3 s in en
   0,3 s uit, de achtergrond doet daar nog eens 0,15 s bij. Op een kassa is dat bij elk productvenster, elk betaalvenster
   en elk keer sluiten wachttijd: de knoppen erin doen pas iets als het venster stilstaat. Gemeten op een nagebootste Tap:
   betalen openen 830 ms, venster sluiten 440 ms. Zonder overgang staat het venster er meteen; Bootstrap wacht dan ook
   niet meer op het einde van de overgang. */
body.jm-kassaweergave .modal.fade,
body.jm-kassaweergave .modal.fade .modal-dialog,
body.jm-kassaweergave .modal-backdrop.fade {
    transition: none !important;
}

/* Zoek bestelling in de kop van de handheld, naast Kassa (handheld-kop.js, houdInDeBalk). Met tekst zolang alles op één
   regel past; past het niet, dan zet het script kop-zoek-icoon en blijft alleen het icoon over. (Martijn 14-10-2026) */
body.jm-handheld #topbar-menu nav.top-menu li.kop-zoek > a { white-space: nowrap; }
body.jm-handheld #topbar-menu nav.top-menu li.kop-zoek-icoon > a .nav-text { display: none !important; }
body.jm-handheld #topbar-menu nav.top-menu li.kop-zoek-icoon > a img { margin-right: 0 !important; }

/* Aanmelden/Afmelden en Uitloggen in het menu van de handheld (_HandheldLayout, Martijn 15-10-2026): het pictogram van Aanmelden is een
   lettertype-icoon op de maat van de plaatjes ernaast, en de naam van wie is aangemeld staat klein onder het woord. */
.header-center .top-menu li i.menu-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #2b2f38 !important;
}

/* Aanmelden/Afmelden en Uitloggen als compacte icoonknoppen (de naam en het opschrift staan in title en aria-label), zodat de balk op een
   smal scherm niet zijwaarts schuift. Past het toch niet, dan breekt de balk af over twee regels. */
#topbar-menu .top-menu ul li.menu-icoon {
    flex: 0 0 auto;
    min-width: 44px;
}

    #topbar-menu .top-menu ul li.menu-icoon .menu-text,
    #topbar-menu .top-menu ul li.menu-icoon .menu-naam {
        display: none !important;
    }

@media (max-width: 480px) {
    #topbar-menu .top-menu ul {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Op de smalste schermen (360) iets minder ruimte om de knoppen, zodat alle zes op een regel passen. */
@media (max-width: 400px) {
    .header-center .top-menu li a {
        padding: 4px 4px !important;
    }

    #topbar-menu .top-menu ul li.menu-icoon {
        min-width: 0;
    }
}

/* ===== Retailkassa op de handheld: alleen Kassa (Martijn 28-10-2026) =====
   Geen Bestellingen, geen plus, geen Kassa-knop in de kop (je zit altijd in de kassa). Links de categoriekiezer (naam met pijltje),
   rechts het klantlogo, op dezelfde regel. Horeca en andere kassa's blijven zoals ze waren (#topbar-menu.jm-retailkop komt alleen
   uit _POSLayout bij een retailkassa). */
@media (max-width: 991px) {
    #topbar-menu.jm-retailkop .header-center,
    #topbar-menu.jm-retailkop .handheld-plushouder,
    #topbar-menu.jm-retailkop #handheldPlus,
    #topbar-menu.jm-retailkop nav.top-menu > ul > li.kop-plus { display: none !important; }
    #topbar-menu.jm-retailkop .header-left { display: flex !important; align-items: center; flex: 1 1 auto; min-width: 0; width: auto; gap: 8px; }
    #topbar-menu.jm-retailkop .jm-retailkop-categorie { order: 0; flex: 1 1 auto; min-width: 0; cursor: pointer; overflow: hidden; }
    #topbar-menu.jm-retailkop .jm-retailkop-categorie h3 { font-size: 16px !important; margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #topbar-menu.jm-retailkop .jm-retailkop-categorie > .d-flex::after { content: "\25BE"; margin-left: 6px; font-size: 14px; color: #6c757d; }
    #topbar-menu.jm-retailkop .header-left > .d-flex { order: 1; margin-left: auto; flex: 0 0 auto; }
}

/* Retailkop in de gewone _Layout (handheld zonder POS-apparaattype): geen hamburger, geen uitlogknop; logo rechts. */
@media (max-width: 991px) {
    #topbar-menu.jm-retailkop #sidebarOpenCloseButton,
    #topbar-menu.jm-retailkop #userLogoutButton { display: none !important; }
    #topbar-menu.jm-retailkop .header-left > img.klantlogo { order: 1; margin-left: auto; flex: 0 0 auto; }
}

/* Een telmelding zonder getal is nooit zichtbaar (leeg oranje/wit vakje naast Bestellingen, 31-10-2026); een getal is altijd leesbaar. */
#topbar-menu .notificationSpanCount:empty,
.notificationSpanCount:empty { display: none !important; }
#topbar-menu nav.top-menu > ul > li .notificationSpanCount:not(:empty) { background-color: #F37120 !important; color: var(--jm-tekst-op-accent, #1A1A1A) !important; }
#topbar-menu nav.top-menu > ul > li.current-page .notificationSpanCount:not(:empty) { background-color: #fff !important; color: #0086EC !important; }

/* Q02b (02-11-2026): zichtbare focus op elementen die jimani-toetsenbordklik.js bedienbaar maakt (tegel, kaart, rij, balk). */
[data-jm-toets]:focus-visible {
    outline: 2px solid var(--jm-kop-accent, #0d6efd);
    outline-offset: 2px;
}

/* ---- Venster Instellingen achter het logo: de tegels en de taal (besluit Martijn 07-11-2026) ----------------------------------------
   Het tandwiel is op handheld en telefoon weg; de tegels van PosSettings (_Instellingentegels) staan nu in dit venster. Alle tegels exact
   even groot: een raster van drie gelijke kolommen, elk vak vierkant, het label eronder op twee regels vaste hoogte. Het venster opent
   alleen onder de 600 breed (jimani-handheld.js), dus deze regels ook. */
@media all { /* Het venster Instellingen is op elke breedte in de huisstijl (Martijn 11-11-2026); was alleen onder de 600 breed */
    .handheld-instellingen-venster .handheld-instelinhoud { display: contents; }
        .handheld-instellingen-venster .handheld-instelinhoud > [data-hh-deel="knoppen"] { display: contents; }
        /* Het venster schuift (vaste hoogte, flexkolom): niets mag krimpen, anders werd de taalregel 0 hoog. */
        .handheld-instellingen-venster .handheld-instelinhoud > *, .handheld-instellingen-venster .handheld-instelinhoud > [data-hh-deel="knoppen"] > * { flex-shrink: 0; }

    .handheld-instellingen-venster .card-container.handheld-tegels {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px 10px !important;
        width: 100%;
        margin: 4px 0 0 !important;
        padding: 0 !important;
        background: none !important;
        border-radius: 0 !important;
    }
        .handheld-instellingen-venster .handheld-tegels > a { display: block; min-width: 0; color: inherit; text-decoration: none; }
        .handheld-instellingen-venster .handheld-tegels .custom-card {
            display: flex !important;
            flex-direction: column;
            width: 100% !important;
            height: auto !important;
            aspect-ratio: auto !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
            background: none !important;
            box-shadow: none !important;
        }
        .handheld-instellingen-venster .handheld-tegels .card-header {
            position: relative;
            display: flex !important;
            align-items: center;
            justify-content: center;
            width: 100% !important;
            height: auto !important;
            aspect-ratio: 1 / 1;
            margin: 0 !important;
            padding: 0 !important;
            border: 1px solid #6b6b70 !important;
            border-radius: 16px !important;
            background: #fff !important;
            overflow: hidden;
        }
            .handheld-instellingen-venster .handheld-tegels .placeholder-icon { display: flex; align-items: center; justify-content: center; width: 56%; height: 56%; margin: 0 !important; }
                .handheld-instellingen-venster .handheld-tegels .placeholder-icon img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: contain; }
            .handheld-instellingen-venster .handheld-tegels .info-wrapper { padding: 4px !important; }
                .handheld-instellingen-venster .handheld-tegels .info-btn-settings { width: 22px; height: 22px; padding: 0 !important; margin: 0 !important; background-size: 18px 18px; }
                .handheld-instellingen-venster .handheld-tegels .info-content-settings { min-width: 160px; }
            .handheld-instellingen-venster .handheld-tegels .ribbon-new { display: none; }
        .handheld-instellingen-venster .handheld-tegels .card-footer {
            display: -webkit-box !important;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            height: calc(2 * var(--hh-regel, 16px));
            margin: 6px 0 0 !important;
            padding: 0 !important;
            border: 0 !important;
            background: none !important;
            text-align: center;
            line-height: var(--hh-regel, 16px);
            font-size: 14px;
            font-weight: 400;
            color: #2b2f38;
            hyphens: auto;
            -webkit-hyphens: auto;
            overflow-wrap: anywhere;
        }

    /* Taal: het vlaggetje en de keuzelijst op een regel. */
    .handheld-instellingen-venster .handheld-taal { background: none !important; display: flex !important; align-items: center; gap: 10px; width: 100%; height: auto !important; min-width: 0; margin: 0; }
        .handheld-instellingen-venster .handheld-taal-label { display: inline-flex !important; align-items: center; gap: 6px; flex: 0 0 auto !important; width: auto !important; margin: 0 !important; }
    html body .modal.handheld-instellingen-venster .modal-dialog { max-width: min(500px, calc(100vw - 16px)) !important; width: auto; }
        .handheld-instellingen-venster .handheld-taal .jm-keuze { flex: 1 1 auto; width: auto; min-width: 0; }
        .handheld-instellingen-venster .handheld-taal-keuze { flex: 1 1 auto; width: auto !important; min-width: 0; max-width: 100%; height: 44px; font-size: 16px; }

    /* Een linkerlijn voor alles in het venster (Martijn 07-11-2026): de titel, wie er is ingelogd, de taal, Geluiden met de vragen, de versie
       en het klantnummer beginnen waar de knoppen en tegels beginnen; de Ja/Nee, de keuzelijst van de taal, de knoppen en de tegels eindigen op
       dezelfde rechterlijn. De kop had 20 links (de inhoud 12, en in de kassa-indeling 24/28), Geluiden had een eigen rand van 24, de Ja/Nee
       stonden onder de vraag en het klantnummer in het midden. */
    html body .modal.handheld-instellingen-venster .modal-content > .modal-header.jm-vorm:not(.jm-venster) { padding-left: 12px !important; padding-right: 12px !important; }
    html body .modal.handheld-instellingen-venster .modal-content > .modal-body.jm-vorm { padding-left: 12px !important; padding-right: 12px !important; }
    .handheld-instellingen-venster .modal-body .handheld-taal::before,
    .handheld-instellingen-venster .modal-body .handheld-taal::after { content: none !important; display: none !important; }
    .handheld-instellingen-venster .modal-body .handheld-taal-keuze { flex: 1 1 0 !important; margin-right: 0 !important; }
    .handheld-instellingen-venster .modal-body .jm-bestelgeluid-instelling { width: 100%; max-width: none; padding: 0; margin: 4px 0 0; }
        .handheld-instellingen-venster .modal-body .jm-bestelgeluid-kop { margin: 0 0 8px; }
        .handheld-instellingen-venster .modal-body .jm-bestelgeluid-regel { flex-wrap: wrap; }
        .handheld-instellingen-venster .modal-body .jm-bestelgeluid-label { flex: 1 1 0; min-width: 0; }
        .handheld-instellingen-venster .modal-body .jm-bestelgeluid-regel .jm-janee { margin-left: auto; }
    .handheld-instellingen-venster .modal-body .handheld-appversie { text-align: left; }
}

/* Instellingentegels op een aanraakscherm (iPhone 102472, 07-11-2026: een tik op Dagafsluiting deed niets, lang indrukken toonde de link).
   .card:hover (activities.css, custom.css) laat een ::after van onzichtbaar naar zichtbaar overgaan en schaalt de tegel. iOS ziet bij de eerste tik
   dan een hover die iets zichtbaar maakt en houdt de klik in. Op een scherm zonder hover (vinger) geen hover-effect op deze tegels; met een muis
   blijft alles zoals het was. Geldt voor het tandwielscherm (tablet, kassa) en het venster achter het logo. */
@media (hover: none) {
    .card-container .custom-card.card::after { content: none !important; display: none !important; }
    .card-container .custom-card.card:hover { transform: none !important; box-shadow: none !important; will-change: auto !important; }
}