/* Eén opmaak per soort veld: prijs, aantal, datum, tijd.
 *
 * Waarom dit bestand bestaat
 * --------------------------
 * Gemeten op 07-09-2026 in Jimani.MVC/Views: een prijsveld kwam in 13 verschillende vormen voor
 * over 33 bestanden, een aantalveld in 9 vormen over 52 bestanden, een datumveld in 12 vormen over
 * 100 bestanden en een tijdveld in 23 vormen over 138 bestanden. In Zoek bestelling stond het
 * euroteken in een eigen vakje naast een veld dat zo breed was als de kolom; op de kassa bij
 * Diversen staat hetzelfde teken ín het veld. Dat is hetzelfde soort gegeven en het hoort er dus
 * hetzelfde uit te zien.
 *
 * De maat komt van Diversen op de kassa. Dat is de referentie die Martijn heeft aangewezen,
 * 07-09-2026.
 *
 * Waarom een apart bestand en niet in custom.css
 * ----------------------------------------------
 * Dezelfde opmaakregels staan negen keer in het systeem: custom.css, pos.css, handheld.css,
 * hotel.css, ticketing.css, activities.css, activities.css, Appointment.css en webshop-neworder.css.
 * Welke daarvan wordt geladen hangt af van de module. Eén vorm afspreken heeft geen zin zolang
 * dezelfde klasse in negen bestanden iets anders kan betekenen. Dit bestand wordt in elke layout
 * als laatste geladen en wint dus van alle negen.
 *
 * Zolang de dubbele opmaak niet is opgeruimd is dit de enige plek waar de maat van een veld staat.
 * Zet er niets bij dat niet over een veld gaat.
 */

/* --- de maten, op één plek ------------------------------------------------------------------- */
:root {
    --veld-hoogte: 40px;
    --veld-rand: #d7dce5;
    --veld-hoek: 8px;
    --veld-letter: 14px;
    --veld-tekst: #2b2f38;
    --veld-grijs: #8b8b95;
    --veld-focus: #2f80ff;

    /* De breedte van een prijsveld. Gemeten bij Diversen op de kassa: 154. Afgerond op 160, dat is
     * ruim genoeg voor een bedrag met duizendtallen. */
    --veld-prijs-breedte: 160px;
    --veld-aantal-breedte: 90px;
    /* 150 was te krap: de datum werd afgekapt tot "09-08-202". Gemeld door Martijn met een
     * schermafbeelding, 09-09-2026; hij vroeg om ongeveer anderhalve centimeter erbij. Dat is 57px
     * bij 96 dpi, afgerond op 205. Nog een keer gemeld: er moest nog een centimeter bij, samen 243. Alleen het vak wordt breder; de min en de plus staan ernaast en
     * blijven zoals ze waren. */
    --veld-datum-breedte: 223px;
    --veld-tijd-breedte: 110px;
}

/* Het opschrift boven een veld. Ook dat verschilde per scherm: bij Diversen 12px vet grijs, in
 * Zoek bestelling de gewone control-label. Eén vorm, hier. (07-09-2026) */
.jimani-veld-label,
.diverse-field-label {
    display: block;
    font-size: 12px;
    font-weight: 700;

    /* Zwart, niet grijs. Grijs is de kleur van een tijdelijke tekst in een leeg veld; een opschrift
     * boven een veld is dat niet. Eerst alleen in Zoek bestelling gedaan, en op 08-09-2026 heeft
     * Martijn gezegd dat het overal mag. */
    color: var(--veld-tekst);
    margin-bottom: 6px;
}

/* --- prijs --------------------------------------------------------------------------------------
 *
 * Eén vak met het valutateken erin, links, grijs. Zo schrijf je een bedrag op, en het is één ding
 * in plaats van twee vakjes tegen elkaar.
 *
 * Markup:
 *   <div class="jimani-prijs">
 *       <span class="jimani-prijs-teken">€</span>
 *       <input type="text" inputmode="decimal" class="jimani-prijs-invoer" placeholder="0,00" />
 *   </div>
 */
.jimani-prijs {
    display: flex;
    align-items: center;

    /* Een bedrag is kort. Het veld hoort dus niet mee te rekken met de kolom waar het toevallig in
     * staat: in Zoek bestelling was het daardoor twee keer zo breed als bij Diversen, terwijl er
     * hetzelfde in komt. Gemeten 07-09-2026: Diversen 154 breed, Zoek bestelling ruim 300.
     * Gemeld door Martijn. */
    width: var(--veld-prijs-breedte);
    max-width: 100%;

    height: var(--veld-hoogte);
    border: 1px solid var(--veld-rand);
    border-radius: var(--veld-hoek);
    overflow: hidden;
    background: #fff;
}

.jimani-prijs-teken {
    padding: 0 4px 0 12px;

    /* Zwart, niet grijs. Grijs leest als "hier staat niets" -- dat is de kleur van een tijdelijke
     * tekst in een leeg veld, en het valutateken is geen tijdelijke tekst.
     * Gevraagd door Martijn, 08-09-2026. */
    color: var(--veld-tekst);
    font-size: var(--veld-letter);
    flex-shrink: 0;
}

.jimani-prijs-invoer {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 8px 12px 8px 0;
    font-size: var(--veld-letter);
    color: var(--veld-tekst);
    background: #fff;
    outline: none;
}

.jimani-prijs:focus-within {
    border-color: var(--veld-focus);
    box-shadow: 0 0 0 3px rgba(47, 128, 255, 0.08);
}

.jimani-prijs .jimani-prijs-invoer:focus {
    border: 0;
    box-shadow: none;
}

/* Een prijsveld zonder omhulling -- die staan er nog tientallen -- krijgt tenminste dezelfde maat,
 * rand en letter. Het valutateken ontbreekt daar; die plekken gaan één voor één om. */
input.pricetxt,
input.decimal-input,
input.jimani-product-price-input {
    height: var(--veld-hoogte);
    border: 1px solid var(--veld-rand);
    border-radius: var(--veld-hoek);
    font-size: var(--veld-letter);
    color: var(--veld-tekst);
}

/* Staat het teken al ín de omhulling, dan hoort de rand van het invoervak weg: anders zie je een
 * vak in een vak. */
