/**
 * Dr Peptide intake quiz — SPA styles.
 *
 * Brand tokens (matches dr-peptide-global.css design system):
 *   --dp-teal-500   : #0D9488   primary
 *   --dp-gold-500   : #C9993D   accent
 *   --dp-dark-500   : #0A1628   text
 *   Headings: Playfair Display ; Body: DM Sans
 *
 * Loaded by DP_Plugin::enqueue_front when [dp_intake_quiz] is detected on
 * the page. All selectors are scoped under .dp-intake-quiz / .dp-quiz-*
 * to avoid collisions with theme styles.
 */

/* ---------- Hide v0.5 sticky bar + drawer on quiz pages ----------
 * The Health-Plan sticky bar + slide-out drawer compete with the quiz CTAs
 * and confuse the patient mid-flow. Hidden site-wide on /your-path/, /intake/,
 * and any page containing [dp_intake_quiz] or [dp_protocol_picker].
 * (body.dp-quiz-page is added by DP_Plugin::add_quiz_body_class.)
 */
body.dp-quiz-page #dp-sticky-bar,
body.dp-quiz-page #dp-plan-drawer,
body.dp-quiz-page .dp-sticky-bar,
body.dp-quiz-page .dp-drawer,
body.dp-quiz-page .dp-drawer-cta,
body.dp-quiz-page .dp-sticky-cta {
	display: none !important;
}

/* ---------- Quiz scope ---------- */

.dp-intake-quiz {
	--dp-teal: #0D9488;
	--dp-teal-dark: #0a7a70;
	--dp-gold: #C9993D;
	--dp-dark: #0A1628;
	--dp-cream: #f6f3ec;
	--dp-border: #d8d3c7;
	--dp-fineprint: #6b7480;

	max-width: 640px;
	margin: 0 auto;
	padding: 24px 16px 48px;
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	color: var(--dp-dark);
	font-size: 16px;
	line-height: 1.55;
	min-height: 60vh;
}

.dp-intake-quiz * {
	box-sizing: border-box;
}

/* Defensive button reset — Hello Elementor / hello-biz aggressively styles
 * <button> with black backgrounds + white text. We need to override that
 * everywhere inside the quiz scope. !important is unfortunately required —
 * theme rules beat us on specificity grounds otherwise. */
.dp-intake-quiz button,
.dp-picker button,
body.dp-quiz-page .dp-intake-quiz button,
body.dp-quiz-page .dp-picker button {
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	border-radius: 6px !important;
	box-shadow: none !important;
}

.dp-intake-quiz .dp-h1 {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 600;
	font-size: 30px;
	line-height: 1.18;
	margin: 12px 0 16px;
	color: var(--dp-dark);
}

.dp-intake-quiz .dp-lead {
	font-size: 17px;
	line-height: 1.55;
	margin: 0 0 24px;
	color: #2b3741;
}

.dp-intake-quiz p {
	margin: 0 0 16px;
}

/* ---- Progress bar ---- */
.dp-quiz-progress {
	height: 4px;
	background: #e9e4d6;
	border-radius: 2px;
	margin: 0 0 28px;
	overflow: hidden;
}
.dp-quiz-progress-fill {
	height: 100%;
	background: var(--dp-teal);
	transition: width 240ms ease-out;
}

/* ---- Step container ---- */
.dp-quiz-step {
	animation: dp-quiz-fade-in 200ms ease-out;
}
@keyframes dp-quiz-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---- Helper text ---- */
.dp-quiz-helper {
	color: var(--dp-fineprint);
	font-size: 14px;
	margin: -12px 0 16px;
}

/* ---- Statement preview list ---- */
.dp-quiz-preview-steps {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	counter-reset: step;
}
.dp-quiz-preview-steps li {
	counter-increment: step;
	padding: 10px 14px 10px 44px;
	position: relative;
	background: var(--dp-cream);
	border-radius: 6px;
	margin-bottom: 8px;
	font-weight: 500;
}
.dp-quiz-preview-steps li::before {
	content: counter(step);
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	background: var(--dp-teal);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
}

