/*
 * Estevera Forms Embed
 *
 * Visual language follows the modern ev-lps forms: no visible labels, one
 * placeholder-driven control per line, a single bordered phone control holding
 * flag + dial code + number, generous padding, full-width submit.
 *
 * Colours stay the legacy dental.verasmile.com palette so the form still sits
 * naturally on that site's blue cards: near-white fills and the existing cyan
 * (#00b2db) call to action, not the ev-lps navy.
 *
 * SPECIFICITY IS LOAD-BEARING. The theme ships
 *   input[type="text"], input[type="email"], ... { background: transparent; border: 1px solid #000; border-radius: 0 }
 * at 0-1-1, exactly the weight of a bare `.evf-field input`, and it is defined
 * LATER in the cascade, so a tie hands the theme the win. That is precisely how
 * the first version regressed: textarea, select and button kept their styling
 * and every <input> lost its fill, radius and border. Every control rule below
 * is therefore written as `.evf <tag>.evf-...` (0-2-1), and the handful of
 * properties the theme actually sets are additionally marked !important so a
 * later theme change, a Popup Maker theme, or debloat reordering cannot
 * silently undo them again.
 */

.evf {
	--evf-fill: #ffffff;
	--evf-border: #dfe6ee;
	--evf-border-focus: #00b2db;
	--evf-text: #33475b;
	--evf-placeholder: #8098b0;
	--evf-accent: #00b2db;
	--evf-accent-dark: #0093b6;
	--evf-error: #c0392b;
	--evf-radius: 12px;
	--evf-gap: 12px;
	--evf-control-h: 52px;
	--evf-pad-x: 16px;

	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: var(--evf-text);
	max-width: 100%;

	/*
	 * Breathing room under the submit button.
	 *
	 * The GenerateBlocks cards these forms sit in carry padding-bottom: 0. They
	 * were laid out around the HubSpot iframe, which supplied its own slack:
	 * the form's internal bottom margin plus the free-tier branding link below
	 * it. Remove the iframe and the button lands flush against the card's
	 * rounded bottom edge, which reads as broken rather than tight.
	 *
	 * Applied on the form root rather than by editing 30-odd container blocks,
	 * so it holds for every page including ones nobody re-checks. On a
	 * container that does have its own bottom padding this simply reads as
	 * generous.
	 */
	padding-bottom: 24px;
}

.evf *,
.evf *::before,
.evf *::after {
	box-sizing: border-box;
}

.evf .evf-form {
	display: flex;
	flex-direction: column;
	gap: var(--evf-gap);
	margin: 0;
}

.evf .evf-field {
	margin: 0;
	min-width: 0;
}

/* Accessible name without a visible label. */
.evf .evf-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------- controls */

