/* ═══════════════════════════════════════════════════════════════════
   HUUR — artikelpagina's, huurmandje en huuraanvraag (Simon, 16 september 2026)
   Eenvoudig: minimale tierelantijnen, maximale duidelijkheid.
   Alleen geladen op de verhuurpagina's en huuraanvraag.html.
   Gedrag: js/huur-slides.js en js/huurmandje.js.
   ═══════════════════════════════════════════════════════════════════ */

.huur-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Artikel: foto's links, informatie rechts ────────────────────── */

.huur-artikel { padding-top: clamp(104px, 10vw, 128px); padding-bottom: clamp(40px, 5vw, 64px); }
/* Terugknop (in plaats van een kruimelpad): duidelijk, ook op de telefoon */
.huur-terug {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: clamp(18px, 2.5vw, 28px);
  padding-block: 6px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-text);
}
.huur-terug span { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--c-cream-line); transition: text-decoration-color var(--dur-fast) var(--ease); }
.huur-terug:hover span { text-decoration-color: var(--c-brass); }
.huur-terug svg { color: var(--c-brass-ink); transition: transform var(--dur-base) var(--ease-out); }
.huur-terug:hover svg { transform: translateX(-4px); }
.huur-artikel__raster { display: grid; gap: clamp(24px, 4vw, 64px); align-items: start; }
@media (min-width: 900px) { .huur-artikel__raster { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); } }

