/* Niekolaas Verhuur — publieke boekingssite. Hergebruikt het kleurenpalet en
   componentstijl van het Auto Repair-thema (zie auto-repair-child/style.css
   en cache/all.css: hoofdrood #a92828, hover lichtblauw #A7D9EE/#18607e,
   grijze vlakken #f1f1f1/#e8e8e8, randkleur #e2e2e2) zodat de pagina's als
   onderdeel van de site ogen i.p.v. een los stuk. De VRIJ/HALF/BEZET-
   kalenderkleuren blijven bewust het universele groen/amber/grijs
   stoplichtpatroon (wijzigen naar het rode huisstijl-accent zou verwarrend
   zijn, aangezien rood elders juist de call-to-action-kleur is). */

.niekolaas-huren {
	max-width: 56rem;
	margin: 0 auto;
	padding: 1.5rem 1rem;
}

.niekolaas-huren h1 {
	margin-top: 0.5rem;
}

.niekolaas-terug-link {
	font-size: 0.875rem;
	text-decoration: underline;
	color: #a92828;
}

.niekolaas-categorie-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.5rem;
}

.niekolaas-categorie-kaart {
	flex: 1 1 100%;
}

@media ( min-width: 640px ) {
	.niekolaas-categorie-kaart {
		flex: 0 1 calc( 50% - 0.5rem );
	}
}

.niekolaas-categorie-kaart {
	display: block;
	box-sizing: border-box;
	overflow: hidden;
	border: 1px solid #e2e2e2;
	border-radius: 0.375rem;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.06 );
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.niekolaas-categorie-kaart:hover {
	background: #f1f1f1;
	border-color: #a92828;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.1 );
}

.niekolaas-categorie-kaart img {
	width: 100%;
	height: 10rem;
	object-fit: cover;
	display: block;
}

.niekolaas-categorie-kaart-label {
	padding: 1rem;
	font-weight: 500;
}

.niekolaas-aanhanger-lijst {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.niekolaas-aanhanger-kaart {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border: 1px solid #e2e2e2;
	border-radius: 0.375rem;
	padding: 1rem;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.06 );
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.niekolaas-aanhanger-kaart:hover {
	background: #f1f1f1;
	border-color: #a92828;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.1 );
}

.niekolaas-aanhanger-kaart-info {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.niekolaas-aanhanger-kaart-info img {
	width: 5rem;
	height: 3.5rem;
	object-fit: cover;
	border-radius: 0.375rem;
	flex-shrink: 0;
}

.niekolaas-aanhanger-naam {
	font-weight: 500;
	color: #2b2f34;
}

.niekolaas-aanhanger-beschrijving {
	font-size: 0.875rem;
	color: #8f8d8e;
}

.niekolaas-dagstatus {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.75rem;
	color: #4d4d4d;
	white-space: nowrap;
	flex-shrink: 0;
}

.niekolaas-dagstatus-stip {
	display: inline-block;
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 9999px;
}

/* Detailpagina — hero-indeling (feedback na staging-test, voorbeeld
   "Ko vd Berg"): grote foto/galerij + titel + een opvallende gele
   "Nu huren"-CTA die naar het aanvraagformulier onderaan scrollt. Bewust
   geen pixel-perfecte kopie, geen nieuwe component-library — alleen
   uitbreiding van de bestaande stijltaal (rood accent, grijze vlakken). */

.niekolaas-detail-hero {
	display: grid;
	gap: 1.25rem;
	margin-top: 1rem;
}

@media ( min-width: 760px ) {
	.niekolaas-detail-hero {
		grid-template-columns: minmax( 0, 30rem ) 1fr;
		align-items: start;
	}
}

.niekolaas-detail-foto img {
	width: 100%;
	max-width: 30rem;
	height: 18rem;
	object-fit: cover;
	border-radius: 0.75rem;
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.1 );
}

.niekolaas-detail-zijkolom {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.niekolaas-detail-beschrijving {
	color: #4d4d4d;
}

.niekolaas-cta-knop {
	display: inline-block;
	align-self: flex-start;
	background: #f5c518;
	color: #2b2f34;
	border: none;
	border-radius: 0.375rem;
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.15 );
	transition: filter 0.15s ease;
}

.niekolaas-cta-knop:hover {
	filter: brightness( 0.94 );
}

/* Fotogalerij (lightSlider) op de aanhanger-detailpagina — alleen
   geladen als een aanhanger-type daadwerkelijk meerdere foto's heeft,
   zie inc/public-routing.php. Zelfde classnamen/structuur als
   niekolaas-verkoop/assets/public.css, bewust hergebruikt zodat
   lightSlider's eigen CSS zonder aanpassing werkt. */
.niekolaas-detail-galerij {
	position: relative;
	max-width: 30rem;
}

.niekolaas-lightslider {
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.1 );
}