.evf input.evf-control,
.evf textarea.evf-control,
.evf div.evf-control {
	display: block;
	width: 100%;
	font-family: inherit;
	/* 16px keeps iOS Safari from zooming the viewport on focus. */
	font-size: 16px;
	line-height: 1.4;
	color: var(--evf-text) !important;
	background-color: var(--evf-fill) !important;
	border: 1px solid var(--evf-border) !important;
	border-radius: var(--evf-radius) !important;
	box-shadow: none !important;
	margin: 0;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.evf input.evf-control {
	height: var(--evf-control-h) !important;
	padding: 0 var(--evf-pad-x) !important;
	appearance: none;
	-webkit-appearance: none;
}

.evf textarea.evf-control {
	min-height: 96px;
	height: auto !important;
	padding: 14px var(--evf-pad-x) !important;
	resize: vertical;
}

.evf input.evf-control::placeholder,
.evf textarea.evf-control::placeholder,
.evf input.evf-phone-input::placeholder {
	color: var(--evf-placeholder);
	opacity: 1;
}

.evf input.evf-control:focus,
.evf textarea.evf-control:focus,
.evf div.evf-control:focus-within {
	outline: none;
	border-color: var(--evf-border-focus) !important;
	box-shadow: 0 0 0 3px rgba(0, 178, 219, 0.18) !important;
}

/* ------------------------------------------------------------------- phone */

.evf div.evf-phone {
	display: flex;
	align-items: stretch;
	height: var(--evf-control-h) !important;
	padding: 0 !important;
	overflow: hidden;
}

.evf .evf-cc-display {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 0 10px 0 var(--evf-pad-x);
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.evf .evf-flag {
	display: inline-flex;
	align-items: center;
	font-size: 19px;
	line-height: 1;
	/* Colour-emoji fonts first: on platforms without one the regional
	   indicator pair renders as two letters, which is still a legible
	   country hint rather than tofu. */
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/*
 * WordPress's emoji script swaps the flag character for an <img class="emoji">
 * served from s.w.org, and its observer re-runs on every country change, so
 * this is the normal rendering path on this host rather than an edge case.
 * It is an improvement: a real flag on Windows too, where the regional
 * indicator pair would otherwise render as the letters "GB".
 *
 * Size and alignment are pinned here so the control does not depend on the
 * theme's own .emoji rule, which sets height:1em and can leave the flag
 * misaligned against the dial code. Sites where the emoji script is disabled
 * (vc and vs run disable-emoji-detector.php; dental does not) simply keep the
 * native character and the rule above applies instead.
 */
.evf .evf-flag img.emoji {
	width: 19px !important;
	height: 19px !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	vertical-align: middle;
	border: 0;
	box-shadow: none;
}

.evf .evf-dial {
	font-size: 16px;
	font-weight: 500;
	color: var(--evf-text);
	/*
	 * A dial code is LTR text even on an RTL page. Without isolation the
	 * bidi algorithm reorders "+966" to render as "966+", because the "+"
	 * is a neutral character adopting the surrounding RTL direction.
	 */
	/* !important because the site's RTL stylesheet sets direction:rtl on a
	   broader selector that outranks this one; without it the rule applies
	   unicode-bidi but not the direction, and "+966" still renders "966+". */
	direction: ltr !important;
	unicode-bidi: isolate;
}

.evf .evf-caret {
	width: 11px;
	height: 7px;
	flex: 0 0 auto;
	color: #6b8299;
}

/*
 * The real <select> sits transparently over the display. Native picker and
 * native keyboard behaviour, custom appearance.
 */
.evf select.evf-cc {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	font-size: 16px;
}

.evf .evf-divider {
	flex: 0 0 1px;
	width: 1px;
	background-color: var(--evf-border);
	margin: 10px 0;
}

.evf input.evf-phone-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100% !important;
	font-family: inherit;
	font-size: 16px;
	color: var(--evf-text) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 var(--evf-pad-x) !important;
	appearance: none;
	-webkit-appearance: none;
}

.evf input.evf-phone-input:focus {
	outline: none;
	box-shadow: none !important;
}

/* --------------------------------------------------------------- validation */

.evf .evf-error {
	display: none;
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.35;
	color: var(--evf-error);
}

.evf .evf-field.is-invalid .evf-error {
	display: block;
}

.evf .evf-field.is-invalid input.evf-control,
.evf .evf-field.is-invalid textarea.evf-control,
.evf .evf-field.is-invalid div.evf-control {
	border-color: var(--evf-error) !important;
}

.evf .evf-field.is-invalid input.evf-control:focus,
.evf .evf-field.is-invalid textarea.evf-control:focus,
.evf .evf-field.is-invalid div.evf-control:focus-within {
	box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.16) !important;
}

/* ------------------------------------------------------------------ submit */

.evf button.evf-submit {
	display: block;
	width: 100%;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff !important;
	background-color: var(--evf-accent) !important;
	border: 1px solid var(--evf-accent) !important;
	border-radius: var(--evf-radius) !important;
	min-height: var(--evf-control-h);
	padding: 14px 24px !important;
	margin: 4px 0 0;
	cursor: pointer;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.evf button.evf-submit:hover:not(:disabled) {
	background-color: var(--evf-accent-dark) !important;
	border-color: var(--evf-accent-dark) !important;
}

.evf button.evf-submit:focus-visible {
	outline: 3px solid rgba(0, 178, 219, 0.45);
	outline-offset: 2px;
}

.evf button.evf-submit:disabled {
	opacity: 0.65;
	cursor: default;
}

.evf .evf-status {
	display: none;
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.4;
}

.evf .evf-status.is-error {
	display: block;
	color: var(--evf-error);
}

/*
 * Honeypot. Off-screen rather than display:none so a headless browser that
 * skips hidden inputs still fills it, and never focusable.
 */
.evf .evf-hp {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------------- RTL */

.evf[dir="rtl"] .evf-cc-display {
	padding: 0 var(--evf-pad-x) 0 10px;
}

/*
 * Phone numbers and email addresses are LTR sequences regardless of the page
 * direction. Left to inherit RTL, the bidi algorithm renders the Saudi example
 * "51 234 5678" as "5678 234 51" and does the same to anything the visitor
 * types, so the field actively misinforms. Forcing the direction fixes the
 * glyph order; text-align keeps the field visually anchored to the RTL side.
 */
.evf input.evf-phone-input,
.evf input[type="email"].evf-control {
	direction: ltr !important;
	unicode-bidi: isolate;
}

.evf[dir="rtl"] input.evf-phone-input,
.evf[dir="rtl"] input[type="email"].evf-control {
	text-align: right;
}

.evf[dir="rtl"] input.evf-phone-input::placeholder,
.evf[dir="rtl"] input[type="email"].evf-control::placeholder {
	text-align: right;
}

/* ------------------------------------------------- horizontal variant */

@media (min-width: 720px) {
	.evf--horizontal .evf-form {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: var(--evf-gap);
	}

	.evf--horizontal .evf-field {
		flex: 1 1 190px;
	}

	.evf--horizontal button.evf-submit {
		flex: 0 0 auto;
		width: auto;
		margin-top: 0;
	}

	.evf--horizontal .evf-status {
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.evf input.evf-control,
	.evf textarea.evf-control,
	.evf div.evf-control,
	.evf button.evf-submit {
		transition: none;
	}
}