/* ═══════════════════════════════════════════════════════
 *  login.css — أُستخرِج آليًا من pages/login.php
 *  المقطع 1 من 1 · سطور 22–22 في الأصل.
 *  ⚠️ الترتيب بين المقاطع مقصود: بينها كتل <style> مشروطة
 *     باقية في الصفحة، والتتالي يعتمد على تسلسلها.
 * ═══════════════════════════════════════════════════════ */
    /* ===== الدخول/التسجيل — كارت متمركز (Apple-light · Segoe UI · أزرق #2563EB) ===== */
    *, *::before, *::after { box-sizing: border-box; }
    :root{--blue:#2563EB;--blue-d:#0064c8;--ink:#1f2937;--mut:#6b7480;--faint:#6b7280;--line:#e8ebf1;--soft:#f6f8fc;--grn:#10B981}
    body { margin:0; min-height:100vh; font-family:'Segoe UI','Segoe UI Arabic',system-ui,-apple-system,'Cairo',sans-serif; background:#eef2f7; color:var(--ink); position:relative; padding:46px 16px; overflow-x:hidden; }
    .lc2-glow{ position:absolute; top:-40px; right:50%; transform:translateX(50%); width:620px; max-width:120%; height:340px; background:radial-gradient(ellipse at center, rgba(0,113,227,.15), transparent 65%); pointer-events:none; }
    .lc2-in{ position:relative; max-width:452px; margin:0 auto; }
    .lc2-brand{ text-align:center; margin-bottom:18px; }
    .lc2-brand .bm-logo{ height:52px; width:auto; display:inline-block; }
    .lc2-brand p{ font-size:12.5px; color:var(--faint); margin-top:5px; }
    .lc2-card{ background:#fff; border:1px solid #ececf0; border-radius:24px; box-shadow:0 24px 60px rgba(13,27,62,.12); padding:28px 26px; }
    .lc2-trust{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-top:22px; }
    .lc2-trust span{ font-size:11.5px; color:var(--mut); display:inline-flex; align-items:center; gap:5px; }
    .lc2-trust i{ color:var(--blue); }
    .lc2-foot{ text-align:center; font-size:11px; color:var(--faint); margin-top:18px; }
    .lc2-foot a{ color:var(--faint); text-decoration:none; margin:0 5px; }
    .lc2-foot a:hover{ color:var(--blue); }
    @media (max-width:520px){ body{ padding:28px 12px; } .lc2-card{ padding:22px 18px; border-radius:20px; } }
    /* ── عناصر الفورم (كما هي، Apple-light) ── */
    .tabs { display:flex; background:var(--soft); border-radius:12px; padding:4px; margin-bottom:20px; }
    .tab-btn { flex:1; padding:10px; border:none; background:transparent; border-radius:9px; font-family:inherit; font-size:14px; font-weight:600; color:var(--faint); cursor:pointer; transition:.2s; }
    .tab-btn.act { background:#fff; color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.08); }
    .dots { display:flex; gap:6px; justify-content:center; margin-bottom:18px; }
    .dot { width:8px; height:8px; border-radius:50%; background:var(--line); transition:.3s; }
    .dot.act { background:var(--blue); width:24px; border-radius:4px; }
    .stp { display:none; }
    .stp.act { display:block; }
    .stp h2 { font-size:21px; font-weight:700; color:var(--ink); margin-bottom:4px; text-align:center; letter-spacing:-.01em; }
    .stp .sub { font-size:13px; color:var(--faint); margin-bottom:18px; text-align:center; }
    .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
    .timer { text-align:center; font-size:12.5px; color:var(--faint); margin-top:12px; }
    .timer a { color:var(--blue); font-weight:600; cursor:pointer; }
    .suc-ico { width:76px; height:76px; border-radius:50%; background:#e7f6ee; color:var(--grn); display:flex; align-items:center; justify-content:center; font-size:36px; margin:0 auto 14px; }
    .prog { height:4px; background:var(--line); border-radius:4px; margin-top:20px; overflow:hidden; }
    .prog-fill { height:100%; background:var(--blue); border-radius:4px; width:0; transition:width 1.5s ease; }
    .form-group { margin-bottom:14px; text-align:right; }
    .form-group label { display:block; font-size:12.5px; font-weight:600; color:#404044; margin-bottom:6px; }
    .form-control { width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:11px; font-family:inherit; font-size:14px; box-sizing:border-box; color:var(--ink); outline:none; transition:.15s; }
    .form-control:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,113,227,.12); }
    .btn-block { width:100%; padding:13px; border:none; border-radius:980px; font-weight:500; font-size:15px; cursor:pointer; transition:background .2s; margin-top:8px; font-family:inherit; }
    .btn-primary { background:var(--blue); color:#fff; }
    .btn-primary:hover { background:var(--blue-d); }
    .alert { padding:11px 13px; border-radius:11px; font-size:13px; font-weight:500; text-align:right; }
    .alert-error { background:#fdecec; color:#a3312f; border:1px solid #f5cbca; }
    .otp-wrap { display:flex; gap:8px; justify-content:center; margin:20px 0; }
    .otp-inp { width:46px; height:52px; text-align:center; font-size:22px; font-weight:700; border:1px solid var(--line); border-radius:12px; font-family:inherit; outline:none; transition:.15s; }
    .otp-inp:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,113,227,.12); }
    .otp-inp.filled { border-color:var(--blue); background:#eaf2fe; }
    .acct-toggle { display:flex; gap:9px; margin-bottom:16px; }
    .acct-btn { flex:1; border:1.5px solid var(--line); border-radius:12px; padding:11px 10px; cursor:pointer; font-family:inherit; background:#fff; text-align:center; transition:.15s; }
    .acct-btn.active { border-color:var(--blue); background:#eaf2fe; color:var(--blue); }
    /* ⚠️ ١٦ أغسطس ٢٠٢٦ — أيقونات نوع الحساب صارت SVG خطّية بدل الإيموجي.
       `line-height:0` يمنع فراغ السطر تحت الرسم، و`currentColor` يجعل
       الأيقونة تتلوّن بأزرق البطاقة المختارة تلقائيًا بلا قاعدة إضافية. */
    .acct-btn .icon { display:block; margin-bottom:4px; line-height:0; }
    .acct-btn .icon svg { width:23px; height:23px; display:inline-block; vertical-align:middle; color:#94a3b8; }
    .acct-btn.active .icon svg { color:var(--blue); }
    .acct-btn .lbl { font-size:13px; font-weight:600; display:block; }
    .search-select-wrap { position:relative; }
    .search-select-wrap input.search-inp { width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:11px 11px 0 0; font-family:inherit; font-size:14px; box-sizing:border-box; outline:none; }
    .search-select-wrap input.search-inp:focus { border-color:var(--blue); }
    .search-select-wrap .opts { display:none; position:absolute; top:100%; right:0; left:0; background:#fff; border:1px solid var(--line); border-top:none; border-radius:0 0 11px 11px; max-height:180px; overflow-y:auto; z-index:99; box-shadow:0 8px 22px rgba(0,0,0,.1); }
    .search-select-wrap .opts.open { display:block; }
    .search-select-wrap .opts div { padding:9px 14px; font-size:13.5px; cursor:pointer; color:#334155; }
    .search-select-wrap .opts div:hover { background:var(--soft); }
    .search-select-wrap .opts div.selected { background:#eaf2fe; color:var(--blue); font-weight:700; }
    

/* ══ الموافقة على الشروط — أُضيفت ٢١ أغسطس ٢٠٢٦ (بند ٠‑٧) ══
   موضعها فوق زرّ الإرسال مباشرةً مقصود: الموافقة تُقرأ قبل الفعل لا بعده. */
.wtq-agree{
  display:flex; align-items:flex-start; gap:9px; cursor:pointer;
  font-size:.82rem; line-height:1.7; color:#334155;
  background:#F8FAFC; border:1px solid #E2E8F0; border-radius:10px;
  padding:11px 13px; margin:4px 0 14px;
}
.wtq-agree input{margin-top:3px; accent-color:#2563EB; flex:0 0 auto; width:16px; height:16px}
.wtq-agree a{color:#2563EB; font-weight:600; text-decoration:none}
.wtq-agree a:hover{text-decoration:underline}
.wtq-agree:focus-within{border-color:#BFDBFE; box-shadow:0 0 0 3px rgba(37,99,235,.12)}

/* WTQ-IOS-ZOOM — الهاتف: خطّ الحقول 16px يمنع تكبير سفاري التلقائي
   عند التركيز (سلوك iOS لأي حقل خطّه أصغر من 16px، ولا يتراجع).

   ⚠️ المحدِّد بالوسم وحده (‎input,select,textarea‎ = أسبقية 0,0,1) **لا
   يكفي هنا**: كل حقل في هذه الصفحة يحمل ‎class="form-control"‎، والقاعدة
   ‎.form-control{font-size:14px}‎ في السطر ٤٣ أسبقيتها 0,1,0 فتغلبه،
   و‎.search-select-wrap input.search-inp‎ في السطر ٦٥ أسبقيتها 0,2,1
   فتغلبه بفارق أكبر. قيس: بقيت ثلاثة عشر حقلًا على ‎14px‎ رغم القاعدة —
   أي أن الإصلاح لم يكن يعمل في الصفحة التي يمرّ بها كل عميل جديد.

   وخانات رمز التحقّق مستثناة صراحةً: ‎.otp-inp‎ خطّها ‎22px‎ (أكبر من
   الحدّ أصلًا فلا تسبّب تكبيرًا)، ولولا الاستثناء لصغّرتها هذه القاعدة. */
@media(max-width:768px){
  input:not(.otp-inp),select,textarea,
  .form-control,
  .search-select-wrap input.search-inp{font-size:16px}
}