/**
 * TripThis Provider Registration — two-step wizard styles.
 *
 * Styling matched to the TripThis profile mockup: soft #f7f9fb field fills,
 * 1.5px #e7ebf0 borders with an 11px radius, teal #2ab5b5 accents/focus ring,
 * muted #7b8896 helper text and a soft card shadow. Includes the mockup's
 * svc-grid service selector.
 */

.tpr-form {
	/* Design tokens from the TripThis profile mockup. */
	--tpr-accent: #2ab5b5;
	--tpr-accent-dark: #1a8a8a;
	--tpr-mint: #2ab5b5;
	--tpr-mint-dark: #1a8a8a;
	--tpr-border: #e7ebf0;
	--tpr-line-strong: #d5dce4;
	--tpr-bg: var(--e-global-color-06772f1, #ffffff);
	--tpr-bg-soft: #f5f6f8;
	--tpr-field: #f7f9fb;
	--tpr-text: #12212e;
	--tpr-ink-soft: #40515f;
	--tpr-muted: #7b8896;
	--tpr-error: #c0392b;
	--tpr-success: #1f9d6b;
	--tpr-ring: rgba(42, 181, 181, 0.32);
	--tpr-radius: 16px;
	--tpr-radius-sm: 11px;
	--tpr-shadow: 0 1px 2px rgba(18, 33, 46, 0.04), 0 12px 30px -18px rgba(18, 33, 46, 0.25);

	box-sizing: border-box;
	width: 100%;
	max-width: 860px;
	margin: 0 auto;
	color: var(--tpr-text);
	font-size: 15px;
	line-height: 1.5;
	font-family: var(--e-global-typography-primary-font-family, "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
	font-weight: 500;
}

.tpr-form *,
.tpr-form *::before,
.tpr-form *::after {
	box-sizing: border-box;
}

.tpr-form [hidden] {
	display: none !important;
}

/* Reveal once both the stylesheet and the JS module are ready. */
.tpr-form.is-ready .tpr-ui {
	display: block;
}

.tpr-form.is-ready .tpr-skeleton {
	display: none;
}

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

.tpr-steps {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.tpr-steps__item {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: var(--tpr-radius);
	background: var(--tpr-bg);
	border: 1px solid var(--tpr-border);
	box-shadow: var(--tpr-shadow);
	color: var(--tpr-muted);
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.tpr-steps__item.is-active {
	color: var(--tpr-text);
	border-color: var(--tpr-accent);
}

.tpr-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border-radius: 50%;
	border: 1px solid var(--tpr-border);
	color: var(--tpr-text);
	font-weight: 600;
	font-size: 14px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tpr-steps__item.is-active .tpr-steps__num {
	background: var(--tpr-accent);
	border-color: var(--tpr-accent);
	color: #fff;
}

.tpr-steps__item.is-done .tpr-steps__num {
	background: var(--tpr-mint);
	border-color: var(--tpr-mint);
	color: #fff;
}

/* ---- Pages & fields ---- */

.tpr-page {
	background: var(--tpr-bg);
	border: 1px solid var(--tpr-border);
	border-radius: var(--tpr-radius);
	box-shadow: var(--tpr-shadow);
	padding: 28px;

	/* Step fade. FADE_MS in assets/js/frontend.js must match this duration. */
	transition: opacity 150ms ease;
}

.tpr-wizard.is-fading .tpr-page {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.tpr-page {
		transition: none;
	}

	/* Skip the fade entirely rather than blanking the step for 150ms. */
	.tpr-wizard.is-fading .tpr-page {
		opacity: 1;
	}
}

.tpr-page__title {
	margin: 0 0 20px;
	font-size: 20px;
	font-weight: 600;
	color: var(--tpr-text);
}

.tpr-field {
	display: block;
	margin-bottom: 16px;
}

.tpr-field__label {
	display: block;
	font-weight: 600;
	font-size: 0.88rem;
	margin-bottom: 7px;
	color: var(--tpr-ink-soft);
}

.tpr-field--required .tpr-field__label::after {
	content: " *";
	color: var(--tpr-accent);
}

/* Helper text under a field / control (matches the mockup .hint). */
.tpr-form .hint {
	font-size: 0.8rem;
	color: var(--tpr-muted);
	margin-top: 6px;
}

.tpr-form input.is-invalid,
.tpr-form textarea.is-invalid {
	border-color: var(--tpr-error);
	background: #fef5f5;
}

.tpr-form input[type="text"],
.tpr-form input[type="email"],
.tpr-form input[type="tel"],
.tpr-form input[type="password"],
.tpr-form input[type="number"],
.tpr-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--tpr-border);
	border-radius: var(--tpr-radius-sm);
	background: var(--tpr-field);
	color: var(--tpr-text);
	font: inherit;
	font-size: 0.95rem;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.tpr-form input::placeholder,
.tpr-form textarea::placeholder {
	color: #aab4bf;
}

.tpr-form input:hover,
.tpr-form textarea:hover {
	border-color: var(--tpr-line-strong);
}

.tpr-form input:focus,
.tpr-form textarea:focus {
	outline: none;
	border-color: var(--tpr-accent);
	background: #fff;
	box-shadow: 0 0 0 4px var(--tpr-ring);
}

.tpr-form textarea {
	resize: vertical;
	min-height: 90px;
	line-height: 1.5;
}

/* ---- Two-column grid ---- */

.tpr-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.tpr-grid-2 .tpr-field {
	margin-bottom: 0;
}

.tpr-col-span {
	grid-column: 1 / -1;
}

.tpr-inline {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.tpr-inline input {
	flex: 1;
}

/* ---- Service selector (svc-grid) — from the TripThis profile mockup ---- */

.tpr-form .svc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 2px;
}

.tpr-form .svc {
	position: relative;
	cursor: pointer;
	border: 1.5px solid var(--tpr-border);
	border-radius: 13px;
	padding: 16px 14px;
	background: var(--tpr-field);
	transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
	display: flex;
	flex-direction: column;
	gap: 9px;
	text-align: left;
	font-family: inherit;
}

.tpr-form .svc:hover {
	border-color: var(--tpr-line-strong);
	border-radius: 13px;
}

.tpr-form .svc:focus-visible {
	outline: none;
	border-color: var(--tpr-accent);
	border-radius: 13px;
	box-shadow: 0 0 0 3px var(--tpr-ring);
}

.tpr-form .svc__ico {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: #eaf1f5;
	display: grid;
	place-items: center;
	color: var(--tpr-ink-soft);
}

.tpr-form .svc__ico svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	fill: none;
}

.tpr-form .svc__name {
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--tpr-text);
}

.tpr-form .svc__check {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	border: 2px solid var(--tpr-line-strong);
	background: #fff;
	display: grid;
	place-items: center;
	transition: 0.15s;
}

.tpr-form .svc__check svg {
	width: 12px;
	height: 12px;
	stroke: #fff;
	fill: none;
	opacity: 0;
}

.tpr-form .svc[aria-pressed="true"] {
	border-color: var(--tpr-accent);
	border-radius: 13px;
	background: #e9f7f7;
	box-shadow: 0 0 0 3px var(--tpr-ring);
}

.tpr-form .svc[aria-pressed="true"] .svc__ico {
	background: var(--tpr-accent);
	color: #fff;
}

.tpr-form .svc[aria-pressed="true"] .svc__check {
	background: var(--tpr-accent);
	border-color: var(--tpr-accent);
}

.tpr-form .svc[aria-pressed="true"] .svc__check svg {
	opacity: 1;
}

/* ---- Privacy-policy consent ---- */

.tpr-consent {
	margin-top: 2px;
}

.tpr-consent__row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-size: 0.92rem;
	color: var(--tpr-ink-soft);
}

