/* ==========================================================================
   Semen Volume Quiz Popup
   Palette and proportions carried over from the original quiz stylesheet.
   Edit colours here, or override any rule from your theme.
   ========================================================================== */

.sqp-root {
	--sqp-blue: #0063d2;
	--sqp-blue-soft: #add4ff;
	--sqp-red: #ff0000;
	--sqp-panel: #000;
	--sqp-ink: #fff;
	--sqp-muted: #9a9a9a;
	--sqp-inactive: #636363;
	--sqp-radius: 5px;

	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.82);
	color: var(--sqp-ink);
	font-family: inherit;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.sqp-root.is-open {
	display: flex;
}

.sqp-root *,
.sqp-root *::before,
.sqp-root *::after {
	box-sizing: border-box;
}

/* --- Panel ---------------------------------------------------------------- */

.sqp-panel {
	position: relative;
	width: 100%;
	max-width: 900px;
	margin: auto;
	padding: 56px 40px 48px;
	background-color: #000;
	background-image: none;
	border: 0;
	border-radius: 2px;
	text-align: center;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
}

.sqp-close {
	position: absolute;
	top: 14px;
	right: 18px;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--sqp-blue);
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
}

.sqp-close:hover,
.sqp-close:focus-visible {
	color: var(--sqp-blue-soft);
}

.sqp-root :focus-visible {
	outline: 3px solid var(--sqp-blue-soft);
	outline-offset: 3px;
}

/* --- Slides --------------------------------------------------------------- */

.sqp-slide {
	display: none;
}

.sqp-slide.is-active {
	display: block;
	animation: sqp-fade 0.28s ease both;
}

/* The cover is the only slide with the two-glasses photograph behind it.
   "contain" keeps both glasses fully in frame at every width instead of
   cropping them; the panel colour fills whatever the image doesn't cover. */
