/*
 * Standaardsjabloon van de reservatiewebsite. Mobile first, zonder webfonts of JavaScript.
 * --brand en --on-brand komen uit de huisstijl van de aanbieder (MainLayout); de rest is neutraal,
 * zodat elke kleur werkt. De huisstijlkleur is altijd een achtergrond met --on-brand als tekstkleur.
 */
:root {
    --brand: #1f2933;
    --on-brand: #ffffff;
    --text: #1f2933;
    --muted: #52606d;
    --surface: #ffffff;
    --background: #f7f5f2;
    --line: #e4e7eb;
    --radius: 1rem;
    --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .08);
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --width: 72rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--text);
    background: var(--background);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }

.skip-link { position: absolute; left: -999px; top: .5rem; background: var(--surface); padding: .5rem 1rem; border-radius: .5rem; z-index: 10; }
.skip-link:focus { left: .5rem; }

.muted { color: var(--muted); font-weight: normal; }

/* Knoppen: de huisstijlkleur met de tekstkleur die er het best op leesbaar is. */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: .6rem 1.25rem;
    border: 0;
    border-radius: 999px;
    background: var(--brand);
    color: var(--on-brand);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.button:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.button-large { min-height: 3.25rem; padding: .8rem 1.75rem; font-size: 1.125rem; }

/* Header: logo, menu, talen en altijd de knop "Kies je datum", ook op gsm. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--line);
}
.site-header-inner {
    max-width: var(--width);
    margin: 0 auto;
    padding: .6rem var(--gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.25rem;
}
.brand { font-weight: 800; font-size: 1.3rem; text-decoration: none; margin-right: auto; display: flex; align-items: center; }
.brand img { height: 3rem; width: auto; }
.site-nav { display: flex; gap: 1rem; }
.site-nav a, .languages a { text-decoration: none; font-weight: 600; padding: .5rem .25rem; }
.site-nav a:hover { text-decoration: underline; }
.languages { display: flex; gap: .25rem; }
.languages a { color: var(--muted); font-size: .9rem; padding: .5rem .4rem; }
.languages a[aria-current] { color: var(--text); text-decoration: underline; text-underline-offset: .3em; }
.cart-link { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; color: var(--text); }
.cart-count { position: absolute; top: 0; right: -.1rem; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem; border-radius: 999px;
    background: var(--brand); color: var(--on-brand); font-size: .75rem; font-weight: 800; line-height: 1.3rem; text-align: center; }

@media (max-width: 40rem) {
    /* Gsm: logo en knop bovenaan, menu en talen eronder, alles zonder te scrollen. */
    .site-header-inner { gap: .25rem .75rem; }
    .brand { flex: 1 1 auto; min-width: 0; font-size: 1.15rem; }
    .cta { order: 2; min-height: 2.5rem; padding: .45rem 1rem; font-size: .95rem; }
    /* Het menu blijft één regel; past het niet, dan schuift het opzij. */
    .site-nav { order: 3; flex: 1 1 12rem; min-width: 0; gap: .9rem; overflow-x: auto; scrollbar-width: none; }
    .site-nav a { white-space: nowrap; padding-inline: 0; font-size: .95rem; }
    .languages a { padding-inline: .3rem; }
    .languages { order: 4; }
    .cart-link { order: 1; }
    .brand img { height: 2.5rem; }
}

.site-main { min-height: 60vh; }
.page, .offer { max-width: var(--width); margin: 0 auto; padding: 1.5rem var(--gutter) 3rem; }
.offer { scroll-margin-top: 5rem; }

