/*
 * Wolf IPTV — Page Builder CSS Bundle (foundation + Phase 2.1 + Slices 1-3 + Slice 6.3 components)
 *
 * AUTO-GENERATED FILE — DO NOT EDIT DIRECTLY
 * Source files in: assets/css/pagebuilder/
 * Build script: dashboard/scripts/build-css.php
 * Generated:    2026-05-10 19:33:54
 */


/* ═══ FROM: _foundation.css ═══ */

/*
 * PROJECT: Wolf IPTV
 * FILE: wolf_iptv/assets/css/pagebuilder/_foundation.css
 *
 * ═══════════════════════════════════════════════════════════════════════════
 *  Page Builder Foundation — UNIFIED with Wolf Foundation (Phase 1)
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *  Phase 1 (2026-05-07) — Design System Unification:
 *  ────────────────────────────────────────────────
 *  الـ --pb-* tokens كلها بقت aliases للـ --wolf-* tokens. ده معناه:
 *
 *    • Single source of truth في core/_variables.css
 *    • أي component جديد في Phase 2 لما يستخدم var(--pb-space-md) هـ
 *      يطلع نفس spacing الـ homepage بالظبط (var(--wolf-space-md))
 *    • مفيش duplicate values, مفيش drift في الـ design
 *    • مفيش .pb-page-blocks override block — الـ values موروثة من :root
 *
 *  Why aliases (instead of removing --pb-* entirely)?
 *  ──────────────────────────────────────────────────
 *    • الـ --pb-* prefix بـ يخلي القارئ يفهم إن ده Page Builder context
 *    • لو يوماً عاوزين نـ override للـ PB pages بس (e.g., wider container)
 *      ده هـ يكون نقطة override واحدة بدل ما نلاحق كل الـ vars
 *    • لو الـ Wolf rebrand اتعمل في المستقبل، الـ PB tokens هـ يـ inherit
 *      التغيير تلقائياً من الـ wolf-* tokens
 *
 *  Loaded by: wolf-pagebuilder.css bundle
 *  Dependencies: wolf-foundation.css (محمّل قبله — يـ provide --wolf-* tokens)
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ════════════════════════════════════════════════════════════════════════
 *  1. Page Builder Token Aliases — كل --pb-* = --wolf-*
 * ════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Spacing Scale (aliases) ───────────────────────────────── */
    --pb-space-xs: var(--wolf-space-xs);
    --pb-space-sm: var(--wolf-space-sm);
    --pb-space-md: var(--wolf-space-md);
    --pb-space-lg: var(--wolf-space-lg);
    --pb-space-xl: var(--wolf-space-xl);
    --pb-space-2xl: var(--wolf-space-2xl);
    --pb-space-3xl: var(--wolf-space-3xl);

    /* ── Section Layout (aliases) ──────────────────────────────── */
    --pb-section-padding-y: var(--wolf-section-padding-y);
    --pb-section-padding-x: var(--wolf-section-padding-x);
    --pb-section-max-width: var(--wolf-container-max);
    --pb-container-narrow: var(--wolf-container-narrow);

    /* ── Hero (aliases) ─────────────────────────────────────────── */
    --pb-hero-min-height: var(--wolf-hero-min-height);
    --pb-hero-padding-y: var(--wolf-hero-padding-y);

    /* ── Border Radius (aliases) ────────────────────────────────── */
    --pb-radius-xs: var(--wolf-radius-xs);
    --pb-radius-sm: var(--wolf-radius-sm);
    --pb-radius-md: var(--wolf-radius-md);
    --pb-radius-lg: var(--wolf-radius-lg);
    --pb-radius: var(--wolf-radius);
    --pb-radius-pill: var(--wolf-radius-pill);

    /* ── Shadows (aliases) ──────────────────────────────────────── */
    --pb-shadow-sm: var(--wolf-shadow-sm);
    --pb-shadow-md: var(--wolf-shadow-md);
    --pb-shadow-lg: var(--wolf-shadow-lg);
    --pb-shadow-glow: var(--wolf-shadow-glow);

    /* ── Transitions (aliases) ──────────────────────────────────── */
    --pb-transition-fast: var(--wolf-transition-fast);
    --pb-transition-base: var(--wolf-transition-base);
    --pb-transition-smooth: var(--wolf-transition-smooth);

    /* ── Typography (aliases) ───────────────────────────────────── */
    --pb-font-hero: var(--wolf-font-hero);
    --pb-font-h2: var(--wolf-font-h2);
    --pb-font-h3: var(--wolf-font-h3);
    --pb-font-body: var(--wolf-font-body);
    --pb-font-sm: var(--wolf-font-sm);
    --pb-font-xs: var(--wolf-font-xs);

    /* ── Component-Specific Tokens (PB-only) ────────────────────── */
    /* Overlay opacity للـ Hero backgrounds — بـ يـ override inline من الـ
       admin (data-overlay-opacity) فبـ يـ start كـ default. */
    --pb-overlay-opacity: 0.5;
}


/* ════════════════════════════════════════════════════════════════════════
 *  2. Page Wrapper
 * ════════════════════════════════════════════════════════════════════════ */
/*
 * ملحوظة (Phase 1): الـ .pb-page-blocks ميـ بـ يـ override --wolf-* tokens
 * بعد كده. الـ values كلها موروثة من :root (wolf-foundation.css).
 *
 * النتيجة: الـ Page Builder pages بقى ليها نفس الـ design language
 * بالظبط زي الـ homepage الحالية — مفيش drift في الـ colors أو spacing.
 */

.pb-page-blocks {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--wolf-bg);
    color: var(--wolf-text);
}

.pb-sections {
    flex: 1;
}


/* ════════════════════════════════════════════════════════════════════════
 *  3. Generic Section Wrapper
 * ════════════════════════════════════════════════════════════════════════ */

.pb-section {
    width: 100%;
    padding: var(--pb-section-padding-y) var(--pb-section-padding-x);
    box-sizing: border-box;
}

.pb-section > *:first-child {
    margin-top: 0;
}

/* Container — للـ content max-width control داخل الـ sections */
.pb-section__container {
    max-width: var(--pb-section-max-width);
    margin-inline: auto;
}

.pb-section__container--narrow {
    max-width: var(--pb-container-narrow);
}


/* ════════════════════════════════════════════════════════════════════════
 *  4. Alignment Helpers
 * ════════════════════════════════════════════════════════════════════════ */

.pb-align--center { text-align: center; }
.pb-align--left   { text-align: start; }
.pb-align--right  { text-align: end; }

/* ═══ FROM: _eyebrow.css ═══ */

/*
 * PROJECT: Wolf IPTV
 * FILE: wolf_iptv/assets/css/pagebuilder/_eyebrow.css
 *
 * ═══════════════════════════════════════════════════════════════════════════
 *  Page Builder Shared Partial — Eyebrow (Slice 1, Day 2)
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *  Single source of truth للـ "eyebrow" element عبر كل الـ Page Builder
 *  components (FAQ, CTA, Hero, Testimonials, Features, Pricing Table).
 *
 *  ─────────────────────────────────────────────────────────────────────
 *  What is an "eyebrow"?
 *  ─────────────────────────────────────────────────────────────────────
 *  Small label فوق الـ section title بـ يلفت النظر ويعطي context.
 *  Examples:
 *    "آراء العملاء"  → above "ماذا يقولون عنا"
 *    "الأسئلة الشائعة" → above "تساؤلات شائعة"
 *    "ابدأ اليوم"   → above "اشترك الآن"
 *
 *  ─────────────────────────────────────────────────────────────────────
 *  Visual treatment: Pill (badge style)
 *  ─────────────────────────────────────────────────────────────────────
 *  - Translucent purple background (--wolf-primary-glow)
 *  - Purple text (--wolf-primary-light)
 *  - Uppercase + bold + letter-spaced
 *  - Pill shape (50px border-radius)
 *
 *  ─────────────────────────────────────────────────────────────────────
 *  Why match the legacy .section-tag style?
 *  ─────────────────────────────────────────────────────────────────────
 *  الـ homepage (legacy index.php) بـ تستخدم .section-tag للـ same purpose
 *  (مثل "آراء العملاء"). لو الـ PB components استخدمت plain text eyebrows،
 *  هـ يكون فيه visual mismatch لما الـ /pricing page بـ تظهر بعد الـ homepage.
 *
 *  الـ .pb-eyebrow بـ يـ replicate الـ .section-tag style بالظبط، بـ
 *  difference واحد: استخدام design tokens بدلاً من hardcoded values.
 *
 *  ─────────────────────────────────────────────────────────────────────
 *  Why a separate partial (not in _foundation.css)?
 *  ─────────────────────────────────────────────────────────────────────
 *  الـ _foundation.css = layout + spacing + section wrappers (structural).
 *  الـ _eyebrow.css = single visual component (presentational).
 *  Separation of concerns — لو في يوم احتجنا تغيير الـ eyebrow style فقط،
 *  point of change واحد.
 *
 *  ─────────────────────────────────────────────────────────────────────
 *  Variants (3):
 *  ─────────────────────────────────────────────────────────────────────
 *    .pb-eyebrow                 → default (purple pill on dark surface)
 *    .pb-eyebrow--on-primary     → for sections with primary purple bg
 *                                  (e.g., CTA primary variant)
 *    .pb-eyebrow--urgent         → red accent (e.g., CTA urgent variant,
 *                                  limited offers)
 *
 *  Loaded by: wolf-pagebuilder.css bundle
 * ═══════════════════════════════════════════════════════════════════════════
 */


/* ════════════════════════════════════════════════════════════════════════
 *  Base — Default eyebrow (purple pill)
 * ════════════════════════════════════════════════════════════════════════ */

.pb-eyebrow {
    display: inline-block;
    background: var(--wolf-primary-glow);
    color: var(--wolf-primary-light);
    font-size: var(--wolf-font-xs);
    font-weight: var(--wolf-weight-black);
    padding: 5px 16px;
    border-radius: var(--wolf-radius-pill);
    margin-bottom: var(--wolf-space-sm);
    letter-spacing: 0.08em;

    /* الـ accessibility — انه ـ keep readable لـ screen readers as inline text */
    line-height: 1.4;
}


/* ════════════════════════════════════════════════════════════════════════
 *  Variant: On primary background
 *  (لما الـ section خلفها purple primary، الـ default eyebrow ميـ ظهر ـش)
 * ════════════════════════════════════════════════════════════════════════ */

.pb-eyebrow--on-primary {
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.95);
}


/* ════════════════════════════════════════════════════════════════════════
 *  Variant: Urgent / red accent
 *  (للـ CTAs المستعجلة، عروض محدودة، إلخ)
 * ════════════════════════════════════════════════════════════════════════ */