.niekolaas-lightslider img {
	width: 100%;
	height: 18rem;
	object-fit: cover;
	display: block;
}

.niekolaas-specs {
	margin-top: 1rem;
	font-size: 0.875rem;
	border-collapse: collapse;
	width: 100%;
	max-width: 28rem;
}

.niekolaas-specs tr {
	border-bottom: 1px solid #e2e2e2;
}

.niekolaas-specs th {
	text-align: left;
	color: #8f8d8e;
	font-weight: 500;
	padding: 0.4rem 1rem 0.4rem 0;
}

.niekolaas-specs td {
	padding: 0.4rem 0;
	color: #2b2f34;
}

.niekolaas-weekendtarief-wrap {
	background: #fdf6e3;
	border-radius: 0.375rem;
	padding: 0.6rem 0.85rem;
	margin: 0.75rem 0;
	font-size: 0.9rem;
}

.niekolaas-vrij-vanaf-vandaag {
	font-size: 0.875rem;
	color: #8a6d1f;
	background: #fdf6e3;
	border-radius: 0.375rem;
	padding: 0.5rem 0.75rem;
	margin-top: 0.5rem;
}

.niekolaas-prijstabel {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 0.6rem;
	font-size: 0.875rem;
	max-width: 34rem;
	margin-top: 1rem;
}

@media ( min-width: 480px ) {
	.niekolaas-prijstabel {
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media ( min-width: 760px ) {
	.niekolaas-prijstabel {
		grid-template-columns: repeat( 5, 1fr );
	}
}

.niekolaas-prijstabel > div {
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 0.5rem;
	padding: 0.75rem 0.5rem;
	text-align: center;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.06 );
}

.niekolaas-prijslabel {
	display: block;
	color: #8f8d8e;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin-bottom: 0.25rem;
}

.niekolaas-prijswaarde {
	font-size: 1.1rem;
	font-weight: 700;
	color: #a92828;
}

.niekolaas-rijbewijs {
	max-width: 24rem;
	margin-top: 1.5rem;
}

.niekolaas-rijbewijs h2 {
	font-size: 1rem;
	font-weight: 500;
	margin-bottom: 0.25rem;
	color: #2b2f34;
}

.niekolaas-rijbewijs p {
	font-size: 0.875rem;
	color: #4d4d4d;
	margin: 0.25rem 0;
}

.niekolaas-detail-onbeschikbaar {
	margin-top: 1.5rem;
	color: #8f8d8e;
}

/* Kalender */

/* Alleen de kalender zelf krijgt het donkere thema uit het voorbeeld —
   de rest van het formulier (kolom 2/3, en de stappen erna) blijft
   bewust op het lichte thema (anders zou elk formulierveld/label
   hieronder ook opnieuw gestyled moeten worden). */
.niekolaas-kalender-dark {
	background: #2b2f34;
	border-radius: 0.75rem;
	padding: 1rem;
	max-width: 24rem;
}

.niekolaas-maand-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.niekolaas-maand-nav a {
	font-size: 0.875rem;
	text-decoration: underline;
	color: #f5c518;
}

.niekolaas-maand-label {
	font-weight: 500;
	color: #fff;
}

.niekolaas-kalender-weekdagen {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	text-align: center;
	font-size: 0.75rem;
	color: #a7aaad;
	margin-top: 0.5rem;
}

.niekolaas-kalender-grid {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	gap: 0.25rem;
	margin-top: 0.25rem;
}

.niekolaas-dag {
	padding: 0.375rem 0;
	font-size: 0.875rem;
	border: none;
	border-radius: 0.25rem;
	cursor: pointer;
	background: #dcfce7;
	color: #14532d;
}

.niekolaas-dag[ data-status='HALF' ] {
	background: #fef9c3;
	color: #713f12;
}

.niekolaas-dag[ data-status='BEZET' ],
.niekolaas-dag[ data-geblokkeerd='1' ] {
	background: #f3f4f6;
	color: #9ca3af;
	cursor: not-allowed;
}

.niekolaas-dag-geselecteerd {
	outline: 2px solid #a92828;
	outline-offset: -2px;
}

.niekolaas-legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	font-size: 0.75rem;
	color: #d4d4d8;
	margin-top: 0.75rem;
}

