/**
 * 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: 44px;
	min-width: 44px;
	height: 44px;
	margin-left: -48px;
	border: 0;
	background: transparent;
	color: #aa8f58;
	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: 48px;
}

/* ------------------------------------------------------------------ *
 * 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; }
}


.mfx-premium-cta {
	margin: 26px auto 0;
	max-width: 640px;
	padding: 26px 28px;
	border-radius: 22px;
	background: linear-gradient(180deg, rgba(200, 169, 106, 0.12) 0%, rgba(200, 169, 106, 0.05) 100%);
	border: 1px solid rgba(200, 169, 106, 0.4);
	box-shadow: 0 18px 40px rgba(5, 42, 35, 0.08);
	text-align: center;
}
.mfx-premium-cta__disclaimer {
	margin: 0 0 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(35, 66, 54, 0.14);
	font-size: 0.85rem;
	font-style: italic;
	line-height: 1.5;
	color: #5a6f62;
}
.mfx-premium-cta__eyebrow {
	margin: 0 0 8px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8a6a1f;
}
.mfx-premium-cta__headline {
	margin: 0 0 14px;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.32;
	color: #234236;
}
.mfx-premium-cta__terms {
	margin: 0 0 16px;
	font-size: 0.86rem;
	line-height: 1.6;
	color: #5a6f62;
}
.mfx-premium-cta__terms strong {
	color: #234236;
}
.mfx-premium-cta__body {
	margin: 0;
	padding-top: 16px;
	border-top: 1px dashed rgba(200, 169, 106, 0.5);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.6;
	color: #234236;
}
.mfx-premium-cta__body a {
	display: inline;
	margin-left: 2px;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.05rem;
	font-weight: 600;
	font-style: italic;
	letter-spacing: 0.01em;
	color: #003D32;
	text-decoration: none;
	border-bottom: 1px solid rgba(200, 169, 106, 0.65);
	padding-bottom: 1px;
	white-space: nowrap;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.mfx-premium-cta__body a:hover,
.mfx-premium-cta__body a:focus-visible {
	color: #8a6a1f;
	border-bottom-color: #8a6a1f;
}
@media (prefers-color-scheme: dark) {
	.mfx-premium-cta {
		background: linear-gradient(180deg, rgba(200, 169, 106, 0.16) 0%, rgba(200, 169, 106, 0.06) 100%);
		border-color: rgba(200, 169, 106, 0.35);
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
	}
	.mfx-premium-cta__disclaimer { color: #b7c2ba; border-bottom-color: rgba(232, 227, 213, 0.16); }
	.mfx-premium-cta__eyebrow { color: #d8b96a; }
	.mfx-premium-cta__headline { color: #e8e3d5; }
	.mfx-premium-cta__terms { color: #b7c2ba; }
	.mfx-premium-cta__terms strong { color: #e8e3d5; }
	.mfx-premium-cta__body { color: #e8e3d5; border-top-color: rgba(200, 169, 106, 0.35); }
	.mfx-premium-cta__body a { color: #d8b96a; border-bottom-color: rgba(216, 185, 106, 0.5); }
	.mfx-premium-cta__body a:hover,
	.mfx-premium-cta__body a:focus-visible { color: #f0dca0; border-bottom-color: #f0dca0; }
}
.mfx-cta-secondary {
	margin-top: 18px;
	padding: 22px 24px;
	border-radius: 20px;
	background: rgba(200, 169, 106, 0.1);
	border: 1px solid rgba(200, 169, 106, 0.35);
	text-align: center;
}
.mfx-cta-secondary p {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.6;
	color: #234236;
}
.mfx-cta-secondary a {
	color: #8a6a1f;
	font-weight: 700;
	text-decoration: underline;
}
@media (prefers-color-scheme: dark) {
	.mfx-cta-secondary { background: rgba(200, 169, 106, 0.08); border-color: rgba(200, 169, 106, 0.3); }
	.mfx-cta-secondary p { color: #e8e3d5; }
	.mfx-cta-secondary a { color: #d8b96a; }
}

/* Members-only calculator gate. */
.mf-member-gate {
  max-width: 760px;
  margin: 32px auto;
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid var(--mf-line, #eadfce);
  border-radius: 24px;
  background: linear-gradient(145deg, #fff 0%, #fbf7ef 100%);
  box-shadow: 0 18px 50px rgba(0, 61, 50, 0.09);
  text-align: center;
}

.mf-member-gate h2 {
  margin: 0 0 14px;
  color: var(--mf-deep, #003d32);
}

.mf-member-gate p {
  max-width: 590px;
  margin: 0 auto 24px;
  color: #40534f;
  line-height: 1.7;
}

.mf-member-gate__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
}

.mf-member-gate__actions .btn {
  min-width: 180px;
}

.mfx-calculator > .mf-member-gate {
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 520px) {
  .mf-member-gate {
    margin: 20px auto;
    border-radius: 18px;
  }

  .mf-member-gate__actions {
    flex-direction: column;
  }

  .mf-member-gate__actions .btn {
    width: 100%;
  }
}

/* The inline shareable-card preview/download/share UI is removed from every
   calculator result page (product decision 2026-08-25); only the account
   Dashboard still shows saved result cards, via its own separate gallery
   markup (mf-mr-cgcard__img in includes/cards/shortcodes.php), which does
   not use these class suffixes and is therefore unaffected by this rule. */
[class$="__preview-loading"],
[class$="__card-img"],
[class$="__download"],
[class$="__sharebtn"] {
	display: none !important;
}