/* =========================================================
   AI Investor Funnel — investor-funnel.css
   Uses HomListi theme CSS variables with safe fallbacks.
   ========================================================= */

/* ── Wrapper ──────────────────────────────────────────────── */
.investor-funnel {
	max-width: 780px;
	margin: 0 auto;
	padding: 40px 0 60px;
	font-family: var(--rt-body-font, 'Roboto', sans-serif);
}

/* ── Intro Screen ─────────────────────────────────────────── */
.il-intro {
	text-align: center;
	padding: 48px 24px 40px;
}

.il-intro__badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: rgba(0, 193, 148, 0.1);
	color: var(--rt-primary-color, #00c194);
	border: 1px solid rgba(0, 193, 148, 0.25);
	border-radius: 20px;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 24px;
}

.il-intro__heading {
	font-family: var(--rt-heading-font, 'Ubuntu', sans-serif);
	font-size: 32px;
	font-weight: 700;
	color: #1a202c;
	line-height: 1.25;
	margin: 0 auto 20px;
	max-width: 600px;
}

@media (max-width: 576px) {
	.il-intro__heading {
		font-size: 24px;
	}
}

.il-intro__body {
	font-size: 16px;
	color: #718096;
	line-height: 1.7;
	max-width: 520px;
	margin: 0 auto 32px;
}

.il-intro__cta {
	font-size: 17px;
	padding: 18px 40px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 24px;
}

.il-intro__cta i {
	transition: transform 0.2s ease;
}

.il-intro__cta:hover i {
	transform: translateX(4px);
}

.il-intro__trust {
	display: flex;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
	font-size: 13px;
	color: #a0aec0;
	margin: 0;
}

.il-intro__trust span {
	display: flex;
	align-items: center;
	gap: 5px;
}

