/* ════════════════════════════════════════════════════════════════════
 * pub.css — الصفحتان العامّتان: التعاون (/coop) والتأجير (/rent) · ٠٧٥
 * ════════════════════════════════════════════════════════════════════
 * يُحمَّل بعد `site.css` في هاتين الصفحتين وحدَهما (`$PAGE_CSS`) — فلا يزيد الرئيسيّةَ بايتاً.
 * 🔑 **والألوانُ من `tokens.css`** بلا قيمةٍ مكتوبةٍ إلّا الشفافيّات على الأبيض (نمطُ `cs-*`).
 * ⚠️ **وعرضُ الجوّال ٣٩٠ بلا تمريرٍ أفقيّ** — كلُّ شبكةٍ `minmax(…, 1fr)` وكلُّ نصٍّ يلتفّ.
 * ════════════════════════════════════════════════════════════════════ */

.pub { padding-top: 0; }
.pub-wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
/* 🔑 **حافّةٌ واحدةٌ لبداية الأقسام** — الأقسامُ ذاتُ الصور عريضة (`--wide`) والنصّيّةُ كانت ٩٠٠ في الوسط، فعنوانٌ
      يبدأ عند ١١٩٦ وتاليه عند ١٠٧٠ على ١٢٨٠ (مراجعةُ ب · مقيس). فالحاويةُ واحدةُ العرض، ومحتوى النصّيّة بسطرٍ مقروء
      (٨٦٠) — والعنصرُ المحدودُ العرض يقع عند بداية السطر في RTL بلا هوامش، فيبدأ من حافّة العريض */
.pub-wrap:not(.pub-wrap--wide) > * { max-width: 860px; }

/* المعاينةُ لصاحب المنصّة — شريطٌ يقول إنّ الصفحةَ مغلقة */
.pub-preview {
    position: relative; z-index: 5;
    margin: 96px auto 0; max-width: 900px;
    padding: 14px 20px; border-radius: var(--vmp-radius-sm);
    background: rgba(255, 78, 0, 0.12); border: 1px solid var(--vmp-orange);
    font-size: 0.92rem; line-height: 1.9;
}
.pub-preview a { color: var(--vmp-orange-light); }

.pub-hero { padding: 130px 0 56px; }
.pub-preview + .pub-hero { padding-top: 40px; }
.pub-kicker { color: var(--vmp-orange); font-size: 0.95rem; font-weight: 700; margin-bottom: 12px; }
.pub-title { font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.3; margin: 0 0 20px; }
.pub-lead { font-size: 1.15rem; line-height: 2; color: rgba(255, 255, 255, 0.82); max-width: 680px; margin-bottom: 30px; }
.pub-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 26px; }

.pub-btn {
    display: inline-block; padding: 15px 30px; border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.25); color: var(--vmp-white);
    text-decoration: none; font-weight: 600; transition: border-color var(--vmp-transition), color var(--vmp-transition);
}
.pub-btn:hover { border-color: var(--vmp-orange); color: var(--vmp-orange-light); }
.pub-btn--wa { background: var(--wa-green); border-color: var(--wa-green); color: var(--vmp-black); }
.pub-btn--wa:hover { background: var(--wa-green-dark); color: var(--vmp-white); }
.pub-link { color: var(--vmp-orange-light); text-decoration: none; white-space: nowrap; }
.pub-link:hover { text-decoration: underline; }

.pub-sec { padding: 64px 0; }
/* 🔑 **التناوبُ بالموضع لا بصنفٍ يُكتب بيد** — صنفٌ في كلِّ قسمٍ أبقى قسمين متجاورين بأرضيّةٍ واحدة حين جاء «لماذا تحفة؟»
      المشتركُ معتماً بعد معتم، وحين يغيب قسمٌ شرطيّ («ما نتيحه» بلا خدمات) (مراجعةُ ب). فالواجهةُ القسمُ الأوّل
      والزوجيُّ معتمٌ دائماً — ولا يحتاج قسمٌ يُضاف أن يعرف جارَه */
.pub > .pub-sec:nth-of-type(even) { background: var(--vmp-dark); }
.pub-h { font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 0 0 18px; }
.pub-p { font-size: 1.08rem; line-height: 2; color: rgba(255, 255, 255, 0.86); margin-bottom: 14px; }
.pub-mute { color: rgba(255, 255, 255, 0.6); }
.pub-small { font-size: 0.86rem; }

/* الخطوات — أرقامٌ في دوائر، والنصُّ يلتفّ */
.pub-steps { list-style: none; counter-reset: pubstep; display: grid; gap: 16px;
             grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); padding: 0; margin: 0; }
.pub-steps li { counter-increment: pubstep; position: relative; padding: 22px 20px 20px;
                border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--vmp-radius); }
.pub-steps li::before {
    content: counter(pubstep); display: inline-grid; place-items: center;
    width: 34px; height: 34px; border-radius: 50%; margin-bottom: 12px;
    background: var(--vmp-gradient); color: var(--vmp-white); font-weight: 700;
}
.pub-steps strong { display: block; font-size: 1.05rem; margin-bottom: 6px; }
.pub-steps span { color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; line-height: 1.8; }

