/* MHN Quiz Drawer — everything is scoped under #mhnqd-root so theme styles don't leak in or out. */

#mhnqd-root {
	--mhnqd-magenta: #C115EC;
	--mhnqd-blue: #000DFF;
	--mhnqd-ink: #14082b;
	--mhnqd-grey: #5c5670;
	--mhnqd-line: #E7E0F2;
	--mhnqd-soft: #F7F3FB;
	--mhnqd-lav: #FBEDFF;
	--mhnqd-good: #16A34A;
	--mhnqd-bad: #DC2626;
	--mhnqd-grad: linear-gradient(135deg, var(--mhnqd-magenta), var(--mhnqd-blue));
	--mhnqd-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mhnqd-head: "Outfit", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-family: var(--mhnqd-font);
	color: var(--mhnqd-ink);
	line-height: 1.5;
}
#mhnqd-root *, #mhnqd-root *::before, #mhnqd-root *::after { box-sizing: border-box; }
#mhnqd-root [hidden] { display: none !important; }

/* Shared button reset (themes love to style every <button>). */
#mhnqd-root button {
	font-family: inherit;
	font-size: inherit;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	margin: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	box-shadow: none;
	min-height: 0;
	width: auto;
}
#mhnqd-root button:focus-visible,
#mhnqd-root a:focus-visible,
#mhnqd-root [tabindex]:focus-visible {
	outline: 3px solid var(--mhnqd-magenta);
	outline-offset: 3px;
}

/* ---------- side tab ---------- */
#mhnqd-root .mhnqd-tab {
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 99990;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 14px 9px 16px;
	background: var(--mhnqd-grad);
	color: #fff;
	border-radius: 16px 0 0 16px;
	box-shadow: -4px 6px 24px rgba(40, 10, 90, .28);
	transition: padding .2s ease, box-shadow .2s ease;
}
#mhnqd-root .mhnqd-tab:hover { padding-right: 14px; box-shadow: -6px 8px 30px rgba(40, 10, 90, .38); }
#mhnqd-root .mhnqd-tab-label {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--mhnqd-head);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .04em;
	white-space: nowrap;
}
#mhnqd-root .mhnqd-eyes { display: block; line-height: 0; }
#mhnqd-root .mhnqd-eyes svg { display: block; width: 36px; height: auto; overflow: visible; }
#mhnqd-root .mhnqd-eye { transform-box: fill-box; transform-origin: center; animation: mhnqd-blink 6s infinite; }
#mhnqd-root .mhnqd-eye + .mhnqd-eye { animation-delay: .02s; }
@keyframes mhnqd-blink {
	0%, 94%, 100% { transform: scaleY(1); }
	96% { transform: scaleY(.1); }
}

#mhnqd-root.mhnqd-side-left .mhnqd-tab { right: auto; left: 0; border-radius: 0 16px 16px 0; box-shadow: 4px 6px 24px rgba(40, 10, 90, .28); }
#mhnqd-root.mhnqd-side-left .mhnqd-tab:hover { padding-right: 9px; padding-left: 14px; }

/* ---------- teaser bubble ---------- */
#mhnqd-root .mhnqd-teaser {
	position: fixed;
	top: 50%;
	right: 74px;
	transform: translateY(-50%);
	z-index: 99991;
	display: flex;
	align-items: flex-start;
	gap: 4px;
	max-width: 260px;
	padding: 12px 10px 12px 16px;
	background: #fff;
	color: var(--mhnqd-ink);
	border: 1px solid var(--mhnqd-line);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(40, 10, 90, .18);
	animation: mhnqd-pop .35s cubic-bezier(.2, 1.4, .4, 1) both;
}
#mhnqd-root .mhnqd-teaser::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -7px;
	width: 14px;
	height: 14px;
	background: #fff;
	border-right: 1px solid var(--mhnqd-line);
	border-top: 1px solid var(--mhnqd-line);
	transform: translateY(-50%) rotate(45deg);
}
#mhnqd-root.mhnqd-side-left .mhnqd-teaser { right: auto; left: 74px; }
#mhnqd-root.mhnqd-side-left .mhnqd-teaser::after { right: auto; left: -7px; transform: translateY(-50%) rotate(-135deg); }
#mhnqd-root .mhnqd-teaser-text {
	text-align: left;
	font-family: var(--mhnqd-head);
	font-weight: 700;
	font-size: 15px;
	color: var(--mhnqd-ink);
}
#mhnqd-root .mhnqd-teaser-text.mhnqd-swap { animation: mhnqd-fade .4s ease both; }
#mhnqd-root .mhnqd-teaser-close {
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-size: 18px;
	color: var(--mhnqd-grey);
}
#mhnqd-root .mhnqd-teaser-close:hover { background: var(--mhnqd-soft); }
@keyframes mhnqd-pop { from { opacity: 0; transform: translateY(-50%) scale(.85); } to { opacity: 1; transform: translateY(-50%) scale(1); } }
@keyframes mhnqd-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- drawer ---------- */
#mhnqd-root .mhnqd-backdrop {
	position: fixed;
	inset: 0;
	z-index: 99995;
	background: rgba(11, 3, 34, .45);
	opacity: 0;
	transition: opacity .25s ease;
}
#mhnqd-root .mhnqd-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 99996;
	width: min(460px, 100vw);
	display: flex;
	flex-direction: column;
	background: #fff;
	color: var(--mhnqd-ink);
	box-shadow: -10px 0 40px rgba(11, 3, 34, .25);
	border-radius: 16px 0 0 16px;
	transform: translateX(104%);
	transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
