/* ═══════════════════════════════════════════════════════════════════════════
 * jadhlah-code.css — «رقمك السري» 🔒 و«رمز واتساب» 💬 (ن٥٣ · تصميمٌ اعتمده سعود)
 * ═══════════════════════════════════════════════════════════════════════════
 * 🔑 **شيئان مختلفان ⇒ اسمٌ ولونٌ وأيقونةٌ لكلٍّ في كلّ بوابة** — والارتباكُ بينهما كان
 *    من كلمةٍ واحدة («الرمز») وطولٍ واحد (٦) وشكلٍ واحد للاثنين.
 *      رمزُ واتساب  ⇒ أخضر · فقاعةُ محادثة · أرقامٌ ظاهرة · «الصق الرمز» · صلاحيةٌ تُعَدّ
 *      رقمُك السري  ⇒ ذهبيّ · قفل · «لا يصلك برسالة»
 * ⚠️ **الأيقوناتُ أقنعةٌ بلون العنصر** (`mask` + `currentColor`) — لا رموزٌ تعبيريّة
 *    تختلف بين الأجهزة، ولا مكتبةٌ خارجية تُحمَّل لها.
 * ⚠️ **والألوانُ بمتغيّراتٍ باحتياطها** — فتعمل في صفحةٍ لا تحمّل `tokens.css`.
 * ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --jc-wa:#25D366; --jc-wa-soft:rgba(37,211,102,.12); --jc-wa-line:rgba(37,211,102,.5);
  --jc-gold:var(--gold,#D4AF37); --jc-gold-soft:rgba(212,175,55,.13); --jc-gold-line:rgba(212,175,55,.5);
  --jc-i-wa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3Cpath d='M8.5 10.5h.01M12 10.5h.01M15.5 10.5h.01' stroke-width='2.6'/%3E%3C/svg%3E");
  --jc-i-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  --jc-i-paste:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");
}

/* ── رأسُ الخطوة: أيقونةٌ + الاسم + سطرٌ يشرحه ───────────────────────────── */
.jc-kind{display:flex;align-items:center;gap:12px;margin:0 0 14px;text-align:right}
.jc-ico{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center}
.jc-ico::before{content:'';width:24px;height:24px;background:currentColor;
  -webkit-mask:var(--jc-i) center/contain no-repeat;mask:var(--jc-i) center/contain no-repeat}
.jc-kind.otp .jc-ico{--jc-i:var(--jc-i-wa);color:var(--jc-wa);background:var(--jc-wa-soft);border:1px solid var(--jc-wa-line)}
.jc-kind.pin .jc-ico{--jc-i:var(--jc-i-lock);color:var(--jc-gold);background:var(--jc-gold-soft);border:1px solid var(--jc-gold-line)}
.jc-kind h1,.jc-kind h2,.jc-kind h3{margin:0;font-size:21px;font-weight:900;line-height:1.35}
.jc-kind p{margin:3px 0 0;color:var(--txt-2,#a9a9b0);font-size:13.5px;line-height:1.75}
.jc-kind p b{color:var(--txt,#f2f2f2)}
.jc-kind .jc-nb{white-space:nowrap}

/* ── الحقل ──────────────────────────────────────────────────────────────── */
input.jc-otp{border-color:var(--jc-wa-line)!important}
input.jc-otp:focus{border-color:var(--jc-wa)!important;box-shadow:0 0 0 3px rgba(37,211,102,.18)!important;outline:none}
input.jc-pin{border-color:var(--jc-gold-line)!important}
input.jc-pin:focus{border-color:var(--jc-gold)!important;box-shadow:0 0 0 3px rgba(212,175,55,.18)!important;outline:none}
.jc-boxes .otp-box:focus{border-color:var(--jc-wa)!important;box-shadow:0 0 0 3px rgba(37,211,102,.18)!important}

/* ── «الصق الرمز» ───────────────────────────────────────────────────────── */
.jc-paste{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px auto 0;
  padding:9px 16px;min-height:44px;border-radius:12px;border:1.5px dashed rgba(37,211,102,.6);
  background:transparent;color:var(--jc-wa);font:inherit;font-weight:700;font-size:14px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background .15s,transform .1s}
.jc-paste::before{content:'';width:17px;height:17px;background:currentColor;
  -webkit-mask:var(--jc-i-paste) center/contain no-repeat;mask:var(--jc-i-paste) center/contain no-repeat}
.jc-paste:hover{background:var(--jc-wa-soft)}
.jc-paste:active{transform:scale(.97)}
.jc-tip{text-align:center;font-size:12.5px;color:var(--txt-2,#a9a9b0);margin:6px 0 0;line-height:1.75}
.jc-howto{text-align:center;font-size:12px;color:var(--txt-3,#8a8a92);margin:8px 0 0;line-height:1.75}

/* ── صلاحيةُ الرمز ──────────────────────────────────────────────────────── */
.jc-ttl{font-variant-numeric:tabular-nums;white-space:nowrap}
.jc-ttl b{color:var(--jc-wa);font-weight:700;font-family:var(--font-num,inherit)}
.jc-ttl.out,.jc-ttl.out b{color:#ef6b6b}

/* ── «لا يصلك برسالة» للرقم السري ────────────────────────────────────────── */
.jc-pin-note{color:var(--jc-gold);font-weight:700}

@media (prefers-reduced-motion:reduce){.jc-paste{transition:none}.jc-paste:active{transform:none}}