/**
 * Elementor Calendar Integration — front-end styling.
 *
 * Belangrijk: thema's stylen vaak ALLE <button>-elementen (kleur, ronding,
 * padding). Daarom schermen we onze widget hard af met een reset én stylen
 * we de interactieve onderdelen met verhoogde specificiteit (.eci-booking …)
 * plus !important, zodat de widget er op elk thema hetzelfde uitziet.
 */

.eci-booking {
	--eci-accent: #2563eb;
	--eci-accent-contrast: #ffffff;
	--eci-text: #1f2937;
	--eci-muted: #6b7280;
	--eci-surface: #ffffff;
	--eci-border: #e5e7eb;
	--eci-radius: 16px;
	--eci-slot-bg: #ffffff;
	--eci-slot-color: #1f2937;
	--eci-slot-hover-bg: #eef2ff;
	--eci-slot-selected-bg: var(--eci-accent);
	--eci-slot-selected-color: var(--eci-accent-contrast);
	--eci-slot-radius: 10px;
	--eci-field-bg: #ffffff;
	--eci-field-border: #d1d5db;
	--eci-field-radius: 10px;

	box-sizing: border-box;
	width: 100%;
	color: var(--eci-text);
	background: var(--eci-surface);
	border: 1px solid var(--eci-border);
	border-radius: var(--eci-radius);
	padding: clamp(18px, 4vw, 28px);
	line-height: 1.5;
}

.eci-booking *,
.eci-booking *::before,
.eci-booking *::after {
	box-sizing: border-box;
}

/* --- Reset: neutraliseer thema-styling van knoppen/velden binnen de widget --- */
.eci-booking button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	background: none;
	border: none;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.4;
	min-height: 0;
	min-width: 0;
	width: auto;
	max-width: none;
	font-family: inherit;
	font-weight: 400;
	cursor: pointer;
}

.eci-booking button:hover,
.eci-booking button:focus {
	box-shadow: none;
}

.eci-booking input,
.eci-booking select,
.eci-booking textarea {
	font-family: inherit;
	max-width: none;
}

/* Header */
.eci-header {
	margin-bottom: 18px;
}

.eci-title {
	margin: 0 0 6px;
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1.25;
}

.eci-intro {
	margin: 0;
	color: var(--eci-muted);
}

.eci-label {
	font-weight: 600;
	margin: 0 0 12px;
}

/* Laden */
.eci-loading {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 0;
	color: var(--eci-muted);
}

.eci-spinner {
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: eci-spin 0.7s linear infinite;
	flex: 0 0 auto;
}

@keyframes eci-spin {
	to {
		transform: rotate(360deg);
	}
}

.eci-empty,
.eci-error {
	padding: 14px 0;
	color: var(--eci-muted);
}

.eci-error {
	color: #b91c1c;
}

/* De stage is de vaste "viewport" voor de stappen. Hij is altijd een
   inperkende container (relative + overflow hidden) zodat een view die
   tijdens de slide-animatie absoluut gepositioneerd wordt nooit buiten de
   widget kan uitbreken — ook niet als de opruiming van inline-stijlen door
   een race net te laat komt. Dit voorkomt de horizontale overflow op mobiel. */
.eci-stage {
	position: relative;
	overflow: hidden;
}

/* ---- Planner (Google/Calendly-stijl): maandkalender + tijden ---- */
.eci-scheduler {
	display: flex;
	gap: 28px;
	align-items: flex-start;
}

.eci-cal {
	flex: 0 0 300px;
	max-width: 340px;
}

.eci-cal-times {
	flex: 1 1 auto;
	min-width: 0;
}

.eci-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.eci-cal__title {
	font-weight: 700;
	font-size: 1.05em;
	text-transform: capitalize;
}

.eci-booking .eci-cal__nav {
	width: 34px !important;
	height: 34px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	border: none !important;
	color: var(--eci-text) !important;
	font-size: 1.3em !important;
	line-height: 1 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
}