.jimani-prijs input.pricetxt,
.jimani-prijs input.decimal-input,
.jimani-prijs input.jimani-product-price-input {
    height: 100%;
    border: 0;
    border-radius: 0;
}

/* Het teken in een bootstrap-omhulling: geen eigen rand en geen eigen achtergrond, zodat het
 * onderdeel is van het veld en niet een tweede vakje ernaast. */
.jimani-prijs .input-group-text,
.input-group .jimani-prijs-teken {
    border: 0;
    background: transparent;
    color: var(--veld-tekst);
    padding: 0 4px 0 12px;
}

/* Elk invoervak binnen de omhulling geeft zijn eigen rand op.
 *
 * De omgezette velden hielden hun oude klassen -- form-control, border-black, decimal-input -- en
 * die tekenen allemaal hun eigen rand. Binnen de omhulling zie je dan een vak in een vak. Deze
 * regel geldt voor alles wat erin staat, ongeacht welke klassen eraan hangen. (07-09-2026) */
.jimani-prijs > input {
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 8px 12px 8px 0 !important;
}

/* Het logo van de klant in de balk bovenaan.
 *
 * In het dashboard links, naast het menuknopje; op de kassa rechts, naast Bijwerken en
 * Instellingen. Vaste hoogte en vrije breedte: een logo is breed of vierkant, en het mag de balk
 * niet uit elkaar duwen. Gevraagd door Martijn, 07-09-2026.
 *
 * Even hoog als het Jimani-logo rechtsboven. Gemeld door Martijn, 07-09-2026: het klantlogo stond
 * te klein.
 *
 * Allebei dezelfde maat, en die staat op een plek. Het Jimani-logo stond op 60% van zijn vak; dat
 * kwam op 33 uit. Het klantlogo kon die 60% niet volgen, want zijn vak heeft geen vaste hoogte en
 * dan valt een percentage terug op het formaat van het plaatje zelf -- 254 hoog, dwars door de balk
 * heen. Vandaar een getal, voor allebei hetzelfde. */
.klantlogo,
.logoJimani {
    height: var(--kop-logo-hoogte, 33px) !important;
    width: auto;
    object-fit: contain;
}

.klantlogo {
    max-width: 160px;
    margin-left: 12px;
}

/* Het logo van de klant onderaan het linkermenu.
 *
 * In de balk bovenaan staat het klein naast het menuknopje; onderaan het menu is ruimte, dus daar
 * mag het groter. Gevraagd door Martijn, 08-09-2026.
 *
 * Het menu schuift open en dicht; het logo hoort onderaan te blijven staan en niet mee te schuiven
 * met de lijst erboven. */
/* Het menu is een kolom over de volle hoogte; dan kan het logo onderaan blijven staan in plaats
 * van vlak onder de laatste menu-item. */
.animate-menu-left .side-menubar {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.klantlogo-in-het-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 12px 24px;

    /* Alles erboven duwt dit naar de onderkant. */
    margin-top: auto;
}

    .klantlogo-in-het-menu img {
        /* Ongeveer verdubbeld ten opzichte van de eerste versie: 48 was te bescheiden voor de
         * ruimte die er is. Gevraagd door Martijn, 08-09-2026. De uitlijning aan de onderkant
         * blijft zoals hij was. */
        height: var(--menu-logo-hoogte, 96px);
        width: auto;
        max-width: 80%;
        object-fit: contain;
    }

/* De versieregel onderaan het instellingenscherm van de kassa.
 *
 * Lichtgrijs en klein: het hoort er te staan als je het zoekt, en verder niet op te vallen.
 * Draait de kassa in een browser dan blijft de regel leeg, en dan mag hij ook geen ruimte pakken.
 * Gevraagd door Martijn, 07-09-2026. */
.kassa-versieregel {
    color: #6b7280;
    font-size: 13px;
    white-space: nowrap;
    text-align: left;
}

.kassa-versieregel:empty {
    display: none;
}

/* Taal, de aangesloten USB-apparaten en Uitloggen, rechtsboven op het instellingenscherm.
 *
 * Ze stonden als blokjes tussen de tegels van de winkel, terwijl ze bij dit ene apparaat horen.
 * Naast elkaar op een regel. Gevraagd door Martijn, 07-09-2026. */
.kassa-apparaatmenu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap !important;
    flex: 0 0 auto;
    align-items: center;
    gap: 1.75rem;
    margin: 0;
    padding: 0;
    width: auto;
    min-width: max-content;
}

.kassa-apparaatmenu > a {
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.2;
    color: #2a3142;
    text-decoration: none;
    cursor: pointer;
}

.kassa-apparaatmenu > a:hover {
    color: #1b74e4;
}

.kassa-apparaatmenu > a > span {
    white-space: nowrap;
}

.kassa-apparaatmenu .menu-icons {
    width: 22px;
    height: 22px;
    margin: 0;
}

/* Het vlaggetje van de taal die aanstaat. Kan een toestel de vlag niet tekenen, dan blijven de
   twee letters van het land staan -- ook goed. */
.kassa-vlag {
    font-size: 18px;
    line-height: 1;
}

/* Het waarschuwingsoverzicht: drie zwaartes.
 *
 * Een product zonder btw-tarief is iets anders dan een categorie zonder foto. Rood betekent dat de
 * winkel iets anders verkoopt dan hij denkt, oranje dat het geld kost of misgaat bij de klant,
 * grijs dat het er niet uitziet maar dat er niets stukgaat. Gevraagd door Martijn, 07-09-2026. */
.waarschuwing-groepkop {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 1rem 0 0.5rem;
}

.waarschuwing-groepkop:first-child {
    margin-top: 0;
}

.waarschuwing-regel {
    border-left: 4px solid transparent;
    padding-left: 0.75rem;
}