#mhnqd-root.mhnqd-side-left .mhnqd-drawer { right: auto; left: 0; border-radius: 0 16px 16px 0; transform: translateX(-104%); }
#mhnqd-root.mhnqd-open .mhnqd-drawer { transform: none; }
#mhnqd-root.mhnqd-open .mhnqd-backdrop { opacity: 1; }
html.mhnqd-lock, html.mhnqd-lock body { overflow: hidden; }

#mhnqd-root .mhnqd-head {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 16px 14px 22px;
	border-bottom: 1px solid var(--mhnqd-line);
	flex-wrap: wrap;
}
#mhnqd-root .mhnqd-title {
	flex: 1 1 auto;
	order: 1;
	margin: 0;
	padding: 0;
	font-family: var(--mhnqd-head);
	font-size: 22px;
	line-height: 1.25;
	font-weight: 800;
	color: var(--mhnqd-ink);
	outline: none;
}
#mhnqd-root .mhnqd-back {
	order: 0;
	flex: 1 0 100%;
	text-align: left;
	font-size: 14px;
	font-weight: 700;
	color: var(--mhnqd-magenta);
}
#mhnqd-root .mhnqd-close {
	order: 2;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	font-size: 26px;
	line-height: 1;
	color: var(--mhnqd-grey);
	background: var(--mhnqd-soft);
}
#mhnqd-root .mhnqd-close:hover { background: var(--mhnqd-lav); color: var(--mhnqd-ink); }
#mhnqd-root .mhnqd-body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 20px 22px 28px;
	font-size: 15px;
}
#mhnqd-root .mhnqd-body p { margin: 0 0 12px; color: var(--mhnqd-grey); }

/* home cards */
#mhnqd-root .mhnqd-card {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	width: 100%;
	margin: 0 0 14px;
	padding: 18px;
	text-align: left;
	background: var(--mhnqd-soft);
	border: 1px solid transparent;
	border-radius: 16px;
	transition: border-color .15s ease, transform .15s ease;
}
#mhnqd-root .mhnqd-card:hover { border-color: var(--mhnqd-magenta); transform: translateY(-2px); }
#mhnqd-root .mhnqd-card-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--mhnqd-grad);
	font-size: 24px;
}
#mhnqd-root .mhnqd-card strong { display: block; font-family: var(--mhnqd-head); font-size: 18px; color: var(--mhnqd-ink); }
#mhnqd-root .mhnqd-card span.mhnqd-card-desc { display: block; margin-top: 2px; color: var(--mhnqd-grey); font-size: 14px; }
#mhnqd-root .mhnqd-card span.mhnqd-card-meta { display: block; margin-top: 8px; color: var(--mhnqd-magenta); font-size: 13px; font-weight: 700; }

/* progress */
#mhnqd-root .mhnqd-progress { margin: 0 0 16px; }
#mhnqd-root .mhnqd-progress-label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--mhnqd-grey); margin-bottom: 6px; }
#mhnqd-root .mhnqd-progress-bar { height: 6px; border-radius: 6px; background: var(--mhnqd-line); overflow: hidden; }
#mhnqd-root .mhnqd-progress-bar span { display: block; height: 100%; background: var(--mhnqd-grad); border-radius: 6px; transition: width .3s ease; }

