/* =========================================
   SOUKPRO AUTH PAGES
   Login, Register, Reset Password
   Two-column layout, steps, OTP
   ========================================= */

/* --- Two-Column Layout --- */
.sp-auth__layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 100vh;
}

/* --- Branding Side --- */
.sp-auth__branding {
	background: linear-gradient(135deg, var(--sp-color-primary) 0%, var(--sp-color-primary-dark) 100%);
	color: var(--sp-color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-space-3xl);
	position: relative;
	overflow: hidden;
}

.sp-auth__branding::before {
	content: '';
	position: absolute;
	top: -30%;
	right: -20%;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
}

.sp-auth__branding-inner {
	position: relative;
	z-index: 1;
	max-width: 400px;
}

.sp-auth__logo {
	display: inline-block;
	margin-bottom: var(--sp-space-xl);
}

.sp-auth__logo img,
.sp-auth__logo .custom-logo {
	max-height: 48px;
}

.sp-auth__logo-text {
	font-family: var(--sp-font-heading);
	font-size: var(--sp-text-2xl);
	font-weight: var(--sp-font-weight-bold);
	color: var(--sp-color-white);
}

.sp-auth__branding-title {
	font-family: var(--sp-font-heading);
	font-size: var(--sp-text-3xl);
	font-weight: var(--sp-font-weight-bold);
	color: var(--sp-color-white);
	margin-bottom: var(--sp-space-md);
}

.sp-auth__branding-desc {
	font-size: var(--sp-text-base);
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: var(--sp-space-xl);
	line-height: 1.7;
}

.sp-auth__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-md);
}

.sp-auth__features li {
	display: flex;
	align-items: center;
	gap: var(--sp-space-sm);
	font-size: var(--sp-text-sm);
	color: rgba(255, 255, 255, 0.9);
}

.sp-auth__features .dashicons {
	color: #A7F3D0;
	font-size: 20px;
	width: 20px;
	height: 20px;
}

/* --- Form Side --- */
.sp-auth__form-area {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-space-3xl);
	background: var(--sp-color-bg-alt);
}

.sp-auth__form-wrap {
	width: 100%;
	max-width: 440px;
}

.sp-auth__form-title {
	font-family: var(--sp-font-heading);
	font-size: var(--sp-text-2xl);
	font-weight: var(--sp-font-weight-bold);
	margin-bottom: var(--sp-space-xs);
}

.sp-auth__form-subtitle {
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text-light);
	margin-bottom: var(--sp-space-xl);
}

.sp-auth__form-subtitle a {
	color: var(--sp-color-primary);
	font-weight: var(--sp-font-weight-semibold);
}

/* --- Forms --- */
.sp-auth-form {
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-md);
}

.sp-form-group {
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-xs);
}

.sp-form-group label {
	font-weight: var(--sp-font-weight-semibold);
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text);
}

.sp-input,
.sp-select {
	width: 100%;
	padding: var(--sp-space-sm) var(--sp-space-md);
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius-md);
	font-family: var(--sp-font-body);
	font-size: var(--sp-text-base);
	color: var(--sp-color-text);
	background: var(--sp-color-white);
	transition: border-color var(--sp-transition-fast);
}

.sp-input:focus,
.sp-select:focus {
	outline: none;
	border-color: var(--sp-color-primary);
	box-shadow: 0 0 0 3px var(--sp-color-primary-bg);
}

/* --- Input Group (password toggle) --- */
.sp-input-group {
	position: relative;
}

.sp-input-group .sp-input {
	padding-left: 48px;
}

.sp-input-group__toggle {
	position: absolute;
	left: var(--sp-space-xs);
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	color: var(--sp-color-text-muted);
	padding: var(--sp-space-xs);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --- Checkbox --- */
.sp-checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-space-sm);
	cursor: pointer;
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text);
}

.sp-checkbox input {
	display: none;
}

.sp-checkbox__check {
	width: 20px;
	height: 20px;
	border: 1px solid var(--sp-color-border);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--sp-transition-fast);
	flex-shrink: 0;
}

