/* ══════════════════════════════════════════════════════════════════
   HostDeals — واجهة الموقع
   الخط: Cairo (مستضاف محليًا في assets/fonts).
   الهوية: كوبالت #315BFA + كحلي #101B35 + سماوي #78DCE8 (نادرًا).
   مبني على الخصائص المنطقية (inline-start/end) ليعمل مع RTL و LTR
   بنفس الملف دون تكرار.
   ══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   سلّمُ المقاسات — درجاتٌ معدودةٌ بدل قيمٍ متراكمة.

   ── لماذا ──

   قِستُ الصفحةَ فوجدتُ **خمسةً وعشرين حجمَ خطٍّ** مستعملًا فيها،
   منها ١٣٫١٢ و١٣٫٢ و١٣٫٥ — ثلاثةُ أحجامٍ الفرقُ بينها أقلُّ من نصف
   بكسل. وهي ليست اختيارًا؛ هي ‎rem‎ تراكمت من إضافاتٍ متتابعة،
   بعضُها منّي.

   والعينُ لا ترى الفرقَ بين ١٣٫١٢ و١٣٫٢، لكنّها ترى غيابَ الإيقاع:
   صفحةٌ كلُّ سطرٍ فيها بمقاسٍ خاصّ تُقرأ غيرَ مرتَّبةٍ وإن كان كلُّ
   سطرٍ فيها جميلًا.

   فسبعُ درجاتٍ تحكم الخطّ، وأربعُ الاستدارة، واثنتان الظلّ. وما
   كان صحيحًا لم يتغيّر — الشبكُ إلى أقربِ درجةٍ لا إلى درجةٍ بعيدة.
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* الخطّ: ١٣ · ١٤ · ١٦ · ١٨ · ٢٢ · ٢٨ · ٣٦ بكسل */
    --fs-xs:   0.8125rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-md:   1.125rem;
    --fs-lg:   1.375rem;
    --fs-xl:   1.75rem;
    --fs-xxl:  2.25rem;

    /* الاستدارة: أربعُ درجاتٍ لا تسع */
    --r-sm:  8px;
    --r:     12px;
    --r-lg:  16px;
    --r-pill: 999px;

    /* ظلّان لا عشرة: هادئٌ لما يستقرّ، ومرفوعٌ لما يُنقَر.
       عشرةُ ظلالٍ تجعل كلَّ شيءٍ يطفو فلا يطفو شيء. */
    --sh:    0 1px 2px rgba(11, 14, 28, .05);
    --sh-up: 0 8px 24px -8px rgba(49, 91, 250, .25);

    /* المسافة */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
    --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;
}

:root {
    /* ── الهويّةُ الزرقاء ────────────────────────────────────────
       كوبالت للفعل، كحليٌّ للنصِّ وللشريط الداكن الواحد، أرضيّةٌ
       باردةٌ فاتحة، وسماويٌّ نادرٌ لا يحمل نصًّا على الفاتح:
       حلقةٌ، خيطٌ، رقمُ خطوة. الأصفرُ القديمُ ذهب كلُّه. */
    --brand:          #315bfa;
    --brand-dark:     #2647d6;
    --brand-light:    #5b7cff;
    --brand-soft:     #e9eeff;
    --accent:         #78dce8;
    --accent-dark:    #0f7f92;   /* السماويُّ نصًّا: ٤٫٦ على الأبيض */
    --accent-soft:    #e6f8fb;
    --accent-line:    #78dce8;
    --ink:            #101b35;
    --ink-soft:       #4b5670;
    --muted:          #5f6a85;
    --line:           #e1e6f0;
    --line-soft:      #edf0f6;
    --bg:             #f4f6fa;
    --card:           #ffffff;
    --surface:        #f8f9fc;
    --success:        #0a7d57;
    --success-soft:   #e8fbf3;
    --danger:         #dc2626;
    --danger-soft:    #fef2f2;
    --radius:         14px;
    --radius-sm:      10px;
    --radius-pill:    999px;
    --shadow-sm:      0 1px 2px rgba(16, 27, 53, .05), 0 2px 6px rgba(16, 27, 53, .04);
    --shadow:         0 8px 26px rgba(16, 27, 53, .08);
    --shadow-lg:      0 24px 60px rgba(16, 27, 53, .18);
    --container:      1180px;
    --header-bg:      rgba(255, 255, 255, .92);
    --font: 'Cairo', 'Segoe UI', system-ui, -apple-system, 'Noto Sans Arabic', Tahoma, Arial, sans-serif;

    /* ── ألوان لا تتقلّب مع الثيم ────────────────────────────────
       السماويُّ يبقى سماويًّا في الوضعين، فالنصُّ فوقه كحليٌّ دائمًا.
       وتعبئةُ الأزرار كوبالت في الوضعين: الأبيضُ فوقه ٥٫٩. */
    --on-accent:      #101b35;
    --brand-fill:     #315bfa;
    --on-fill:        #ffffff;
    --navy:           #101b35;
    --navy-2:         #1b2a55;
    --on-navy-soft:   #c7d0e4;

    /* الوضع النهاري هو الافتراضي دائمًا — لا نتبع تفضيل النظام،
       والوضع الليلي لا يُطبَّق إلا باختيار صريح من الزائر. */
    color-scheme: light;
}

/* ══════════════════════════════════════════════════════════════════
   الوضع الليلي — باختيار الزائر وحده
   الموقع نهاري افتراضيًا؛ لا نقرأ prefers-color-scheme إطلاقًا، فالوضع
   الليلي لا يظهر إلا بعد ضغط زر التبديل (ويُحفظ في localStorage).
   ══════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
    /* الكوبالتُ نصًّا على الكحليِّ يسقط إلى ٢٫٧ — فيفتّح هنا وحده،
       والتعبئةُ ‎--brand-fill‎ تبقى كوبالت. */
    --brand:        #8fa8ff;
    --brand-dark:   #a9bbff;
    --brand-light:  #5b7cff;
    --brand-soft:   #1b2a55;
    --accent-dark:  #78dce8;
    --accent-soft:  #0f2a33;
    --accent-line:  #2c6f7d;
    --ink:          #eef2fa;
    --ink-soft:     #c7d0e4;
    --muted:        #9aa7c2;
    --line:         #22304f;
    --line-soft:    #182640;
    --bg:           #0b1226;
    --card:         #16223f;
    --surface:      #101b35;
    --success-soft: #0f2c22;
    --danger-soft:  #2c1616;
    --header-bg:    rgba(16, 27, 53, .92);
    --success:      #2fcf95;
    --brand-fill:   #315bfa;
    --shadow-sm:    0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .22);
    --shadow:       0 8px 26px rgba(0, 0, 0, .4);
    --shadow-lg:    0 24px 60px rgba(0, 0, 0, .55);
    color-scheme: dark;
}

/* شعارات الشركات غالبًا PNG بخلفية بيضاء — نخفّف وهجها في الوضع الليلي. */
:root[data-theme="dark"] .company-logo img,
:root[data-theme="dark"] .trust-track img,
:root[data-theme="dark"] .logo-strip img { filter: brightness(.92); }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }
h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.35; font-weight: 800; letter-spacing: -.015em; }
h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); }
h3 { font-size: var(--fs-md); }
p  { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 18px; }
.container.narrow { max-width: 820px; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
    position: absolute; inset-inline-start: -9999px; top: 0; z-index: 999;
    background: var(--brand-fill); color: var(--on-fill); padding: 10px 16px; border-radius: 0 0 8px 8px;
}
.skip-link:focus { inset-inline-start: 12px; color: #fff; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); }

/* ── ظهور تدريجي عند التمرير ────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ── شريط الأخبار ───────────────────────────────────────────── */
.ticker {
    background: linear-gradient(90deg, var(--navy), #16223f);
    color: #eef2fa;
    overflow: hidden;
    font-size: .875rem;
    padding-block: 8px;
    position: relative;
}
.ticker-track {
    display: flex;
    gap: 2.5rem;
    width: max-content;
    animation: ticker-scroll 38s linear infinite;
}
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.ticker-item a { color: #fff; }
.ticker-item a:hover { color: var(--accent); text-decoration: underline; }
.ticker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
[dir="rtl"] .ticker-track { animation-name: ticker-scroll-rtl; }
@keyframes ticker-scroll-rtl {
    from { transform: translateX(0); }
    to   { transform: translateX(50%); }
}
@media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; width: 100%; overflow-x: auto; }
}

/* ── الترويسة ───────────────────────────────────────────────── */
.site-header {
    background: var(--header-bg);
    backdrop-filter: blur(12px) saturate(1.4);
    border-block-end: 1px solid var(--line);
    position: sticky; top: 0; z-index: 50;
    transition: box-shadow .25s ease, background .25s ease;
}
/* خيط متدرّج فوق الحدّ السفلي: يظهر مع التمرير فيفصل الترويسة عن
   المحتوى بلا ثقل ظلّ عريض. */
.site-header::after {
    content: ''; position: absolute; inset-inline: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--brand), var(--accent), transparent);
    opacity: 0; transform: scaleX(.6); transform-origin: center;
    transition: opacity .3s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}
.site-header.is-stuck { box-shadow: var(--sh-up); }
.site-header.is-stuck::after { opacity: 1; transform: scaleX(1); }

/* الترويسة تنكمش قليلًا عند التمرير — إحساسٌ بالاستجابة، ومساحةُ
   قراءةٍ أوسع على الشاشات القصيرة. */
.header-inner {
    display: flex; align-items: center; gap: 1rem; min-height: 74px;
    transition: min-height .25s cubic-bezier(.22, 1, .36, 1);
}
.site-header.is-stuck .header-inner { min-height: 62px; }