.waarschuwing-rood { color: #c02a2a; }
.waarschuwing-regel.waarschuwing-rood { border-left-color: #c02a2a; }

.waarschuwing-oranje { color: #c47510; }
.waarschuwing-regel.waarschuwing-oranje { border-left-color: #e8961f; }

.waarschuwing-grijs { color: #6b7280; }
.waarschuwing-regel.waarschuwing-grijs { border-left-color: #c4cad4; }

/* De tekst van de regel zelf blijft gewoon leesbaar; alleen het streepje links en de groepskop
   dragen de kleur. */
.waarschuwing-regel label {
    color: #2a3142;
}

/* --- aantal ----------------------------------------------------------------------------------- */
/* Eén vorm voor een aantalveld.
 *
 * De maat is het aantalveld bij Diversen op de kassa: 40 hoog, rand #d7dce5, hoek 8, de waarde in
 * het midden. Overal elders stonden aantallen in een veld dat net iets anders was -- een andere
 * hoogte, een scherpe hoek, of een veld dat over de halve pagina liep terwijl er twee cijfers in
 * gaan. Gevraagd door Martijn (W4).
 *
 * Een veld dat bewust de volle breedte pakt (w-100) blijft breed; dat is meestal een kolom in een
 * tabel en die hoort mee te schalen. De pijltjes van de browser blijven staan: zonder een eigen min
 * en plus ernaast is dat de enige manier om er met de muis aan te draaien. (07-09-2026) */
input[type="number"]:not(.d-none):not([hidden]),
.jimani-aantal {
    height: var(--veld-hoogte);
    border: 1px solid var(--veld-rand) !important;
    border-radius: var(--veld-hoek) !important;
    font-size: var(--veld-letter);
    text-align: center;
    padding: 0 8px;
    background: #fff;
}

input[type="number"]:not(.d-none):not([hidden]):not(.w-100):not(.form-control-lg),
.jimani-aantal {
    width: var(--veld-aantal-breedte);
}

input[type="number"]:focus,
.jimani-aantal:focus {
    border-color: #2f80ff !important;
    box-shadow: 0 0 0 3px rgba(47, 128, 255, 0.08);
    outline: 0;
}

/* Het aantalveld op de kassa hoort bij zijn min en plus en houdt zijn eigen maat. */
.diverse-qty-wrap input[type="number"],
.diverse-qty-input {
    width: 42px !important;
    height: 34px !important;
}

/* --- datum en tijd ---------------------------------------------------------------------------- */
/* Eén vorm voor een datum- en een tijdveld.
 *
 * Dezelfde maat als de rest: 40 hoog, rand #d7dce5, hoek 8. Een datumveld is breder dan een
 * tijdveld, want er staat een heel jaartal in.
 *
 * Dit gaat over de vorm van het vak. Welke kalender eruit komt is een tweede: op de meeste schermen
 * is dat de eigen kalender (jimanidatepicker.js), op zesenzestig plekken nog die van de browser.
 * Die twee gelijktrekken raakt niet alleen de opmaak maar ook wat er wordt weggeschreven -- de
 * browser stuurt 2026-09-07 en de eigen kalender 07/09/2026 -- en dat moet per scherm worden
 * nagekeken. Zie W4 in TAKEN.md. (07-09-2026) */
input[type="date"]:not(.d-none):not([hidden]),
input[type="time"]:not(.d-none):not([hidden]),
.datepicker-input,
.jimani-datum,
.jimani-tijd {
    height: var(--veld-hoogte);
    border: 1px solid var(--veld-rand) !important;
    border-radius: var(--veld-hoek) !important;
    font-size: var(--veld-letter);
    padding: 0 10px;
    background: #fff;
}

input[type="date"]:not(.d-none):not([hidden]):not(.w-100),
.jimani-datum {
    width: var(--veld-datum-breedte);
}

input[type="time"]:not(.d-none):not([hidden]):not(.w-100),
.jimani-tijd {
    width: var(--veld-tijd-breedte);
}

input[type="date"]:focus,
input[type="time"]:focus,
.jimani-datum:focus,
.jimani-tijd:focus {
    border-color: #2f80ff !important;
    box-shadow: 0 0 0 3px rgba(47, 128, 255, 0.08);
    outline: 0;
}

/* Een datumveld met een kalendertje ervoor.
 *
 * Gemeld door Martijn met een schermafbeelding, 09-09-2026: de datum werd afgekapt tot "09-08-202",
 * het jaartal viel eraf.
 *
 * Gemeten op de financiele rapportage: het veld is daar geen input[type=date] maar een gewoon
 * tekstveld met een kalender eraan (jquery datepicker), en het is 107 breed terwijl de tekst er 108
 * nodig heeft. De regel hierboven op --veld-datum-breedte raakte dat veld dus niet: die kijkt naar
 * input[type=date] en naar .jimani-datum, en dit veld is geen van beide.
 *
 * De hakenselector hieronder pakt wat het wel is: een omhulling met een kalendertje en een veld
 * ernaast. Dat is de vorm die op tientallen schermen wordt gebruikt.
 *
 * De breedte hoort op de omhulling, niet op het veld: het veld verliest het toch van de omhulling.
 * En de kolom waar zo'n omhulling in staat is op sommige schermen smaller dan de omhulling zelf --
 * op de financiele rapportage een col-md-2 met daarin nog een min en een plus. Zonder de laatste
 * regel wordt het vak alsnog afgeknepen tot wat de kolom toelaat.
 */
.jimani-datum-vak,
.input-group:has(> i.fa-calendar),
.input-group:has(> input[type="date"]),
.input-group:has(> .jimani-datum) {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;

    height: var(--veld-hoogte);
    width: var(--veld-datum-breedte);
    max-width: none;
}

/* Het veld binnen zo'n omhulling vult wat er over is en tekent zelf geen tweede rand. */
.jimani-datum-vak > input,
.input-group:has(> i.fa-calendar) > input,
.input-group:has(> input[type="date"]) > input[type="date"],
.input-group:has(> .jimani-datum) > .jimani-datum {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;

    height: auto;
    border: 0 !important;
    box-shadow: none !important;
}

/* De kolom groeit mee met wat erin staat. Zonder dit knijpt de kolom het vak terug naar 107. */
.financial-report .col-md-2:has(i.fa-calendar),
.financial-report .col-md-2:has(i.fa-calendar) > .form-group > div {
    width: auto !important;
    max-width: none;
}

/* Een tijdveld met een klokje ervoor: de omhulling is het vak, het invoervak zelf niet.
 *
 * De markup zet een omhulling om het klokje en het invoervak, en die tekent zelf al een rand. De
 * regel hierboven gaf het invoervak daarbovenop ook een rand en een hoek -- twee vakken tegen
 * elkaar, en dus een grijs randje langs het klokje. Gemeld door Martijn, 08-09-2026.
 *
 * De omhulling heeft ook flex-grow-1 en rekt dus mee met de kolom. De vaste breedte hoort op de
 * omhulling te staan, niet op het invoervak: dat laatste verliest het toch van de omhulling. */
.jimani-tijd-vak,
.input-group:has(> input[type="time"]),
.input-group:has(> .jimani-tijd) {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;

    height: var(--veld-hoogte);
    width: var(--veld-tijd-breedte);
    max-width: 100%;
    flex: 0 0 auto;

    border: 1px solid var(--veld-rand);
    border-radius: var(--veld-hoek);
    background: #fff;
    overflow: hidden;
}

.jimani-tijd-vak > i,
.input-group:has(> input[type="time"]) > i,
.input-group:has(> .jimani-tijd) > i {
    /* Overal in het systeem krijgt een i standaard 5 px ruimte rechts; in dit vakje duwt dat het
     * klokje uit het lood. */
    margin: 0 !important;
    padding: 0 0 0 10px;
    color: var(--veld-grijs);
    flex-shrink: 0;
}

.jimani-tijd-vak > input,
.input-group:has(> input[type="time"]) > input[type="time"],
.input-group:has(> .jimani-tijd) > .jimani-tijd {
    height: 100% !important;
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 8px 0 4px !important;
}

.jimani-tijd-vak:focus-within,
.input-group:has(> input[type="time"]):focus-within,
.input-group:has(> .jimani-tijd):focus-within {
    border-color: var(--veld-focus);
    box-shadow: 0 0 0 3px rgba(47, 128, 255, 0.08);
}

/* --- de carrousel ----------------------------------------------------------------------------- */
/* Een tegel in de carrousel ziet eruit als het product in de kassa.
 *
 * Er stond een plaatje met de naam eronder, en verder niets. In de kassa is dat een tegel met de
 * foto, de naam eronder en een prijsbadge rechtsboven op de foto. Gevraagd door Martijn,
 * 07-09-2026: maak het exact hetzelfde.
 *
 * Kies je een product, dan gaat de tegel uit de carrousel en komt er een klein blokje onder met een
 * kruisje. Het vinkje zelf blijft staan, want dat is wat het formulier verstuurt. */
.carousel-slider .radio-item label {
    display: block;
    position: relative;
    text-align: left;
}

.carrousel-foto {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

    .carrousel-foto img {
        display: block;
        width: 100%;
        height: auto;
    }

/* Het prijsplaatje is dertig procent kleiner geworden: de tegel zelf is ook kleiner en de pil nam
   er anders het halve plaatje van in beslag. Gevraagd door Martijn, 10-09-2026. */
.carrousel-prijs {
    position: absolute;
    top: 6px;
    right: 7px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    color: #46454a;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.carrousel-naam {
    display: block;
    margin-top: 6px;
    font-size: 14px;

    /* Gewone letters. Vet stond een raster vol namen te schreeuwen en er valt niets uit te lichten:
       ze zijn allemaal even belangrijk. Gevraagd door Martijn, 10-09-2026. */
    font-weight: 400;
    color: #2a3142;
    line-height: 1.25;
}

/* Het tijdvak onder de naam, met een klokje ervoor. Zelfde beeld als de tegels op het tabblad
   Beschikbaarheid, waar Martijn naar verwees: "de beschikbaarheid tegels moeten hetzelfde worden
   als wat je ziet in tabblad beschikbaarheid. Dus Naam en op volgende regel klok icoon + tijd van
   en tijd tot." (18-09-2026) */
.carrousel-tijd {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 8px 10px;
    font-size: 12px;
    color: #2a3142;
    white-space: nowrap;
}

    .carrousel-tijd i {
        color: #ef7d22;
        font-size: 12px;
    }

/* Een tegel met een tijd heeft geen foto. Zonder foto zakt de tegel in elkaar, dus de naam krijgt
   hier lucht boven zich. */
.radio-item > label > .carrousel-naam:first-child {
    padding-top: 14px;
}

/* De tegel zelf: zo breed als in de kassa, met de foto over de volle breedte.
   De bestaande carrouselopmaak zette de foto op 100 pixels en het vinkje erboven; in de kassa is de
   tegel een foto met de naam eronder en geen vinkje in beeld. (07-09-2026) */
/* Twee rijen, kolom voor kolom gevuld, vanaf links.
 *
 * Er stonden blokjes van twee tegels naast elkaar. Liep dat uit de pas, dan bleef er een plek open
 * en schoof de onderste rij op. Een raster van twee rijen vult zichzelf: er kan alleen onderaan de
 * laatste kolom een plek overblijven. Gemeld door Martijn, 08-09-2026.
 *
 * De klasse staat er twee keer in. De vensters laden onderweg zelf nog een modulestijlblad bij, en
 * dat komt dus NA dit bestand; met een enkele klasse verliest deze regel dan alsnog. Twee keer
 * dezelfde klasse weegt zwaarder en wint ongeacht de volgorde -- en dat leest duidelijker dan
 * !important. */
.carousel-slider.carousel-slider,
#detailModal .carousel-slider,
#secondPopup .carousel-slider {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-auto-columns: 132px;
    justify-content: start;
    align-content: start;

    /* Een halve centimeter tussen de twee rijen, en een hele centimeter boven de eerste rij en
       onder de tweede. Het blok eromheen geeft er zelf al achttien pixels bij, dus hier staat het
       verschil. Gevraagd door Martijn, 10-09-2026. */
    gap: 19px 10px;
    padding: 20px 0;
}

.carousel-slider .radio-item,
#detailModal .carousel-slider .radio-item,
#secondPopup .carousel-slider .radio-item {
    width: 132px;
    margin: 0;
    padding: 0;
    overflow: hidden;

    /* De tegel is het kader; wat erin staat mag tot de rand doorlopen. */
    border: 1px solid var(--veld-rand);
    border-radius: 12px;
    background: #fff;
}

    /* In het oude blad staat "#detailModal .radio-item:has(img) { width: 180px; height: 180px }".
       Met een id erin weegt die regel zwaarder dan alles hierboven, en dus bleef elke tegel met een
       foto een vierkant van 180 bij 180 -- met wit onder de naam. Gemeld door Martijn, 10-09-2026:
       "verwijder de onnodige witte vakken onder de productnaam". Hier staat het venster er in alle
       drie de vormen bij, zodat deze regel wel wint. */
    .carousel-slider .radio-item:has(img),
    #detailModal .carousel-slider .radio-item:has(img),
    #secondPopup .carousel-slider .radio-item:has(img) {
        width: 132px;
        height: -moz-fit-content;
        height: fit-content;
    }

    .carousel-slider .radio-item input[type="checkbox"],
    .carousel-slider .radio-item input[type="radio"] {
        display: none !important;
    }

    /* Geen brede witte rand om het plaatje: de foto vult de tegel, de prijs staat erop en de naam
       eronder. Gevraagd door Martijn, 08-09-2026. */
    .carousel-slider .radio-item label,
    #detailModal .carousel-slider .radio-item label,
    #secondPopup .carousel-slider .radio-item label {
        gap: 0;
        padding: 0;
        margin: 0;
        align-items: stretch;

        /* Bovenaan beginnen, niet in het midden. Met "midden" bleef er boven en onder de foto wit
           tussen de foto en de rand staan. Gemeld door Martijn, 10-09-2026. */
        justify-content: flex-start;
    }

    .carousel-slider .radio-item .carrousel-foto {
        border-radius: 12px 12px 0 0;
    }

    .carousel-slider .radio-item img,
    #detailModal .carousel-slider .radio-item img,
    #secondPopup .carousel-slider .radio-item img {
        width: 100% !important;
        height: 84px !important;
        object-fit: cover;
        border-radius: 12px 12px 0 0;

        /* Een plaatje is van huis uit inline; dan zet de regelhoogte er een streepje wit onder. */
        display: block;
    }

    /* De naam krijgt altijd de ruimte van twee regels, ook als hij er maar een nodig heeft. Zo zijn
       alle tegels even hoog. Is de naam langer dan twee regels, dan breekt hij af met een beletsel-
       teken. Gevraagd door Martijn, 10-09-2026: "Maak alle producten dezelfde hoogte. Dit betekent
       dat de productnaam altijd maximaal 2 regels mag zijn. Wanneer dit langer is, dan afbreken
       met ..." */
    .carousel-slider .radio-item .carrousel-naam {
        padding: 6px 8px 8px;
        margin-top: 0;
        text-align: center;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;

        /* twee regels van 15 px, plus de opvulling erboven en eronder */
        height: 44px;
    }

    .carousel-slider .radio-item span {
        font-size: 12px;
    }

    /* Het prijsplaatje houdt zijn eigen maat. In het oude blad staat "#detailModal .radio-item span
       { font-size: 13px }", en met een id erin weegt die regel zwaarder; daarom staat het venster
       er hier in alle drie de vormen bij. */
    .carousel-slider .radio-item .carrousel-prijs,
    #detailModal .carousel-slider .radio-item .carrousel-prijs,
    #secondPopup .carousel-slider .radio-item .carrousel-prijs {
        font-size: 9px;
        padding: 2px 8px;
    }

    /* En de naam ook, om dezelfde reden. */
    #detailModal .carousel-slider .radio-item .carrousel-naam,
    #secondPopup .carousel-slider .radio-item .carrousel-naam {
        font-size: 12px;
    }

