/*
 * Your Party Verhuur - checkout styling.
 * Turns the "Levering" radio list into clickable option blocks.
 */

#ypv-extra-fields h3 {
	margin-top: 1.5em;
	margin-bottom: 0.75em;
}

#ypv-extra-fields h3:first-child {
	margin-top: 0;
}

/* De opmaak van de leverblokken staat in de losse huisstijl-stylesheet
   (ypv-afrekenpagina.css). Divi rendert de radio's niet als <ul
   class="wc_radios">, maar als losse input + label.radio naast elkaar,
   dus de regels daarvoor hoorden hier niet thuis. */

.ypv-conditional-field {
	display: none;
}

.ypv-delivery-zone-preview {
	margin-top: 0.5em;
	font-size: 0.9em;
	font-weight: 500;
}

/* ------------------------------------------------------------------ *
 * Huurperiode date-range picker.
 * ------------------------------------------------------------------ */

.ypv-date-range-row {
	position: relative;
}

.ypv-date-range-hint {
	margin: 2px 0 10px;
	font-size: 0.875em;
	line-height: 1.5;
	color: #666;
	max-width: 46em;
}

/* De twee gelabelde vakjes bovenin de popover: ze benoemen wat er op de
   gekozen dag gebeurt, zodat duidelijk is dat de laatste dag de
   terugbrengdag is. */
.ypv-date-range-slots {
	display: flex;
	align-items: stretch;
	gap: 10px;
	margin-bottom: 18px;
}

.ypv-date-range-slot {
	flex: 1 1 0;
	min-width: 0;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	padding: 10px 14px;
	line-height: 1.3;
}

.ypv-date-range-slot.is-active {
	border-color: #2caf9e;
	box-shadow: 0 0 0 1px #2caf9e;
}

.ypv-date-range-slot__label {
	display: block;
	font-size: 0.72em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #888;
	font-weight: 700;
}

.ypv-date-range-slot__value {
	display: block;
	font-size: 1.02em;
	font-weight: 700;
	margin: 2px 0 1px;
}

.ypv-date-range-slot__value.is-empty {
	font-weight: 500;
	color: #aaa;
}

.ypv-date-range-slots__arrow {
	align-self: center;
	color: #bbb;
	flex: 0 0 auto;
}

/* De popover is 'width: max-content' en neemt dus de breedte van zijn
   breedste kind. Zonder deze truc zou een lange samenvattingsregel de
   kalender breder maken, en versprong de popover bij elke klik. Met
   width: 0 telt de regel niet mee voor die breedte, en met
   min-width: 100% vult hij daarna alsnog de hele popover. */
.ypv-date-range-summary {
	width: 0;
	min-width: 100%;
	margin: 14px 0 0;
	font-size: 0.86em;
	line-height: 1.45;
	color: #666;
}

/* Zodra de periode compleet is maakt JS de regel leeg; dan hoort hij ook
   geen ruimte meer in te nemen. */
.ypv-date-range-summary:empty {
	display: none;
}

