/**
 * MP Ask Our Doctors — form.
 *
 * Everything is scoped under .mp-aod so nothing leaks into the theme.
 * Brand values read theme.json tokens first and fall back to the hex, so the
 * form follows the site if the palette changes.
 */

.mp-aod {
	--mp-berry: var(--wp--preset--color--berry, #8E2C4E);
	--mp-berry-hover: #7A2542;
	--mp-ink: #1A1A1A;
	--mp-muted: #645A60;
	--mp-line: #E4C9D2;          /* was #F1E0E6 — too faint; more prominent now */
	--mp-line-soft: #F1E0E6;     /* the old faint tone, kept for hairline dividers */
	--mp-wash: #FBF1F3;
	--mp-ivory: #FCF8F5;
	--mp-r: 16px;
	--mp-r-lg: 24px;
	--mp-shadow-md: 0 14px 40px rgba(0, 0, 0, .09);
	--mp-shadow-lg: 0 30px 70px rgba(0, 0, 0, .16);

	/*
	 * Keep the card off the screen edges.
	 *
	 * The card is capped at 720px and centred, so on desktop this padding is
	 * invisible. Below roughly 750px it is the only thing stopping the border
	 * running into the edge — which is exactly what happens when the page
	 * template is full width and supplies no gutter of its own. Owning the
	 * inset here means the form is safe on any template.
	 */
	padding-left: 16px;
	padding-right: 16px;
}

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

/* ---------- card ---------- */

.mp-aod-card {
	max-width: 720px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-r-lg);
	padding: 36px;
	box-shadow: var(--mp-shadow-md);
}

@media (max-width: 560px) {
	.mp-aod {
		padding-left: 14px;
		padding-right: 14px;
	}

	.mp-aod-card {
		padding: 24px 20px;
	}
}

/* ---------- honeypot ---------- */

/*
 * Off-canvas rather than display:none — some bots skip hidden fields but fill
 * positioned ones. Not focusable, not announced.
 */
.mp-aod-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- fields ---------- */

.mp-aod-field {
	margin-bottom: 18px;
}

.mp-aod .mp-aod-field > label,
.mp-aod .mp-aod-group > label,
.mp-aod .mp-aod-group > legend {
	display: block;
	font-size: .98rem;   /* mobile size; desktop bumps this in the 768px block */
	font-weight: 800;
	color: #000;
	margin-bottom: 6px;
	padding: 0; /* legend has default inline padding */
	float: none;
	width: auto;
}

.mp-aod-hint {
	font-size: .8rem;
	color: var(--mp-muted);
	font-weight: 500;
	margin: 0 0 8px;
}

.mp-aod input[type="text"],
.mp-aod input[type="email"],
.mp-aod input[type="number"],
.mp-aod input[type="date"],
.mp-aod textarea {
	width: 100%;
	box-sizing: border-box; /* padding stays inside the 100% width */
	border: 1.5px solid var(--mp-line);
	border-radius: 12px;
	padding: 13px 15px;
	font-family: inherit;
	/*
	 * 16px exactly — NOT .98rem. iOS Safari zooms the whole page when a focused
	 * input is under 16px, and .98rem (~15.7px) trips it. A hard 16px is
	 * threshold-proof whatever the theme's root size is.
	 */
	font-size: 16px;
	color: var(--mp-ink);
	background: var(--mp-ivory);
	outline: none;
	transition: border-color .2s, background .2s;
}

/*
 * iOS-only date-field fix. Safari renders date inputs with native widget
 * chrome that can stretch flush to the container's right edge regardless of
 * width/box-sizing. Stripping the appearance hands control back to the shared
 * input rule above; min-height keeps the tap target once the chrome is gone.
 * Scoped strictly to the date input — nothing else is touched.
 */
.mp-aod input[type="date"] {
	-webkit-appearance: none;
	appearance: none;
	min-width: 0;
	max-width: 100%;
	min-height: 48px;
}

.mp-aod input:focus,
.mp-aod textarea:focus {
	border-color: var(--mp-berry);
	background: #fff;
}