/* ما نتيحه — عنوانٌ ووحدة، بلا قيم */
.pub-offers { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px;
              grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pub-offers li { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px;
                 border-radius: var(--vmp-radius-sm); background: rgba(255, 255, 255, 0.04);
                 border-inline-start: 3px solid var(--vmp-orange); }
.pub-offers span { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; }
.pub-offers strong, .pub-offers span, .pub-terms dd, .pub-faq p { overflow-wrap: anywhere; }   /* نصٌّ حرٌّ من الإعدادات — رابطٌ طويلٌ لا يُقصّ */

/* الشروطُ والسياسة — بندٌ بعنوانه */
.pub-terms { display: grid; gap: 0; margin: 0 0 16px; }
.pub-terms > div { display: grid; grid-template-columns: minmax(130px, 200px) 1fr; gap: 6px 22px;
                   padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.pub-terms dt { font-weight: 700; color: var(--vmp-orange-light); }
.pub-terms dd { margin: 0; color: rgba(255, 255, 255, 0.86); line-height: 1.9; }

/* الأسئلة */
.pub-faq details { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.pub-faq summary { cursor: pointer; padding: 18px 0; font-weight: 600; font-size: 1.05rem; list-style: none; }
.pub-faq summary::-webkit-details-marker { display: none; }
.pub-faq summary::before { content: '+'; display: inline-block; width: 1.4em; color: var(--vmp-orange); font-weight: 700; }
.pub-faq details[open] summary::before { content: '−'; }
.pub-faq p { margin: 0 0 18px; padding-inline-start: 1.4em; color: rgba(255, 255, 255, 0.78); line-height: 1.9; }

.pub-about .pub-link { display: inline-block; margin-top: 4px; }
.pub-cta { padding-bottom: 90px; }

/* ═══ التأجير ═══ */
.pub-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 26px; }
.pub-chips[hidden] { display: none; }
.pub-chips button { font: inherit; font-size: 0.9rem; cursor: pointer; min-height: 40px; padding: 8px 14px;
                    border-radius: 50px; border: 1px solid rgba(255, 255, 255, 0.15); background: transparent; color: var(--vmp-white); }
.pub-chips button:hover { border-color: var(--vmp-orange); }
.pub-chips button[aria-pressed="true"] { border-color: var(--vmp-orange); background: rgba(255, 78, 0, 0.14); }
.pub-chips span { color: rgba(255, 255, 255, 0.5); margin-inline-start: 4px; font-variant-numeric: tabular-nums; }

.pub-gear { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.pub-gi { display: flex; flex-direction: column; border-radius: var(--vmp-radius); overflow: hidden;
          background: var(--vmp-dark-3); border: 1px solid rgba(255, 255, 255, 0.07); }
.pub-gi__img { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--vmp-dark-2);
               color: rgba(255, 255, 255, 0.25); }
.pub-gi__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-gi__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 18px; flex: 1; }
.pub-gi[hidden] { display: none; }
.pub-gi__cat { color: var(--vmp-orange-light); font-size: 0.8rem; font-weight: 600; }
.pub-gi__name { font-size: 1.05rem; line-height: 1.5; overflow-wrap: anywhere; }
.pub-gi__sub { color: rgba(255, 255, 255, 0.55); font-size: 0.88rem; overflow-wrap: anywhere; }
.pub-gi__note, .pub-gi__kit { margin: 0; color: rgba(255, 255, 255, 0.72); font-size: 0.9rem; line-height: 1.8; overflow-wrap: anywhere; }
.pub-gi__kit { color: rgba(255, 255, 255, 0.6); }
.pub-gi__rate { margin-top: auto; padding-top: 6px; color: var(--vmp-orange-light); font-weight: 700; font-size: 0.95rem; }
.pub-gi__pick { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; margin-top: 6px;
                border-radius: var(--vmp-radius-sm); border: 1px solid rgba(255, 255, 255, 0.15); cursor: pointer;
                font-size: 0.95rem; }
.pub-gi__pick input { width: 20px; height: 20px; accent-color: var(--vmp-orange); }
.pub-gi__pick:has(input:checked) { border-color: var(--vmp-orange); background: rgba(255, 78, 0, 0.1); }

/* النموذج */
.pub-form { display: grid; gap: 16px; }
.pub-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pub-f { display: flex; flex-direction: column; gap: 8px; font-size: 0.95rem; color: rgba(255, 255, 255, 0.85); }
.pub-f input, .pub-f textarea {
    font: inherit; font-size: 16px;   /* ⚠️ سفاري الجوّال يُكبّر الصفحةَ دون ١٦ */
    color: var(--vmp-white); background: var(--vmp-dark-2);
    border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--vmp-radius-sm);
    padding: 12px 14px; min-height: 48px; width: 100%; box-sizing: border-box;
}
.pub-f input[type="date"] { color-scheme: dark; }
.pub-f input:focus, .pub-f textarea:focus { outline: 2px solid var(--vmp-orange); outline-offset: 1px; border-color: transparent; }
.pub-f [aria-invalid="true"] { border-color: var(--vmp-orange); }
.pub-form .cta-button { border: 0; cursor: pointer; font-family: inherit; justify-self: start; }
.pub-picked { margin: 0; color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; }
.pub-err { padding: 12px 16px; border-radius: var(--vmp-radius-sm); background: rgba(255, 78, 0, 0.12);
           border: 1px solid var(--vmp-orange); margin-bottom: 16px; }