/* Gekozen: uit de carrousel. */
.radio-item.carrousel-uit-beeld {
    display: none !important;
}

/* En eronder, een stuk kleiner. */
.carrousel-gekozen {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.carrousel-gekozen.is-leeg {
    display: none;
}

.carrousel-blokje {
    position: relative;
    width: 92px;
    border: 1px solid var(--veld-rand);
    border-radius: 10px;
    padding: 6px;
    background: #fff;
    text-align: center;
}

    .carrousel-blokje img {
        display: block;
        width: 100%;
        height: 52px;
        object-fit: cover;
        border-radius: 6px;
    }

    .carrousel-blokje span {
        display: block;
        margin-top: 4px;
        font-size: 11px;
        line-height: 1.2;
        color: #2a3142;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    /* Het tijdvak in een gekozen blokje: kleiner, op een regel, en niet afgeknipt. */
    .carrousel-blokje .carrousel-tijd {
        display: flex;
        gap: 4px;
        padding: 0;
        margin-top: 2px;
        font-size: 10px;
        -webkit-line-clamp: none;
    }

        .carrousel-blokje .carrousel-tijd i {
            font-size: 10px;
        }

/* Het kruisje staat aan de bovenkant van het blokje, zoals gevraagd.
 *
 * Wit met een grijs randje: het rondje was rood en het kruisje ook, en dan zie je het kruisje niet.
 * Gemeld door Martijn, 08-09-2026. */
.carrousel-kruis {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border: 1px solid var(--veld-rand);
    border-radius: 50%;
    background: #fff;
    color: #55606f;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    font-size: 11px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
}

/* De knop Kassa koppelen in de balk.
 *
 * Hij stond er als een gewone knop: 36 hoog, scherpe hoeken, een andere blauwtint dan de rest van de
 * balk. De items in de balk zijn 50 hoog met hoek 8. Gemeld door Martijn, 07-09-2026: maak hem
 * hetzelfde als de andere knoppen in de balk -- zelfde hoogte, afgeronde hoeken, blauw. */
#knopKoppelcodeBalk {
    height: 50px !important;
    border-radius: 8px !important;
    border: 0 !important;
    background-color: #0d3fd6 !important;
    color: #fff !important;
    font-size: 14px;
    padding: 0 18px !important;
    display: inline-flex;
    align-items: center;
}

    #knopKoppelcodeBalk:hover {
        background-color: #0a34b0 !important;
    }