/*
 * Taller by default so there is room to write, but min-height (not fixed
 * height) so it still shrinks gracefully on small screens, and vertical resize
 * lets her grow it further. Font-size stays >=16px elsewhere to avoid iOS zoom.
 */
.mp-aod textarea {
	min-height: 210px;
	resize: vertical;
	line-height: 1.6;
}

@media (max-width: 600px) {
	.mp-aod textarea {
		min-height: 190px;
	}
}

.mp-aod .mp-aod-num {
	max-width: 150px;
}

.mp-aod :focus-visible {
	outline: 3px solid var(--mp-berry);
	outline-offset: 2px;
	border-radius: 6px;
}

/* ---------- emergency notice ---------- */

/*
 * Sits directly above the textarea, not at the top of the page and not in the
 * footer. She scrolls to the box; that is where she reads.
 */
.mp-aod-urgent {
	margin-top: 14px;
	font-size: .84rem;
	line-height: 1.6;
	color: var(--mp-muted);
	background: var(--mp-wash);
	border-left: 3px solid var(--mp-berry);
	border-radius: 0 10px 10px 0;
	padding: 12px 14px;
}

.mp-aod-urgent strong {
	color: #000;
	/* inline, so the whole warning reads as one flowing paragraph */
}

/* ---------- chips ---------- */

.mp-aod-chips {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
	align-items: center;
}

.mp-aod-chip {
	position: relative;
}

.mp-aod-chip input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

/* engagement: chips feel tappable — firmer edge, lift on hover */
.mp-aod-chip label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border-radius: 100px;
	border: 1.5px solid var(--mp-line);
	background: #fff;
	font-size: .86rem;
	font-weight: 600;
	color: var(--mp-ink);
	cursor: pointer;
	transition: .18s;
}

.mp-aod-chip input:checked + label {
	box-shadow: 0 4px 14px rgba(142, 44, 78, .18);
	background: var(--mp-berry);
	border-color: var(--mp-berry);
	color: #fff;
}

.mp-aod-chip label:hover {
	border-color: var(--mp-berry);
}

/* Keyboard focus must be visible even though the input itself is hidden. */
.mp-aod-chip input:focus-visible + label {
	outline: 3px solid var(--mp-berry);
	outline-offset: 2px;
}

.mp-aod-sub-field {
	margin-top: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s ease, margin-top .3s ease;
}

.mp-aod-sub-field.is-open {
	max-height: 220px;
	margin-top: 12px;
}

/* A whole group hidden because it does not apply to this answer (e.g. cycle
   length and children when she has not had her period yet). */
.mp-aod-hidden {
	display: none !important;
}

/*
 * These are <fieldset> now. Reset the browser's default border/margin/padding
 * and min-width, then apply our own top border as the divider between groups.
 */
.mp-aod-group {
	border: 0;
	border-top: 1px solid var(--mp-line-soft);
	margin: 0;
	min-width: 0;
	padding: 0;
	padding-top: 18px;
	margin-top: 18px;
}

.mp-aod-group:first-of-type {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}

/* ---------- under 13 ---------- */

.mp-aod-under13 {
	background: var(--mp-wash);
	border-radius: var(--mp-r);
	padding: 24px;
	margin-top: 4px;
}

.mp-aod-under13 h3 {
	font-size: 1.15rem;
	margin: 0 0 8px;
	color: #000;
}

.mp-aod-under13 p {
	font-size: .92rem;
	color: var(--mp-muted);
	margin: 0 0 14px;
	line-height: 1.6;
}

.mp-aod-small {
	font-size: .8rem;
	color: var(--mp-muted);
	line-height: 1.55;
}

/* ---------- consent ---------- */

.mp-aod-consents {
	border-top: 1px solid var(--mp-line-soft);
	margin-top: 22px;
	padding-top: 18px;
}

.mp-aod-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: .85rem;
	color: var(--mp-muted);
	margin: 0 0 12px;
	cursor: pointer;
	line-height: 1.5;
}

