/**
 * Tala Survey — CSS skin for the native Elementor Pro Form credit quiz.
 *
 * Everything is scoped under .tala-survey-form (the CSS class added to the Form
 * widget) and its sibling .tala-survey-wrap blocks, so loading this site-wide is
 * inert wherever the survey is not present. It restyles Elementor's standard
 * form DOM (.elementor-form / .elementor-field-group / radio subgroups / the
 * multi-step buttons) into the quiz card + big-button options + progress bar.
 */
/* Variables are defined on the widget-level classes (form / loader / result /
 * home) because this Elementor build does NOT render custom CSS classes on
 * Sections — only on Widgets. These four are siblings, so each declares the
 * variables itself (custom properties only inherit to descendants). */
.tala-survey-form,
.tala-survey-loader,
.tala-survey-result,
.tala-survey-home {
	--tala-teal-light: #4BC6C6;
	--tala-teal-header: #42BABA;
	--tala-navy: #112332;
	--tala-green: #00D084;
	--ts-white: #FFFFFF;
	--ts-text-muted: #64748B;
	--ts-border-outline: #CBD5E1;
	--ts-border-active: #94A3B8;

	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--tala-navy);
	-webkit-font-smoothing: antialiased;
}

/* ── The form as the quiz card ─────────────────────────────────────────── */
.tala-survey-form .elementor-form {
	background: var(--ts-white);
	max-width: 500px;
	margin: 0 auto;
	border-radius: 24px;
	padding: 40px 32px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.1);
	position: relative;
}

/* Step indicators → thin top progress bar (step_type: progress_bar). */
.tala-survey-form .e-form__indicators {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	gap: 0;
}
.tala-survey-form .e-form__indicators__indicator {
	padding: 0;
	border: 0;
}
.tala-survey-form .e-form__indicators__indicator__progress {
	height: 6px;
	border-radius: 24px 24px 0 0;
	background-color: #F1F5F9;
}
.tala-survey-form .e-form__indicators__indicator__progress__meter {
	background-color: var(--tala-green);
	transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	/* The original bar carries no number — hide the "14%" text the meter prints. */
	color: transparent;
	font-size: 0;
	min-width: 0;
}
/* Hide the per-step textual labels; the question itself is the heading. */
.tala-survey-form .e-form__indicators__indicator__label { display: none; }

/* "STEP N OF 7" eyebrow above the question (injected by the handler — the
 * progress_bar indicator type renders only a bar, no step text). Matches the
 * source `.progress-header`. */
.tala-survey-step-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ts-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 16px;
}

/* Question label = the step heading. */
.tala-survey-form .elementor-field-type-radio > .elementor-field-label {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.5px;
	color: var(--tala-navy);
	line-height: 1.35;
	margin-bottom: 20px;
	display: block;
}

/* ── Radio options as big buttons ──────────────────────────────────────── */
.tala-survey-form .elementor-field-subgroup {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.tala-survey-form .elementor-field-option {
	position: relative;
	display: block;
}
.tala-survey-form .elementor-field-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}
/* Specific selector + !important on display: Elementor/theme set the option
 * label to `display:inline`, which collapses the flex button layout. */
.tala-survey-form .elementor-field-subgroup .elementor-field-option label {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	padding: 16px 20px;
	background: var(--ts-white);
	border: 2px solid var(--ts-border-outline);
	border-radius: 16px;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--tala-navy);
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.tala-survey-form .elementor-field-option label::after {
	content: '';
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid var(--ts-border-outline);
	transition: all 0.2s ease;
	flex-shrink: 0;
	margin-left: 15px;
}
.tala-survey-form .elementor-field-option input[type="radio"]:hover + label {
	border-color: var(--ts-border-active);
	background: #F8FAFC;
}
.tala-survey-form .elementor-field-option input[type="radio"]:checked + label {
	border-color: var(--tala-teal-light);
	background: #F0FAFA;
}
.tala-survey-form .elementor-field-option input[type="radio"]:checked + label::after {
	background: var(--tala-teal-light);
	border-color: var(--tala-teal-light);
	box-shadow: inset 0 0 0 4px #F0FAFA;
}

/* ── Step nav buttons ──────────────────────────────────────────────────── */
/* Auto-advance drives Next on selection, so hide it; keep Previous as the
 * in-card back control, and the final Submit becomes the implicit trigger. */