.pb-eyebrow--urgent {
    background: rgba(255, 71, 87, 0.15);
    color: #ff4757;
}


/* ════════════════════════════════════════════════════════════════════════
 *  Reduced motion — الـ eyebrow مفيش animation هنا، لكن الـ rule موجودة
 *  للـ future-proofing لو في يوم ضفنا hover effect أو transition.
 * ════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .pb-eyebrow {
        transition: none;
    }
}

/* ═══ FROM: _breadcrumb.css ═══ */

/*
 * PROJECT: Wolf IPTV
 * FILE: wolf_iptv/assets/css/pagebuilder/_breadcrumb.css
 *
 * ═══════════════════════════════════════════════════════════════════════════
 *  Page Builder Breadcrumb — structure + Wolf brand theme combined
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *  Day 14 (CSS Restructure):
 *  Extracted from base.css (structure) + theme-wolf.css (colors/effects)
 *
 *  Selectors:
 *    .pb-breadcrumb            — outer container
 *    .pb-breadcrumb__inner     — flex row
 *    .pb-breadcrumb__link      — link items
 *    .pb-breadcrumb__sep       — separator chevron
 *    .pb-breadcrumb__current   — current page (non-link)
 *
 *  Loaded by: wolf-pagebuilder.css bundle
 *  Dependencies: _foundation.css (uses --pb-* variables)
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ── Structure ────────────────────────────────────────────── */

.pb-breadcrumb {
    width: 100%;
    padding: var(--pb-space-sm) var(--pb-section-padding-x);
}

.pb-breadcrumb__inner {
    max-width: var(--pb-section-max-width);
    margin-inline: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--pb-space-xs);
    font-size: 0.8125rem;
}

.pb-breadcrumb__link {
    text-decoration: none;
    transition: color 0.2s;
}

.pb-breadcrumb__sep {
    font-size: 0.75rem;
    user-select: none;
}

.pb-breadcrumb__current {
    font-weight: 700;
}

/* ── Theme (Wolf brand) ───────────────────────────────────── */

.pb-breadcrumb {
    background: var(--wolf-bg-alt);
    border-bottom: 1px solid var(--wolf-border);
}

.pb-breadcrumb__link {
    color: var(--wolf-sub);
}

.pb-breadcrumb__link:hover {
    color: var(--wolf-primary);
}

.pb-breadcrumb__sep {
    color: var(--wolf-muted);
}

.pb-breadcrumb__current {
    color: var(--wolf-text);
}

/* ═══ FROM: _icon-utility.css ═══ */

/*
 * PROJECT: Wolf IPTV
 * FILE: wolf_iptv/assets/css/pagebuilder/_icon-utility.css
 *
 * ═══════════════════════════════════════════════════════════════════════════
 *  Page Builder Icon Utility — shared .pb-icon class
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *  Day 14 (CSS Restructure):
 *  Extracted from wolf-pagebuilder-base.css (icon utility section)
 *
 *  Used by: hero, cta, faq, stats components for inline SVG icons
 *  Loaded by: wolf-pagebuilder.css bundle
 * ═══════════════════════════════════════════════════════════════════════════
 */

.pb-icon {
    width: 1.5em;
    height: 1.5em;
    fill: currentColor;
    flex-shrink: 0;
}

/* ═══ FROM: hero.css ═══ */

/*
 * PROJECT: Wolf IPTV
 * FILE: wolf_iptv/assets/css/pagebuilder/hero.css
 *
 * ═══════════════════════════════════════════════════════════════════════════
 *  Page Builder — Hero Component (Phase 2.1)
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *  مطابق visual للـ wolf-hero في homepage مع using wolf tokens (Phase 1).
 *  الـ class names كلها بـ .pb-hero__ prefix (BEM) — مفيش collision.
 *
 *  الـ component بـ يستخدم الـ buttons (.btn-wolf-primary, .btn-wolf-ghost)
 *  الموجودة أصلاً في wolf-foundation.css — مفيش re-styling للـ buttons.
 *
 *  Loaded by: wolf-pagebuilder.css bundle (auto-built)
 *  Dependencies: wolf-foundation.css (للـ tokens + buttons)
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ════════════════════════════════════════════════════════════════════════
 *  Hero Section Wrapper
 * ════════════════════════════════════════════════════════════════════════ */

.pb-hero {
    /* الـ section min-height للـ "above the fold" feel */
    min-height: var(--wolf-hero-min-height);
    display: flex;
    align-items: center;
    justify-content: center;

    /* الـ padding override للـ Hero specifically (أكبر من section default) */
    padding-block: var(--wolf-hero-padding-y);
    padding-inline: var(--wolf-section-padding-x);

    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.pb-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 750px;
    width: 100%;
    margin-inline: auto;
}


/* ════════════════════════════════════════════════════════════════════════
 *  Badge (Pill above title)
 * ════════════════════════════════════════════════════════════════════════ */

.pb-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--wolf-space-xs);
    background: var(--wolf-primary-glow);
    border: 1px solid var(--wolf-border);
    border-radius: var(--wolf-radius-pill);
    padding: var(--wolf-space-xs) calc(var(--wolf-space-sm) + 4px);
    font-size: var(--wolf-font-xs);
    font-weight: var(--wolf-weight-bold);
    color: var(--wolf-primary-light);
    margin-bottom: calc(var(--wolf-space-md) + 4px);
}

.pb-hero__badge-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wolf-green);
    animation: pb-hero-pulse 2s infinite;
}

@keyframes pb-hero-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.2); }
}


/* ════════════════════════════════════════════════════════════════════════
 *  Title (Big headline)
 * ════════════════════════════════════════════════════════════════════════ */

.pb-hero__title {
    font-size: var(--wolf-font-hero);
    font-weight: var(--wolf-weight-black);
    line-height: var(--wolf-line-tight);
    margin: 0 0 var(--wolf-space-sm) 0;
    color: var(--wolf-text);
}

/* الـ accent span — gradient text effect */
.pb-hero__title-accent {
    background: linear-gradient(
        135deg,
        var(--wolf-primary),
        var(--wolf-primary-light)
    );
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
}


/* ════════════════════════════════════════════════════════════════════════
 *  Description
 * ════════════════════════════════════════════════════════════════════════ */

.pb-hero__description {
    font-size: 1.0625rem; /* 17px */
    color: var(--wolf-sub);
    margin: 0 0 calc(var(--wolf-space-lg) + 4px) 0;
    line-height: var(--wolf-line-loose);
}

/* الـ <strong> جوة الـ description — يـ show بـ wolf-text */
.pb-hero__description strong {
    color: var(--wolf-text);
    font-weight: var(--wolf-weight-bold);
}


/* ════════════════════════════════════════════════════════════════════════
 *  CTAs (Buttons)
 * ════════════════════════════════════════════════════════════════════════ */

.pb-hero__ctas {
    display: flex;
    gap: var(--wolf-space-sm);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: calc(var(--wolf-space-2xl) - 14px);
}

/* Alignment-aware justification للـ CTAs */
.pb-align--center .pb-hero__ctas { justify-content: center; }
.pb-align--left   .pb-hero__ctas { justify-content: flex-start; }
.pb-align--right  .pb-hero__ctas { justify-content: flex-end; }


/* ════════════════════════════════════════════════════════════════════════
 *  Stats Row
 * ════════════════════════════════════════════════════════════════════════ */

.pb-hero__stats {
    display: flex;
    align-items: center;
    gap: 0; /* الـ separators بـ يـ provide gap */
    flex-wrap: wrap;
}

/* Alignment-aware للـ stats */
.pb-align--center .pb-hero__stats { justify-content: center; }
.pb-align--left   .pb-hero__stats { justify-content: flex-start; }
.pb-align--right  .pb-hero__stats { justify-content: flex-end; }

.pb-hero__stat {
    text-align: center;
    padding-inline: calc(var(--wolf-space-md) + 4px);
}

.pb-hero__stat-number {
    display: block;
    font-size: 1.5rem; /* 24px */
    font-weight: var(--wolf-weight-black);
    color: var(--wolf-primary-light);
    line-height: 1;
    margin-bottom: 4px;
}

.pb-hero__stat-label {
    font-size: var(--wolf-font-xs);
    color: var(--wolf-muted);
    font-weight: var(--wolf-weight-bold);
}

.pb-hero__stat-sep {
    width: 1px;
    height: 32px;
    background: var(--wolf-border);
    flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════════════════
 *  Responsive (Mobile)
 * ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .pb-hero {
        min-height: auto;
        padding-block: calc(var(--wolf-space-2xl) + 16px) var(--wolf-space-2xl);
    }

    .pb-hero__stats {
        gap: var(--wolf-space-sm);
    }

    .pb-hero__stat-sep {
        display: none;
    }

    .pb-hero__stat {
        min-width: 40%;
        padding-inline: var(--wolf-space-sm);
    }
}

@media (max-width: 480px) {
    .pb-hero__ctas {
        flex-direction: column;
        align-items: stretch;
    }

    /* الـ buttons تـ fill width على الموبايل */
    .pb-hero__ctas .btn-wolf-primary,
    .pb-hero__ctas .btn-wolf-ghost {
        width: 100%;
        justify-content: center;
    }
}

/* ═══ FROM: rich-text.css ═══ */

/*
 * PROJECT: Wolf IPTV
 * FILE: wolf_iptv/assets/css/pagebuilder/rich-text.css
 *
 * ═══════════════════════════════════════════════════════════════════════════
 *  Page Builder — Rich Text Component (Phase 2.1)
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *  Optimized للـ legal pages (/privacy, /terms, /refund) و articles.
 *  Typography محسّن للقراءة الطويلة:
 *    - line-height مريح (1.7-1.9)
 *    - max-width على الـ narrow container (66ch ≈ optimal reading width)
 *    - spacing بين الـ paragraphs + headings
 *
 *  Loaded by: wolf-pagebuilder.css bundle
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ════════════════════════════════════════════════════════════════════════
 *  Section Wrapper
 * ════════════════════════════════════════════════════════════════════════ */

.pb-rich-text {
    color: var(--wolf-text);
}

.pb-rich-text__container {
    max-width: var(--wolf-container-max);
    margin-inline: auto;
}

.pb-rich-text__container--narrow {
    /* الـ narrow variant — للـ legal text اللي محتاج readability عالي */
    max-width: 66ch;
}


/* ════════════════════════════════════════════════════════════════════════
 *  Title (optional h2)
 * ════════════════════════════════════════════════════════════════════════ */

.pb-rich-text__title {
    font-size: var(--wolf-font-h2);
    font-weight: var(--wolf-weight-black);
    line-height: var(--wolf-line-tight);
    color: var(--wolf-text);
    margin: 0 0 var(--wolf-space-lg) 0;
}


