/* Dönerpagina: klant- en beheerkant. Mobiel eerst, grote letters, veel contrast. */
:root {
    --achtergrond: #fff8f0;
    --tekst: #1f1a17;
    --grijs: #5c6873;
    --accent: #e65c00;
    --groen: #1e8e3e;
    --rood: #c62828;
    --kaart: #ffffff;
    --rand: #e8ded2;
    --melding-achtergrond: #e4f5e8;
    --melding-tekst: #145a24;
    --fout-achtergrond: #fde8e8;
    --fout-tekst: #8a1c1c;
    --tip-achtergrond: #fff1e3;
    --tip-rand: #f5cfae;
}
@media (prefers-color-scheme: dark) {
    :root {
        --achtergrond: #1b1715;
        --tekst: #f3ede6;
        --grijs: #b8b0a8;
        --kaart: #262120;
        --rand: #3a322e;
        --melding-achtergrond: #1f3d27;
        --melding-tekst: #cdeed5;
        --fout-achtergrond: #4a1f1f;
        --fout-tekst: #ffd9d9;
        --tip-achtergrond: #3a2a1c;
        --tip-rand: #5a3f28;
    }
}

* { box-sizing: border-box; }
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--achtergrond);
    color: var(--tekst);
    line-height: 1.4;
}
main { max-width: 36rem; margin: 0 auto; padding: 1rem 1rem 2rem; }

header h1 { font-size: 1.6rem; margin: .4rem 0 0; line-height: 1.2; }
.ondertitel { color: var(--grijs); margin: .2rem 0 1rem; }

/* Statusblok */
.status {
    border-radius: 1.25rem;
    padding: 1.6rem 1rem 1.3rem;
    text-align: center;
    color: #fff;
    background: var(--rood);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12);
}
.is-open .status { background: var(--groen); }
.status p { margin: 0; }
/* 9.5vw: "GESCHLOSSEN" (11 letters) moet op een telefoon van 375px in het blok passen. */
.status .kop { font-size: clamp(2rem, 9.5vw, 4.2rem); font-weight: 800; letter-spacing: .01em; line-height: 1; overflow-wrap: anywhere; }
.status .sub { font-size: 1.45rem; font-weight: 600; margin-top: .7rem; }
.status .nl { font-size: 1.1rem; margin-top: .5rem; opacity: .92; }
.status .bron { font-size: 1rem; margin-top: 1rem; opacity: .85; line-height: 1.35; }

/* Tip: pagina bij de favorieten zetten */
.tip {
    position: relative;
    margin-top: 1rem;
    padding: .9rem 1rem .9rem 3.6rem;
    background: var(--tip-achtergrond);
    border: 1px solid var(--tip-rand);
    border-radius: 1rem;
    line-height: 1.35;
}
.tip p { margin: 0; }
.tip .nl { margin-top: .35rem; color: var(--grijs); font-size: 1rem; }
.tip .ster {
    position: absolute;
    left: .95rem;
    top: .85rem;
    font-size: 1.9rem;
    line-height: 1;
    display: inline-block;
    transform-origin: 50% 60%;
    animation: ster-wiebel 4s ease-in-out infinite;
}
@keyframes ster-wiebel {
    0%, 78%, 100% { transform: rotate(0) scale(1); }
    84% { transform: rotate(-14deg) scale(1.18); }
    90% { transform: rotate(14deg) scale(1.18); }
    96% { transform: rotate(-5deg) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
    .tip .ster { animation: none; }
}

/* Kaarten */
.kaart {
    background: var(--kaart);
    border: 1px solid var(--rand);
    border-radius: 1rem;
    padding: 1rem;
    margin-top: 1rem;
}
h2 { font-size: 1.15rem; margin: 0 0 .6rem; }
.kaart .nl, h2 .nl, td .nl { font-weight: 400; color: var(--grijs); }

table.tijden { width: 100%; border-collapse: collapse; }
table.tijden td { padding: .35rem 0; border-top: 1px solid var(--rand); vertical-align: top; }
table.tijden td.uren { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.tijden td.dicht { color: var(--grijs); }
table.tijden tr.vandaag td { font-weight: 700; }
table.tijden tr.vandaag td.dicht { color: var(--tekst); }

.adres { margin: 0 0 .6rem; font-size: 1.1rem; }
.knoppen { display: grid; gap: .6rem; }
.qr-voorbeeld { display: block; width: 8rem; height: 8rem; margin: 0 auto .4rem; border-radius: .6rem; background: #fff; }
.kaart .hint + .knoppen { margin-top: .8rem; }

/* Knoppen */
.knop {
    display: block;
    width: 100%;
    margin-top: .8rem;
    padding: 1rem;
    border: 0;
    border-radius: .9rem;
    font: inherit;
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: var(--accent);
    cursor: pointer;
}
.knop.groen { background: var(--groen); }
.knop.rood { background: var(--rood); }
.knop.licht { background: transparent; color: var(--tekst); border: 2px solid var(--rand); }
.knop:active { filter: brightness(.9); }
.knoppen .knop { margin-top: 0; }

/* Formulieren (beheer) */
label { display: block; margin: .4rem 0 .3rem; font-weight: 600; }
input[type=time], input[type=date], input[type=password], input[type=text], input[type=tel] {
    font: inherit;
    font-size: 1.15rem;
    padding: .55rem .7rem;
    border: 2px solid var(--rand);
    border-radius: .6rem;
    background: var(--kaart);
    color: var(--tekst);
    min-width: 0;
}
input[type=password] { width: 100%; letter-spacing: .3em; }
input[type=text], input[type=tel] { width: 100%; }
.keuze { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-weight: 500; padding: .25rem 0; }
.keuze input[type=radio], .keuze input[type=checkbox] { width: 1.4rem; height: 1.4rem; margin: 0; }
.hint { color: var(--grijs); font-size: 1rem; margin: .6rem 0 0; line-height: 1.35; }

.melding, .fout { border-radius: .8rem; padding: .8rem 1rem; margin: .5rem 0 0; font-weight: 600; }
.melding { background: var(--melding-achtergrond); color: var(--melding-tekst); }
.fout { background: var(--fout-achtergrond); color: var(--fout-tekst); }

.terug { margin-top: .8rem; }
.terug .hint { margin: 0 0 .2rem; }

details.kaart summary { cursor: pointer; font-weight: 700; font-size: 1.15rem; }
details.kaart[open] summary { margin-bottom: .6rem; }
table.tijden-bewerk { border-collapse: collapse; }
table.tijden-bewerk td { padding: .3rem .25rem; }
table.tijden-bewerk input[type=time] { width: 6.8rem; padding: .4rem .4rem; font-size: 1.05rem; }
table.tijden-bewerk .keuze { font-weight: 600; }

.links { margin: 1.2rem 0 .4rem; text-align: center; }
.links a { color: var(--accent); font-weight: 600; }
.uitloggen { text-align: center; }
.schakel {
    background: none;
    border: 0;
    padding: .4rem;
    font: inherit;
    color: var(--grijs);
    text-decoration: underline;
    cursor: pointer;
}

footer small { display: block; text-align: center; color: var(--grijs); margin: 1.5rem 0 .5rem; font-size: .95rem; }