/* ---- Single + multi options ---- */
.dp-quiz-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 24px;
}
.dp-quiz-options-multi {
	gap: 8px;
}
.dp-intake-quiz .dp-quiz-option {
	display: block !important;
	width: 100% !important;
	text-align: left !important;
	padding: 16px 18px !important;
	margin: 0 !important;
	border: 1px solid var(--dp-border) !important;
	background: #fff !important;
	background-color: #fff !important;
	border-radius: 8px !important;
	font: inherit !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	color: var(--dp-dark) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer !important;
	transition: border-color 120ms, background 120ms, transform 60ms !important;
	box-shadow: none !important;
	min-height: 0 !important;
	line-height: 1.4 !important;
}
.dp-intake-quiz .dp-quiz-option:hover,
.dp-intake-quiz .dp-quiz-option:focus-visible {
	border-color: var(--dp-teal) !important;
	background: #fff !important;
	background-color: #fff !important;
	color: var(--dp-dark) !important;
	outline: none !important;
}
.dp-intake-quiz .dp-quiz-option:active {
	transform: scale(0.99);
}
.dp-intake-quiz .dp-quiz-option[aria-checked="true"],
.dp-intake-quiz .dp-quiz-option.is-checked {
	border-color: var(--dp-teal) !important;
	background: rgba(13, 148, 136, 0.06) !important;
	background-color: rgba(13, 148, 136, 0.06) !important;
	color: var(--dp-dark) !important;
	box-shadow: inset 0 0 0 1px var(--dp-teal) !important;
}
.dp-quiz-option-multi::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid var(--dp-border);
	border-radius: 4px;
	vertical-align: middle;
	margin-right: 12px;
	transition: background 120ms, border-color 120ms;
}
.dp-quiz-option-multi.is-checked::before {
	background: var(--dp-teal) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'><path d='M6.5 11.5l-3-3 1.4-1.4 1.6 1.6 4.6-4.6 1.4 1.4z'/></svg>") center/12px no-repeat;
	border-color: var(--dp-teal);
}

/* ---- Inputs ---- */
.dp-intake-quiz .dp-field {
	display: block;
	margin: 0 0 16px;
}
.dp-intake-quiz .dp-field > span {
	display: block;
	font-weight: 500;
	margin-bottom: 6px;
	color: var(--dp-dark);
}
.dp-intake-quiz input[type="text"],
.dp-intake-quiz input[type="email"],
.dp-intake-quiz input[type="number"],
.dp-intake-quiz input[type="tel"],
.dp-intake-quiz input[type="date"],
.dp-intake-quiz textarea,
.dp-quiz-input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--dp-border);
	border-radius: 6px;
	font: inherit;
	font-size: 16px;   /* >=16px on iOS to prevent autozoom */
	color: var(--dp-dark);
	background: #fff;
	transition: border-color 120ms, box-shadow 120ms;
}
.dp-intake-quiz input:focus,
.dp-intake-quiz textarea:focus {
	outline: none;
	border-color: var(--dp-teal);
	box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.18);
}
.dp-intake-quiz textarea {
	resize: vertical;
	min-height: 96px;
}
.dp-quiz-skip-link {
	background: none;
	border: 0;
	color: var(--dp-fineprint);
	font: inherit;
	font-size: 13px;
	padding: 4px 0;
	cursor: pointer;
	text-decoration: underline;
	margin-top: 4px;
}

/* ---- Why-ask toggle ---- */
.dp-quiz-why-ask {
	margin: 12px 0 24px;
}
.dp-quiz-why-ask-toggle {
	background: none;
	border: 0;
	color: var(--dp-teal);
	font: inherit;
	font-size: 14px;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
}
.dp-quiz-why-ask-toggle::before {
	content: 'ⓘ ';
	text-decoration: none;
}
.dp-quiz-why-ask-body {
	margin-top: 8px;
	padding: 10px 12px;
	background: var(--dp-cream);
	border-radius: 4px;
	font-size: 14px;
	color: var(--dp-dark);
	line-height: 1.5;
}
.dp-quiz-why-ask-body[hidden] {
	display: none;
}

/* ---- Followup textarea (yesno_with_followup) ---- */
.dp-quiz-followup {
	margin-top: 12px;
}