/* ------------------------------------------------------------------------------------------------
   X26, gevraagd door Martijn 07-09-2026: het info-icoontje in de instellingen onder de afbeelding,
   in dezelfde vorm als op de pagina Integraties.

   Het stond rechtsboven op de afbeelding als een zweeftekst. Op een aanraakscherm bestaat zweven
   niet, dus daar was het onbereikbaar; en de tekst die eronder zat gaf vaak alleen de naam terug
   die er al onder stond.
   ------------------------------------------------------------------------------------------------ */

.instelling-voet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.instelling-naam {
    min-width: 0;
}

.instelling-info-knop {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #f1f3f5;
    color: #6c757d;
    font-size: 0.8rem;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

    .instelling-info-knop:hover {
        background: #e9ecef;
        border-color: #ced4da;
        color: #212529;
    }

.instelling-uitleg-kop {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #8b8b95;
    margin-bottom: 0.35rem;
}

.instelling-uitleg-tekst {
    font-size: 0.95rem;
    line-height: 1.55;
    color: #2a3142;
    margin-bottom: 1.25rem;
}

    .instelling-uitleg-tekst:last-child {
        margin-bottom: 0;
    }

/* Zo hoog als de tekst. De opmaak van de site rekt een venster uit tot bijna de hele schermhoogte
   en zet een minimumhoogte van 580 pixels op de inhoud; bij drie alineas geeft dat een halve meter
   wit onder de tekst. */
#instellingUitlegVenster .modal-dialog {
    align-items: center;
}