.mp-aod-consent input {
	margin-top: 3px;
	accent-color: var(--mp-berry);
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.mp-aod-consent:hover span {
	color: var(--mp-ink);
}

.mp-aod-consent em {
	font-style: normal;
	font-weight: 700;
	color: var(--mp-berry);
}

.mp-aod-consents.has-error .mp-aod-consent input:not(:checked) {
	outline: 2px solid var(--mp-berry);
	outline-offset: 2px;
	border-radius: 3px;
}

.mp-aod-err {
	font-size: .8rem;
	font-weight: 600;
	color: var(--mp-berry);
	background: var(--mp-wash);
	border-radius: 10px;
	padding: 9px 12px;
	margin: 4px 0 0;
}

.mp-aod-field.has-error input,
.mp-aod-field.has-error textarea {
	border-color: var(--mp-berry);
	background: #fff;
}

/* ---------- buttons ---------- */

.mp-aod-form-title {
	font-size: clamp(1.8rem, 4vw, 2.3rem);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -.02em;
	color: #8E2C4E;
	margin: 0 0 22px;
	text-align: left;
}

.mp-aod-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-weight: 700;
	font-size: .95rem;
	padding: 14px 26px;
	border-radius: 100px;
	border: 1.5px solid transparent;
	cursor: pointer;
	font-family: inherit;
	text-decoration: none;
	transition: transform .18s, box-shadow .18s, background .18s;
}

.mp-aod-btn-primary {
	background: var(--mp-berry);
	color: #fff;
	box-shadow: 0 10px 24px rgba(142, 44, 78, .24);
}

.mp-aod-btn-primary:hover {
	background: var(--mp-berry-hover);
	color: #fff;
	transform: translateY(-2px);
}

.mp-aod-btn[disabled] {
	opacity: .6;
	cursor: not-allowed;
	transform: none;
}

.mp-aod-btn-full {
	width: 100%;
}

/*
 * Breathing room between the final question's options and the Send button.
 * Without it the last chip row sits flush against the button, which reads as
 * cramped — the gap the rest of the form has between groups was missing at the
 * very bottom.
 */
#mpAodStep2 .mp-aod-btn-full {
	margin-top: 26px;
}

#mpAodStep2 .mp-aod-group:last-of-type {
	padding-bottom: 4px;
}

.mp-aod-foot {
	display: flex;
	justify-content: center;
	margin-top: 6px;
}

.mp-aod-submit-hint {
	text-align: center;
	font-size: .82rem;
	color: var(--mp-muted);
	margin-top: 10px;
}

/* ---------- modal ---------- */

.mp-aod-overlay {
	position: fixed;
	inset: 0;
	background: rgba(26, 20, 22, .55);
	backdrop-filter: blur(3px);
	z-index: 200;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	/*
	 * Top padding clears a fixed site header so the modal's top isn't hidden
	 * behind it. --mp-aod-header-h can be set per-site if the header is taller
	 * or shorter; it defaults to 110px, enough for a typical sticky header plus
	 * breathing room. The overlay scrolls, so a tall modal is still reachable.
	 */
	padding: var(--mp-aod-header-h, 110px) 20px 40px;
	overflow-y: auto;
}

.mp-aod-overlay[hidden] {
	display: none;
}

.mp-aod-modal {
	background: #fff;
	border-radius: var(--mp-r-lg);
	max-width: 640px;
	width: 100%;
	padding: 36px;
	box-shadow: var(--mp-shadow-lg);
	position: relative;
	margin: auto;
}

.mp-aod-modal-sm {
	max-width: 460px;
	text-align: center;
}

@media (max-width: 560px) {
	/*
	 * Stay a floating card on mobile, not a full-screen takeover.
	 *
	 * The overlay keeps its dim backdrop and centres the card with a little
	 * breathing room; the card keeps its rounded corners and only grows as tall
	 * as its content. align-items:center + a max-height with internal scroll
	 * means a long step-2 form scrolls INSIDE the card rather than turning the
	 * whole screen into a page.
	 */
	.mp-aod-overlay {
		padding: 16px;
		padding-top: var(--mp-aod-header-h, 80px);
		align-items: center;
	}

	.mp-aod-modal {
		border-radius: var(--mp-r-lg);
		min-height: 0;
		max-height: calc(100vh - 32px);
		overflow-y: auto;
		padding: 24px 20px;
	}
}

