/*
 * CWG Repair Cost Roulette — frontend styles.
 * Quirky, friendly, fun. Mobile-first.
 */

:root {
	--cwg-bg: #fffaf0;
	--cwg-paper: #ffffff;
	--cwg-ink: #1a1f36;
	--cwg-ink-soft: #4a5168;
	--cwg-muted: #8a90a6;
	--cwg-line: #ece6d6;
	--cwg-primary: #ff7a18;
	--cwg-primary-deep: #d65a00;
	--cwg-secondary: #1a4eda;
	--cwg-yellow: #ffd60a;
	--cwg-green: #14b86d;
	--cwg-red: #e23b3b;
	--cwg-blue: #2a73ff;
	--cwg-radius: 18px;
	--cwg-radius-sm: 10px;
	--cwg-shadow-sm: 0 2px 0 rgba(26, 31, 54, .08);
	--cwg-shadow: 0 8px 0 rgba(26, 31, 54, .08);
	--cwg-shadow-lift: 0 16px 40px rgba(26, 31, 54, .15);
	--cwg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.cwg-r-page {
	font-family: var(--cwg-font);
	color: var(--cwg-ink);
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 16px 60px;
	line-height: 1.5;
}

.cwg-r-page * {
	box-sizing: border-box;
}

.cwg-r-section {
	margin: 60px 0;
	padding: 0;
}

.cwg-r-section-title {
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 800;
	margin: 0 0 8px;
	letter-spacing: -0.02em;
}

.cwg-r-section-sub {
	color: var(--cwg-ink-soft);
	margin: 0 0 24px;
	font-size: 17px;
}

/* ============== HERO ============== */
.cwg-r-hero {
	position: relative;
	background: linear-gradient(135deg, #fff5d6 0%, #ffe8c4 60%, #ffd1a8 100%);
	border-radius: 24px;
	padding: 56px 32px;
	margin: 24px 0 48px;
	overflow: hidden;
	border: 3px solid var(--cwg-ink);
	box-shadow: var(--cwg-shadow);
}

.cwg-r-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 720px;
}

.cwg-r-hero-eyebrow {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 22px;
}

.cwg-r-pill {
	background: var(--cwg-ink);
	color: var(--cwg-paper);
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.cwg-r-pill-alt {
	background: var(--cwg-paper);
	color: var(--cwg-ink);
	border: 2px solid var(--cwg-ink);
}

.cwg-r-hero-title {
	font-size: clamp(32px, 5.5vw, 56px);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -0.03em;
	margin: 0 0 18px;
}

.cwg-r-hero-accent {
	background: var(--cwg-yellow);
	padding: 0 12px;
	border-radius: 8px;
	box-shadow: 4px 4px 0 var(--cwg-ink);
	display: inline-block;
	transform: rotate(-1.5deg);
}

.cwg-r-hero-sub {
	font-size: 19px;
	max-width: 580px;
	margin: 0 0 28px;
	color: var(--cwg-ink-soft);
}

.cwg-r-hero-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}

.cwg-r-hero-decor {
	position: absolute;
	right: -12px;
	bottom: -12px;
	display: flex;
	gap: 8px;
	opacity: 0.18;
	font-size: 96px;
	z-index: 1;
	pointer-events: none;
	user-select: none;
}

.cwg-r-decor-emoji {
	transform: rotate(-12deg);
}

.cwg-r-decor-emoji:nth-child(2n) {
	transform: rotate(8deg);
}

/* ============== BUTTONS ============== */
.cwg-r-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 3px solid var(--cwg-ink);
	border-radius: 14px;
	padding: 14px 22px;
	font-weight: 800;
	font-size: 16px;
	cursor: pointer;
	text-decoration: none;
	background: var(--cwg-paper);
	color: var(--cwg-ink);
	box-shadow: 4px 4px 0 var(--cwg-ink);
	transition: transform 80ms ease, box-shadow 80ms ease;
	font-family: var(--cwg-font);
}

.cwg-r-button:hover {
	transform: translate(-1px, -1px);
	box-shadow: 5px 5px 0 var(--cwg-ink);
}