.brand {
    display: inline-flex; align-items: center; gap: .55rem;
    color: var(--ink); font-weight: 800; flex: none;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.brand:hover { color: var(--ink); }
.brand:active { transform: scale(.97); }

.brand-compass { display: inline-flex; flex: none; }
.brand-compass svg { width: 36px; height: 36px; display: block; }
.brand-mark {
    width: 36px; height: 36px; border-radius: var(--r); flex: none;
    background: linear-gradient(135deg, var(--brand-fill), var(--brand-light));
    color: #fff; display: grid; place-items: center; font-size: var(--fs-xs); letter-spacing: .5px;
    box-shadow: var(--sh-up);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}
.brand:hover .brand-mark {
    transform: rotate(-6deg) scale(1.06);
    box-shadow: var(--sh-up);
}
.brand-text { font-size: var(--fs-md); }

/* ── تأثيرات الشعار ─────────────────────────────────────────── */

/* الغلاف يحمل الهالة واللمعة. overflow مخفي كي لا تخرج اللمعة عن
   حدود الشعار، وisolation كي لا تختلط طبقاتها بما تحتها. */
.brand-logo-wrap {
    position: relative; display: inline-flex; align-items: center;
    isolation: isolate; overflow: hidden; border-radius: var(--r-sm);
    padding-inline: 2px;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.brand:hover .brand-logo-wrap { transform: translateY(-2px) scale(1.03); }

/* هالة خلف الشعار: تتمدّد من مركزه عند المرور */
.brand-logo-wrap::before {
    content: ''; position: absolute; inset: -30% -12%; z-index: -1;
    background: radial-gradient(closest-side, var(--brand-soft), transparent 72%);
    opacity: 0; transform: scale(.7);
    transition: opacity .32s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}
.brand:hover .brand-logo-wrap::before { opacity: 1; transform: scale(1); }

/* لمعة تمرّ مرّة واحدة على الشعار — الحيوية المقصودة */
.brand-logo-wrap::after {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
    transform: translateX(-160%) skewX(-18deg); pointer-events: none;
}
.brand:hover .brand-logo-wrap::after { animation: brand-sheen .85s ease-out; }
@keyframes brand-sheen {
    to { transform: translateX(340%) skewX(-18deg); }
}
/* اللمعة البيضاء تختفي على شعار فاتح في الوضع الليلي، فتُقلب */
:root[data-theme="dark"] .brand-logo-wrap::after {
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
}

/* دخول هادئ عند فتح الصفحة: الشعار أول ما تقع عليه العين */
.site-header .brand { animation: brand-enter .55s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes brand-enter {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .brand,
    .main-nav.is-open,
    .brand:hover .brand-logo-wrap::after,
    .header-inner .btn-primary:hover::after { animation: none; }
    .brand, .brand-mark, .brand-logo-wrap, .header-inner,
    .theme-toggle svg, .lang-switch svg, .header-socials a,
    .main-nav ul a::after, .site-header::after { transition: none; }
}
/* ارتفاع الشعار يُضبط من الإعدادات عبر --logo-h.
   الخاصيتان معًا مقصودتان: بلا إعداد يبقى السلوك القديم (حجم طبيعي
   بسقف 40px)، ومع إعداد يصير الارتفاع مضبوطًا بالضبط فيكبر الشعار
   الصغير أيضًا — وإلا كان رفع الرقم بلا أثر على شعار أصغر من السقف. */
.brand-logo {
    height: var(--logo-h, auto);
    max-height: var(--logo-h, 40px);
    width: auto; object-fit: contain;
}
/* على الجوال سقف ثابت مهما كان الإعداد، فلا يبتلع الشعار الترويسة */
@media (max-width: 560px) {
    .brand-logo { max-height: min(var(--logo-h, 40px), 38px); }
}

.nav-toggle {
    margin-inline-start: auto; width: 42px; height: 38px; border: 1px solid var(--line);
    background: var(--card); border-radius: var(--radius-sm); display: grid; place-content: center;
    gap: 4px; cursor: pointer; padding: 0;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: var(--r-sm); transition: .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.main-nav { display: none; width: 100%; }
.main-nav.is-open {
    display: block; order: 3;
    border-block-start: 1px solid var(--line);
    padding-block: .75rem 1rem;
    animation: nav-drop .28s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes nav-drop {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

/* زرّ القائمة يتفاعل هو الآخر */
.nav-toggle { transition: border-color .18s ease, background .18s ease; }
.nav-toggle:hover { border-color: var(--brand); background: var(--brand-soft); }
.nav-toggle[aria-expanded="true"] { border-color: var(--brand); background: var(--brand-soft); }
.nav-toggle[aria-expanded="true"] span { background: var(--brand); }
.main-nav ul { display: flex; flex-direction: column; gap: .15rem; }
/* مقصورة على روابط القائمة حتى لا تتجاوز ألوان الأزرار داخل nav-actions */
.main-nav ul a {
    display: block; padding: .55rem .75rem; border-radius: var(--radius-sm);
    color: var(--ink-soft); font-weight: 600; font-size: var(--fs-base); position: relative;
    transition: color .18s ease, background .18s ease;
}
.main-nav ul a:hover { background: var(--brand-soft); color: var(--brand-dark); }
.main-nav ul a.is-active { color: var(--brand); font-weight: 700; }
.nav-actions { display: flex; align-items: center; gap: .6rem; margin-block-start: .8rem; flex-wrap: wrap; }
.lang-switch {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .42rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-pill);
    color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 700; background: var(--card);
}
.lang-switch {
    transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}
.lang-switch:hover {
    border-color: var(--brand); color: var(--brand);
    background: var(--brand-soft); transform: translateY(-1px);
}
.lang-switch svg { transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.lang-switch:hover svg { transform: rotate(180deg); }

.theme-toggle {
    display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none;
    border: 1px solid var(--line); border-radius: var(--radius-pill);
    background: var(--card); color: var(--ink-soft); cursor: pointer; padding: 0;
    transition: border-color .15s ease, color .15s ease;
}
.theme-toggle:hover {
    border-color: var(--brand); color: var(--brand);
    background: var(--brand-soft); transform: translateY(-1px);
}
.theme-toggle svg { transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.theme-toggle:hover svg { transform: rotate(35deg); }
/* أيقونة واحدة ظاهرة: الشمس في الوضع الليلي (أي «حوّل للنهاري») والعكس */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }

@media (min-width: 940px) {
    .nav-toggle { display: none; }
    .main-nav { display: flex !important; align-items: center; justify-content: space-between; width: auto; flex: 1; margin-inline-start: 1.2rem; border: 0; padding: 0; }
    .main-nav ul { flex-direction: row; gap: .1rem; }

    /* خلفية المرور تثقل شريطًا فيه ثمانية روابط، فبدلًا منها خطٌّ
       ينمو من المنتصف — أخفّ بصريًا وأوضح في تتبّع المؤشّر. */
    .main-nav ul a:hover { background: transparent; color: var(--brand); }
    .main-nav ul a::after {
        content: ''; position: absolute; inset-inline: .75rem; bottom: .12rem;
        height: 2px; border-radius: var(--r-sm);
        background: linear-gradient(90deg, var(--brand), var(--accent));
        transform: scaleX(0); transform-origin: center;
        transition: transform .28s cubic-bezier(.22, 1, .36, 1);
    }
    .main-nav ul a:hover::after,
    .main-nav ul a:focus-visible::after { transform: scaleX(1); }

    /* النشط: الخطّ ممدود دائمًا ونقطة صغيرة فوقه */
    .main-nav ul a.is-active::after { transform: scaleX(1); }
    .main-nav ul a.is-active::before {
        content: ''; position: absolute; inset-inline-start: 50%; top: .1rem;
        width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
        transform: translateX(-50%);
    }

    .nav-actions { margin-block-start: 0; margin-inline-start: auto; }
}

/* ── الأزرار ────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .7rem 1.25rem; border-radius: var(--radius-pill); border: 1px solid transparent;
    font-size: var(--fs-base); font-weight: 700; cursor: pointer; text-align: center;
    transition: transform .14s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
    white-space: nowrap; font-family: inherit;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand-fill); color: var(--on-fill); box-shadow: var(--sh-up); }
.btn-primary:hover { background: #2647d6; color: #fff; box-shadow: var(--sh-up); transform: translateY(-1px); }
.btn-accent { background: var(--accent); color: var(--on-accent); box-shadow: var(--sh-up); }
.btn-accent:hover { background: var(--accent-dark); color: var(--on-accent); transform: translateY(-1px); }
.btn-outline { border-color: var(--line); background: var(--card); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink-soft); border-color: transparent; }
.btn-ghost:hover { background: var(--line-soft); color: var(--ink); }
.btn-light { background: var(--card); color: var(--brand-dark); }
.btn-light:hover { background: #e9eeff; color: var(--brand-dark); }
.btn-glass {
    background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .35); color: #fff;
    backdrop-filter: blur(6px);
}
.btn-glass:hover { background: rgba(255, 255, 255, .22); border-color: #fff; color: #fff; }
.btn-sm { padding: .42rem .85rem; font-size: var(--fs-sm); }
.btn-lg { padding: .9rem 1.7rem; font-size: 1rem; }
.btn-block { width: 100%; }

/* ── هيكل الأقسام والعناوين ─────────────────────────────────────── */
.section { padding-block: clamp(2.6rem, 6vw, 4.4rem); }
.section-alt { background: var(--card); border-block: 1px solid var(--line); }
.section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-block-end: 1.8rem;
}
.section-head h2 { margin-block-end: .25rem; }
.section-sub { color: var(--muted); margin: 0; font-size: var(--fs-base); }
.section-link { font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; }
.eyebrow {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em;
    color: var(--brand); background: var(--brand-soft);
    padding: .28rem .7rem; border-radius: var(--radius-pill); margin-block-end: .6rem;
}
.eyebrow-light { color: var(--accent); background: rgba(255, 255, 255, .12); }

.page-head {
    background: linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 100%);
    color: #fff; padding-block: clamp(2.2rem, 5vw, 3.4rem); position: relative; overflow: hidden;
}
.page-head::after {
    content: ''; position: absolute; inset-block-start: -60%; inset-inline-end: -10%;
    width: 420px; height: 420px; border-radius: 50%;
    background: radial-gradient(circle, rgba(120, 220, 232, .28), transparent 65%);
}
.page-head h1 { color: #fff; margin-block-end: .4rem; position: relative; }
.page-head p { color: #c7d0e4; margin: 0; max-width: 62ch; position: relative; }

.empty-state {
    background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius);
    padding: 2.4rem 1.4rem; text-align: center; color: var(--muted);
}
.empty-state strong { display: block; color: var(--ink); font-size: var(--fs-base); margin-block-end: .3rem; }

/* ══════════════════════════════════════════════════════════════
   الواجهة الرئيسية (Hero)
   ══════════════════════════════════════════════════════════════ */

/* ── واجهة الرئيسية (Hero) ──────────────────────────────────────── */
/* ── الهيرو يهدأ ─────────────────────────────────────────────
   كان تدرّجًا من ‎#0b1226‎ — شبهِ أسودَ — إلى البنفسجيّ، تحته ثلاثُ
   فقاعاتٍ متحرّكةٍ بتمويهِ سبعين بكسلًا. فيملأ الشاشةَ ويُقرأ لافتةَ
   إعلانٍ لا صفحةَ أرقام. وتحته تنقلب الصفحةُ إلى الأبيض فجأة.

   وموقعٌ يتكلّم عن فلوسٍ وأسعارِ تجديدٍ يبيع الثقةَ بالهدوء لا
   بالصخب. فصار التدرّجُ من البنفسجيِّ إلى الأبيض: الترويسةُ ملوّنةٌ
   بقدرِ ما تُعرِّف بالهويّة، ثمّ تُسلِّم الصفحةَ لمحتواها بلا حدٍّ
   حادّ. */
.hero {
    position: relative; overflow: hidden; isolation: isolate;
    background: linear-gradient(168deg, var(--navy) 0%, var(--navy-2) 55%, var(--surface) 100%);
    color: #fff; padding-block: clamp(2.4rem, 6vw, 4rem) clamp(3rem, 7vw, 4.8rem);
}

/* طبقات الخلفية المتحركة */
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
/* فقاعةٌ واحدةٌ خافتةٌ ساكنة: ثلاثٌ تتحرّك خلف النصِّ تسحب العينَ
   عنه، والحركةُ الدائمةُ تُتعب من يقرأ رقمًا. */
.hero-blob {
    position: absolute; border-radius: 50%; filter: blur(90px); opacity: .28;
}
.hero-blob-2, .hero-blob-3 { display: none; }
.hero-blob-1 { width: 520px; height: 520px; inset-block-start: -180px; inset-inline-end: -120px; background: rgba(49, 91, 250, .75); }
.hero-blob-2 { width: 420px; height: 420px; inset-block-end: -160px; inset-inline-start: -100px; background: rgba(120, 220, 232, .35); animation-delay: -6s; }
.hero-blob-3 { width: 320px; height: 320px; inset-block-start: 40%; inset-inline-start: 45%; background: rgba(120, 220, 232, .28); animation-delay: -11s; }
@keyframes float-blob {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    33%      { transform: translate3d(24px, -28px, 0) scale(1.08); }
    66%      { transform: translate3d(-20px, 20px, 0) scale(.95); }
}
.hero-grid {
    position: absolute; inset: 0; opacity: .16;
    background-image: linear-gradient(rgba(255, 255, 255, .35) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, .35) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 20%, transparent 75%);
}

.hero-inner { display: grid; gap: 2.4rem; position: relative; }
@media (min-width: 980px) {
    .hero-inner { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 3rem; }
}

.hero-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
    color: #fff; border-radius: var(--radius-pill); padding: .34rem .85rem;
    font-size: var(--fs-xs); font-weight: 700; margin-block-end: 1rem;
    backdrop-filter: blur(6px);
}
.live-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; flex: none;
    box-shadow: var(--sh); animation: pulse-dot 2.2s infinite;
}
@keyframes pulse-dot {
    70%  { box-shadow: var(--sh); }
    100% { box-shadow: var(--sh); }
}

.hero h1 { color: #fff; font-size: clamp(2.1rem, 5.6vw, 3.35rem); line-height: 1.25; letter-spacing: -.03em; }
.hero h1 .accent-word {
    background: linear-gradient(120deg, #fff 30%, var(--accent) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    position: relative; white-space: nowrap;
}
.hero-sub { color: #c7d0e4; font-size: clamp(1rem, 2.3vw, 1.14rem); max-width: 54ch; margin-block-end: 1.5rem; }
.hero-actions { display: flex; gap: .7rem; flex-wrap: wrap; }

/* شريط البحث السريع */
.hero-quick {
    display: grid; gap: .5rem; margin-block-start: 1.6rem;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--r-lg); padding: .6rem; backdrop-filter: blur(10px);
    grid-template-columns: 1fr;
}
@media (min-width: 620px) { .hero-quick { grid-template-columns: 1.1fr 1fr auto; align-items: center; } }
.hero-quick label { display: block; font-size: var(--fs-xs); font-weight: 700; color: #b9c0e8; padding-inline: .55rem; }
.hero-quick .quick-field { border-radius: 12px; padding-block: .3rem; transition: background .2s; }
.hero-quick .quick-field:focus-within { background: rgba(255, 255, 255, .12); }
.hero-quick .quick-field select,
.hero-quick .quick-field input {
    width: 100%; background-color: transparent; border: 0; box-shadow: none; color: #fff;
    font-family: inherit; font-size: var(--fs-base); font-weight: 700; padding: .1rem .55rem .3rem;
    border-radius: 0;
}
.hero-quick .quick-field select option { color: var(--ink); }
/* الحلقةُ تُنقَل إلى الحاضن لا تُلغى: حقلٌ يُركَّز عليه بلا أثرٍ
   مرئيٍّ يترك من يتنقّل بلوحة المفاتيح لا يعرف أين هو. والخلفيّةُ
   وحدها إشارةٌ باهتةٌ على هيروٍ داكن. */
.hero-quick .quick-field select:focus,
.hero-quick .quick-field input:focus { outline: none; box-shadow: none; }

.hero-quick .quick-field:focus-within {
    outline: 2px solid #fff;
    outline-offset: 1px;
    border-radius: 8px;
}
.hero-quick .quick-field input::placeholder { color: #9aa2d4; font-weight: 600; }
/* إخفاء أسهم حقل الرقم — الشريط له تصميمه الخاص */
.hero-quick .quick-field input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.hero-quick .quick-field input::-webkit-outer-spin-button,
.hero-quick .quick-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hero-quick .btn { margin: .15rem; }

.hero-chips { display: flex; gap: .45rem; flex-wrap: wrap; margin-block-start: 1.1rem; }
.hero-chip {
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
    color: #c7d0e4; border-radius: var(--radius-pill); padding: .3rem .8rem;
    font-size: var(--fs-xs); font-weight: 600; transition: .18s;
}
.hero-chip:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: translateY(-2px); }

.hero-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem;
    margin-block-start: 2rem; max-width: 460px;
}
.hero-stats li { text-align: center; }
.hero-stats strong { display: block; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.2; font-weight: 800; }
.hero-stats span { color: #c7d0e4; font-size: var(--fs-xs); }

/* البطاقة العائمة — أفضل عرض */

/* ── بطاقة أقوى عرض في الواجهة ──────────────────────────────────── */
.hero-visual { position: relative; display: flex; justify-content: center; perspective: 1200px; }

/* هالة ملوّنة تتنفّس خلف البطاقة — تفصلها عن خلفية الواجهة وتسحب العين إليها */
.hero-card-halo {
    position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
    width: 118%; height: 88%; z-index: -1; border-radius: 50%;
    filter: blur(48px); pointer-events: none;
    background: radial-gradient(circle at 30% 32%, rgba(120, 220, 232, .55), transparent 62%),
                radial-gradient(circle at 72% 68%, rgba(49, 91, 250, .7), transparent 62%);
    animation: halo-breathe 6.5s ease-in-out infinite;
}
@keyframes halo-breathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: .75; }
    50%      { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

.hero-card {
    position: relative; width: min(340px, 100%);
    background: var(--card); color: var(--ink);
    border-radius: var(--r-lg); padding: 1.5rem 1.3rem 1.3rem;
    box-shadow: var(--shadow-lg);
    transform-style: preserve-3d;
    transition: box-shadow .3s ease;
    animation: card-float 7s ease-in-out infinite;
    will-change: transform;
}
@keyframes card-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}
.hero-card:hover { animation-play-state: paused; box-shadow: var(--sh-up); }

/* لمعة تمرّ على البطاقة كل بضع ثوانٍ. الغلاف يقصّها عند الحواف بدل أن
   يقصّ overflow على البطاقة نفسها شارةَ «أعلى خصم» الخارجة من أعلاها. */
.hero-card-shine {
    position: absolute; inset: 0; border-radius: var(--r-lg);
    overflow: hidden; pointer-events: none; z-index: 3;
}
.hero-card-shine::before {
    content: ''; position: absolute; inset-block: -60%; width: 42%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
    transform: skewX(-18deg) translateX(-260%);
    animation: card-shine 6s ease-in-out infinite;
}
@keyframes card-shine {
    0%, 58% { transform: skewX(-18deg) translateX(-260%); }
    100%    { transform: skewX(-18deg) translateX(340%); }
}
:root[data-theme="dark"] .hero-card-shine::before { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent); }

.hero-card-flag {
    position: absolute; inset-block-start: -14px; inset-inline-start: 50%;
    transform: translateX(-50%);
    background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: var(--fs-xs);
    padding: .3rem .9rem; border-radius: var(--radius-pill);
    box-shadow: var(--sh-up); white-space: nowrap; z-index: 4;
}
[dir="rtl"] .hero-card-flag { transform: translateX(50%); }

.hero-card-brand { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-block: .5rem .8rem; }
.hero-card-brand img { max-height: 26px; width: auto; }
.hero-card-name { text-align: center; font-size: var(--fs-md); margin-block-end: .1rem; }
.hero-card-type { display: block; text-align: center; font-size: var(--fs-xs); color: var(--muted); margin-block-end: .9rem; }

.hero-card-price { text-align: center; display: flex; align-items: baseline; justify-content: center; gap: .35rem; }
.hero-card-price b {
    font-size: var(--fs-xxl); font-weight: 800; letter-spacing: -.03em;
    animation: price-pop .7s cubic-bezier(.2, .8, .25, 1) .1s both;
}
@keyframes price-pop {
    from { opacity: 0; transform: scale(.8); }
    to   { opacity: 1; transform: none; }
}
.hero-card-price span { font-size: var(--fs-sm); color: var(--muted); }

.hero-card-meta { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-block: .35rem .8rem; }
.hero-card-was { color: var(--muted); text-decoration: line-through; font-size: var(--fs-sm); }
.hero-card-off {
    position: relative;
    background: var(--success-soft); color: var(--success); font-weight: 800;
    font-size: var(--fs-xs); padding: .12rem .5rem; border-radius: var(--r-sm);
}
/* نبضة خفيفة حول نسبة الخصم تجذب النظر إليها دون وميض مزعج */
.hero-card-off::after {
    content: ''; position: absolute; inset: 0; border-radius: var(--r-sm);
    animation: off-pulse 2.8s ease-out infinite;
}
@keyframes off-pulse {
    0%   { box-shadow: var(--sh); }
    70%  { box-shadow: var(--sh); }
    100% { box-shadow: var(--sh); }
}

/* قيمة التوفير — رقم حقيقي من الفرق بين السعرين */
.hero-card-saving {
    display: flex; align-items: center; justify-content: center; gap: .35rem;
    background: var(--success-soft); color: var(--success);
    font-size: var(--fs-xs); font-weight: 800; border-radius: var(--r-sm);
    padding: .42rem .6rem; margin: 0 0 1rem;
}

.hero-card-features { display: grid; gap: .4rem; font-size: var(--fs-sm); color: var(--ink-soft); margin-block-end: 1.1rem; }
.hero-card-features li {
    display: flex; align-items: center; gap: .45rem;
    animation: feature-in .5s ease both;
}
.hero-card-features li:nth-child(1) { animation-delay: .28s; }
.hero-card-features li:nth-child(2) { animation-delay: .40s; }
.hero-card-features li:nth-child(3) { animation-delay: .52s; }
@keyframes feature-in {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: none; }
}
.hero-card-features svg { color: var(--success); flex: none; }

/* زر الشراء: بريق يمرّ عليه وسهم ينزاح عند المرور */
.hero-card-cta { position: relative; overflow: hidden; }
.hero-card-cta::after {
    content: ''; position: absolute; inset-block: -60%; width: 38%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-18deg) translateX(-260%);
    animation: card-shine 6s ease-in-out 1.2s infinite;
}
.hero-card-cta .cta-arrow { transition: transform .22s ease; }
[dir="rtl"] .hero-card-cta .cta-arrow { transform: scaleX(-1); }
.hero-card-cta:hover .cta-arrow { transform: translateX(4px); }
[dir="rtl"] .hero-card-cta:hover .cta-arrow { transform: scaleX(-1) translateX(4px); }

.hero-orb {
    position: absolute; inset-block-end: -30px; inset-inline-end: -10px;
    width: 120px; height: 120px; border-radius: 50%; z-index: -1;
    background: radial-gradient(circle at 30% 30%, rgba(120, 220, 232, .9), rgba(120, 220, 232, 0) 70%);
    animation: float-blob 12s ease-in-out infinite;
}

/* الموجة الفاصلة أسفل الواجهة */
.hero-wave { position: absolute; inset-inline: 0; inset-block-end: -1px; line-height: 0; }
.hero-wave svg { width: 100%; height: 52px; display: block; }
.hero-wave path { fill: var(--bg); }

/* ══════════════════════════════════════════════════════════════════
   أشكال الواجهة البديلة

   الأشكال الأربعة تشترك في الخلفية والشارة والعنوان، فلا يُعاد
   تعريفُها هنا. وهذه إضافاتُ كلّ شكلٍ على المشترك لا بديلٌ عنه.
   ══════════════════════════════════════════════════════════════ */

/* ── جدول أرخص خطة عند كل شركة ──────────────────────────────── */
.hero-board {
    background: rgba(255, 255, 255, .97);
    border-radius: var(--radius);
    box-shadow: var(--sh-up);
    overflow: hidden;
}
:root[data-theme="dark"] .hero-board { background: var(--card); }

.hero-board-head {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    padding: .75rem 1rem; background: var(--surface);
    border-block-end: 1px solid var(--line);
}
.hero-board-head h2 { font-size: var(--fs-sm); margin: 0; color: var(--ink); font-weight: 800; }
.hero-board-head a { font-size: var(--fs-xs); font-weight: 700; color: var(--brand); white-space: nowrap; }

.hero-board-list { list-style: none; margin: 0; padding: 0; }

.hero-board-row {
    display: grid; grid-template-columns: 1fr auto auto;
    align-items: center; gap: .7rem;
    padding: .62rem 1rem;
    border-block-start: 1px solid var(--line-soft);
    color: var(--ink);
}
.hero-board-row:first-child { border-block-start: 0; }
.hero-board-row:hover { background: var(--surface); }

.hero-board-co { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.hero-board-co img {
    max-height: 22px; max-width: 74px; width: auto; object-fit: contain; flex: none;
}
.hero-board-co .company-initial {
    width: 26px; height: 26px; border-radius: 8px; flex: none;
    display: grid; place-items: center; font-weight: 800; font-size: var(--fs-xs);
    background: var(--brand-soft); color: var(--brand);
}
.hero-board-names { min-width: 0; }
.hero-board-names strong { display: block; font-size: var(--fs-xs); font-weight: 700; line-height: 1.3; }
.hero-board-names small {
    display: block; font-size: var(--fs-xs); color: var(--muted); line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.hero-board-price { text-align: center; white-space: nowrap; }
.hero-board-price b { display: block; font-size: var(--fs-base); font-weight: 800; line-height: 1.2; }
.hero-board-price small { font-size: var(--fs-xs); font-weight: 800; color: var(--success); }

.hero-board-go {
    font-size: var(--fs-xs); font-weight: 800; white-space: nowrap;
    background: var(--brand-fill); color: #fff;
    padding: .38rem .78rem; border-radius: var(--radius-pill);
    transition: background .15s ease, transform .15s ease;
}
.hero-board-go:hover { background: #2647d6; color: #fff; transform: translateY(-1px); }

.hero-board-note {
    margin: 0; padding: .6rem 1rem; font-size: var(--fs-xs); line-height: 1.6;
    color: var(--muted); background: var(--surface);
    border-block-start: 1px solid var(--line-soft);
}

/* ── الشكل المركَّز ─────────────────────────────────────────── */
.hero-alt { margin: .9rem 0 0; }
.hero-alt a {
    color: rgba(255, 255, 255, .82); font-size: var(--fs-sm);
    text-decoration: underline; text-underline-offset: 3px;
}
.hero-alt a:hover { color: #fff; }
.hero-card-lg { max-width: 340px; }
.hero-card-renewal { color: var(--muted); }

/* ── شكل الجمهور ───────────────────────────────────────────── */
.hero-inner-center { text-align: center; display: block; max-width: 62rem; }
.hero-audience h1 { margin-inline: auto; }
.hero-audience .hero-sub { margin-inline: auto; }

.hero-picks {
    list-style: none; margin: 1.6rem 0 0; padding: 0;
    display: grid; gap: .7rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.hero-pick {
    display: grid; gap: .3rem; place-items: center; height: 100%;
    padding: 1rem .7rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: var(--radius);
    color: #fff;
    transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.hero-pick:hover {
    background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .45);
    color: #fff; transform: translateY(-3px);
}
.hero-pick-ic { line-height: 0; opacity: .92; }
.hero-pick strong { font-size: 1rem; font-weight: 800; }
.hero-pick-from { font-size: var(--fs-xs); color: rgba(255, 255, 255, .72); }

@media (max-width: 560px) {
    .hero-board-row { grid-template-columns: 1fr auto; row-gap: .45rem; }
    .hero-board-go { grid-column: 2; }
    .hero-picks { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════
   صفحة الإعلان الممول (/flashcloud)

   مقفولة: ترويسة بلا قائمة، وتذييل سطر واحد. وكل قياس هنا مبنيّ على
   أن ٩ من ١٠ زوّار الإعلانات على الموبايل — فالعمود الواحد هو
   الأصل، والشاشة العريضة هي الاستثناء الذي يوسّعه.
   ══════════════════════════════════════════════════════════════ */

/* ── الترويسة والتذييل ─────────────────────────────────────────── */
.promo-header {
    background: var(--card);
    border-block-end: 1px solid var(--line);
    padding-block: .6rem;
    position: sticky; inset-block-start: 0; z-index: 30;
}
.promo-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.promo-logo { height: 42px; width: auto; object-fit: contain; }
.promo-logo-text { font-weight: 900; font-size: var(--fs-base); color: var(--ink); }
.promo-header-cta { flex: none; }

.promo-footer {
    background: var(--surface);
    border-block-start: 1px solid var(--line);
    padding-block: 1.4rem;
    margin-block-start: 0;
}
.promo-footer p { margin: 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.7; max-width: 72ch; }
.promo-footer-links { margin-block-start: .5rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.promo-footer-links a { color: var(--brand); font-weight: 600; }

/* ── الواجهة ───────────────────────────────────────────────────── */
.promo-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(158deg, #315bfa 0%, #2647d6 100%);
    color: #fff;
    padding-block: clamp(2rem, 7vw, 3.6rem);
}
.promo-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.promo-blob { position: absolute; border-radius: 50%; filter: blur(30px); opacity: .5; }
.promo-blob-1 {
    inset-block-start: -28%; inset-inline-start: -10%;
    width: 22rem; height: 22rem;
    background: radial-gradient(circle, rgba(120, 220, 232, .28), transparent 68%);
}
.promo-blob-2 {
    inset-block-end: -34%; inset-inline-end: -8%;
    width: 20rem; height: 20rem;
    background: radial-gradient(circle, rgba(120, 220, 232, .22), transparent 68%);
}
.promo-hero-inner { position: relative; max-width: 52rem; }

.promo-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .26);
    border-radius: var(--radius-pill); padding: .32rem .85rem;
    font-size: var(--fs-xs); font-weight: 600;
}
.promo-hero h1 {
    font-size: clamp(1.55rem, 5.6vw, 2.5rem);
    line-height: 1.28; margin: .85rem 0 .6rem;
    text-wrap: balance;
}
.promo-lede {
    margin: 0; font-size: clamp(.95rem, 2.6vw, 1.1rem);
    color: rgba(255, 255, 255, .9); line-height: 1.8; max-width: 52ch;
}

/* الثلاثة: هي الزاوية — تُقرأ قبل السعر */
.promo-three {
    list-style: none; margin: 1.5rem 0 0; padding: 0;
    display: grid; gap: .7rem;
}
@media (min-width: 720px) { .promo-three { grid-template-columns: repeat(3, 1fr); } }
.promo-three li {
    background: rgba(255, 255, 255, .11);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--radius-sm);
    padding: .85rem .9rem;
    display: grid; gap: .15rem;
}
.promo-three-ic { color: var(--accent); line-height: 0; margin-block-end: .3rem; }
.promo-three strong { font-size: var(--fs-base); font-weight: 800; }
.promo-three span { font-size: var(--fs-xs); color: rgba(255, 255, 255, .86); line-height: 1.6; }

.promo-cta-row { margin-block-start: 1.6rem; display: grid; gap: .6rem; justify-items: start; }
.promo-cta { font-size: var(--fs-base); padding-inline: 1.5rem; }
.promo-cta-note { margin: .85rem 0 0; font-size: var(--fs-xs); color: rgba(255, 255, 255, .84); line-height: 1.7; max-width: 52ch; }

/* ── الأقسام ───────────────────────────────────────────────────── */
.promo-section { padding-block: clamp(1.8rem, 5vw, 2.8rem); }
.promo-section h2 {
    font-size: clamp(1.2rem, 3.6vw, 1.55rem);
    margin: 0 0 .5rem; text-wrap: balance;
}
.promo-sub { margin: 0 0 1.2rem; color: var(--muted); font-size: var(--fs-sm); max-width: 62ch; }

/* الخطوات: أرقام كبيرة، لأن الغرابة تحتاج ترتيبًا واضحًا */
.promo-steps { list-style: none; counter-reset: s; margin: 1rem 0 0; padding: 0; display: grid; gap: .9rem; }
.promo-steps li {
    counter-increment: s;
    display: grid; grid-template-columns: auto 1fr; gap: .25rem .9rem;
    align-items: start; align-content: start;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 1rem 1.05rem;
}
.promo-steps li::before {
    content: counter(s);
    grid-row: span 2;
    width: 2.1rem; height: 2.1rem; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--brand-fill); color: #fff; font-weight: 900; font-size: var(--fs-sm);
}
.promo-steps strong { font-size: 1rem; }
.promo-steps span { color: var(--muted); line-height: 1.75; }

/* ── الخطط ─────────────────────────────────────────────────────── */
.promo-plans-wrap { background: var(--surface); border-block: 1px solid var(--line-soft); }
.promo-plans {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1rem;
}
@media (min-width: 840px) { .promo-plans { grid-template-columns: repeat(3, 1fr); align-items: start; } }

.promo-plan {
    position: relative;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.2rem 1.1rem;
    display: flex; flex-direction: column;
}
.promo-plan.is-pick {
    border-color: var(--brand); box-shadow: var(--sh-up);
}
.promo-plan-flag {
    position: absolute; inset-block-start: -.7rem; inset-inline-start: 1.1rem;
    background: var(--accent); color: #101b35;
    font-size: var(--fs-xs); font-weight: 900; letter-spacing: .02em;
    padding: .2rem .6rem; border-radius: var(--radius-pill);
}
.promo-plan h3 { margin: .2rem 0 .5rem; font-size: var(--fs-md); }
.promo-plan-price { display: flex; align-items: baseline; gap: .35rem; }
.promo-plan-price b { font-size: var(--fs-xl); font-weight: 900; line-height: 1.1; }
.promo-plan-price span { font-size: var(--fs-xs); color: var(--muted); }
.promo-plan-was { margin: .25rem 0 .9rem; font-size: var(--fs-xs); min-height: 1.2em; }
.promo-plan-was s { color: var(--muted); }
.promo-plan-was em {
    font-style: normal; font-weight: 800; color: var(--success);
    background: var(--success-soft); padding: .08rem .4rem; border-radius: var(--r-sm); margin-inline-start: .3rem;
}
.promo-plan-feats {
    list-style: none; margin: 0 0 1.1rem; padding: 0;
    display: grid; gap: .4rem; flex: 1;
}
.promo-plan-feats li {
    font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.6;
    padding-inline-start: 1.3rem; position: relative;
}
.promo-plan-feats li::before {
    content: '✓'; position: absolute; inset-inline-start: 0;
    color: var(--success); font-weight: 900;
}

/* ── الصدق ─────────────────────────────────────────────────────── */

/* ── الأسئلة ───────────────────────────────────────────────────── */
.promo-faq { display: grid; gap: .55rem; }
.promo-faq details {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius-sm); overflow: hidden;
}
.promo-faq summary {
    padding: .85rem 1rem; cursor: pointer; font-weight: 700;
    list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .8rem;
}
.promo-faq summary::-webkit-details-marker { display: none; }
.promo-faq summary::after {
    content: '+'; flex: none; font-weight: 900; font-size: var(--fs-md);
    color: var(--brand); transition: transform .18s ease;
}
.promo-faq details[open] summary::after { content: '−'; }
.promo-faq details[open] summary { border-block-end: 1px solid var(--line-soft); }
.promo-faq p { margin: 0; padding: .85rem 1rem; color: var(--ink-soft); line-height: 1.85; }

/* ── النداء الأخير ─────────────────────────────────────────────── */
.promo-final {
    background: linear-gradient(135deg, var(--brand-fill) 0%, #2647d6 100%);
    color: #fff; text-align: center;
    padding-block: clamp(2rem, 6vw, 3.2rem);
}
.promo-final h2 { font-size: clamp(1.35rem, 4.4vw, 1.85rem); margin: 0 0 .55rem; }
.promo-final p { margin: 0 auto 1.3rem; max-width: 52ch; color: rgba(255, 255, 255, .9); line-height: 1.85; }
.promo-final .promo-cta { margin-inline: auto; }
.promo-final-note { margin-block-start: 1rem !important; font-size: var(--fs-xs); color: rgba(255, 255, 255, .78); }

/* زرّ محدَّد الحدود — يُستعمل في الخطط غير المرشَّحة */
.btn-outline {
    background: transparent; color: var(--brand);
    border: 1.5px solid var(--brand);
}
.btn-outline:hover { background: var(--brand-fill); color: #fff; }

/* ── التكبير: نصٌّ واحدٌ يُقرأ، فيأخذ حجمًا أكبر قليلًا ────────── */

/* ── الواتساب: سطرٌ داخليٌّ بلون واتساب لا بلون الموقع ────────── */

/* ── قسم الدفع: أهمّ اعتراض، فله بطاقةٌ خاصّة لا فقرة ─────────── */

.promo-wa-btn {
    background: #25d366; color: #042e17; font-weight: 800;
    display: inline-flex; align-items: center; gap: .5rem;
    box-shadow: var(--sh-up);
}
.promo-wa-btn:hover { background: #1eb958; color: #042e17; transform: translateY(-1px); }

.promo-final-wa { margin-block-start: .9rem !important; }
.promo-final-wa a {
    color: #fff; font-weight: 700; font-size: var(--fs-sm);
    text-decoration: underline; text-underline-offset: 4px;
}

/* ── الشريط الثابت: الموبايل وحده ──────────────────────────────
   زائر الإعلان بيقرأ ونازل. لو الزرّ فوق بس، اللي وصل لنص الصفحة
   لازم يرجع لفوق. الشريط بيخلّي القرار في متناول إيده دايمًا —
   والواتساب جنبه، فاللي مش عارف يدفع مش محتاج يدوّر. */
.promo-bar { display: none; }

@media (max-width: 860px) {
    .promo-bar {
        display: flex; align-items: center; gap: .5rem;
        position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 45;
        padding: .55rem .7rem;
        padding-block-end: calc(.55rem + env(safe-area-inset-bottom, 0px));
        background: color-mix(in srgb, var(--card) 92%, transparent);
        backdrop-filter: blur(10px);
        border-block-start: 1px solid var(--line);
        box-shadow: var(--sh-up);
    }
    @supports not (background: color-mix(in srgb, red 92%, transparent)) {
        .promo-bar { background: var(--card); }
    }
    .promo-bar-buy { flex: 1; text-align: center; font-size: var(--fs-base); padding-block: .7rem; }
    .promo-bar-wa {
        flex: none; width: 46px; height: 46px; border-radius: 50%;
        display: grid; place-items: center;
        background: #25d366; color: #042e17;
    }
    /* الصفحة تُزاح كي لا يغطّي الشريط آخرها */
    body.is-promo { padding-block-end: 4.6rem; }
    /* والشريط يكفي على الموبايل، فيُخفى زرّ الترويسة */
    .promo-header-cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .promo-wa-btn:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   حركةُ صفحة الإعلان

   القاعدة: المحتوى ظاهرٌ في الـCSS، والحركةُ تُضاف بالجافاسكربت.
   فمن أغلق السكربتات يرى الصفحة كاملةً — لا بيضاء تنتظر مراقبًا.
   ومن طلب تقليل الحركة تُلغى عنده كلُّها.
   ══════════════════════════════════════════════════════════════ */

/* القسم ظاهرٌ دائمًا. is-in لا يفكُّ إخفاءً — بل يضيف حركةَ دخول،
   فلو لم يُضَف قطُّ بقي القسم مقروءًا. وno-anim لما كان في الشاشة
   وقت التحميل، فلا يُرى له وميض. */
.js-anim [data-reveal].is-in { animation: promoIn .55s cubic-bezier(.22, 1, .36, 1) both; }
.js-anim [data-reveal].no-anim,
.js-anim [data-reveal].no-anim > .container > * { animation: none !important; }

@keyframes promoIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* الأبناء يتتابعون قليلًا، فيُقرأ القسم لا يظهر دفعةً */
.js-anim [data-reveal].is-in > .container > * { animation: promoRise .5s both; }
.js-anim [data-reveal].is-in > .container > *:nth-child(2) { animation-delay: .06s; }
.js-anim [data-reveal].is-in > .container > *:nth-child(3) { animation-delay: .12s; }
.js-anim [data-reveal].is-in > .container > *:nth-child(4) { animation-delay: .18s; }

@keyframes promoRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* نبضةٌ خفيفةٌ على الزرّ الأول وحده — الباقي ساكن */

@media (prefers-reduced-motion: reduce) {
    .js-anim [data-reveal],
    .js-anim [data-reveal].is-in,
    .js-anim [data-reveal].is-in > .container > * {
        opacity: 1 !important; transform: none !important;
        transition: none !important; animation: none !important;
    }
}

/* ثلاثُ حقائقٍ في المقدّمة: اثنتان على المتوسّط، وثلاثٌ على الكبير */
@media (min-width: 560px) { .promo-three { grid-template-columns: repeat(3, 1fr); } }

/* ══════════════════════════════════════════════════════════════════
   صفحة الإعلان على الشاشة الكبيرة

   كانت مبنيّةً للموبايل وحده: عمودٌ واحدٌ ضيّقٌ يتمدّد في الطول،
   فنصفُ شاشة الكمبيوتر فاضي والصفحة ٥٠٠٠ بكسل. وزائر الكمبيوتر
   بيدفع فيه نفس فلوس النقرة. فهنا طبقةٌ للعرض الكبير: الهيرو
   عمودان، والقوائم صفوف، والصفحة تقصر فتُقرأ لا تُمرَّر.

   وكلُّ ما تحت مكتوبٌ بـmin-width وحده — فالموبايل لا يمسّه شيء.
   ══════════════════════════════════════════════════════════════ */

/* ── بطاقة القرار في الهيرو ──────────────────────────────────────
   ألوانها مكتوبةٌ صريحةً لا بالمتغيّرات: خلفيّةُ الهيرو بنفسجيّةٌ
   غامقةٌ في الوضعين، فبطاقةٌ بيضاء بحرفٍ غامقٍ تقرأ في الاتنين —
   ولو أخذت var(--ink) لطلع في الوضع الغامق حرفٌ فاتحٌ على أبيض. */
.promo-hero-card { display: none; }

@media (min-width: 1000px) {
    /* الميزانيةُ هنا رأسيّة: ترويسةٌ ٦٢ بكسل + هيرو لا يزيد عن نحو
       ٧٤٠، فيبقى الزرُّ وأسطرُه فوق حدِّ أوّل شاشةٍ على لابتوبٍ
       عاديّ (‎~٨٠٠‎). ولذلك كلُّ مقاسٍ تحت أصغرَ من نظيره في
       الموبايل، لا أكبر — والشاشةُ الأعرض تكسب عمودين لا حجمًا. */
    .promo-hero { padding-block: 1.6rem 1.8rem; }
    .promo-hero-inner { max-width: var(--container); }

    .promo-hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
        gap: clamp(1.5rem, 2.6vw, 2.6rem);
        align-items: start;                  /* لا مركز: الكلامُ أطولُ من
                                                البطاقة، فالمركزُ يفتح
                                                فراغًا فوقها وتحتها */
    }
    .promo-hero-copy { min-width: 0; }
    .promo-hero h1 { font-size: clamp(1.8rem, 2.4vw, 2.2rem); line-height: 1.26; margin: .55rem 0 .5rem; }
    .promo-lede { font-size: var(--fs-base); line-height: 1.72; max-width: 50ch; }

    .promo-money {
        margin-block-start: .95rem; padding: .7rem .9rem;
        display: grid; grid-template-columns: auto minmax(0, 1fr);
        gap: .35rem 1rem; align-items: start;
    }
    .promo-money-head { flex-direction: column; gap: .15rem; align-items: flex-start; max-width: 15rem; }
    .promo-money-head strong { font-size: 1rem; }
    .promo-money-head span { font-size: var(--fs-xs); }
    .promo-money-pay {
        margin: 0; padding: 0 1rem 0 0; font-size: var(--fs-xs); line-height: 1.6;
        border-block-start: 0;
        border-inline-start: 1px solid rgba(255, 255, 255, .22);
        padding-inline-start: 1rem; padding-inline-end: 0;
    }

    /* بطاقاتٌ بأيقوناتٍ كانت تأخذ ١٤٠ بكسلًا رأسيًّا وتدفع الزرَّ
       تحت أوّل شاشة. هنا سطرٌ لكلِّ حقيقةٍ بعلامةِ صحّ، والمعلومةُ
       كاملةٌ لم تُحذف — والتفصيلُ في قسم «إيه اللي فيه» بعد قليل. */
    .promo-three { grid-template-columns: 1fr; margin-block-start: .95rem; gap: .4rem; }
    .promo-three li {
        background: none; border: 0; padding: 0;
        display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem;
        font-size: var(--fs-sm); line-height: 1.5;
    }
    .promo-three li::before { content: '✓'; color: var(--accent); font-weight: 900; }
    .promo-three-ic { display: none; }
    .promo-three strong { font-size: var(--fs-sm); }
    .promo-three span { font-size: var(--fs-xs); color: rgba(255, 255, 255, .8); }
    .promo-three span::before { content: '— '; }

    .promo-cta-row { margin-block-start: 1.05rem; }
    .promo-cta-note { font-size: var(--fs-xs); max-width: 40ch; }

    /* ثلاثةُ سطورٍ في صفٍّ واحد — وفَّر نحو ستّين بكسلًا رأسيًّا */
    .promo-hero-meta {
        display: flex; flex-wrap: wrap; align-items: baseline;
        gap: .25rem 1.3rem; margin-block-start: .9rem;
    }
    .promo-hero-meta > p { margin: 0; }

    .promo-hero-card {
        display: block;
        background: #fff; color: #101b35;
        border-radius: var(--radius);
        padding: 1.5rem 1.4rem 1.3rem;
        box-shadow: var(--sh-up);
        position: relative;
    }
    .promo-hc-flag {
        position: absolute; inset-block-start: -.72rem; inset-inline-start: 1.3rem;
        background: var(--accent); color: #101b35;
        border-radius: var(--radius-pill); padding: .22rem .8rem;
        font-size: var(--fs-xs); font-weight: 900;
    }
    .promo-hc-name { margin: .3rem 0 .4rem; font-size: var(--fs-md); font-weight: 800; color: #101b35; }
    .promo-hc-price { display: flex; align-items: baseline; gap: .35rem; }
    .promo-hc-price b { font-size: var(--fs-xxl); font-weight: 900; line-height: 1.05; color: #101b35; }
    .promo-hc-price span { font-size: var(--fs-xs); color: #5c6280; }
    .promo-hc-was { margin: .3rem 0 1rem; font-size: var(--fs-xs); }
    .promo-hc-was s { color: #8a90a8; }
    .promo-hc-was em {
        font-style: normal; font-weight: 800; margin-inline-start: .4rem;
        background: #ffe8e8; color: #b32a3a;
        border-radius: var(--radius-pill); padding: .1rem .5rem;
    }
    .promo-hc-feats {
        list-style: none; margin: 0 0 .9rem; padding: 0;
        display: grid; gap: .36rem;
        border-block-start: 1px solid #e6e8f2; padding-block-start: .8rem;
    }
    .promo-hc-feats li {
        position: relative; padding-inline-start: 1.35rem;
        font-size: var(--fs-sm); line-height: 1.6; color: #3b4160;
    }
    .promo-hc-feats li::before {
        content: '✓'; position: absolute; inset-inline-start: 0;
        color: #1f9d55; font-weight: 900;
    }
    .promo-hc-renewal { margin: .7rem 0 0; font-size: var(--fs-xs); color: #6b7191; text-align: center; }
}

/* ── الخطوات: ثلاثةٌ في صفّ ───────────────────────────────────── */
@media (min-width: 860px) {
    .promo-steps { grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
    .promo-steps li { align-content: start; }
}

/* ── الأسئلة عمودان، فالصفحة تقصر بلا حذف سؤال ────────────────── */
@media (min-width: 900px) {
    .promo-faq { grid-template-columns: 1fr 1fr; gap: .6rem .9rem; align-items: start; }
}

/* ── العناوين تكبر مع الشاشة ──────────────────────────────────── */
@media (min-width: 900px) {
    .promo-section { padding-block: clamp(2.4rem, 4vw, 3.4rem); }
    .promo-section h2 { font-size: clamp(1.5rem, 2.3vw, 1.95rem); margin-block-end: .6rem; }
    .promo-sub { font-size: 1rem; }
    .promo-final h2 { font-size: clamp(1.7rem, 2.8vw, 2.2rem); }
}

/* ══════════════════════════════════════════════════════════════════
   صفحة الإعلان — أقسامُ النسخة الحالية

   الترتيب: مقدّمة ← حدودُ العرض ← نماذج ← خطوات ← خطط ← دورنا
   والدفع ← أدلّة ← أسئلة ← نقل (ثانويّ) ← ختام.

   وما حُذف من هنا حُذف لأن قسمَه حُذف من الصفحة: لا «وجعَ»، ولا
   مؤشّرَ سعرٍ لحظيّ، ولا نبضةَ حول الزرّ. صفحةٌ تبيع بالمنفعة لا
   بالضغط، فزينتُها هادئة.
   ══════════════════════════════════════════════════════════════ */

/* ── المقدّمة: السعر وطريقة الدفع في صندوقٍ واحدٍ يُقرأ أوّلًا ──── */
.promo-money {
    margin: 1.4rem 0 0; padding: .95rem 1.05rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--radius-sm);
    max-width: 46rem;
}
.promo-money-head { margin: 0; display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline; }
.promo-money-head strong { font-size: var(--fs-md); font-weight: 900; color: var(--accent); }
.promo-money-head span { font-size: var(--fs-sm); color: rgba(255, 255, 255, .9); }
.promo-money-pay {
    margin: .5rem 0 0; padding-block-start: .5rem;
    border-block-start: 1px solid rgba(255, 255, 255, .2);
    font-size: var(--fs-xs); line-height: 1.75; color: rgba(255, 255, 255, .84);
}

/* ── نداءان: أساسيٌّ للخطط، وثانويٌّ للمساعدة ─────────────────── */
.promo-cta-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: flex-start; }
.promo-cta-ghost {
    background: rgba(255, 255, 255, .12); color: #fff;
    border: 1px solid rgba(255, 255, 255, .34);
    font-size: var(--fs-sm); font-weight: 700;
    display: inline-flex; align-items: center; gap: .45rem;
}
.promo-cta-ghost:hover { background: rgba(255, 255, 255, .2); color: #fff; }

.promo-hero-meta { margin-block-start: .85rem; }
.promo-hero-link { margin: .7rem 0 0; font-size: var(--fs-sm); }
.promo-hero-link a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* تاريخُ مراجعةٍ حقيقيّ — لا ادّعاءَ تحديثٍ لحظيّ */
.promo-reviewed {
    margin: 1.2rem 0 0; font-size: var(--fs-xs);
    color: rgba(255, 255, 255, .72);
}

/* ── حدودُ العرض: مشمولٌ وغيرُ مشمولٍ جنبَ بعض ─────────────────── */
.promo-scope { background: var(--surface); border-block: 1px solid var(--line-soft); }
.promo-scope-grid { display: grid; gap: 1rem; margin-block-start: 1.1rem; }
@media (min-width: 840px) { .promo-scope-grid { grid-template-columns: 1.15fr .85fr; align-items: start; } }

.promo-scope-card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.15rem 1.2rem;
}
.promo-scope-card h3 { margin: 0 0 .7rem; font-size: var(--fs-base); }
.promo-scope-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.promo-scope-card li {
    position: relative; padding-inline-start: 1.6rem;
    font-size: var(--fs-sm); line-height: 1.75; color: var(--ink-soft);
}
.promo-scope-card li::before {
    position: absolute; inset-inline-start: 0; font-weight: 900;
}
.promo-scope-card.is-in-scope { border-color: color-mix(in srgb, #1f9d55 40%, var(--line)); }
.promo-scope-card.is-in-scope li::before { content: '✓'; color: #1f9d55; }
.promo-scope-card.is-out-scope li::before { content: '—'; color: var(--muted); }
:root[data-theme="dark"] .promo-scope-card.is-in-scope li::before { color: #5ad68f; }
@supports not (border-color: color-mix(in srgb, red 40%, blue)) {
    .promo-scope-card.is-in-scope { border-color: #1f9d55; }
}

.promo-scope-note {
    margin: 1.1rem 0 0; padding: .85rem 1rem;
    background: var(--brand-soft); border-inline-start: 3px solid var(--brand);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    line-height: 1.85; color: var(--ink); max-width: 74ch;
}

/* ── النماذج: روابطُ معاينةٍ فُحصت قبل النشر ───────────────────── */
.promo-smp-grid { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .7rem; }
@media (min-width: 620px)  { .promo-smp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .promo-smp-grid { grid-template-columns: repeat(3, 1fr); } }

.promo-smp-grid a {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    gap: .1rem .6rem;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: .85rem 1rem;
    color: var(--ink);
}
.promo-smp-grid a:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--ink); }
.promo-smp-grid strong { font-size: var(--fs-base); }
.promo-smp-grid a > span:first-of-type { font-size: var(--fs-xs); color: var(--muted); }
.promo-smp-go { grid-row: span 2; color: var(--brand); font-weight: 900; }
.promo-smp-all { margin: 1rem 0 0; font-size: var(--fs-sm); }
.promo-smp-all a { color: var(--brand); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ── سطورُ السعر الكاملة: المقدَّم، والأصل، والتجديد ───────────── */
.promo-terms {
    list-style: none; margin: .3rem 0 .9rem; padding: .7rem .85rem;
    background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    display: grid; gap: .32rem;
    font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-soft);
}
.promo-terms li { display: block; }
.promo-terms-note { display: block; margin-block-start: .1rem; color: var(--muted); font-size: var(--fs-xs); }
.promo-plan-fit { margin: 0 0 .8rem; font-size: var(--fs-sm); font-weight: 700; color: var(--brand); line-height: 1.6; }

/* تعليلُ الترشيح: بجوار الخطط لا في حاشية */
.promo-pick-why {
    margin: 1.2rem 0 0; padding: .9rem 1.05rem;
    background: var(--card); border: 1px dashed var(--accent-line);
    border-radius: var(--radius-sm);
    line-height: 1.85; color: var(--ink-soft); max-width: 78ch;
}

/* ── دورنا والدفع: قسمٌ واحدٌ بدل رسالتين متكرّرتين ────────────── */
.promo-role { background: var(--surface); border-block: 1px solid var(--line-soft); }
.promo-role-grid { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .9rem; }
@media (min-width: 760px)  { .promo-role-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .promo-role-grid { grid-template-columns: repeat(4, 1fr); } }

.promo-role-grid li {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 1.05rem 1rem;
    display: grid; gap: .35rem; align-content: start;
}
/* بطاقةُ الدفع هي أهمّ اعتراضٍ عند جمهورنا، فلها حدٌّ يميّزها */
.promo-role-grid li.is-pay { border-color: rgba(37, 211, 102, .5); background: rgba(37, 211, 102, .06); }
:root[data-theme="dark"] .promo-role-grid li.is-pay { background: rgba(37, 211, 102, .1); }
.promo-role-grid strong { font-size: 1rem; }
.promo-role-grid span { font-size: var(--fs-sm); color: var(--muted); line-height: 1.78; }
.promo-role-cta { margin: 1.3rem 0 0; }

/* ── الأدلّة: منشورٌ عندنا وقابلٌ للفحص ───────────────────────── */
.promo-trust-grid { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .9rem; }
@media (min-width: 760px)  { .promo-trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .promo-trust-grid { grid-template-columns: repeat(4, 1fr); } }

.promo-trust-grid li {
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 1.05rem 1rem; display: grid; gap: .35rem; align-content: start;
}
.promo-trust-grid strong { font-size: var(--fs-base); }
.promo-trust-grid > li > span { font-size: var(--fs-sm); color: var(--muted); line-height: 1.78; }
.promo-trust-grid a {
    margin-block-start: .3rem; font-size: var(--fs-sm); font-weight: 700;
    color: var(--brand); display: inline-flex; align-items: center; gap: .3rem;
}

/* ── النقل: ثانويٌّ قرب النهاية، فبطاقةٌ هادئةٌ بلا زرّ ─────────── */
.promo-move { padding-block: clamp(1.2rem, 3vw, 1.8rem); }
.promo-move-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.1rem 1.2rem;
    max-width: 74ch;
}
.promo-move-card h2 { margin: 0 0 .45rem; font-size: var(--fs-md) !important; }
.promo-move-card p { margin: 0 0 .6rem; font-size: var(--fs-sm); line-height: 1.85; color: var(--ink-soft); }
.promo-move-card a { font-size: var(--fs-sm); font-weight: 700; color: #128c4a; text-decoration: underline; text-underline-offset: 3px; }
:root[data-theme="dark"] .promo-move-card a { color: #6ee7a8; }

/* ── بطاقةُ الهيرو: سطورُ السعر داخلها فاتحةٌ كالبطاقة ─────────── */
@media (min-width: 1000px) {
    .promo-hero-card .promo-terms {
        background: #f4f5fb; border-color: #e3e6f2; color: #40466a;
        margin-block: .7rem .85rem; padding: .6rem .75rem;
    }
    .promo-hero-card .promo-terms-note { color: #6b7191; }
    .promo-hc-why {
        margin: .8rem 0 0; font-size: var(--fs-xs); line-height: 1.7; color: #5c6280;
        border-block-start: 1px solid #e6e8f2; padding-block-start: .7rem;
    }
}

/* ── ملخّصُ تكلفة الطلب ─────────────────────────────────────────
   المقدَّمُ والتجديد قبل الإرسال لا بعده. وكان الملخّصُ يعرض المدّةَ
   بلا رقم، فيُرسل الزائرُ طلبًا لا يعرف قيمته. */
.order-cost {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: .8rem .95rem;
    display: grid; gap: .3rem;
}
.order-cost p { margin: 0; line-height: 1.7; }
.order-cost-total { font-weight: 800; color: var(--ink); }
.order-cost-renewal { font-size: var(--fs-sm); color: var(--ink-soft); }
.order-cost-approx { font-size: var(--fs-xs); color: var(--muted); }

/* ── شريطُ تفضيلات القياس ───────────────────────────────────────
   أسفلَ الشاشة لا في وسطها: نافذةٌ تحجب الصفحة تُقايض الزائرَ بما
   جاء من أجله، والرفضُ هنا لا يعطّل شيئًا فلا يستحقّ حجبًا. */
.consent {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 60;
    padding: .7rem;
    pointer-events: none;
}
.consent-box {
    pointer-events: auto;
    max-width: 44rem; margin-inline: auto;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: .95rem 1.05rem;
    box-shadow: var(--sh-up);
    display: grid; gap: .45rem;
}
.consent-title { margin: 0; font-weight: 800; font-size: var(--fs-base); }
.consent-text { margin: 0; font-size: var(--fs-sm); line-height: 1.75; color: var(--ink-soft); }
.consent-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-block-start: .25rem; }
.consent-note { margin: 0; font-size: var(--fs-xs); line-height: 1.7; color: var(--muted); }

/* الشريطُ الثابت في صفحة الإعلان يقع أسفلَ الشاشة أيضًا،
   فيُرفع شريطُ الموافقة فوقه كي لا يغطّي أحدُهما الآخر. */
@media (max-width: 860px) {
    body.is-promo .consent { inset-block-end: 4.6rem; }
}

/* شريطُ المقارنة السفليّ يظهر ديناميكيًّا فوق أيِّ اختيارٍ، وارتفاعُه
   يتغيّر بعدد الشرائح والعرض — فيُرفع كلُّ عنصرٍ ثابتٍ آخر بارتفاعه
   الفعليّ المقاس بجافاسكربت (‎--compare-bar-h‎)، لا برقمٍ مخمَّن، كي
   لا يتقاطع مع موافقة الكوكيز ولا زرّ واتساب الطافي على الجوّال
   وعرض سطح المكتب الضيّق. */
body.has-compare-bar .consent { inset-block-end: var(--compare-bar-h, 0px); }
body.has-compare-bar .fab-corner { inset-block-end: calc(var(--compare-bar-h, 0px) + 20px); }
@media (max-width: 560px) {
    body.has-compare-bar .fab-corner { inset-block-end: calc(var(--compare-bar-h, 0px) + 16px); }
}
/* الحالةُ النادرة: صفحةُ إعلانٍ فيها اختيارُ مقارنةٍ أيضًا — يُرفَع فوق الشريطين معًا */
@media (max-width: 860px) {
    body.is-promo.has-compare-bar .consent { inset-block-end: calc(4.6rem + var(--compare-bar-h, 0px)); }
}

/* ── تعريفُ الكاتب تحت المقالة ─────────────────────────────────── */
.author-box {
    margin-block: 2rem 0;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.1rem 1.2rem;
    display: grid; gap: .35rem;
}
.author-box-eyebrow { margin: 0; font-size: var(--fs-xs); font-weight: 700; color: var(--brand); }
.author-box-name { margin: 0; font-size: var(--fs-base); font-weight: 800; }
.author-box-bio { margin: 0; font-size: var(--fs-base); line-height: 1.85; color: var(--ink-soft); max-width: 72ch; }
.author-box-links {
    list-style: none; margin: .5rem 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .3rem .9rem;
    font-size: var(--fs-sm);
}
.author-box-links a { color: var(--brand); font-weight: 700; }

/* ── خلاصةُ قرارٍ في صفحة الشركة ──────────────────────────────── */
.decide {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.15rem 1.25rem;
    margin-block-end: 1.4rem; display: grid; gap: .7rem;
}
.decide-title { margin: 0; font-size: var(--fs-md); font-weight: 900; }
.decide-grid { margin: 0; display: grid; gap: .7rem; }
@media (min-width: 640px) { .decide-grid { grid-template-columns: repeat(3, 1fr); } }
.decide-grid > div {
    background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm); padding: .7rem .8rem;
}
.decide-grid dt { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; }
.decide-grid dd { margin: .15rem 0 0; display: grid; gap: .05rem; }
.decide-grid dd strong { font-size: var(--fs-md); font-weight: 900; font-variant-numeric: tabular-nums; }
.decide-grid dd span { font-size: var(--fs-xs); color: var(--muted); }
.decide-fit, .decide-limit { margin: 0; font-size: var(--fs-sm); line-height: 1.85; color: var(--ink-soft); max-width: 78ch; }
.decide-label { font-weight: 800; color: var(--ink); }
.decide-more { margin: .2rem 0 0; font-size: var(--fs-sm); }
.decide-more a { color: var(--brand); font-weight: 700; }

/* ── شروطُ الكوبونات ووحدةُ الوفر ─────────────────────────────── */
.coupons-terms {
    margin: .2rem 0 1rem; font-size: var(--fs-sm); line-height: 1.8;
    color: var(--muted); max-width: 80ch;
}

/* ── ملاحظةُ العملة في المقارنة ───────────────────────────────── */
.currency-note {
    margin: 0 0 .8rem; display: flex; flex-wrap: wrap; gap: .3rem .7rem;
    align-items: baseline; font-size: var(--fs-sm); color: var(--muted);
}
.currency-note .currency-switch {
    color: var(--brand); font-weight: 700;
    text-decoration: underline; text-underline-offset: 3px;
}

/* ── بانرٌ من جدول البانرات ─────────────────────────────────────
   الأبعادُ على الوسم لا في CSS وحدها: المتصفّحُ يحجز المكانَ قبل
   وصول الصورة فلا يقفز المحتوى تحتها. */
.banner-link { display: block; line-height: 0; }
.banner-link img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.banner-embed { margin-inline: auto; }
.banner-embed iframe, .banner-embed img { max-width: 100%; }

/* شريط الشركات الموثوقة */

/* ── شريط الشركات الموثوقة ──────────────────────────────────────── */
.trust-bar {
    background: var(--card); border-block-end: 1px solid var(--line);
    padding-block: 1.15rem;
}
.trust-inner { display: flex; align-items: center; gap: .9rem 1.4rem; flex-wrap: wrap; }

.trust-label {
    font-size: var(--fs-xs); color: var(--muted); font-weight: 700;
    white-space: nowrap; flex: none;
    display: inline-flex; align-items: center; gap: .5rem;
}
/* خط قصير يفصل العنوان عن الشعارات بدل النقطتين وحدهما */
.trust-label::after {
    content: ''; width: 26px; height: 1px; background: var(--line); flex: none;
}

/* التوزيع: space-evenly يملأ عرض الشريط بدل تكدّس الشعارات
   في طرف واحد. والالتفاف بدل overflow:hidden لأن القصّ كان
   يُخفي شعارات كاملة على الشاشات الضيقة. */
.trust-track {
    flex: 1 1 300px;
    display: flex; align-items: center; justify-content: space-evenly;
    flex-wrap: wrap; gap: .35rem .5rem;
}

.trust-track a {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .45rem .75rem; border-radius: 12px;
    color: var(--ink-soft); font-weight: 700; white-space: nowrap; font-size: var(--fs-sm);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.trust-track a:hover {
    background: var(--surface); color: var(--brand);
    transform: translateY(-2px); box-shadow: var(--shadow-sm);
}

/* بألوانها الأصلية: كان grayscale(1) وopacity .6 يطمسان هوية كل
   شركة — والشعارات تحمل لون علامتها داخل الـSVG أصلًا. */
.trust-track img {
    max-height: 30px; max-width: 130px; width: auto; object-fit: contain;
    transition: transform .2s ease;
}
.trust-track a:hover img { transform: scale(1.06); }

@media (max-width: 640px) {
    .trust-inner { justify-content: center; }
    .trust-label { width: 100%; justify-content: center; }
    .trust-label::after { display: none; }
    .trust-track { justify-content: center; gap: .3rem .4rem; }
    .trust-track img { max-height: 26px; max-width: 104px; }
}

/* ══════════════════════════════════════════════════════════════
   بطاقة العرض — بأسلوب صفحة الأسعار في التصميم المرجعي
   ══════════════════════════════════════════════════════════════ */

/* ── بطاقة العرض (الخطة) ────────────────────────────────────────── */
.deal-grid {
    display: grid; gap: 1.2rem;
    grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
    align-items: stretch;
}

.deal-card {
    position: relative; display: flex; flex-direction: column; text-align: center;
    background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: var(--radius); padding: 1.6rem 1.2rem 1.2rem;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.deal-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line); }

/* البطاقة المميزة: خلفية كريمية وإطار أصفر كما في التصميم */
.deal-card.is-highlighted {
    background: var(--accent-soft); border: 2px solid var(--accent-line);
    box-shadow: var(--sh-up);
}
.deal-card.is-highlighted:hover { box-shadow: var(--sh-up); }

.deal-ribbon {
    position: absolute; inset-block-start: -13px; inset-inline-start: 50%;
    transform: translateX(-50%);
    background: var(--accent); color: var(--on-accent);
    font-size: var(--fs-xs); font-weight: 800; padding: .26rem .8rem;
    border-radius: var(--radius-pill); white-space: nowrap;
    box-shadow: var(--sh-up);
}
[dir="rtl"] .deal-ribbon { transform: translateX(50%); }

/* ترتيب الخطة في قسم «أكثر الخطط شراءً» — الطرف المقابل لمربع المقارنة */
.deal-rank {
    position: absolute; inset-block-start: .7rem; inset-inline-end: .7rem;
    min-width: 30px; height: 30px; padding-inline: .3rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-soft); color: var(--brand);
    border-radius: var(--radius-pill); font-weight: 800; font-size: var(--fs-xs);
    letter-spacing: -.02em;
    /* «#1» يجب أن تُقرأ هكذا في الاتجاهين. لا نستخدم direction: ltr هنا
       لأنها تقلب معنى inset-inline-end فتصطدم الشارة بمربع المقارنة في RTL. */
    unicode-bidi: plaintext;
}
.deal-card.is-highlighted .deal-rank { background: rgba(255, 255, 255, .75); }

.deal-head { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-block-end: .7rem; }
.deal-company { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 700; }
.deal-company img { max-height: 26px; max-width: 118px; width: auto; object-fit: contain; }
.company-initial {
    width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand); font-weight: 800; flex: none;
}
.company-initial.lg { width: 60px; height: 60px; font-size: var(--fs-xl); border-radius: 16px; }
.deal-type {
    font-size: var(--fs-xs); font-weight: 800; color: var(--muted);
    letter-spacing: .08em; text-transform: uppercase;
}

.deal-name { font-size: var(--fs-md); margin-block-end: .8rem; letter-spacing: -.01em; }

.deal-price { display: flex; align-items: baseline; justify-content: center; gap: .3rem; }
.price-now { font-size: var(--fs-xxl); font-weight: 800; color: var(--ink); letter-spacing: -.035em; line-height: 1.1; }
.price-unit { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }

.deal-meta {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    flex-wrap: wrap; margin-block: .4rem .95rem; min-height: 26px;
}
.price-was { font-size: var(--fs-sm); color: var(--muted); text-decoration: line-through; }
.discount-badge {
    background: var(--success-soft); color: var(--success);
    font-size: var(--fs-xs); font-weight: 800; padding: .16rem .55rem; border-radius: 8px;
}
.deal-terms { display: flex; flex-wrap: wrap; gap: .32rem; justify-content: center; margin-block-end: 1rem; }
.term-pill {
    border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
    padding: .28rem .68rem; border-radius: var(--radius-pill);
    font-size: var(--fs-xs); font-weight: 700; cursor: pointer; font-family: inherit;
    transition: .16s;
}
.term-pill:hover { border-color: var(--brand); color: var(--brand); }
.term-pill.is-active { background: var(--ink); border-color: var(--ink); color: var(--card); }
.deal-card.is-highlighted .term-pill.is-active { background: var(--brand-fill); border-color: var(--brand-fill); }
.deal-single-term { font-size: var(--fs-xs); color: var(--muted); margin-block-end: .9rem; }
/* الإجمالي المدفوع مقدمًا — أبرز من سعر التجديد لأنه ما يخرج من الجيب الآن */
.deal-total {
    display: inline-block; margin: .1rem auto .35rem;
    background: var(--brand-soft); color: var(--brand);
    font-size: var(--fs-xs); font-weight: 800;
    padding: .3rem .7rem; border-radius: var(--radius-pill);
}

/* سعر التجديد — يُقال بوضوح لا بخجل، لكنه لا يزاحم السعر الترويجي */
.deal-renewal {
    font-size: var(--fs-xs); color: var(--muted); font-weight: 600;
    margin: -.35rem 0 .7rem;
}

.deal-features {
    display: grid; gap: .55rem; margin-block-end: 1.3rem;
    font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.5;
}
.deal-features li { padding-block: .05rem; }

.deal-actions { display: grid; gap: .5rem; margin-block-start: auto; }
.btn-coupon {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    border: 1px dashed var(--brand); background: rgba(61, 40, 221, .05); color: var(--brand-dark);
    border-radius: var(--radius-pill); padding: .5rem .8rem; cursor: pointer;
    font-family: inherit; transition: .16s; line-height: 1.3;
}
.btn-coupon:hover { background: rgba(61, 40, 221, .1); }
.btn-coupon.is-copied { border-style: solid; border-color: var(--success); background: var(--success-soft); color: var(--success); }
.coupon-code { font-weight: 800; font-size: var(--fs-sm); letter-spacing: .06em; }
.coupon-action { font-size: var(--fs-xs); opacity: .75; font-weight: 700; }
.no-coupon { font-size: var(--fs-xs); color: var(--muted); padding-block: .3rem; }

.btn-buy {
    background: var(--card); color: var(--ink); border: 1.5px solid var(--ink);
    border-radius: var(--radius-pill); padding: .7rem 1.2rem; font-weight: 800; font-size: var(--fs-base);
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    transition: .18s;
}
.btn-buy:hover { background: var(--ink); color: var(--card); transform: translateY(-1px); }
.deal-card.is-highlighted .btn-buy {
    background: var(--accent); border-color: var(--accent); color: var(--on-accent);
    box-shadow: var(--sh-up);
}
.deal-card.is-highlighted .btn-buy:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--on-accent); }

.deal-order-link {
    display: block; text-align: center; margin-block-start: .8rem;
    font-size: var(--fs-xs); color: var(--muted); font-weight: 600;
}
.deal-order-link:hover { color: var(--brand); }

/* ── بطاقات الأنواع ─────────────────────────────────────────── */
.type-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.type-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.4rem 1rem; text-align: center; color: var(--ink);
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    box-shadow: var(--shadow-sm); transition: .2s;
}
.type-card:hover { color: var(--brand-dark); border-color: var(--brand); transform: translateY(-4px); box-shadow: var(--shadow); }
.type-icon {
    width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand); margin-block-end: .35rem; transition: .2s;
}
.type-card:hover .type-icon { background: var(--brand-fill); color: var(--on-fill); transform: rotate(-6deg) scale(1.05); }
.type-name { font-weight: 700; }
.type-count { font-size: var(--fs-xs); color: var(--muted); }

/* ── بطاقات الشركات ─────────────────────────────
   البطاقة كلها رابط أفلييت؛ ويفلت منها زر «تصفّح الخطط» وحده.

   ثلاثة قرارات تصميمية تستحق الشرح:
   · الشعار أكبر عنصر في الترويسة — هو أسرع ما يتعرّف عليه الزائر،
     والاسم المكتوب يأتي ثانيًا لا أوّلًا.
   · لون الشركة يُحسّ لا يُخمّن: غسلة أقوى + شريط علوي صريح،
     فالبطاقات كانت تبدو متشابهة من بعيد.
   · السعر هو معلومة القرار، فلا يزاحمه عدد الخطط في الحجم —
     العدد صار رقاقة جانبية لا كتلة موازية.
   ──────────────────────────────────────────────────────── */
.company-grid { display: grid; gap: 1.35rem; grid-template-columns: repeat(auto-fill, minmax(284px, 1fr)); }

.company-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
    color: var(--ink); box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; position: relative; overflow: hidden;
    transition: transform .28s cubic-bezier(.2, .8, .25, 1), box-shadow .28s ease, border-color .28s ease;
}
/* شريط بلون الشركة يميّزها من طرف الشاشة */
.company-card::before {
    content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px;
    background: var(--accent); z-index: 3; transition: height .28s ease;
}
.company-card:hover {
    transform: translateY(-8px); border-color: transparent; color: var(--ink);
    box-shadow: var(--sh-up);
}
.company-card:hover::before { height: 6px; }
.company-card:focus-within { border-color: transparent; box-shadow: var(--sh); }

/* لمعة تعبر البطاقة عند المرور */
.company-shine { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.company-shine::before {
    content: ''; position: absolute; inset-block: -60%; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-18deg) translateX(-260%);
    transition: transform .75s ease;
}
.company-card:hover .company-shine::before { transform: skewX(-18deg) translateX(340%); }
:root[data-theme="dark"] .company-shine::before {
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .14), transparent);
}

/* ── الترويسة الملوّنة ── */
.company-card-top { position: relative; height: 112px; flex: none; }
/* اللون عبر طبقة شفافة لا color-mix: يعمل في كل المتصفحات
   مهما كان لون الشركة. رفعتُ الشدة من .16 لأن الأولى كانت
   تكاد لا تُرى فتتشابه البطاقات. */
.company-wash {
    position: absolute; inset: 0;
    background: linear-gradient(145deg, var(--accent) 0%, transparent 72%);
    background-size: 160% 160%;
    opacity: .26; transition: opacity .28s ease;
    animation: wash-drift 14s ease-in-out infinite;
}
@keyframes wash-drift {
    0%, 100% { background-position: 0% 0%; }
    50%      { background-position: 100% 60%; }
}
.company-card:hover .company-wash { opacity: .42; }
.company-card-top::after {
    content: ''; position: absolute; inset-block-end: 0; inset-inline: 0; height: 1px;
    background: var(--line-soft);
}

/* الشعار أكبر وأوضح — هو مفتاح التعرّف على الشركة */
.company-logo {
    position: absolute; inset-block-end: -28px; inset-inline-start: 1.35rem;
    /* عرض مرن لا ثابت: شعارات الشركات نسبها مختلفة جدًا (هوستنجر 3.5:1)،
       واللوحة الثابتة كانت تحصر العريض منها بالعرض فيُرسم بنصف الارتفاع
       المتاح. الآن تحتضن اللوحة كل شعار بنسبته الطبيعية. */
    min-width: 104px; max-width: 184px; height: 78px;
    padding: .55rem .95rem; border-radius: var(--r-lg);
    background: var(--card); border: 1px solid var(--line);
    box-shadow: var(--sh-up);
    display: grid; place-items: center; z-index: 2;
    transition: transform .28s cubic-bezier(.2, .8, .25, 1), box-shadow .28s ease;
}
.company-card:hover .company-logo {
    transform: translateY(-5px) scale(1.05);
    box-shadow: var(--sh-up);
}
.company-logo img { max-height: 44px; max-width: 158px; width: auto; object-fit: contain; }
.company-logo .company-initial { width: 48px; height: 48px; border-radius: var(--r); font-size: var(--fs-lg); }

/* تقييم تحريري في ركن الترويسة */
.company-score {
    position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem;
    display: inline-flex; align-items: center; gap: .25rem;
    background: var(--card); border: 1px solid var(--line);
    color: var(--ink); font-weight: 800; font-size: var(--fs-xs);
    padding: .24rem .6rem; border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm); z-index: 2;
}
.company-score svg { color: var(--accent-dark); }

/* شركة بلا خطط بعد: حالة مقصودة لا عطل */
.company-soon-flag {
    position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; z-index: 2;
    background: var(--surface); border: 1px dashed var(--line);
    color: var(--muted); font-weight: 700; font-size: var(--fs-xs);
    padding: .22rem .6rem; border-radius: var(--radius-pill);
}

/* ── الجسم ── */
.company-card-body { padding: 2.6rem 1.35rem 1.3rem; display: flex; flex-direction: column; flex: 1; }

.company-name { margin: 0; font-size: var(--fs-lg); letter-spacing: -.015em; }
.company-link { color: inherit; text-decoration: none; }
.company-card:hover .company-link,
.company-card:focus-within .company-link { color: var(--brand); }
/* الطبقة الممتدة تجعل الضغط على أي جزء من البطاقة يفتح رابط الأفلييت */
.company-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.company-link:focus-visible { outline: none; }

.company-desc {
    font-size: var(--fs-sm); color: var(--muted); margin: .4rem 0 0; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.dot { opacity: .5; margin-inline: .25rem; }

.company-tags { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: .85rem 0 0; padding: 0; }
.company-tags li {
    font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft);
    background: var(--surface); border: 1px solid var(--line-soft);
    padding: .2rem .55rem; border-radius: var(--radius-pill);
    transition: border-color .28s ease;
}
.company-card:hover .company-tags li { border-color: var(--line); }

/* مزايا الشركة — تُحرّر من اللوحة، ميزة في كل سطر */
.company-features {
    list-style: none; margin: .85rem 0 0; padding: 0;
    display: grid; gap: .38rem;
    font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.45;
}
.company-features li { display: flex; align-items: flex-start; gap: .4rem; }
.company-features svg { color: var(--success); flex: none; margin-block-start: .18rem; }

/* لوحة السعر: السعر بطل المشهد والعدد رقاقة جانبية */
.company-figures {
    display: flex; align-items: center; justify-content: space-between; gap: .7rem;
    margin-block-start: 1.05rem; padding: .85rem 1rem;
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r);
    transition: border-color .28s ease;
}
.company-card:hover .company-figures { border-color: var(--accent); }
.company-figure-label {
    display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
    letter-spacing: .04em; margin-block-end: .15rem;
}
.company-price { display: flex; align-items: baseline; gap: .28rem; }
.company-price b { font-size: var(--fs-xl); font-weight: 800; color: var(--brand); letter-spacing: -.035em; line-height: 1; }
.company-price small { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.company-count-chip {
    flex: none; font-size: var(--fs-xs); font-weight: 800; color: var(--ink-soft);
    background: var(--card); border: 1px solid var(--line);
    padding: .3rem .6rem; border-radius: var(--radius-pill); white-space: nowrap;
}
.company-soon-note { margin: 0; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }

/* ── الأزرار ── */
.company-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-block-start: auto; padding-block-start: 1rem; }
.company-actions .btn { flex: 1 1 auto; justify-content: center; }

/* «احصل على الخصم» عنصر زخرفي: الضغط يصله عبر طبقة البطاقة نفسها،
   فلا نضاعف نقاط الوقوف بالمفتاح على وجهة واحدة مكرّرة. */
.company-visit {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: .35rem;
}
.company-visit::after {
    content: ''; position: absolute; inset-block: -60%; width: 38%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .4), transparent);
    transform: skewX(-18deg) translateX(-260%);
    transition: transform .75s ease .1s;
}
.company-card:hover .company-visit::after { transform: skewX(-18deg) translateX(340%); }
.company-card:hover .company-visit { background: #2647d6; box-shadow: var(--sh-up); }
.company-visit .cta-arrow { transition: transform .22s ease; }
[dir="rtl"] .company-visit .cta-arrow { transform: scaleX(-1); }
.company-card:hover .company-visit .cta-arrow { transform: translateX(4px); }
[dir="rtl"] .company-card:hover .company-visit .cta-arrow { transform: scaleX(-1) translateX(4px); }

/* الزر الوحيد الذي يفلت من طبقة البطاقة — وجهته داخلية */
.company-plans-btn { position: relative; z-index: 2; }
.company-plans-btn:hover { border-color: var(--brand); color: var(--brand); }

/* البطاقة المؤجلة تخفت قليلًا فلا تزاحم الشركات الجاهزة */
.company-card.is-soon .company-wash { opacity: .14; }
.company-card.is-soon:hover .company-wash { opacity: .24; }

/* ── ترويسة صفحة الشركة ─────────────────────────────────────── */
.company-hero {
    background: linear-gradient(150deg, var(--navy), var(--navy-2));
    color: #fff; padding-block: clamp(2.2rem, 5vw, 3.2rem);
    border-block-end: 4px solid var(--accent);
}
.company-hero-inner { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.company-hero-logo {
    background: var(--card); border-radius: var(--r-lg); padding: .9rem 1.2rem; min-width: 100px;
    display: grid; place-items: center; box-shadow: var(--shadow);
}
.company-hero-logo img { max-height: 48px; width: auto; }
.company-hero-text { flex: 1 1 320px; }
.company-hero-text h1 { color: #fff; margin-block-end: .35rem; }
.company-hero-text p { color: #c7d0e4; margin-block-end: .9rem; max-width: 70ch; }
.company-hero-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip {
    display: inline-flex; align-items: center; gap: .3rem;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
    color: #fff; border-radius: var(--radius-pill); padding: .3rem .85rem; font-size: var(--fs-xs); font-weight: 700;
}
.chip-link:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ── التبويبات ──────────────────────────────────────────────── */
.tab-list {
    display: flex; gap: .4rem; overflow-x: auto; padding-block-end: .6rem;
    margin-block-end: 1.5rem; border-block-end: 1px solid var(--line);
    scrollbar-width: thin;
}
.tab {
    display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-pill);
    padding: .5rem 1rem; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-soft); cursor: pointer;
    transition: .16s; font-family: inherit;
}
.tab:hover { border-color: var(--brand); color: var(--brand); }
.tab.is-active { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-fill); }
.tab-count {
    background: rgba(11, 14, 28, .07); border-radius: var(--radius-pill); padding: 0 .45rem;
    font-size: var(--fs-xs); font-weight: 800;
}
.tab.is-active .tab-count { background: rgba(255, 255, 255, .25); }

/* ── الفلاتر ────────────────────────────────────────────────── */
.filters {
    display: grid; gap: .8rem; background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.2rem; box-shadow: var(--shadow-sm);
    grid-template-columns: 1fr;
}
.filter-field { display: flex; flex-direction: column; gap: .3rem; }
.filter-field label { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); }
.filter-actions { display: flex; gap: .5rem; align-items: flex-end; }
.results-count { color: var(--muted); font-size: var(--fs-sm); margin-block: 1.2rem .9rem; }

@media (min-width: 700px)  { .filters { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .filters { grid-template-columns: repeat(5, 1fr); } }

/* ── النماذج ────────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="url"], input[type="tel"], input[type="date"], input[type="datetime-local"],
input[type="search"], input[type="color"], select, textarea {
    width: 100%; padding: .62rem .8rem; font-family: inherit; font-size: var(--fs-base);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--card); color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--brand); box-shadow: var(--sh);
}
textarea { resize: vertical; min-height: 90px; line-height: 1.7; }
select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7185' d='M6 8.4 1.8 4.2l.9-.9L6 6.6l3.3-3.3.9.9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left .7rem center;
    background-size: 12px;
    padding-inline-end: .8rem; padding-inline-start: 2rem;
}
[dir="ltr"] select { background-position: right .7rem center; padding-inline-start: .8rem; padding-inline-end: 2rem; }
.hero-quick .quick-field select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8.4 1.8 4.2l.9-.9L6 6.6l3.3-3.3.9.9z'/%3E%3C/svg%3E");
    background-position: left .55rem center; background-size: 11px;
    padding-inline-start: 1.7rem; padding-inline-end: .55rem;
}
[dir="ltr"] .hero-quick .quick-field select {
    background-position: right .55rem center;
    padding-inline-start: .55rem; padding-inline-end: 1.7rem;
}
input[type="color"] { padding: .2rem; height: 42px; }

.card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: clamp(1.2rem, 3vw, 1.8rem); box-shadow: var(--shadow-sm);
}
.field { margin-block-end: 1.1rem; }
.field > label, .field > .label { display: block; font-weight: 700; font-size: var(--fs-sm); margin-block-end: .35rem; }
.field-hint { display: block; font-size: var(--fs-xs); color: var(--muted); margin-block-start: .3rem; }
.field-error { display: block; font-size: var(--fs-xs); color: var(--danger); margin-block-start: .3rem; font-weight: 600; }
.field-sep { border: 0; border-block-start: 1px solid var(--line); margin-block: 1.5rem; }
.form-note { font-size: var(--fs-xs); color: var(--muted); text-align: center; margin-block-start: .9rem; margin-block-end: 0; }
.hp-field { position: absolute; inset-inline-start: -9999px; opacity: 0; height: 0; overflow: hidden; }

.radio-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.radio-pill { position: relative; }
.radio-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio-pill span {
    display: inline-flex; padding: .5rem 1rem; border: 1px solid var(--line);
    border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 600; background: var(--card); cursor: pointer;
    transition: .16s;
}
.radio-pill input:checked + span { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-fill); }
.radio-pill input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

.alert { border-radius: var(--radius-sm); padding: .9rem 1rem; margin-block-end: 1.2rem; font-size: var(--fs-sm); }
.alert ul { margin: .4rem 0 0; padding-inline-start: 1.1rem; list-style: disc; }
.alert-error   { background: var(--danger-soft); color: #991b1b; border: 1px solid #fecaca; }
.alert-success { background: var(--success-soft); color: #065f46; border: 1px solid #a7f3d0; }
.alert-info    { background: var(--brand-soft); color: var(--brand-dark); border: 1px solid #d5cffc; }

/* ── صفحة اطلب لي ───────────────────────────────────────────── */
.order-layout { display: grid; gap: 1.3rem; }
@media (min-width: 940px) { .order-layout { grid-template-columns: 1.4fr .8fr; align-items: start; } }
.steps { display: grid; gap: 1.1rem; }
.steps li { display: flex; gap: .85rem; }
.steps p { margin: .15rem 0 0; font-size: var(--fs-sm); color: var(--muted); }
.step-num {
    width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: var(--brand-fill); color: var(--on-fill); font-weight: 800; font-size: var(--fs-sm);
}

.success-card { text-align: center; }
.success-icon {
    width: 70px; height: 70px; border-radius: 50%; margin: 0 auto 1rem;
    background: var(--success-soft); color: var(--success); display: grid; place-items: center;
    animation: pop-in .4s ease;
}
.ref-number {
    font-size: var(--fs-lg); font-weight: 800; color: var(--brand);
    background: var(--brand-soft); display: inline-block; padding: .3rem 1.2rem;
    border-radius: var(--radius-pill); margin-block: .3rem 1.2rem;
}
.success-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* ── تواصل / من نحن ─────────────────────────────────────────── */
.contact-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-block-end: 1.2rem; }
.contact-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem;
    display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center;
    color: var(--ink); box-shadow: var(--shadow-sm); transition: .2s;
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: var(--brand-dark); border-color: var(--brand); }
.contact-icon {
    width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand); margin-block-end: .3rem;
}
.contact-label { font-weight: 700; }
.contact-value { font-size: var(--fs-sm); color: var(--muted); word-break: break-all; }
.contact-social { margin-block-end: 1.2rem; }
.contact-social h2 { font-size: var(--fs-md); }
.footer-links.inline { display: flex; gap: 1rem; flex-wrap: wrap; }

