*{box-sizing:border-box}.ua-auth-page{margin:0;background:#07101d;color:#fff;font-family:var(--ua-font-ar);min-height:100vh}
.ua-auth-return,.ua-sponsor-preview{display:flex;align-items:center;gap:.7rem;margin:1.2rem 0;padding:.9rem 1rem;border-radius:15px;background:#edf4ff;color:#52647d;font-size:.7rem}.ua-auth-return .ua-icon{width:1rem;height:1rem;color:#2364d2}
.ua-sponsor-preview{position:relative;background:#fff8e8;border:1px solid #ebd6a6}.ua-sponsor-preview__avatar{flex:0 0 46px;height:46px;display:grid;place-items:center;border-radius:14px;background:#132440;color:#efca7e;font:900 1.1rem Inter,sans-serif}.ua-sponsor-preview>div{min-width:0}.ua-sponsor-preview small,.ua-sponsor-preview strong{display:block}.ua-sponsor-preview small{color:#8d7444;font-size:.62rem}.ua-sponsor-preview strong{margin:.18rem 0;font-size:.8rem;overflow:hidden;text-overflow:ellipsis}.ua-sponsor-preview p{margin:0;color:#7e7057;font-size:.62rem}.ua-sponsor-preview>.ua-icon{margin-right:auto;width:1.2rem;height:1.2rem;color:#b68431}
.ua-auth-form{margin-top:1.5rem}.ua-auth-form__row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.ua-auth-form>label,.ua-auth-form__row>label{display:block;margin-bottom:1rem}.ua-auth-form label>span:first-child{display:block;margin-bottom:.45rem;font-size:.72rem;font-weight:800}.ua-auth-form label>span small{color:#9aa2ad;font-size:.62rem;font-weight:600}.ua-auth-input{height:54px;display:flex;align-items:center;border:1px solid #dce1e9;border-radius:14px;background:#f8f9fb;transition:.2s}.ua-auth-input:focus-within{border-color:#b88b3c;box-shadow:0 0 0 3px rgba(184,139,60,.11);background:#fff}.ua-auth-input input{width:100%;height:100%;border:0;outline:0;background:transparent;padding:0 1rem;font:inherit;color:#162138}.ua-auth-input button{align-self:stretch;border:0;border-right:1px solid #e1e5eb;background:transparent;padding:0 .9rem;color:#906c2e;font:700 .65rem Cairo,sans-serif;cursor:pointer}
.ua-auth-form__options{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.2rem 0 1.2rem}.ua-auth-form__options>a{color:#2859aa;font-size:.68rem;font-weight:800;text-decoration:none}.ua-auth-check{display:flex!important;align-items:flex-start;gap:.55rem;margin:0!important;cursor:pointer}.ua-auth-check input{margin-top:.18rem;accent-color:#b6893b}.ua-auth-check>span{margin:0!important;color:#6f7988;font-size:.68rem!important;font-weight:600!important;line-height:1.65}.ua-auth-check--terms{margin:1rem 0 1.25rem!important}.ua-auth-check a{color:#2254aa;font-weight:800}.ua-auth-submit{width:100%;margin-top:.2rem}.ua-password-strength{position:relative;display:flex;align-items:center;gap:.7rem;margin-top:.45rem}.ua-password-strength:before{content:"";width:90px;height:4px;border-radius:9px;background:#e1e5eb}.ua-password-strength>span{position:absolute;right:0;top:0;width:0;height:4px;border-radius:9px;background:#c99a43;transition:.2s}.ua-password-strength small{color:#8b95a2;font-size:.6rem}
.ua-auth-status{margin-top:.85rem}.ua-auth-status:not(:empty){padding:.9rem 1rem;border:1px solid #e4cc94;border-radius:13px;background:#fff8e8;color:#6b552c;font-size:.72rem;line-height:1.7}.ua-auth-status.is-error:not(:empty){border-color:#e9b3aa;background:#fff1ef;color:#842f25}.ua-auth-status.is-success:not(:empty){border-color:#acd9c7;background:#effaf5;color:#23684e}.ua-auth-status a{display:block;margin-top:.35rem;color:#2455a8;font-weight:800;text-decoration:none}.ua-auth-divider{display:flex;align-items:center;gap:.8rem;margin:1.3rem 0;color:#9aa3af;font-size:.65rem}.ua-auth-divider:before,.ua-auth-divider:after{content:"";height:1px;flex:1;background:#e3e6eb}.ua-auth-official{display:grid;grid-template-columns:38px 1fr auto;gap:.75rem;align-items:center;padding:1rem;border:1px solid #e0e4eb;border-radius:15px;color:#1b2941;text-decoration:none}.ua-auth-official>.ua-icon{width:1.1rem;height:1.1rem;color:#2b67ce}.ua-auth-official span,.ua-auth-official strong,.ua-auth-official small{display:block}.ua-auth-official strong{font-size:.72rem}.ua-auth-official small{margin-top:.2rem;color:#85909f;font-size:.6rem}.ua-auth-official>b{color:#b28335}.ua-auth-legal{max-width:650px;margin:1.2rem auto 0;color:#87909d;font-size:.62rem;text-align:center}.ua-auth-legal a{color:#53627a}
@media(max-width:600px){.ua-auth-official{padding:.85rem}}
@media(prefers-reduced-motion:reduce){.ua-auth-input,.ua-password-strength>span{transition:none}}

/* Login and register hero, laid out like the other pages' heroes (see .ua-hero-art in components.css): the portal art fills
   the left and the card with the form sits on its dark right. --ua-art-subject is the share of the image the portal and
   its icons take. The rules above give the form its shape; the ones below give it the dark look. */
.ua-auth-hero{--ua-art-text:30rem;--ua-art-subject:.64;--ua-art-top:auto;--ua-art-bottom:0;--ua-art-fade-top:10%;display:flex;flex-direction:column;min-height:calc(100vh - var(--ua-header-height));min-height:calc(100svh - var(--ua-header-height));background:radial-gradient(circle at 16% 40%,rgba(42,101,218,.18),transparent 30%),radial-gradient(circle at 80% 28%,rgba(224,178,93,.1),transparent 26%),linear-gradient(135deg,#071225,#030a14 62%,#07111d);color:#fff}
.ua-auth-hero__grid{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,var(--ua-art-text));align-content:center;padding-block:1.25rem 1.75rem}
.ua-auth-hero h1{margin:0 0 1.1rem;font-size:clamp(2.4rem,3.6vw,3.5rem);line-height:1.08;letter-spacing:-.055em;color:#fff}.ua-auth-hero h1 span{color:var(--ua-gold-300)}
.ua-auth-hero .ua-auth-card{width:auto;margin:0;padding:clamp(1.25rem,2vw,1.6rem);border:1px solid rgba(255,255,255,.11);border-radius:1.4rem;background:rgba(7,15,29,.74);box-shadow:0 30px 80px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;color-scheme:dark}
.ua-auth-hero .ua-auth-form{margin-top:0}.ua-auth-hero .ua-auth-form>label,.ua-auth-hero .ua-auth-form__row>label{margin-bottom:.9rem}.ua-auth-hero .ua-auth-form label>span:first-child{color:#d8dfea;font-size:.8rem}.ua-auth-hero .ua-auth-form label>span small{color:#8f9aab;font-size:.7rem}
.ua-auth-hero .ua-auth-input{height:50px;overflow:hidden;border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.05)}.ua-auth-hero .ua-auth-input:focus-within{border-color:var(--ua-gold-500);background:rgba(255,255,255,.08);box-shadow:0 0 0 3px rgba(222,184,111,.16)}
.ua-auth-hero .ua-auth-input input{color:#fff}.ua-auth-hero .ua-auth-input input::placeholder{color:#7d899c;opacity:1}.ua-auth-hero .ua-auth-input input::-ms-reveal{display:none}.ua-auth-hero .ua-auth-input input:focus-visible{box-shadow:none}.ua-auth-hero .ua-auth-input input:-webkit-autofill{-webkit-text-fill-color:#fff;caret-color:#fff;-webkit-box-shadow:0 0 0 40px #131c2b inset;transition:background-color 600000s}
.ua-auth-hero .ua-auth-input button{border-right-color:rgba(255,255,255,.12);color:var(--ua-gold-400);font-size:.72rem}.ua-auth-hero .ua-auth-input button:focus-visible{outline-offset:-4px;box-shadow:none}
.ua-auth-hero .ua-auth-form__options>a{color:var(--ua-gold-300);font-size:.76rem}.ua-auth-hero .ua-auth-check>span{color:#a9b3c3;font-size:.76rem!important}
.ua-auth-hero .ua-auth-switch{margin:1rem 0 0;text-align:center;color:#a9b3c3;font-size:.82rem}.ua-auth-hero .ua-auth-switch a{margin-right:.2rem;color:var(--ua-gold-300);font-weight:800}
.ua-auth-hero .ua-auth-return{margin:0 0 1rem;background:rgba(53,86,216,.16);color:#c6d0e0;font-size:.76rem}.ua-auth-hero .ua-auth-return .ua-icon{color:#8eaaff}
.ua-auth-hero .ua-auth-card>.ua-auth-status{margin:0 0 1rem}.ua-auth-hero .ua-auth-status:not(:empty){border-color:rgba(222,184,111,.35);background:rgba(222,184,111,.1);color:#f0dcb0}.ua-auth-hero .ua-auth-status.is-error:not(:empty){border-color:rgba(236,125,108,.4);background:rgba(236,125,108,.12);color:#ffc4ba}.ua-auth-hero .ua-auth-status.is-success:not(:empty){border-color:rgba(76,196,150,.4);background:rgba(76,196,150,.12);color:#b2ebd3}.ua-auth-hero .ua-auth-status a{color:var(--ua-gold-300)}
.ua-auth-hero .ua-auth-divider{color:#7d899c}.ua-auth-hero .ua-auth-divider:before,.ua-auth-hero .ua-auth-divider:after{background:rgba(255,255,255,.12)}.ua-auth-hero .ua-auth-official{border-color:rgba(255,255,255,.12);color:#fff}.ua-auth-hero .ua-auth-official small{color:#8f9aab}
.ua-auth-hero .ua-auth-legal{max-width:none;margin:.9rem 0 0;padding-top:.8rem;border-top:1px solid rgba(255,255,255,.08);color:#7f8a9c;font-size:.7rem}.ua-auth-hero .ua-auth-legal a{color:#b7c1d1}
.ua-auth-strip{position:relative;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.09)}.ua-auth-strip span{padding:1.3rem 1rem;text-align:center;color:#929eaf;font-size:.78rem;border-inline-start:1px solid rgba(255,255,255,.08)}.ua-auth-strip span:first-child{border-inline-start:0}.ua-auth-strip b{margin-left:.3rem;color:var(--ua-gold-300)}
/* Register: its portal sits in the middle of the image and its longer form makes the hero taller than the image. So on wide
   screens the art box is 5:4 (capped at the hero's height) and the image covers it from the portal's right edge (the
   --ua-art-subject share), which keeps that edge clear of the card and trims only the city on the left, at most a fifth of
   the image. The fields sit two to a row. */
.ua-auth-hero--register{--ua-art-text:32rem;--ua-art-subject:.68;--ua-art-ratio:5/4;--ua-art-position:68% 50%}
.ua-auth-hero--register .ua-auth-form{display:grid;grid-template-columns:1fr 1fr;column-gap:.8rem;align-items:start}.ua-auth-hero--register .ua-auth-form__row{display:contents}.ua-auth-hero--register .ua-auth-form>.ua-auth-check,.ua-auth-hero--register .ua-auth-form>.ua-auth-submit,.ua-auth-hero--register .ua-auth-form>.ua-auth-status{grid-column:1/-1}
.ua-auth-hero .ua-password-strength{display:block;margin-top:.5rem;padding-top:.55rem}.ua-auth-hero .ua-password-strength:before{position:absolute;top:0;right:0;width:100%;background:rgba(255,255,255,.1)}.ua-auth-hero .ua-password-strength small{display:block;color:#8f9aab;font-size:.68rem;line-height:1.5}
.ua-auth-hero .ua-auth-check--terms{margin:.15rem 0 1rem!important}.ua-auth-hero .ua-auth-check a{color:var(--ua-gold-300)}
.ua-auth-hero .ua-sponsor-preview{margin:0 0 1rem;border-color:rgba(222,184,111,.3);background:rgba(222,184,111,.08);color:#fff}.ua-auth-hero .ua-sponsor-preview__avatar{background:rgba(222,184,111,.16);color:var(--ua-gold-300)}.ua-auth-hero .ua-sponsor-preview small{color:var(--ua-gold-400);font-size:.7rem}.ua-auth-hero .ua-sponsor-preview strong{font-size:.86rem;text-align:right}.ua-auth-hero .ua-sponsor-preview p{color:#b3aa98;font-size:.7rem}.ua-auth-hero .ua-sponsor-preview>.ua-icon{color:var(--ua-gold-500)}
@media(max-width:80rem){.ua-auth-hero{--ua-art-text:26rem}.ua-auth-hero--register{--ua-art-text:32rem}}
@media(max-width:62rem){.ua-auth-hero{min-height:0}.ua-auth-hero__grid{z-index:1;grid-template-columns:minmax(0,32rem);justify-content:center;margin-top:-3.5rem;padding-block:0 2.5rem}.ua-auth-strip{grid-template-columns:repeat(2,1fr)}.ua-auth-strip span:nth-child(3){border-inline-start:0}}
@media(max-width:600px){.ua-auth-hero h1{font-size:2.4rem}.ua-auth-hero__grid{margin-top:-3rem}.ua-auth-hero .ua-auth-card{padding:1.25rem;border-radius:1.2rem}.ua-auth-hero .ua-auth-form__options{flex-flow:row wrap;align-items:center;gap:.4rem 1rem}.ua-auth-hero--register .ua-auth-form{grid-template-columns:1fr}}


/* مربع الموافقة على الشروط كان 13 بكسل، وهذا يكبّره ليصبح سهل اللمس */
.ua-auth-check input[type="checkbox"] { width: 20px; height: 20px; margin-top: .05rem; }
@media (max-width: 48rem) {
  .ua-auth-check input[type="checkbox"] { width: 24px; height: 24px; }
  .ua-auth-check--terms { align-items: center; min-height: 44px; }
  .ua-auth-form__options > a { display: inline-flex; align-items: center; min-height: 44px; }
  .ua-auth-switch a { display: inline-block; padding-block: .6rem; }
}