#instellingUitlegVenster .modal-content {
    height: auto;
    max-height: calc(100vh - 3.5rem);
}

#instellingUitlegVenster .modal-body {
    height: auto;
    min-height: 0;
    overflow-y: auto;
}

#instellingUitlegVenster .modal-header {
    align-items: flex-start;
}

    #instellingUitlegVenster .modal-header h4 {
        margin: 0;
    }

/* ------------------------------------------------------------------------------------------------
   R13b, gemeld door Martijn 08-09-2026: een wit vlak achter het opschrift van een knop in de balk
   bovenaan.

   Het opschrift zit in een span, en in elk opmaakbestand staat:

       .top-menu li.current-page:hover span { background-color: #ffffff !important; }

   De bedoeling was de kleuren om te draaien zodra je over de huidige pagina zweeft. Maar de span
   omsluit alleen het woord en niet de knop, dus je krijgt een wit blok om het opschrift heen in
   plaats van een witte knop.

   De achtergrond gaat weg en het opschrift neemt de tekstkleur van de knop over. Die regel zette het
   woord blauw omdat het op een wit blok moest staan; zonder blok zou dat blauw op blauw worden.
   ------------------------------------------------------------------------------------------------ */

.top-menu li span.nav-text,
.top-menu li:hover span.nav-text,
.top-menu li.current-page span.nav-text,
.top-menu li.current-page:hover span.nav-text {
    background-color: transparent !important;

    /* En de tekstkleur van de knop volgen. De regel hierboven zette het opschrift blauw omdat het
       op een wit blok moest staan; zonder dat blok zou blauw op blauw uitkomen. Overnemen van de
       knop houdt dit vanzelf goed in alle negen opmaakbestanden, die elk hun eigen kleur hebben. */
    color: inherit !important;
}

/* ------------------------------------------------------------------------------------------------
   R16, gemeld door Martijn 08-09-2026: "de tijdsvelden staan goed, maar zorg wel dat je de - en +
   op het veld aansluit, doe dit ook bij datum. nu ziet het er raar uit." Met een plaatje erbij van
   het aantalvakje op de bon: [-] [1] [+], strak tegen elkaar.

   Wat er stond: de rij is een flexrij met justify-content: space-between. Die duwt de min naar de
   linkerrand van de kolom en de plus naar de rechterrand, en het veld blijft er los tussenin
   hangen. Hoe breder de kolom, hoe groter het gat.

   Nu staan ze tegen elkaar aan met dezelfde tussenruimte als bij het aantal op de bon: 8 punten.
   ------------------------------------------------------------------------------------------------ */

.zoek-paar-links > .d-flex.align-items-center,
.zoek-paar-rechts > .d-flex.align-items-center,
#dateFromSection > .col-md-7,
#dateToSection > .col-md-7,
#timeFromSection > .col-md-7,
#timeToSection > .col-md-7,
.d-flex.align-items-center.justify-content-between:has(> .range-div) {
    justify-content: flex-start !important;
    gap: 8px;
}

    /* De knoppen hadden hun eigen ruimte ernaast (me-2 en ms-2). Samen met de tussenruimte hierboven
       zou dat het dubbele worden. */
    .zoek-paar-links > .d-flex.align-items-center > .range-div,
    .zoek-paar-rechts > .d-flex.align-items-center > .range-div,
    #dateFromSection > .col-md-7 > .range-div,
    #dateToSection > .col-md-7 > .range-div,
    #timeFromSection > .col-md-7 > .range-div,
    #timeToSection > .col-md-7 > .range-div,
    .d-flex.align-items-center.justify-content-between:has(> .range-div) > .range-div {
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex: 0 0 auto;
    }

    /* En het veld ertussen groeit niet mee met de kolom. */
    .zoek-paar-links > .d-flex.align-items-center > .input-group,
    .zoek-paar-rechts > .d-flex.align-items-center > .input-group,
    #dateFromSection > .col-md-7 > .input-group,
    #dateToSection > .col-md-7 > .input-group,
    #timeFromSection > .col-md-7 > .input-group,
    #timeToSection > .col-md-7 > .input-group,
    .d-flex.align-items-center.justify-content-between:has(> .range-div) > .input-group {
        flex: 0 1 auto;
    }

/* ------------------------------------------------------------------------------------------------
   R1, gemeld door Martijn 08-09-2026: kies je geen maat, dan kwam er een Engelse popup. Nu lichten
   de vakjes zelf op -- dat wijst aan waar je moet zijn in plaats van je eerst een venster te laten
   wegklikken.
   ------------------------------------------------------------------------------------------------ */

