/* Setin SMS — login form. Uses Milano theme variables with safe fallbacks. */

.setin-login {
	--setin-dark: var(--color-dark, #111);
	--setin-muted: var(--color-gray-dark, #666);
	--setin-border: var(--color-border, #e5e5e5);
	--setin-error: var(--color-error, #d0473e);
	--setin-success: var(--color-success, #137f24);
	--setin-radius: var(--input-border-radius, 30px);
	--setin-height: var(--input-height, 3.125rem);

	position: relative;
	direction: rtl;
	text-align: center;
	width: 100%;
}

.setin-login [hidden] {
	display: none !important;
}

.setin-login__header {
	margin-bottom: 1.5rem;
}

.setin-login__title {
	margin: 0 0 .5rem;
}

.setin-login__subtitle {
	margin: 0;
	color: var(--setin-muted);
}

.setin-login__row {
	margin: 0 0 1rem !important;
	padding: 0 !important;
	width: 100% !important;
	float: none !important;
}

.setin-login .setin-login__input {
	width: 100%;
	height: calc(var(--setin-height) * 1.3);
	border-radius: var(--setin-radius);
	text-align: right;
	font-size: 1rem;
}

.setin-login .setin-login__input--ltr,
.setin-login .setin-login__input--code {
	direction: ltr;
	text-align: center;
	letter-spacing: .08em;
	font-variant-numeric: tabular-nums;
}

.setin-login .setin-login__input--code {
	font-size: 1.5rem;
	letter-spacing: .6em;
	padding-left: .6em; /* balance trailing letter-spacing */
}

.setin-login .setin-login__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: calc(var(--btn-height, 3.125rem) * 1.3);
	border-radius: var(--btn-radius, 30px);
	background: var(--setin-dark);
	border-color: var(--setin-dark);
	color: #fff;
	margin-top: .5rem;
}

.setin-login .setin-login__submit:disabled {
	opacity: .6;
	cursor: wait;
}

.setin-login .is-busy .setin-login__submit::after {
	content: "";
	width: 1em;
	height: 1em;
	margin-inline-start: .6em;
	border: 2px solid currentColor;
	border-inline-end-color: transparent;
	border-radius: 50%;
	animation: setin-spin .7s linear infinite;
}

@keyframes setin-spin {
	to { transform: rotate(360deg); }
}

.setin-login__links {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.25rem;
}

.setin-login .setin-login__link {
	background: none;
	border: 0;
	padding: 0;
	height: auto;
	min-height: 0;
	color: var(--setin-dark);
	font: inherit;
	font-size: .875rem;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.setin-login .setin-login__link:disabled {
	color: var(--setin-muted);
	text-decoration: none;
	cursor: default;
}

.setin-login__check {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	margin: .25rem 0 1rem;
	text-align: right;
	font-size: .875rem;
	color: var(--setin-muted);
	cursor: pointer;
}

.setin-login__check input {
	flex: none;
	margin-top: .25em;
}

.setin-login__alert {
	margin: 0 0 1rem;
	padding: .75rem 1rem;
	border-radius: var(--rounded-radius, 10px);
	font-size: .875rem;
	background: rgba(var(--color-error-rgb, 208, 71, 62), .08);
	color: var(--setin-error);
}

.setin-login__alert.is-success {
	background: rgba(var(--color-success-rgb, 19, 127, 36), .08);
	color: var(--setin-success);
}

.setin-login__terms {
	margin: 1.25rem 0 0;
	font-size: .8125rem;
	color: var(--setin-muted);
}

.setin-login__terms a {
	color: inherit;
	text-decoration: underline;
}

/* Honeypot: hidden from people, visible to naive bots. */
.setin-login__hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.setin-login.is-done form {
	pointer-events: none;
	opacity: .6;
}

/* My account page card. */
.setin-login-page {
	max-width: 30rem;
	margin: 0 auto;
	padding: 2.5rem 2rem;
	background: var(--color-background, #fff);
	border: 1px solid var(--setin-border, #e5e5e5);
	border-radius: 1.5rem;
}

.setin-login-page--checkout {
	margin: 1rem auto 3rem;
}

.setin-login-page__note {
	margin: 0 0 1.5rem;
	text-align: center;
	color: #555;
}

@media (max-width: 575px) {
	.setin-login-page {
		padding: 2rem 1.25rem;
		border-radius: 1rem;
	}

	.setin-login .setin-login__input,
	.setin-login .setin-login__submit {
		height: var(--setin-height);
	}
}