/* ═══════════════════════════════════════════════════
   Ayurvedic Dosha Test — Light Luxury Edition
   Typography : Liberation Serif / Plus Jakarta Sans
   Palette    : Cream · #2F4A3A · #745B19 · #FFDF98
   ═══════════════════════════════════════════════════ */

:root {
	/* ── Base surfaces ── */
	--dl-cream:        #FAF6EE;
	--dl-cream-deep:   #F3EDDE;
	--dl-white:        #FFFFFF;
	--dl-panel:        #F2EDE3;

	/* ── Forest green ── */
	--dl-green:        #2F4A3A;
	--dl-green-mid:    #3D6050;
	--dl-green-light:  rgba(47, 74, 58, .08);
	--dl-green-xlight: rgba(47, 74, 58, .04);
	--dl-green-border: rgba(47, 74, 58, .14);
	--dl-green-border2:rgba(47, 74, 58, .22);

	/* ── Gold / Champagne ── */
	--dl-gold:         #FFDF98;
	--dl-gold-rich:    #C9A84C;
	--dl-gold-deep:    #A8882E;
	--dl-gold-bg:      rgba(255, 223, 152, .35);
	--dl-gold-border:  rgba(201, 168, 76, .35);

	/* ── Bronze / Amber ── */
	--dl-bronze:       #745B19;
	--dl-bronze-light: #9A7A25;

	/* ── Text ── */
	--dl-text:         #1D2E25;
	--dl-text-mid:     #3D5248;
	--dl-text-muted:   #6B8070;
	--dl-text-faint:   #9AB0A4;

	/* ── Radii ── */
	--r-card:  36px;
	--r-panel: 26px;
	--r-chip:  16px;

	/* ── Typography ── */
	--serif: 'Liberation Serif', Georgia, 'Times New Roman', serif;
	--sans:  'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;

	/* ── Motion ── */
	--ease: cubic-bezier(.4, 0, .2, 1);
}

/* ════════════════════════════════════════════════════
   OUTER WRAPPER
   ════════════════════════════════════════════════════ */
.dosha-wrap {
	font-family: var(--sans);
	background: var(--dl-cream);
	border-radius: var(--r-card);
	max-width: 760px;
	margin: 0 auto;
	overflow: hidden;
	box-shadow:
		0 2px 0 0 var(--dl-gold-border),
		0 24px 64px rgba(47, 74, 58, .12),
		0 4px 16px rgba(47, 74, 58, .08),
		0 0 0 1px var(--dl-green-border);
}

/* ════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════ */
.dosha-header {
	padding: 2.75rem 2.75rem 2rem;
	text-align: center;
	background: var(--dl-white);
	border-bottom: 1px solid var(--dl-green-border);
	position: relative;
}

/* Top gold accent stripe */
.dosha-header::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--dl-green), var(--dl-gold-rich), var(--dl-bronze), var(--dl-green));
}

/* Ornament */
.dosha-orn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	margin-bottom: 1.2rem;
	color: var(--dl-bronze);
}
.dosha-orn-line {
	display: block;
	width: 44px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--dl-gold-border));
}
.dosha-orn-icon { opacity: .7; flex-shrink: 0; }

.dosha-main-title {
	font-family: var(--serif);
	font-size: clamp(1.55rem, 4vw, 2.2rem);
	font-weight: 400;
	color: var(--dl-green);
	letter-spacing: .03em;
	margin: 0 0 .55rem;
	line-height: 1.2;
}

.dosha-intro {
	font-family: var(--sans);
	font-size: .82rem;
	color: var(--dl-text-muted);
	font-weight: 300;
	margin: 0 auto 1.75rem;
	line-height: 1.75;
	max-width: 400px;
}

/* Progress */
.dosha-progress-wrap {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.dosha-progress-bar {
	flex: 1;
	height: 3px;
	background: var(--dl-green-light);
	border-radius: 100px;
	overflow: hidden;
}
.dosha-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--dl-green), var(--dl-bronze-light));
	border-radius: 100px;
	transition: width .5s var(--ease);
}
.dosha-progress-label {
	font-family: var(--sans);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--dl-text-faint);
	white-space: nowrap;
	min-width: 44px;
	text-align: right;
}