/* ════════════════════════════════════════════════════════════════════════
 *  Content (sanitized HTML)
 * ════════════════════════════════════════════════════════════════════════ */

.pb-rich-text__content {
    color: var(--wolf-text);
    font-size: var(--wolf-font-body);
    line-height: var(--wolf-line-loose);
}

/* ── Headings داخل الـ content ── */
.pb-rich-text__content h2 {
    font-size: var(--wolf-font-h2);
    font-weight: var(--wolf-weight-bold);
    line-height: var(--wolf-line-tight);
    margin: var(--wolf-space-xl) 0 var(--wolf-space-sm) 0;
    color: var(--wolf-text);
}

.pb-rich-text__content h3 {
    font-size: var(--wolf-font-h3);
    font-weight: var(--wolf-weight-bold);
    line-height: var(--wolf-line-tight);
    margin: var(--wolf-space-lg) 0 var(--wolf-space-xs) 0;
    color: var(--wolf-text);
}

.pb-rich-text__content h4 {
    font-size: 1.125rem; /* 18px */
    font-weight: var(--wolf-weight-bold);
    line-height: var(--wolf-line-tight);
    margin: var(--wolf-space-md) 0 var(--wolf-space-xs) 0;
    color: var(--wolf-text);
}

/* أول heading في الـ content ميـ بـ ياخد margin-top */
.pb-rich-text__content > *:first-child {
    margin-top: 0;
}

/* ── Paragraphs ── */
.pb-rich-text__content p {
    margin: 0 0 var(--wolf-space-sm) 0;
    color: var(--wolf-sub);
}

/* ── Lists ── */
.pb-rich-text__content ul,
.pb-rich-text__content ol {
    margin: 0 0 var(--wolf-space-sm) 0;
    padding-inline-start: var(--wolf-space-md);
    color: var(--wolf-sub);
}

.pb-rich-text__content li {
    margin-bottom: var(--wolf-space-xs);
    line-height: var(--wolf-line-loose);
}

/* الـ nested lists */
.pb-rich-text__content li > ul,
.pb-rich-text__content li > ol {
    margin: var(--wolf-space-xs) 0 0 0;
}

/* ── Inline emphasis ── */
.pb-rich-text__content strong,
.pb-rich-text__content b {
    color: var(--wolf-text);
    font-weight: var(--wolf-weight-bold);
}

.pb-rich-text__content em,
.pb-rich-text__content i {
    font-style: italic;
}

/* ── Links ── */
.pb-rich-text__content a {
    color: var(--wolf-primary-light);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: var(--wolf-transition-fast);
}

.pb-rich-text__content a:hover {
    color: var(--wolf-primary);
    text-decoration-thickness: 2px;
}

/* ── Blockquote ── */
.pb-rich-text__content blockquote {
    margin: var(--wolf-space-md) 0;
    padding: var(--wolf-space-sm) var(--wolf-space-md);
    border-inline-start: 3px solid var(--wolf-primary);
    background: var(--wolf-surface);
    border-radius: 0 var(--wolf-radius-sm) var(--wolf-radius-sm) 0;
    color: var(--wolf-sub);
    font-style: italic;
}

/* ── Horizontal rule ── */
.pb-rich-text__content hr {
    border: 0;
    border-top: 1px solid var(--wolf-border);
    margin: var(--wolf-space-lg) 0;
}


/* ════════════════════════════════════════════════════════════════════════
 *  Responsive
 * ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .pb-rich-text__title {
        margin-bottom: var(--wolf-space-md);
    }

    .pb-rich-text__content h2 {
        margin-top: var(--wolf-space-lg);
    }
}

/* ═══ FROM: cta.css ═══ */

/*
 * PROJECT: Wolf IPTV
 * FILE: wolf_iptv/assets/css/pagebuilder/cta.css
 *
 * ═══════════════════════════════════════════════════════════════════════════
 *  Page Builder — CTA Component (Phase 2.1)
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *  3 variants:
 *    .pb-cta--primary  → wolf-primary background (loud, conversion-focused)
 *    .pb-cta--subtle   → surface background (calm, secondary CTAs)
 *    .pb-cta--urgent   → red accent (limited offers)
 *
 *  Layout: centered card مع title + description + button.
 *  Wraps within wolf-section padding (handled by .pb-section).
 *
 *  Loaded by: wolf-pagebuilder.css bundle
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ════════════════════════════════════════════════════════════════════════
 *  Section Wrapper (shared)
 * ════════════════════════════════════════════════════════════════════════ */

.pb-cta {
    position: relative;
    overflow: hidden;
}

.pb-cta__inner {
    max-width: var(--wolf-container-narrow);
    margin-inline: auto;
    text-align: center;
    padding: var(--wolf-space-2xl) var(--wolf-space-md);
    border-radius: var(--wolf-radius);
    transition: var(--wolf-transition-base);
}


/* ════════════════════════════════════════════════════════════════════════
 *  Inner Pieces (shared)
 * ════════════════════════════════════════════════════════════════════════ */

.pb-cta__eyebrow {
    /* DEPRECATED: legacy class. Renderer now uses .pb-eyebrow shared partial.
     * Rule kept only as fallback for any legacy section_data still referencing
     * the old class. Will be removed in cleanup pass after Slice 4. */
    display: inline-block;
    font-size: var(--wolf-font-xs);
    font-weight: var(--wolf-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--wolf-space-xs);
}

.pb-cta__title {
    font-size: var(--wolf-font-h2);
    font-weight: var(--wolf-weight-black);
    line-height: var(--wolf-line-tight);
    margin: 0 0 var(--wolf-space-sm) 0;
}

.pb-cta__description {
    font-size: var(--wolf-font-body);
    line-height: var(--wolf-line-loose);
    margin: 0 0 var(--wolf-space-lg) 0;
    max-width: 560px;
    margin-inline: auto;
}

/* الـ button — re-styled لكل variant عبر cascade */
.pb-cta__button {
    /* الـ btn-wolf-primary classes provide الـ default — هنا نـ override per variant */
}


/* ════════════════════════════════════════════════════════════════════════
 *  Variant: Primary (loud, purple background)
 * ════════════════════════════════════════════════════════════════════════ */

.pb-cta--primary .pb-cta__inner {
    background: linear-gradient(
        135deg,
        var(--wolf-primary),
        var(--wolf-primary-dark)
    );
    box-shadow: var(--wolf-shadow-lg);
}

.pb-cta--primary .pb-cta__eyebrow {
    color: rgba(255, 255, 255, 0.85);
}

/* ── Slice 1 Day 2: shared eyebrow on primary CTA ──
 * The shared .pb-eyebrow partial uses purple bg by default. On the primary
 * CTA variant (which already has a purple gradient bg), we override to a
 * white-tinted treatment for contrast. */
.pb-cta--primary .pb-eyebrow {
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.95);
}

.pb-cta--primary .pb-cta__title {
    color: #ffffff;
}

.pb-cta--primary .pb-cta__description {
    color: rgba(255, 255, 255, 0.9);
}

/* الـ button reverse على primary bg */
.pb-cta--primary .pb-cta__button {
    background: #ffffff;
    color: var(--wolf-primary);
}

.pb-cta--primary .pb-cta__button:hover {
    background: var(--wolf-bg);
    color: var(--wolf-primary-light);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}


/* ════════════════════════════════════════════════════════════════════════
 *  Variant: Subtle (surface background, calm)
 * ════════════════════════════════════════════════════════════════════════ */

.pb-cta--subtle .pb-cta__inner {
    background: var(--wolf-surface);
    border: 1px solid var(--wolf-border);
}

.pb-cta--subtle .pb-cta__eyebrow {
    color: var(--wolf-primary-light);
}

.pb-cta--subtle .pb-cta__title {
    color: var(--wolf-text);
}

.pb-cta--subtle .pb-cta__description {
    color: var(--wolf-sub);
}

/* الـ button بـ يستخدم الـ default btn-wolf-primary styling */


/* ════════════════════════════════════════════════════════════════════════
 *  Variant: Urgent (red accent, limited offers)
 * ════════════════════════════════════════════════════════════════════════ */

.pb-cta--urgent .pb-cta__inner {
    background: var(--wolf-surface);
    border: 1px solid var(--wolf-red);
    box-shadow: 0 8px 30px rgba(200, 16, 46, 0.12);
}

.pb-cta--urgent .pb-cta__eyebrow {
    color: var(--wolf-red);
}

/* ── Slice 1 Day 2: shared eyebrow on urgent CTA ──
 * Use the urgent variant of the shared partial to convey urgency. */
.pb-cta--urgent .pb-eyebrow {
    background: rgba(255, 71, 87, 0.15);
    color: var(--wolf-red);
}

.pb-cta--urgent .pb-cta__title {
    color: var(--wolf-text);
}

.pb-cta--urgent .pb-cta__description {
    color: var(--wolf-sub);
}

/* الـ button — red accent */
.pb-cta--urgent .pb-cta__button {
    background: var(--wolf-red);
    color: #ffffff;
}

.pb-cta--urgent .pb-cta__button:hover {
    background: var(--red-hover);
    box-shadow: 0 8px 30px rgba(200, 16, 46, 0.25);
}


/* ════════════════════════════════════════════════════════════════════════
 *  Responsive
 * ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .pb-cta__inner {
        padding: var(--wolf-space-xl) var(--wolf-space-md);
    }

    .pb-cta__description {
        margin-bottom: var(--wolf-space-md);
    }
}

@media (max-width: 480px) {
    .pb-cta__inner {
        padding: var(--wolf-space-lg) var(--wolf-space-sm);
    }
}

/* ═══ FROM: faq.css ═══ */

