/**
 * Shared contact-form vocabulary — used by the KONTAKT page and reused by
 * the single-product enquiry form. Works on a cream (--surface-sand) or a
 * white/paper (--surface-page) panel: fields always carry their own sand
 * fill, so contrast never depends on the surrounding background.
 *
 * @package Geras_Custom
 */

.form {
	display: flex;
	flex-direction: column;
	gap: var( --space-18 );
}

.form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-18 );
}

.form__field {
	display: flex;
	flex-direction: column;
	gap: var( --space-7 );
	min-width: 0;   /* grid children default to min-width:auto and would be sized by the input's `size` attribute */
}

.form__label {
	font-size: var( --fs-13 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-caps );
	text-transform: uppercase;
	color: var( --color-heading );
}

.form__required {
	color: var( --color-brand-red );
}

/* CF7 wraps every control in an inline <span>, which shrink-wraps to the
   control's intrinsic cols/size width — so `width: 100%` below would resolve
   against that instead of the column. Make the wrapper a block first. */
.wpcf7-form-control-wrap {
	display: block;
	min-width: 0;
}

.form__input,
.form__textarea {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	padding: var( --space-13 ) var( --space-16 );
	border: 0;
	border-radius: var( --radius-14 );
	background: var( --surface-sand );
	box-shadow: var( --ring-hairline-2 );
	color: var( --color-heading );
	font-weight: var( --fw-medium );
	/* CF7 puts the control in its own wrapper span next to .form__label
	   rather than inside it, so it no longer inherits the label's small
	   caption size — set it to match the mockup explicitly instead. */
	font-size: var( --fs-13 );
	line-height: normal;
}

.form__textarea {
	resize: vertical;
}

.form__input:focus,
.form__textarea:focus {
	outline: none;
	box-shadow: var( --ring-honey );
}

.form__consent {
	display: flex;
	align-items: flex-start;
	gap: var( --space-11 );
	font-size: var( --fs-14-5 );
	color: var( --color-heading );
}

.form__consent input {
	flex: none;
	width: var( --space-18 );
	height: var( --space-18 );
	margin-top: var( --space-3 );
	accent-color: var( --c-honey-500 );
}

.form__link {
	font-weight: var( --fw-bold );
	color: var( --color-heading );
	border-bottom: var( --space-2 ) solid var( --c-honey-500 );
}

.form__radio-group-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --space-16 );
}

.form__radio-group {
	display: flex;
	gap: var( --space-6 );
	padding: var( --space-5 );
	border-radius: var( --radius-pill );
	background: var( --c-cocoa-a07 );
}

/* CF7 renders each radio option as a bare .wpcf7-list-item span (input +
   label text), not wrapped in a <label> — target that instead so the pill
   padding actually applies. */
.form__radio-group .wpcf7-list-item,
.form__radio-group label {
	display: inline-flex;
	align-items: center;
	gap: var( --space-7 );
	padding: var( --space-8 ) var( --space-18 );
	border-radius: var( --radius-pill );
	font-size: var( --fs-14 );
	font-weight: var( --fw-black );
	color: var( --color-heading );
	cursor: pointer;
}

.form__radio-group input {
	accent-color: var( --c-honey-500 );
}

.form__note {
	font-size: var( --fs-14-5 );
	color: var( --color-text );
}

.form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --space-16 );
	margin-top: var( --space-6 );
}

.form .wpcf7-response-output {
	margin: 0;
	font-size: var( --fs-14-5 );
	font-weight: var( --fw-bold );
}

.form .wpcf7-mail-sent-ok {
	color: var( --color-success );
	border-color: var( --color-success );
}

.form .wpcf7-validation-errors,
.form .wpcf7-mail-sent-ng {
	color: var( --color-brand-red );
	border-color: var( --color-brand-red );
}

.form .wpcf7-not-valid-tip {
	display: block;
	margin-top: var( --space-4 );
	font-size: var( --fs-13 );
	font-weight: var( --fw-medium );
	color: var( --color-brand-red );
}

@media ( min-width: 768px ) {

	.form__row {
		grid-template-columns: 1fr 1fr;
	}
}