/* ==========================================================================
   qa-forms.css — Shared request/contact form (fleur_page_contact_form)
   --------------------------------------------------------------------------
   Matches the Figma design: fully-rounded "pill" inputs on a light-grey fill
   with the field LABEL shown as UPPERCASE placeholder text INSIDE the pill,
   a tall rounded "Jouw wensen" textarea, and a dark plum right-aligned
   "VERSTUREN" button.

   Scoping: all rules are scoped to .fleur-form (the form's own container) and
   the .fleur-form--pills marker that only the shared helper emits, so no other
   part of the site is affected. Loaded after pages.css (alphabetical order in
   functions.php), so these rules win on equal specificity.
   ========================================================================== */

/* --- Fully-rounded pill fields ------------------------------------------- */
.fleur-form--pills input[type="text"],
.fleur-form--pills input[type="email"],
.fleur-form--pills input[type="tel"],
.fleur-form--pills input[type="date"],
.fleur-form--pills input[type="time"],
.fleur-form--pills textarea {
	display: block;
	width: 100%;
	margin: 0;                      /* no gap for a label above */
	box-sizing: border-box;
	font-family: var(--fleur-font-sans);
	font-size: 15px;
	line-height: 1.4;
	color: var(--fleur-aubergine);
	background: var(--fleur-field, #e8e8e8);
	border: 1px solid transparent;
	border-radius: 100px;
	padding: 18px 30px;
	transition: background-color .15s ease, border-color .15s ease;
}

/* Tall rounded textarea for "Jouw wensen" */
.fleur-form--pills textarea {
	border-radius: 28px;
	resize: vertical;
	min-height: 190px;
	padding: 20px 30px;
}

.fleur-form--pills input:focus,
.fleur-form--pills textarea:focus {
	outline: none;
	border-color: var(--fleur-pink, #e06283);
	background: #fff;
}

/* --- Label as placeholder INSIDE the pill -------------------------------- */
/* Visible <label> is hidden but remains available to screen readers. */
.fleur-form--pills .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* UPPERCASE, spaced placeholder matching the design's inside-labels. */
.fleur-form--pills input::placeholder,
.fleur-form--pills textarea::placeholder {
	color: var(--fleur-aubergine);
	opacity: 1;                      /* Firefox dims placeholders by default */
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 14px;
}
.fleur-form--pills input::-webkit-input-placeholder,
.fleur-form--pills textarea::-webkit-input-placeholder {
	color: var(--fleur-aubergine);
	opacity: 1;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 14px;
}
.fleur-form--pills input:-ms-input-placeholder,
.fleur-form--pills textarea:-ms-input-placeholder {
	color: var(--fleur-aubergine);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 14px;
}
/* Textarea placeholder sits at the top of the field, not vertically centred. */
.fleur-form--pills textarea::placeholder {
	line-height: 1.4;
}

/* --- Dark, rounded, right-aligned "VERSTUREN" submit button --------------- */
.fleur-form--pills .fleur-form__actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 8px;
}
.fleur-form--pills .fleur-form__actions .fleur-btn--dark {
	min-width: 200px;
	padding: 16px 40px;
	border: 0;
	border-radius: 100px;
	background: var(--fleur-aubergine, #4c3d45);
	color: var(--fleur-cream, #f5f5f5);
	font-family: var(--fleur-font-sans);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .06em;
	cursor: pointer;
	/* Volledige transitie zodat de lift (transform) + schaduw uit de basis-
	   .button:hover soepel mee-animeren i.p.v. abrupt te springen. De vorige
	   regel animeerde alleen background-color, waardoor de omhoog-lift schokte. */
	transition: background-color .25s ease, color .25s ease,
		box-shadow .25s ease, transform .25s ease;
}
.fleur-form--pills .fleur-form__actions .fleur-btn--dark:hover {
	background: #3b2f35;
	color: var(--fleur-cream, #f5f5f5);
	filter: none;
}

/* --- Contact Form 7-brug -------------------------------------------------
   CF7 wikkelt elk veld in <span class="wpcf7-form-control-wrap">. Die span als
   block op volle breedte zetten zodat de pill-inputs (width:100%) net als bij het
   statische formulier de hele rij/kolom vullen. Plus nette styling voor CF7's
   validatie-tips en de verzend-/foutmelding, in de Fleur-huisstijl. */
.fleur-form--shortcode .wpcf7-form-control-wrap { display: block; width: 100%; }

/* CF7 injecteert bij het initialiseren een <span class="wpcf7-spinner"> ná de
   verzendknop (het laad-icoontje dat tijdens het verzenden draait). Dat span zit
   ín de flex-rij .fleur-form__actions en neemt óók in rust breedte in, waardoor
   de knop op desktop links van de veld-rechterkant staat (niet uitgelijnd) en op
   mobiel niet vol-breed kan worden. We verbergen 'm volledig (display:none haalt
   'm uit de lay-out) — net als bij Sjon, dat geen laad-icoon toont. !important
   omdat CF7 de spinner tijdens verzenden zelf zichtbaar/actief zet. */
.fleur-form--shortcode .wpcf7-spinner { display: none !important; }

/* CF7's submit is een <input> (geen <button>), dus de generieke
   .fleur-form input{width:100%} rekt 'm vol-breed. Op DESKTOP moet de knop juist
   auto-breed + rechts uitgelijnd zijn (net als de statische <button>). Alleen ≥982px
   zodat de mobiele .fleur-btn--dark{width:100%}-regel (vol-breed) intact blijft. */
@media (min-width: 982px) {
	.fleur-form--shortcode .fleur-form__actions input[type="submit"],
	.fleur-form--shortcode .fleur-form__actions .wpcf7-submit {
		display: inline-block;
		width: auto;
	}
}

/* Validatie: rode rand + tip onder het veld. */
.fleur-form--pills .wpcf7-not-valid { border-color: #c0392b !important; }
.fleur-form--shortcode .wpcf7-not-valid-tip {
	display: block;
	margin: 6px 0 0 24px;
	color: #c0392b;
	font-family: var(--fleur-font-sans);
	font-size: 13px;
	text-transform: none;
	letter-spacing: 0;
}

/* Verzend-/foutmelding onder het formulier (rond, huisstijl). */
.fleur-form--shortcode .wpcf7-response-output {
	margin: 18px 0 0 !important;
	padding: 14px 24px !important;
	border-radius: 16px;
	border-width: 1px;
	font-family: var(--fleur-font-sans);
	font-size: 14px;
	line-height: 1.5;
}
.fleur-form--shortcode form.sent .wpcf7-response-output {
	border-color: #2e7d5b;
	background: #e8f5ee;
	color: #205c43;
}
.fleur-form--shortcode form.invalid .wpcf7-response-output,
.fleur-form--shortcode form.failed .wpcf7-response-output {
	border-color: #c0392b;
	background: #fbeaea;
	color: #9c2a20;
}

/* --- Responsive: mobile (≤981px) ----------------------------------------
   Generic across all shared pill-forms (contact / workshops / chocolade-op-maat).
   Fields already stack to one column at ≤860px via pages.css; here we make the
   whole form comfortable on phones: single column, full-width fields with a
   little more vertical padding for touch, a full-width submit button, and a
   slightly shorter textarea so the form isn't overwhelmingly tall. Scoped to
   .fleur-form / .fleur-form--pills; touches no desktop (≥982px) rule. --------- */
@media (max-width: 981px) {
	/* Force the two-up grid to a single column across the phone range. */
	.fleur-form--pills .fleur-form__grid { grid-template-columns: 1fr; }

	/* Full-width, touch-comfortable pill fields. */
	.fleur-form--pills input[type="text"],
	.fleur-form--pills input[type="email"],
	.fleur-form--pills input[type="tel"],
	.fleur-form--pills input[type="date"],
	.fleur-form--pills input[type="time"],
	.fleur-form--pills textarea {
		width: 100%;
		font-size: 16px;   /* ≥16px voorkomt auto-zoom op iOS bij focus */
		padding: 16px 24px;
	}
	.fleur-form--pills textarea {
		min-height: 160px;
		padding: 18px 24px;
	}
	.fleur-form--pills input::placeholder,
	.fleur-form--pills textarea::placeholder,
	.fleur-form--pills input::-webkit-input-placeholder,
	.fleur-form--pills textarea::-webkit-input-placeholder {
		font-size: 13px;   /* iets kleiner zodat langere labels binnen de pil passen */
	}

	/* Full-width submit button. */
	.fleur-form--pills .fleur-form__actions { justify-content: stretch; margin-top: 12px; }
	.fleur-form--pills .fleur-form__actions .fleur-btn--dark {
		width: 100%;
		min-width: 0;
	}
}