/* ===========================================================================
   Kaarten

   Het bestelblok bij een evenement, de kaartjes met QR-code, de grote weergave
   voor bij de ingang en de balie waar het bestuur afvinkt.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Kaarten bestellen bij een evenement
   --------------------------------------------------------------------------- */
.kaartblok {
    background: var(--wit);
    border: 1px solid var(--lijn-sterk);
    border-radius: var(--rond-l);
    padding: var(--ruimte-5);
    box-shadow: var(--schaduw-m);
}

.kaartblok__kop {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ruimte-4);
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: var(--ruimte-4);
    margin-bottom: var(--ruimte-5);
    border-bottom: 1px solid var(--lijn);
}

.kaartblok__prijs {
    font-family: var(--font-titel);
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--inkt);
    margin: 0;
}
.kaartblok__prijs span {
    font-family: var(--font-tekst);
    font-size: .88rem;
    font-weight: 500;
    color: var(--tekst-zacht);
    letter-spacing: 0;
    margin-left: .35rem;
}

/* ---------------------------------------------------------------------------
   2. Een kaartje in een lijst

   De inkeping links en rechts maakt van een blokje een kaartje, zoals een
   toegangsbewijs dat je afscheurt.
   --------------------------------------------------------------------------- */
.kaartenlijst { display: grid; gap: var(--ruimte-4); }

.kaartje {
    position: relative;
    display: grid;
    grid-template-columns: 148px 1fr;
    gap: var(--ruimte-5);
    align-items: center;
    padding: var(--ruimte-5);
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: var(--rond-l);
    overflow: hidden;
}

/* De streep met de inkepingen tussen de code en de gegevens. */
.kaartje::before,
.kaartje::after {
    content: '';
    position: absolute;
    left: calc(148px + var(--ruimte-5) / 2 - 9px);
    width: 18px;
    height: 18px;
    border-radius: var(--rond-vol);
    background: var(--room);
    border: 1px solid var(--lijn);
}
.kaartje::before { top: -10px; }
.kaartje::after { bottom: -10px; }

@media (max-width: 560px) {
    .kaartje { grid-template-columns: 1fr; text-align: center; }
    .kaartje::before, .kaartje::after { display: none; }
}

.kaartje__qr {
    background: var(--wit);
    border-radius: var(--rond-m);
    padding: var(--ruimte-2);
}
.kaartje__qr svg { width: 100%; height: auto; display: block; }

.kaartje__wacht {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    background: var(--room-diep);
    border-radius: var(--rond-m);
    color: var(--tekst-licht);
}

.kaartje__code {
    font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
    font-size: 1.18rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--inkt);
    margin: 0 0 var(--ruimte-1);
}
.kaartje__naam { color: var(--tekst-zacht); margin-bottom: var(--ruimte-3); }

.kaartje--gereserveerd { border-color: #f0d4a0; background: #fffdf7; }
.kaartje--geannuleerd,
.kaartje--terugbetaald { opacity: .6; }
.kaartje--ingecheckt { border-color: #b7ddd6; }

/* ---------------------------------------------------------------------------
   3. Kaarten per evenement in de eigen omgeving
   --------------------------------------------------------------------------- */
.kaartgroep {
    padding: var(--ruimte-5);
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: var(--rond-l);
    margin-bottom: var(--ruimte-6);
}
.kaartgroep--geweest { background: var(--room); }
.kaartgroep--geweest .kaartje { opacity: .75; }

.kaartgroep__kop {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ruimte-4);
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--ruimte-5);
}
.kaartgroep__kop h2 { font-size: 1.3rem; margin-bottom: var(--ruimte-2); }
.kaartgroep__kop h2 a { color: inherit; text-decoration: none; }
.kaartgroep__kop h2 a:hover { color: var(--groen); }

/* ---------------------------------------------------------------------------
   4. Eén kaart groot in beeld

   Bedoeld om bij de ingang te laten zien. Alles wat afleidt is weggelaten;
   de QR-code krijgt de meeste ruimte en het meeste contrast.
   --------------------------------------------------------------------------- */