.eci-booking .eci-cal__nav:hover:not(:disabled) {
	background: var(--eci-slot-hover-bg) !important;
}

.eci-booking .eci-cal__nav:disabled {
	opacity: 0.3;
	cursor: default;
}

.eci-cal {
	--eci-day-size: 40px;
}

.eci-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	row-gap: 6px;
	column-gap: 0;
	align-items: center;
	justify-items: center;
}

.eci-cal__wd {
	text-align: center;
	font-size: 0.75em;
	font-weight: 600;
	color: var(--eci-muted);
	padding-bottom: 6px;
}

.eci-cal__blank {
	width: var(--eci-day-size, 40px);
	height: var(--eci-day-size, 40px);
}

/* Vaste, ronde dag-cel met een pixel-diameter. Onafhankelijk van
   aspect-ratio en van thema-hoogtes/line-heights, zodat cirkels nooit
   uitrekken of overlappen. */
.eci-booking .eci-cal__day {
	box-sizing: border-box !important;
	width: var(--eci-day-size, 40px) !important;
	height: var(--eci-day-size, 40px) !important;
	min-width: 0 !important;
	max-width: none !important;
	min-height: 0 !important;
	max-height: none !important;
	flex: 0 0 auto !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: transparent !important;
	border: none !important;
	border-radius: 50% !important;
	color: var(--eci-text) !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	transition: background 0.15s ease, color 0.15s ease;
}

.eci-booking .eci-cal__day.is-disabled {
	color: var(--eci-day-disabled-color, var(--eci-muted)) !important;
	opacity: 0.45;
	text-decoration: line-through;
	cursor: default;
}

.eci-booking .eci-cal__day.is-available {
	background: var(--eci-day-bg, color-mix(in srgb, var(--eci-accent) 12%, transparent)) !important;
	color: var(--eci-day-color, var(--eci-accent)) !important;
	font-weight: 600 !important;
	cursor: pointer;
}

.eci-booking .eci-cal__day.is-available:hover {
	background: var(--eci-day-hover-bg, color-mix(in srgb, var(--eci-accent) 22%, transparent)) !important;
	color: var(--eci-day-hover-color, var(--eci-day-color, var(--eci-accent))) !important;
}

.eci-booking .eci-cal__day.is-selected {
	background: var(--eci-day-selected-bg, var(--eci-accent)) !important;
	color: var(--eci-day-selected-color, var(--eci-accent-contrast)) !important;
}

.eci-booking .eci-cal__day.is-today {
	box-shadow: inset 0 0 0 2px var(--eci-day-today-border, var(--eci-accent));
}

.eci-cal-times__label {
	font-weight: 600;
	margin-bottom: 4px;
}

.eci-cal-times__date {
	color: var(--eci-muted);
	font-size: 0.9em;
	margin-bottom: 12px;
	text-transform: capitalize;
}

.eci-times-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 8px;
}

.eci-booking .eci-slot {
	width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	background: var(--eci-slot-bg) !important;
	color: var(--eci-slot-color) !important;
	border-style: solid !important;
	border-width: var(--eci-slot-border-width, 1px) !important;
	border-color: var(--eci-slot-border, var(--eci-field-border)) !important;
	border-radius: var(--eci-slot-radius, 10px) !important;
	padding: var(--eci-slot-padding, 11px 6px) !important;
	font-weight: 500;
	text-align: center;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.eci-booking .eci-slot:hover {
	background: var(--eci-slot-hover-bg) !important;
	color: var(--eci-slot-hover-color, var(--eci-slot-color)) !important;
	border-color: var(--eci-slot-hover-border, var(--eci-accent)) !important;
}

.eci-booking .eci-slot.is-selected {
	background: var(--eci-slot-selected-bg) !important;
	color: var(--eci-slot-selected-color) !important;
	border-color: var(--eci-slot-selected-border, var(--eci-slot-selected-bg)) !important;
}

/* ---- Samenvatting ---- */
.eci-summary {
	display: flex;
	align-items: center;
	gap: 12px;
	background: color-mix(in srgb, var(--eci-accent) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--eci-accent) 25%, transparent);
	border-radius: 12px;
	padding: var(--eci-summary-padding, 12px 14px);
	margin-bottom: 18px;
}