/* mock email / sms */
#mhnqd-root .mhnqd-mail {
	border: 1px solid var(--mhnqd-line);
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	margin-bottom: 16px;
}
#mhnqd-root .mhnqd-mail-head { padding: 14px 16px; background: var(--mhnqd-soft); border-bottom: 1px solid var(--mhnqd-line); font-size: 14px; }
#mhnqd-root .mhnqd-mail-from { font-weight: 800; color: var(--mhnqd-ink); }
#mhnqd-root .mhnqd-mail-addr { display: inline-block; color: var(--mhnqd-grey); word-break: break-all; border-radius: 4px; }
#mhnqd-root .mhnqd-mail-subject { margin-top: 6px; font-weight: 700; color: var(--mhnqd-ink); border-radius: 4px; }
#mhnqd-root .mhnqd-mail-body { padding: 14px 16px 16px; font-size: 14.5px; color: #2c2640; }
#mhnqd-root .mhnqd-mail-body p { color: #2c2640; margin: 0 0 10px; }
#mhnqd-root .mhnqd-sms { padding: 16px; background: var(--mhnqd-soft); }
#mhnqd-root .mhnqd-sms-from { text-align: center; font-size: 13px; color: var(--mhnqd-grey); margin-bottom: 10px; }
#mhnqd-root .mhnqd-sms-bubble { max-width: 88%; padding: 12px 14px; background: #E5E5EA; color: #111; border-radius: 18px 18px 18px 4px; font-size: 14.5px; }
#mhnqd-root .mhnqd-sms-bubble p { color: #111; margin: 0; }

#mhnqd-root .mhnqd-link {
	position: relative;
	display: inline-block;
	margin-top: 4px;
	color: #1a4fd6;
	text-decoration: underline;
	font-weight: 700;
	cursor: help;
	border-radius: 4px;
}
#mhnqd-root .mhnqd-mail-body .mhnqd-link.mhnqd-btnlink {
	padding: 8px 16px;
	background: #1a4fd6;
	color: #fff;
	text-decoration: none;
	border-radius: 8px;
}
#mhnqd-root .mhnqd-link-real {
	display: none;
	position: absolute;
	left: 0;
	bottom: calc(100% + 8px);
	z-index: 2;
	width: max-content;
	max-width: 290px;
	padding: 8px 10px;
	background: var(--mhnqd-ink);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	word-break: break-all;
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
#mhnqd-root .mhnqd-link-real b { display: block; color: #d9b6ff; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
#mhnqd-root .mhnqd-link:hover .mhnqd-link-real,
#mhnqd-root .mhnqd-link:focus .mhnqd-link-real,
#mhnqd-root .mhnqd-link.mhnqd-show .mhnqd-link-real { display: block; }
#mhnqd-root .mhnqd-hint { font-size: 12.5px; color: var(--mhnqd-grey); margin: -6px 0 14px; }

/* reveal highlights */
#mhnqd-root .mhnqd-revealed .mhnqd-flag,
#mhnqd-root .mhnqd-revealed .mhnqd-flagged {
	background: #FFE1E1;
	box-shadow: 0 0 0 2px #FFE1E1;
	color: #9b1111;
	border-radius: 4px;
}
#mhnqd-root .mhnqd-revealed .mhnqd-link.mhnqd-flagged.mhnqd-btnlink { background: var(--mhnqd-bad); color: #fff; box-shadow: none; }

/* answer buttons */
#mhnqd-root .mhnqd-choices { display: flex; gap: 10px; flex-wrap: wrap; }
#mhnqd-root .mhnqd-choice {
	flex: 1 1 0;
	min-width: 110px;
	padding: 14px 12px;
	border: 2px solid var(--mhnqd-line);
	border-radius: 14px;
	background: #fff;
	color: var(--mhnqd-ink);
	font-family: var(--mhnqd-head);
	font-weight: 700;
	font-size: 16px;
	transition: border-color .15s ease, background .15s ease;
}
#mhnqd-root .mhnqd-choice:hover:not([disabled]) { border-color: var(--mhnqd-magenta); background: var(--mhnqd-lav); }
#mhnqd-root .mhnqd-choice[disabled] { cursor: default; opacity: .55; }
#mhnqd-root .mhnqd-choice.mhnqd-picked { opacity: 1; border-color: var(--mhnqd-ink); }

