/*
 * Login (488) / Register (526): OLX-style single card with a sign-in method chooser.
 * The theme's own forms stay in the page (assets/auth-pages.js moves them into views).
 * Brand: primary #283A97, accent #ED1C24.
 */

.sp-auth .adt-sign-up-section {
	background: #f5f6fa !important;
	padding: 3em 0 5em !important;
}
.sp-auth .adt-sign-up-section::before,
.sp-auth .adt-sign-up-section::after {
	display: none !important;
}
.sp-auth .adt-sign-up-section .left-content {
	display: none !important;
}
.sp-auth .adt-sign-up-section .row > .col-lg-5 {
	flex: 0 0 100%;
	max-width: 100%;
	width: 100%;
}
.sp-auth .adt-signup-right-content {
	max-width: 540px;
	margin: 0 auto;
	padding: 36px 44px 32px;
	border-radius: 8px;
	box-shadow: 0 4px 30px rgba(40, 58, 151, 0.1);
	font-family: Poppins, sans-serif;
}

/* Hide the theme's heading / cross-links: the card has its own. Keep them hidden until the JS has run. */
.sp-auth .adt-signup-right-content > h4,
.sp-auth .adt-signup-right-content > p,
.sp-auth .adt-signup-right-content form .option-social,
.sp-auth .adt-signup-right-content form .option-social + .field-box,
.sp-auth .adt-signup-right-content form .social-list,
.sp-auth .adt-signup-right-content form .botm-question-text {
	display: none !important;
}
.sp-auth-choose .adt-signup-right-content > form,
.sp-auth-view-otp .adt-signup-right-content > form,
.sp-auth-view-email #login_with_phone,
.sp-auth-view-email #adforest-number-sign-up,
.sp-auth-view-phone #adforest_login_user,
.sp-auth-view-phone #adforest-signup-form {
	display: none !important;
}

/* Card header */
.sp-auth-head {
	text-align: center;
}
.sp-auth-logo {
	display: inline-block;
	margin-bottom: 22px;
}
.sp-auth-logo img {
	height: 44px;
	width: auto;
}
.sp-auth-title {
	font-size: 23px !important;
	line-height: 1.3;
	font-weight: 600 !important;
	color: #242424 !important;
	margin: 0 0 8px !important;
}
.sp-auth-sub {
	font-size: 14px !important;
	color: #555 !important;
	margin: 0 0 4px !important;
}

/* Method chooser */
.sp-auth-methods {
	margin-top: 28px;
}
.sp-auth-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	min-height: 54px;
	margin: 0 0 12px;
	padding: 10px 16px;
	background: #fff;
	border: 1px solid #283A97;
	border-radius: 6px;
	color: #242424 !important;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color 0.15s, box-shadow 0.15s;
}
.sp-auth-btn:hover,
.sp-auth-btn:focus-visible {
	background: rgba(40, 58, 151, 0.06);
	box-shadow: inset 0 0 0 1px #283A97;
	outline: none;
}
.sp-auth-btn svg {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
}
.sp-auth-btn .sp-ico {
	fill: none;
	stroke: #283A97;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.sp-auth-or {
	margin: 18px 0 20px;
	text-align: center;
	font-size: 14px;
	color: #555;
	text-transform: uppercase;
}
.sp-auth-terms {
	margin: 14px 0 0;
	text-align: center;
	font-size: 13px;
	line-height: 1.6;
	color: #555;
}
.sp-auth-terms a {
	color: #242424;
	font-weight: 600;
	text-decoration: underline;
}
.sp-auth-foot {
	margin-top: 26px;
	text-align: center;
	font-size: 15px;
}
.sp-auth-foot a {
	color: #283A97 !important;
	font-weight: 600;
}
.sp-auth-foot a:hover {
	color: #ED1C24 !important;
}

/* Form view */
.sp-auth-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 18px;
	padding: 0;
	background: none;
	border: 0;
	color: #283A97 !important;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none !important;
	cursor: pointer;
}
.sp-auth-back:hover {
	color: #ED1C24 !important;
}
.sp-auth-form .sp-auth-head {
	margin-bottom: 24px;
}
.sp-auth-form .sp-auth-logo {
	display: none;
}
.sp-auth .adt-signup-right-content form .field-box {
	margin-bottom: 18px;
}
.sp-auth .adt-signup-right-content form .field-box input {
	height: 48px;
	border: 1px solid #d9dcea;
	background: #fff;
	border-radius: 6px;
}
.sp-auth .adt-signup-right-content form .field-box input:focus {
	border-color: #283A97;
}
.sp-auth .adt-signup-right-content form .field-box button {
	margin-top: 12px;
	height: 50px;
	border-radius: 6px;
	font-size: 16px;
}
.sp-auth .adt-signup-right-content form .terms-link,
.sp-auth .adt-signup-right-content form .pretty label a {
	color: #283A97;
}

