/* أنماط صفحة المحامي — كانت مضمّنة في كل صفحة من عشرات الآلاف فتتكرّر بلا داعٍ.
   نُقلت إلى ملفٍّ واحد يُخزَّن سنةً كاملة (immutable)، فينزَّل مرّة ويُستعمل للجميع.
   المتغيّرات الديناميكية (ألوان الدولة وصورة الغلاف) تبقى مضمّنة في الصفحة. */

  /* ══════════ نظام التصميم ══════════
     مرجع البنية: صفحة LinkedIn الشخصية — غلاف عريض، صورة دائرية متداخلة معه،
     بطاقات بيضاء منفصلة على خلفية رمادية، مسافات سخيّة، وحدة إدخال ثابتة الارتفاع. */
  :root{            /* لون الدولة */
    --ink:#1b1f23; --ink-2:#404349; --mut:#6b7280;
    --line:#e6e9ec; --bg:#f4f2ee;               /* رمادي LinkedIn الدافئ */
    --card:#ffffff; --gold:#e0b64a; --gold-d:#5c4409; --silver:#c9ced6;
    --r:10px;                                    /* نصف قطر البطاقات */
    /* أسماء مرادفة يستعملها الهيدر المشترك (partials/site-nav) —
       إغفالها يجعل متغيّراته غير معرّفة فتنهار ألوان أزراره. */
    --qa-ink:#1b1f23; --qa-mut:#6b7280; --qa-line:#e6e9ec; --qa-soft:#f5f8fe;
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  * { font-weight: 400 !important; }
  h1,h2,h3,h4,b,strong{ font-weight:500 !important; }
  .fas,.fa-solid{ font-weight:900 !important; }
  .far,.fa-regular,.fab,.fa-brands{ font-weight:400 !important; }
  html{ -webkit-text-size-adjust:100%; }
  body{ background:var(--bg); color:var(--ink); font-family:'Rubik',"RubikFB",system-ui,sans-serif;
        overflow-x:hidden; line-height:1.6; }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }
  /* نفس عرض وحشو .qa-wrap في الرئيسية والهيدر — أي اختلاف يجعل المحتوى أضيق من الهيدر */
  .wrap{ max-width:1200px; margin:0 auto; padding:0 22px; }

  /* ── أزرار على نمط LinkedIn: حبّة كاملة الاستدارة ── */
  .btn{ border-radius:999px; padding:9px 20px; font-size:14.5px; cursor:pointer; font-family:inherit;
        border:1.5px solid transparent; display:inline-flex; align-items:center; justify-content:center;
        gap:8px; white-space:nowrap; transition:background .15s, border-color .15s, color .15s; }
  .btn-pri{ background:var(--br); color:#fff; }
  .btn-pri:hover{ background:var(--br-d); }
  .btn-out{ background:transparent; color:var(--br); border-color:var(--br); }
  .btn-out:hover{ background:rgba(0,0,0,.04); }
  .btn-mut{ background:transparent; color:var(--ink-2); border-color:#9aa0a6; }
  /* زرّ التمييز بلون الباقة الذهبية ليقرأ فوراً أنه ترقية مدفوعة لا إجراء عادي */
  .btn-up{ background:transparent; color:#a16207; border-color:#e5c76b; }
  .btn-up:hover{ background:#fef8e7; }
  .btn-mut:hover{ background:rgba(0,0,0,.05); border-color:var(--ink-2); }
  .btn-sm{ padding:6px 15px; font-size:13.5px; }

  /* ══ البطاقة الأساسية ══ */
  .card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r);
         margin:0 0 12px; overflow:hidden; }
  .card-in{ padding:24px; }
  .card h2{ font-size:20px; color:var(--ink); margin:0 0 4px; }
  .card .sechint{ font-size:13.5px; color:var(--mut); margin:0 0 18px; }
  /* ── أسئلة شائعة ── */
  .faqs{ display:flex; flex-direction:column; gap:10px; }
  .faq{ border:1px solid var(--line); border-radius:var(--r); background:#fff; overflow:hidden; }
  .faq summary{ display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer;
                padding:14px 16px; list-style:none; transition:background .15s; }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary:hover{ background:#fafbfc; }
  .faq summary h3{ margin:0; font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.55; }
  .faq summary i{ font-size:11px; color:var(--mut); flex-shrink:0; transition:transform .2s; }
  .faq[open] summary i{ transform:rotate(180deg); }
  .faq[open] summary{ border-bottom:1px solid var(--line); }
  .faq p{ margin:0; padding:14px 16px 16px; font-size:14px; line-height:1.9; color:var(--ink-2); }
  @media(prefers-reduced-motion:reduce){ .faq summary i{ transition:none; } }

  /* ══ بطاقة الهوية: غلاف + صورة متداخلة ══ */
  .cover{ height:200px; position:relative; background:linear-gradient(120deg,var(--br) 0%,var(--br-d) 100%); }
  .cover::after{ content:''; position:absolute; inset:0; opacity:.16;
                 background:var(--hero) center/cover no-repeat; }
  /* الشريحة الدعائية: أعلى الغلاف بعيداً عن الأفاتار (يبدأ بـ margin-top:-84px) */
  .cta-cover{ position:absolute; top:14px; inset-inline-start:16px; z-index:2;
              display:inline-flex; align-items:center; gap:8px; max-width:min(680px, calc(100% - 32px));
              padding:8px 14px; border-radius:999px; text-decoration:none;
              background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.34);
              -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
              color:#fff; font-size:13px; font-weight:600; line-height:1.5;
              box-shadow:0 3px 14px rgba(0,0,0,.16); transition:background .18s, transform .18s; }
  .cta-cover:hover{ background:rgba(255,255,255,.26); transform:translateY(-1px); }
  .cta-cover .cta-ico{ font-size:15px; }
  .cta-cover b{ font-weight:800; }
  .cta-cover .cta-arw{ font-size:15px; opacity:.85; }
  .cta-short{ display:none; }
  /* ── حوار الإعلان: صغير، مركزي، لا يحجب المحتوى إلا للحظة ── */
  .qa-adlg-ov{ position:fixed; inset:0; z-index:9999; display:none;
               align-items:center; justify-content:center; padding:18px;
               background:rgba(8,20,40,.45); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
               opacity:0; transition:opacity .22s ease; }
  .qa-adlg-ov.on{ display:flex; opacity:1; }
  .qa-adlg{ width:100%; max-width:390px; background:#fff; border-radius:16px; overflow:hidden;
            box-shadow:0 24px 70px rgba(7,34,71,.34); transform:translateY(10px) scale(.98);
            transition:transform .22s ease; }
  .qa-adlg-ov.on .qa-adlg{ transform:none; }
  .qa-adlg-fig{ position:relative; display:block; line-height:0; }
  .qa-adlg-fig img{ width:100%; height:auto; display:block; }
  /* التصميم الجديد بلا علامة مرسومة — فالزرّ مرئيٌّ بذاته: قرصٌ داكن شفيف
     يُقرأ فوق الخلفية الفاتحة دون أن ينافس العنوان */
  .qa-adlg-x{ position:absolute; top:9px; inset-inline-end:9px; width:30px; height:30px;
              border:0; border-radius:50%; cursor:pointer; padding:0;
              display:flex; align-items:center; justify-content:center;
              background:rgba(11,34,70,.10); color:#0b2246; font-size:17px; font-weight:700;
              line-height:1; transition:background .15s ease; }
  .qa-adlg-x:hover{ background:rgba(11,34,70,.20); }
  .qa-adlg-x:focus-visible{ outline:2px solid #1d4ed8; outline-offset:2px; }
  .qa-adlg-body{ padding:14px 16px 16px; }
  .qa-adlg-line{ font-size:12.5px; line-height:1.9; color:#334155; font-weight:600;
                 text-align:center; margin:0 0 12px; }
  .qa-adlg-line b{ color:#0f172a; font-weight:800; }
  .qa-adlg-acts{ display:flex; gap:10px; }
  .qa-adlg-acts button{ flex:1; border-radius:13px; padding:15px 12px; cursor:pointer;
                        font-family:inherit; font-size:15.5px; font-weight:800; letter-spacing:.2px;
                        transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; }
  .qa-adlg-acts button:active{ transform:translateY(1px); }
  /* ذهبي: تدرّج بثلاث محطّات يعطي بريق المعدن — ونصٌّ داكن لا أبيض،
     فالأبيض على الذهب يسقط تباينه دون حدّ الوصولية (WCAG AA) */
  .qa-adlg-yes{ border:0; color:#3b2a05;
                background:linear-gradient(135deg,#f3d783 0%,#d4af37 45%,#b8912b 100%);
                box-shadow:0 8px 22px -8px rgba(180,140,40,.85), inset 0 1px 0 rgba(255,255,255,.55); }
  .qa-adlg-yes:hover{ filter:brightness(1.06); box-shadow:0 10px 26px -8px rgba(180,140,40,.95), inset 0 1px 0 rgba(255,255,255,.6); }
  /* فضّي: أفتح وأبرد، ويبقى ثانوياً بصرياً رغم كِبَره */
  .qa-adlg-no{ flex:0 0 36% !important; border:1px solid #c3ccd8; color:#3f4a5a;
               background:linear-gradient(135deg,#fdfdfe 0%,#e9edf3 55%,#d7dee7 100%);
               box-shadow:0 4px 14px -6px rgba(60,72,92,.4), inset 0 1px 0 rgba(255,255,255,.85); }
  .qa-adlg-no:hover{ filter:brightness(.985); }
  @media (max-width:480px){ .qa-adlg{ max-width:340px; } .qa-adlg-line{ font-size:12px; }
    .qa-adlg-acts button{ font-size:14.5px; padding:14px 10px; }
    .qa-adlg-no{ flex:0 0 38% !important; } }
  @media (prefers-reduced-motion:reduce){ .qa-adlg-ov, .qa-adlg{ transition:none; } }
  .idbody{ padding:0 24px 22px; position:relative; }
  .avwrap{ margin-top:-84px; margin-bottom:14px; width:152px; height:152px; position:relative; }
  .av,.avf{ width:152px; height:152px; border-radius:50%; border:4px solid #fff;
            box-shadow:0 2px 10px rgba(0,0,0,.14); background:#eef1f5; }
  .av{ object-fit:cover; object-position:top center; }
  .avf{ display:flex; align-items:center; justify-content:center; font-size:60px;
        background:linear-gradient(135deg,var(--br),var(--br-d)); color:#fff; }
  /* الشارة على حافّة الصورة كما في LinkedIn */
  .tb{ position:absolute; inset-inline-start:6px; bottom:6px; width:40px; height:40px; border-radius:50%;
       display:flex; align-items:center; justify-content:center; font-size:17px; border:3px solid #fff; }
  .tb-gold{ background:linear-gradient(135deg,#f7e7b4,var(--gold)); color:var(--gold-d); }
  .tb-silver{ background:linear-gradient(135deg,#eef0f3,var(--silver)); color:#3f4650; }

  /* ══ التمييز المدفوع: إطار الصورة وشارة الاسم وصفّ المزايا — أمّا الغلاف فيبقى
     بلون الدولة كما هو، فهو هوية الموقع لا مساحة إعلانية ══ */
  /* إطار معدني حول الصورة */
  .p-gold  .av, .p-gold  .avf{ border-color:#e3bd52; box-shadow:0 0 0 3px #fff, 0 3px 14px rgba(184,134,11,.4); }
  .p-silver .av, .p-silver .avf{ border-color:#aab2bb; box-shadow:0 0 0 3px #fff, 0 3px 14px rgba(90,100,115,.34); }
  /* شارة الباقة بجانب الاسم — أوضح من أيقونة على حافّة الصورة */
  .pchip{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; border-radius:999px;
          padding:4px 13px; vertical-align:middle; }
  .pchip-gold{ background:linear-gradient(135deg,#fdf3d4,#f2dd9e); color:#7a5a07; border:1px solid #e3c76b; }
  .pchip-silver{ background:linear-gradient(135deg,#f2f4f6,#dfe3e8); color:#4a515a; border:1px solid #c3cad2; }
  /* بطاقة الاستشارة تتحوّل إلى دعوة أقوى للمميّز */
  .p-gold  .askcard{ border-color:#e3c76b; background:linear-gradient(180deg,#fffdf5,#fff); }
  .p-silver .askcard{ border-color:#c3cad2; background:linear-gradient(180deg,#fafbfc,#fff); }
  .askcard .prio{ display:flex; align-items:center; gap:7px; font-size:12px; color:#7a5a07;
                  background:#fdf6e3; border-radius:8px; padding:7px 10px; margin:0 0 11px; }
  .p-silver .askcard .prio{ color:#4a515a; background:#f1f3f5; }
  /* مزايا الباقة — صفٌّ يشرح ما اشتراه فعلاً */
  .pbenef{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
  .pbenef span{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:#5a4708;
                background:#fdf6e3; border:1px solid #f0e0b0; border-radius:999px; padding:6px 13px; }
  .p-silver .pbenef span{ color:#464d55; background:#f4f6f8; border-color:#dde2e7; }
  .pbenef i{ font-size:11px; opacity:.8; }
  .pdisc{ font-size:11.5px; color:var(--mut); margin:9px 0 0; }

  .idgrid{ display:grid; grid-template-columns:1fr auto; gap:26px; align-items:start; }
  .idmain{ min-width:0; }
  .idmain h1{ font-size:26px; line-height:1.35; color:var(--ink); margin:0 0 3px;
              display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
  .vchk{ font-size:16px; color:#0a66c2; }
  .headline{ font-size:16px; color:var(--ink-2); line-height:1.6; margin:0 0 6px; }
  .meta{ font-size:14px; color:var(--mut); display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 4px; }
  .meta .dot{ width:3px; height:3px; border-radius:50%; background:#9aa0a6; }
  .meta a{ color:var(--br); }
  .idacts{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }

  /* بطاقة الاستشارة داخل الهوية (يسار) */
  .askcard{ width:264px; border:1px solid var(--line); border-radius:var(--r); padding:16px; background:#fbfcfd; }
  .askcard b{ font-size:14.5px; display:flex; align-items:center; gap:8px; color:var(--ink); margin-bottom:6px; }
  .askcard p{ font-size:13px; color:var(--mut); line-height:1.75; margin:0 0 13px; }
  .askcard .btn{ width:100%; }

  /* ══ التبويبات ══ */
  .tabs{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); margin:0 0 12px;
         display:flex; gap:4px; padding:0 12px; overflow-x:auto; }
  .tabs a{ padding:15px 14px 12px; font-size:14px; color:var(--mut); white-space:nowrap;
           border-bottom:2px solid transparent; display:inline-flex; align-items:center; gap:7px; }
  .tabs a:hover{ color:var(--ink); }
  .tabs a.on{ color:var(--br); border-bottom-color:var(--br); }
  .tabs i{ font-size:12.5px; }

  /* ══ العمودان ══ */
  .cols{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; padding-bottom:36px; }

  /* ── وحدة الإدخال (خبرة/شهادة/عضوية) — بنية LinkedIn ── */
  .entry{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid #f0f2f4; }
  .entry:first-child{ padding-top:0; }
  .entry:last-child{ border-bottom:none; padding-bottom:0; }
  .elogo{ width:48px; height:48px; border-radius:8px; flex-shrink:0; display:flex; align-items:center;
          justify-content:center; background:#eef1f5; color:var(--br); font-size:19px; }
  .ebody{ flex:1; min-width:0; }
  .ebody b{ font-size:16px; color:var(--ink); display:block; line-height:1.45; }
  .ebody .org{ font-size:14px; color:var(--ink-2); display:block; margin-top:1px; }
  .ebody .yr{ font-size:13.5px; color:var(--mut); display:block; margin-top:2px; }
  .ebody p{ font-size:14px; color:var(--ink-2); line-height:1.75; margin-top:8px; }

  .about{ font-size:15px; line-height:1.85; color:var(--ink-2); white-space:pre-line; }

  /* ── المهارات/التخصّصات: عناصر مقسّمة عمودين كما في LinkedIn ── */
  .skills{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 26px; }
  .skill{ padding:13px 0; border-bottom:1px solid #f0f2f4; display:flex; gap:12px; align-items:flex-start; }
  .skill i{ width:34px; height:34px; border-radius:8px; flex-shrink:0; display:flex; align-items:center;
            justify-content:center; background:#eef1f5; color:var(--br); font-size:14px; }
  .skill b{ font-size:15px; display:block; color:var(--ink); line-height:1.45; }
  .skill span{ font-size:13px; color:var(--mut); line-height:1.7; display:block; margin-top:2px; }

  /* ── نطاق العمل الجغرافي ── */
  /* مواضيع القضايا — شرائح، الأبرز مميّزة */
  .tpx{ display:flex; flex-wrap:wrap; gap:9px; }
  .tpc{ display:inline-flex; align-items:center; gap:7px; background:#f5f7fb; border:1px solid #e5e7ee;
        border-radius:99px; padding:8px 14px; font-size:13.5px; color:#3d4457; }
  .tpc i{ font-size:11px; color:#8a90a3; }
  .tpc.t1{ background:#eaf1fb; border-color:#c9dcf5; color:#123a72; font-weight:600; }
  .tpc.t1 i{ color:#2c5da8; }
  .tpnarr{ margin:16px 0 0; padding-top:14px; border-top:1px solid #eef0f5; font-size:14.5px;
           line-height:2; color:#3d4457; }
  .tpnarr b{ color:#072247; font-weight:600; }
  /* سجلّ المحاكم — جدول بأشرطة نسبيّة */
  .crt{ display:flex; flex-direction:column; gap:9px; }
  .crow{ display:grid; grid-template-columns: minmax(120px,1.5fr) 2fr minmax(80px,auto); gap:12px; align-items:center; }
  .crow .cname{ display:flex; align-items:center; gap:8px; font-size:14px; color:#0f1426; min-width:0; }
  .crow .cname i{ color:#8a90a3; font-size:12px; flex:0 0 auto; }
  .crow .cname span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .crow .cbar{ background:#eef0f5; border-radius:99px; height:8px; overflow:hidden; }
  .crow .cbar span{ display:block; height:100%; background:#8fa6c4; border-radius:99px; }
  .crow.c1 .cbar span{ background:#072247; }
  .crow.c1 .cname{ font-weight:600; }
  .crow .cnum{ font-size:12.5px; color:#5b6279; white-space:nowrap; text-align:left; }
  .crow .cnum b{ color:#072247; font-size:14px; }
  .cnarr{ margin:16px 0 0; padding-top:14px; border-top:1px solid #eef0f5; font-size:14.5px; line-height:2; color:#3d4457; }
  .cnarr b{ color:#072247; font-weight:600; }
  @media(max-width:560px){ .crow{ grid-template-columns: 1fr auto; } .crow .cbar{ grid-column:1/-1; } }
  .areas{ display:flex; flex-wrap:wrap; gap:9px; }
  .area{ display:inline-flex; align-items:center; gap:7px; background:#f2f4f7; color:#3d4752;
         border-radius:999px; padding:8px 15px; font-size:13.5px; }
  .area i{ font-size:11px; color:var(--mut); }
  .area.a1{ background:var(--br); color:#fff; }        /* الأكثر حضوراً */
  .area.a1 i{ color:rgba(255,255,255,.75); }
  .office{ display:flex; gap:12px; align-items:flex-start; margin-top:18px; padding-top:16px; border-top:1px solid #f0f2f4; }
  .office i{ width:34px; height:34px; border-radius:8px; flex-shrink:0; display:flex; align-items:center;
             justify-content:center; background:#eef1f5; color:var(--br); font-size:14px; }
  .office b{ font-size:14px; display:block; color:var(--ink); }
  .office span{ font-size:13px; color:var(--mut); line-height:1.7; display:block; margin-top:2px; }

  /* ── مسيرة المزاولة ── */
  .span{ display:flex; gap:26px; align-items:center; flex-wrap:wrap; }
  .spanbig{ text-align:center; flex-shrink:0; }
  .spanbig b{ font-size:46px; line-height:1; color:var(--br); display:block; }
  .spanbig span{ font-size:13px; color:var(--mut); display:block; margin-top:5px; }
  .spanbar{ flex:1; min-width:230px; }
  .sbline{ display:flex; align-items:center; gap:0; }
  .sbdot{ width:11px; height:11px; border-radius:50%; background:var(--br); flex-shrink:0; }
  .sbfill{ flex:1; height:3px; background:linear-gradient(90deg,var(--br),#c9d2dd); }
  .sbyr{ display:flex; justify-content:space-between; font-size:13px; color:var(--ink); margin-top:7px; }
  .spanbar p{ font-size:13px; color:var(--mut); line-height:1.85; margin-top:11px; }

  /* ── الشريط الجانبي ── */
  .side .card-in{ padding:18px 20px; }
  .side h2{ font-size:16.5px; margin-bottom:12px; }
  .srow{ display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px solid #f0f2f4; }
  .srow:first-child{ padding-top:0; } .srow:last-child{ border-bottom:none; padding-bottom:0; }
  .sic{ width:34px; height:34px; border-radius:8px; flex-shrink:0; display:flex; align-items:center;
        justify-content:center; background:#eef1f5; color:var(--br); font-size:14px; }
  .sv{ min-width:0; flex:1; }
  .sv .lb{ font-size:12px; color:var(--mut); display:block; }
  .sv .val{ font-size:14px; color:var(--ink); word-break:break-word; }
  .sv .val a{ color:var(--br); }
  .stat{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #f0f2f4; }
  .stat:last-child{ border-bottom:none; }
  .stat .lb{ font-size:14px; color:var(--ink-2); flex:1; }
  .stat .num{ font-size:17px; color:var(--br); }

  /* ── دعوة التفعيل ── */
  /* تنبيه الصفة — لغير المزاولين. محايد اللون: ليس تحذير خطر بل تصريح حالة. */
  .stnote{ display:flex; gap:11px; align-items:flex-start; background:#fbf7ec; border:1px solid #ecdcb4;
           border-radius:12px; padding:13px 15px; margin:14px 0 4px; }
  .stnote > i{ color:#b8912b; font-size:15px; margin-top:2px; flex-shrink:0; }
  .stnote b{ display:block; font-size:14.5px; color:#6b5410; margin-bottom:3px; }
  .stnote p{ margin:0 0 5px; font-size:13.5px; line-height:1.75; color:#5b5340; }
  .stnote span{ font-size:12px; color:#8a7f62; line-height:1.7; }
  .stnote a{ color:#8a6d16; text-decoration:underline; }
  .claim{ background:var(--card); border:1px solid var(--line); border-radius:var(--r);
          padding:20px 24px; display:flex; gap:15px; align-items:center; flex-wrap:wrap; margin:0 0 12px; }
  .claimic{ width:48px; height:48px; border-radius:8px; flex-shrink:0; display:flex; align-items:center;
            justify-content:center; background:#eef1f5; color:var(--br); font-size:19px; }
  .claim .cx{ flex:1; min-width:190px; }
  .claim b{ font-size:16px; display:block; margin-bottom:2px; }
  .claim p{ font-size:13.5px; color:var(--mut); line-height:1.7; margin:0; }

  /* ── محامون آخرون ── */
  .people{ display:flex; flex-direction:column; }
  .person{ display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid #f0f2f4; }
  .person:last-child{ border-bottom:none; padding-bottom:0; }
  .person:first-child{ padding-top:0; }
  .person img,.person .pi{ width:48px; height:48px; border-radius:50%; flex-shrink:0; }
  .person img{ object-fit:cover; object-position:top center; background:#eef1f5; }
  .person .pi{ display:flex; align-items:center; justify-content:center; background:#eef1f5; color:var(--br); font-size:18px; }
  .person .px{ flex:1; min-width:0; }
  .person b{ font-size:15px; display:block; line-height:1.45; }
  .person span{ font-size:13px; color:var(--mut); }

  .cta{ background:var(--card); border:1px solid var(--line); border-radius:var(--r);
        padding:26px 24px; text-align:center; margin:0 0 16px; }
  .cta h2{ font-size:18px; margin-bottom:7px; }
  .cta p{ font-size:14px; color:var(--mut); margin:0 auto 16px; line-height:1.8; max-width:520px; }
  .note{ font-size:12.5px; line-height:1.9; color:var(--mut); text-align:center; padding:0 0 26px; }
  .note a{ color:var(--br); }
  .ftr{ background:var(--card); border-top:1px solid var(--line); padding:20px; text-align:center;
        font-size:12.5px; color:var(--mut); }

  @media(max-width:1000px){
    .cols{ grid-template-columns:1fr; }
    .idgrid{ grid-template-columns:1fr; }
    .askcard{ width:100%; }
  }
  @media(max-width:640px){
    .wrap{ padding:0 12px; }
    .cover{ height:130px; }
    .cta-cover{ top:10px; inset-inline-start:12px; padding:6px 11px; font-size:11.5px; gap:6px;
                max-width:calc(100% - 24px); }
    .cta-full{ display:none; }
    .cta-short{ display:inline; }
    .idbody{ padding:0 18px 20px; }
    .avwrap{ margin-top:-56px; width:104px; height:104px; }
    .av,.avf{ width:104px; height:104px; font-size:42px; }
    .tb{ width:32px; height:32px; font-size:14px; }
    .idmain h1{ font-size:21px; }
    .headline{ font-size:14.5px; }
    .card-in{ padding:20px 18px; }
    .skills{ grid-template-columns:1fr; }
    .idacts .btn{ flex:1; }
  }


  .ustep{ display:none; } .ustep.on{ display:block; }
  .uexp{ display:flex; gap:10px; align-items:flex-start; background:#f1f6ff; border:1px solid #d8e6fb;
         border-radius:12px; padding:11px 14px; margin-bottom:14px; font-size:12.5px; line-height:1.85; color:#334155; }
  .uexp i{ color:var(--qa-blue); margin-top:3px; }
  .uexp.soon{ background:#fff7ed; border-color:#fed7aa; }        /* أوشك على الانتهاء */
  .uexp.soon i{ color:#c2410c; }
  .uplan{ border:1.5px solid var(--qa-line); border-radius:14px; padding:16px 18px; margin-bottom:11px;
          cursor:pointer; background:#fff; width:100%; font-family:inherit; text-align:start; display:block; }
  .uplan:hover{ border-color:var(--qa-blue); }
  .uplan .uh{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
  .uplan .uic{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:15px; }
  .uic-silver{ background:#eef2f7; color:#8a9099; } .uic-gold{ background:#fef3c7; color:#b8860b; }
  .uplan .un{ font-size:15px; flex:1; }
  .uplan .up{ font-size:19px; color:var(--qa-blue); } .uplan .up small{ font-size:12px; color:var(--qa-mut); }
  .uplan ul{ list-style:none; margin:0; padding:0; }
  .uplan li{ font-size:12.5px; color:#475569; line-height:1.8; padding-inline-start:19px; position:relative; }
  .uplan li:before{ content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; color:#16a34a;
                    position:absolute; inset-inline-start:0; font-size:10px; top:4px; }
  /* مبدّل المدّة: خياراته الثلاثة مرئية دفعةً واحدة — القائمة المنسدلة تخفيها خلف ضغطة */
  .useg{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1.5px solid var(--qa-line);
         border-radius:12px; overflow:hidden; margin-bottom:12px; }
  .useg button{ border:none; background:#fff; color:#475569; padding:12px 8px; cursor:pointer;
                font-family:inherit; font-size:13.5px; transition:background .15s, color .15s; }
  .useg button + button{ border-inline-start:1.5px solid var(--qa-line); }
  .useg button:hover{ background:#f6f9ff; }
  .useg button.on{ background:var(--qa-blue); color:#fff; }
  .utot{ background:var(--qa-blue); color:#fff; border-radius:12px; padding:13px 17px; display:flex;
         align-items:center; justify-content:space-between; margin-top:6px; }
  .utot b{ font-size:21px; }
  .upay{ border:1.5px solid var(--qa-line); border-radius:11px; padding:11px 14px; margin-bottom:9px;
         cursor:pointer; background:#fff; width:100%; font-family:inherit; text-align:start; display:block; }
  .upay.on{ border-color:var(--qa-blue); background:#f8fbff; }
  .upay b{ font-size:13.5px; display:block; }
  .upay span{ font-size:12px; color:var(--qa-mut); display:block; line-height:1.75; }


  .kstep{ display:none; } .kstep.on{ display:block; }
  .kwho{ background:var(--qa-soft, #f5f8fe); border-radius:12px; padding:12px 14px; margin:0 0 16px; }
  .kwho b{ font-size:15px; display:block; }
  .kwho span{ font-size:12.5px; color:var(--qa-mut); }
  .kch{ display:flex; align-items:center; gap:12px; border:1.5px solid var(--qa-line); border-radius:12px;
        padding:13px 15px; margin-bottom:10px; cursor:pointer; background:#fff; width:100%;
        font-family:inherit; text-align:start; }
  .kch:hover{ border-color:var(--qa-blue); background:#f8fbff; }
  .kch i{ font-size:17px; color:var(--qa-blue); width:22px; text-align:center; }
  .kch b{ font-size:14px; display:block; }
  .kch span{ font-size:12.5px; color:var(--qa-mut); direction:ltr; unicode-bidi:embed; display:block; }
  .ovl{ position:fixed; inset:0; z-index:200; background:rgba(8,20,50,.55); display:none;
        align-items:center; justify-content:center; padding:18px; overflow-y:auto; }
  .ovl.on{ display:flex; }
  .mdl{ background:#fff; border-radius:20px; width:100%; max-width:470px; padding:26px 24px;
        box-shadow:0 30px 80px rgba(7,34,71,.35); position:relative; max-height:calc(100vh - 36px); overflow-y:auto; }
  .mx{ position:absolute; inset-inline-end:16px; top:12px; background:none; border:none; font-size:27px;
       line-height:1; color:#94a3b8; cursor:pointer; padding:4px 8px; }
  .mdl h3{ font-size:19px; margin:0 0 4px; }
  .msub{ font-size:13px; color:var(--qa-mut); margin:0 0 18px; }
  .mdl label{ display:block; font-size:13px; color:#334155; margin:0 0 13px; }
  .mdl label span{ color:#dc2626; } .mdl label small{ color:var(--qa-mut); }
  .mdl input,.mdl textarea{ width:100%; margin-top:6px; padding:12px 14px; border:1.5px solid var(--qa-line);
        border-radius:11px; font-family:inherit; font-size:14px; color:var(--qa-ink); background:var(--qa-soft); outline:none; }
  .mdl input:focus,.mdl textarea:focus{ border-color:var(--qa-blue); background:#fff; }
  .mdl textarea{ resize:vertical; min-height:104px; line-height:1.8; }
  .merr{ font-size:13px; color:#dc2626; margin:0 0 12px; min-height:18px; }
  .mnote{ font-size:11.5px; color:var(--qa-mut); line-height:1.85; margin:12px 0 0; }
  .mok{ display:none; text-align:center; padding:14px 0 4px; }
  .mok.on{ display:block; }
  .mokic{ width:62px; height:62px; border-radius:50%; margin:0 auto 14px; background:#ecfdf5; color:#0f9d58;
          display:flex; align-items:center; justify-content:center; font-size:27px; }
  .mok b{ font-size:18px; display:block; margin-bottom:7px; }
  .mok p{ font-size:13.5px; color:var(--qa-mut); line-height:1.9; margin:0 0 18px; }