.il-intro__trust i {
	color: var(--rt-primary-color, #00c194);
	font-size: 12px;
}

/* ── Progress Bar ─────────────────────────────────────────── */
.il-progress-wrap {
	margin-bottom: 36px;
}

.il-progress-bar {
	height: 6px;
	background: #e8edf2;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 8px;
}

.il-progress-bar__fill {
	height: 100%;
	background: var(--rt-primary-color, #00c194);
	border-radius: 3px;
	width: 0%;
	transition: width 0.45s ease;
}

.il-progress-label {
	font-size: 13px;
	color: #8a96a3;
	letter-spacing: 0.02em;
}

/* ── Step Visibility ──────────────────────────────────────── */
.il-step {
	display: none;
}

.il-step.il-step--active {
	display: block;
	animation: il-fadeUp 0.3s ease forwards;
}

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

/* ── Step Header ──────────────────────────────────────────── */
.il-step__tag {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rt-primary-color, #00c194);
	margin-bottom: 10px;
}

.il-step__heading {
	font-family: var(--rt-heading-font, 'Ubuntu', sans-serif);
	font-size: 26px;
	font-weight: 700;
	color: #1a202c;
	margin: 0 0 8px;
	line-height: 1.3;
}

.il-step__subheading {
	font-size: 15px;
	color: #718096;
	margin: 0 0 28px;
}

@media (max-width: 576px) {
	.il-step__heading {
		font-size: 20px;
	}
}

/* ── Options Grid ─────────────────────────────────────────── */
.il-options-grid {
	display: grid;
	gap: 14px;
	margin-bottom: 24px;
}

.il-options-grid--2col {
	grid-template-columns: repeat(2, 1fr);
}

.il-options-grid--auto {
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.il-options-grid--1col {
	grid-template-columns: 1fr;
}

@media (max-width: 576px) {
	.il-options-grid--2col,
	.il-options-grid--auto {
		grid-template-columns: 1fr;
	}
}

/* ── Option Cards ─────────────────────────────────────────── */
.il-option-card {
	cursor: pointer;
	display: block;
}

/* Hide the native input visually but keep it accessible */
.il-option-card input[type="radio"],
.il-option-card input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.il-option-card__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	background: #fff;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
	cursor: pointer;
	position: relative;
	min-height: 68px;
}

.il-option-card__inner:hover {
	border-color: var(--rt-primary-color, #00c194);
	box-shadow: 0 4px 18px rgba(0, 193, 148, 0.12);
	transform: translateY(-1px);
}

.il-option-card.il-option-card--selected .il-option-card__inner {
	border-color: var(--rt-primary-color, #00c194);
	background: rgba(0, 193, 148, 0.05);
	box-shadow: 0 4px 18px rgba(0, 193, 148, 0.12);
}

/* Highlighted card (Step 5 global deals) */
.il-option-card--highlight .il-option-card__inner {
	border-color: var(--rt-secondary-color, #07c196);
	background: rgba(7, 193, 150, 0.03);
}

/* Icon */
.il-option-card__icon {
	font-size: 22px;
	min-width: 28px;
	text-align: center;
	color: var(--rt-primary-color, #00c194);
	flex-shrink: 0;
}

/* Label */
.il-option-card__label {
	font-size: 15px;
	font-weight: 500;
	color: #2d3748;
	line-height: 1.4;
	flex: 1;
}

/* Text wrap (Step 6 — label + description) */
.il-option-card__text-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.il-option-card__desc {
	font-size: 13px;
	color: #a0aec0;
	font-weight: 400;
}

/* Check icon — fades in on selection */
.il-option-card__check {
	margin-left: auto;
	flex-shrink: 0;
	font-size: 18px;
	color: var(--rt-primary-color, #00c194);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.il-option-card.il-option-card--selected .il-option-card__check {
	opacity: 1;
}

/* ── Navigation Buttons ───────────────────────────────────── */
.il-step-nav {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-top: 8px;
}

.il-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 30px;
	border-radius: 8px;
	font-family: var(--rt-body-font, 'Roboto', sans-serif);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	border: 2px solid transparent;
	transition: all 0.2s ease;
	line-height: 1;
}

.il-btn--next,
.il-btn--submit {
	background: var(--rt-primary-color, #00c194);
	color: #fff;
	border-color: var(--rt-primary-color, #00c194);
}

.il-btn--next:hover,
.il-btn--submit:hover {
	background: transparent;
	color: var(--rt-primary-color, #00c194);
}

.il-btn--back {
	background: transparent;
	color: #a0aec0;
	border-color: #e2e8f0;
	padding: 13px 20px;
}

.il-btn--back:hover {
	border-color: #a0aec0;
	color: #718096;
}

.il-btn--back-ghost {
	border: none;
	color: #a0aec0;
	padding: 8px 0;
	font-size: 13px;
	font-weight: 500;
}

.il-btn--back-ghost:hover {
	color: #718096;
	border: none;
}

.il-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}

/* ── Contact Form (Step 7) ────────────────────────────────── */
.il-step__header {
	margin-bottom: 28px;
}

.il-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

@media (max-width: 600px) {
	.il-form-row {
		grid-template-columns: 1fr;
	}
}

.il-form-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 20px;
}

.il-form-group label {
	font-size: 14px;
	font-weight: 600;
	color: #2d3748;
}

.il-required {
	color: #e53e3e;
}

.il-preferred {
	font-size: 12px;
	font-weight: 400;
	color: #a0aec0;
}

.il-form-control {
	width: 100%;
	padding: 13px 16px;
	border: 2px solid #e2e8f0;
	border-radius: 8px;
	font-size: 15px;
	font-family: var(--rt-body-font, 'Roboto', sans-serif);
	color: #2d3748;
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	outline: none;
	box-sizing: border-box;
}

.il-form-control:focus {
	border-color: var(--rt-primary-color, #00c194);
	box-shadow: 0 0 0 3px rgba(0, 193, 148, 0.12);
}

.il-form-control::placeholder {
	color: #cbd5e0;
}

/* ── Input wrap + validation icon ─────────────────────────── */
.il-input-wrap {
	position: relative;
}

.il-input-wrap .il-form-control {
	padding-right: 42px;
}

/* For the select the chevron sits at right:14px; push icon to its left */
.il-input-wrap--select .il-form-control {
	padding-right: 68px;
}

.il-field-icon {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 15px;
	pointer-events: none;
	line-height: 1;
}

.il-input-wrap--select .il-field-icon {
	right: 40px;
}

.il-field-icon i {
	display: none;
}

.il-field-icon--valid i,
.il-field-icon--invalid i {
	display: inline;
}

.il-field-icon--valid i {
	color: var(--rt-primary-color, #00c194);
}

.il-field-icon--invalid i {
	color: #e53e3e;
}

/* Border state */
.il-form-control.il-input--valid {
	border-color: var(--rt-primary-color, #00c194);
}

.il-form-control.il-input--invalid {
	border-color: #e53e3e;
}

/* Select field */
.il-form-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a0aec0' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 38px;
	cursor: pointer;
}

.il-form-select option[disabled] {
	color: #cbd5e0;
}

/* ── Error Message ────────────────────────────────────────── */
.il-form-error {
	color: #e53e3e;
	font-size: 14px;
	margin-bottom: 16px;
	padding: 12px 16px;
	background: #fff5f5;
	border: 1px solid #fed7d7;
	border-radius: 6px;
}

/* ── Submit Wrap ──────────────────────────────────────────── */
.il-submit-wrap {
	margin-top: 8px;
}

.il-btn--submit {
	width: 100%;
	padding: 16px 32px;
	font-size: 16px;
	border-radius: 10px;
	margin-bottom: 14px;
}

.il-btn--submit:hover:not(:disabled) {
	background: transparent;
	color: var(--rt-primary-color, #00c194);
}

.il-reassurance {
	font-size: 13px;
	color: #a0aec0;
	text-align: center;
	margin: 0;
}

.il-reassurance i {
	margin-right: 5px;
	color: var(--rt-primary-color, #00c194);
}

.il-step-nav--contact {
	margin-top: 20px;
}

/* ── Success State ────────────────────────────────────────── */
.il-success-state {
	text-align: center;
	padding: 60px 20px;
}

.il-success-icon {
	font-size: 72px;
	color: var(--rt-primary-color, #00c194);
	margin-bottom: 24px;
	line-height: 1;
}

.il-success-heading {
	font-family: var(--rt-heading-font, 'Ubuntu', sans-serif);
	font-size: 32px;
	font-weight: 700;
	color: #1a202c;
	margin: 0 0 12px;
}

.il-success-message {
	font-size: 16px;
	color: #718096;
	max-width: 420px;
	margin: 0 auto;
	line-height: 1.6;
}

/* ── RTL / Arabic ────────────────────────────────────────── */
#investor-funnel.il--rtl {
	direction: rtl;
	text-align: right;
}
.il--rtl .il-intro__trust {
	flex-direction: row-reverse;
	justify-content: center;
}
.il--rtl .il-step__header {
	text-align: right;
}
.il--rtl .il-option-card__inner {
	flex-direction: row-reverse;
}
.il--rtl .il-option-card__check {
	margin-left: 0;
	margin-right: auto;
}
.il--rtl .il-option-card__text-wrap {
	text-align: right;
}
.il--rtl .il-step-nav {
	flex-direction: row-reverse;
}
.il--rtl .il-form-group label {
	text-align: right;
}
.il--rtl .il-input-wrap .il-field-icon {
	left: 12px;
	right: auto;
}
.il--rtl .il-form-control {
	padding-right: 14px;
	padding-left: 40px;
}
.il--rtl .il-reassurance {
	direction: rtl;
}
.il--rtl .il-progress-label {
	direction: ltr;
}
.il--rtl .il-lang-toggle {
	justify-content: flex-start;
}
.il--rtl .il-intro__cta i {
	order: -1;
	transform: scaleX(-1);
}