/* Hero: de sfeerfoto groot bovenaan, of een vlak in de huisstijlkleur. */
.hero {
    position: relative;
    display: grid;
    min-height: clamp(22rem, 60vh, 36rem);
    color: #ffffff;
    background: var(--text);
    overflow: hidden;
}
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .6)); }
.hero-plain { background: var(--brand); color: var(--on-brand); min-height: clamp(18rem, 45vh, 28rem); }
.hero-plain::after { display: none; }
.hero-content {
    position: relative;
    z-index: 1;
    align-self: end;
    width: 100%;
    max-width: var(--width);
    margin: 0 auto;
    padding: 3rem var(--gutter);
}
.hero h1 { font-size: clamp(2.25rem, 6vw, 4rem); letter-spacing: -.02em; max-width: 18ch; }
.hero p { font-size: clamp(1.1rem, 2.2vw, 1.35rem); max-width: 40ch; margin: 0 0 1.5rem; }
.hero:not(.hero-plain) .button { background: #ffffff; color: var(--text); }
.hero-plain .button { background: var(--on-brand); color: var(--brand); }

/* "Kies je datum": een witte kaart, in de hero en op de categorie- en artikelpagina. */
.period-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .75rem;
    max-width: 44rem;
    padding: 1rem;
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
    scroll-margin-top: 6rem;
}
.period-form label { display: flex; flex-direction: column; gap: .3rem; flex: 1 1 9rem; font-weight: 600; font-size: .95rem; }
.period-form input {
    font: inherit;
    font-weight: normal;
    min-height: 2.75rem;
    padding: .55rem .75rem;
    border: 1px solid #9aa5b1;
    border-radius: .6rem;
    background: #ffffff;
    color: var(--text);
}
.period-form .button, .hero .period-form .button { flex: 1 1 12rem; background: var(--brand); color: var(--on-brand); }
.period-form + .alert { margin-top: .75rem; max-width: 44rem; }
/* De gesloten weekdagen onder "Kies je datum" (#298); later ook de komende sluitingsperiodes. */
.period-closed { margin-top: .5rem; max-width: 44rem; font-size: .9rem; }
.period-closed p { margin: 0; }
.page > .period-form { margin: 1.5rem 0 0; }
.reservation .period-form { box-shadow: none; padding: 0; }