.tala-survey-form .e-form__buttons__wrapper__button-next,
.tala-survey-form button[type="submit"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.tala-survey-form .e-form__buttons__wrapper__button-previous {
	background: none;
	border: none;
	color: var(--ts-text-muted);
	font-weight: 600;
	padding: 6px 0;
	cursor: pointer;
	opacity: 0.85;
}
.tala-survey-form .e-form__buttons__wrapper__button-previous:hover { color: var(--tala-navy); opacity: 1; }
.tala-survey-form .e-form__buttons { margin-top: 8px; }

/* Hide Elementor's own success/error message — we show custom result screens. */
.tala-survey-form .elementor-message { display: none !important; }

/* ── Hero background wrapper ────────────────────────────────────────────── */
/* Literal teal (not a var): on the real page the hero is an ancestor of the
 * widget classes that hold the vars, so it can't resolve var(--tala-teal-light);
 * the live page sets this background via the native section setting, and this
 * rule covers the standalone preview. */
.tala-survey-hero { background: #4BC6C6; padding: 40px 20px 60px; }

/* The loader and result are siblings of the form; render them on the same white
 * card so they visually replace the quiz card (as in the source experience). */
.tala-survey-loader,
.tala-survey-result {
	background: var(--ts-white);
	max-width: 500px;
	margin: 0 auto;
	border-radius: 24px;
	padding: 40px 32px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.1);
}

/* ── Loader (sibling block) ────────────────────────────────────────────── */
.tala-survey-loader { display: none; text-align: center; padding: 50px 32px; }
.tala-survey-loader.is-active { display: block; }
.tala-survey-pulsing-dot {
	width: 56px;
	height: 56px;
	background: var(--tala-teal-light);
	border-radius: 50%;
	margin: 0 auto 30px;
	animation: talaSurveyPulse 1.5s infinite;
}
@keyframes talaSurveyPulse {
	0%   { transform: scale(0.9); opacity: 1; }
	70%  { transform: scale(1.25); opacity: 0; }
	100% { transform: scale(0.9); opacity: 0; }
}
.tala-survey-loading-text {
	font-size: 18px;
	font-weight: 600;
	color: var(--tala-navy);
	transition: opacity 0.3s ease;
	height: 24px;
}

/* ── Result (sibling block) ────────────────────────────────────────────── */
.tala-survey-result { display: none; text-align: center; }
.tala-survey-result.is-active { display: block; }
.tala-survey-result .tala-survey-success,
.tala-survey-result .tala-survey-rejection { display: none; }
.tala-survey-result.is-pass .tala-survey-success { display: block; }
.tala-survey-result.is-fail .tala-survey-rejection { display: block; }

.tala-survey-result h2 { font-size: 26px; font-weight: 800; color: var(--tala-navy); margin-bottom: 12px; }
.tala-survey-result p { color: var(--ts-text-muted); font-size: 15px; line-height: 1.5; margin-bottom: 16px; }
.tala-survey-success img { width: 100%; max-width: 180px; height: auto; margin: 0 auto 20px; display: block; }

.tala-survey-cta {
	background: var(--tala-green);
	color: var(--tala-navy);
	border: none;
	padding: 20px;
	font-size: 18px;
	font-weight: 800;
	border-radius: 16px;
	width: 100%;
	cursor: pointer;
	box-shadow: 0 8px 16px rgba(0, 208, 132, 0.25);
	transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
	margin-top: 10px;
	display: inline-block;
	text-decoration: none;
	text-align: center;
}
.tala-survey-cta:active { transform: scale(0.96); }

.tala-survey-info-box {
	background-color: #F8FAFC;
	border-left: 4px solid var(--tala-teal-light);
	padding: 16px;
	border-radius: 0 8px 8px 0;
	margin: 20px 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--tala-navy);
	text-align: left;
}

.tala-survey-trust-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 500;
	color: var(--ts-text-muted);
	margin-top: 24px;
}
.tala-survey-trust-badge svg { width: 14px; height: 14px; fill: var(--ts-text-muted); }

/* ── Trust / homepage section (sibling block) ──────────────────────────── */
.tala-survey-home { background: var(--ts-white); padding: 60px 20px; text-align: center; transition: opacity 0.4s ease; }
.tala-survey-home.is-hidden { display: none; }
.tala-survey-home h3 { font-size: 28px; color: var(--tala-navy); margin-bottom: 16px; font-weight: 800; letter-spacing: -0.5px; }
.tala-survey-home p { color: var(--ts-text-muted); max-width: 500px; margin: 0 auto; font-size: 16px; line-height: 1.5; }
.tala-survey-stats-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 40px; max-width: 800px; margin-left: auto; margin-right: auto; }
.tala-survey-stat-item { background: #F8FAFC; padding: 32px 20px; border-radius: 20px; border: 1px solid #F1F5F9; }
.tala-survey-stat-item h4 { font-size: 32px; color: var(--tala-teal-header); margin-bottom: 8px; font-weight: 800; }
.tala-survey-stat-item p { color: var(--tala-navy); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; }

@media (max-width: 768px) {
	.tala-survey-stats-grid { grid-template-columns: 1fr; gap: 12px; }
	.tala-survey-form .elementor-form { padding: 32px 20px; }
	.tala-survey-form .elementor-field-type-radio > .elementor-field-label { font-size: 20px; }
	.tala-survey-form .elementor-field-option label { font-size: 14px; padding: 14px 16px; }
}