/* ══════════════════════════════════════════════════════════════
   بصمة RN: مسار الدخول والتسجيل والدفع (28 أكتوبر، طلب المالك:
   «مزعجه وطويله وزحمه… أعد تصميمها من الصفر، ويكون فيها شطحه ودبوس»)
   نفس هوية /plans وصفحة الدفع: رأس كحلي بخطوط البصمة، وبطاقة وحدة بإطار وظل ثابت،
   والشخصية تطل من ورا حافة البطاقة. صفحة وحدة = عنوان + بطاقة + سطر تحت. بس.
   الصفحات اللي تستخدمه: login, register, forgot-password, verify-otp,
   payment-waiting, payment-failed, payment-success, auth-callback
   ══════════════════════════════════════════════════════════════ */
:root{
  --navy:#0d1a2f; --navy2:#152744; --navy3:#1d3355;
  --teal:#1f9e8f; --teal-b:#35c8b4; --teal-w:#e3f3ef; --teal-d:#157066;
  --coral:#e8604c; --coral-d:#c34532; --coral-w:#fbe6e1;
  --butter:#f5e08a; --butter-w:#fbf5d6; --butter-ink:#4f4312;
  --paper:#f2f5f4; --card:#ffffff; --field:#f6f8f8; --text:#14213a; --text2:#3c4a61; --muted:#66748a; --line:#dbe3e1;
  --ok:#2f8a5c; --ok-w:#e3f4ea;
  --edge:var(--navy);
  --fd:'Baloo Bhaijaan 2','Readex Pro',system-ui,sans-serif;
  --fb:'Readex Pro',system-ui,sans-serif;
  --fn:'Bricolage Grotesque','Readex Pro',system-ui,sans-serif;
  /* أسماء basmah.css القديمة (لو سكربت أو ستايل مضمّن يستخدمها) */
  --brand:var(--teal); --brand-deep:var(--teal-d); --brand-soft:var(--teal-w); --ink:var(--text); --ink2:var(--text2); --bg:var(--paper); --bg2:var(--card); --bg3:var(--field); --font-d:var(--fd); --font-b:var(--fb); --font-n:var(--fn); --coral-soft:var(--coral-w);
}
[data-theme="dark"]{
  --paper:#0a1426; --card:#111f38; --field:#0c182d; --text:#e9eef7; --text2:#c3cde0; --muted:#94a3bd; --line:#223555;
  --teal-w:#123135; --coral-w:#3a2220; --butter-w:#2e2914; --butter-ink:#f3e3a0; --ok-w:#143326; --ok:#5cc08a;
  --edge:var(--teal-b);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body.fl{margin:0;min-height:100vh;min-height:100dvh;font-family:var(--fb);font-size:15px;line-height:1.8;background:var(--paper);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased}
.fl a{color:inherit}
.fl img{max-width:100%}
.fl :is(a,button,summary,[tabindex]):focus-visible{outline:3px solid var(--teal-b);outline-offset:3px}
.fl button,.fl a{-webkit-tap-highlight-color:transparent}
.fl .en{font-family:var(--fn)}
.fl .ltr{direction:ltr;unicode-bidi:embed}

/* ── الرأس الكحلي ── */
.fl-head{position:relative;overflow:hidden;background:radial-gradient(130% 120% at 50% 0%,var(--navy3) 0%,var(--navy) 62%);color:#fff;padding:0 0 64px}
.fl-head .arcs{position:absolute;left:50%;top:-330px;width:820px;height:820px;margin-left:-410px;pointer-events:none;opacity:.5}
.fl-head .arcs path{fill:none;stroke:var(--teal-b);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;opacity:.35;animation:fl-arc 1.6s cubic-bezier(.4,0,.2,1) forwards;animation-delay:var(--d)}
@keyframes fl-arc{to{stroke-dashoffset:0}}
.fl-bar{position:relative;max-width:480px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.fl-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff}
.fl-brand .mk{width:32px;height:32px;border-radius:10px;background:#fff;color:var(--navy);display:grid;place-items:center;flex:none}
.fl-brand .mk svg{width:20px;height:20px}
.fl-brand b{font-family:var(--fd);font-size:18px;font-weight:800;line-height:1}
.fl-brand b span{font-family:var(--fn);font-size:12.5px;color:var(--teal-b);margin-inline-start:4px}
.fl-back{color:#cfe0ea;text-decoration:none;font-size:13px;font-weight:600;padding:6px 12px;border:1.5px solid rgba(255,255,255,.18);border-radius:12px;line-height:1.6}
.fl-back:hover{border-color:var(--teal-b);color:#fff}
.fl-hero{position:relative;max-width:480px;margin:0 auto;padding:6px 18px 0;padding-inline-end:162px}
.fl-title{font-family:var(--fd);font-weight:800;font-size:28px;line-height:1.3;margin:0;color:#fff}
.fl-sub{margin:4px 0 0;color:#c4d3e6;font-size:14px;line-height:1.75}

/* ── الجسم: بطاقة وحدة، والشخصية تطل من ورا حافتها ── */
.fl-main{position:relative;max-width:480px;margin:-46px auto 0;padding:0 18px 40px}
.fl-mz{position:absolute;z-index:0;top:-104px;inset-inline-end:26px;width:auto;height:128px;pointer-events:none;user-select:none;filter:drop-shadow(0 6px 10px rgba(5,12,26,.35))}
.fl-mz.flip{transform:scaleX(-1)}
.fl-card{position:relative;z-index:1;background:var(--card);border:2px solid var(--edge);border-radius:24px;box-shadow:6px 6px 0 var(--edge);padding:22px 20px 20px}
.fl-card > :first-child{margin-top:0}
.fl-foot{margin:18px 4px 0;text-align:center;font-size:14px;font-weight:600;color:var(--text2);line-height:1.9}
.fl-foot a,.fl-link{color:var(--teal-d);font-weight:800;text-decoration:none}
[data-theme="dark"] .fl-foot a,[data-theme="dark"] .fl-link{color:var(--teal-b)}
.fl-foot a:hover,.fl-link:hover{text-decoration:underline}
.fl-small{font-size:12.5px;color:var(--muted);line-height:1.85;margin:12px 2px 0;text-align:center}
.fl-small a{color:var(--teal-d);font-weight:700}
[data-theme="dark"] .fl-small a{color:var(--teal-b)}

/* ── زر قوقل والفاصل ── */
.fl .btn-google{width:100%;min-height:48px;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 14px;background:var(--card);border:1.5px solid var(--line);border-radius:99px;font-family:var(--fb);font-size:15px;font-weight:600;color:var(--text);cursor:pointer;transition:border-color .2s}
.fl .btn-google:hover{border-color:var(--teal)}
.fl .btn-google svg{width:19px;height:19px;flex:none}
.fl .divider{display:flex;align-items:center;gap:12px;margin:16px 0 14px;color:var(--muted);font-size:12.5px;font-weight:600}
.fl .divider::before,.fl .divider::after{content:'';flex:1;height:1.5px;background:var(--line)}

/* ── الحقول ── */
.fl-field{margin-bottom:14px}
.fl-field > label,.fl-lab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:13px;font-weight:700;color:var(--text2);margin-bottom:6px}
.fl-lab a{font-size:12.5px;font-weight:700;color:var(--teal-d);text-decoration:none}
[data-theme="dark"] .fl-lab a{color:var(--teal-b)}
.fl-in,.fl-field input,.fl-field select{width:100%;height:50px;padding:0 14px;background:var(--field);border:1.5px solid var(--line);border-radius:14px;color:var(--text);font-size:16px;font-family:var(--fb);outline:none;transition:border-color .2s,box-shadow .2s;appearance:none;-webkit-appearance:none}
.fl-field input::placeholder{color:#97a3b6;font-weight:400}
[data-theme="dark"] .fl-field input::placeholder{color:#5f6f8c}
.fl-field input:focus,.fl-field select:focus{border-color:var(--teal);box-shadow:0 0 0 4px color-mix(in srgb,var(--teal-b) 22%,transparent);background:var(--card)}
.fl-hint{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.7}
.fl-pw{position:relative}
.fl-pw input{padding-right:50px}
.fl-eye{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:11px;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.fl-eye:hover{color:var(--text);background:color-mix(in srgb,var(--line) 55%,transparent)}
.fl-eye svg{width:20px;height:20px}
.fl-eye .off{display:none}
.fl-eye[aria-pressed="true"] .on{display:none}
.fl-eye[aria-pressed="true"] .off{display:block}
.fl-phone{display:flex;gap:8px;direction:ltr}
.fl-phone select{width:112px;flex:none;padding:0 10px;font-size:16px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 16px) 22px,calc(100% - 11px) 22px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:26px}
.fl-phone input{flex:1;min-width:0}

/* ── الأزرار ── */
.fl-btn{width:100%;min-height:54px;display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--fd);font-weight:800;font-size:18px;line-height:1.3;color:#fff;background:var(--coral);border:2px solid var(--edge);border-radius:16px;padding:12px 18px;box-shadow:4px 4px 0 var(--edge);cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .15s}
.fl-btn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--edge)}
.fl-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--edge)}
.fl-btn:disabled{opacity:.85;cursor:progress;transform:none;box-shadow:4px 4px 0 var(--edge)}
.fl a.fl-btn{color:#fff}
.fl a.fl-btn.ghost{color:var(--text)}
.fl-btn.teal{background:var(--teal)}
.fl-btn.ghost{background:var(--card);color:var(--text);min-height:48px;font-size:16px;box-shadow:3px 3px 0 var(--edge)}
.fl-btn + .fl-btn{margin-top:12px}
.fl .spin{display:inline-block;width:17px;height:17px;border:2.5px solid currentColor;border-top-color:transparent;border-radius:50%;animation:fl-rot .7s linear infinite;vertical-align:-3px;flex:none}
@keyframes fl-rot{to{transform:rotate(360deg)}}

/* ── الرسائل (يستخدمها السكربت: .msg info/error/ok) ── */
.fl .msg{margin-top:12px;padding:10px 14px;border-radius:14px;font-size:13.5px;text-align:center;font-weight:600;line-height:1.8;background:var(--teal-w);color:var(--teal-d);border:1.5px solid transparent}
[data-theme="dark"] .fl .msg{color:var(--teal-b)}
.fl .msg.error,.fl .msg.err{background:var(--coral-w);color:var(--coral-d);border-color:rgba(232,96,76,.35)}
[data-theme="dark"] .fl .msg.error,[data-theme="dark"] .fl .msg.err{color:#ffb2a6}
.fl .msg.ok{background:var(--ok-w);color:var(--ok);border-color:transparent}
.fl .help-box{margin-top:12px;padding:12px 14px;background:var(--field);border:1.5px solid var(--line);border-radius:14px;font-size:13px;color:var(--text2);line-height:1.9;text-align:center}
.fl .help-box a{color:#1a8f4c;font-weight:800;text-decoration:none}
[data-theme="dark"] .fl .help-box a{color:#4ade80}

/* ── تنبيهات داخل البطاقة ── */
.fl-note{margin-top:14px;padding:12px 14px;border-radius:16px;background:var(--teal-w);color:var(--text);font-size:13.5px;line-height:1.85}
.fl-note.warn{background:var(--butter-w)}
.fl-note.bad{background:var(--coral-w)}
.fl-note b{font-weight:800}
.fl-note h2{font-family:var(--fd);font-weight:800;font-size:17px;line-height:1.4;margin:0 0 4px}

/* ── شريحة الباقة (التسجيل) ── */
.fl-plan{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;padding:12px 14px;border-radius:16px;background:var(--teal-w)}
.fl-plan b{display:block;font-family:var(--fd);font-weight:800;font-size:16px;line-height:1.45}
.fl-plan small{display:block;font-size:12px;color:var(--muted);font-weight:600;line-height:1.6}
.fl-plan small a{color:var(--teal-d);font-weight:800;text-decoration:none}
[data-theme="dark"] .fl-plan small a{color:var(--teal-b)}
.fl-plan .pr{flex:none;text-align:end;line-height:1.1}
.fl-plan .pr span{font-family:var(--fn);font-weight:800;font-size:24px;color:var(--teal-d)}
[data-theme="dark"] .fl-plan .pr span{color:var(--teal-b)}
.fl-plan .pr small{margin-top:2px}

/* ── حالات الصفحة (انتظار، نجاح، فشل) ── */
.fl-state{text-align:center;padding:8px 4px 4px}
.fl-state h2{font-family:var(--fd);font-weight:800;font-size:22px;line-height:1.4;margin:0 0 6px}
.fl-state p{color:var(--text2);font-size:14px;line-height:1.9;margin:0 0 16px}

/* ── خطوات (الدفع) ── */
.fl-steps{position:relative;list-style:none;margin:14px 0 0;padding:0;display:flex;align-items:center;max-width:300px}
.fl-steps li{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11.5px;font-weight:600;color:#9fb2cb;flex:1;position:relative}
.fl-steps li i{font-style:normal;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--fn);font-weight:800;font-size:12.5px;background:var(--navy2);border:1.5px solid #34507a;color:#9fb2cb;position:relative;z-index:1}
.fl-steps li:not(:last-child)::after{content:"";position:absolute;top:13px;inset-inline-start:calc(50% + 15px);width:calc(100% - 30px);height:2px;background:#2c4468}
.fl-steps li.done i{background:var(--teal-b);border-color:var(--teal-b);color:var(--navy)}
.fl-steps li.done::after{background:var(--teal-b)}
.fl-steps li.now{color:#fff}
.fl-steps li.now i{background:#fff;border-color:#fff;color:var(--navy);box-shadow:0 0 0 4px rgba(53,200,180,.28)}

/* ── الحركة: لحظة وحدة، الخطوط ترتسم والشخصية تطلع من ورا البطاقة ── */
@media (prefers-reduced-motion:no-preference){
  .fl-mz{animation:fl-rise .7s cubic-bezier(.2,.9,.25,1.15) .25s both}
  .fl-mz.flip{animation-name:fl-rise-flip}
  @keyframes fl-rise{from{transform:translateY(46px);opacity:0}to{transform:none;opacity:1}}
  @keyframes fl-rise-flip{from{transform:scaleX(-1) translateY(46px);opacity:0}to{transform:scaleX(-1);opacity:1}}
}
@media (prefers-reduced-motion:reduce){.fl-head .arcs path{animation:none;stroke-dashoffset:0}}

/* ── الشاشات ── */
@media (max-width:360px){
  .fl-title{font-size:24px}
  .fl-hero{padding-inline-end:138px}
  .fl-mz{height:112px;top:-90px;inset-inline-end:18px}
  .fl-card{padding:20px 16px 18px}
  .fl-main{padding:0 14px 34px}
  .fl-bar{padding:10px 14px}
  .fl-hero{padding-inline-start:14px}
}
@media (min-width:760px){
  .fl-head{padding-bottom:76px}
  .fl-hero{padding-top:18px;padding-inline-end:186px}
  .fl-title{font-size:34px}
  .fl-sub{font-size:15px}
  .fl-main{margin-top:-56px}
  .fl-mz{height:150px;top:-124px}
}