/* Es-Gift auth pages (login + register) — design B2, 2026-09-26.
   Shared by templates/login.html and templates/register.html. */
.lg-stage{--lg-wine:#872838;--lg-wine-2:#a04258;--lg-wine-3:#5e1a26;--lg-orange:#ff6600;--lg-panel:#181818;--lg-line:#2b2b2b;--lg-line-2:#3a3a3a;--lg-muted:#a3a3a3;--lg-dim:#6b6b6b;--lg-err:#ff5a5a;--lg-ok:#2ecc71;
  position:relative;min-height:calc(100vh - 140px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px 30px;overflow:hidden;background:#111;color:#fff}
.lg-stage *{box-sizing:border-box}
/* خلفية: شبكة من أغلفة ألعاب الموقع */
.lg-wall{position:absolute;inset:-120px -80px;display:grid;grid-template-columns:repeat(11,1fr);gap:16px;transform:rotate(-8deg);pointer-events:none;animation:lgDrift 60s linear infinite alternate}
.lg-wall div{aspect-ratio:1;border-radius:14px;background-size:cover;background-position:center;opacity:.5}
@keyframes lgDrift{from{transform:rotate(-8deg) translateY(0)}to{transform:rotate(-8deg) translateY(-60px)}}
.lg-stage::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(17,17,17,.55) 0%,rgba(17,17,17,.9) 60%,#111 100%);z-index:1}
@media (prefers-reduced-motion: reduce){.lg-wall{animation:none}}
/* الكارت */
.lg-card{position:relative;z-index:2;width:100%;max-width:460px;background:var(--lg-panel);border:1px solid var(--lg-line);border-radius:16px;padding:0 30px 24px;box-shadow:0 40px 80px rgba(0,0,0,.7)}
.lg-card::before{content:'';position:absolute;top:0;right:28px;left:28px;height:2px;background:var(--lg-wine-2);border-radius:0 0 2px 2px}
.lg-top{display:flex;align-items:center;justify-content:space-between;padding:24px 0 6px}
.lg-top img{height:42px;width:auto}
.lg-top a{font-size:12.5px;color:var(--lg-dim);text-decoration:none}
.lg-top a:hover{color:#fff}
.lg-tabs{display:flex;background:#0f0f0f;border:1px solid var(--lg-line);border-radius:10px;padding:4px;margin:12px 0 22px}
.lg-tabs a{flex:1;text-align:center;padding:9px 0;border-radius:7px;font-size:14px;font-weight:700;color:var(--lg-muted);text-decoration:none}
.lg-tabs a.on{background:var(--lg-wine);color:#fff}
.lg-card h1{font-size:20px;margin:0 0 2px;font-weight:800;color:#fff;text-align:start}
.lg-sub{color:var(--lg-muted);font-size:13.5px;margin:0 0 18px}
/* الحقول */
.lg-field{margin-bottom:16px}
.lg-field label{display:block;font-size:13px;font-weight:600;color:var(--lg-muted);margin-bottom:6px}
.lg-ctl{position:relative}
.lg-ctl input{width:100%;height:50px;background:#0f0f0f;border:1px solid var(--lg-line-2);border-radius:10px;color:#fff;font-size:15px;padding:0 44px;outline:none;transition:border-color .15s,box-shadow .15s}
.lg-ctl input::placeholder{color:#5a5a5a}
.lg-ctl input:focus{border-color:var(--lg-wine-2);box-shadow:0 0 0 3px rgba(135,40,56,.25)}
.lg-ctl input:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 1000px #0f0f0f inset}
.lg-ctl .lg-lead{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;fill:none;stroke:#7a7a7a;stroke-width:1.8;pointer-events:none}
.lg-ctl .lg-eye{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;padding:6px;background:none;border:0;cursor:pointer;color:#7a7a7a}
.lg-ctl .lg-eye:hover{color:#fff}
.lg-ctl .lg-eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.lg-hint{font-size:12.5px;color:var(--lg-err);margin-top:6px;display:none}
.lg-field.is-error .lg-ctl input{border-color:var(--lg-err)}
.lg-field.is-error .lg-hint{display:block}
.lg-caps{font-size:12px;color:#e0b341;margin-top:6px;display:none}
.lg-field.is-caps .lg-caps{display:block}
.lg-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:4px 0 18px;font-size:13.5px}
.lg-chk{display:flex;align-items:center;gap:8px;color:var(--lg-muted);cursor:pointer;user-select:none}
.lg-chk input{position:absolute;opacity:0;width:0;height:0}
.lg-chk i{width:18px;height:18px;border:1.5px solid var(--lg-line-2);border-radius:4px;display:inline-block;position:relative;flex:0 0 auto}
.lg-chk input:checked + i{background:var(--lg-wine);border-color:var(--lg-wine)}
.lg-chk input:checked + i::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.lg-chk input:focus-visible + i{box-shadow:0 0 0 3px rgba(135,40,56,.35)}
.lg-link{color:var(--lg-orange);font-weight:600;text-decoration:none}
.lg-link:hover{text-decoration:underline;color:var(--lg-orange)}
/* الرسائل: نص عادي، بدون صناديق */
.lg-msg{font-size:13.5px;line-height:1.7;margin:0 0 14px;display:none}
.lg-msg.show{display:block}
.lg-msg.error{color:var(--lg-err)}
.lg-msg.success{color:var(--lg-ok)}
.lg-msg.warning{color:#e0b341}
.lg-msg a,.lg-msg button{color:var(--lg-orange);font-weight:600;background:none;border:0;padding:0;cursor:pointer;font-size:inherit;text-decoration:none}
.lg-msg a:hover,.lg-msg button:hover{text-decoration:underline}
/* الأزرار */
.lg-btn{width:100%;height:50px;border:0;border-radius:10px;background:var(--lg-wine);color:#fff;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .15s}
.lg-btn:hover{background:var(--lg-wine-2)}
.lg-btn:disabled{background:var(--lg-wine-3);cursor:default}
.lg-btn.ok{background:#1f8f4f}
.lg-spin{width:18px;height:18px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:lgSpin .8s linear infinite}
@keyframes lgSpin{to{transform:rotate(360deg)}}
.lg-cf{display:flex;justify-content:center;margin-bottom:14px;min-height:65px}
.lg-or{display:flex;align-items:center;gap:12px;color:var(--lg-dim);font-size:13px;margin:18px 0}
.lg-or::before,.lg-or::after{content:'';flex:1;height:1px;background:var(--lg-line)}
.lg-social{display:flex;gap:10px}
.lg-btn-g{flex:1;height:46px;border-radius:10px;border:1px solid var(--lg-line-2);background:#161616;color:#fff;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;text-decoration:none}
.lg-btn-g:hover{border-color:#666;background:#1c1c1c;color:#fff;text-decoration:none}
.lg-btn-g svg{flex:0 0 auto}
.lg-foot{text-align:center;font-size:14px;color:var(--lg-muted);margin:22px 0 0}
.lg-foot a{color:#fff;font-weight:700;border-bottom:2px solid var(--lg-wine);padding-bottom:1px;text-decoration:none}
.lg-legal{text-align:center;font-size:12px;color:var(--lg-dim);margin:18px 0 0;line-height:1.8}
.lg-legal a{color:#8a8a8a;text-decoration:underline}
/* تحت الكارت */
.lg-trust{position:relative;z-index:2;display:flex;gap:22px;margin-top:22px;font-size:13px;color:var(--lg-muted)}
.lg-trust span{display:flex;align-items:center;gap:7px}
.lg-trust span::before{content:'';width:6px;height:6px;background:var(--lg-wine-2);border-radius:50%}
.lg-pay{position:relative;z-index:2;display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.lg-pay span{font-size:11px;font-weight:700;letter-spacing:.5px;color:#8a8a8a;border:1px solid #2a2a2a;border-radius:6px;padding:3px 9px;background:#141414;direction:ltr}
@media (max-width:520px){
  .lg-stage{padding:20px 12px 24px}
  .lg-card{padding:0 20px 20px}
  .lg-wall{grid-template-columns:repeat(5,1fr);gap:12px}
  .lg-trust{flex-wrap:wrap;justify-content:center;gap:10px 18px;text-align:center}
  .lg-social{flex-direction:column}
}
/* ===== register page (shares everything above) ===== */
.lg-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lg-note{font-size:12px;color:var(--lg-dim);margin-top:6px}
.lg-phone{direction:ltr}
.lg-phone input{padding-left:118px;padding-right:14px;text-align:left}
.lg-cc{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;gap:6px;padding:0 10px 0 12px;border-right:1px solid var(--lg-line-2);cursor:pointer;color:#fff;font-size:13px;font-weight:600;z-index:2;user-select:none;direction:ltr}
.lg-cc img{width:22px;height:15px;border-radius:2px;display:block}
.lg-cc small{color:#888;font-size:9px}
.lg-cc-dd{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;max-height:260px;overflow-y:auto;background:#141414;border:1px solid var(--lg-line-2);border-radius:10px;z-index:9999;box-shadow:0 14px 40px rgba(0,0,0,.6)}
.lg-cc-dd.open{display:block}
.lg-cc-dd input{width:100%;height:40px;padding:0 12px;background:#0f0f0f;border:0;border-bottom:1px solid var(--lg-line);color:#fff;font-size:13px;outline:none;border-radius:10px 10px 0 0}
.lg-cc-item{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;font-size:13px;color:#ddd}
.lg-cc-item:hover{background:rgba(135,40,56,.25)}
.lg-cc-item img{width:22px;height:15px;border-radius:2px}
.lg-cc-item .code{margin-left:auto;color:#888;font-size:12px}
.lg-field.has-dd{position:relative;z-index:20}
.lg-terms{margin:4px 0 18px;font-size:13.5px}
.lg-terms .lg-chk{align-items:flex-start;line-height:1.6}
.lg-terms .lg-chk i{margin-top:3px}
.lg-terms a{color:var(--lg-orange);font-weight:600;text-decoration:none}
.lg-terms a:hover{text-decoration:underline}
.lg-terms.is-error .lg-chk i{border-color:var(--lg-err)}
.lg-terms .lg-hint{margin-top:4px}
.lg-terms.is-error .lg-hint{display:block}
@media (max-width:520px){.lg-grid2{grid-template-columns:1fr;gap:0}}
/* password rules checklist (static/js/pw-rules.js) sits under the password grid */
.lg-card .pw-rules{margin:-6px 0 16px}