.sp-checkbox input:checked + .sp-checkbox__check {
	background: var(--sp-color-primary);
	border-color: var(--sp-color-primary);
}

.sp-checkbox input:checked + .sp-checkbox__check::after {
	content: '✓';
	color: white;
	font-size: 12px;
	font-weight: bold;
}

/* --- Form Row --- */
.sp-form-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.sp-link {
	font-size: var(--sp-text-sm);
	color: var(--sp-color-primary);
	font-weight: var(--sp-font-weight-semibold);
	text-decoration: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.sp-link:hover {
	text-decoration: underline;
}

/* --- Alert --- */
.sp-alert {
	display: flex;
	align-items: center;
	gap: var(--sp-space-sm);
	padding: var(--sp-space-sm) var(--sp-space-md);
	border-radius: var(--sp-radius-md);
	font-size: var(--sp-text-sm);
	margin-bottom: var(--sp-space-md);
}

.sp-alert--error {
	background: rgba(239, 68, 68, 0.08);
	color: #EF4444;
	border: 1px solid rgba(239, 68, 68, 0.2);
}

.sp-alert .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* --- Divider --- */
.sp-auth__divider {
	display: flex;
	align-items: center;
	gap: var(--sp-space-md);
	margin: var(--sp-space-lg) 0;
	color: var(--sp-color-text-muted);
	font-size: var(--sp-text-sm);
}

.sp-auth__divider::before,
.sp-auth__divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--sp-color-border-light);
}

/* --- Steps --- */
.sp-steps {
	display: flex;
	gap: var(--sp-space-xs);
	margin-bottom: var(--sp-space-xl);
}

.sp-step {
	display: flex;
	align-items: center;
	gap: var(--sp-space-xs);
	opacity: 0.4;
	transition: opacity var(--sp-transition-fast);
}

.sp-step.is-active {
	opacity: 1;
}

.sp-step.is-done {
	opacity: 0.7;
}

.sp-step__num {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid var(--sp-color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--sp-text-xs);
	font-weight: var(--sp-font-weight-bold);
	color: var(--sp-color-text-muted);
	flex-shrink: 0;
}

.sp-step.is-active .sp-step__num {
	border-color: var(--sp-color-primary);
	background: var(--sp-color-primary);
	color: var(--sp-color-white);
}

.sp-step.is-done .sp-step__num {
	border-color: var(--sp-color-success);
	background: var(--sp-color-success);
	color: var(--sp-color-white);
}

.sp-step__label {
	font-size: var(--sp-text-xs);
	color: var(--sp-color-text-muted);
	white-space: nowrap;
}

.sp-step.is-active .sp-step__label {
	color: var(--sp-color-primary);
	font-weight: var(--sp-font-weight-semibold);
}

/* --- Step Panels --- */
.sp-step-panel {
	display: none;
}

.sp-step-panel.is-active {
	display: block;
}

/* --- Form Nav --- */
.sp-auth-form__nav {
	display: flex;
	gap: var(--sp-space-sm);
	margin-top: var(--sp-space-md);
}

.sp-auth-form__nav .sp-btn--prev {
	flex: 0;
}

.sp-auth-form__nav .sp-btn--next,
.sp-auth-form__nav [data-step="submit"] {
	flex: 1;
}

/* --- Role Cards --- */
.sp-role-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-space-md);
}

.sp-role-card {
	cursor: pointer;
}

.sp-role-card__input {
	display: none;
}

.sp-role-card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	background: var(--sp-color-white);
	border: 2px solid var(--sp-color-border-light);
	border-radius: var(--sp-radius-xl);
	padding: var(--sp-space-xl);
	text-align: center;
	transition: all var(--sp-transition-fast);
}

.sp-role-card__body:hover {
	border-color: var(--sp-color-primary);
}

.sp-role-card__input:checked + .sp-role-card__body {
	border-color: var(--sp-color-primary);
	background: var(--sp-color-primary-bg);
	box-shadow: 0 0 0 4px var(--sp-color-primary-bg);
}

.sp-role-card__icon {
	display: block;
	font-size: 36px;
	width: 36px;
	height: 36px;
	color: var(--sp-color-primary);
	margin-bottom: var(--sp-space-sm);
	flex-shrink: 0;
}

