/* ════════════════════════════════════════════════════════════════════
   assets/css/q-shell.css — قشرةُ صفحة العرض العامّة
   ════════════════════════════════════════════════════════════════════
   🔑 **ملفٌّ واحد تقرؤه صفحتان:** `q.php` (ما يراه العميل) و
      `q-demo.php` (ما تعاينه أنت). وكانتا تتقاسمان الأنماط بالنسخ —
      ونسختان تتباعدان عند أوّل تعديل، فتُعاين شيئاً ويستلم العميل
      غيره. وهذا بالضبط ما يجعل المعاينة عديمة القيمة.

   🔑 **والوضعُ الداكن بصنفٍ على `<body>` لا بشرطٍ في PHP** — لأن ملفّ
      الأنماط لا يعرف PHP. فـ`q.php` تضع `class="q-art"` حين يكون شكلُ
      العرض فنّياً، و`q-demo.php` تضعها دائماً.
   ════════════════════════════════════════════════════════════════════ */

/* ═══════════ الأساس — الشكلان معاً ═══════════ */
/* ── قشرةٌ خفيفة: الورقة هي البطلة، وما حولها يخدمها ── */
:root { --q-bg:#F2F2F4; --q-ink:#16161A; --q-ink-2:#55555E; --q-ink-3:#8A8A93;
        --q-line:#E4E4E8; --q-brand:#FF4E00; --q-ok:#0F9D58; }
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--q-bg);color:var(--q-ink);
     font-family:var(--jf, 'Thmanyah Sans', -apple-system, 'Segoe UI', Tahoma, sans-serif);
     -webkit-font-smoothing:antialiased}
.q-bar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);
       backdrop-filter:blur(10px);border-bottom:1px solid var(--q-line)}
