/* FZ Slimme Formulieren — authentieke NL-kentekenplaat + premium bevestiging.
   Gegenereerd door scripts/build_plate_css.py — niet met de hand wijzigen. */

/* ---- Kentekenplaat ---- */
/* Veldlabel ('Kenteken (optioneel)') visueel verborgen (screen-reader-only) op verzoek;
   blijft toegankelijk voor schermlezers via de for/id-koppeling. De plaat zelf wijst het veld aan. */
.elementor-field-group-kenteken { align-items: flex-start; }
.elementor-field-group-kenteken > .elementor-field-label { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fzsf-plate-wrap {
	display: flex;
	align-items: stretch;
	flex: 0 1 100%;
	width: 100%;
	max-width: 320px;
	min-height: 54px;
	border: 2px solid #14181d;
	border-radius: 9px;
	background: #f5c500; /* kentekengeel */
	overflow: hidden;
	box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 2px 5px rgba(0,0,0,.18);
}
.fzsf-plate-wrap::before {
	content: "";
	flex: 0 0 38px;
	background: #003399 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2092%22%3E%3Crect%20width%3D%2240%22%20height%3D%2292%22%20fill%3D%22%23003399%22%2F%3E%3Cpolygon%20points%3D%2220.0%2C14.0%2020.6%2C15.7%2022.4%2C15.7%2021.0%2C16.8%2021.5%2C18.5%2020.0%2C17.6%2018.5%2C18.5%2019.0%2C16.8%2017.6%2C15.7%2019.4%2C15.7%22%20fill%3D%22%23ffcc00%22%2F%3E%3Cpolygon%20points%3D%2225.8%2C15.5%2026.4%2C17.2%2028.1%2C17.3%2026.7%2C18.4%2027.2%2C20.1%2025.8%2C19.1%2024.3%2C20.1%2024.8%2C18.4%2023.4%2C17.3%2025.1%2C17.2%22%20fill%3D%22%23ffcc00%22%2F%3E%3Cpolygon%20points%3D%2230.0%2C19.8%2030.6%2C21.4%2032.3%2C21.5%2031.0%2C22.6%2031.4%2C24.3%2030.0%2C23.3%2028.5%2C24.3%2029.0%2C22.6%2027.6%2C21.5%2029.3%2C21.4%22%20fill%3D%22%23ffcc00%22%2F%3E%3Cpolygon%20points%3D%2231.5%2C25.5%2032.1%2C27.2%2033.9%2C27.2%2032.5%2C28.3%2033.0%2C30.0%2031.5%2C29.1%2030.0%2C30.0%2030.5%2C28.3%2029.1%2C27.2%2030.9%2C27.2%22%20fill%3D%22%23ffcc00%22%2F%3E%3Cpolygon%20points%3D%2230.0%2C31.2%2030.6%2C32.9%2032.3%2C33.0%2031.0%2C34.1%2031.4%2C35.8%2030.0%2C34.8%2028.5%2C35.8%2029.0%2C34.1%2027.6%2C33.0%2029.3%2C32.9%22%20fill%3D%22%23ffcc00%22%2F%3E%3Cpolygon%20points%3D%2225.8%2C35.5%2026.4%2C37.1%2028.1%2C37.2%2026.7%2C38.3%2027.2%2C40.0%2025.8%2C39.0%2024.3%2C40.0%2024.8%2C38.3%2023.4%2C37.2%2025.1%2C37.1%22%20fill%3D%22%23ffcc00%22%2F%3E%3Cpolygon%20points%3D%2220.0%2C37.0%2020.6%2C38.7%2022.4%2C38.7%2021.0%2C39.8%2021.5%2C41.5%2020.0%2C40.5%2018.5%2C41.5%2019.0%2C39.8%2017.6%2C38.7%2019.4%2C38.7%22%20fill%3D%22%23ffcc00%22%2F%3E%3Cpolygon%20points%3D%2214.3%2C35.5%2014.9%2C37.1%2016.6%2C37.2%2015.2%2C38.3%2015.7%2C40.0%2014.3%2C39.0%2012.8%2C40.0%2013.3%2C38.3%2011.9%2C37.2%2013.6%2C37.1%22%20fill%3D%22%23ffcc00%22%2F%3E%3Cpolygon%20points%3D%2210.0%2C31.2%2010.7%2C32.9%2012.4%2C33.0%2011.0%2C34.1%2011.5%2C35.8%2010.0%2C34.8%208.6%2C35.8%209.0%2C34.1%207.7%2C33.0%209.4%2C32.9%22%20fill%3D%22%23ffcc00%22%2F%3E%3Cpolygon%20points%3D%228.5%2C25.5%209.1%2C27.2%2010.9%2C27.2%209.5%2C28.3%2010.0%2C30.0%208.5%2C29.1%207.0%2C30.0%207.5%2C28.3%206.1%2C27.2%207.9%2C27.2%22%20fill%3D%22%23ffcc00%22%2F%3E%3Cpolygon%20points%3D%2210.0%2C19.8%2010.7%2C21.4%2012.4%2C21.5%2011.0%2C22.6%2011.5%2C24.3%2010.0%2C23.3%208.6%2C24.3%209.0%2C22.6%207.7%2C21.5%209.4%2C21.4%22%20fill%3D%22%23ffcc00%22%2F%3E%3Cpolygon%20points%3D%2214.2%2C15.5%2014.9%2C17.2%2016.6%2C17.3%2015.2%2C18.4%2015.7%2C20.1%2014.2%2C19.1%2012.8%2C20.1%2013.3%2C18.4%2011.9%2C17.3%2013.6%2C17.2%22%20fill%3D%22%23ffcc00%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2274%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2CHelvetica%2Csans-serif%22%20font-size%3D%2220%22%20font-weight%3D%22700%22%20fill%3D%22%23ffffff%22%20letter-spacing%3D%220.5%22%3ENL%3C%2Ftext%3E%3C%2Fsvg%3E") center/26px auto no-repeat;
	border-right: 2px solid #14181d;
}
.fzsf-plate-wrap input.fzsf-plate {
	flex: 1 1 auto;
	width: 100%;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #14181d !important;
	font-weight: 800;
	font-size: 1.5rem;
	letter-spacing: .16em;
	text-align: center;
	text-transform: uppercase;
	font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
}
.fzsf-plate-wrap input.fzsf-plate::placeholder { color: rgba(20,24,29,.45); font-weight: 700; letter-spacing: .1em; }
.fzsf-plate-wrap:focus-within { box-shadow: 0 0 0 3px rgba(0,51,153,.28), 0 2px 5px rgba(0,0,0,.18); }

/* ---- Bevestigingskaartje ---- */
.fzsf-card {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin-top: .6rem;
	padding: .7rem .85rem;
	border-radius: 11px;
	font-size: .95rem;
	line-height: 1.35;
	font-weight: 600;
	border: 1px solid transparent;
	min-height: 1.2rem;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.fzsf-card:empty { display: none; }
.fzsf-card.fzsf-reveal { animation: fzsf-reveal .28s cubic-bezier(.16,.84,.44,1) both; }
.fzsf-card .fzsf-ic { flex: 0 0 18px; width: 18px; height: 18px; }
.fzsf-card.fzsf-loading { background: #f1f5f9; color: #475569; }
.fzsf-card.fzsf-ok { background: #ecfdf5; border-color: #34d399; color: #065f46; }
.fzsf-card.fzsf-miss { background: #fff7ed; border-color: #fdba74; color: #9a3412; }
.fzsf-card.fzsf-loading .fzsf-ic { animation: fzsf-spin .8s linear infinite; }
@keyframes fzsf-spin { to { transform: rotate(360deg); } }
@keyframes fzsf-reveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.fzsf-card.fzsf-reveal { animation: none; }
	.fzsf-card.fzsf-loading .fzsf-ic { animation: none; }
}

/* ---- Automatisch ingevulde velden: zacht oplichten ---- */
input.fzsf-auto {
	background-color: #f8fafc;
	box-shadow: inset 3px 0 0 0 #C8102E; /* FZ-rood accent */
	transition: background-color .35s ease, box-shadow .35s ease;
}

/* ---- Moderne, rustige formulier-look (rond de plaat-signatuur) ---- */
.fzsf-form .elementor-field-group { margin-bottom: 18px; }
.fzsf-form .elementor-field-group > .elementor-field-label {
	font-size: .9rem; font-weight: 600; color: #334155; margin-bottom: 7px;
}
.fzsf-form .elementor-field-group .elementor-field-textual:not(.fzsf-plate) {
	width: 100%;
	background: #ffffff !important;
	border: 1.5px solid #e2e8f0 !important;
	border-radius: 11px !important;
	padding: .72rem .95rem !important;
	min-height: 50px;
	font-size: 1rem;
	color: #14181d !important;
	box-shadow: 0 1px 2px rgba(16,24,40,.04) !important;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.fzsf-form .elementor-field-textual::placeholder { color: #94a3b8; }
.fzsf-form .elementor-field-group .elementor-field-textual:not(.fzsf-plate):focus {
	border-color: #C8102E !important;
	box-shadow: 0 0 0 4px rgba(200,16,46,.15) !important;
	outline: none;
}
.fzsf-form textarea.elementor-field-textual { min-height: 130px; line-height: 1.5; resize: vertical; }
.fzsf-form button.elementor-button,
.fzsf-form .elementor-button[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center;
	background: #C8102E !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 11px !important;
	padding: .92rem 1.7rem !important;
	min-height: 50px;
	font-weight: 700;
	font-size: 1.02rem;
	box-shadow: 0 6px 16px rgba(200,16,46,.28);
	transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
	cursor: pointer;
}
.fzsf-form button.elementor-button:hover { background: #a50d26 !important; transform: translateY(-1px); box-shadow: 0 9px 22px rgba(200,16,46,.34); }
.fzsf-form button.elementor-button:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .fzsf-form button.elementor-button:hover { transform: none; } }

@media (max-width: 600px) {
	.fzsf-plate-wrap { max-width: 100%; min-height: 56px; }
	.fzsf-plate-wrap input.fzsf-plate { font-size: 1.4rem; }
	.fzsf-card { font-size: .9rem; }
}