.sqp-panel.is-cover {
	background-color: #000;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

@keyframes sqp-fade {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/* --- Cover ---------------------------------------------------------------- */

.sqp-eyebrow {
	margin: 0 0 8px;
	color: var(--sqp-red);
	font-size: 22px;
	font-weight: 900;
	line-height: 1.2;
}

.sqp-cover-img {
	display: block;
	max-width: 80%;
	margin: 0 auto 32px;
	height: auto;
}

.sqp-lede {
	max-width: 620px;
	margin: 0 auto 20px;
	font-size: 22px;
	line-height: 1.3;
	color: var(--sqp-ink);
}

.sqp-ready {
	margin: 0 auto 32px;
	font-size: 22px;
	font-weight: 700;
}

.sqp-start {
	display: inline-block;
	padding: 18px 56px;
	background-image: linear-gradient(90deg, #e8467c 0%, #a05ab8 50%, var(--sqp-blue) 100%);
	border: 0;
	border-radius: var(--sqp-radius);
	color: var(--sqp-ink);
	font-size: 28px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: filter 0.2s ease;
}

.sqp-start:hover {
	filter: brightness(1.12);
}

/* --- Questions ------------------------------------------------------------ */

.sqp-question {
	max-width: 720px;
	margin: 0 auto 40px;
	font-size: 32px;
	font-weight: 900;
	line-height: 1.25;
}

.sqp-answers {
	max-width: 560px;
	margin: 0 auto 36px;
	padding: 0;
	list-style: none;
	text-align: left;
}

.sqp-answer {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 8px;
	padding: 12px 10px;
	border-radius: var(--sqp-radius);
	font-size: 19px;
	line-height: 1.35;
	cursor: pointer;
	transition: background 0.18s ease;
}

.sqp-answer:hover {
	background: rgba(255, 255, 255, 0.05);
}

.sqp-answer input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.sqp-indicator {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin-top: 2px;
	background-color: #6f6f6f;
	border: 2px solid #cfcfcf;
	border-radius: 50%;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.sqp-answer:hover .sqp-indicator,
.sqp-answer.is-selected .sqp-indicator {
	background-color: var(--sqp-blue);
	border-color: var(--sqp-blue-soft);
}

/* --- Navigation ----------------------------------------------------------- */

.sqp-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.sqp-prev {
	position: absolute;
	bottom: 26px;
	left: 26px;
	width: 62px;
	min-height: 62px;
	background: none;
	border: 1px solid #4a4a4a;
	border-radius: var(--sqp-radius);
	color: var(--sqp-ink);
	font-size: 22px;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.sqp-prev:hover {
	border-color: var(--sqp-blue);
	color: var(--sqp-blue);
}

.sqp-next {
	min-width: 280px;
	padding: 16px 40px 18px;
	background-color: var(--sqp-inactive);
	border: 0;
	border-radius: var(--sqp-radius);
	color: var(--sqp-ink);
	font-size: 28px;
	line-height: 1;
	cursor: not-allowed;
	transition: background-color 0.2s ease;
}

.sqp-next.is-ready {
	background-color: var(--sqp-blue);
	cursor: pointer;
}

.sqp-next.is-ready:hover {
	background-color: #0052ae;
}

.sqp-progress {
	margin-top: 28px;
	color: var(--sqp-blue);
	font-size: 15px;
	letter-spacing: 1px;
}

/* --- Analysing ------------------------------------------------------------ */

.sqp-loading-headline {
	margin: 40px 0 48px;
	color: #cfcfcf;
	font-size: 40px;
	font-weight: 900;
}

.sqp-spinner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 48px;
}

.sqp-dot {
	width: 16px;
	height: 16px;
	background-color: var(--sqp-blue);
	border-radius: 50%;
	animation: sqp-bounce 1.2s infinite ease-in-out both;
}

.sqp-dot:nth-child(2) {
	animation-delay: -0.6s;
}

@keyframes sqp-bounce {
	0%, 80%, 100% { transform: scale(0.4); opacity: 0.5; }
	40%           { transform: scale(1);   opacity: 1; }
}

/* --- Email gate ----------------------------------------------------------- */

[data-slide="gate"] {
	max-width: 700px;
	margin: 0 auto;
	padding: 40px 34px 36px;
	background: #000;
	border: 2px solid var(--sqp-ink);
	border-radius: 2px;
}

.sqp-gate-headline {
	margin: 0 0 24px;
	font-size: 26px;
	line-height: 1.3;
}

.sqp-gate-sub {
	max-width: 520px;
	margin: 0 auto 28px;
	font-size: 24px;
	line-height: 1.3;
}

.sqp-red {
	color: var(--sqp-white);
	font-weight: 900;
}

.sqp-gate-prompt {
	margin: 0 0 14px;
	font-size: 20px;
}

.sqp-gate-row {
	display: flex;
	gap: 10px;
	max-width: 620px;
	margin: 0 auto;
}

.sqp-email {
	flex: 1 1 auto;
	height: 60px;
	padding: 15px 20px 17px;
	border: 0;
	border-radius: var(--sqp-radius);
	background: #eef2fb;
	color: #111;
	font-size: 20px;
	line-height: 1;
}

.sqp-submit {
	flex: 0 0 auto;
	height: 60px;
	padding: 15px 26px 17px;
	background: var(--sqp-blue);
	border: 0;
	border-radius: var(--sqp-radius);
	color: var(--sqp-ink);
	font-size: 20px;
	letter-spacing: 2px;
	line-height: 1;
	cursor: pointer;
}

.sqp-submit:hover {
	background: #0052ae;
}

.sqp-submit[disabled] {
	background: var(--sqp-inactive);
	cursor: wait;
}

.sqp-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sqp-status-wrap {
	min-height: 62px;
	margin-top: 24px;
}

.sqp-status-dot {
	width: 16px;
	height: 16px;
	margin: 0 auto 12px;
	background: var(--sqp-blue);
	border-radius: 50%;
	opacity: 0;
	animation: sqp-pulse 1.1s infinite ease-in-out;
}

.sqp-status-wrap.is-busy .sqp-status-dot {
	opacity: 1;
}

@keyframes sqp-pulse {
	0%, 100% { transform: scale(0.7); opacity: 0.55; }
	50%      { transform: scale(1);   opacity: 1; }
}

.sqp-status {
	min-height: 22px;
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}

.sqp-status.is-error {
	color: #ff8080;
}

.sqp-consent {
	max-width: 620px;
	margin: 18px auto 0;
	color: var(--sqp-muted);
	font-size: 13px;
	line-height: 1.5;
}

.sqp-consent a {
	color: var(--sqp-muted);
	text-decoration: underline;
}

/* --- Score ---------------------------------------------------------------- */

.sqp-score-headline {
	margin: 0 0 24px;
	font-size: 32px;
	font-weight: 900;
}

.sqp-dial {
	position: relative;
	width: 200px;
	height: 200px;
	margin: 0 auto 12px;
}

.sqp-dial svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.sqp-dial-track {
	fill: none;
	stroke: #2a2a2a;
	stroke-width: 10;
}

.sqp-dial-fill {
	fill: none;
	stroke: var(--sqp-blue);
	stroke-width: 10;
	stroke-linecap: round;
	transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.sqp-dial-value {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sqp-blue);
	font-size: 52px;
	font-weight: 900;
}

.sqp-band {
	margin: 0 0 24px;
	font-size: 26px;
	font-weight: 900;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.sqp-report {
	max-width: 700px;
	margin: 0 auto 32px;
	font-size: 21px;
	line-height: 1.45;
}

.sqp-cta {
	display: inline-block;
	padding: 18px 44px;
	background: var(--sqp-blue);
	border-radius: var(--sqp-radius);
	color: var(--sqp-ink);
	font-size: 24px;
	font-weight: 900;
	text-decoration: none;
}

.sqp-cta:hover {
	background: #0052ae;
	color: var(--sqp-ink);
}

/* --- Shortcode button ----------------------------------------------------- */

.sqp-open-trigger {
	display: inline-block;
	padding: 16px 40px;
	background-image: linear-gradient(90deg, #e8467c 0%, #a05ab8 50%, #0063d2 100%);
	border: 0;
	border-radius: 5px;
	color: #fff;
	font-size: 22px;
	cursor: pointer;
}

/* --- Small screens -------------------------------------------------------- */

@media (max-width: 782px) {
	.sqp-panel { padding: 52px 20px 36px; }
	.sqp-question { font-size: 24px; margin-bottom: 28px; }
	.sqp-answer { font-size: 17px; }
	.sqp-lede, .sqp-gate-sub { font-size: 19px; }
	.sqp-loading-headline { font-size: 28px; }
	.sqp-next { min-width: 0; flex: 1 1 auto; font-size: 22px; }
	.sqp-gate-row { flex-direction: column; }
	.sqp-submit { width: 100%; }
	.sqp-cover-img { max-width: 100%; }
	.sqp-dial { width: 160px; height: 160px; }
	.sqp-dial-value { font-size: 42px; }
	.sqp-prev {	position: static; flex: 0 0 54px; }
}

@media (prefers-reduced-motion: reduce) {
	.sqp-slide.is-active { animation: none; }
	.sqp-dial-fill { transition: none; }
	.sqp-dot { animation-duration: 2.4s; }
	.sqp-dial.is-loading svg { animation: none; }
	.sqp-dial.is-loading .sqp-dial-fill { animation-duration: 4s; }
}

/* --- Confirmation (score revealed by email) ------------------------------- */

[data-slide="confirm"] {
	max-width: 700px;
	margin: 0 auto;
	padding: 44px 34px 40px;
	background: #000;
	border: 2px solid var(--sqp-ink);
	border-radius: 2px;
}

/* Indeterminate state of the score dial: the arc sweeps back and forth and
   the label reads "Loading" rather than resolving to a number. */
.sqp-dial.is-loading {
	margin-bottom: 24px;
}

.sqp-dial.is-loading svg {
	animation: sqp-dial-spin 3.4s linear infinite;
}

.sqp-dial.is-loading .sqp-dial-fill {
	transition: none;
	animation: sqp-dial-sweep 2.2s ease-in-out infinite alternate;
}

@keyframes sqp-dial-sweep {
	from { stroke-dashoffset: 300; }
	to   { stroke-dashoffset: 70; }
}

@keyframes sqp-dial-spin {
	from { transform: rotate(-90deg); }
	to   { transform: rotate(270deg); }
}

.sqp-dial-loading-label {
	font-size: 22px;
	font-weight: 900;
	letter-spacing: 1px;
}

.sqp-ellipsis::after {
	content: '';
	animation: sqp-ellipsis 1.6s steps(1, end) infinite;
}

@keyframes sqp-ellipsis {
	0%   { content: ''; }
	25%  { content: '.'; }
	50%  { content: '..'; }
	75%  { content: '...'; }
	100% { content: ''; }
}

.sqp-confirm-headline {
	margin: 0 0 20px;
	font-size: 32px;
	font-weight: 900;
	line-height: 1.2;
}

.sqp-confirm-message {
	max-width: 560px;
	margin: 0 auto 34px;
	font-size: 22px;
	line-height: 1.45;
}

.sqp-confirm-message strong {
	color: var(--sqp-blue-soft);
	font-weight: 900;
	overflow-wrap: anywhere;
}

a.sqp-ok {
	display: inline-block;
	text-decoration: none;
}
.sqp-root a.sqp-ok,
.sqp-root a.sqp-ok:link,
.sqp-root a.sqp-ok:visited,
.sqp-root a.sqp-ok:hover,
.sqp-root a.sqp-ok:focus,
.sqp-root a.sqp-ok:active {
	color: #fff;
	text-decoration: none;
}

.sqp-ok {
	min-width: 220px;
	padding: 16px 44px 18px;
	background: var(--sqp-blue);
	border: 0;
	border-radius: var(--sqp-radius);
	color: var(--sqp-ink);
	font-size: 24px;
	letter-spacing: 2px;
	line-height: 1;
	cursor: pointer;
}

.sqp-ok:hover {
	background: #0052ae;
	color: var(--sqp-ink);
}

@media (max-width: 782px) {
	[data-slide="confirm"] { padding: 30px 16px 28px; }
	.sqp-confirm-headline { font-size: 23px; }
	.sqp-confirm-message { font-size: 17px; margin-bottom: 26px; }
	.sqp-ok { width: 100%; min-width: 0; font-size: 20px; letter-spacing: 1px; }
}

@media (max-width: 420px) {
	.sqp-confirm-headline { font-size: 20px; }
	.sqp-confirm-message { font-size: 16px; }
	.sqp-ok { font-size: 18px; }
}