.sp-role-card__title {
	display: block;
	font-family: var(--sp-font-heading);
	font-size: var(--sp-text-lg);
	font-weight: var(--sp-font-weight-bold);
	margin-bottom: var(--sp-space-xs);
}

.sp-role-card__desc {
	display: block;
	width: 100%;
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text-light);
	line-height: 1.6;
}

.sp-role-card__check {
	position: absolute;
	top: var(--sp-space-sm);
	inset-inline-end: var(--sp-space-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid var(--sp-color-border-light);
	background: var(--sp-color-white);
	color: transparent;
	font-size: 12px;
	font-weight: 700;
	transition: all var(--sp-transition-fast);
}

.sp-role-card__input:checked + .sp-role-card__body .sp-role-card__check {
	background: var(--sp-color-primary);
	border-color: var(--sp-color-primary);
	color: var(--sp-color-white);
}

/* --- OTP --- */
.sp-otp-group {
	display: flex;
	gap: var(--sp-space-sm);
	justify-content: center;
	margin-bottom: var(--sp-space-md);
}

.sp-otp__input {
	width: 48px;
	height: 56px;
	border: 2px solid var(--sp-color-border);
	border-radius: var(--sp-radius-md);
	text-align: center;
	font-size: var(--sp-text-xl);
	font-weight: var(--sp-font-weight-bold);
	color: var(--sp-color-text);
	transition: border-color var(--sp-transition-fast);
}

.sp-otp__input:focus {
	outline: none;
	border-color: var(--sp-color-primary);
	box-shadow: 0 0 0 3px var(--sp-color-primary-bg);
}

.sp-otp-resend {
	text-align: center;
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text-muted);
}

/* --- Password Strength --- */
.sp-password-strength {
	height: 4px;
	border-radius: 2px;
	background: var(--sp-color-border-light);
	margin-top: var(--sp-space-xs);
	overflow: hidden;
}

.sp-password-strength__bar {
	height: 100%;
	border-radius: 2px;
	transition: width var(--sp-transition-fast), background var(--sp-transition-fast);
}

.sp-password-strength--weak .sp-password-strength__bar {
	width: 25%;
	background: #EF4444;
}

.sp-password-strength--fair .sp-password-strength__bar {
	width: 50%;
	background: #F59E0B;
}

.sp-password-strength--good .sp-password-strength__bar {
	width: 75%;
	background: #3B82F6;
}

.sp-password-strength--strong .sp-password-strength__bar {
	width: 100%;
	background: var(--sp-color-success);
}

/* --- Reset Success --- */
.sp-reset-success {
	text-align: center;
	padding: var(--sp-space-2xl) 0;
}

.sp-reset-success__icon {
	font-size: 64px;
	width: 64px;
	height: 64px;
	color: var(--sp-color-success);
	margin-bottom: var(--sp-space-md);
	display: inline-block;
}

.sp-reset-success h3 {
	margin-bottom: var(--sp-space-sm);
}

.sp-reset-success p {
	color: var(--sp-color-text-light);
	margin-bottom: var(--sp-space-xl);
}

.sp-reset-desc {
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text-light);
	margin-bottom: var(--sp-space-lg);
	line-height: 1.7;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 768px) {
	.sp-auth__layout {
		grid-template-columns: 1fr;
	}

	.sp-auth__branding {
		padding: var(--sp-space-xl);
		min-height: auto;
	}

	.sp-auth__branding-inner {
		text-align: center;
	}

	.sp-auth__branding-title {
		font-size: var(--sp-text-2xl);
	}

	.sp-auth__features {
		align-items: center;
	}

	.sp-auth__form-area {
		padding: var(--sp-space-xl);
	}

	.sp-role-cards {
		grid-template-columns: 1fr;
	}

	.sp-steps {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.sp-step__label {
		display: none;
	}

	.sp-otp__input {
		width: 40px;
		height: 48px;
		font-size: var(--sp-text-lg);
	}
}

/* =========================================
   CARD MODULE
   Auth screens rendered through the YW Core
   shortcodes inside the default page template
   ========================================= */

.sp-auth-section {
	display: flex;
	justify-content: center;
	padding: var(--sp-space-3xl) var(--sp-space-lg);
}

.sp-auth-card {
	width: 100%;
	max-width: 460px;
	background: var(--sp-color-white);
	border: 1px solid var(--sp-color-border-light);
	border-radius: var(--sp-radius-xl);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
	padding: var(--sp-space-2xl);
}

.sp-auth-card__head {
	text-align: center;
	margin-bottom: var(--sp-space-lg);
}

.sp-auth-card__brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-space-sm);
	margin-bottom: var(--sp-space-md);
}