#mhnqd-root .mhnqd-verdict { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--mhnqd-soft); }
#mhnqd-root .mhnqd-verdict.mhnqd-right { background: #E7F7EC; }
#mhnqd-root .mhnqd-verdict.mhnqd-wrong { background: #FDECEC; }
#mhnqd-root .mhnqd-verdict h3 { margin: 0 0 8px; font-family: var(--mhnqd-head); font-size: 18px; color: var(--mhnqd-ink); }
#mhnqd-root .mhnqd-verdict ul { margin: 0; padding-left: 18px; }
#mhnqd-root .mhnqd-verdict li { margin: 0 0 6px; color: #2c2640; font-size: 14px; }

#mhnqd-root .mhnqd-q-cat { font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--mhnqd-magenta); margin: 0 0 6px; }
#mhnqd-root .mhnqd-q { font-family: var(--mhnqd-head); font-size: 20px; line-height: 1.35; font-weight: 700; color: var(--mhnqd-ink); margin: 0 0 18px; }
#mhnqd-root .mhnqd-choices-col { flex-direction: column; }
#mhnqd-root .mhnqd-choices-col .mhnqd-choice { flex: none; text-align: left; padding: 14px 16px; }

/* primary actions */
#mhnqd-root .mhnqd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
#mhnqd-root .mhnqd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 13px 22px;
	border-radius: 40px;
	font-family: var(--mhnqd-head);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	background: #fff;
	color: var(--mhnqd-ink);
	border: 2px solid var(--mhnqd-line);
}
#mhnqd-root .mhnqd-btn:hover { border-color: var(--mhnqd-magenta); color: var(--mhnqd-ink); }
#mhnqd-root .mhnqd-btn-primary { background: var(--mhnqd-grad); color: #fff; border-color: transparent; }
#mhnqd-root .mhnqd-btn-primary:hover { color: #fff; filter: brightness(1.08); border-color: transparent; }
#mhnqd-root .mhnqd-btn-block { width: 100%; }

/* results */
#mhnqd-root .mhnqd-result { text-align: center; }
#mhnqd-root .mhnqd-ring { position: relative; width: 150px; height: 150px; margin: 4px auto 12px; }
#mhnqd-root .mhnqd-ring svg { width: 150px; height: 150px; transform: rotate(-90deg); }
#mhnqd-root .mhnqd-ring circle { fill: none; stroke-width: 12; }
#mhnqd-root .mhnqd-ring .mhnqd-ring-bg { stroke: var(--mhnqd-line); }
#mhnqd-root .mhnqd-ring .mhnqd-ring-fg { stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.2, .8, .2, 1); }
#mhnqd-root .mhnqd-ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
#mhnqd-root .mhnqd-ring-label strong { font-family: var(--mhnqd-head); font-size: 44px; line-height: 1; font-weight: 800; }
#mhnqd-root .mhnqd-ring-label span { font-size: 13px; font-weight: 700; color: var(--mhnqd-grey); margin-top: 4px; }
#mhnqd-root .mhnqd-result h3 { margin: 0 0 6px; font-family: var(--mhnqd-head); font-size: 22px; color: var(--mhnqd-ink); }
#mhnqd-root .mhnqd-tips { text-align: left; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: mhnqd; }
#mhnqd-root .mhnqd-tips li { position: relative; padding: 12px 14px 12px 50px; margin: 0 0 10px; background: var(--mhnqd-soft); border-radius: 14px; font-size: 14px; color: #2c2640; counter-increment: mhnqd; }
#mhnqd-root .mhnqd-tips li::before { content: counter(mhnqd); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--mhnqd-grad); color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; }
#mhnqd-root .mhnqd-tips a { color: var(--mhnqd-magenta); font-weight: 700; }
#mhnqd-root .mhnqd-result .mhnqd-actions { justify-content: center; }
#mhnqd-root .mhnqd-share-status { min-height: 20px; margin-top: 10px; font-size: 13px; color: var(--mhnqd-grey); }
#mhnqd-root .mhnqd-share-input { width: 100%; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--mhnqd-line); border-radius: 8px; font-size: 13px; }
#mhnqd-root .mhnqd-big-score { font-family: var(--mhnqd-head); font-size: 56px; font-weight: 800; line-height: 1; background: var(--mhnqd-grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 8px 0 6px; }
#mhnqd-root .mhnqd-emoji { font-size: 44px; line-height: 1; }