.mp-aod-close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--mp-wash);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--mp-berry);
}

.mp-aod-modal h3 {
	font-size: 1.3rem;
	margin: 0 0 6px;
	color: #000;
}

.mp-aod-sub {
	font-size: .9rem;
	color: var(--mp-muted);
	margin: 0 0 22px;
	line-height: 1.6;
}

.mp-aod-tick {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--mp-wash);
	color: var(--mp-berry);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

.mp-aod-modal-sm .mp-aod-btn {
	margin-top: 20px;
}

/* Scroll lock. overflow:hidden on body breaks position:sticky in the theme,
   so the scroll position is preserved with position:fixed instead — which is
   also the only thing iOS Safari respects. */
body.mp-aod-locked {
	position: fixed;
	width: 100%;
	overflow-y: scroll;
}

@media (prefers-reduced-motion: reduce) {
	.mp-aod * {
		transition: none !important;
	}
}

/* Did-you-mean for mistyped email domains. A suggestion, never a block. */
.mp-aod-typo {
	font-size: .82rem;
	color: var(--mp-muted);
	margin: 8px 0 0;
}

.mp-aod-typo-fix {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-weight: 700;
	color: var(--mp-berry);
	text-decoration: none;
	cursor: pointer;
	transition: color .15s ease;
}

.mp-aod-typo-fix:hover {
	color: var(--mp-berry-hover);
}

.mp-aod-typo-fix:hover {
	text-decoration: none;
}

.mp-aod-already {
	font-size: .98rem;          /* bigger, as asked */
	color: var(--mp-muted);
	margin: 22px 0 0;           /* it now sits below the Continue button */
	text-align: center;
}

.mp-aod-already-lead {
	color: #000;                /* the intro text in black */
	font-weight: 600;
}

.mp-aod-already a {
	color: var(--mp-berry);
	font-weight: 700;
	margin-left: 4px;
}


/* ---------------------------------------------------------------
 * Desktop type scale.
 *
 * All sizes above are in rem and tuned for mobile. On wider screens there is
 * room to breathe, so nudge the key roles up ~10-12%. Everything below 768px
 * is left exactly as it was — this block only adds size where there is space.
 * ------------------------------------------------------------ */
@media (min-width: 768px) {
	.mp-aod .mp-aod-field > label,
	.mp-aod .mp-aod-group > label,
	.mp-aod .mp-aod-group > legend {
		font-size: 1.2rem;   /* questions, bumped */
	}

	.mp-aod input,
	.mp-aod textarea,
	.mp-aod select {
		font-size: 1.05rem;   /* was ~.98 / 16px */
	}

	.mp-aod-chip label {
		font-size: .98rem;    /* was .86 */
	}

	.mp-aod-hint {
		font-size: .9rem;     /* was .8 */
	}

	.mp-aod-urgent {
		font-size: .92rem;    /* was .84 */
	}

	.mp-aod-consent span {
		font-size: .92rem;    /* consent text a touch larger for readability */
	}

	.mp-aod-modal h3 {
		font-size: 1.5rem;    /* was 1.3 */
	}

	.mp-aod-sub {
		font-size: 1rem;      /* step-2 subtext, was .92 */
	}

	.mp-aod-btn {
		font-size: 1.02rem;   /* buttons a touch larger on desktop */
	}
}

/* "Read your answer" in the success view: colour-only hover, walking arrow. */
.mp-aod-done-link {
	color: var(--mp-berry);
	font-weight: 700;
	text-decoration: none !important;
	transition: color .15s ease;
}

.mp-aod-done-link:hover {
	color: var(--mp-berry-hover);
	text-decoration: none !important;
}

.mp-aod-done-link .mp-aod-arr {
	display: inline-block;
	transition: transform .18s ease;
}

.mp-aod-done-link:hover .mp-aod-arr {
	transform: translateX(3px);
}