.pub-done { padding: 24px; border-radius: var(--vmp-radius); background: rgba(37, 211, 102, 0.08);
            border: 1px solid var(--wa-green); }
.pub-done--warn { background: rgba(255, 78, 0, 0.1); border-color: var(--vmp-orange); }
.pub-done strong { font-size: 1.2rem; display: block; margin-bottom: 8px; }
.pub-done + .pub-small { margin-top: 14px; }
.pub-done p { color: rgba(255, 255, 255, 0.8); margin-bottom: 16px; }
/* 🔴 **المصيدةُ خارجَ الشاشة لا `display:none`** — بعضُ الآليّات تتخطّى المخفيَّ صراحةً */
.pub-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 🔴 **نقاطُ الأقسام ثابتةٌ يميناً** (`.side-nav` · right:30px) — و`site.css` يبعد عنها المحتوى بحشوة `section`
      (٥٠) التي ألغتها هذه الورقة، فغطّت النقطةُ أوّلَ حرفٍ من العناوين بين ٧٦٩ و~١٢٠٠ (المراجعة · مقيس). */
@media (min-width: 769px) {
    .pub-hero, .pub-sec { padding-right: 64px; padding-left: 64px; }   /* متناظرةٌ — غيرُها يُزيح المحتوى عن الوسط ٢٠ بكسلاً على كلِّ شاشة (مراجعةُ الإصلاحات) */
}
/* 🔴 **القفزُ إلى قسمٍ يضع عنوانَه تحت الشريط الثابت** (٧٠ بكسلاً معتماً) — `#request` بعد الإرسال و`#catalog` و`#how`:
      حشوةُ الجوال (٤٦) أقلُّ من الشريط فيُغطّى نصفُ العنوان (مراجعةُ الإصلاحات · مقيس) */
.pub-hero, .pub-sec { scroll-margin-top: 72px; }
/* 🔴 **و`site.css` يفرض `section{padding:60px 15px !important}` حتى ٧٦٨** — فحشوةُ الجوال هنا كانت ميّتةً
      وتضاعف الهامشُ (١٥ + ١٦). ⇒ بـ`!important` في المدى نفسِه. والشريطُ لا يلمس الحافّتين تحت ٩٤٠. */
@media (max-width: 768px) {
    .pub-hero { padding: 100px 0 36px !important; }
    .pub-preview + .pub-hero { padding-top: 40px !important; }
    .pub-sec { padding: 46px 0 !important; }
    .pub-cta { padding: 46px 16px 70px !important; }
}
@media (max-width: 940px) {
    .pub-preview { margin-left: 16px; margin-right: 16px; }
}

/* الصفحةُ الحاليّة في القائمة */
.nav-link[aria-current="page"] { color: var(--vmp-orange); }

@media (max-width: 640px) {
    .pub-hero { padding: 100px 0 36px; }
    .pub-preview { margin: 84px 16px 0; }
    .pub-sec { padding: 46px 0; }
    .pub-wrap { padding: 0 16px; }
    .pub-terms > div { grid-template-columns: 1fr; }
    .pub-actions .cta-button { padding: 16px 34px; }
    /* 🔑 **البطاقةُ صفٌّ على الجوال** — صورةٌ صغيرةٌ بجانب التفاصيل لا صورةٌ بعرض الشاشة: خمسون قطعةً
          بصورةٍ ٤:٣ لكلٍّ كانت تمريراً لا ينتهي (مقيسٌ باللقطة) */
    .pub-gear { grid-template-columns: 1fr; gap: 12px; }
    .pub-gi { flex-direction: row; }
    .pub-gi__img { flex: 0 0 104px; width: 104px; aspect-ratio: auto; min-height: 104px; }
    .pub-gi__body { padding: 12px 12px 14px; min-width: 0; }
    .pub-gi__pick { padding: 6px 10px; }
}

/* ════════════════════════════════════════════════════════════════════
 * ب — الواجهةُ البصريّة والدليل (قرارُ سعود «اعتمد توصياتك»)
 * ════════════════════════════════════════════════════════════════════
 * 🔴 **كلُّ ما هنا يعمل بلا جافاسكربت** — الواجهةُ تتعاقب بـCSS، والشعاراتُ تتحرّك بـCSS، والشريطُ
 *    اللاصقُ وحده يحتاج السكربت فهو مخفيٌّ حتى يُظهره (`[hidden]` صريحٌ أدناه).
 * ⚠️ **و«تقليلُ الحركة» يوقف كلَّ حركة** — آخرَ الملفّ.
 * ════════════════════════════════════════════════════════════════════ */

/* `site.css` يحدّ كلَّ `section` بـ١٤٠٠ — فتنقطع خلفيّاتُ الأقسام على الشاشات العريضة. والمحتوى يحدّه `.pub-wrap` */
.pub .pub-hero, .pub .pub-sec { max-width: none; }

/* ═══ الواجهة ═══ */
.pub-hero { position: relative; overflow: hidden; isolation: isolate;
            min-height: min(88vh, 760px); display: flex; flex-direction: column; justify-content: flex-end; }