/* ---------- phones: bottom sheet + corner pill ---------- */
@media (max-width: 767px) {
	#mhnqd-root .mhnqd-tab,
	#mhnqd-root.mhnqd-side-left .mhnqd-tab {
		top: auto;
		bottom: calc(16px + var(--mhlb-bar-h, 0px) + env(safe-area-inset-bottom, 0px));
		right: 16px;
		left: auto;
		transform: none;
		flex-direction: row;
		gap: 8px;
		padding: 9px 16px 9px 12px;
		border-radius: 40px;
	}
	#mhnqd-root .mhnqd-tab:hover,
	#mhnqd-root.mhnqd-side-left .mhnqd-tab:hover { padding: 9px 16px 9px 12px; }
	#mhnqd-root .mhnqd-tab-label { writing-mode: horizontal-tb; transform: none; font-size: 14px; }
	#mhnqd-root .mhnqd-eyes svg { width: 30px; }

	#mhnqd-root .mhnqd-teaser,
	#mhnqd-root.mhnqd-side-left .mhnqd-teaser {
		top: auto;
		bottom: calc(72px + var(--mhlb-bar-h, 0px) + env(safe-area-inset-bottom, 0px));
		right: 16px;
		left: auto;
		transform: none;
		max-width: min(280px, calc(100vw - 32px));
		animation-name: mhnqd-pop-m;
	}
	#mhnqd-root .mhnqd-teaser::after,
	#mhnqd-root.mhnqd-side-left .mhnqd-teaser::after {
		top: auto;
		bottom: -7px;
		right: 40px;
		left: auto;
		transform: rotate(135deg);
	}

	#mhnqd-root .mhnqd-drawer,
	#mhnqd-root.mhnqd-side-left .mhnqd-drawer {
		top: auto;
		left: 0;
		right: 0;
		width: 100%;
		height: 88vh;
		height: 88dvh;
		border-radius: 20px 20px 0 0;
		transform: translateY(104%);
	}
	#mhnqd-root.mhnqd-open .mhnqd-drawer { transform: none; }
	#mhnqd-root .mhnqd-head::before {
		content: "";
		position: absolute;
		top: 6px;
		left: 50%;
		width: 40px;
		height: 4px;
		margin-left: -20px;
		border-radius: 4px;
		background: var(--mhnqd-line);
	}
	#mhnqd-root .mhnqd-body { padding: 16px 16px 28px; }
	#mhnqd-root .mhnqd-q { font-size: 18px; }
}
@keyframes mhnqd-pop-m { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	#mhnqd-root *, #mhnqd-root *::before, #mhnqd-root *::after {
		animation: none !important;
		transition: none !important;
	}
}

@media print {
	#mhnqd-root { display: none !important; }
}

/* The Explab child theme gives every button:hover a "rise + tilt" transform with !important
   (explab-child/style.css). On the tab that replaced translateY(-50%), so the tab jumped out
   from under the cursor, lost :hover, jumped back, and couldn't be clicked. Pin our own
   transforms/shadows in every state; the ID selector outranks the theme's !important rule. */
#mhnqd-root button:hover,
#mhnqd-root button:focus,
#mhnqd-root button:active { transform: none !important; box-shadow: none !important; }
#mhnqd-root .mhnqd-tab,
#mhnqd-root .mhnqd-tab:hover,
#mhnqd-root .mhnqd-tab:focus,
#mhnqd-root .mhnqd-tab:active { transform: translateY(-50%) !important; transition: padding .2s ease, box-shadow .2s ease !important; }
#mhnqd-root .mhnqd-tab:hover { box-shadow: -6px 8px 30px rgba(40, 10, 90, .38) !important; }
#mhnqd-root .mhnqd-tab:not(:hover) { box-shadow: -4px 6px 24px rgba(40, 10, 90, .28) !important; }
#mhnqd-root.mhnqd-side-left .mhnqd-tab:not(:hover) { box-shadow: 4px 6px 24px rgba(40, 10, 90, .28) !important; }
@media (max-width: 767px) {
	#mhnqd-root .mhnqd-tab,
	#mhnqd-root .mhnqd-tab:hover,
	#mhnqd-root .mhnqd-tab:focus,
	#mhnqd-root .mhnqd-tab:active { transform: none !important; }
}