/*
 * PROJECT: Wolf IPTV
 * FILE: wolf_iptv/assets/css/pagebuilder/faq.css
 *
 * ═══════════════════════════════════════════════════════════════════════════
 *  Page Builder — FAQ Component (Slice 1)
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *  2 layouts:
 *    .pb-faq--accordion    → default, single column, collapsible
 *    .pb-faq--two-columns  → desktop: 2 cols, mobile: stacked (still accordion)
 *
 *  Markup contract (من FaqRenderer):
 *    <section class="pb-faq pb-faq--{layout} pb-section">
 *      <div class="pb-faq__inner">
 *        <header class="pb-faq__header">
 *          <span class="pb-eyebrow">...</span>            ← optional, shared partial
 *          <h2 class="pb-faq__title">...</h2>
 *          <p class="pb-faq__description">...</p>       ← optional
 *        </header>
 *        <ul class="pb-faq__list" role="list">
 *          <li class="pb-faq__item">
 *            <details class="pb-faq__details">
 *              <summary class="pb-faq__question">
 *                <span class="pb-faq__question-text">...</span>
 *                <span class="pb-faq__icon" aria-hidden="true"></span>
 *              </summary>
 *              <div class="pb-faq__answer">...</div>
 *            </details>
 *          </li>
 *        </ul>
 *      </div>
 *    </section>
 *
 *  ─────────────────────────────────────────────────────────────────────
 *  Why match wolf-home.css FAQ style?
 *  ─────────────────────────────────────────────────────────────────────
 *  الـ homepage الحالية فيها FAQ section بـ نفس الـ visual treatment.
 *  بدلاً من تصميم جديد، نـ match الـ style عشان الـ user experience consistent
 *  لما الـ /pricing page تـ contain نفس الـ component.
 *
 *  Key differences عن الـ wolf-home FAQ:
 *    1. <details>/<summary> بدل <button> + manual aria-expanded (modern + a11y)
 *    2. Chevron icon = pure CSS (مش SVG sprite) — أبسط, no JS needed for icon
 *    3. Two-columns layout (جديد — للـ /faq full page)
 *    4. Smooth animation (overrides native instant snap)
 *
 *  Loaded by: wolf-pagebuilder.css bundle
 * ═══════════════════════════════════════════════════════════════════════════
 */


/* ════════════════════════════════════════════════════════════════════════
 *  Section Wrapper
 * ════════════════════════════════════════════════════════════════════════ */

.pb-faq {
    position: relative;
}

.pb-faq__inner {
    max-width: var(--wolf-container-narrow);
    margin-inline: auto;
}

/* لو layout = two-columns، الـ inner widens للـ container الكامل */
.pb-faq--two-columns .pb-faq__inner {
    max-width: var(--wolf-container-max);
}


/* ════════════════════════════════════════════════════════════════════════
 *  Header (eyebrow + title + description)
 * ════════════════════════════════════════════════════════════════════════ */

.pb-faq__header {
    text-align: center;
    margin-bottom: var(--wolf-space-xl);
}

/* Note: eyebrow uses shared .pb-eyebrow class (see _eyebrow.css partial) */

.pb-faq__title {
    font-size: var(--wolf-font-h2);
    font-weight: var(--wolf-weight-black);
    line-height: var(--wolf-line-tight);
    color: var(--wolf-text);
    margin: 0 0 var(--wolf-space-sm) 0;
}

.pb-faq__description {
    font-size: var(--wolf-font-body);
    line-height: var(--wolf-line-loose);
    color: var(--wolf-sub);
    max-width: 600px;
    margin: 0 auto;
}


/* ════════════════════════════════════════════════════════════════════════
 *  List Container
 * ════════════════════════════════════════════════════════════════════════ */

.pb-faq__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wolf-space-xs);
}


/* ════════════════════════════════════════════════════════════════════════
 *  Item (the <li> wrapper)
 * ════════════════════════════════════════════════════════════════════════ */

.pb-faq__item {
    margin: 0;
}


/* ════════════════════════════════════════════════════════════════════════
 *  Details Card (الـ <details> wrapping each Q+A)
 * ════════════════════════════════════════════════════════════════════════ */

.pb-faq__details {
    background: var(--wolf-surface);
    border: 1px solid var(--wolf-border2);
    border-radius: var(--wolf-radius-sm);
    overflow: hidden;
    transition: border-color var(--wolf-transition-base);
}

.pb-faq__details[open] {
    border-color: var(--wolf-primary);
}

.pb-faq__details:hover:not([open]) {
    border-color: var(--wolf-border);
}


/* ════════════════════════════════════════════════════════════════════════
 *  Question (الـ <summary>)
 * ════════════════════════════════════════════════════════════════════════ */

/* Reset native <summary> styling */
.pb-faq__question {
    list-style: none;
    cursor: pointer;
    padding: var(--wolf-space-sm) var(--wolf-space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wolf-space-sm);
    color: var(--wolf-text);
    font-size: var(--wolf-font-body);
    font-weight: var(--wolf-weight-bold);
    line-height: var(--wolf-line-tight);
    user-select: none;
}

/* Webkit-specific reset (Safari/Chrome show a triangle by default) */
.pb-faq__question::-webkit-details-marker {
    display: none;
}

/* Firefox-specific reset */
.pb-faq__question::marker {
    display: none;
    content: "";
}

.pb-faq__question-text {
    flex: 1;
    text-align: start;
}

/* Focus ring (keyboard accessibility) */
.pb-faq__question:focus-visible {
    outline: 2px solid var(--wolf-primary);
    outline-offset: 2px;
    border-radius: var(--wolf-radius-xs);
}


/* ════════════════════════════════════════════════════════════════════════
 *  Chevron Icon (pure CSS — مفيش SVG dependency)
 * ════════════════════════════════════════════════════════════════════════ */

/*
 * pure CSS chevron via 2 borders (right + bottom) of a square,
 * rotated 45deg → looks like ⌄. لما الـ details open، rotate للـ ⌃.
 * بـ نستخدم الـ flex-shrink: 0 عشان ميـ تكسر ـش مع الـ long questions.
 */
.pb-faq__icon {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--wolf-muted);
    border-bottom: 2px solid var(--wolf-muted);
    transform: rotate(45deg);
    transform-origin: 65% 65%;
    transition:
        transform var(--wolf-transition-base),
        border-color var(--wolf-transition-base);
    margin-top: -4px; /* visual centering compensation للـ rotated arrow */
}

.pb-faq__details[open] .pb-faq__icon {
    transform: rotate(225deg);
    border-color: var(--wolf-primary);
}


/* ════════════════════════════════════════════════════════════════════════
 *  Answer (the body content)
 * ════════════════════════════════════════════════════════════════════════ */

.pb-faq__answer {
    padding: 0 var(--wolf-space-md) var(--wolf-space-sm) var(--wolf-space-md);
    color: var(--wolf-sub);
    font-size: var(--wolf-font-sm);
    line-height: var(--wolf-line-loose);
}

.pb-faq__answer > *:first-child {
    margin-top: 0;
}

.pb-faq__answer > *:last-child {
    margin-bottom: 0;
}

/* Sanitized inline elements (الـ HtmlSanitizer بيسمح بدول) */
.pb-faq__answer p {
    margin: 0 0 var(--wolf-space-xs) 0;
}

.pb-faq__answer a {
    color: var(--wolf-primary-light);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--wolf-transition-fast);
}

.pb-faq__answer a:hover {
    color: var(--wolf-primary);
}

.pb-faq__answer strong,
.pb-faq__answer b {
    color: var(--wolf-text);
    font-weight: var(--wolf-weight-bold);
}


/* ════════════════════════════════════════════════════════════════════════
 *  Layout Variant: Two-columns (desktop)
 * ════════════════════════════════════════════════════════════════════════ */

.pb-faq--two-columns .pb-faq__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wolf-space-xs);
}

@media (min-width: 768px) {
    .pb-faq--two-columns .pb-faq__list {
        grid-template-columns: 1fr 1fr;
        gap: var(--wolf-space-sm);
    }
}


/* ════════════════════════════════════════════════════════════════════════
 *  Animation (smooth open/close)
 *  ─────────────────────────────────────────────────────────────────────
 *  Native <details> بـ يـ snap instantly. الـ JS module (faq.js) بـ يـ
 *  handle الـ smooth height animation manually (بدلاً من CSS-only — لأن
 *  CSS مفيش way يـ animate من 0 لـ auto بشكل reliable عبر الـ browsers).
 *
 *  لكن نـ provide CSS fallback (opacity fade) للـ browsers اللي ميـ شغل
 *  ـش الـ JS:
 * ════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
    .pb-faq__answer {
        animation: pb-faq-fade-in 0.25s ease-out;
    }
}

@keyframes pb-faq-fade-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ════════════════════════════════════════════════════════════════════════
 *  Reduced motion (accessibility)
 * ════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .pb-faq__details,
    .pb-faq__icon {
        transition: none;
    }
    .pb-faq__answer {
        animation: none;
    }
}

/* ═══ FROM: testimonials.css ═══ */

/*
 * PROJECT: Wolf IPTV
 * FILE: wolf_iptv/assets/css/pagebuilder/testimonials.css
 *
 * ═══════════════════════════════════════════════════════════════════════════
 *  Page Builder Component — Testimonials (Slice 2)
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *  Markup contract (من TestimonialsRenderer):
 *    <section class="pb-testimonials pb-section" aria-labelledby="...">
 *      <div class="pb-testimonials__inner">
 *        <header class="pb-testimonials__header">
 *          <span class="pb-eyebrow">...</span>             ← shared partial
 *          <h2 class="pb-testimonials__title">...</h2>
 *          <p class="pb-testimonials__description">...</p>
 *        </header>
 *        <ul class="pb-testimonials__list" role="list">
 *          <li class="pb-testimonials__item">
 *            <article class="pb-testimonials__card" itemscope ...>
 *              <div class="pb-testimonials__rating" ...>
 *                <span class="pb-testimonials__star pb-testimonials__star--filled"></span>×N
 *                <span class="pb-testimonials__star pb-testimonials__star--empty"></span>×(5-N)
 *              </div>
 *              <blockquote class="pb-testimonials__text">...</blockquote>
 *              <footer class="pb-testimonials__author">
 *                <div class="pb-testimonials__avatar">أ</div>
 *                <cite class="pb-testimonials__name">...</cite>
 *                <a class="pb-testimonials__twitter" href="...">...</a>
 *              </footer>
 *            </article>
 *          </li>
 *        </ul>
 *      </div>
 *    </section>
 *
 *  ─────────────────────────────────────────────────────────────────────
 *  Design philosophy:
 *  ─────────────────────────────────────────────────────────────────────
 *  - Mobile-first: 1 column → 2 cols (tablet) → 3 cols (desktop)
 *  - Visual style mirrors the legacy .review-card (homepage testimonials)
 *  - Decorative quote mark via ::before (no extra DOM nodes)
 *  - Pure CSS stars (font-based via Tabler icons in Renderer? No — we use
 *    CSS-only star shapes via SVG background image for zero JS dependency)
 *
 *  ─────────────────────────────────────────────────────────────────────
 *  Why <ul role="list">?
 *  ─────────────────────────────────────────────────────────────────────
 *  Safari/iOS strips the implicit list role لما `list-style: none` ـ موجود.
 *  `role="list"` بـ يعيد الـ semantic — required for AEO + screen readers.
 *
 *  ─────────────────────────────────────────────────────────────────────
 *  Performance considerations (Mobile-First):
 *  ─────────────────────────────────────────────────────────────────────
 *  - مفيش images (avatars = CSS gradients)
 *  - الـ stars = inline SVG icons (0 HTTP requests)
 *  - الـ hover effects على desktop فقط (مفيش hover-on-mobile lag)
 *  - الـ transitions respect prefers-reduced-motion
 *
 *  Loaded by: wolf-pagebuilder.css bundle
 * ═══════════════════════════════════════════════════════════════════════════
 */