/* ════════════════════════════════════════════════════
   QUESTIONS
   ════════════════════════════════════════════════════ */
.dosha-questions-container {
	padding: 2.25rem 2.75rem 0;
	min-height: 320px;
}

.dosha-question {
	display: none;
	animation: dlSlideIn .3s var(--ease) both;
}
.dosha-question.is-active { display: block; }

@keyframes dlSlideIn {
	from { opacity: 0; transform: translateX(16px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* Question meta */
.dosha-q-meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}
.dosha-q-num {
	font-family: var(--serif);
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--dl-gold-deep);
	line-height: 1;
	flex-shrink: 0;
}
.dosha-q-rule {
	flex: 1;
	height: 1px;
	background: var(--dl-green-border);
}

.dosha-question-text {
	font-family: var(--serif);
	font-size: clamp(1.05rem, 2.8vw, 1.25rem);
	font-weight: 400;
	color: var(--dl-text);
	margin: 0 0 1.4rem;
	line-height: 1.5;
}

/* ── Answer Buttons ── */
.dosha-answers {
	display: flex;
	flex-direction: column;
	gap: .55rem;
}

.dosha-answer-btn {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.2rem;
	background: var(--dl-white);
	border: 1px solid var(--dl-green-border);
	border-radius: var(--r-chip);
	cursor: pointer;
	text-align: left;
	width: 100%;
	transition:
		background .2s var(--ease),
		border-color .2s var(--ease),
		transform .18s var(--ease),
		box-shadow .2s var(--ease);
	position: relative;
}

.dosha-answer-btn:hover {
	background: var(--dl-green-xlight);
	border-color: var(--dl-green-border2);
	transform: translateX(4px);
	box-shadow: 0 2px 12px rgba(47, 74, 58, .07);
}

.dosha-answer-btn.is-selected {
	background: var(--dl-green-light);
	border-color: var(--dl-green);
	box-shadow: 0 0 0 1px rgba(47, 74, 58, .1);
}

/* Solid left accent on selected */
.dosha-answer-btn.is-selected::before {
	content: '';
	position: absolute;
	left: 0; top: 14%; bottom: 14%;
	width: 3px;
	background: var(--dl-green);
	border-radius: 0 3px 3px 0;
}

/* Dot */
.dosha-ans-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--dl-text-faint);
	flex-shrink: 0;
	transition: background .2s;
}
.dosha-answer-btn.is-selected .dosha-ans-dot { background: var(--dl-green); }
.dosha-answer-btn:hover .dosha-ans-dot       { background: var(--dl-green-mid); }

.dosha-answer-text {
	font-family: var(--sans);
	font-size: .88rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--dl-text-mid);
	flex: 1;
	transition: color .2s;
}
.dosha-answer-btn.is-selected .dosha-answer-text,
.dosha-answer-btn:hover .dosha-answer-text { color: var(--dl-text); }

/* Check circle */
.dosha-check {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid var(--dl-green-border);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: transparent;
	transition: all .2s var(--ease);
}
.dosha-answer-btn.is-selected .dosha-check {
	border-color: var(--dl-green);
	background: var(--dl-green);
	color: var(--dl-cream);
}

/* ════════════════════════════════════════════════════
   NAVIGATION
   ════════════════════════════════════════════════════ */
.dosha-nav {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 1.75rem 2.75rem 2.5rem;
	flex-wrap: wrap;
}

.dosha-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .75rem 1.6rem;
	border-radius: var(--r-chip);
	font-family: var(--sans);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	cursor: pointer;
	border: none;
	transition: all .2s var(--ease);
}

.dosha-btn-primary {
	background: var(--dl-green);
	color: var(--dl-cream);
	margin-left: auto;
	box-shadow: 0 4px 16px rgba(47, 74, 58, .22);
}
.dosha-btn-primary:hover:not(:disabled) {
	background: var(--dl-green-mid);
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(47, 74, 58, .28);
}
.dosha-btn-primary:disabled {
	background: var(--dl-green-border);
	color: var(--dl-text-faint);
	box-shadow: none;
	cursor: not-allowed;
}

.dosha-btn-ghost {
	background: transparent;
	color: var(--dl-text-muted);
	border: 1px solid var(--dl-green-border);
}
.dosha-btn-ghost:hover {
	border-color: var(--dl-green-border2);
	color: var(--dl-green);
	background: var(--dl-green-xlight);
}

