/* Herenkapsalon Smeets — eigen aanvullingen op het thema (afsprakenmodule, meldingen).
   Groot en duidelijk: de site wordt ook door ouderen gebruikt. */
:root {
	--groen: #10ce26;
	--groen-donker: #0b9e1c;
	--tekst: #eee;
	--zacht: #bbb;
	--vlak: #2e2e2e;
	--rand: #555;
	--rood: #e5484d;
}

.site-info .imprint { color: inherit; }
iframe.kaart { display: block; margin-bottom: 1.5em; }

/* ---------- algemeen ---------- */
.afspraak { font-size: 1.125rem; line-height: 1.6; }
.afspraak a:not(.knop):not(.tijd) { text-decoration: underline; box-shadow: none; }
.afspraak .hulp { color: var(--zacht); font-size: 1rem; }
.afspraak-kop { font-size: 1.5rem !important; font-weight: 700; letter-spacing: 0 !important; text-transform: none !important; color: var(--tekst) !important; margin: 1.5em 0 .5em !important; padding: 0 !important; }

.knop, .colors-dark .entry-content .knop {
	display: inline-block; background: var(--groen); color: #111 !important; border: 0; border-radius: 6px;
	font-size: 1.125rem; font-weight: 700; line-height: 1.3; padding: .8em 1.4em; margin: .25em 0;
	text-decoration: none !important; box-shadow: none !important; cursor: pointer; text-align: center;
}
.knop:hover, .knop:focus { background: #3fe052; color: #000 !important; }
.knop:focus-visible, .tijd:focus-visible, .keuze input:focus-visible + .keuze-tekst { outline: 3px solid #fff; outline-offset: 2px; }
.knop-groot { font-size: 1.25rem; padding: 1em 1.6em; width: 100%; margin-top: 1em; }
.knop-licht, .colors-dark .entry-content .knop-licht { background: transparent; color: var(--tekst) !important; border: 2px solid var(--tekst); padding: .65em 1.1em; }
.knop-licht:hover, .knop-licht:focus, .colors-dark .entry-content .knop-licht:hover { background: var(--tekst); color: #111 !important; }
.knop-rood, .colors-dark .entry-content .knop-rood { background: var(--rood); color: #fff !important; }
.knop-rood:hover, .knop-rood:focus { background: #ff6369; color: #fff !important; }

.melding { border-left: 6px solid var(--groen); background: var(--vlak); padding: 1em 1.2em; margin: 1em 0; font-size: 1.125rem; }
.melding-fout { border-left-color: var(--rood); }

/* ---------- stappen ---------- */
.stappen { list-style: none; margin: 0 0 1.5em; padding: 0; display: flex; gap: .5em; flex-wrap: wrap; font-size: 1rem; }
.stappen li { color: var(--zacht); display: flex; align-items: center; gap: .4em; margin-right: 1em; }
.stappen .nr { display: inline-flex; width: 1.9em; height: 1.9em; border-radius: 50%; border: 2px solid var(--rand); align-items: center; justify-content: center; font-weight: 700; }
.stappen .nu { color: var(--tekst); font-weight: 700; }
.stappen .nu .nr { background: var(--groen); border-color: var(--groen); color: #111; }
.stappen .klaar .nr { border-color: var(--groen); color: var(--groen); }

/* ---------- stap 1: keuzes ---------- */
.afspraak-form fieldset { border: 0; padding: 0; margin: 0 0 1.5em; background: none; min-width: 0; }
.afspraak-form legend { font-size: 1.375rem; font-weight: 700; color: var(--tekst); margin-bottom: .6em; padding: 0; }
.keuzes { display: grid; gap: .6em; }
.keuze { display: block; cursor: pointer; margin: 0; font-weight: 400; }
.keuze input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.keuze-tekst {
	display: block; border: 2px solid var(--rand); border-radius: 8px; padding: .9em 1em .9em 3.2em; position: relative;
	background: var(--vlak); color: var(--tekst); font-size: 1.125rem;
}
.keuze-tekst::before {
	content: ""; position: absolute; left: 1em; top: 1.05em; width: 1.3em; height: 1.3em; border-radius: 50%;
	border: 2px solid var(--zacht); background: #222;
}
.keuze input:checked + .keuze-tekst { border-color: var(--groen); background: #23361f; }
.keuze input:checked + .keuze-tekst::before { border-color: var(--groen); background: var(--groen); box-shadow: inset 0 0 0 4px #222; }
.keuze:hover .keuze-tekst { border-color: #999; }
.keuze .prijs { float: right; font-weight: 700; margin-left: 1em; }
.keuze .uitleg { display: block; color: var(--zacht); font-size: 1rem; }
.bellen { margin-top: 1.2em; }

/* ---------- samenvatting ---------- */
.samenvatting { background: var(--vlak); border-radius: 8px; padding: 1em 1.2em; margin-bottom: 1em; position: relative; }
.samenvatting > div { margin: .15em 0; }
.samenvatting .label { display: inline-block; min-width: 7.5em; color: var(--zacht); }
.samenvatting .prijs { color: var(--zacht); margin-left: .4em; }
.samenvatting .wijzig { position: absolute; right: 1.2em; top: 1em; font-size: 1rem; }

/* ---------- stap 2: agenda ---------- */
.weeknav { display: flex; justify-content: space-between; align-items: center; gap: .6em; flex-wrap: wrap; margin: 1em 0; }
.weektitel { font-size: 1.2rem; text-align: center; flex: 1 1 12em; order: 0; }
.weeknav-onder { margin-top: 1.5em; }
.agenda { display: grid; gap: 1em; }
.dag { border: 2px solid var(--rand); border-radius: 8px; padding: .8em 1em 1em; background: #262626; }
.dag-vol { opacity: .65; }
.dagtitel { font-size: 1.25rem !important; font-weight: 700 !important; color: var(--tekst) !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 0 .4em !important; padding: 0 !important; }
.vandaag { background: var(--groen); color: #111; font-size: .8rem; border-radius: 4px; padding: .1em .45em; vertical-align: middle; margin-left: .3em; text-transform: uppercase; }
.dag .geen { margin: 0; color: var(--zacht); }
.dagdeel { display: flex; gap: .8em; align-items: flex-start; margin-top: .5em; }
.dagdeel-naam { flex: 0 0 4.6em; color: var(--zacht); padding-top: .55em; font-size: 1rem; }
.tijden { display: flex; flex-wrap: wrap; gap: .5em; }
.colors-dark .entry-content a.tijd, a.tijd {
	display: inline-block; min-width: 4.6em; text-align: center; padding: .55em .7em; border: 2px solid var(--groen); border-radius: 6px;
	color: var(--tekst); font-size: 1.15rem; font-weight: 700; text-decoration: none; box-shadow: none; font-variant-numeric: tabular-nums;
}
.colors-dark .entry-content a.tijd:hover, .colors-dark .entry-content a.tijd:focus, a.tijd:hover { background: var(--groen); color: #111; box-shadow: none; }

.dagsprong { display: flex; flex-wrap: wrap; gap: .5em; margin: 0 0 1em; }
.colors-dark .entry-content .dagsprong a, .dagsprong a {
	flex: 1 1 4.5em; text-align: center; border: 2px solid var(--rand); border-radius: 6px; padding: .4em .3em; color: var(--tekst);
	text-decoration: none; box-shadow: none; line-height: 1.25; background: var(--vlak);
}
.dagsprong a span { display: block; font-weight: 700; font-size: 1.1rem; }
.dagsprong small { color: var(--zacht); font-size: .85rem; }
.colors-dark .entry-content .dagsprong a:hover, .dagsprong a:focus { border-color: var(--groen); box-shadow: none; }
.dag { scroll-margin-top: 1em; }

/* ---------- stap 3: formulier ---------- */
.veld { margin-bottom: 1.2em; }
.veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1em; }
.veld label { display: block; font-size: 1.125rem; font-weight: 700; color: var(--tekst); margin-bottom: .3em; }
.veld .optioneel { font-weight: 400; color: var(--zacht); }
.veld input, .veld textarea { width: 100%; font-size: 1.2rem; padding: .7em .8em; border: 2px solid var(--rand); border-radius: 6px; background: #111; color: #fff; }
.veld input:focus, .veld textarea:focus { border-color: var(--groen); outline: none; }
.veld .hulp { display: block; margin-top: .3em; }
.veld-verborgen { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- bevestiging ---------- */
.bevestiging { border: 3px solid var(--groen); border-radius: 10px; padding: 1.2em 1.4em; margin: .5em 0 1.2em; background: #23361f; text-align: center; }
.bevestiging p { margin: .3em 0; }
.bevestiging .groot { font-size: 1.6rem; font-weight: 700; line-height: 1.3; color: #fff; }
.bevestiging .vinkje { font-size: 2.4rem; color: var(--groen); line-height: 1; }
.bevestiging .adres { color: var(--zacht); }
.bevestiging-geannuleerd { border-color: var(--rood); background: #3a2224; }
.annuleren { margin: 1.5em 0; }
.annuleren summary { cursor: pointer; font-size: 1.125rem; text-decoration: underline; }

/* ---------- balk "U heeft een afspraak" (cookie) ---------- */
.afspraakbalk { background: #23361f; border-bottom: 3px solid var(--groen); color: #fff; font-size: 1.125rem; position: relative; z-index: 3; }
.afspraakbalk .wrap { padding-top: .9em; padding-bottom: .9em; }
.afspraakbalk-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6em 1.2em; }
.afspraakbalk-item + .afspraakbalk-item { border-top: 1px solid #3c5a35; margin-top: .8em; padding-top: .8em; }
.afspraakbalk p { margin: 0; line-height: 1.45; }
.afspraakbalk-label { display: block; color: #bfe3b8; font-size: 1rem; }
.afspraakbalk strong { font-size: 1.3rem; color: #fff; }
.afspraakbalk-wat { display: block; color: #ddd; }
.afspraakbalk-knoppen { display: flex; flex-wrap: wrap; gap: .5em; align-items: center; }
.afspraakbalk .knop { margin: 0; }
.afspraakbalk a.knop-licht { color: #fff !important; border-color: #fff; }
.afspraakbalk a.knop-licht:hover { color: #111 !important; }
.afspraakbalk-bel a { color: #fff; }

@media screen and (max-width: 30em) {
	.afspraakbalk-knoppen { width: 100%; }
	.afspraakbalk-knoppen .knop { flex: 1 1 40%; }
	.afspraak { font-size: 1.0625rem; }
	.dagdeel { display: block; margin-top: .6em; }
	.dagdeel-naam { display: block; padding: 0; margin-bottom: .3em; }
	.tijden { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4em; }
	.colors-dark .entry-content a.tijd, a.tijd { min-width: 0; padding: .6em 0; font-size: 1.1rem; }
	.weeknav .knop { flex: 1 1 45%; }
	.weektitel { order: -1; flex-basis: 100%; }
	.samenvatting .wijzig { position: static; display: inline-block; margin-top: .4em; }
	.keuze .prijs { float: none; display: block; margin: 0; }
	.veld-rij { grid-template-columns: 1fr; }
}

/* Mobiele weergave; het gegenereerde thema blijft de basis voor desktop. */
.mobiel-boeken { display: none; }
iframe.kaart { max-width: 100%; }
@media screen and (max-width: 767px) {
	body { font-size: 16px; }
	iframe.kaart { width: 100%; height: 260px; }
	.wrap { padding-left: 20px; padding-right: 20px; }
	.site-content { padding-top: 1.5em; }
	.entry-content { overflow-wrap: anywhere; }
	.has-header-image.twentyseventeen-front-page .custom-header,
	.has-header-image .custom-header { display: block; height: clamp(180px, 59vw, 280px); }
	.has-header-image:not(.twentyseventeen-front-page) .custom-header { height: 110px; }
	.has-header-image .custom-header-media img,
	.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
		position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0;
		max-width: 100%; object-fit: cover; object-position: center 35%; transform: none; padding: 0;
	}
	.has-header-image .site-branding { padding: 0; }
	.navigation-top .wrap { padding: 10px 16px; }
	.main-navigation { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
	.main-navigation .menu-toggle { margin: 0; padding: 12px 8px; min-height: 48px; font-size: 1rem; text-align: left; width: auto; }
	.main-navigation .mobiel-boeken { display: inline-flex; align-items: center; justify-content: center; margin: 0; min-height: 48px; padding: 12px 14px; font-size: 1rem; grid-column: 2; grid-row: 1; }
	.main-navigation .menu-bovenste-menu-container { grid-column: 1 / -1; min-width: 0; }
	.main-navigation > div > ul { padding: 8px 0; }
	.main-navigation a { min-height: 48px; padding: 12px 8px; }
	.main-navigation ul ul a { padding: 12px 8px; }
	.main-navigation .dropdown-toggle { min-width: 48px; min-height: 48px; padding: 10px; }
	.panel-content .wrap { padding-top: 1.5em; padding-bottom: 1.5em; }
	.panel-image { background-attachment: scroll; }
	.agenda-dagkeuze.dagkeuze-actief .dag:not(.dag-geselecteerd) { display: none; }
	.colors-dark .entry-content .dagsprong a[aria-current] { border-color: var(--groen); background: #23361f; }
	.dagsprong a { min-height: 64px; }
	.dagdeel { display: block; }
	.dagdeel-naam { display: block; padding: 0; margin-bottom: .4em; }
	.tijden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
	.colors-dark .entry-content a.tijd { min-width: 0; min-height: 48px; padding: 10px 4px; font-size: 1.125rem; }
	.weeknav .knop { flex: 1 1 40%; min-height: 48px; padding: 12px 8px; font-size: 1rem; }
	.weektitel { order: -1; flex-basis: 100%; }
	.samenvatting .label { min-width: 0; display: block; }
	.samenvatting .wijzig { position: static; display: inline-flex; align-items: center; min-height: 48px; margin-top: .25em; }
	.veld-rij { grid-template-columns: minmax(0, 1fr); }
	.keuze .prijs { float: none; display: block; margin: 0; }
	.afspraakbalk-knoppen { width: 100%; }
	.afspraakbalk-knoppen .knop { flex: 1 1 40%; padding: 12px 8px; }
	.bevestiging { padding: 1em; }
	.bevestiging .groot { font-size: 1.35rem; overflow-wrap: anywhere; }
	.afspraak .terug, .annuleren summary { display: inline-flex; align-items: center; min-height: 48px; }
}

/* Gelijke maten binnen mobiele groepen, ook als een label over twee regels loopt. */
@media screen and (max-width: 767px) {
	.afspraak *, .afspraakbalk * { box-sizing: border-box; }
	.afspraak-form, .keuzes, .keuze, .veld { min-width: 0; width: 100%; }
	.keuzes { grid-auto-rows: 1fr; gap: 12px; }
	.keuze { display: flex; }
	.keuze-tekst { width: 100%; height: 100%; min-height: 96px; padding: 16px 16px 16px 54px; display: flex; flex-direction: column; justify-content: center; overflow-wrap: anywhere; }
	.keuze-tekst::before { left: 16px; top: 50%; transform: translateY(-50%); }
	.keuze .prijs, .keuze .uitleg { margin: 0; }
	.veld input { display: block; width: 100%; min-width: 0; height: 56px; font-size: 1.125rem; padding: 12px 14px; }
	.veld textarea { display: block; width: 100%; min-width: 0; min-height: 140px; font-size: 1.125rem; padding: 12px 14px; resize: vertical; }
	.weeknav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
	.weeknav .weektitel { grid-column: 1 / -1; }
	.weeknav .knop { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 64px; margin: 0; }
	.dagsprong { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
	.colors-dark .entry-content .dagsprong a { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 64px; margin: 0; }
	.tijden { grid-auto-rows: 1fr; }
	.colors-dark .entry-content a.tijd { display: flex; align-items: center; justify-content: center; height: 52px; margin: 0; }
	.samenvatting, .dag, .bevestiging, .melding { width: 100%; min-width: 0; }
	.afspraakbalk-knoppen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.afspraakbalk-knoppen .knop { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; min-height: 64px; }
	.afspraakbalk-knoppen .knop:only-child { grid-column: 1 / -1; }
}
@media screen and (min-width: 480px) and (max-width: 767px) {
	.dagsprong { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}