/* ════════════════════════════════════════════════════════════════════════
 *  Section wrapper
 * ════════════════════════════════════════════════════════════════════════ */

.pb-testimonials {
    padding: var(--wolf-space-xl) 0;
}

.pb-testimonials__inner {
    max-width: var(--wolf-content-max, 1200px);
    margin: 0 auto;
    padding: 0 var(--wolf-space-md);
}


/* ════════════════════════════════════════════════════════════════════════
 *  Header
 * ════════════════════════════════════════════════════════════════════════ */

.pb-testimonials__header {
    text-align: center;
    margin-bottom: var(--wolf-space-xl);
}

.pb-testimonials__title {
    font-size: var(--wolf-font-h2);
    font-weight: var(--wolf-weight-black);
    line-height: var(--wolf-line-tight);
    color: var(--wolf-text);
    margin: 0 0 var(--wolf-space-sm);
    letter-spacing: -0.02em;
}

.pb-testimonials__description {
    font-size: var(--wolf-font-md);
    color: var(--wolf-sub);
    line-height: var(--wolf-line-base);
    max-width: 600px;
    margin: 0 auto;
}


/* ════════════════════════════════════════════════════════════════════════
 *  List & items grid
 *  Mobile-first: 1 column → 2 → 3 at progressive breakpoints
 * ════════════════════════════════════════════════════════════════════════ */

.pb-testimonials__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wolf-space-md);
}