/* ---- Actions / buttons ---- */
.dp-quiz-actions {
	margin: 24px 0 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.dp-intake-quiz .dp-btn {
	display: inline-block !important;
	padding: 14px 22px !important;
	border: 0 !important;
	border-radius: 6px !important;
	font: inherit !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	transition: background 120ms, transform 60ms, box-shadow 120ms !important;
	line-height: 1.2 !important;
	min-height: 0 !important;
}
.dp-intake-quiz .dp-btn:active {
	transform: scale(0.99);
}
.dp-intake-quiz .dp-btn-primary {
	background: var(--dp-teal) !important;
	background-color: var(--dp-teal) !important;
	color: #fff !important;
}
.dp-intake-quiz .dp-btn-primary:hover,
.dp-intake-quiz .dp-btn-primary:focus-visible {
	background: var(--dp-teal-dark) !important;
	background-color: var(--dp-teal-dark) !important;
	color: #fff !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.22) !important;
}
.dp-intake-quiz .dp-btn-secondary {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--dp-dark) !important;
	border: 1px solid var(--dp-border) !important;
}
.dp-intake-quiz .dp-btn-secondary:hover,
.dp-intake-quiz .dp-btn-secondary:focus-visible {
	border-color: var(--dp-dark) !important;
	background: transparent !important;
	color: var(--dp-dark) !important;
	outline: none !important;
}
.dp-intake-quiz .dp-btn[disabled] {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
}
.dp-intake-quiz .dp-btn-back {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--dp-fineprint) !important;
	border: 0 !important;
	padding: 14px 0 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	text-align: left !important;
	cursor: pointer !important;
	align-self: flex-start !important;
	box-shadow: none !important;
}
.dp-intake-quiz .dp-btn-back:hover,
.dp-intake-quiz .dp-btn-back:focus-visible {
	background: transparent !important;
	color: var(--dp-dark) !important;
	text-decoration: underline !important;
	outline: none !important;
}
.dp-intake-quiz [aria-invalid="true"] {
	border-color: #c62828 !important;
	box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.18) !important;
}

/* ---- Consent ---- */
.dp-quiz-consent-docs {
	list-style: disc inside;
	padding: 0;
	margin: 0 0 16px;
	color: var(--dp-fineprint);
	font-size: 14px;
}
.dp-quiz-consent-docs a {
	color: var(--dp-teal);
}
.dp-quiz-fineprint {
	font-size: 13px;
	color: var(--dp-fineprint);
	margin-top: 16px;
}

/* ---- Email capture ---- */
.dp-quiz-email-capture {
	margin-top: 20px;
	padding: 16px;
	background: var(--dp-cream);
	border-radius: 6px;
}
.dp-quiz-email-capture p {
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--dp-dark);
}
.dp-quiz-email-capture input {
	margin-bottom: 8px;
}

/* ---- End-state ---- */
.dp-quiz-end-state {
	max-width: 560px;
	margin: 32px auto;
	padding: 0 16px;
	text-align: left;
}
.dp-quiz-end-state .dp-h1 {
	color: var(--dp-dark);
}

/* ---- Error ---- */
.dp-quiz-error {
	max-width: 560px;
	margin: 32px auto;
	padding: 24px;
	background: #fff5f5;
	border-left: 4px solid #c62828;
	border-radius: 4px;
}
.dp-quiz-error .dp-h1 {
	font-size: 22px;
	color: #c62828;
}

/* ---- Mobile tweaks ---- */
@media (max-width: 480px) {
	.dp-intake-quiz {
		padding: 16px 14px 40px;
	}
	.dp-intake-quiz .dp-h1 {
		font-size: 24px;
	}
	.dp-intake-quiz .dp-lead {
		font-size: 16px;
	}
	.dp-quiz-option {
		padding: 14px 16px;
		font-size: 15px;
	}
}

/* ====================================================================== *
 * v0.7 — Upload-script flow styles
 *
 * The /upload-script/ renderers (DP_Funnel::render_email_capture,
 * render_details_capture, render_link_sent, render_customer_upload_form)
 * wrap in `<div class="dp-funnel dp-intake-quiz dp-upload-flow">`. Most styles
 * cascade from the .dp-intake-quiz scope above. These rules cover the
 * upload-flow-specific elements: section headings, fieldsets, helper text,
 * signed-in toast, product picker.
 * ====================================================================== */

.dp-intake-quiz .dp-h2 {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 600;
	font-size: 20px;
	margin: 28px 0 12px;
	color: var(--dp-dark);
}

