/* VivaSport Beheer — basisstijl. Kleuren mogen vrij aangepast
   worden aan de huisstijl (#38AC34) zonder de werking te beïnvloeden. */

.vsr-rooster {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 24px 0;
}

.vsr-dag {
	flex: 1 1 260px;
	min-width: 240px;
}

.vsr-dag-titel {
	margin: 0 0 10px;
	padding-bottom: 6px;
	border-bottom: 2px solid #38AC34;
	font-size: 1.1em;
}

.vsr-les {
	margin-bottom: 18px;
	padding: 12px;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	background: #fafafa;
}

.vsr-les-koptekst {
	display: flex;
	justify-content: space-between;
	font-weight: 600;
	margin-bottom: 8px;
}

.vsr-les-tijd {
	color: #555;
	font-weight: 400;
}

.vsr-datum-rij {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	border-top: 1px solid #ececec;
}

.vsr-datum-rij:first-child {
	border-top: none;
}

.vsr-datum-info {
	flex: 1 1 auto;
	min-width: 120px;
	display: flex;
	flex-direction: column;
	font-size: 0.9em;
}

.vsr-aangemeld-tekst {
	color: #777;
	font-size: 0.85em;
}

.vsr-balk-buitenkant {
	flex: 1 1 100px;
	height: 8px;
	background: #eee;
	border-radius: 4px;
	overflow: hidden;
}

.vsr-balk {
	height: 100%;
	transition: width 0.3s ease;
}