@media (min-width: 768px) {
    .pb-testimonials__list {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 992px) {
    .pb-testimonials__list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.pb-testimonials__item {
    /* The <li> is just a wrapper; the <article> handles styling */
    display: flex;
}


/* ════════════════════════════════════════════════════════════════════════
 *  Card (the <article>)
 * ════════════════════════════════════════════════════════════════════════ */

.pb-testimonials__card {
    flex: 1;
    background: var(--wolf-surface);
    border: 1px solid var(--wolf-border2);
    border-radius: var(--wolf-radius);
    padding: 28px 24px;
    position: relative;
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}

/* Decorative opening quote mark */
.pb-testimonials__card::before {
    content: '\201C';  /* Left double quotation mark */
    position: absolute;
    top: 14px;
    left: 18px;
    font-size: 48px;
    font-weight: 900;
    color: var(--wolf-primary);
    opacity: 0.15;
    line-height: 1;
    pointer-events: none;
    font-family: 'Georgia', serif;  /* Better quote mark glyph */
}

/* Hover effect — desktop only (no hover state on touch devices) */
@media (hover: hover) {
    .pb-testimonials__card:hover {
        border-color: var(--wolf-primary);
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(124, 77, 255, 0.06);
    }
}


/* ════════════════════════════════════════════════════════════════════════
 *  Star rating
 * ════════════════════════════════════════════════════════════════════════ */

.pb-testimonials__rating {
    display: flex;
    gap: 3px;
    margin-bottom: var(--wolf-space-sm);
    color: var(--wolf-gold);
}

/* The stars themselves — inline SVG via mask-image for color control */
.pb-testimonials__star {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.pb-testimonials__star--filled {
    color: var(--wolf-gold);
}

.pb-testimonials__star--empty {
    color: var(--wolf-gold);
    opacity: 0.25;
}


/* ════════════════════════════════════════════════════════════════════════
 *  Review text (the <blockquote>)
 * ════════════════════════════════════════════════════════════════════════ */

.pb-testimonials__text {
    font-size: var(--wolf-font-md);
    color: var(--wolf-text);
    line-height: 1.85;
    margin: 0 0 var(--wolf-space-md) 0;
    font-style: normal;       /* override default <blockquote> italic */
    font-weight: 500;
    /* Slight padding-top to clear the decorative quote mark */
    padding-top: var(--wolf-space-xs);
    flex: 1;                  /* push the author footer to the bottom */
}


/* ════════════════════════════════════════════════════════════════════════
 *  Author footer
 * ════════════════════════════════════════════════════════════════════════ */

.pb-testimonials__author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: var(--wolf-space-md);
    border-top: 1px solid var(--wolf-border2);
}

.pb-testimonials__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--wolf-primary-glow);
    border: 2px solid var(--wolf-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: var(--wolf-weight-black);
    color: var(--wolf-primary-light);
    flex-shrink: 0;
    /* Ensure Arabic letter is properly centered */
    line-height: 1;
}

.pb-testimonials__name {
    font-size: var(--wolf-font-sm);
    font-weight: var(--wolf-weight-black);
    color: var(--wolf-text);
    font-style: normal;       /* override default <cite> italic */
    flex: 1;
    min-width: 0;
    /* Truncate long names gracefully */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ════════════════════════════════════════════════════════════════════════
 *  Twitter link (optional verification badge)
 * ════════════════════════════════════════════════════════════════════════ */

.pb-testimonials__twitter {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    color: var(--wolf-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s, background-color 0.2s;
    /* Twitter X logo via mask */
    -webkit-mask-image: none;
    mask-image: none;
}

.pb-testimonials__twitter::before {
    content: '';
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/></svg>");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

@media (hover: hover) {
    .pb-testimonials__twitter:hover {
        color: var(--wolf-primary-light);
        background-color: var(--wolf-primary-glow);
    }
}


/* ════════════════════════════════════════════════════════════════════════
 *  Reduced motion respect
 * ════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .pb-testimonials__card,
    .pb-testimonials__twitter {
        transition: none;
    }
    .pb-testimonials__card:hover {
        transform: none;
    }
}

/* ═══ FROM: features-grid.css ═══ */

/*
 * PROJECT: Wolf IPTV
 * FILE: wolf_iptv/assets/css/pagebuilder/features-grid.css
 *
 * ═══════════════════════════════════════════════════════════════════════════
 *  Page Builder Component — Features Grid (Slice 3)
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *  Markup contract (من FeaturesGridRenderer):
 *    <section class="pb-features pb-features--{auto|2|3|4} pb-section" ...>
 *      <div class="pb-features__inner">
 *        <header class="pb-features__header">
 *          <span class="pb-eyebrow">...</span>
 *          <h2 class="pb-features__title">...</h2>
 *          <p class="pb-features__description">...</p>
 *        </header>
 *        <ul class="pb-features__list" role="list">
 *          <li class="pb-features__item">
 *            <article class="pb-features__card" itemscope ...>
 *              <div class="pb-features__icon">...</div>
 *              <h3 class="pb-features__item-title">...</h3>
 *              <p class="pb-features__item-description">...</p>
 *            </article>
 *          </li>
 *        </ul>
 *      </div>
 *    </section>
 *
 *  ─────────────────────────────────────────────────────────────────────
 *  Hybrid columns control:
 *  ─────────────────────────────────────────────────────────────────────
 *    .pb-features--auto  → 1 → 2 → 3 → 4 cols (responsive)
 *    .pb-features--2     → 1 mobile, 2 desktop
 *    .pb-features--3     → 1 mobile, 2 tablet, 3 desktop
 *    .pb-features--4     → 1 mobile, 2 tablet, 4 desktop
 *
 *  Mobile-first base = 1 col. Override at breakpoints based on variant.
 *
 *  ─────────────────────────────────────────────────────────────────────
 *  Visual style:
 *  ─────────────────────────────────────────────────────────────────────
 *  - Card with subtle border + glow on hover (matches Testimonials)
 *  - Icon in circular tint with primary color
 *  - Title bold + description muted
 *
 *  Loaded by: wolf-pagebuilder.css bundle
 * ═══════════════════════════════════════════════════════════════════════════
 */


/* ════════════════════════════════════════════════════════════════════════
 *  Section wrapper
 * ════════════════════════════════════════════════════════════════════════ */

.pb-features {
    padding: var(--wolf-space-xl) 0;
}

.pb-features__inner {
    max-width: var(--wolf-content-max, 1200px);
    margin: 0 auto;
    padding: 0 var(--wolf-space-md);
}


/* ════════════════════════════════════════════════════════════════════════
 *  Header
 * ════════════════════════════════════════════════════════════════════════ */

.pb-features__header {
    text-align: center;
    margin-bottom: var(--wolf-space-xl);
}

.pb-features__title {
    font-size: var(--wolf-font-h2);
    font-weight: var(--wolf-weight-black);
    line-height: var(--wolf-line-tight);
    color: var(--wolf-text);
    margin: 0 0 var(--wolf-space-sm);
    letter-spacing: -0.02em;
}

.pb-features__description {
    font-size: var(--wolf-font-md);
    color: var(--wolf-sub);
    line-height: var(--wolf-line-base);
    max-width: 600px;
    margin: 0 auto;
}


/* ════════════════════════════════════════════════════════════════════════
 *  List & items grid (mobile-first base)
 * ════════════════════════════════════════════════════════════════════════ */

.pb-features__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;       /* Mobile: 1 column */
    gap: var(--wolf-space-md);
}

.pb-features__item {
    display: flex;
}


/* ════════════════════════════════════════════════════════════════════════
 *  Layout variants — hybrid columns control
 * ════════════════════════════════════════════════════════════════════════ */

/* Variant: auto (responsive 1→2→3→4) */
@media (min-width: 640px) {
    .pb-features--auto .pb-features__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .pb-features--auto .pb-features__list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .pb-features--auto .pb-features__list {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Variant: 2 columns (forced) */
@media (min-width: 768px) {
    .pb-features--2 .pb-features__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Variant: 3 columns (forced) */
@media (min-width: 768px) {
    .pb-features--3 .pb-features__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .pb-features--3 .pb-features__list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Variant: 4 columns (forced) */
@media (min-width: 768px) {
    .pb-features--4 .pb-features__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .pb-features--4 .pb-features__list {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* ════════════════════════════════════════════════════════════════════════
 *  Card (the <article>)
 * ════════════════════════════════════════════════════════════════════════ */

.pb-features__card {
    flex: 1;
    background: var(--wolf-surface);
    border: 1px solid var(--wolf-border2);
    border-radius: var(--wolf-radius);
    padding: 28px 24px;
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wolf-space-sm);
}

@media (hover: hover) {
    .pb-features__card:hover {
        border-color: var(--wolf-primary);
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(124, 77, 255, 0.06);
    }
}


/* ════════════════════════════════════════════════════════════════════════
 *  Icon block
 * ════════════════════════════════════════════════════════════════════════ */

.pb-features__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--wolf-primary-glow);
    border: 2px solid var(--wolf-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--wolf-primary-light);
}

.pb-features__icon .pb-icon {
    width: 26px;
    height: 26px;
    color: currentColor;
}


/* ════════════════════════════════════════════════════════════════════════
 *  Item content
 * ════════════════════════════════════════════════════════════════════════ */

.pb-features__item-title {
    font-size: var(--wolf-font-md);
    font-weight: var(--wolf-weight-black);
    color: var(--wolf-text);
    margin: 0;
    line-height: var(--wolf-line-tight);
}

.pb-features__item-description {
    font-size: var(--wolf-font-sm);
    color: var(--wolf-sub);
    line-height: 1.7;
    margin: 0;
    /* Push description to fill remaining space */
    flex: 1;
}


/* ════════════════════════════════════════════════════════════════════════
 *  Reduced motion respect
 * ════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .pb-features__card {
        transition: none;
    }
    .pb-features__card:hover {
        transform: none;
    }
}

/* ═══ FROM: pricing/_section.css ═══ */

/*
 * PROJECT: Wolf IPTV
 * FILE: wolf_iptv/assets/css/pagebuilder/pricing/_section.css
 *
 * ═══════════════════════════════════════════════════════════════════════════
 *  Page Builder — Pricing Component (Slice 6.3)
 *  Partial #1 of 6: Section Wrapper + Header
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *  Loaded by: wolf-pagebuilder.css bundle (auto-built)
 *  Dependencies:
 *    - wolf-foundation.css (tokens via _variables.css)
 *    - pagebuilder/_foundation.css (.pb-section base)
 *    - pagebuilder/_eyebrow.css (.pb-eyebrow shared style)
 *
 *  Markup contract (PricingRenderer):
 *    <section class="pb-pricing pb-section" itemscope itemtype="…/Product"
 *             aria-labelledby="…">
 *      <div class="pb-pricing__inner">
 *        <header class="pb-pricing__header">
 *          <span class="pb-eyebrow">…</span>
 *          <h2 class="pb-pricing__title">…</h2>
 *          <p class="pb-pricing__description">…</p>
 *        </header>
 *        <div class="pb-pricing__tablist">…</div>
 *        <div class="pb-pricing__panel">…</div>
 *      </div>
 *    </section>
 *
 *  Mobile-first: default styles target mobile; @media min-width breakpoints
 *  enhance for tablet (640px+) and desktop (960px+).
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ────────────────────────────────────────────────────────────────────────
 *  Section wrapper
 * ──────────────────────────────────────────────────────────────────────── */

.pb-pricing {
    position: relative;
    overflow: hidden;
    /* .pb-section already provides padding-block + padding-inline */
}

/* Subtle ambient gradient (matches Design C visual depth) */
.pb-pricing::before {
    content: "";
    position: absolute;
    top: 5%;
    inset-inline-start: -15%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--wolf-primary-glow), transparent 70%);
    pointer-events: none;
    z-index: 0;
    /* Keep glow gentle on mobile; full intensity at desktop sizes */
    opacity: 0.6;
}

.pb-pricing__inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    width: 100%;
    margin-inline: auto;
}

/* ────────────────────────────────────────────────────────────────────────
 *  Header
 * ──────────────────────────────────────────────────────────────────────── */

.pb-pricing__header {
    text-align: center;
    margin-block-end: var(--wolf-space-md);
}

.pb-pricing__title {
    font-size: 1.75rem;       /* 28px mobile */
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.3px;
    margin: 0 0 0.625rem;     /* 10px */
    color: var(--wolf-text);
}

.pb-pricing__description {
    color: var(--wolf-sub, #8888a0);
    font-size: 0.875rem;      /* 14px mobile */
    line-height: 1.6;
    margin: 0;
    max-width: 540px;
    margin-inline: auto;
}

/* ────────────────────────────────────────────────────────────────────────
 *  Eyebrow override — prepend a star icon size for Pricing context
 *  (the shared .pb-eyebrow already handles the pill base style)
 * ──────────────────────────────────────────────────────────────────────── */

.pb-pricing__header .pb-eyebrow {
    margin-block-end: 0.875rem;   /* 14px gap before the title */
}

/* ────────────────────────────────────────────────────────────────────────
 *  Tablet enhancement (640px+)
 * ──────────────────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
    .pb-pricing__title {
        font-size: 2rem;          /* 32px */
    }
    .pb-pricing__description {
        font-size: 1rem;
    }
}

/* ────────────────────────────────────────────────────────────────────────
 *  Desktop enhancement (960px+)
 * ──────────────────────────────────────────────────────────────────────── */

@media (min-width: 960px) {
    .pb-pricing__title {
        font-size: 2.25rem;       /* 36px */
    }
    .pb-pricing__header {
        margin-block-end: var(--wolf-space-lg);
    }
}

/* ═══ FROM: pricing/_tabs.css ═══ */

/*
 * PROJECT: Wolf IPTV
 * FILE: wolf_iptv/assets/css/pagebuilder/pricing/_tabs.css
 *
 * ═══════════════════════════════════════════════════════════════════════════
 *  Page Builder — Pricing Component (Slice 6.3)
 *  Partial #2 of 6: Tabs (server selector pills)
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *  Markup contract:
 *    <div class="pb-pricing__tablist" role="tablist">
 *      <button class="pb-pricing__tab is-active" role="tab" …>
 *        <svg class="pb-pricing__tab-icon">…</svg>
 *        <span class="pb-pricing__tab-label">Universe TV</span>
 *      </button>
 *      <button class="pb-pricing__tab" role="tab" …>…</button>
 *    </div>
 *
 *  Visual: pill-shaped switcher inspired by Linear/Stripe.
 *  Active state = gradient fill + soft shadow.
 *  Mobile-first: tabs always horizontal, container scrolls if needed.
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ────────────────────────────────────────────────────────────────────────
 *  Tablist container
 * ──────────────────────────────────────────────────────────────────────── */

.pb-pricing__tablist {
    display: flex;
    justify-content: center;
    margin-block-end: var(--wolf-space-md);
}

/* The actual visual pill container — wraps the buttons in a single rounded shell */
.pb-pricing__tablist::before {
    /* No-op — we use the parent's flex centering and let buttons style themselves */
    content: none;
}

/* ────────────────────────────────────────────────────────────────────────
 *  Inner shell (uses the tablist itself with a wrapping pseudo)
 *  We style the tablist as the shell directly to avoid an extra wrapper.
 * ──────────────────────────────────────────────────────────────────────── */

.pb-pricing__tablist {
    /* Acts as the rounded shell holding the tabs */
    background: var(--wolf-surface);
    border: 1px solid var(--wolf-border2);
    border-radius: var(--wolf-radius-pill);
    padding: 5px;
    gap: 4px;
    /* Allow horizontal scroll on tiny screens if many servers — defensive */
    max-width: 100%;
    overflow-x: auto;
    /* Hide scrollbar — clean look, still keyboard-scrollable */
    scrollbar-width: none;
}
.pb-pricing__tablist::-webkit-scrollbar {
    display: none;
}

/* ────────────────────────────────────────────────────────────────────────
 *  Individual tab button
 * ──────────────────────────────────────────────────────────────────────── */

.pb-pricing__tab {
    /* Reset button defaults */
    appearance: none;
    background: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
    color: var(--wolf-sub, #8888a0);

    /* Layout */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;                    /* 8px */
    padding: 0.625rem 1rem;         /* 10px / 16px */
    border-radius: var(--wolf-radius-pill);
    white-space: nowrap;            /* Names should not wrap */

    /* Type */
    font-size: 0.8125rem;           /* 13px */
    font-weight: 700;
    line-height: 1;

    /* Animation */
    transition:
        background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover (non-active) — subtle highlight to invite interaction */
.pb-pricing__tab:not(.is-active):hover {
    color: var(--wolf-text);
    background: rgba(124, 77, 255, 0.06);
}

/* Focus state — keyboard accessibility (matches global focus-visible) */
.pb-pricing__tab:focus-visible {
    outline: 2px solid var(--wolf-primary);
    outline-offset: 2px;
}

/* Active tab — gradient fill + glow */
.pb-pricing__tab.is-active {
    background: linear-gradient(135deg, var(--wolf-primary), var(--wolf-primary-dark));
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(124, 77, 255, 0.35);
}

/* ────────────────────────────────────────────────────────────────────────
 *  Tab icon (brand mark)
 * ──────────────────────────────────────────────────────────────────────── */

.pb-pricing__tab-icon {
    width: 1.125rem;        /* 18px */
    height: 1.125rem;
    flex-shrink: 0;
    color: currentColor;    /* Inherits tab color (mono on active, sub on inactive) */
}

/* ────────────────────────────────────────────────────────────────────────
 *  Tab label
 * ──────────────────────────────────────────────────────────────────────── */

.pb-pricing__tab-label {
    /* Plain text — color inherited */
}

/* ────────────────────────────────────────────────────────────────────────
 *  Tablet enhancement (640px+)
 * ──────────────────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
    .pb-pricing__tab {
        padding: 0.75rem 1.25rem;   /* 12px / 20px */
        font-size: 0.875rem;        /* 14px */
        gap: 0.5rem;
    }
    .pb-pricing__tab-icon {
        width: 1.25rem;             /* 20px */
        height: 1.25rem;
    }
}

/* ═══ FROM: pricing/_panel.css ═══ */

/*
 * PROJECT: Wolf IPTV
 * FILE: wolf_iptv/assets/css/pagebuilder/pricing/_panel.css
 *
 * ═══════════════════════════════════════════════════════════════════════════
 *  Page Builder — Pricing Component (Slice 6.3)
 *  Partial #6 of 6: Panel (tabpanel — server-specific content container)
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *  Markup contract:
 *    <div class="pb-pricing__panel is-active" role="tabpanel" …>
 *      <ul class="pb-pricing__meta-strip">…</ul>
 *      <a class="pb-pricing__featured" …>…</a>
 *      <p class="pb-pricing__secondary-label">…</p>
 *      <ul class="pb-pricing__pkg-list">…</ul>
 *    </div>
 *    <div class="pb-pricing__panel" role="tabpanel" hidden …>…</div>
 *
 *  Visibility strategy (Progressive Enhancement):
 *    - Default browser: hidden attribute hides inactive panels
 *    - JS toggles `hidden` attr + `is-active` class for active state
 *    - Crawlers see all panels regardless (full DOM)
 *
 *  ─────────────────────────────────────────────────────────────────────
 *  Why use the `hidden` attribute (not display: none)?
 *  ─────────────────────────────────────────────────────────────────────
 *  - Native browser support, no CSS needed for the baseline
 *  - Screen readers correctly announce as hidden (a11y win)
 *  - Easy JS toggle (panel.hidden = true/false)
 *  - Crawlers (Google, Perplexity, ChatGPT) DO read content under
 *    `hidden` attribute — they treat it as "currently not displayed"
 *    metadata, not "removed from page"
 *  ═══════════════════════════════════════════════════════════════════════════
 */

/* ────────────────────────────────────────────────────────────────────────
 *  Panel container
 * ──────────────────────────────────────────────────────────────────────── */

.pb-pricing__panel {
    /* hidden attribute handles display by default (browser CSS rule) */
    /* Active panel needs no special styling — content flows naturally */
}

/* When JS marks a panel active, add a fade-in for visual polish */
.pb-pricing__panel.is-active {
    animation: pb-pricing-panel-fade 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pb-pricing-panel-fade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Reduce motion users — skip the animation */
@media (prefers-reduced-motion: reduce) {
    .pb-pricing__panel.is-active {
        animation: none;
    }
}

/* Defensive: if `[hidden]` is overridden somewhere (e.g., by display: flex
 * on a parent in CSS reset), force it back. */
.pb-pricing__panel[hidden] {
    display: none !important;
}

/* ═══ FROM: pricing/_meta-strip.css ═══ */

/*
 * PROJECT: Wolf IPTV
 * FILE: wolf_iptv/assets/css/pagebuilder/pricing/_meta-strip.css
 *
 * ═══════════════════════════════════════════════════════════════════════════
 *  Page Builder — Pricing Component (Slice 6.3)
 *  Partial #3 of 6: Meta Strip (3-cell server stats)
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *  Markup contract:
 *    <ul class="pb-pricing__meta-strip" role="list">
 *      <li class="pb-pricing__meta-cell">
 *        <strong class="pb-pricing__meta-value" dir="ltr">+6,000</strong>
 *        <span class="pb-pricing__meta-label">قناة</span>
 *      </li>
 *      …
 *    </ul>
 *
 *  Visual: 3 inline cells in a contained card, centered.
 *  Western numerals (dir="ltr" on the value) per project standard.
 *
 *  Panel-scoped: styles are inside .pb-pricing__panel context — meta-strip
 *  appears at the top of each tabpanel.
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ────────────────────────────────────────────────────────────────────────
 *  Strip container — 3-column grid in a single rounded card
 * ──────────────────────────────────────────────────────────────────────── */

.pb-pricing__meta-strip {
    /* Reset list defaults */
    list-style: none;
    margin: 0 0 1.125rem;            /* 18px gap before featured hero */
    padding: 0.875rem;               /* 14px inner padding */

    /* Layout: 3 cells side by side */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;                     /* 8px */

    /* Visual */
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--wolf-border2);
    border-radius: var(--wolf-radius-md);
}

/* ────────────────────────────────────────────────────────────────────────
 *  Individual stat cell
 * ──────────────────────────────────────────────────────────────────────── */

.pb-pricing__meta-cell {
    text-align: center;
    /* Each cell is its own column thanks to grid */
}

.pb-pricing__meta-value {
    display: block;
    font-size: 1.0625rem;            /* 17px */
    font-weight: 700;
    line-height: 1;
    color: var(--wolf-text);
    margin-block-end: 3px;
    /* dir="ltr" comes from inline attr — preserves Western numeral order */
}

.pb-pricing__meta-label {
    font-size: 0.625rem;             /* 10px */
    color: var(--wolf-sub, #8888a0);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    line-height: 1;
}

/* ────────────────────────────────────────────────────────────────────────
 *  Tablet enhancement
 * ──────────────────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
    .pb-pricing__meta-strip {
        padding: 1.125rem;           /* 18px */
        gap: 0.75rem;                /* 12px */
    }
    .pb-pricing__meta-value {
        font-size: 1.25rem;          /* 20px */
    }
    .pb-pricing__meta-label {
        font-size: 0.6875rem;        /* 11px */
    }
}

/* ═══ FROM: pricing/_featured-hero.css ═══ */

/*
 * PROJECT: Wolf IPTV
 * FILE: wolf_iptv/assets/css/pagebuilder/pricing/_featured-hero.css
 *
 * ═══════════════════════════════════════════════════════════════════════════
 *  Page Builder — Pricing Component (Slice 6.3)
 *  Partial #4 of 6: Featured Hero (the big gradient card with main CTA)
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *  Markup contract:
 *    <a class="pb-pricing__featured" href="https://wa.me/…?text=…"
 *       data-package-id="…" itemprop="offers" itemscope itemtype="…/Offer">
 *      <div class="pb-pricing__featured-tag-row">
 *        <span class="pb-pricing__featured-tag"><svg/>الأفضل قيمة</span>
 *        <span class="pb-pricing__featured-savings" dir="ltr">−77%</span>
 *      </div>
 *      <h3 class="pb-pricing__featured-period">سنة + شهر هدية</h3>
 *      <span class="pb-pricing__featured-bonus"><svg/>+ شهر مجاني · 13 شهر</span>
 *      <div class="pb-pricing__featured-price-row">
 *        <div class="pb-pricing__featured-price-block">
 *          <div class="pb-pricing__featured-price" dir="ltr">
 *            <span class="pb-pricing__featured-price-value" itemprop="price">180</span>
 *            <span class="pb-pricing__featured-price-currency">ر.س</span>
 *          </div>
 *          <span class="pb-pricing__featured-permonth" dir="ltr">13.85 ر.س / شهر</span>
 *        </div>
 *        <span class="pb-pricing__featured-cta"><svg/>احصل عليها</span>
 *      </div>
 *    </a>
 *
 *  Behavior: the entire card is the click target → a single <a> wrapping the layout.
 *  Microdata: itemprop="offers" lives on the <a> so crawlers attach Offer metadata
 *  to the same element they extract the URL from.
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ────────────────────────────────────────────────────────────────────────
 *  Card shell
 * ──────────────────────────────────────────────────────────────────────── */

.pb-pricing__featured {
    /* Anchor reset */
    display: block;
    text-decoration: none;
    color: inherit;

    /* Layout */
    position: relative;
    padding: 1.75rem 1.375rem;       /* 28px / 22px mobile */
    margin-block-end: 1rem;
    overflow: hidden;

    /* Visual */
    background: linear-gradient(
        135deg,
        rgba(124, 77, 255, 0.18),
        rgba(124, 77, 255, 0.04) 60%
    );
    border: 1px solid rgba(124, 77, 255, 0.4);
    border-radius: 1.375rem;         /* 22px — bigger than --wolf-radius-lg for hero feel */

    /* Interaction */
    cursor: pointer;
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Decorative inner glow */
.pb-pricing__featured::before {
    content: "";
    position: absolute;
    top: -30%;
    inset-inline-start: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(
        circle,
        rgba(124, 77, 255, 0.18),
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}

.pb-pricing__featured > * {
    position: relative;
    z-index: 1;
}

/* Hover/focus lift */
.pb-pricing__featured:hover,
.pb-pricing__featured:focus-visible {
    transform: translateY(-3px);
    border-color: var(--wolf-primary);
    box-shadow: 0 16px 48px rgba(124, 77, 255, 0.25);
}

.pb-pricing__featured:focus-visible {
    outline: 2px solid var(--wolf-primary);
    outline-offset: 2px;
}

/* Reduce motion users — respect their preference */
@media (prefers-reduced-motion: reduce) {
    .pb-pricing__featured {
        transition: none;
    }
    .pb-pricing__featured:hover,
    .pb-pricing__featured:focus-visible {
        transform: none;
    }
}

/* ────────────────────────────────────────────────────────────────────────
 *  Tag row (top of card: "الأفضل قيمة" + savings %)
 * ──────────────────────────────────────────────────────────────────────── */

.pb-pricing__featured-tag-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-block-end: 1rem;
}

.pb-pricing__featured-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: linear-gradient(135deg, var(--wolf-primary), var(--wolf-primary-light));
    color: #ffffff;
    font-size: 0.6875rem;            /* 11px */
    font-weight: 700;
    border-radius: var(--wolf-radius-pill);
    box-shadow: 0 2px 10px rgba(124, 77, 255, 0.4);
}

.pb-pricing__featured-tag-icon {
    width: 0.8125rem;                /* 13px */
    height: 0.8125rem;
    flex-shrink: 0;
}

.pb-pricing__featured-savings {
    display: inline-flex;
    padding: 5px 12px;
    background: rgba(124, 77, 255, 0.18);
    color: var(--wolf-primary-light);
    font-size: 0.75rem;              /* 12px */
    font-weight: 700;
    border-radius: var(--wolf-radius-pill);
    border: 1px solid rgba(124, 77, 255, 0.3);
}

/* ────────────────────────────────────────────────────────────────────────
 *  Period (the big duration label, e.g., "سنة + شهر هدية")
 * ──────────────────────────────────────────────────────────────────────── */

.pb-pricing__featured-period {
    font-size: 1.375rem;             /* 22px mobile */
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.3px;
    margin: 0 0 0.375rem;            /* 6px */
    color: var(--wolf-text);
}

/* ────────────────────────────────────────────────────────────────────────
 *  Bonus chip (e.g., "+ شهر مجاني · 13 شهر متواصل")
 * ──────────────────────────────────────────────────────────────────────── */

.pb-pricing__featured-bonus {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-block-end: 1.125rem;      /* 18px before price row */

    padding: 4px 10px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 8px;

    color: var(--wolf-green);
    font-size: 0.75rem;              /* 12px */
    font-weight: 700;
}

.pb-pricing__featured-bonus-icon {
    width: 0.75rem;                  /* 12px */
    height: 0.75rem;
    flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────────────────
 *  Price row (price block + CTA on the right)
 * ──────────────────────────────────────────────────────────────────────── */

.pb-pricing__featured-price-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.pb-pricing__featured-price-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pb-pricing__featured-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    /* dir="ltr" comes from inline attr */
}

.pb-pricing__featured-price-value {
    font-size: 2.75rem;              /* 44px mobile */
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1.5px;
    color: var(--wolf-text);
}

.pb-pricing__featured-price-currency {
    font-size: 0.875rem;             /* 14px */
    font-weight: 700;
    color: var(--wolf-primary-light);
}

.pb-pricing__featured-permonth {
    font-size: 0.75rem;              /* 12px */
    color: var(--wolf-sub, #8888a0);
}

/* ────────────────────────────────────────────────────────────────────────
 *  CTA button (the "احصل عليها" pill — visual only; the <a> handles click)
 * ──────────────────────────────────────────────────────────────────────── */

.pb-pricing__featured-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;        /* 12px / 20px */
    background: var(--whatsapp, #57AE4D);
    color: #ffffff;
    border-radius: var(--wolf-radius-md);
    font-size: 0.875rem;             /* 14px */
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(87, 174, 77, 0.3);
    transition:
        background 0.2s,
        transform 0.2s;
}

.pb-pricing__featured:hover .pb-pricing__featured-cta {
    background: #4a9c40;
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .pb-pricing__featured-cta {
        transition: none;
    }
    .pb-pricing__featured:hover .pb-pricing__featured-cta {
        transform: none;
    }
}

.pb-pricing__featured-cta-icon {
    width: 1.125rem;                 /* 18px */
    height: 1.125rem;
    flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────────────────
 *  Tablet enhancement (640px+)
 * ──────────────────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
    .pb-pricing__featured {
        padding: 2rem 1.625rem;       /* 32px / 26px */
    }
    .pb-pricing__featured-period {
        font-size: 1.5rem;            /* 24px */
    }
    .pb-pricing__featured-price-value {
        font-size: 3.25rem;           /* 52px */
    }
    .pb-pricing__featured-price-currency {
        font-size: 1rem;
    }
}

/* ────────────────────────────────────────────────────────────────────────
 *  Desktop enhancement (960px+)
 * ──────────────────────────────────────────────────────────────────────── */

@media (min-width: 960px) {
    .pb-pricing__featured-price-value {
        font-size: 3.5rem;            /* 56px */
    }
}

/* ═══ FROM: pricing/_pkg-list.css ═══ */

/*
 * PROJECT: Wolf IPTV
 * FILE: wolf_iptv/assets/css/pagebuilder/pricing/_pkg-list.css
 *
 * ═══════════════════════════════════════════════════════════════════════════
 *  Page Builder — Pricing Component (Slice 6.3)
 *  Partial #5 of 6: Secondary Package List + Secondary Label
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *  Markup contract:
 *    <p class="pb-pricing__secondary-label"><span>أو اختر مدة أخرى</span></p>
 *
 *    <ul class="pb-pricing__pkg-list" role="list">
 *      <li class="pb-pricing__pkg-list-item">
 *        <a class="pb-pricing__pkg-item" href="…" itemprop="offers" …>
 *          <div class="pb-pricing__pkg-info">
 *            <span class="pb-pricing__pkg-period">3 شهور</span>
 *            <div class="pb-pricing__pkg-meta">…</div>
 *          </div>
 *          <div class="pb-pricing__pkg-price-row">
 *            <span class="pb-pricing__pkg-price" dir="ltr">…</span>
 *            <span class="pb-pricing__pkg-arrow"><svg/></span>
 *          </div>
 *        </a>
 *      </li>
 *    </ul>
 *
 *  Mobile: stacked cards.
 *  Tablet+ (640px+): 3-column grid for compactness.
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ────────────────────────────────────────────────────────────────────────
 *  Secondary label (separator between featured hero and the list)
 * ──────────────────────────────────────────────────────────────────────── */

.pb-pricing__secondary-label {
    /* Style the container as a hr-with-text */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0 0.75rem;        /* 24px above, 12px below */
    padding-inline: 4px;

    font-size: 0.75rem;              /* 12px */
    color: var(--wolf-sub, #8888a0);
    font-weight: 500;
}

.pb-pricing__secondary-label::before,
.pb-pricing__secondary-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--wolf-border2);
}

.pb-pricing__secondary-label > span {
    /* The text in the middle — let the lines flank it */
    white-space: nowrap;
}

/* ────────────────────────────────────────────────────────────────────────
 *  Package list — mobile: vertical stack
 * ──────────────────────────────────────────────────────────────────────── */

.pb-pricing__pkg-list {
    list-style: none;
    margin: 0;
    padding: 0;

    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.pb-pricing__pkg-list-item {
    /* The <li> wrapper — no styling here; the <a> is the visual card */
}

/* ────────────────────────────────────────────────────────────────────────
 *  Individual package card (the <a>)
 * ──────────────────────────────────────────────────────────────────────── */

.pb-pricing__pkg-item {
    /* Anchor reset */
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;

    padding: 0.875rem 1rem;          /* 14px / 16px */
    background: var(--wolf-surface);
    border: 1px solid var(--wolf-border2);
    border-radius: var(--wolf-radius-md);
    cursor: pointer;

    transition:
        background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.pb-pricing__pkg-item:hover {
    background: rgba(124, 77, 255, 0.04);
    border-color: rgba(124, 77, 255, 0.35);
    /* Slide AWAY from the start edge (RTL-aware): logical inset prop */
    transform: translateX(0);        /* Override below per-direction */
}

/* RTL-aware hover translate: card slides toward visual reading direction */
[dir="rtl"] .pb-pricing__pkg-item:hover,
.pb-pricing__pkg-item:hover {
    transform: translateX(-3px);     /* RTL container = visual right shift */
}

[dir="ltr"] .pb-pricing__pkg-item:hover {
    transform: translateX(3px);
}

.pb-pricing__pkg-item:focus-visible {
    outline: 2px solid var(--wolf-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .pb-pricing__pkg-item {
        transition: background 0.2s, border-color 0.2s;
    }
    .pb-pricing__pkg-item:hover {
        transform: none;
    }
}

/* ────────────────────────────────────────────────────────────────────────
 *  Card left side: period + meta
 * ──────────────────────────────────────────────────────────────────────── */

.pb-pricing__pkg-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pb-pricing__pkg-period {
    font-size: 0.875rem;             /* 14px */
    font-weight: 700;
    color: var(--wolf-text);
    line-height: 1.1;
}

.pb-pricing__pkg-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pb-pricing__pkg-permonth {
    font-size: 0.6875rem;            /* 11px */
    color: var(--wolf-sub, #8888a0);
}

.pb-pricing__pkg-savings {
    display: inline-flex;
    padding: 2px 8px;
    background: rgba(124, 77, 255, 0.12);
    border: 1px solid rgba(124, 77, 255, 0.2);
    color: var(--wolf-primary-light);
    font-size: 0.625rem;             /* 10px */
    font-weight: 700;
    border-radius: var(--wolf-radius-xs);
}

.pb-pricing__pkg-bonus {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: var(--wolf-green);
    font-size: 0.625rem;             /* 10px */
    font-weight: 700;
    border-radius: var(--wolf-radius-xs);
}

.pb-pricing__pkg-bonus-icon {
    width: 0.625rem;                 /* 10px */
    height: 0.625rem;
    flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────────────────
 *  Card right side: price + arrow
 * ──────────────────────────────────────────────────────────────────────── */

.pb-pricing__pkg-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pb-pricing__pkg-price {
    display: flex;
    align-items: baseline;
    gap: 3px;
    /* dir="ltr" via inline attr */
}

.pb-pricing__pkg-price-value {
    font-size: 1.25rem;              /* 20px */
    font-weight: 700;
    line-height: 1;
    color: var(--wolf-text);
}

.pb-pricing__pkg-price-currency {
    font-size: 0.6875rem;            /* 11px */
    font-weight: 500;
    color: var(--wolf-sub, #8888a0);
}

.pb-pricing__pkg-arrow {
    width: 2rem;                     /* 32px */
    height: 2rem;
    border-radius: 9px;
    background: rgba(87, 174, 77, 0.12);
    border: 1px solid rgba(87, 174, 77, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition:
        background 0.25s,
        border-color 0.25s;
}

.pb-pricing__pkg-item:hover .pb-pricing__pkg-arrow {
    background: var(--whatsapp, #57AE4D);
    border-color: var(--whatsapp, #57AE4D);
}

.pb-pricing__pkg-arrow-icon {
    width: 1rem;                     /* 16px */
    height: 1rem;
    color: var(--whatsapp, #57AE4D);
    transition: color 0.2s;
}

.pb-pricing__pkg-item:hover .pb-pricing__pkg-arrow-icon {
    color: #ffffff;
}

/* ────────────────────────────────────────────────────────────────────────
 *  Tablet enhancement (640px+) — switch to 3-column grid
 *  Only when there are 2-3 secondary items; 4+ stays grid (auto-fit handles it)
 * ──────────────────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
    .pb-pricing__pkg-list {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 0.625rem;               /* 10px */
    }

    .pb-pricing__pkg-item {
        /* On wider screens, stack content vertically inside each cell */
        grid-template-columns: 1fr;
        text-align: start;
        padding: 1rem;
    }

    .pb-pricing__pkg-price-row {
        justify-content: space-between;
        padding-block-start: 0.5rem;
        margin-block-start: 0.25rem;
        border-block-start: 1px solid var(--wolf-border2);
    }

    .pb-pricing__pkg-period {
        font-size: 0.9375rem;        /* 15px */
    }
}

/* ═══ FROM: _accessibility.css ═══ */

/*
 * PROJECT: Wolf IPTV
 * FILE: wolf_iptv/assets/css/pagebuilder/_accessibility.css
 *
 * ═══════════════════════════════════════════════════════════════════════════
 *  Page Builder Accessibility — reduced motion + mobile responsive
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *  Day 14 (CSS Restructure):
 *  Extracted from wolf-pagebuilder-base.css (last 2 sections)
 *
 *  Contents:
 *    1. @media (prefers-reduced-motion) — disable hover/animations
 *    2. @media (max-width: 640px) — mobile responsive overrides
 *
 *  Should be LAST in the bundle (after all components) so the
 *  responsive rules can override component-specific styles.
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ── Reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .pb-hero__cta,
    .pb-cta__button {
        transition: none;
    }
    .pb-hero__cta:hover,
    .pb-cta__button:hover {
        transform: none;
    }
    .pb-faq__question::after {
        transition: none;
    }
}


/* ── Mobile responsive (under 640px) ─────────────────────── */

@media (max-width: 639px) {
    :root {
        --pb-section-padding-y: var(--pb-space-2xl);
        --pb-hero-min-height: 480px;
    }

    .pb-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .pb-hero__cta,
    .pb-cta__button {
        width: 100%;
        justify-content: center;
    }
}

/* ═══ FROM: _rtl.css ═══ */

/*
 * PROJECT: Wolf IPTV
 * FILE: wolf_iptv/assets/css/pagebuilder/_rtl.css
 *
 * ═══════════════════════════════════════════════════════════════════════════
 *  Page Builder RTL Refinements
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *  Day 14 (CSS Restructure):
 *  Extracted from wolf-pagebuilder-theme-wolf.css (last section)
 *
 *  Should be LAST in the bundle so RTL rules can override LTR defaults.
 * ═══════════════════════════════════════════════════════════════════════════
 */

[dir="rtl"] .pb-faq__question::after {
    /* Plus/minus look the same — no flip needed */
}

[dir="rtl"] .pb-breadcrumb__sep {
    transform: scaleX(-1);
}