.dp-intake-quiz .dp-fieldset {
	border: 1px solid var(--dp-border);
	border-radius: 8px;
	padding: 16px;
	margin: 0 0 16px;
}
.dp-intake-quiz .dp-fieldset legend {
	font-weight: 600;
	padding: 0 8px;
	font-size: 14px;
	color: var(--dp-dark);
}

.dp-intake-quiz .dp-field-helper {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var(--dp-fineprint);
	line-height: 1.45;
}

.dp-intake-quiz .dp-funnel-toast {
	background: rgba(13, 148, 136, 0.08);
	border-left: 3px solid var(--dp-teal);
	padding: 10px 14px;
	border-radius: 4px;
	font-size: 14px;
	color: var(--dp-dark);
	margin: 0 0 16px;
}

.dp-intake-quiz .dp-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
@media (max-width: 480px) {
	.dp-intake-quiz .dp-grid-2 {
		grid-template-columns: 1fr;
	}
}

.dp-intake-quiz .dp-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 16px 0;
	padding: 10px;
	background: var(--dp-cream);
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.5;
	cursor: pointer;
}
.dp-intake-quiz .dp-check input[type="checkbox"] {
	margin-top: 2px;
	flex-shrink: 0;
}

.dp-intake-quiz .dp-fineprint {
	font-size: 13px;
	color: var(--dp-fineprint);
	line-height: 1.45;
	margin: 8px 0 0;
}

/* ---- Product picker (DP_Product_Picker output) ---- */
.dp-intake-quiz .dp-product-picker {
	margin: 8px 0 24px;
	padding: 16px;
	background: var(--dp-cream);
	border-radius: 8px;
}
.dp-intake-quiz .dp-product-search {
	width: 100%;
	margin-bottom: 12px;
}
.dp-intake-quiz .dp-product-groups {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.dp-intake-quiz .dp-product-group {
	border: 1px solid var(--dp-border);
	border-radius: 6px;
	padding: 12px 14px;
	margin: 0;
	background: #fff;
}
.dp-intake-quiz .dp-product-group legend {
	font-weight: 600;
	font-size: 14px;
	color: var(--dp-teal);
	padding: 0 6px;
}
.dp-intake-quiz .dp-product-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.dp-intake-quiz .dp-product-item {
	padding: 6px 0;
	border-bottom: 1px solid #eee5d3;
}
.dp-intake-quiz .dp-product-item:last-child { border-bottom: 0; }
.dp-intake-quiz .dp-product-item .dp-check {
	background: transparent;
	margin: 0;
	padding: 6px 0;
}
.dp-intake-quiz .dp-product-name {
	display: block;
	font-weight: 500;
}
.dp-intake-quiz .dp-product-meta {
	display: block;
	color: var(--dp-fineprint);
	font-size: 12px;
	margin-top: 2px;
}
.dp-intake-quiz .dp-product-empty-state {
	margin-top: 12px;
	font-size: 14px;
	color: var(--dp-fineprint);
	font-style: italic;
}

/* ====================================================================== *
 * v0.7.8 — /my-plan/ order cards + billing mode picker
 * ====================================================================== */

.dp-intake-quiz .dp-order-card {
	background: #fff;
	border: 1px solid var(--dp-border);
	border-radius: 8px;
	padding: 18px;
	margin-bottom: 18px;
}
.dp-intake-quiz .dp-order-card-head {
	font-size: 13px;
	color: var(--dp-fineprint);
	margin-bottom: 12px;
}
.dp-intake-quiz .dp-order-card-head strong {
	color: var(--dp-dark);
	font-weight: 600;
}
.dp-intake-quiz .dp-order-card .dp-order-status {
	color: var(--dp-teal);
	font-weight: 500;
}
.dp-intake-quiz .dp-order-items {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}
.dp-intake-quiz .dp-order-items li {
	padding: 8px 0;
	border-bottom: 1px solid #eee5d3;
	font-size: 14px;
}
.dp-intake-quiz .dp-order-items li:last-child { border-bottom: 0; }
.dp-intake-quiz .dp-order-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	margin-bottom: 16px;
	border-top: 2px solid var(--dp-dark);
	font-size: 15px;
}
.dp-intake-quiz .dp-order-total strong {
	font-size: 18px;
	color: var(--dp-dark);
}
.dp-intake-quiz .dp-order-history {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}
.dp-intake-quiz .dp-order-history li {
	padding: 10px 0;
	border-bottom: 1px solid #eee5d3;
	font-size: 14px;
	color: var(--dp-fineprint);
}
.dp-intake-quiz .dp-order-history li:last-child { border-bottom: 0; }
.dp-intake-quiz .dp-order-history a {
	color: var(--dp-teal);
	font-weight: 500;
}