.vsr-balk--zwart   { background: #2b2b2b !important; }
.vsr-balk--groen   { background: #38AC34 !important; }
.vsr-balk--oranje  { background: #e08a1e !important; }
.vsr-balk--grijs   { background: #b5b5b5 !important; }

.vsr-rooster button.vsr-knop,
.vsr-modal button.vsr-knop {
	border: none !important;
	border-radius: 6px !important;
	padding: 8px 14px !important;
	background: #38AC34 !important;
	color: #fff !important;
	cursor: pointer;
	font-size: 0.9em;
	white-space: nowrap;
	box-shadow: none !important;
}

.vsr-rooster button.vsr-knop:hover,
.vsr-modal button.vsr-knop:hover {
	background: #2e8f2a !important;
	color: #fff !important;
}

/* Wens Jeanette (19 augustus 2026): de "Reserveer deze les"-knop in het
   info-paneel (kalender) mag geen aparte hover-kleur krijgen — soms
   toonde de tekst hierbij een oncomfortabele kleur door thema-CSS.
   Forceer daarom in alle statussen gewoon witte letters. De achtergrond
   (groen / grijs bij vol / vervallen) blijft ongemoeid, die wordt door
   script.js per status ingesteld. */
#vsr-info-reserveer-btn,
#vsr-info-reserveer-btn:hover,
#vsr-info-reserveer-btn:focus,
#vsr-info-reserveer-btn:active {
	color: #fff !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 6px;
	padding: 8px 14px;
	font-size: 0.95em;
	width: 100%;
	margin-top: 4px;
}

.vsr-rooster button.vsr-knop--vol,
.vsr-modal button.vsr-knop--vol {
	background: #b5b5b5 !important;
}

/* Specificiteit gelijk/hoger dan ".vsr-modal button.vsr-knop" houden — anders
   wint de groene basisstijl alsnog van deze secundaire (witte) knop-variant. */
.vsr-modal button.vsr-knop.vsr-knop--secundair,
.vsr-rooster button.vsr-knop.vsr-knop--secundair {
	background: #fff !important;
	color: #333 !important;
	border: 1px solid #ccc !important;
}

.vsr-modal button.vsr-knop.vsr-knop--secundair:hover,
.vsr-rooster button.vsr-knop.vsr-knop--secundair:hover {
	background: #f5f5f5 !important;
	color: #333 !important;
}

/* Modaal venster */
.vsr-modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.vsr-modal[hidden] {
	display: none;
}

.vsr-modal-inhoud {
	background: #fff;
	border-radius: 10px;
	padding: 24px;
	max-width: 380px;
	width: 90%;
	position: relative;
}

.vsr-modal-sluiten,
.vsr-modal-sluiten:hover,
.vsr-modal-sluiten:focus {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: #333 !important;
	font-size: 1.4em;
	cursor: pointer;
	line-height: 1;
}

#vsr-formulier label {
	display: block;
	margin-top: 12px;
	margin-bottom: 4px;
	font-weight: 600;
}

#vsr-formulier input[type="text"],
#vsr-formulier input[type="email"],
#vsr-formulier select {
	width: 100%;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-sizing: border-box;
}

.vsr-checkbox-label {
	display: flex !important;
	align-items: center;
	gap: 6px;
	font-weight: 400 !important;
}

/* Meldingen (succes / fout) in het reserveerformulier */
.vsr-melding {
	margin-top: 14px;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 0.9em;
	background: #f0f0f0;
}

.vsr-melding--gelukt {
	background: #e6f7e6;
	color: #2a7a2a;
}

.vsr-melding--fout {
	background: #fce8e8;
	color: #a00;
}

/* -------------------------------------------------------------------
   Mobielvriendelijkheid — schermen tot 480px (telefoon staand)
   ------------------------------------------------------------------- */
@media (max-width: 480px) {

	/* Dagkolommen altijd over de volle breedte — nooit naast elkaar */
	.vsr-dag {
		flex: 1 1 100%;
		min-width: 0;
	}

	/* Datum-rij: datum + balk op één regel, Reserveer-knop eronder */
	.vsr-datum-rij {
		flex-wrap: wrap;
		gap: 6px 8px;
	}

	.vsr-datum-info {
		flex: 1 1 auto;
		min-width: 0;
	}

	.vsr-balk-buitenkant {
		flex: 1 1 60px;
		align-self: center;
	}

	/* Knop op een eigen, volbrede regel */
	.vsr-datum-rij .vsr-knop {
		flex: 0 0 100% !important;
		text-align: center;
	}

	/* Modaal: minder zijmarge op kleine schermen */
	.vsr-modal-inhoud {
		padding: 16px 14px;
		width: 96%;
		border-radius: 8px;
	}

	/* Aangemeld-tekst iets leesbaar houden */
	.vsr-aangemeld-tekst {
		font-size: 0.88em;
	}
}

/* Extra lessen sectie in de reserveer-modal (taak B) */
.vsr-extra-lessen {
	margin-top: 14px;
	padding: 10px 12px;
	background: #f0f7f0;
	border-radius: 6px;
	border: 1px solid #c8e6c8;
}

.vsr-extra-lessen-titel {
	margin: 0 0 8px;
	font-weight: 600;
	font-size: 0.9em;
	color: #2e8f2a;
}

.vsr-extra-les-optie {
	margin-top: 6px;
}

/* Vervallen-aanduiding in het rooster (E1) */
.vsr-knop--vervallen {
	display: inline-block;
	padding: 8px 14px;
	background: #f5f5f5;
	color: #999;
	border-radius: 6px;
	font-size: 0.9em;
	white-space: nowrap;
	border: 1px dashed #ccc;
	cursor: default;
}

/* =====================================================================
   KALENDERWEERGAVE (v1.7.0)
   Desktop: maandkalenderraster
   Mobiel (≤700px): verticale daglijst
   ===================================================================== */

/* --- Legenda --- */
.vsr-kal-legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}
.vsr-kal-legenda-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #555;
}
.vsr-kal-legenda-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* --- Maandnavigatie --- */
.vsr-kal-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 16px;
}
.vsr-kal-nav-btn {
	background: #fff !important;
	border: 1.5px solid #ddd !important;
	border-radius: 8px;
	padding: 6px 14px;
	font-size: 13px;
	cursor: pointer;
	color: #444 !important;
	box-shadow: none !important;
	transition: border-color 0.15s;
}
.vsr-kal-nav-btn:hover,
.vsr-kal-nav-btn:focus {
	border-color: #38AC34 !important;
	color: #38AC34 !important;
	background: #fff !important;
}
.vsr-kal-maandlabel {
	font-size: 17px;
	font-weight: 700;
	min-width: 150px;
	text-align: center;
}