.product-variants-container.jimani-kies-nog {
    border-radius: 10px;
    animation: jimani-kies-nog 0.9s ease-in-out 3;
}

    .product-variants-container.jimani-kies-nog .product-variant-box {
        border-color: #f5843d !important;
    }

@keyframes jimani-kies-nog {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 132, 61, 0);
        background-color: transparent;
    }

    50% {
        box-shadow: 0 0 0 4px rgba(245, 132, 61, 0.45);
        background-color: rgba(245, 132, 61, 0.08);
    }
}

/* ------------------------------------------------------------------------------------------------
   R3, gemeld door Martijn 08-09-2026: "in de korting pagina/popup, Maak het naam veld veel korter en
   plaats het veld op dezelfde regel als de header", en later: "het naamveld en het percentageveld
   veel korter en op dezelfde regel als de kop, allebei links uitgelijnd zoals in alle vensters".

   Wat er stond: per veld drie blokken onder elkaar -- kop, uitleg, en daaronder een invoerveld over
   twee derde van de breedte. Voor een naam en een percentage is dat veel te veel, en het venster
   werd er onnodig lang van.

   Nu staan de kop en de uitleg links en het veld rechts daarnaast, op dezelfde hoogte als de kop.
   De opbouw van het venster blijft zoals hij is; alleen de plaatsing verandert.
   ------------------------------------------------------------------------------------------------ */

#webshopDiscountForm .form-step > .form-horizontal > .col-md-12 {
    display: grid;
    /* Het veld staat meteen achter de kop en niet aan de rechterrand: "links uitgelijnd zoals in
       alle vensters". De uitleg loopt eronder door over de volle breedte. */
    grid-template-columns: 220px minmax(0, 220px);
    justify-content: start;
    align-items: center;
    column-gap: 16px;
}

    /* De kop en de uitleg onder elkaar in de linkerkolom. */
    #webshopDiscountForm .form-step > .form-horizontal > .col-md-12 > div:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    #webshopDiscountForm .form-step > .form-horizontal > .col-md-12 > div:nth-child(2) {
        grid-column: 1 / span 2;
        grid-row: 2;
    }

    /* En het veld ernaast, over allebei de regels heen zodat het naast de kop staat. */
    #webshopDiscountForm .form-step > .form-horizontal > .col-md-12 > div:nth-child(3) {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        width: 100%;
        max-width: 220px;
        padding-left: 0 !important;
    }

        #webshopDiscountForm .form-step > .form-horizontal > .col-md-12 > div:nth-child(3) .webshop-discount-input {
            width: 100%;
        }

        /* Het opschrift over de maximale lengte hoort onder het veld, niet ernaast. */
        #webshopDiscountForm .max-length-label {
            display: block;
            float: none !important;
            margin-top: 2px;
        }

/* De rijen in het kortingvenster zweven in het oude raamwerk (float), en daardoor viel de stap eromheen
   op nul hoogte terug: de knoppen onderaan schoven naar boven en kwamen rechts in de kop te hangen.
   Gemeten 08-09-2026: #discountStep_1 was 1090 bij 0.

   De rijen zweven niet meer -- ze staan toch al als raster onder elkaar -- en de stap sluit zich
   netjes om zijn inhoud. */
#webshopDiscountForm .form-step > .form-horizontal {
    display: flow-root;
}

    #webshopDiscountForm .form-step > .form-horizontal > .col-md-12 {
        float: none !important;
    }


/* --- de tegel sluit om wat erin staat (10-09-2026) --------------------------------------------- */

/* Gemeld door Martijn: "Wil je de witregels boven en onder de carousel een stuk kleiner maken.
   Tevens zie ik dat de border niet aansluit aan de producten. Dit hoort wel."

   Het raster zet twee rijen van gelijke hoogte neer. Is de ene tegel hoger dan de andere -- een
   naam die over twee regels loopt -- dan rekken alle tegels in die rij mee, en houd je onder de
   naam een strook wit binnen de rand over. De tegel blijft nu op zijn eigen hoogte staan.

   En de lucht boven en onder de baan: samen met de achttien pixels van het blok eromheen komt dat
   op een centimeter boven de eerste rij en onder de tweede. (10-09-2026) */
.carousel-slider.carousel-slider,
#detailModal .carousel-slider,
#secondPopup .carousel-slider {
    padding: 20px 0;
}

.carousel-slider .radio-item,
#detailModal .carousel-slider .radio-item,
#secondPopup .carousel-slider .radio-item {
    align-self: start;
}

/* Wat erin staat vult de tegel tot de rand: de foto bovenaan, de naam eronder, en verder niets. */
.carousel-slider .radio-item label,
#detailModal .carousel-slider .radio-item label,
#secondPopup .carousel-slider .radio-item label {
    display: flex;
    flex-direction: column;
}

/* --- de datumkiezer in een venster (10-09-2026) ------------------------------------------------ */

/* Gevraagd door Martijn: dezelfde datumkiezer als bij Zoek bestellingen -- een min, een kalendertje
   met het veld, en een plus -- en niet het datumvak van de browser zelf. Binnen een blok past hij
   in de kolom van een kwart. */
.jm-datumkiezer {
    width: 100%;
    gap: 0;
}

    .jm-datumkiezer .input-group {
        flex: 1 1 auto;
        min-width: 0;
        height: var(--veld-hoogte);
        border: 1px solid var(--veld-rand);
        border-radius: 8px;
        background: #fff;
    }

    .jm-datumkiezer .jm-datum-tekst {
        border: 0 !important;
        box-shadow: none !important;
        background: transparent;
        padding-left: 4px;
    }

    .jm-datumkiezer .btn {
        flex: 0 0 auto;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--veld-rand);
        border-radius: 8px;
        background: #fff;
    }

/* De knop naast het zoekveld in de blauwe balk loopt gelijk met de keuzelijst en het zoekveld
   ernaast. Gemeld door Martijn, 10-09-2026: "de hoogte moet gelijk lopen aan de andere 2 vakken." */
.jm-blok-kop-zoeken .jm-blok-kop-knop {
    height: 35px;
    min-height: 35px;
    padding: 0 14px;
    font-size: 12px;
    line-height: 1;
}

