/**
 * Amazing Meds Custom WPForms - Frontend Styles
 *
 * Loaded only on pages where WPForms is rendering a form (see includes/Assets.php).
 */

/* !important: the overlay positions itself relative to this wrap, so it
 * must stay the positioning context no matter what the theme does. */
.amwpf-dob-wrap {
	position: relative !important;
}

/**
 * The real, editable input. Its own text is invisible (the overlay draws
 * the visible characters on top) but the caret and the submitted value
 * are unaffected by this.
 *
 * !important here is intentional: this isn't cosmetic, the overlay only
 * works if this input's own text is actually hidden, so it must win over
 * any theme/WPForms rule that sets color on form inputs.
 */
.amwpf-dob-input {
	position: relative !important;
	color: transparent !important;
	caret-color: #1d2327;
	/* Decorative calendar icon, painted as an inline SVG data URI on the input
	 * itself (no extra DOM, no JS). It shows through the overlay because the
	 * overlay has a transparent background; it sits in the right-padding lane
	 * reserved by padding-right below.
	 *
	 * Crucially, syncOverlayStyle() in frontend.js copies this input's
	 * paddingRight onto the overlay, so the guide text ("MM/DD/YYYY") stops
	 * before the icon automatically - the overlay never paints over it.
	 *
	 * Lives on the base class (not a :focus/.wpforms-error variant) so it
	 * persists through every validation-state class WPForms toggles. Colour is
	 * stroke='%23444b54' (the %23 is a url-encoded '#'); change that one token
	 * to recolour. background-size is in em so the icon scales with the field
	 * font on mobile and desktop alike. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444b54' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.75em center !important;
	background-size: 1.1em auto !important;
	/* Reserves the lane the icon sits in. The overlay copies this value, so the
	 * visible date text never slides under the icon. */
	padding-right: 2.4em !important;
}

/**
 * Non-interactive layer that mirrors the input's font/horizontal padding/
 * border via JS (see syncOverlayStyle() in frontend.js) so its text lines
 * up exactly over the input. Typed digits render in normal text color;
 * not-yet-typed segments (.amwpf-dob-guide, below) render in a fixed gray.
 *
 * Vertical centering is handled by flex/align-items here rather than by
 * copying padding-top/bottom: a plain <div> doesn't get an input's native
 * vertical-centering behavior even with identical padding copied over.
 *
 * !important on position/offsets: this must stack exactly on top of the
 * input to work at all, so it can't be allowed to lose a specificity fight
 * and fall back into normal document flow.
 */
.amwpf-dob-overlay {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	display: flex !important;
	align-items: center;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	overflow: hidden;
	white-space: nowrap;
	pointer-events: none;
	color: #1d2327 !important;
}

/* Fixed gray rather than read from the real ::placeholder at runtime -
 * that computed-style read is unreliable across browsers (see frontend.js). */
.amwpf-dob-overlay .amwpf-dob-guide {
	color: #8c8f94 !important;
}

/* The segment the caret is about to fill in (see onFocus() in frontend.js)
 * is shown even lighter than the regular guide color above - the blinking
 * caret is the main "type here" cue, this is just a faint supporting hint. */
.amwpf-dob-overlay .amwpf-dob-guide-active {
	color: #d9d9d9 !important;
}

/**
 * Height/Weight fields: a number input flush against a unit dropdown so the
 * pair reads as one control. Borders are shared at the seam (no gap, no
 * double border) rather than the two pieces floating apart.
 *
 * width/max-width/box-sizing are pinned explicitly here rather than relying
 * on the theme's defaults: this row must never render wider than its parent
 * field column, in either the builder canvas or the live form.
 */
.amwpf-unit-field {
	display: flex !important;
	align-items: stretch;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	/* Belt-and-suspenders: even if a child somehow computes wider than its
	 * flex track (rogue theme min-width, sub-pixel rounding), clip it here so
	 * the row can never push a horizontal scrollbar onto the field column.
	 * Native <select> dropdown popups render in their own layer and are NOT
	 * clipped by this. */
	overflow: hidden;
}

/* min-width/max-width carry !important: flexbox enforces them as hard
 * clamps regardless of flex-basis/grow/shrink, so any non-!important
 * theme rule that sets a fixed min-width on inputs (WPForms' own builder
 * stylesheet does exactly this with a 250px floor) would otherwise still
 * win on specificity and force this row past its container. */
.amwpf-unit-field .amwpf-unit-value {
	/* flex-basis 0 (not auto) so this input fills only the space left over
	 * after the unit select, ignoring any fixed/percentage "width" the
	 * theme sets on its own inputs - that's what was causing the row to
	 * overflow its container.
	 *
	 * min-width: 0 is the critical bit: flex items default to
	 * min-width: auto, which refuses to shrink below the input's intrinsic
	 * content/placeholder width and is the single most common cause of flex
	 * overflow. Pinning it to 0 lets the input shrink to whatever space the
	 * unit select leaves. */
	flex: 1 1 0;
	min-width: 0 !important;
	max-width: 100% !important;
	width: auto !important;
	box-sizing: border-box !important;
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

/* Content-sized, capped width: just enough for "ft"/"cm"/"lb"/"kg" plus the
 * native dropdown arrow - never allowed to grow with the input.
 *
 * No fixed width/min-width here. The select sizes to its content
 * (flex-basis: auto) but is capped by max-width so it can't run away, and
 * min-width: 0 lets it shrink rather than forcing the row past its container
 * on a very narrow column - the old fixed 4.5em floor was exactly what kept
 * overflowing the builder. 80px comfortably fits the two-letter unit labels
 * plus the arrow.
 *
 * box-sizing: border-box is required here - without it the horizontal
 * padding below is added on top of the max-width instead of being carved out
 * of it, rendering the select wider than its cap. */
.amwpf-unit-field .amwpf-unit-select {
	flex: 0 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: 80px !important;
	box-sizing: border-box !important;
	/* Strip the native dropdown arrow in every engine so we can draw our own.
	 * All three spellings are required: -webkit- (Chrome/Edge/Safari), -moz-
	 * (Firefox, which has honoured appearance:none on <select> since FF 35), and
	 * the unprefixed standard. Without -moz-appearance Firefox keeps its own
	 * arrow and renders ours on top of it. */
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	/* Custom chevron as an inline SVG data URI: no extra HTTP request and no
	 * dependency on a plugin asset path. Lives on the base class (not a
	 * :focus/.wpforms-error variant) so it survives every validation-state class
	 * WPForms toggles on the element. Arrow colour is stroke='%23444b54' (the
	 * %23 is a url-encoded '#') - change that one token to recolour. !important
	 * guards against theme/WPForms rules that set their own select background.
	 * background-size is in em so the arrow scales with the field font size. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23444b54' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.55em center !important;
	background-size: 0.6em auto !important;
	/* Right padding reserves the lane the chevron sits in so the unit label
	 * ("ft"/"kg") never slides under it. Was 1.4em for the native arrow. */
	padding: 0 1.6em 0 0.5em !important;
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	border-left-width: 0 !important;
}

/* The error label is appended to the field wrapper (see the
 * wpforms-validation-group-member class added in UnitField::field_properties())
 * rather than inserted inside .amwpf-unit-field, so it always lands below
 * the input/select row instead of overlapping it. This just adds breathing
 * room to match WPForms' own spacing for other wrapped fields. */
.wpforms-field-amwpf-height .wpforms-error,
.wpforms-field-amwpf-weight .wpforms-error {
	display: block;
	clear: both;
	margin-top: 8px;
}