/* Billing mode card-radio (once-off vs monthly refill) */
.dp-intake-quiz .dp-billing-mode {
	border: 0;
	margin: 0 0 16px;
	padding: 0;
}
.dp-intake-quiz .dp-billing-mode legend {
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 8px;
	color: var(--dp-dark);
}
.dp-intake-quiz .dp-card-radio {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px;
	border: 1px solid var(--dp-border);
	border-radius: 6px;
	margin-bottom: 8px;
	cursor: pointer;
	background: #fff;
	transition: border-color 120ms, background 120ms;
}
.dp-intake-quiz .dp-card-radio:hover {
	border-color: var(--dp-teal);
}
.dp-intake-quiz .dp-card-radio input[type="radio"] {
	margin-top: 4px;
	flex-shrink: 0;
}
.dp-intake-quiz .dp-card-radio input[type="radio"]:checked ~ div {
	color: var(--dp-dark);
}
.dp-intake-quiz .dp-card-radio:has(input:checked) {
	border-color: var(--dp-teal);
	background: rgba(13, 148, 136, 0.05);
	box-shadow: inset 0 0 0 1px var(--dp-teal);
}
.dp-intake-quiz .dp-card-radio div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.dp-intake-quiz .dp-card-radio strong {
	font-weight: 600;
	font-size: 15px;
}
.dp-intake-quiz .dp-card-radio span {
	font-size: 13px;
	color: var(--dp-fineprint);
	line-height: 1.45;
}

/* ---- Protocol picker (companion shortcode at /your-path/) ---- */
.dp-picker {
	max-width: 720px;
	margin: 0 auto;
	padding: 24px 16px 48px;
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	color: var(--dp-dark, #0A1628);
}
.dp-picker .dp-picker-intro {
	text-align: center;
	margin-bottom: 32px;
}
.dp-picker .dp-h1 {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 600;
	font-size: 32px;
	margin: 0 0 12px;
}
.dp-picker .dp-lead {
	color: #4a5660;
	font-size: 17px;
	margin: 0 auto;
	max-width: 560px;
}
.dp-picker-tiles {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-bottom: 24px;
}
@media (min-width: 720px) {
	.dp-picker-tiles[data-tile-count="2"] {
		grid-template-columns: 1fr 1fr;
	}
}
.dp-picker .dp-picker-tile {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	padding: 28px 24px !important;
	border: 1px solid #d8d3c7 !important;
	border-radius: 10px !important;
	background: #fff !important;
	background-color: #fff !important;
	color: #0A1628 !important;
	text-decoration: none !important;
	transition: border-color 120ms, transform 120ms, box-shadow 120ms !important;
	box-shadow: none !important;
}
.dp-picker .dp-picker-tile:hover,
.dp-picker .dp-picker-tile:focus-visible {
	border-color: #0D9488 !important;
	background: #fff !important;
	background-color: #fff !important;
	color: #0A1628 !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(10, 22, 40, 0.06) !important;
	outline: none !important;
}
.dp-picker-tile.is-primary {
	border-top: 4px solid #C9993D;
	padding-top: 24px;
}
.dp-picker-tile-label {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 22px;
	font-weight: 600;
}
.dp-picker-tile-blurb {
	color: #4a5660;
	font-size: 15px;
	line-height: 1.5;
	flex-grow: 1;
}
.dp-picker-tile-cta {
	color: #0D9488;
	font-weight: 600;
	font-size: 15px;
	margin-top: 8px;
}
.dp-picker-tile-icon {
	width: 32px;
	height: 32px;
	background: #f6f3ec;
	border-radius: 50%;
	display: inline-block;
}
.dp-picker-fineprint {
	margin-top: 32px;
	padding: 16px 20px;
	background: #f6f3ec;
	border-left: 4px solid #C9993D;
	border-radius: 4px;
	color: #4a5660;
	font-size: 14px;
	line-height: 1.5;
}