/* Aanbod */
.offer h2 { font-size: 1.6rem; margin-top: 2rem; }
.catalog-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.catalog-card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.catalog-card img, .catalog-card .image-placeholder { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.catalog-card-body { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.catalog-card h3 { font-size: 1.2rem; margin: 0; }
.catalog-card h3 a { text-decoration: none; }
.catalog-card h3 a:hover { text-decoration: underline; }
.catalog-card p { margin: 0; }
.catalog-card .button { margin-top: auto; align-self: flex-start; }
.catalog-card.unavailable img, .catalog-card.unavailable .image-placeholder { opacity: .5; filter: grayscale(1); }
.badge { display: inline-block; align-self: flex-start; padding: .2rem .65rem; border-radius: 999px; font-size: .9rem; font-weight: 700; }
.badge-busy { background: #ffe3e3; color: #610404; }
.offer > .muted { margin-top: -.5rem; }
.intro { max-width: 48rem; }

/* De eigen foto van een categorie: naast de naam en de inleiding, op een gsm erboven (SitePhotos.CategorySizes). */
.category-head { display: grid; gap: 0 2rem; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.category-text { grid-column: 1; grid-row: 1; }
.category-photo { grid-column: 2; grid-row: 1; width: 22rem; margin-top: 1rem; }
.category-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
@media (max-width: 40rem) {
    .category-head { grid-template-columns: minmax(0, 1fr); }
    .category-photo { grid-column: 1; grid-row: 1; width: 100%; }
    .category-text { grid-row: 2; }
}

/* Categorieën op de home */
.category-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); }
.category-tile {
    position: relative;
    display: grid;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    color: #ffffff;
    text-decoration: none;
    background: var(--text);
}
.category-tile img, .category-tile .image-placeholder { grid-area: 1 / 1; aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
/* Een donkere band onder de naam, leesbaar op elke foto en op een lichte tegel zonder foto. */
.category-tile-name { grid-area: 1 / 1; z-index: 1; align-self: end; padding: .75rem 1rem; font-size: 1.25rem; font-weight: 800; background: rgba(17, 24, 39, .8); }
.category-tile:hover .category-tile-name { text-decoration: underline; }
.image-placeholder {
    display: grid;
    place-items: center;
    /* Een lichte tint van de huisstijlkleur, zodat een artikel zonder foto niet schreeuwt. */
    background: color-mix(in srgb, var(--brand) 14%, #ffffff);
    color: var(--text);
    font-size: 3rem;
    font-weight: 800;
}
.price { font-weight: 800; font-size: 1.15rem; margin: .5rem 0 .75rem; }
.price-large { font-size: 1.5rem; }
.price .muted { font-size: 1rem; font-weight: 500; }
.price .old-price { font-weight: 500; opacity: .65; margin-right: .3rem; }
.promotion-label { display: inline-block; margin-left: .3rem; padding: .1rem .55rem; border-radius: 999px; background: #fff1c2; color: #5c3b00; font-size: .85rem; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.saving-label { display: inline-block; margin-left: .3rem; padding: .1rem .55rem; border-radius: 999px; background: #dff5e1; color: #0f4a1a; font-size: .85rem; font-weight: 700; white-space: nowrap; vertical-align: middle; }

/* Artikelpagina */
.back a { color: var(--muted); text-decoration: none; }
.page h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
.detail { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); align-items: start; }
.detail-info img, .detail-info .image-placeholder { border-radius: var(--radius); aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.rent-with { margin-top: 2.5rem; }
.gallery { display: grid; gap: .5rem; grid-template-columns: repeat(3, 1fr); }
.gallery img:first-child { grid-column: 1 / -1; }
.specs { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.25rem; margin: 0 0 1rem; }
.specs dt { font-weight: 600; color: var(--muted); }
.specs dd { margin: 0; }
.availability { padding: 1rem; border-radius: .75rem; margin-bottom: 1rem; }
.availability p { margin: 0 0 .35rem; }
.availability .price { margin: .25rem 0; }
.availability.free { background: #e3f9e5; color: #05400a; }
.availability.free a, .availability.free .muted { color: #05400a; }
.availability.busy { background: #ffe3e3; color: #610404; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }
.reservation {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    scroll-margin-top: 6rem;
}
.reservation h2 { font-size: 1.5rem; }
.reservation form { display: flex; flex-direction: column; gap: .9rem; }
.reservation label { display: flex; flex-direction: column; gap: .3rem; flex: 1; font-weight: 600; font-size: .95rem; }
.reservation input, .reservation textarea {
    font: inherit;
    font-weight: normal;
    min-height: 2.75rem;
    padding: .55rem .75rem;
    border: 1px solid #9aa5b1;
    border-radius: .6rem;
    background: #ffffff;
}
.reservation fieldset { border: 0; padding: 0; margin: 0; }
.reservation legend { font-weight: 600; font-size: .95rem; margin-bottom: .3rem; }
.reservation fieldset label { flex-direction: row; align-items: center; gap: .5rem; font-weight: normal; min-height: 2.75rem; }
.reservation fieldset input { min-height: auto; width: 1.25rem; height: 1.25rem; }
.row { display: flex; gap: .75rem; flex-wrap: wrap; }
.row > label { min-width: 9rem; }
.validation-message, .validation-errors { color: #a61b1b; }
.alert { padding: .9rem 1rem; border-radius: .75rem; }
.alert.success { background: #e3f9e5; color: #05400a; }
.alert.error { background: #ffe3e3; color: #610404; }
.alert.info { background: #e6f0ff; color: #0b3b8c; }
/* Voorbeeld van wat niet op de website staat, alleen voor een ingelogde gebruiker. */
.preview-bar { margin: 0; padding: .6rem var(--gutter); background: #fff3bf; color: #5c3c00; font-weight: 600; text-align: center; }

/* Footer */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); margin-top: 3rem; }
.site-footer-inner { max-width: var(--width); margin: 0 auto; padding: 2rem var(--gutter); display: flex; flex-wrap: wrap; gap: .5rem 2rem; align-items: baseline; }
.site-footer p { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem; }
.site-footer a { padding: .5rem 0; }
.site-footer address { font-style: normal; display: flex; flex-direction: column; gap: .15rem; flex: 1 1 16rem; }
.site-footer address a { padding: .35rem 0; }
.site-footer .social { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }

/* Contactpagina */
.lead { font-size: 1.15rem; color: var(--muted); max-width: 40rem; }
.contact-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 2rem; }
.contact-actions .button { flex-direction: column; min-width: min(14rem, 100%); padding: .75rem 1.5rem; border-radius: var(--radius); }
.button-detail { font-weight: 500; font-size: .9rem; overflow-wrap: anywhere; }
.contact-address { font-style: normal; display: flex; flex-direction: column; margin-bottom: 2rem; }
/* Openingsuren en komende sluitingsperiodes (#299): op de contactpagina en compact in de footer. */
.opening-week { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0 0 1rem; }
.opening-week > div { display: contents; }
.opening-week dt { font-weight: 600; }
.opening-week dd { margin: 0; }
.upcoming-closures { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .25rem; }
.opening-hours.compact { flex: 1 1 14rem; }
.opening-hours.compact .opening-week, .opening-hours.compact .upcoming-closures { margin-bottom: .5rem; }
.site-footer .opening-hours-title { margin: 0 0 .25rem; }
/* De 404-pagina: de categorieën als knoppen, zodat de bezoeker meteen verder kan. */
.not-found-categories { list-style: none; padding: 0; margin: .75rem 0 2rem; display: flex; flex-wrap: wrap; gap: .5rem .75rem; }
.not-found-categories a { display: inline-block; padding: .4rem .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; text-decoration: none; }
.service-area ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.service-area li { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .35rem .9rem; }

/* Veelgestelde vragen */
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .75rem; max-width: 48rem; }
.faq summary { cursor: pointer; font-weight: 700; padding: 1rem 1.25rem; min-height: 2.75rem; }
.faq details p { margin: 0 1.25rem 1rem; white-space: pre-line; }
.faq-more { margin-top: 2rem; }

/* Toestemmingsbalk voor Google Analytics en advertenties: plakt onderaan het scherm, de knoppen even groot */
.consent { position: sticky; bottom: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.5rem;
    padding: 1rem var(--gutter); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(15, 23, 42, .08); }
.consent p { margin: 0; max-width: 44rem; }
.consent-purposes { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; max-width: 44rem; }
.consent-purposes legend { padding: 0; margin-bottom: .25rem; font-weight: 700; }
.consent-purposes label { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; }
.consent-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.consent-choices .button { min-width: 8.5rem; }

/* Privacyverklaring */
.privacy { max-width: 46rem; }
.privacy h2 { margin-top: 2rem; }

/* Voorwaarden en privacyverklaring van Moshtar zelf (moshtar.com) */
.legal h3 { margin: 1.25rem 0 .25rem; font-size: 1.05rem; }
.legal li + li { margin-top: .35rem; }
.legal code { overflow-wrap: anywhere; }
.legal-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: .6rem .5rem; border-bottom: 1px solid var(--line); }
.legal-statement { border-left: 4px solid var(--line); padding-left: 1rem; }
@media (max-width: 40rem) {
    .legal-table thead { position: absolute; left: -999px; }
    .legal-table tr { display: block; padding: .5rem 0; border-bottom: 1px solid var(--line); }
    .legal-table td { display: block; border: 0; padding: .15rem 0; }
    .legal-table td:first-child { font-weight: 700; }
}

/* Winkelkar: in winkelkar op de artikelpagina, en de winkelkarpagina */
.reservation .add-to-cart { flex-direction: row; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1.5rem; }
.reservation .add-to-cart label { flex: 0 1 7rem; }
.reservation .add-to-cart .button { flex: 1 1 12rem; }
.cart-added { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.cart-added p { margin: 0; font-weight: 700; }
.cart { max-width: 52rem; }
.cart-period h2 { font-size: 1.3rem; }
.cart .period-form { margin-bottom: 1.5rem; }
.cart-lines { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.cart-line { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem 1.25rem; align-items: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; }
.cart-line.unavailable { border-color: #f5b5b5; }
.combo-hint { font-weight: 700; }
.bundle-saving { font-weight: 700; margin-top: -.25rem; }
.cart-discount { grid-template-columns: 1fr auto; border-style: dashed; }
.cart-line-name { display: flex; flex-direction: column; gap: .2rem; }
.cart-line-name a { font-weight: 700; font-size: 1.1rem; }
.cart-quantity { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .75rem; }
.cart-quantity label { display: flex; flex-direction: column; gap: .2rem; font-weight: 600; font-size: .9rem; }
.cart-quantity input { font: inherit; width: 5rem; min-height: 2.75rem; padding: .4rem .6rem; border: 1px solid #9aa5b1; border-radius: .6rem; }
.cart-line-total { margin: 0; font-weight: 800; min-width: 6rem; text-align: right; }
.cart-total { text-align: right; margin-top: 1.25rem; }
/* Een blok per huurperiode (#276): elk een eigen reservatie. */
.cart-block + .cart-block { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.cart-tip { margin-top: 1.25rem; }
.order-reservations { padding-left: 1.25rem; }
.order-block-title { font-size: 1.1rem; margin-top: 1.5rem; }
/* De leverplaats (#268): de leveringskost ernaartoe met "wijzigen", of de regel van de aanbieder met de postcodecheck. */
.delivery-place { margin-top: 1rem; }
.delivery-place p { margin: .25rem 0; }
.cart .delivery-place { text-align: right; }
.delivery-place-form { display: flex; flex-direction: column; gap: .5rem; }
.cart .delivery-place-form { align-items: flex-end; }
.delivery-place-form .row { display: flex; flex-wrap: wrap; gap: .5rem .75rem; }
.delivery-place-form label { display: flex; flex-direction: column; gap: .2rem; font-weight: 600; font-size: .9rem; text-align: left; }
.delivery-place-form input { font: inherit; min-height: 2.75rem; padding: .4rem .6rem; border: 1px solid #9aa5b1; border-radius: .6rem; }
.delivery-place-form input[name="postcode"] { width: 7rem; }
.cart-reserve { margin-top: 2rem; }
/* De couponcode onder het totaal: een veld met "Toepassen", of de code met "Weghalen". */
.cart-coupon { margin-top: 1rem; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.cart-coupon h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cart-coupon-form, .cart-coupon-current { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: .5rem .75rem; }
.cart-coupon-form label { display: flex; flex-direction: column; gap: .2rem; font-weight: 600; font-size: .9rem; }
.cart-coupon-form input { font: inherit; width: 12rem; max-width: 100%; min-height: 2.75rem; padding: .4rem .6rem; border: 1px solid #9aa5b1;
    border-radius: .6rem; text-transform: uppercase; }
.reservation label.check { flex-direction: row; align-items: flex-start; gap: .6rem; font-weight: normal; }
.reservation label.check input { min-height: auto; width: 1.25rem; height: 1.25rem; margin-top: .15rem; flex: none; }
/* Stap 2: de knop "Bijwerken" naast de keuze van het type klant en het vinkje voor het factuuradres. */
.reservation .billing-same, .reservation .customer-kind { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.reservation .customer-kind legend { width: 100%; }
.reservation .billing-same label.check { flex: 0 1 auto; }
/* Stap 2: per blok leveren of afhalen en "Ander leveradres voor deze reservatie" (#278). Zonder JavaScript toont
   "Bijwerken" de adresvelden; een browser met :has() toont en verbergt ze al bij het aanvinken, en dan hoeft die knop niet. */
.reservation .order-block { display: flex; flex-direction: column; gap: .75rem; }
.reservation .order-block-title { margin: .75rem 0 0; font-size: 1.15rem; }
.reservation .block-delivery { display: flex; flex-direction: column; gap: .75rem; }
.reservation .other-address-choice { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.reservation .other-address-choice label.check { flex: 0 1 auto; }
.reservation .other-address { display: flex; flex-direction: column; gap: .75rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: .75rem; }
.reservation .other-address > p { margin: 0; }
.reservation [hidden] { display: none; }
.reservation .block-delivery:not(:has(input[value="Pickup"]:checked)):has([data-ander-leveradres]:checked) .other-address[hidden] { display: flex; }
.reservation .block-delivery:not(:has([data-ander-leveradres]:checked)) .other-address,
.reservation .block-delivery:has(input[value="Pickup"]:checked) .other-address,
.reservation .block-delivery:has(input[value="Pickup"]:checked) .other-address-choice { display: none; }
.reservation .block-delivery:has(input[value="Delivery"]:checked) .other-address-choice[hidden] { display: flex; }
@supports selector(:has(*)) { .reservation .other-address-choice button { display: none; } }
/* Stap 2: het blok "Over de opstelling", per exemplaar de reservatievragen. */
.reservation .set-up { display: flex; flex-direction: column; gap: .9rem; }
.reservation .set-up h3 { margin: .5rem 0 0; font-size: 1.15rem; }
.reservation .set-up-unit { display: flex; flex-direction: column; gap: .5rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: .75rem; }
.reservation .set-up-unit > p { margin: 0; }
.reservation .set-up-help { margin: -.3rem 0 0; font-size: .9rem; }
.reservation .set-up-number { display: flex; align-items: center; gap: .5rem; font-weight: normal; }
.reservation .set-up-number input { width: 8rem; }
.reservation .set-up .validation-message { margin: 0; }
.button-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--line); min-height: 2.75rem; padding: .45rem 1rem; }
.link-button { font: inherit; background: none; border: 0; padding: .5rem .25rem; color: var(--muted); text-decoration: underline; cursor: pointer; min-height: 2.75rem; }
@media (max-width: 40rem) {
    .cart-line { grid-template-columns: 1fr auto; }
    .cart-quantity { grid-column: 1 / -1; grid-row: 2; }
    .cart-line-total { grid-column: 2; grid-row: 1; }
}
/* De voorpagina van Moshtar zelf op moshtar.com (ADR 0022). */
.platform-points { max-width: 40rem; margin: 0 auto; padding-left: 1.25rem; display: grid; gap: .5rem; }
.hero .lead + .button { margin-top: 1rem; }
/* Aanmelden op moshtar.com (ADR 0022). */
.signup .reservation, .signup .alert, .signup .lead { max-width: 34rem; }
.signup .reservation { margin-top: 1.5rem; }
.signup-address { display: flex; align-items: center; gap: .35rem; font-weight: normal; }
.signup-address input { flex: 1; min-width: 0; }
.signup-hint { font-weight: normal; font-size: .9rem; color: var(--muted); }
.signup-hint[data-state="probleem"] { color: #a61b1b; }
.signup-hint[data-state="vrij"] { color: #05400a; }
.signup select { font: inherit; font-weight: normal; min-height: 2.75rem; padding: .45rem .75rem; border: 1px solid #9aa5b1; border-radius: .6rem; background: #ffffff; }
.signup form .button { align-self: flex-start; }

/* Bestelling beheren (#327): elke reservatie van de bestelling als kaart, een geannuleerde gedempt. */
.manage-order-reservation { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 1.5rem 0; }
.manage-order-reservation h2 { margin: 0 0 .5rem; font-size: 1.35rem; }
.manage-order-reservation h3 { margin: 1rem 0 .25rem; font-size: 1.05rem; }
.manage-order-reservation.is-cancelled { color: var(--muted); }
.manage-order-reservation .badge { background: var(--background); border: 1px solid var(--line); }
.manage-order-facts { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: .75rem 0 0; }
.manage-order-facts dt { font-weight: 700; }
.manage-order-facts dd { margin: 0; overflow-wrap: anywhere; }
.manage-order-lines { list-style: none; padding: 0; margin: 0; }
.manage-order-lines li { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; border-bottom: 1px solid var(--line); }
.manage-order-lines .amount { white-space: nowrap; }
.manage-order-contact { margin-top: 2rem; }
.manage-order-cancel-until { margin: 1rem 0 .5rem; }
.manage-order-cancel-confirm { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .75rem; }
.manage-order-cancel-confirm form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.manage-order-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.manage-order-reschedule-price { font-weight: 700; }
@media (max-width: 40rem) { .manage-order-facts { grid-template-columns: 1fr; } .manage-order-facts dd { margin-bottom: .5rem; } }