.pub-hero__in { position: relative; width: 100%; }
.pub-hero__media { position: absolute; inset: 0; z-index: -1; background: var(--vmp-dark); }
.pub-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
                       animation: pubHeroZoom 22s ease-in-out infinite alternate; }
.pub-hero__media img + img { opacity: 0; }
.pub-hero__media--n2 img + img { animation-name: pubHeroX2, pubHeroZoom; animation-duration: 12s, 22s;
                                 animation-timing-function: ease-in-out; animation-iteration-count: infinite;
                                 animation-direction: normal, alternate; }
.pub-hero__media--n3 img + img { animation-name: pubHeroX3, pubHeroZoom; animation-duration: 18s, 22s;
                                 animation-timing-function: ease-in-out; animation-iteration-count: infinite;
                                 animation-direction: normal, alternate; }
/* 🔑 **التعتيمُ أشدُّ حيث النصّ** — العنوانُ يميناً وفي الأسفل، فطبقتان: من الأسفل ومن اليمين */
.pub-hero__media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, var(--vmp-pure-black) 0%, rgba(0, 0, 0, 0.62) 42%, rgba(0, 0, 0, 0.28) 100%),
                linear-gradient(to left, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.2) 62%, rgba(0, 0, 0, 0) 100%);
}
@keyframes pubHeroX2 { 0% { opacity: 0; } 8% { opacity: 1; } 50% { opacity: 1; } 58% { opacity: 0; } 100% { opacity: 0; } }
@keyframes pubHeroX3 { 0% { opacity: 0; } 5.5% { opacity: 1; } 33.3% { opacity: 1; } 39% { opacity: 0; } 100% { opacity: 0; } }
@keyframes pubHeroZoom { from { transform: scale(1.02); } to { transform: scale(1.1); } }
/* بلا صورٍ — توهّجٌ من لون الهويّة لا سوادٌ مسطّح */
.pub-hero--plain { background: radial-gradient(ellipse at 88% 0%, rgba(255, 78, 0, 0.22), transparent 58%),
                               radial-gradient(ellipse at 8% 100%, rgba(255, 119, 0, 0.1), transparent 55%); }
/* ⚠️ **أرضيّةُ الوسم معتمةٌ لا صبغةٌ شفّافة** — صبغةُ ١٦٪ فوق إطارٍ أبيض (صورُ المعدّات بديلُ الأعمال) كانت ٢٫٥:١ (مراجعةُ ب · مقيسٌ بالبكسل) */
.pub-hero .pub-kicker { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 50px;
                        background: rgba(24, 9, 2, 0.82); border: 1px solid rgba(255, 78, 0, 0.5); color: var(--vmp-orange-light); }
.pub-hero .pub-title { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5); }
.pub-hero .pub-lead { color: rgba(255, 255, 255, 0.88); }

/* مزايا قصيرةٌ بعلامة ✓ — بلا أرقام */
.pub-ticks { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 0;
             color: rgba(255, 255, 255, 0.86); font-size: 0.93rem; }
.pub-ticks li { display: inline-flex; align-items: center; gap: 8px; }
.pub-ticks li::before {
    content: ''; flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat,
                var(--vmp-gradient);
}

/* ═══ التعاون — الفكرةُ مرسومة ═══ */
/* ⚠️ **الوسطُ بحدٍّ أدنى** — كان الطرفان يتمدّدان إلى ٢٢٠ قبل أن يأخذ الوسطُ شيئاً: ١٢٥ بكسلاً للسهمين ونصّيهما على ٧٦٩ (مراجعةُ ب) */
.pub-xch { display: grid; grid-template-columns: minmax(130px, 220px) minmax(240px, 1fr) minmax(130px, 220px);
           align-items: center; gap: 18px; margin: 30px 0 34px; }
.pub-xch__node { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
                 padding: 22px 16px; border-radius: var(--vmp-radius);
                 background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); }
.pub-xch__node--us { border-color: rgba(255, 78, 0, 0.55); background: rgba(255, 78, 0, 0.07); }
.pub-xch__ico { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
                background: rgba(255, 255, 255, 0.07); color: var(--vmp-orange-light); }
.pub-xch__ico img { width: 100%; height: 100%; display: block; object-fit: cover; }
.pub-xch__node strong { font-size: 1.1rem; overflow-wrap: anywhere; }
.pub-xch__node small { color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; line-height: 1.7; }
.pub-xch__flows { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 28px; }
.pub-xch__flow { display: grid; gap: 6px; text-align: center; }
.pub-xch__lbl { font-weight: 700; font-size: 1.02rem; }
.pub-xch__eg { color: rgba(255, 255, 255, 0.66); font-size: 0.9rem; line-height: 1.8; overflow-wrap: anywhere; }
/* 🔑 **السهمُ بالخصائص المنطقيّة** — «خدمتُك لنا» من اليمين (أنت) إلى اليسار (نحن): رأسُه عند نهاية السطر
      (`inline-end` = اليسار في العربيّة)، و«خدمتُنا لك» عكسُه. والجوالُ يقلبهما عموديّين أدناه */
.pub-xch__arrow { position: relative; display: block; height: 2px; margin: 6px 16px; border-radius: 2px;
                  background: linear-gradient(to left, rgba(255, 119, 0, 0.25), var(--vmp-orange)); }   /* الرأسُ يساراً (`inline-end`) فالتدرّجُ ينتهي ساطعاً يساراً */
