/* SMS Suite — login / OTP form.
 * Clean self-contained design that pulls the SITE's live brand colour
 * (WoodMart's --wd-primary-color) so it always matches. RTL + responsive. */
.sms-suite-login {
	--sms-accent: var(--wd-primary-color, #6b6bb3);
	--sms-accent-hover: var(--wd-link-color, #4a4ab2);
	--sms-field: #fff;
	--sms-border: #e4e4ee;
	--sms-text: #2a2a3a;
	--sms-muted: #8a8a9a;
	--sms-radius: 10px;

	direction: rtl;
	text-align: right;
	font-family: inherit;
	color: var(--sms-text);
	max-width: 440px;
	margin: 0 auto;
}

.sms-suite-wc-wrap {
	direction: rtl;
	max-width: 460px;
	margin: 0 auto 20px;
	padding: 22px 20px;
	background: #fff;
	border: 1px solid #ececf3;
	border-radius: 14px;
	box-shadow: 0 6px 22px rgba(40, 40, 80, .07);
}
.sms-suite-wc-wrap > h3,
.sms-suite-wc-wrap > h4 {
	margin: 0 0 16px;
	font-size: 17px;
	font-weight: 800;
	color: var(--sms-text, #2a2a3a);
}

.sms-suite-login .sms-suite-row { margin: 0 0 14px; }

.sms-suite-login label {
	display: block;
	margin: 0 0 7px;
	font-size: 13px;
	font-weight: 700;
	color: var(--sms-muted);
}

/* Inputs — force a clean white field (kills the theme/autofill blue tint). */
.sms-suite-login input[type="tel"],
.sms-suite-login input[type="text"],
.sms-suite-login input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	height: 50px;
	padding: 0 14px;
	font-size: 16px;
	line-height: normal;
	color: var(--sms-text);
	background: var(--sms-field) !important;
	border: 1.5px solid var(--sms-border) !important;
	border-radius: var(--sms-radius) !important;
	box-shadow: none !important;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
	direction: ltr;
	text-align: right;
}
.sms-suite-login input:focus {
	border-color: var(--sms-accent) !important;
	box-shadow: 0 0 0 3px rgba(107, 107, 179, .18) !important;
}
.sms-suite-login input:-webkit-autofill {
	-webkit-text-fill-color: var(--sms-text);
	-webkit-box-shadow: 0 0 0 1000px #fff inset !important;
}
.sms-suite-login .sms-suite-code-row input {
	text-align: center;
	letter-spacing: .45em;
	font-size: 20px;
	font-weight: 700;
	padding-right: .45em;
}

/* Actions — primary button uses the site brand colour. */
.sms-suite-login .sms-suite-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
}
.sms-suite-login .sms-suite-actions .button,
.sms-suite-login button.button {
	flex: 1 1 100%;
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 18px;
	font-size: 15.5px;
	font-weight: 800;
	color: #fff !important;
	background: var(--sms-accent) !important;
	border: 0 !important;
	border-radius: var(--sms-radius) !important;
	box-shadow: 0 5px 14px rgba(107, 107, 179, .28) !important;
	cursor: pointer;
	text-shadow: none;
	transition: background .15s ease, transform .06s ease;
}
.sms-suite-login .button:hover { background: var(--sms-accent-hover) !important; }
.sms-suite-login .button:active { transform: translateY(1px); }
.sms-suite-login .button:disabled,
.sms-suite-login .button[disabled] { opacity: .6; cursor: default; box-shadow: none !important; }

/* Secondary links — brand link colour */
.sms-suite-login .sms-suite-link-change,
.sms-suite-login .sms-suite-link-resend,
.sms-suite-login .sms-suite-link-voice {
	flex: 0 0 auto;
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	color: var(--sms-accent-hover) !important;
	opacity: .9;
}
.sms-suite-login .sms-suite-link-change:hover,
.sms-suite-login .sms-suite-link-resend:hover,
.sms-suite-login .sms-suite-link-voice:hover { opacity: 1; text-decoration: underline; }

/* Feedback */
.sms-suite-login .sms-suite-feedback {
	margin-top: 12px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.7;
	text-align: center;
	unicode-bidi: plaintext;
	overflow-wrap: anywhere;
}
.sms-suite-login .sms-suite-feedback:empty { display: none; }
.sms-suite-login .sms-suite-feedback:not(:empty) { padding: 10px 12px; border-radius: 9px; }
.sms-suite-login .sms-suite-feedback.is-error { color: #a8262b; background: rgba(214, 54, 56, .08); }
.sms-suite-login .sms-suite-feedback.is-success { color: #136b2c; background: rgba(34, 153, 84, .1); }

/* Opt-out */
.sms-suite-login.sms-suite-optout label { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-weight: 600; }

@media (max-width: 520px) {
	.sms-suite-wc-wrap, .sms-suite-login { max-width: 100%; }
	.sms-suite-wc-wrap { padding: 18px 15px; }
	.sms-suite-login input[type="tel"],
	.sms-suite-login input[type="text"],
	.sms-suite-login input[type="password"] { height: 52px; }
	.sms-suite-login .sms-suite-actions .button,
	.sms-suite-login button.button { min-height: 52px; }
}