.prose { line-height: 2; color: var(--ink-soft); }
.logo-strip {
    display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; justify-content: center;
    padding: 1.4rem; margin-block: 1.2rem;
}
.logo-strip img { max-height: 32px; width: auto; object-fit: contain; transition: transform .2s ease; }
.logo-strip a:hover img { transform: scale(1.06); }
.logo-strip span { color: var(--muted); font-weight: 700; }

/* ── شريط الدعوة ────────────────────────────────────────────── */
.cta-band {
    background: linear-gradient(120deg, var(--brand-fill), var(--brand-light));
    color: #fff; padding-block: clamp(2rem, 4vw, 2.8rem); position: relative; overflow: hidden;
}
.cta-band::before {
    content: ''; position: absolute; inset-block-start: -50%; inset-inline-start: -5%;
    width: 340px; height: 340px; border-radius: 50%;
    background: radial-gradient(circle, rgba(120, 220, 232, .35), transparent 65%);
}
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; position: relative; }
.cta-band h2 { color: #fff; margin-block-end: .2rem; }
.cta-band p { color: rgba(255, 255, 255, .9); margin: 0; }
.cta-inline {
    border-radius: var(--radius); padding: 1.6rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* ── قسم «نشتري لك» ─────────────────────────────────────────────
   قسم داكن كامل العرض يقطع تسلسل الأقسام الفاتحة عمدًا: الزائر الذي
   لا يعرف ماذا يختار يجب أن تلفته الخدمة قبل أن يغرق في الأسعار.
   ─────────────────────────────────────────────────────────────── */
.concierge {
    position: relative; overflow: hidden; isolation: isolate;
    background: linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 70%, #2647d6 100%);
    color: #fff; padding-block: clamp(2.8rem, 6vw, 4.4rem);
}
.concierge-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.concierge-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.concierge-blob-1 { width: 420px; height: 420px; inset-block-start: -170px; inset-inline-start: -110px; background: rgba(49, 91, 250, .8); }
.concierge-blob-2 { width: 360px; height: 360px; inset-block-end: -160px; inset-inline-end: -90px; background: rgba(120, 220, 232, .32); }
.concierge-grid {
    position: absolute; inset: 0; opacity: .14;
    background-image: linear-gradient(rgba(255, 255, 255, .35) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, .35) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(circle at 50% 40%, #000, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 72%);
}

.concierge-inner { display: grid; gap: clamp(1.6rem, 4vw, 3rem); grid-template-columns: 1.15fr .85fr; align-items: center; }
.concierge-text h2 { color: #fff; font-size: clamp(1.6rem, 3.6vw, 2.35rem); margin-block-end: .6rem; line-height: 1.25; }
.concierge-text h2 .accent-word {
    background: linear-gradient(120deg, #fff 30%, var(--accent) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    white-space: nowrap;
}
.concierge-sub { color: #c7d0e4; font-size: clamp(.98rem, 2.2vw, 1.08rem); max-width: 52ch; margin-block-end: 1.4rem; }
.concierge-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.concierge-actions .btn { display: inline-flex; align-items: center; gap: .45rem; }

.concierge-perks {
    display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; list-style: none;
    margin: 1.3rem 0 0; padding: 0; font-size: var(--fs-sm); color: #d5dbf5;
}
.concierge-perks li { display: inline-flex; align-items: center; gap: .38rem; }
.concierge-perks svg { color: var(--accent); flex: none; }

/* بطاقة الخطوات — زجاجية فوق التدرّج */
.concierge-panel {
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius); padding: 1.5rem 1.4rem;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.concierge-panel-head {
    color: #fff; font-size: var(--fs-base); margin: 0 0 1.1rem;
    padding-block-end: .8rem; border-block-end: 1px solid rgba(255, 255, 255, .16);
}
.concierge-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; counter-reset: none; }
.concierge-steps li { display: flex; align-items: flex-start; gap: .8rem; }
.concierge-num {
    flex: none; width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 800; font-size: var(--fs-sm);
    background: var(--accent); color: var(--on-accent);
}
.concierge-steps strong { display: block; color: #fff; font-size: var(--fs-base); margin-block-end: .15rem; }
.concierge-steps p { margin: 0; font-size: var(--fs-sm); color: #bcc4e6; line-height: 1.6; }

@media (max-width: 860px) {
    .concierge-inner { grid-template-columns: 1fr; }
}

/* ── التذييل ────────────────────────────────────────────────── */
.site-footer { background: #101b35; color: #c3c9dc; padding-block: 2.8rem 0; }
.footer-grid { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.footer-col h3 { color: #fff; font-size: var(--fs-base); margin-block-end: .8rem; }
.footer-brand { color: #fff; margin-block-end: .7rem; }
.footer-brand .brand-text { color: #fff; }
.footer-about { font-size: var(--fs-sm); color: #8d94ad; }
.footer-links { display: grid; gap: .45rem; font-size: var(--fs-sm); }
.footer-links a { color: #c3c9dc; }
.footer-links a:hover { color: var(--accent); }
.socials { display: flex; gap: .5rem; margin-block-start: 1rem; }
.socials a {
    width: 36px; height: 36px; border-radius: var(--r); display: grid; place-items: center;
    background: rgba(255, 255, 255, .07); color: #c3c9dc; transition: .2s;
}
.socials a:hover { background: var(--accent); color: var(--on-accent); transform: translateY(-2px); }
.disclosure {
    font-size: var(--fs-xs); color: #7c839c; border-block-start: 1px solid rgba(255, 255, 255, .09);
    margin-block: 1.9rem 0; padding-block-start: 1.1rem;
}
.footer-bottom {
    border-block-start: 1px solid rgba(255, 255, 255, .07); margin-block-start: 1.4rem;
    padding-block: 1.1rem; font-size: var(--fs-xs); color: #7c839c;
}
/* سطران: الحقوق ونسبة البرمجة. على الشاشة العريضة طرفان متباعدان،
   وعلى الجوال سطران متوسّطان — الفصل بينهما أوضح من لفّهما في سطر. */
.footer-bottom-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem 1.2rem; flex-wrap: wrap;
}
.footer-credit { display: inline-flex; align-items: center; gap: .35rem; }
.footer-credit a {
    display: inline-flex; align-items: center; gap: .3rem;
    color: #c3c9dc; font-weight: 700;
    border-block-end: 1px solid rgba(255, 255, 255, .22); padding-block-end: 1px;
    transition: color .18s ease, border-color .18s ease;
}
.footer-credit a:hover { color: #25d366; border-color: #25d366; }
.footer-credit a svg { flex: none; color: #25d366; }

/* ── التذييل على الجوال: توسيط كامل ─────────────────────────── */
@media (max-width: 720px) {
    /* عمود واحد متوسّط: أعمدة نصفية على شاشة ضيّقة تُقرأ مبعثرة */
    .footer-grid { grid-template-columns: 1fr; gap: 1.6rem; text-align: center; }
    .footer-col-brand { display: flex; flex-direction: column; align-items: center; }
    .footer-brand { justify-content: center; }
    .footer-about { max-width: 42ch; margin-inline: auto; }
    .socials { justify-content: center; }

    /* الروابط تبقى قائمةً متوسّطة لا صفًّا متلاصقًا — أسهل للإصبع */
    .footer-links { justify-items: center; gap: .55rem; }

    .disclosure { text-align: center; }
    .footer-bottom-inner { flex-direction: column; justify-content: center; text-align: center; gap: .5rem; }
}

/* ── النافذة المنبثقة ───────────────────────────────────────── */
.popup-overlay {
    position: fixed; inset: 0; z-index: 200; background: rgba(11, 14, 28, .65);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
    backdrop-filter: blur(4px); animation: fade-in .2s ease;
}
.popup-overlay[hidden] { display: none; }
.popup-box {
    position: relative; background: var(--card); border-radius: var(--r-lg); max-width: 430px; width: 100%;
    overflow: hidden; box-shadow: var(--shadow-lg); animation: pop-in .28s ease;
    max-height: 92vh; overflow-y: auto;
}
.popup-close {
    /* أعلى الجهة المقابلة لبداية النص: يسارًا في العربية، يمينًا في
       الإنجليزية — فلا يجلس فوق أول ما تقرؤه العين. */
    position: absolute; inset-block-start: .55rem; inset-inline-end: .6rem; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
    font-size: var(--fs-lg); line-height: 1;
}
.popup-close:hover { background: var(--surface); color: var(--ink); }
.popup-image { width: 100%; max-height: 180px; object-fit: cover; }
.popup-body { padding: 2rem 1.5rem 1.4rem; text-align: center; }

/* شارة العرض */
.popup-badge {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: var(--fs-xs); font-weight: 700; color: var(--brand);
    background: var(--brand-soft); border-radius: var(--radius-pill);
    padding: .3rem .85rem; margin-block-end: .9rem;
}
.popup-badge i {
    width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none;
}

.popup-body h2 {
    font-size: var(--fs-lg); line-height: 1.5; margin: 0 0 1.1rem;
    text-wrap: balance;
}

/* بطاقة الخصم — تذكرةٌ بقصّتين في جانبيها */
.popup-ticket {
    position: relative; background: var(--brand-fill, var(--brand)); color: #fff;
    border-radius: 16px; padding: 1.15rem 1.35rem;
    display: flex; align-items: center; gap: 1.1rem; text-align: start;
    margin-block-end: 1.1rem; overflow: hidden;
}
.popup-ticket::before, .popup-ticket::after {
    content: ''; position: absolute; inset-block-start: 50%;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--card); transform: translateY(-50%);
}
.popup-ticket::before { inset-inline-start: -10px; }
.popup-ticket::after  { inset-inline-end: -10px; }

.popup-ticket-main { flex: none; }
.popup-ticket-main strong {
    display: block; font-size: var(--fs-xxl); font-weight: 900; line-height: 1;
    letter-spacing: -.02em;
}
.popup-ticket-main span { display: block; font-size: var(--fs-xs); opacity: .88; margin-block-start: .2rem; }

.popup-ticket-bonus {
    margin: 0; font-size: var(--fs-xs); line-height: 1.6; color: #fff; opacity: .95;
    border-inline-start: 1px solid rgba(255, 255, 255, .35);
    padding-inline-start: 1.1rem;
}
/* بلا ميزةٍ إضافية: الرقم وحده في الوسط */
.popup-ticket.is-solo { justify-content: center; text-align: center; }
.popup-ticket.is-solo .popup-ticket-main strong { font-size: var(--fs-xxl); }

.popup-note {
    color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.75;
    margin: 0 0 .85rem;
}

/* كود الخصم — يُنسخ بضغطة */
.popup-coupon {
    display: flex; align-items: stretch; width: 100%; cursor: pointer;
    border: 2px dashed var(--line); border-radius: var(--r); overflow: hidden;
    background: var(--surface); padding: 0; margin-block-end: .8rem;
    transition: border-color .18s ease;
}
.popup-coupon:hover { border-color: var(--brand); }
/* زرّ النسخ في الطرف البعيد عن بداية القراءة، والكود في وسط البطاقة
   — كما في التصميم المرجعيّ الذي طلبه صاحب الموقع. */
.popup-coupon-do {
    display: inline-flex; align-items: center; gap: .35rem; flex: none;
    padding: .8rem .9rem; font-size: var(--fs-xs); font-weight: 700;
    color: var(--ink-soft); border-inline-start: 2px dashed var(--line);
    order: 2;
}
.popup-coupon-code {
    order: 1; flex: 1;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-base); font-weight: 900; letter-spacing: .12em;
    color: var(--ink); padding: .8rem .5rem;
}
.popup-coupon.is-copied { border-color: var(--success); }
.popup-coupon.is-copied .popup-coupon-do { color: var(--success); border-color: var(--success); }

.popup-cta {
    width: 100%; justify-content: center; gap: .5rem;
    font-size: 1rem; padding-block: .85rem;
}

.popup-wa {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; margin-block-start: .6rem; padding: .75rem 1rem;
    border: 1px solid var(--success); border-radius: var(--radius-sm);
    color: var(--success); font-size: var(--fs-sm); font-weight: 700;
    transition: background .18s ease;
}
.popup-wa:hover { background: var(--success-soft); color: var(--success); }

.popup-dismiss {
    display: block; margin: .9rem auto 0; padding: .2rem .4rem;
    background: none; border: 0; cursor: pointer;
    color: var(--muted); font-size: var(--fs-xs); text-decoration: underline;
    font-family: inherit;
}
.popup-dismiss:hover { color: var(--ink-soft); }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }

/* ── إشعار عابر ─────────────────────────────────────────────── */
.toast {
    position: fixed; inset-block-end: 22px; inset-inline-start: 50%; transform: translate(-50%, 20px);
    background: var(--ink); color: var(--card); padding: .75rem 1.3rem; border-radius: var(--radius-pill);
    font-size: var(--fs-sm); font-weight: 700; box-shadow: var(--shadow-lg);
    opacity: 0; pointer-events: none; transition: .25s ease; z-index: 300; max-width: 90vw;
}
[dir="rtl"] .toast { transform: translate(50%, 20px); }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
[dir="rtl"] .toast.is-visible { transform: translate(50%, 0); }

/* ── صفحة الخطأ ─────────────────────────────────────────────── */
.error-card { text-align: center; padding-block: 2.8rem; }
.error-code { font-size: var(--fs-xxl); font-weight: 900; color: var(--brand); opacity: .2; line-height: 1; }
.error-card h1 { margin-block: .4rem .5rem; }
.error-card p { color: var(--muted); }

/* ── نجوم التقييم ───────────────────────────────────────────── */
.rating { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fs-sm); }
.rating-stars {
    position: relative; display: inline-block; width: 88px; height: 16px; flex: none;
    /* خمس نجوم رمادية كخلفية، ونجوم ملوّنة فوقها بعرض يساوي النسبة */
    background: currentColor;
    color: var(--line);
    -webkit-mask: repeat-x left center/17.6px 16px var(--star-mask);
    mask: repeat-x left center/17.6px 16px var(--star-mask);
    --star-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 1.6l2.5 5.1 5.6.8-4 3.9 1 5.6L10 14.4 4.9 17l1-5.6-4-3.9 5.6-.8z"/></svg>');
}
.rating-stars-fill {
    position: absolute; inset-block: 0; inset-inline-start: 0;
    background: var(--accent-dark);
}
[dir="rtl"] .rating-stars {
    -webkit-mask-position: right center;
    mask-position: right center;
}
.rating-value { font-weight: 800; }
.rating-scale, .rating-by { color: var(--muted); font-size: var(--fs-xs); }
.rating-compact { font-size: var(--fs-xs); margin-block: .1rem .3rem; }
.rating-compact .rating-stars { width: 74px; height: 13px; -webkit-mask-size: 14.8px 13px; mask-size: 14.8px 13px; }
.rating-note { color: rgba(255, 255, 255, .82); font-size: var(--fs-sm); margin-block: .4rem 0; }
.company-hero .rating-scale, .company-hero .rating-by { color: rgba(255, 255, 255, .7); }
.company-hero .rating-stars { color: rgba(255, 255, 255, .28); }

/* ── روابط التواصل في الترويسة ──────────────────────────────── */
/* زرّ الدعوة في الترويسة: لمعة تمرّ مرة واحدة عند المرور */
.header-inner .btn-primary { position: relative; overflow: hidden; }
.header-inner .btn-primary::after {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: translateX(-180%) skewX(-18deg); pointer-events: none;
}
.header-inner .btn-primary:hover::after { animation: brand-sheen .8s ease-out; }

.header-socials { display: flex; gap: .15rem; align-items: center; }
.header-socials a {
    display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: 50%; color: var(--muted); transition: color .15s ease, background .15s ease;
}
.header-socials a {
    transition: color .18s ease, background .18s ease, transform .22s cubic-bezier(.22, 1, .36, 1);
}
/* لونُ العلامة نفسها عند المرور، ولون الموقع لمن لا لون له.
   والخلفيةُ تُشتقّ من اللون نفسه بشفافيةٍ خفيفة عبر color-mix، فلا
   يلزم لكلّ علامةٍ لونُ خلفيةٍ ثانٍ يُكتب بيد. */
.header-socials a:hover {
    color: var(--sc, var(--brand));
    background: color-mix(in srgb, var(--sc, var(--brand)) 12%, transparent);
    transform: translateY(-2px);
}
@supports not (background: color-mix(in srgb, red 12%, transparent)) {
    .header-socials a:hover { background: var(--brand-soft); }
}
@media (max-width: 939px) {
    .header-socials { margin-block-start: .2rem; }
}

/* ── زر الاستشارة العائم ────────────────────────────────────── */
.wa-fab {
    position: relative;
    display: inline-flex; align-items: center; gap: .55rem;
    background: #25d366; color: #06301a; font-weight: 800; font-size: var(--fs-sm);
    padding: .7rem .95rem; border-radius: var(--radius-pill);
    box-shadow: var(--sh-up);
    transition: transform .2s ease, box-shadow .2s ease;
}
.wa-fab:hover { color: #06301a; transform: translateY(-2px); box-shadow: var(--sh-up); }
.wa-fab svg { flex: none; }
/* نبضة خفيفة تلفت الانتباه دون إزعاج، وتحترم تقليل الحركة */
.wa-fab::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    border: 2px solid #25d366; animation: wa-pulse 2.6s ease-out infinite;
}
@keyframes wa-pulse {
    0%   { transform: scale(1);    opacity: .7; }
    70%  { transform: scale(1.28); opacity: 0; }
    100% { transform: scale(1.28); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .wa-fab::before { animation: none; opacity: 0; } }

/* على الجوال يتقلّص لأيقونة فقط كي لا يحجب المحتوى */
@media (max-width: 560px) {
    .wa-fab { padding: .8rem; }
    .wa-fab-text { display: none; }
}
/* يرتفع فوق شريط المقارنة عند ظهوره */
body:has(.compare-bar:not([hidden])) .wa-fab { inset-block-end: 92px; }

/* ── الطلب عبر واتساب ───────────────────────────────────────── */
.or-divider {
    display: flex; align-items: center; gap: .8rem; margin-block: 1rem;
    color: var(--muted); font-size: var(--fs-xs);
}
.or-divider::before, .or-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--line);
}
.btn-whatsapp {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    background: #25d366; color: #06301a; font-weight: 800;
    border: 1px solid #1fb457;
}
.btn-whatsapp:hover { background: #1fbe5b; color: #06301a; }

/* ── المدونة ────────────────────────────────────────────────── */
.article-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

/* في الرئيسية ثلاث بطاقات في صفّ واحد دائمًا. auto-fill يضع أربعًا على
   الشاشات العريضة فيبقى مكان فارغ، وثلاثًا فقط عندنا. */
@media (min-width: 980px) {
    .article-grid-home { grid-template-columns: repeat(3, 1fr); }
}
.article-card {
    display: flex; flex-direction: column; background: var(--card);
    border: 1px solid var(--line-soft); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
}
.article-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.article-cover { display: block; aspect-ratio: 16 / 9; background: var(--surface); overflow: hidden; }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-cover-fallback {
    display: grid; place-items: center; width: 100%; height: 100%;
    font-size: var(--fs-xxl); font-weight: 800; color: var(--brand);
    background: linear-gradient(135deg, var(--brand-soft), var(--card));
}
.article-body { padding: 1.1rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.article-date { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.article-body h2 { font-size: var(--fs-md); margin: 0; }
.article-body h2 a { color: var(--ink); }
.article-body h2 a:hover { color: var(--brand); }
.article-body p { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); flex: 1; }
.article-more { font-size: var(--fs-sm); font-weight: 700; }

.crumbs { display: flex; gap: .4rem; align-items: center; font-size: var(--fs-xs); color: var(--muted); margin-block-end: .6rem; flex-wrap: wrap; }
.article-meta { color: var(--muted); font-size: var(--fs-sm); }
.article-hero { width: 100%; border-radius: var(--radius); margin-block-end: 1.3rem; }
.article-lead { font-size: var(--fs-base); color: var(--ink-soft); font-weight: 600; margin-block-end: 1.2rem; }
.article-content h2 { font-size: var(--fs-lg); margin-block: 1.6rem .6rem; }
.article-content h3 { font-size: var(--fs-md); margin-block: 1.2rem .5rem; }
.article-content p { margin-block: 0 1rem; }
.article-content ul, .article-content ol { margin-block: 0 1rem; padding-inline-start: 1.4rem; }
.article-content li { margin-block-end: .35rem; }
.article-content blockquote {
    margin: 0 0 1rem; padding: .7rem 1rem; color: var(--ink-soft);
    background: var(--surface); border-inline-start: 3px solid var(--brand); border-radius: var(--radius-sm);
}
.article-content a { text-decoration: underline; }
.article-disclosure { font-size: var(--fs-xs); color: var(--muted); margin-block: 1rem 1.6rem; }
.related-title { margin-block: 2rem .8rem; font-size: var(--fs-md); }
.related-list { display: grid; gap: .5rem; }
.related-item {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
    padding: .8rem 1rem; color: var(--ink);
}
.related-item:hover { border-color: var(--brand); color: var(--brand); }
.related-item small { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }

.pagination { display: flex; gap: .3rem; justify-content: center; margin-block-start: 1.8rem; flex-wrap: wrap; }
.pagination a {
    min-width: 38px; text-align: center; padding: .4rem .7rem; border-radius: var(--radius-sm);
    border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); font-weight: 700; font-size: var(--fs-sm);
}
.pagination a:hover { border-color: var(--brand); color: var(--brand); }
.pagination a.is-active { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-fill); }

/* ── صفحة أكواد الخصم ───────────────────────────────────────── */
.chip-filters { display: flex; gap: .45rem; flex-wrap: wrap; margin-block-end: 1.2rem; }
.chip-filter {
    border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
    border-radius: var(--radius-pill); padding: .35rem .9rem; font-size: var(--fs-sm); font-weight: 600;
}
.chip-filter:hover { border-color: var(--brand); color: var(--brand); }
.chip-filter.is-active { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-fill); }

/* ── أكواد الخصم: صف أفقي لكل كود ───────────────────────────── */
.coupon-list { display: grid; gap: .75rem; }

.coupon-row {
    display: grid;
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) auto auto;
    align-items: center; gap: .9rem 1.4rem;
    background: var(--card); border: 1px solid var(--line-soft);
    /* حافة بلون الشركة: تفصل الصفوف بصريًا وتُعرّف بالمزوّد قبل قراءة اسمه */
    border-inline-start: 4px solid var(--accent, var(--brand));
    border-radius: var(--radius); padding: 1rem 1.3rem;
    box-shadow: var(--shadow-sm);
    transition: border-color .18s ease, box-shadow .18s ease;
}
/* الصفّ لا يقفز عند المرور — الحركة الرأسية تُربك المسح بين صفوف متجاورة */
.coupon-row:hover { box-shadow: var(--shadow); border-color: var(--line); }

.coupon-company { display: flex; align-items: center; gap: .7rem; min-width: 0; color: var(--ink); }
.coupon-company:hover .coupon-brand { color: var(--brand); }
.coupon-logo {
    width: 46px; height: 46px; flex: none; display: grid; place-items: center;
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px;
}
.coupon-logo img { max-width: 32px; max-height: 26px; width: auto; height: auto; object-fit: contain; }
.coupon-logo .company-initial { font-weight: 800; color: var(--brand); font-size: var(--fs-md); }
.coupon-brand {
    font-size: var(--fs-sm); font-weight: 700; transition: color .15s ease;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.coupon-main { min-width: 0; }
.coupon-plan { font-size: var(--fs-base); line-height: 1.45; margin: 0 0 .3rem; }
.coupon-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
    color: var(--muted); font-size: var(--fs-xs); margin: 0;
}
.coupon-off {
    background: var(--success-soft); color: var(--success);
    font-size: var(--fs-xs); font-weight: 800; padding: .16rem .6rem;
    border-radius: var(--radius-pill);
}

.coupon-price { text-align: center; white-space: nowrap; }
.coupon-price strong { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.02em; }
.coupon-price span { font-size: var(--fs-xs); color: var(--muted); }
.coupon-price small { display: block; font-size: var(--fs-xs); color: var(--success); font-weight: 700; }

.coupon-actions { display: flex; align-items: center; gap: .7rem; }
.coupon-reveal {
    display: flex; align-items: center; gap: .6rem;
    cursor: pointer; font-family: inherit; font-size: var(--fs-sm);
    background: var(--accent-soft); border: 1px dashed var(--accent-line);
    border-radius: var(--radius-sm); padding: .5rem .85rem; color: var(--ink);
    transition: background .18s ease, border-color .18s ease;
}
.coupon-reveal:hover { background: #fff6d6; border-color: var(--accent-dark); }
.coupon-reveal.is-copied {
    background: var(--success-soft); border-style: solid; border-color: var(--success);
}
.coupon-reveal.is-copied .coupon-code,
.coupon-reveal.is-copied .coupon-action { color: var(--success); }
.coupon-reveal .coupon-code { font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.coupon-reveal .coupon-action { font-size: var(--fs-xs); font-weight: 700; color: var(--brand); white-space: nowrap; }
.coupon-link { font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }

/* شاشة متوسطة: الشركة والخطة في سطر، والسعر والكود في السطر التالي */
@media (max-width: 1020px) {
    .coupon-row { grid-template-columns: auto minmax(0, 1fr); }
    .coupon-price { grid-column: 1; text-align: start; }
    .coupon-actions { grid-column: 2; justify-content: flex-end; }
}

@media (max-width: 620px) {
    .coupon-row { grid-template-columns: minmax(0, 1fr); gap: .8rem; padding: 1rem; }
    .coupon-price, .coupon-actions { grid-column: 1; }
    .coupon-price { text-align: start; }
    .coupon-actions { flex-direction: column; align-items: stretch; gap: .5rem; }
    .coupon-reveal { justify-content: space-between; width: 100%; }
    .coupon-link { text-align: center; }
}

/* ── اختيار الخطط للمقارنة ──────────────────────────────────── */
.deal-compare {
    position: absolute; inset-block-start: .7rem; inset-inline-start: .7rem;
    display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
    font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft);
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius-pill); padding: .18rem .55rem .18rem .38rem;
    opacity: 0; transition: opacity .18s ease, color .18s ease, border-color .18s ease;
}
.deal-card:hover .deal-compare,
.deal-compare:focus-within,
.deal-compare:has(input:checked) { opacity: 1; }
.deal-compare:has(input:checked) { color: var(--brand); border-color: var(--brand); }
.deal-compare input { width: 15px; height: 15px; accent-color: var(--brand); margin: 0; cursor: pointer; }
@media (hover: none) { .deal-compare { opacity: 1; } }

.compare-bar {
    position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 250;
    background: var(--card); border-block-start: 1px solid var(--line);
    box-shadow: var(--sh-up); padding-block: .7rem;
    animation: slide-up .25s ease;
}
.compare-bar-inner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: space-between; }
.compare-picks { display: flex; gap: .4rem; flex-wrap: wrap; flex: 1; min-width: 200px; }
.compare-chip {
    display: inline-flex; align-items: center; gap: .35rem; max-width: 240px;
    background: var(--brand-soft); color: var(--brand-dark); border-radius: var(--radius-pill);
    padding: .25rem .35rem .25rem .7rem; font-size: var(--fs-xs); font-weight: 700;
}
.compare-chip > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-chip-x {
    border: 0; background: rgba(61, 40, 221, .12); color: inherit; cursor: pointer;
    width: 20px; height: 20px; border-radius: 50%; line-height: 1; font-size: 1rem; flex: none;
}
.compare-chip-x:hover { background: rgba(61, 40, 221, .25); }
.compare-bar-actions { display: flex; gap: .5rem; align-items: center; }
/* مساحة أسفل الصفحة حتى لا يغطي الشريط آخر بطاقة */
body:has(.compare-bar:not([hidden])) { padding-block-end: 84px; }
.btn.is-disabled { opacity: .45; pointer-events: none; }
@keyframes slide-up { from { transform: translateY(100%); } to { transform: none; } }

/* ── جدول المقارنة جنبًا إلى جنب ────────────────────────────── */
.table-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-block-end: 1rem; }
.compare-scroll { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow-sm); background: var(--card); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare-table th, .compare-table td {
    padding: .85rem 1rem; text-align: center; vertical-align: top;
    border-block-end: 1px solid var(--line-soft);
}
.compare-table .row-head {
    text-align: start; font-weight: 700; font-size: var(--fs-sm); color: var(--muted);
    background: var(--surface); white-space: nowrap;
    position: sticky; inset-inline-start: 0; z-index: 1;
}
.compare-table thead th { background: var(--surface); border-block-end: 2px solid var(--line); }
.cmp-company { display: flex; flex-direction: column; align-items: center; gap: .3rem; font-size: var(--fs-xs); color: var(--muted); }
.cmp-company img { height: 26px; width: auto; object-fit: contain; }
.cmp-plan-name { display: block; margin-block-start: .35rem; font-size: 1rem; color: var(--ink); }
.cmp-price { display: block; font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.02em; }
.cmp-unit { display: block; font-size: var(--fs-xs); color: var(--muted); }
.cmp-off {
    display: inline-block; margin-block-start: .3rem; font-size: var(--fs-xs); font-weight: 700;
    color: var(--success); background: var(--success-soft); border-radius: var(--radius-pill); padding: .1rem .5rem;
}
.cmp-flag {
    display: block; margin-block-start: .35rem; font-size: var(--fs-xs); font-weight: 800;
    color: var(--brand); text-transform: uppercase; letter-spacing: .04em;
}
.compare-table td.is-best { background: var(--brand-soft); }
.compare-table td.is-missing { color: var(--muted); font-size: var(--fs-sm); }
.cmp-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-sm);
    background: var(--accent-soft); border: 1px dashed var(--accent-line);
    border-radius: var(--radius-sm); padding: .15rem .5rem;
}
.cmp-features-cell { text-align: start; }
.cmp-features { margin: 0; padding-inline-start: 1.1rem; font-size: var(--fs-sm); color: var(--ink-soft); }
.cmp-features li { margin-block-end: .25rem; }
.cmp-order-link { display: block; margin-block-start: .5rem; font-size: var(--fs-xs); color: var(--muted); }
.compare-table tfoot td { border-block-end: 0; }

/* ── الأسئلة الشائعة ────────────────────────────────────────── */
.faq-list { display: grid; gap: .7rem; max-width: 860px; margin-inline: auto; }
.faq-item {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: .2rem 1.1rem; box-shadow: var(--shadow-sm);
}
.faq-item summary {
    cursor: pointer; font-weight: 700; padding-block: .9rem; list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+'; font-size: var(--fs-lg); font-weight: 700; color: var(--brand);
    line-height: 1; transition: transform .2s ease; flex: none;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item p { margin: 0; padding-block-end: 1rem; color: var(--ink-soft); font-size: var(--fs-base); }
@media print {
    .site-header, .site-footer, .ticker, .popup-overlay, .deal-actions, .hero-bg { display: none !important; }
}

/* ── عناصر المقالة المنسّقة ─────────────────────────────────── */
.article-content h1 { font-size: var(--fs-xl); margin-block: 1.8rem .6rem; }
.article-content h4 { font-size: 1rem; margin-block: 1.1rem .4rem; }
.article-content h5,
.article-content h6 { font-size: var(--fs-base); margin-block: 1rem .35rem; color: var(--ink-soft); }
.article-content del { color: var(--muted); }
.article-content hr { border: 0; border-block-start: 1px solid var(--line); margin-block: 1.8rem; }
.article-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88em; background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: var(--r-sm); padding: .1em .35em;
}
.rt-code {
    background: var(--ink); color: #eef2fa; border-radius: var(--radius-sm);
    padding: 1rem 1.1rem; overflow-x: auto; direction: ltr; text-align: start;
    font-size: var(--fs-sm); line-height: 1.7; margin-block: 0 1.2rem;
}
.rt-code code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }

.rt-figure { margin: 0 0 1.4rem; }
.rt-figure img { width: 100%; height: auto; border-radius: var(--radius); }
.rt-figure figcaption {
    margin-block-start: .5rem; font-size: var(--fs-xs); color: var(--muted); text-align: center;
}
.rt-inline-img { display: inline-block; vertical-align: middle; max-height: 1.4em; width: auto; }

.rt-video {
    position: relative; aspect-ratio: 16 / 9; margin-block-end: 1.4rem;
    border-radius: var(--radius); overflow: hidden; background: var(--ink);
}
.rt-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.rt-table-wrap { overflow-x: auto; margin-block-end: 1.4rem; }
.rt-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 380px; }
.rt-table th, .rt-table td {
    padding: .6rem .8rem; text-align: start; border: 1px solid var(--line);
}
.rt-table th { background: var(--surface); font-weight: 700; }
.rt-table tbody tr:nth-child(even) { background: var(--surface); }

/* ── أدوات المدونة ──────────────────────────────────────────── */
.blog-toolbar {
    display: flex; gap: .8rem; align-items: center; justify-content: space-between;
    flex-wrap: wrap; margin-block-end: 1rem;
}
.blog-search { display: flex; gap: .4rem; flex: 1; min-width: 240px; max-width: 460px; }
.blog-search input { flex: 1; }
.blog-rss {
    display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); font-weight: 700;
    color: #e8681a; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: .35rem .8rem;
}
.blog-rss:hover { border-color: #e8681a; color: #e8681a; }
.chip-count {
    display: inline-block; margin-inline-start: .3rem; font-size: var(--fs-xs);
    opacity: .7; font-variant-numeric: tabular-nums;
}

.article-cover { position: relative; }
.article-pin {
    position: absolute; inset-block-start: .6rem; inset-inline-start: .6rem;
    background: var(--accent); color: var(--on-accent);
    font-size: var(--fs-xs); font-weight: 800; padding: .18rem .6rem; border-radius: var(--radius-pill);
}
.article-meta-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.article-cat {
    font-size: var(--fs-xs); font-weight: 700; color: var(--brand);
    background: var(--brand-soft); border-radius: var(--radius-pill); padding: .12rem .55rem;
}
.article-cat:hover { background: var(--brand-fill); color: var(--on-fill); }
.popular-block { margin-block-start: 2.5rem; }

/* ── فهرس محتويات المقال ────────────────────────────────────── */
.toc {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1rem 1.2rem; margin-block-end: 1.6rem;
}
.toc-title { font-size: var(--fs-base); margin: 0 0 .5rem; }
.toc ol { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: .25rem; }
.toc li { font-size: var(--fs-sm); }
.toc .toc-l3 { padding-inline-start: .9rem; font-size: var(--fs-sm); }
.toc a { color: var(--ink-soft); }
.toc a:hover { color: var(--brand); text-decoration: underline; }

/* عناوين المقال تُزاح عن الترويسة اللاصقة عند القفز إليها */
.article-content h2, .article-content h3, .article-content h4 { scroll-margin-block-start: 90px; }

/* ── مشاركة المقال ──────────────────────────────────────────── */
.share {
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
    padding-block: 1.2rem; margin-block: 1.4rem;
    border-block: 1px solid var(--line);
}
.share-label { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.share-links { display: flex; gap: .4rem; flex-wrap: wrap; }
.share-btn {
    display: inline-grid; place-items: center; width: 36px; height: 36px;
    border-radius: 50%; border: 1px solid var(--line); background: var(--card);
    color: var(--ink-soft); cursor: pointer; transition: .16s;
}
.share-btn:hover { transform: translateY(-2px); color: #fff; }
.share-whatsapp:hover { background: #25d366; border-color: #25d366; }
.share-x:hover        { background: #101b35; border-color: #101b35; }
.share-facebook:hover { background: #1877f2; border-color: #1877f2; }
.share-telegram:hover { background: #229ed9; border-color: #229ed9; }
.share-copy:hover     { background: var(--brand-fill); border-color: var(--brand-fill); }

/* ── التنقّل بين المقالات ───────────────────────────────────── */
.article-nav { display: grid; gap: .6rem; margin-block: 1.8rem; }
@media (min-width: 700px) { .article-nav { grid-template-columns: 1fr 1fr; } }
.article-nav-item {
    display: grid; gap: .2rem; padding: .9rem 1.1rem; color: var(--ink);
    background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius);
}
.article-nav-item:hover { border-color: var(--brand); color: var(--brand); }
.article-nav-item small { font-size: var(--fs-xs); color: var(--muted); }
.article-nav-item strong { font-size: var(--fs-sm); line-height: 1.4; }
.article-nav-item.is-next { text-align: end; }

/* ── شريط وضع المعاينة ──────────────────────────────────────── */
.preview-banner {
    background: var(--accent); color: var(--on-accent);
    padding-block: .6rem; font-size: var(--fs-sm); position: sticky; top: 0; z-index: 100;
}
.preview-banner .container { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

/* ── تصحيحات تباين ──────────────────────────────────────────── */

/* الفتات داخل الترويسة الملوّنة: ألوانه كانت مصمّمة لخلفية فاتحة
   فصار تباينه ~3 على البنفسجي. هنا نجبره على ألوان فاتحة. */
.page-head .crumbs { color: rgba(255, 255, 255, .75); }
.page-head .crumbs a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.page-head .crumbs a:hover { color: var(--accent); }
.page-head .crumbs span[aria-hidden] { color: rgba(255, 255, 255, .45); }

/* خيارات القائمة المنسدلة يرسمها النظام: بلا خلفية صريحة تظهر
   بيضاء والنص فاتح فيختفي في الوضع الليلي. */
select option,
select optgroup {
    background-color: var(--card);
    color: var(--ink);
}

/* ══════════════════════════════════════════════════════════════════
   صفحتا «من نحن» و«تواصل معنا»
   ══════════════════════════════════════════════════════════════════ */

.about-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.6rem; align-items: start; }
.about-layout.is-wide { grid-template-columns: minmax(0, 1fr); max-width: 820px; margin-inline: auto; }
.about-main { display: grid; gap: 1.2rem; }
.about-side { display: grid; gap: 1rem; position: sticky; top: 90px; }
.about-image {
    width: 100%; border-radius: var(--radius); display: block;
    box-shadow: var(--shadow); object-fit: cover;
}

.mission-card { border-inline-start: 4px solid var(--brand); }
.mission-card p { margin: 0; font-size: var(--fs-base); line-height: 1.9; color: var(--ink-soft); }
.policy-card { border: 1px dashed var(--line); }
.policy-card .prose { margin-block-start: .5rem; }

.page-stats {
    list-style: none; margin: 0; padding: 1.2rem;
    display: grid; gap: 1rem;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.page-stats li { text-align: center; }
.page-stats strong { display: block; font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; color: var(--brand); line-height: 1.2; }
.page-stats span { color: var(--muted); font-size: var(--fs-xs); }
.page-stats-row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); padding: 1.6rem; }

.value-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.value-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.4rem; box-shadow: var(--shadow-sm); transition: .2s;
}
.value-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand); }
.value-card h3 { margin: .6rem 0 .35rem; font-size: var(--fs-base); }
.value-card p { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.8; }
.value-num {
    width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand); font-weight: 800; font-size: var(--fs-base);
}

.steps-cards li {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm); align-items: flex-start;
}

.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.6rem; align-items: start; }
.contact-main { display: grid; gap: 1.2rem; }
.contact-aside { display: grid; gap: 1rem; position: sticky; top: 90px; }
.contact-form-card h2 { margin-block-end: .25rem; font-size: var(--fs-lg); }
.contact-form-card form { margin-block-start: 1.2rem; }
.form-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.contact-facts dl { margin: 0; display: grid; gap: .1rem; }
.contact-facts dl > div { padding-block: .7rem; border-block-end: 1px solid var(--line); }
.contact-facts dl > div:last-child { border-block-end: 0; padding-block-end: 0; }
.contact-facts dt { color: var(--muted); font-size: var(--fs-xs); margin-block-end: .2rem; }
.contact-facts dd { margin: 0; font-weight: 600; }