.pub-xch__arrow::after { content: ''; position: absolute; top: 50%; width: 11px; height: 11px; box-sizing: border-box; }
.pub-xch__flow--give .pub-xch__arrow::after { inset-inline-end: -3px; border-top: 2px solid var(--vmp-orange); border-left: 2px solid var(--vmp-orange);
                                              transform: translateY(-50%) rotate(-45deg); }
.pub-xch__flow--take .pub-xch__arrow { background: linear-gradient(to right, rgba(255, 119, 0, 0.25), var(--vmp-orange-light)); }   /* رأسُه يميناً */
.pub-xch__flow--take .pub-xch__arrow::after { inset-inline-start: -3px; border-top: 2px solid var(--vmp-orange-light); border-right: 2px solid var(--vmp-orange-light);
                                              transform: translateY(-50%) rotate(45deg); }

/* الرصيدُ بين سقفين — بلا رقم */
.pub-bal { max-width: 640px; margin: 0 auto 18px; }
.pub-bal__labels { display: flex; justify-content: space-between; gap: 10px; font-size: 0.86rem; color: rgba(255, 255, 255, 0.75); }
.pub-bal__labels--caps { color: rgba(255, 255, 255, 0.5); font-size: 0.8rem; }
.pub-bal__bar { position: relative; display: block; height: 10px; margin: 8px 0; border-radius: 10px;
                background: linear-gradient(to left, rgba(255, 78, 0, 0.55), rgba(255, 255, 255, 0.08) 50%, rgba(255, 119, 0, 0.55));
                border: 1px solid rgba(255, 255, 255, 0.12); }
.pub-bal__bar::before, .pub-bal__bar::after { content: ''; position: absolute; top: -6px; bottom: -6px; width: 2px; background: rgba(255, 255, 255, 0.55); border-radius: 2px; }
.pub-bal__bar::before { right: 0; }
.pub-bal__bar::after  { left: 0; }
.pub-bal__mid { position: absolute; top: -3px; bottom: -3px; left: 50%; width: 1px; background: rgba(255, 255, 255, 0.4); }
.pub-bal__dot { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
                background: var(--vmp-white); box-shadow: 0 0 0 4px rgba(255, 78, 0, 0.45);
                animation: pubBal 7s ease-in-out infinite alternate; }
@keyframes pubBal { 0% { transform: translateX(-120px); } 100% { transform: translateX(120px); } }

/* لمن البرنامج — بطاقاتٌ بأيقونة */
.pub-cards { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 14px;
             grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pub-cards li { display: flex; flex-direction: column; gap: 8px; padding: 22px 20px; border-radius: var(--vmp-radius);
                background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08); }
.pub-cards__ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
                  background: rgba(255, 78, 0, 0.12); color: var(--vmp-orange-light); margin-bottom: 4px; }
.pub-cards strong { font-size: 1.05rem; }
.pub-cards li > span:last-child { color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; line-height: 1.8; }

/* سطرُ المدّة تحت الخطوة — من الإعدادات وحدها */
.pub-steps em { display: table; margin-top: 10px; font-style: normal; font-size: 0.82rem; font-weight: 600;
                color: var(--vmp-orange-light); background: rgba(255, 78, 0, 0.1); border-radius: 50px; padding: 3px 10px; }

/* ═══ «لماذا تحفة؟» — المشترك ═══ */
.pub-proof__head { max-width: 760px; }
.pub-proof__sub { font-size: 1.1rem; margin: 34px 0 14px; color: rgba(255, 255, 255, 0.92); }
.pub-stats { list-style: none; padding: 0; margin: 24px 0 6px; display: grid; gap: 14px;
             grid-template-columns: repeat(auto-fit, minmax(150px, 260px)); }   /* رقمان لا يتمدّدان على عرض الشاشة كلِّها */
.pub-stats li { display: flex; flex-direction: column; gap: 2px; padding: 18px 22px; border-radius: var(--vmp-radius);
                background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); }
.pub-stats b { font-size: clamp(2rem, 5vw, 2.7rem); line-height: 1.15; font-variant-numeric: tabular-nums;
               background: var(--vmp-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pub-stats span { color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; }

.pub-works { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px;
             grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pub-work__a { display: block; height: 100%; color: inherit; text-decoration: none; border-radius: var(--vmp-radius); overflow: hidden;
               background: var(--vmp-dark-3); border: 1px solid rgba(255, 255, 255, 0.07);
               transition: transform var(--vmp-transition), border-color var(--vmp-transition); }
.pub-work__a:hover, .pub-work__a:focus-visible { transform: translateY(-3px); border-color: rgba(255, 78, 0, 0.6); }
.pub-work__a:focus-visible { outline: 2px solid var(--vmp-orange); outline-offset: 2px; }
.pub-work__img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--vmp-dark-2); }
.pub-work__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.pub-work__a:hover .pub-work__img img { transform: scale(1.04); }
.pub-work__play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%;
                  background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.45); backdrop-filter: blur(4px); }
.pub-work__play::after { content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
                         border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--vmp-white); }
.pub-work__meta { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 14px; }
.pub-work__meta strong { font-size: 0.98rem; line-height: 1.55; overflow-wrap: anywhere; }
.pub-work__meta small { color: var(--vmp-orange-light); font-size: 0.8rem; overflow-wrap: anywhere; }

