/* Answer-to-Email Pro — frontend wizard (mobile-first). */

.aep-wizard {
	--aep-accent: #2563eb;
	--aep-accent-dark: #1d4ed8;
	--aep-border: #e4e4e7;
	--aep-text: #27272a;
	--aep-muted: #71717a;
	max-width: 640px;
	margin: 0 auto;
	color: var(--aep-text);
	font-size: 16px;
	line-height: 1.5;
}

/* --- Progress indicator: 1…2…3… with the current step lit ------------ */

.aep-progress {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

.aep-progress__step {
	display: flex;
	align-items: center;
	margin: 0;
}

.aep-progress__step + .aep-progress__step::before {
	content: "";
	display: block;
	width: 28px;
	height: 2px;
	background: var(--aep-border);
	margin: 0 4px;
	transition: background 0.25s;
}

.aep-progress__step.is-done + .aep-progress__step::before,
.aep-progress__step.is-current::before {
	background: var(--aep-accent);
}

.aep-progress__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid var(--aep-border);
	background: #fff;
	color: var(--aep-muted);
	font-weight: 600;
	font-size: 14px;
	transition: all 0.25s;
}

.aep-progress__step.is-current .aep-progress__dot {
	border-color: var(--aep-accent);
	background: var(--aep-accent);
	color: #fff;
	box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.18);
	transform: scale(1.08);
}

.aep-progress__step.is-done .aep-progress__dot {
	border-color: var(--aep-accent);
	background: #fff;
	color: var(--aep-accent);
}

.aep-progress__step.is-done .aep-progress__dot::after {
	content: "✓";
	position: absolute;
}

.aep-progress__step.is-done .aep-progress__dot {
	font-size: 0;
	position: relative;
}

.aep-progress__step.is-done .aep-progress__dot::after {
	font-size: 15px;
	position: static;
}

.aep-step-counter {
	text-align: center;
	color: var(--aep-muted);
	font-size: 13px;
	margin: 0 0 20px;
}

/* --- Steps ------------------------------------------------------------ */

.aep-step {
	border: 0;
	margin: 0;
	padding: 0;
	animation: aep-fade 0.25s ease;
}

@keyframes aep-fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

.aep-question {
	font-size: 1.2em;
	font-weight: 700;
	margin-bottom: 16px;
	padding: 0;
	outline: none;
}

.aep-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.aep-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border: 2px solid var(--aep-border);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}

.aep-option:hover {
	border-color: var(--aep-accent);
}

.aep-option:has(input:checked) {
	border-color: var(--aep-accent);
	background: rgba(37, 99, 235, 0.06);
}

.aep-option input[type="radio"] {
	accent-color: var(--aep-accent);
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	flex: none;
}

/* --- Final step -------------------------------------------------------- */

.aep-summary {
	background: #fafafa;
	border: 1px solid var(--aep-border);
	border-radius: 10px;
	padding: 16px 20px;
	margin-bottom: 20px;
}

.aep-summary__title {
	margin: 0 0 10px;
	font-size: 1em;
	outline: none;
}

.aep-summary__list {
	margin: 0;
	padding-left: 20px;
}

.aep-summary__list li {
	margin-bottom: 8px;
	font-size: 14px;
}

.aep-summary__q {
	display: block;
	color: var(--aep-muted);
}

.aep-field {
	margin: 0 0 16px;
}

.aep-field__label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	outline: none;
}

.aep-field input[type="email"] {
	width: 100%;
	padding: 12px 14px;
	border: 2px solid var(--aep-border);
	border-radius: 8px;
	font-size: 16px;
	box-sizing: border-box;
}

.aep-field input[type="email"]:focus {
	border-color: var(--aep-accent);
	outline: none;
}

.aep-field input[readonly] {
	background: #fafafa;
	color: var(--aep-muted);
}

.aep-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	cursor: pointer;
}

.aep-consent input[type="checkbox"] {
	accent-color: var(--aep-accent);
	width: 18px;
	height: 18px;
	margin-top: 2px;
	flex: none;
}

.aep-required {
	color: #dc2626;
}

/* --- Honeypot (off-screen, not display:none — some bots check that) ---- */

.aep-hp-wrap {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	height: 1px;
	overflow: hidden;
}

/* --- Navigation --------------------------------------------------------- */

.aep-nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 24px;
}

.aep-btn {
	appearance: none;
	border: 0;
	border-radius: 8px;
	padding: 12px 24px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, opacity 0.15s;
}

.aep-btn--next,
.aep-btn--submit {
	background: var(--aep-accent);
	color: #fff;
	margin-left: auto;
}

.aep-btn--next:hover:not(:disabled),
.aep-btn--submit:hover:not(:disabled) {
	background: var(--aep-accent-dark);
}

.aep-btn--back {
	background: transparent;
	color: var(--aep-muted);
	border: 2px solid var(--aep-border);
}

.aep-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* --- Messages ------------------------------------------------------------ */

.aep-error {
	margin-top: 16px;
	padding: 12px 16px;
	border-radius: 8px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
	font-size: 14px;
}

.aep-success,
.aep-notice {
	padding: 20px 24px;
	border-radius: 10px;
	font-size: 16px;
}

.aep-success,
.aep-notice--success {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	color: #166534;
	outline: none;
}

.aep-notice--error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
}

/* --- Larger screens ------------------------------------------------------- */

@media (min-width: 600px) {
	.aep-progress__step + .aep-progress__step::before {
		width: 48px;
		margin: 0 6px;
	}
}