/**
 * Zelfstandige styling voor het offerteformulier. Bewust met hardcoded
 * huisstijlkleuren (in plaats van de CSS-variabelen van het thema), zodat
 * de weergave er overal correct uitziet, ook zonder het Ootes-thema.
 *
 * @package Ootes_Offerte
 */

.ootes-offerte-section {
	background: var(--ootes-offerte-bg, #002D55);
	color: rgba(255, 255, 255, .85);
	padding: clamp(2rem, 5vw, 4rem) 1.25rem;
}
.ootes-offerte-section h2 { color: #fff; margin: 0 0 .5rem; }
.ootes-offerte-section .ootes-offerte-heading p { color: rgba(255, 255, 255, .6); margin: 0; }
.ootes-offerte-section .ootes-offerte-heading {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 2rem;
}

.ootes-offerte-container {
	max-width: 1200px;
	margin: 0 auto;
}

.ootes-offerte-form-wrap {
	max-width: 760px;
	margin: 0 auto;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 8px;
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.ootes-offerte-row { margin-bottom: 1rem; }
.ootes-offerte-row label {
	display: block;
	color: rgba(255, 255, 255, .6);
	text-transform: uppercase;
	font-size: .75rem;
	letter-spacing: .06em;
	font-weight: 700;
	margin-bottom: .4rem;
}
.ootes-offerte-row input,
.ootes-offerte-row select,
.ootes-offerte-row textarea {
	width: 100%;
	padding: .6rem .8rem;
	border-radius: 6px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .18);
	color: #fff;
	font: inherit;
	box-sizing: border-box;
}
.ootes-offerte-row input::placeholder,
.ootes-offerte-row textarea::placeholder { color: rgba(255, 255, 255, .4); }
.ootes-offerte-row select { color-scheme: dark; }
.ootes-offerte-row select:focus,
.ootes-offerte-row input:focus,
.ootes-offerte-row textarea:focus {
	border-color: #FF8F06;
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 143, 6, .3);
}
.ootes-offerte-row--half { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) {
	.ootes-offerte-row--half { grid-template-columns: 1fr 1fr; }
}
.ootes-offerte-honeypot { position: absolute; left: -9999px; top: -9999px; }

.ootes-offerte-btn {
	display: inline-block;
	padding: .75rem 1.75rem;
	border-radius: 6px;
	border: none;
	background: #FF8F06;
	color: #fff;
	font-weight: 600;
	font: inherit;
	cursor: pointer;
}
.ootes-offerte-btn:hover { background: #e07f04; }

.ootes-offerte-notice {
	padding: .85rem 1rem;
	border-radius: 6px;
	margin-bottom: 1.25rem;
	font-size: .9rem;
}
.ootes-offerte-notice--success { background: rgba(46, 160, 67, .18); border: 1px solid rgba(46, 160, 67, .5); color: #d8f5dd; }
.ootes-offerte-notice--error { background: rgba(224, 62, 62, .18); border: 1px solid rgba(224, 62, 62, .5); color: #ffd9d9; }

/* Lichte variant: schakelt automatisch in bij een lichte, door de beheerder
   gekozen achtergrondkleur (zie Ootes_Offerte_Render::is_light_color()),
   zodat de standaard witte tekst/randen niet onleesbaar worden. */
.ootes-offerte-section--light { color: #4A5568; }
.ootes-offerte-section--light h2 { color: #1E2733; }
.ootes-offerte-section--light .ootes-offerte-heading p { color: #4A5568; }

.ootes-offerte-form-wrap--light {
	background: #fff;
	border-color: #e3e7ec;
	box-shadow: 0 1px 10px rgba(0, 0, 0, .06);
}
.ootes-offerte-form-wrap--light .ootes-offerte-row label { color: #4A5568; }
.ootes-offerte-form-wrap--light .ootes-offerte-row input,
.ootes-offerte-form-wrap--light .ootes-offerte-row select,
.ootes-offerte-form-wrap--light .ootes-offerte-row textarea {
	background: #fff;
	border-color: #e3e7ec;
	color: #1E2733;
}
.ootes-offerte-form-wrap--light .ootes-offerte-row input::placeholder,
.ootes-offerte-form-wrap--light .ootes-offerte-row textarea::placeholder { color: #9aa5b1; }
.ootes-offerte-form-wrap--light .ootes-offerte-row select { color-scheme: light; }
.ootes-offerte-form-wrap--light .ootes-offerte-notice--success { background: #e6f7ea; border-color: #bfe8c8; color: #1a6b2c; }
.ootes-offerte-form-wrap--light .ootes-offerte-notice--error { background: #fdeaea; border-color: #f3bcbc; color: #a12626; }

/* Contact Form 7's eigen statusmelding/validatie, gestyled in dezelfde stijl
   als .ootes-offerte-notice hierboven (CF7 zet zelf een status-klasse op
   het <form>-element: sent / invalid / spam / failed / aborted). */
.ootes-offerte-form-wrap .wpcf7-response-output {
	margin: 0 0 1.25rem;
	padding: .85rem 1rem;
	border-radius: 6px;
	font-size: .9rem;
}
.ootes-offerte-form-wrap .wpcf7-form.sent .wpcf7-response-output {
	background: rgba(46, 160, 67, .18); border: 1px solid rgba(46, 160, 67, .5); color: #d8f5dd;
}
.ootes-offerte-form-wrap .wpcf7-form.invalid .wpcf7-response-output,
.ootes-offerte-form-wrap .wpcf7-form.spam .wpcf7-response-output,
.ootes-offerte-form-wrap .wpcf7-form.failed .wpcf7-response-output,
.ootes-offerte-form-wrap .wpcf7-form.aborted .wpcf7-response-output {
	background: rgba(224, 62, 62, .18); border: 1px solid rgba(224, 62, 62, .5); color: #ffd9d9;
}
.ootes-offerte-form-wrap .wpcf7-not-valid-tip { display: block; margin-top: .3rem; font-size: .8rem; color: #ffb4b4; }

.ootes-offerte-form-wrap--light .wpcf7-form.sent .wpcf7-response-output { background: #e6f7ea; border-color: #bfe8c8; color: #1a6b2c; }
.ootes-offerte-form-wrap--light .wpcf7-form.invalid .wpcf7-response-output,
.ootes-offerte-form-wrap--light .wpcf7-form.spam .wpcf7-response-output,
.ootes-offerte-form-wrap--light .wpcf7-form.failed .wpcf7-response-output,
.ootes-offerte-form-wrap--light .wpcf7-form.aborted .wpcf7-response-output {
	background: #fdeaea; border-color: #f3bcbc; color: #a12626;
}
.ootes-offerte-form-wrap--light .wpcf7-not-valid-tip { color: #c23a3a; }