/* 🔑 **الشعاراتُ على بلاطاتٍ فاتحة** — أكثرُ الشعارات داكنٌ على شفّاف، وعلى أرضيّتنا السوداء يختفي.
   🔴 **والشريطُ بترتيب الصفحة (RTL)** — كان `ltr` فيبدأ أوّلُ شعارٍ عند الحافّة اليسرى نصفُه تحت التلاشي، ويُقرأ
      التسلسلُ مقلوباً من اليمين (مراجعةُ ب). فالمسارُ يبدأ يميناً والإزاحةُ موجبة: نصفُ العرض نسخةٌ كاملةٌ بالضبط */
.pub-logos { overflow: hidden; direction: rtl; padding: 4px 0;
             -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
                     mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); }
.pub-logos__track { list-style: none; margin: 0; padding: 0; display: flex; width: max-content;
                    animation: pubMarquee calc(var(--n, 12) * 3.2s) linear infinite; }
/* ⚠️ **ولا `:focus-within`** — لا عنصرَ يقبل التركيزَ في الشريط فالقاعدةُ ميّتة؛ والإيقافُ بزرِّ «أوقف الحركة» (`.pub-still`) */
.pub-logos:hover .pub-logos__track { animation-play-state: paused; }
.pub-logo { flex: 0 0 auto; padding-inline-end: 14px; }   /* حشوةٌ لا `gap` — فنصفُ العرض نسخةٌ كاملةٌ بالضبط */
/* ⚠️ **البلاطةُ عنصرٌ والشعارُ عنصر** — شفافيّةُ الصورة على بلاطتها تُعتّم البلاطةَ نفسَها فوق الأسود (مقيسٌ باللقطة) */
.pub-logo__t { display: grid; place-items: center; width: 148px; height: 68px; box-sizing: border-box; padding: 12px 18px;
               background: #f4f4f4; border-radius: 12px; }
.pub-logo__t img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: 0.8;
                   transition: filter var(--vmp-transition), opacity var(--vmp-transition); }
.pub-logo__t:hover img { filter: none; opacity: 1; }
@keyframes pubMarquee { to { transform: translateX(50%); } }
/* قليلٌ لا يملأ الشريط ⇒ صفٌّ ثابتٌ لا حلقةٌ تكشف فراغَها */
.pub-logos--static { direction: rtl; -webkit-mask-image: none; mask-image: none; }
.pub-logos--static .pub-logos__track { animation: none; width: auto; flex-wrap: wrap; gap: 12px; justify-content: center; }
.pub-logos--static .pub-logo { padding-inline-end: 0; }
.pub-proof__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 30px 0 0; }

/* ═══ «أوقف الحركة» — واجهةٌ تتعاقب وشعاراتٌ تتحرّك ونقطةٌ تتأرجح بلا نهاية: الزائرُ يوقفها (WCAG 2.2.2) ═══
   مخفيٌّ في الترميز ويُظهره `pub.js` حين في الصفحة حركةٌ ولا يطلب النظامُ تقليلَها. والحالُ تُذكر بين الصفحتين. */
.pub-still-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 14px; border-radius: 50px;
                 font: inherit; font-size: 0.85rem; cursor: pointer; color: rgba(255, 255, 255, 0.85);
                 background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.28); backdrop-filter: blur(6px); }
.pub-still-btn[hidden] { display: none; }
.pub-still-btn:hover, .pub-still-btn:focus-visible { border-color: var(--vmp-orange); color: var(--vmp-white); }
.pub-still-btn:focus-visible { outline: 2px solid var(--vmp-orange); outline-offset: 2px; }
.pub-still-btn svg { flex: 0 0 auto; }
.pub-still-btn .pub-still-btn__play, .pub-still .pub-still-btn .pub-still-btn__pause { display: none; }
.pub-still .pub-still-btn .pub-still-btn__play { display: inline; }
.pub-still .pub-hero__media img, .pub-still .pub-logos__track, .pub-still .pub-bal__dot { animation-play-state: paused !important; }

/* ═══ الرابطُ إلى الصفحة الأخرى ═══ */
.pub .pub-cross-sec { padding-top: 34px; padding-bottom: 34px; }
.pub-cross { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: var(--vmp-radius);
             color: inherit; text-decoration: none; transition: transform var(--vmp-transition), border-color var(--vmp-transition);
             background: linear-gradient(135deg, rgba(255, 78, 0, 0.16), rgba(255, 119, 0, 0.03)); border: 1px solid rgba(255, 78, 0, 0.45); }
.pub-cross:hover, .pub-cross:focus-visible { transform: translateY(-2px); border-color: var(--vmp-orange); }
.pub-cross__ico { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
                  background: var(--vmp-gradient); color: var(--vmp-white); }
.pub-cross__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pub-cross__txt strong { font-size: 1.08rem; }
.pub-cross__txt small { color: rgba(255, 255, 255, 0.72); font-size: 0.92rem; line-height: 1.8; }
.pub-cross__go { color: var(--vmp-orange-light); font-weight: 700; white-space: nowrap; }