/* Slider */
.huur-slides { position: relative; display: grid; gap: var(--s-3); }
.huur-slides__vlak { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-cream-soft); }
.huur-slides__spoor { display: flex; height: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.huur-slides__spoor::-webkit-scrollbar { display: none; }
.huur-slides__spoor:focus-visible { outline: 2px solid var(--c-brass); outline-offset: -4px; }
.huur-slides__dia { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.huur-slides__dia img { width: 100%; height: 100%; object-fit: cover; user-select: none; }
/* Nog geen foto: lijntekening in hetzelfde vlak */
.huur-slides__tekening { display: grid; place-items: center; width: 100%; height: 100%; background: var(--c-cream-soft); color: var(--c-brass-ink); }
.huur-slides__tekening svg { width: min(46%, 320px); height: auto; }
.huur-slides__tekening--klein svg { width: 70%; }
.huur-erbij__tekening { display: grid; place-items: center; width: 100%; height: 100%; color: var(--c-brass-ink); }
.huur-erbij__tekening svg { width: 46%; height: auto; }
.huur-slides__label {
  position: absolute; left: var(--s-3); top: var(--s-3); z-index: 1;
  padding: 4px 8px; background: rgba(247, 243, 234, 0.92); color: var(--c-text-mute);
  font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.huur-slides__pijl {
  position: absolute; top: 50%; z-index: 1; margin-top: -21px;
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid rgba(247, 243, 234, 0.4); border-radius: 50%;
  background: rgba(14, 13, 11, 0.45); color: var(--c-text-inv); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
.huur-slides__pijl:hover { background: rgba(14, 13, 11, 0.78); }
.huur-slides__pijl--vorige { left: var(--s-3); }
.huur-slides__pijl--volgende { right: var(--s-3); }
.huur-slides__stippen { display: flex; gap: var(--s-2); }
.huur-slides__stip {
  width: 64px; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--c-cream-line); background: var(--c-cream-soft); opacity: 0.6;
  transition: opacity var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.huur-slides__stip img { width: 100%; height: 100%; object-fit: cover; }
.huur-slides__stip:hover { opacity: 0.85; }
.huur-slides__stip.is-actief { opacity: 1; border-color: var(--c-ink); }

/* Informatie */
.huur-artikel__info { display: grid; gap: var(--s-4); align-content: start; }
.huur-artikel__cat { font-size: var(--t-overline); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-brass-ink); }
.huur-artikel__cat a:hover { text-decoration: underline; text-underline-offset: 3px; }
.huur-artikel__titel { font-size: var(--t-3xl); line-height: 1.05; }
.huur-artikel__verhaal { color: var(--c-text-soft); line-height: 1.7; max-width: 60ch; }

.huur-specs { margin: 0; border-top: 1px solid var(--c-cream-line); }
.huur-specs div { display: grid; grid-template-columns: 110px 1fr; gap: var(--s-4); padding: 9px 0; border-bottom: 1px solid var(--c-cream-line); font-size: var(--t-sm); }
.huur-specs dt { color: var(--c-text-mute); }
.huur-specs dd { margin: 0; color: var(--c-text); }

.huur-prijzen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--c-cream-line); border: 1px solid var(--c-cream-line); }
.huur-prijzen div { display: grid; gap: 2px; padding: 10px 12px; background: var(--c-cream-soft); }
.huur-prijzen span { font-size: var(--t-xs); color: var(--c-text-mute); }
.huur-prijzen strong { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 400; line-height: 1.1; font-variant-numeric: lining-nums; }

.huur-prijzen__noot { margin-top: calc(var(--s-2) * -1); font-size: var(--t-xs); line-height: 1.5; color: var(--c-text-mute); }
.huur-dagen { font-size: var(--t-sm); color: var(--c-text-soft); }
.huur-dagen strong { color: var(--c-text); font-weight: 600; }
.huur-dagen.is-fout { color: #7A2A20; }

.huur-koop { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: stretch; margin-top: var(--s-1); }
.huur-aantal { display: inline-flex; align-items: stretch; border: 1px solid var(--c-cream-line); background: var(--c-cream); }
.huur-aantal button { width: 42px; border: 0; background: transparent; color: var(--c-text); font: inherit; font-size: var(--t-lg); cursor: pointer; }
.huur-aantal button:hover:not(:disabled) { background: var(--c-cream-soft); }
.huur-aantal button:disabled { color: var(--c-cream-line); cursor: default; }
.huur-aantal input {
  width: 48px; border: 0; border-inline: 1px solid var(--c-cream-line); background: transparent;
  text-align: center; font: inherit; font-variant-numeric: lining-nums tabular-nums; color: var(--c-text);
  -moz-appearance: textfield;
}
.huur-aantal input::-webkit-outer-spin-button, .huur-aantal input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.huur-koop__knop {
  flex: 1 1 220px; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 50px; padding: 14px 22px; border: 0; cursor: pointer;
  background: var(--c-ink); color: var(--c-text-inv);
  font: inherit; font-size: var(--t-xs); letter-spacing: var(--ls-wide); text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--ease);
}
.huur-koop__knop:hover { background: var(--c-brass-ink); }
.huur-koop__knop.is-toegevoegd { background: var(--c-brass); color: var(--c-ink); }
.huur-koop__noot { font-size: var(--t-xs); color: var(--c-text-mute); }

/* ── Strook met praktische informatie ────────────────────────────── */

.huur-praktisch { background: var(--c-cream-soft); border-block: 1px solid var(--c-cream-line); }
.huur-praktisch__raster { display: grid; gap: var(--s-4) var(--s-6); padding-block: var(--s-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .huur-praktisch__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.huur-praktisch__item { display: grid; gap: 2px; font-size: var(--t-sm); color: var(--c-text-soft); line-height: 1.5; }
.huur-praktisch__item strong { font-size: var(--t-overline); letter-spacing: var(--ls-wide); text-transform: uppercase; font-weight: 500; color: var(--c-brass-ink); }

/* ── Vaak bijgeboekt ─────────────────────────────────────────────── */

.huur-erbij__kop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.huur-erbij__titel { font-size: var(--t-2xl); }
.huur-erbij__alles { font-size: var(--t-sm); color: var(--c-brass-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--c-cream-line); }
.huur-erbij__raster { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .huur-erbij__raster { gap: var(--s-4); grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.huur-erbij__kaart { display: grid; grid-template-rows: auto 1fr auto; background: var(--c-cream-soft); border: 1px solid var(--c-cream-line); transition: border-color var(--dur-fast) var(--ease); }
.huur-erbij__kaart:hover { border-color: var(--c-brass); }
.huur-erbij__beeld { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-cream); }
.huur-erbij__beeld img { width: 100%; height: 100%; object-fit: cover; }
.huur-erbij__tekst { display: grid; gap: 2px; padding: var(--s-3) var(--s-4) 0; align-content: start; }
.huur-erbij__naam { font-family: var(--font-display); font-size: var(--t-lg); line-height: 1.15; }
.huur-erbij__naam a:hover { text-decoration: underline; text-underline-offset: 3px; }
.huur-erbij__prijs { font-size: var(--t-sm); color: var(--c-text-mute); font-variant-numeric: lining-nums; }
.huur-erbij__knop {
  margin: var(--s-3) var(--s-4) var(--s-4); padding: 9px 12px; cursor: pointer;
  border: 1px solid var(--c-text); background: transparent; color: var(--c-text);
  font: inherit; font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.huur-erbij__knop:hover { background: var(--c-ink); color: var(--c-text-inv); }
.huur-erbij__knop.is-toegevoegd { background: var(--c-brass); border-color: var(--c-brass); color: var(--c-ink); }

/* ── Zwevende knop "Huuraanvraag (n)" ────────────────────────────── */

.huur-mandjeknop {
  position: fixed; right: clamp(16px, 2.5vw, 28px); bottom: clamp(16px, 2.5vw, 28px); z-index: 50;
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: 12px 14px 12px 18px; background: var(--c-ink); color: var(--c-text-inv);
  box-shadow: var(--shadow-lg); font-size: var(--t-sm);
  transition: background-color var(--dur-fast) var(--ease);
}
.huur-mandjeknop[hidden] { display: none; }
.huur-mandjeknop:hover { background: var(--c-brass-ink); }
.huur-mandjeknop__aantal {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px;
  background: var(--c-brass); color: var(--c-ink); font-size: var(--t-xs); font-weight: 600; font-variant-numeric: lining-nums;
}
.huur-mandjeknop.is-nieuw { animation: huurKnop 0.5s var(--ease-out); }
@keyframes huurKnop { 40% { transform: scale(1.08); } }

/* ── Huuraanvraag ────────────────────────────────────────────────── */

.huur-aanvraag { padding-top: clamp(104px, 10vw, 128px); }
.huur-aanvraag__kop { display: grid; gap: var(--s-3); margin-bottom: clamp(24px, 3vw, 36px); max-width: 64ch; }
.huur-aanvraag__kop h1 { font-size: var(--t-3xl); }
.huur-aanvraag__kop p { color: var(--c-text-soft); }
.huur-aanvraag__raster { display: grid; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (min-width: 1000px) { .huur-aanvraag__raster { grid-template-columns: minmax(0, 1fr) 320px; } }
.huur-aanvraag [hidden] { display: none !important; }

.huur-regels { border-top: 1px solid var(--c-text); }
.huur-regel {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; grid-template-areas: "foto tekst aantal weg" "foto tekst bedrag weg";
  gap: 4px var(--s-4); align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--c-cream-line);
}
.huur-regel__foto { grid-area: foto; width: 64px; height: 48px; object-fit: cover; background: var(--c-cream-soft); }
.huur-regel__tekst { grid-area: tekst; display: grid; gap: 2px; min-width: 0; }
.huur-regel__tekst a { font-family: var(--font-display); font-size: var(--t-lg); line-height: 1.15; }
.huur-regel__tekst a:hover { text-decoration: underline; text-underline-offset: 3px; }
.huur-regel__tekst span { font-size: var(--t-xs); color: var(--c-text-mute); font-variant-numeric: lining-nums; }
.huur-regel .huur-aantal { grid-area: aantal; justify-self: end; }
.huur-aantal--klein button { width: 32px; height: 32px; font-size: var(--t-base); }
.huur-aantal__waarde { display: grid; place-items: center; min-width: 34px; border-inline: 1px solid var(--c-cream-line); font-size: var(--t-sm); font-variant-numeric: lining-nums tabular-nums; }
.huur-regel__bedrag { grid-area: bedrag; justify-self: end; font-size: var(--t-sm); font-variant-numeric: lining-nums tabular-nums; }
.huur-regel__weg { grid-area: weg; display: grid; place-items: center; width: 32px; height: 32px; border: 0; background: transparent; color: var(--c-text-mute); cursor: pointer; }
.huur-regel__weg:hover { color: var(--c-text); }
@media (min-width: 640px) {
  .huur-regel { grid-template-columns: 72px minmax(0, 1fr) auto 90px 32px; grid-template-areas: "foto tekst aantal bedrag weg"; }
  .huur-regel__foto { width: 72px; height: 54px; }
}

.huur-leeg { display: grid; gap: var(--s-3); padding: var(--s-6); background: var(--c-cream-soft); border: 1px solid var(--c-cream-line); justify-items: start; }
.huur-leeg__link { font-size: var(--t-sm); color: var(--c-brass-ink); text-decoration: underline; text-underline-offset: 4px; }

.huur-form { display: grid; gap: var(--s-6); margin-top: clamp(28px, 4vw, 44px); }
.huur-form fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: var(--s-3); }
.huur-form legend { margin-bottom: var(--s-3); font-family: var(--font-display); font-size: var(--t-xl); }
.huur-keuzes { display: grid; gap: var(--s-2); }
@media (min-width: 640px) { .huur-keuzes--3 { grid-template-columns: repeat(3, 1fr); } .huur-keuzes--2 { grid-template-columns: repeat(2, 1fr); } }
/* Keuze die niet kan: zichtbaar, maar duidelijk uit */
.huur-keuze.is-uit { opacity: 0.45; cursor: not-allowed; }
.huur-keuze.is-uit input { cursor: not-allowed; }

.huur-keuze { position: relative; display: grid; gap: 2px; padding: 12px 14px 12px 40px; border: 1px solid var(--c-cream-line); background: var(--c-cream-soft); cursor: pointer; font-size: var(--t-sm); }
.huur-keuze input { position: absolute; left: 14px; top: 15px; accent-color: var(--c-ink); }
.huur-keuze small { font-size: var(--t-xs); color: var(--c-text-mute); }
.huur-keuze:has(input:checked) { border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); background: var(--c-cream); }
.huur-keuze:has(input:focus-visible) { outline: 2px solid var(--c-brass); outline-offset: 2px; }

.huur-fout { padding: 12px 14px; background: #F6E3DF; color: #7A2A20; font-size: var(--t-sm); }
.huur-fout a { text-decoration: underline; }
.huur-versturen {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--s-3); min-height: 52px; padding: 14px 26px;
  border: 0; background: var(--c-brass); color: var(--c-ink); cursor: pointer;
  font: inherit; font-size: var(--t-xs); letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.huur-versturen:hover:not(:disabled) { background: var(--c-brass-bright); }
.huur-versturen:disabled { opacity: 0.6; cursor: default; }
.huur-form__noot { font-size: var(--t-xs); color: var(--c-text-mute); max-width: 60ch; }

.huur-overzicht { display: grid; gap: var(--s-3); padding: var(--s-5); background: var(--c-ink); color: var(--c-text-inv); }
@media (min-width: 1000px) { .huur-overzicht { position: sticky; top: 96px; } }
.huur-overzicht__label { font-size: var(--t-overline); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-brass-bright); }
.huur-overzicht__lijst { display: grid; }
.huur-overzicht__lijst li { display: flex; justify-content: space-between; gap: var(--s-3); padding: 8px 0; border-bottom: 1px solid var(--c-ink-line); font-size: var(--t-sm); color: var(--c-text-inv-soft); }
.huur-overzicht__lijst li span:last-child { color: var(--c-text-inv); text-align: right; font-variant-numeric: lining-nums; }
.huur-overzicht__totaal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--s-3); font-size: var(--t-sm); color: var(--c-text-inv-soft); }
.huur-overzicht__totaal strong { margin-left: auto; white-space: nowrap; font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 400; color: var(--c-text-inv); font-variant-numeric: lining-nums; }
.huur-overzicht__noot { font-size: var(--t-xs); line-height: 1.55; color: var(--c-text-inv-mute); }
.huur-overzicht__lijst--kosten { border-top: 1px solid var(--c-ink-line); }
.huur-overzicht__lijst small,
.huur-overzicht__totaal small { display: block; margin-top: 1px; font-size: var(--t-xs); color: var(--c-text-inv-mute); }
.huur-veldnoot { font-size: var(--t-xs); line-height: 1.5; color: var(--c-text-mute); }

.huur-klaar { display: grid; gap: var(--s-4); max-width: 60ch; justify-items: start; }
.huur-klaar__vink { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c-brass); color: var(--c-ink); font-size: 1.25rem; }
.huur-klaar__titel { font-size: var(--t-2xl); outline: none; }
.huur-klaar p { color: var(--c-text-soft); }
.huur-klaar__noot { font-size: var(--t-sm); }

@media (prefers-reduced-motion: reduce) {
  .huur-mandjeknop.is-nieuw { animation: none; }
  .huur-slides__stip, .huur-koop__knop, .huur-erbij__kaart, .huur-erbij__knop { transition: none; }
}