.niekolaas-legenda span {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.niekolaas-legenda-stip {
	display: inline-block;
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 9999px;
}

.niekolaas-openingstijden-tekst {
	font-size: 0.75rem;
	color: #d4d4d8;
	margin-top: 0.5rem;
}

/* Stappenbalk (feedback na staging-test, voorbeeld "Ko vd Berg"):
   Winkelmandje → Persoonlijke gegevens → Betaling, als pijl-vormige
   segmenten. Puur visueel/CSS (clip-path), geen aparte pagina's. */

.niekolaas-stappenbalk {
	display: flex;
	margin-top: 1.5rem;
}

.niekolaas-stap {
	flex: 1;
	text-align: center;
	padding: 0.75rem 1.25rem;
	background: #e8e8e8;
	color: #8f8d8e;
	font-weight: 500;
	font-size: 0.8125rem;
	clip-path: polygon( 0 0, calc( 100% - 1rem ) 0, 100% 50%, calc( 100% - 1rem ) 100%, 0 100%, 1rem 50% );
}

.niekolaas-stap:first-child {
	clip-path: polygon( 0 0, calc( 100% - 1rem ) 0, 100% 50%, calc( 100% - 1rem ) 100%, 0 100% );
}

.niekolaas-stap + .niekolaas-stap {
	margin-left: -1rem;
}

.niekolaas-stap-actief {
	background: #2b2f34;
	color: #fff;
}

/* Winkelmandje-stap: 3 kolommen (1 Datum / 2 Periode / 3 Opties), zoals
   in het voorbeeld — bewust als nevenschikkende kolommen i.p.v.
   losse pagina's, want het zijn geen aparte formulierstappen (alle 3
   horen tot dezelfde "Winkelmandje"-stap in de stappenbalk hierboven). */

.niekolaas-stap-kolommen {
	display: grid;
	gap: 1.5rem;
}

@media ( min-width: 860px ) {
	.niekolaas-stap-kolommen {
		grid-template-columns: repeat( 3, 1fr );
		align-items: start;
	}
}

.niekolaas-stap-kolom {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.niekolaas-stap-kolom h3 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #2b2f34;
	margin: 0;
}

.niekolaas-stap-nummer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
	border-radius: 50%;
	background: #2b2f34;
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
}

.niekolaas-stap-navigatie {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

/* "Volgende" altijd rechtsonder, ook als "Vorige" ontbreekt (stap 1). */
.niekolaas-stap-navigatie .niekolaas-stap-volgende {
	margin-left: auto;
}

.niekolaas-stap-vorige {
	background: none;
	border: 1px solid #c9c9c9;
	color: #4d4d4d;
	border-radius: 0.25rem;
	padding: 0.625rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
}

.niekolaas-stap-vorige:hover {
	background: #f1f1f1;
}

.niekolaas-reservering-tekst {
	font-size: 0.875rem;
	color: #4d4d4d;
	background: #f1f1f1;
	border-radius: 0.375rem;
	padding: 0.75rem 1rem;
}

/* Aanvraagformulier */

#niekolaas-aanvraag-formulier {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.niekolaas-stap-paneel {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* De eigen `display: flex` hierboven zou anders de standaard
   [hidden] { display: none }-regel van de browser overschrijven (een
   auteur-stijlregel wint bij gelijke specificiteit altijd van de
   user-agent-stijl) — expliciet hersteld zodat JS de stappen met het
   `hidden`-attribuut nog steeds kan verbergen. */
.niekolaas-stap-paneel[hidden] {
	display: none;
}

.niekolaas-stap-paneel-smal {
	max-width: 28rem;
}

/* Stap "Persoonlijke gegevens" (feedback na staging-test, voorbeeld
   "Ko vd Berg"): formulier + winkelmand-samenvatting naast elkaar, zodat
   direct zichtbaar is wat en voor welke periode er wordt gehuurd. */
.niekolaas-gegevens-layout {
	gap: 1.5rem;
}

@media ( min-width: 860px ) {
	.niekolaas-gegevens-layout {
		display: grid;
		grid-template-columns: minmax( 0, 28rem ) 1fr;
		align-items: start;
	}
}

.niekolaas-boeking-wrap[hidden] {
	display: none;
}

.niekolaas-alternatief-melding {
	background: #fff8e1;
	border-left: 3px solid #f5c518;
	border-radius: 0.375rem;
	padding: 0.6rem 0.85rem;
	font-size: 0.875rem;
}

.niekolaas-alternatief-melding[hidden] {
	display: none;
}

.niekolaas-alternatief-melding a {
	font-weight: 700;
}

#niekolaas-aanvraag-formulier label {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.875rem;
}