.social-list { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .35rem; }
.social-list a {
    display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem;
    border-radius: var(--r-sm); color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 600; transition: .15s;
}
.social-list a:hover { background: var(--brand-soft); color: var(--brand-dark); }

.cta-aside { text-align: center; }
.cta-aside h2 { font-size: var(--fs-md); margin-block-end: .35rem; }
.cta-aside p { color: var(--muted); font-size: var(--fs-sm); margin-block-end: 1rem; }

.contact-map {
    margin-block-start: 1.6rem; border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--line); box-shadow: var(--shadow-sm); line-height: 0;
}
.contact-map iframe { width: 100%; height: 340px; border: 0; }

@media (max-width: 900px) {
    .about-layout,
    .contact-layout { grid-template-columns: minmax(0, 1fr); }
    .about-side,
    .contact-aside { position: static; }
}

/* ── ركن الفقاعات: واتساب والمساعد معًا ─────────────────────── */

/* فقاعتان مستقلّتان كانتا تتزاحمان على الجوال وتغطّيان زرّ الشراء،
   فصار الركن واحدًا يرصّهما فوق بعضهما. */
.fab-corner {
    position: fixed; inset-block-end: 20px; inset-inline-start: 20px; z-index: 240;
    display: flex; flex-direction: column; align-items: flex-start; gap: .6rem;
}
.fab-stack { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }

@keyframes ai-dots { 0% { opacity: .2; } 50% { opacity: 1; } 100% { opacity: .2; } }

@media (max-width: 560px) {
    .fab-corner { inset-block-end: 16px; inset-inline-start: 16px; inset-inline-end: 16px; }
    
}

/* ── تبديل الشعار بين النهاري والليلي ───────────────────────── */

/* الصورتان تُرسَلان معًا لأن الوضع يقرّره المتصفح بعد التحميل.
   وحين لا يوجد شعار ليلي لا تُطبع صورته أصلًا، فيظهر النهاري في
   الوضعين — لا تخلو الترويسة أبدًا. */
.brand-logo-dark { display: none; }
:root[data-theme="dark"] .brand-logo-light { display: none; }
:root[data-theme="dark"] .brand-logo-dark  { display: block; }

/* ── صفحة الطلب: الترويسة والخطوات ──────────────────────────── */
.order-hero {
    background: linear-gradient(135deg, #2647d6, var(--brand-light));
    color: #fff; padding-block: 2.6rem 2.2rem; margin-block-end: -1.2rem;
}
.order-hero h1 { margin: .4rem 0 .5rem; }
.order-hero > .container > p { margin: 0; opacity: .9; max-inline-size: 60ch; }
.order-perks {
    list-style: none; margin: 1.1rem 0 0; padding: 0;
    display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: var(--fs-sm);
}
.order-perks li { display: flex; align-items: center; gap: .35rem; opacity: .95; }

.order-form { display: grid; gap: 1.1rem; }
.order-step {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.3rem; box-shadow: var(--shadow-sm);
}
.order-step-head { display: flex; gap: .8rem; align-items: flex-start; margin-block-end: 1.1rem; }
.order-step-head h2 { margin: 0; font-size: var(--fs-md); }
.order-step-head p { margin: .2rem 0 0; font-size: var(--fs-sm); color: var(--muted); }
.order-step-num {
    inline-size: 30px; block-size: 30px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-weight: 800; font-size: var(--fs-sm);
    background: var(--brand-fill); color: var(--on-fill);
}

/* ── اختيار الشركة ── */
.company-picker { display: flex; gap: .5rem; flex-wrap: wrap; margin-block-end: 1rem; }
.company-chip { position: relative; cursor: pointer; }
.company-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.company-chip img { block-size: 20px; inline-size: auto; object-fit: contain; }
.company-chip > span, .company-chip > img { pointer-events: none; }
.company-chip {
    display: inline-flex; align-items: center; gap: .45rem;
    border: 1px solid var(--line); border-radius: var(--radius-pill);
    padding: .42rem .9rem; background: var(--card); font-size: var(--fs-sm); font-weight: 600;
    transition: .15s;
}
.company-chip:hover { border-color: var(--brand); }
.company-chip.is-on { border-color: var(--brand-fill); background: var(--brand-soft); color: var(--brand-dark); }
.company-chip:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── اختيار الخطة ── */
.plan-picker { display: grid; gap: .55rem; margin-block-end: 1rem; }
.plan-option {
    position: relative; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
    border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem;
    cursor: pointer; transition: .15s; background: var(--card);
}
.plan-option input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.plan-option:hover { border-color: var(--brand); }
.plan-option.is-on { border-color: var(--brand-fill); background: var(--brand-soft); }
.plan-option-main { display: grid; gap: .12rem; flex: 1 1 auto; min-inline-size: 40%; }
.plan-option-name { font-weight: 700; }
.plan-option-type { font-size: var(--fs-xs); color: var(--muted); }
.plan-option-price { display: grid; gap: .05rem; text-align: start; }
.plan-option-price strong { font-size: var(--fs-md); color: var(--brand-dark); }
.plan-option-price small { font-size: var(--fs-xs); color: var(--muted); }
.plan-option-renewal { display: block; }
.plan-option-off {
    background: var(--accent-soft); color: var(--accent-dark);
    border-radius: var(--radius-pill); padding: .12rem .6rem;
    font-size: var(--fs-xs); font-weight: 800; white-space: nowrap;
}

.field-inline { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: 0; }
.field-inline select { inline-size: auto; min-inline-size: 160px; }

/* ── الحساب الاختياري ── */
.account-opt {
    border: 1px dashed var(--line); border-radius: var(--radius);
    padding: .9rem 1rem; margin-block-start: .3rem; background: var(--surface);
}
.check-row { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.check-row input { margin-block-start: .2rem; flex: none; }
.check-row small { display: block; font-size: var(--fs-xs); color: var(--muted); margin-block-start: .12rem; }
.account-pass { margin-block-start: .8rem; }
.order-signedin {
    background: var(--success-soft); color: var(--success);
    border-radius: var(--radius); padding: .7rem .9rem; font-size: var(--fs-sm); margin: 0;
}
.order-signedin a { color: inherit; text-decoration: underline; }

/* ── وسائل الدفع ── */
.pay-picker { display: grid; gap: .55rem; margin-block-end: 1rem; }
.pay-option { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: .15s; }
.pay-option:hover { border-color: var(--brand); }
.pay-option.is-on { border-color: var(--brand-fill); }
.pay-head {
    display: flex; align-items: center; gap: .6rem;
    padding: .8rem 1rem; cursor: pointer; background: var(--card);
}
.pay-option.is-on .pay-head { background: var(--brand-soft); }
.pay-name { font-weight: 700; }
.pay-tag {
    margin-inline-start: auto; font-size: var(--fs-xs); color: var(--muted);
    background: var(--surface); border-radius: var(--radius-pill); padding: .1rem .6rem;
}
.pay-body { padding: .9rem 1rem; border-block-start: 1px solid var(--line); background: var(--surface); }
.pay-number { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pay-number code {
    font-size: var(--fs-md); font-weight: 800; letter-spacing: .06em;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: .35rem .8rem; color: var(--ink);
}
.pay-note { margin: .6rem 0 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.7; }
.proof-field { margin: 0; }

.order-submit { display: grid; gap: .6rem; }

/* ── الملخّص الجانبي ── */
.summary-card { margin-block-end: 1.1rem; }
.summary-list { margin: .3rem 0 0; display: grid; gap: .5rem; }
.summary-list > div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.summary-list dt { font-size: var(--fs-sm); color: var(--muted); }
.summary-list dd { margin: 0; font-weight: 700; text-align: end; font-size: var(--fs-sm); }
.summary-note { margin: .9rem 0 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.7; }
.help-card { margin-block-start: 1.1rem; }
.help-card h2 { margin-block-end: .3rem; }

/* ── طلباتي ── */
.orders-empty { text-align: center; padding-block: 2rem; }
.order-row {
    display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
    border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem;
}
.order-row + .order-row { margin-block-start: .6rem; }
.order-row-main { flex: 1 1 260px; display: grid; gap: .2rem; }
.order-row-ref { font-family: var(--mono, monospace); font-size: var(--fs-xs); color: var(--muted); }

/* ── الدخول والتسجيل ── */
.auth-narrow { max-inline-size: 460px; margin-inline: auto; }
.auth-narrow .field { margin-block-end: .9rem; }
.auth-alt { text-align: center; margin-block-start: 1rem; font-size: var(--fs-sm); color: var(--muted); }

/* ── قسم الفيديوهات ─────────────────────────────────────────── */
.videos-hero {
    background: linear-gradient(135deg, var(--navy), var(--navy-2) 70%);
    color: #fff; padding-block: 2.6rem 2.2rem; margin-block-end: -1rem;
}
.videos-hero h1 { margin: .4rem 0 .5rem; }
.videos-hero > .container > p { margin: 0; opacity: .92; max-inline-size: 62ch; }
.videos-hero-meta { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; margin-block-start: 1.1rem; }
.videos-count {
    background: rgba(255,255,255,.16); border-radius: var(--radius-pill);
    padding: .25rem .9rem; font-size: var(--fs-sm); font-weight: 700;
}

.videos-filter { display: flex; gap: .5rem; flex-wrap: wrap; margin-block-end: 1.4rem; }
.filter-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 1px solid var(--line); border-radius: var(--radius-pill);
    padding: .4rem .95rem; font-size: var(--fs-sm); font-weight: 600;
    color: var(--ink); background: var(--card); transition: .15s;
}
.filter-chip:hover { border-color: var(--brand); color: var(--brand); }
.filter-chip.is-on { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-fill); }
.filter-chip span {
    font-size: var(--fs-xs); opacity: .72; background: var(--surface);
    border-radius: var(--radius-pill); padding: 0 .4rem; color: inherit;
}
.filter-chip.is-on span { background: rgba(255,255,255,.22); opacity: .95; }

.videos-grid {
    display: grid; gap: 1.1rem;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.video-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; display: flex; flex-direction: column; transition: .18s;
}
.video-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand); }
.video-card.is-featured { border-color: var(--brand-fill); }