.q-bar__in{max-width:900px;margin-inline:auto;padding:11px 16px;
           display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.q-org{font-weight:800;font-size:14.5px}
.q-st{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
      padding:3px 11px;border-radius:99px;background:#EDEDF0;color:var(--q-ink-2)}
.q-st::before{content:'';width:6px;height:6px;border-radius:99px;background:currentColor}
.q-st--ok{background:rgba(15,157,88,.12);color:var(--q-ok)}
.q-st--warn{background:rgba(230,81,0,.12);color:#E65100}
.q-st--bad{background:rgba(198,40,40,.1);color:#C62828}
.q-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
       height:36px;padding:0 15px;border-radius:9px;border:1px solid var(--q-line);
       background:#fff;color:var(--q-ink);font:inherit;font-size:13.5px;font-weight:700;
       cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s}
.q-btn:hover{background:#FAFAFB;border-color:#D4D4DA}
.q-btn--p{background:var(--q-brand);border-color:var(--q-brand);color:#fff}
.q-btn--p:hover{background:#FF6A28;border-color:#FF6A28}
.q-btn--ok{background:var(--q-ok);border-color:var(--q-ok);color:#fff}
.q-btn--ok:hover{filter:brightness(1.06)}
.q-btn--q{background:transparent;border-color:transparent;color:var(--q-ink-2)}
.q-wrap{max-width:900px;margin-inline:auto;padding:22px 16px 60px}
.q-paper{background:#fff;border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 14px 44px rgba(0,0,0,.08);overflow:hidden}
.q-card{background:#fff;border:1px solid var(--q-line);border-radius:14px;
        padding:22px;margin-top:20px}
.q-card__h{font-size:16px;font-weight:800;margin:0 0 6px}
.q-card__s{font-size:13.5px;color:var(--q-ink-2);line-height:1.8;margin:0 0 16px}
.q-f{display:block;margin-bottom:13px}
.q-l{display:block;font-size:12.5px;font-weight:700;color:var(--q-ink-2);margin-bottom:6px}
.q-i{width:100%;min-height:42px;padding:10px 12px;border:1px solid var(--q-line);
     border-radius:9px;font:inherit;font-size:14px;background:#fff;color:var(--q-ink)}
.q-i:focus{outline:none;border-color:var(--q-brand);box-shadow:0 0 0 3px rgba(255,78,0,.13)}
textarea.q-i{min-height:76px;resize:vertical;line-height:1.7}
.q-chk{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;
       color:var(--q-ink-2);line-height:1.7;cursor:pointer;margin-bottom:16px}
.q-chk input{margin-top:4px;width:17px;height:17px;accent-color:var(--q-brand);flex:0 0 17px}
/* ن-٢ — خيارُ الفئة في نموذج القبول: كلُّ خيارٍ صندوقٌ يُنقر، والموصى بها شارةٌ لا نصٌّ يلتصق بالرقم */
.q-tierpick__o{padding:10px 12px;border:1px solid var(--q-line);border-radius:10px}
.q-tierpick__o:has(input:checked){border-color:var(--q-brand);background:rgba(255,78,0,.05)}
.q-tierpick__b{display:inline-block;margin-inline-start:6px;padding:1px 8px;border-radius:99px;
               font-size:11px;font-weight:800;line-height:1.6;background:rgba(255,78,0,.1);color:var(--q-brand)}
.q-note{padding:13px 16px;border-radius:11px;font-size:13.5px;line-height:1.75;margin-bottom:18px}
.q-note--danger{background:rgba(198,40,40,.08);color:#9B1C1C;border:1px solid rgba(198,40,40,.2)}
.q-note--info{background:#fff;border:1px solid var(--q-line);color:var(--q-ink-2)}
/* ⚠️ **و`--ok` و`--warn` كانا يُستعملان بلا تعريف** — `crew-join.php` يكتب `q-note--warn`
      فيظهر تحذيرُه نصّاً عارياً بلا لون. والصنفُ المجهولُ يُتجاهل بصمت (درسُ `mt-3` · ٠٦٢). */
.q-note--ok{background:rgba(15,157,88,.08);color:#0B6B3D;border:1px solid rgba(15,157,88,.22)}
.q-note--warn{background:rgba(230,81,0,.08);color:#8A3A00;border:1px solid rgba(230,81,0,.22)}
.q-done{text-align:center;padding:34px 22px}
.q-done__m{width:58px;height:58px;border-radius:99px;background:var(--q-ok);color:#fff;
           display:grid;place-items:center;font-size:27px;margin:0 auto 14px}
.q-done__t{font-size:19px;font-weight:800;margin-bottom:6px}
.q-done__s{font-size:14px;color:var(--q-ink-2);line-height:1.8}
.q-gone{max-width:460px;margin:90px auto;text-align:center;padding:0 20px}
.q-gone__i{font-size:42px;opacity:.28;margin-bottom:10px}
.q-gone__t{font-size:19px;font-weight:800;margin-bottom:8px}
.q-gone__s{font-size:14px;color:var(--q-ink-2);line-height:1.8}
.q-foot{max-width:900px;margin:26px auto 0;padding:0 16px;text-align:center;
        font-size:12px;color:var(--q-ink-3)}
/* ═══════════ الطيّة — ولها صنفُها لأن الطباعة تُخفي `.q-card` ═══════════
   🔴 **عطلٌ حقيقيّ كان على الموقع:** الورقةُ الرسمية تعيش داخل
      `<details>` كان صنفُها `q-card q-no-print` — وكلاهما مُخفى عند
      الطباعة. فكلُّ عرضِ سعرٍ يُطبع **صفحةً بيضاء**، والمعالجُ الذي
      يفتح الطيّة قبل الطباعة لا ينفع: `open` لا تتغلّب على
      `display:none`. وهو عطلٌ لا يشتكي منه شيء — من يطبع يرى بياضاً
      ويظنّ الخللَ في طابعته.
   🔑 والصنفُ المستقلّ يحلّها من جذرها: الطيّةُ تُطبَع، وعنوانُها لا. */
.q-fold{background:#fff;border:1px solid var(--q-line);border-radius:14px;
        margin-top:20px;overflow:hidden}
@media print{.q-bar,.q-card,.q-foot,.q-no-print{display:none!important}
  body{background:#fff}.q-wrap{max-width:none;padding:0}
  .q-fold{border:0;background:transparent;margin:0;border-radius:0}
  .q-fold>summary{display:none!important}
  .q-paper{box-shadow:none;border-radius:0}}
@media (max-width:560px){.q-wrap{padding:12px 10px 40px}.q-paper{border-radius:10px}}

/* ═══════════ الوضع الفنّيّ الداكن ═══════════ */
/* 🔑 **رموزُ القشرة تُقلَب، ولا يُلمَس سطرٌ من ترميزها.** بطاقةُ الردّ
      وشريطُ الحالة والطيّةُ كلُّها مبنيّةٌ على `--q-*`، فإعادةُ تعريفها
      هنا تكفي — وبديلُها نسخةٌ ثانية من كل بطاقة تتباعد عن أختها عند
      أوّل تعديل. (وهي القاعدة نفسها: موضعُ تعريفٍ واحد.) */
body.q-art{--q-bg:#08080A;--q-ink:#F4F2EF;--q-ink-2:#A8A5A0;--q-ink-3:#6E6B67;
      --q-line:rgba(255,255,255,.12);--q-brand:#FF4E00}
/* ⚠️ وكان الشكلُ الفنّيُّ `Readex Pro` — والفرقُ الآن في الوزن
     والمقاس والتشكيل لا في عائلةٍ ثانية: صوتٌ واحدٌ للمنصّة. */
body.q-art{font-family:var(--jf, 'Thmanyah Sans', -apple-system, 'Segoe UI', Tahoma, sans-serif)}
body.q-art .q-bar{background:rgba(8,8,10,.88);border-bottom-color:var(--q-line)}
body.q-art .q-btn{background:#141418;border-color:var(--q-line);color:var(--q-ink)}
body.q-art .q-btn:hover{background:#1C1C21;border-color:rgba(255,255,255,.22)}
body.q-art .q-btn--p{background:var(--q-brand);border-color:var(--q-brand);color:#fff}
body.q-art .q-btn--q{background:transparent;border-color:transparent;color:var(--q-ink-2)}
body.q-art .q-st{background:rgba(255,255,255,.08);color:var(--q-ink-2)}
body.q-art .q-card,
body.q-art .q-fold{background:#141418;border-color:var(--q-line)}
body.q-art .q-i{background:#0E0E11;border-color:var(--q-line);color:var(--q-ink)}
body.q-art .q-note--info{background:#141418;border-color:var(--q-line)}
body.q-art .q-paper{box-shadow:0 1px 2px rgba(0,0,0,.5),0 18px 50px rgba(0,0,0,.55)}
/* ⚠️ **أنماطُ الطيّة تعيش في `q-site.php`** — وهو غير محمَّل في الوضع
      الفنّي. فبلا هذه الأسطر يظهر `<summary>` خاماً بمثلّثٍ افتراضيّ
      وبلا حشو، وهو أوّلُ ما يرى العميلُ من «النسخة الرسمية». */
body.q-art .qs-paper-h{display:flex;align-items:center;gap:10px;cursor:pointer;
            font-size:14px;font-weight:600;padding:16px 20px;list-style:none}
body.q-art .qs-paper-h::-webkit-details-marker{display:none}
body.q-art .qs-paper-h::before{content:'▾';font-size:12px;color:var(--q-ink-3);transition:transform .2s}
body.q-art details[open] .qs-paper-h::before{transform:rotate(-90deg)}
body.q-art .qs-paper-h span{font-weight:400;color:var(--q-ink-3);font-size:12.5px}
body.q-art .qs-paper-h:hover{background:rgba(255,255,255,.03)}
/* ⚠️ والورقةُ تبقى بيضاء داخل طيّتها — هي وثيقةٌ لا واجهة، ولونُها
      جزءٌ من رسميّتها. */

/* ═══════════ العرضُ الفنّيّ ممتدُّ الحافّة (عف-٤) ═══════════
   🔴 **كان محبوساً في عمودٍ عرضُه ١١٨٠** داخل `.q-wrap` — فالفصولُ
      المتناوبة تظهر شرائطَ بحوافَّ ظاهرة، والوهجُ يُقصّ عند العمود، وعلى
      الجوّال إطارٌ بعرض ١٠ بكسل حول كلّ شيء. **والمعاينةُ (`q-demo.php`)
      تعرضه ممتدّاً** — أي أنّ سعوداً كان يعاين غيرَ ما يستلمه العميل.
   🔑 الآن `.qa` يمتدّ، والمحتوى يتقيّد بـ`.qa__in` كما في المعاينة،
      وما بعده (الورقةُ والردّ والتنبيهات) يعود إلى عمودٍ مقروء. */
body.q-art .q-wrap{max-width:none;padding:0 0 60px}
body.q-art .q-wrap>.q-fold,
body.q-art .q-wrap>.q-card,
body.q-art .q-wrap>.q-note{margin-inline:max(16px,calc((100% - 1180px) / 2))}
body.q-art .q-wrap>.q-note:first-child{margin-top:16px}
body.q-art .q-wrap>.q-paper{max-width:900px;margin:22px max(10px,calc((100% - 900px) / 2)) 0}
/* الشريطُ العلويّ على حافّة المحتوى نفسها — لا عمودٌ بعرضٍ غير عرض الصفحة */
body.q-art .q-bar__in{max-width:var(--qa-max,1180px);padding-inline:var(--qa-pad,16px)}

/* ═══════════ أزرارُ الشريط: الثانويّةُ تنطوي على الجوّال ═══════════ */
.q-acts{margin-inline-start:auto;display:flex;gap:8px;align-items:center}
.q-acts__sec{display:contents}
.q-more{display:none;position:relative}
.q-more>summary{list-style:none;width:38px;padding:0;font-size:19px;letter-spacing:.06em;cursor:pointer}
.q-more>summary::-webkit-details-marker{display:none}
.q-more[open]>summary{border-color:var(--q-brand);color:var(--q-brand)}
.q-more__m{position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:30;min-width:210px;
           display:grid;gap:4px;padding:6px;border-radius:13px;background:#fff;
           border:1px solid var(--q-line);box-shadow:0 16px 44px rgba(0,0,0,.16)}
.q-more__m .q-btn{justify-content:flex-start;width:100%;height:42px;border-color:transparent}
body.q-art .q-more__m{background:#141418;border-color:var(--q-line);box-shadow:0 18px 50px rgba(0,0,0,.6)}
body.q-art .q-more__m .q-btn{background:transparent;border-color:transparent}
body.q-art .q-more__m .q-btn:hover{background:#1C1C21}

/* ═══════════ الشريطُ السفليّ — الفعلُ الأهمّ في متناول الإبهام ═══════════ */
.q-dock{display:none}
@media (max-width:640px){
  .q-bar__in{flex-wrap:nowrap;gap:8px;padding-block:9px}
  .q-org{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .q-st{flex:0 0 auto;white-space:nowrap}
  .q-acts{flex:0 0 auto}
  .q-acts__sec{display:none}
  .q-more{display:block}
  .q-acts .q-btn{white-space:nowrap;padding:0 12px}
  /* مع الشريط السفليّ لا يُكرَّر الفعلُ نفسُه في الأعلى */
  body.has-dock .q-acts>.q-btn--p{display:none}
  body.has-dock{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .q-dock{display:flex;gap:8px;position:fixed;inset-inline:0;bottom:0;z-index:40;
          padding:10px 12px calc(10px + env(safe-area-inset-bottom));
          background:rgba(8,8,10,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
          border-top:1px solid var(--q-line);
          transform:translateY(110%);transition:transform .38s cubic-bezier(.16,1,.3,1)}
  .q-dock.is-on{transform:none}
  .q-dock .q-btn{height:48px;font-size:15px}
  .q-dock .q-btn--p{flex:1}
}
@media (prefers-reduced-motion:reduce){.q-dock{transition:none}}

/* ═══════════ طباعةُ الورقة في الوضع الفنّيّ ═══════════
   🔴 **كان الظلُّ يُطبع.** `body.q-art .q-paper` (٠٬٢٬١) أخصُّ من
      قاعدة الطباعة `.q-paper` (٠٬١٬٠)، فخرجت الصفحةُ الثانيةُ من الـPDF
      الرسميّ وتحتها ظلٌّ رماديٌّ عريضٌ وحدودٌ جانبيّة — قيس في ملفّ
      سبتمبر ٢٠٢٦. والمحدِّدُ الأخصّ يُنقض بمثله. */
@media print{
  body.q-art .q-paper{box-shadow:none!important;border-radius:0!important;max-width:none;margin:0}
  body.q-art .q-wrap{padding:0!important}
  .q-more,.q-dock{display:none!important}
}