.tpr-consent__box {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--tpr-accent);
	cursor: pointer;
}

.tpr-consent__box.is-invalid {
	outline: 2px solid var(--tpr-error);
	outline-offset: 2px;
	border-radius: 4px;
}

.tpr-consent__text {
	line-height: 1.4;
}

.tpr-consent__text::after {
	content: " *";
	color: var(--tpr-accent);
}

.tpr-consent__text a {
	color: var(--tpr-accent);
	font-weight: 600;
	text-decoration: underline;
}

.tpr-consent__text a:hover {
	color: var(--tpr-accent-dark);
}

/* ---- Password requirements ---- */

.tpr-pwreq {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 16px;
	font-size: 12.5px;
	color: var(--tpr-muted);
}

.tpr-pwreq li {
	position: relative;
	padding-left: 20px;
}

.tpr-pwreq li::before {
	content: "○";
	position: absolute;
	left: 0;
	color: var(--tpr-muted);
}

.tpr-pwreq li.is-ok {
	color: var(--tpr-success);
}

.tpr-pwreq li.is-ok::before {
	content: "✓";
	color: var(--tpr-success);
}

/* ---- OTP ---- */

.tpr-otp {
	display: flex;
	gap: 8px;
	margin-top: 8px;
	max-width: 360px;
}