.video-thumb {
    position: relative; display: block; inline-size: 100%; aspect-ratio: 16 / 9;
    padding: 0; border: 0; background: #000; cursor: pointer; overflow: hidden;
}
.video-thumb img {
    inline-size: 100%; block-size: 100%; object-fit: cover; display: block;
    transition: transform .35s ease, opacity .2s;
}
.video-thumb:hover img { transform: scale(1.05); opacity: .85; }
.video-thumb:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.video-play {
    position: absolute; inset: 0; display: grid; place-items: center;
    pointer-events: none; transition: transform .2s;
}
.video-thumb:hover .video-play { transform: scale(1.08); }
.video-thumb.is-playing { cursor: default; aspect-ratio: 16 / 9; }
.video-frame { inline-size: 100%; block-size: 100%; border: 0; display: block; }

.video-body { padding: .9rem 1rem 1rem; display: grid; gap: .35rem; flex: 1; }
.video-cat {
    font-size: var(--fs-xs); font-weight: 800; letter-spacing: .02em;
    color: var(--brand-dark); background: var(--brand-soft);
    border-radius: var(--radius-pill); padding: .1rem .55rem; justify-self: start;
}
.video-title { margin: 0; font-size: var(--fs-base); line-height: 1.55; font-weight: 700; }
.video-desc { margin: 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.7; }
.video-meta {
    margin-block-start: auto; padding-block-start: .5rem;
    display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
    font-size: var(--fs-xs); color: var(--muted);
}

.videos-cta { margin-block-start: 1.8rem; text-align: center; }
.videos-cta h2 { margin-block-end: .3rem; }

/* ══════════════════════════════════════════════════════════════
   إعلانات الشركاء — كلُّها تحت بعضها
   الإبداعات تأتي من شبكات الأفلييت بمقاسات مختلفة (728×90 و468×60)،
   فلا نمدّها إلى عرض العمود: كلٌّ بعرضه الأصلي بحدٍّ أقصى، في إطارٍ
   واحدٍ يوحّد شكلها. والتمدّد كان يُبهت الصورة ويكشف أنها مُقحمة.
   ══════════════════════════════════════════════════════════════ */
.partner-ads {
    /* بلا ترويسةٍ فوقها، فالحيّز أقلّ ممّا كان */
    padding-block: clamp(1.1rem, 3vw, 1.9rem);
    background: var(--surface);
    border-block: 1px solid var(--line-soft);
}

.partner-ads-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.35rem;
}
.partner-ad { width: 100%; text-align: center; }

.partner-ad-frame {
    display: inline-block;
    max-width: 100%;
    border-radius: var(--radius-sm);
    overflow: hidden;
    line-height: 0;
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .22s ease;
}
.partner-ad-frame:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.partner-ad-frame img { max-width: 100%; height: auto; display: block; }

/* ── إعلانٌ مفردٌ في ذيل صفحةٍ داخلية ──────────────────────────────
   يرث إطارَ الإعلان وبطاقتَه من فوق، ولا يحتاج إلا مركزةً وحيّزًا. */
.partner-ad-solo {
    padding-block: clamp(1.1rem, 3vw, 1.8rem);
    text-align: center;
}
.partner-ad-solo .container { display: grid; justify-items: center; }

/* ══════════════════════════════════════════════════════════════════
   البانرات الجانبية — ناطحتان، كلٌّ على جهتها

   مخفيّتان هنا، وapp.js يُظهر ما تسعُه الشاشة منهما. الإظهار في
   الجافاسكربت لا في media query لأن حدَّ كلِّ إبداعٍ يختلف بعرضه —
   160 بكسلًا لفلاش كلاود و300 لهوستنجر — والحدُّ محسوبٌ في القالب
   ومكتوبٌ في data-min، فلا تُكرَّر المعادلةُ في ملفّين.

   والجهةُ left/right لا inset-inline: المطلوب ثباتُ الجهتين في
   العربية والإنجليزية، والمنطقيةُ تنقلب بانقلاب اتجاه الصفحة.
   ══════════════════════════════════════════════════════════════ */
.side-ad { display: none; }

.side-ad.is-shown {
    display: block;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;                 /* فوق الصفحة، ودون النافذة المنبثقة */
    width: var(--ad-w, 160px);
    text-align: center;
}

.side-ad.is-right { right: 14px; }
.side-ad.is-left  { left: 14px; }

.side-ad-frame {
    display: block;
    border-radius: var(--radius-sm);
    overflow: hidden;
    line-height: 0;
    box-shadow: var(--shadow);
    transition: transform .18s ease;
}
.side-ad-frame:hover { transform: translateY(-2px); }

/* الإبداع بعرضه الأصلي لا مُصغَّرًا: تصغيرُ ناطحةٍ نصُّها كبيرٌ
   يجعله غيرَ مقروء، ولذلك تُخفى حيث لا تتّسع بدل أن تُضغط. */
.side-ad-frame img { width: 100%; height: auto; display: block; }

.side-ad-by {
    margin: .4rem 0 0;
    font-size: var(--fs-xs);
    color: var(--muted);
    letter-spacing: .02em;
}

.side-ad-close {
    position: absolute;
    inset-block-start: -10px;
    inset-inline-start: -10px;
    z-index: 1;
    width: 24px;
    height: 24px;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: var(--fs-md);
    line-height: 1;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.side-ad-close:hover { color: var(--ink); border-color: var(--ink-soft); }

/* ══════════════════════════════════════════════════════════════════
   خطط الشركة مقسّمةً على أنواعها
   ══════════════════════════════════════════════════════════════════ */
.plan-group + .plan-group { margin-block-start: 2.6rem; }
.plan-group-head {
    display: flex; align-items: baseline; gap: .7rem;
    flex-wrap: wrap; margin-block-end: 1.1rem;
    padding-block-end: .6rem; border-block-end: 1px solid var(--line);
}
.plan-group-title { margin: 0; font-size: var(--fs-md); }
.plan-group-count {
    font-size: var(--fs-xs); font-weight: 700; color: var(--brand);
    background: var(--brand-soft); padding: .2rem .6rem;
    border-radius: var(--radius-pill);
}

/* سطر توضيح العملة تحت الأسعار */
.price-note {
    margin-block: 0 1.4rem;
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--muted);
    max-width: 68ch;
}

/* ── الصفحاتُ القانونيّة ─────────────────────────────────────── */
.legal { padding-block: 2rem 3.5rem; }
.legal-head { margin-block-end: 2rem; }
.legal-head h1 { margin-block-end: .3rem; }
.legal-updated { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.legal-block { margin-block-end: 2rem; }
.legal-block h2 { font-size: var(--fs-md); margin-block-end: .6rem; }
.legal-block p { line-height: 1.85; }
.legal-list { padding-inline-start: 1.2rem; }
.legal-list li { margin-block-end: .4rem; line-height: 1.8; }
.legal-note {
    border-inline-start: 3px solid var(--brand);
    padding-inline-start: .8rem;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
}
.legal-foot {
    margin-block-start: 2.5rem; padding-block-start: 1.2rem;
    border-block-start: 1px solid var(--line); font-size: var(--fs-sm);
}

/* سطرُ الإقرار قرب زرِّ الإرسال */
.form-legal {
    font-size: var(--fs-xs); color: var(--muted);
    margin-block: .2rem .7rem; line-height: 1.7;
}

/* ── محدّدُ مدّة المقارنة ─────────────────────────────────────── */
.cmp-terms {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
    margin-block-end: .9rem;
}
.cmp-terms-label { font-size: var(--fs-sm); color: var(--muted); margin-inline-end: .2rem; }
.cmp-term {
    border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
    border-radius: var(--r-pill); padding: .3rem .8rem; font: inherit; font-size: var(--fs-sm);
    cursor: pointer;
}
.cmp-term:hover { border-color: var(--brand); }
.cmp-term.is-on { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; font-weight: 700; }
.cmp-term:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* صفوفُ السعر: الشهريُّ هو البطل، والاثنان الآخران يُقرآن معه */
.cmp-row-total td strong,
.cmp-row-renewal td strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.cmp-src { display: block; font-size: var(--fs-xs); color: var(--muted); }
.row-note { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 400; }

/* المزايا صفًّا صفًّا: الشرطةُ باهتةٌ فلا تُقرأ «لا يوجد» */
.cmp-feature-row td { font-size: var(--fs-sm); }
.cmp-note {
    margin-block-start: 1rem; font-size: var(--fs-sm); color: var(--muted);
    line-height: 1.75; max-width: 70ch;
}

/* ── تفصيلُ التقييم: حجّةٌ لا رأي ──────────────────────────────── */
.rating-basis { margin-block-start: .5rem; font-size: var(--fs-sm); }
.rating-basis > summary {
    cursor: pointer; color: var(--brand); width: fit-content;
}
.rating-basis > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.rating-axes { list-style: none; padding: 0; margin: .7rem 0; }
.rating-axes li {
    display: grid; grid-template-columns: 1fr auto auto; gap: .6rem;
    align-items: baseline; padding-block: .32rem;
    border-block-end: 1px solid var(--line);
}
.rating-axes li:last-child { border-block-end: 0; }
.rating-axis-weight { font-size: var(--fs-xs); color: var(--muted); }
.rating-axis-value { font-weight: 700; font-variant-numeric: tabular-nums; min-inline-size: 2.5rem; text-align: end; }
.rating-not-scored, .rating-meta {
    font-size: var(--fs-xs); color: var(--muted); line-height: 1.7; margin-block: .5rem 0;
}

/* ── مسارا الدفع: فرقٌ يُقرأ قبل الاختيار ─────────────────────── */
.pay-paths {
    display: grid; gap: .7rem; margin-block-end: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.pay-path {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-sm); padding: .9rem 1rem;
}
.pay-path.is-assisted { border-inline-start: 3px solid var(--brand); }
.pay-path h3 { font-size: var(--fs-base); margin: 0 0 .4rem; }
.pay-path p { font-size: var(--fs-sm); line-height: 1.75; margin: 0; color: var(--ink-soft); }
.pay-path-terms {
    margin: .55rem 0 0; padding-inline-start: 1.1rem;
    font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-soft);
}
.pay-path-terms li { margin-block-end: .3rem; }
.pay-path-note { margin-block-start: .55rem !important; font-size: var(--fs-xs) !important; color: var(--muted) !important; }