.eci-summary__icon {
	font-size: 1.3em;
	line-height: 1;
}

.eci-summary__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.eci-summary__text strong {
	font-weight: 700;
}

.eci-summary__text span {
	color: var(--eci-muted);
	font-size: 0.95em;
}

/* ---- Terug-knop ---- */
.eci-booking .eci-back {
	display: inline-flex;
	align-items: center;
	background: transparent !important;
	border: none !important;
	color: var(--eci-muted);
	padding: 0 !important;
	margin-bottom: 14px;
	font-size: 0.95em;
	font-weight: 500;
}

.eci-booking .eci-back:hover {
	color: var(--eci-accent);
}

.eci-back__icon {
	font-size: 1.3em;
	line-height: 1;
	margin-right: 2px;
}

/* ---- Formulier ---- */
/* Twee kolommen op de formulierstap: samenvatting links, formulier rechts. */
.eci-form-layout {
	display: flex;
	gap: 28px;
	align-items: flex-start;
}

.eci-form-aside {
	flex: 0 0 280px;
	max-width: 320px;
}

.eci-form-aside .eci-summary {
	margin-bottom: 0;
}

.eci-form-layout > .eci-form {
	flex: 1 1 auto;
	min-width: 0;
}

/* Procent -> grid-span (12 kolommen). Gebruikt door de responsive
   kolombreedte-control: grid-column: span var(--sp-<procent>). */
.eci-booking {
	--sp-100: 12;
	--sp-75: 9;
	--sp-66: 8;
	--sp-50: 6;
	--sp-33: 4;
	--sp-25: 3;
}

/* Formulier als 12-koloms grid (voor de veldbreedtes). */
.eci-form {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--eci-fields-col-gap, 16px);
	row-gap: var(--eci-fields-row-gap, 16px);
	align-content: start;
}

.eci-form > * {
	grid-column: span 12;
	min-width: 0;
}

.eci-field {
	display: flex;
	flex-direction: column;
	gap: var(--eci-field-label-gap, 6px);
}

.eci-field__label {
	font-weight: 600;
	font-size: 0.9em;
	display: block;
}

.eci-req {
	color: #dc2626;
}

.eci-booking .eci-input {
	width: 100% !important;
	max-width: none !important;
	background: var(--eci-field-bg) !important;
	border-style: solid !important;
	border-width: var(--eci-field-border-width, 1px) !important;
	border-color: var(--eci-field-border) !important;
	border-radius: var(--eci-field-radius, 10px) !important;
	padding: var(--eci-field-padding, 12px 14px) !important;
	/* Standaard: velden erven het widget-font. De lettergrootte-control
	   overschrijft dit met !important (zie style_fields), zodat input,
	   textarea en select altijd gelijk zijn — ook op thema's die textarea
	   forceren. */
	font-family: inherit;
	font-size: inherit;
	line-height: 1.4;
	color: var(--eci-field-text, var(--eci-text)) !important;
	box-shadow: none !important; /* neutraliseer thema-schaduw zodat alle velden gelijk zijn */
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.eci-booking textarea.eci-input {
	min-height: 104px;
	resize: vertical;
}

.eci-input::placeholder {
	color: var(--eci-field-placeholder, var(--eci-muted));
	opacity: 1;
}

.eci-booking .eci-input:focus {
	outline: none;
	border-color: var(--eci-accent) !important;
}

.eci-booking .eci-input.has-error {
	border-color: #dc2626 !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, #dc2626 15%, transparent) !important;
}

.eci-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-size: 0.95em;
}