/* ═══ التأجير — الرقاقاتُ والبطاقةُ و«في طلبك» والشريطُ اللاصق ═══ */
.pub-chips button { display: inline-flex; align-items: center; gap: 7px; }
.pub-chips button svg { opacity: 0.8; }
.pub-gi__img svg { opacity: 0.55; }
.pub-gi__in { display: none; }
.pub-gi__pick:has(input:checked) .pub-gi__add { display: none; }
.pub-gi__pick:has(input:checked) .pub-gi__in { display: inline; color: var(--vmp-orange-light); font-weight: 700; }
.pub-panel { padding: 24px; border-radius: var(--vmp-radius); background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.08); }
.pub-picks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pub-picks:empty { display: none; }
.pub-picks li { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding-block: 4px; padding-inline: 12px 6px; border-radius: 50px;
                background: rgba(255, 78, 0, 0.12); border: 1px solid rgba(255, 78, 0, 0.42); font-size: 0.9rem; overflow-wrap: anywhere; }
.pub-picks button { position: relative; flex: 0 0 auto; font: inherit; line-height: 1; cursor: pointer; width: 30px; height: 30px; border-radius: 50%;
                    border: 0; background: transparent; color: rgba(255, 255, 255, 0.8); }
/* مساحةُ النقر ٤٤ لا ٣٠ — بطبقةٍ غيرِ مرئيّة حول الزرّ، فالرقاقةُ لا تكبر */
.pub-picks button::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; }
.pub-picks button:hover, .pub-picks button:focus-visible { background: rgba(255, 255, 255, 0.12); color: var(--vmp-white); }

.pub-bar { position: fixed; z-index: 990; left: 0; right: 0; margin: 0 auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
           width: min(540px, calc(100% - 24px)); box-sizing: border-box;
           display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 8px;
           padding-inline-start: 20px; border-radius: 50px;
           background: rgba(16, 16, 16, 0.94); border: 1px solid rgba(255, 78, 0, 0.55);
           box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55); backdrop-filter: blur(12px); }
.pub-bar[hidden] { display: none; }   /* 🔴 **`hidden` لا يُخفي عنصراً يضع صنفُه `display`** — صريحاً (درسُ المراجعة بالتوقيت) */
.pub-bar__n { font-weight: 700; font-size: 0.95rem; }
.pub-bar__go { flex: 0 0 auto; padding: 11px 20px; border-radius: 50px; background: var(--vmp-gradient); color: var(--vmp-white);
               text-decoration: none; font-weight: 700; white-space: nowrap; }
