/* 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 */

.niekolaas-detail-foto img {
	margin-top: 1rem;
	max-width: 28rem;
	width: 100%;
	height: 16rem;
	object-fit: cover;
	border-radius: 0.5rem;
}

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

.niekolaas-prijstabel {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 0.4rem 1rem;
	font-size: 0.875rem;
	max-width: 24rem;
	margin-top: 1rem;
	background: #e8e8e8;
	border-radius: 0.375rem;
	padding: 0.75rem 1rem;
}

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

.niekolaas-prijslabel {
	color: #8f8d8e;
}

.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 */

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

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

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

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

.niekolaas-kalender-weekdagen {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	text-align: center;
	font-size: 0.75rem;
	color: #8f8d8e;
	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: #4d4d4d;
	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: #8f8d8e;
	margin-top: 0.5rem;
}

/* Aanvraagformulier */

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

#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;
}

.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-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;
}