/* ==========================================================================
   Rovy Foods — صفحة تسجيل الدخول
   ديسكتوب: لوحة البراند (يمين) + الفورم (شمال)
   موبايل: هيدر غامق باللوجو + كارت الفورم طالع عليه
   ========================================================================== */
.lg{
  --rv-esp:#24160d; --rv-esp-2:#170e08; --rv-ink:#3a2417; --rv-brown:#5a3a22;
  --rv-gold:#b8925a; --rv-gold-2:#d9bd8c; --rv-cream:#f7f1e8; --rv-cream-2:#efe5d6;
  --primary:#6e4626; --primary-600:#5a3a1f; --primary-50:#f8f0e4; --primary-100:#ecdcc4;
  --border:#e8dfd2; --border-strong:#d5c7b4; --surface-2:#fbf8f3; --surface-3:#f3ece2;
  --text:#24160d; --text-2:#5e4a3a; --text-3:#94816f;
  min-height:100vh; min-height:100dvh;
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  background:var(--rv-cream); color:var(--text);
}

/* ---------- لوحة البراند ---------- */
.lg-brand{
  position:relative; overflow:hidden; color:var(--rv-cream);
  background:
    radial-gradient(620px 420px at 50% 22%,rgba(217,189,140,.16),transparent 70%),
    radial-gradient(900px 600px at 100% 100%,rgba(184,146,90,.10),transparent 60%),
    linear-gradient(165deg,#2c1b10 0%,var(--rv-esp) 45%,var(--rv-esp-2) 100%);
}
.lg-brand::before{ /* خطوط رفيعة دهبي — نفس روح اللافتة */
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(90deg,transparent 0 46px,rgba(217,189,140,.035) 46px 47px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
}
.lg-brand::after{ /* إطار دهبي داخلي */
  content:''; position:absolute; inset:22px; border:1px solid rgba(217,189,140,.14); border-radius:26px; pointer-events:none;
}
.lg-brand-in{
  position:relative; z-index:1; height:100%; min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  gap:32px; padding:64px 56px 48px; text-align:center;
}
.lg-logo{width:min(340px,70%); height:auto; display:block; margin-top:2vh; filter:drop-shadow(0 18px 40px rgba(0,0,0,.35))}
.lg-pitch{max-width:470px}
.lg-eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-size:12.5px; font-weight:600; letter-spacing:.3px;
  color:var(--rv-gold-2); margin-bottom:14px;
}
.lg-eyebrow::before,.lg-eyebrow::after{content:''; width:28px; height:1px; background:linear-gradient(90deg,transparent,var(--rv-gold))}
.lg-eyebrow::after{transform:scaleX(-1)}
.lg-pitch h2{font-family:'Readex Pro',var(--font); font-weight:600; font-size:clamp(24px,2.3vw,31px); line-height:1.45; margin:0 0 12px; color:#fff}
.lg-pitch p{margin:0; color:rgba(247,241,232,.66); font-size:14.5px; line-height:1.9}
.lg-feats{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; max-width:520px; text-align:start}
.lg-feats li{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px;
  background:rgba(255,255,255,.035); border:1px solid rgba(217,189,140,.13);
  transition:background .2s,border-color .2s;
}
.lg-feats li:hover{background:rgba(255,255,255,.06); border-color:rgba(217,189,140,.26)}
.lg-feats .fi{width:36px; height:36px; flex:none; border-radius:10px; display:grid; place-items:center; color:var(--rv-gold-2); background:rgba(184,146,90,.14)}
.lg-feats .fi svg.i{width:18px; height:18px}
.lg-feats b{display:block; font-size:13.5px; font-weight:600; color:#fff; line-height:1.4}
.lg-feats small{display:block; font-size:11.5px; color:rgba(247,241,232,.55); line-height:1.5}
.lg-copy{font-size:12px; color:rgba(247,241,232,.4); letter-spacing:.2px}

/* ---------- الفورم ---------- */
.lg-main{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:48px 40px 32px; background:#fffdfa;
}
.lg-main::before{ /* لمسة دهبي خفيفة في الركن */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(520px 360px at 0% 100%,rgba(184,146,90,.08),transparent 70%);
}
.lg-wrap{position:relative; width:100%; max-width:404px; display:flex; flex-direction:column}
.lg-card{width:100%}

.lg-head{margin-bottom:32px}
.lg-mark{display:block; width:52px; height:52px; border-radius:15px; margin-bottom:24px;
  box-shadow:0 0 0 1px rgba(184,146,90,.35),0 10px 22px -12px rgba(36,22,13,.55)}
.lg-head h1{font-family:'Readex Pro',var(--font); font-weight:600; font-size:28px; line-height:1.3; margin:0 0 8px; color:var(--text); letter-spacing:-.3px}
.lg-head p{margin:0; color:var(--text-3); font-size:14.5px}

/* الخانات — ستايل Filled هادي: خلفية كريمي، بتبيض وتاخد إطار دهبي وقت الكتابة */
.lg .lf{margin-bottom:18px; gap:8px}
.lg .lf label{font-size:13px; font-weight:600; color:var(--text-2); padding-inline-start:2px}
.lg .lf-box > svg.i{right:16px; width:18px; height:18px; color:#b3a28e}
.lg .lf-box .inp{
  height:52px; border-radius:12px; border:1.5px solid transparent; background:#f6f1ea;
  padding-right:46px; font-size:15px; font-weight:500; color:var(--text); box-shadow:none;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.lg .lf-box .inp#lg-pass{padding-left:50px}
.lg .lf-box .inp::placeholder{color:#b9aa98; font-weight:400}
.lg .lf-box .inp:hover{background:#f2ebe1; border-color:transparent}
.lg .lf-box .inp:focus{background:#fff; border-color:var(--rv-gold)!important; box-shadow:0 0 0 4px rgba(184,146,90,.14)}
.lg .lf-box:focus-within > svg.i{color:var(--rv-brown)}
.lg .lf-box .inp:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #f6f1ea inset; -webkit-text-fill-color:var(--text); caret-color:var(--text)}
.lg .lf-box .inp:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 40px #fff inset,0 0 0 4px rgba(184,146,90,.14)}
.lg .lf-eye{left:7px; width:38px; height:38px; border-radius:9px; color:#b3a28e}
.lg .lf-eye:hover{background:rgba(110,70,38,.08); color:var(--rv-ink)}

/* تذكرني */
.lg-remember{display:inline-flex; align-items:center; gap:10px; margin:2px 0 24px; cursor:pointer; user-select:none; font-size:13.5px; align-self:flex-start}
.lg-remember input{position:absolute; opacity:0; width:1px; height:1px}
.lg-chk{width:20px; height:20px; flex:none; border-radius:6px; border:1.5px solid #cdbfad; background:#fff; display:grid; place-items:center; transition:.15s}
.lg-chk svg.i{width:13px; height:13px; stroke-width:3; color:#fff; opacity:0; transform:scale(.6); transition:.15s}
.lg-remember input:checked + .lg-chk{background:var(--rv-ink); border-color:var(--rv-ink)}
.lg-remember input:checked + .lg-chk svg.i{opacity:1; transform:none}
.lg-remember input:focus-visible + .lg-chk{box-shadow:0 0 0 4px rgba(184,146,90,.25)}
.lg-remember:hover .lg-chk{border-color:var(--rv-gold)}
.lg-rm-tx{font-weight:500; color:var(--text-2)}
.lg-card{display:flex; flex-direction:column}

/* زرار الدخول — النص في النص والسهم في دايرة دهبي على الطرف */
.lg .btn.login-btn{
  position:relative; width:100%; height:54px; padding:0 20px; border-radius:13px; border:0;
  display:flex; align-items:center; justify-content:center; gap:0;
  font-size:15.5px; font-weight:600; letter-spacing:.1px; color:#fff;
  background:linear-gradient(180deg,#43291a 0%,#2a1a10 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 0 0 1px rgba(36,22,13,.9),0 8px 18px -10px rgba(36,22,13,.7);
  transition:transform .12s,box-shadow .2s,background .2s;
}
.lb-ar{position:absolute; left:9px; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center; background:rgba(217,189,140,.16); color:var(--rv-gold-2); transition:background .2s,transform .2s}
.lb-ar svg.i{width:18px; height:18px; stroke-width:2.2}
.lg .btn.login-btn:hover{background:linear-gradient(180deg,#4f3220 0%,#311f13 100%)}
.lg .btn.login-btn:hover .lb-ar{background:var(--rv-gold); color:#2a1a10; transform:translateY(-50%) translateX(-2px)}
.lg .btn.login-btn:active{transform:translateY(1px)}
.lg .btn.login-btn:focus-visible{outline:0; box-shadow:0 0 0 1px #2a1a10,0 0 0 5px rgba(184,146,90,.35)}
.lg .btn.login-btn:disabled{opacity:.85; cursor:progress}
.lg .btn.login-btn .spin{display:none; width:18px; height:18px; border-radius:50%; border:2.5px solid rgba(217,189,140,.3); border-top-color:var(--rv-gold-2); animation:lgSpin .7s linear infinite}
.lg .btn.login-btn.busy .spin{display:block}
.lg .btn.login-btn.busy .lb-ar svg.i{display:none}
@keyframes lgSpin{to{transform:rotate(360deg)}}
.lg .login-err{border-radius:12px; margin:-8px 0 16px; display:flex; gap:8px; align-items:center}
.lg .login-err[hidden]{display:none}
.lg-secure{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:16px; font-size:12px; color:var(--text-3)}
.lg-secure svg.i{width:14px; height:14px; color:#9a8a5a}

/* ---------- زرار تحميل التطبيق — كارت ثانوي نضيف ---------- */
.lg .pwa-x{margin-top:28px}
.lg .pwa-x-btn{
  width:100%; min-height:0; height:72px; display:flex; align-items:center; gap:14px; padding:0 14px 0 12px;
  border-radius:16px; border:1px solid #e9e0d3; background:#fff; color:var(--rv-ink); text-align:start; cursor:pointer;
  box-shadow:0 1px 2px rgba(36,22,13,.05); transition:border-color .18s,box-shadow .18s,transform .12s;
}
.lg .pwa-x-btn:hover{background:#fff; border-color:#d6c3a3; box-shadow:0 12px 26px -16px rgba(110,70,38,.5); transform:translateY(-1px)}
.lg .pwa-x-btn:active{transform:none}
.lg .pwa-x-btn:focus-visible{outline:0; box-shadow:0 0 0 4px rgba(184,146,90,.3)}
.pwa-x-app{width:46px; height:46px; flex:none; border-radius:12px; box-shadow:0 0 0 1px rgba(184,146,90,.35),0 6px 14px -8px rgba(0,0,0,.6)}
.lg .pwa-x-tx{flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:1px}
.lg .pwa-x-tx b{font-size:14.5px; font-weight:700; color:var(--rv-ink)}
.lg .pwa-x-tx small{font-size:12px; color:var(--text-3); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.pwa-x-go{width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center;
  color:var(--rv-brown); background:#f6efe4; border:1px solid #ecdfcb; transition:background .18s,color .18s,border-color .18s}
.pwa-x-go svg.i{width:18px; height:18px; stroke-width:2.1}
.lg .pwa-x-btn:hover .pwa-x-go{background:var(--rv-ink); border-color:var(--rv-ink); color:var(--rv-gold-2)}
/* شيت التثبيت بألوان البراند */
.pwa-x-head{background:linear-gradient(135deg,#2c1b10,#170e08); border-bottom:2px solid #b8925a}
.pwa-x-primary{background:linear-gradient(135deg,#3a2416,#1d120a)}
.pwa-x-primary img{box-shadow:0 0 0 2px rgba(184,146,90,.6)}
.pwa-x-primary small,.pwa-x-n{color:#d9bd8c}
.pwa-x-ok{background:#3a2417}

/* فوتر */
.lg-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; font-size:12px; color:var(--text-3)}
.lg-foot b{color:var(--text-2); font-weight:600}
.lg .login-fix{display:inline-flex; align-items:center; gap:6px; margin:0; font-size:12px; color:var(--text-3); text-decoration:none; padding:6px 8px; margin-inline-end:-8px; border-radius:8px}
.lg .login-fix svg.i{width:14px; height:14px}
.lg .login-fix:hover{color:var(--rv-ink); background:#f6efe5}

/* ---------- شاشات متوسطة ---------- */
@media (max-width:1180px){
  .lg-brand-in{padding:52px 40px 40px}
  .lg-feats{grid-template-columns:1fr}
  .lg-feats li:nth-child(n+4){display:none}
}
@media (max-height:760px) and (min-width:901px){
  .lg-feats{display:none}
  .lg-logo{width:min(280px,60%)}
  .lg-mark{display:none}
}

/* ---------- موبايل / تابلت عمودي ---------- */
@media (max-width:900px){
  .lg{display:block; background:var(--rv-cream)}
  .lg-brand{border-radius:0 0 32px 32px}
  .lg-brand::after{display:none}
  .lg-brand-in{
    min-height:0; height:auto; gap:10px; justify-content:flex-start;
    padding:max(30px,calc(env(safe-area-inset-top) + 18px)) 24px 70px;
  }
  .lg-logo{width:min(200px,56vw); margin:0}
  .lg-pitch h2,.lg-pitch p,.lg-feats,.lg-copy{display:none}
  .lg-eyebrow{margin:0; font-size:12px}
  .lg-main{display:block; margin-top:-48px; z-index:2; background:none; padding:0 16px calc(20px + env(safe-area-inset-bottom))}
  .lg-main::before{display:none}
  .lg-wrap{margin:0 auto; max-width:440px}
  .lg-card{background:#fff; border:1px solid #ece3d6; border-radius:24px; padding:26px 20px 20px; box-shadow:0 26px 50px -28px rgba(36,22,13,.5)}
  .lg-mark{display:none}
  .lg-head{margin-bottom:22px; text-align:center}
  .lg-head h1{font-size:23px; margin-bottom:4px}
  .lg-head p{font-size:13.5px}
  .lg .pwa-x{margin-top:12px}
  .lg .pwa-x-btn{height:68px; border-radius:18px; border-color:#ece3d6; box-shadow:0 14px 30px -24px rgba(36,22,13,.5)}
  .lg-foot{margin-top:16px; padding:0 4px}
}
@media (max-width:900px) and (max-height:640px){
  .lg-logo{width:min(150px,42vw)}
  .lg-brand-in{padding-bottom:62px}
}
@media (prefers-reduced-motion:reduce){.lg *{transition:none!important; animation-duration:0s!important}}

/* ---------- لوجو Rovy في القائمة الجانبية والفواتير ---------- */
.brand-lockup{height:78px; justify-content:center}
.brand-lockup .bl-full{height:74px; object-position:center}
.brand-lockup .bl-mark{border-radius:12px}
.doc-logo{height:86px}
.top-title img{border-radius:9px!important}