/* Corner-radius contract: --pmo-radius carries the exact number typed in the "گردی گوشه‌ها"
   setting, and every rounded element below uses it verbatim — the card, its buttons, the phone
   field and the OTP digits. Do NOT reintroduce calc() multipliers. This file used to scale them
   (*.6 on buttons and fields, *.5 on the OTP digits, *.85 on the card below 480px), so the saved
   number and the painted number disagreed — typing 40 produced 34px on a phone — which is exactly
   the "the setting doesn't apply" report this was fixed for.
   A radius larger than half the element's shorter side is clamped by the browser, so a big number
   degrades gracefully into a pill (or a circle for the square OTP digits) instead of overflowing. */
.pmo-login{--pmo:var(--color-primary-100,#d3283d);--pmo-on:var(--color-ink-950,#fff);--pmo-border:color-mix(in srgb,currentColor 22%,transparent);--pmo-ok:color-mix(in srgb,#16a34a 78%,currentColor);--pmo-err:color-mix(in srgb,#ef4444 78%,currentColor);--pmo-radius:24px;display:grid;direction:ltr;grid-template-columns:minmax(0,1fr);width:min(100% - 40px,480px);margin:80px auto;background:transparent;border:1px solid var(--pmo-border);border-radius:var(--pmo-radius);box-shadow:0 24px 70px rgba(15,23,42,.12);overflow:hidden;font-family:inherit;color:inherit}
.pmo-login.has-image{grid-template-columns:minmax(380px,1fr) minmax(380px,1fr);width:min(100% - 64px,960px);min-height:540px}
.pmo-login *{box-sizing:border-box}
.pmo-login-form{grid-column:1;grid-row:1;direction:rtl;padding:42px;align-self:center;text-align:center}
.pmo-login.has-image .pmo-login-form{grid-column:2;padding:52px}
.pmo-login-media{grid-column:1;grid-row:1;position:relative;min-height:100%;background-position:center;background-size:cover}
.pmo-media-overlay{position:absolute;inset:0;background:linear-gradient(145deg,color-mix(in srgb,var(--pmo) 16%,transparent),rgba(15,23,42,.08))}
.pmo-eyebrow{display:inline-block;margin-bottom:10px;color:var(--pmo);font-size:13px;font-weight:800;letter-spacing:.01em}
.pmo-login h2{margin:0 0 10px;font-size:26px;line-height:1.35}
.page-auth h1,.page-auth .entry-title,.page-auth .page-title{display:none!important}
.pmo-login p{margin:0 0 26px;color:color-mix(in srgb,currentColor 62%,transparent);font-size:15px;line-height:1.8}
.pmo-login label,.pmo-otp-field legend{display:block;font-size:14px;font-weight:700;text-align:right}
.pmo-login .pmo-phone{display:block;width:100%;height:54px;margin-top:9px;padding:0 16px;border:1px solid var(--pmo-border);border-radius:var(--pmo-radius);background:transparent;color:inherit;font:inherit;direction:ltr;text-align:center;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.pmo-login .pmo-phone:focus,.pmo-code-digit:focus{border-color:var(--pmo);box-shadow:0 0 0 4px color-mix(in srgb,var(--pmo) 14%,transparent)}
.pmo-login .pmo-phone.is-invalid{border-color:var(--pmo-err);box-shadow:0 0 0 4px rgba(220,38,38,.12)}
.pmo-field-error{min-height:0;margin-top:6px;text-align:right;color:var(--pmo-err);font-size:12px;font-weight:700;line-height:1.6}
.pmo-field-error:empty{display:none}
.pmo-login button{width:100%;min-height:50px;margin-top:16px;padding:10px 14px;border:0;border-radius:var(--pmo-radius);background:var(--pmo);box-shadow:0 8px 20px color-mix(in srgb,var(--pmo) 22%,transparent);color:var(--pmo-on);font:inherit;font-weight:800;cursor:pointer;transition:transform .18s,opacity .18s,box-shadow .18s}
.pmo-login button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 11px 24px color-mix(in srgb,var(--pmo) 28%,transparent)}
.pmo-login button:focus-visible{outline:3px solid color-mix(in srgb,var(--pmo) 24%,transparent);outline-offset:2px}
.pmo-login button:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.pmo-login button.is-busy{position:relative;color:transparent;pointer-events:none}
.pmo-login button.is-busy::after{content:'';position:absolute;top:50%;left:50%;width:20px;height:20px;margin-top:-10px;margin-left:-10px;border:3px solid color-mix(in srgb,var(--pmo-on) 35%,transparent);border-top-color:var(--pmo-on);border-radius:50%;animation:pmo-spin .7s linear infinite}
.pmo-login .pmo-resend.is-busy::after,.pmo-login .pmo-edit.is-busy::after{border-color:color-mix(in srgb,var(--pmo) 28%,transparent);border-top-color:var(--pmo)}
@keyframes pmo-spin{to{transform:rotate(360deg)}}
.pmo-secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pmo-login .pmo-resend,.pmo-login .pmo-edit{min-height:44px;margin-top:12px;background:transparent;box-shadow:none;color:var(--pmo);border:1px solid color-mix(in srgb,var(--pmo) 40%,transparent);font-size:13px}
.pmo-otp-field{min-width:0;margin:0;padding:0;border:0}
.pmo-otp{display:flex;justify-content:center;gap:8px;margin-top:11px}
.pmo-login .pmo-code-digit{flex:0 1 52px;width:52px;min-width:0;aspect-ratio:1;padding:0;border:1px solid var(--pmo-border);border-radius:var(--pmo-radius);background:transparent;color:inherit;font-family:inherit;font-size:22px;font-weight:700;line-height:1;text-align:center;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.pmo-message{min-height:22px;margin-top:14px;text-align:center;color:var(--pmo-ok);font-size:13px;line-height:1.7}
.pmo-message:empty{min-height:0;margin-top:0}
.pmo-message.is-error{color:var(--pmo-err)}
.pmo-notice{text-align:center;padding:16px}
.pmo-step[hidden]{display:none!important}
@media(max-width:800px){.pmo-login,.pmo-login.has-image{display:block;width:min(100% - 28px,480px);min-height:0;margin:48px auto}.pmo-login-media{display:none}.pmo-login-form,.pmo-login.has-image .pmo-login-form{padding:34px}}
@media(max-width:480px){.pmo-login,.pmo-login.has-image{width:min(100% - 20px,480px);margin:34px auto}.pmo-login-form,.pmo-login.has-image .pmo-login-form{padding:28px 20px}.pmo-login h2{font-size:23px}.pmo-otp{gap:6px}.pmo-login .pmo-code-digit{flex-basis:44px;width:44px}.pmo-secondary-actions{grid-template-columns:1fr}}
/* /auth/ renders without the theme's header and footer (see includes/auth/page-auth.php), so the
   wrapper owns the whole viewport and centres the card in it. The card's own margin-top is tuned for
   the lottery page, where an in-flow <main> with pt-[80px]/pt-[100px] already clears the fixed site
   header, so it is neutralised here and the wrapper does the centring instead.

   margin:auto (not justify-content:center) does the vertical centring on purpose — auto margins
   collapse to 0 when there is no free space, so on a short landscape viewport the card starts at the
   top edge and stays scrollable instead of overflowing upward where it cannot be reached.

   box-sizing is set explicitly rather than inherited: it only matters once something adds padding to
   this box (as the deleted --pmo-header-h reservation did), and with content-box that padding would
   be added on top of the full viewport height instead of inside it.
   Keep this block last — it must not be re-ordered above the margin:…auto media queries. */
.pmo-auth-page{box-sizing:border-box;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.pmo-auth-page .pmo-login{flex:0 0 auto;margin:auto}