/**
 * Single quiz layout — card-style trivia/personality quiz experience.
 * Loaded only on singular snax_quiz pages (see functions.php).
 */

.snax-quiz-single-genre .entry-category {
	background-color: var(--g1-accent-color, #ff303b);
	color: #fff;
}

.snax-quiz-single-intro {
	margin: 0.5em 0 1.5em;
	font-size: 1.15em;
	line-height: 1.5;
	opacity: 0.8;
}

.snax-quiz-single-media {
	border-radius: 12px;
	overflow: hidden;
}

/* Card wrapping the interactive quiz app rendered by Snax into the_content(). */
.snax-quiz-card {
	margin: 1.5em 0 2em;
	padding: 30px;
	border-radius: 16px;
	background-color: var(--g1-bg-color, #fff);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

@media only screen and (max-width: 767px) {
	.snax-quiz-card {
		padding: 18px;
		border-radius: 10px;
	}
}

.snax-quiz-card .quiz {
	margin: 0;
}

/* Start screen */
.snax-quiz-card .snax-quiz-intro-wrapper .snax-quiz-actions {
	margin: 0;
}

.snax-quiz-card .snax-quiz-button-start-quiz,
.snax-quiz-card .snax-quiz-button-restart-quiz {
	padding: 16px 24px;
	border: 0;
	border-radius: 10px;
	font-size: 1.1em;
	font-weight: bold;
	color: #fff;
	cursor: pointer;
	background-image: linear-gradient(to bottom right, #ff303b, #ff9736);
	transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.snax-quiz-card .snax-quiz-button-start-quiz:hover,
.snax-quiz-card .snax-quiz-button-restart-quiz:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(255, 48, 59, 0.35);
}

/* Progress bar */
.snax-quiz-card .snax-quiz-progress-track {
	height: 10px;
	border-radius: 6px;
}

.snax-quiz-card .snax-quiz-progress-bar {
	height: 10px;
	border-radius: 6px;
	background-image: linear-gradient(to right, #ff303b, #ff9736);
}

.snax-quiz-card .snax-quiz-progress-value {
	display: none;
}

/* Question title */
.snax-quiz-card .snax-quiz-question-title {
	font-size: 1.4em;
	margin-bottom: 0.75em;
}

.snax-quiz-card .snax-quiz-question-counter {
	color: var(--g1-accent-color, #ff303b);
}

/* Answers — flat, colorful buttons (no radio/checkbox indicator), matching
   the reference quiz's answer style but in this site's own brand colors.
   Snax's default list (grey background container + 3px item padding to
   fake gaps) reads as one solid block; give each answer its own visible
   border and real spacing instead, so they read as distinct buttons. */
.snax-quiz-card .snax-quiz-answers-items {
	padding: 0;
	background-color: transparent;
}

/* Text answers stack full-width, so only need bottom spacing. Grid (image)
   answers sit side by side and keep the plugin's own left/right/top/bottom
   gutters — overriding those here would collapse the gap between columns. */
.snax-quiz-card .snax-quiz-answers-tpl-text .snax-quiz-answers-item {
	padding: 0 0 10px;
}

.snax-quiz-card .snax-quiz-answers-tpl-text .snax-quiz-answers-item:last-child {
	padding-bottom: 0;
}

/* The plugin's text-answer CSS is built for a seamless list (negative
   margin joining items, square corners except top/bottom item, 1px
   top-border only) — override all of it, matching its own selectors
   (plus our .snax-quiz-card ancestor) so we reliably win regardless of
   stylesheet load order, since equal-specificity ties go to source order. */
.snax-quiz-card .snax-quiz-answers-tpl-text .snax-quiz-answers-item + .snax-quiz-answers-item {
	margin-top: 0;
}

/* Structure only here (width/style/radius/background) — deliberately NOT
   border-color, so the lower-specificity hover/checked/right/wrong rules
   below can still control color without losing a specificity fight against
   the :first-child/:last-child selectors this has to match/beat. */
.snax-quiz-card .snax-quiz-answer,
.snax-quiz-card .snax-quiz-answers-tpl-text .snax-quiz-answer,
.snax-quiz-card .snax-quiz-answers-tpl-text .snax-quiz-answers-item:first-child .snax-quiz-answer,
.snax-quiz-card .snax-quiz-answers-tpl-text .snax-quiz-answers-item:last-child .snax-quiz-answer {
	border-width: 2px;
	border-style: solid;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	background-color: var(--g1-bg-color, #fff);
	transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

/* !important on border-color here and in the state rules below: the
   plugin's :first-child rule resets border-top to "none" (which implicitly
   resets border-top-color to currentColor, i.e. the answer's own black
   text) at higher specificity than a plain color rule can reach — without
   this, the first answer's top border silently turns black instead of
   matching the other three sides, and later ignores hover/selected/right/
   wrong colors too. */
.snax-quiz-card .snax-quiz-answer {
	border-color: var(--g1-border-color, #e6e6e6) !important;
}

/* Hide Snax's built-in radio/checkbox glyph and the indent reserved for it. */
.snax-quiz-card .snax-quiz-answer-label:before {
	display: none;
}

.snax-quiz-card .snax-quiz-answer-label {
	padding: 14px 20px;
	text-align: center;
}

.snax-quiz-card .snax-quiz-answer-label-text {
	padding: 0;
	font-weight: bold;
}

/* !important on both properties: the structural rule above also has to set
   a default background-color (white) at the same elevated specificity it
   uses for border-radius/width on :first-child/:last-child — so on the
   first and last answer specifically, a non-important background-color
   here would lose to that default and never show, even while hovered. */
.snax-quiz-card .snax-quiz-question-unanswered .snax-quiz-answer:hover {
	background-color: #fff1ee !important;
	border-color: #ff9736 !important;
	box-shadow: none;
}

.snax-quiz-card .snax-quiz-answer-checked {
	background-color: #fff1ee !important;
	border-color: #ff303b !important;
}

.snax-quiz-card .snax-quiz-question-reveal-answers .snax-quiz-answer-right {
	background-color: #e7f7ea !important;
	border-color: #58cc6e !important;
}

.snax-quiz-card .snax-quiz-question-reveal-answers .snax-quiz-answer-wrong {
	background-color: #fdeaec !important;
	border-color: #ff5a6e !important;
}

/* Result screen */
.snax-quiz-card .snax-quiz-result {
	border-radius: 12px;
	overflow: hidden;
}

.snax-quiz-card .snax-quiz-result-header {
	padding: 40px 30px;
	background-image: linear-gradient(to bottom right, #ff303b, #ff9736);
	color: #fff;
}

.snax-quiz-card .snax-quiz-result-parent,
.snax-quiz-card .snax-quiz-result-score,
.snax-quiz-card .snax-quiz-result-title {
	color: #fff;
}

.snax-quiz-card .snax-quiz-result-score {
	font-size: 1.6em;
	margin: 0.25em 0;
}

.snax-quiz-card .snax-quiz-result-share {
	margin-top: 1.5em;
}

/* Shared wrapper for every quiz ad placement (interstitial, in-question, sidebar). */
.snax-quiz-ad {
	margin: 0 0 1.5em;
	padding: 12px;
	text-align: center;
	border-radius: 12px;
	background-color: var(--g1-bg-tone-color, #f2f2f2);
}

.snax-quiz-ad-label {
	margin: 0 0 8px;
	font-size: 0.75em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	opacity: 0.5;
}

/* Leaderboard-style placements: interstitial, between question/answers,
   between answers/Next Question. Reserve a 728x90-ish footprint so the
   layout doesn't jump once the ad creative loads (CLS). */
.snax-quiz-ad-leaderboard {
	max-width: 728px;
	min-height: 90px;
	margin-left: auto;
	margin-right: auto;
}

/* Sidebar ad, rendered at the top of the widget area on quiz pages only. */
.snax-quiz-ad-sidebar {
	max-width: 100%;
	min-height: 250px;
}