/**
 * Moodfex Calculators — shared form-field normalization.
 *
 * Loaded on every page that renders a [moodfex_calculator] shortcode, AFTER
 * each calculator's own stylesheet, so these rules win on shared properties
 * without touching per-calculator markup or BEM class names.
 *
 * Goal: every single-line control (text / date / time / number / select) in
 * every free calculator has the SAME visible outer height on every device.
 * The historical bug was that date/time inputs had padding but no explicit
 * height, so iOS Safari rendered them shorter/thinner than the text inputs
 * next to them. We give all of them one fixed height and center the content.
 *
 * Selectors use [class*="__input"] / [class*="__select"] (specificity 0,1,1)
 * which beats the per-calculator `.mfx-xx__input` rule (0,1,0) purely on
 * specificity + load order — no !important needed for the common case.
 */

:root {
	--mfx-field-h: 56px;         /* shared outer height, phone + tablet */
	--mfx-field-h-desktop: 54px; /* slightly tighter on wide screens    */
	--mfx-field-radius: 12px;
	--mfx-btn-h: 56px;
}

/* ------------------------------------------------------------------ *
 * 1. Universal single-line control height + box model.
 *    Matches every calculator's text/date/time/number inputs, which all
 *    carry a class ending in "__input", plus any "__select".
 * ------------------------------------------------------------------ */
input[class*="__input"],
select[class*="__select"],
select[class*="__input"] {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	height: var(--mfx-field-h);
	min-height: var(--mfx-field-h);
	line-height: 1.2;
	/* Keep each calculator's own horizontal padding / font / colors; we only
	   normalize the vertical box so heights match. Vertical padding is reset
	   to 0 because the fixed height + fl*/
	padding-top: 0;
	padding-bottom: 0;
	vertical-align: middle;
}

/* Text-like inputs center their value vertically for free once height is
   fixed; nothing else needed. */

/* ------------------------------------------------------------------ *
 * 2. iOS Safari date/time fix.
 *    An explicit height + appearance:none is what actually forces the
 *    native date/time control to match the text inputs. We ALSO normalize
 *    the inner pseudo-elements so the value is vertically centered and not
 *    clipped, while keeping the native picker reachable (we do NOT hide the
 *    calendar/clock indicator, we only tidy its box).
 * ------------------------------------------------------------------ */
input[type="date"][class*="__input"],
input[type="time"][class*="__input"] {
	-webkit-appearance: none;
	appearance: none;
	height: var(--mfx-field-h);
	min-height: var(--mfx-field-h);
	line-height: normal;
	/* iOS renders date/time text top-aligned in a short intrinsic box;
	   flex centering pins the value to the vertical middle like a text input. */
	display: -webkit-inline-box;
	display: inline-flex;
	-webkit-box-align: center;
	align-items: center;
}

/* The value text itself (iOS + others). */
input[type="date"][class*="__input"]::-webkit-date-and-time-value,
input[type="time"][class*="__input"]::-webkit-date-and-time-value {
	text-align: left;
	margin: 0;
	min-height: 1.2em;
	line-height: 1.2;
}

/* The editable segment group — remove the extra intrinsic padding iOS adds. */
input[type="date"][class*="__input"]::-webkit-datetime-edit,
input[type="time"][class*="__input"]::-webkit-datetime-edit {
	padding: 0;
	line-height: 1.2;
}

/* Keep the calendar/clock button visible and comfortably tappable. */
input[type="date"][class*="__input"]::-webkit-calendar-picker-indicator,
input[type="time"][class*="__input"]::-webkit-calendar-picker-indicator {
	opacity: 0.65;
	cursor: pointer;
	padding: 4px;
	margin-left: 4px;
}

/* Firefox: placeholder shown for empty date/time — keep baseline aligned. */
@supports (-moz-appearance: none) {
	input[type="date"][class*="__input"],
	input[type="time"][class*="__input"] {
		line-height: var(--mfx-field-h);
	}
}

/* ------------------------------------------------------------------ *
 * 3. When JS upgrades a date/time input into the manual-typing control,
 *    it wraps the pair in .mfx-field-control--date / --time. The visible
 *    text proxy (.mfx-field-control__text) must match the same height so
 *    upgraded and non-upgraded fields look identical.
 * ------------------------------------------------------------------ */
.mfx-field-control {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}
.mfx-field-control input[class*="__input"] {
	flex: 1 1 auto;
}
/* The native input kept in sync but visually replaced by the text proxy. */
.mfx-field-control__native {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
/* Calendar / clock trigger button injected by the common JS. */
.mfx-field-control__picker {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	min-width: 42px;
	height: 42px;
	margin-left: -46px;
	border: 0;
	background: transparent;
	color: #8a7a52;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	border-radius: 8px;
}
.mfx-field-control__picker:focus-visible {
	outline: 2px solid #C8A96A;
	outline-offset: 2px;
}
/* Give the proxy text room so its own value never sits under the button. */
.mfx-field-control--date input[class*="__input"],
.mfx-field-control--time input[class*="__input"] {
	padding-right: 46px;
}

/* ------------------------------------------------------------------ *
 * 4. Primary action buttons: one shared minimum height everywhere.
 * ------------------------------------------------------------------ */
button[class*="__btn--primary"],
button[class*="__download"],
button[class*="__sharebtn"] {
	min-height: var(--mfx-btn-h);
}

/* ------------------------------------------------------------------ *
 * 5. Two-column rows collapse to one column on narrow phones so nothing
 *    is squeezed and there is never horizontal overflow.
 * ------------------------------------------------------------------ */
[class*="__row"] {
	min-width: 0;
}
@media (max-width: 599px) {
	[class*="__row"] {
		display: flex;
		flex-direction: column;
	}
	[class*="__row"] > [class*="__field"] {
		width: 100%;
	}
}

/* Never let a calculator push the page sideways. */
[class*="mfx-"][data-moodfex-life-path],
div[class^="mfx-"] {
	max-width: 100%;
}

/* ------------------------------------------------------------------ *
 * 6. Desktop: slightly tighter fields, but still equal to each other.
 * ------------------------------------------------------------------ */
@media (min-width: 1024px) {
	input[class*="__input"],
	select[class*="__select"],
	select[class*="__input"],
	input[type="date"][class*="__input"],
	input[type="time"][class*="__input"] {
		height: var(--mfx-field-h-desktop);
		min-height: var(--mfx-field-h-desktop);
	}
}

/* ------------------------------------------------------------------ *
 * 7. Shared "Your Result Explained" block shown ABOVE the share card
 *    preview on every calculator (populated by the common JS from each
 *    calculator's existing result data — no new network calls).
 * ------------------------------------------------------------------ */
.mfx-result-explanation {
	margin: 4px auto 22px;
	max-width: 640px;
	text-align: left;
}
.mfx-result-explanation__title {
	margin: 0 0 10px;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #234236;
}
.mfx-result-explanation__body p {
	margin: 0 0 12px;
	font-size: 1rem;
	line-height: 1.65;
	color: #3a5347;
}
.mfx-result-explanation__body p:last-child {
	margin-bottom: 0;
}
@media (prefers-color-scheme: dark) {
	.mfx-result-explanation__title { color: #e8e3d5; }
	.mfx-result-explanation__body p { color: #cdd6cf; }
}