/**
 * GG Skin Quiz — extension styles (stop screens, language toggle,
 * result badges, multi-line questions).
 * Accent = source GG ember (hsl(22 58% 46%) = #b96331), matching the
 * quiz theme primary set in quiz settings.
 */

/* Source questions/stop copy contain real line breaks. */
.wpcsq-step-question,
.wpcsq-answer-label {
	white-space: pre-line;
}

/* ── Language toggle ─────────────────────────────────────────── */

.gg-lang-toggle {
	display: inline-block;
	margin: 0 0 10px;
	padding: 5px 14px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	color: #b96331;
	background: rgba(185, 99, 49, 0.08);
	border: 1px solid rgba(185, 99, 49, 0.35);
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.gg-lang-toggle:hover,
.gg-lang-toggle:focus-visible {
	color: #fff;
	background: #b96331;
}

.wpcsq-quiz-wrapper .wpcsq-quiz-container > .wpcsq-progress + .gg-lang-toggle {
	margin-top: 8px;
}

/* ── Stop screens ────────────────────────────────────────────── */

.wpcsq-quiz-container.gg-stop-active .wpcsq-btn-next,
.wpcsq-quiz-container.gg-stop-active .wpcsq-btn-submit {
	display: none !important;
}

.gg-stop-card {
	margin-top: 14px;
	padding: 22px 20px;
	text-align: center;
	background: linear-gradient(160deg, rgba(185, 99, 49, 0.10), rgba(185, 99, 49, 0.03));
	border: 1px solid rgba(185, 99, 49, 0.35);
	border-radius: 16px;
	animation: gg-stop-in 0.35s ease both;
}

@keyframes gg-stop-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.gg-stop-card .gg-stop-h {
	font-size: 1.15rem;
	font-weight: 800;
	color: #8f4a20;
	margin-bottom: 8px;
}

.gg-stop-card .gg-stop-p p {
	margin: 0 0 8px;
	font-size: 0.95rem;
	line-height: 1.7;
	color: #4b4038;
}

.gg-stop-card .gg-stop-p p:last-child {
	margin-bottom: 0;
}

.gg-stop-card .gg-stop-retry {
	margin-top: 14px;
}

/* RTL: keep the stop text aligned with the page direction. */
.wpcsq-quiz-wrapper[dir="rtl"] .gg-stop-card {
	text-align: center;
}

/* ── Result card badges (source UI.flags) ────────────────────── */

.wpcsq-product-info {
	position: relative;
}

.gg-card-flag {
	display: inline-block;
	margin-bottom: 6px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #8f4a20;
	background: rgba(185, 99, 49, 0.10);
	border: 1px solid rgba(185, 99, 49, 0.30);
	border-radius: 999px;
}

/* ── Small screens: allow long Arabic labels to wrap ─────────── */

.wpcsq-nav .wpcsq-btn {
	white-space: normal;
}