/* Skiservice Planning - front-end formulier styling */



.wpsp-planning {

	max-width: 900px;

	margin: 0 auto;

}



.wpsp-notice {

	padding: 12px 16px;

	border-radius: 6px;

	margin-bottom: 20px;

}



.wpsp-notice-error {

	background: #fdecea;

	color: #92140c;

	border: 1px solid #f5c6cb;

}



.wpsp-field-group {

	border: 1px solid #e0e0e0;

	border-radius: 8px;

	padding: 18px 20px 22px;

	margin: 0 0 20px;

}



/* Twee kolommen op bredere schermen: dag/tijd-keuze links, klantgegevens

   (inclusief adres) rechts. Op smalle schermen staan ze onder elkaar, in

   dezelfde volgorde als in de HTML (tijden boven, gegevens onder). */

.wpsp-form-columns {

	display: grid;

	grid-template-columns: 1.15fr 0.85fr;

	align-items: start;

	gap: 20px;

}



.wpsp-form-columns .wpsp-field-group {

	margin: 0;

}



@media (max-width: 760px) {

	.wpsp-form-columns {

		grid-template-columns: 1fr;

	}

}



.wpsp-field-group legend {

	font-weight: 700;

	padding: 0 8px;

}



.wpsp-day-block {

	margin-bottom: 16px;

}



.wpsp-day-block h3 {

	margin: 0 0 8px;

	font-size: 1.05em;

}



.wpsp-geen-momenten {

	margin: 0;

	padding: 10px 12px;

	border: 1px solid #ccc;

	border-radius: 6px;

	color: #666;

	font-style: italic;

}



.wpsp-time-options {

	display: flex;

	flex-wrap: wrap;

	gap: 8px;

}



.wpsp-time-option {

	position: relative;

	display: grid;

	grid-template-columns: 22px 1fr;

	grid-template-rows: auto auto;

	align-items: center;

	column-gap: 10px;

	row-gap: 2px;

	min-width: 110px;

	padding: 10px 14px;

	border: 1px solid #ccc;

	border-radius: 6px;

	cursor: pointer;

	text-align: left;

}



.wpsp-time-option input[type="radio"] {

	appearance: none;

	-webkit-appearance: none;

	grid-column: 1;

	grid-row: 1 / 3;

	place-self: center;

	width: 20px;

	height: 20px;

	margin: 0;

	border: 2px solid #999;

	border-radius: 50%;

	background: #fff;

	flex-shrink: 0;

}



.wpsp-time-option input[type="radio"]:checked {

	border-color: #1c6fd6;

}



.wpsp-time-option .wpsp-radio-dot {

	grid-column: 1;

	grid-row: 1 / 3;

	place-self: center;

	width: 10px;

	height: 10px;

	border-radius: 50%;

	background: transparent;

	pointer-events: none;

}



.wpsp-time-option input[type="radio"]:checked ~ .wpsp-radio-dot {

	background: #1c6fd6;

}



.wpsp-time-option span {

	grid-column: 2;

	font-weight: 600;

}



.wpsp-time-option small {

	grid-column: 2;

	color: #666;

	font-size: 0.8em;

}



.wpsp-time-option:has(input:checked),

.wpsp-time-option.wpsp-selected {

	border-color: #1c6fd6;

	background: #eef5fd;

}



.wpsp-field {

	margin-bottom: 14px;

}



.wpsp-field label {

	display: block;

	font-weight: 600;

	margin-bottom: 4px;

}



.wpsp-field input {

	width: 100%;

	padding: 8px 10px;

	border: 1px solid #ccc;

	border-radius: 4px;

	box-sizing: border-box;

}



.wpsp-field-narrow input {

	width: 4.5em;

}



.wpsp-field-checkbox label {

	display: flex;

	align-items: flex-start;

	gap: 8px;

	font-weight: 400;

	cursor: pointer;

}



.wpsp-field-checkbox input[type="checkbox"] {

	width: auto;

	margin-top: 3px;

	flex-shrink: 0;

}



.wpsp-field-hint {

	display: block;

	margin-top: 4px;

	color: #666;

	font-size: 0.85em;

	font-weight: 400;

}



.wpsp-captcha-field .wpsp-captcha-image {

	display: block;

	margin-bottom: 8px;

	border: 1px solid #ccc;

	border-radius: 4px;

	background: #fff;

}



.wpsp-captcha-field input {

	max-width: 150px;

}



.wpsp-submit {

	margin: 18px 0 0;

}



.wpsp-submit button {

	padding: 12px 24px;

	background: #1c6fd6;

	color: #fff;

	border: none;

	border-radius: 6px;

	font-weight: 600;

	cursor: pointer;

}



.wpsp-submit button:hover {

	background: #14589f;

}



.wpsp-sfeerbeeld {

	display: block;

	width: 100%;

	height: auto;

	margin: 20px 0 0;

	border-radius: 10px;

	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);

}



.wpsp-confirmation {

	text-align: center;

	padding: 24px;

}



.wpsp-confirmation-details {

	list-style: none;

	padding: 0;

	margin: 16px 0 0;

}



.wpsp-confirmation-details li {

	padding: 6px 0;

}



@media (max-width: 480px) {

	.wpsp-time-option {

		min-width: 72px;

	}

}