.dosha-btn-submit {
	background: linear-gradient(135deg, var(--dl-green) 0%, var(--dl-bronze) 100%);
	color: var(--dl-gold);
	margin-left: auto;
	box-shadow: 0 4px 20px rgba(47, 74, 58, .25);
	padding: .8rem 1.75rem;
	font-size: .8rem;
}
.dosha-btn-submit:hover:not(:disabled) {
	box-shadow: 0 8px 30px rgba(47, 74, 58, .32);
	transform: translateY(-1px);
}
.dosha-btn-submit:disabled {
	opacity: .45;
	cursor: not-allowed;
}

/* ════════════════════════════════════════════════════
   LOADING
   ════════════════════════════════════════════════════ */
.dosha-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 5rem 2rem;
	gap: 1.25rem;
	background: var(--dl-cream);
}

.dosha-loader-ring {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid var(--dl-green-border);
	border-top-color: var(--dl-green);
	animation: dlSpin .85s linear infinite;
}
@keyframes dlSpin { to { transform: rotate(360deg); } }

.dosha-loading-text {
	font-family: var(--sans);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--dl-text-faint);
	margin: 0;
}

/* ════════════════════════════════════════════════════
   RESULT PANEL
   ════════════════════════════════════════════════════ */
.dosha-result { animation: dlFadeUp .5s var(--ease) both; }

@keyframes dlFadeUp {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Result Hero ── */
.dl-hero {
	padding: 3rem 2.75rem 2.5rem;
	text-align: center;
	background: var(--dl-white);
	border-bottom: 1px solid var(--dl-green-border);
	position: relative;
	overflow: hidden;
}

/* Top accent stripe matching header */
.dl-hero::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--dl-green), var(--dl-gold-rich), var(--dl-bronze), var(--dl-green));
}

/* Watermark letter */
.dl-hero-bg-letter {
	position: absolute;
	font-family: var(--serif);
	font-size: 20rem;
	font-weight: 700;
	color: var(--dl-green);
	opacity: .04;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	line-height: 1;
	letter-spacing: -.05em;
	user-select: none;
}

.dl-hero-orn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	margin-bottom: 1.4rem;
	color: var(--dl-bronze);
	opacity: .6;
	font-size: .7rem;
	letter-spacing: .2em;
}
.dl-hero-orn-line {
	display: block;
	width: 48px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--dl-gold-border));
}

.dl-hero-emoji {
	font-size: 2.8rem;
	display: block;
	margin-bottom: .65rem;
	animation: dlBounce .65s .2s var(--ease) both;
}
@keyframes dlBounce {
	0%   { transform: scale(0) rotate(-8deg); opacity: 0; }
	65%  { transform: scale(1.12) rotate(2deg); opacity: 1; }
	100% { transform: scale(1) rotate(0); opacity: 1; }
}

.dl-hero-eyebrow {
	font-family: var(--sans);
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--dl-text-faint);
	margin: 0 0 .4rem;
}

.dl-hero-title {
	font-family: var(--serif);
	font-size: clamp(2.6rem, 8vw, 4rem);
	font-weight: 400;
	color: var(--dl-green);
	letter-spacing: .1em;
	text-transform: uppercase;
	margin: 0 0 .4rem;
	line-height: 1;
}

.dl-hero-subtitle {
	font-family: var(--sans);
	font-size: .88rem;
	font-weight: 300;
	font-style: italic;
	color: var(--dl-text-muted);
	margin: 0 0 1.1rem;
}

.dl-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	background: var(--dl-gold);
	color: var(--dl-bronze);
	font-family: var(--sans);
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: .38rem 1rem;
	border-radius: var(--r-chip);
	border: 1px solid rgba(116, 91, 25, .2);
}

/* ── Score Bars ── */
.dl-scores {
	padding: 2rem 2.75rem;
	background: var(--dl-cream);
	border-bottom: 1px solid var(--dl-green-border);
}

.dl-scores-eyebrow {
	font-family: var(--sans);
	font-size: .58rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--dl-text-faint);
	margin: 0 0 1.25rem;
}