#niekolaas-aanvraag-formulier input[type='text'],
#niekolaas-aanvraag-formulier input[type='email'],
#niekolaas-aanvraag-formulier input[type='number'],
#niekolaas-aanvraag-formulier select,
#niekolaas-aanvraag-formulier textarea {
	border: 1px solid #c9c9c9;
	border-radius: 0.25rem;
	padding: 0.5rem 0.75rem;
	background: #fff;
}

.niekolaas-honeypot {
	position: absolute;
	left: -9999px;
	width: 0;
	height: 0;
	opacity: 0;
}

.niekolaas-tijd-selects {
	display: flex;
	gap: 0.75rem;
}

.niekolaas-help-tekst {
	font-size: 0.75rem;
	color: #8f8d8e;
	margin: -0.5rem 0 0;
}

.niekolaas-opties-fieldset {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	border: none;
	padding: 0;
}

.niekolaas-opties-fieldset legend {
	font-size: 0.875rem;
	font-weight: 500;
	color: #2b2f34;
	padding: 0;
}

.niekolaas-optie-rij {
	flex-direction: row !important;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-left: 3px solid #a92828;
	border-radius: 0.375rem;
	padding: 0.6rem 0.85rem;
}

.niekolaas-optie-rij input[type='number'] {
	width: 5rem;
}

.niekolaas-winkelwagen {
	border: 1px solid #e2e2e2;
	border-radius: 0.375rem;
	padding: 0.75rem;
	font-size: 0.875rem;
	background: #f1f1f1;
}

.niekolaas-winkelwagen-kop {
	display: flex;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #e2e2e2;
}

.niekolaas-winkelwagen-foto {
	width: 4rem;
	height: 4rem;
	object-fit: cover;
	border-radius: 0.25rem;
	flex-shrink: 0;
}

.niekolaas-winkelwagen-titel {
	font-weight: 700;
	color: #2b2f34;
	margin: 0 0 0.25rem;
}

.niekolaas-winkelwagen-periode {
	color: #4d4d4d;
	line-height: 1.4;
}

.niekolaas-winkelwagen-regel {
	display: flex;
	justify-content: space-between;
}

.niekolaas-winkelwagen-optie {
	color: #8f8d8e;
}

.niekolaas-winkelwagen-totaal {
	display: flex;
	justify-content: space-between;
	font-weight: 500;
	border-top: 1px solid #e2e2e2;
	margin-top: 0.5rem;
	padding-top: 0.5rem;
	color: #a92828;
}

.niekolaas-formulier-fout {
	color: #a92828;
	font-size: 0.875rem;
}

.niekolaas-formulier-fout:empty {
	display: none;
}