body.kaartpagina {
    background:
        radial-gradient(70% 60% at 50% 0%, rgba(37, 99, 235, .22), transparent 60%),
        var(--inkt);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ruimte-5) var(--ruimte-4);
}
body.kaartpagina main { width: 100%; }

.grotekaart {
    max-width: 420px;
    margin-inline: auto;
    background: var(--wit);
    border-radius: var(--rond-xl);
    padding: var(--ruimte-6);
    box-shadow: var(--schaduw-l);
    text-align: center;
}

.grotekaart__kop { margin-bottom: var(--ruimte-5); }
.grotekaart__kop h1 { font-size: 1.55rem; margin-bottom: var(--ruimte-2); }
.grotekaart__wanneer { font-weight: 600; margin-bottom: 2px; }
.grotekaart__waar { color: var(--tekst-zacht); font-size: .93rem; margin-bottom: 0; }

.grotekaart__qr {
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: var(--rond-l);
    padding: var(--ruimte-4);
    margin-bottom: var(--ruimte-4);
}
.grotekaart__qr svg { width: 100%; height: auto; display: block; }

.grotekaart__geblokkeerd {
    background: var(--room-diep);
    border: 1px dashed var(--lijn-sterk);
    border-radius: var(--rond-l);
    padding: var(--ruimte-6) var(--ruimte-5);
    margin-bottom: var(--ruimte-4);
    color: var(--tekst-zacht);
}

.grotekaart__code {
    font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--inkt);
    margin-bottom: var(--ruimte-5);
}

.grotekaart__voet {
    display: grid;
    gap: var(--ruimte-3);
    text-align: left;
    padding-top: var(--ruimte-4);
    border-top: 1px solid var(--lijn);
}
.grotekaart__label {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tekst-licht);
}
.grotekaart__waarde { font-weight: 600; }

.grotekaart__toelichting {
    margin-top: var(--ruimte-4);
    font-size: .87rem;
    color: var(--tekst-zacht);
    text-align: left;
}
.grotekaart__terug { margin-top: var(--ruimte-5); font-size: .87rem; margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   5. De balie waar het bestuur afvinkt
   --------------------------------------------------------------------------- */
.balie { max-width: 640px; }

.balie__zoek {
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: var(--rond-m);
    padding: var(--ruimte-5);
    margin-bottom: var(--ruimte-5);
}
.balie__zoek label {
    display: block;
    font-weight: 600;
    font-size: .91rem;
    margin-bottom: var(--ruimte-2);
}

.balie__invoer { display: flex; gap: var(--ruimte-3); }
.balie__invoer input {
    font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
    font-size: 1.3rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .7rem .9rem;
}
@media (max-width: 520px) {
    .balie__invoer { flex-direction: column; }
}

.balie__uitslag {
    display: flex;
    gap: var(--ruimte-5);
    align-items: center;
    padding: var(--ruimte-6) var(--ruimte-5);
    border-radius: var(--rond-l);
    margin-bottom: var(--ruimte-5);
}
.balie__uitslag h2 { margin-bottom: var(--ruimte-1); font-size: 1.3rem; }
.balie__uitslag p { font-size: .95rem; }

.balie__uitslag--goed { background: var(--succes-vlak); color: #0f5348; }
.balie__uitslag--goed h2 { color: #0f5348; }

.balie__uitslag--let { background: var(--waarschuwing-vlak); color: #8a5906; }
.balie__uitslag--let h2 { color: #8a5906; }

.balie__uitslag--fout { background: var(--fout-vlak); color: #8e2019; }
.balie__uitslag--fout h2 { color: #8e2019; }

.balie__teken {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--rond-vol);
    background: rgba(255, 255, 255, .7);
    font-size: 1.7rem;
    line-height: 1;
}

@media print {
    body.kaartpagina { background: #fff; padding: 0; }
    .grotekaart { box-shadow: none; border: 1px solid #ccc; }
    .grotekaart__terug { display: none; }
}