.sp-auth-card__brand .custom-logo-link {
	display: inline-flex;
}

.sp-auth-card__brand .custom-logo-link img {
	max-height: 44px;
	width: auto;
}

.sp-auth-card__brand-name {
	font-family: var(--sp-font-heading);
	font-size: var(--sp-text-xl);
	font-weight: var(--sp-font-weight-bold);
	color: var(--sp-color-text);
}

.sp-auth-card__title {
	font-family: var(--sp-font-heading);
	font-size: var(--sp-text-2xl);
	font-weight: var(--sp-font-weight-bold);
	color: var(--sp-color-text);
	margin-bottom: var(--sp-space-xs);
}

.sp-auth-card__sub {
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text-light);
	line-height: 1.7;
}

.sp-auth-card__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-space-sm);
	margin-top: var(--sp-space-lg);
	padding-top: var(--sp-space-lg);
	border-top: 1px solid var(--sp-color-border-light);
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text-muted);
	text-align: center;
}

.sp-auth-card__actions .sp-link {
	font-size: var(--sp-text-sm);
}

/* --- Label + Required --- */
.sp-auth-label {
	display: block;
	font-weight: var(--sp-font-weight-semibold);
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text);
	margin-bottom: var(--sp-space-xs);
}

.sp-required {
	color: #EF4444;
}

/* --- Alert icon/body --- */
.sp-alert__icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 2px;
}

.sp-alert__body p {
	margin: 0;
}

.sp-alert__body p + p {
	margin-top: var(--sp-space-xs);
}

.sp-alert--success {
	background: rgba(16, 185, 129, 0.08);
	color: #10B981;
	border: 1px solid rgba(16, 185, 129, 0.25);
}

/* --- Two-column inline fields --- */
.sp-auth-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-space-md);
}

/* --- Password hint / validation --- */
.sp-auth-hint {
	display: block;
	font-size: var(--sp-text-xs);
	color: var(--sp-color-text-muted);
	margin-top: var(--sp-space-xs);
}

.sp-auth-msg {
	display: none;
	font-size: var(--sp-text-xs);
	color: #EF4444;
	margin-top: var(--sp-space-xs);
}

.sp-auth-msg:not([hidden]) {
	display: block;
}

.sp-input.is-invalid {
	border-color: #EF4444;
}

.sp-input.is-invalid:focus {
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

/* --- Password toggle --- */
.sp-pass-toggle {
	position: absolute;
	left: var(--sp-space-xs);
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	color: var(--sp-color-text-muted);
	padding: var(--sp-space-xs);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color var(--sp-transition-fast);
}

.sp-pass-toggle:hover,
.sp-pass-toggle.is-active {
	color: var(--sp-color-primary);
}

.sp-pass-toggle__icon {
	width: 20px;
	height: 20px;
	display: block;
}

.sp-pass-toggle__icon-hide {
	display: none;
}

.sp-pass-toggle.is-active .sp-pass-toggle__icon-show {
	display: none;
}

.sp-pass-toggle.is-active .sp-pass-toggle__icon-hide {
	display: block;
}

/* --- Honeypot: hidden without an off-screen overflow --- */
.sp-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	left: 0;
	top: 0;
}

/* --- Card module responsive --- */
@media (max-width: 480px) {
	.sp-auth-section {
		padding: var(--sp-space-xl) var(--sp-space-md);
	}

	.sp-auth-card {
		padding: var(--sp-space-xl);
		box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
	}

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