.tpr-otp input {
	flex: 1;
}

.tpr-otp__notice,
.tpr-otp__error,
.tpr-otp__verified {
	display: block;
	font-size: 12.5px;
	margin-top: 6px;
}

.tpr-otp__notice {
	color: var(--tpr-muted);
}

.tpr-otp__error {
	color: var(--tpr-error);
}

.tpr-otp__verified {
	color: var(--tpr-success);
	font-weight: 600;
}

/* ---- Nav / buttons ---- */

.tpr-nav {
	display: flex;
	/* Back sits directly left of Next / Submit. */
	justify-content: flex-end;
	gap: 10px;
	margin-top: 20px;
}

.tpr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 11px 22px;
	border: 1px solid var(--tpr-border);
	border-radius: 999px;
	background: #fff;
	color: var(--tpr-text);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.tpr-btn:hover:not(:disabled) {
	border-color: var(--tpr-accent);
	color: var(--tpr-accent);
}

.tpr-btn:disabled {
	opacity: 0.5;
	cursor: default;
}

.tpr-btn--primary {
	background: var(--tpr-accent);
	border-color: var(--tpr-accent);
	color: #fff;
	box-shadow: var(--tpr-shadow);
}

.tpr-btn--primary:hover:not(:disabled) {
	background: var(--tpr-accent-dark);
	border-color: var(--tpr-accent-dark);
	color: #fff;
}

.tpr-btn--back {
	background: var(--tpr-bg-soft);
	color: var(--tpr-muted);
}

.tpr-btn--icon {
	padding: 0 12px;
	background: none;
	border: none;
	color: var(--ttn-teal, var(--tpr-accent));
}

.tpr-btn--icon:hover:not(:disabled) {
	color: var(--ttn-teal, var(--tpr-accent));
	background: none;
}

.tpr-eye {
	display: block;
}

.tpr-btn--link {
	padding: 0 8px;
	background: none;
	border: none;
	color: var(--ttn-teal, var(--tpr-accent));
	text-decoration: underline;
}

.tpr-btn--link:hover:not(:disabled) {
	color: var(--ttn-teal, var(--tpr-accent));
	background: none;
}

/* ---- Success ---- */

.tpr-success {
	border: 1px solid var(--tpr-success);
	background: #f0f9f2;
	border-radius: var(--tpr-radius);
	box-shadow: var(--tpr-shadow);
	padding: 28px;
}

.tpr-success h3 {
	margin: 0 0 8px;
	color: var(--tpr-success);
}

.tpr-success__links {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 0;
	margin-top: 16px;
}

/* ---- Responsive ---- */

@media (max-width: 640px) {
	.tpr-steps__label {
		display: none;
	}

	.tpr-grid-2 {
		grid-template-columns: 1fr;
	}

	.tpr-grid-2 .tpr-field {
		margin-bottom: 16px;
	}

	.tpr-pwreq {
		grid-template-columns: 1fr;
	}

	.tpr-form .svc-grid {
		grid-template-columns: 1fr;
	}

	.tpr-page {
		padding: 20px;
	}
}