.cwg-r-button:active {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 var(--cwg-ink);
}

.cwg-r-button-primary {
	background: var(--cwg-primary);
	color: #fff;
}

.cwg-r-button-secondary {
	background: var(--cwg-yellow);
}

.cwg-r-streak {
	background: var(--cwg-paper);
	border: 2px dashed var(--cwg-ink);
	border-radius: 999px;
	padding: 8px 16px;
	font-weight: 700;
}

/* ============== GAME ============== */
.cwg-r-game {
	background: var(--cwg-paper);
	border: 3px solid var(--cwg-ink);
	border-radius: 22px;
	padding: 28px;
	box-shadow: var(--cwg-shadow);
}

.cwg-r-game-loading {
	text-align: center;
	padding: 40px 0;
	color: var(--cwg-muted);
}

.cwg-r-spinner {
	width: 44px;
	height: 44px;
	border: 4px solid var(--cwg-line);
	border-top-color: var(--cwg-primary);
	border-radius: 50%;
	animation: cwg-r-spin 800ms linear infinite;
	margin: 0 auto 12px;
}

@keyframes cwg-r-spin { to { transform: rotate(360deg); } }

.cwg-r-game-eyebrow {
	color: var(--cwg-primary);
	font-weight: 800;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 6px;
}

.cwg-r-game-vehicle {
	font-size: clamp(24px, 3.5vw, 32px);
	font-weight: 800;
	margin: 0;
	letter-spacing: -0.02em;
}

.cwg-r-game-meta {
	color: var(--cwg-ink-soft);
	margin-top: 4px;
	font-size: 15px;
}

.cwg-r-game-symptom {
	background: #fff8e6;
	border: 2px solid var(--cwg-ink);
	border-radius: var(--cwg-radius-sm);
	padding: 18px 22px;
	margin: 22px 0;
	font-size: 17px;
	font-style: italic;
	position: relative;
}

.cwg-r-game-symptom::before {
	content: '“';
	position: absolute;
	top: -22px;
	left: 12px;
	font-size: 60px;
	color: var(--cwg-primary);
	font-family: Georgia, serif;
}

.cwg-r-game-controls {
	margin-top: 8px;
}

.cwg-r-game-label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-weight: 700;
	margin-bottom: 12px;
	font-size: 16px;
}

.cwg-r-game-value {
	font-size: 36px;
	font-weight: 900;
	color: var(--cwg-primary);
}

.cwg-r-game-slider {
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
	height: 14px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--cwg-yellow), var(--cwg-primary));
	border: 2px solid var(--cwg-ink);
	outline: none;
}

.cwg-r-game-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--cwg-paper);
	border: 3px solid var(--cwg-ink);
	cursor: grab;
	box-shadow: 2px 2px 0 var(--cwg-ink);
}

.cwg-r-game-slider::-moz-range-thumb {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--cwg-paper);
	border: 3px solid var(--cwg-ink);
	cursor: grab;
}

.cwg-r-game-slider-bounds {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-size: 13px;
	color: var(--cwg-muted);
}

.cwg-r-game-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	margin-top: 18px;
}

.cwg-r-game-tries {
	color: var(--cwg-ink-soft);
	font-size: 14px;
}

.cwg-r-game-history {
	list-style: none;
	padding: 0;
	margin: 22px 0 0;
	display: grid;
	gap: 8px;
}

.cwg-r-game-history li {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 12px;
	align-items: center;
	background: #fff;
	border: 2px solid var(--cwg-ink);
	border-radius: var(--cwg-radius-sm);
	padding: 10px 14px;
	font-weight: 700;
}

