/* ==========================================================================
   Auth (login / OTP) — split layout, RTL. Loaded only on the auth pages.
   ========================================================================== */
.page-auth{background:#fff;padding-bottom:0!important}
.page-auth .site-main{min-height:0;padding:0}
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh;min-height:100dvh}
@media (min-width:1200px){.auth{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}

/* ---- brand panel (first column = right side in RTL) ---- */
.auth__brand{position:relative;overflow:hidden;color:#fff;background:radial-gradient(120% 90% at 100% 0%,#8b5cf6 0%,transparent 55%),radial-gradient(90% 80% at 0% 100%,#db2777 0%,transparent 55%),linear-gradient(160deg,#4c1d95,#6d28d9 55%,#5b21b6)}
.auth__brand::before,.auth__brand::after{content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none}
.auth__brand::before{width:520px;height:520px;inset-block-start:-180px;inset-inline-start:-160px}
.auth__brand::after{width:380px;height:380px;inset-block-end:-140px;inset-inline-end:-120px}
.auth__brand-inner{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;padding:2.2rem clamp(1.6rem,4vw,4rem);gap:2rem}
.auth__logo{display:inline-flex;align-items:center;gap:.7rem;color:#fff;font-weight:800;font-size:1.25rem;align-self:flex-start}
.auth__logo:hover{color:#fff;opacity:.92}
.auth__hero{margin-block:auto}
.auth__headline{color:#fff;font-weight:800;font-size:clamp(1.7rem,2.6vw,2.5rem);line-height:1.6;margin:0 0 .8rem}
.auth__lead{color:rgba(255,255,255,.85);max-width:30rem;margin:0 0 1.6rem;font-size:1rem}
.auth__perks{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.auth__perks li{display:flex;align-items:center;gap:.75rem;font-size:.95rem;color:rgba(255,255,255,.95)}
.auth__perks i{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16);flex-shrink:0}
.auth__art{position:absolute;inset-inline-end:-30px;inset-block-end:-10px;width:min(340px,34vw);opacity:.95;pointer-events:none;filter:drop-shadow(0 20px 30px rgba(17,24,39,.3))}
@media (max-height:700px){.auth__art{display:none}}

/* ---- form side ---- */
.auth__main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1.25rem;gap:1.2rem;background:#fff}
.auth__card{width:100%;max-width:26rem}
.auth__mobile-logo{display:none;align-items:center;justify-content:center;gap:.6rem;color:var(--c-ink);font-weight:800;font-size:1.15rem;margin-bottom:1.4rem}
.auth__head{margin-bottom:1.5rem}
.auth__title{font-size:1.55rem;font-weight:800;margin:0 0 .4rem;color:var(--c-ink)}
.auth__sub{color:var(--c-muted);margin:0;font-size:.92rem;line-height:1.9}
.auth__num{color:var(--c-ink);font-weight:700}
.auth__change{display:inline-flex;align-items:center;gap:.25rem;margin-inline-start:.4rem;font-weight:600;font-size:.85rem;color:var(--c-primary)}
.auth__change i{font-size:.75rem}
.auth__status{min-height:0}
.auth-alert{display:flex;gap:.6rem;align-items:flex-start;padding:.7rem .9rem;border-radius:var(--r-md);font-size:.88rem;margin-bottom:1rem;animation:authIn .3s var(--ease)}
.auth-alert i{margin-top:.15rem}
.auth-alert--success{background:#ecfdf5;color:#065f46}.auth-alert--error{background:#fff1f2;color:#9f1239}.auth-alert--info{background:var(--c-primary-50);color:var(--c-primary-700)}
@keyframes authIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.auth__form{display:grid;grid-template-columns:minmax(0,1fr);gap:1.1rem}
.auth__card,.auth__main,.auth__card .field{min-width:0}

/* ---- fields ---- */
.field__label{display:block;font-weight:600;font-size:.88rem;color:var(--c-ink);margin-bottom:.45rem}
.field__control{display:flex;align-items:center;height:56px;border:1.5px solid var(--c-line);border-radius:var(--r-md);background:#fff;transition:border-color var(--t),box-shadow var(--t);padding-inline:.35rem}
.field__control:focus-within{border-color:var(--c-primary-500);box-shadow:0 0 0 4px rgba(124,58,237,.14)}
.field__prefix{width:42px;text-align:center;color:var(--c-muted);font-size:1.15rem;flex-shrink:0}
.field__control input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font-family:inherit;font-size:1.2rem;font-weight:600;letter-spacing:.08em;color:var(--c-ink);text-align:left}
.field__control input::placeholder{color:#b6bcc9;font-weight:400;letter-spacing:.05em}
.field__state{width:38px;text-align:center;font-size:1.1rem;color:var(--c-ok);opacity:0;transform:scale(.6);transition:all var(--t);flex-shrink:0}
.field.is-valid .field__state{opacity:1;transform:none}
.field.is-valid .field__control{border-color:rgba(15,157,88,.55)}
.field.is-invalid .field__control{border-color:var(--c-danger);box-shadow:0 0 0 4px rgba(225,29,72,.1)}
.field__msg{position:relative;min-height:1.6rem;margin-top:.45rem}   /* reserved height => no layout shift */
.field__hint,.field__error{font-size:.8rem;line-height:1.6;transition:opacity .15s}
.field__hint{color:var(--c-muted)}
.field__error{color:var(--c-danger);font-weight:600;position:absolute;inset:0;opacity:0;pointer-events:none}
.field.is-invalid .field__error{opacity:1;pointer-events:auto}
.field.is-invalid .field__hint{opacity:0}
.field__error:empty{display:block}

/* ---- OTP boxes ---- */
.otp{display:flex;gap:.55rem;justify-content:center}
.otp .otp__box{flex:1 1 0;width:0;min-width:0;max-width:3.6rem;height:60px;border:1.5px solid var(--c-line);border-radius:var(--r-md);background:#fff;text-align:center;font-family:inherit;font-size:1.6rem;font-weight:800;color:var(--c-ink);padding:0;caret-color:var(--c-primary);transition:border-color var(--t),box-shadow var(--t),background var(--t),transform var(--t)}
.otp__box:focus{outline:0;border-color:var(--c-primary-500);box-shadow:0 0 0 4px rgba(124,58,237,.14);transform:translateY(-1px)}
.otp__box.is-filled{border-color:#c4b5fd;background:var(--c-primary-50)}
.field.is-invalid .otp__box{border-color:var(--c-danger);background:#fff7f8}
.otp.is-shake{animation:authShake .42s}
@keyframes authShake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.otp.is-busy .otp__box{pointer-events:none;opacity:.7}
.field .field__msg .field__error{text-align:center}

/* ---- buttons ---- */
.auth__submit{position:relative;height:54px;font-size:1rem;font-weight:700;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%}
.auth__spinner{display:none;width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:authSpin .7s linear infinite}
.auth__spinner--dark{border-color:rgba(109,40,217,.25);border-top-color:var(--c-primary)}
.is-loading .auth__spinner{display:inline-block}
.is-loading{pointer-events:none}
.auth__submit.is-loading{opacity:.9}
@keyframes authSpin{to{transform:rotate(360deg)}}
.auth__resend{display:flex;align-items:center;justify-content:center;gap:.4rem;flex-wrap:wrap;margin-top:1.1rem;font-size:.88rem;color:var(--c-muted);min-height:2.4rem}
.auth__count{color:var(--c-ink);font-variant-numeric:tabular-nums;display:inline-block;min-width:2.6em;text-align:center}
.auth__link-btn{display:inline-flex;align-items:center;gap:.4rem;border:0;background:transparent;color:var(--c-primary);font-weight:700;font-family:inherit;font-size:.9rem;padding:.35rem .7rem;border-radius:var(--r-sm)}
.auth__link-btn:hover:not(:disabled){background:var(--c-primary-50)}
.auth__link-btn:disabled{color:#a1a7b5;cursor:not-allowed}
.auth__link-btn:disabled .auth__submit-label{opacity:1}
.auth__legal{margin:1.6rem 0 0;font-size:.78rem;color:var(--c-muted);text-align:center;line-height:1.9}
.auth__legal a{color:var(--c-text);text-decoration:underline;text-underline-offset:3px}
.auth__back{display:inline-flex;align-items:center;gap:.4rem;color:var(--c-muted);font-size:.85rem}
.auth__back:hover{color:var(--c-primary)}

/* ---- mobile: single card ---- */
@media (max-width:991.98px){
  .auth{grid-template-columns:1fr;background:linear-gradient(180deg,#f5f3ff 0,#fff 42%)}
  .auth__brand{display:none}
  .auth__main{justify-content:flex-start;padding:max(1.6rem,env(safe-area-inset-top)) 1rem 1.5rem}
  .auth__mobile-logo{display:flex}
  .auth__card{background:#fff;border-radius:var(--r-lg);box-shadow:0 10px 40px rgba(76,29,149,.12);border:1px solid var(--c-line-soft);padding:1.5rem 1.25rem 1.2rem}
  .auth__title{font-size:1.35rem}
  .otp{gap:.4rem}.otp__box{height:54px;font-size:1.4rem}
}
@media (max-width:359.98px){.auth__card{padding:1.2rem .9rem}.otp{gap:.3rem}.otp__box{height:48px;font-size:1.25rem}.auth__title{font-size:1.2rem}}
@media (prefers-reduced-motion:reduce){.otp.is-shake,.auth-alert{animation:none}}