.niekolaas-verzend-knop {
	background: #a92828;
	color: #fff;
	border: none;
	border-radius: 0.25rem;
	padding: 0.625rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.niekolaas-verzend-knop:hover:not( :disabled ) {
	background: #a7d9ee;
	color: #18607e;
}

.niekolaas-verzend-knop:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.niekolaas-aanvraag-bevestiging {
	margin-top: 1.5rem;
	border: 1px solid #bbf7d0;
	background: #f0fdf4;
	color: #166534;
	border-radius: 0.375rem;
	padding: 1rem;
	font-size: 0.875rem;
}

/* Betaalpagina */

.niekolaas-betalen-opties {
	margin: 0.5rem 0;
	padding-left: 1.25rem;
	font-size: 0.875rem;
	color: #4d4d4d;
}

.niekolaas-betalen-totaal {
	font-size: 1.125rem;
	margin-top: 0.5rem;
	color: #a92828;
	font-weight: 600;
}

.niekolaas-betalen-melding {
	margin-top: 1rem;
	border-radius: 0.375rem;
	padding: 1rem;
	font-size: 0.875rem;
}

.niekolaas-betalen-melding-betaald {
	border: 1px solid #bbf7d0;
	background: #f0fdf4;
	color: #166534;
}

.niekolaas-betalen-melding-verwerken {
	border: 1px solid #bae6fd;
	background: #f0f9ff;
	color: #075985;
}

.niekolaas-betalen-melding-annulering {
	border: 1px solid #fde68a;
	background: #fffbeb;
	color: #92400e;
}

/* Voordat er op "Nu huren" is geklikt: alleen de beschikbaarheidskalender. */
.niekolaas-boeking-wrap--alleen-kalender .niekolaas-stappenbalk,
.niekolaas-boeking-wrap--alleen-kalender .niekolaas-stap-kolom:not(:first-child),
.niekolaas-boeking-wrap--alleen-kalender .niekolaas-stap-kolom h3,
.niekolaas-boeking-wrap--alleen-kalender #niekolaas-stap1-fout,
.niekolaas-boeking-wrap--alleen-kalender .niekolaas-stap-navigatie {
	display: none;
}
.niekolaas-boeking-wrap--alleen-kalender .niekolaas-stap-kolommen {
	display: block;
	max-width: 26rem;
}

/* Indeling detailpagina: kop met "Nu huren" rechts, foto + prijzen links,
   specificaties + beschikbaarheidskalender rechts. */
.niekolaas-huren {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	grid-template-areas: "terug" "kop" "foto" "zij" "prijs" "rijb" "boek";
	column-gap: 2rem;
	align-items: start;
}
.niekolaas-huren > * { grid-column: 1 / -1; }
.niekolaas-huren > .niekolaas-terug-link { grid-area: terug; justify-self: start; }
.niekolaas-huren > .niekolaas-detail-kop { grid-area: kop; }
.niekolaas-huren > .niekolaas-detail-hero { display: contents; }
.niekolaas-detail-hero > .niekolaas-detail-galerij,
.niekolaas-detail-hero > .niekolaas-detail-foto { grid-area: foto; min-width: 0; }
.niekolaas-detail-hero > .niekolaas-detail-zijkolom { grid-area: zij; min-width: 0; }
.niekolaas-huren > .niekolaas-prijstabel { grid-area: prijs; }
.niekolaas-huren > .niekolaas-rijbewijs { grid-area: rijb; }
.niekolaas-huren > .niekolaas-boeking-wrap { grid-area: boek; }
.niekolaas-detail-kop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
}
.niekolaas-detail-kop h1 { margin: 0; }
.niekolaas-detail-zijkolom > .niekolaas-boeking-wrap { margin-top: 1.25rem; }
.niekolaas-boeking-wrap--alleen-kalender .niekolaas-stap-kolommen { max-width: none; }
@media ( min-width: 760px ) {
	.niekolaas-huren {
		grid-template-columns: minmax( 0, 1.25fr ) minmax( 0, 1fr );
		grid-template-areas:
			"terug terug"
			"kop kop"
			"foto zij"
			"prijs zij"
			"rijb zij"
			"boek boek";
	}
	.niekolaas-huren > .niekolaas-prijstabel,
	.niekolaas-huren > .niekolaas-rijbewijs { grid-column: 1; }
	.niekolaas-huren > .niekolaas-detail-hero > .niekolaas-detail-zijkolom { grid-column: 2; }
}
.nk-plugin-huren .niekolaas-detail-zijkolom { align-items: stretch; }
.nk-plugin-huren .niekolaas-detail-zijkolom > .niekolaas-boeking-wrap { margin-top: 0; }
.niekolaas-detail-zijkolom .niekolaas-specs { width: 100%; max-width: none; }

.niekolaas-btw {
	font-size: 0.75rem;
	font-weight: 400;
	color: #6b7280;
}

.niekolaas-maand-nav a.niekolaas-maand-uit {
	opacity: 0.35;
	pointer-events: none;
	text-decoration: none;
}