/* ── أرشيفُ العروض: مُعلَنٌ أنّه أرشيف ───────────────────────── */
.section-sub {
    font-size: var(--fs-md); margin-block: 2rem .8rem;
    padding-block-end: .4rem; border-block-end: 1px solid var(--line);
}
.videos-archive-note { margin-block-end: 1rem; max-width: 70ch; }

/* البطاقةُ نفسُها تحمل التنبيه: من وصل من بحثٍ لم يقرأ ترويسةَ القسم */
.video-stale {
    margin-block-start: .55rem; padding: .45rem .6rem;
    background: var(--surface); border-inline-start: 3px solid var(--accent, #b45309);
    border-radius: var(--r-sm); font-size: var(--fs-xs); line-height: 1.65; color: var(--ink-soft);
}
.video-stale a { white-space: nowrap; }
.videos-grid.is-archive .video-thumb img { filter: saturate(.75); }

/* ── مدخل الاختيار الموجَّه ───────────────────────────────────── */
.choose-form {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-block-end: 1.6rem;
}
.choose-grid {
    display: grid; gap: .8rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.choose-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: 1rem; }

.choose-count, .choose-relaxed { font-size: var(--fs-sm); margin-block-end: .8rem; }
.choose-relaxed {
    background: var(--surface); border-inline-start: 3px solid var(--accent, #b45309);
    border-radius: var(--r-sm); padding: .5rem .7rem; color: var(--ink-soft);
}

.choose-picks {
    display: grid; gap: .9rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.choose-pick {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1rem 1.1rem;
    display: flex; flex-direction: column; gap: .5rem;
}
/* السببُ أوّلُ ما يُقرأ — هو ما يفرّق بطاقةً عن أختها */
.choose-why {
    align-self: start; font-size: var(--fs-xs); font-weight: 700;
    padding: .12rem .55rem; border-radius: var(--r-pill);
    background: var(--brand-soft, #eee); color: var(--brand);
}
.choose-pick h2 { font-size: 1rem; margin: 0; }
.choose-price { margin: 0; }
.choose-price strong { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.choose-price span { font-size: var(--fs-xs); color: var(--muted); }
.choose-facts {
    list-style: none; padding: 0; margin: 0;
    font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.8;
}
.choose-pick-actions { margin-block-start: auto; display: flex; flex-wrap: wrap; gap: .4rem; }
.choose-limits {
    margin-block-start: 1.4rem; font-size: var(--fs-sm); color: var(--muted);
    line-height: 1.75; max-width: 70ch;
}
.choose-more { margin-block-start: 1rem; }
.hero-choose { margin-block-start: .7rem; font-size: var(--fs-sm); }
.hero-choose a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════
   قراءةٌ بلا تكبير، وأهدافُ لمسٍ يبلغها الإبهام.

   ── ما قِسته على الرئيسيّة الحيّة ──

   • **١٤٦ نصًّا دون ١٣ بكسل**، وأصغرُها شارةُ الخصم في لوحة الهيرو
     عند ١٠٫٢ — وهي الرقمُ الذي بُني عليه العنوانُ نفسُه. ومن يقرأ
     شرطَ فاتورةٍ بعينٍ نصفِ مغمضةٍ لا يقرؤه.
   • **٥٦ هدفَ لمسٍ دون ٤٤×٤٤**، منها **الشعارُ وزرُّ القائمة**
     (٤٢×٣٨) — أكثرُ زرّين استعمالًا في الموقع أصغرُ من إبهام.
     و«deal-company» عند ٢٢×٢٦.

   والحدُّ ٤٤ ليس ذوقًا: هو ما تفترضه إرشاداتُ أبل وجوجل معًا لعرض
   الإصبع. وما دونه يُخطئ فيُنقَر غيرُه، فيخرج الزائرُ ظانًّا أنّ
   الموقعَ لا يستجيب.

   والقواعدُ هنا لا تُلغي ما فوقها: ترفع حدًّا أدنى فقط، فلا يتغيّر
   شكلُ شيءٍ كان صحيحًا أصلًا.
   ═══════════════════════════════════════════════════════════════ */

/* ── حدٌّ أدنى للمس ─────────────────────────────────────────────
   الحشوةُ تكبّر المساحةَ القابلةَ للنقر بلا أن تكبّر النصّ. */
.brand,
.nav-toggle,
.section-link,
.deal-company,
.deal-order-link,
.article-cat,
.article-more,
.company-link,
.hero-board-go,
.btn-coupon,
.popup-close,
.popup-dismiss,
.term-pill {
    min-block-size: 44px;
}

.brand, .nav-toggle, .popup-close { min-inline-size: 44px; }

/* ‎min-block-size‎ لا يعمل على عنصرٍ سطريّ (inline): كان مضبوطًا على
   ‎.company-link‎ عند ٤٤ ويبقى ارتفاعُها ٣٩ لأنّها سطريّة. والحلُّ
   تحويلُها إلى ‎inline-flex‎ لا رفعُ الرقم. */
.company-link,
.btn,
.btn-coupon,
.hero-board-go,
.term-pill,
.coupon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
}

/* الأزرارُ الممتدّةُ تبقى ممتدّة */
.btn-block, .btn.btn-block { display: flex; }

/* روابطُ النصِّ داخل السطر: الحشوةُ الرأسيّةُ تكفي دون أن تكسر السطر */
.section-link,
.deal-order-link,
.article-more,
.article-cat,
.deal-company {
    display: inline-flex;
    align-items: center;
}

/* ── حدٌّ أدنى للقراءة ─────────────────────────────────────────
   لا شيءَ دون ١٣ بكسل. والأرقامُ التي يُبنى عليها قرارُ شراءٍ
   أولى بذلك من غيرها. */
.deal-type,
.company-figure-label,
.company-count-chip,
.discount-badge,
.deal-renewal,
.deal-order-link,
.term-pill,
.article-cat,
.hero-board-price small,
.hero-board-price span {
    font-size: max(0.84rem, 13.5px);
}

.company-card small,
.deal-card small,
.plan-card small,
.article-card small { font-size: max(0.84rem, 13.5px); }

/* ما بقي دون ١٣ بعد الجولة الأولى — قِسته ثمّ سمّيته بالاسم */
.eyebrow,
.coupon-action,
.article-date,
.side-ad-by,
.hero-board-go,
.company-figure-label { font-size: max(0.84rem, 13.5px); }

.company-figure li,
.deal-features li,
.plan-features li,
.company-card li,
.deal-card li,
.plan-card li,
.coupon-card li { font-size: max(0.88rem, 14px); }

.company-card small,
.deal-card small,
.plan-card small,
.article-card small,
.coupon-card small,
.hero small { font-size: max(0.84rem, 13.5px); }

/* آخرُ ما بقي — قِسته بعد الجولتين فسمّيته */
.hero-board-note,
.deal-ribbon,
.no-coupon,
.deal-single-term,
.disclosure,
.consent-note,
.popup-ticket-bonus,
.popup-dismiss { font-size: max(0.82rem, 13.2px); }

/* إطارُ إعلانِ الشريك يحجز نسبتَه: الصورةُ الخارجيّةُ لا تُقرأ أبعادُها
   من ملفٍّ عندنا، فتُنزل ما تحتها حين تصل إن لم يُحجَز لها مكان. */
.partner-ad-frame { display: block; aspect-ratio: 728 / 90; }
.partner-ad-frame img { inline-size: 100%; block-size: 100%; object-fit: contain; }

/* ═══════════════════════════════════════════════════════════════
   دليلُ الشركات المضغوط — الرئيسيّة وحدها.
   اثنتا عشرةَ بطاقةً كاملةً بلغت ٧٬٢٠٠ بكسلٍ في الموبايل: تسعةٌ
   وثلاثون بالمئة من الصفحة لقائمةِ أسماء. والصفُّ يقول ما يلزم عند
   هذا الحدّ — مَن هي، وكم أرخصُ ما عندها — ثمّ بابٌ إلى تفصيلها.
   ═══════════════════════════════════════════════════════════════ */
.co-list {
    list-style: none; margin: 0; padding: 0;
    border: 1px solid var(--line); border-radius: var(--r);
    background: var(--card); overflow: hidden;
}
.co-row + .co-row { border-block-start: 1px solid var(--line-soft); }

.co-row-link {
    display: flex; align-items: center; gap: .85rem;
    padding: .8rem 1rem; min-block-size: 64px;
    text-decoration: none; color: inherit;
    transition: background .15s ease;
}
.co-row-link:hover { background: var(--surface); }
.co-row-link:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }

.co-row-mark {
    inline-size: 38px; block-size: 38px; flex: 0 0 auto;
    display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff;
}
.co-row-mark img { inline-size: 26px; block-size: 26px; object-fit: contain; }
.co-row-initial { font-weight: 800; color: var(--brand); font-size: 1rem; }

.co-row-id { flex: 1 1 auto; min-inline-size: 0; }
.co-row-name { display: block; font-weight: 700; font-size: 1rem; line-height: 1.45; }
.co-row-meta { display: block; font-size: max(0.84rem, 13.5px); color: var(--muted); }

.co-row-price { flex: 0 0 auto; text-align: end; }
.co-row-from { display: block; font-size: max(0.78rem, 12.5px); color: var(--muted); }
.co-row-price strong { font-size: var(--fs-base); font-weight: 800; font-variant-numeric: tabular-nums; }
.co-row-none { font-size: max(0.84rem, 13.5px); color: var(--muted); }

.co-row-go { flex: 0 0 auto; color: var(--muted); font-size: var(--fs-md); }
.co-row-link:hover .co-row-go { color: var(--brand); }

@media (max-width: 420px) {
    .co-row-link { gap: .65rem; padding-inline: .8rem; }
    .co-row-go { display: none; }
}

/* تاريخُ مراجعة الأكواد والسوق — تُقرأ مع الشروط لا تحتها بسطرٍ باهت */
.coupons-checked {
    margin: .35rem 0 1rem; font-size: max(0.86rem, 13.8px);
    line-height: 1.75; color: var(--ink-soft); max-width: 72ch;
}

/* «مش مناسبة لو» يقرأ بوزنٍ مساوٍ لـ«تناسب» لا أخفّ: الحدُّ نصفُ
   القرار، وإخفاؤه بلونٍ باهتٍ يجعل الصفحةَ إعلانًا. */
.decide-not, .decide-why {
    margin: .45rem 0 0; font-size: max(0.92rem, 14.5px);
    line-height: 1.8; color: var(--ink-soft);
}

/* ═══════════════════════════════════════════════════════════════
   قراءةٌ ولمسٌ في كلِّ الصفحات لا الرئيسيّة وحدها.

   ── ما قِسته بعد إصلاح الرئيسية ──

   الإصلاحُ السابقُ سمّى فئاتِ الرئيسيّة بأسمائها، فبقيت بقيّةُ
   الصفحات كما كانت: صفحةُ المقارنة وحدها فيها تسعةٌ وعشرون نصًّا
   دون ١٣ بكسل وأربعةٌ وعشرون هدفَ لمسٍ دون ٤٤.

   وأكثرُ الأهداف كان عند **٤٣ بكسل** — بكسلٌ واحدٌ ناقص. وهو فرقٌ
   لا يُرى ويُخطئ الإصبعُ بسببه، فالقواعدُ هنا ترفع الحدَّ الأدنى
   ولا تغيّر شكلَ شيءٍ كان صحيحًا.
   ═══════════════════════════════════════════════════════════════ */

/* شارةُ «قارن» على بطاقات الخطط */
.deal-compare,
.deal-compare span,
.plan-compare,
.plan-compare span { font-size: max(0.84rem, 13.5px); }

/* روابطُ التنقّل والتبديل — كلُّها كانت عند ٣٩–٤٣ */
.nav-actions a,
.nav-actions button,
.lang-switch,
.currency-switch,
.theme-toggle,
.side-ad-close,
.tabs a,
.tabs button,
.pagination a,
.pagination span {
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* حدٌّ أدنى عامٌّ للنصِّ الصغير خارج الرئيسيّة */
.compare-card small,
.compare-table small,
.company-page small,
.article-body small,
.coupon-card small,
.video-card small { font-size: max(0.84rem, 13.5px); }

/* الجولةُ الثانية: الارتفاعُ ضُبط والعرضُ بقي.
   أيقونةٌ بعرض ثلاثين بكسلًا هدفٌ ضيّقٌ وإن كان ارتفاعُها أربعةً
   وأربعين — والإصبعُ يخطئ في البعدين لا في واحد. */
.header-socials a,
.socials a,
.theme-toggle,
.pagination a,
.pagination span,
.side-ad-close {
    min-inline-size: 44px;
}

/* روابطُ القائمة الرئيسيّة: ٤٣ بكسلًا ارتفاعًا — بكسلٌ ناقص */
.main-nav ul > li > a,
.main-nav li a { min-block-size: 44px; display: flex; align-items: center; }

/* رابطُ التوقيع في الفوتر — سطرُ نصٍّ لا زرّ، فيُوسَّع رأسيًّا فقط */
.footer-credit a { display: inline-flex; align-items: center; min-block-size: 44px; }

/* ═══════════════════════════════════════════════════════════════
   الرئيسيّةُ بالهويّة الزرقاء — مكوّناتٌ جاءت من المعمل ‎/lab/home‎.

   بادئةُ ‎hc-‎ باقيةٌ كما رُوجعت في النموذج؛ ورموزُها هنا أسماءٌ
   بديلةٌ لرموزِ الموقع، فالوضعُ الليليُّ والألوانُ من مصدرٍ واحد.
   ═══════════════════════════════════════════════════════════════ */
:root {
    --hc-cobalt: var(--brand-fill); --hc-cobalt-d: #2647d6; --hc-cobalt-s: var(--brand-soft);
    --hc-navy: var(--navy); --hc-cyan: var(--accent);
    --hc-bg: var(--bg); --hc-ground: var(--card); --hc-card: var(--card);
    --hc-ink: var(--ink); --hc-soft: var(--ink-soft); --hc-muted: var(--muted);
    --hc-line: var(--line); --hc-line-2: #cfd6e4;
    --hc-on-navy: #fff; --hc-on-navy-soft: var(--on-navy-soft);
    --hc-cobalt-text: var(--brand);
    --hc-r-sm: 6px; --hc-r: var(--r-sm); --hc-r-lg: var(--r-lg);
    --hc-sh: var(--sh); --hc-t: 150ms cubic-bezier(.2, .7, .3, 1);
    --hc-fs-xs: var(--fs-xs); --hc-fs-sm: var(--fs-sm); --hc-fs: var(--fs-base);
    --hc-fs-md: var(--fs-md); --hc-fs-lg: var(--fs-lg); --hc-fs-xl: var(--fs-xl);
}
:root[data-theme="dark"] { --hc-line-2: #2e3d5e; }
.hc-muted { color: var(--hc-muted); }
bdi { font-variant-numeric: tabular-nums; }

/* ── الأزرار: هرمُ فعلٍ واحد ────────────────────────────────── */
.hc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    border: 1px solid transparent; border-radius: var(--hc-r);
    padding: .75rem 1.4rem; min-block-size: 46px;
    font: inherit; font-weight: 700; font-size: var(--hc-fs); text-decoration: none;
    cursor: pointer; white-space: nowrap;
    transition: background var(--hc-t), border-color var(--hc-t), transform var(--hc-t), box-shadow var(--hc-t);
}
.hc-btn-sm { padding: .55rem 1.05rem; min-block-size: 44px; font-size: var(--hc-fs-sm); }

.hc-btn-primary { background: var(--hc-cobalt); color: #fff; }
.hc-btn-primary:hover { background: var(--hc-cobalt-d); box-shadow: 0 6px 18px -8px rgba(49,91,250,.6); }
.hc-btn-primary:active { transform: translateY(1px); box-shadow: none; }

.hc-btn-secondary { background: var(--hc-card); border-color: var(--hc-cobalt-text); color: var(--hc-cobalt-text); }
.hc-btn-secondary:hover { background: var(--hc-cobalt-s); }

.hc-btn-quiet { background: var(--hc-card); border-color: var(--hc-line-2); color: var(--hc-soft); }
.hc-btn-quiet:hover { border-color: var(--hc-cobalt-text); color: var(--hc-cobalt-text); }

/* على الشريط الكحليّ: الأبيضُ هو الفعل */
.hc-btn-onnavy { background: #fff; color: var(--hc-navy); }
.hc-btn-onnavy:hover { background: var(--hc-cyan); }

.hc-btn:focus-visible, .hc-type:focus-visible,
.hc-video:focus-visible, .hc-guide:focus-visible, .hc-link-light:focus-visible {
    outline: 3px solid var(--hc-cyan); outline-offset: 3px; border-radius: var(--hc-r-sm);
}

/* ── الهيرو: فاتحٌ، النصُّ كحليّ ──────────────────────────── */
.hc-hero { background: var(--hc-ground); padding-block: 3.2rem 2.6rem; border-block-end: 1px solid var(--hc-line); }
.hc-hero-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 24rem); gap: 2.5rem; align-items: center; }

.hc-eyebrow {
    display: inline-block; font-size: var(--hc-fs-xs); font-weight: 700; letter-spacing: .02em;
    color: var(--hc-cobalt-text); background: var(--hc-cobalt-s); padding: .2rem .65rem;
    border-radius: var(--hc-r-sm); margin-block-end: .9rem;
}
.hc-eyebrow-light { color: var(--hc-cyan); background: rgba(120,220,232,.14); }

.hc-hero h1 {
    font-size: clamp(1.9rem, 3.6vw, 2.75rem); line-height: 1.3; font-weight: 800;
    margin: 0 0 .85rem; letter-spacing: -.01em; text-wrap: balance; color: var(--hc-ink);
}
.hc-lede { font-size: var(--hc-fs-md); color: var(--hc-soft); margin: 0 0 1.5rem; max-width: 48ch; }
.hc-hero-cta { display: flex; flex-wrap: wrap; gap: .65rem; margin-block-end: 1.6rem; }

/* أنواعُ المشروع — أزرارٌ حقيقيّةٌ بحالةٍ مختارةٍ لا تعتمد على اللون */
.hc-types { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.hc-types-label { font-size: var(--hc-fs-sm); color: var(--hc-muted); margin-inline-end: .2rem; inline-size: 100%; }
.hc-type {
    display: inline-flex; align-items: center; gap: .45rem; min-block-size: 44px;
    padding: 0 1rem; border: 1px solid var(--hc-line-2); border-radius: var(--hc-r);
    background: var(--hc-card); color: var(--hc-ink); text-decoration: none;
    font-weight: 600; font-size: var(--hc-fs-sm);
    transition: border-color var(--hc-t), background var(--hc-t), color var(--hc-t);
}
.hc-type:hover { border-color: var(--hc-cobalt-text); color: var(--hc-cobalt-text); }
.hc-type.is-on { background: var(--hc-cobalt); border-color: var(--hc-cobalt-text); color: #fff; font-weight: 800; box-shadow: 0 0 0 3px var(--hc-cobalt-s); }
/* الرمزُ ١٣ بكسلًا لا أقلّ، وأبيضُ على الكوبالت لا سماويّ (كان ٣٫٣) */
.hc-type-ic { inline-size: 1.1em; text-align: center; font-size: var(--hc-fs-xs); }
.hc-type.is-on .hc-type-ic { color: #fff; }
.hc-type-unsure { border-style: dashed; color: var(--hc-soft); }

.hc-hero-art svg { inline-size: 100%; block-size: auto; display: block; }

/* ── الرحلة ───────────────────────────────────────────────── */
.hc-steps { padding-block: 1.8rem; background: var(--hc-bg); }
.hc-steps-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.hc-steps-list li {
    display: flex; gap: .85rem; align-items: flex-start;
    background: var(--hc-card); border: 1px solid var(--hc-line); border-radius: var(--hc-r-lg); padding: 1rem 1.1rem;
}
/* كحليٌّ على سماويٍّ كان ٣٫٤ — تحت AA لرقمٍ بوزن ١٤. فالتعبئةُ كوبالت
   والرقمُ أبيض (٥٫٩)، والسماويُّ حلقةٌ حوله: اللونُ الثالثُ باقٍ حيث
   لا يحمل نصًّا. */
.hc-step-n {
    flex: 0 0 auto; inline-size: 34px; block-size: 34px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 800; font-size: var(--hc-fs-sm);
    background: var(--hc-cobalt); color: #fff; box-shadow: 0 0 0 2px var(--hc-cyan);
}
.hc-steps-list strong { display: block; font-size: var(--hc-fs); }
.hc-steps-list span:not(.hc-step-n) { display: block; font-size: var(--hc-fs-sm); color: var(--hc-muted); line-height: 1.6; }

/* ── الأقسام ──────────────────────────────────────────────── */
.hc-sec-head { margin-block-end: 1.4rem; }
.hc-sec-head h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 800; margin: 0 0 .35rem; }
.hc-sec-head p { margin: 0; color: var(--hc-soft); font-size: var(--hc-fs); max-width: 60ch; }
.hc-sec-head-light h2, .hc-sec-head-light p { color: var(--hc-on-navy); }
.hc-sec-head-light p { color: var(--hc-on-navy-soft); }
.hc-note { margin: 0 0 1rem; font-size: var(--hc-fs-sm); color: var(--hc-soft); background: var(--hc-card); border-inline-start: 3px solid var(--hc-cyan); padding: .6rem .8rem; border-radius: var(--hc-r-sm); }

/* ── البطاقات ─────────────────────────────────────────────── */
.hc-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.hc-cards-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.hc-card {
    background: var(--hc-card); border: 1px solid var(--hc-line); border-radius: var(--hc-r-lg);
    padding: 1.2rem 1.25rem; display: flex; flex-direction: column; gap: .55rem;
    box-shadow: var(--hc-sh); transition: border-color var(--hc-t), transform var(--hc-t);
}
.hc-card:hover { border-color: var(--hc-cobalt-text); }

.hc-picks { padding-block: 2.6rem 3rem; }
.hc-picks-idle { text-align: center; padding: 1.2rem 0; }
.hc-picks-idle h2 { font-size: var(--hc-fs-lg); margin: 0 0 .3rem; }
.hc-picks-idle p { margin: 0; color: var(--hc-soft); }

.hc-pick { animation: hc-rise 320ms cubic-bezier(.2,.7,.3,1) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes hc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hc-tag { align-self: start; font-size: var(--hc-fs-xs); font-weight: 800; padding: .2rem .65rem; border-radius: 999px; background: var(--hc-cobalt-s); color: var(--hc-cobalt-text); }
.hc-pick h3 { margin: 0; font-size: var(--hc-fs-md); line-height: 1.4; }
.hc-pick-co { display: block; font-size: var(--hc-fs-sm); color: var(--hc-muted); font-weight: 600; }
.hc-fits { margin: 0; font-size: var(--hc-fs-sm); color: var(--hc-soft); }
.hc-price { margin: .3rem 0 0; }
.hc-price strong { display: block; font-size: 1.8rem; font-weight: 800; line-height: 1.2; }
.hc-price span { font-size: var(--hc-fs-sm); color: var(--hc-soft); }
.hc-price-sub { margin: 0; font-size: var(--hc-fs-sm); color: var(--hc-muted); }
.hc-facts { margin: .4rem 0 0; display: grid; gap: .35rem; font-size: var(--hc-fs-sm); }
.hc-facts > div { display: flex; justify-content: space-between; gap: .6rem; border-block-end: 1px solid var(--hc-line); padding-block-end: .35rem; }
.hc-facts > div:last-child { border: 0; padding: 0; }
.hc-facts dt { color: var(--hc-muted); margin: 0; }
.hc-facts dd { margin: 0; font-weight: 700; text-align: end; }
.hc-facts small { font-size: var(--hc-fs-xs); font-weight: 400; color: var(--hc-muted); }
.hc-limit { margin: .3rem 0 0; font-size: var(--hc-fs-sm); color: var(--hc-soft); background: var(--hc-bg); border-radius: var(--hc-r-sm); padding: .55rem .75rem; line-height: 1.65; }
.hc-limit strong { color: var(--hc-ink); }
.hc-card-act { margin-block-start: auto; padding-block-start: .5rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.hc-card-act .hc-btn { flex: 1 1 auto; }
.hc-disclose { margin: 1rem 0 0; font-size: var(--hc-fs-sm); color: var(--hc-muted); }
.hc-disclose a { color: var(--hc-cobalt-text); }

/* ── شرحُ الشراء: الشريطُ الكحليُّ الواحد ─────────────────── */
.hc-tutorials { background: var(--hc-navy); color: var(--hc-on-navy); padding-block: 3rem 2.6rem; }
.hc-tut-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.hc-tut { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--hc-r-lg); padding: 1rem; display: flex; flex-direction: column; gap: .7rem; }
.hc-tut-head { display: flex; align-items: center; gap: .6rem; }
.hc-tut-logo { inline-size: 28px; block-size: 28px; object-fit: contain; background: #fff; border-radius: 6px; padding: 3px; }
.hc-tut-name { font-weight: 800; font-size: var(--hc-fs); }

.hc-video {
    position: relative; display: block; inline-size: 100%; aspect-ratio: 16 / 9;
    border: 0; padding: 0; border-radius: var(--hc-r); overflow: hidden; background: #0B1226; cursor: pointer;
}
.hc-video img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; opacity: .9; transition: opacity var(--hc-t); }
.hc-video:hover img { opacity: 1; }
.hc-play {
    position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
    inline-size: 56px; block-size: 56px; border-radius: 50%; background: var(--hc-cobalt);
    box-shadow: 0 8px 24px -6px rgba(49,91,250,.7);
}
.hc-play::after { content: ''; position: absolute; inset: 50% auto auto 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.hc-video iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.hc-video-none { display: grid; place-items: center; cursor: default; background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.2); }
.hc-none-ic { color: rgba(255,255,255,.25); font-size: 1.6rem; }

.hc-tut-title { margin: 0; font-size: var(--hc-fs-sm); line-height: 1.55; }
.hc-muted-light { color: var(--hc-on-navy-soft); }
.hc-tut-caveat { margin: 0; font-size: var(--hc-fs-xs); color: var(--hc-cyan); line-height: 1.6; }
.hc-tut-act { margin-block-start: auto; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
/* روابطُ النصِّ أهدافُ لمسٍ أيضًا: ٢٥ بكسلًا ارتفاعًا أقلُّ من إصبع */
.hc-link-light, .hc-disclose a { display: inline-flex; align-items: center; min-block-size: 44px; }
.hc-link-light { color: var(--hc-on-navy-soft); font-size: var(--hc-fs-sm); font-weight: 600; text-decoration: none; }
.hc-link-light:hover { color: #fff; text-decoration: underline; }
.hc-tut-foot { margin: 1.3rem 0 0; }

/* ── الأدلّة ──────────────────────────────────────────────── */
.hc-guides { padding-block: 2.8rem; }
.hc-guide { text-decoration: none; color: inherit; }
.hc-guide-ic { font-size: 1.4rem; }
.hc-guide h3 { margin: 0; font-size: var(--hc-fs-md); line-height: 1.45; }
.hc-guide p { margin: 0; font-size: var(--hc-fs-sm); color: var(--hc-soft); }
.hc-guide-more { margin-block-start: auto; color: var(--hc-cobalt-text); font-weight: 700; font-size: var(--hc-fs-sm); }

/* ── المساعدة: سطرٌ هادئ ──────────────────────────────────── */
.hc-assist { padding-block: 0 2.8rem; }
.hc-assist-in {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    background: var(--hc-card); border: 1px solid var(--hc-line); border-radius: var(--hc-r-lg); padding: 1.1rem 1.3rem;
}
.hc-assist-in strong { display: block; font-size: var(--hc-fs); }
.hc-assist-in > div > span { display: block; font-size: var(--hc-fs-sm); color: var(--hc-soft); }
.hc-assist-act { display: flex; gap: .5rem; flex-wrap: wrap; }


/* ═══════════ الموبايل ═══════════ */
@media (max-width: 900px) {
    .hc-hero { padding-block: 2rem 1.8rem; }
    .hc-hero-in { grid-template-columns: 1fr; gap: 1.2rem; }
    .hc-hero-art { display: none; }             /* لا رسمَ يدفع الزرَّ تحت الطيّة */
    .hc-hero h1 { font-size: 1.7rem; }
    .hc-lede { font-size: var(--hc-fs); }
    .hc-hero-cta .hc-btn { flex: 1 1 11rem; }
    .hc-steps-list { grid-template-columns: 1fr; }

}
@media (max-width: 380px) {
    .hc-wrap { padding-inline: .9rem; }
    .hc-price strong { font-size: 1.55rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hc-pick { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════
   الهويّةُ الزرقاء — لمساتٌ على الصفحات الأخرى.

   ── الترويسة سطرٌ واحد ──
   روابطُ القائمة كانت تنكسر سطرين («قارن / الخطط») لأنّ الصفَّ
   ضاق بأيقونات التواصل. الأيقوناتُ في الفوتر حيث يبحث عنها من
   يريدها؛ والروابطُ لا تنكسر.

   ── شريطٌ كحليٌّ واحد ──
   رأسُ صفحةِ الطلب كان كوبالت — والشارةُ السماويّةُ عليه ٢٫٩ فقط.
   على الكحليِّ تصير ٩.

   ── أهدافُ اللمس ──
   ما دون ٤٠ بكسلًا يُرفَع: روابطُ الفوتر (٢٦)، أيقوناتُ التواصل
   (٣٦)، رقائقُ التصفية (٣٧–٣٩)، روابطُ «على يوتيوب» (٢٢) و«كل
   أكواد الشركة» (٢٢). والروابطُ داخل فقرةٍ جاريةٍ تُترَك: مستثناةٌ
   في WCAG 2.5.8 ورفعُها يكسر السطر.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 980px) {
    .main-nav ul a { white-space: nowrap; }
}
.header-socials { display: none; }

.order-hero { background: linear-gradient(135deg, var(--navy), var(--navy-2)); }

/* برتقاليُّ RSS كان ٣٫٠ على الأبيض */
.blog-rss { color: #c2410c; }
.blog-rss:hover { border-color: #c2410c; color: #c2410c; }
:root[data-theme="dark"] .blog-rss, :root[data-theme="dark"] .blog-rss:hover { color: #fb923c; border-color: #fb923c; }

.footer-links a, .video-meta a, .coupon-link, .decide-more a, .rating-meta a, .page-head .crumbs a,
.video-stale a {
    display: inline-flex; align-items: center; min-height: 40px;
}
.socials a, .header-socials a { min-width: 44px; min-height: 44px; }
.filter-chip, .chip-filter, .chip.chip-link, .blog-rss { min-height: 40px; align-items: center; }
.chip-filter, .blog-rss { display: inline-flex; }
/* الرقاقةُ النشطةُ على البطاقة المميّزة: كوبالت — فالنصُّ أبيضُ في الوضعين (كان لونَ البطاقة: ٣٫٠ في الليليّ) */
.deal-card.is-highlighted .term-pill.is-active { color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   جولةُ الإكمال: المحدِّد، خلاصةُ الشركة وشرحُها، أساسُ المقارنة،
   القائمةُ المنسدلة، واسمُ العلامة إلى جانب الشعار.
   ═══════════════════════════════════════════════════════════════ */

/* ── الشعارُ والاسم ────────────────────────────────────────── */
.brand-text-lockup { display: flex; flex-direction: column; line-height: 1.15; margin-inline-start: .55rem; }
.brand-main { font-weight: 800; font-size: var(--fs-base); color: var(--ink); }
.brand-sub  { font-size: var(--fs-xs); letter-spacing: .12em; color: var(--muted); font-weight: 600; }
.footer-brand .brand-main { color: #fff; }
.footer-brand .brand-sub  { color: var(--on-navy-soft); }
@media (max-width: 939px) {
    .brand-sub { display: none; }
    .brand-main { font-size: var(--fs-sm); }
}

/* ── القائمةُ المنسدلة «تعلّم» ─────────────────────────────── */
/* ‎.main-nav .nav-menu‎ لا ‎.nav-menu‎: قاعدةُ ‎.main-nav ul‎ أخصُّ منها
   فكانت تُبقي القائمةَ مفتوحةً دائمًا. */
.nav-caret { margin-inline-start: .15rem; transition: transform .2s ease; }
.nav-group { position: relative; }
.main-nav .nav-menu { list-style: none; margin: 0; padding: 0 0 0 1rem; }
@media (min-width: 940px) {
    .nav-group > a { display: inline-flex; align-items: center; gap: .15rem; }
    .main-nav .nav-menu {
        position: absolute; inset-inline-start: 0; inset-block-start: 100%; min-inline-size: 12rem;
        background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
        box-shadow: var(--shadow); padding: .35rem; display: none; flex-direction: column; z-index: 40;
    }
    .main-nav .nav-group:hover .nav-menu, .main-nav .nav-group:focus-within .nav-menu, .main-nav .nav-group.is-open .nav-menu { display: flex; }
    .main-nav .nav-group.is-closed:not(:hover) .nav-menu { display: none; }
    .nav-group:hover .nav-caret, .nav-group.is-open .nav-caret { transform: rotate(180deg); }
    .main-nav .nav-menu a { display: flex; align-items: center; min-block-size: 44px; padding: 0 .8rem; border-radius: var(--r-sm); white-space: nowrap; }
    .main-nav .nav-menu a::after { display: none; }
    .main-nav .nav-menu a:hover { background: var(--brand-soft); color: var(--brand); }
}

/* ── المحدِّد ─────────────────────────────────────────────── */
.ch-q { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem 1.1rem 1.1rem; margin: 0 0 1rem; background: var(--card); }
.ch-q legend { font-weight: 800; font-size: var(--fs-md); padding: 0 .4rem; display: flex; align-items: center; gap: .5rem; }
.ch-n { display: inline-grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 50%; background: var(--brand-fill); color: #fff; font-size: var(--fs-sm); box-shadow: 0 0 0 2px var(--accent); }
.ch-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ch-chip {
    position: relative; display: inline-flex; align-items: center; gap: .45rem; min-block-size: 44px; padding: 0 1rem; cursor: pointer;
    border: 1px solid #cfd6e4; border-radius: var(--r-sm); background: var(--card); color: var(--ink); font-weight: 600; font-size: var(--fs-sm);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
:root[data-theme="dark"] .ch-chip { border-color: #2e3d5e; }
.ch-chip input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.ch-chip:hover { border-color: var(--brand); color: var(--brand); }
.ch-chip.is-on, .ch-chip:has(input:checked) { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; font-weight: 800; box-shadow: 0 0 0 3px var(--brand-soft); }
.ch-chip:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.ch-chip-ic { font-size: 1.05em; }
.ch-needs { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.ch-needs .check-row { display: inline-flex; align-items: center; gap: .45rem; min-block-size: 44px; cursor: pointer; }
.ch-adv { margin: 0 0 1rem; }
.ch-adv summary { cursor: pointer; font-weight: 700; color: var(--ink-soft); min-block-size: 44px; display: flex; align-items: center; }
.ch-adv .field { margin-block-start: .6rem; max-inline-size: 22rem; }
.ch-results { margin-block-start: 1.6rem; }
.ch-results-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ch-revise { display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 700; }
.ch-mode { background: var(--accent-soft); border-inline-start: 4px solid var(--accent); border-radius: var(--r-sm); padding: .8rem 1rem; margin: 0 0 1rem; }
.ch-mode strong { display: block; margin-block-end: .2rem; }
.ch-mode p { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.7; }
.ch-fits { margin: .2rem 0 .6rem; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.65; }
.ch-monthly { margin: -.2rem 0 .6rem; color: var(--muted); font-size: var(--fs-sm); }
.ch-facts { margin: 0 0 .6rem; display: grid; gap: .3rem; font-size: var(--fs-sm); }
.ch-facts > div { display: flex; justify-content: space-between; gap: .6rem; border-block-end: 1px solid var(--line); padding-block-end: .3rem; }
.ch-facts dt { color: var(--muted); } .ch-facts dd { margin: 0; font-weight: 700; text-align: end; }
.ch-checks { margin: .6rem 0 0; background: var(--surface); border-radius: var(--r-sm); padding: .6rem .8rem; font-size: var(--fs-sm); }
.ch-checks strong { display: block; margin-block-end: .25rem; }
.ch-checks ul { margin: 0; padding-inline-start: 1.1rem; color: var(--ink-soft); line-height: 1.65; }
.choose-pick-investigate .choose-why { background: var(--accent-soft); color: var(--accent-dark); }
.choose-more { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ── خلاصةُ الشركة: عمودان ─────────────────────────────────── */
.decide-cols { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); margin-block-start: 1rem; }
.decide-col h3 { font-size: var(--fs-base); margin: 0 0 .4rem; }
.decide-col ul { margin: 0; padding-inline-start: 1.1rem; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.75; }
.decide-col li + li { margin-block-start: .25rem; }
.decide-more { display: flex; gap: 1rem; flex-wrap: wrap; }
.chip-quiet { background: var(--brand-soft); color: var(--brand); border-color: transparent; }

/* ── شرحُ الشراء داخل صفحة الشركة ──────────────────────────── */
.co-tut { background: var(--navy); color: #fff; border-radius: var(--r-lg); padding: 1.3rem 1.4rem; margin: 0 0 1.4rem; }
.co-tut-grid { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1.1fr) minmax(0, 22rem); align-items: center; }
.co-tut h2 { color: #fff; font-size: var(--fs-lg); margin: .4rem 0 .4rem; }
.co-tut-text > p { color: var(--on-navy-soft); margin: 0 0 .5rem; font-size: var(--fs-sm); line-height: 1.7; }
.co-tut-title { color: #fff !important; font-weight: 700; }
.co-tut-meta a { color: #fff; }
.co-tut-caveat { color: var(--accent) !important; font-size: var(--fs-xs) !important; }
.co-tut-player { border-radius: var(--r); }
.co-tut-offers { margin-block-start: 1.2rem; border-block-start: 1px solid rgba(255,255,255,.14); padding-block-start: .9rem; }
.co-tut-offers h3 { font-size: var(--fs-base); margin: 0 0 .2rem; color: #fff; }
.co-tut-offers .field-hint { color: var(--on-navy-soft); }
.co-tut-offers ul { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .3rem; font-size: var(--fs-sm); }
.co-tut-offers a { color: #fff; display: inline-flex; align-items: center; min-block-size: 40px; }
.co-tut-offers .muted { color: var(--on-navy-soft); margin-inline-start: .4rem; }
@media (max-width: 760px) { .co-tut-grid { grid-template-columns: 1fr; } }

/* ── شرحُ الشراء في الرئيسيّة: شبكةٌ بعدد ما هو موجود ─────── */
.hc-tut-grid-1 { grid-template-columns: minmax(0, 32rem); justify-content: center; }
.hc-tut-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); max-inline-size: 58rem; }
.hc-link-inline { min-block-size: 0; display: inline; }

/* ── أساسُ جدول المقارنة ────────────────────────────────────── */
.cmp-basis { background: var(--brand-soft); color: var(--ink); border-inline-start: 4px solid var(--brand-fill); border-radius: var(--r-sm); padding: .6rem .9rem; font-size: var(--fs-sm); line-height: 1.7; margin: 0 0 .8rem; }

/* ── مساعدةُ الشراء: مساران ─────────────────────────────────── */
.order-paths { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin: 0 0 1.2rem; }
.order-path {
    position: relative; display: flex; gap: .7rem; align-items: flex-start; cursor: pointer;
    border: 1px solid var(--line); border-radius: var(--r-lg); padding: .9rem 1rem; background: var(--card);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.order-path input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.order-path:has(input:checked) { border-color: var(--brand-fill); box-shadow: 0 0 0 3px var(--brand-soft); }
.order-path:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.order-path-ic { font-size: 1.4rem; line-height: 1; }
.order-path strong { display: block; font-size: var(--fs-base); }
.order-path span { display: block; color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
.order-chosen-summary { background: var(--brand-soft); border-radius: var(--r-sm); padding: .7rem .9rem; font-size: var(--fs-sm); margin: 0 0 .8rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; }
.order-chosen-summary strong { color: var(--brand); }
.order-tut-link { display: inline-flex; align-items: center; gap: .35rem; min-block-size: 44px; font-weight: 700; }
.order-nocharge { background: var(--success-soft); color: var(--success); border-radius: var(--r-sm); padding: .55rem .8rem; font-size: var(--fs-sm); font-weight: 700; margin: 0 0 .8rem; }
.order-need-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* ── الفيديوهات: المحتوى الجانبيّ مطويّ ───────────────────── */
.videos-side { margin-block-start: 1.4rem; border: 1px dashed var(--line); border-radius: var(--r-lg); padding: .3rem 1rem 1rem; }
.videos-side summary { cursor: pointer; font-weight: 800; min-block-size: 44px; display: flex; align-items: center; gap: .5rem; }
.videos-side summary span { color: var(--muted); font-weight: 600; font-size: var(--fs-sm); }
.videos-group-head { margin: 1.2rem 0 .6rem; font-size: var(--fs-md); }

/* ── المساران: كشفٌ تدريجيّ ─────────────────────────────────── */
.order-step-paths { border: 0; padding: 0; margin: 0 0 1.4rem; }
.order-step-paths legend { padding: 0; }
.order-form:has(#path-help:checked) #step-plan,
.order-form:has(#path-help:checked) #step-pay { display: none; }
.order-form:has(#path-chosen:checked) #step-need { display: none; }
.order-form:not(:has(input[name="path"]:checked)) #step-plan,
.order-form:not(:has(input[name="path"]:checked)) #step-pay,
.order-form:not(:has(input[name="path"]:checked)) #step-need { display: none; }
.company-picker.is-collapsed { display: none; }
.company-picker.is-collapsed + .plan-picker { display: none; }
/* رقاقةُ المقارنة: زرُّ الحذف كان ٢٠ بكسلًا */
.compare-chip-x { min-inline-size: 40px; min-block-size: 40px; display: inline-grid; place-items: center; }

/* ── بطاقةُ الإبراز الداكنة (spotlight) ─────────────────────────
   إبرازٌ تحريريٌّ إداريّ (‎plans.spotlight‎) — لا مشتقٌّ من الاسم ولا
   من شارة ‎best_value‎ العامّة. الألوانُ كحليٌّ وكوبالت وسماويٌّ
   نادر، ثابتةٌ في الوضعين فهي هويّةٌ لا واجهةُ نظامٍ تتبع التفضيل. */
.deal-card.is-spotlight {
    background: var(--navy); border-color: var(--navy); color: #fff;
    box-shadow: 0 12px 32px -12px rgba(16, 27, 53, .55);
}
.deal-card.is-spotlight:hover { border-color: var(--accent); }
.deal-card.is-spotlight .deal-name,
.deal-card.is-spotlight .price-now { color: #fff; }
.deal-card.is-spotlight .deal-company { color: var(--on-navy-soft, #c7d0e4); }
.deal-card.is-spotlight .deal-type {
    background: rgba(255, 255, 255, .1); color: #fff;
}
.deal-card.is-spotlight .price-unit,
.deal-card.is-spotlight .deal-renewal,
.deal-card.is-spotlight .deal-single-term,
.deal-card.is-spotlight .deal-features li { color: var(--on-navy-soft, #c7d0e4); }
/* المدفوعُ مقدّمًا: خلفيّتُه الفاتحةُ الأصليّة (‎--brand-soft‎) تبقى
   من الوضع النهاريّ فتصطدم بنصٍّ فاتحٍ على البطاقة الداكنة — ١.١:١
   تباينًا تقريبًا. فخلفيّةٌ وحروفٌ صريحتان هنا بدل توريث النصِّ وحده. */
.deal-card.is-spotlight .deal-total {
    background: rgba(255, 255, 255, .14); color: #fff;
}
.deal-card.is-spotlight .deal-features li::before { color: var(--accent); }
.deal-card.is-spotlight .price-was { color: rgba(255, 255, 255, .55); }
.deal-card.is-spotlight .term-pill { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }
.deal-card.is-spotlight .term-pill.is-active { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; }
.deal-card.is-spotlight .btn-buy { background: var(--brand-fill); color: #fff; }
.deal-card.is-spotlight .btn-buy:hover { background: var(--brand-dark); }
.deal-card.is-spotlight .btn-coupon { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #fff; }
.deal-card.is-spotlight .deal-order-link { color: var(--on-navy-soft, #c7d0e4); }
.deal-ribbon-spot { background: var(--accent); color: var(--navy); }
.deal-fair-use {
    margin: .5rem 0 0; font-size: var(--fs-xs); line-height: 1.7;
    color: var(--muted);
}
.deal-card.is-spotlight .deal-fair-use { color: var(--on-navy-soft, #c7d0e4); }

/* ── أكوادٌ متعدّدة ────────────────────────────────────────────── */
.coupon-multi { display: flex; flex-direction: column; gap: .4rem; flex: 1 1 auto; min-inline-size: 0; }
.coupon-multi-head { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; }
.deal-actions.has-multi-coupon { flex-direction: column; align-items: stretch; }
.deal-actions.has-multi-coupon .btn-buy { align-self: stretch; text-align: center; }

/* ── بطاقاتُ الرئيسيّة الأفقيّة (المزوّدون/الخدمات) ────────────── */
/* ثلاثةُ أعمدة: الهويّة (شعارٌ ملاصقٌ للاسم، وصفٌ، أسماءُ خططٍ
   حقيقيّة) ثمّ لوحةُ الفيديو (مصغَّرةٌ حقيقيّةٌ حين توجد، وإلا حالةٌ
   صريحة) ثمّ عمودُ الفعل (زرّان، كودٌ إن وُجد، وبديلُ من لا وسيلة
   دفعٍ عنده). */
/* القسمُ في نطاقٍ خاصٍّ به (خلفيّةٌ مائلةٌ للرمادي) — يفصله بصريًّا
   عمّا فوقه وتحته بدل أن يذوب في خلفية الصفحة البيضاء المتكرّرة. */
.hc-providers { padding-block: 2.8rem; background: var(--surface); }
.hc-provider-grid { display: grid; gap: 1.1rem; }
.hc-pcard {
    display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr) 11.5rem;
    gap: 1.3rem; align-items: center;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 1.2rem 1.4rem; box-shadow: var(--sh);
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.hc-pcard:hover { box-shadow: var(--sh-lg, 0 14px 32px -16px rgba(16,27,53,.22)); border-color: var(--line-soft); transform: translateY(-2px); }

/* عمود الهويّة */
.hc-pcard-identity { min-inline-size: 0; }
.hc-pcard-title-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.hc-pcard-title { font-weight: 800; font-size: var(--fs-lg); color: var(--ink); line-height: 1.25; }
.hc-pcard-logo { max-inline-size: 100px; max-block-size: 34px; object-fit: contain; flex: none; }
.hc-pcard-desc { margin: .4rem 0 0; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.55; }
.hc-pcard-plans { margin: .3rem 0 0; font-size: var(--fs-xs); color: var(--brand); font-weight: 700; }
.hc-pcard-price { margin: .5rem 0 0; font-size: var(--fs-sm); color: var(--ink); }
.hc-pcard-price b { color: var(--brand); font-size: var(--fs-md); }

/* عمود الفيديو: بطاقةٌ ملوَّنةٌ بنوع الخدمة — لا رماديّةٌ باهتة */
.hc-pcard-media {
    position: relative; display: block; inline-size: 100%; aspect-ratio: 16/9;
    border-radius: var(--r); overflow: hidden;
    background: linear-gradient(135deg, #3c4494, #262c68); /* بطاقةُ شركةٍ واحدة: لا نوعَ لها */
}
div.hc-pcard-media { cursor: default; }
.hc-pcard-media[data-type="shared"] { background: linear-gradient(135deg, #7c6ae0, #45348f); }
.hc-pcard-media[data-type="cloud"]  { background: linear-gradient(135deg, #3b82f6, #1d3fac); }
.hc-pcard-media[data-type="vps"]    { background: linear-gradient(135deg, #17b8a0, #0a6e63); }
.hc-pcard-media[data-type="dedicated"] { background: linear-gradient(135deg, #e08a35, #9a4c11); }
.hc-pcard-media-bg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: .5; }
.hc-pcard-media-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,12,28,.1), rgba(8,12,28,.68)); }
.hc-pcard-media-badge {
    position: absolute; inset-block-start: .6rem; inset-inline-start: .6rem;
    background: rgba(255,255,255,.18); color: #fff; font-size: var(--fs-xs); font-weight: 700;
    padding: .25rem .65rem; border-radius: var(--radius-pill); max-inline-size: calc(100% - 1.2rem);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hc-pcard-media-caption {
    position: absolute; inset-block-end: .6rem; inset-inline: .7rem;
    color: #fff; font-size: var(--fs-sm); font-weight: 700; text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hc-pcard-media-empty {
    position: absolute; inset-block-end: .8rem; inset-inline: .8rem;
    color: rgba(255,255,255,.85); font-size: var(--fs-xs); text-align: center; line-height: 1.5;
}

/* عمود الفعل */
.hc-pcard-actions { display: flex; flex-direction: column; gap: .5rem; min-inline-size: 0; }
.hc-pcard-actions .hc-btn { width: 100%; }
.hc-pcard-code {
    display: flex; align-items: center; gap: .4rem; inline-size: 100%;
    background: var(--surface); border: 1px dashed var(--line-soft); border-radius: var(--r-sm);
    padding: .4rem .6rem; cursor: pointer; text-align: start; color: var(--ink);
}
.hc-pcard-code-text { font-size: var(--fs-xs); font-weight: 800; }
.hc-pcard-code-action { margin-inline-start: auto; font-size: .68rem; color: var(--muted); white-space: nowrap; }
.hc-pcard-code svg { color: var(--brand); flex: none; }
.hc-pcard-code.is-copied { border-color: var(--success); border-style: solid; }
.hc-pcard-help {
    display: flex; align-items: flex-start; gap: .3rem;
    font-size: .7rem; font-weight: 700; color: var(--brand); text-decoration: none; line-height: 1.35;
}
.hc-pcard-help svg { flex: none; margin-block-start: .1rem; }
.hc-pcard-help:hover { text-decoration: underline; }

@media (max-width: 960px) {
    .hc-pcard { grid-template-columns: 1fr; }
    .hc-pcard-media { max-inline-size: 26rem; }
    .hc-pcard-actions { flex-direction: row; flex-wrap: wrap; }
    .hc-pcard-actions .hc-btn { flex: 1 1 auto; width: auto; }
    .hc-pcard-code, .hc-pcard-help { flex: 1 1 100%; }
}

/* ── مبدّلُ العملة في الترويسة ──────────────────────────────── */
.currency-switch-header {
    display: inline-flex; align-items: center; justify-content: center;
    min-inline-size: 40px; min-block-size: 40px; padding-inline: .5rem;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    color: var(--ink-soft); font-weight: 700; font-size: var(--fs-xs); text-decoration: none;
}
.currency-switch-header:hover { border-color: var(--brand); color: var(--brand); }

/* ── سعرٌ بالدولار غير موثَّق ─────────────────────────────────── */
.deal-usd-unavailable {
    margin: .3rem 0 .6rem; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.7;
    background: var(--surface); border-radius: var(--r-sm); padding: .6rem .8rem;
}
.deal-usd-unavailable a { color: var(--brand); font-weight: 700; }
.deal-card.is-spotlight .deal-usd-unavailable { background: rgba(255,255,255,.08); color: var(--on-navy-soft, #c7d0e4); }
.deal-card.is-spotlight .deal-usd-unavailable a { color: #fff; text-decoration: underline; }

/* نفسُ الحالة داخل بطاقات المُحدِّد والرئيسيّة — بلا خلفيّة بطاقةٍ زائدة */
.choose-price-unavailable { margin: .3rem 0 .8rem; }

/* وداخل خليّة جدول المقارنة — سطرٌ لا صندوق */
.cmp-usd-unavailable { display: inline-block; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.6; }
.cmp-usd-unavailable a { color: var(--brand); font-weight: 700; }