.cwg-r-history-emoji { font-size: 22px; }
.cwg-r-history-temp-burning { background: #ffe2c8; }
.cwg-r-history-temp-hot     { background: #ffe8d4; }
.cwg-r-history-temp-warm    { background: #fff3c4; }
.cwg-r-history-temp-cool    { background: #d6e8ff; }
.cwg-r-history-temp-cold    { background: #e7eaef; }

/* ============== RESULT ============== */
.cwg-r-game-result {
	text-align: center;
}

.cwg-r-result-headline {
	font-size: clamp(26px, 3.5vw, 40px);
	font-weight: 900;
	letter-spacing: -0.02em;
	margin-bottom: 10px;
}

.cwg-r-result-actual {
	font-size: 22px;
	margin: 14px 0 22px;
}

.cwg-r-result-actual strong {
	font-size: 30px;
	color: var(--cwg-red);
}

.cwg-r-result-breakdown {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 22px auto;
	max-width: 600px;
}

.cwg-r-result-breakdown > div {
	background: var(--cwg-paper);
	border: 2px solid var(--cwg-ink);
	border-radius: var(--cwg-radius-sm);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cwg-r-result-label {
	font-size: 12px;
	text-transform: uppercase;
	color: var(--cwg-muted);
	letter-spacing: 0.08em;
}

.cwg-r-result-figure {
	font-size: 22px;
	font-weight: 800;
}

.cwg-r-result-diagnosis {
	background: #f0f5ff;
	border: 2px solid var(--cwg-ink);
	border-radius: var(--cwg-radius-sm);
	padding: 16px;
	margin: 18px auto;
	max-width: 700px;
	text-align: left;
}

.cwg-r-result-funfact {
	background: #fff8e6;
	border: 2px dashed var(--cwg-ink);
	border-radius: var(--cwg-radius-sm);
	padding: 16px;
	margin: 18px auto;
	max-width: 700px;
}

.cwg-r-result-funfact:empty,
.cwg-r-result-diagnosis:empty {
	display: none;
}

.cwg-r-result-name-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: 22px 0;
	align-items: center;
}

.cwg-r-result-name-row label { font-weight: 700; }

.cwg-r-result-name-row input {
	border: 2px solid var(--cwg-ink);
	border-radius: 12px;
	padding: 10px 14px;
	font-size: 16px;
	font-family: var(--cwg-font);
	min-width: 200px;
}

.cwg-r-rank-banner {
	background: var(--cwg-yellow);
	border: 2px solid var(--cwg-ink);
	border-radius: var(--cwg-radius-sm);
	padding: 14px;
	margin: 18px auto;
	max-width: 480px;
	font-size: 18px;
	font-weight: 700;
}

.cwg-r-result-share { margin: 18px 0; }

/* ---------- Bonus round / Play Again ---------- */
.cwg-r-bonus-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	background: linear-gradient(135deg, #fff3cf 0%, #ffd6a4 100%);
	border: 2px solid var(--cwg-ink);
	border-radius: var(--cwg-radius);
	padding: 12px 18px;
	margin-bottom: 18px;
	box-shadow: var(--cwg-shadow-sm);
	font-weight: 600;
	color: var(--cwg-ink);
}

.cwg-r-bonus-pill {
	background: var(--cwg-ink);
	color: #fff;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.cwg-r-bonus-text {
	font-size: 14px;
	color: var(--cwg-ink-soft);
}

.cwg-r-result-play-again {
	margin: 24px 0 8px;
	padding: 22px 18px;
	border-radius: var(--cwg-radius);
	background: linear-gradient(135deg, #fffbe6 0%, #ffe4a3 100%);
	border: 2px dashed var(--cwg-ink);
	text-align: center;
}

.cwg-r-button-large {
	font-size: 19px;
	padding: 16px 28px;
	box-shadow: var(--cwg-shadow);
}

.cwg-r-button-large:hover {
	transform: translateY(-2px);
}

.cwg-r-result-play-again-sub {
	margin: 12px 0 0;
	font-size: 14px;
	color: var(--cwg-ink-soft);
}

.cwg-r-result-amazon {
	background: #fff;
	border: 2px solid var(--cwg-ink);
	border-radius: var(--cwg-radius);
	padding: 22px;
	margin-top: 22px;
	text-align: left;
}

.cwg-r-amazon-list {
	list-style: none;
	padding: 0;
	margin: 14px 0;
	display: grid;
	gap: 10px;
}

.cwg-r-amazon-list li {
	background: #f9faff;
	border: 2px solid var(--cwg-ink);
	border-radius: var(--cwg-radius-sm);
}

.cwg-r-amazon-list a {
	display: block;
	padding: 12px 16px;
	color: var(--cwg-ink);
	text-decoration: none;
	font-weight: 700;
}

.cwg-r-amazon-list a:hover {
	background: var(--cwg-yellow);
}

.cwg-r-affiliate-disclosure {
	font-size: 12px;
	color: var(--cwg-muted);
	margin: 8px 0 0;
}

.cwg-r-game-empty {
	text-align: center;
	color: var(--cwg-muted);
	padding: 40px 0;
}

/* ============== LEADERBOARD ============== */
.cwg-r-leaderboard {
	background: var(--cwg-paper);
	border: 3px solid var(--cwg-ink);
	border-radius: var(--cwg-radius);
	padding: 22px;
	box-shadow: var(--cwg-shadow);
}

.cwg-r-leaderboard-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.cwg-r-tab {
	background: var(--cwg-paper);
	border: 2px solid var(--cwg-ink);
	border-radius: 999px;
	padding: 8px 18px;
	font-weight: 700;
	cursor: pointer;
	font-family: var(--cwg-font);
	font-size: 14px;
}

.cwg-r-tab.is-active {
	background: var(--cwg-ink);
	color: var(--cwg-paper);
}

.cwg-r-leaderboard-table {
	width: 100%;
	border-collapse: collapse;
}

.cwg-r-leaderboard-table th,
.cwg-r-leaderboard-table td {
	padding: 12px 8px;
	text-align: left;
	border-bottom: 1px solid var(--cwg-line);
}

.cwg-r-leaderboard-table th {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cwg-muted);
}

.cwg-r-num { text-align: right; }

.cwg-r-leaderboard-empty {
	text-align: center;
	color: var(--cwg-muted);
	padding: 24px;
}

.cwg-r-leaderboard-rank-1 { background: linear-gradient(90deg, #fff8c4, transparent); font-weight: 800; }
.cwg-r-leaderboard-rank-2 { background: linear-gradient(90deg, #f0f0f0, transparent); }
.cwg-r-leaderboard-rank-3 { background: linear-gradient(90deg, #f9e1c4, transparent); }

/* ============== HOW IT WORKS ============== */
.cwg-r-how-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.cwg-r-how-card {
	background: var(--cwg-paper);
	border: 3px solid var(--cwg-ink);
	border-radius: var(--cwg-radius);
	padding: 22px;
	box-shadow: var(--cwg-shadow-sm);
}

.cwg-r-how-emoji { font-size: 38px; }
.cwg-r-how-card h3 { margin: 8px 0 6px; font-size: 20px; }
.cwg-r-how-card p { margin: 0; color: var(--cwg-ink-soft); }

/* ============== RECENT PUZZLES ============== */
.cwg-r-recent-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.cwg-r-recent-card {
	background: var(--cwg-paper);
	border: 3px solid var(--cwg-ink);
	border-radius: var(--cwg-radius);
	padding: 18px;
	text-decoration: none;
	color: var(--cwg-ink);
	box-shadow: var(--cwg-shadow-sm);
	display: block;
	transition: transform 80ms ease, box-shadow 80ms ease;
}

.cwg-r-recent-card:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--cwg-ink);
}

.cwg-r-recent-card-vehicle {
	font-weight: 800;
	font-size: 18px;
	margin-bottom: 6px;
}

.cwg-r-recent-card-symptom {
	color: var(--cwg-ink-soft);
	font-size: 14px;
	margin-bottom: 12px;
}

.cwg-r-recent-card-cta {
	color: var(--cwg-primary);
	font-weight: 700;
	font-size: 14px;
}

/* ============== SINGLE PUZZLE ARCHIVE ============== */
.cwg-r-single-header { margin: 24px 0; }

.cwg-r-single-back {
	display: inline-block;
	margin-bottom: 14px;
	color: var(--cwg-ink-soft);
	text-decoration: none;
	font-weight: 700;
}

.cwg-r-single-title {
	font-size: clamp(28px, 4.5vw, 44px);
	font-weight: 900;
	margin: 0;
}

.cwg-r-single-meta {
	color: var(--cwg-ink-soft);
	margin-top: 6px;
}

.cwg-r-single-symptom {
	font-size: 19px;
	font-style: italic;
	background: #fff8e6;
	border: 2px solid var(--cwg-ink);
	border-radius: var(--cwg-radius-sm);
	padding: 16px 20px;
}

.cwg-r-single-cost-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
	margin: 16px 0;
}

.cwg-r-single-cost-card {
	background: var(--cwg-paper);
	border: 3px solid var(--cwg-ink);
	border-radius: var(--cwg-radius-sm);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	box-shadow: var(--cwg-shadow-sm);
}

.cwg-r-single-cost-card span {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cwg-muted);
}

.cwg-r-single-cost-card strong {
	font-size: 26px;
	font-weight: 900;
}

.cwg-r-single-cost-card-total {
	background: var(--cwg-yellow);
}

.cwg-r-single-cta {
	margin-top: 40px;
	background: linear-gradient(135deg, #fff5d6 0%, #ffe8c4 100%);
	border: 3px solid var(--cwg-ink);
	border-radius: var(--cwg-radius);
	padding: 28px;
	text-align: center;
	box-shadow: var(--cwg-shadow);
}

.cwg-r-single-cta h2 {
	margin: 0 0 8px;
	font-size: 28px;
}

.cwg-r-single-cta p {
	margin: 0 0 16px;
	color: var(--cwg-ink-soft);
}

/* ============== AD PLACEHOLDERS ============== */
.cwg-r-ad-placeholder {
	background: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 6px, #ececec 6px, #ececec 12px);
	border: 2px dashed var(--cwg-muted);
	border-radius: var(--cwg-radius-sm);
	padding: 24px;
	text-align: center;
	color: var(--cwg-muted);
	margin: 24px 0;
	font-size: 14px;
}

.cwg-r-ad-placeholder code { background: #fff; padding: 2px 6px; border-radius: 4px; }

.cwg-r-ad { margin: 24px 0; }

/* ============== FRONT-PAGE THEME OVERRIDES ============== */
body.cwg-r-front .entry-header,
body.cwg-r-front .page-header,
body.cwg-r-front h1.entry-title,
body.cwg-r-front .elementor-page-title,
body.cwg-r-front .page-content > .entry-title,
body.cwg-r-front .post-thumbnail {
	display: none !important;
}

body.cwg-r-front .entry-content,
body.cwg-r-front .page-content {
	padding: 0;
	margin: 0;
}

/* Hide all lead-gen CTAs across the site (links to /free-quote/, /advertise/, etc.) */
.elementor-location-header a[href*="/free-quote/"],
.elementor-location-header a[href*="/advertise/"],
.elementor-location-header a[href*="lp1.php"],
.elementor-location-header a[href*="lp2.php"],
header a[href*="/free-quote/"],
header a[href*="/advertise/"],
header a[href*="lp1.php"],
.site-header a[href*="/free-quote/"],
.site-header a[href*="/advertise/"],
.site-header a[href*="lp1.php"] {
	display: none !important;
}

/* If the entire button widget container should hide, also catch parent button containers */
.elementor-location-header .elementor-element:has(a[href*="/free-quote/"]),
.elementor-location-header .elementor-element:has(a[href*="lp1.php"]) {
	display: none !important;
}

/* ============== MOBILE ============== */
@media (max-width: 640px) {
	.cwg-r-hero { padding: 36px 20px; }
	.cwg-r-hero-decor { font-size: 60px; opacity: 0.12; }
	.cwg-r-game { padding: 20px; }
	.cwg-r-result-breakdown { grid-template-columns: 1fr; }
	.cwg-r-leaderboard-table th:nth-child(4),
	.cwg-r-leaderboard-table td:nth-child(4),
	.cwg-r-leaderboard-table th:nth-child(5),
	.cwg-r-leaderboard-table td:nth-child(5) { display: none; }
}