.ypv-date-range-apply[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.ypv-date-range-field {
	position: relative;
	max-width: 420px;
}

.ypv-date-range-trigger {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	text-align: left;
	background: #fff;
	border: 2px solid #e0e0e0;
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 1em;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.ypv-date-range-trigger__icon {
	display: inline-flex;
	flex-shrink: 0;
	color: #2caf9e;
}

.ypv-date-range-trigger:hover,
.ypv-date-range-trigger[aria-expanded="true"] {
	border-color: #2caf9e;
}

.ypv-date-range-popover {
	position: absolute;
	z-index: 100;
	top: calc(100% + 8px);
	left: 0;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
	padding: 20px;
	width: max-content;
	max-width: calc(100vw - 32px);
}

/* Geen overflow-x hier: de popover is al 'width: max-content' en past
   zich dus aan de twee maanden aan. Met overflow-x: auto kwam er een
   schuifbalk voor een paar pixels verschil, terwijl er niets te schuiven
   viel. Op smalle schermen zetten de maanden zich onder elkaar (zie de
   media query onderaan), dus ook daar is schuiven niet nodig. */
.ypv-date-range-months {
	display: flex;
	gap: 28px;
}

.ypv-date-range-month {
	min-width: 232px;
	flex: 0 0 auto;
}

.ypv-date-range-month__title {
	position: relative;
	text-align: center;
	font-weight: 600;
	margin-bottom: 12px;
	padding: 0 28px;
}

.ypv-date-range-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	font-size: 1.3em;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	color: #333;
}

/* Binnen de maand houden: op -8px staken de pijlen buiten de kolom uit,
   waardoor de popover 8px te smal was voor zijn eigen inhoud en er een
   horizontale schuifbalk verscheen. */
.ypv-date-range-nav--prev {
	left: 0;
}

.ypv-date-range-nav--next {
	right: 0;
}

.ypv-date-range-nav:hover {
	color: #2caf9e;
}

.ypv-date-range-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.ypv-day {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	font-size: 0.9em;
}

.ypv-day--label {
	color: #888;
	font-weight: 600;
	font-size: 0.8em;
	text-transform: lowercase;
}

.ypv-day--empty {
	cursor: default;
}

.ypv-day:not(.ypv-day--label):not(.ypv-day--empty):not(.ypv-day--disabled) {
	cursor: pointer;
	border-radius: 50%;
}

.ypv-day:not(.ypv-day--label):not(.ypv-day--empty):not(.ypv-day--disabled):hover {
	background-color: rgba(44, 175, 158, 0.15);
}

.ypv-day--disabled {
	color: #ccc;
	cursor: not-allowed;
}

.ypv-day--today:not(.ypv-day--start):not(.ypv-day--end) {
	box-shadow: inset 0 0 0 1px #999;
	border-radius: 50%;
}

.ypv-day--in-range,
.ypv-day--preview {
	background-color: #d9f2ee;
	border-radius: 0;
}

/* Round the outer edge of a contiguous in-range block per row so it still
   reads as one connected strip, like the reference design. */
.ypv-date-range-grid .ypv-day--in-range:nth-child(7n + 1),
.ypv-date-range-grid .ypv-day--preview:nth-child(7n + 1) {
	border-top-left-radius: 18px;
	border-bottom-left-radius: 18px;
}

.ypv-date-range-grid .ypv-day--in-range:nth-child(7n),
.ypv-date-range-grid .ypv-day--preview:nth-child(7n) {
	border-top-right-radius: 18px;
	border-bottom-right-radius: 18px;
}

.ypv-day--start,
.ypv-day--end {
	background-color: #1f7a6c;
	color: #fff;
	font-weight: 600;
	border-radius: 50%;
	position: relative;
	z-index: 1;
}

.ypv-date-range-actions {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #eee;
}

.ypv-date-range-actions .button {
	margin: 0;
}

@media (max-width: 600px) {
	.ypv-date-range-popover {
		left: 50%;
		transform: translateX(-50%);
	}

	.ypv-date-range-months {
		flex-direction: column;
		gap: 20px;
	}

	.ypv-date-range-slots {
		flex-direction: column;
		gap: 8px;
	}

	.ypv-date-range-slots__arrow {
		transform: rotate( 90deg );
		align-self: flex-start;
		margin-left: 18px;
	}
}

/* ------------------------------------------------------------------ *
 * Prijs op aanvraag — regel in de winkelwagen.
 *
 * Op de afrekenpagina staat deze tekst op het groene paneel en wordt
 * hij door de huisstijl-stylesheet opgemaakt; op de winkelwagenpagina
 * staat hij op wit, en die regelt dit bestand.
 * ------------------------------------------------------------------ */

.woocommerce-cart .ypv-op-aanvraag {
	display: inline-block;
	font-size: 0.9em;
	font-weight: 600;
	color: #1f7a6c;
	white-space: nowrap;
}

/* Opbouw gekozen op de productpagina: zelf ophalen is uitgeschakeld en bezorgen staat vast. */
.ypv-delivery-type input:disabled,
.ypv-delivery-type input:disabled + label { opacity: .45; cursor: not-allowed; }
.ypv-delivery-locked-note {
	margin: -4px 0 16px; padding: 10px 12px;
	font-size: 14px; line-height: 1.5;
	color: #0B6E63; background: #E7F7F5; border-radius: 6px;
}