.dl-score-row {
	display: grid;
	grid-template-columns: 70px 1fr 40px;
	align-items: center;
	gap: 1rem;
	margin-bottom: .8rem;
}
.dl-score-row:last-child { margin-bottom: 0; }

.dl-score-label {
	font-family: var(--sans);
	font-size: .76rem;
	font-weight: 600;
	color: var(--dl-text-mid);
}

.dl-score-track {
	height: 4px;
	background: var(--dl-green-light);
	border-radius: 100px;
	overflow: hidden;
}
.dl-score-fill {
	height: 100%;
	border-radius: 100px;
	width: 0;
	background: linear-gradient(90deg, var(--dl-green), var(--dl-bronze-light));
	transition: width 1.1s var(--ease) .35s;
}

.dl-score-pct {
	font-family: var(--serif);
	font-size: .95rem;
	color: var(--dl-bronze);
	text-align: right;
}

/* ── Divider ── */
.dl-divider {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 0 2.75rem;
	margin: .25rem 0;
	color: var(--dl-gold-deep);
	font-size: .7rem;
	letter-spacing: .15em;
}
.dl-divider::before,
.dl-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--dl-green-border);
}

/* ── Result Sections ── */
.dl-sections {
	padding: 2rem 2.75rem 0;
	background: var(--dl-cream);
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.dl-section {
	background: var(--dl-white);
	border: 1px solid var(--dl-green-border);
	border-radius: var(--r-panel);
	padding: 1.35rem 1.5rem;
	animation: dlFadeUp .5s var(--ease) both;
	opacity: 0;
}
.dl-section:nth-child(1) { animation-delay: .08s; }
.dl-section:nth-child(2) { animation-delay: .16s; }
.dl-section:nth-child(3) { animation-delay: .24s; }
.dl-section:nth-child(4) { animation-delay: .32s; }
.dl-section:nth-child(5) { animation-delay: .40s; }

/* Left gold bar accent on sections */
.dl-section {
	border-left: 3px solid var(--dl-gold);
}

.dl-section-head {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: .7rem;
}

.dl-section-icon {
	width: 26px;
	height: 26px;
	background: var(--dl-gold);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dl-bronze);
	flex-shrink: 0;
}
.dl-section-icon svg { display: block; }

.dl-section-title {
	font-family: var(--sans);
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--dl-bronze);
}

.dl-section-body {
	font-family: var(--sans);
	font-size: .86rem;
	font-weight: 400;
	line-height: 1.8;
	color: var(--dl-text-mid);
	margin: 0;
}

/* ── Actions ── */
.dl-actions {
	display: flex;
	justify-content: center;
	padding: 1.75rem 2.75rem 2.5rem;
	background: var(--dl-cream);
}

.dl-restart-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: transparent;
	border: 1px solid var(--dl-green-border2);
	border-radius: var(--r-chip);
	color: var(--dl-text-muted);
	font-family: var(--sans);
	font-size: .73rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .7rem 1.5rem;
	cursor: pointer;
	transition: all .2s var(--ease);
}
.dl-restart-btn:hover {
	border-color: var(--dl-green);
	color: var(--dl-green);
	background: var(--dl-green-xlight);
}

/* ════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════ */
@media (max-width: 640px) {
	.dosha-header              { padding: 2rem 1.5rem 1.75rem; }
	.dosha-questions-container { padding: 2rem 1.5rem 0; }
	.dosha-nav                 { padding: 1.5rem 1.5rem 2rem; }
	.dl-hero                   { padding: 2.5rem 1.5rem 2rem; }
	.dl-scores                 { padding: 1.5rem; }
	.dl-divider                { padding: 0 1.5rem; }
	.dl-sections               { padding: 1.5rem 1.5rem 0; }
	.dl-actions                { padding: 1.5rem 1.5rem 2rem; }
	.dl-section                { padding: 1.1rem 1.25rem; }
	.dl-score-row              { grid-template-columns: 56px 1fr 36px; gap: .65rem; }
	.dosha-btn                 { padding: .7rem 1.25rem; font-size: .75rem; }
	.dosha-orn-line            { width: 28px; }
}

@media (max-width: 400px) {
	.dosha-answer-btn { padding: .85rem 1rem; }
	.dl-hero-title    { font-size: 2.2rem; letter-spacing: .06em; }
	.dl-hero-bg-letter{ font-size: 14rem; }
}