.eci-check input {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	accent-color: var(--eci-accent);
	flex: 0 0 auto;
}

.eci-check.has-error {
	color: #b91c1c;
}

/* ---- Afspraaktype-keuze ---- */
.eci-types {
	display: grid;
	gap: 10px;
}

.eci-booking .eci-type {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	width: 100% !important;
	text-align: left;
	padding: var(--eci-type-padding, 14px 16px) !important;
	background: var(--eci-type-bg, var(--eci-slot-bg)) !important;
	border-style: solid !important;
	border-width: var(--eci-type-border-width, 1px) !important;
	border-color: var(--eci-type-border, var(--eci-field-border)) !important;
	border-radius: var(--eci-type-radius, var(--eci-field-radius)) !important;
	color: var(--eci-type-color, var(--eci-text)) !important;
	font-weight: 400 !important;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.eci-booking .eci-type:hover {
	border-color: var(--eci-type-hover-border, var(--eci-accent)) !important;
	background: var(--eci-type-hover-bg, var(--eci-slot-hover-bg)) !important;
	color: var(--eci-type-hover-color, var(--eci-type-color, var(--eci-text))) !important;
}

.eci-type__label {
	font-weight: 600;
}

.eci-type__sub {
	font-size: 0.85em;
	color: var(--eci-type-sub-color, var(--eci-muted));
}

/* Adresrij (postcode + plaats naast elkaar) */
.eci-field-row {
	display: flex;
	gap: 12px;
}

.eci-field-row > .eci-field {
	flex: 1 1 0;
	min-width: 0;
}

@media (max-width: 400px) {
	.eci-field-row {
		flex-direction: column;
	}
}

/* Honeypot */
.eci-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* ---- Knoppen ---- */
.eci-booking .eci-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--eci-btn-icon-gap, 8px);
	width: auto;
	border-style: solid !important;
	border-width: var(--eci-btn-border-width, 1px) !important;
	border-color: var(--eci-btn-border-color, transparent) !important;
	border-radius: var(--eci-btn-radius, 10px) !important;
	padding: var(--eci-btn-padding, 13px 20px) !important;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	box-shadow: none !important; /* consistente knop, geen thema-schaduw */
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.eci-booking .eci-btn__icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	font-size: var(--eci-btn-icon-size, 1em);
}

.eci-booking .eci-btn__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.eci-booking .eci-btn__icon i {
	font-size: inherit;
}

.eci-booking .eci-btn--block {
	width: 100%;
}

.eci-booking .eci-btn--primary {
	background: var(--eci-btn-bg, var(--eci-accent)) !important;
	color: var(--eci-btn-color, var(--eci-accent-contrast)) !important;
}

.eci-booking .eci-btn--primary:hover {
	background: var(--eci-btn-hover-bg, var(--eci-btn-bg, var(--eci-accent))) !important;
	color: var(--eci-btn-hover-color, var(--eci-btn-color, var(--eci-accent-contrast))) !important;
	border-color: var(--eci-btn-hover-border, var(--eci-btn-border-color, transparent)) !important;
}

.eci-booking .eci-btn--ghost {
	background: transparent !important;
	border-color: var(--eci-field-border) !important;
	color: var(--eci-text) !important;
}

.eci-booking .eci-btn--ghost:hover {
	border-color: var(--eci-accent) !important;
	color: var(--eci-accent) !important;
}

.eci-booking .eci-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.eci-form__msg {
	font-size: 0.95em;
}

.eci-form__msg.eci-error {
	color: #b91c1c;
}

.eci-form__msg.eci-ok {
	color: #15803d;
}

/* ---- Succes ---- */
.eci-success {
	text-align: center;
	padding: 8px 0;
}

.eci-success__icon {
	width: 60px;
	height: 60px;
	margin: 0 auto 14px;
	border-radius: 999px;
	background: var(--eci-accent);
	color: var(--eci-accent-contrast);
	font-size: 30px;
	line-height: 60px;
}