.pub-bar__go:focus-visible { outline: 2px solid var(--vmp-white); outline-offset: 2px; }
body.pub-bar-on .next-section-btn { bottom: 92px; }
/* 🔴 **الشريطُ كان يغطّي آخرَ الذيل** (الحقوق والهاتف) فلا يُمرَّر إليه أبداً — ومساحتُه تُحجز تحت الصفحة ما دام ظاهراً */
body.pub-bar-on { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
/* 🔴 **والتركيزُ بلوحة المفاتيح لا يقع خلفه** — المتصفّحُ لا يُمرّر عنصراً مركَّزاً تحت شريطٍ ثابت: كان مربّعُ القطعة المختارة
      محجوباً كلُّه على ٣٩٠ (WCAG 2.4.11 · مراجعةُ ب · مقيس) */
html:has(body.pub-bar-on) { scroll-padding-bottom: 96px; }

@media (max-width: 760px) {
    .pub-hero { min-height: min(84vh, 680px); }
    /* 🔴 **على الجوال يملأ النصُّ العرضَ ويبدأ عالياً** — فالتعتيمُ من اليمين لا يصل نصفَه الأيسر، ومن الأسفل لا يصل أعلاه:
          الفقرةُ ٣٫٨:١ فوق إطارٍ أبيض على ٣٦٠ (مراجعةُ ب · مقيس). ⇒ طبقةٌ واحدةٌ لا تقلّ عن النصف في أيِّ نقطة */
    .pub-hero__media::after { background: linear-gradient(to top, var(--vmp-pure-black) 0%, rgba(0, 0, 0, 0.72) 50%, rgba(0, 0, 0, 0.5) 100%); }
    /* الفكرةُ عموديّة: أنت ⇐ (خدمتُك ↓ · خدمتُنا ↑) ⇐ نحن */
    .pub-xch { grid-template-columns: 1fr; gap: 14px; }
    .pub-xch__node { flex-direction: row; text-align: start; padding: 14px 16px; gap: 14px; }
    .pub-xch__node > strong { flex: 0 0 auto; }
    .pub-xch__ico { width: 48px; height: 48px; flex: 0 0 48px; }
    .pub-xch__flows { flex-direction: row; gap: 14px; }
    .pub-xch__flow { flex: 1 1 0; min-width: 0; }
    .pub-xch__arrow { width: 2px; height: 34px; margin: 4px auto; background: linear-gradient(to bottom, rgba(255, 119, 0, 0.25), var(--vmp-orange)); }
    .pub-xch__flow--take .pub-xch__arrow { background: linear-gradient(to top, rgba(255, 119, 0, 0.25), var(--vmp-orange-light)); }
    .pub-xch__flow--give .pub-xch__arrow::after { inset-inline: auto; left: 50%; top: auto; bottom: -3px; border-top: 0; border-left: 0;
                                                  border-right: 2px solid var(--vmp-orange); border-bottom: 2px solid var(--vmp-orange);
                                                  transform: translateX(-50%) rotate(45deg); }
    .pub-xch__flow--take .pub-xch__arrow::after { inset-inline: auto; left: 50%; top: -3px; border-right: 0; border-bottom: 0;
                                                  border-top: 2px solid var(--vmp-orange-light); border-left: 2px solid var(--vmp-orange-light);
                                                  transform: translateX(-50%) rotate(45deg); }
    @keyframes pubBal { 0% { transform: translateX(-70px); } 100% { transform: translateX(70px); } }
    .pub-cross { flex-wrap: wrap; }
    .pub-cross__go { flex-basis: 100%; }
    .pub-panel { padding: 16px; }
}
@media (max-width: 640px) {
    .pub-logo__t { width: 124px; height: 58px; padding: 10px 14px; }
    /* ثلاثةُ أرقامٍ في صفٍّ واحد — بعرض ١٥٠ يقع الثالثُ وحدَه تحت اثنين (مقيسٌ باللقطة على ٣٩٠) */
    .pub-stats { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
    .pub-stats li { padding: 14px 12px; }
    .pub-stats span { font-size: 0.84rem; line-height: 1.6; }
    /* 🔑 **الأعمالُ شريطٌ يُسحب لا عمودٌ يطول** — ستُّ بطاقاتٍ بعرض الشاشة تمريرٌ بطول ألفَي بكسل؛ والتمريرُ
          الأفقيُّ داخل الشريط لا في الصفحة (قاعدةُ العرض الفنّيّ) */
    /* ⚠️ **حشوةٌ تسع حلقةَ التركيز ورفعتَها** — بحشوة ٢ كانت الحلقةُ تُقصّ ٥ بكسلاتٍ من أعلاها (مراجعةُ ب) */
    .pub-works { display: flex; overflow-x: auto; gap: 12px; padding: 8px 6px 12px; margin: 0 -6px; scroll-padding-inline: 6px;
                 scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; }
    .pub-work { flex: 0 0 82%; scroll-snap-align: start; }
    .pub-cards li { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 4px; padding: 16px; }
    .pub-cards__ico { grid-row: span 2; width: 44px; height: 44px; margin: 0; }
}

/* 🔴 **«تقليلُ الحركة» قرارٌ صحّيٌّ غالباً لا تفضيل** — لا تعاقبَ ولا تقريبَ ولا شريطٌ يتحرّك ولا نقطةٌ تتأرجح */
@media (prefers-reduced-motion: reduce) {
    .pub-hero__media img { animation: none !important; transform: none; }
    .pub-hero__media img + img { display: none; }
    .pub-logos { direction: rtl; -webkit-mask-image: none; mask-image: none; }
    .pub-logos__track { animation: none; width: auto; flex-wrap: wrap; gap: 12px; justify-content: center; }
    .pub-logo { padding-inline-end: 0; }
    .pub-logo[aria-hidden="true"] { display: none; }
    .pub-still-btn { display: none !important; }
    .pub-bal__dot { animation: none; transform: translateX(-40px); }
    .pub-work__a, .pub-cross, .pub-work__img img { transition: none; }
    .pub-work__a:hover, .pub-cross:hover { transform: none; }
}

/* 🔴 **والحركةُ الدائمةُ لمن يملك زرَّ إيقافها** — «أوقف الحركة» يُظهره السكربت، فبلا سكربتٍ كانت الواجهةُ والشعاراتُ
      والنقطةُ تتحرّك بلا نهايةٍ ولا وسيلةَ لإيقافها (WCAG 2.2.2 · مقيسٌ في متصفّحٍ بلا سكربت). ⇒ ثابتةٌ كتقليل الحركة
      حرفاً، و`.vmp-js` يضعه سطرٌ في الرأس قبل أن يُرسم شيء (`sections/_head.php`). */
html:not(.vmp-js) .pub-hero__media img { animation: none !important; transform: none; }
html:not(.vmp-js) .pub-hero__media img + img { display: none; }
html:not(.vmp-js) .pub-logos { direction: rtl; -webkit-mask-image: none; mask-image: none; }
html:not(.vmp-js) .pub-logos__track { animation: none; width: auto; flex-wrap: wrap; gap: 12px; justify-content: center; }
html:not(.vmp-js) .pub-logo { padding-inline-end: 0; }
html:not(.vmp-js) .pub-logo[aria-hidden="true"] { display: none; }
html:not(.vmp-js) .pub-bal__dot { animation: none; transform: translateX(-40px); }

/* 🔴 **الطباعة** — كانت بلا قاعدة: الشريطُ اللاصقُ يُطبع أسفلَ كلِّ صفحة، والأرقامُ تختفي بلا «رسوم الخلفيّة» لأنّ
      لونَها شفّافٌ والتدرّجُ خلفيّة (مراجعةُ ب · مقيسٌ بملفّ PDF) */
@media print {
    .pub-bar, .pub-hero__media, .pub-still-btn { display: none !important; }
    .pub-stats b { background: none; -webkit-text-fill-color: currentColor; color: var(--vmp-orange); }
    .pub-logos__track { animation: none; transform: none; }
    body.pub-bar-on { padding-bottom: 0; }
}