/* Login with Phone: "No account with this number yet. Create an account →" */
.sp-auth-notice {
	margin-top: 10px;
	padding: 10px 12px;
	border-left: 3px solid #283A97;
	border-radius: 4px;
	background: rgba(40, 58, 151, 0.06);
	font-size: 14px;
	line-height: 1.5;
	color: #242424;
}
.sp-auth-notice[hidden] {
	display: none !important;
}
.sp-auth-notice a {
	color: #283A97 !important;
	font-weight: 600;
	white-space: nowrap;
}
.sp-auth-notice a:hover {
	color: #ED1C24 !important;
}

/* Phone code step (the theme's #verification_modal form, moved into the card by auth-pages.js) */
.sp-auth-otp[hidden] {
	display: none !important;
}
.sp-auth-view-otp .sp-auth-sub {
	font-size: 15px !important;
	line-height: 1.6;
}
.sp-auth-sub strong {
	color: #242424;
	font-weight: 600;
	white-space: nowrap;
}
.sp-auth-otp .modal-body,
.sp-auth-otp .modal-footer {
	display: block;
	padding: 0;
	border: 0;
}
.sp-auth-otp .form-group {
	margin: 4px 0 22px;
}
.sp-otp-boxes {
	display: flex;
	justify-content: center;
	gap: 10px;
}
.sp-otp-box {
	width: 52px;
	height: 60px;
	padding: 0;
	border: 1px solid #d9dcea;
	border-radius: 6px;
	background: #fff;
	text-align: center;
	font-size: 26px;
	font-weight: 600;
	color: #242424;
	caret-color: #283A97;
}
.sp-otp-box:focus {
	outline: none;
	border-color: #283A97;
	box-shadow: 0 0 0 3px rgba(40, 58, 151, 0.12);
}
.sp-otp-boxes.is-invalid .sp-otp-box {
	border-color: #ED1C24;
}
.sp-otp-error {
	margin: 10px 0 0 !important;
	color: #ED1C24 !important;
	font-size: 14px !important;
	text-align: center;
}
.sp-otp-status {
	margin: 10px 0 0 !important;
	color: #283A97 !important;
	font-size: 14px !important;
	font-weight: 500;
	text-align: center;
}
/* The code verifies itself when all boxes are filled: no Verify buttons. */
.sp-auth-otp #sb_verify_otp,
.sp-auth-otp #sb_verification_ph_back,
.sp-auth-otp #sb_verification_ph_code {
	display: none !important;
}
.sp-otp-timer {
	margin: 0 !important;
	text-align: center;
	font-size: 15px !important;
	color: #555 !important;
}
.sp-otp-timer[hidden] {
	display: none !important;
}
.sp-auth-otp #sb_verification_resend {
	display: block;
	width: 100%;
	margin: 2px 0 0;
	padding: 6px;
	background: none !important;
	border: 0 !important;
	color: #283A97 !important;
	font-size: 16px;
	font-weight: 600;
	box-shadow: none !important; /* theme: red glow on .adt-button-dark:hover (!important) */
	outline: none;
}
.sp-auth-otp #sb_verification_resend:hover,
.sp-auth-otp #sb_verification_resend:focus,
.sp-auth-otp #sb_verification_resend:active {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
}
.sp-auth-otp #sb_verification_resend:focus-visible {
	text-decoration: underline;
}
.sp-auth-otp #sb_verification_resend:disabled {
	color: #9aa0b4 !important;
	cursor: default;
}
.sp-auth-otp #sb_verification_resend:not(:disabled):hover {
	color: #ED1C24 !important;
}

/* Phone form submit while the code is being sent (assets/auth-pages.js setBusy): hide the label
   (and the theme's spinner) and show a spinner + "Sending code…" instead. */
.sp-auth button.sp-sending {
	position: relative;
	color: transparent !important;
	opacity: 1 !important;
	transition: none !important; /* the theme's 0.3s color fade would overlap the two labels */
	cursor: progress;
}
.sp-auth button.sp-sending > :not(.sp-sending-label) {
	visibility: hidden;
}
/* Spinner + text in one centred row (added by auth-pages.js), so they never overlap. */
.sp-auth .sp-sending-label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: #fff;
}
.sp-auth .sp-sending-label::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	box-sizing: border-box;
	border: 2.5px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: sp-spin .7s linear infinite;
}
@keyframes sp-spin {
	to { transform: rotate(360deg); }
}

@media (max-width: 575px) {
	.sp-auth .adt-sign-up-section {
		padding: 1.5em 0 5em !important;
	}
	.sp-auth .adt-signup-right-content {
		padding: 28px 20px 24px;
	}
	.sp-auth-title {
		font-size: 21px !important;
	}
	.sp-auth-btn {
		font-size: 15px;
		min-height: 50px;
	}
	.sp-otp-boxes {
		gap: 8px;
	}
	.sp-otp-box {
		width: 44px;
		height: 54px;
		font-size: 22px;
	}
}