.eci-success .eci-summary {
	text-align: left;
}

.eci-success__title {
	margin: 0 0 14px;
	font-size: 1.3em;
	font-weight: 700;
}

.eci-success__msg {
	color: var(--eci-muted);
	margin: 0 0 18px;
}

/* ---- Beheer ---- */
.eci-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 6px;
}

.eci-actions .eci-picker {
	width: 100%;
	margin-top: 8px;
}

.eci-meeting {
	color: var(--eci-muted);
	word-break: break-word;
	margin: 0 0 14px;
}

.eci-link {
	color: var(--eci-accent);
}

.eci-booking--notice {
	color: var(--eci-muted);
	font-style: italic;
}

/* ---- Editor-preview: statisch formulier, velden normaal tonen ---- */
.eci-preview .eci-input:disabled,
.eci-preview .eci-btn,
.eci-preview .eci-check input:disabled {
	opacity: 1 !important;
	cursor: default;
	-webkit-text-fill-color: currentColor;
}

.eci-preview {
	pointer-events: none;
}

/* ---- Editor-preview (server-side skelet) ---- */
.eci-skeleton .eci-skel-row {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.eci-skeleton .eci-skel-pill {
	width: 62px;
	height: 64px;
	border-radius: 12px;
	background: #f1f5f9;
	border: 1px solid var(--eci-border);
}

.eci-skeleton .eci-skel-slot {
	width: 92px;
	height: 42px;
	border-radius: var(--eci-slot-radius);
	background: #f1f5f9;
	border: 1px solid var(--eci-border);
}

/* ---- Responsive ---- */
@media (max-width: 720px) {
	.eci-scheduler,
	.eci-form-layout {
		flex-direction: column;
		align-items: stretch; /* laat formulier/aside vol uitrekken bij stapelen */
		gap: 18px;
	}
	.eci-cal,
	.eci-cal-times,
	.eci-form-aside,
	.eci-form-layout > .eci-form {
		flex: 1 1 auto;
		max-width: 100%;
		width: 100%;
	}
}

@media (max-width: 600px) {
	.eci-cal {
		--eci-day-size: 38px;
	}
}

@media (max-width: 380px) {
	.eci-cal {
		--eci-day-size: 34px;
	}
}

@media (max-width: 600px) {
	.eci-times-grid {
		grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
	}
	.eci-actions .eci-btn {
		flex: 1 1 auto;
	}
}

@media (max-width: 600px) {
	.eci-types {
		grid-template-columns: 1fr !important;
	}
}

/* Net als een standaard Elementor-formulier stapelen alle velden op mobiel
   naar volle breedte, ongeacht de per-apparaat ingestelde kolombreedte voor
   desktop/tablet. Elementor's mobiele breekpunt is 767px. Het !important is
   nodig omdat Elementor de desktopwaarde (span 6 e.d.) via een basisregel
   ná onze stylesheet inlaadt; zonder !important zou die waarde ook op mobiel
   blijven staan en velden veel te smal maken. */
@media (max-width: 767px) {
	.eci-booking .eci-form > .eci-field,
	.eci-booking .eci-form > .eci-field--addr {
		grid-column: span 12 !important;
	}
	/* De verzendknop volgt op mobiel dezelfde regel als de velden: volle
	   breedte en niet meer rechts uitgelijnd, ongeacht de op desktop
	   ingestelde knopbreedte/uitlijning. De knopbreedte-control van Elementor
	   gebruikt !important met selector-specificiteit 0,3,0 (dubbele
	   wrapper-class) en laadt ná deze stylesheet; daarom voegen we de altijd
	   aanwezige .eci-btn--block toe zodat we op 0,4,0 uitkomen en winnen. */
	.eci-booking .eci-form > .eci-btn--primary.eci-btn--block {
		width: 100% !important;
		justify-self: stretch !important;
	}
}

@media (max-width: 400px) {
	.eci-times-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}