/* --- Desktop kalenderraster --- */
.vsr-kal-weekdagen {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	margin-bottom: 4px;
}
.vsr-kal-weekdagen span {
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	color: #888;
	padding: 4px 0;
}
.vsr-kal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 5px;
}
.vsr-kal-dag {
	border: 1px solid #eee;
	border-radius: 8px;
	min-height: 88px;
	padding: 5px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	background: #fff;
}
.vsr-kal-dag--buiten { background: #fafafa; opacity: 0.35; }
.vsr-kal-dag--vandaag { border-color: #38AC34; border-width: 2px; }
.vsr-kal-dagnummer {
	font-size: 11px;
	font-weight: 600;
	color: #333;
}

/* --- Les-chip (kalender) --- */
.vsr-kal-chip {
	border-radius: 5px;
	padding: 3px 5px;
	font-size: 9.5px;
	line-height: 1.3;
	border-left: 5px solid var(--chip-kleur, #38AC34);
	background: var(--chip-bg, #eafcea);
	cursor: pointer;
	transition: transform 0.1s, box-shadow 0.1s;
	display: flex;
	flex-direction: column;
	user-select: none;
}
.vsr-kal-chip:hover { transform: scale(1.03); box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.vsr-kal-chip--vol { opacity: 0.55; cursor: default; }
.vsr-kal-chip--vol:hover { transform: none; box-shadow: none; }
.vsr-kal-chip--vervallen { opacity: 0.4; cursor: default; text-decoration: line-through; }
.vsr-kal-chip--vervallen:hover { transform: none; box-shadow: none; }
.vsr-kal-chip-naam { font-weight: 700; }
.vsr-kal-chip-tijd { color: #666; font-size: 9px; }

/* --- Mobiele daglijst --- */
.vsr-kal-dag-blok { margin-bottom: 14px; }
.vsr-kal-dag-kop {
	font-size: 13px;
	font-weight: 700;
	padding-bottom: 6px;
	margin-bottom: 8px;
	border-bottom: 2px solid #f0f0f0;
}
.vsr-kal-dag-kop--vandaag { border-bottom-color: #38AC34; color: #1a8c1a; }
.vsr-kal-dag-kop-num { color: #999; font-weight: 400; font-size: 12px; margin-left: 4px; }

.vsr-kal-les-rij {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 10px;
	padding: 10px 12px;
	margin-bottom: 7px;
	border-left: 5px solid var(--chip-kleur, #38AC34);
	background: var(--chip-bg, #eafcea);
}
.vsr-kal-les-naam { font-size: 13.5px; font-weight: 700; }
.vsr-kal-les-tijd { font-size: 11.5px; color: #666; margin-top: 2px; }
.vsr-kal-les-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.vsr-kal-les-plekken { font-size: 10.5px; color: #777; }
/* !important hier: WordPress-thema/Elementor zet standaard een eigen rand-
   en tekstkleur op onopgemaakte <button>-elementen (zichtbaar geworden als
   rode/roze randen — wens Jeanette, 19 augustus 2026). Dat overschrijft
   deze regels zonder !important, dus expliciet afdwingen. */
.vsr-kal-les-btn {
	background: #38AC34 !important;
	color: #fff !important;
	border: none !important;
	padding: 6px 14px;
	border-radius: 16px;
	font-size: 11.5px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: none !important;
}
.vsr-kal-les-btn:hover,
.vsr-kal-les-btn:focus,
.vsr-kal-les-btn:active {
	background: #2e8f2a !important;
	color: #fff !important;
}
.vsr-kal-les-btn--vol {
	background: #ccc !important;
	color: #666 !important;
	cursor: default;
}
.vsr-kal-les-btn--vol:hover { background: #ccc !important; }
.vsr-kal-les-btn--vervallen {
	background: transparent !important;
	color: #999 !important;
	border: 1px dashed #ccc !important;
	cursor: default;
	font-size: 11px;
}
.vsr-kal-les-btn--vervallen:hover { background: transparent !important; color: #999 !important; }

/* --- Info-paneel (pop-up bij chip-klik) --- */
.vsr-info-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}
.vsr-info-overlay[hidden] { display: none; }
.vsr-info-paneel {
	background: #fff;
	border-radius: 16px;
	padding: 24px;
	width: 320px;
	max-width: 90vw;
	position: relative;
}
.vsr-info-sluiten,
.vsr-info-sluiten:hover,
.vsr-info-sluiten:focus {
	position: absolute;
	top: 12px;
	right: 16px;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	font-size: 20px;
	cursor: pointer;
	color: #aaa !important;
	line-height: 1;
}
.vsr-info-naam {
	font-size: 17px;
	font-weight: 700;
	border-left: 4px solid var(--chip-kleur, #38AC34);
	padding-left: 10px;
	margin-bottom: 4px;
}
.vsr-info-tijdlabel {
	font-size: 13px;
	color: #666;
	padding-left: 14px;
	margin-bottom: 14px;
}
.vsr-info-balk-rij {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-left: 14px;
	margin-bottom: 16px;
}
.vsr-info-balk-bg {
	flex: 1;
	height: 6px;
	background: #f0f0f0;
	border-radius: 3px;
	overflow: hidden;
}
.vsr-info-balk-fill {
	height: 100%;
	border-radius: 3px;
	background: #38AC34;
	transition: width 0.2s;
}
.vsr-info-balk-fill--bijna { background: #EF9F27; }
.vsr-info-balk-fill--vol   { background: #ccc; }
.vsr-info-balk-tekst { font-size: 12px; color: #777; white-space: nowrap; }
.vsr-info-vervallen-melding {
	background: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 13px;
	color: #856404;
	margin-bottom: 14px;
}

/* --- Responsive: toon/verberg raster vs. lijst --- */
@media (min-width: 701px) {
	.vsr-kal-lijst { display: none !important; }

	/* Wens Jeanette (19 augustus 2026): op pc en tablet iets smaller
	   (de dagkolommen worden daardoor vanzelf ook smaller), met ruimte
	   links/rechts. Op mobiel (≤700px, de daglijst-weergave) blijft de
	   volle breedte staan. */
	#vsr-kalender-root {
		max-width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
}
@media (max-width: 700px) {
	.vsr-kal-grid-wrap { display: none !important; }
	.vsr-kal-nav { gap: 8px; }
	.vsr-kal-maandlabel { font-size: 15px; min-width: 120px; }
}

/* -------------------------------------------------------------------
   ABONNEMENT-AANMELDFORMULIER (Tarieven-pagina)
   Eigen, zelfstandige selectoren (niet afhankelijk van .vsr-rooster/
   .vsr-modal) met !important op de knop — zelfde thema/Elementor-conflict
   als eerder bij de reserveerknoppen kan hier anders terugkomen.
   ------------------------------------------------------------------- */
.vsr-abonnement {
	max-width: 480px;
	margin: 24px auto;
	font-family: inherit;
}

.vsr-abonnement-titel {
	margin-bottom: 4px;
}

.vsr-abonnement-details {
	color: #555;
	margin-top: 0;
	margin-bottom: 20px;
}

.vsr-abonnement label {
	display: block;
	font-weight: 600;
	margin: 14px 0 4px;
}

.vsr-abonnement input[type="text"],
.vsr-abonnement input[type="email"],
.vsr-abonnement input[type="tel"],
.vsr-abonnement select {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 1em;
}

.vsr-abonnement-rij {
	display: flex;
	gap: 12px;
}
.vsr-abonnement-rij > div {
	flex: 1;
}

.vsr-abonnement-ingangsdatum {
	background: #f6f7f7;
	border-radius: 6px;
	padding: 10px 12px;
	margin-top: 16px;
}

.vsr-abonnement-checkbox {
	display: flex !important;
	align-items: flex-start;
	gap: 8px;
	font-weight: normal !important;
	margin-top: 16px;
}
.vsr-abonnement-checkbox input[type="checkbox"] {
	margin-top: 3px;
}

.vsr-abonnement-overzicht {
	background: #f6f7f7;
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 12px 14px;
	margin-top: 20px;
}
.vsr-abonnement-overzicht p {
	margin: 6px 0;
	font-size: 0.95em;
}
.vsr-abonnement-overzicht-titel {
	font-weight: 600 !important;
	margin-bottom: 8px !important;
}

.vsr-abonnement button.vsr-abonnement-knop {
	display: block;
	width: 100%;
	margin-top: 20px;
	border: none !important;
	border-radius: 6px !important;
	padding: 12px 14px !important;
	background: #38AC34 !important;
	color: #fff !important;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
	box-shadow: none !important;
}
.vsr-abonnement button.vsr-abonnement-knop:hover,
.vsr-abonnement button.vsr-abonnement-knop:focus {
	background: #2e8f2a !important;
	color: #fff !important;
	border: none !important;
}

.vsr-abonnement-melding {
	margin-top: 16px;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 0.95em;
}
.vsr-abonnement-melding--gelukt {
	background: #e6f7e6;
	color: #2a7a2a;
}
.vsr-abonnement-melding--fout {
	background: #fce8e8;
	color: #a00;
}

/* -------------------------------------------------------------------
   Strippenkaart-verkoop ([vsr_strippen_kopen]) — losse les / Viva-10.
   Zelfde opbouw als .vsr-abonnement, eigen klasse zodat beide los van
   elkaar aan te passen zijn.
   ------------------------------------------------------------------- */
.vsr-strippen {
	max-width: 480px;
	margin: 24px auto;
	font-family: inherit;
}

.vsr-strippen-titel {
	margin-bottom: 4px;
}

.vsr-strippen-details {
	color: #555;
	margin-top: 0;
	margin-bottom: 20px;
}

.vsr-strippen label {
	display: block;
	font-weight: 600;
	margin: 14px 0 4px;
}

.vsr-strippen input[type="text"],
.vsr-strippen input[type="email"],
.vsr-strippen input[type="tel"],
.vsr-strippen select {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 1em;
}

.vsr-strippen button.vsr-strippen-knop {
	display: block;
	width: 100%;
	margin-top: 20px;
	border: none !important;
	border-radius: 6px !important;
	padding: 12px 14px !important;
	background: #38AC34 !important;
	color: #fff !important;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
	box-shadow: none !important;
}
.vsr-strippen button.vsr-strippen-knop:hover,
.vsr-strippen button.vsr-strippen-knop:focus {
	background: #2e8f2a !important;
	color: #fff !important;
	border: none !important;
}
.vsr-strippen button.vsr-strippen-knop:disabled {
	background: #9bcf99 !important;
	cursor: default;
}

.vsr-strippen-melding {
	margin-top: 16px;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 0.95em;
}
.vsr-strippen-melding--gelukt {
	background: #e6f7e6;
	color: #2a7a2a;
}
.vsr-strippen-melding--fout {
	background: #fce8e8;
	color: #a00;
}

/* -------------------------------------------------------------------
   Mijn Account — inlogportaal voor leden ([vsr_mijn_account])
   Eigen, zelfstandige selectors (los van .vsr-abonnement/.vsr-modal).
   ------------------------------------------------------------------- */
.vsr-account {
	max-width: 440px;
	margin: 24px auto;
	font-family: inherit;
}

.vsr-account-titel {
	margin-bottom: 16px;
}

.vsr-account form p {
	margin: 14px 0;
}

.vsr-account form label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

.vsr-account form input.input {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 1em;
}

.vsr-account form p.login-remember label {
	display: flex !important;
	align-items: center;
	gap: 6px;
	font-weight: normal;
	margin-bottom: 0;
}

.vsr-account form input#wp-submit {
	display: block;
	width: 100%;
	margin-top: 6px;
	border: none !important;
	border-radius: 6px !important;
	padding: 12px 14px !important;
	background: #38AC34 !important;
	color: #fff !important;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
	box-shadow: none !important;
}
.vsr-account form input#wp-submit:hover,
.vsr-account form input#wp-submit:focus {
	background: #2e8f2a !important;
	color: #fff !important;
	border: none !important;
}

.vsr-account-wachtwoord-vergeten {
	margin-top: 10px;
	font-size: 0.95em;
}

.vsr-account-rij {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #eee;
}

.vsr-account-label {
	color: #666;
	font-weight: 600;
}

.vsr-account-verlopen {
	color: #a00;
	font-weight: 600;
}

.vsr-account-geen-abonnement {
	background: #f6f7f7;
	border-radius: 6px;
	padding: 10px 12px;
}

.vsr-account-uitloggen {
	margin-top: 20px;
}

.vsr-account-rij--klein {
	padding: 6px 0 6px 16px;
	font-size: 0.92em;
	border-bottom: none;
}

.vsr-account-strippen-kopen {
	margin-top: 12px;
}

.vsr-account-subtitel {
	margin-top: 28px;
	margin-bottom: 8px;
}

.vsr-account-historie {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vsr-account-historie li {
	padding: 8px 0;
	border-bottom: 1px solid #eee;
}

.vsr-account-historie-datum {
	color: #666;
	font-weight: 600;
	margin-right: 6px;
}