/* auth.css - اسکوپ‌شده توسط tests/css_scope.py (همه انتخابگرها زیر ریشه .wsw-shop / .wsw-auth) */
.wsw-auth.wsw-auth {--a-primary: var(--wsw-primary, #2f86ff);
	--a-primary-dark: var(--wsw-primary-dark, #1e6fe0);
	--a-ink: var(--wsw-ink, #0f172a);
	--a-muted: var(--wsw-muted, #64748b);
	--a-border: var(--wsw-border, #e2e8f0);
	--a-surface: var(--wsw-surface, #ffffff);
	--a-danger: var(--wsw-danger, #e11d48);
	--a-success: var(--wsw-success, #059669);
	--a-radius: var(--wsw-radius-lg, 30px);
	--a-radius-sm: var(--wsw-radius-sm, 12px);
	display: block; box-sizing: border-box; width: 100%; max-width: 440px; margin: 24px auto; padding: 0 16px;
	color: var(--a-ink); font-family: var(--wsw-font, inherit); font-size: 15px; line-height: 1.8; text-align: center; direction: rtl;}
.wsw-auth.wsw-auth *,
.wsw-auth.wsw-auth *::before,
.wsw-auth.wsw-auth *::after {box-sizing: border-box;}
.wsw-dark .wsw-auth.wsw-auth,
body.wsw-dark-body .wsw-auth.wsw-auth {--a-ink: #e4e6ea; --a-muted: #a0a6ad; --a-border: #262c38; --a-surface: #161b24;}
.wsw-auth.wsw-auth .wsw-auth__card {padding: 32px 28px 26px; border: 1px solid var(--wsw-glass-border, rgba(226, 232, 240, .7)); border-radius: var(--a-radius);
	background: var(--wsw-glass-bg, hsla(0, 0%, 100%, .88)); -webkit-backdrop-filter: var(--wsw-glass-blur, blur(24px)); backdrop-filter: var(--wsw-glass-blur, blur(24px));
	box-shadow: var(--wsw-shadow, 0 10px 30px rgba(15, 23, 42, .08));}
.wsw-auth.wsw-auth .wsw-auth__brand {display: flex; justify-content: center; margin-bottom: 18px;}
.wsw-auth.wsw-auth .wsw-auth__brand img {max-height: 56px; width: auto;}
.wsw-auth.wsw-auth .wsw-auth__mark {display: grid; place-items: center; width: 64px; height: 64px; border-radius: 22px; color: #fff;
	background: linear-gradient(135deg, var(--a-primary), var(--a-primary-dark)); box-shadow: 0 12px 28px color-mix(in srgb, var(--a-primary) 35%, transparent);}
.wsw-auth.wsw-auth .wsw-auth__step {display: none; flex-direction: column; gap: 14px; margin: 0; padding: 0; border: 0; background: none;}
.wsw-auth.wsw-auth .wsw-auth__step.is-active {display: flex; animation: wsw-auth-in .25s ease;}
@keyframes wsw-auth-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wsw-auth.wsw-auth .wsw-auth__title {margin: 0; padding: 0; font-size: 20px; font-weight: 800; line-height: 1.5; color: var(--a-ink);}
.wsw-auth.wsw-auth .wsw-auth__hint {margin: 0; color: var(--a-muted); font-size: 13.5px;}
.wsw-auth.wsw-auth .wsw-auth__hint b {color: var(--a-ink);}
.wsw-auth.wsw-auth .wsw-auth__field {position: relative; display: block; margin: 0;}
.wsw-auth.wsw-auth .wsw-auth__ico {position: absolute; top: 50%; inset-inline-start: 16px; transform: translateY(-50%); color: var(--a-muted); display: flex; pointer-events: none;}
.wsw-auth.wsw-auth .wsw-auth__input {display: block; width: 100%; height: 54px; margin: 0; padding: 0 46px; border: 1.5px solid var(--a-border); border-radius: var(--a-radius-sm);
	background: var(--a-surface); color: var(--a-ink); font: inherit; font-size: 17px; letter-spacing: .04em; text-align: center; direction: ltr; box-shadow: none; outline: 0; appearance: none; -webkit-appearance: none;
	transition: border-color .15s, box-shadow .15s;}
.wsw-auth.wsw-auth .wsw-auth__input::placeholder {color: #94a3b8; letter-spacing: 0;}
.wsw-auth.wsw-auth .wsw-auth__input:focus {border-color: var(--a-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a-primary) 16%, transparent);}
.wsw-auth.wsw-auth .wsw-auth__otp {position: relative; display: flex; gap: 8px; justify-content: center; direction: ltr; cursor: text;}
.wsw-auth.wsw-auth .wsw-auth__otp-real {position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: transparent; caret-color: transparent;
	opacity: .011; font-size: 16px;  letter-spacing: 1.2em; outline: 0; appearance: none; -webkit-appearance: none; box-shadow: none;}
.wsw-auth.wsw-auth .wsw-auth__box {display: grid; place-items: center; flex: 1; max-width: 54px; height: 60px; border: 1.5px solid var(--a-border); border-radius: var(--a-radius-sm);
	background: var(--a-surface); color: var(--a-ink); font-size: 24px; font-weight: 800; transition: border-color .15s, box-shadow .15s, transform .15s; user-select: none;}
.wsw-auth.wsw-auth .wsw-auth__box.is-filled {border-color: color-mix(in srgb, var(--a-primary) 55%, var(--a-border));}
.wsw-auth.wsw-auth .wsw-auth__box.is-active {border-color: var(--a-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a-primary) 16%, transparent); transform: translateY(-2px);}
.wsw-auth.wsw-auth .wsw-auth__otp.is-error .wsw-auth__box {border-color: var(--a-danger); animation: wsw-auth-shake .35s;}
@keyframes wsw-auth-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.wsw-auth.wsw-auth .wsw-auth__btn {display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 54px; margin: 0; padding: 0 20px; border: 0; border-radius: 16px;
	background: linear-gradient(135deg, var(--a-primary), var(--a-primary-dark)); color: #fff; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
	box-shadow: 0 10px 24px color-mix(in srgb, var(--a-primary) 32%, transparent); transition: filter .15s, transform .15s;}
@media (hover: hover) { .wsw-auth.wsw-auth .wsw-auth__btn:hover {filter: brightness(1.06);} }
.wsw-auth.wsw-auth .wsw-auth__btn:active {transform: translateY(1px);}
.wsw-auth.wsw-auth .wsw-auth__btn:disabled {opacity: .6; cursor: not-allowed; filter: none;}
.wsw-auth.wsw-auth .wsw-auth__btn.is-loading span::after {content: ""; display: inline-block; width: 16px; height: 16px; margin-inline-start: 10px; vertical-align: -3px; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: wsw-auth-spin .7s linear infinite;}
@keyframes wsw-auth-spin { to { transform: rotate(360deg); } }
.wsw-auth.wsw-auth .wsw-auth__row {display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;}
.wsw-auth.wsw-auth .wsw-auth__link {margin: 0; padding: 6px 8px; border: 0; background: none; color: var(--a-primary); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; text-decoration: none;}
.wsw-auth.wsw-auth .wsw-auth__link:disabled {color: var(--a-muted); cursor: not-allowed; font-weight: 400;}
.wsw-auth.wsw-auth .wsw-auth__msg {min-height: 22px; margin: 14px 0 0; font-size: 13.5px; font-weight: 700; color: var(--a-danger);}
.wsw-auth.wsw-auth .wsw-auth__msg:empty {min-height: 0; margin: 0;}
.wsw-auth.wsw-auth .wsw-auth__msg.is-ok {color: var(--a-success);}
.wsw-auth.wsw-auth.wsw-auth--done .wsw-auth__card {padding: 24px; font-weight: 700;}
@media (max-width: 480px) {
.wsw-auth.wsw-auth {margin: 12px auto; padding: 0 12px;}
.wsw-auth.wsw-auth .wsw-auth__card {padding: 26px 18px 20px; border-radius: 24px;}
.wsw-auth.wsw-auth .wsw-auth__box {height: 54px; font-size: 22px;}
.wsw-auth.wsw-auth .wsw-auth__otp {gap: 6px;}

}
@media (max-width: 359px) {
.wsw-auth.wsw-auth .wsw-auth__box {height: 48px; font-size: 19px;}

}