/* De kalender hoort boven het venster te staan, niet erachter.
 *
 * Gemeld door Martijn, 10-09-2026: "in kortingen opent de datum dropdown niet meer." Hij ging wel
 * open, maar viel achter het venster: een venster van bootstrap staat op 1055 en het paneel van de
 * kalender bleef daaronder. Beide kalenders staan hier: jQuery UI en bootstrap-datepicker, want
 * welke van de twee er draait hangt af van het scherm. */
#ui-datepicker-div,
.ui-datepicker,
.datepicker.datepicker-dropdown {
    z-index: 1085 !important;
}


/* Het merkteken achter de naam van een productset in de productenlijst.
 *
 * Gevraagd door Martijn, 10-09-2026: "label Productset (blauw label, witte tekst)". Een set is
 * geen gewoon product -- hij heeft een vaste prijs en bestaat uit lagen -- en dat hoort in de
 * lijst te zien te zijn zonder hem open te klikken. */
.jm-setlabel {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #1e6bff;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    vertical-align: middle;
    white-space: nowrap;
}

/* De kalender die opengaat bij een datumveld.
 *
 * De kalender is te klein om prettig aan te wijzen: 215 bij 223 met letters van twaalf, en dan
 * zijn de dagen kleine hokjes van nog geen kwart centimeter. Gemeld door Martijn, 10-09-2026:
 * "Datum heeft een te kleine popup."
 *
 * Hij is nu net zo breed als het datumveld zelf en de dagen zijn hokjes waar je met een vinger
 * op kunt -- dit draait ook op een aanraakscherm. Geldt voor elk datumveld in het systeem, want
 * het is overal dezelfde kalender. */
.datepicker.datepicker-dropdown {
    min-width: var(--veld-datum-breedte, 223px);
    padding: 10px;
    font-size: 14px;
    border-radius: var(--veld-hoek, 8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.datepicker.datepicker-dropdown table {
    width: 100%;
}

    .datepicker.datepicker-dropdown table tr td,
    .datepicker.datepicker-dropdown table tr th {
        width: 38px;
        height: 38px;
        border-radius: 8px;
        font-size: 14px;
    }

/* De gekozen dag in de kleur van de vensters, en niet in het oranje van het beheer. */
.datepicker.datepicker-dropdown table tr td.active,
.datepicker.datepicker-dropdown table tr td.active:hover,
.datepicker.datepicker-dropdown table tr td.active.active {
    background: var(--jm-blauw, #2563eb) !important;
    border-color: var(--jm-blauw, #2563eb) !important;
    color: #fff !important;
}


/* --- de schakelaar met woorden erin (17-09-2026) ------------------------------------------------ */

/* Een aan-uitbolletje zegt niet waar het over gaat. Op de openingstijden stond er een per dag, en
   je moest maar weten of aan "open" betekende of "gesloten".
   Gemeld door Martijn, 17-09-2026: "Verander de toggle door een swicht knop: Open/Gesloten."

   Het is een gewoon vinkje met twee opschriften eromheen. De kant die aan staat draagt de kleur van
   de module en laat zich niet aanklikken (pointer-events: none): zo zet een klik altijd de andere
   kant aan en nooit per ongeluk dezelfde stand opnieuw. Daar is dus geen script voor nodig. */
.jm-schakelaar {
    display: inline-flex;
    align-items: stretch;
    height: 38px;
    border: 1px solid #d0d0d0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    line-height: 1;
}

    .jm-schakelaar > input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }

    .jm-schakelaar > label {
        display: inline-flex;
        align-items: center;
        margin: 0;
        padding: 0 14px;
        font-size: 14px;
        font-weight: 500;
        color: #6b7280;
        background: #fff;
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
    }

    .jm-schakelaar > input:checked ~ .jm-schakelaar-open,
    .jm-schakelaar > input:not(:checked) ~ .jm-schakelaar-dicht {
        pointer-events: none;
        color: #fff;
    }

    .jm-schakelaar > input:checked ~ .jm-schakelaar-open {
        background: var(--jm-accent, #2563eb);
    }

    .jm-schakelaar > input:not(:checked) ~ .jm-schakelaar-dicht {
        background: #6b7280;
    }

    .jm-schakelaar > input:focus-visible ~ label {
        outline: 2px solid var(--jm-accent, #2563eb);
        outline-offset: -2px;
    }

/* De naam staat verticaal in het midden van de tegel, en het klokje met de tijd eronder.
 *
 * Gevraagd door Martijn, 19-09-2026: "in de carousel beschikbaarheid in de tegels: wil je de
 * beschikbaarheid naam in het midden van de tegel plaatsen (verticaal) en wil je het klok icoontje
 * op regel 2 samen met de tijd van en tijd tot centreren in het midden."
 *
 * Alleen bij een tegel met een tijd erop -- dat zijn de beschikbaarheden. Een producttegel heeft een
 * foto en houdt zijn eigen indeling; vandaar de :has-voorwaarde en niet een regel voor alle tegels.
 *
 * De naam hield zijn hoogte van twee regels, zodat alle tegels even hoog blijven; hij staat daar nu
 * alleen in het midden in plaats van bovenaan. */
/* De naam staat verticaal in het midden van de tegel, en het klokje met de tijd eronder.
 *
 * Gevraagd door Martijn, 19-09-2026: "in de carousel beschikbaarheid in de tegels: wil je de
 * beschikbaarheid naam in het midden van de tegel plaatsen (verticaal) en wil je het klok icoontje
 * op regel 2 samen met de tijd van en tijd tot centreren in het midden."
 *
 * Het merkje jm-tegel-met-tijd komt van js/jimani-vormbrug.js. Met :has lukte het niet: de regel
 * stond in het blad maar de tekst bleef bovenin het naamvak staan. Gemeten op 19-09-2026: 5 punten
 * van boven, 22 van onder, met en zonder die regel hetzelfde.
 *
 * Het naamvak houdt zijn hoogte van twee regels, zodat alle tegels even hoog blijven; de tekst staat
 * daar nu in het midden in plaats van bovenaan. */
.radio-item.jm-tegel-met-tijd > label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

    .radio-item.jm-tegel-met-tijd .carrousel-naam {
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin-top: 0;
        text-align: center;
    }