/* Customer Care - Extracted CSS (all original styles preserved) */

/* ===== <style id="anonymous"> ===== */
/* =========================================================
       1. لوحة الألوان والأساسيات (دعم الوضع النهاري والليلي)
       
      ========================================================= */
    :root {
      --primary-purple: #6d28d9;
      --primary-hover: #5b21b6;
      --purple-light: #f5f3ff;
      --purple-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 45%, #a855f7 100%);
      --accent-cyan: #06b6d4;
      --accent-emerald: #10b981;
      --accent-pink: #ec4899;
      --bg-color: #f1f5f9;
      --bg-mesh: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(124, 58, 237, 0.12), transparent),
                 radial-gradient(ellipse 60% 40% at 100% 0%, rgba(6, 182, 212, 0.08), transparent),
                 #f1f5f9;
      --nav-bg: rgba(255, 255, 255, 0.82);
      --card-bg: rgba(255, 255, 255, 0.92);
      --text-main: #0f172a;
      --text-muted: #64748b;
      --border-color: rgba(124, 58, 237, 0.14);
      --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(109, 40, 217, 0.06);
      --shadow-glow: 0 8px 32px rgba(109, 40, 217, 0.14), 0 2px 8px rgba(15, 23, 42, 0.04);
      --shadow-lift: 0 16px 48px rgba(109, 40, 217, 0.18);
      --dropdown-bg: rgba(255, 255, 255, 0.96);
      --transition-fast: 0.28s cubic-bezier(0.22, 1, 0.36, 1);
      --radius-sm: 10px;
      --radius-md: 14px;
      --radius-lg: 20px;
      --glass-blur: saturate(160%) blur(16px);
      /* متغيرات B2B Postpaid Data Card */
      --b2b-post-bg: linear-gradient(to bottom, #e0f2fe, #f0fdf4 45%, #e2e8f0);
      --b2b-post-text: #0f172a;
      --b2b-post-h1: #0f2027;
      --b2b-post-container-bg: rgba(255, 255, 255, 0.95);
      --b2b-post-container-text: #050505;
      --b2b-post-header-bg: #1F6650;
      --b2b-post-header-text: #ffffff;
      --b2b-post-rules-text: #1a1a1a;
      --b2b-post-rule-check: #1F6650;
      --b2b-post-table-title: #0F4C81;
      --b2b-post-table-bg: rgba(255, 255, 255, 0.85);
      --b2b-post-table-th-bg: #0F4C81;
      --b2b-post-table-td-bg: rgba(31, 102, 80, 0.08);
      --b2b-post-table-td-text: #0f172a;
      --b2b-post-table-border: rgba(15, 23, 42, 0.12);
      --b2b-post-table-hover: rgba(32, 201, 151, 0.2);

      /* متغيرات B2B Prepaid Data Card */
      --b2b-pre-bg: linear-gradient(to bottom, #f3e8ff, #f5f3ff 40%, #e9d5ff);
      --b2b-pre-text: #2e1065;
      --b2b-pre-h1: #3b0764;
      --b2b-pre-badge-bg: linear-gradient(to bottom, #7e22ce, #6b21a8);
      --b2b-pre-badge-text: #ffffff;
      --b2b-pre-table-container-bg: rgba(255, 255, 255, 0.85);
      --b2b-pre-table-border: #9333ea;
      --b2b-pre-table-th-bg: #581c87;
      --b2b-pre-table-th-text: #ffffff;
      --b2b-pre-table-th-border: #7e22ce;
      --b2b-pre-table-td-bg: rgba(255, 255, 255, 0.9);
      --b2b-pre-table-td-even-bg: rgba(243, 232, 255, 0.6);
      --b2b-pre-table-td-text: #2e1065;
      --b2b-pre-table-td-border: rgba(147, 51, 234, 0.2);
      --b2b-pre-code-cell-color: #6b21a8;
      --b2b-pre-table-hover-bg: rgba(168, 85, 247, 0.25);
      --b2b-pre-table-hover-text: #2e1065;
      /* متغيرات جداول B2B الموحدة */
      --b2b-bg-canvas: #f8fafc;
      --b2b-card-bg: rgba(255, 255, 255, 0.9);
      --b2b-card-border: rgba(16, 185, 129, 0.25);
      --b2b-header-main-bg: #0f172a;
      --b2b-header-main-text: #ffffff;
      --b2b-header-bronze-bg: #d97706;
      --b2b-text-primary: #0f172a;
      --b2b-text-secondary: #475569;
      --b2b-grid-line: rgba(15, 23, 42, 0.04);
      --b2b-accent-emerald: #059669;
      --b2b-accent-cyan: #0284c7;
      --b2b-accent-glow: rgba(5, 150, 105, 0.15);
      --b2b-accent-cyan-glow: rgba(2, 132, 199, 0.15);
      --b2b-table-hover: #ecfdf5;
      --b2b-table-voice-hover: #e0f2fe;
      --b2b-validity-bg: #f1f5f9;
      --prepaid-data-bg-deep: #f8fafc;
      --prepaid-data-surface: rgba(255, 255, 255, 0.85);
      --prepaid-data-surface-solid: #ffffff;
      --prepaid-data-primary: #0284c7;
      --prepaid-data-secondary: #2563eb;
      --prepaid-data-accent: #7c3aed;
      --prepaid-data-glow: rgba(2, 132, 199, 0.15);
      --prepaid-data-text-main: #0f172a;
      --prepaid-data-text-muted: #64748b;
      --prepaid-data-border-glow: rgba(2, 132, 199, 0.25);
      --prepaid-data-border-color: rgba(0, 0, 0, 0.08);
      --prepaid-data-table-hover: rgba(2, 132, 199, 0.04);
    }

    [data-theme="dark"] {
      --bg-color: #0b1220;
      --bg-mesh: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(124, 58, 237, 0.22), transparent),
                 radial-gradient(ellipse 50% 30% at 100% 0%, rgba(6, 182, 212, 0.12), transparent),
                 #0b1220;
      --nav-bg: rgba(15, 23, 42, 0.85);
      --card-bg: rgba(30, 41, 59, 0.88);
      --text-main: #f8fafc;
      --text-muted: #94a3b8;
      --border-color: rgba(148, 163, 184, 0.16);
      --purple-light: rgba(109, 40, 217, 0.25);
      --dropdown-bg: rgba(30, 41, 59, 0.96);
      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
      --shadow-glow: 0 12px 40px rgba(0, 0, 0, 0.45);
      --shadow-lift: 0 20px 50px rgba(0, 0, 0, 0.5);
      /* B2B Postpaid Dark */
      --b2b-post-bg: linear-gradient(to bottom, #0f2027, #203a43 45%, #2c5364);
      --b2b-post-text: #ffffff;
      --b2b-post-h1: #ffffff;
      --b2b-post-container-bg: rgba(255, 255, 255, 0.92);
      --b2b-post-container-text: #050505;
      --b2b-post-header-bg: #1F6650;
      --b2b-post-header-text: #ffffff;
      --b2b-post-rules-text: #1a1a1a;
      --b2b-post-rule-check: #1F6650;
      --b2b-post-table-title: #ffffff;
      --b2b-post-table-bg: rgba(255, 255, 255, 0.05);
      --b2b-post-table-th-bg: #0F4C81;
      --b2b-post-table-td-bg: rgba(32, 58, 67, 0.65);
      --b2b-post-table-td-text: #ffffff;
      --b2b-post-table-border: rgba(255, 255, 255, 0.1);
      --b2b-post-table-hover: rgba(32, 201, 151, 0.25);

      /* B2B Prepaid Dark */
      --b2b-pre-bg: linear-gradient(to bottom, #0d0614, #1a0b2e 40%, #2b1055);
      --b2b-pre-text: #ffffff;
      --b2b-pre-h1: #ffffff;
      --b2b-pre-badge-bg: linear-gradient(to bottom, #fbbf24, #d97706);
      --b2b-pre-badge-text: #111827;
      --b2b-pre-table-container-bg: rgba(255, 255, 255, 0.03);
      --b2b-pre-table-border: #581c87;
      --b2b-pre-table-th-bg: #4c1d95;
      --b2b-pre-table-th-text: #ffffff;
      --b2b-pre-table-th-border: #6d28d9;
      --b2b-pre-table-td-bg: rgba(30, 10, 60, 0.7);
      --b2b-pre-table-td-even-bg: rgba(20, 5, 40, 0.75);
      --b2b-pre-table-td-text: #f3f4f6;
      --b2b-pre-table-td-border: rgba(139, 92, 246, 0.2);
      --b2b-pre-code-cell-color: #38bdf8;
      --b2b-pre-table-hover-bg: rgba(126, 34, 206, 0.45);
      --b2b-pre-table-hover-text: #ffffff;
      /* متغيرات جداول B2B في الوضع الليلي */
      --b2b-bg-canvas: #06130b;
      --b2b-card-bg: rgba(15, 23, 42, 0.8);
      --b2b-card-border: rgba(52, 211, 153, 0.25);
      --b2b-header-main-bg: #1e293b;
      --b2b-header-main-text: #f8fafc;
      --b2b-header-bronze-bg: #d97706;
      --b2b-text-primary: #f8fafc;
      --b2b-text-secondary: #94a3b8;
      --b2b-grid-line: rgba(255, 255, 255, 0.03);
      --b2b-accent-emerald: #34d399;
      --b2b-accent-cyan: #38bdf8;
      --b2b-accent-glow: rgba(52, 211, 153, 0.25);
      --b2b-accent-cyan-glow: rgba(56, 189, 248, 0.25);
      --b2b-table-hover: rgba(52, 211, 153, 0.12);
      --b2b-table-voice-hover: rgba(56, 189, 248, 0.12);
      --b2b-validity-bg: rgba(30, 41, 59, 0.6);
      --prepaid-data-bg-deep: #030712;
      --prepaid-data-surface: rgba(15, 23, 42, 0.8);
      --prepaid-data-surface-solid: #0f172a;
      --prepaid-data-primary: #06b6d4;
      --prepaid-data-secondary: #3b82f6;
      --prepaid-data-accent: #8b5cf6;
      --prepaid-data-glow: rgba(6, 182, 212, 0.3);
      --prepaid-data-text-main: #f8fafc;
      --prepaid-data-text-muted: #94a3b8;
      --prepaid-data-border-glow: rgba(6, 182, 212, 0.3);
     --prepaid-data-border-color: rgba(255, 255, 255, 0.08);
     --prepaid-data-table-hover: rgba(6, 182, 212, 0.06);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: "Zain", "Cairo", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background-color: var(--bg-color);
      background-image: var(--bg-mesh);
      background-attachment: fixed;
      color: var(--text-main);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      transition: background-color var(--transition-fast), color var(--transition-fast);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    /* ===== طبقة UI حديثة شاملة ===== */
    ::selection {
      background: rgba(124, 58, 237, 0.28);
      color: inherit;
    }
    * {
      scrollbar-width: thin;
      scrollbar-color: rgba(124, 58, 237, 0.35) transparent;
    }
    *::-webkit-scrollbar { width: 8px; height: 8px; }
    *::-webkit-scrollbar-track { background: transparent; }
    *::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #7c3aed, #6366f1);
      border-radius: 99px;
      border: 2px solid transparent;
      background-clip: padding-box;
    }

    @keyframes ccFadeUp {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes ccShimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    @keyframes ccGlowPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.15); }
      50% { box-shadow: 0 0 0 6px rgba(124, 58, 237, 0); }
    }
    @keyframes ccFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }
    @keyframes ccBorderFlow {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
html.ccare-locked, body.ccare-locked {
  overflow: hidden !important;
  height: 100vh !important;
  position: fixed !important;
  width: 100vw !important;
  touch-action: none !important;
}
    /* =========================================================
       2. شريط التنقل الأساسي المزدوج الصفوف
       ========================================================= */
    /* تنسيق بسيط للهيدر والشعار */
        .header-brand {
            display: flex;
            align-items: center;
            gap: 12px;
            font-family: system-ui, -apple-system, sans-serif;
        }

        .header-brand .brand-name {
            font-size: 24px;
            font-weight: bold;
            color: #6C5CE7;
        }
       .header-nav {
      background: var(--nav-bg);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border-bottom: 1px solid var(--border-color);
      box-shadow: var(--shadow-sm);
      position: sticky;
      top: 0;
      z-index: 1000;
      transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
      padding: 0.35rem 0;
    }
    .header-nav::after {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 2px;
      background: linear-gradient(90deg, #4f46e5, #7c3aed, #06b6d4, #a855f7, #4f46e5);
      background-size: 300% 100%;
      animation: ccBorderFlow 8s linear infinite;
      opacity: 0.85;
      pointer-events: none;
    }

    .nav-container {
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 0.15rem 0.5rem;
      gap: 0.35rem;
      flex-wrap: nowrap;
      overflow: visible;
    }
    .nav-container > .logo {
      flex-shrink: 0;
      z-index: 2;
    }
    .nav-container > .nav-actions {
      flex-shrink: 0;
      z-index: 2;
    }

   .logo {
  font-size: 1.05rem;
  font-weight: 800;
  background: var(--purple-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
  letter-spacing: -0.3px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

    .nav-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      position: relative;
      flex: 1 1 auto;
      min-width: 0;
      overflow: visible;
    }

    /* شبكة متكيفة: تلتف داخل العرض بدون شريط تمرير أفقي */
.two-row-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2px 3px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    width: 100%;
    max-width: 100%;
}

    .nav-item {
      position: relative;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 2px;
      text-decoration: none;
      color: inherit;
    }
    .nav-icon {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

        .nav-link {
      display: flex;
      align-items: center !important;
      gap: 4px !important;
      padding: 5px 8px !important;
      white-space: nowrap !important;
      color: var(--text-muted);
      text-decoration: none;
      font-weight: 600;
      font-size: 14px !important;
      line-height: 1.35 !important;
      border-radius: 9px;
      transition: all var(--transition-fast);
      cursor: pointer;
      user-select: none;
      border: 1px solid transparent;
      letter-spacing: 0.01em;
      position: relative;
    }
.nav-link svg, 
.nav-item svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
}
.nav-link i.fa-solid,
.nav-link i.fa-wifi {
    font-size: 0.85rem !important;
}
    .nav-link:hover {
      color: var(--primary-purple);
      background-color: var(--purple-light);
      border-color: rgba(124, 58, 237, 0.18);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(124, 58, 237, 0.12);
    }

    .nav-link.active {
      color: #ffffff !important;
      background: var(--purple-gradient) !important;
      box-shadow: 0 4px 16px rgba(109, 40, 217, 0.35), inset 0 1px 0 rgba(255,255,255,0.2);
      border-color: transparent !important;
    }

    .arrow {
      font-size: 0.5rem;
      transition: transform var(--transition-fast);
      display: inline-block;
      opacity: 0.75;
    }

    .nav-item:hover .arrow {
      transform: rotate(180deg);
      color: var(--primary-purple);
    }

    .nav-link.active .arrow {
      color: #ffffff;
    }

    /* =========================================================
       3. القوائم المنسدلة (Dropdowns)
       ========================================================= */
    .dropdown-menu {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      left: auto;
      background: var(--dropdown-bg);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      box-shadow: var(--shadow-lift);
      min-width: 0;
      width: max-content;
      max-width: min(220px, 78vw);
      list-style: none;
      padding: 0.35rem;
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px) scale(0.98);
      transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
      z-index: 2000;
      overflow: hidden;
      white-space: nowrap;
    }
    .dropdown-menu::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(124, 58, 237, 0.04), transparent 40%);
      pointer-events: none;
    }

    .nav-item:hover .dropdown-menu,
    .nav-item.dropdown-open .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
    }
    /* عند اختيار عنصر تُغلق القائمة فوراً */
    .nav-item.dropdown-force-close .dropdown-menu {
      opacity: 0 !important;
      visibility: hidden !important;
      transform: translateY(8px) scale(0.98) !important;
      pointer-events: none !important;
    }

    .dropdown-link {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 0.45rem 0.7rem;
      color: var(--text-main);
      text-decoration: none;
      font-size: 0.82rem;
      font-weight: 600;
      border-radius: 8px;
      transition: all var(--transition-fast);
      cursor: pointer;
      white-space: nowrap;
      width: 100%;
      box-sizing: border-box;
    }

    .dropdown-link:hover {
      background-color: var(--purple-light);
      color: var(--primary-purple);
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }

    /* شريط المستخدم + الخروج داخل الهيدر */
    .ccare-user-bar {
      display: none;
      align-items: center;
      gap: 8px;
      background: rgba(255,255,255,0.92);
      border: 1px solid rgba(124,58,237,0.18);
      border-radius: 999px;
      padding: 4px 6px 4px 5px;
      max-width: none;
      min-width: 0;
      flex-shrink: 0;
      overflow: visible;
      box-sizing: border-box;
      box-shadow: 0 2px 10px rgba(109,40,217,0.08);
      height: 44px;
    }
    [data-theme="dark"] .ccare-user-bar {
      background: rgba(30,41,59,0.92);
      border-color: rgba(148,163,184,0.2);
    }
    .ccare-user-bar.is-visible {
      display: inline-flex !important;
    }
    .ccare-user-identity {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 7px;
      min-width: 0;
      height: 100%;
    }
    .ccare-user-avatar-wrap {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #06b6d4 100%);
      border: 2px solid rgba(255,255,255,0.95);
      box-shadow: 0 2px 8px rgba(109,40,217,0.28);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ccare-user-avatar-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      z-index: 1;
    }
    .ccare-user-avatar-initials {
      font-size: 0.78rem;
      font-weight: 800;
      color: #fff;
      letter-spacing: 0.02em;
      line-height: 1;
      z-index: 0;
      user-select: none;
      text-transform: uppercase;
    }
    [data-theme="dark"] .ccare-user-avatar-wrap {
      border-color: rgba(255,255,255,0.28);
      box-shadow: 0 2px 10px rgba(0,0,0,0.35);
    }
    .ccare-user-label {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--primary-purple);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 90px;
      min-width: 0;
      line-height: 1.2;
      direction: ltr;
      text-align: left;
    }
    [data-theme="dark"] .ccare-user-label { color: #c4b5fd; }
    .ccare-logout-btn {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 0;
      flex-shrink: 0;
      background: linear-gradient(135deg, #ef4444, #dc2626);
      color: #fff;
      border: none;
      border-radius: 999px;
      width: 32px;
      height: 32px;
      padding: 0;
      font-size: 0.78rem;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      transition: all var(--transition-fast);
    }
    .ccare-logout-btn.is-visible {
      display: inline-flex !important;
    }
    .ccare-logout-btn span.ccare-logout-text {
      display: none !important;
    }
    .ccare-logout-btn:hover {
      transform: scale(1.08);
      box-shadow: 0 3px 10px rgba(239, 68, 68, 0.35);
    }
    .nav-actions {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      flex-shrink: 0;
      min-width: 0;
    }
    @media (min-width: 900px) {
      .ccare-user-bar {
        max-width: 160px;
        padding: 2px 4px 2px 9px;
      }
      .ccare-user-label { font-size: 0.75rem; }
      .ccare-logout-btn {
        width: 26px;
        height: 26px;
        padding: 0;
      }
      .ccare-logout-btn span.ccare-logout-text {
        display: none !important;
      }
    }
    @media (max-width: 640px) {
      .ccare-user-bar {
        max-width: min(100px, 30vw);
        padding: 2px 2px 2px 6px;
      }
      .ccare-user-label { font-size: 0.65rem; }
      .ccare-logout-btn { width: 24px; height: 24px; font-size: 0.62rem; }
    }

    .theme-toggle-btn {
      background: var(--purple-gradient);
      border: none;
      color: #ffffff;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 0.95rem;
      transition: all var(--transition-fast);
      flex-shrink: 0;
      box-shadow: 0 4px 14px rgba(109, 40, 217, 0.35);
    }

    .theme-toggle-btn:hover {
      transform: scale(1.1) rotate(20deg);
      box-shadow: 0 6px 20px rgba(109, 40, 217, 0.5);
      filter: brightness(1.08);
    }

    @media (max-width: 1100px) {
      .nav-link { font-size: 13px !important; padding: 5px 8px !important; gap: 3px !important; }
      .nav-link svg, .nav-item svg { width: 13px !important; height: 13px !important; }
      .logo { font-size: 0.95rem; }
      .theme-toggle-btn { width: 30px; height: 30px; font-size: 0.85rem; }
    }
    @media (max-width: 768px) {
      .nav-container { padding: 0.1rem 0.35rem !important; gap: 0.25rem; }
      .nav-link { font-size: 12px !important; padding: 4px 6px !important; }
      .nav-link svg, .nav-item svg { width: 12px !important; height: 12px !important; }
      .logo-text { display: none; }
      .logo { font-size: 0; }
      #siteLogo .logo-icon { width: 28px !important; height: 28px !important; }
      .theme-toggle-btn { width: 28px; height: 28px; font-size: 0.8rem; }
      .two-row-grid { gap: 2px 3px !important; }
      .arrow { font-size: 0.5rem; }
    }
    @media (max-width: 480px) {
      .nav-link { font-size: 11px !important; padding: 3px 5px !important; }
      .ccare-user-label { max-width: 64px; }
    }



    /* =========================================================
       NAVBAR / HEADER — Aesthetic Upgrade (v9 visual)
       ألوان متناسقة مع البنفسجي الأساسي + لمسات إبداعية
       ========================================================= */
    .header-nav {
      background: linear-gradient(180deg,
        rgba(255,255,255,0.92) 0%,
        rgba(248,250,252,0.88) 100%) !important;
      backdrop-filter: saturate(180%) blur(20px) !important;
      -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
      border-bottom: 1px solid rgba(124, 58, 237, 0.12) !important;
      box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 4px 24px rgba(109, 40, 217, 0.08),
        0 1px 3px rgba(15, 23, 42, 0.04) !important;
      padding: 0.45rem 0 !important;
    }
    [data-theme="dark"] .header-nav {
      background: linear-gradient(180deg,
        rgba(15, 23, 42, 0.94) 0%,
        rgba(11, 18, 32, 0.9) 100%) !important;
      border-bottom-color: rgba(139, 92, 246, 0.18) !important;
      box-shadow:
        0 1px 0 rgba(255,255,255,0.04) inset,
        0 8px 32px rgba(0,0,0,0.4) !important;
    }
    .header-nav::after {
      height: 2.5px !important;
      background: linear-gradient(90deg,
        transparent 0%,
        #4f46e5 15%,
        #7c3aed 35%,
        #06b6d4 50%,
        #a855f7 65%,
        #4f46e5 85%,
        transparent 100%) !important;
      background-size: 200% 100% !important;
      animation: ccBorderFlow 6s linear infinite !important;
      opacity: 1 !important;
      filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.45));
    }

    .nav-container {
      padding: 0.2rem 0.75rem !important;
      gap: 0.5rem !important;
    }

    /* ---- الشعار ---- */
    #siteLogo.logo,
    .logo {
      padding: 4px 10px 4px 6px !important;
      border-radius: 14px !important;
      transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
      gap: 8px !important;
    }
    #siteLogo.logo:hover,
    .logo:hover {
      background: rgba(124, 58, 237, 0.08) !important;
      transform: translateY(-1px);
      box-shadow: 0 4px 16px rgba(109, 40, 217, 0.15);
    }
    #siteLogo .logo-icon {
      width: 42px !important;
      height: 42px !important;
      filter: drop-shadow(0 2px 10px rgba(108, 92, 231, 0.5));
      transition: transform 0.35s ease, filter 0.35s ease;
    }
    #siteLogo.logo:hover .logo-icon {
      transform: scale(1.08) rotate(-4deg);
      filter: drop-shadow(0 4px 12px rgba(108, 92, 231, 0.6));
    }
    #siteLogo .logo-text {
      font-size: 17px !important;
      font-weight: 800 !important;
      letter-spacing: -0.02em !important;
      background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 45%, #06b6d4 100%) !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
    }

    /* ---- شبكة التابات ---- */
    .two-row-grid {
      gap: 3px 4px !important;
      padding: 2px 0 !important;
    }

    .nav-item {
      border-radius: 11px;
    }

    /* ---- روابط التاب ---- */
    .nav-link {
      display: inline-flex !important;
      align-items: center !important;
      gap: 5px !important;
      padding: 7px 12px !important;
      font-size: 14px !important;
      font-weight: 700 !important;
      color: var(--text-muted) !important;
      border-radius: 11px !important;
      border: 1px solid rgba(124, 58, 237, 0.16) !important;
      background: rgba(245, 243, 255, 0.85) !important;
      letter-spacing: 0.01em !important;
      line-height: 1.25 !important;
      transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
      position: relative;
      overflow: hidden;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    }
    .nav-link::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(6,182,212,0.08));
      opacity: 0;
      transition: opacity 0.25s ease;
      border-radius: inherit;
      pointer-events: none;
    }
    .nav-link:hover {
      color: var(--primary-purple) !important;
      border-color: rgba(124, 58, 237, 0.32) !important;
      background: rgba(237, 233, 254, 0.95) !important;
      transform: translateY(-1.5px) !important;
      box-shadow: 0 4px 14px rgba(109, 40, 217, 0.14) !important;
    }
    .nav-link:hover::before { opacity: 1; }
    [data-theme="dark"] .nav-link {
      background: rgba(30, 41, 59, 0.75) !important;
      border-color: rgba(167, 139, 250, 0.22) !important;
      color: #cbd5e1 !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    [data-theme="dark"] .nav-link:hover {
      background: rgba(49, 46, 129, 0.45) !important;
      border-color: rgba(167, 139, 250, 0.4) !important;
      color: #e9d5ff !important;
    }

    /* التاب النشط — تدرج بنفسجي فيروزي */
    .nav-link.active {
      color: #ffffff !important;
      background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #6366f1 100%) !important;
      border-color: transparent !important;
      box-shadow:
        0 4px 18px rgba(109, 40, 217, 0.4),
        0 1px 0 rgba(255,255,255,0.25) inset,
        0 -1px 0 rgba(0,0,0,0.08) inset !important;
      transform: translateY(-1px);
    }
    .nav-link.active::before { opacity: 0; }
    .nav-link.active:hover {
      filter: brightness(1.06);
      box-shadow:
        0 6px 22px rgba(109, 40, 217, 0.48),
        0 1px 0 rgba(255,255,255,0.3) inset !important;
    }
    .nav-link.active .arrow {
      color: rgba(255,255,255,0.9) !important;
      opacity: 1 !important;
    }

    /* ---- الأيقونات ---- */
    .nav-link svg,
    .nav-item svg,
    .nav-icon {
      width: 16px !important;
      height: 16px !important;
      flex-shrink: 0;
      fill: none !important;
      stroke: var(--primary-purple) !important;
      stroke-width: 2.1 !important;
      stroke-linecap: round !important;
      stroke-linejoin: round !important;
      transition: transform 0.25s ease, filter 0.25s ease, stroke 0.2s ease;
      opacity: 0.95;
      color: var(--primary-purple);
    }
    .nav-link:hover svg,
    .nav-link:hover .nav-icon {
      opacity: 1;
      transform: scale(1.14);
      stroke: var(--primary-hover) !important;
      filter: drop-shadow(0 0 5px rgba(124, 58, 237, 0.4));
    }
    .nav-link.active svg,
    .nav-link.active .nav-icon {
      opacity: 1 !important;
      stroke: #ffffff !important;
      filter: drop-shadow(0 0 3px rgba(255,255,255,0.4));
    }
    [data-theme="dark"] .nav-link svg,
    [data-theme="dark"] .nav-item svg,
    [data-theme="dark"] .nav-icon {
      stroke: #a78bfa !important;
      opacity: 0.95;
    }
    [data-theme="dark"] .nav-link:hover svg,
    [data-theme="dark"] .nav-link:hover .nav-icon {
      stroke: #c4b5fd !important;
      filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.45));
    }
    [data-theme="dark"] .nav-link.active svg,
    [data-theme="dark"] .nav-link.active .nav-icon {
      stroke: #ffffff !important;
    }
    .nav-link i.fa-solid,
    .nav-link i.fa-wifi {
      font-size: 0.85rem !important;
      color: var(--primary-purple) !important;
      opacity: 0.95;
      transition: transform 0.25s ease, color 0.2s ease;
    }
    .nav-link:hover i { transform: scale(1.14); color: var(--primary-hover) !important; }
    .nav-link.active i { color: #fff !important; opacity: 1; }
    [data-theme="dark"] .nav-link i.fa-solid,
    [data-theme="dark"] .nav-link i.fa-wifi {
      color: #a78bfa !important;
    }
    [data-theme="dark"] .nav-link:hover i { color: #c4b5fd !important; }
    [data-theme="dark"] .nav-link.active i { color: #fff !important; }

    .arrow {
      font-size: 0.48rem !important;
      opacity: 0.65;
      margin-right: 1px;
      transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease !important;
    }
    .nav-item:hover .arrow {
      transform: rotate(180deg) !important;
      color: var(--primary-purple) !important;
      opacity: 1;
    }

    /* ---- القوائم المنسدلة ---- */
    .dropdown-menu {
      top: calc(100% + 8px) !important;
      border-radius: 14px !important;
      padding: 0.4rem !important;
      border: 1px solid rgba(124, 58, 237, 0.16) !important;
      box-shadow:
        0 12px 40px rgba(109, 40, 217, 0.16),
        0 4px 12px rgba(15, 23, 42, 0.06) !important;
      background: rgba(255,255,255,0.97) !important;
      backdrop-filter: blur(16px) saturate(160%) !important;
      -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
      min-width: 160px !important;
      overflow: hidden;
    }
    [data-theme="dark"] .dropdown-menu {
      background: rgba(30, 41, 59, 0.97) !important;
      border-color: rgba(139, 92, 246, 0.25) !important;
      box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
    }
    .dropdown-menu::before {
      background: linear-gradient(180deg, rgba(124, 58, 237, 0.07), transparent 50%) !important;
    }
    .dropdown-link {
      padding: 0.5rem 0.85rem !important;
      font-size: 0.84rem !important;
      font-weight: 650 !important;
      border-radius: 9px !important;
      transition: all 0.2s ease !important;
      color: var(--text-main) !important;
    }
    .dropdown-link:hover {
      background: linear-gradient(90deg, rgba(124, 58, 237, 0.12), rgba(6, 182, 212, 0.06)) !important;
      color: var(--primary-purple) !important;
      padding-right: 1rem !important;
      box-shadow: inset 3px 0 0 var(--primary-purple);
    }

    /* ---- شريط المستخدم + القفل ---- */
    .ccare-user-bar {
      background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(6, 182, 212, 0.06)) !important;
      border: 1px solid rgba(124, 58, 237, 0.2) !important;
      border-radius: 999px !important;
      padding: 3px 4px 3px 10px !important;
      box-shadow: 0 2px 10px rgba(109, 40, 217, 0.1) !important;
      max-width: min(150px, 30vw) !important;
    }
    .ccare-user-label {
      font-size: 0.74rem !important;
      font-weight: 800 !important;
      background: linear-gradient(135deg, #6d28d9, #0284c7);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }
    .ccare-logout-btn {
      background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
      width: 28px !important;
      height: 28px !important;
      border-radius: 50% !important;
      box-shadow: 0 3px 10px rgba(225, 29, 72, 0.35) !important;
      transition: all 0.25s ease !important;
    }
    .ccare-logout-btn:hover {
      transform: scale(1.12) rotate(-8deg) !important;
      box-shadow: 0 5px 16px rgba(225, 29, 72, 0.45) !important;
    }

    /* ---- زر الثيم ---- */
    .theme-toggle-btn {
      width: 36px !important;
      height: 36px !important;
      background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #06b6d4 100%) !important;
      box-shadow:
        0 4px 16px rgba(109, 40, 217, 0.4),
        0 1px 0 rgba(255,255,255,0.25) inset !important;
      border: 1px solid rgba(255,255,255,0.15) !important;
    }
    .theme-toggle-btn:hover {
      transform: scale(1.12) rotate(25deg) !important;
      box-shadow: 0 6px 22px rgba(109, 40, 217, 0.55) !important;
    }

    /* ---- الوضع الليلي للتابات ---- */
    [data-theme="dark"] .nav-link {
      color: #94a3b8 !important;
    }
    [data-theme="dark"] .nav-link:hover {
      color: #c4b5fd !important;
      background: rgba(124, 58, 237, 0.18) !important;
      border-color: rgba(139, 92, 246, 0.28) !important;
    }
    [data-theme="dark"] .nav-link.active {
      background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 50%, #4f46e5 100%) !important;
      color: #fff !important;
      box-shadow: 0 4px 20px rgba(124, 58, 237, 0.5) !important;
    }

    /* ---- تجاوب ---- */
    @media (max-width: 1100px) {
      .nav-link { font-size: 13px !important; padding: 6px 9px !important; gap: 4px !important; }
      .nav-link svg, .nav-item svg, .nav-icon { width: 13px !important; height: 13px !important; }
      #siteLogo .logo-icon { width: 28px !important; height: 28px !important; }
    }
    @media (max-width: 768px) {
      .nav-link { font-size: 12px !important; padding: 5px 7px !important; }
      .nav-link svg, .nav-item svg, .nav-icon { width: 12px !important; height: 12px !important; }
      .header-nav { padding: 0.3rem 0 !important; }
    }


    /* =========================================================
       4. تصميم محرك البحث الرئيسي المبتكر
       ========================================================= */
    .home-hero-search {
      text-align: center;
      padding: 2.6rem 1.5rem 2.1rem 1.5rem;
      background: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: 22px;
      box-shadow: var(--shadow-glow);
      position: relative;
      overflow: hidden;
      margin-bottom: 2rem;
    }

    .home-hero-title {
      font-size: 2.2rem;
      font-weight: 800;
      background: var(--purple-gradient);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      margin-bottom: 0.5rem;
    }

    .home-hero-subtitle {
      color: var(--text-muted);
      font-size: 1.05rem;
      margin-bottom: 1.8rem;
    }

    .hero-search-wrapper {
      position: relative;
      max-width: 680px;
      margin: 0 auto 1.5rem auto;
    }

    .hero-search-box {
      display: flex;
      align-items: center;
      background: var(--bg-color);
      border: 2px solid var(--border-color);
      border-radius: 50px;
      padding: 0.5rem 1.2rem;
      transition: all 0.3s ease;
      box-shadow: var(--shadow-sm);
    }

    .hero-search-box:hover,
    .hero-search-box:focus-within {
      border-color: var(--primary-purple);
      box-shadow: 0 0 20px rgba(124, 58, 237, 0.25);
      background: var(--card-bg);
    }

    .hero-search-input {
      border: none;
      outline: none;
      background: transparent;
      color: var(--text-main);
      font-size: 1.1rem;
      font-weight: 600;
      width: 100%;
      padding: 0.4rem 0.8rem;
      text-align: right;
    }

    .hero-search-icon {
      font-size: 1.3rem;
      color: var(--primary-purple);
    }

    .quick-suggestions {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.6rem;
      max-width: 800px;
      margin: 0 auto;
    }

    .suggestion-tag-title {
      font-size: 0.88rem;
      font-weight: 700;
      color: var(--text-muted);
      margin-left: 0.5rem;
    }

    /* تحديث كلاس الأزرار السريعة لتتطابق مع الـ HTML الخاص بك */
    .suggestion-btn {
      background: var(--purple-light);
      border: 1px solid var(--border-color);
      color: var(--primary-purple);
      padding: 0.4rem 0.9rem;
      border-radius: 30px;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      transition: all var(--transition-fast, 0.2s ease);
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
    }

    .suggestion-btn:hover {
      background: var(--primary-purple);
      color: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
    }

    .hero-suggestions-dropdown {
      position: absolute;
      top: calc(100% + 10px);
      left: 0;
      right: 0;
      background: var(--dropdown-bg, var(--card-bg));
      border: 1px solid var(--border-color);
      border-radius: 16px;
      box-shadow: var(--shadow-glow);
      max-height: 400px;
      overflow-y: auto;
      z-index: 3000;
      display: none;
      padding: 0.6rem;
      text-align: right;
    }

    .hero-suggestions-dropdown.show {
      display: block;
    }

    .suggestion-item {
      padding: 0.75rem 1rem;
      border-radius: 10px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      transition: background-color var(--transition-fast, 0.2s ease);
      border-bottom: 1px dashed var(--border-color);
    }

    .suggestion-item:last-child {
      border-bottom: none;
    }

    .suggestion-item:hover {
      background-color: var(--purple-light);
    }

    .suggestion-title {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--text-main);
    }

    .suggestion-badge {
      font-size: 0.75rem;
      font-weight: 600;
      padding: 0.2rem 0.6rem;
      border-radius: 50px;
      background: var(--purple-gradient);
      color: #ffffff;
      white-space: nowrap;
    }

    .no-results {
      padding: 1.2rem;
      text-align: center;
      color: var(--text-muted);
      font-size: 0.95rem;
    }
.suggestion-btn {
  background: var(--purple-light, #f3e8ff);
  border: 1px solid var(--border-color, #cbd5e1);
  color: var(--primary-purple, #7c3aed);
  padding: 0.4rem 1rem;
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0.2rem;
}

.suggestion-btn:hover {
  background: var(--primary-purple, #7c3aed);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}
    /* تأثير إبراز المحتوى (Highlight) الناعم والاحترافي عند النقر على النتائج */
    @keyframes highlightPulse {
      0% { 
        background-color: rgba(124, 58, 237, 0.35); 
        box-shadow: 0 0 15px rgba(124, 58, 237, 0.4);
        transform: scale(1.01); 
      }
      50% { 
        background-color: rgba(124, 58, 237, 0.15); 
      }
      100% { 
        background-color: transparent; 
        box-shadow: none;
        transform: scale(1); 
      }
    }

    .search-highlight {
      animation: highlightPulse 2.5s ease-in-out;
      border-radius: 8px;
      transition: all 0.3s ease;
    }
    /* =========================================================
       5. منطقة عرض المحتوى (Main Content Area)
       ========================================================= */
    .main-container {
      max-width: 1240px;
      margin: 1.5rem auto 2.5rem;
      padding: 0 1.25rem;
      flex: 1;
      width: 100%;
    }

    .tab-content {
      display: none;
      background: var(--card-bg);
      backdrop-filter: blur(8px);
      padding: 1.75rem 1.85rem;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-glow);
      border: 1px solid var(--border-color);
      animation: ccFadeUp 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
      position: relative;
      overflow: hidden;
    }
    .tab-content::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--purple-gradient);
      opacity: 0.9;
      pointer-events: none;
    }

    .tab-content.active {
      display: block !important;
    }

    .tab-content h1 {
      color: var(--primary-purple);
      margin-bottom: 1rem;
      font-size: 1.7rem;
      font-weight: 800;
      position: relative;
      display: inline-block;
      letter-spacing: -0.02em;
    }

    .tab-content h1::after {
      content: '';
      position: absolute;
      bottom: -6px;
      right: 0;
      width: 55%;
      height: 3px;
      background: var(--purple-gradient);
      border-radius: 2px;
    }

    .tab-content p {
      color: var(--text-muted);
      line-height: 1.75;
      font-size: 1.02rem;
      margin-top: 1rem;
    }

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

    /* جداول عامة أكثر حداثة */
    table {
      border-collapse: separate;
      border-spacing: 0;
    }
    .tab-content table th,
    .main-container table th {
      letter-spacing: 0.02em;
    }
    .tab-content table tbody tr,
    .main-container table tbody tr {
      transition: background-color 0.2s ease, transform 0.2s ease;
    }

    /* أزرار عامة */
    button, .suggestion-btn, .filter-btn, .ccare-btn-primary {
      transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.25s ease !important;
    }
    button:active, .suggestion-btn:active, .filter-btn:active {
      transform: scale(0.97) !important;
    }

    /* بطاقات عامة */
    .home-hero-search,
    .voice-section-card,
    .voice-header-card,
    .table-container,
    .b2b-common-wrapper,
    .roaming-bundles-wrapper .info-section,
    .roaming-bundles-wrapper .notes-section {
      transition: box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
    }
    .home-hero-search:hover,
    .voice-section-card:hover {
      box-shadow: var(--shadow-lift);
    }

    /* =========================================================
       6. تنسيقات صفحة تك تك
       ========================================================= */
       /* لإخفاء الإطار والخلفية البيضاء لتابات B2B تك تك لتمدد الخلفية بالكامل */
    #b2b-pre-data-card,
    #b2b-pre-data-card-hy,
    #b2b-post-data-card,
     #postpaid-voice,
     #bede-merchant,
     #shops,
     #prepaid-peak,
     #bede-electri,
      #bede-authentication,
      #me2u,
      #home,
      #international-call,
      #international-sms {
      padding: 0 !important;
      background: none !important;
      border: none !important;
      box-shadow: none !important;
      overflow: hidden;
    }
    /* تابات تك تك: لا نفرض background:none حتى تعمل الخلفية الموحدة الحديثة */
    #b2b-pre-taktik.tab-content,
    #b2b-pre-taktik-hy.tab-content,
    #b2b-post-taktik.tab-content,
    #prepaid-taktik.tab-content,
    #postpaid-taktik.tab-content {
      /* يُدار من taktik-modern-ui-2026 */
      overflow: hidden;
    }
    /* =========================================================
       4. تصميم خلفية تك تك المعتمدة ذو اللونين
       ========================================================= */

   /* =========================================================
   1. الحاويات الرئيسية والخلفيات (Main Wrappers & Animations)
   ========================================================= */
#prepaid-taktik-wrapper, 
#postpaid-taktik-wrapper,
.b2b-post-taktik-main-content-wrapper,
.b2b-pre-taktik-main-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  border-radius: 0;
  padding: 12px 8px;
  color: #ffffff;
  width: 100%;
  box-shadow: none;
  box-sizing: border-box;
  text-align: center;
}

/* العناوين الرئيسية */
#prepaid-taktik-wrapper h1.taktik-title,
#postpaid-taktik-wrapper h1.postpaid-taktik-h1,
h1.b2b-post-taktik-h1,
h1.b2b-pre-taktik-h1 {
  color: #ffffff !important;
  text-align: center;
  margin-bottom: 20px;
  font-size: 2em;
  font-weight: 700;
  animation: taktikTextGlowPulse 3s ease-in-out infinite alternate, 
             taktikTextSway 5s ease-in-out infinite alternate;
}

#prepaid-taktik-wrapper h1.taktik-title::after,
#postpaid-taktik-wrapper h1.postpaid-taktik-h1::after,
h1.b2b-post-taktik-h1::after,
h1.b2b-pre-taktik-h1::after {
  display: none !important;
}

/* انيميشن العناوين */
@keyframes taktikTextGlowPulse {
  0% { text-shadow: 2px 2px 8px rgba(0,0,0,0.5); }
  50% { text-shadow: 0 0 15px rgba(73, 160, 157, 0.9), 0 0 25px rgba(73, 160, 157, 0.7); }
  100% { text-shadow: 2px 2px 8px rgba(0,0,0,0.5); }
}

@keyframes taktikTextSway {
  0% { transform: translateX(0px); }
  50% { transform: translateX(5px); }
  100% { transform: translateX(0px); }
}

/* شارات الأكواد الفرعية للأناوين */
.b2b-post-taktik-sub-header-code,
.b2b-pre-taktik-sub-header-code {
  font-size: 1.1em;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  padding: 10px 25px;
  border-radius: 25px;
  margin-bottom: 25px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-block;
}

/* =========================================================
   2. الكروت والحاويات الداخلية (Details Containers & Headers)
   ========================================================= */
.taktik-details-container,
.postpaid-taktik-details-container {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto 40px auto;
  background-color: #ffffff;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  color: #333333;
  text-align: right;
  box-sizing: border-box;
}

.b2b-post-taktik-details-container,
.b2b-pre-taktik-details-container {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto 30px auto;
  background-color: rgba(255, 255, 255, 0.85);
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  color: #0f172a;
  text-align: right;
  box-sizing: border-box;
}

.taktik-details-header,
.postpaid-taktik-details-header,
.b2b-post-taktik-details-header,
.b2b-pre-taktik-details-header {
  background-color: #8e24aa;
  color: #ffffff;
  padding: 15px 20px;
  text-align: center;
  border-radius: 10px;
  margin-bottom: 25px;
  font-size: 1.1em;
  font-weight: 600;
}

.taktik-section-title,
.postpaid-taktik-details-section-title,
.b2b-post-taktik-details-section-title,
.b2b-pre-taktik-details-section-title {
  background-color: #8e24aa;
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 10px;
  margin-top: 25px;
  margin-bottom: 20px;
  font-size: 1.1em;
  font-weight: 600;
  text-align: right;
}

/* =========================================================
   3. تحويل الوحدات والكروت الصغيرة (Unit Conversions)
   ========================================================= */
.taktik-unit-conversion,
.postpaid-taktik-unit-conversion-section,
.b2b-post-taktik-unit-conversion-section,
.b2b-pre-taktik-unit-conversion-section {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-bottom: 25px;
  gap: 15px;
}

.taktik-unit-wrapper,
.postpaid-taktik-unit-box-wrapper,
.b2b-post-taktik-unit-box-wrapper,
.b2b-pre-taktik-unit-box-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  flex-grow: 1;
}

.taktik-unit-box,
.postpaid-taktik-unit-item-box,
.b2b-post-taktik-unit-item-box,
.b2b-pre-taktik-unit-item-box {
  background-color: #8e24aa;
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex: 1;
  min-width: 120px;
  font-size: 1em;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease;
}

.taktik-unit-box:hover,
.postpaid-taktik-unit-item-box:hover,
.b2b-post-taktik-unit-item-box:hover,
.b2b-pre-taktik-unit-item-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.taktik-unit-box .label,
.postpaid-taktik-unit-item-box .postpaid-taktik-label,
.b2b-post-taktik-unit-item-box .b2b-post-taktik-label,
.b2b-pre-taktik-unit-item-box .b2b-pre-taktik-label {
  font-size: 0.85em;
  color: #e0e0e0;
  margin-top: 4px;
}

.taktik-main-unit,
.postpaid-taktik-main-unit-display {
  background-color: #000000;
  color: #ffffff;
  padding: 15px 20px;
  font-size: 1.3em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
}

.b2b-post-taktik-main-unit-display,
.b2b-pre-taktik-main-unit-display {
  background-color: #1e293b;
  color: #ffffff;
  padding: 18px 22px;
  font-size: 1.4em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 0;
  width: auto;
  margin-left: 10px;
  font-weight: 700;
}

/* =========================================================
   4. القوائم والنصوص والتنبيهات (Lists & Texts)
   ========================================================= */
.taktik-rules-list,
.postpaid-taktik-details-rules-list,
.b2b-post-taktik-details-rules-list,
.b2b-pre-taktik-details-rules-list {
  list-style: none;
  padding: 0;
  text-align: right;
}

.taktik-rules-list li,
.postpaid-taktik-details-rules-list li {
  margin-bottom: 10px;
  padding-right: 25px;
  position: relative;
  font-size: 0.95em;
  color: var(--text-main, #0f172a);
}

.b2b-post-taktik-details-rules-list li,
.b2b-pre-taktik-details-rules-list li {
  margin-bottom: 12px;
  padding-right: 25px;
  position: relative;
  font-size: 0.9em;
  color: var(--text-main, #0f172a);
  line-height: 1.6;
}
[data-theme="dark"] .taktik-rules-list li,
[data-theme="dark"] .postpaid-taktik-details-rules-list li,
[data-theme="dark"] .b2b-post-taktik-details-rules-list li,
[data-theme="dark"] .b2b-pre-taktik-details-rules-list li {
  color: #e2e8f0 !important;
}
[data-theme="dark"] .taktik-rules-list li:before,
[data-theme="dark"] .postpaid-taktik-details-rules-list li:before {
  color: #c4b5fd !important;
}
[data-theme="dark"] .b2b-post-taktik-details-rules-list li:before,
[data-theme="dark"] .b2b-pre-taktik-details-rules-list li:before {
  color: #5eead4 !important;
}
[data-theme="dark"] .postpaid-taktik-details-info-text,
[data-theme="dark"] .taktik-details-container,
[data-theme="dark"] .postpaid-taktik-details-container,
[data-theme="dark"] .b2b-post-taktik-details-container,
[data-theme="dark"] .b2b-pre-taktik-details-container,
[data-theme="dark"] #prepaid-taktik-wrapper,
[data-theme="dark"] #postpaid-taktik-wrapper,
[data-theme="dark"] .b2b-post-taktik-main-content-wrapper,
[data-theme="dark"] .b2b-pre-taktik-main-content-wrapper {
  color: #e2e8f0 !important;
}
[data-theme="dark"] .taktik-details-container p,
[data-theme="dark"] .postpaid-taktik-details-container p,
[data-theme="dark"] .b2b-post-taktik-details-container p,
[data-theme="dark"] .b2b-pre-taktik-details-container p,
[data-theme="dark"] #prepaid-taktik-wrapper > p,
[data-theme="dark"] #postpaid-taktik-wrapper > p {
  color: #cbd5e1 !important;
}
/* لا تُفرض على فقرات البطاقات البيضاء */
[data-theme="dark"] #prepaid-taktik-wrapper .tt-lead,
[data-theme="dark"] #postpaid-taktik-wrapper .tt-lead,
[data-theme="dark"] #prepaid-taktik-wrapper .tt-card p,
[data-theme="dark"] #postpaid-taktik-wrapper .tt-card p,
[data-theme="dark"] #prepaid-taktik-wrapper .tt-card li,
[data-theme="dark"] #postpaid-taktik-wrapper .tt-card li {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
}
[data-theme="dark"] .taktik-details-container li,
[data-theme="dark"] .postpaid-taktik-details-container li,
[data-theme="dark"] .b2b-post-taktik-details-container li,
[data-theme="dark"] .b2b-pre-taktik-details-container li {
  color: #e2e8f0 !important;
}
[data-theme="dark"] .taktik-details-container,
[data-theme="dark"] .postpaid-taktik-details-container,
[data-theme="dark"] .b2b-post-taktik-details-container,
[data-theme="dark"] .b2b-pre-taktik-details-container {
  background: rgba(30, 41, 59, 0.85) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}

.taktik-rules-list li:before,
.postpaid-taktik-details-rules-list li:before {
  content: '✓';
  color: #8e24aa;
  font-weight: bold;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
}

.b2b-post-taktik-details-rules-list li:before,
.b2b-pre-taktik-details-rules-list li:before {
  content: '✓';
  color: #00897b;
  font-weight: bold;
  display: inline-block;
  width: 0.5em;
  margin-right: 5px;
  position: absolute;
  right: 0;
  top: 0;
}

.postpaid-taktik-details-info-text {
  line-height: 1.7;
  margin-bottom: 20px;
  text-align: right;
  font-size: 0.95em;
  color: var(--text-main, #0f172a);
}

.b2b-post-taktik-codes-box,
.b2b-pre-taktik-codes-box {
  background-color: rgba(142, 36, 170, 0.08);
  border-right: 4px solid #8e24aa;
  padding: 12px 20px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-size: 0.95em;
  color: #1e293b;
  line-height: 1.8;
}

.b2b-post-taktik-note-text,
.b2b-pre-taktik-note-text {
  font-size: 0.9em;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 10px 20px;
  border-radius: 8px;
  margin-bottom: 25px;
  display: inline-block;
}

/* =========================================================
   5. الجداول (Tables)
   ========================================================= */
.b2b-post-taktik-table-title,
.b2b-pre-taktik-table-title {
  color: #ffffff;
  font-size: 1.3em;
  font-weight: 700;
  margin-top: 25px;
  margin-bottom: 15px;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* الجداول البيضاء العادية */
.taktik-table, 
table.postpaid-taktik-table {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 30px auto;
  border-collapse: separate;
  border-spacing: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  overflow: hidden;
  direction: rtl;
  background-color: #ffffff;
}

.taktik-table th, .taktik-table td,
table.postpaid-taktik-table th, table.postpaid-taktik-table td {
  padding: 12px 15px;
  border: 1px solid #e0e0e0;
  text-align: center;
}

.taktik-table thead tr th,
table.postpaid-taktik-table thead tr th {
  background-color: #7b1fa2;
  color: #ffffff;
  font-size: 1em;
  font-weight: 700;
}

.taktik-table tbody td,
table.postpaid-taktik-table tbody td {
  background-color: #f3e5f5;
  color: #333333;
  font-weight: bold;
}

.taktik-table tbody td[rowspan] {
  background-color: #7b1fa2;
  color: #ffffff;
  vertical-align: middle;
}

.taktik-table tbody tr:hover td,
table.postpaid-taktik-table tbody tr:hover td {
  background-color: #e1bee7;
}

/* جداول B2B الشفافة */
table.b2b-post-taktik-table,
table.b2b-post-extra-table,
table.b2b-pre-taktik-table,
table.b2b-pre-extra-table {
  width: 100%;
  max-width: 1000px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  margin-bottom: 30px;
  border-radius: 15px;
  background-color: rgba(255, 255, 255, 0.05);
  direction: rtl;
}

table.b2b-post-taktik-table td,
table.b2b-post-extra-table td,
table.b2b-pre-taktik-table td,
table.b2b-pre-extra-table td {
  padding: 14px;
  background-color: rgba(30, 136, 229, 0.2);
  color: #ffffff;
  font-size: 1em;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 500;
}

table.b2b-post-taktik-table th,
table.b2b-post-extra-table th,
table.b2b-pre-taktik-table th,
table.b2b-pre-extra-table th {
  text-align: center;
  padding: 16px;
  color: #ffffff;
  background-color: #7b1fa2;
  font-size: 1.05em;
  font-weight: 700;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

table.b2b-post-taktik-table tbody tr:hover td,
table.b2b-post-extra-table tbody tr:hover td,
table.b2b-pre-taktik-table tbody tr:hover td,
table.b2b-pre-extra-table tbody tr:hover td {
  background-color: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* رمز الاشتراك الموحد */
.taktik-code-cell {
  color: #7b1fa2;
  font-family: monospace, sans-serif;
  font-weight: 700;
  direction: ltr;
}

/* =========================================================
       7. b2b
       ========================================================= */
/* =========================================================
       6. التنسيقات الموحدة لصفحات B2B QUOTA & B2B VOICE
       ========================================================= */
    /* الغلاف العام */
    .b2b-common-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 950px;
      margin: 0 auto;
      padding: 10px;
      box-sizing: border-box;
    }

    /* شريط العنوان وشريط كود الاشتراك */
    .b2b-quota-table-title {
      background-color: var(--b2b-accent-emerald);
      color: #ffffff;
      font-size: 1.1rem;
      font-weight: 700;
      padding: 10px 28px;
      border-radius: 10px;
      margin-bottom: 25px;
      box-shadow: 0 4px 15px var(--b2b-accent-glow);
      display: inline-block;
      text-align: center;
    }

    .b2b-voice-sub-banner {
      background: var(--b2b-accent-cyan);
      color: #ffffff;
      font-size: 1.05rem;
      font-weight: 700;
      padding: 8px 32px;
      border-radius: 50px;
      margin-bottom: 30px;
      box-shadow: 0 4px 15px var(--b2b-accent-cyan-glow);
      text-align: center;
    }

    .b2b-voice-tech-status-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--b2b-accent-cyan-glow);
      border: 1px solid var(--b2b-accent-cyan);
      padding: 6px 18px;
      border-radius: 30px;
      font-size: 0.85rem;
      color: var(--b2b-accent-cyan);
      margin-bottom: 20px;
      font-weight: 700;
    }

    .pulse-dot {
      width: 8px;
      height: 8px;
      background-color: var(--b2b-accent-cyan);
      border-radius: 50%;
      box-shadow: 0 0 8px var(--b2b-accent-cyan);
      animation: pulse 1.8s infinite;
    }

    @keyframes pulse {
      0% { transform: scale(0.95); opacity: 0.8; }
      50% { transform: scale(1.2); opacity: 1; }
      100% { transform: scale(0.95); opacity: 0.8; }
    }

    .b2b-voice-section-title {
      background: var(--b2b-card-bg);
      color: var(--b2b-accent-cyan);
      font-size: 1.15rem;
      font-weight: 800;
      padding: 10px 24px;
      border-radius: 10px;
      margin-bottom: 20px;
      border: 1px solid var(--b2b-card-border);
      border-right: 4px solid var(--b2b-accent-cyan);
      display: inline-block;
    }

    /* شبكة الجداول السفلية */
    .b2b-voice-bottom-tables-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 24px;
      width: 100%;
    }

    .b2b-voice-unified-table-container,
    .b2b-voice-main-table-container {
      width: 100%;
      margin-bottom: 35px;
    }

    /* تنسيقات الجداول الموحدة */
    table.b2b-custom-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      margin-bottom: 30px;
      border-radius: 14px;
      background-color: var(--b2b-card-bg);
      backdrop-filter: blur(12px);
      border: 1px solid var(--b2b-card-border);
      color: var(--b2b-text-primary);
    }

    table.b2b-custom-table th.b2b-header-main {
      background-color: var(--b2b-header-main-bg);
      color: var(--b2b-header-main-text);
      font-size: 1rem;
      font-weight: 700;
      padding: 16px;
      border-bottom: 1px solid var(--b2b-card-border);
      text-align: center;
    }

    table.b2b-custom-table th.b2b-header-bronze {
      background-color: var(--b2b-header-bronze-bg);
      color: #ffffff;
      font-size: 1.05rem;
      font-weight: 700;
      padding: 16px;
      border-bottom: 1px solid var(--b2b-card-border);
      text-align: center;
    }

    table.b2b-custom-table td {
      padding: 14px;
      font-size: 0.98rem;
      text-align: center;
      border-bottom: 1px solid var(--b2b-card-border);
      border-left: 1px solid var(--b2b-card-border);
      font-weight: 600;
    }

    table.b2b-custom-table td:last-child {
      border-left: none;
    }

    table.b2b-custom-table td.b2b-validity-cell {
      background-color: var(--b2b-validity-bg);
      color: var(--b2b-text-primary);
      font-size: 1.05rem;
      font-weight: 700;
      vertical-align: middle;
    }

    .price-exc, .fee-exc {
      font-family: 'JetBrains Mono', monospace;
    }

    .vat-calculated-value {
      font-family: 'JetBrains Mono', monospace;
      color: var(--b2b-accent-emerald) !important;
      font-weight: 800 !important;
      background-color: var(--b2b-accent-glow);
    }

    .b2b-voice-wrapper .vat-calculated-value {
      color: var(--b2b-accent-cyan) !important;
      background-color: var(--b2b-accent-cyan-glow);
    }

    table.b2b-custom-table tbody tr:hover td:not(.b2b-validity-cell) {
      background-color: var(--b2b-table-hover) !important;
      transition: background-color 0.2s ease;
    }

    .b2b-voice-wrapper table.b2b-custom-table tbody tr:hover td:not(.b2b-validity-cell) {
      background-color: var(--b2b-table-voice-hover) !important;
    }

/* =========================================================
       3. تنسيقات B2B Data Cards المشتركة (Prepaid & Postpaid)
       ========================================================= */

    /* الحاوية الرئيسية المشتركة */
    .b2b-card-wrapper {
      border-radius: 12px;
      padding: 30px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .b2b-post-wrapper {
      background: var(--b2b-post-bg);
      color: var(--b2b-post-text);
    }

    .b2b-pre-wrapper {
      background: var(--b2b-pre-bg);
      color: var(--b2b-pre-text);
    }

    /* العناوين الرئيسية المشتركة */
    .b2b-card-wrapper h1.b2b-card-h1 {
      text-align: center;
      font-size: 2em;
    }
    .b2b-card-wrapper h1.b2b-card-h1::after { display: none; }

    .b2b-post-wrapper h1.b2b-card-h1 {
      color: var(--b2b-post-h1);
      margin-bottom: 20px;
      font-weight: 700;
      animation: b2bPostTextGlow 3s ease-in-out infinite alternate;
    }

    .b2b-pre-wrapper h1.b2b-card-h1 {
      color: var(--b2b-pre-h1);
      margin-bottom: 25px;
      font-weight: 800;
      animation: b2bPreGlow 3s ease-in-out infinite alternate;
    }

    @keyframes b2bPostTextGlow {
      0% { text-shadow: 2px 2px 8px rgba(0,0,0,0.3); }
      50% { text-shadow: 0 0 15px rgba(32, 201, 151, 0.9); }
      100% { text-shadow: 2px 2px 8px rgba(0,0,0,0.3); }
    }

    @keyframes b2bPreGlow {
      0% { text-shadow: 0 0 10px rgba(168, 85, 247, 0.4); }
      100% { text-shadow: 0 0 20px rgba(168, 85, 247, 0.9); }
    }

    /* عناوين الجداول المشتركة */
    .b2b-post-table-title {
      color: var(--b2b-post-table-title);
      font-size: 1.3em;
      font-weight: 700;
      margin-top: 30px;
      margin-bottom: 15px;
    }

    .b2b-pre-table-title {
      background: var(--b2b-pre-badge-bg);
      color: var(--b2b-pre-badge-text);
      font-size: 1.2em;
      font-weight: 800;
      padding: 10px 30px;
      border-radius: 8px;
      margin-top: 25px;
      margin-bottom: 20px;
      display: inline-block;
    }

    /* حاوية الجداول والتنسيقات الهيكلية المشتركة */
    .b2b-table-container {
      width: 100%;
      max-width: 950px;
      margin-bottom: 35px;
    }

    table.b2b-data-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 40px;
    }

    table.b2b-data-table th, 
    table.b2b-data-table td {
      padding: 14px 10px;
      text-align: center;
      font-size: 1em;
    }

    table.b2b-data-table th {
      font-size: 1.05em;
      font-weight: 700;
      color: #ffffff;
    }

    table.b2b-data-table td {
      font-weight: 500;
    }

    table.b2b-data-table tbody tr:hover td {
      cursor: pointer;
    }

    /* تخصيص جدول B2B Postpaid */
    table.b2b-post-table {
      max-width: 1000px;
      background-color: var(--b2b-post-table-bg);
    }
    table.b2b-post-table th {
      background-color: var(--b2b-post-table-th-bg);
      border: 1px solid var(--b2b-post-table-border);
    }
    table.b2b-post-table td {
      background-color: var(--b2b-post-table-td-bg);
      color: var(--b2b-post-table-td-text);
      border: 1px solid var(--b2b-post-table-border);
    }
    table.b2b-post-table tbody tr:hover td {
      background-color: var(--b2b-post-table-hover);
    }

    /* تخصيص جدول B2B Prepaid */
    table.b2b-pre-table {
      background-color: var(--b2b-pre-table-container-bg);
      border: 2px solid var(--b2b-pre-table-border);
    }
    table.b2b-pre-table th {
      background-color: var(--b2b-pre-table-th-bg);
      color: var(--b2b-pre-table-th-text);
      border: 1px solid var(--b2b-pre-table-th-border);
    }
    table.b2b-pre-table td {
      background-color: var(--b2b-pre-table-td-bg);
      color: var(--b2b-pre-table-td-text);
      border: 1px solid var(--b2b-pre-table-td-border);
      font-weight: 600;
    }
    table.b2b-pre-table tbody tr:nth-child(even) td {
      background-color: var(--b2b-pre-table-td-even-bg);
    }
    table.b2b-pre-table td.b2b-pre-code-cell {
      color: var(--b2b-pre-code-cell-color);
      font-family: monospace, sans-serif;
      font-size: 1.1em;
      direction: ltr;
      font-weight: 700;
    }
    table.b2b-pre-table tbody tr:hover td {
      background-color: var(--b2b-pre-table-hover-bg) !important;
      color: var(--b2b-pre-table-hover-text);
    }

    /* =========================================================
       B2B Prepaid HY – ثيم تيل / كهرماني (مختلف عن البنفسجي الأصلي)
       ========================================================= */

    /* مشاركة أنماط taktik مع النسخ HY */
    .b2b-pre-taktik-hy-main-content-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: transparent;
      border-radius: 0;
      padding: 12px 8px;
      color: #ffffff;
      width: 100%;
      box-shadow: none;
      box-sizing: border-box;
      text-align: center;
    }
    h1.b2b-pre-taktik-hy-h1 {
      color: #ffffff !important;
      text-align: center;
      margin-bottom: 20px;
      font-size: 2em;
      font-weight: 700;
      text-shadow: 0 0 18px rgba(251, 191, 36, 0.55);
    }
    h1.b2b-pre-taktik-hy-h1::after { display: none !important; }
    .b2b-pre-taktik-hy-sub-header-code {
      font-size: 1.1em; font-weight: bold;
      background-color: rgba(0, 0, 0, 0.35);
      color: #fef3c7;
      padding: 10px 25px; border-radius: 25px; margin-bottom: 25px;
      border: 1px solid rgba(251, 191, 36, 0.5);
      display: inline-block;
    }
    .b2b-pre-taktik-hy-details-container {
      max-width: 1000px; width: 100%; margin: 0 auto 30px auto;
      background-color: rgba(255, 255, 255, 0.92);
      padding: 25px; border-radius: 15px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
      color: #134e4a; text-align: right; box-sizing: border-box;
    }
    .b2b-pre-taktik-hy-details-header,
    .b2b-pre-taktik-hy-details-section-title {
      background-color: #0f766e; color: #ffffff;
      padding: 15px 20px; text-align: center; border-radius: 10px;
      margin-bottom: 25px; font-size: 1.1em; font-weight: 600;
    }
    .b2b-pre-taktik-hy-details-section-title {
      margin-top: 25px; text-align: right;
    }
    .b2b-pre-taktik-hy-unit-conversion-section {
      display: flex; align-items: center; justify-content: flex-end;
      flex-wrap: wrap; margin-bottom: 25px; gap: 15px;
    }
    .b2b-pre-taktik-hy-unit-box-wrapper {
      display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; flex-grow: 1;
    }
    .b2b-pre-taktik-hy-unit-item-box {
      background-color: #0d9488; color: #ffffff;
      padding: 12px 20px; border-radius: 8px; text-align: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1); flex: 1; min-width: 120px;
      font-size: 1em; font-weight: 600;
      display: flex; flex-direction: column; justify-content: center; align-items: center;
      transition: transform 0.2s ease-in-out, box-shadow 0.2s ease;
    }
    .b2b-pre-taktik-hy-unit-item-box:hover {
      transform: translateY(-5px); box-shadow: 0 10px 15px rgba(0,0,0,0.15); cursor: pointer;
    }
    .b2b-pre-taktik-hy-unit-item-box .b2b-pre-taktik-hy-label {
      font-size: 0.85em; color: #ccfbf1; margin-top: 4px;
    }
    .b2b-pre-taktik-hy-main-unit-display {
      background-color: #134e4a; color: #fef3c7;
      padding: 18px 22px; font-size: 1.4em;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1); border-radius: 8px;
      display: flex; justify-content: center; align-items: center;
      flex-grow: 0; width: auto; margin-left: 10px; font-weight: 700;
    }
    .b2b-pre-taktik-hy-details-rules-list { list-style: none; padding: 0; text-align: right; }
    .b2b-pre-taktik-hy-details-rules-list li {
      margin-bottom: 12px; padding-right: 25px; position: relative;
      font-size: 0.9em; color: #134e4a; line-height: 1.6;
    }
    .b2b-pre-taktik-hy-details-rules-list li:before {
      content: '✓'; color: #0d9488; font-weight: bold;
      display: inline-block; width: 0.5em; margin-right: 5px;
      position: absolute; right: 0; top: 0;
    }
    .b2b-pre-taktik-hy-codes-box {
      background-color: rgba(13, 148, 136, 0.1);
      border-right: 4px solid #0d9488;
      padding: 12px 20px; border-radius: 6px; margin-bottom: 20px;
      font-size: 0.95em; color: #134e4a; line-height: 1.8;
    }
    .b2b-pre-taktik-hy-note-text {
      font-size: 0.9em; color: #ffffff;
      background-color: rgba(217, 119, 6, 0.4);
      padding: 10px 20px; border-radius: 8px; margin-bottom: 25px; display: inline-block;
    }
    .b2b-pre-taktik-hy-table-title {
      color: #fef3c7; font-size: 1.3em; font-weight: 700;
      margin-top: 25px; margin-bottom: 15px;
      text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    }
    table.b2b-pre-taktik-hy-table,
    table.b2b-pre-hy-extra-table {
      width: 100%; max-width: 1000px; border-collapse: separate; border-spacing: 0;
      overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.4);
      margin-bottom: 30px; border-radius: 15px;
      background-color: rgba(255,255,255,0.05); direction: rtl;
    }
    table.b2b-pre-taktik-hy-table td,
    table.b2b-pre-hy-extra-table td {
      padding: 14px; background-color: rgba(15, 118, 110, 0.25);
      color: #ffffff; font-size: 1em; text-align: center;
      border: 1px solid rgba(255,255,255,0.1); font-weight: 500;
    }
    table.b2b-pre-taktik-hy-table th,
    table.b2b-pre-hy-extra-table th {
      text-align: center; padding: 16px; color: #ffffff;
      background-color: #0f766e; font-size: 1.05em; font-weight: 700;
      text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
      border: 1px solid rgba(255,255,255,0.1);
    }
    table.b2b-pre-taktik-hy-table tbody tr:hover td,
    table.b2b-pre-hy-extra-table tbody tr:hover td {
      background-color: rgba(217, 119, 6, 0.35); cursor: pointer;
      transition: background-color 0.3s ease;
    }

    /* Voice & Quota HY colors */
    #b2b-pre-voice-hy .b2b-common-wrapper,
    #b2b-pre-quota-hy .b2b-common-wrapper {
      --b2b-header-main-bg: #0f766e;
      --b2b-header-main-text: #ffffff;
      --b2b-header-bronze-bg: #d97706;
      --b2b-accent-emerald: #0d9488;
      --b2b-accent-cyan: #ea580c;
      --b2b-accent-glow: rgba(13, 148, 136, 0.2);
      --b2b-accent-cyan-glow: rgba(234, 88, 12, 0.2);
      --b2b-card-border: rgba(13, 148, 136, 0.35);
      --b2b-table-hover: #f0fdfa;
      --b2b-table-voice-hover: #fff7ed;
      --b2b-validity-bg: #ccfbf1;
    }
    #b2b-pre-voice-hy .b2b-voice-tech-status-bar {
      background: rgba(234, 88, 12, 0.12); border-color: #ea580c; color: #c2410c;
    }
    #b2b-pre-voice-hy .pulse-dot { background-color: #ea580c; box-shadow: 0 0 8px #ea580c; }
    #b2b-pre-voice-hy .b2b-voice-section-title { color: #0d9488; border-right-color: #0d9488; }
    #b2b-pre-voice-hy .vat-calculated-value {
      color: #ea580c !important; background-color: rgba(234, 88, 12, 0.15);
    }
    #b2b-pre-quota-hy .b2b-quota-table-title {
      background-color: #0d9488; box-shadow: 0 4px 15px rgba(13, 148, 136, 0.25);
    }
    #b2b-pre-voice-hy table.b2b-custom-table th.b2b-header-main,
    #b2b-pre-quota-hy table.b2b-custom-table th.b2b-header-main { background-color: #0f766e; }
    #b2b-pre-voice-hy table.b2b-custom-table th.b2b-header-bronze,
    #b2b-pre-quota-hy table.b2b-custom-table th.b2b-header-bronze { background-color: #d97706; }

    /* Data Card HY colors */
    #b2b-pre-data-card-hy .b2b-pre-wrapper,
    #b2b-pre-data-card-hy .b2b-card-wrapper {
      background: linear-gradient(to bottom, #ecfdf5, #fff7ed 45%, #ffedd5) !important;
      color: #134e4a !important;
    }
    #b2b-pre-data-card-hy h1.b2b-card-h1 {
      color: #0f766e !important; animation: none !important;
      text-shadow: 0 0 12px rgba(13, 148, 136, 0.35);
    }
    #b2b-pre-data-card-hy .b2b-pre-table-title {
      background: linear-gradient(to bottom, #0d9488, #0f766e) !important; color: #ffffff !important;
    }
    #b2b-pre-data-card-hy table.b2b-pre-table {
      background-color: rgba(255,255,255,0.9) !important; border: 2px solid #0d9488 !important;
    }
    #b2b-pre-data-card-hy table.b2b-pre-table th {
      background-color: #0f766e !important; color: #ffffff !important; border-color: #14b8a6 !important;
    }
    #b2b-pre-data-card-hy table.b2b-pre-table td {
      background-color: rgba(255,255,255,0.95) !important; color: #134e4a !important;
      border-color: rgba(13, 148, 136, 0.2) !important;
    }
    #b2b-pre-data-card-hy table.b2b-pre-table tbody tr:nth-child(even) td {
      background-color: rgba(204, 251, 241, 0.5) !important;
    }
    #b2b-pre-data-card-hy table.b2b-pre-table td.b2b-pre-code-cell { color: #c2410c !important; }
    #b2b-pre-data-card-hy table.b2b-pre-table tbody tr:hover td {
      background-color: rgba(13, 148, 136, 0.22) !important; color: #134e4a !important;
    }

    [data-theme="dark"] #b2b-pre-data-card-hy .b2b-card-wrapper,
    [data-theme="dark"] #b2b-pre-data-card-hy .b2b-pre-wrapper {
      background: linear-gradient(to bottom, #042f2e, #134e4a 40%, #431407) !important;
      color: #f0fdfa !important;
    }
    [data-theme="dark"] #b2b-pre-data-card-hy h1.b2b-card-h1 { color: #5eead4 !important; }
    [data-theme="dark"] #b2b-pre-data-card-hy table.b2b-pre-table td {
      background-color: rgba(15, 23, 42, 0.7) !important; color: #f0fdfa !important;
    }
    [data-theme="dark"] .b2b-pre-taktik-hy-main-content-wrapper {
      background: transparent !important;
    }

    /* صندوق الشروط والقواعد (B2B Postpaid) */
    .b2b-post-details-container {
      max-width: 1000px;
      width: 100%;
      margin: 0 auto 40px auto;
      background-color: var(--b2b-post-container-bg);
      padding: 30px;
      border-radius: 15px;
      color: var(--b2b-post-container-text);
      text-align: right;
    }

    .b2b-post-details-header {
      background-color: var(--b2b-post-header-bg);
      color: var(--b2b-post-header-text);
      padding: 15px 20px;
      text-align: center;
      border-radius: 10px;
      margin-bottom: 25px;
      font-size: 1.2em;
      font-weight: 700;
    }

    .b2b-post-rules-list {
      list-style: none;
      padding: 0;
      text-align: right;
    }

    .b2b-post-rules-list li {
      margin-bottom: 12px;
      padding-right: 25px;
      position: relative;
      font-size: 0.95em;
      color: var(--b2b-post-rules-text);
      line-height: 1.7;
      font-weight: 600;
    }

    .b2b-post-rules-list li:before {
      content: '✓';
      color: var(--b2b-post-rule-check);
      font-weight: bold;
      position: absolute;
      right: 0;
      top: 0;
    }

/* =========================================================
       7. المكاتب
       ========================================================= */
/* تنسيق الحاوية الرئيسية كـ Tab Content معزول */
/* =========================================================
   مكاتب زين - تصميم متطور ومتناسق مع الوضعين النهاري والليلي
   ========================================================= */

#shops {
    direction: rtl;
    text-align: center;
    font-family: 'Arial', sans-serif;
    padding: 24px 12px;
    box-sizing: border-box;
    width: 100%;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#shops * {
    box-sizing: border-box;
}

/* الحاوية الرئيسية */
#shops .table-container {
    background-color: var(--card-bg, #ffffff);
    color: var(--text-color, #2d3748);
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-color, #e2e8f0);
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    overflow-x: auto;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* دعم الوضع الليلي تلقائياً بجميع الفئات المحتملة */
body.dark-mode #shops .table-container,
[data-theme="dark"] #shops .table-container,
.dark #shops .table-container {
    --card-bg: #1e293b;
    --text-color: #f1f5f9;
    --border-color: #334155;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* حقل البحث العصري */
#shops .search-input {
    width: 100%;
    padding: 14px 20px;
    margin-bottom: 24px;
    border: 2px solid var(--input-border, #cbd5e1);
    background-color: var(--input-bg, #f8fafc);
    color: var(--text-color, #2d3748);
    border-radius: 10px;
    font-size: 16px;
    text-align: right;
    outline: none;
    transition: all 0.3s ease;
}

body.dark-mode #shops .search-input,
[data-theme="dark"] #shops .search-input,
.dark #shops .search-input {
    --input-bg: #0f172a;
    --input-border: #475569;
    --text-color: #f1f5f9;
}

#shops .search-input:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
}

#shops .search-input::placeholder {
    color: #94a3b8;
}

/* الجدول العصري */
#shops table.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--border-color, #e2e8f0);
}

#shops table.data-table th,
#shops table.data-table td {
    padding: 14px 18px;
    text-align: center;
    font-size: 14px;
}

/* رأس الجدول */
#shops table.data-table th {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
}

#shops table.data-table td {
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    border-left: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-color, #2d3748);
    background-color: var(--card-bg, #ffffff);
}

body.dark-mode #shops table.data-table td,
[data-theme="dark"] #shops table.data-table td,
.dark #shops table.data-table td {
    background-color: #1e293b;
    border-color: #334155;
}

#shops table.data-table td:last-child {
    border-left: none;
}

/* صفوف الجدول العادية والتبديل المريح */
#shops table.data-table tr:nth-child(even):not(.region-header) td {
    background-color: var(--even-row-bg, #f8fafc);
}

body.dark-mode #shops table.data-table tr:nth-child(even):not(.region-header) td,
[data-theme="dark"] #shops table.data-table tr:nth-child(even):not(.region-header) td,
.dark #shops table.data-table tr:nth-child(even):not(.region-header) td {
    background-color: #111827;
}

/* تأثير التمرير (Hover) */
#shops table.data-table tr:hover:not(.region-header) td {
    background-color: var(--hover-bg, #f1f5f9) !important;
}

body.dark-mode #shops table.data-table tr:hover:not(.region-header) td,
[data-theme="dark"] #shops table.data-table tr:hover:not(.region-header) td,
.dark #shops table.data-table tr:hover:not(.region-header) td {
    background-color: #273548 !important;
}

/* رؤوس المناطق (الإقاليم والمحافظات) */
#shops table.data-table .region-header td {
    background-color: #8b5cf6 !important;
    color: #ffffff !important;
    font-weight: bold;
    text-align: center !important;
    padding: 16px;
    font-size: 15px;
    letter-spacing: 0.5px;
    border: none !important;
}

/* التجاوب مع الشاشات الصغيرة (Mobile View) */
@media (max-width: 768px) {
    #shops table.data-table,
    #shops table.data-table thead,
    #shops table.data-table tbody,
    #shops table.data-table th,
    #shops table.data-table td,
    #shops table.data-table tr {
        display: block;
    }

    #shops table.data-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    #shops table.data-table tr:not(.region-header) {
        border: 1px solid var(--border-color, #cbd5e1);
        margin-bottom: 16px;
        border-radius: 12px;
        overflow: hidden;
        background-color: var(--card-bg, #ffffff);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    }

    body.dark-mode #shops table.data-table tr:not(.region-header),
    [data-theme="dark"] #shops table.data-table tr:not(.region-header),
    .dark #shops table.data-table tr:not(.region-header) {
        background-color: #1e293b;
        border-color: #334155;
    }

    #shops table.data-table td {
        border: none;
        border-bottom: 1px solid var(--border-color, #f1f5f9);
        position: relative;
        padding: 12px 15px 12px 50%;
        text-align: left;
        background-color: transparent !important;
    }

    body.dark-mode #shops table.data-table td,
    [data-theme="dark"] #shops table.data-table td,
    .dark #shops table.data-table td {
        border-bottom-color: #334155;
    }

    #shops table.data-table td:last-child {
        border-bottom: none;
    }

    /* استخدام data-label للتجاوب في الجوال */
    #shops table.data-table td:before {
        content: attr(data-label);
        position: absolute;
        right: 15px;
        width: 45%;
        white-space: nowrap;
        font-weight: bold;
        text-align: right;
        color: #8b5cf6;
    }

    #shops table.data-table .region-header {
        display: block;
        margin-bottom: 16px;
        border-radius: 12px;
        overflow: hidden;
    }

    #shops table.data-table .region-header td {
        display: block;
        text-align: center !important;
        padding: 14px;
        border: none;
        background-color: #8b5cf6 !important;
        color: #ffffff !important;
    }
}
    /* =========================================================
       7. تنسيقات باقات التجوال وجدول الوكلاء
       ========================================================= */
    .roaming-bundles-wrapper {
      --primary-color: #2c3e50;
      --secondary-color: #3498db;
      --accent-color: #e67e22;
      --card-background: var(--card-bg);
      --border-color-int: #dfe6ee;
      --text-color: var(--text-main);
      --header-gradient-start: #34495e;
      --header-gradient-end: #2c3e50;

      color: var(--text-color);
      direction: rtl;
      line-height: 1.5;
      font-size: 15px;
      width: 100%;
      box-sizing: border-box;
    }

    .roaming-bundles-wrapper .header {
      background-image: linear-gradient(to right, var(--header-gradient-start), var(--header-gradient-end));
      color: #ffffff;
      padding: 25px 20px;
      text-align: center;
      border-radius: 12px;
      margin-bottom: 25px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    }

    .roaming-bundles-wrapper .header h1 {
      margin: 0;
      font-size: 2em;
      font-weight: 700;
      color: #ffffff !important;
    }

    .roaming-bundles-wrapper .header h1::after {
      display: none;
    }

    .roaming-bundles-wrapper .info-section,
    .roaming-bundles-wrapper .notes-section {
      max-width: 100%;
      margin: 20px auto;
      padding: 20px;
      background-color: var(--card-background);
      border-radius: 10px;
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
      text-align: right;
      border: 1px solid var(--border-color);
    }

    .roaming-bundles-wrapper .info-section h2,
    .roaming-bundles-wrapper .notes-section h2 {
      color: var(--primary-color);
      border-bottom: 2px solid var(--secondary-color);
      padding-bottom: 8px;
      margin-top: 15px;
      margin-bottom: 15px;
      font-size: 1.3em;
      font-weight: 700;
    }

    [data-theme="dark"] .roaming-bundles-wrapper .info-section h2,
    [data-theme="dark"] .roaming-bundles-wrapper .notes-section h2 {
      color: #60a5fa;
    }

    .roaming-bundles-wrapper .info-section ul,
    .roaming-bundles-wrapper .notes-section ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .roaming-bundles-wrapper .info-section ul li {
      margin-bottom: 8px;
      padding-right: 20px;
      position: relative;
    }

    .roaming-bundles-wrapper .info-section ul li::before {
      content: '•';
      color: var(--accent-color);
      font-size: 1.2em;
      position: absolute;
      right: 0;
      top: -2px;
    }

    .search-container {
      padding: 15px;
      background-color: var(--card-bg);
      border: 1px solid var(--border-color);
      display: flex;
      justify-content: center;
      gap: 10px;
      margin: 20px auto;
      border-radius: 10px;
      max-width: 600px;
    }

    .search-container input[type="text"] {
      width: 100%;
      padding: 10px 20px;
      border: 1px solid var(--border-color);
      border-radius: 25px;
      font-size: 1em;
      text-align: right;
      outline: none;
      background-color: var(--bg-color);
      color: var(--text-main);
    }

    .search-container button {
      padding: 10px 25px;
      background-color: var(--primary-purple);
      color: white;
      border: none;
      border-radius: 25px;
      cursor: pointer;
      font-size: 1em;
      font-weight: 600;
      transition: background-color var(--transition-fast);
      white-space: nowrap;
    }

    .search-container button:hover {
      background-color: var(--primary-hover);
    }

    .roaming-bundles-wrapper .table-container,
    .dealers-table-container,
    .custom-data-table-container {
      margin: 20px auto;
      overflow-x: auto;
    }

    .roaming-bundles-wrapper table,
    .dealers-table,
    .custom-data-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      background-color: var(--card-bg);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid var(--border-color);
    }

    .roaming-bundles-wrapper th, 
    .roaming-bundles-wrapper td,
    .dealers-table th,
    .dealers-table td,
    .custom-data-table th,
    .custom-data-table td {
      padding: 12px 14px;
      text-align: right;
      border-bottom: 1px solid var(--border-color);
      border-left: 1px solid var(--border-color);
      font-size: 0.92em;
    }

    .dealers-table th,
    .custom-data-table th {
      background-color: var(--primary-purple);
      color: #ffffff;
      font-weight: 700;
      white-space: nowrap;
      text-align: center;
    }

    .custom-data-table td {
      text-align: center;
    }

    .roaming-bundles-wrapper th {
      background-color: #3498db;
      color: #ffffff;
    }

    .dealers-table td.yes {
      color: #22c55e;
      font-weight: bold;
      text-align: center;
    }

    .dealers-table td.no {
      color: #ef4444;
      font-weight: bold;
      text-align: center;
    }

    .dealers-table td.working {
      color: #3b82f6;
      font-weight: bold;
      text-align: center;
    }

    .roaming-bundles-wrapper .notes-section ul li {
      padding-right: 25px;
      margin-bottom: 10px;
      position: relative;
    }

    .roaming-bundles-wrapper .notes-section ul li::before {
      content: '✓';
      color: var(--accent-color);
      position: absolute;
      right: 0;
      font-weight: bold;
    }

    /* =========================================================
       8. تنسيقات صفحة باقات الإنترنت وعروض شباب
       ========================================================= */
    

    /* =========================================================
       9. تنسيقات جداول الإهداء (Gifting Section Styling)
       ========================================================= */
    .gifting-section-container {
      margin-top: 1.5rem;
    }

    .gifting-title {
      font-size: 1.4rem;
      color: #5d2b77;
      margin: 1.5rem 0 1rem 0;
      text-align: center;
      font-weight: 700;
    }

    .call-bundles-table {
      width: 100%;
      border-collapse: collapse;
      margin: 15px 0 25px 0;
      box-shadow: var(--shadow-sm);
      border-radius: 10px;
      overflow: hidden;
      text-align: center;
    }

    .call-bundles-table thead tr {
      background-color: #5d2b77;
      color: #ffffff;
    }

    .call-bundles-table tbody tr {
      border-bottom: 1px solid var(--border-color);
      transition: background-color 0.2s ease;
    }

    .call-bundles-table tbody tr:nth-of-type(even) {
      background-color: rgba(93, 43, 119, 0.05);
    }

    .call-bundles-table tbody tr:hover {
      background-color: rgba(93, 43, 119, 0.12);
    }

    .call-bundles-table tfoot td {
      background-color: #5d2b77;
      color: #ffffff;
      font-weight: bold;
      text-align: center;
      padding: 12px;
    }

    .internet-bundles-table {
      width: 100%;
      border-collapse: collapse;
      margin: 15px 0 25px 0;
      box-shadow: var(--shadow-sm);
      border-radius: 10px;
      overflow: hidden;
      text-align: center;
    }

    .internet-bundles-table thead tr {
      background-color: #1078af;
      color: #ffffff;
    }

    .internet-bundles-table tbody tr {
      border-bottom: 1px solid var(--border-color);
      transition: background-color 0.2s ease;
    }

    .internet-bundles-table tbody tr:nth-of-type(even) {
      background-color: rgba(16, 120, 175, 0.06);
    }

    .internet-bundles-table tbody tr:hover {
      background-color: rgba(16, 120, 175, 0.12);
    }

    .internet-bundles-table tfoot td {
      background-color: #1078af;
      color: #ffffff;
      font-weight: bold;
      text-align: center;
      padding: 12px;
    }

    .flex-gift-table {
      width: 100%;
      border-collapse: collapse;
      margin: 15px 0 25px 0;
      border: 1px solid #760e86;
      box-shadow: var(--shadow-sm);
      border-radius: 10px;
      overflow: hidden;
      text-align: center;
    }

    .flex-gift-table thead tr {
      background-color: #760e86;
      color: #ffffff;
      font-weight: bold;
    }

    .flex-gift-table tbody tr {
      border-bottom: 1px solid #760e86;
      transition: background-color 0.2s ease;
    }

    .flex-gift-table tbody tr:nth-of-type(even) {
      background-color: rgba(118, 14, 134, 0.08);
    }

    .flex-gift-table tbody tr:hover {
      background-color: rgba(118, 14, 134, 0.15);
    }

    .flex-gift-table tfoot td {
      background-color: #760e86;
      color: #ffffff;
      font-weight: bold;
      text-align: center;
      padding: 12px;
    }

    /* =========================================================
       10. تنسيقات المحتوى المضاف من ملف voice
       ========================================================= */

    /* =========================================================
       PREPAID-VOICE — UI Redesign v2 (بيانات محفوظة بالكامل)
       ========================================================= */
    #prepaid-voice.tab-content {
      padding: 0 !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      overflow: visible !important;
    }
    #prepaid-voice .voice-container {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 1.35rem !important;
      max-width: 1100px !important;
      margin: 0 auto !important;
      padding: 0.5rem 0.75rem 2rem !important;
      width: 100%;
      box-sizing: border-box;
    }

    /* Hero header */
    #prepaid-voice .voice-header-card {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(124, 58, 237, 0.18), transparent 55%),
        radial-gradient(ellipse 60% 50% at 0% 100%, rgba(6, 182, 212, 0.12), transparent 50%),
        linear-gradient(165deg, rgba(255,255,255,0.97) 0%, rgba(245, 243, 255, 0.95) 100%) !important;
      border: 1px solid rgba(124, 58, 237, 0.18) !important;
      border-radius: 18px !important;
      padding: 1.15rem 1.15rem 1.1rem !important;
      text-align: center;
      width: 100%;
      box-shadow:
        0 12px 40px rgba(109, 40, 217, 0.1),
        0 1px 0 rgba(255,255,255,0.8) inset !important;
    }
    [data-theme="dark"] #prepaid-voice .voice-header-card {
      background:
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(124, 58, 237, 0.28), transparent 55%),
        linear-gradient(165deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.92)) !important;
      border-color: rgba(139, 92, 246, 0.25) !important;
    }
    #prepaid-voice .voice-header-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: linear-gradient(90deg, #4f46e5, #7c3aed, #06b6d4, #a855f7);
      background-size: 200% 100%;
      animation: ccBorderFlow 6s linear infinite;
    }

    #prepaid-voice .voice-container h1.main-page-title {
      position: relative;
      display: inline-block;
      text-align: center;
      color: #fff !important;
      margin: 0 auto 0.75rem !important;
      background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 45%, #6366f1 100%) !important;
      padding: 0.55rem 1.25rem !important;
      border-radius: 12px !important;
      width: auto;
      max-width: 92%;
      font-size: clamp(0.92rem, 1.8vw, 1.15rem) !important;
      font-weight: 800 !important;
      letter-spacing: -0.01em;
      line-height: 1.4;
      box-shadow:
        0 6px 18px rgba(109, 40, 217, 0.28),
        0 1px 0 rgba(255,255,255,0.2) inset !important;
      text-shadow: none;
      border: 1px solid rgba(255,255,255,0.12);
    }
    #prepaid-voice .voice-container h1.main-page-title::after {
      display: none !important;
    }

    #prepaid-voice .voice-subtitle {
      color: var(--text-muted) !important;
      font-size: 0.9rem !important;
      max-width: 580px;
      margin: 0 auto 1.1rem !important;
      line-height: 1.6 !important;
      font-weight: 600;
    }

    #prepaid-voice .voice-controls-bar {
      display: flex !important;
      flex-direction: column !important;
      gap: 14px !important;
      align-items: center !important;
      margin-top: 8px !important;
    }

    #prepaid-voice .voice-search-box {
      display: flex !important;
      align-items: center !important;
      background: rgba(255,255,255,0.9) !important;
      border: 2px solid rgba(124, 58, 237, 0.2) !important;
      border-radius: 50px !important;
      padding: 0.55rem 1.2rem !important;
      width: 100%;
      max-width: 520px !important;
      transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
      box-shadow: 0 4px 16px rgba(109, 40, 217, 0.06);
    }
    [data-theme="dark"] #prepaid-voice .voice-search-box {
      background: rgba(15, 23, 42, 0.7) !important;
      border-color: rgba(139, 92, 246, 0.3) !important;
    }
    #prepaid-voice .voice-search-box:focus-within {
      border-color: #7c3aed !important;
      box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15), 0 8px 24px rgba(109, 40, 217, 0.12) !important;
      transform: translateY(-1px);
    }
    #prepaid-voice .voice-search-icon {
      font-size: 1.15rem !important;
      margin-left: 10px !important;
      opacity: 0.7;
    }
    #prepaid-voice .voice-search-box input {
      border: none !important;
      outline: none !important;
      background: transparent !important;
      color: var(--text-main) !important;
      font-size: 0.98rem !important;
      font-weight: 600;
      width: 100%;
      text-align: right !important;
      font-family: inherit;
    }

    #prepaid-voice .voice-filter-btns {
      display: flex !important;
      gap: 8px !important;
      flex-wrap: wrap !important;
      justify-content: center !important;
    }
    #prepaid-voice .filter-btn {
      background: rgba(255,255,255,0.85) !important;
      border: 1.5px solid rgba(124, 58, 237, 0.18) !important;
      color: var(--text-muted) !important;
      padding: 8px 18px !important;
      border-radius: 999px !important;
      font-size: 0.86rem !important;
      font-weight: 700 !important;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    }
    [data-theme="dark"] #prepaid-voice .filter-btn {
      background: rgba(30, 41, 59, 0.8) !important;
      border-color: rgba(139, 92, 246, 0.25) !important;
    }
    #prepaid-voice .filter-btn:hover {
      color: #7c3aed !important;
      border-color: rgba(124, 58, 237, 0.4) !important;
      background: rgba(124, 58, 237, 0.08) !important;
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(109, 40, 217, 0.12);
    }
    #prepaid-voice .filter-btn.active {
      background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #6366f1 100%) !important;
      color: #fff !important;
      border-color: transparent !important;
      box-shadow: 0 6px 20px rgba(109, 40, 217, 0.35) !important;
    }

    /* Section cards */
    #prepaid-voice .voice-section-card {
      background: rgba(255,255,255,0.94) !important;
      border: 1px solid rgba(124, 58, 237, 0.14) !important;
      border-radius: 20px !important;
      padding: 1.35rem 1.4rem 1.5rem !important;
      width: 100%;
      box-shadow: 0 8px 28px rgba(109, 40, 217, 0.07) !important;
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
      position: relative;
      overflow: hidden;
    }
    [data-theme="dark"] #prepaid-voice .voice-section-card {
      background: rgba(30, 41, 59, 0.88) !important;
      border-color: rgba(139, 92, 246, 0.2) !important;
    }
    #prepaid-voice .voice-section-card::before {
      content: '';
      position: absolute;
      top: 0; right: 0;
      width: 120px; height: 120px;
      background: radial-gradient(circle, rgba(124, 58, 237, 0.08), transparent 70%);
      pointer-events: none;
    }
    #prepaid-voice .voice-section-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 40px rgba(109, 40, 217, 0.12) !important;
      border-color: rgba(124, 58, 237, 0.28) !important;
    }

    #prepaid-voice .section-title-wrapper {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 12px;
      margin-bottom: 1.1rem !important;
      flex-wrap: wrap;
      padding-bottom: 0.85rem;
      border-bottom: 1px dashed rgba(124, 58, 237, 0.15);
    }
    #prepaid-voice .voice-container h2,
    #prepaid-voice .section-title-wrapper h2 {
      margin: 0 !important;
      font-size: 1.2rem !important;
      font-weight: 800 !important;
      color: #4c1d95 !important;
      background: linear-gradient(135deg, #4f46e5, #7c3aed);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    [data-theme="dark"] #prepaid-voice .section-title-wrapper h2 {
      -webkit-text-fill-color: #c4b5fd;
      color: #c4b5fd !important;
      background: none;
    }
    #prepaid-voice .section-badge {
      background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(6, 182, 212, 0.1)) !important;
      color: #6d28d9 !important;
      border: 1px solid rgba(124, 58, 237, 0.25) !important;
      padding: 5px 14px !important;
      border-radius: 999px !important;
      font-size: 0.75rem !important;
      font-weight: 800 !important;
      letter-spacing: 0.02em;
    }
    #prepaid-voice .section-badge.highlight-badge {
      background: linear-gradient(135deg, #f59e0b, #d97706) !important;
      color: #fff !important;
      border-color: transparent !important;
    }

    /* Tables */
    #prepaid-voice .table-responsive {
      width: 100%;
      overflow-x: auto;
      border-radius: 14px;
      box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    }
    #prepaid-voice .voice-container table {
      width: 100% !important;
      border-collapse: separate !important;
      border-spacing: 0 !important;
      background: transparent !important;
      text-align: center !important;
      overflow: hidden;
      border-radius: 14px;
    }
    #prepaid-voice .voice-container th {
      background: linear-gradient(135deg, #4f46e5 0%, #6d28d9 50%, #7c3aed 100%) !important;
      color: #fff !important;
      font-size: 0.88rem !important;
      font-weight: 800 !important;
      padding: 13px 14px !important;
      letter-spacing: 0.02em;
      border: none !important;
      text-shadow: 0 1px 2px rgba(0,0,0,0.12);
    }
    #prepaid-voice .voice-container th:first-child {
      border-radius: 0 14px 0 0 !important;
    }
    #prepaid-voice .voice-container th:last-child {
      border-radius: 14px 0 0 0 !important;
    }
    #prepaid-voice .voice-container td {
      padding: 13px 14px !important;
      text-align: center !important;
      border-bottom: 1px solid rgba(124, 58, 237, 0.08) !important;
      color: var(--text-main) !important;
      font-size: 0.92rem !important;
      font-weight: 600;
      background: rgba(255,255,255,0.6);
      transition: background 0.2s ease;
    }
    [data-theme="dark"] #prepaid-voice .voice-container td {
      background: rgba(15, 23, 42, 0.35);
      border-bottom-color: rgba(139, 92, 246, 0.12) !important;
    }
    #prepaid-voice .voice-container tbody tr:last-child td {
      border-bottom: none !important;
    }
    #prepaid-voice .voice-container tbody tr:last-child td:first-child {
      border-radius: 0 0 14px 0;
    }
    #prepaid-voice .voice-container tbody tr:last-child td:last-child {
      border-radius: 0 0 0 14px;
    }
    #prepaid-voice .voice-container tbody tr:hover td {
      background: rgba(124, 58, 237, 0.07) !important;
    }
    [data-theme="dark"] #prepaid-voice .voice-container tbody tr:hover td {
      background: rgba(124, 58, 237, 0.15) !important;
    }

    #prepaid-voice .code-cell,
    #prepaid-voice bdi.code-cell,
    #prepaid-voice .pq-code-badge {
      background: linear-gradient(135deg, #ede9fe, #e0e7ff) !important;
      color: #5b21b6 !important;
      padding: 4px 10px !important;
      border-radius: 8px !important;
      font-weight: 800 !important;
      font-family: ui-monospace, monospace !important;
      letter-spacing: 0.04em;
      display: inline-block;
      border: 1px solid rgba(124, 58, 237, 0.28) !important;
      box-shadow: 0 2px 6px rgba(109, 40, 217, 0.08);
      direction: ltr;
    }
    #prepaid-voice .price-val {
      font-weight: 800 !important;
      color: #059669 !important;
      font-variant-numeric: tabular-nums;
      background: rgba(16, 185, 129, 0.1);
      padding: 3px 10px;
      border-radius: 8px;
      display: inline-block;
    }
    #prepaid-voice .bundle-name {
      font-weight: 700 !important;
      color: var(--text-main) !important;
    }

    /* Auto-renew content */
    #prepaid-voice .renew-content {
      text-align: right !important;
      line-height: 1.85 !important;
      color: var(--text-main) !important;
    }
    #prepaid-voice .renew-content h3 {
      color: #6d28d9 !important;
      font-size: 1.08rem !important;
      font-weight: 800 !important;
      margin-top: 1.1rem !important;
      margin-bottom: 0.5rem !important;
      padding-right: 12px;
      border-right: 3px solid #7c3aed;
    }
    #prepaid-voice .renew-content ul {
      padding-right: 1.25rem !important;
      margin-bottom: 1rem !important;
    }
    #prepaid-voice .renew-content li {
      margin-bottom: 0.45rem;
      font-weight: 600;
      color: var(--text-main);
    }
    #prepaid-voice .renew-content p {
      margin-bottom: 0.65rem;
      font-weight: 550;
      color: var(--text-muted);
    }

    /* Example box */
    #prepaid-voice [style*="rgba(124, 58, 237"] {
      background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(6, 182, 212, 0.06)) !important;
      border-right: 4px solid #7c3aed !important;
      border-radius: 14px !important;
      padding: 1rem 1.15rem !important;
      box-shadow: 0 4px 14px rgba(109, 40, 217, 0.06);
    }

    /* Footer note */
    #prepaid-voice .footer-note-card {
      background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(6, 182, 212, 0.08)) !important;
      border: 1px solid rgba(124, 58, 237, 0.28) !important;
      border-radius: 16px !important;
      padding: 1rem 1.35rem !important;
      width: 100%;
      text-align: center;
      box-shadow: 0 6px 20px rgba(109, 40, 217, 0.08);
    }
    #prepaid-voice .footer-note-card .footer-note,
    #prepaid-voice .voice-container .footer-note {
      margin: 0 !important;
      font-size: 0.98rem !important;
      color: #6d28d9 !important;
      font-weight: 800 !important;
      direction: rtl;
    }

    @media (max-width: 640px) {
      #prepaid-voice .voice-container h1.main-page-title {
        font-size: 1.05rem !important;
        padding: 0.85rem 1.1rem !important;
      }
      #prepaid-voice .filter-btn {
        padding: 6px 12px !important;
        font-size: 0.78rem !important;
      }
      #prepaid-voice .voice-section-card {
        padding: 1rem !important;
        border-radius: 16px !important;
      }
    }


    .voice-container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 25px;
      margin-top: 15px;
      max-width: 950px;
      margin-left: auto;
      margin-right: auto;
      padding: 10px;
    }

    /* رأس الصفحة المتطور */
    .voice-header-card {
      background: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: 20px;
      padding: 2.5rem 1.5rem;
      text-align: center;
      width: 100%;
      box-shadow: var(--shadow-glow, 0 10px 30px rgba(0,0,0,0.05));
    }

    .voice-container h1.main-page-title {
      text-align: center;
      color: #ffffff;
      margin-bottom: 12px;
      text-shadow: 0 4px 12px rgba(95, 44, 130, 0.4);
      background: linear-gradient(135deg, #5f2c82, #7c3aed);
      padding: 16px 24px;
      border-radius: 12px;
      width: fit-content;
      margin-left: auto;
      margin-right: auto;
      font-size: 1.6rem;
      font-weight: 800;
      letter-spacing: -0.5px;
    }

    .voice-subtitle {
      color: var(--text-muted);
      font-size: 1rem;
      max-width: 600px;
      margin: 0 auto 1.5rem auto;
      line-height: 1.6;
    }

    /* أشرطة التحكم والبحث المضمنة داخل القسم */
    .voice-controls-bar {
      display: flex;
      flex-direction: column;
      gap: 15px;
      align-items: center;
      margin-top: 15px;
    }

    .voice-search-box {
      display: flex;
      align-items: center;
      background: var(--bg-color);
      border: 2px solid var(--border-color);
      border-radius: 30px;
      padding: 0.4rem 1rem;
      width: 100%;
      max-width: 450px;
      transition: all 0.3s ease;
    }

    .voice-search-box:focus-within {
      border-color: #7c3aed;
      box-shadow: 0 0 15px rgba(124, 58, 237, 0.2);
    }

    .voice-search-icon {
      font-size: 1.1rem;
      margin-left: 8px;
    }

    .voice-search-box input {
      border: none;
      outline: none;
      background: transparent;
      color: var(--text-main);
      font-size: 0.95rem;
      width: 100%;
      text-align: right;
    }

    .voice-filter-btns {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .filter-btn {
      background: var(--bg-color);
      border: 1px solid var(--border-color);
      color: var(--text-muted);
      padding: 6px 16px;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .filter-btn:hover, .filter-btn.active {
      background: #7c3aed;
      color: #ffffff;
      border-color: #7c3aed;
      transform: translateY(-1px);
    }

    /* بطاقات الأقسام */
    .voice-section-card {
      background: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 1.5rem;
      width: 100%;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
      transition: all 0.3s ease;
    }

    .voice-section-card:hover {
      box-shadow: 0 8px 30px rgba(124, 58, 237, 0.08);
    }

    .section-title-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      border-bottom: 2px solid var(--border-color);
      padding-bottom: 10px;
    }

    .voice-container h2 {
      text-align: right;
      color: var(--primary-purple, #7c3aed);
      margin: 0;
      font-size: 1.25rem;
      font-weight: 700;
    }

    .section-badge {
      font-size: 0.75rem;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 20px;
      background: rgba(124, 58, 237, 0.1);
      color: #7c3aed;
    }

    .highlight-badge {
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: #ffffff;
    }

    /* الجداول بتصميم عصري مسطح ومتجاوب */
    .table-responsive {
      width: 100%;
      overflow-x: auto;
    }

    .voice-container table {
      width: 100%;
      border-collapse: collapse;
      background-color: transparent;
      text-align: center;
    }

    .voice-container th, .voice-container td {
      padding: 14px 16px;
      text-align: center;
      border-bottom: 1px solid var(--border-color);
    }

    .voice-container th {
      background-color: #5f2c82;
      color: white;
      font-size: 0.95rem;
      font-weight: 600;
      letter-spacing: 0.3px;
    }

    .voice-container th:first-child {
      border-top-right-radius: 8px;
    }
    .voice-container th:last-child {
      border-top-left-radius: 8px;
    }

    .voice-container td {
      color: var(--text-main);
      font-size: 0.95rem;
    }

    .voice-container tbody tr {
      transition: background-color 0.2s ease;
    }

    .voice-container tbody tr:hover {
      background-color: var(--purple-light, rgba(124, 58, 237, 0.05));
    }

    /* تنسيق الأكواد والرموز المميزة */
    .code-cell {
      background: rgba(124, 58, 237, 0.1);
      color: #7c3aed;
      padding: 4px 10px;
      border-radius: 6px;
      font-weight: 700;
      font-family: monospace;
      letter-spacing: 1px;
      display: inline-block;
      border: 1px dashed rgba(124, 58, 237, 0.3);
    }

    .price-val {
      font-weight: 700;
      color: #059669;
    }

    .bundle-name {
      font-weight: 600;
      color: var(--text-main);
    }

    /* بطاقة الملاحظة السفلية */
    .footer-note-card {
      background: linear-gradient(135deg, rgba(217, 119, 6, 0.1), rgba(245, 158, 11, 0.05));
      border: 1px solid rgba(217, 119, 6, 0.3);
      border-radius: 14px;
      padding: 14px 20px;
      width: 100%;
      text-align: center;
    }

    .voice-container .footer-note {
      margin: 0;
      font-size: 0.95rem;
      color: #d97706;
      font-weight: bold;
      direction: rtl;
    }


/* =========================================================
   MULTI-TAB UI FIX v3 — ألوان مريحة + تباين عالي + لا إخفاء بيانات
   ========================================================= */

/* ضمان ظهور الأسعار دائماً */
#prepaid-quota .price-exc,
#prepaid-quota .price-inc,
#prepaid-quota td,
#prepaid-gifting .price-exc,
#prepaid-gifting .price-inc,
#prepaid-gifting .bold-price,
#prepaid-gifting td,
#prepaid-social-stream .pss-price-exc,
#prepaid-social-stream .pss-price-inc,
#prepaid-social-stream td,
#roaming-bundles td,
#prepaid-voice .price-val,
#prepaid-voice td {
  color: var(--text-main, #0f172a) !important;
  -webkit-text-fill-color: unset !important;
  opacity: 1 !important;
  visibility: visible !important;
}
[data-theme="dark"] #prepaid-quota td,
[data-theme="dark"] #prepaid-gifting td,
[data-theme="dark"] #prepaid-social-stream td,
[data-theme="dark"] #roaming-bundles td,
[data-theme="dark"] #prepaid-voice td {
  color: #e2e8f0 !important;
}

#prepaid-gifting .bold-price,
#prepaid-gifting .price-inc,
#prepaid-quota .price-inc,
#prepaid-social-stream .pss-price-inc {
  color: #047857 !important;
  font-weight: 800 !important;
}
[data-theme="dark"] #prepaid-gifting .bold-price,
[data-theme="dark"] #prepaid-gifting .price-inc,
[data-theme="dark"] #prepaid-quota .price-inc,
[data-theme="dark"] #prepaid-social-stream .pss-price-inc {
  color: #34d399 !important;
}

#prepaid-gifting .price-exc,
#prepaid-quota .price-exc,
#prepaid-social-stream .pss-price-exc {
  color: #1e293b !important;
  font-weight: 700 !important;
}
[data-theme="dark"] #prepaid-gifting .price-exc,
[data-theme="dark"] #prepaid-quota .price-exc,
[data-theme="dark"] #prepaid-social-stream .pss-price-exc {
  color: #cbd5e1 !important;
}

/* ---- PREPAID QUOTA: هادئ ومقروء ---- */
#prepaid-quota.tab-content {
  padding: 0.5rem 0.75rem 1.5rem !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#prepaid-quota .pq-content-relative {
  max-width: 1080px;
  margin: 0 auto;
}
#prepaid-quota .pq-header {
  text-align: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.15rem 1rem 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
}
[data-theme="dark"] #prepaid-quota .pq-header {
  background: #1e293b;
  border-color: #334155;
}
#prepaid-quota .pq-badge {
  display: inline-block;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
[data-theme="dark"] #prepaid-quota .pq-badge {
  background: #334155;
  color: #cbd5e1;
  border-color: #475569;
}
#prepaid-quota .pq-title {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  margin: 0 0 0.35rem !important;
  color: #4f46e5 !important;
  background: none !important;
  -webkit-text-fill-color: #4f46e5 !important;
}
[data-theme="dark"] #prepaid-quota .pq-title {
  color: #a5b4fc !important;
  -webkit-text-fill-color: #a5b4fc !important;
}
#prepaid-quota .pq-title::after { display: none !important; }
#prepaid-quota .pq-subtitle {
  color: #64748b !important;
  font-size: 0.88rem;
  line-height: 1.55;
  max-width: 540px;
  margin: 0 auto;
}
[data-theme="dark"] #prepaid-quota .pq-subtitle { color: #94a3b8 !important; }

#prepaid-quota .pq-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto 1rem;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.45rem 0.9rem;
}
[data-theme="dark"] #prepaid-quota .pq-input-wrapper {
  background: #0f172a;
  border-color: #334155;
}
#prepaid-quota .pq-input-wrapper:focus-within {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
#prepaid-quota .pq-input-wrapper input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  color: #0f172a;
  text-align: right;
}
[data-theme="dark"] #prepaid-quota .pq-input-wrapper input { color: #f1f5f9; }

#prepaid-quota .pq-table-container {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 0.85rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}
[data-theme="dark"] #prepaid-quota .pq-table-container {
  background: #1e293b;
  border-color: #334155;
}
#prepaid-quota .pq-table {
  width: 100%;
  border-collapse: collapse;
}
#prepaid-quota .pq-table th {
  background: #4f46e5 !important;
  color: #ffffff !important;
  padding: 11px 9px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-align: center;
  border: none !important;
}
#prepaid-quota .pq-table td {
  padding: 10px 9px !important;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #fff !important;
}
[data-theme="dark"] #prepaid-quota .pq-table td {
  background: #1e293b !important;
  border-bottom-color: #334155 !important;
}
#prepaid-quota .pq-table tbody tr:nth-child(even) td {
  background: var(--table-even-bg, #f8fafc) !important;
}
[data-theme="dark"] #prepaid-quota .pq-table tbody tr:nth-child(even) td {
  background: #0f172a !important;
}
#prepaid-quota .pq-table tbody tr:hover td {
  background: #eef2ff !important;
}
[data-theme="dark"] #prepaid-quota .pq-table tbody tr:hover td {
  background: #312e81 !important;
}
#prepaid-quota .pq-code-badge,
#prepaid-quota bdi.pq-code-badge {
  background: #eef2ff !important;
  color: #4338ca !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  border: 1px solid #c7d2fe !important;
  direction: ltr;
  display: inline-block;
  -webkit-text-fill-color: #4338ca !important;
}
[data-theme="dark"] #prepaid-quota .pq-code-badge {
  background: #312e81 !important;
  color: #c7d2fe !important;
  border-color: #4c1d95 !important;
  -webkit-text-fill-color: #c7d2fe !important;
}
#prepaid-quota .pq-quick-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0.85rem;
  padding: 0.75rem 0.9rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  color: #334155;
  font-weight: 600;
  font-size: 0.88rem;
}
[data-theme="dark"] #prepaid-quota .pq-quick-check {
  background: #0f172a;
  border-color: #334155;
  color: #cbd5e1;
}
#prepaid-quota .pq-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.85rem;
}
#prepaid-quota .pq-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}
[data-theme="dark"] #prepaid-quota .pq-card {
  background: #1e293b;
  border-color: #334155;
}
#prepaid-quota .pq-card-header h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: #4338ca;
}
[data-theme="dark"] #prepaid-quota .pq-card-header h3 { color: #a5b4fc; }
#prepaid-quota .pq-list { list-style: none; padding: 0; margin: 0.5rem 0 0; }
#prepaid-quota .pq-list li {
  position: relative;
  padding: 0.3rem 1rem 0.3rem 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: #475569;
  line-height: 1.5;
}
[data-theme="dark"] #prepaid-quota .pq-list li { color: #94a3b8; }
#prepaid-quota .pq-list li::before {
  content: '•';
  position: absolute;
  right: 0;
  color: #6366f1;
  font-weight: 800;
}

/* ---- GIFTING: تحسين خفيف دون كسر الجداول الأصلية ---- */
#prepaid-gifting.tab-content {
  padding: 1rem 1.1rem 2rem !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
}
[data-theme="dark"] #prepaid-gifting.tab-content {
  background: #1e293b !important;
  border-color: #334155 !important;
}
#prepaid-gifting > h1 {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #5b21b6 !important;
  background: none !important;
  -webkit-text-fill-color: #5b21b6 !important;
  margin-bottom: 0.4rem !important;
}
[data-theme="dark"] #prepaid-gifting > h1 {
  color: #c4b5fd !important;
  -webkit-text-fill-color: #c4b5fd !important;
}
#prepaid-gifting > h1::after { display: none !important; }
#prepaid-gifting > p {
  color: #64748b !important;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
[data-theme="dark"] #prepaid-gifting > p { color: #94a3b8 !important; }

#prepaid-gifting .gifting-title {
  font-size: 1.1rem !important;
  color: #5b21b6 !important;
  font-weight: 800 !important;
  margin: 1.25rem 0 0.75rem !important;
  text-align: center;
}
[data-theme="dark"] #prepaid-gifting .gifting-title { color: #c4b5fd !important; }

#prepaid-gifting .call-bundles-table thead tr { background-color: #5b21b6 !important; color: #fff !important; }
#prepaid-gifting .internet-bundles-table thead tr { background-color: #0369a1 !important; color: #fff !important; }
#prepaid-gifting .flex-gift-table thead tr { background-color: #6b21a8 !important; color: #fff !important; }

#prepaid-gifting .call-bundles-table,
#prepaid-gifting .internet-bundles-table,
#prepaid-gifting .flex-gift-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  background: #fff;
}
[data-theme="dark"] #prepaid-gifting .call-bundles-table,
[data-theme="dark"] #prepaid-gifting .internet-bundles-table,
[data-theme="dark"] #prepaid-gifting .flex-gift-table {
  background: #0f172a;
}
#prepaid-gifting .gifting-table th {
  color: #fff !important;
  padding: 11px 8px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-align: center;
}
#prepaid-gifting .gifting-table td {
  padding: 10px 8px !important;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  border-bottom: 1px solid #f1f5f9 !important;
  color: #0f172a !important;
  background: #fff !important;
}
[data-theme="dark"] #prepaid-gifting .gifting-table td {
  color: #e2e8f0 !important;
  background: #0f172a !important;
  border-bottom-color: #1e293b !important;
}
#prepaid-gifting .gifting-table tbody tr:nth-child(even) td {
  background: var(--table-even-bg, #f8fafc) !important;
}
[data-theme="dark"] #prepaid-gifting .gifting-table tbody tr:nth-child(even) td {
  background: #1e293b !important;
}
#prepaid-gifting .gifting-table tfoot td {
  color: #fff !important;
  font-weight: 700;
  padding: 11px !important;
  text-align: center;
}
#prepaid-gifting bdi.code-cell {
  background: #f5f3ff !important;
  color: #5b21b6 !important;
  padding: 3px 7px !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  border: 1px solid #ddd6fe !important;
  direction: ltr;
  display: inline-block;
  -webkit-text-fill-color: #5b21b6 !important;
}
[data-theme="dark"] #prepaid-gifting bdi.code-cell {
  background: #4c1d95 !important;
  color: #e9d5ff !important;
  border-color: #6b21a8 !important;
  -webkit-text-fill-color: #e9d5ff !important;
}
#prepaid-gifting tfoot bdi.code-cell {
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.35) !important;
  -webkit-text-fill-color: #fff !important;
}
#prepaid-gifting #prepaidGiftingSearchInput {
  width: 100%;
  max-width: 480px;
  display: block;
  margin: 0 auto 1rem;
  padding: 0.55rem 1rem;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  font-family: inherit;
  font-weight: 600;
  text-align: right;
  background: #fff;
  color: #0f172a;
}
[data-theme="dark"] #prepaid-gifting #prepaidGiftingSearchInput {
  background: #0f172a;
  border-color: #334155;
  color: #f1f5f9;
}

/* ---- SOCIAL STREAM: متناسق ليلي/نهاري ---- */
#prepaid-social-stream.tab-content {
  padding: 0.5rem 0.75rem 1.5rem !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#prepaid-social-stream .pss-content-relative {
  max-width: 1080px;
  margin: 0 auto;
}
#prepaid-social-stream .pss-header {
  text-align: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.15rem 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
}
[data-theme="dark"] #prepaid-social-stream .pss-header {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
#prepaid-social-stream .pss-badge {
  display: inline-block;
  background: #4f46e5;
  color: #fff !important;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
}
#prepaid-social-stream .pss-title {
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  margin: 0 0 0.35rem !important;
  color: #4f46e5 !important;
  background: none !important;
  -webkit-text-fill-color: #4f46e5 !important;
}
[data-theme="dark"] #prepaid-social-stream .pss-title {
  color: #a5b4fc !important;
  -webkit-text-fill-color: #a5b4fc !important;
}
#prepaid-social-stream .pss-title::after { display: none !important; }
#prepaid-social-stream .pss-subtitle {
  color: #64748b !important;
  font-size: 0.88rem;
  line-height: 1.55;
}
[data-theme="dark"] #prepaid-social-stream .pss-subtitle { color: #94a3b8 !important; }

#prepaid-social-stream .pss-section {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1rem 1.05rem 1.15rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}
[data-theme="dark"] #prepaid-social-stream .pss-section {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
#prepaid-social-stream .pss-section-title {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #4f46e5 !important;
  margin: 0 !important;
}
[data-theme="dark"] #prepaid-social-stream .pss-section-title { color: #c4b5fd !important; }

#prepaid-social-stream .pss-platform-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #334155;
}
[data-theme="dark"] #prepaid-social-stream .pss-platform-item {
  background: #0f172a;
  border-color: #334155;
  color: #cbd5e1;
}

#prepaid-social-stream table.pss-table {
  width: 100%;
  border-collapse: collapse;
}
#prepaid-social-stream table.pss-table th {
  background: #4f46e5 !important;
  color: #fff !important;
  padding: 10px 7px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-align: center;
  border: none !important;
}
#prepaid-social-stream table.pss-table td {
  padding: 9px 7px !important;
  text-align: center;
  font-weight: 600;
  font-size: 0.85rem;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #fff !important;
  color: #0f172a !important;
}
[data-theme="dark"] #prepaid-social-stream table.pss-table td {
  background: #0f172a !important;
  border-bottom-color: #1e293b !important;
  color: #e2e8f0 !important;
}
#prepaid-social-stream table.pss-table tbody tr:nth-child(even) td {
  background: var(--table-even-bg, #f8fafc) !important;
}
[data-theme="dark"] #prepaid-social-stream table.pss-table tbody tr:nth-child(even) td {
  background: #1e293b !important;
}
#prepaid-social-stream .pss-code-badge {
  background: #eef2ff !important;
  color: #4338ca !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  border: 1px solid #c7d2fe !important;
  direction: ltr;
  display: inline-block;
  font-size: 0.76rem;
  -webkit-text-fill-color: #4338ca !important;
}
[data-theme="dark"] #prepaid-social-stream .pss-code-badge {
  background: #312e81 !important;
  color: #c7d2fe !important;
  border-color: #4c1d95 !important;
  -webkit-text-fill-color: #c7d2fe !important;
}
#prepaid-social-stream .pss-flow-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  color: #334155;
}
[data-theme="dark"] #prepaid-social-stream .pss-flow-card {
  background: #0f172a;
  border-color: #334155;
  color: #cbd5e1;
}

/* ---- ROAMING BUNDLES ---- */
#roaming-bundles.tab-content {
  padding: 1rem 1.1rem 2rem !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
}
[data-theme="dark"] #roaming-bundles.tab-content {
  background: #1e293b !important;
  border-color: #334155 !important;
}
#roaming-bundles h1 {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #0f766e !important;
  background: none !important;
  -webkit-text-fill-color: #0f766e !important;
  margin-bottom: 0.85rem !important;
}
[data-theme="dark"] #roaming-bundles h1 {
  color: #5eead4 !important;
  -webkit-text-fill-color: #5eead4 !important;
}
#roaming-bundles h1::after { display: none !important; }
#roaming-bundles table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
  background: #fff;
}
[data-theme="dark"] #roaming-bundles table { background: #0f172a; }
#roaming-bundles th {
  background: #0f766e !important;
  color: #fff !important;
  padding: 11px 9px !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  text-align: center;
  border: none !important;
}
#roaming-bundles td {
  padding: 10px 9px !important;
  text-align: center;
  font-weight: 600;
  font-size: 0.88rem;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #fff !important;
  color: #0f172a !important;
}
[data-theme="dark"] #roaming-bundles td {
  background: #0f172a !important;
  border-bottom-color: #1e293b !important;
  color: #e2e8f0 !important;
}
#roaming-bundles tbody tr:nth-child(even) td { background: var(--table-even-bg, #f8fafc) !important; }
[data-theme="dark"] #roaming-bundles tbody tr:nth-child(even) td { background: #1e293b !important; }
#roaming-bundles bdi.code-cell,
#roaming-bundles .code-cell {
  background: #f0fdfa !important;
  color: #0f766e !important;
  padding: 3px 7px !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  border: 1px solid #99f6e4 !important;
  direction: ltr;
  display: inline-block;
  -webkit-text-fill-color: #0f766e !important;
}
[data-theme="dark"] #roaming-bundles bdi.code-cell,
[data-theme="dark"] #roaming-bundles .code-cell {
  background: #134e4a !important;
  color: #99f6e4 !important;
  border-color: #0f766e !important;
  -webkit-text-fill-color: #99f6e4 !important;
}


/* =========================================================
    post voice
========================================================= */
*/
        .postpaid-voice-content {
            --pv-bg: #f8fafc;
            --pv-card-bg: #ffffff;
            --pv-text: #1e293b;
            --pv-muted: #64748b;
            --pv-border: #e2e8f0;
            --pv-table-header: #f1f5f9;
            --pv-table-hover: #f8fafc;
            --pv-code-bg: #f5f3ff;
            --pv-code-color: #4f46e5;
            --pv-code-border: #ddd6fe;

            font-family: 'Cairo', sans-serif;
            color: var(--pv-text);
            background-color: var(--pv-bg);
            padding: 35px;
            border-radius: 28px;
            direction: rtl;
            text-align: right;
            max-width: 1100px;
            margin: 0 auto;
            box-sizing: border-box;
            border: 1px solid var(--pv-border);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
            transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
            animation: postVoicePageFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        /* استجابة تلقائية للوضع الليلي لنظام التشغيل أو فئات الوضع الليلي في موقعك */
        @media (prefers-color-scheme: dark) {
            .postpaid-voice-content {
                --pv-bg: #0f172a;
                --pv-card-bg: #1e293b;
                --pv-text: #f8fafc;
                --pv-muted: #94a3b8;
                --pv-border: rgba(255, 255, 255, 0.1);
                --pv-table-header: rgba(255, 255, 255, 0.03);
                --pv-table-hover: rgba(255, 255, 255, 0.05);
                --pv-code-bg: rgba(99, 102, 241, 0.15);
                --pv-code-color: #a78bfa;
                --pv-code-border: rgba(99, 102, 241, 0.3);
                box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.5);
            }
        }

        /* دعم كلاسات أو سمات الوضع الليلي الشهيرة للمواقع (أضف موقعك هنا تلقائياً ليتفاعل معها) */
        .dark .postpaid-voice-content,
        .dark-theme .postpaid-voice-content,
        [data-theme="dark"] .postpaid-voice-content,
        body.dark .postpaid-voice-content,
        body.dark-mode .postpaid-voice-content {
            --pv-bg: #0f172a;
            --pv-card-bg: #1e293b;
            --pv-text: #f8fafc;
            --pv-muted: #94a3b8;
            --pv-border: rgba(255, 255, 255, 0.1);
            --pv-table-header: rgba(255, 255, 255, 0.03);
            --pv-table-hover: rgba(255, 255, 255, 0.05);
            --pv-code-bg: rgba(99, 102, 241, 0.15);
            --pv-code-color: #a78bfa;
            --pv-code-border: rgba(99, 102, 241, 0.3);
            box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.5);
        }

        .postpaid-voice-content *, 
        .postpaid-voice-content *::before, 
        .postpaid-voice-content *::after {
            box-sizing: border-box;
        }

        @keyframes postVoicePageFadeIn {
            0% { opacity: 0; transform: translateY(25px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .postpaid-voice-content h1 {
         font-size: 28px;
         font-weight: 900;
         background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #c084fc 100%);
        -webkit-background-clip: text;
         background-clip: text;
        -webkit-text-fill-color: transparent;
         margin-bottom: 35px;
         text-align: center;
         position: relative;
         animation: postVoiceTitleSlide 0.7s ease 0.2s both;
        }

        @keyframes postVoiceTitleSlide {
            from { opacity: 0; transform: translateY(-15px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* شبكة بطاقات المعلومات */
        .postpaid-voice-content .post-voice-info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }

        .postpaid-voice-content .post-voice-info-card {
            background: var(--pv-card-bg);
            border: 1px solid var(--pv-border);
            padding: 24px;
            border-radius: 22px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.03);
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            animation: postVoiceCardFloatUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
        }

        .postpaid-voice-content .post-voice-info-card:nth-child(1) { animation-delay: 0.25s; }
        .postpaid-voice-content .post-voice-info-card:nth-child(2) { animation-delay: 0.35s; }
        .postpaid-voice-content .post-voice-info-card:nth-child(3) { animation-delay: 0.45s; }
        .postpaid-voice-content .post-voice-info-card:nth-child(4) { animation-delay: 0.55s; }

        @keyframes postVoiceCardFloatUp {
         0% { opacity: 0; transform: translateY(30px) scale(0.95); }
           100% { opacity: 1; transform: translateY(0) scale(1); }
        }

        .postpaid-voice-content .post-voice-info-card::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 5px;
            height: 100%;
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
            transition: width 0.3s ease;
        }

        .postpaid-voice-content .post-voice-info-card:hover {
            transform: translateY(-8px);
            border-color: rgba(99, 102, 241, 0.4);
            box-shadow: 0 20px 30px -10px rgba(99, 102, 241, 0.15);
        }

        .postpaid-voice-content .post-voice-info-card:hover::before {
            width: 10px;
        }

        .postpaid-voice-content .post-voice-card-label {
            font-size: 13px;
            color: var(--pv-muted);
            margin-bottom: 8px;
            display: block;
            font-weight: 600;
        }

        .postpaid-voice-content .post-voice-card-value {
            font-size: 20px;
            font-weight: 800;
            color: var(--pv-text);
            letter-spacing: 0.3px;
        }

        /* عناوين الأقسام */
        .postpaid-voice-content .section-title {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
            color: #ffffff;
            padding: 14px 24px;
            margin-top: 45px;
            margin-bottom: 25px;
            text-align: right;
            font-size: 18px;
            font-weight: 800;
            border-radius: 14px;
            box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.25);
            animation: postVoiceFadeInScale 0.6s ease both;
        }

        @keyframes postVoiceFadeInScale {
            from { opacity: 0; transform: scale(0.98); }
            to { opacity: 1; transform: scale(1); }
        }

        /* الجداول الحديثة */
        .postpaid-voice-content .post-voice-table-container {
            overflow-x: auto;
            border-radius: 18px;
            border: 1px solid var(--pv-border);
            background: var(--pv-card-bg);
            box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.03);
            margin-bottom: 30px;
            animation: postVoiceFadeInScale 0.7s ease both;
            transition: background-color 0.4s ease, border-color 0.4s ease;
        }

        .postpaid-voice-content table {
            width: 100%;
            border-collapse: collapse;
            text-align: center;
            white-space: nowrap;
        }

        .postpaid-voice-content table th,
        .postpaid-voice-content table td {
            padding: 16px 20px;
            font-size: 14px;
            color: var(--pv-text);
        }

        .postpaid-voice-content table th {
            background-color: var(--pv-table-header);
            color: #4f46e5;
            font-weight: 800;
            border-bottom: 2px solid var(--pv-border);
        }

        .postpaid-voice-content table tbody tr {
            border-bottom: 1px solid var(--pv-border);
            transition: background-color 0.25s ease, transform 0.25s ease;
        }

        .postpaid-voice-content table tbody tr:last-child {
            border-bottom: none;
        }

        .postpaid-voice-content table tbody tr:hover {
            background-color: var(--pv-table-hover) !important;
        }

        /* أكواد الرموز */
        .postpaid-voice-content table td bdi {
            background: var(--pv-code-bg);
            color: var(--pv-code-color);
            border: 1px solid var(--pv-code-border);
            padding: 6px 14px;
            border-radius: 8px;
            font-weight: 800;
            display: inline-block;
            box-shadow: 0 4px 10px rgba(99, 102, 241, 0.08);
            transition: transform 0.3s ease;
        }

        .postpaid-voice-content table td bdi:hover {
            transform: scale(1.05);
        }

        /* صندوق الإرشادات */
        .postpaid-voice-content .footer-instruction {
            background: rgba(245, 158, 11, 0.08);
            border: 1px dashed rgba(245, 158, 11, 0.4);
            color: #d97706;
            text-align: center;
            margin-top: 35px;
            font-size: 15px;
            font-weight: 700;
            padding: 20px;
            border-radius: 16px;
            box-shadow: 0 10px 20px rgba(245, 158, 11, 0.03);
            animation: postVoicePulseWarning 3s infinite alternate;
        }

        @keyframes postVoicePulseWarning {
            0% { border-color: rgba(245, 158, 11, 0.4); transform: scale(1); }
            100% { border-color: rgba(245, 158, 11, 0.8); transform: scale(1.005); }
        }

        .postpaid-voice-content .footer-instruction bdi {
            background: rgba(245, 158, 11, 0.15);
            padding: 3px 10px;
            border-radius: 6px;
            color: inherit;
        }

        .postpaid-voice-content .section-separator {
            border: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--pv-border), transparent);
            margin: 40px 0;
        }
    /* =========================================================
       11. تنسيقات كود qoutapost المدمج لتاب postpaid-qouta
       ========================================================= */
    .sub-postpaid-container {
      max-width: 1000px;
      margin: 10px auto;
      padding: 20px;
      border-radius: 12px;
      text-align: right;
    }

    .sub-postpaid-container h1 {
      text-align: center;
      color: #5b21b6;
      margin-bottom: 10px;
      font-size: 2.2em;
      font-weight: 700;
    }

    .sub-postpaid-container p.sub-postpaid-subtitle {
      text-align: center;
      color: var(--text-muted);
      margin-top: 0;
      margin-bottom: 30px;
      font-size: 1.1em;
    }

    .sub-postpaid-table-section {
      margin-top: 30px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
      margin-bottom: 40px;
      background-color: var(--card-bg);
    }

    .sub-postpaid-table-section .sub-postpaid-section-title {
      color: white;
      padding: 15px 25px;
      font-size: 1.3em;
      font-weight: bold;
      text-align: right;
    }

    .sub-postpaid-table-section table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 0;
    }

    .sub-postpaid-table-section th, 
    .sub-postpaid-table-section td {
      padding: 15px;
      border: 1px solid var(--border-color);
      text-align: center;
      font-size: 0.95em;
      color: var(--text-main);
    }

    .sub-postpaid-table-section thead th {
      color: white;
      font-weight: 700;
    }

    .sub-postpaid-table-section-primary .sub-postpaid-section-title {
      background-color: #7c3aed;
    }

    .sub-postpaid-table-section-primary thead th {
      background-color: #8b5cf6;
    }

    .sub-postpaid-table-section-primary tbody tr:nth-child(odd) {
      background-color: rgba(124, 58, 237, 0.03);
    }

    .sub-postpaid-table-section-primary tbody tr:nth-child(even) {
      background-color: var(--card-bg);
    }

    .sub-postpaid-table-section-primary tbody tr:hover {
      background-color: var(--purple-light);
    }

    .sub-postpaid-table-section-secondary .sub-postpaid-section-title {
      background-color: #0d9488;
    }

    .sub-postpaid-table-section-secondary thead th {
      background-color: #14b8a6;
    }

    .sub-postpaid-table-section-secondary tbody tr:nth-child(odd) {
      background-color: rgba(13, 148, 136, 0.04);
    }

    .sub-postpaid-table-section-secondary tbody tr:nth-child(even) {
      background-color: var(--card-bg);
    }

    .sub-postpaid-table-section-secondary tbody tr:hover {
      background-color: rgba(20, 184, 166, 0.15);
    }

    .sub-postpaid-table-section-tertiary .sub-postpaid-section-title {
      background-color: #616161;
    }

    .sub-postpaid-table-section-tertiary thead th {
      background-color: #757575;
    }

    .sub-postpaid-table-section-tertiary tbody tr:nth-child(odd) {
      background-color: rgba(117, 117, 117, 0.04);
    }

    .sub-postpaid-table-section-tertiary tbody tr:nth-child(even) {
      background-color: var(--card-bg);
    }

    .sub-postpaid-table-section-tertiary tbody tr:hover {
      background-color: rgba(117, 117, 117, 0.15);
    }

    .sub-postpaid-rules-section {
      margin-top: 30px;
      padding: 25px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background-color: var(--card-bg);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
      margin-bottom: 40px;
    }

    .sub-postpaid-rules-title {
      background-color: #7c3aed;
      color: white;
      padding: 15px 25px;
      font-size: 1.3em;
      font-weight: bold;
      margin: -25px -25px 25px -25px;
      border-radius: 8px 8px 0 0;
      text-align: right;
    }

    .sub-postpaid-rule-item {
      margin-bottom: 15px;
      line-height: 1.8;
      font-size: 1.02em;
      color: var(--text-main);
      text-align: right;
    }

    .sub-postpaid-rule-item strong {
      color: #6d28d9;
      font-weight: 700;
      margin-left: 8px;
      margin-right: 8px;
    }

    .sub-postpaid-rule-item ul {
      list-style: none;
      padding-right: 0;
      margin-top: 10px;
    }

    .sub-postpaid-rule-item ul li {
      margin-bottom: 10px;
      position: relative;
      padding-right: 25px;
      text-align: right;
    }

    .sub-postpaid-rule-item ul li::before {
      content: '•';
      color: #8b5cf6;
      font-size: 1.4em;
      position: absolute;
      right: 0;
      top: -2px;
    }

    .sub-postpaid-rules-section-secondary .sub-postpaid-rules-title {
      background-color: #0d9488;
    }

    .sub-postpaid-rules-section-secondary .sub-postpaid-rule-item ul li::before {
      color: #14b8a6;
    }

    .sub-postpaid-orange-text {
      color: #f59e0b;
      font-weight: bold;
    }

 /* ==========================================================================
   تنسيقات مكون خدمة تحويل الرصيد (Me2U Component)
   جميع التنسيقات مقيدة داخل الحاوية الرئيسية #me2u
   ========================================================================== */

#me2u {
    /* متغيّرات محليّة خاصة بالمكوّن فقط */
    --me2u-bg-page: #1e0e0e;
    --me2u-card-bg: #416b9b;
    --me2u-primary-purple: #9d72ff;
    --me2u-soft-purple: #322550;
    --me2u-purple-border: #423267;
    --me2u-text-light: #f1edfb;
    --me2u-text-sub: #bca8ff;
    --me2u-text-muted: #faf9f9;
    --me2u-code-color: #7dd3fc;
    --me2u-border-radius: 18px;
    --me2u-transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    font-family: 'Zain', sans-serif;
    color: var(--me2u-text-light);
    line-height: 1.5;
    font-size: 16px;
    direction: rtl;
    width: 100%;
    padding: 20px 10px;
    box-sizing: border-box;
}

/* إعادة ضبط الحجم للعناصر الداخلية للمكون فقط */
#me2u * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* حاوية المكون الرئيسية */
#me2u .me2u-container {
    max-width: 700px;
    margin: 0 auto;
    background: var(--me2u-card-bg);
    border-radius: var(--me2u-border-radius);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    padding: 35px 28px;
    border: 1px solid var(--me2u-purple-border);
    position: relative;
    animation: me2uFadeInUp 0.8s ease-out forwards;
    transition: var(--me2u-transition-smooth);
}

/* رأس المكون */
#me2u .me2u-header {
    text-align: center;
    margin-bottom: 22px;
}

#me2u .me2u-phone-avatar {
    width: 58px;
    height: 58px;
    background-color: var(--me2u-soft-purple);
    border: 1px solid var(--me2u-primary-purple);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    font-size: 22px;
    color: var(--me2u-primary-purple);
    box-shadow: 0 4px 15px rgba(157, 114, 255, 0.15);
    animation: me2uFloatPhone 3s ease-in-out infinite;
    transition: var(--me2u-transition-smooth);
}

#me2u .me2u-phone-avatar:hover {
    transform: scale(1.1) rotate(-8deg);
    color: #ffffff;
    background-color: var(--me2u-primary-purple);
    box-shadow: 0 0 20px rgba(157, 114, 255, 0.4);
}

#me2u .me2u-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--me2u-soft-purple);
    color: var(--me2u-text-sub);
    font-weight: 700;
    padding: 4px 16px;
    border-radius: 50px;
    font-size: 0.8em;
    margin-bottom: 8px;
    border: 1px solid var(--me2u-purple-border);
    transition: var(--me2u-transition-smooth);
}

#me2u .me2u-badge i {
    animation: me2uPulseSignal 2s infinite;
}

#me2u .me2u-badge:hover {
    border-color: var(--me2u-primary-purple);
    color: #ffffff;
}

#me2u .me2u-service-intro {
    font-size: 1.4em;
    color: #ffffff;
    font-weight: 800;
}

#me2u .me2u-service-description {
    font-size: 0.95em;
    color: var(--me2u-text-muted);
    text-align: center;
    margin-bottom: 22px;
    font-weight: 400;
}

#me2u .me2u-subtext {
    font-size: 0.88em;
    color: var(--me2u-text-muted);
    margin-bottom: 8px;
}

/* شريط كود USSD التفاعلي */
#me2u .me2u-ussd-wrapper {
    background: #220e0e;
    border-radius: 12px;
    padding: 12px 18px;
    margin: 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: ltr;
    border: 1px solid var(--me2u-purple-border);
    position: relative;
    transition: var(--me2u-transition-smooth);
}

#me2u .me2u-ussd-wrapper:hover {
    border-color: var(--me2u-primary-purple);
    box-shadow: 0 4px 20px rgba(157, 114, 255, 0.12);
    transform: translateY(-2px);
}

#me2u .me2u-ussd-wrapper::before {
    content: 'USSD';
    position: absolute;
    top: -9px;
    right: 16px;
    background: var(--me2u-purple-border);
    color: var(--me2u-text-light);
    font-family: 'Zain', sans-serif;
    font-size: 0.65em;
    font-weight: 700;
    padding: 0 6px;
    border-radius: 4px;
    transition: var(--me2u-transition-smooth);
}

#me2u .me2u-ussd-wrapper:hover::before {
    background: var(--me2u-primary-purple);
    color: #ffffff;
}

#me2u .me2u-ussd-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

#me2u .me2u-phone-mini-icon {
    color: var(--me2u-primary-purple);
    font-size: 0.95em;
    transition: var(--me2u-transition-smooth);
}

#me2u .me2u-ussd-wrapper:hover .me2u-phone-mini-icon {
    transform: scale(1.2) rotate(12deg);
}

#me2u .me2u-ussd-code {
    font-family: 'Fira Code', monospace;
    font-size: 1em;
    color: var(--me2u-code-color);
    font-weight: 500;
    letter-spacing: 0.5px;
    word-break: break-all;
}

/* زر النسخ المتفاعل */
#me2u .me2u-copy-btn {
    background: var(--me2u-soft-purple);
    border: 1px solid var(--me2u-purple-border);
    color: var(--me2u-text-light);
    padding: 6px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--me2u-transition-smooth);
    font-family: 'Zain', sans-serif;
    font-size: 0.85em;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

#me2u .me2u-copy-btn:hover {
    background: var(--me2u-primary-purple);
    color: #ffffff;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(157, 114, 255, 0.3);
}

#me2u .me2u-copy-btn:active {
    transform: scale(0.95);
}

/* تنبيه بطاقة SIM */
#me2u .me2u-info-card {
    background: rgba(80, 37, 44, 0.4);
    border-right: 3px solid var(--me2u-primary-purple);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.9em;
    color: var(--me2u-text-sub);
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--me2u-transition-smooth);
}

#me2u .me2u-info-card:hover {
    background: rgba(50, 37, 80, 0.7);
    transform: translateX(-4px);
}

#me2u .me2u-info-card i {
    color: var(--me2u-primary-purple);
    transition: var(--me2u-transition-smooth);
}

#me2u .me2u-info-card:hover i {
    transform: scale(1.2);
}

/* عناوين الأقسام */
#me2u .me2u-section-title {
    font-size: 1.1em;
    font-weight: 800;
    margin-top: 25px;
    margin-bottom: 12px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}

#me2u .me2u-section-title i {
    color: var(--me2u-primary-purple);
    font-size: 0.9em;
}

/* عناصر القائمة التفاعلية */
#me2u .me2u-conditions-list {
    list-style: none;
    display: grid;
    gap: 10px;
    margin-bottom: 22px;
}

#me2u .me2u-conditions-list li {
    background: rgba(255, 255, 255, 0.02);
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(66, 50, 103, 0.5);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92em;
    color: var(--me2u-text-light);
    transition: var(--me2u-transition-smooth);
}

#me2u .me2u-conditions-list li:hover {
    background: rgba(50, 37, 80, 0.5);
    border-color: var(--me2u-primary-purple);
    transform: translateX(-6px);
}

#me2u .me2u-conditions-list li i {
    color: #34d399;
    font-size: 0.85em;
    transition: var(--me2u-transition-smooth);
}

#me2u .me2u-conditions-list li:hover i {
    transform: scale(1.3);
}

#me2u .me2u-highlight {
    font-weight: 700;
    color: var(--me2u-code-color);
    background: rgba(125, 211, 252, 0.1);
    padding: 1px 7px;
    border-radius: 5px;
    margin: 0 3px;
    font-family: 'Fira Code', monospace;
    font-size: 0.9em;
}

/* بطاقات الأسعار */
#me2u .me2u-price-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-top: 25px;
    padding-top: 18px;
    border-top: 1px dashed var(--me2u-purple-border);
}

#me2u .me2u-price-item {
    text-align: center;
    padding: 16px 12px;
    background: #140f22;
    border: 1px solid var(--me2u-purple-border);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    transition: var(--me2u-transition-smooth);
}

#me2u .me2u-price-item:hover {
    transform: translateY(-5px);
    border-color: var(--me2u-primary-purple);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

#me2u .me2u-price-icon {
    font-size: 1em;
    color: var(--me2u-text-sub);
    margin-bottom: 4px;
    transition: var(--me2u-transition-smooth);
}

#me2u .me2u-price-item:hover .me2u-price-icon {
    color: var(--me2u-primary-purple);
    transform: scale(1.2);
}

#me2u .me2u-price-title {
    font-size: 0.82em;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--me2u-text-muted);
}

#me2u .me2u-price-value {
    font-family: 'Fira Code', monospace;
    font-size: 1.45em;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

#me2u .me2u-vat-badge {
    font-size: 0.72em;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 6px;
    display: inline-block;
    transition: var(--me2u-transition-smooth);
}

#me2u .me2u-ex-vat { 
    background: rgba(245, 158, 11, 0.12); 
    color: #fcd34d; 
    border: 1px solid rgba(245, 158, 11, 0.2);
}

#me2u .me2u-inc-vat { 
    background: rgba(52, 211, 153, 0.12); 
    color: #6ee7b7; 
    border: 1px solid rgba(52, 211, 153, 0.2);
}

/* إطارات الأنيميشن Keyframes */
@keyframes me2uFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes me2uFloatPhone {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

@keyframes me2uPulseSignal {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* الاستجابة للشاشات الصغيرة */
@media (max-width: 550px) {
    #me2u .me2u-container {
        padding: 22px 16px;
    }
    #me2u .me2u-ussd-wrapper {
        flex-direction: column;
        gap: 10px;
        padding-top: 16px;
    }
    #me2u .me2u-copy-btn {
        width: 100%;
        justify-content: center;
    }
}

     /* =========================================================
       12. البيانات
       ========================================================= */

/* Scoped styles under #prepaid-data-card-quota */
.prepaid-data-scope *, 
.prepaid-data-scope *::before, 
.prepaid-data-scope *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.prepaid-data-scope {
    background-color: var(--prepaid-data-bg-deep, #0b0f19);
    color: var(--prepaid-data-text-main, #f1f5f9);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 30px 20px;
    overflow-x: hidden;
    position: relative;
    transition: background-color 0.4s ease, color 0.4s ease;
    width: 100%;
    direction: rtl; /* ضمان الاتجاه من اليمين لليسار */
}

.prepaid-data-scope::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: 
        radial-gradient(circle at 50% 50%, var(--prepaid-data-glow, rgba(124, 58, 237, 0.15)) 0%, transparent 60%),
        linear-gradient(to right, var(--prepaid-data-border-color, rgba(255, 255, 255, 0.05)) 1px, transparent 1px),
        linear-gradient(to bottom, var(--prepaid-data-border-color, rgba(255, 255, 255, 0.05)) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
    z-index: -1;
    pointer-events: none;
    transition: background 0.4s ease;
}

#prepaid-data-card-quota {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto; /* توسيط صريح للكارت في منتصف الشاشة */
    background: var(--prepaid-data-surface, rgba(15, 23, 42, 0.75));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--prepaid-data-border-glow, rgba(124, 58, 237, 0.3));
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4), 0 0 30px var(--prepaid-data-glow, rgba(124, 58, 237, 0.2));
    padding: 35px;
    animation: prepaidDataHoloAppear 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    position: relative;
    overflow: hidden;
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    text-align: center; /* توسيط المحتويات الافتراضية */
}

@keyframes prepaidDataHoloAppear {
    0% { opacity: 0; transform: translateY(30px) scale(0.95); filter: blur(10px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}      

#prepaid-data-card-quota::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--prepaid-data-primary, #0284c7), var(--prepaid-data-accent, #7c3aed), var(--prepaid-data-secondary, #2563eb));
    animation: prepaidDataLaserGlow 3s ease-in-out infinite alternate;
}

@keyframes prepaidDataLaserGlow {
    0% { opacity: 0.6; filter: drop-shadow(0 0 2px var(--prepaid-data-primary, #0284c7)); }
    100% { opacity: 1; filter: drop-shadow(0 0 10px var(--prepaid-data-accent, #7c3aed)); }
}

.prepaid-data-section-header {
    text-align: center;
    margin-bottom: 25px;
}

.prepaid-data-section-header h2 {
    font-size: 1.8rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--prepaid-data-primary, #38bdf8), var(--prepaid-data-accent, #a78bfa));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.prepaid-data-section-header p {
    color: var(--prepaid-data-text-muted, #94a3b8);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* التبويبات الفرعية المتطورة */
.prepaid-subtabs-nav {
    display: flex;
    gap: 10px;
    margin: 0 auto 25px auto;
    border-bottom: 1px solid var(--prepaid-data-border-color, rgba(255, 255, 255, 0.1));
    padding-bottom: 12px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.subtab-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--prepaid-data-border-color, rgba(255, 255, 255, 0.1));
    color: var(--prepaid-data-text-muted, #94a3b8);
    padding: 10px 18px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.subtab-btn:hover {
    background: rgba(124, 58, 237, 0.15);
    color: #fff;
    border-color: var(--prepaid-data-accent, #7c3aed);
}

.subtab-btn.active {
    background: linear-gradient(135deg, var(--prepaid-data-primary, #0284c7), var(--prepaid-data-accent, #7c3aed));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.prepaid-subtab-content {
    display: none;
    animation: fadeInSubtab 0.4s ease forwards;
    text-align: right; /* المحتوى الداخلي يكون متسق مع اتجاه القراءة */
}

.prepaid-subtab-content.active {
    display: block;
}

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

.prepaid-subtab-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--prepaid-data-primary, #38bdf8);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center; /* توسيط العنوان الفرعي */
    gap: 10px;
}

.prepaid-subtab-title span {
    font-size: 0.85rem;
    color: var(--prepaid-data-text-muted, #94a3b8);
}

.prepaid-data-card-badge {
    display: inline-block;
    background: linear-gradient(135deg, #7c3aed, #db2777);
    color: #fff;
    font-weight: bold;
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: 20px;
    margin: 0 auto 15px auto;
    box-shadow: 0 0 10px rgba(219, 39, 119, 0.3);
}

.full-width-card {
    margin-bottom: 25px;
    line-height: 1.7;
    text-align: center;
}

/* الجداول */
.prepaid-data-table-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 35px auto; /* توسيط الجدول بالنسبة للحاوية */
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--prepaid-data-border-color, rgba(255, 255, 255, 0.1));
    background: var(--prepaid-data-surface-solid, rgba(15, 23, 42, 0.95)); 
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
    transition: background 0.4s ease, border-color 0.4s ease;
}

.prepaid-data-table-container table {
    width: 100%;
    border-collapse: collapse;
    text-align: center; /* توسيط نصوص الجدول */
}

.prepaid-data-table-container th {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.2), rgba(124, 58, 237, 0.2));
    color: var(--prepaid-data-primary, #38bdf8);
    padding: 16px;
    font-weight: 700;
    font-size: 0.95rem;
    border-bottom: 2px solid var(--prepaid-data-border-glow, rgba(124, 58, 237, 0.3));
    letter-spacing: 0.5px;
    text-align: center;
}

.prepaid-data-table-container td {
    padding: 15px 18px;
    border-bottom: 1px solid var(--prepaid-data-border-color, rgba(255, 255, 255, 0.05));
    font-size: 0.95rem;
    color: var(--prepaid-data-text-main, #f1f5f9);
    transition: all 0.3s ease;
    text-align: center;
}

.prepaid-data-table-container tbody tr {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.prepaid-data-table-container tbody tr:hover {
    background: var(--prepaid-data-table-hover, rgba(124, 58, 237, 0.1));
    transform: scale(1.002);
}

.prepaid-data-table-container tbody td:last-child {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color: var(--prepaid-data-primary, #38bdf8);
    letter-spacing: 1px;
}

.prepaid-data-table-footer-row td {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(37, 99, 235, 0.15));
    font-weight: 600;
    color: var(--prepaid-data-text-main, #f1f5f9);
    border-top: 2px solid var(--prepaid-data-border-glow, rgba(124, 58, 237, 0.3));
    padding: 18px;
    text-align: center;
}

/* الشبكات والبطاقات والمعلومات */
.prepaid-data-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    justify-content: center;
}

.prepaid-data-info-card {
    background: var(--prepaid-data-surface-solid, rgba(30, 41, 59, 0.5));
    border: 1px solid var(--prepaid-data-border-color, rgba(255, 255, 255, 0.1));
    border-radius: 16px;
    padding: 22px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: right;
}

.prepaid-data-info-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0; /* تحويل الشريط الجانبي لليمين بدلاً من اليسار */
    left: auto;
    width: 4px;
    height: 100%;
    background: var(--prepaid-data-primary, #0284c7);
    transition: width 0.3s ease;
}

.prepaid-data-info-card:hover {
    transform: translateY(-5px);
    border-color: var(--prepaid-data-primary, #38bdf8);
    box-shadow: 0 10px 30px -10px var(--prepaid-data-glow, rgba(124, 58, 237, 0.3));
}

.prepaid-data-info-card:hover::before {
    width: 8px;
}

.prepaid-data-info-card h3 {
    font-size: 1.05rem;
    color: var(--prepaid-data-primary, #38bdf8);
    margin-bottom: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.prepaid-data-info-card h3::before {
    content: "⚡";
    font-size: 0.85rem;
}

.prepaid-data-info-card ul {
    list-style: none;
}

.prepaid-data-info-card li, .prepaid-data-info-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--prepaid-data-text-muted, #cbd5e1);
}

/* قسم الأسئلة الشائعة FAQ */
.prepaid-faq-section {
    margin-top: 30px;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid var(--prepaid-data-border-color, rgba(255, 255, 255, 0.08));
    text-align: right;
}

.prepaid-faq-section h3 {
    color: var(--prepaid-data-accent, #a78bfa);
    font-size: 1.1rem;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
    text-align: center; /* توسيط عنوان الأسئلة الشائعة */
}

.faq-item {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-q {
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    font-size: 0.95rem;
}

.faq-q::before {
    content: "❓ ";
}

.faq-a {
    color: var(--prepaid-data-text-muted, #94a3b8);
    font-size: 0.9rem;
    padding-right: 20px;
    padding-left: 0;
    line-height: 1.5;
}

/* التجاوب مع الجوال */
@media (max-width: 768px) {
    .prepaid-data-scope {
        padding: 15px 10px;
    }

    #prepaid-data-card-quota {
        padding: 15px;
        margin: 0 auto;
    }

    .prepaid-data-section-header h2 {
        font-size: 1.35rem;
    }

    .subtab-btn {
        width: 100%;
        text-align: center;
    }

    .prepaid-data-table-container table, 
    .prepaid-data-table-container thead, 
    .prepaid-data-table-container tbody, 
    .prepaid-data-table-container th, 
    .prepaid-data-table-container td, 
    .prepaid-data-table-container tr {
        display: block;
    }

    .prepaid-data-table-container thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .prepaid-data-table-container tr {
        margin-bottom: 15px;
        border: 1px solid var(--prepaid-data-border-color, rgba(255, 255, 255, 0.1));
        border-radius: 12px;
        background: var(--prepaid-data-surface-solid, rgba(30, 41, 59, 0.5));
        padding: 5px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .prepaid-data-table-container td {
        border: none;
        border-bottom: 1px solid var(--prepaid-data-border-color, rgba(255, 255, 255, 0.05));
        position: relative;
        padding-right: 50%; /* تم التغيير من padding-left لدعم RTL */
        padding-left: 15px;
        text-align: right; /* محاذاة النص لليمين بدلاً من اليسار */
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .prepaid-data-table-container td:last-child {
        border-bottom: none;
    }

    .prepaid-data-table-container td::before {
        content: attr(data-label);
        position: absolute;
        right: 15px;
        width: 45%;
        white-space: nowrap;
        font-weight: bold;
        text-align: right;
        color: var(--prepaid-data-text-muted, #94a3b8);
    }

    .prepaid-data-info-grid {
        grid-template-columns: 1fr;
    }
}
   /* =========================================================
   تنسيقات postpaid-mazaya - هيكلة متناسقة مع خلفية شفافة
   ========================================================= */

#postpaid-mazaya {
    /* ألوان هادئة تتكيف تلقائياً مع خلفية موقعك */
    --mz-text-primary: inherit;
    --mz-text-title: #007bff;
    
    /* تحديد ألوان حدود واضحة وغير اختفائية */
    --mz-border-color: #cbd5e1;
    --mz-card-bg: rgba(0, 0, 0, 0.03);
    --mz-card-hover-bg: rgba(0, 0, 0, 0.06);
    --mz-table-header-bg: #007bff;
    --mz-table-row-even: rgba(0, 0, 0, 0.02);
    --mz-list-bg: rgba(0, 0, 0, 0.025);

    --mz-brand-primary: #007bff;
    --mz-brand-primary-hover: #0056b3;

    font-family: inherit;
    direction: rtl;
    text-align: right;
    line-height: 1.6;
    color: var(--mz-text-primary);
    
    /* الحاوية الأساسية شفافة تماماً */
    background: transparent !important;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
}

/* ضبط المتغيرات تلقائياً في حال كان الموقع في الوضع الداكن (Dark Mode) */
@media (prefers-color-scheme: dark) {
    #postpaid-mazaya {
        --mz-text-title: #4da3ff;
        --mz-border-color: #334155;
        --mz-card-bg: rgba(255, 255, 255, 0.05);
        --mz-card-hover-bg: rgba(255, 255, 255, 0.09);
        --mz-table-row-even: rgba(255, 255, 255, 0.03);
        --mz-list-bg: rgba(255, 255, 255, 0.04);
    }
}

/* دعم الـ Toggle للوضع الداكن المباشر */
body.dark #postpaid-mazaya,
body.dark-mode #postpaid-mazaya,
#postpaid-mazaya.dark {
    --mz-text-title: #4da3ff;
    --mz-border-color: #334155;
    --mz-card-bg: rgba(255, 255, 255, 0.05);
    --mz-card-hover-bg: rgba(255, 255, 255, 0.09);
    --mz-table-row-even: rgba(255, 255, 255, 0.03);
    --mz-list-bg: rgba(255, 255, 255, 0.04);
}

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

#postpaid-mazaya .container {
    max-width: 1000px;
    margin: 15px auto;
    background: transparent !important;
    border-radius: 12px;
    padding: 20px 10px;
}

#postpaid-mazaya .page-title {
    background-color: var(--mz-brand-primary);
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    padding: 18px;
    margin: 0 0 25px 0;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#postpaid-mazaya .intro-text {
    font-size: 16px;
    color: inherit;
    opacity: 0.9;
    margin-bottom: 15px;
    text-align: justify;
}

/* أزرار التبويبات مع إبراز الحدود الخارجية والفاصلة */
#postpaid-mazaya .tabs-container {
    margin-top: 25px;
    border: 1.5px solid var(--mz-border-color) !important;
    border-radius: 10px;
    overflow: hidden;
    background: var(--mz-card-bg);
}

#postpaid-mazaya .tabs-buttons {
    display: flex;
    border-bottom: 1.5px solid var(--mz-border-color) !important;
    background: var(--mz-card-bg);
}

#postpaid-mazaya .tab-button {
    background: transparent;
    border: none;
    border-left: 1px solid var(--mz-border-color) !important; /* حدود فاصلة بين التبات */
    outline: none;
    padding: 15px 18px;
    cursor: pointer;
    font-size: 16.5px;
    font-weight: bold;
    color: inherit;
    opacity: 0.8;
    transition: all 0.25s ease;
    flex-grow: 1;
    text-align: center;
    font-family: inherit;
}

#postpaid-mazaya .tab-button:last-child {
    border-left: none !important;
}

#postpaid-mazaya .tab-button:hover {
    background-color: var(--mz-card-hover-bg);
    opacity: 1;
    color: var(--mz-text-title);
}

#postpaid-mazaya .tab-button.active {
    background-color: var(--mz-brand-primary);
    color: #ffffff !important;
    opacity: 1;
}

/* إظهار محتوى التبويبات بشكل منظم */
#postpaid-mazaya .mazaya-sub-tab {
    display: none !important;
    padding: 25px 20px;
}

#postpaid-mazaya .mazaya-sub-tab.active {
    display: block !important;
    animation: mazayaFadeIn 0.3s ease-in-out;
}

@keyframes mazayaFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

#postpaid-mazaya .mazaya-sub-tab h3 {
    color: var(--mz-text-title);
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 18px;
    border-bottom: 2px solid var(--mz-border-color) !important;
    padding-bottom: 8px;
}

#postpaid-mazaya .mazaya-sub-tab h4 {
    color: inherit;
    font-size: 18px;
    margin-top: 25px;
    margin-bottom: 12px;
}

/* إرجاع شكل عناصر القوائم (Li) بوضوح */
#postpaid-mazaya .mazaya-sub-tab ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

#postpaid-mazaya .mazaya-sub-tab ul li {
    background-color: var(--mz-list-bg);
    margin-bottom: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid var(--mz-border-color) !important;
    border-right: 4px solid #28a745 !important;
    display: flex;
    align-items: center;
    font-size: 15px;
    color: inherit;
}

#postpaid-mazaya .mazaya-sub-tab ul li strong {
    color: var(--mz-text-title);
    margin-left: 5px;
}

#postpaid-mazaya .mazaya-sub-tab ul li::before {
    content: '★';
    color: #ffc107;
    font-weight: bold;
    margin-left: 10px;
    font-size: 1.1em;
}

/* تنسيق الجداول وإبراز الحدود الخارجية والداخلية لكل خلية */
#postpaid-mazaya .table-responsive {
    width: 100%;
    overflow-x: auto;
    margin-top: 15px;
    margin-bottom: 25px;
    border: 1.5px solid var(--mz-border-color) !important;
    border-radius: 8px;
}

#postpaid-mazaya table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
    text-align: center;
}

#postpaid-mazaya table thead th {
    background-color: var(--mz-table-header-bg);
    color: #ffffff;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    font-weight: bold;
}

#postpaid-mazaya table tbody td {
    padding: 11px 12px;
    border: 1px solid var(--mz-border-color) !important; /* حدود إضافية واضحة للجدول */
    color: inherit;
}

#postpaid-mazaya table tbody tr:nth-child(even) td {
    background-color: var(--mz-table-row-even);
}

#postpaid-mazaya table tbody tr:hover td {
    background-color: var(--mz-card-hover-bg);
}

#postpaid-mazaya .section {
    margin-top: 35px;
    padding-top: 20px;
    border-top: 1px dashed var(--mz-border-color) !important;
}

#postpaid-mazaya .section h2 {
    color: var(--mz-text-title);
    font-size: 22px;
    margin-bottom: 20px;
    text-align: center;
}

/* قسم توزيع الوحدات */
#postpaid-mazaya .unit-distribution-container {
    background: var(--mz-card-bg);
    padding: 22px 15px;
    border-radius: 12px;
    border: 1.5px solid var(--mz-border-color) !important;
    margin-top: 20px;
    text-align: center;
}

#postpaid-mazaya .unit-instruction {
    background-color: var(--mz-brand-primary);
    color: #ffffff;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 17px;
    font-weight: bold;
    margin: 0 auto 20px auto;
    display: inline-block;
    max-width: 95%;
}

#postpaid-mazaya .unit-cards-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 15px;
}

#postpaid-mazaya .unit-card {
    background-color: var(--mz-brand-primary);
    color: #ffffff;
    padding: 14px 10px;
    border-radius: 8px;
    flex: 1;
    min-width: 130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 15.5px;
    font-weight: bold;
    transition: transform 0.2s ease;
}

#postpaid-mazaya .unit-card:hover {
    transform: translateY(-3px);
}

#postpaid-mazaya .unit-card.equivalence {
    background-color: #212529;
    color: #ffc107;
    border: 1px solid var(--mz-border-color) !important;
}

/* قسم التفاصيل والخدمات الخاصة */
#postpaid-mazaya .extra-details-section {
    background: var(--mz-card-bg);
    border: 1.5px solid var(--mz-border-color) !important;
    border-radius: 12px;
    padding: 20px;
    margin-top: 40px;
}

#postpaid-mazaya .info-tabs-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 2px solid var(--mz-brand-primary) !important;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

#postpaid-mazaya .info-tab-btn {
    background-color: var(--mz-card-bg);
    border: 1px solid var(--mz-border-color) !important;
    padding: 10px 16px;
    font-size: 14.5px;
    font-weight: bold;
    color: inherit;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
}

#postpaid-mazaya .info-tab-btn:hover {
    background-color: var(--mz-card-hover-bg);
    color: var(--mz-text-title);
}

#postpaid-mazaya .info-tab-btn.active {
    background-color: var(--mz-brand-primary);
    color: #ffffff;
    border-color: var(--mz-brand-primary) !important;
}

#postpaid-mazaya .info-tab-content {
    display: none;
    animation: mazayaFadeIn 0.3s ease-in-out;
}

#postpaid-mazaya .info-tab-content.active {
    display: block;
}

#postpaid-mazaya .info-tab-content h3 {
    color: var(--mz-text-title);
    font-size: 21px;
    margin-top: 0;
    margin-bottom: 8px;
}

#postpaid-mazaya .section-desc {
    font-size: 15px;
    opacity: 0.85;
    margin-bottom: 18px;
}

/* قوائم Check و Stars */
#postpaid-mazaya .custom-check-list,
#postpaid-mazaya .custom-bullet-list,
#postpaid-mazaya .custom-star-list {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

#postpaid-mazaya .custom-check-list li {
    position: relative;
    padding-right: 25px;
    margin-bottom: 10px;
    font-size: 14.5px;
}

#postpaid-mazaya .custom-check-list li::before {
    content: '✔';
    position: absolute;
    right: 0;
    color: #28a745;
    font-weight: bold;
}

#postpaid-mazaya .custom-star-list li {
    position: relative;
    padding-right: 22px;
    margin-bottom: 8px;
    font-size: 14.5px;
}

#postpaid-mazaya .custom-star-list li::before {
    content: '🔹';
    position: absolute;
    right: 0;
    font-size: 11px;
    top: 3px;
}

/* كروت الترقية والشجرة USSD */
#postpaid-mazaya .upgrade-grid,
#postpaid-mazaya .ussd-tree-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

#postpaid-mazaya .upgrade-card,
#postpaid-mazaya .ussd-box {
    background: var(--mz-card-bg);
    border: 1px solid var(--mz-border-color) !important;
    border-radius: 8px;
    padding: 15px;
}

#postpaid-mazaya .ussd-box {
    padding: 0;
    overflow: hidden;
}

#postpaid-mazaya .upgrade-card h4 {
    color: var(--mz-text-title);
    margin-top: 0;
    margin-bottom: 8px;
}

#postpaid-mazaya .ussd-header {
    background-color: var(--mz-card-hover-bg);
    color: inherit;
    border-bottom: 1px solid var(--mz-border-color) !important;
    padding: 10px 12px;
    font-weight: bold;
    text-align: center;
}

#postpaid-mazaya .ussd-box.primary .ussd-header {
    background-color: var(--mz-brand-primary);
    color: #ffffff;
}

#postpaid-mazaya .ussd-body {
    padding: 12px;
}

#postpaid-mazaya .ussd-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#postpaid-mazaya .ussd-body ul li {
    padding: 6px 0;
    border-bottom: 1px dashed var(--mz-border-color) !important;
    font-size: 13.5px;
}

#postpaid-mazaya .ussd-body ul li:last-child {
    border-bottom: none !important;
}

#postpaid-mazaya .footer-note {
    text-align: center;
    margin-top: 30px;
    font-size: 15px;
    opacity: 0.8;
    padding-top: 15px;
    border-top: 1px solid var(--mz-border-color) !important;
}

@media (max-width: 768px) {
    #postpaid-mazaya .tabs-buttons,
    #postpaid-mazaya .info-tabs-buttons {
        flex-direction: column;
    }
    #postpaid-mazaya .tab-button,
    #postpaid-mazaya .info-tab-btn {
        border-radius: 6px;
        border-left: 1px solid var(--mz-border-color) !important;
        margin-bottom: 4px;
    }
}

/* ==========================================================
   DYNAMIC THEME VARIABLES & SCOPED STYLES
   ========================================================== */

/* Dark Theme Palette (الوضع الليلي) */
#prepaid-social-stream,
#prepaid-social-stream[data-theme="dark"],
.dark #prepaid-social-stream,
.dark-mode #prepaid-social-stream {
    --pss-bg-main: radial-gradient(circle at top right, #1a0033 0%, #0d0e15 60%, #05050a 100%);
    --pss-bg-section: rgba(15, 17, 26, 0.6);
    --pss-bg-card: rgba(255, 255, 255, 0.05);
    --pss-bg-card-hover: rgba(255, 255, 255, 0.09);
    --pss-bg-platform: rgba(255, 255, 255, 0.05);
    --pss-bg-table-header: rgba(255, 255, 255, 0.03);
    --pss-bg-code-box: #000000;
    
    --pss-primary-accent: #8e24aa;
    --pss-secondary-neon: #00e5ff;
    --pss-accent-glow: #7c4dff;
    --pss-border-color: rgba(142, 36, 170, 0.3);
    --pss-border-light: rgba(255, 255, 255, 0.1);
    
    --pss-text-main: #ffffff;
    --pss-text-muted: #b0bec5;
    --pss-text-table: #e0e0e0;
    --pss-success-color: #00e676;
    
    --pss-card-code-bg: linear-gradient(135deg, rgba(74, 21, 75, 0.4), rgba(20, 20, 35, 0.6));
    --pss-title-gradient: linear-gradient(135deg, #ffffff 30%, #d1c4e9 100%);
    --pss-shadow-main: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* Light Theme Palette (الوضع النهاري - تفعيل تلقائي أو بالكلاس) */
#prepaid-social-stream[data-theme="light"],
.light #prepaid-social-stream,
.light-mode #prepaid-social-stream {
    --pss-bg-main: #ffffff;
    --pss-bg-section: #f9f9fc;
    --pss-bg-card: #ffffff;
    --pss-bg-card-hover: #f0f2f8;
    --pss-bg-platform: #eef0f6;
    --pss-bg-table-header: #eef0f8;
    --pss-bg-code-box: #1e1e2d;
    
    --pss-primary-accent: #6b21a8;
    --pss-secondary-neon: #0284c7;
    --pss-accent-glow: #6366f1;
    --pss-border-color: rgba(107, 33, 168, 0.2);
    --pss-border-light: rgba(0, 0, 0, 0.08);
    
    --pss-text-main: #0f172a;
    --pss-text-muted: #475569;
    --pss-text-table: #334155;
    --pss-success-color: #16a34a;
    
    --pss-card-code-bg: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    --pss-title-gradient: linear-gradient(135deg, #1e1b4b 30%, #4c1d95 100%);
    --pss-shadow-main: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* التكيف التلقائي مع تفضيلات المتصفح/النظام */
@media (prefers-color-scheme: light) {
    #prepaid-social-stream:not([data-theme="dark"]) {
        --pss-bg-main: #ffffff;
        --pss-bg-section: #f9f9fc;
        --pss-bg-card: #ffffff;
        --pss-bg-card-hover: #f0f2f8;
        --pss-bg-platform: #eef0f6;
        --pss-bg-table-header: #eef0f8;
        --pss-bg-code-box: #1e1e2d;
        
        --pss-primary-accent: #6b21a8;
        --pss-secondary-neon: #0284c7;
        --pss-accent-glow: #6366f1;
        --pss-border-color: rgba(107, 33, 168, 0.2);
        --pss-border-light: rgba(0, 0, 0, 0.08);
        
        --pss-text-main: #0f172a;
        --pss-text-muted: #475569;
        --pss-text-table: #334155;
        --pss-success-color: #16a34a;
        
        --pss-card-code-bg: linear-gradient(135deg, #f1f5f9, #e2e8f0);
        --pss-title-gradient: linear-gradient(135deg, #1e1b4b 30%, #4c1d95 100%);
        --pss-shadow-main: 0 10px 30px rgba(0, 0, 0, 0.08);
    }
}

/* Root Scoped Styles */
#prepaid-social-stream {
    background: var(--pss-bg-main);
    color: var(--pss-text-main);
    padding: 30px 20px 40px;
    border-radius: 24px;
    max-width: 1280px;
    margin: 0 auto;
    box-shadow: var(--pss-shadow-main);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--pss-border-light);
    direction: rtl;
    font-family: 'Cairo', sans-serif;
}

#prepaid-social-stream * {
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

#prepaid-social-stream .pss-content-relative {
    position: relative;
    z-index: 1;
}

#prepaid-social-stream .pss-header {
    text-align: center;
    margin-bottom: 45px;
}

#prepaid-social-stream .pss-badge {
    display: inline-block;
    background: linear-gradient(90deg, #7c4dff, #00e5ff);
    color: #000000;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 4px 16px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

#prepaid-social-stream .pss-title {
    font-size: 2.4rem;
    font-weight: 900;
    margin: 10px 0;

    /* 1. لون احتياطي (Fallback) في حال عدم دعم التدرج */
    color: var(--pss-primary, #0f172a); 

    /* 2. تطبيق التدرج الخلفي */
    background: var(--pss-title-gradient);

    /* 3. قَص الخلفية على مقاس حروف النص (دعم قياسي + متصفحات Kit) */
    background-clip: text;
    -webkit-background-clip: text;

    /* 4. جعل لون النص شفافاً ليظهر التدرج من خلفه */
    -webkit-text-fill-color: transparent;
}

#prepaid-social-stream .pss-subtitle {
    color: var(--pss-text-muted);
    font-size: 1.05rem;
    max-width: 750px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Sections */
#prepaid-social-stream .pss-section {
    margin-bottom: 50px;
    background: var(--pss-bg-section);
    backdrop-filter: blur(12px);
    border: 1px solid var(--pss-border-color);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

#prepaid-social-stream .pss-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    padding-bottom: 20px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--pss-border-light);
}

#prepaid-social-stream .pss-section-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

#prepaid-social-stream .pss-section-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

#prepaid-social-stream .pss-icon-social {
    background: linear-gradient(135deg, var(--pss-primary-accent), var(--pss-accent-glow));
}

#prepaid-social-stream .pss-icon-stream {
    background: linear-gradient(135deg, #ff0000, #ff5252);
}

#prepaid-social-stream .pss-section-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--pss-text-main);
    margin: 0;
}

#prepaid-social-stream .pss-platforms-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--pss-bg-card);
    padding: 8px 16px;
    border-radius: 50px;
    border: 1px solid var(--pss-border-light);
}

#prepaid-social-stream .pss-platform-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--pss-text-main);
    background: var(--pss-bg-platform);
    padding: 4px 10px;
    border-radius: 12px;
}

/* Tables */
#prepaid-social-stream .pss-table-wrapper {
    overflow-x: auto;
    border-radius: 14px;
}

#prepaid-social-stream table.pss-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    text-align: right;
}

#prepaid-social-stream table.pss-table th {
    background: var(--pss-bg-table-header);
    color: var(--pss-secondary-neon);
    padding: 14px 18px;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
}

#prepaid-social-stream table.pss-table th:first-child { border-radius: 0 10px 10px 0; }
#prepaid-social-stream table.pss-table th:last-child { border-radius: 10px 0 0 10px; }

#prepaid-social-stream table.pss-table tbody tr {
    background: var(--pss-bg-card);
}

#prepaid-social-stream table.pss-table tbody tr:hover {
    background: var(--pss-bg-card-hover);
    transform: scale(1.002);
}

#prepaid-social-stream table.pss-table td {
    padding: 16px 18px;
    font-size: 0.95rem;
    color: var(--pss-text-table);
    vertical-align: middle;
    border-top: 1px solid var(--pss-border-light);
    border-bottom: 1px solid var(--pss-border-light);
}

#prepaid-social-stream table.pss-table td:first-child {
    border-radius: 0 12px 12px 0;
    border-right: 1px solid var(--pss-border-light);
    font-weight: 700;
    color: var(--pss-text-main);
}

#prepaid-social-stream table.pss-table td:last-child {
    border-radius: 12px 0 0 12px;
    border-left: 1px solid var(--pss-border-light);
}

#prepaid-social-stream .pss-code-badge {
    display: inline-block;
    background: rgba(0, 229, 255, 0.1);
    color: var(--pss-secondary-neon);
    border: 1px dashed var(--pss-secondary-neon);
    padding: 4px 10px;
    border-radius: 8px;
    font-family: monospace;
    font-weight: bold;
    font-size: 0.95rem;
    direction: ltr;
}

#prepaid-social-stream .pss-price-inc b {
    color: var(--pss-success-color);
    font-size: 1rem;
}

/* Codes Grid & Flow Section */
#prepaid-social-stream .pss-codes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

#prepaid-social-stream .pss-code-card {
    background: var(--pss-card-code-bg);
    border: 1px solid var(--pss-border-color);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
}

#prepaid-social-stream .pss-code-card h4 {
    margin-bottom: 10px;
    font-size: 1.05rem;
    color: var(--pss-text-main);
}

#prepaid-social-stream .pss-code-box {
    background: var(--pss-bg-code-box);
    color: var(--pss-secondary-neon);
    font-size: 1.4rem;
    font-weight: 800;
    padding: 10px 20px;
    border-radius: 10px;
    letter-spacing: 2px;
    display: inline-block;
    margin-top: 5px;
    border: 1px solid var(--pss-border-color);
    direction: ltr;
}

#prepaid-social-stream .pss-flow-container {
    margin-top: 50px;
    background: var(--pss-bg-section);
    border-radius: 20px;
    padding: 30px;
    border: 1px solid var(--pss-border-light);
}

#prepaid-social-stream .pss-flow-title {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 25px;
    color: var(--pss-text-main);
}

#prepaid-social-stream .pss-flow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

#prepaid-social-stream .pss-flow-card {
    background: var(--pss-bg-card);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid var(--pss-border-light);
}

#prepaid-social-stream .pss-flow-card h5 {
    color: var(--pss-secondary-neon);
    font-size: 1rem;
    margin-bottom: 15px;
    text-align: center;
}

#prepaid-social-stream .pss-flow-steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#prepaid-social-stream .pss-flow-step {
    width: 85%;
    background: var(--pss-bg-platform);
    border: 1px solid var(--pss-border-light);
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--pss-text-main);
}

#prepaid-social-stream .pss-step-high { background: rgba(0, 230, 118, 0.15); border-color: var(--pss-success-color); }
#prepaid-social-stream .pss-step-low { background: rgba(255, 235, 59, 0.15); border-color: #f59e0b; }
#prepaid-social-stream .pss-step-social { border-color: var(--pss-secondary-neon); color: var(--pss-secondary-neon); }
#prepaid-social-stream .pss-step-stream { border-color: #ff5252; color: #ff5252; }

#prepaid-social-stream .pss-flow-arrow {
    color: var(--pss-text-muted);
    font-size: 1.2rem;
}

/* Terms */
#prepaid-social-stream .pss-terms {
    margin-top: 40px;
    background: var(--pss-bg-section);
    border-radius: 16px;
    padding: 25px;
    border-right: 4px solid var(--pss-primary-accent);
}

#prepaid-social-stream .pss-terms h3 {
    font-size: 1.2rem;
    color: var(--pss-text-main);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#prepaid-social-stream .pss-terms ul {
    padding-right: 20px;
    color: var(--pss-text-muted);
    font-size: 0.92rem;
    line-height: 1.8;
}

#prepaid-social-stream .pss-terms ul li {
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    #prepaid-social-stream .pss-title { font-size: 1.8rem; }
    #prepaid-social-stream .pss-section-header { flex-direction: column; align-items: flex-start; }
    #prepaid-social-stream table.pss-table th, 
    #prepaid-social-stream table.pss-table td { padding: 10px 12px; font-size: 0.85rem; }
}
 /* =========================================================
             intercal
       ========================================================= */
/* جميع التنسيقات محصورة بالكامل داخل المعرف الفريد للمكون */
#international-call {
    font-family: 'Cairo', 'Tajawal', Arial, sans-serif;
    margin: 12px auto;
    max-width: 1200px;
    padding: 8px;
    background: transparent;
    color: var(--text-main, #0f172a);
    direction: rtl;
}

#international-call .component-title {
    text-align: center;
    color: var(--primary-purple, #7c3aed);
    margin-bottom: 18px;
    font-size: 1.7rem;
    font-weight: 900;
}

#international-call .search-container {
    text-align: center;
    margin-bottom: 16px;
}

#international-call .search-container .search-input {
    padding: 12px 16px;
    width: 70%;
    max-width: 420px;
    border: 1px solid rgba(124,58,237,0.25);
    border-radius: 12px;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
    background: var(--card-bg, #fff);
    color: var(--text-main, #0f172a);
    font-family: inherit;
}

#international-call .search-container .search-input:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.15);
}

#international-call .tariff-table-wrap {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid rgba(124,58,237,0.15);
    box-shadow: 0 4px 18px rgba(15,23,42,0.06);
}

#international-call .tariff-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
    background-color: var(--card-bg, #fff);
    min-width: 900px;
}

#international-call .tariff-table th,
#international-call .tariff-table td {
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid rgba(15,23,42,0.06);
    font-size: 0.88rem;
}

#international-call .tariff-table th {
    background: linear-gradient(135deg, #5b21b6, #7c3aed);
    color: #fff;
    font-weight: 800;
    position: sticky;
    top: 0;
    z-index: 2;
    white-space: nowrap;
}

#international-call .tariff-table td {
    background-color: transparent;
    color: var(--text-main, #0f172a);
    font-weight: 600;
}

#international-call .tariff-table tbody tr:nth-child(even) td {
    background: rgba(124,58,237,0.04);
}

#international-call .tariff-table tr:hover td {
    background-color: rgba(124,58,237,0.1);
}

#international-call .tariff-table tr.hide {
    display: none;
}

[data-theme="dark"] #international-call {
    color: #e2e8f0;
}
[data-theme="dark"] #international-call .component-title {
    color: #c4b5fd;
}
[data-theme="dark"] #international-call .search-container .search-input {
    background: #1e293b;
    border-color: rgba(167,139,250,0.3);
    color: #e2e8f0;
}
[data-theme="dark"] #international-call .tariff-table-wrap {
    border-color: rgba(167,139,250,0.2);
}
[data-theme="dark"] #international-call .tariff-table {
    background: #1e293b;
}
[data-theme="dark"] #international-call .tariff-table td {
    color: #e2e8f0;
    border-bottom-color: rgba(148,163,184,0.12);
}
[data-theme="dark"] #international-call .tariff-table tbody tr:nth-child(even) td {
    background: rgba(124,58,237,0.12);
}
[data-theme="dark"] #international-call .tariff-table tr:hover td {
    background: rgba(124,58,237,0.22);
}


/*    intersms */
/* جميع التنسيقات معزولة تماماً تحت الحاوية الفريدة للمكون */
#international-sms {
    font-family: 'Cairo', 'Tajawal', Arial, sans-serif;
    margin: 12px auto;
    max-width: 960px;
    padding: 8px;
    background: transparent;
    color: var(--text-main, #0f172a);
    direction: rtl;
}

#international-sms .component-title {
    text-align: center;
    color: var(--primary-purple, #7c3aed);
    margin-bottom: 10px;
    font-size: 1.7rem;
    font-weight: 900;
}

#international-sms .search-container {
    text-align: center;
    margin-bottom: 16px;
}

#international-sms .search-container .search-input {
    padding: 12px 16px;
    width: 70%;
    max-width: 420px;
    border: 1px solid rgba(124,58,237,0.25);
    border-radius: 12px;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
    background: var(--card-bg, #fff);
    color: var(--text-main, #0f172a);
    font-family: inherit;
}

#international-sms .search-container .search-input:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.15);
}

#international-sms .tariff-table-wrap {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid rgba(124,58,237,0.15);
    box-shadow: 0 4px 18px rgba(15,23,42,0.06);
}

#international-sms .tariff-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
    background-color: var(--card-bg, #fff);
    min-width: 640px;
}

#international-sms .tariff-table th,
#international-sms .tariff-table td {
    padding: 11px 10px;
    text-align: center;
    border-bottom: 1px solid rgba(15,23,42,0.06);
    font-size: 0.9rem;
}

#international-sms .tariff-table th {
    background: linear-gradient(135deg, #5b21b6, #7c3aed);
    color: #fff;
    font-weight: 800;
    position: sticky;
    top: 0;
    z-index: 2;
    white-space: nowrap;
}

#international-sms .tariff-table td {
    background-color: transparent;
    color: var(--text-main, #0f172a);
    font-weight: 600;
}

#international-sms .tariff-table tbody tr:nth-child(even) td {
    background: rgba(124,58,237,0.04);
}

#international-sms .tariff-table tr:hover td {
    background-color: rgba(124,58,237,0.1);
}

#international-sms .tariff-table tr.hide {
    display: none;
}

[data-theme="dark"] #international-sms {
    color: #e2e8f0;
}
[data-theme="dark"] #international-sms .component-title {
    color: #c4b5fd;
}
[data-theme="dark"] #international-sms .search-container .search-input {
    background: #1e293b;
    border-color: rgba(167,139,250,0.3);
    color: #e2e8f0;
}
[data-theme="dark"] #international-sms .tariff-table-wrap {
    border-color: rgba(167,139,250,0.2);
}
[data-theme="dark"] #international-sms .tariff-table {
    background: #1e293b;
}
[data-theme="dark"] #international-sms .tariff-table td {
    color: #e2e8f0;
    border-bottom-color: rgba(148,163,184,0.12);
}
[data-theme="dark"] #international-sms .tariff-table tbody tr:nth-child(even) td {
    background: rgba(124,58,237,0.12);
}
[data-theme="dark"] #international-sms .tariff-table tr:hover td {
    background: rgba(124,58,237,0.22);
}


/*     زين الشير */
/* 1. إخفاء المكون افتراضياً لعدم الظهور في الصفحة الرئيسية */
.zain-share-wrapper {
      color: var(--text-main);
      direction: rtl;
      line-height: 1.5;
      font-size: 15px;
      width: 100%;
      box-sizing: border-box;
    }

    .zain-share-wrapper .zain-header-banner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 25px;
      background: var(--card-bg);
      border-radius: 12px;
      border: 1px solid var(--border-color);
      margin-bottom: 25px;
      box-shadow: var(--shadow-sm);
    }

    .zain-share-wrapper .logo-area {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .zain-share-wrapper .logo-badge {
      background: var(--purple-gradient);
      color: #fff;
      font-weight: 800;
      padding: 8px 16px;
      border-radius: 10px;
      font-size: 1.2rem;
      box-shadow: 0 4px 15px rgba(124, 58, 237, 0.2);
    }

    .zain-share-wrapper .page-title {
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--text-main);
    }

    .zain-share-wrapper .ussd-banner {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 15px;
      margin-bottom: 30px;
    }

    .zain-share-wrapper .ussd-card {
      background: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }

    .zain-share-wrapper .ussd-card::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 4px;
      height: 100%;
      background: var(--primary-purple);
    }

    .zain-share-wrapper .ussd-info h4 {
      font-size: 0.95rem;
      color: var(--text-muted);
      margin-bottom: 5px;
    }

    .zain-share-wrapper .ussd-info .code {
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--primary-purple);
      letter-spacing: 1px;
      direction: ltr;
      text-align: right;
    }

    .zain-share-wrapper .ussd-badge {
      background: var(--primary-purple);
      color: white;
      width: 45px;
      height: 45px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
    }

    .zain-share-wrapper .sub-tab-nav {
      display: flex;
      gap: 10px;
      border-bottom: 2px solid var(--border-color);
      margin-bottom: 25px;
      overflow-x: auto;
      padding-bottom: 5px;
    }

    .zain-share-wrapper .sub-tab-btn {
      background: transparent;
      border: none;
      color: var(--text-muted);
      padding: 12px 24px;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      border-radius: 10px 10px 0 0;
      position: relative;
      white-space: nowrap;
      transition: all 0.3s;
    }

    .zain-share-wrapper .sub-tab-btn:hover {
      color: var(--primary-purple);
    }

    .zain-share-wrapper .sub-tab-btn.active {
      color: var(--primary-purple);
      background: var(--purple-light);
    }

    .zain-share-wrapper .sub-tab-btn.active::after {
      content: '';
      position: absolute;
      bottom: -7px;
      left: 0;
      width: 100%;
      height: 3px;
      background: var(--primary-purple);
      border-radius: 3px;
    }

    .zain-share-wrapper .sub-tab-content {
      display: none;
      animation: fadeIn 0.4s ease-in-out forwards;
    }

    .zain-share-wrapper .sub-tab-content.active {
      display: block;
    }

    .zain-share-wrapper .filter-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 15px;
      margin-bottom: 20px;
    }

    .zain-share-wrapper .search-box {
      position: relative;
      flex: 1;
      min-width: 250px;
    }

    .zain-share-wrapper .search-box input {
      width: 100%;
      padding: 12px 40px 12px 15px;
      background: var(--bg-color);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      color: var(--text-main);
      outline: none;
      font-size: 0.95rem;
    }

    .zain-share-wrapper .search-box input:focus {
      border-color: var(--primary-purple);
      box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
    }

    .zain-share-wrapper .search-box i {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-muted);
    }

    .zain-share-wrapper .table-responsive {
      overflow-x: auto;
      background: var(--card-bg);
      border-radius: 12px;
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow-sm);
    }

    .zain-share-wrapper table {
      width: 100%;
      border-collapse: collapse;
    }

    .zain-share-wrapper th {
      background: var(--purple-light);
      color: var(--primary-purple);
      padding: 16px 20px;
      font-size: 0.95rem;
      font-weight: 800;
      border-bottom: 1px solid var(--border-color);
      white-space: nowrap;
      text-align: center !important;
    }

    .zain-share-wrapper td {
      padding: 16px 20px;
      border-bottom: 1px solid var(--border-color);
      font-size: 0.95rem;
      vertical-align: middle;
      text-align: center !important;
      color: var(--text-main);
    }

    .zain-share-wrapper tr:last-child td {
      border-bottom: none;
    }

    .zain-share-wrapper tr:hover td {
      background: rgba(124, 58, 237, 0.02);
    }

    .zain-share-wrapper .badge-duration {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: 700;
    }

    .zain-share-wrapper .duration-day { background: rgba(2, 132, 199, 0.1); color: var(--accent-cyan); }
    .zain-share-wrapper .duration-week { background: rgba(219, 39, 119, 0.1); color: var(--accent-pink); }
    .zain-share-wrapper .duration-month { background: rgba(16, 185, 129, 0.1); color: var(--accent-green); }

    .zain-share-wrapper .app-icons {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
    }

    .zain-share-wrapper .app-tag {
      background: var(--bg-color);
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 0.8rem;
      display: flex;
      align-items: center;
      gap: 6px;
      border: 1px solid var(--border-color);
      color: var(--text-main);
    }

    .zain-share-wrapper .units-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
      margin-bottom: 25px;
    }

    .zain-share-wrapper .unit-card {
      background: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 20px;
      text-align: center;
      position: relative;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: all 0.3s;
    }

    .zain-share-wrapper .unit-card:hover {
      transform: translateY(-5px);
      border-color: var(--primary-purple);
    }

    .zain-share-wrapper .unit-icon {
      font-size: 2rem;
      color: var(--primary-purple);
      margin-bottom: 10px;
    }

    .zain-share-wrapper .unit-value {
      font-size: 1.4rem;
      font-weight: 800;
      margin-bottom: 5px;
      color: var(--text-main);
    }

    .zain-share-wrapper .unit-label {
      color: var(--text-muted);
      font-size: 0.85rem;
    }

    .zain-share-wrapper .ussd-section-title {
      background: var(--purple-gradient);
      color: #fff;
      padding: 10px 18px;
      border-radius: 10px;
      font-size: 1.1rem;
      font-weight: 800;
      margin: 30px 0 15px 0;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
    }

    .zain-share-wrapper .flow-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin-bottom: 20px;
    }

    .zain-share-wrapper .phone-mockup {
      background: #1e293b;
      border: 2px solid #cbd5e1;
      border-radius: 20px;
      padding: 14px;
      box-shadow: 0 8px 18px rgba(0,0,0,0.08);
      position: relative;
      display: flex;
      flex-direction: column;
    }

    .zain-share-wrapper .phone-screen {
      background: #0f172a;
      border-radius: 12px;
      padding: 14px;
      color: #fff;
      font-family: monospace;
      min-height: 180px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
    }

    .zain-share-wrapper .screen-text {
      font-size: 0.85rem;
      line-height: 1.6;
      white-space: pre-line;
      color: #e2e8f0;
      text-align: right;
      direction: rtl;
    }

    .zain-share-wrapper .screen-input-box {
      background: #334155;
      border: 1px solid #475569;
      border-radius: 6px;
      height: 28px;
      margin: 10px 0 6px 0;
      display: flex;
      align-items: center;
      padding: 0 8px;
      color: #38bdf8;
      font-size: 0.85rem;
      direction: ltr;
    }

    .zain-share-wrapper .screen-actions {
      border-top: 1px solid #334155;
      padding-top: 8px;
      display: flex;
      justify-content: space-between;
      font-size: 0.8rem;
      color: #94a3b8;
    }

    .zain-share-wrapper .priority-flow {
      background: var(--card-bg);
      border-radius: 12px;
      border: 1px solid var(--border-color);
      padding: 30px;
      margin-top: 25px;
      box-shadow: var(--shadow-sm);
    }

    .zain-share-wrapper .flow-step {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 15px;
      position: relative;
    }

    .zain-share-wrapper .flow-step:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 20px;
      top: 40px;
      width: 2px;
      height: 20px;
      background: var(--primary-purple);
      opacity: 0.3;
    }

    .zain-share-wrapper .step-num {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--primary-purple);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      z-index: 1;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
    }

    .zain-share-wrapper .step-content {
      background: var(--bg-color);
      border: 1px solid var(--border-color);
      padding: 12px 20px;
      border-radius: 10px;
      flex: 1;
      color: var(--text-main);
    }

/* ==========================================================================
   Hajj Roaming Specific Styles
   جميع الكلاسات محصورة داخل #hajj-roaming ومبدوءة بـ hajj-roaming-
   ========================================================================== */

  
/* Variables & Fallbacks */


#hajj-roaming.hajj-roaming-wrapper {
  --hajj-bg: #ffffff;
  --hajj-text: #1f2937;
  --hajj-primary: #6b21a8;
  --hajj-border: #e5e7eb;
  --hajj-accent: rgba(0, 0, 0, 0.02);
  --hajj-hover: rgba(107, 33, 168, 0.08);
  --hajj-code-bg: #f3f4f6;

  background-color: system-ui(--hajj-bg);
  color: system-ui(--hajj-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  direction: rtl;
  text-align: right;
  max-width: 1000px;
  margin: 0 auto;
}

/* Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
  #hajj-roaming.hajj-roaming-wrapper {
    --hajj-bg: #1e1e2e;
    --hajj-text: #cdd6f4;
    --hajj-primary: #9217ea;
    --hajj-border: #313244;
    --hajj-accent: rgba(255, 255, 255, 0.04);
    --hajj-hover: rgba(203, 166, 247, 0.15);
    --hajj-code-bg: #9217ea;
  }
}

.dark #hajj-roaming.hajj-roaming-wrapper,
#hajj-roaming.hajj-roaming-wrapper.dark {
  --hajj-bg: #1e1e2e;
  --hajj-text: #cdd6f4;
  --hajj-primary: #cba6f7;
  --hajj-border: #313244;
  --hajj-accent: rgba(255, 255, 255, 0.04);
  --hajj-hover: rgba(203, 166, 247, 0.15);
  --hajj-code-bg: #11111b;
}

/* Header & Typography */
#hajj-roaming .hajj-roaming-header {
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--hajj-border);
  padding-bottom: 1rem;
}

#hajj-roaming .hajj-roaming-title {
  color: var(--hajj-primary);
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0.75rem;
}

#hajj-roaming .hajj-roaming-description {
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

#hajj-roaming .hajj-roaming-info-list {
  padding-right: 1.25rem;
  line-height: 1.7;
  margin: 0;
}

#hajj-roaming .hajj-roaming-info-list ul {
  padding-right: 1.25rem;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}

/* Navigation & Sub-Tabs */
#hajj-roaming .hajj-roaming-tabs-nav {
  display: flex;
  gap: 0.5rem;
  border-bottom: 2px solid var(--hajj-border);
  margin-bottom: 1.5rem;
}

#hajj-roaming .hajj-roaming-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--hajj-text);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

#hajj-roaming .hajj-roaming-tab-btn:hover {
  color: var(--hajj-primary);
}

#hajj-roaming .hajj-roaming-tab-btn.hajj-roaming-tab-active {
  border-bottom-color: var(--hajj-primary);
  color: var(--hajj-primary);
  background-color: var(--hajj-hover);
  border-radius: 6px 6px 0 0;
}

/* Tab Contents & Animation */
#hajj-roaming .hajj-roaming-tab-content {
  display: none;
  animation: hajjRoamingFadeIn 0.3s ease;
}

#hajj-roaming .hajj-roaming-tab-content.hajj-roaming-content-active {
  display: block;
}

/* Tables */
#hajj-roaming .hajj-roaming-table-container {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--hajj-border);
}

#hajj-roaming .hajj-roaming-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

#hajj-roaming .hajj-roaming-table th {
  background-color: var(--hajj-primary);
  color: #ffffff;
  padding: 0.85rem 1rem;
  font-weight: 600;
}

#hajj-roaming .hajj-roaming-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--hajj-border);
}

#hajj-roaming .hajj-roaming-table tbody tr:nth-child(even) {
  background-color: var(--hajj-accent);
}

#hajj-roaming .hajj-roaming-table tbody tr:hover {
  background-color: var(--hajj-hover);
}

#hajj-roaming .hajj-roaming-code-badge {
  background-color: var(--hajj-code-bg);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-family: monospace;
  font-weight: bold;
}

/* Terms & Extra Sections */
#hajj-roaming .hajj-roaming-units-box {
  margin-bottom: 1.5rem;
}

#hajj-roaming .hajj-roaming-sub-title {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: var(--hajj-primary);
}

#hajj-roaming .hajj-roaming-terms {
  margin-top: 1rem;
  padding: 1rem;
  background-color: var(--hajj-accent);
  border-radius: 8px;
  line-height: 1.8;
  font-weight: 500;
  border: 1px solid var(--hajj-border);
}

#hajj-roaming .hajj-roaming-terms p {
  margin: 0.25rem 0;
}

#hajj-roaming .hajj-roaming-icon {
  flex-shrink: 0;
}

@keyframes hajjRoamingFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Variables & Fallbacks */
/* =========================================================
       8. تنسيقات بوابات وتسجيل الأنظمة التشغيلية المدمجة
       ========================================================= */
    #tab-login-portal {
      padding: 0 !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
    }

    #login-portal-wrapper {
      --lp-primary: #7c3aed;
      --lp-primary-glow: rgba(124, 58, 237, 0.4);
      --lp-accent: #06b6d4;
      --lp-bg: #090d16;
      --lp-card-bg: rgba(15, 23, 42, 0.75);
      --lp-text-main: #f8fafc;
      --lp-text-muted: #94a3b8;
      --lp-border: rgba(255, 255, 255, 0.12);
      --lp-radius: 28px;

      font-family: 'Tajawal', sans-serif;
      min-height: 80vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      box-sizing: border-box;
      background-color: var(--lp-bg);
      position: relative;
      overflow: hidden;
      border-radius: 20px;
    }

    #login-portal-wrapper *, 
    #login-portal-wrapper *::before, 
    #login-portal-wrapper *::after {
      box-sizing: border-box;
    }

    #login-portal-wrapper::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
      background-size: 40px 40px;
      pointer-events: none;
      z-index: 1;
    }

    #login-portal-wrapper .lp-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      opacity: 0.5;
      animation: lpBlobFloat 12s infinite alternate ease-in-out;
      pointer-events: none;
      z-index: 1;
    }

    #login-portal-wrapper .lp-blob-1 {
      top: -15%;
      right: -10%;
      width: 450px;
      height: 450px;
      background: radial-gradient(circle, #7c3aed 0%, #4c1d95 100%);
    }

    #login-portal-wrapper .lp-blob-2 {
      bottom: -15%;
      left: -10%;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, #0284c7 0%, #0f172a 100%);
      animation-delay: -6s;
    }

    @keyframes lpBlobFloat {
      0% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(30px, 40px) scale(1.1); }
      100% { transform: translate(-20px, 20px) scale(0.95); }
    }

    .lp-card {
      position: relative;
      z-index: 10;
      width: 100%;
      max-width: 450px;
      background: var(--lp-card-bg);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: var(--lp-radius);
      padding: 48px 40px;
      box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.7);
      animation: lpScaleUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      overflow: hidden;
    }

    .lp-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--lp-radius);
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.03), var(--lp-primary-glow));
  
  /* البادئة الخاصة بـ WebKit */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;

  /* الخاصية القياسية لمنع تحذيرات المحرر ودعم المتصفحات الحديثة */
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;

  pointer-events: none;
}

    @keyframes lpScaleUp {
      from { opacity: 0; transform: scale(0.9) translateY(30px); }
      to { opacity: 1; transform: scale(1) translateY(0); }
    }

    .lp-brand-header {
      text-align: center;
      margin-bottom: 34px;
    }

    .lp-icon-circle {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), rgba(6, 182, 212, 0.15));
      border: 1px solid rgba(255, 255, 255, 0.18);
      color: #c4b5fd;
      border-radius: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      box-shadow: 0 12px 25px -5px rgba(124, 58, 237, 0.3);
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .lp-card:hover .lp-icon-circle {
      transform: translateY(-5px) scale(1.05);
      box-shadow: 0 18px 30px -5px rgba(124, 58, 237, 0.5);
      color: #ffffff;
    }

    .lp-title {
      font-size: 1.75rem;
      font-weight: 900;
      color: var(--lp-text-main);
      margin-bottom: 8px;
      letter-spacing: -0.5px;
    }

    .lp-subtitle {
      font-size: 0.92rem;
      color: var(--lp-text-muted);
      line-height: 1.5;
    }

    .lp-form-group {
      margin-bottom: 22px;
    }

    .lp-label {
      display: block;
      font-size: 0.88rem;
      font-weight: 700;
      color: #cbd5e1;
      margin-bottom: 8px;
    }

    .lp-input-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }

    .lp-input-icon {
      position: absolute;
      right: 16px;
      color: #64748b;
      transition: all 0.25s ease;
      pointer-events: none;
    }

    .lp-input {
      width: 100%;
      padding: 14px 48px 14px 48px;
      border: 1.5px solid var(--lp-border);
      border-radius: 16px;
      background: rgba(15, 23, 42, 0.65);
      color: var(--lp-text-main);
      font-size: 0.95rem;
      font-family: inherit;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .lp-input::placeholder {
      color: #475569;
    }

    .lp-input:focus {
      outline: none;
      border-color: #8b5cf6;
      background: rgba(15, 23, 42, 0.9);
      box-shadow: 0 0 20px rgba(139, 92, 246, 0.25);
    }

    .lp-input-wrap:focus-within .lp-input-icon {
      color: #c4b5fd;
      transform: scale(1.1);
    }

    .lp-toggle-pwd {
      position: absolute;
      left: 12px;
      background: transparent;
      border: none;
      color: #64748b;
      cursor: pointer;
      padding: 8px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      transition: all 0.2s;
    }

    .lp-toggle-pwd:hover {
      color: #c4b5fd;
      background: rgba(255, 255, 255, 0.08);
    }

    .lp-btn-submit {
      width: 100%;
      padding: 15px;
      background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
      color: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 16px;
      font-size: 1.05rem;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 12px;
      box-shadow: 0 10px 25px -5px rgba(124, 58, 237, 0.5);
      position: relative;
      overflow: hidden;
    }

    .lp-btn-submit:hover {
      background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
      transform: translateY(-2px);
      box-shadow: 0 16px 30px -5px rgba(124, 58, 237, 0.6);
    }

    .lp-btn-submit:active {
      transform: translateY(0);
    }

    .lp-progress-line {
      position: absolute;
      top: 0;
      left: 0;
      height: 3px;
      background: linear-gradient(90deg, #7c3aed, #06b6d4);
      width: 0%;
      transition: width 0.4s ease;
    }

    .lp-error-alert {
      background: rgba(239, 68, 68, 0.12);
      border: 1px solid rgba(239, 68, 68, 0.35);
      color: #fca5a5;
      padding: 12px 16px;
      border-radius: 12px;
      font-size: 0.88rem;
      font-weight: 600;
      margin-bottom: 22px;
      display: none;
      align-items: center;
      gap: 10px;
      animation: lpFadeAlert 0.3s ease;
    }

    @keyframes lpFadeAlert {
      from { opacity: 0; transform: translateY(-8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .lp-shake {
      animation: lpShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    }

    @keyframes lpShake {
      10%, 90% { transform: translate3d(-2px, 0, 0); }
      20%, 80% { transform: translate3d(3px, 0, 0); }
      30%, 50%, 70% { transform: translate3d(-5px, 0, 0); }
      40%, 60% { transform: translate3d(5px, 0, 0); }
    }

    .lp-spinner {
      width: 20px;
      height: 20px;
      border: 2.5px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: #fff;
      animation: lpSpin 0.7s linear infinite;
      display: none;
    }

    @keyframes lpSpin {
      to { transform: rotate(360deg); }
    }

    /* Systems Dashboard Inside Tab */
    #systems-dashboard {
      --sd-primary: #5c2d91;
      --sd-primary-hover: #4a2377;
      --sd-primary-light: rgba(92, 45, 145, 0.08);
      --sd-primary-border: rgba(92, 45, 145, 0.2);
      --sd-bg: var(--bg-color);
      --sd-card-bg: var(--card-bg);
      --sd-text-main: var(--text-main);
      --sd-text-muted: var(--text-muted);
      --sd-border: var(--border-color);
      --sd-radius: 16px;
      --sd-radius-sm: 8px;
      --sd-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
      --sd-shadow-hover: 0 20px 25px -5px rgba(92, 45, 145, 0.12);
      --sd-badge-bg: rgba(0,0,0,0.05);
      
      font-family: 'Tajawal', sans-serif;
      background-color: var(--sd-bg);
      color: var(--sd-text-main);
      padding: 28px;
      border-radius: var(--sd-radius);
      box-shadow: var(--sd-shadow);
      line-height: 1.6;
      box-sizing: border-box;
      display: none;
      animation: lpScaleUp 0.4s ease-out;
    }

    [data-theme="dark"] #systems-dashboard {
      --sd-primary: #9d5ce5;
      --sd-primary-hover: #b17bf2;
      --sd-primary-light: rgba(157, 92, 229, 0.15);
      --sd-primary-border: rgba(157, 92, 229, 0.3);
      --sd-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
      --sd-badge-bg: rgba(255,255,255,0.05);
    }

    #systems-dashboard .sd-header {
      background: linear-gradient(135deg, var(--sd-card-bg) 0%, var(--sd-primary-light) 100%);
      border: 1px solid var(--sd-primary-border);
      padding: 24px;
      border-radius: var(--sd-radius);
      margin-bottom: 28px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
    }

    #systems-dashboard .sd-header::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 6px;
      height: 100%;
      background: var(--sd-primary);
    }

    #systems-dashboard .sd-title {
      color: var(--sd-primary);
      font-size: 1.6rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 6px;
    }

    #systems-dashboard .sd-subtitle {
      color: var(--sd-text-muted);
      font-size: 0.95rem;
    }

    #systems-dashboard .sd-logout-btn {
      background: rgba(239, 68, 68, 0.1);
      color: #ef4444;
      border: 1px solid rgba(239, 68, 68, 0.2);
      padding: 8px 16px;
      border-radius: var(--sd-radius-sm);
      font-size: 0.88rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    #systems-dashboard .sd-logout-btn:hover {
      background: #ef4444;
      color: #ffffff;
    }

    #systems-dashboard .sd-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
      gap: 20px;
    }

    #systems-dashboard .sd-card {
      background: var(--sd-card-bg);
      border: 1px solid var(--sd-border);
      border-radius: var(--sd-radius);
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: all 0.25s ease;
      box-shadow: var(--sd-shadow);
    }

    #systems-dashboard .sd-card:hover {
      transform: translateY(-4px);
      border-color: var(--sd-primary-border);
      box-shadow: var(--sd-shadow-hover);
    }

    #systems-dashboard .sd-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--sd-border);
    }

    #systems-dashboard .sd-system-name {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--sd-primary);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    #systems-dashboard .sd-link-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--sd-primary);
      color: #ffffff;
      text-decoration: none;
      padding: 8px 14px;
      border-radius: var(--sd-radius-sm);
      font-size: 0.85rem;
      font-weight: 600;
      transition: background 0.2s;
    }

    #systems-dashboard .sd-link-btn:hover {
      background: var(--sd-primary-hover);
    }

    #systems-dashboard .sd-url-display {
      direction: ltr;
      text-align: left;
      font-family: Consolas, Monaco, monospace;
      font-size: 0.82rem;
      color: var(--sd-text-muted);
      word-break: break-all;
      background: var(--sd-badge-bg);
      padding: 8px 12px;
      border-radius: 6px;
      margin-bottom: 14px;
      display: block;
    }

    #systems-dashboard .sd-credentials {
      display: flex;
      flex-direction: column;
      gap: 8px;
      background: var(--sd-bg);
      padding: 12px;
      border-radius: var(--sd-radius-sm);
      border: 1px dashed var(--sd-border);
    }

    #systems-dashboard .sd-cred-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.88rem;
    }

    #systems-dashboard .sd-cred-label {
      color: var(--sd-text-muted);
      font-weight: 600;
    }

    #systems-dashboard .sd-cred-value-wrap {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    #systems-dashboard .sd-cred-value {
      direction: ltr;
      font-family: Consolas, Monaco, monospace;
      font-weight: 700;
      color: var(--sd-text-main);
      background: var(--sd-card-bg);
      padding: 2px 8px;
      border-radius: 4px;
      border: 1px solid var(--sd-border);
      font-size: 0.9rem;
    }

    #systems-dashboard .sd-copy-icon-btn {
      background: transparent;
      border: none;
      color: var(--sd-text-muted);
      cursor: pointer;
      padding: 4px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      transition: all 0.2s;
    }

    #systems-dashboard .sd-copy-icon-btn:hover {
      color: var(--sd-primary);
      background: var(--sd-primary-light);
    }

    #systems-dashboard .sd-notice {
      background: rgba(234, 88, 12, 0.08);
      border-right: 3px solid #ea580c;
      color: var(--sd-text-main);
      padding: 10px 12px;
      border-radius: 4px;
      font-size: 0.83rem;
      margin-top: 8px;
      line-height: 1.5;
    }

    #systems-dashboard .sd-notice strong {
      color: #ea580c;
    }

    .sd-toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(100px);
      background: #0f172a;
      color: #ffffff;
      padding: 10px 22px;
      border-radius: 30px;
      font-size: 0.88rem;
      box-shadow: 0 10px 25px rgba(0,0,0,0.3);
      opacity: 0;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 9999;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .sd-toast.show {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }
/* =========================================================
   تنسيقات خدمة لحن (RBT) - معزولة تماماً ومتوافقة مع الثيمات
   ========================================================= */

/* 1. القيم الافتراضية (الوضع الداكن Dark Mode) */
#rbt-packages {
  --rbt-primary: #6366f1;
  --rbt-primary-hover: #4f46e5;
  --rbt-accent: #38bdf8;
  --rbt-bg: #0d131f;
  --rbt-card-bg: #161f30;
  --rbt-card-hover: #1e2a40;
  --rbt-border: #243248;
  --rbt-text-main: #f8fafc;
  --rbt-text-sub: #94a3b8;
  --rbt-code-bg: rgba(56, 189, 248, 0.12);
  --rbt-code-text: #38bdf8;
  --rbt-table-header: #111827;
  --rbt-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);

  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--rbt-text-main);
  direction: rtl;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* 2. التحول للوضع النهاري (Light Mode) عند تفعيله في أي مكان في الموقع */
[data-theme="light"] #rbt-packages,
.light-theme #rbt-packages,
.light #rbt-packages,
body.light #rbt-packages,
body.light-theme #rbt-packages {
  --rbt-primary: #4f46e5;
  --rbt-primary-hover: #4338ca;
  --rbt-accent: #0284c7;
  --rbt-bg: #f3f4f6;
  --rbt-card-bg: #ffffff;
  --rbt-card-hover: #f9fafb;
  --rbt-border: #e5e7eb;
  --rbt-text-main: #111827;
  --rbt-text-sub: #4b5563;
  --rbt-code-bg: rgba(2, 132, 199, 0.08);
  --rbt-code-text: #0284c7;
  --rbt-table-header: #f9fafb;
  --rbt-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

/* باقي التنسيقات الخاصة بالقسم فقط */
#rbt-packages .rbt-main-container {
  background-color: var(--rbt-bg);
  border-radius: 20px;
  padding: 30px;
  border: 1px solid var(--rbt-border);
  box-shadow: var(--rbt-shadow);
  position: relative;
}

#rbt-packages .rbt-header {
  margin-bottom: 24px;
}

#rbt-packages .rbt-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

#rbt-packages .rbt-header-title h2 {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--rbt-text-main);
}

#rbt-packages .rbt-badge-futuristic {
  background: var(--rbt-primary);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffffff;
}

#rbt-packages .rbt-description {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--rbt-text-sub);
}

#rbt-packages .rbt-nav-tabs {
  display: flex;
  gap: 8px;
  background: var(--rbt-card-bg);
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--rbt-border);
  margin-bottom: 24px;
  overflow-x: auto;
}

#rbt-packages .rbt-tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  padding: 12px 16px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--rbt-text-sub);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

#rbt-packages .rbt-tab-btn:hover {
  color: var(--rbt-text-main);
  background: var(--rbt-card-hover);
}

#rbt-packages .rbt-tab-btn.rbt-tab-active {
  color: #ffffff;
  background: var(--rbt-primary);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

#rbt-packages .rbt-tab-content {
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

#rbt-packages .rbt-tab-content.rbt-tab-content-active {
  display: block;
  opacity: 1;
}

#rbt-packages .rbt-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
  align-items: stretch;
}

#rbt-packages .rbt-card {
  background: var(--rbt-card-bg);
  border: 1px solid var(--rbt-border);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: all 0.25s ease;
}

#rbt-packages .rbt-card:hover {
  transform: translateY(-3px);
  border-color: var(--rbt-primary);
  background: var(--rbt-card-hover);
}

#rbt-packages .rbt-card-title {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--rbt-text-main);
}

#rbt-packages .rbt-card-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--rbt-code-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rbt-accent);
  flex-shrink: 0;
}

#rbt-packages .rbt-list {
  padding-right: 18px;
  margin: 0;
  line-height: 1.8;
  font-size: 0.92rem;
  color: var(--rbt-text-sub);
}

#rbt-packages .rbt-list li {
  margin-bottom: 10px;
}

#rbt-packages .rbt-list li:last-child {
  margin-bottom: 0;
}

#rbt-packages .rbt-code-text {
  background: var(--rbt-code-bg);
  border: 1px solid var(--rbt-border);
  color: var(--rbt-code-text);
  padding: 2px 8px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 0.88rem;
  font-weight: 700;
  direction: ltr;
  display: inline-block;
}

#rbt-packages .rbt-code-copy {
  background: var(--rbt-code-bg);
  border: 1px solid var(--rbt-border);
  color: var(--rbt-code-text);
  padding: 4px 10px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 0.88rem;
  font-weight: 700;
  direction: ltr;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

#rbt-packages .rbt-code-copy:hover {
  background: var(--rbt-primary);
  color: #ffffff;
  border-color: var(--rbt-primary);
}

#rbt-packages .rbt-table-wrapper {
  background: var(--rbt-card-bg);
  border: 1px solid var(--rbt-border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
}

#rbt-packages .rbt-section-subtitle {
  margin: 0;
  padding: 14px 20px;
  background: var(--rbt-table-header);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--rbt-accent);
  border-bottom: 1px solid var(--rbt-border);
  display: flex;
  align-items: center;
  gap: 8px;
}

#rbt-packages .rbt-table {
  width: 100%;
  border-collapse: collapse;
  text-align: right;
  font-size: 0.9rem;
}

#rbt-packages .rbt-table th,
#rbt-packages .rbt-table td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--rbt-border);
}

#rbt-packages .rbt-table th {
  background: var(--rbt-table-header);
  color: var(--rbt-text-sub);
  font-weight: 700;
  font-size: 0.82rem;
}

#rbt-packages .rbt-table td {
  color: var(--rbt-text-main);
}

#rbt-packages .rbt-table tbody tr:hover {
  background: var(--rbt-card-hover);
}

#rbt-packages .rbt-price-highlight {
  color: var(--rbt-accent);
  font-weight: 800;
}

#rbt-packages .rbt-search-box {
  position: relative;
  margin-bottom: 18px;
}

#rbt-packages .rbt-input {
  width: 100%;
  padding: 12px 42px 12px 16px;
  border: 1px solid var(--rbt-border);
  border-radius: 10px;
  background: var(--rbt-card-bg);
  color: var(--rbt-text-main);
  font-size: 0.95rem;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

#rbt-packages .rbt-input:focus {
  border-color: var(--rbt-primary);
}

#rbt-packages .rbt-search-icon {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: var(--rbt-text-sub);
  pointer-events: none;
}

#rbt-packages .rbt-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

#rbt-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--rbt-primary);
  color: #ffffff;
  padding: 8px 20px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.88rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 9999;
  pointer-events: none;
}

#rbt-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
/* =========================================================
       8. تنسيقات قسم الـ Wi-Fi الشامل (عزل واستقلالية)
       ========================================================= */
    #wifi-mifi {
      padding: 0 !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
    }

    #wifi-standalone-wrapper {
      font-family: 'Readex Pro', sans-serif;
      background: var(--bg-color);
      color: var(--text-main);
      padding: 24px;
      border-radius: 24px;
      box-sizing: border-box;
      max-width: 1200px;
      margin: 0 auto;
    }

    #wifi-standalone-wrapper .wifi-hero {
      background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 50%, #7c3aed 100%);
      border-radius: 20px;
      padding: 32px;
      color: #ffffff;
      margin-bottom: 24px;
      box-shadow: 0 10px 25px -5px rgba(109, 40, 217, 0.3);
      position: relative;
      overflow: hidden;
    }

    #wifi-standalone-wrapper .wifi-hero::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -10%;
      width: 300px;
      height: 300px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 50%;
      pointer-events: none;
    }

    #wifi-standalone-wrapper .wifi-badge {
      background: rgba(255, 255, 255, 0.18);
      backdrop-filter: blur(10px);
      padding: 6px 16px;
      border-radius: 50px;
      font-size: 0.85rem;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    #wifi-standalone-wrapper .wifi-title {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 8px;
      letter-spacing: -0.5px;
      color: #ffffff !important;
    }

    #wifi-standalone-wrapper .wifi-subtitle {
      font-size: 0.95rem;
      color: #e9d5ff;
      font-weight: 300;
    }

    #wifi-standalone-wrapper .wifi-controls {
      background: var(--card-bg);
      border-radius: 18px;
      padding: 16px;
      border: 1px solid var(--border-color);
      margin-bottom: 24px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.03);
    }

    #wifi-standalone-wrapper .wifi-search-box {
      position: relative;
      width: 100%;
    }

    #wifi-standalone-wrapper .wifi-search-input {
      width: 100%;
      padding: 14px 45px 14px 16px;
      font-size: 0.95rem;
      border-radius: 12px;
      border: 1.5px solid var(--border-color);
      background: var(--bg-color);
      color: var(--text-main);
      outline: none;
      box-sizing: border-box;
      transition: all 0.25s ease;
      font-family: inherit;
    }

    #wifi-standalone-wrapper .wifi-search-input:focus {
      border-color: #6d28d9;
      background: var(--card-bg);
      box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.1);
    }

    #wifi-standalone-wrapper .wifi-search-icon {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-muted);
      font-size: 1.1rem;
    }

    #wifi-standalone-wrapper .wifi-tabs {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding-bottom: 4px;
    }

    #wifi-standalone-wrapper .wifi-tab-btn {
      padding: 9px 20px;
      border-radius: 12px;
      border: 1px solid var(--border-color);
      background: var(--card-bg);
      color: var(--text-muted);
      cursor: pointer;
      white-space: nowrap;
      font-size: 0.88rem;
      font-weight: 500;
      font-family: inherit;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    #wifi-standalone-wrapper .wifi-tab-btn:hover {
      border-color: #cbd5e1;
      color: var(--text-main);
      background: var(--purple-light);
    }

    #wifi-standalone-wrapper .wifi-tab-btn.active {
      background: #6d28d9;
      color: #ffffff;
      border-color: #6d28d9;
      box-shadow: 0 4px 12px rgba(109, 40, 217, 0.25);
    }

    #wifi-standalone-wrapper .wifi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
      gap: 20px;
      margin-bottom: 24px;
    }

    #wifi-standalone-wrapper .wifi-card {
      background: var(--card-bg);
      border-radius: 18px;
      border: 1px solid var(--border-color);
      overflow: hidden;
      box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.03);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
    }

    #wifi-standalone-wrapper .wifi-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.08);
    }

    #wifi-standalone-wrapper .wifi-card-header {
      padding: 16px 20px;
      background: var(--purple-light);
      border-bottom: 1px solid var(--border-color);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    #wifi-standalone-wrapper .wifi-card-title {
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--primary-purple);
    }

    #wifi-standalone-wrapper .wifi-tag {
      background: #6d28d9;
      color: #ffffff;
      font-size: 0.72rem;
      padding: 4px 12px;
      border-radius: 50px;
      font-weight: 600;
      letter-spacing: 0.3px;
    }

    #wifi-standalone-wrapper .wifi-card-body {
      padding: 16px 20px 20px 20px;
      flex-grow: 1;
    }

    #wifi-standalone-wrapper .wifi-specs-box {
      background: var(--bg-color);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 12px;
      margin-bottom: 16px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      font-size: 0.8rem;
    }

    #wifi-standalone-wrapper .wifi-spec-item {
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--text-muted);
      font-weight: 500;
    }

    #wifi-standalone-wrapper .wifi-spec-item i {
      color: #6d28d9;
      width: 14px;
      text-align: center;
    }

    #wifi-standalone-wrapper .wifi-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.88rem;
    }

    #wifi-standalone-wrapper .wifi-table th {
      text-align: right;
      padding: 10px 8px;
      color: var(--text-muted);
      font-weight: 600;
      border-bottom: 1.5px solid var(--border-color);
    }

    #wifi-standalone-wrapper .wifi-table td {
      padding: 11px 8px;
      border-bottom: 1px dashed var(--border-color);
      color: var(--text-main);
    }

    #wifi-standalone-wrapper .wifi-table tr:last-child td {
      border-bottom: none;
    }

    #wifi-standalone-wrapper .wifi-price {
      font-weight: 700;
      color: #6d28d9;
      background: var(--purple-light);
      padding: 4px 10px;
      border-radius: 8px;
      display: inline-block;
      font-size: 0.85rem;
    }

    #wifi-standalone-wrapper .wifi-discount-sec {
      background: var(--card-bg);
      border-radius: 18px;
      padding: 24px;
      border: 1px solid var(--border-color);
      margin-bottom: 24px;
      box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.03);
      border-top: 4px solid #ec4899;
    }

    #wifi-standalone-wrapper .wifi-discount-title {
      font-weight: 700;
      font-size: 1.15rem;
      color: #be185d;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }

    #wifi-standalone-wrapper .wifi-discount-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 16px;
    }

    #wifi-standalone-wrapper .wifi-discount-item {
      background: var(--bg-color);
      border: 1px solid var(--border-color);
      padding: 16px;
      border-radius: 14px;
      position: relative;
      transition: all 0.2s ease;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    #wifi-standalone-wrapper .wifi-discount-item:hover {
      transform: translateY(-3px);
      border-color: #f472b6;
      box-shadow: 0 8px 15px -3px rgba(236, 72, 153, 0.12);
    }

    #wifi-standalone-wrapper .wifi-off-badge {
      position: absolute;
      top: 12px;
      left: 12px;
      background: #ec4899;
      color: #ffffff;
      font-size: 0.7rem;
      padding: 3px 8px;
      border-radius: 50px;
      font-weight: 700;
    }

    #wifi-standalone-wrapper .wifi-ussd-btn {
      width: 100%;
      margin-top: 12px;
      padding: 9px 12px;
      background: var(--card-bg);
      border: 1.5px dashed #be185d;
      color: #be185d;
      border-radius: 10px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: inherit;
      transition: all 0.2s ease;
    }

    #wifi-standalone-wrapper .wifi-ussd-btn:hover {
      background: #be185d;
      color: #ffffff;
    }

    #wifi-standalone-wrapper .wifi-notes-card {
      background: var(--card-bg);
      border-radius: 18px;
      border: 1px solid var(--border-color);
      padding: 24px;
      margin-bottom: 20px;
      box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.03);
    }

    #wifi-standalone-wrapper .wifi-notes-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
    }

    #wifi-standalone-wrapper .wifi-notes-title {
      padding: 6px 18px;
      border-radius: 50px;
      font-weight: 700;
      font-size: 0.95rem;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    #wifi-standalone-wrapper .wifi-notes-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 14px;
    }

    #wifi-standalone-wrapper .wifi-note-item {
      background: var(--bg-color);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 14px 16px;
      font-size: 0.88rem;
      color: var(--text-main);
      line-height: 1.6;
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

    #wifi-standalone-wrapper .wifi-note-item i {
      margin-top: 3px;
      font-size: 0.95rem;
      flex-shrink: 0;
    }

    #wifi-standalone-wrapper .wifi-code-badge {
      background: var(--card-bg);
      color: #6d28d9;
      padding: 2px 10px;
      border-radius: 8px;
      font-weight: 700;
      cursor: pointer;
      border: 1px solid var(--border-color);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 0 2px;
      transition: all 0.2s ease;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    #wifi-standalone-wrapper .wifi-code-badge:hover {
      background: #6d28d9;
      color: #ffffff;
      border-color: #6d28d9;
    }

    #wifi-standalone-wrapper .wifi-toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(100px);
      background: #0f172a;
      color: #ffffff;
      padding: 12px 28px;
      border-radius: 50px;
      font-size: 0.9rem;
      font-weight: 500;
      box-shadow: 0 10px 25px rgba(0,0,0,0.25);
      opacity: 0;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 99999;
      pointer-events: none;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    #wifi-standalone-wrapper .wifi-toast.show {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }
/* =========================================================
       8. تنسيقات واجهة خدمة "دا منو" المدمجة
       ========================================================= */
    #damno-tab-content {
      font-family: 'Tajawal', 'Cairo', sans-serif;
      padding: 10px 5px;
    }

    .damno-wrapper {
      max-width: 950px;
      margin: 0 auto;
      animation: damnoPopIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .damno-hero {
      background: linear-gradient(-45deg, #5c1860, #83208a, #ff2a85, #7b1fa2);
      background-size: 300% 300%;
      animation: damnoGradientBG 10s ease infinite;
      color: #ffffff;
      padding: 45px 35px;
      border-radius: 24px;
      box-shadow: 0 15px 35px rgba(255, 42, 133, 0.2);
      margin-bottom: 30px;
      position: relative;
      overflow: hidden;
    }

    .damno-hero::after {
      content: '✨';
      position: absolute;
      top: 15px;
      left: 25px;
      font-size: 2.5rem;
      opacity: 0.8;
      animation: damnoPulse 2s infinite alternate;
    }

    .damno-hero-title {
      font-size: 2.5rem;
      font-weight: 900;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      gap: 12px;
      letter-spacing: -0.5px;
      color: #ffffff !important;
    }

    .damno-hero-title::after {
      display: none !important;
    }

    .damno-hero-badge {
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(8px);
      padding: 4px 14px;
      border-radius: 50px;
      font-size: 0.9rem;
      font-weight: 700;
      border: 1px solid rgba(255, 255, 255, 0.4);
    }

    .damno-hero-desc {
      font-size: 1.1rem;
      line-height: 1.8;
      color: #fff0fa !important;
      font-weight: 500;
      text-align: justify;
      margin-top: 0 !important;
    }

    .damno-card {
      background: var(--damno-card-bg);
      backdrop-filter: blur(12px);
      border-radius: 24px;
      padding: 32px;
      margin-bottom: 30px;
      box-shadow: 0 10px 30px rgba(108, 32, 122, 0.05);
      border: 1px solid var(--border-color);
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .damno-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 18px 40px rgba(108, 32, 122, 0.12);
    }

    .damno-section-title {
      font-size: 1.4rem;
      font-weight: 800;
      color: var(--damno-purple-main);
      margin-bottom: 22px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    [data-theme="dark"] .damno-section-title {
      color: #a855f7;
    }

    .damno-section-title::before {
      content: '';
      width: 6px;
      height: 24px;
      background: linear-gradient(to bottom, var(--damno-pink-bright), var(--damno-purple-light));
      border-radius: 10px;
      display: inline-block;
    }

    .damno-table-wrapper {
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,0.02);
      border: 1px solid var(--border-color);
    }

    .damno-table {
      width: 100%;
      border-collapse: collapse;
      text-align: center;
    }

    .damno-table th {
      background: linear-gradient(90deg, #6c207a, #8c269e);
      color: #ffffff;
      padding: 16px;
      font-size: 1rem;
      font-weight: 700;
    }

    .damno-table td {
      padding: 18px;
      background: var(--card-bg);
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--damno-text-dark);
      border-bottom: 1px solid var(--border-color);
      transition: background 0.3s ease;
    }

    .damno-table tr:hover td {
      background: var(--purple-light);
    }

    .damno-price-highlight {
      color: var(--damno-pink-bright);
      font-size: 1.15rem;
      font-weight: 800;
    }

    .damno-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
      gap: 18px;
    }

    .damno-command-card {
      background: var(--card-bg);
      border: 1.5px solid var(--border-color);
      border-radius: 18px;
      padding: 18px 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .damno-command-card:hover {
      border-color: var(--damno-pink-bright);
      transform: translateY(-3px) scale(1.01);
      box-shadow: 0 10px 25px rgba(255, 42, 133, 0.12);
    }

    .damno-cmd-code {
      align-self: flex-start;
      background: linear-gradient(135deg, #fdf0f7, #f7e6f8);
      color: var(--damno-purple-main);
      border: 1px solid #f0cbef;
      font-size: 0.95rem;
      font-weight: 800;
      padding: 6px 14px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    [data-theme="dark"] .damno-cmd-code {
      background: linear-gradient(135deg, #312e81, #4c1d95);
      color: #f3e8ff;
      border-color: #6b21a8;
    }

    .damno-cmd-desc {
      font-size: 0.98rem;
      font-weight: 600;
      color: var(--damno-text-dark);
      line-height: 1.5;
    }

    @keyframes damnoGradientBG {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    @keyframes damnoPopIn {
      0% {
        opacity: 0;
        transform: scale(0.96) translateY(20px);
      }
      100% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    @keyframes damnoPulse {
      0% { transform: scale(1); opacity: 0.7; }
      100% { transform: scale(1.2); opacity: 1; }
    }

    @media (max-width: 600px) {
      .damno-hero {
        padding: 30px 20px;
        border-radius: 18px;
      }
      .damno-hero-title {
        font-size: 1.9rem;
        flex-wrap: wrap;
      }
      .damno-card {
        padding: 22px 16px;
        border-radius: 18px;
      }
      .damno-grid {
        grid-template-columns: 1fr;
      }
    }
/* =========================================================
       8. تنسيقات واجهة خدمة "mca" المدمجة
       ========================================================= */
    #mca-tab-content {
      font-family: 'Tajawal', 'Cairo', sans-serif;
      padding: 10px 5px;
    }

    .mca-wrapper {
      max-width: 950px;
      margin: 0 auto;
      animation: mcaPopIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .mca-hero {
      background: linear-gradient(-45deg, #5c1860, #83208a, #ff2a85, #7b1fa2);
      background-size: 300% 300%;
      animation: mcaGradientBG 10s ease infinite;
      color: #ffffff;
      padding: 45px 35px;
      border-radius: 24px;
      box-shadow: 0 15px 35px rgba(255, 42, 133, 0.2);
      margin-bottom: 30px;
      position: relative;
      overflow: hidden;
    }

    .mca-hero::after {
      content: '✨';
      position: absolute;
      top: 15px;
      left: 25px;
      font-size: 2.5rem;
      opacity: 0.8;
      animation: mcaPulse 2s infinite alternate;
    }

    .mca-hero-title {
      font-size: 2.5rem;
      font-weight: 900;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      gap: 12px;
      letter-spacing: -0.5px;
      color: #ffffff !important;
    }

    .mca-hero-title::after {
      display: none !important;
    }

    .mca-hero-badge {
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(8px);
      padding: 4px 14px;
      border-radius: 50px;
      font-size: 0.9rem;
      font-weight: 700;
      border: 1px solid rgba(255, 255, 255, 0.4);
    }

    .mca-hero-desc {
      font-size: 1.1rem;
      line-height: 1.8;
      color: #fff0fa !important;
      font-weight: 500;
      text-align: justify;
      margin-top: 0 !important;
    }

    .mca-card {
      background: var(--mca-card-bg);
      backdrop-filter: blur(12px);
      border-radius: 24px;
      padding: 32px;
      margin-bottom: 30px;
      box-shadow: 0 10px 30px rgba(108, 32, 122, 0.05);
      border: 1px solid var(--border-color);
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .mca-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 18px 40px rgba(108, 32, 122, 0.12);
    }

    .mca-section-title {
      font-size: 1.4rem;
      font-weight: 800;
      color: var(--mca-purple-main);
      margin-bottom: 22px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    [data-theme="dark"] .mca-section-title {
      color: #a855f7;
    }

    .mca-section-title::before {
      content: '';
      width: 6px;
      height: 24px;
      background: linear-gradient(to bottom, var(--mca-pink-bright), var(--mca-purple-light));
      border-radius: 10px;
      display: inline-block;
    }

    .mca-table-wrapper {
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,0.02);
      border: 1px solid var(--border-color);
    }

    .mca-table {
      width: 100%;
      border-collapse: collapse;
      text-align: center;
    }

    .mca-table th {
      background: linear-gradient(90deg, #6c207a, #8c269e);
      color: #ffffff;
      padding: 16px;
      font-size: 1rem;
      font-weight: 700;
    }

    .mca-table td {
      padding: 18px;
      background: var(--card-bg);
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--mca-text-dark);
      border-bottom: 1px solid var(--border-color);
      transition: background 0.3s ease;
    }

    .mca-table tr:hover td {
      background: var(--purple-light);
    }

    .mca-price-highlight {
      color: var(--mca-pink-bright);
      font-size: 1.15rem;
      font-weight: 800;
    }

    .mca-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
      gap: 18px;
    }

    .mca-command-card {
      background: var(--card-bg);
      border: 1.5px solid var(--border-color);
      border-radius: 18px;
      padding: 18px 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .mca-command-card:hover {
      border-color: var(--mca-pink-bright);
      transform: translateY(-3px) scale(1.01);
      box-shadow: 0 10px 25px rgba(255, 42, 133, 0.12);
    }

    .mca-cmd-code {
      align-self: flex-start;
      background: linear-gradient(135deg, #fdf0f7, #f7e6f8);
      color: var(--mca-purple-main);
      border: 1px solid #f0cbef;
      font-size: 0.95rem;
      font-weight: 800;
      padding: 6px 14px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    [data-theme="dark"] .mca-cmd-code {
      background: linear-gradient(135deg, #312e81, #4c1d95);
      color: #f3e8ff;
      border-color: #6b21a8;
    }

    .mca-cmd-desc {
      font-size: 0.98rem;
      font-weight: 600;
      color: var(--mca-text-dark);
      line-height: 1.5;
    }

    @keyframes mcaGradientBG {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    @keyframes mcaPopIn {
      0% {
        opacity: 0;
        transform: scale(0.96) translateY(20px);
      }
      100% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    @keyframes mcaPulse {
      0% { transform: scale(1); opacity: 0.7; }
      100% { transform: scale(1.2); opacity: 1; }
    }

    @media (max-width: 600px) {
      .mca-hero {
        padding: 30px 20px;
        border-radius: 18px;
      }
      .mca-hero-title {
        font-size: 1.9rem;
        flex-wrap: wrap;
      }
      .mca-card {
        padding: 22px 16px;
        border-radius: 18px;
      }
      .mca-grid {
        grid-template-columns: 1fr;
      }
    }
/* =========================================================
       8. تنسيقات واجهة خدمة " حالتي" المدمجة
       ========================================================= */
    #status-tab-content {
      font-family: 'Tajawal', 'Cairo', sans-serif;
      padding: 10px 5px;
    }

    .status-wrapper {
      max-width: 950px;
      margin: 0 auto;
      animation: statusPopIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .status-hero {
      background: linear-gradient(-45deg, #5c1860, #83208a, #ff2a85, #7b1fa2);
      background-size: 300% 300%;
      animation: statusGradientBG 10s ease infinite;
      color: #ffffff;
      padding: 45px 35px;
      border-radius: 24px;
      box-shadow: 0 15px 35px rgba(255, 42, 133, 0.2);
      margin-bottom: 30px;
      position: relative;
      overflow: hidden;
    }

    .status-hero::after {
      content: '✨';
      position: absolute;
      top: 15px;
      left: 25px;
      font-size: 2.5rem;
      opacity: 0.8;
      animation: statusPulse 2s infinite alternate;
    }

    .status-hero-title {
      font-size: 2.5rem;
      font-weight: 900;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      gap: 12px;
      letter-spacing: -0.5px;
      color: #ffffff !important;
    }

    .status-hero-title::after {
      display: none !important;
    }

    .status-hero-badge {
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(8px);
      padding: 4px 14px;
      border-radius: 50px;
      font-size: 0.9rem;
      font-weight: 700;
      border: 1px solid rgba(255, 255, 255, 0.4);
    }

    .status-hero-desc {
      font-size: 1.1rem;
      line-height: 1.8;
      color: #fff0fa !important;
      font-weight: 500;
      text-align: justify;
      margin-top: 0 !important;
    }

    .status-card {
      background: var(--status-card-bg);
      backdrop-filter: blur(12px);
      border-radius: 24px;
      padding: 32px;
      margin-bottom: 30px;
      box-shadow: 0 10px 30px rgba(108, 32, 122, 0.05);
      border: 1px solid var(--border-color);
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .status-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 18px 40px rgba(108, 32, 122, 0.12);
    }

    .status-section-title {
      font-size: 1.4rem;
      font-weight: 800;
      color: var(--status-purple-main);
      margin-bottom: 22px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    [data-theme="dark"] .status-section-title {
      color: #a855f7;
    }

    .status-section-title::before {
      content: '';
      width: 6px;
      height: 24px;
      background: linear-gradient(to bottom, var(--status-pink-bright), var(--status-purple-light));
      border-radius: 10px;
      display: inline-block;
    }

    .status-table-wrapper {
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,0.02);
      border: 1px solid var(--border-color);
    }

    .status-table {
      width: 100%;
      border-collapse: collapse;
      text-align: center;
    }

    .status-table th {
      background: linear-gradient(90deg, #6c207a, #8c269e);
      color: #ffffff;
      padding: 16px;
      font-size: 1rem;
      font-weight: 700;
    }

    .status-table td {
      padding: 18px;
      background: var(--card-bg);
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--status-text-dark);
      border-bottom: 1px solid var(--border-color);
      transition: background 0.3s ease;
    }

    .status-table tr:hover td {
      background: var(--purple-light);
    }

    .status-price-highlight {
      color: var(--status-pink-bright);
      font-size: 1.15rem;
      font-weight: 800;
    }

    .status-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
      gap: 18px;
    }

    .status-command-card {
      background: var(--card-bg);
      border: 1.5px solid var(--border-color);
      border-radius: 18px;
      padding: 18px 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .status-command-card:hover {
      border-color: var(--status-pink-bright);
      transform: translateY(-3px) scale(1.01);
      box-shadow: 0 10px 25px rgba(255, 42, 133, 0.12);
    }

    .status-cmd-code {
      align-self: flex-start;
      background: linear-gradient(135deg, #fdf0f7, #f7e6f8);
      color: var(--status-purple-main);
      border: 1px solid #f0cbef;
      font-size: 0.95rem;
      font-weight: 800;
      padding: 6px 14px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    [data-theme="dark"] .status-cmd-code {
      background: linear-gradient(135deg, #312e81, #4c1d95);
      color: #f3e8ff;
      border-color: #6b21a8;
    }

    .status-cmd-desc {
      font-size: 0.98rem;
      font-weight: 600;
      color: var(--status-text-dark);
      line-height: 1.5;
    }

    @keyframes statusGradientBG {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    @keyframes statusPopIn {
      0% {
        opacity: 0;
        transform: scale(0.96) translateY(20px);
      }
      100% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    @keyframes statusPulse {
      0% { transform: scale(1); opacity: 0.7; }
      100% { transform: scale(1.2); opacity: 1; }
    }

    @media (max-width: 600px) {
      .status-hero {
        padding: 30px 20px;
        border-radius: 18px;
      }
      .status-hero-title {
        font-size: 1.9rem;
        flex-wrap: wrap;
      }
      .status-card {
        padding: 22px 16px;
        border-radius: 18px;
      }
      .status-grid {
        grid-template-columns: 1fr;
      }
    }
/* =========================================================
       8. تنسيقات واجهة خدمة " شوفها" المدمجة
       ========================================================= */
    #shofha-tab-content {
      font-family: 'Tajawal', 'Cairo', sans-serif;
      padding: 10px 5px;
    }

    .shofha-wrapper {
      max-width: 950px;
      margin: 0 auto;
      animation:shofhaPopIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .shofha-hero {
      background: linear-gradient(-45deg, #5c1860, #83208a, #ff2a85, #7b1fa2);
      background-size: 300% 300%;
      animation:shofhaGradientBG 10s ease infinite;
      color: #ffffff;
      padding: 45px 35px;
      border-radius: 24px;
      box-shadow: 0 15px 35px rgba(255, 42, 133, 0.2);
      margin-bottom: 30px;
      position: relative;
      overflow: hidden;
    }

    .shofha-hero::after {
      content: '✨';
      position: absolute;
      top: 15px;
      left: 25px;
      font-size: 2.5rem;
      opacity: 0.8;
      animation:shofhaPulse 2s infinite alternate;
    }

    .shofha-hero-title {
      font-size: 2.5rem;
      font-weight: 900;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      gap: 12px;
      letter-spacing: -0.5px;
      color: #ffffff !important;
    }

    .shofha-hero-title::after {
      display: none !important;
    }

    .shofha-hero-badge {
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(8px);
      padding: 4px 14px;
      border-radius: 50px;
      font-size: 0.9rem;
      font-weight: 700;
      border: 1px solid rgba(255, 255, 255, 0.4);
    }

    .shofha-hero-desc {
      font-size: 1.1rem;
      line-height: 1.8;
      color: #fff0fa !important;
      font-weight: 500;
      text-align: justify;
      margin-top: 0 !important;
    }

    .shofha-card {
      background: var(--shofha-card-bg);
      backdrop-filter: blur(12px);
      border-radius: 24px;
      padding: 32px;
      margin-bottom: 30px;
      box-shadow: 0 10px 30px rgba(108, 32, 122, 0.05);
      border: 1px solid var(--border-color);
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .shofha-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 18px 40px rgba(108, 32, 122, 0.12);
    }

    .shofha-section-title {
      font-size: 1.4rem;
      font-weight: 800;
      color: var(--shofha-purple-main);
      margin-bottom: 22px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    [data-theme="dark"] .shofha-section-title {
      color: #a855f7;
    }

    .shofha-section-title::before {
      content: '';
      width: 6px;
      height: 24px;
      background: linear-gradient(to bottom, var(--shofha-pink-bright), var(--shofha-purple-light));
      border-radius: 10px;
      display: inline-block;
    }

    .shofha-table-wrapper {
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,0.02);
      border: 1px solid var(--border-color);
    }

    .shofha-table {
      width: 100%;
      border-collapse: collapse;
      text-align: center;
    }

    .shofha-table th {
      background: linear-gradient(90deg, #6c207a, #8c269e);
      color: #ffffff;
      padding: 16px;
      font-size: 1rem;
      font-weight: 700;
    }

    .shofha-table td {
      padding: 18px;
      background: var(--card-bg);
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--shofha-text-dark);
      border-bottom: 1px solid var(--border-color);
      transition: background 0.3s ease;
    }

    .shofha-table tr:hover td {
      background: var(--purple-light);
    }

    .shofha-price-highlight {
      color: var(--shofha-pink-bright);
      font-size: 1.15rem;
      font-weight: 800;
    }

    .shofha-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
      gap: 18px;
    }

    .shofha-command-card {
      background: var(--card-bg);
      border: 1.5px solid var(--border-color);
      border-radius: 18px;
      padding: 18px 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .shofha-command-card:hover {
      border-color: var(--shofha-pink-bright);
      transform: translateY(-3px) scale(1.01);
      box-shadow: 0 10px 25px rgba(255, 42, 133, 0.12);
    }

    .shofha-cmd-code {
      align-self: flex-start;
      background: linear-gradient(135deg, #fdf0f7, #f7e6f8);
      color: var(--shofha-purple-main);
      border: 1px solid #f0cbef;
      font-size: 0.95rem;
      font-weight: 800;
      padding: 6px 14px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    [data-theme="dark"] .shofha-cmd-code {
      background: linear-gradient(135deg, #312e81, #4c1d95);
      color: #f3e8ff;
      border-color: #6b21a8;
    }

    .shofha-cmd-desc {
      font-size: 0.98rem;
      font-weight: 600;
      color: var(--shofha-text-dark);
      line-height: 1.5;
    }

    @keyframes shofhaGradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes shofhaPopIn {
  0% {
    opacity: 0;
    transform: scale(0.96) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes shofhaPulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.2); opacity: 1; }
}
    @media (max-width: 600px) {
      .shofha-hero {
        padding: 30px 20px;
        border-radius: 18px;
      }
      .shofha-hero-title {
        font-size: 1.9rem;
        flex-wrap: wrap;
      }
      .shofha-card {
        padding: 22px 16px;
        border-radius: 18px;
      }
      .shofha-grid {
        grid-template-columns: 1fr;
      }
    }

    /* =========================================================
       6. تنسيقات خدمة أنغامي المعدلة لقراءة مريحة
       ========================================================= */
    #anghami {
      padding: 10px;
      background: transparent;
      border: none;
      box-shadow: none;
    }

    .anghami-wrapper {
      --anghami-purple-main: #6c207a;
      --anghami-purple-light: #9c27b0;
      --anghami-pink-bright: #ff2a85;
      --anghami-cyan-accent: #00f2fe;
      --anghami-card-bg: rgba(255, 255, 255, 0.95);
      --anghami-text-dark: #1e1522;
      --anghami-text-muted: #524756;
      
      font-family: 'Tajawal', sans-serif;
      max-width: 950px;
      margin: 0 auto;
      animation: anghamiPopIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    [data-theme="dark"] .anghami-wrapper {
      --anghami-card-bg: #1e293b;
      --anghami-text-dark: #f8fafc;
      --anghami-text-muted: #cbd5e1;
    }

    .anghami-hero {
      background: linear-gradient(-45deg, #4a124e, #711977, #e02575, #611880);
      background-size: 300% 300%;
      animation: anghamiGradientBG 10s ease infinite;
      color: #ffffff;
      padding: 45px 35px;
      border-radius: 24px;
      box-shadow: 0 15px 35px rgba(224, 37, 117, 0.2);
      margin-bottom: 30px;
      position: relative;
      overflow: hidden;
    }

    .anghami-hero::after {
      content: '🎵';
      position: absolute;
      top: 15px;
      left: 25px;
      font-size: 2.5rem;
      opacity: 0.8;
      animation: anghamiPulse 2s infinite alternate;
    }

    .anghami-hero-title {
      font-size: 2.5rem;
      font-weight: 900;
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      gap: 12px;
      letter-spacing: -0.5px;
      color: #ffffff !important;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .anghami-hero-title::after {
      display: none !important;
    }

    .anghami-hero-badge {
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      padding: 5px 16px;
      border-radius: 50px;
      font-size: 0.95rem;
      font-weight: 700;
      border: 1px solid rgba(255, 255, 255, 0.4);
      color: #ffffff;
    }

    /* تعديل النص ليكون مريحاً للعين وتوافقيًا مع ألوان الأنميشن */
    .anghami-hero-desc {
      font-size: 1.15rem;
      line-height: 1.95;
      color: #ffffff;
      font-weight: 500;
      text-align: justify;
      letter-spacing: 0.2px;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
      background: rgba(0, 0, 0, 0.12);
      padding: 16px 22px;
      border-radius: 16px;
      border-right: 4px solid #ff2a85;
      backdrop-filter: blur(4px);
    }

    .anghami-card {
      background: var(--anghami-card-bg);
      backdrop-filter: blur(12px);
      border-radius: 24px;
      padding: 32px;
      margin-bottom: 30px;
      box-shadow: 0 10px 30px rgba(108, 32, 122, 0.05);
      border: 1px solid var(--border-color);
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .anghami-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 18px 40px rgba(108, 32, 122, 0.12);
    }

    .anghami-section-title {
      font-size: 1.4rem;
      font-weight: 800;
      color: var(--anghami-purple-main);
      margin-bottom: 22px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    [data-theme="dark"] .anghami-section-title {
      color: #c084fc;
    }

    .anghami-section-title::before {
      content: '';
      width: 6px;
      height: 24px;
      background: linear-gradient(to bottom, var(--anghami-pink-bright), var(--anghami-purple-light));
      border-radius: 10px;
      display: inline-block;
    }

    .anghami-table-wrapper {
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,0.02);
      border: 1px solid var(--border-color);
    }

    .anghami-table {
      width: 100%;
      border-collapse: collapse;
      text-align: center;
    }

    .anghami-table th {
      background: linear-gradient(90deg, #6c207a, #8c269e);
      color: #ffffff;
      padding: 16px;
      font-size: 1rem;
      font-weight: 700;
    }

    .anghami-table td {
      padding: 18px;
      background: var(--card-bg);
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--anghami-text-dark);
      border-bottom: 1px solid var(--border-color);
      transition: background 0.3s ease;
    }

    .anghami-table tr:hover td {
      background: var(--purple-light);
    }

    .anghami-price-highlight {
      color: var(--anghami-pink-bright);
      font-size: 1.15rem;
      font-weight: 800;
    }

    .anghami-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
      gap: 18px;
    }

    .anghami-command-card {
      background: var(--card-bg);
      border: 1.5px solid var(--border-color);
      border-radius: 18px;
      padding: 18px 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .anghami-command-card:hover {
      border-color: var(--anghami-pink-bright);
      transform: translateY(-3px) scale(1.01);
      box-shadow: 0 10px 25px rgba(255, 42, 133, 0.12);
    }

    .anghami-cmd-code {
      align-self: flex-start;
      background: var(--purple-light);
      color: var(--anghami-purple-main);
      border: 1px solid var(--border-color);
      font-size: 0.95rem;
      font-weight: 800;
      padding: 6px 14px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      word-break: break-all;
    }

    [data-theme="dark"] .anghami-cmd-code {
      color: #e9d5ff;
    }

    .anghami-cmd-desc {
      font-size: 0.98rem;
      font-weight: 600;
      color: var(--anghami-text-dark);
      line-height: 1.5;
    }

    .anghami-link {
      color: var(--anghami-purple-main);
      text-decoration: underline;
    }

    [data-theme="dark"] .anghami-link {
      color: #c084fc;
    }

    @keyframes anghamiGradientBG {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    @keyframes anghamiPopIn {
      0% {
        opacity: 0;
        transform: scale(0.96) translateY(20px);
      }
      100% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    @keyframes anghamiPulse {
      0% { transform: scale(1); opacity: 0.7; }
      100% { transform: scale(1.2); opacity: 1; }
    }

    @media (max-width: 600px) {
      .anghami-hero {
        padding: 30px 20px;
        border-radius: 18px;
      }
      .anghami-hero-title {
        font-size: 1.9rem;
        flex-wrap: wrap;
      }
      .anghami-hero-desc {
        font-size: 1rem;
        padding: 12px 16px;
      }
      .anghami-card {
        padding: 22px 16px;
        border-radius: 18px;
      }
      .anghami-grid {
        grid-template-columns: 1fr;
      }
    }
/* =========================================================
       8. تنسيقات صفحة Data Card Share (الصفحة المدمجة المخصصة)
       ========================================================= */
    #data-card-share {
      padding: 0 !important;
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    .data-card-share-wrapper {
      background: linear-gradient(to bottom, #0f0c1b, #1d102e 45%, #2a0836);
      border-radius: 16px;
      font-family: 'Cairo', sans-serif;
      font-weight: 400;
      text-align: center;
      font-size: 18px;
      color: #ffffff;
      line-height: 1.5;
      padding: 40px 20px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
    }

    div.data-card-share {
      width: 100%;
      max-width: 1000px;
      margin: 0 auto;
      box-sizing: border-box;
    }

    .data-card-share .data-card-share-h1 {
      color: #ffffff !important;
      text-align: center;
      margin-bottom: 15px;
      font-size: 2.3em;
      font-weight: 800;
      letter-spacing: 0.5px;
      animation: dataCardShareGlow 3s ease-in-out infinite alternate;
      display: block;
    }

    .data-card-share .data-card-share-h1::after {
      display: none !important;
    }

    @keyframes dataCardShareGlow {
      0% {
        text-shadow: 0 0 10px rgba(236, 72, 153, 0.4);
      }
      100% {
        text-shadow: 0 0 20px rgba(236, 72, 153, 0.9), 0 0 30px rgba(168, 85, 247, 0.6);
      }
    }

    .data-card-share .data-card-share-description-box {
      background-color: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(236, 72, 153, 0.3);
      border-radius: 12px;
      padding: 20px 25px;
      margin-bottom: 35px;
      text-align: center;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(5px);
    }

    .data-card-share .data-card-share-description-text {
      color: #f3f4f6;
      font-size: 1.05em;
      font-weight: 600;
      margin: 0;
      line-height: 1.8;
    }

    .data-card-share .data-card-share-table-header {
      background: linear-gradient(to bottom, #f43f5e, #be123c);
      color: #ffffff;
      font-size: 1.25em;
      font-weight: 800;
      padding: 12px 30px;
      border-radius: 8px 8px 0 0;
      margin-top: 15px;
      display: inline-block;
      box-shadow: 0 4px 15px rgba(225, 29, 72, 0.3);
    }

    .data-card-share .data-card-share-table-container {
      width: 100%;
      margin-bottom: 45px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      border-radius: 0 0 12px 12px;
      overflow-x: auto;
    }

    .data-card-share table.data-card-share-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      background-color: rgba(20, 10, 35, 0.85);
      border: 1px solid rgba(244, 63, 94, 0.3);
    }

    .data-card-share table.data-card-share-table th {
      background-color: #3b0764;
      color: #ffffff;
      font-size: 1em;
      font-weight: 700;
      padding: 15px 10px;
      border: 1px solid rgba(168, 85, 247, 0.2);
      text-align: center;
    }

    .data-card-share table.data-card-share-table td {
      padding: 14px 10px;
      font-size: 0.98em;
      text-align: center;
      border: 1px solid rgba(168, 85, 247, 0.15);
      font-weight: 600;
      color: #f3f4f6;
    }

    .data-card-share table.data-card-share-table td.data-card-share-code-cell {
      color: #38bdf8;
      font-family: monospace, sans-serif;
      font-size: 1.1em;
      direction: ltr;
      font-weight: 700;
    }

    .data-card-share table.data-card-share-table tbody tr:nth-child(even) td {
      background-color: rgba(15, 5, 25, 0.6);
    }

    .data-card-share table.data-card-share-table tbody tr:hover td {
      background-color: rgba(192, 38, 211, 0.35) !important;
      color: #ffffff;
      transition: all 0.25s ease-in-out;
      cursor: pointer;
    }

/* =========================================================
       8. تنسيقات صفحة أوقات الذروة المدمجة (#prepaid-peak)
       ========================================================= */
    #prepaid-peak-wrapper {
        --op-primary: #5c2d91; /* Zain Purple */
        --op-primary-hover: #4a2377;
        --op-primary-light: rgba(92, 45, 145, 0.08);
        --op-primary-border: rgba(92, 45, 145, 0.2);
        --op-accent: #00a896;
        --op-bg: #f8fafc;
        --op-card-bg: #ffffff;
        --op-text-main: #0f172a;
        --op-text-muted: #64748b;
        --op-border: #e2e8f0;
        --op-radius: 16px;
        --op-radius-sm: 10px;
        --op-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
        --op-shadow-hover: 0 20px 25px -5px rgba(92, 45, 145, 0.12);
        
        font-family: 'Tajawal', system-ui, -apple-system, sans-serif;
        background-color: var(--op-bg);
        color: var(--op-text-main);
        padding: 24px;
        border-radius: var(--op-radius);
        box-shadow: var(--op-shadow);
        margin: 0;
        line-height: 1.6;
        box-sizing: border-box;
    }

    /* Dark Mode Compatibility for prepaid-peak */
    .dark #prepaid-peak-wrapper,
    body.dark #prepaid-peak-wrapper,
    [data-theme="dark"] #prepaid-peak-wrapper {
        --op-primary: #9d5ce5;
        --op-primary-hover: #b17bf2;
        --op-primary-light: rgba(157, 92, 229, 0.15);
        --op-primary-border: rgba(157, 92, 229, 0.3);
        --op-accent: #02c39a;
        --op-bg: #0f172a;
        --op-card-bg: #1e293b;
        --op-text-main: #f8fafc;
        --op-text-muted: #94a3b8;
        --op-border: #334155;
        --op-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    }

    #prepaid-peak-wrapper *, 
    #prepaid-peak-wrapper *::before, 
    #prepaid-peak-wrapper *::after {
        box-sizing: border-box;
    }

    #prepaid-peak-wrapper .op-header {
        background: linear-gradient(135deg, var(--op-card-bg) 0%, var(--op-primary-light) 100%);
        border: 1px solid var(--op-primary-border);
        padding: 24px;
        border-radius: var(--op-radius);
        margin-bottom: 24px;
        position: relative;
        overflow: hidden;
    }

    #prepaid-peak-wrapper .op-header::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 6px;
        height: 100%;
        background: var(--op-primary);
    }

    #prepaid-peak-wrapper .op-title {
        color: var(--op-primary);
        font-size: 1.75rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;
    }

    #prepaid-peak-wrapper .op-title::after {
        display: none;
    }

    #prepaid-peak-wrapper .op-title svg {
        width: 32px;
        height: 32px;
        fill: var(--op-primary);
    }

    #prepaid-peak-wrapper .op-subtitle {
        color: var(--op-text-muted);
        font-size: 0.95rem;
        max-width: 900px;
    }

    #prepaid-peak-wrapper .op-info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 16px;
        margin-bottom: 28px;
    }

    #prepaid-peak-wrapper .op-info-card {
        background: var(--op-card-bg);
        border: 1px solid var(--op-border);
        border-radius: var(--op-radius-sm);
        padding: 18px 20px;
        display: flex;
        align-items: center;
        gap: 16px;
        transition: all 0.25s ease;
        box-shadow: var(--op-shadow);
    }

    #prepaid-peak-wrapper .op-info-card:hover {
        transform: translateY(-3px);
        border-color: var(--op-primary-border);
        box-shadow: var(--op-shadow-hover);
    }

    #prepaid-peak-wrapper .op-info-icon {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        background: var(--op-primary-light);
        color: var(--op-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    #prepaid-peak-wrapper .op-info-icon svg {
        width: 26px;
        height: 26px;
        fill: currentColor;
    }

    #prepaid-peak-wrapper .op-info-details h4 {
        font-size: 0.85rem;
        color: var(--op-text-muted);
        font-weight: 500;
        margin-bottom: 4px;
    }

    #prepaid-peak-wrapper .op-code-badge-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    #prepaid-peak-wrapper .op-code-badge {
        direction: ltr;
        font-family: Consolas, Monaco, monospace;
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--op-primary);
        background: var(--op-primary-light);
        padding: 3px 12px;
        border-radius: 6px;
        border: 1px dashed var(--op-primary-border);
        letter-spacing: 1px;
    }

    #prepaid-peak-wrapper .op-copy-btn {
        background: transparent;
        border: none;
        color: var(--op-text-muted);
        cursor: pointer;
        padding: 4px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        transition: color 0.2s;
    }

    #prepaid-peak-wrapper .op-copy-btn:hover {
        color: var(--op-primary);
    }

    #prepaid-peak-wrapper .op-info-details p {
        font-size: 0.8rem;
        color: var(--op-text-muted);
        margin-top: 4px;
    }

    #prepaid-peak-wrapper .op-tabs-nav {
        display: flex;
        gap: 8px;
        background: var(--op-card-bg);
        padding: 6px;
        border-radius: var(--op-radius-sm);
        border: 1px solid var(--op-border);
        margin-bottom: 24px;
        overflow-x: auto;
    }

    #prepaid-peak-wrapper .op-tab-btn {
        flex: 1;
        min-width: 140px;
        background: transparent;
        border: none;
        padding: 12px 16px;
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--op-text-muted);
        cursor: pointer;
        border-radius: 8px;
        transition: all 0.25s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        white-space: nowrap;
    }

    #prepaid-peak-wrapper .op-tab-btn:hover {
        color: var(--op-primary);
        background: var(--op-primary-light);
    }

    #prepaid-peak-wrapper .op-tab-btn.op-tab-active {
        color: #ffffff;
        background: var(--op-primary);
        box-shadow: 0 4px 12px rgba(92, 45, 145, 0.3);
    }

    #prepaid-peak-wrapper .op-tab-btn svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
    }

    #prepaid-peak-wrapper .op-tab-pane {
        display: none;
        animation: opSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #prepaid-peak-wrapper .op-tab-pane.op-pane-show {
        display: block;
    }

    @keyframes opSlideUp {
        from { opacity: 0; transform: translateY(12px); }
        to { opacity: 1; transform: translateY(0); }
    }

    #prepaid-peak-wrapper .op-card-section {
        background: var(--op-card-bg);
        border: 1px solid var(--op-border);
        border-radius: var(--op-radius);
        padding: 24px;
        box-shadow: var(--op-shadow);
    }

    #prepaid-peak-wrapper .op-section-head {
        margin-bottom: 20px;
        border-bottom: 1px solid var(--op-border);
        padding-bottom: 12px;
    }

    #prepaid-peak-wrapper .op-section-title {
        color: var(--op-primary);
        font-size: 1.3rem;
        font-weight: 800;
        margin-bottom: 4px;
    }

    #prepaid-peak-wrapper .op-section-desc {
        color: var(--op-text-muted);
        font-size: 0.9rem;
    }

    #prepaid-peak-wrapper .op-table-wrapper {
        overflow-x: auto;
        border-radius: var(--op-radius-sm);
        border: 1px solid var(--op-border);
    }

    #prepaid-peak-wrapper table.op-table {
        width: 100%;
        border-collapse: collapse;
        text-align: right;
        font-size: 0.95rem;
    }

    #prepaid-peak-wrapper table.op-table th {
        background: var(--op-primary-light);
        color: var(--op-primary);
        padding: 14px 18px;
        font-weight: 700;
        border-bottom: 2px solid var(--op-primary-border);
        white-space: nowrap;
    }

    #prepaid-peak-wrapper table.op-table td {
        padding: 16px 18px;
        border-bottom: 1px solid var(--op-border);
        color: var(--op-text-main);
        vertical-align: middle;
    }

    #prepaid-peak-wrapper table.op-table tbody tr:last-child td {
        border-bottom: none;
    }

    #prepaid-peak-wrapper table.op-table tbody tr:hover {
        background-color: var(--op-primary-light);
    }

    #prepaid-peak-wrapper .op-notes-badge {
        margin-top: 8px;
        padding: 8px 12px;
        background: var(--op-bg);
        border-right: 3px solid var(--op-accent);
        border-radius: 4px;
        font-size: 0.85rem;
        color: var(--op-text-muted);
    }

    #prepaid-peak-wrapper .op-faq-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    #prepaid-peak-wrapper .op-faq-item {
        background: var(--op-bg);
        border: 1px solid var(--op-border);
        border-radius: var(--op-radius-sm);
        overflow: hidden;
        transition: all 0.2s ease;
    }

    #prepaid-peak-wrapper .op-faq-item.op-faq-open {
        border-color: var(--op-primary-border);
        background: var(--op-card-bg);
    }

    #prepaid-peak-wrapper .op-faq-question {
        padding: 16px 20px;
        font-weight: 700;
        color: var(--op-text-main);
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        user-select: none;
        transition: color 0.2s;
    }

    #prepaid-peak-wrapper .op-faq-item.op-faq-open .op-faq-question {
        color: var(--op-primary);
    }

    #prepaid-peak-wrapper .op-faq-answer {
        padding: 0 20px 18px 20px;
        font-size: 0.92rem;
        color: var(--op-text-muted);
        line-height: 1.7;
        display: none;
    }

    #prepaid-peak-wrapper .op-faq-icon {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        width: 20px;
        height: 20px;
        fill: var(--op-text-muted);
    }

    #prepaid-peak-wrapper .op-faq-item.op-faq-open .op-faq-icon {
        transform: rotate(180deg);
        fill: var(--op-primary);
    }

    .op-toast {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%) translateY(100px);
        background: #0f172a;
        color: #fff;
        padding: 10px 20px;
        border-radius: 30px;
        font-size: 0.85rem;
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        opacity: 0;
        transition: all 0.3s ease;
        z-index: 9999;
    }
    .op-toast.show {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }

    @media (max-width: 640px) {
        #prepaid-peak-wrapper {
            padding: 16px;
        }
        #prepaid-peak-wrapper .op-header {
            padding: 16px;
        }
        #prepaid-peak-wrapper .op-title {
            font-size: 1.4rem;
        }
        #prepaid-peak-wrapper .op-tabs-nav {
            justify-content: flex-start;
        }
        #prepaid-peak-wrapper .op-card-section {
            padding: 16px;
        }
    }

/* ==========================================
   بوابة تسجيل دخول CCare الرقمية الحديثة
   ========================================== */
/* ==========================================

/* الخلفية الشفافة المغطية للشاشة بالكامل */
.ccare-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: radial-gradient(circle at 50% 30%, rgba(108, 92, 231, 0.15), transparent 70%),
              rgba(248, 249, 253, 0.96) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 999999 !important; /* التأكد من ظهوره فوق كل عناصر الصفحة */
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow-y: auto !important; /* السماح بالتمرير داخل المربع إذا كانت شاشة الموبايل صغيرة جداً */
  padding: 1rem;
  box-sizing: border-box;
}

/* بطاقة تسجيل الدخول */
.ccare-login-card {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  padding: 2.5rem 2rem 2rem 2rem;
  border-radius: 24px;
  box-shadow: 0 24px 60px -20px rgba(109, 40, 217, 0.28),
              0 0 0 1px rgba(124, 58, 237, 0.12),
              inset 0 1px 0 rgba(255,255,255,0.8);
  width: 100%;
  max-width: 400px;
  text-align: center;
  position: relative;
  box-sizing: border-box;
  margin: auto;
  animation: ccFadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.ccare-login-card::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 3px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(90deg, #4f46e5, #7c3aed, #06b6d4);
}

.ccare-login-card h2 {
  color: #1a1d2e;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.3rem 0;
  letter-spacing: -0.5px;
}

.ccare-subtitle {
  color: #718096;
  font-size: 0.85rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* مجموعات الإدخال والتسميات */
.ccare-input-group {
  text-align: right;
  margin-bottom: 1.25rem;
}

.ccare-input-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #4a5568;
  margin-bottom: 0.4rem;
}

/* حقول النص وحاويات الأيقونات */
.ccare-password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ccare-input-group input[type="text"],
.ccare-input-group input[type="password"] {
  width: 100%;
  padding: 0.8rem 1rem 0.8rem 2.8rem; /* مساحة جهة اليسار لأيقونة العين */
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.9rem;
  color: #2d3748;
  background-color: #f8fafc;
  outline: none;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.ccare-input-group input:focus {
  border-color: #6C5CE7;
  background-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.12);
}

/* التحكم ببراعة في حجم أيقونة العين وإصلاح التضخم */
.ccare-toggle-eye {
  position: absolute;
  left: 12px;
  width: 20px !important;
  height: 20px !important;
  max-width: 20px;
  max-height: 20px;
  stroke: #a0aec0;
  cursor: pointer;
  transition: stroke 0.25s ease;
  z-index: 10;
}

.ccare-toggle-eye:hover {
  stroke: #6C5CE7;
}

/* صندوق التنبيه والأخطاء */
.ccare-login-error {
  color: #e53e3e;
  background-color: #fff5f5;
  border: 1px solid #fed7d7;
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  font-size: 0.8rem;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ccare-login-error.success-msg {
  background-color: #f0fff4 !important;
  border-color: #c6f6d5 !important;
  color: #2f855a !important;
}

/* أزرار العمليات الرئيسية */
.ccare-btn-primary {
  width: 100%;
  padding: 0.85rem;
  background: linear-gradient(135deg, #6C5CE7, #5b4cc4);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(108, 92, 231, 0.28);
  transition: all 0.25s ease;
  margin-top: 0.5rem;
}

.ccare-btn-primary:hover {
  background: linear-gradient(135deg, #5b4cc4, #4c3eb5);
  box-shadow: 0 12px 22px rgba(108, 92, 231, 0.38);
}

/* روابط التذييل (نسيت كلمة السر والعودة) */
.ccare-footer-links {
  margin-top: 1.2rem;
  font-size: 0.8rem;
}

.ccare-footer-links a {
  color: #6C5CE7;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.ccare-footer-links a:hover {
  color: #5b4cc4;
  text-decoration: underline;
}

/* أزرار لوحة الأدمن الشفافة */
.ccare-btn-secondary {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.ccare-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* إخفاء النافذة المنبثقة */
.ccare-overlay.ccare-hidden {
  display: none !important;
}

    /* زر الثيم على شاشة تسجيل الدخول */
    .ccare-login-theme-btn {
      position: fixed !important;
      top: 16px;
      left: 16px;
      z-index: 1000000 !important;
      box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25);
    }
    [dir="rtl"] .ccare-login-theme-btn {
      left: auto;
      right: 16px;
    }
    .ccare-login-brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.35rem;
      margin-bottom: 1.25rem;
    }
    .ccare-login-brand h2 {
      margin: 0.4rem 0 0 0;
      color: var(--text-main, #1a1d2e);
      font-size: 1.45rem;
      font-weight: 800;
    }
    .ccare-login-brand .logo-icon {
      width: 56px;
      height: 56px;
      display: block;
    }


/* ==========================================
   دعم الوضع الليلي (Dark Mode)
   ========================================== */
[data-theme="dark"] .ccare-overlay {
  background: radial-gradient(circle at 50% 30%, rgba(108, 92, 231, 0.2), transparent 70%),
              rgba(15, 15, 23, 0.97) !important;
}

[data-theme="dark"] .ccare-login-card {
  background: rgba(26, 26, 39, 0.95);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .ccare-login-card h2 {
  color: #ffffff;
}

[data-theme="dark"] .ccare-subtitle {
  color: #a0aec0;
}

[data-theme="dark"] .ccare-input-group label {
  color: #cbd5e0;
}

[data-theme="dark"] .ccare-input-group input {
  background-color: #12101d;
  border-color: #2b2b40;
  color: #ffffff;
}

[data-theme="dark"] .ccare-input-group input:focus {
  border-color: #6C5CE7;
  background-color: #161426;
}

[data-theme="dark"] .ccare-login-error {
  background-color: rgba(229, 62, 62, 0.15);
  border-color: rgba(229, 62, 62, 0.3);
  color: #feb2b2;
}
/* =========================================================
       8. تخصيصات وتصميم محتوى التجوال المدمج (roaming-all)
       ========================================================= */
    .roam-wrapper {
      --roam-bg-main: var(--bg-color);
      --roam-card-bg: var(--card-bg);
      --roam-card-hover: var(--purple-light);
      --roam-input-bg: var(--bg-color);
      --roam-border: var(--border-color);
      --roam-primary: #38bdf8;
      --roam-primary-hover: #0284c7;
      --roam-primary-glow: rgba(56, 189, 248, 0.2);
      --roam-info-bg: rgba(56, 189, 248, 0.08);
      --roam-text-title: var(--text-main);
      --roam-text-main: var(--text-main);
      --roam-text-muted: var(--text-muted);
      --roam-chip-bg: var(--purple-light);
      --roam-badge-bg: rgba(16, 185, 129, 0.15);
      --roam-badge-border: rgba(16, 185, 129, 0.3);
      --roam-badge-text: #34d399;
      --roam-shadow: var(--shadow-glow);
      font-family: 'Tajawal', 'Cairo', sans-serif;
    }

    .roam-wrapper.mode-noTax {
      --roam-primary: #0284c7;
      --roam-primary-hover: #0369a1;
      --roam-primary-glow: rgba(2, 132, 199, 0.2);
      --roam-info-bg: rgba(2, 132, 199, 0.08);
    }
    [data-theme="dark"] .roam-wrapper.mode-noTax {
      --roam-primary: #38bdf8;
      --roam-primary-hover: #0284c7;
      --roam-primary-glow: rgba(56, 189, 248, 0.25);
      --roam-info-bg: rgba(56, 189, 248, 0.08);
    }

    .roam-wrapper.mode-prepaid {
      --roam-primary: #059669;
      --roam-primary-hover: #047857;
      --roam-primary-glow: rgba(5, 150, 105, 0.2);
      --roam-info-bg: rgba(5, 150, 105, 0.08);
    }
    [data-theme="dark"] .roam-wrapper.mode-prepaid {
      --roam-primary: #10b981;
      --roam-primary-hover: #059669;
      --roam-primary-glow: rgba(16, 185, 129, 0.25);
      --roam-info-bg: rgba(16, 185, 129, 0.08);
    }

    .roam-wrapper.mode-postpaid {
      --roam-primary: #d97706;
      --roam-primary-hover: #b45309;
      --roam-primary-glow: rgba(217, 119, 6, 0.2);
      --roam-info-bg: rgba(217, 119, 6, 0.08);
    }
    [data-theme="dark"] .roam-wrapper.mode-postpaid {
      --roam-primary: #f59e0b;
      --roam-primary-hover: #d97706;
      --roam-primary-glow: rgba(245, 158, 11, 0.25);
      --roam-info-bg: rgba(245, 158, 11, 0.08);
    }

    .roam-container {
      width: 100%;
      max-width: 860px;
      margin: 0 auto;
      background: var(--roam-card-bg);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 30px;
      border-radius: 20px;
      border: 1px solid var(--roam-border);
      box-shadow: var(--roam-shadow);
    }

    .roam-container h1.roam-main-title {
      text-align: center;
      color: var(--roam-text-title);
      margin: 0 0 22px 0;
      font-size: 23px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .roam-container h1.roam-main-title::after {
      display: none !important;
    }

    .roam-search-container {
      position: relative;
      margin-bottom: 20px;
    }

    .roam-input-group {
      display: flex;
      gap: 10px;
    }

    .roam-input-wrapper {
      position: relative;
      flex: 1;
    }

    .roam-input-wrapper input[type="text"] {
      width: 100%;
      padding: 13px 40px 13px 16px;
      font-size: 15px;
      border: 1.5px solid var(--roam-border);
      border-radius: 12px;
      outline: none;
      background: var(--roam-input-bg);
      color: var(--roam-text-main);
    }

    .roam-input-wrapper input[type="text"]:focus {
      border-color: var(--roam-primary);
      box-shadow: 0 0 0 3px var(--roam-primary-glow);
    }

    .roam-clear-btn {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      font-size: 18px;
      color: var(--roam-text-muted);
      cursor: pointer;
      display: none;
    }

    .roam-clear-btn:hover {
      color: var(--roam-text-title);
    }

    .roam-btn-search {
      background-color: var(--roam-primary);
      color: #ffffff;
      border: none;
      padding: 0 24px;
      font-size: 15px;
      font-weight: 700;
      border-radius: 12px;
      cursor: pointer;
      box-shadow: 0 4px 12px var(--roam-primary-glow);
      transition: all 0.2s;
    }

    .roam-btn-search:hover {
      background-color: var(--roam-primary-hover);
      transform: translateY(-1px);
    }

    .roam-quick-countries {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 12px;
      align-items: center;
    }

    .roam-quick-title {
      font-size: 12px;
      color: var(--roam-text-muted);
      font-weight: 600;
    }

    .roam-chip {
      background: var(--roam-chip-bg);
      border: 1px solid var(--roam-border);
      padding: 5px 12px;
      border-radius: 16px;
      font-size: 13px;
      cursor: pointer;
      color: var(--roam-text-main);
      transition: all 0.2s;
    }

    .roam-chip:hover {
      border-color: var(--roam-primary);
      color: var(--roam-primary);
      transform: translateY(-2px);
      box-shadow: 0 4px 10px var(--roam-primary-glow);
    }

    .roam-suggestions-list {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--roam-card-bg);
      border: 1px solid var(--roam-border);
      border-radius: 12px;
      max-height: 180px;
      overflow-y: auto;
      z-index: 100;
      margin-top: 5px;
      padding: 0;
      list-style: none;
      display: none;
      box-shadow: var(--roam-shadow);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .roam-suggestions-list li {
      padding: 10px 16px;
      cursor: pointer;
      font-size: 14px;
      border-bottom: 1px solid var(--roam-border);
    }

    .roam-suggestions-list li:hover {
      background: var(--roam-info-bg);
      color: var(--roam-primary);
    }

    .roam-result-container {
      display: none;
      margin-top: 18px;
      border-top: 1px solid var(--roam-border);
      padding-top: 18px;
      animation: roamFadeIn 0.25s ease-out;
    }

    @keyframes roamFadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .roam-result-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }

    .roam-result-title {
      margin: 0;
      color: var(--roam-text-title);
      font-size: 19px;
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .roam-status-badge {
      background: var(--roam-badge-bg);
      border: 1px solid var(--roam-badge-border);
      color: var(--roam-badge-text);
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .roam-status-badge .roam-dot {
      width: 7px;
      height: 7px;
      background: var(--roam-badge-text);
      border-radius: 50%;
    }

    .roam-tabs-container {
      display: flex;
      background: var(--roam-input-bg);
      padding: 4px;
      border-radius: 12px;
      margin-bottom: 18px;
      gap: 4px;
      border: 1px solid var(--roam-border);
    }

    .roam-tab-btn {
      flex: 1;
      padding: 9px 4px;
      border: none;
      background: transparent;
      font-size: 13px;
      font-weight: 700;
      color: var(--roam-text-muted);
      border-radius: 9px;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s;
    }

    .roam-tab-btn:hover:not(.active) {
      color: var(--roam-text-title);
    }

    .roam-tab-btn.active {
      background: var(--roam-primary);
      color: #ffffff;
      box-shadow: 0 2px 8px var(--roam-primary-glow);
    }

    .roam-info-box {
      background: var(--roam-info-bg);
      border-right: 3px solid var(--roam-primary);
      padding: 12px 16px;
      border-radius: 10px;
      font-size: 13px;
      line-height: 1.65;
      margin-bottom: 18px;
      color: var(--roam-text-main);
    }

    .roam-info-box strong {
      color: var(--roam-primary);
    }

    .roam-price-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 12px;
      margin-bottom: 18px;
    }

    .roam-price-card {
      background: var(--roam-input-bg);
      border: 1px solid var(--roam-border);
      padding: 12px 15px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: all 0.2s;
    }

    .roam-price-card:hover {
      background: var(--roam-card-hover);
      border-color: var(--roam-primary);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px var(--roam-primary-glow);
    }

    .roam-price-icon {
      font-size: 22px;
      background: var(--roam-info-bg);
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--roam-border);
    }

    .roam-price-info {
      flex: 1;
    }

    .roam-price-card .roam-label {
      font-size: 12px;
      color: var(--roam-text-muted);
      margin-bottom: 2px;
    }

    .roam-price-card .roam-value {
      font-size: 16px;
      font-weight: 800;
      color: var(--roam-text-title);
    }

    .roam-btn-copy {
      background-color: var(--roam-primary);
      color: #ffffff;
      border: none;
      padding: 13px;
      font-size: 15px;
      font-weight: 800;
      border-radius: 12px;
      cursor: pointer;
      width: 100%;
      box-shadow: 0 4px 12px var(--roam-primary-glow);
      transition: all 0.2s;
    }

    .roam-btn-copy:hover {
      background-color: var(--roam-primary-hover);
      transform: translateY(-1px);
    }

    .roam-btn-copy.copied {
      background-color: #10b981;
      box-shadow: none;
    }

    .roam-no-result {
      color: #ef4444;
      text-align: center;
      margin-top: 10px;
      display: none;
      font-size: 13px;
      font-weight: 700;
      padding: 10px;
      background: rgba(239, 68, 68, 0.1);
      border-radius: 10px;
      border: 1px solid rgba(239, 68, 68, 0.2);
    }
 /* =========================================================
       8. بيدي تاجر
       ========================================================= */
   @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

#bede-merchant {
  --bede-primary: #6c5ce7;
  --bede-primary-light: #a29bfe;
  --bede-primary-hover: #4834d4;
  --bede-secondary: #00cec9;
  --bede-accent: #ff7675;
  --bede-accent-light: rgba(0, 206, 201, 0.15);
  --bede-bg: #0f172a;
  --bede-surface: #1e293b;
  --bede-text: #f8fafc;
  --bede-text-muted: #94a3b8;
  --bede-border: rgba(255, 255, 255, 0.1);
  --bede-shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  --bede-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  --bede-shadow-lg: 0 20px 40px rgba(108, 92, 231, 0.25);
  --bede-radius: 24px;
  --bede-radius-sm: 18px;

  font-family: 'Tajawal', sans-serif;
  direction: rtl;
  text-align: right;
  background-color: var(--bede-bg);
  color: var(--bede-text);
  padding: 2.5rem 1.5rem;
  line-height: 1.6;
  border-radius: var(--bede-radius);
  box-shadow: var(--bede-shadow);
  box-sizing: border-box;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  border: 1px solid var(--bede-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: light) {
  #bede-merchant {
    --bede-bg: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    --bede-surface: #ffffff;
    --bede-text: #334155;
    --bede-text-muted: #64748b;
    --bede-border: rgba(0, 0, 0, 0.08);
    --bede-shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    --bede-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
    --bede-shadow-lg: 0 20px 40px rgba(108, 92, 231, 0.12);
  }
}

@media (prefers-color-scheme: dark) {
  #bede-merchant {
    --bede-bg: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
  }
}

#bede-merchant * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Tajawal', sans-serif;
}

#bede-merchant .bede-header {
  background: transparent;
  color: var(--bede-text);
  padding: 1.5rem 1rem 2rem;
  border-radius: var(--bede-radius);
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
  text-align: center;
}

#bede-merchant .bede-header-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

#bede-merchant .bede-logo-container {
  width: 58px;
  height: 58px;
  background: linear-gradient(135deg, #6c5ce7 0%, #00cec9 100%);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(108, 92, 231, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 10px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

#bede-merchant .bede-logo-container:hover {
  transform: scale(1.05) rotate(-3deg);
}

#bede-merchant .bede-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.5rem 1.4rem;
  background: rgba(108, 92, 231, 0.15);
  border: 1px solid var(--bede-primary);
  border-radius: 50px;
  color: var(--bede-primary);
  font-weight: 700;
  font-size: 0.9rem;
}

#bede-merchant .bede-header h1 {
  font-size: 2.3rem;
  font-weight: 900;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #00cec9 0%, #6c5ce7 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 2;
  letter-spacing: -0.5px;
}

#bede-merchant .bede-header p {
  color: var(--bede-text-muted);
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  line-height: 1.6;
}

#bede-merchant .bede-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  margin-bottom: 28px;
}

#bede-merchant .bede-stat-card {
  background: var(--bede-surface);
  border: 1px solid var(--bede-border);
  border-radius: var(--bede-radius-sm);
  padding: 1.8rem;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--bede-shadow-sm);
  position: relative;
  overflow: hidden;
}

#bede-merchant .bede-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
  opacity: 0.9;
}

#bede-merchant .bede-stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(108, 92, 231, 0.2);
  border-color: var(--bede-primary);
}

#bede-merchant .bede-stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(108, 92, 231, 0.15);
  color: var(--bede-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#bede-merchant .bede-stat-info h4 {
  font-size: 13px;
  color: var(--bede-text-muted);
  margin-bottom: 4px;
  font-weight: 600;
}

#bede-merchant .bede-stat-info .bede-value {
  font-size: 19px;
  font-weight: 800;
  color: var(--bede-text);
  letter-spacing: -0.3px;
}

#bede-merchant .bede-controls {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

#bede-merchant .bede-search-box {
  flex: 1;
  min-width: 280px;
  position: relative;
}

#bede-merchant .bede-search-box input {
  width: 100%;
  padding: 14px 20px 14px 45px;
  border: 1px solid var(--bede-border);
  border-radius: 14px;
  font-size: 14.5px;
  outline: none;
  transition: all 0.3s ease;
  background: var(--bede-surface);
  color: var(--bede-text);
  box-shadow: var(--bede-shadow-sm);
}

#bede-merchant .bede-search-box input:focus {
  border-color: var(--bede-primary);
  box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.2);
}

#bede-merchant .bede-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

#bede-merchant .bede-tab-btn {
  background: var(--bede-surface);
  border: 1px solid var(--bede-border);
  padding: 0.85rem 1.6rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--bede-text-muted);
  cursor: pointer;
  border-radius: 14px;
  transition: all 0.3s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
}

#bede-merchant .bede-tab-btn:hover {
  color: var(--bede-text);
  border-color: var(--bede-primary);
  background: rgba(108, 92, 231, 0.1);
}

#bede-merchant .bede-tab-btn.active {
  background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4);
}

#bede-merchant .bede-tab-panel {
  display: none;
  animation: bedeFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#bede-merchant .bede-tab-panel.active {
  display: block;
}

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

#bede-merchant .bede-card {
  background: var(--bede-surface);
  border-radius: 20px;
  border: 1px solid var(--bede-border);
  padding: 1.8rem;
  margin-bottom: 24px;
  box-shadow: var(--bede-shadow-sm);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#bede-merchant .bede-card:hover {
  box-shadow: 0 12px 30px rgba(108, 92, 231, 0.15);
  border-color: var(--bede-primary);
}

#bede-merchant .bede-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--bede-text);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.3px;
}

#bede-merchant .bede-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
}

#bede-merchant .bede-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 18px;
}

#bede-merchant .bede-table-wrapper {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid var(--bede-border);
  margin-top: 14px;
  box-shadow: var(--bede-shadow-sm);
}

#bede-merchant table {
  width: 100%;
  border-collapse: collapse;
  text-align: right;
  font-size: 14px;
}

#bede-merchant table th {
  background: rgba(108, 92, 231, 0.1);
  color: var(--bede-text);
  padding: 14px 18px;
  font-weight: 700;
  border-bottom: 1px solid var(--bede-border);
  white-space: nowrap;
}

#bede-merchant table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--bede-border);
  color: var(--bede-text);
}

#bede-merchant table tr:last-child td {
  border-bottom: none;
}

@media (prefers-color-scheme: dark) {
  #bede-merchant table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02);
  }
}

@media (prefers-color-scheme: light) {
  #bede-merchant table tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.015);
  }
}

#bede-merchant table tr:hover {
  background-color: rgba(108, 92, 231, 0.08);
}

#bede-merchant .bede-highlight {
  font-weight: 800;
  color: var(--bede-secondary);
  background: rgba(0, 206, 201, 0.12);
  padding: 3px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0, 206, 201, 0.25);
}

#bede-merchant .bede-code-badge {
  font-family: monospace;
  direction: ltr;
  display: inline-block;
  background: var(--bede-bg);
  color: var(--bede-secondary);
  padding: 3px 10px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid var(--bede-border);
}

#bede-merchant .bede-calculator-box {
  background: var(--bede-surface);
  border: 1px solid var(--bede-border);
  border-radius: 20px;
  padding: 28px;
  margin-bottom: 26px;
  box-shadow: var(--bede-shadow-sm);
}

#bede-merchant .bede-calculator-box h3 {
  color: var(--bede-text);
  font-size: 1.25rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}

#bede-merchant .bede-text-desc {
  font-size: 14px;
  color: var(--bede-text-muted);
  margin-top: 6px;
}

#bede-merchant .bede-calc-input-group {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

#bede-merchant .bede-calc-input-group input {
  flex: 1;
  min-width: 260px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid var(--bede-border);
  font-size: 20px;
  font-weight: 800;
  outline: none;
  color: var(--bede-secondary);
  background: var(--bede-bg);
  transition: all 0.3s ease;
}

#bede-merchant .bede-calc-input-group input:focus {
  border-color: var(--bede-primary);
  box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.2);
}

#bede-merchant .bede-calc-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-top: 22px;
}

#bede-merchant .bede-calc-res-card {
  background: var(--bede-bg);
  padding: 18px;
  border-radius: 14px;
  border: 1px solid var(--bede-border);
  text-align: center;
  transition: transform 0.2s ease;
}

#bede-merchant .bede-calc-res-card:hover {
  transform: translateY(-2px);
}

#bede-merchant .bede-calc-res-card span {
  display: block;
  font-size: 13.5px;
  color: var(--bede-text-muted);
  margin-bottom: 8px;
  font-weight: 600;
}

#bede-merchant .bede-calc-res-card strong {
  font-size: 22px;
  color: var(--bede-primary-light);
  font-weight: 800;
}

#bede-merchant .bede-sub-card {
  background: var(--bede-surface);
  padding: 18px;
  border-radius: 14px;
  border: 1px solid var(--bede-border);
}

#bede-merchant .bede-sub-card strong {
  color: var(--bede-text);
  font-size: 15px;
}

#bede-merchant .bede-sub-card p {
  font-size: 13.5px;
  color: var(--bede-text-muted);
  margin-top: 6px;
}

#bede-merchant .bede-sub-card-accent {
  background: rgba(255, 118, 117, 0.08);
  padding: 18px;
  border-radius: 14px;
  border: 1px solid var(--bede-accent);
}

#bede-merchant .bede-sub-title-highlight {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--bede-primary-light);
  margin-bottom: 8px;
}

#bede-merchant .bede-msg-box {
  background: var(--bede-surface);
  padding: 16px;
  border-radius: 12px;
  border-right: 4px solid var(--bede-secondary);
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--bede-text-muted);
}

#bede-merchant .bede-text-bold {
  color: var(--bede-text);
}

#bede-merchant .bede-nested-ol {
  padding-right: 20px;
  margin-top: 6px;
}

#bede-merchant .bede-service-box {
  background: var(--bede-surface);
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--bede-border);
}

#bede-merchant .bede-service-box strong {
  color: var(--bede-primary-light);
}

#bede-merchant .bede-service-box p {
  font-size: 12.5px;
  color: var(--bede-text-muted);
  margin-top: 4px;
}

#bede-merchant .bede-cell-rtl {
  text-align: right;
  direction: rtl;
}

#bede-merchant .bede-cell-ltr {
  direction: ltr;
  text-align: right;
}

#bede-merchant .bede-fee-badge {
  background-color: rgba(16, 185, 129, 0.15);
  color: #34d399;
  padding: 4px 12px;
  border-radius: 6px;
  font-weight: 600;
  display: inline-block;
  direction: ltr;
}

#bede-merchant .bede-primary-light-text {
  color: var(--bede-primary-light);
  font-size: 15px;
}

#bede-merchant .bede-accent-text {
  color: var(--bede-accent);
  font-size: 15px;
}

#bede-merchant .bede-accordion-item {
  border: 1px solid var(--bede-border);
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: all 0.25s ease;
  background: var(--bede-bg);
}

#bede-merchant .bede-accordion-header {
  width: 100%;
  padding: 18px 22px;
  background: transparent;
  border: none;
  text-align: right;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--bede-text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s;
}

#bede-merchant .bede-accordion-header:hover {
  background: rgba(108, 92, 231, 0.08);
}

#bede-merchant .bede-accordion-icon {
  transition: transform 0.3s ease;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
}

#bede-merchant .bede-accordion-body {
  padding: 0 22px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0, 1, 0, 1), padding 0.35s ease;
  background: transparent;
  color: var(--bede-text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  border-top: 1px solid transparent;
}

#bede-merchant .bede-accordion-item.active {
  border-color: var(--bede-primary);
  box-shadow: var(--bede-shadow-sm);
}

#bede-merchant .bede-accordion-item.active .bede-accordion-body {
  padding: 18px 22px;
  max-height: 800px;
  border-top-color: var(--bede-border);
}

#bede-merchant .bede-accordion-item.active .bede-accordion-header {
  background: rgba(108, 92, 231, 0.12);
  color: var(--bede-primary-light);
}

#bede-merchant .bede-accordion-item.active .bede-accordion-icon {
  transform: rotate(180deg);
}

#bede-merchant .bede-list-style {
  padding-right: 20px;
  font-size: 14px;
  color: var(--bede-text-muted);
  line-height: 1.0;
}

#bede-merchant .bede-list-style li {
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  #bede-merchant {
    padding: 1.5rem 1rem;
    border-radius: 18px;
  }
  #bede-merchant .bede-header h1 {
    font-size: 1.8rem;
  }
  #bede-merchant .bede-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  #bede-merchant .bede-tab-btn {
    width: 100%;
    font-size: 0.9rem;
    padding: 0.7rem 0.6rem;
    justify-content: center;
  }
}
/* =========================================================
       7. تنسيقات محفظة بيدي المُدمجة بعناية (Bede Wallet Scoped Styles)
       ========================================================= */
    #bede-service {
      --bede-bg-body: var(--card-bg);
      --bede-bg-card: var(--card-bg);
      --bede-bg-inner: var(--bg-color);
      --bede-border-color: var(--border-color);
      --bede-border-highlight: rgba(139, 92, 246, 0.4);
      --bede-primary-purple: #8b5cf6;
      --bede-primary-glow: rgba(139, 92, 246, 0.25);
      --bede-secondary-cyan: #06b6d4;
      --bede-accent-green: #10b981;
      --bede-accent-amber: #f59e0b;
      --bede-text-title: var(--text-main);
      --bede-text-body: var(--text-main);
      --bede-text-muted: var(--text-muted);
      
      background-color: var(--bede-bg-body);
      color: var(--bede-text-body);
      padding: 24px;
      border-radius: 16px;
    }

    #bede-service .bede-app-container {
      max-width: 900px;
      margin: 0 auto;
    }

    #bede-service .top-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--bede-bg-card);
      border: 1px solid var(--bede-border-color);
      padding: 14px 22px;
      border-radius: 20px;
      margin-bottom: 24px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    #bede-service .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 700;
      font-size: 1.15rem;
      color: var(--bede-text-title);
    }

    #bede-service .brand-icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--bede-primary-purple), var(--bede-secondary-cyan));
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 1.2rem;
      box-shadow: 0 4px 15px var(--bede-primary-glow);
    }

    #bede-service .ussd-badge {
      background: rgba(245, 158, 11, 0.12);
      color: var(--bede-accent-amber);
      border: 1px solid rgba(245, 158, 11, 0.3);
      padding: 6px 16px;
      border-radius: 30px;
      font-size: 0.9rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    #bede-service .hero-section {
      text-align: center;
      margin-bottom: 28px;
    }

    #bede-service .hero-section h1 {
      font-size: 2.1rem;
      font-weight: 800;
      margin-bottom: 10px;
      color: var(--bede-text-title);
      letter-spacing: -0.5px;
    }

    #bede-service .hero-section h1::after {
      display: none;
    }

    #bede-service .hero-section p {
      color: var(--bede-text-muted);
      font-size: 0.95rem;
      max-width: 620px;
      margin: 0 auto;
      font-weight: 400;
    }

    #bede-service .bede-search-box {
      position: relative;
      margin-bottom: 24px;
    }

    #bede-service .bede-search-box input {
      width: 100%;
      background: var(--bede-bg-inner);
      border: 1px solid var(--bede-border-color);
      padding: 14px 48px 14px 20px;
      border-radius: 16px;
      color: var(--bede-text-title);
      font-size: 0.95rem;
      outline: none;
      transition: all 0.3s ease;
    }

    #bede-service .bede-search-box input:focus {
      border-color: var(--bede-primary-purple);
      box-shadow: 0 0 20px var(--bede-primary-glow);
    }

    #bede-service .bede-search-box i {
      position: absolute;
      right: 18px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--bede-text-muted);
      font-size: 1.1rem;
    }

    #bede-service .calc-card {
      background: var(--bede-bg-inner);
      border: 1px solid var(--bede-border-highlight);
      border-radius: 24px;
      padding: 24px;
      margin-bottom: 32px;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    }

    #bede-service .calc-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }

    #bede-service .calc-header i {
      color: var(--bede-accent-amber);
      font-size: 1.3rem;
    }

    #bede-service .calc-header h3 {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--bede-text-title);
    }

    #bede-service .calc-controls {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    #bede-service .calc-controls select, 
    #bede-service .calc-controls input {
      background: var(--bede-bg-card);
      border: 1px solid var(--bede-border-color);
      padding: 12px 16px;
      border-radius: 14px;
      color: var(--bede-text-title);
      font-size: 0.9rem;
      outline: none;
      transition: border-color 0.2s;
    }

    #bede-service .calc-controls select:focus, 
    #bede-service .calc-controls input:focus {
      border-color: var(--bede-primary-purple);
    }

    #bede-service .calc-controls input { flex: 2; min-width: 180px; }
    #bede-service .calc-controls select { flex: 1.5; min-width: 170px; }

    #bede-service .calc-result {
      background: rgba(16, 185, 129, 0.12);
      color: var(--bede-accent-green);
      border: 1px solid rgba(16, 185, 129, 0.3);
      padding: 12px 20px;
      border-radius: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-width: 200px;
      font-size: 0.95rem;
    }

    #bede-service .section-label {
      font-size: 1.05rem;
      font-weight: 700;
      margin: 28px 0 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--bede-text-title);
    }

    #bede-service .accordion-group {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    #bede-service .accordion-item {
      background: var(--bede-bg-inner);
      border: 1px solid var(--bede-border-color);
      border-radius: 18px;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    #bede-service .accordion-item:hover {
      border-color: rgba(255, 255, 255, 0.15);
    }

    #bede-service .accordion-item.active {
      border-color: var(--bede-border-highlight);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }

    #bede-service .accordion-header {
      padding: 18px 22px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      user-select: none;
    }

    #bede-service .acc-title {
      display: flex;
      align-items: center;
      gap: 14px;
      font-weight: 600;
      font-size: 0.98rem;
      color: var(--bede-text-title);
    }

    #bede-service .acc-title i {
      color: var(--bede-primary-purple);
      font-size: 1.15rem;
      width: 24px;
      text-align: center;
    }

    #bede-service .acc-chevron {
      color: var(--bede-text-muted);
      transition: transform 0.3s ease;
      font-size: 0.9rem;
    }

    #bede-service .accordion-item.active .acc-chevron {
      transform: rotate(180deg);
      color: var(--bede-primary-purple);
    }

    #bede-service .accordion-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s cubic-bezier(0, 1, 0, 1), padding 0.3s ease;
      background: var(--bede-bg-card);
      border-top: 1px solid transparent;
    }

    #bede-service .accordion-item.active .accordion-body {
      max-height: 2500px;
      padding: 20px 22px;
      border-top-color: var(--bede-border-color);
    }

    #bede-service .table-responsive {
      overflow-x: auto;
      border-radius: 12px;
      border: 1px solid var(--bede-border-color);
    }

    #bede-service .simple-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.88rem;
      text-align: right;
      white-space: nowrap;
    }

    #bede-service .simple-table th {
      color: var(--bede-text-muted);
      padding: 12px 14px;
      border-bottom: 1px solid var(--bede-border-color);
      font-weight: 600;
      background: rgba(255, 255, 255, 0.02);
    }

    #bede-service .simple-table td {
      padding: 12px 14px;
      border-bottom: 1px solid var(--bede-border-color);
      color: var(--bede-text-body);
    }

    #bede-service .simple-table tr:last-child td {
      border-bottom: none;
    }

    #bede-service .simple-table tr:hover td {
      background: rgba(255, 255, 255, 0.015);
    }

    #bede-service .badge-free {
      background: rgba(16, 185, 129, 0.15);
      color: var(--bede-accent-green);
      padding: 4px 12px;
      border-radius: 20px;
      font-weight: 700;
      font-size: 0.8rem;
      display: inline-block;
    }

    #bede-service .badge-fee {
      background: rgba(245, 158, 11, 0.15);
      color: var(--bede-accent-amber);
      padding: 4px 12px;
      border-radius: 20px;
      font-weight: 700;
      font-size: 0.8rem;
      display: inline-block;
    }

    #bede-service .step-flow {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 8px;
    }

    #bede-service .step-pill {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid var(--bede-border-color);
      padding: 12px 16px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 0.9rem;
    }

    #bede-service .step-num {
      background: linear-gradient(135deg, var(--bede-primary-purple), var(--bede-secondary-cyan));
      color: white;
      width: 28px;
      height: 28px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 0.85rem;
      flex-shrink: 0;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    #bede-service .code-inline {
      background: rgba(139, 92, 246, 0.15);
      color: #c084fc;
      border: 1px solid rgba(139, 92, 246, 0.3);
      padding: 2px 10px;
      border-radius: 8px;
      font-family: monospace;
      font-weight: 700;
      direction: ltr;
      display: inline-block;
    }

    #bede-service .bede-footer {
      text-align: center;
      margin-top: 50px;
      color: var(--bede-text-muted);
      font-size: 0.85rem;
      border-top: 1px solid var(--bede-border-color);
      padding-top: 24px;
    }

/* =========================================================
       8. bede electri
       ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

/* HIERARCHICAL CSS SCOPING FOR #bede-electri CONTEXT */

#bede-electri {
    /* المتغيرات الديناميكية للمكون */
    --zb-primary: #6c5ce7;
    --zb-primary-dark: #4834d4;
    --zb-secondary: #00cec9;
    --zb-accent: #ff7675;
    --zb-grad-1: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
    --zb-grad-2: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
    
    /* ألوان الوضع الداكن (الافتراضي) */
    --zb-bg-main: rgba(15, 23, 42, 0.8);
    --zb-card-bg: rgba(30, 41, 59, 0.7);
    --zb-card-border: rgba(255, 255, 255, 0.1);
    --zb-text-main: #f8fafc;
    --zb-text-muted: #94a3b8;
    --zb-heading-text: #ffffff;
    --zb-inner-bg: rgba(15, 23, 42, 0.6);
    --zb-node-bg: #0f172a;
    --zb-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);

    font-family: 'Tajawal', sans-serif;
    background: var(--zb-bg-main);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--zb-text-main);
    line-height: 1.6;
    padding: 2.5rem 1.5rem;
    border-radius: 24px;
    border: 1px solid var(--zb-card-border);
    box-shadow: var(--zb-shadow);
    box-sizing: border-box;
    width: 100%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* التكيف مع الثيم النهاري الخاص بالصفحات أو النظام */
@media (prefers-color-scheme: light) {
    #bede-electri {
        --zb-bg-main: rgba(255, 255, 255, 0.9);
        --zb-card-bg: #ffffff;
        --zb-card-border: rgba(0, 0, 0, 0.08);
        --zb-text-main: #334155;
        --zb-text-muted: #64748b;
        --zb-heading-text: #0f172a;
        --zb-inner-bg: #f8fafc;
        --zb-node-bg: #f1f5f9;
        --zb-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
    }
}

[data-theme="light"] #bede-electri,
.light #bede-electri,
body.light-mode #bede-electri {
    --zb-bg-main: rgba(255, 255, 255, 0.9);
    --zb-card-bg: #ffffff;
    --zb-card-border: rgba(0, 0, 0, 0.08);
    --zb-text-main: #334155;
    --zb-text-muted: #64748b;
    --zb-heading-text: #0f172a;
    --zb-inner-bg: #f8fafc;
    --zb-node-bg: #f1f5f9;
    --zb-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] #bede-electri,
.dark #bede-electri,
body.dark-mode #bede-electri {
    --zb-bg-main: rgba(15, 23, 42, 0.8);
    --zb-card-bg: rgba(30, 41, 59, 0.7);
    --zb-card-border: rgba(255, 255, 255, 0.1);
    --zb-text-main: #f8fafc;
    --zb-text-muted: #94a3b8;
    --zb-heading-text: #ffffff;
    --zb-inner-bg: rgba(15, 23, 42, 0.6);
    --zb-node-bg: #0f172a;
    --zb-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

#bede-electri * {
    box-sizing: border-box;
    font-family: 'Tajawal', sans-serif;
}

#bede-electri .zb-svg-icon {
    width: 1.1em;
    height: 1.1em;
    fill: currentColor;
    vertical-align: -0.15em;
    display: inline-block;
}

#bede-electri .zb-logo-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 1rem;
}

#bede-electri .zb-new-logo {
    width: 58px;
    height: 58px;
    background: linear-gradient(135deg, #6c5ce7 0%, #00cec9 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(108, 92, 231, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 10px;
    transition: transform 0.3s ease;
}

#bede-electri .zb-new-logo:hover {
    transform: scale(1.05) rotate(-3deg);
}

#bede-electri .zb-new-logo svg {
    width: 100%;
    height: 100%;
}

#bede-electri .zb-brand-name {
    font-size: 2.3rem;
    font-weight: 900;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #00cec9 0%, #6c5ce7 100%);
    
    /* الخاصية القياسية أولاً */
    background-clip: text;
    /* الخاصية الخاصة بمتصفحات WebKit (مثل Chrome, Safari, Edge) */
    -webkit-background-clip: text;
    
    -webkit-text-fill-color: transparent;
}

#bede-electri .zb-hero {
    text-align: center;
    padding: 1.5rem 1rem 2.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

#bede-electri .zb-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.5rem 1.4rem;
    background: rgba(108, 92, 231, 0.15);
    border: 1px solid var(--zb-primary);
    border-radius: 50px;
    color: var(--zb-primary);
    font-weight: 700;
    margin-bottom: 1.2rem;
    font-size: 0.9rem;
}

#bede-electri .zb-hero h2 {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    color: var(--zb-heading-text);
    line-height: 1.25;
}

#bede-electri .zb-hero p {
    font-size: 1.1rem;
    color: var(--zb-text-muted);
    max-width: 800px;
    margin: 0 auto 2rem;
}

#bede-electri .zb-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto 3rem;
}

#bede-electri .zb-card {
    background: var(--zb-card-bg);
    border: 1px solid var(--zb-card-border);
    border-radius: 20px;
    padding: 1.8rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#bede-electri .zb-card:hover {
    transform: translateY(-6px);
    border-color: var(--zb-primary);
    box-shadow: 0 12px 30px rgba(108, 92, 231, 0.2);
}

#bede-electri .zb-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

#bede-electri .zb-card-icon svg {
    width: 26px;
    height: 26px;
}

#bede-electri .zb-icon-purple { background: rgba(108, 92, 231, 0.15); color: #6c5ce7; }
#bede-electri .zb-icon-teal { background: rgba(0, 206, 201, 0.15); color: #00b894; }
#bede-electri .zb-icon-pink { background: rgba(253, 121, 168, 0.15); color: #e84393; }
#bede-electri .zb-icon-amber { background: rgba(241, 196, 15, 0.15); color: #d63031; }

#bede-electri .zb-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.6rem;
    color: var(--zb-heading-text);
    font-weight: 800;
}

#bede-electri .zb-card p {
    color: var(--zb-text-muted);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.6;
}

#bede-electri .zb-section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 2rem;
}

#bede-electri .zb-section-header h3 {
    font-size: 1.8rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    position: relative;
    display: inline-block;
    color: var(--zb-heading-text);
}

#bede-electri .zb-section-header h3::after {
    content: '';
    display: block;
    width: 60%;
    height: 4px;
    background: var(--zb-grad-2);
    margin: 8px auto 0;
    border-radius: 2px;
}

#bede-electri .zb-section-header p {
    color: var(--zb-text-muted);
    font-size: 0.98rem;
}

#bede-electri .zb-service-block {
    max-width: 1100px;
    margin: 0 auto;
}

#bede-electri .zb-tabs-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

#bede-electri .zb-tab-btn {
    background: var(--zb-card-bg);
    border: 1px solid var(--zb-card-border);
    color: var(--zb-text-muted);
    padding: 0.85rem 1.6rem;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
}

#bede-electri .zb-tab-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

#bede-electri .zb-tab-btn:hover {
    color: var(--zb-heading-text);
    border-color: var(--zb-primary);
    background: rgba(108, 92, 231, 0.1);
}

#bede-electri .zb-tab-btn.active {
    background: var(--zb-grad-1);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4);
}

#bede-electri .zb-tab-content {
    display: none;
    animation: zbFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

#bede-electri .zb-tab-content.active {
    display: block !important;
}

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

#bede-electri .zb-tab-box {
    background: var(--zb-card-bg);
    border: 1px solid var(--zb-card-border);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

#bede-electri .zb-flex-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

#bede-electri .zb-availability-badge {
    color: var(--zb-secondary);
    font-weight: 700;
    font-size: 0.9rem;
}

#bede-electri .zb-steps-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.8rem;
    margin-top: 1.2rem;
}

#bede-electri .zb-flow-card {
    background: var(--zb-inner-bg);
    border: 1px solid var(--zb-card-border);
    border-radius: 18px;
    padding: 1.5rem;
}

#bede-electri .zb-flow-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.5rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--zb-card-border);
}

#bede-electri .zb-flow-header svg {
    width: 22px;
    height: 22px;
    fill: var(--zb-secondary);
}

#bede-electri .zb-flow-header h4 {
    font-size: 1.15rem;
    color: var(--zb-heading-text);
    margin: 0;
    font-weight: 800;
}

#bede-electri .zb-step-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#bede-electri .zb-step-item {
    position: relative;
    padding-right: 2.8rem;
    margin-bottom: 1.4rem;
}

#bede-electri .zb-step-item:last-child {
    margin-bottom: 0;
}

#bede-electri .zb-step-number {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--zb-grad-1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
}

#bede-electri .zb-step-title {
    font-weight: 800;
    color: var(--zb-heading-text);
    margin-bottom: 0.3rem;
    font-size: 1rem;
}

#bede-electri .zb-step-desc {
    color: var(--zb-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

#bede-electri .zb-ussd-chain {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

#bede-electri .zb-ussd-node {
    background: var(--zb-node-bg);
    border: 1px solid var(--zb-card-border);
    padding: 0.75rem 1rem;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: monospace;
    font-size: 0.95rem;
    color: var(--zb-secondary);
    font-weight: 700;
}

#bede-electri .zb-ussd-node span.zb-label {
    font-family: 'Tajawal', sans-serif;
    color: var(--zb-text-main);
    font-size: 0.88rem;
    font-weight: 500;
}

#bede-electri .zb-banner-notice {
    background: rgba(108, 92, 231, 0.1);
    border: 1px solid var(--zb-primary);
    padding: 1rem 1.4rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

#bede-electri .zb-banner-notice p {
    color: var(--zb-primary);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 700;
}

#bede-electri .zb-info-callout {
    background: rgba(0, 206, 201, 0.08);
    border-right: 4px solid var(--zb-secondary);
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1.2rem;
    font-size: 0.9rem;
    color: var(--zb-text-main);
    line-height: 1.6;
}

#bede-electri .zb-fee-badge {
    background: rgba(255, 118, 117, 0.15);
    color: var(--zb-accent);
    padding: 0.5rem 1rem;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#bede-electri .zb-mb-15 {
    margin-bottom: 1.5rem;
}

#bede-electri .zb-steps-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

#bede-electri .zb-step-box {
    background: var(--zb-node-bg);
    padding: 1rem;
    border-radius: 14px;
    border: 1px solid var(--zb-card-border);
}

#bede-electri .zb-step-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

#bede-electri .zb-step-box-num {
    color: var(--zb-secondary);
    font-weight: 900;
    font-size: 1.1rem;
}

#bede-electri .zb-icon-teal-text {
    color: var(--zb-secondary);
    font-size: 1.2rem;
}

#bede-electri .zb-step-box-title {
    color: var(--zb-heading-text);
    font-weight: 800;
    margin: 0.3rem 0;
    font-size: 0.95rem;
}

#bede-electri .zb-step-box-desc {
    color: var(--zb-text-muted);
    font-size: 0.85rem;
}

#bede-electri .zb-faq-item {
    background: var(--zb-inner-bg);
    border: 1px solid var(--zb-card-border);
    border-radius: 14px;
    margin-bottom: 1rem;
    padding: 1.2rem 1.4rem;
    transition: all 0.25s ease;
}

#bede-electri .zb-faq-item:hover {
    border-color: var(--zb-primary);
}

#bede-electri .zb-faq-question {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--zb-heading-text);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

#bede-electri .zb-faq-icon {
    color: var(--zb-primary);
}

#bede-electri .zb-faq-answer {
    color: var(--zb-text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
    padding-right: 1.8rem;
}

@media (max-width: 768px) {
    #bede-electri {
        padding: 1.5rem 1rem;
        border-radius: 18px;
    }
    #bede-electri .zb-steps-wrapper { 
        grid-template-columns: 1fr; 
    }
    #bede-electri .zb-hero h2 { 
        font-size: 1.8rem; 
    }
    #bede-electri .zb-tabs-nav { 
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    #bede-electri .zb-tab-btn { 
        width: 100%;
        font-size: 0.9rem;
        padding: 0.7rem 0.6rem;
    }
    #bede-electri .zb-tab-box {
        padding: 1.2rem;
    }
    /* إجبار الحاوية الأساسية على الحفاظ على مساحتها */
#bede-electri {
    min-height: 400px !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
}

/* إجبار محتوى التاب النشط على الظهور بكل الظروف */
#bede-electri .zb-tab-content.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

#bede-electri .zb-tab-content {
    transition: opacity 0.2s ease-in-out;
}
}
/* بيدي تحقق */  
 
/* Naming scope strictly mapped to #bede-authentication */
#bede-authentication {
    --bg-primary: rgba(15, 23, 42, 0.95);
    --bg-secondary: rgba(30, 41, 59, 0.85);
    --bg-card: rgba(30, 41, 59, 0.7);
    
    --zb-primary: #6c5ce7;
    --zb-primary-dark: #4834d4;
    --zb-secondary: #00cec9;
    --zb-accent: #ff7675;
    --zb-grad-1: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
    --zb-grad-2: linear-gradient(135deg, #00b894 0%, #00cec9 100%);

    --accent-cyan: #00cec9;
    --accent-blue: #6c5ce7;
    --accent-emerald: #00b894;
    --accent-rose: #ff7675;
    --accent-amber: #f1c40f;
    
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --border-color: rgba(255, 255, 255, 0.1);
    --glow-color: rgba(108, 92, 231, 0.25);

    background-color: var(--bg-primary);
    color: var(--text-main);
    min-height: 100vh;
    line-height: 1.6;
    padding-bottom: 50px;
    font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    direction: rtl;
    text-align: right;
    box-sizing: border-box;
}

#bede-authentication * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: inherit;
}

/* Header Bar */
#bede-authentication .bede-header {
    background: linear-gradient(135deg, #0f172a 0%, #2d1b69 50%, #0f172a 100%);
    border-bottom: 1px solid var(--border-color);
    padding: 24px 32px;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

#bede-authentication .bede-header-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

#bede-authentication .bede-logo-area {
    display: flex;
    align-items: center;
    gap: 16px;
}

#bede-authentication .bede-logo-badge {
    background: var(--zb-grad-1);
    color: #fff;
    padding: 8px 16px;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(108, 92, 231, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

#bede-authentication .bede-logo-badge svg {
    width: 32px;
    height: 32px;
    fill: #ffffff;
}

#bede-authentication .bede-header-title h1 {
    font-size: 22px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.5px;
}

#bede-authentication .bede-header-title p {
    font-size: 13px;
    color: var(--text-muted);
}

#bede-authentication .bede-quick-stats {
    display: flex;
    gap: 12px;
}

#bede-authentication .bede-stat-pill {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

#bede-authentication .bede-stat-pill strong {
    color: var(--zb-secondary);
}

/* Navigation Tabs */
#bede-authentication .bede-nav-container {
    max-width: 1400px;
    margin: 24px auto 0;
    padding: 0 32px;
}

#bede-authentication .bede-tabs {
    display: flex;
    gap: 12px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 2px;
}

#bede-authentication .bede-tab-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 700;
    padding: 12px 24px;
    cursor: pointer;
    border-radius: 14px 14px 0 0;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

#bede-authentication .bede-tab-btn:hover {
    color: #fff;
    border-color: var(--zb-primary);
    background: rgba(108, 92, 231, 0.1);
}

#bede-authentication .bede-tab-btn.bede-tab-btn-active {
    color: #fff;
    background: var(--zb-grad-1);
    border-color: transparent;
    box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4);
}

/* Main Container */
#bede-authentication .bede-main-content {
    max-width: 1400px;
    margin: 24px auto;
    padding: 0 32px;
}

#bede-authentication .bede-tab-content {
    display: none;
}

#bede-authentication .bede-tab-content.bede-tab-content-active {
    display: block;
    animation: bedeFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

/* Grid for Authentication Cards */
#bede-authentication .bede-auth-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 20px;
}

#bede-authentication .bede-auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#bede-authentication .bede-auth-card:hover {
    border-color: var(--zb-primary);
    box-shadow: 0 12px 30px rgba(108, 92, 231, 0.2);
    transform: translateY(-4px);
}

#bede-authentication .bede-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

#bede-authentication .bede-card-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

#bede-authentication .bede-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(108, 92, 231, 0.15);
    color: var(--zb-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

#bede-authentication .bede-card-title {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
}

#bede-authentication .bede-badge-call-type {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

#bede-authentication .bede-badge-same-num {
    background: rgba(0, 206, 201, 0.15);
    color: var(--zb-secondary);
    border: 1px solid rgba(0, 206, 201, 0.3);
}

#bede-authentication .bede-badge-flex-num {
    background: rgba(241, 196, 15, 0.15);
    color: var(--accent-amber);
    border: 1px solid rgba(241, 196, 15, 0.3);
}

#bede-authentication .bede-section-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--zb-secondary);
    margin-top: 12px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

#bede-authentication .bede-questions-list {
    list-style: none;
    margin-bottom: 16px;
}

#bede-authentication .bede-questions-list li {
    font-size: 13.5px;
    color: #cbd5e1;
    padding: 6px 12px;
    margin-bottom: 6px;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 10px;
    border-right: 3px solid var(--zb-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

#bede-authentication .bede-questions-list li i {
    font-size: 11px;
    color: var(--zb-secondary);
}

#bede-authentication .bede-prohibition-box {
    background: rgba(255, 118, 117, 0.12);
    border: 1px solid rgba(255, 118, 117, 0.3);
    border-radius: 12px;
    padding: 12px;
    font-size: 12.5px;
    color: #fca5a5;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
}

#bede-authentication .bede-prohibition-box i {
    color: var(--zb-accent);
    font-size: 16px;
    margin-top: 2px;
}

#bede-authentication .bede-note-box {
    background: rgba(0, 206, 201, 0.08);
    border: 1px solid rgba(0, 206, 201, 0.3);
    border-radius: 12px;
    padding: 12px;
    font-size: 12.5px;
    color: #7ee8fa;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
}

/* Verification Interactive Simulator Widget */
#bede-authentication .bede-simulator-section {
    background: var(--bg-card);
    border: 1px solid var(--zb-primary);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 28px;
    box-shadow: 0 10px 30px rgba(108, 92, 231, 0.15);
}

#bede-authentication .bede-sim-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

#bede-authentication .bede-sim-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--zb-secondary);
    display: flex;
    align-items: center;
    gap: 10px;
}

#bede-authentication .bede-sim-controls {
    display: flex;
    gap: 12px;
    width: 100%;
    max-width: 500px;
}

#bede-authentication .bede-sim-select {
    flex: 1;
    background: rgba(15, 23, 42, 0.8);
    color: #fff;
    border: 1px solid var(--border-color);
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    outline: none;
}

#bede-authentication .bede-sim-select:focus {
    border-color: var(--zb-primary);
}

#bede-authentication .bede-checklist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

#bede-authentication .bede-check-item {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--border-color);
    padding: 12px 16px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s;
}

#bede-authentication .bede-check-item:hover {
    background: rgba(255,255,255,0.06);
    border-color: var(--zb-primary);
}

#bede-authentication .bede-check-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--zb-primary);
    cursor: pointer;
}

#bede-authentication .bede-sim-status-banner {
    margin-top: 16px;
    padding: 14px;
    border-radius: 12px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s;
}

#bede-authentication .bede-status-pass {
    background: rgba(0, 184, 148, 0.2);
    border: 1px solid var(--zb-secondary);
    color: #6ee7b7;
}

#bede-authentication .bede-status-fail {
    background: rgba(255, 118, 117, 0.2);
    border: 1px solid var(--zb-accent);
    color: #fca5a5;
}

/* Wrap-up Codes Table & Search */
#bede-authentication .bede-search-bar-container {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

#bede-authentication .bede-search-input-wrapper {
    flex: 1;
    position: relative;
    min-width: 280px;
}

#bede-authentication .bede-search-input-wrapper i {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

#bede-authentication .bede-search-input {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 14px 44px 14px 16px;
    border-radius: 14px;
    color: #fff;
    font-size: 15px;
    outline: none;
    transition: all 0.3s;
}

#bede-authentication .bede-search-input:focus {
    border-color: var(--zb-primary);
    box-shadow: 0 0 15px rgba(108, 92, 231, 0.3);
}

#bede-authentication .bede-table-responsive {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

#bede-authentication .bede-codes-table {
    width: 100%;
    border-collapse: collapse;
    text-align: right;
}

#bede-authentication .bede-codes-table th {
    background: rgba(15, 23, 42, 0.8);
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 800;
    color: var(--zb-secondary);
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
}

#bede-authentication .bede-codes-table td {
    padding: 14px 20px;
    font-size: 14px;
    color: var(--text-main);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.2s;
}

#bede-authentication .bede-codes-table tbody tr:hover {
    background: rgba(108, 92, 231, 0.08);
}

#bede-authentication .bede-code-number {
    font-weight: 800;
    color: var(--zb-secondary);
    font-family: monospace;
    font-size: 15px;
    width: 60px;
    text-align: center;
}

#bede-authentication .bede-queue-badge {
    background: rgba(108, 92, 231, 0.15);
    color: #a29bfe;
    border: 1px solid rgba(108, 92, 231, 0.3);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
}

#bede-authentication .bede-code-en {
    font-family: system-ui, -apple-system, sans-serif;
    direction: ltr;
    text-align: left;
    color: #cbd5e1;
    font-weight: 500;
}

#bede-authentication .bede-copy-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 6px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#bede-authentication .bede-copy-btn:hover {
    background: var(--zb-grad-1);
    color: #fff;
    border-color: transparent;
    font-weight: 700;
}

/* Toast Notification */
#bede-authentication .bede-toast {
    position: fixed;
    bottom: 30px;
    left: 30px;
    background: var(--zb-grad-2);
    color: #000;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 800;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    display: none;
    align-items: center;
    gap: 10px;
    z-index: 1000;
    animation: bedeSlideUp 0.3s ease;
}

@keyframes bedeSlideUp {
    from { transform: translateY(100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 768px) {
    #bede-authentication .bede-header, 
    #bede-authentication .bede-nav-container, 
    #bede-authentication .bede-main-content {
        padding-left: 16px;
        padding-right: 16px;
    }
    #bede-authentication .bede-auth-grid {
        grid-template-columns: 1fr;
    }
    #bede-authentication .bede-sim-controls {
        flex-direction: column;
    }
}
#siteLogo.logo {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  text-decoration: none;
  gap: 6px;
  flex-shrink: 0;
}

#siteLogo .logo-icon {
  width: 42px !important;
  height: 42px !important;
  object-fit: contain;
  flex-shrink: 0;
}

#siteLogo .logo-text {
  font-size: 17px;
  font-weight: 800;
  background: var(--purple-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  white-space: nowrap;
  line-height: 1.1;
}

/* ==========================================================
   PREPAID QUOTA - LIGHT & DARK MODE OPTIMIZED (GLASS)
   ========================================================== */

/* 1. الوضع الافتراضي / الفاتح (Light Mode) */
#prepaid-quota,
#prepaid-quota[data-theme="light"],
.light #prepaid-quota {
  --pq-bg-section: rgba(255, 255, 255, 0.9);
  --pq-bg-card: #f8fafc;
  --pq-bg-hover: #f1f5f9;
  --pq-bg-input: #ffffff;
  --pq-bg-th: #f1f5f9;
  
  --pq-primary: #7c3aed;
  --pq-secondary: #0284c7;
  --pq-border: rgba(124, 58, 237, 0.25);
  --pq-border-light: #e2e8f0;
  
  /* ألوان نصوص داكنة وواضحة جداً */
  --pq-text-main: #0f172a;      /* أسود/كحلي داكن */
  --pq-text-muted: #334155;     /* رمادي غامق عالي التباين */
  --pq-success: #166534;
  --pq-warning: #9a3412;
  --pq-tax-bg: #fffbeb;
  --pq-tax-border: #fde68a;
  
  /* تدرج عنوان يبدأ بلون داكن تماماً لضمان عدم الاختفاء */
  --pq-title-gradient: linear-gradient(135deg, #0f172a 0%, #6d28d9 100%);
  --pq-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
}

/* 2. الوضع الليلي التلقائي (Dark Mode) - يتفعل عبر النظام */
@media (prefers-color-scheme: dark) {
  #prepaid-quota {
    --pq-bg-section: rgba(18, 18, 28, 0.85);
    --pq-bg-card: rgba(255, 255, 255, 0.06);
    --pq-bg-hover: rgba(255, 255, 255, 0.12);
    --pq-bg-input: rgba(0, 0, 0, 0.6);
    --pq-bg-th: rgba(0, 0, 0, 0.6);
    
    --pq-primary: #a855f7;
    --pq-secondary: #38bdf8;
    --pq-border: rgba(168, 85, 247, 0.4);
    --pq-border-light: rgba(255, 255, 255, 0.12);
    
    --pq-text-main: #ffffff;    /* نص أبيض ناصع */
    --pq-text-muted: #cbd5e1;   /* نص فرعي رمادي فاتح */
    --pq-success: #4ade80;
    --pq-warning: #fbbf24;
    --pq-tax-bg: rgba(245, 158, 11, 0.15);
    --pq-tax-border: rgba(245, 158, 11, 0.4);
    --pq-title-gradient: linear-gradient(135deg, green 20%, #c084fc 100%);
    --pq-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  }
}

/* 3. دعم كلاسات الوضع الليلي للقوالب (.dark أو data-theme="dark") */
#prepaid-quota[data-theme="dark"],
.dark #prepaid-quota {
  --pq-bg-section: rgba(18, 18, 28, 0.85);
  --pq-bg-card: rgba(255, 255, 255, 0.06);
  --pq-bg-hover: rgba(255, 255, 255, 0.12);
  --pq-bg-input: rgba(0, 0, 0, 0.6);
  --pq-bg-th: rgba(0, 0, 0, 0.6);
  
  --pq-primary: #a855f7;
  --pq-secondary: #38bdf8;
  --pq-border: rgba(168, 85, 247, 0.4);
  --pq-border-light: rgba(255, 255, 255, 0.12);
  
  --pq-text-main: #ffffff;
  --pq-text-muted: #cbd5e1;
  --pq-success: #4ade80;
  --pq-warning: #fbbf24;
  --pq-tax-bg: rgba(245, 158, 11, 0.15);
  --pq-tax-border: rgba(245, 158, 11, 0.4);
  --pq-title-gradient: linear-gradient(135deg, #ffffff 20%, #c084fc 100%);
  --pq-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* ==========================================================
   STYLES IMPLEMENTATION
   ========================================================== */

#prepaid-quota {
  background: transparent !important;
  color: var(--pq-text-main);
  padding: 20px 0;
  max-width: 1280px;
  margin: 0 auto;
  direction: rtl;
  font-family: 'Cairo', system-ui, -apple-system, sans-serif;
}

#prepaid-quota * {
  box-sizing: border-box;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

#prepaid-quota .pq-content-relative {
  position: relative;
  z-index: 1;
}

/* Header Styles */
#prepaid-quota .pq-header {
  text-align: center;
  margin-bottom: 35px;
}

#prepaid-quota .pq-badge {
  display: inline-block;
  background: linear-gradient(90deg, var(--pq-primary), var(--pq-secondary));
  color: #ffffff !important;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 6px 18px;
  border-radius: 20px;
  margin-bottom: 15px;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

#prepaid-quota .pq-title {
  font-size: 2.3rem;
  font-weight: 900;
  margin: 10px 0;
  text-shadow: none;

  /* 1. لون احتياطي للمتصفحات التي لا تدعم التدرج النصي */
  color: var(--pq-text-main);

  /* 2. تطبيق التدرج النصي بدون تعارض */
  background: var(--pq-title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#prepaid-quota .pq-subtitle {
  color: var(--pq-text-muted) !important;
  font-size: 1.05rem;
  font-weight: 700;
  max-width: 750px;
  margin: 0 auto;
  line-height: 1.6;
  opacity: 1 !important;
}

/* Search Box */
#prepaid-quota .pq-search-box {
  margin-bottom: 25px;
  display: flex;
  justify-content: center;
}

#prepaid-quota .pq-input-wrapper {
  position: relative;
  width: 100%;
  max-width: 600px;
}

#prepaid-quota .pq-search-icon {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pq-secondary);
}

#prepaid-quota #prepaidQuotaSearchInput {
  width: 100%;
  padding: 14px 50px 14px 20px;
  background: var(--pq-bg-input);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid var(--pq-border);
  border-radius: 50px;
  color: var(--pq-text-main);
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  outline: none;
  box-shadow: var(--pq-shadow);
}

#prepaid-quota #prepaidQuotaSearchInput::placeholder {
  color: var(--pq-text-muted);
  opacity: 0.75;
}

#prepaid-quota #prepaidQuotaSearchInput:focus {
  border-color: var(--pq-secondary);
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.3);
}

/* Table Section */
#prepaid-quota .pq-table-container {
  background: var(--pq-bg-section);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--pq-border);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 35px;
  box-shadow: var(--pq-shadow);
}

#prepaid-quota .pq-table-wrapper {
  overflow-x: auto;
  border-radius: 12px;
}

#prepaid-quota table.pq-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  text-align: right;
}

#prepaid-quota table.pq-table th {
  background: var(--pq-bg-th);
  color: var(--pq-secondary);
  padding: 16px 20px;
  font-size: 0.95rem;
  font-weight: 800;
  white-space: nowrap;
  border-bottom: 2px solid var(--pq-border);
}

#prepaid-quota table.pq-table th:first-child { border-radius: 0 10px 10px 0; }
#prepaid-quota table.pq-table th:last-child { border-radius: 10px 0 0 10px; }

#prepaid-quota table.pq-table tbody tr {
  background: var(--pq-bg-card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#prepaid-quota table.pq-table tbody tr:hover {
  background: var(--pq-bg-hover);
  transform: translateY(-2px);
}

#prepaid-quota table.pq-table td {
  padding: 14px 20px;
  font-size: 0.95rem;
  color: var(--pq-text-muted);
  font-weight: 600;
  vertical-align: middle;
  border-top: 1px solid var(--pq-border-light);
  border-bottom: 1px solid var(--pq-border-light);
}

#prepaid-quota table.pq-table td:first-child {
  border-radius: 0 12px 12px 0;
  border-right: 1px solid var(--pq-border-light);
  color: var(--pq-text-main);
  font-weight: 800;
}

#prepaid-quota table.pq-table td:last-child {
  border-radius: 12px 0 0 12px;
  border-left: 1px solid var(--pq-border-light);
}

#prepaid-quota .price-exc {
  color: var(--pq-text-muted);
  font-weight: 700;
}

#prepaid-quota .price-inc b {
  color: var(--pq-success);
  font-size: 1.05rem;
  font-weight: 800;
}

#prepaid-quota .pq-code-badge {
  display: inline-block;
  background: rgba(56, 189, 248, 0.12);
  color: var(--pq-secondary);
  border: 1.5px dashed var(--pq-secondary);
  padding: 4px 12px;
  border-radius: 8px;
  font-family: monospace;
  font-weight: bold;
  font-size: 0.95rem;
  direction: ltr;
}

/* Quick Check Notification */
#prepaid-quota .pq-quick-check {
  margin-top: 20px;
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid var(--pq-border);
  border-radius: 12px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

#prepaid-quota .pq-qc-icon {
  font-size: 1.2rem;
}

#prepaid-quota .pq-qc-text {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--pq-text-main);
}

/* Cards Grid */
#prepaid-quota .pq-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

#prepaid-quota .pq-card {
  background: var(--pq-bg-section);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--pq-border);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--pq-shadow);
}

#prepaid-quota .pq-card-wide {
  grid-column: 1 / -1;
}

#prepaid-quota .pq-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--pq-border-light);
}

#prepaid-quota .pq-card-icon {
  font-size: 1.4rem;
  background: var(--pq-bg-card);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--pq-border-light);
}

#prepaid-quota .pq-card-header h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0;
  color: var(--pq-text-main);
}

#prepaid-quota .pq-list {
  padding-right: 20px;
  margin: 0;
  color: var(--pq-text-muted);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.8;
}

#prepaid-quota .pq-grid-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px 20px;
}

/* Tax Notice Banner */
#prepaid-quota .pq-tax-notice {
  background: var(--pq-tax-bg);
  border: 1px solid var(--pq-tax-border);
  border-radius: 12px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--pq-warning);
  font-size: 0.95rem;
  font-weight: 700;
}

#prepaid-quota .pq-no-results {
  text-align: center;
  padding: 30px !important;
  color: var(--pq-text-muted);
  font-weight: 700;
}

/* Responsive Handling */
@media (max-width: 768px) {
  #prepaid-quota .pq-title { font-size: 1.8rem; }
  #prepaid-quota .pq-grid-list { grid-template-columns: 1fr; }
  #prepaid-quota table.pq-table th, 
  #prepaid-quota table.pq-table td { padding: 10px 12px; font-size: 0.85rem; }
}
  
    /* ========== صقل UI حضاري شامل ========== */
    .header-nav .nav-container {
      gap: 0.4rem;
    }
    .two-row-grid {
      gap: 3px 4px !important;
    }
    .nav-item .dropdown-menu .dropdown-link {
      border-radius: 8px;
      font-weight: 600;
      font-size: 0.82rem;
      padding: 0.42rem 0.65rem;
    }
    .dropdown-link:hover {
      background: linear-gradient(90deg, rgba(124, 58, 237, 0.1), rgba(99, 102, 241, 0.06)) !important;
      color: var(--primary-purple) !important;
      transform: translateX(-3px);
    }
    [dir="rtl"] .dropdown-link:hover {
      transform: translateX(3px);
    }

    .hero-search-box {
      border-radius: 999px !important;
      border-width: 1.5px !important;
      background: rgba(255,255,255,0.7) !important;
      backdrop-filter: blur(8px);
    }
    [data-theme="dark"] .hero-search-box {
      background: rgba(15, 23, 42, 0.6) !important;
    }
    .hero-search-box:focus-within {
      border-color: #7c3aed !important;
      box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15), 0 8px 24px rgba(124, 58, 237, 0.12) !important;
    }

    .suggestion-btn {
      border-radius: 999px !important;
      backdrop-filter: blur(6px);
      font-weight: 700 !important;
    }
    .suggestion-btn:hover {
      background: var(--purple-gradient) !important;
      border-color: transparent !important;
      color: #fff !important;
      box-shadow: 0 6px 18px rgba(109, 40, 217, 0.3) !important;
    }

    .home-hero-title {
      letter-spacing: -0.03em;
      filter: drop-shadow(0 2px 12px rgba(124, 58, 237, 0.15));
    }

    /* جداول: رأس متدرج وحدود أنعم */
    table thead th {
      position: sticky;
      top: 0;
      z-index: 1;
    }

    /* أزرار تسجيل الدخول */
    .ccare-btn-primary {
      background: var(--purple-gradient) !important;
      border: none !important;
      border-radius: 12px !important;
      font-weight: 800 !important;
      letter-spacing: 0.02em;
      box-shadow: 0 8px 24px rgba(109, 40, 217, 0.35) !important;
      transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }
    .ccare-btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(109, 40, 217, 0.45) !important;
    }

    .ccare-input-group input {
      border-radius: 12px !important;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
    }
    .ccare-input-group input:focus {
      box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.14) !important;
    }

    /* شريط المستخدم */
    .ccare-user-bar {
      backdrop-filter: blur(8px);
      box-shadow: 0 2px 10px rgba(124, 58, 237, 0.08);
    }
    .ccare-logout-btn {
      box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
    }

    /* تحسينات الوضع الليلي */
    [data-theme="dark"] .header-nav {
      box-shadow: 0 4px 24px rgba(0,0,0,0.35);
    }
    [data-theme="dark"] .tab-content {
      box-shadow: 0 8px 32px rgba(0,0,0,0.35);
    }
    [data-theme="dark"] .nav-link:hover {
      background: rgba(124, 58, 237, 0.2);
    }

    /* لمسة تقنية: شبكة خلفية خفيفة */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image:
        linear-gradient(rgba(124, 58, 237, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 58, 237, 0.03) 1px, transparent 1px);
      background-size: 48px 48px;
      pointer-events: none;
      z-index: 0;
      mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
      -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
    }
    .header-nav, .main-container, .ccare-overlay {
      position: relative;
      z-index: 1;
    }
    .header-nav { z-index: 1000; }
    .ccare-overlay { z-index: 999999 !important; }

    /* انتقال سلس بين الثيمات */
    body, .header-nav, .tab-content, .nav-link, .ccare-login-card,
    table, .card-bg, .home-hero-search {
      transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
    }

  
    /* ===== تك تك ساعة / إهداء / تجديد تلقائي ===== */
    .tt-hourly-panel {
      width: 100%;
      max-width: 1000px;
      margin: 28px auto 10px;
      text-align: right;
      direction: rtl;
    }
    .tt-hourly-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 18px;
      justify-content: center;
    }
    .tt-hourly-tab {
      background: #ffffff;
      color: #5b21b6;
      border: 2px solid #c4b5fd;
      border-radius: 999px;
      padding: 9px 18px;
      font-family: inherit;
      font-weight: 800;
      font-size: 0.9rem;
      cursor: pointer;
      transition: all 0.25s ease;
      box-shadow: 0 2px 8px rgba(109, 40, 217, 0.12);
    }
    .tt-hourly-tab:hover {
      background: #f5f3ff;
      border-color: #7c3aed;
      color: #4c1d95;
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(109, 40, 217, 0.2);
    }
    .tt-hourly-tab.active {
      background: linear-gradient(135deg, #6d28d9, #7c3aed);
      color: #ffffff !important;
      box-shadow: 0 6px 18px rgba(109, 40, 217, 0.4);
      border-color: #6d28d9;
    }
    .tt-hourly-panel-body { display: none; animation: ccFadeUp 0.35s ease; }
    .tt-hourly-panel-body.active { display: block; }

    .tt-badge-title {
      display: inline-block;
      background: linear-gradient(135deg, #6d28d9, #7c3aed);
      color: #fff;
      font-weight: 800;
      font-size: 0.95rem;
      padding: 8px 16px;
      border-radius: 10px;
      margin-bottom: 12px;
      box-shadow: 0 6px 16px rgba(109,40,217,0.3);
    }
    .tt-lead {
      background: rgba(255,255,255,0.92);
      color: #1e1b4b;
      padding: 14px 16px;
      border-radius: 12px;
      line-height: 1.75;
      font-size: 0.95rem;
      margin-bottom: 16px;
      border-right: 4px solid #7c3aed;
    }
    .tt-note {
      background: rgba(255,255,255,0.88);
      color: #334155;
      padding: 10px 14px;
      border-radius: 10px;
      font-size: 0.9rem;
      margin: 10px 0 16px;
    }
    .tt-table-wrap {
      overflow-x: auto;
      border-radius: 14px;
      margin-bottom: 16px;
      box-shadow: 0 10px 28px rgba(0,0,0,0.18);
    }
    table.tt-modern-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      background: #fff;
      direction: rtl;
      overflow: hidden;
      border-radius: 14px;
    }
    table.tt-modern-table th {
      background: linear-gradient(135deg, #6d28d9, #7c3aed);
      color: #fff;
      padding: 12px 10px;
      font-size: 0.88rem;
      text-align: center;
      font-weight: 700;
    }
    table.tt-modern-table td {
      padding: 11px 10px;
      text-align: center;
      font-size: 0.9rem;
      color: #1e293b;
      border-bottom: 1px solid #ede9fe;
      background: #faf5ff;
      font-weight: 600;
    }
    table.tt-modern-table tbody tr:hover td {
      background: #f3e8ff;
    }
    table.tt-modern-table.tt-compact { max-width: 360px; margin: 0 auto; }
    .tt-price-inc { color: #059669 !important; font-weight: 800 !important; }
    .tt-code {
      display: inline-block;
      direction: ltr;
      font-family: ui-monospace, monospace;
      background: #ede9fe;
      color: #5b21b6;
      padding: 2px 8px;
      border-radius: 6px;
      font-weight: 800;
      letter-spacing: 0.3px;
    }
    .tt-info-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 14px;
      margin-bottom: 14px;
    }
    .tt-card {
      background: rgba(255,255,255,0.94);
      border-radius: 14px;
      padding: 16px 18px;
      color: #1e293b;
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
      margin-bottom: 14px;
      border: 1px solid rgba(124,58,237,0.12);
    }
    .tt-card h3 {
      color: #6d28d9;
      font-size: 1.05rem;
      margin: 0 0 10px;
      font-weight: 800;
      border-bottom: 2px solid #ede9fe;
      padding-bottom: 6px;
    }
    .tt-card ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .tt-card ul li {
      position: relative;
      padding-right: 22px;
      margin-bottom: 8px;
      line-height: 1.65;
      font-size: 0.9rem;
      color: #334155;
    }
    .tt-card ul li::before {
      content: '✓';
      position: absolute;
      right: 0;
      top: 0;
      color: #7c3aed;
      font-weight: 800;
    }
    .tt-card p, .tt-sub {
      font-size: 0.9rem;
      line-height: 1.7;
      color: #334155;
      margin: 0.4rem 0;
    }
    .tt-flow {
      display: flex;
      align-items: stretch;
      gap: 16px;
      margin-top: 12px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .tt-flow-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      min-width: 200px;
    }
    .tt-node {
      background: #fff;
      border: 2px solid #7c3aed;
      border-radius: 10px;
      padding: 8px 14px;
      font-size: 0.85rem;
      font-weight: 700;
      color: #1e1b4b;
      text-align: center;
      min-width: 180px;
      box-shadow: 0 4px 12px rgba(124,58,237,0.1);
    }
    .tt-node.tt-high { border-color: #06b6d4; background: #ecfeff; }
    .tt-node.tt-mid { border-color: #7c3aed; background: #f5f3ff; }
    .tt-arrow { color: #7c3aed; font-size: 1.1rem; font-weight: 800; }
    .tt-priority-rail {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 4px 0;
      min-height: 160px;
    }
    .tt-h, .tt-l {
      background: #38bdf8;
      color: #fff;
      font-weight: 800;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.85rem;
      box-shadow: 0 4px 10px rgba(56,189,248,0.35);
    }
    .tt-rail {
      flex: 1;
      width: 4px;
      background: linear-gradient(#38bdf8, #6366f1);
      border-radius: 4px;
      margin: 6px 0;
      min-height: 80px;
    }
    .tt-flow-diamond {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      margin-top: 10px;
      padding-left: 50px;
    }
    .tt-diamond-row {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .tt-rail-side {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
    }
    .tt-example-flow {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 10px;
    }
    .tt-ex-box {
      border: 2px solid #7c3aed;
      background: #faf5ff;
      border-radius: 10px;
      padding: 12px 14px;
      font-weight: 700;
      font-size: 0.85rem;
      color: #1e1b4b;
      text-align: center;
      max-width: 180px;
    }
    .tt-ex-oval {
      border: 2px solid #06b6d4;
      background: #ecfeff;
      border-radius: 50%;
      width: 130px;
      height: 130px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-weight: 800;
      font-size: 0.82rem;
      color: #0e7490;
      padding: 10px;
    }
    .tt-ex-plus {
      font-size: 1.8rem;
      font-weight: 900;
      color: #7c3aed;
    }
    .tt-ex-arrow {
      font-size: 0.8rem;
      font-weight: 700;
      color: #6366f1;
      background: #eef2ff;
      padding: 6px 10px;
      border-radius: 8px;
    }
    @media (max-width: 640px) {
      .tt-hourly-tab { font-size: 0.78rem; padding: 7px 12px; }
      .tt-node { min-width: 140px; font-size: 0.78rem; }
    }

  
    #prepaid-taktik.tab-content {
      overflow: visible !important;
    }
    #prepaid-taktik.tab-content:not(.active) {
      display: none !important;
    }
    #prepaid-taktik.tab-content.active {
      display: block !important;
    }
    /* ضمان إخفاء لوحات تك تك ساعة إذا ظهرت خارج السياق */
    body:not(.x) .tt-hourly-panel {
      /* inherits visibility from parent tab */
      visibility: inherit;
    }

  
    /* ===== زر تك تك العائم — فخم مع إضاءة وحركة ===== */
    @keyframes ttFabPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.5), 0 8px 22px rgba(234, 88, 12, 0.45); }
      50% { box-shadow: 0 0 0 10px rgba(249, 115, 22, 0), 0 12px 28px rgba(234, 88, 12, 0.55); }
    }
    @keyframes ttFabShine {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    @keyframes ttPanelIn {
      from { opacity: 0; transform: translateY(16px) scale(0.94); filter: blur(4px); }
      to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    }
    @keyframes ttGlowBorder {
      0%, 100% { border-color: rgba(167, 139, 250, 0.45); box-shadow: 0 20px 50px rgba(91, 33, 182, 0.22), 0 0 0 1px rgba(196, 181, 253, 0.35), inset 0 1px 0 rgba(255,255,255,0.7); }
      50% { border-color: rgba(196, 181, 253, 0.85); box-shadow: 0 24px 60px rgba(109, 40, 217, 0.3), 0 0 24px rgba(167, 139, 250, 0.35), inset 0 1px 0 rgba(255,255,255,0.85); }
    }
    .tt-fab-root {
      position: fixed;
      bottom: 168px;
      left: 22px;
      z-index: 10000;
      direction: rtl;
      font-family: inherit;
      overflow: visible;
    }
    .tt-fab-root.is-hidden {
      display: none !important;
    }
    .tt-fab-btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      padding: 0;
      gap: 0;
      background: linear-gradient(145deg, #f59e0b 0%, #f97316 45%, #ea580c 100%);
      background-size: 200% 200%;
      animation: ttFabPulse 2.8s ease-in-out infinite, ttFabShine 6s ease infinite;
      color: #fff;
      border: 2px solid rgba(255,255,255,0.4);
      border-radius: 50%;
      font-family: inherit;
      font-weight: 800;
      font-size: 0;
      letter-spacing: 0;
      cursor: pointer;
      overflow: hidden;
      box-shadow: 0 8px 22px rgba(234, 88, 12, 0.45), 0 0 0 0 rgba(249, 115, 22, 0.35);
      transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease, box-shadow 0.25s ease;
    }
    .tt-fab-btn > span:not(.tt-fab-icon) {
      display: none !important;
    }
    .tt-fab-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
      transform: translateX(-120%);
      transition: transform 0.6s ease;
    }
    .tt-fab-btn:hover::before {
      transform: translateX(120%);
    }
    .tt-fab-btn:hover {
      transform: translateY(-3px) scale(1.1);
      filter: brightness(1.08);
      animation-play-state: paused;
      box-shadow: 0 10px 28px rgba(234, 88, 12, 0.55), 0 0 0 4px rgba(249, 115, 22, 0.2);
    }
    .tt-fab-btn:active {
      transform: translateY(-1px) scale(0.96);
    }
    .tt-fab-btn .tt-fab-icon {
      font-size: 1.35rem;
      line-height: 1;
      filter: drop-shadow(0 0 6px rgba(255,255,255,0.75));
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .tt-fab-panel {
      position: fixed;
      /* يظهر فوق زر تك تك وضمن الشاشة مع تمرير كامل */
      bottom: 220px;
      left: 22px;
      width: min(420px, calc(100vw - 28px));
      max-height: calc(100vh - 240px);
      min-height: 280px;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      background: rgba(255,255,255,0.42);
      backdrop-filter: blur(14px) saturate(1.2);
      -webkit-backdrop-filter: blur(14px) saturate(1.2);
      border-radius: 16px;
      border: 1.5px solid rgba(167, 139, 250, 0.5);
      padding: 12px 14px 14px;
      text-align: right;
      direction: rtl;
      animation: ttPanelIn 0.35s cubic-bezier(0.22, 1, 0.36, 1), ttGlowBorder 4s ease-in-out infinite;
      z-index: 10001;
      box-sizing: border-box;
    }
    .tt-fab-panel .home-tt-table-wrap {
      max-height: none;
      margin-bottom: 4px;
    }
    .tt-fab-panel .home-tt-table td {
      padding: 8px 6px !important;
      font-size: 0.8rem !important;
    }
    .tt-fab-panel .home-tt-table th {
      padding: 8px 6px !important;
      font-size: 0.74rem !important;
    }
    .tt-fab-panel .home-tt-more {
      margin-top: 10px !important;
      margin-bottom: 2px;
    }
    .tt-fab-panel::before {
      content: '';
      position: absolute;
      top: -40%;
      right: -20%;
      width: 180px;
      height: 180px;
      background: radial-gradient(circle, rgba(167, 139, 250, 0.35) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
    }
    .tt-fab-panel::after {
      content: '';
      position: absolute;
      bottom: -30%;
      left: -15%;
      width: 140px;
      height: 140px;
      background: radial-gradient(circle, rgba(99, 102, 241, 0.22) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
    }
    .tt-fab-panel[hidden] { display: none !important; }
    [data-theme="dark"] .tt-fab-panel {
      background: rgba(15,23,42,0.5) !important;
      border-color: rgba(167,139,250,0.35);
    }
    [data-theme="dark"] .ccare-ai-panel {
      background: rgba(15,23,42,0.5) !important;
      border-color: rgba(167,139,250,0.3);
    }

    .tt-fab-panel {
      padding-bottom: 8px;
      scrollbar-width: thin;
      scrollbar-color: #a78bfa transparent;
    }
    .tt-fab-panel::-webkit-scrollbar { width: 6px; }
    .tt-fab-panel::-webkit-scrollbar-thumb {
      background: rgba(124,58,237,0.45);
      border-radius: 8px;
    }
    .tt-fab-panel .home-tt-table-wrap {
      max-height: none !important;
      overflow: visible !important;
    }
    .tt-fab-panel .home-tt-more {
      margin-bottom: 6px;
      flex-shrink: 0;
    }

    .tt-fab-panel > * { position: relative; z-index: 1; }
    .tt-fab-panel .home-tt-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
    }
    .tt-fab-panel .home-tt-panel-head h3 {
      margin: 0;
      background: linear-gradient(135deg, #5b21b6, #7c3aed);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 0.92rem;
      font-weight: 800;
    }
    .tt-fab-panel .home-tt-close {
      background: linear-gradient(135deg, #ede9fe, #f5f3ff);
      border: 1px solid rgba(167, 139, 250, 0.4);
      width: 28px;
      height: 28px;
      border-radius: 50%;
      font-size: 1.05rem;
      color: #6d28d9;
      cursor: pointer;
      font-weight: 700;
      line-height: 1;
      transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }
    .tt-fab-panel .home-tt-close:hover {
      transform: rotate(90deg) scale(1.08);
      background: #ddd6fe;
      box-shadow: 0 4px 12px rgba(109, 40, 217, 0.25);
    }
    .tt-fab-panel .home-tt-remain {
      margin: 0 0 8px;
      color: #4c1d95;
      font-size: 0.78rem;
      font-weight: 600;
      background: rgba(255,255,255,0.65);
      padding: 5px 10px;
      border-radius: 8px;
      border: 1px solid rgba(196, 181, 253, 0.45);
    }
    .tt-fab-panel .home-tt-table-wrap {
      overflow-x: auto;
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(91, 33, 182, 0.12);
    }
    .tt-fab-panel .home-tt-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      direction: rtl;
      overflow: hidden;
      border-radius: 14px;
    }
    .tt-fab-panel .home-tt-table th {
      background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 55%, #8b5cf6 100%);
      color: #fff;
      padding: 7px 5px;
      font-size: 0.72rem;
      text-align: center;
      font-weight: 800;
      text-shadow: 0 1px 2px rgba(0,0,0,0.15);
    }
    .tt-fab-panel .home-tt-table th:first-child { border-radius: 0 14px 0 0; }
    .tt-fab-panel .home-tt-table th:last-child { border-radius: 14px 0 0 0; }
    .tt-fab-panel .home-tt-table td {
      padding: 6px 5px;
      text-align: center;
      font-size: 0.78rem;
      font-weight: 700;
      color: #1e1b4b;
      border-bottom: 1px solid rgba(237, 233, 254, 0.9);
      background: rgba(255,255,255,0.72);
      transition: background 0.2s ease, transform 0.2s ease;
    }
    .tt-fab-panel .home-tt-table tbody tr:hover td {
      background: rgba(237, 233, 254, 0.95);
    }
    .tt-fab-panel .home-tt-table tbody tr:last-child td { border-bottom: none; }
    .tt-fab-panel .home-tt-table tbody tr:last-child td:first-child { border-radius: 0 0 14px 0; }
    .tt-fab-panel .home-tt-table tbody tr:last-child td:last-child { border-radius: 0 0 0 14px; }
    .tt-fab-panel .tt-code {
      display: inline-block;
      direction: ltr;
      font-family: ui-monospace, monospace;
      background: linear-gradient(135deg, #ede9fe, #e0e7ff);
      color: #5b21b6;
      padding: 2px 6px;
      border-radius: 6px;
      font-weight: 800;
      font-size: 0.72rem;
      border: 1px solid rgba(167, 139, 250, 0.35);
      box-shadow: 0 2px 6px rgba(109, 40, 217, 0.1);
    }
    .tt-fab-panel .home-tt-more {
      margin-top: 8px;
      width: 100%;
      background: linear-gradient(135deg, #f5f3ff, #ede9fe);
      color: #5b21b6;
      border: 1px solid rgba(167, 139, 250, 0.55);
      border-radius: 10px;
      padding: 8px;
      font-family: inherit;
      font-weight: 800;
      font-size: 0.8rem;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }
    .tt-fab-panel .home-tt-more:hover {
      background: linear-gradient(135deg, #ede9fe, #ddd6fe);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(109, 40, 217, 0.2);
    }
    @media (max-width: 640px) {
      .tt-fab-root { bottom: 140px; left: 12px; }
      .tt-fab-btn { width: 44px; height: 44px; padding: 0; }
      .tt-fab-btn { padding: 11px 16px; font-size: 0.88rem; }
      .tt-fab-panel {
        left: 12px;
        bottom: 200px;
        width: min(100vw - 24px, 400px);
        max-height: calc(100vh - 210px);
      }
    }



  
    #home .azmif-site-footer {
      display: block;
      width: 100%;
      text-align: center;
      padding: 10px 8px 14px;
      margin-top: 12px;
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      color: rgba(100, 100, 120, 0.5);
      pointer-events: none;
      user-select: none;
      background: transparent;
    }
    [data-theme="dark"] #home .azmif-site-footer,
    body.dark-mode #home .azmif-site-footer {
      color: rgba(180, 180, 200, 0.4);
    }

    /* =========================================================
       Local UI Lock Overlay (Inactivity Lock — no Firebase signOut)
       ========================================================= */
    #lock-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      z-index: 99999;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    #lock-overlay.is-visible {
      display: flex !important;
    }
    #lock-overlay .lock-box {
      background: var(--card-bg, #ffffff);
      color: var(--text-main, #0f172a);
      border: 1px solid var(--border-color, rgba(124, 58, 237, 0.2));
      border-radius: 18px;
      padding: 2rem 2.2rem;
      max-width: 400px;
      width: 90%;
      text-align: center;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
      direction: rtl;
    }
    #lock-overlay .lock-box h2 {
      margin: 0 0 0.75rem 0;
      font-size: 1.25rem;
      font-weight: 800;
      color: var(--primary-purple, #6d28d9);
    }
    #lock-overlay .lock-box p {
      margin: 0 0 1.25rem 0;
      color: var(--text-muted, #64748b);
      font-size: 0.95rem;
      line-height: 1.5;
    }
    #lock-overlay #lock-password-input {
      width: 100%;
      padding: 0.75rem 1rem;
      border: 2px solid var(--border-color, #cbd5e1);
      border-radius: 12px;
      font-size: 1rem;
      font-family: inherit;
      background: var(--bg-color, #f8fafc);
      color: var(--text-main, #0f172a);
      text-align: center;
      outline: none;
      margin-bottom: 0.85rem;
      box-sizing: border-box;
    }
    #lock-overlay #lock-password-input:focus {
      border-color: var(--primary-purple, #6d28d9);
      box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.2);
    }
    #lock-overlay .lock-unlock-btn {
      width: 100%;
      padding: 0.8rem 1.2rem;
      border: none;
      border-radius: 12px;
      background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 45%, #a855f7 100%);
      color: #fff;
      font-size: 1rem;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    #lock-overlay .lock-unlock-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 20px rgba(109, 40, 217, 0.35);
    }
    #lock-overlay #lock-error {
      display: none;
      color: #ef4444;
      font-size: 0.88rem;
      font-weight: 600;
      margin-bottom: 0.75rem;
    }
    #ccaree-content {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }
    #ccaree-content.is-locked-hidden {
      display: none !important;
    }


/* ===== <style id="ccare-logout-icon-fix"> ===== */
/* إصلاح أيقونة الخروج الناقصة + إظهار واضح */
#ccare-logoutBtn.ccare-logout-btn,
button.ccare-logout-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  line-height: 1 !important;
  box-shadow: 0 3px 12px rgba(225, 29, 72, 0.4) !important;
}
#ccare-logoutBtn.ccare-logout-btn i,
button.ccare-logout-btn i {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  -webkit-text-fill-color: #ffffff !important;
}
#ccare-logoutBtn.ccare-logout-btn .ccare-logout-text {
  display: none !important;
}
/* إن فشل Font Awesome: سهم خروج عبر CSS */
#ccare-logoutBtn.ccare-logout-btn i.fa-arrow-right-from-bracket:before {
  content: "\f2f5" !important; /* fa-right-from-bracket unicode in FA6 */
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  color: #fff !important;
}


/* ===== <style id="dealers-ui-v2"> ===== */
#dealers .dealers-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(109,40,217,0.12), rgba(6,182,212,0.08));
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}
#dealers .dealers-hero h1 {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#dealers .dealers-hero p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}
#dealers .dealers-stat {
  background: linear-gradient(135deg, #6d28d9, #7c3aed);
  color: #fff;
  font-weight: 800;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-size: 0.95rem;
  box-shadow: 0 4px 14px rgba(109,40,217,0.35);
}
#dealers .dealers-toolbar { margin-bottom: 0.85rem; }
#dealers .dealers-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0.35rem 0.5rem 0.35rem 0.75rem;
  margin-bottom: 0.75rem;
}
#dealers .dealers-search > i { color: var(--text-muted); }
#dealers .dealers-search input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  color: var(--text-main);
  font-size: 0.95rem;
  padding: 0.55rem 0.25rem;
  font-family: inherit;
}
#dealers .dealers-search button {
  background: linear-gradient(135deg, #6d28d9, #7c3aed);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.55rem 1rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
#dealers .dealers-region-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
#dealers .reg-filter {
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: 0.2s;
}
#dealers .reg-filter:hover { border-color: #7c3aed; color: #7c3aed; }
#dealers .reg-filter.active {
  background: linear-gradient(135deg, #6d28d9, #7c3aed);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(109,40,217,0.3);
}
#dealers .dealers-table-container {
  border-radius: 14px;
  overflow: auto;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  max-height: 70vh;
}
#dealers .dealers-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg);
}
#dealers .dealers-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(135deg, #5b21b6, #6d28d9) !important;
  color: #fff !important;
  font-weight: 800;
  padding: 0.85rem 0.9rem;
  text-align: right;
  font-size: 0.88rem;
  white-space: nowrap;
}
#dealers .dealers-table tbody td {
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main);
  font-size: 0.9rem;
  vertical-align: middle;
}
#dealers .dealers-table tbody tr:nth-child(even) td {
  background: rgba(109,40,217,0.04);
}
#dealers .dealers-table tbody tr:hover td {
  background: rgba(109,40,217,0.1);
}
#dealers .dl-num {
  text-align: center;
  font-weight: 800;
  color: var(--text-muted);
  width: 48px;
}
#dealers .dl-name strong { font-weight: 800; color: var(--text-main); }
#dealers .dl-city { font-weight: 700; white-space: nowrap; }
#dealers .dl-loc { color: var(--text-muted); line-height: 1.45; }
#dealers .region-badge {
  display: inline-block;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}
#dealers .reg-east { background: #dbeafe; color: #1d4ed8; }
#dealers .reg-darfur { background: #fef3c7; color: #b45309; }
#dealers .reg-redsea { background: #ffe4e6; color: #be123c; }
#dealers .reg-khartoum { background: #ede9fe; color: #6d28d9; }
#dealers .reg-west { background: #d1fae5; color: #047857; }
#dealers .reg-central { background: #e0e7ff; color: #3730a3; }
#dealers .reg-north { background: #cffafe; color: #0e7490; }
#dealers .dealers-result-hint {
  margin-top: 0.65rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}
[data-theme="dark"] #dealers .reg-east { background: rgba(29,78,216,0.25); color: #93c5fd; }
[data-theme="dark"] #dealers .reg-darfur { background: rgba(180,83,9,0.25); color: #fcd34d; }
[data-theme="dark"] #dealers .reg-redsea { background: rgba(190,18,60,0.25); color: #fda4af; }
[data-theme="dark"] #dealers .reg-khartoum { background: rgba(109,40,217,0.3); color: #c4b5fd; }
[data-theme="dark"] #dealers .reg-west { background: rgba(4,120,87,0.25); color: #6ee7b7; }
[data-theme="dark"] #dealers .reg-central { background: rgba(55,48,163,0.3); color: #a5b4fc; }
[data-theme="dark"] #dealers .reg-north { background: rgba(14,116,144,0.3); color: #67e8f9; }
[data-theme="dark"] #dealers .dealers-table tbody tr:nth-child(even) td {
  background: rgba(255,255,255,0.03);
}
[data-theme="dark"] #dealers .dealers-table tbody tr:hover td {
  background: rgba(124,58,237,0.15);
}


/* ===== <style id="shops-ui-v2"> ===== */
#shops .shops-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(8,145,178,0.14), rgba(16,185,129,0.08));
  border: 1px solid rgba(8,145,178,0.25);
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}
#shops .shops-hero h1 {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#shops .shops-hero h1 i { color: #0891b2; }
#shops .shops-hero p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}
#shops .shops-stat {
  background: linear-gradient(135deg, #0e7490, #0891b2);
  color: #fff;
  font-weight: 800;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-size: 0.95rem;
  box-shadow: 0 4px 14px rgba(8,145,178,0.35);
}
#shops .shops-toolbar { margin-bottom: 0.85rem; }
#shops .shops-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--card-bg);
  border: 1px solid rgba(8,145,178,0.28);
  border-radius: 12px;
  padding: 0.35rem 0.5rem 0.35rem 0.75rem;
  margin-bottom: 0.75rem;
}
#shops .shops-search > i { color: #0891b2; }
#shops .shops-search input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  color: var(--text-main);
  font-size: 0.95rem;
  padding: 0.55rem 0.25rem;
  font-family: inherit;
}
#shops .shops-search button {
  background: linear-gradient(135deg, #0e7490, #0891b2);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.55rem 1rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
#shops .shops-region-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
#shops .shop-reg-filter {
  border: 1px solid rgba(8,145,178,0.3);
  background: var(--card-bg);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: 0.2s;
}
#shops .shop-reg-filter:hover { border-color: #0891b2; color: #0891b2; }
#shops .shop-reg-filter.active {
  background: linear-gradient(135deg, #0e7490, #06b6d4);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(8,145,178,0.35);
}
#shops .shops-table-container {
  border-radius: 14px;
  overflow: auto;
  border: 1px solid rgba(8,145,178,0.22);
  box-shadow: var(--shadow-sm);
  max-height: 70vh;
}
#shops .shops-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg);
}
#shops .shops-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(135deg, #0e7490, #0891b2) !important;
  color: #fff !important;
  font-weight: 800;
  padding: 0.8rem 0.75rem;
  text-align: right;
  font-size: 0.84rem;
  white-space: nowrap;
}
#shops .shops-table tbody td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main);
  font-size: 0.88rem;
  vertical-align: middle;
}
#shops .shops-table tbody tr:nth-child(even) td {
  background: rgba(8,145,178,0.05);
}
#shops .shops-table tbody tr:hover td {
  background: rgba(8,145,178,0.12);
}
#shops .sh-num {
  text-align: center;
  font-weight: 800;
  color: var(--text-muted);
  width: 48px;
}
#shops .sh-name strong { font-weight: 800; }
#shops .sh-city, #shops .sh-state { font-weight: 700; white-space: nowrap; }
#shops .sh-hours { font-weight: 600; color: #0e7490; white-space: nowrap; }
#shops .sh-evening, #shops .sh-friday { font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; }
#shops .sh-addr { color: var(--text-muted); line-height: 1.45; }
#shops .shop-region-badge {
  display: inline-block;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}
#shops .shop-reg-central { background: #e0e7ff; color: #3730a3; }
#shops .shop-reg-midwest { background: #d1fae5; color: #047857; }
#shops .shop-reg-redsea { background: #ffe4e6; color: #be123c; }
#shops .shop-reg-khartoum { background: #cffafe; color: #0e7490; }
#shops .shop-reg-east { background: #dbeafe; color: #1d4ed8; }
#shops .shop-reg-north { background: #fef3c7; color: #b45309; }
#shops .shops-result-hint {
  margin-top: 0.65rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}
[data-theme="dark"] #shops .sh-hours { color: #22d3ee; }
[data-theme="dark"] #shops .shop-reg-central { background: rgba(55,48,163,0.3); color: #a5b4fc; }
[data-theme="dark"] #shops .shop-reg-midwest { background: rgba(4,120,87,0.25); color: #6ee7b7; }
[data-theme="dark"] #shops .shop-reg-redsea { background: rgba(190,18,60,0.25); color: #fda4af; }
[data-theme="dark"] #shops .shop-reg-khartoum { background: rgba(14,116,144,0.3); color: #67e8f9; }
[data-theme="dark"] #shops .shop-reg-east { background: rgba(29,78,216,0.25); color: #93c5fd; }
[data-theme="dark"] #shops .shop-reg-north { background: rgba(180,83,9,0.25); color: #fcd34d; }
[data-theme="dark"] #shops .shops-table tbody tr:nth-child(even) td {
  background: rgba(255,255,255,0.03);
}
[data-theme="dark"] #shops .shops-table tbody tr:hover td {
  background: rgba(8,145,178,0.15);
}
[data-theme="dark"] #shops .shops-hero {
  background: linear-gradient(135deg, rgba(8,145,178,0.2), rgba(16,185,129,0.1));
  border-color: rgba(34,211,238,0.25);
}


/* ===== <style id="rbt-tones-lock-css"> ===== */
.rbt-tones-lock-gate {
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  position: relative;
}
.rbt-tones-lock-card {
  position: relative;
  width: min(440px, 100%);
  text-align: center;
  background: linear-gradient(160deg, rgba(30,41,59,0.95), rgba(15,23,42,0.98));
  border: 1px solid rgba(167,139,250,0.35);
  border-radius: 24px;
  padding: 2.4rem 1.6rem 1.8rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 0 40px rgba(124,58,237,0.15);
  overflow: hidden;
}
.rbt-tones-lock-glow {
  position: absolute;
  inset: -40% -20% auto;
  height: 180px;
  background: radial-gradient(circle, rgba(167,139,250,0.35), transparent 70%);
  pointer-events: none;
}
.rbt-tones-lock-icon {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #06b6d4);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(124,58,237,0.4);
}
.rbt-tones-lock-icon > .fa-music {
  font-size: 2rem;
  color: #fff;
}
.rbt-tones-lock-badge {
  position: absolute;
  bottom: -2px;
  left: -2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #0f172a;
  border: 2px solid #a78bfa;
  color: #fbbf24;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rbt-tones-soon {
  margin: 0 0 0.4rem;
  font-size: clamp(2.8rem, 8vw, 4.2rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, #e9d5ff 0%, #a78bfa 40%, #22d3ee 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  line-height: 1.1;
  animation: rbtSoonPulse 2.8s ease-in-out infinite;
}
@keyframes rbtSoonPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(167,139,250,0.35)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 18px rgba(34,211,238,0.45)); transform: scale(1.03); }
}
.rbt-tones-soon-sub {
  margin: 0 0 1.6rem;
  color: #94a3b8;
  font-size: 1rem;
  font-weight: 600;
}
.rbt-tones-pass-box {
  text-align: right;
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 14px;
  padding: 0.9rem 1rem;
}
.rbt-tones-pass-box label {
  display: block;
  font-size: 0.82rem;
  color: #cbd5e1;
  font-weight: 700;
  margin-bottom: 0.45rem;
}
.rbt-tones-pass-row {
  display: flex;
  gap: 0.45rem;
}
.rbt-tones-pass-row input {
  flex: 1;
  border: 1.5px solid rgba(148,163,184,0.3);
  background: #0f172a;
  color: #f8fafc;
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
}
.rbt-tones-pass-row input:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167,139,250,0.2);
}
.rbt-tones-pass-row button {
  border: none;
  border-radius: 10px;
  padding: 0.65rem 1rem;
  background: linear-gradient(135deg, #7c3aed, #06b6d4);
  color: #fff;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.rbt-tones-pass-row button:hover { filter: brightness(1.08); }
.rbt-tones-pass-error {
  margin: 0.55rem 0 0;
  color: #fb7185;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
}
.rbt-tones-library-content[hidden] { display: none !important; }
.rbt-tones-lock-gate[hidden] { display: none !important; }

/* Light theme adjustments */
[data-theme="light"] .rbt-tones-lock-card,
:root:not([data-theme="dark"]) .rbt-tones-lock-card {
  background: linear-gradient(160deg, #ffffff, #f5f3ff);
  border-color: rgba(124,58,237,0.25);
}
[data-theme="light"] .rbt-tones-soon-sub,
:root:not([data-theme="dark"]) .rbt-tones-soon-sub { color: #64748b; }
[data-theme="light"] .rbt-tones-pass-box,
:root:not([data-theme="dark"]) .rbt-tones-pass-box {
  background: #f8fafc;
  border-color: #e2e8f0;
}
[data-theme="light"] .rbt-tones-pass-box label,
:root:not([data-theme="dark"]) .rbt-tones-pass-box label { color: #475569; }
[data-theme="light"] .rbt-tones-pass-row input,
:root:not([data-theme="dark"]) .rbt-tones-pass-row input {
  background: #fff;
  color: #0f172a;
  border-color: #cbd5e1;
}


/* ===== <style id="rbt-tones-logout-css"> ===== */
.rbt-tones-logout-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.65rem 0.9rem;
  background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(6,182,212,0.08));
  border: 1px solid rgba(167,139,250,0.3);
  border-radius: 12px;
}
.rbt-tones-unlocked-label {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-main, #e2e8f0);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.rbt-tones-unlocked-label i { color: #34d399; }
.rbt-tones-logout-btn {
  border: none;
  border-radius: 10px;
  padding: 0.5rem 0.95rem;
  background: linear-gradient(135deg, #e11d48, #f43f5e);
  color: #fff;
  font-weight: 800;
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 4px 12px rgba(225,29,72,0.3);
}
.rbt-tones-logout-btn:hover { filter: brightness(1.08); }


/* ===== <style id="theme-table-vars"> ===== */
:root, html[data-theme="light"] {
  --table-even-bg: #f8fafc;
  --table-odd-bg: #ffffff;
  --table-hover-bg: rgba(109, 40, 217, 0.1);
  --table-cell-text: #0f172a;
  --card-on-gradient-bg: rgba(255,255,255,0.95);
  --card-on-gradient-text: #0f172a;
}
html[data-theme="dark"] {
  --table-even-bg: rgba(30, 41, 59, 0.92);
  --table-odd-bg: rgba(15, 23, 42, 0.88);
  --table-hover-bg: rgba(124, 58, 237, 0.32);
  --table-cell-text: #e2e8f0;
  --card-on-gradient-bg: rgba(255,255,255,0.96);
  --card-on-gradient-text: #0f172a;
}


/* ===== <style id="theme-dark-row-fix"> ===== */
/* إصلاح خلفيات الصفوف الفاتحة فقط في الوضع الليلي — دون فرض لون نص على البطاقات */
html[data-theme="dark"] table tbody tr:nth-child(even) td,
html[data-theme="dark"] table tbody tr:nth-child(odd) td,
html[data-theme="dark"] .tab-content table tbody tr td {
  /* يُضبط لاحقاً بانتقائية أعلى للعناصر المشكلة */
}

/* استبدال الخلفيات الفاتحة المفروضة */
html[data-theme="dark"] #prepaid-quota .pq-table tbody tr:nth-child(even) td,
html[data-theme="dark"] #prepaid-gifting .gifting-table tbody tr:nth-child(even) td,
html[data-theme="dark"] #prepaid-gifting table.gifting-table tbody tr:nth-child(even) td,
html[data-theme="dark"] #prepaid-social-stream table.pss-table tbody tr:nth-child(even) td,
html[data-theme="dark"] #roaming-bundles tbody tr:nth-child(even) td,
html[data-theme="dark"] #postpaid-qouta tbody tr:nth-child(even) td,
html[data-theme="dark"] #b2b-pre-taktik tbody tr:nth-child(even) td,
html[data-theme="dark"] #b2b-post-taktik tbody tr:nth-child(even) td,
html[data-theme="dark"] #b2b-pre-taktik-hy tbody tr:nth-child(even) td,
html[data-theme="dark"] #prepaid-taktik tbody tr:nth-child(even) td,
html[data-theme="dark"] #postpaid-taktik tbody tr:nth-child(even) td,
html[data-theme="dark"] #shops table.data-table tr:nth-child(even):not(.region-header) td,
html[data-theme="dark"] table.b2b-pre-table tbody tr:nth-child(even) td,
html[data-theme="dark"] #b2b-pre-data-card-hy table.b2b-pre-table tbody tr:nth-child(even) td {
  background: rgba(30, 41, 59, 0.9) !important;
  background-color: rgba(30, 41, 59, 0.9) !important;
  color: #e2e8f0 !important;
}

html[data-theme="dark"] #prepaid-quota .pq-table tbody tr:hover td,
html[data-theme="dark"] #prepaid-gifting table tbody tr:hover td,
html[data-theme="dark"] #prepaid-social-stream table tbody tr:hover td,
html[data-theme="dark"] #roaming-bundles tbody tr:hover td,
html[data-theme="dark"] #postpaid-qouta tbody tr:hover td,
html[data-theme="dark"] #b2b-pre-taktik tbody tr:hover td,
html[data-theme="dark"] #b2b-post-taktik tbody tr:hover td,
html[data-theme="dark"] #b2b-pre-taktik-hy tbody tr:hover td,
html[data-theme="dark"] #prepaid-taktik tbody tr:hover td,
html[data-theme="dark"] #postpaid-taktik tbody tr:hover td,
html[data-theme="dark"] table.b2b-pre-table tbody tr:hover td {
  background: rgba(124, 58, 237, 0.35) !important;
  background-color: rgba(124, 58, 237, 0.35) !important;
  color: #ffffff !important;
}

/* صفوف فردية داكنة أيضاً إن كانت الجداول على خلفية متدرجة */
html[data-theme="dark"] #prepaid-taktik table tbody tr:nth-child(odd) td,
html[data-theme="dark"] #postpaid-taktik table tbody tr:nth-child(odd) td,
html[data-theme="dark"] #b2b-pre-taktik table tbody tr:nth-child(odd) td,
html[data-theme="dark"] #b2b-post-taktik table tbody tr:nth-child(odd) td,
html[data-theme="dark"] #b2b-pre-taktik-hy table tbody tr:nth-child(odd) td {
  background: rgba(15, 23, 42, 0.88) !important;
  color: #e2e8f0 !important;
}

/* بطاقات بيضاء: نص داكن دائماً (لا يتأثر بالوضع الليلي للصفحة) */
html[data-theme="dark"] .taktik-details-container,
html[data-theme="dark"] .b2b-post-taktik-details-container,
html[data-theme="dark"] .b2b-pre-taktik-details-container,
html[data-theme="dark"] [class*="taktik-details"],
html[data-theme="dark"] [class*="details-container"],
html[data-theme="dark"] .rbt-card {
  /* إن كانت الخلفية فاتحة، النص داكن */
}


/* ===== <style id="theme-card-text-fix"> ===== */
/* بطاقات بخلفية فاتحة/بيضاء → نص داكن مقروء في كل الأوضاع */
.taktik-details-container,
.b2b-post-taktik-details-container,
.b2b-pre-taktik-details-container,
.postpaid-taktik-details-container,
.prepaid-taktik-details-container,
[class*="taktik-details-container"],
[class*="details-container"][style*="background"],
.rbt-card,
.unit-calc-card,
[class*="info-card"],
[class*="rule-card"] {
  color: #0f172a !important;
}
.taktik-details-container *,
.b2b-post-taktik-details-container *,
.b2b-pre-taktik-details-container *,
.postpaid-taktik-details-container *,
.prepaid-taktik-details-container *,
[class*="taktik-details-container"] *:not(i):not(svg):not(path),
.rbt-card *:not(i):not(svg):not(path) {
  color: inherit;
}
/* عناوين داخل البطاقات الفاتحة */
.taktik-details-container h1,
.taktik-details-container h2,
.taktik-details-container h3,
.b2b-post-taktik-details-container h1,
.b2b-post-taktik-details-container h2,
.b2b-pre-taktik-details-container h2,
[class*="taktik-details"] h2,
[class*="taktik-details"] h3 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
/* قوائم القواعد */
.taktik-details-container li,
.b2b-post-taktik-details-container li,
.b2b-pre-taktik-details-container li,
[class*="taktik-details"] li,
[class*="taktik-details"] p {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
}

/* جداول تك تك: تأكيد إضافي ضد الصف الأبيض */
html[data-theme="dark"] #prepaid-taktik table:not(.tt-modern-table) tbody tr td,
html[data-theme="dark"] #postpaid-taktik table:not(.tt-modern-table) tbody tr td {
  background-clip: padding-box !important;
}


/* ===== <style id="theme-light-cards-readable"> ===== */
/* أي صندوق/بطاقة بخلفية بيضاء أو فاتحة جداً → نص داكن مقروء */
#prepaid-taktik [class*="details"],
#postpaid-taktik [class*="details"],
#b2b-pre-taktik [class*="details"],
#b2b-post-taktik [class*="details"],
#prepaid-taktik [class*="rules"],
#postpaid-taktik [class*="rules"] {
  color: #0f172a;
}
/* حاويات بيضاء شائعة داخل تك تك */
#prepaid-taktik .taktik-main-content-wrapper > div[style*="background"],
#postpaid-taktik div[style*="background: #fff"],
#postpaid-taktik div[style*="background:#fff"],
#prepaid-taktik div[style*="background: #fff"] {
  color: #0f172a !important;
}


/* ===== <style id="tt-card-force-readable"> ===== */
/* بطاقات تك تك — خصوصية أعلى من لون الـ wrapper */
html[data-theme="dark"] #prepaid-taktik .tt-card,
html[data-theme="dark"] #postpaid-taktik .tt-card,
html[data-theme="light"] #prepaid-taktik .tt-card,
html[data-theme="light"] #postpaid-taktik .tt-card,
#prepaid-taktik .tt-card,
#postpaid-taktik .tt-card,
.tt-card {
  background: rgba(255,255,255,0.96) !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
html[data-theme="dark"] #prepaid-taktik .tt-card h3,
html[data-theme="dark"] #postpaid-taktik .tt-card h3,
#prepaid-taktik .tt-card h3,
#postpaid-taktik .tt-card h3,
.tt-card h3 {
  color: #6d28d9 !important;
  -webkit-text-fill-color: #6d28d9 !important;
}
html[data-theme="dark"] #prepaid-taktik .tt-card p,
html[data-theme="dark"] #prepaid-taktik .tt-card li,
html[data-theme="dark"] #prepaid-taktik .tt-card span,
html[data-theme="dark"] #prepaid-taktik .tt-card strong,
html[data-theme="dark"] #postpaid-taktik .tt-card p,
html[data-theme="dark"] #postpaid-taktik .tt-card li,
html[data-theme="dark"] #postpaid-taktik .tt-card span,
html[data-theme="dark"] #postpaid-taktik .tt-card strong,
html[data-theme="dark"] #prepaid-taktik-wrapper .tt-card p,
html[data-theme="dark"] #prepaid-taktik-wrapper .tt-card li,
html[data-theme="dark"] #postpaid-taktik-wrapper .tt-card p,
html[data-theme="dark"] #postpaid-taktik-wrapper .tt-card li,
#prepaid-taktik .tt-card p,
#prepaid-taktik .tt-card li,
#postpaid-taktik .tt-card p,
#postpaid-taktik .tt-card li,
.tt-card p,
.tt-card li,
.tt-card span,
.tt-card strong {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
}
html[data-theme="dark"] #prepaid-taktik .tt-card bdi,
html[data-theme="dark"] #postpaid-taktik .tt-card bdi,
.tt-card bdi,
.tt-card .code-cell {
  color: #6d28d9 !important;
  -webkit-text-fill-color: #6d28d9 !important;
  background: #f5f3ff !important;
}

/* جداول تك تك ليلي / نهاري */
html[data-theme="dark"] #prepaid-taktik table:not(.tt-modern-table) tbody tr td,
html[data-theme="dark"] #postpaid-taktik table:not(.tt-modern-table) tbody tr td {
  background: #0f172a !important;
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}
html[data-theme="dark"] #prepaid-taktik table:not(.tt-modern-table) tbody tr:nth-child(even) td,
html[data-theme="dark"] #postpaid-taktik table:not(.tt-modern-table) tbody tr:nth-child(even) td {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}
html[data-theme="dark"] #prepaid-taktik table:not(.tt-modern-table) tbody tr:hover td,
html[data-theme="dark"] #postpaid-taktik table:not(.tt-modern-table) tbody tr:hover td {
  background: #5b21b6 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html[data-theme="light"] #prepaid-taktik table tbody tr td,
html:not([data-theme="dark"]) #prepaid-taktik table tbody tr td,
html[data-theme="light"] #postpaid-taktik table tbody tr td,
html:not([data-theme="dark"]) #postpaid-taktik table tbody tr td {
  background: #ffffff !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
html[data-theme="light"] #prepaid-taktik table tbody tr:nth-child(even) td,
html:not([data-theme="dark"]) #prepaid-taktik table tbody tr:nth-child(even) td {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
html[data-theme="light"] #prepaid-taktik table tbody tr:hover td,
html:not([data-theme="dark"]) #prepaid-taktik table tbody tr:hover td {
  background: #ede9fe !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}


/* ===== <style id="tt-lead-force-readable"> ===== */
/* وصف تك تك ساعة — نص داكن على خلفية بيضاء */
html[data-theme="dark"] #prepaid-taktik .tt-lead,
html[data-theme="dark"] #postpaid-taktik .tt-lead,
html[data-theme="dark"] #prepaid-taktik-wrapper .tt-lead,
html[data-theme="dark"] #postpaid-taktik-wrapper .tt-lead,
html[data-theme="dark"] #prepaid-taktik-wrapper p.tt-lead,
html[data-theme="dark"] #postpaid-taktik-wrapper p.tt-lead,
#prepaid-taktik .tt-lead,
#postpaid-taktik .tt-lead,
.tt-lead {
  background: rgba(255,255,255,0.96) !important;
  color: #1e1b4b !important;
  -webkit-text-fill-color: #1e1b4b !important;
}
html[data-theme="dark"] #prepaid-taktik .tt-lead strong,
html[data-theme="dark"] #prepaid-taktik-wrapper .tt-lead strong,
html[data-theme="dark"] #postpaid-taktik-wrapper .tt-lead strong,
#prepaid-taktik .tt-lead strong,
.tt-lead strong {
  color: #5b21b6 !important;
  -webkit-text-fill-color: #5b21b6 !important;
}

/* أي فقرة داخل صندوق أبيض تحت تك تك */
html[data-theme="dark"] #prepaid-taktik-wrapper [class*="tt-"] p,
html[data-theme="dark"] #postpaid-taktik-wrapper [class*="tt-"] p {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
}
/* استثناء: لا تلمس نص الأزرار النشطة البنفسجية */
html[data-theme="dark"] #prepaid-taktik .tt-hourly-tab.active,
html[data-theme="dark"] #postpaid-taktik .tt-hourly-tab.active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* ===== <style id="tt-modern-table-contrast"> ===== */
/* عزل جدول الباقة الساعة عن قواعد تك تك العامة */
html[data-theme="dark"] #prepaid-taktik table.tt-modern-table tbody tr td,
html[data-theme="dark"] #postpaid-taktik table.tt-modern-table tbody tr td,
html[data-theme="dark"] #prepaid-taktik-wrapper table.tt-modern-table tbody tr td,
html[data-theme="dark"] #postpaid-taktik-wrapper table.tt-modern-table tbody tr td,
html[data-theme="light"] #prepaid-taktik table.tt-modern-table tbody tr td,
html:not([data-theme="dark"]) #prepaid-taktik table.tt-modern-table tbody tr td,
#prepaid-taktik table.tt-modern-table tbody tr td,
#postpaid-taktik table.tt-modern-table tbody tr td,
#prepaid-taktik table.tt-modern-table tbody td,
#postpaid-taktik table.tt-modern-table tbody td,
table.tt-modern-table tbody td {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  background-image: none !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  border-bottom: 1px solid #e2e8f0 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
html[data-theme="dark"] #prepaid-taktik table.tt-modern-table tbody tr:nth-child(even) td,
html[data-theme="dark"] #prepaid-taktik table.tt-modern-table tbody tr:hover td,
#prepaid-taktik table.tt-modern-table tbody tr:nth-child(even) td,
#prepaid-taktik table.tt-modern-table tbody tr:hover td,
table.tt-modern-table tbody tr:hover td {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
html[data-theme="dark"] #prepaid-taktik table.tt-modern-table thead th,
#prepaid-taktik table.tt-modern-table thead th,
table.tt-modern-table thead th {
  background: linear-gradient(135deg, #6d28d9, #7c3aed) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
#prepaid-taktik table.tt-modern-table .tt-price-inc,
table.tt-modern-table td.tt-price-inc,
table.tt-modern-table .tt-price-inc {
  color: #047857 !important;
  -webkit-text-fill-color: #047857 !important;
  font-weight: 900 !important;
  font-size: 1.1rem !important;
}
#prepaid-taktik table.tt-modern-table .tt-code,
table.tt-modern-table .tt-code {
  display: inline-block !important;
  background: #ffffff !important;
  color: #5b21b6 !important;
  -webkit-text-fill-color: #5b21b6 !important;
  border: 2px solid #7c3aed !important;
  font-weight: 900 !important;
  font-size: 0.95rem !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
}


/* ===== <style id="digital-unit-book-ui"> ===== */
/* ===== Digital Unit — واجهة متطورة + قفل ===== */
#digital-unit {
  padding: 0.75rem 0.5rem 1.5rem !important;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(6, 182, 212, 0.28), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 20%, rgba(124, 58, 237, 0.22), transparent 50%),
    radial-gradient(ellipse 40% 35% at 0% 80%, rgba(236, 72, 153, 0.12), transparent 45%),
    linear-gradient(165deg, #060b16 0%, #0b1220 45%, #0f172a 100%) !important;
  min-height: calc(100vh - 90px);
  border: none !important;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
}
#digital-unit::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(6, 182, 212, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 182, 212, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  opacity: 0.55;
  animation: duGridDrift 28s linear infinite;
}
@keyframes duGridDrift {
  0% { background-position: 0 0; }
  100% { background-position: 48px 48px; }
}
@keyframes duPulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.35), 0 0 24px rgba(124, 58, 237, 0.25); }
  50% { box-shadow: 0 0 0 8px rgba(6, 182, 212, 0), 0 0 40px rgba(124, 58, 237, 0.4); }
}
@keyframes duScan {
  0% { transform: translateY(-100%); opacity: 0; }
  20% { opacity: 0.6; }
  80% { opacity: 0.35; }
  100% { transform: translateY(220%); opacity: 0; }
}
@keyframes duFloatSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* قفل التاب */
#digital-unit .du-lock-gate {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 120px);
  padding: 1.5rem 1rem;
}
#digital-unit .du-lock-gate[hidden] { display: none !important; }
#digital-unit .du-lock-card {
  width: min(460px, 96vw);
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.92));
  border: 1px solid rgba(6, 182, 212, 0.35);
  border-radius: 22px;
  padding: 2rem 1.6rem 1.75rem;
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, 0.2),
    0 24px 60px rgba(0, 0, 0, 0.45),
    0 0 50px rgba(6, 182, 212, 0.15);
  position: relative;
  overflow: hidden;
  animation: duFloatSoft 5s ease-in-out infinite;
}
#digital-unit .du-lock-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, #06b6d4, #7c3aed, #ec4899, #06b6d4);
  background-size: 200% 100%;
  animation: ccBorderFlow 4s linear infinite;
}
#digital-unit .du-lock-scan {
  position: absolute;
  left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, transparent, rgba(6, 182, 212, 0.12), transparent);
  pointer-events: none;
  animation: duScan 4.5s ease-in-out infinite;
}
#digital-unit .du-lock-icon {
  width: 78px; height: 78px;
  margin: 0 auto 1rem;
  border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(124, 58, 237, 0.25));
  border: 1px solid rgba(6, 182, 212, 0.4);
  color: #67e8f9;
  font-size: 2rem;
  animation: duPulseGlow 2.8s ease-in-out infinite;
}
#digital-unit .du-lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #a5f3fc;
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.35);
  margin-bottom: 0.85rem;
}
#digital-unit .du-lock-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #f8fafc;
  margin: 0 0 0.4rem;
}
#digital-unit .du-lock-msg {
  color: #94a3b8;
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0 0 1.25rem;
}
#digital-unit .du-lock-msg strong {
  color: #67e8f9;
  font-weight: 800;
}
#digital-unit .du-pass-box { text-align: right; }
#digital-unit .du-pass-box label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #cbd5e1;
  margin-bottom: 0.4rem;
}
#digital-unit .du-pass-row {
  display: flex;
  gap: 0.5rem;
  direction: ltr;
}
#digital-unit .du-pass-row input {
  flex: 1;
  border: 1.5px solid rgba(6, 182, 212, 0.3);
  background: rgba(15, 23, 42, 0.85);
  color: #f8fafc;
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#digital-unit .du-pass-row input:focus {
  border-color: #06b6d4;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2);
}
#digital-unit .du-pass-row button {
  border: none;
  border-radius: 12px;
  padding: 0 1.1rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  color: #0f172a;
  background: linear-gradient(135deg, #22d3ee, #06b6d4 40%, #7c3aed);
  box-shadow: 0 6px 18px rgba(6, 182, 212, 0.35);
  transition: filter 0.2s, transform 0.2s;
}
#digital-unit .du-pass-row button:hover { filter: brightness(1.08); transform: translateY(-1px); }
#digital-unit .du-pass-error {
  color: #fb7185;
  font-size: 0.88rem;
  font-weight: 700;
  margin-top: 0.65rem;
  text-align: center;
}
#digital-unit .du-pass-error[hidden] { display: none !important; }

/* محتوى التاب بعد الفتح */
#digital-unit .du-library-content[hidden] { display: none !important; }
#digital-unit .du-library-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
}

#digital-unit .du-book-shell {
  max-width: min(1480px, 100%);
  width: 100%;
  margin: 0 auto;
  perspective: none;
  padding: 0 0.35rem;
}
#digital-unit .du-book {
  display: flex;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(30, 41, 59, 0.95));
  border-radius: 18px;
  border: 1px solid rgba(6, 182, 212, 0.28);
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, 0.12),
    0 12px 32px rgba(0,0,0,0.35);
  overflow: hidden;
  min-height: 72vh;
  position: relative;
}
#digital-unit .du-book::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #06b6d4, #7c3aed, #ec4899, transparent);
  opacity: 0.9;
  pointer-events: none;
}
#digital-unit .du-spine {
  width: 10px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #06b6d4, #7c3aed 50%, #ec4899);
  box-shadow: inset -2px 0 6px rgba(0,0,0,0.25);
}
#digital-unit .du-pages {
  flex: 1;
  padding: 1.25rem 1.4rem 1.75rem;
  background:
    linear-gradient(90deg, rgba(6, 182, 212, 0.05) 0 10px, transparent 10px),
    rgba(15, 23, 42, 0.35);
  color: #e2e8f0;
  max-height: none;
  min-height: 70vh;
  overflow-y: auto;
  width: 100%;
}
#digital-unit .du-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
#digital-unit .du-unit-banner {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.18), rgba(124, 58, 237, 0.2));
  border: 1px solid rgba(6, 182, 212, 0.4);
  color: #a5f3fc;
  font-weight: 800;
  font-size: 0.92rem;
  box-shadow: 0 0 24px rgba(6, 182, 212, 0.15);
}
#digital-unit .du-unit-banner i { color: #22d3ee; }
#digital-unit .du-logout-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  border-radius: 12px;
  padding: 0.55rem 1rem;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.88rem;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  box-shadow: 0 6px 18px rgba(225, 29, 72, 0.35);
  transition: transform 0.2s, filter 0.2s;
}
#digital-unit .du-logout-tab-btn:hover {
  transform: translateY(-1px) scale(1.02);
  filter: brightness(1.06);
}

#digital-unit .du-cover {
  text-align: center;
  padding: 0.35rem 0 1rem;
  border-bottom: 1px solid rgba(6, 182, 212, 0.2);
  margin-bottom: 1rem;
}
#digital-unit .du-cover-ornament {
  color: #22d3ee;
  font-size: 1.15rem;
  letter-spacing: 0.45em;
  opacity: 0.85;
  text-shadow: 0 0 12px rgba(34, 211, 238, 0.5);
}
#digital-unit .du-cover-title {
  margin: 0.4rem 0;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 800;
  color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  text-shadow: 0 0 20px rgba(124, 58, 237, 0.35);
}
#digital-unit .du-cover-title i { color: #22d3ee; }
#digital-unit .du-cover-sub {
  margin: 0;
  color: #94a3b8;
  font-size: 0.98rem;
  font-weight: 600;
}
#digital-unit .du-cover-line {
  width: 140px;
  height: 3px;
  margin: 0.8rem auto 0;
  background: linear-gradient(90deg, transparent, #06b6d4, #7c3aed, transparent);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.5);
}
#digital-unit .du-toolbar { margin-bottom: 0.85rem; }
#digital-unit .du-search {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(15, 23, 42, 0.75);
  border: 1.5px solid rgba(6, 182, 212, 0.3);
  border-radius: 14px;
  padding: 0.35rem 0.45rem 0.35rem 0.85rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 4px 18px rgba(6, 182, 212, 0.08);
}
#digital-unit .du-search > i { color: #22d3ee; }
#digital-unit .du-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 1rem;
  color: #f1f5f9;
  padding: 0.55rem 0.3rem;
}
#digital-unit .du-search input::placeholder { color: #64748b; }
#digital-unit .du-search button {
  border: none;
  border-radius: 10px;
  width: 42px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #0f172a;
  background: linear-gradient(135deg, #22d3ee, #7c3aed);
  transition: filter 0.2s;
}
#digital-unit .du-search button:hover { filter: brightness(1.08); }
#digital-unit .du-chapters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}
#digital-unit .du-chapter {
  border: 1px solid rgba(6, 182, 212, 0.28);
  background: rgba(15, 23, 42, 0.65);
  color: #cbd5e1;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.2s ease;
}
#digital-unit .du-chapter span {
  background: rgba(6, 182, 212, 0.15);
  color: #67e8f9;
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  font-size: 0.78rem;
  font-weight: 800;
}
#digital-unit .du-chapter:hover {
  border-color: rgba(6, 182, 212, 0.5);
  background: rgba(6, 182, 212, 0.12);
  color: #e0f2fe;
}
#digital-unit .du-chapter.active {
  background: linear-gradient(135deg, #0e7490, #6d28d9);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(109, 40, 217, 0.35);
}
#digital-unit .du-chapter.active span {
  background: rgba(255,255,255,0.2);
  color: #fff;
}
#digital-unit .du-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}
#digital-unit .du-tag {
  border: 1px solid rgba(124, 58, 237, 0.3);
  background: rgba(124, 58, 237, 0.12);
  color: #c4b5fd;
  border-radius: 999px;
  padding: 0.32rem 0.75rem;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
#digital-unit .du-tag:hover {
  background: rgba(124, 58, 237, 0.28);
  color: #ede9fe;
  transform: translateY(-1px);
}
#digital-unit .du-results-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.65rem;
  color: #94a3b8;
  font-weight: 700;
  font-size: 0.9rem;
}
#digital-unit .du-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: 0.9rem;
  width: 100%;
}
#digital-unit .du-page {
  background: linear-gradient(160deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(6, 182, 212, 0.22);
  border-radius: 16px;
  padding: 1rem 1.05rem 0.95rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
  transition: transform 0.22s ease, border-color 0.22s, box-shadow 0.22s;
}
#digital-unit .du-page::before {
  content: '';
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, #06b6d4, #7c3aed, #ec4899);
  opacity: 0.85;
}
#digital-unit .du-page:hover {
  transform: translateY(-3px);
  border-color: rgba(6, 182, 212, 0.45);
  box-shadow: 0 16px 36px rgba(6, 182, 212, 0.12), 0 10px 28px rgba(0,0,0,0.3);
}
#digital-unit .du-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.65rem;
}
#digital-unit .du-page-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.4;
}
#digital-unit .du-badge {
  flex-shrink: 0;
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}
#digital-unit .du-badge-pre {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.35);
}
#digital-unit .du-badge-post {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.35);
}
#digital-unit .du-page-body {
  color: #cbd5e1;
  font-size: 0.95rem;
  line-height: 1.75;
  white-space: pre-wrap;
  max-height: 220px;
  overflow-y: auto;
  padding-left: 0.15rem;
  margin-bottom: 0.75rem;
}
#digital-unit .du-page-body mark {
  background: rgba(34, 211, 238, 0.28);
  color: #ecfeff;
  border-radius: 4px;
  padding: 0 0.15rem;
}
#digital-unit .du-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
#digital-unit .du-btn {
  border: none;
  border-radius: 10px;
  padding: 0.45rem 0.8rem;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: transform 0.15s, filter 0.15s;
}
#digital-unit .du-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
#digital-unit .du-btn-copy {
  background: rgba(124, 58, 237, 0.25);
  color: #ddd6fe;
  border: 1px solid rgba(167, 139, 250, 0.35);
}
#digital-unit .du-btn-wa {
  background: rgba(16, 185, 129, 0.22);
  color: #a7f3d0;
  border: 1px solid rgba(52, 211, 153, 0.35);
}
#digital-unit .du-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2.5rem 1rem;
  color: #94a3b8;
  font-weight: 600;
}
#digital-unit .du-empty i {
  font-size: 2.2rem;
  color: #64748b;
  display: block;
  margin-bottom: 0.55rem;
}
/* Toast صغير */
#duToast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.88rem;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
  z-index: 9999;
  border: 1px solid rgba(6, 182, 212, 0.35);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

#digital-unit .du-btn-more {
  background: rgba(6, 182, 212, 0.12);
  color: #67e8f9;
  border: 1px solid rgba(6, 182, 212, 0.28);
  margin-bottom: 0.55rem;
}
#digital-unit .du-body-collapsed {
  max-height: 140px !important;
  overflow: hidden !important;
}
#digital-unit .du-load-more-wrap {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding: 0.75rem 0 0.25rem;
}
#digital-unit .du-btn-loadmore {
  background: linear-gradient(135deg, rgba(6,182,212,0.25), rgba(124,58,237,0.3));
  color: #e0f2fe;
  border: 1px solid rgba(6, 182, 212, 0.4);
  padding: 0.65rem 1.25rem;
  font-size: 0.92rem;
}
#digital-unit .du-page-body {
  max-height: none;
}
/* تخفيف المؤثرات الثقيلة */
#digital-unit::before {
  animation: none !important;
  opacity: 0.35 !important;
}
#digital-unit .du-lock-card {
  animation: none !important;
}
#digital-unit .du-lock-scan {
  animation: none !important;
  display: none !important;
}
#digital-unit .du-lock-icon {
  animation: none !important;
  box-shadow: 0 0 18px rgba(6, 182, 212, 0.25) !important;
}
#duToast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 768px) {
  #digital-unit .du-pages { padding: 1rem 0.85rem 1.4rem; }
  #digital-unit .du-results { grid-template-columns: 1fr; }
  #digital-unit .du-topbar { flex-direction: column; align-items: stretch; }
  #digital-unit .du-logout-tab-btn { justify-content: center; }
}


/* ===== <style id="home-visual-cards-css"> ===== */
/* ===== شبكة البطاقات تملأ الشاشة المتاحة ===== */
.home-visual-hero{
  text-align:center;
  padding:.35rem .5rem .5rem;
  /* ارتفاع تقريبي بعد الهيدر (~110px) */
  min-height: calc(100vh - 120px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.home-cards-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:repeat(2, 1fr);
  gap:.85rem;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 .4rem;
  /* الصفّان يأخذان معظم ارتفاع الشاشة */
  height: calc(100vh - 135px);
  min-height: 420px;
  max-height: 780px;
}
@media(max-width:700px){
  .home-cards-grid{
    grid-template-columns:repeat(2, 1fr);
    grid-template-rows:repeat(3, 1fr);
    height: calc(100vh - 130px);
    gap:.6rem;
  }
}

.home-ad-card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  height:100%;
  min-height:0;
  cursor:pointer;
  border:1px solid rgba(167,139,250,.28);
  background:#0f172a;
  box-shadow:
    0 6px 22px rgba(15,23,42,.14),
    0 0 0 1px rgba(255,255,255,.04) inset;
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
  isolation:isolate;
}
.home-ad-card::before{
  content:'';
  position:absolute;inset:-1px;
  border-radius:18px;
  padding:1.5px;
  background:linear-gradient(135deg,rgba(167,139,250,.6),rgba(56,189,248,.3),rgba(244,114,182,.45),rgba(167,139,250,.55));
  background-size:300% 300%;
  animation:homeAdBorderFlow 6s ease infinite;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  z-index:5;
  opacity:.8;
}
.home-ad-card::after{
  content:'';
  position:absolute;
  top:-40%;left:-30%;
  width:55%;height:90%;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.2) 50%,transparent 70%);
  transform:translateX(-120%) rotate(18deg);
  pointer-events:none;
  z-index:4;
}
.home-ad-card:hover::after{animation:homeAdShine 1.05s ease}
.home-ad-card:hover{
  transform:translateY(-5px) scale(1.02);
  box-shadow:0 18px 42px rgba(109,40,217,.3),0 0 30px rgba(124,58,237,.22);
}
@keyframes homeAdBorderFlow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes homeAdShine{
  0%{transform:translateX(-130%) rotate(18deg)}
  100%{transform:translateX(230%) rotate(18deg)}
}

.home-ad-preview-stage{position:absolute;inset:0;overflow:hidden;background:#111827}
.home-ad-preview-layer{position:absolute;inset:0;opacity:0;transition:opacity .55s ease;pointer-events:none;z-index:0}
.home-ad-preview-layer.is-active{opacity:1;z-index:1}
.home-ad-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#1e1b4b;transition:transform .6s ease}
.home-ad-card:hover .home-ad-preview-layer.is-active .home-ad-card-img{transform:scale(1.05)}
.home-ad-card-iframe-wrap{position:absolute;inset:0;overflow:hidden;background:#f8fafc}
.home-ad-card-iframe{
  position:absolute;inset:0;width:200%;height:200%;
  border:0;transform:scale(.5);transform-origin:top right;
  pointer-events:none;background:#fff;
}
.home-ad-card-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(15,23,42,.8) 100%);
  pointer-events:none;z-index:2;
}
.home-ad-card-body{
  position:relative;z-index:3;height:100%;
  padding:.7rem .85rem;display:flex;flex-direction:column;justify-content:flex-end;
  color:#fff;text-align:right;
}
.home-ad-card-title{
  font-size:1rem;font-weight:800;margin:0 0 .12rem;
  text-shadow:0 2px 10px rgba(0,0,0,.55);line-height:1.25;
}
.home-ad-card-desc{
  font-size:.72rem;opacity:.9;margin:0;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.home-ad-card-badge{
  position:absolute;top:10px;left:10px;z-index:4;
  background:rgba(255,255,255,.16);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.32);color:#fff;
  font-size:.62rem;font-weight:700;padding:3px 9px;border-radius:999px;
}
.home-ad-card-count{
  position:absolute;top:10px;right:10px;z-index:4;
  background:rgba(0,0,0,.5);color:#fff;
  font-size:.62rem;font-weight:700;padding:3px 9px;border-radius:999px;
}


/* ===== Lightbox — تحت الهيدر، تمرير داخلي، بدون قفل الصفحة ===== */
.home-ad-lightbox{
  position:fixed !important;
  top:0; left:0; right:0; bottom:0;
  z-index:100000 !important;
  background:rgba(2,6,23,.55);
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:0;
  margin:0;
  box-sizing:border-box;
  /* السماح بتمرير الصفحة خلف النافذة عند الحاجة */
  overflow:auto;
  overscroll-behavior:contain;
}
.home-ad-lightbox.is-open{display:flex !important}

.home-ad-lb-panel{
  display:flex;
  flex-direction:column;
  width:min(1180px, 94vw);
  margin: 48px auto 6px;
  height: calc(100vh - 52px);
  height: calc(100dvh - 52px);
  max-height: calc(100dvh - 52px);
  background:#0b1220;
  border-radius:14px;
  border:1px solid rgba(167,139,250,.35);
  box-shadow:0 24px 64px rgba(0,0,0,.45);
  overflow:hidden;
  position:relative;
  z-index:2;
}

.home-ad-lb-toolbar{
  flex:0 0 auto;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:7px 10px;
  min-height:44px;
  background:rgba(15,23,42,.98);
  border-bottom:1px solid rgba(167,139,250,.3);
  z-index:5;
  box-sizing:border-box;
  flex-wrap:nowrap;
  overflow:visible;
}
.home-ad-lb-toolbar-right,
.home-ad-lb-toolbar-left{
  display:flex;align-items:center;gap:5px;flex-wrap:nowrap;
  flex-shrink:0;
}
.home-ad-lb-toolbar-center{
  flex:1;text-align:center;color:#e2e8f0;font-size:.8rem;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:0 4px;min-width:0;
}
.home-ad-lb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:3px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.1);
  color:#fff;font-size:.72rem;font-weight:700;
  padding:5px 9px;border-radius:8px;cursor:pointer;
  text-decoration:none;font-family:inherit;line-height:1.2;
  transition:background .2s ease;
  white-space:nowrap;
}
.home-ad-lb-btn:hover{background:rgba(255,255,255,.22)}
.home-ad-lb-btn.download{background:rgba(16,185,129,.28);border-color:rgba(16,185,129,.45);color:#bbf7d0}
.home-ad-lb-btn.download:hover{background:rgba(16,185,129,.45);color:#fff}
.home-ad-lb-btn.open{background:rgba(99,102,241,.28);border-color:rgba(99,102,241,.45);color:#c7d2fe}
.home-ad-lb-btn.open:hover{background:rgba(99,102,241,.45);color:#fff}
.home-ad-lb-btn.close{background:rgba(239,68,68,.28);border-color:rgba(239,68,68,.45)}
.home-ad-lb-btn.close:hover{background:rgba(239,68,68,.5)}
.home-ad-lb-btn.nav{min-width:38px;padding:6px 10px;font-size:1.05rem}

.home-ad-lb-inner{
  position:relative;
  flex:1 1 auto;
  width:100%;
  min-height:0;
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#fff;
}
.home-ad-lb-media{
  width:100% !important;
  flex:1 1 auto;
  min-height:0;
  height:100% !important;
  display:block;
  background:#fff;
  overflow:hidden;
  position:relative;
}
.home-ad-lb-media img{
  position:absolute;
  inset:0;
  margin:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  background:#0b1220;
}
.home-ad-lb-media iframe{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  border:0 !important;
  background:#fff;
  display:block;
}
.home-ad-lb-filecard{
  width:100%;min-height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#e2e8f0;padding:2rem;background:#0b1220;
}
.home-ad-lb-filecard .big{font-size:3.5rem;margin-bottom:.5rem}
.home-ad-lb-filecard a{
  display:inline-block;margin-top:1rem;
  background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;
  text-decoration:none;padding:.7rem 1.3rem;border-radius:10px;font-weight:700;
}

/* لا نستخدم قفل التمرير على body — التابات تبقى قابلة للوصول */
html.home-ad-lb-lock,body.home-ad-lb-lock{
  /* كان overflow:hidden — ألغيناه؛ نُبقي التمرير مفعّلاً */
  overflow: auto;
}


/* ===== <style id="b2b-post-connectivity-styles"> ===== */
@keyframes connFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes connShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes connPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,0.25); }
  50% { box-shadow: 0 0 0 8px rgba(124,58,237,0); }
}
@keyframes connBorderFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes connFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

#b2b-post-connectivity {
  padding: 14px;
  background: transparent;
  animation: connFadeUp 0.5s ease both;
}
#b2b-post-connectivity .conn-wrap {
  max-width: 1100px;
  margin: 0 auto;
  font-family: 'Cairo', 'Tajawal', sans-serif;
  color: var(--text-main, #0f172a);
}
#b2b-post-connectivity .conn-hero {
  background: linear-gradient(120deg, #4c1d95, #7c3aed, #6d28d9, #5b21b6);
  background-size: 220% 220%;
  animation: connShimmer 8s ease infinite, connFadeUp 0.55s ease both;
  color: #fff;
  border-radius: 22px;
  padding: 30px 26px;
  margin-bottom: 22px;
  box-shadow: 0 16px 40px rgba(91,33,182,0.32);
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.18);
}
#b2b-post-connectivity .conn-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  background-size: 200% 100%;
  animation: connBorderFlow 4s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
#b2b-post-connectivity .conn-hero::after {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 70%);
  top: -50px; left: -40px;
  animation: connFloat 5s ease-in-out infinite;
}
#b2b-post-connectivity .conn-hero h1 {
  margin: 0 0 8px;
  font-size: 1.8rem;
  font-weight: 900;
  color: #fff !important;
  position: relative;
  z-index: 1;
  letter-spacing: -0.02em;
}
#b2b-post-connectivity .conn-hero h1::after { display: none !important; }
#b2b-post-connectivity .conn-hero p {
  margin: 0;
  opacity: 0.94;
  font-weight: 600;
  font-size: 0.98rem;
  position: relative;
  z-index: 1;
}
#b2b-post-connectivity .conn-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 900px) {
  #b2b-post-connectivity .conn-grid { grid-template-columns: 1fr; }
}
#b2b-post-connectivity .conn-card {
  background: var(--card-bg, #fff);
  border: 1.5px solid rgba(124,58,237,0.2);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(15,23,42,0.06);
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, border-color 0.3s ease;
  animation: connFadeUp 0.55s ease both;
  position: relative;
}
#b2b-post-connectivity .conn-card:nth-child(1) { animation-delay: 0.05s; }
#b2b-post-connectivity .conn-card:nth-child(2) { animation-delay: 0.12s; }
#b2b-post-connectivity .conn-card:nth-child(3) { animation-delay: 0.18s; }
#b2b-post-connectivity .conn-grid > div > .conn-card:nth-child(1) { animation-delay: 0.1s; }
#b2b-post-connectivity .conn-grid > div > .conn-card:nth-child(2) { animation-delay: 0.16s; }
#b2b-post-connectivity .conn-grid > div > .conn-card:nth-child(3) { animation-delay: 0.22s; }
#b2b-post-connectivity .conn-card:hover {
  transform: translateY(-5px);
  border-color: rgba(124,58,237,0.45);
  box-shadow: 0 16px 36px rgba(109,40,217,0.16);
}
#b2b-post-connectivity .conn-card-head {
  background: linear-gradient(90deg, #5b21b6, #7c3aed, #6d28d9);
  background-size: 180% 100%;
  animation: connShimmer 6s ease infinite;
  color: #fff;
  padding: 13px 16px;
  font-weight: 800;
  font-size: 1rem;
  border-bottom: 2px solid rgba(255,255,255,0.15);
  letter-spacing: 0.01em;
}
#b2b-post-connectivity .conn-card-body { padding: 0; }
#b2b-post-connectivity table.conn-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
#b2b-post-connectivity table.conn-table th {
  background: rgba(124,58,237,0.1);
  color: #5b21b6;
  padding: 11px 8px;
  font-size: 0.85rem;
  font-weight: 800;
  border-bottom: 2px solid rgba(124,58,237,0.18);
}
#b2b-post-connectivity table.conn-table td {
  padding: 11px 8px;
  border-bottom: 1px solid rgba(15,23,42,0.06);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-main, #0f172a);
  transition: background 0.2s ease, color 0.2s ease;
}
#b2b-post-connectivity table.conn-table tbody tr {
  transition: transform 0.2s ease;
}
#b2b-post-connectivity table.conn-table tbody tr:hover td {
  background: rgba(124,58,237,0.1) !important;
  color: #5b21b6;
}
#b2b-post-connectivity table.conn-table tr:nth-child(even) td {
  background: rgba(124,58,237,0.04);
}
#b2b-post-connectivity .conn-badge {
  display: inline-block;
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
  color: #5b21b6;
  border: 1.5px solid #c4b5fd;
  border-radius: 999px;
  padding: 4px 12px;
  font-weight: 800;
  font-size: 0.84rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: connPulse 2.8s ease-in-out infinite;
}
#b2b-post-connectivity .conn-badge:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 12px rgba(124,58,237,0.25);
}
#b2b-post-connectivity .conn-note {
  margin: 12px 14px 14px;
  padding: 11px 13px;
  border-radius: 12px;
  background: rgba(124,58,237,0.07);
  border: 1px solid rgba(124,58,237,0.18);
  border-right: 4px solid #7c3aed;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  line-height: 1.65;
  animation: connFadeUp 0.6s ease both;
}
#b2b-post-connectivity .conn-section-title {
  background: linear-gradient(90deg, #5b21b6, #7c3aed, #6d28d9, #5b21b6);
  background-size: 200% 100%;
  animation: connShimmer 5s ease infinite, connFadeUp 0.5s ease both;
  color: #fff;
  text-align: center;
  padding: 14px;
  border-radius: 16px;
  font-weight: 900;
  font-size: 1.08rem;
  margin: 20px 0 14px;
  border: 2px solid rgba(255,255,255,0.15);
  box-shadow: 0 8px 24px rgba(91,33,182,0.22);
}
#b2b-post-connectivity .conn-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
}
#b2b-post-connectivity .conn-split .conn-card:nth-child(1) { animation-delay: 0.15s; }
#b2b-post-connectivity .conn-split .conn-card:nth-child(2) { animation-delay: 0.22s; }
@media (max-width: 900px) {
  #b2b-post-connectivity .conn-split { grid-template-columns: 1fr; }
}

/* Dark mode */
[data-theme="dark"] #b2b-post-connectivity .conn-wrap { color: #e2e8f0; }
[data-theme="dark"] #b2b-post-connectivity .conn-card {
  background: #1e293b;
  border-color: rgba(167,139,250,0.28);
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
}
[data-theme="dark"] #b2b-post-connectivity .conn-card:hover {
  border-color: rgba(196,181,253,0.55);
  box-shadow: 0 16px 40px rgba(109,40,217,0.28);
}
[data-theme="dark"] #b2b-post-connectivity table.conn-table th {
  background: rgba(124,58,237,0.28);
  color: #e9d5ff;
  border-bottom-color: rgba(167,139,250,0.25);
}
[data-theme="dark"] #b2b-post-connectivity table.conn-table td {
  color: #e2e8f0;
  border-bottom-color: rgba(148,163,184,0.12);
}
[data-theme="dark"] #b2b-post-connectivity table.conn-table tr:nth-child(even) td {
  background: rgba(124,58,237,0.12);
}
[data-theme="dark"] #b2b-post-connectivity table.conn-table tbody tr:hover td {
  background: rgba(124,58,237,0.22) !important;
  color: #e9d5ff;
}
[data-theme="dark"] #b2b-post-connectivity .conn-badge {
  background: linear-gradient(135deg, rgba(91,33,182,0.45), rgba(124,58,237,0.35));
  color: #e9d5ff;
  border-color: rgba(167,139,250,0.4);
}
[data-theme="dark"] #b2b-post-connectivity .conn-note {
  background: rgba(91,33,182,0.22);
  border-color: rgba(167,139,250,0.25);
  color: #cbd5e1;
}


/* ===== <style id="anonymous"> ===== */
/* Scoped styles under #prepaid-data-card-quota */
.prepaid-data-scope *, 
.prepaid-data-scope *::before, 
.prepaid-data-scope *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.prepaid-data-scope {
    background-color: var(--prepaid-data-bg-deep, #0b0f19);
    color: var(--prepaid-data-text-main, #f1f5f9);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 30px 20px;
    overflow-x: hidden;
    position: relative;
    transition: background-color 0.4s ease, color 0.4s ease;
    width: 100%;
}

.prepaid-data-scope::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: 
        radial-gradient(circle at 50% 50%, var(--prepaid-data-glow, rgba(124, 58, 237, 0.15)) 0%, transparent 60%),
        linear-gradient(to right, var(--prepaid-data-border-color, rgba(255, 255, 255, 0.05)) 1px, transparent 1px),
        linear-gradient(to bottom, var(--prepaid-data-border-color, rgba(255, 255, 255, 0.05)) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
    z-index: -1;
    pointer-events: none;
    transition: background 0.4s ease;
}

#prepaid-data-card-quota {
    width: 100%;
    max-width: 1050px;
    background: var(--prepaid-data-surface, rgba(15, 23, 42, 0.75));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--prepaid-data-border-glow, rgba(124, 58, 237, 0.3));
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4), 0 0 30px var(--prepaid-data-glow, rgba(124, 58, 237, 0.2));
    padding: 35px;
    animation: prepaidDataHoloAppear 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    position: relative;
    overflow: hidden;
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

@keyframes prepaidDataHoloAppear {
    0% { opacity: 0; transform: translateY(30px) scale(0.95); filter: blur(10px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}      

#prepaid-data-card-quota::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--prepaid-data-primary, #0284c7), var(--prepaid-data-accent, #7c3aed), var(--prepaid-data-secondary, #2563eb));
    animation: prepaidDataLaserGlow 3s ease-in-out infinite alternate;
}

@keyframes prepaidDataLaserGlow {
    0% { opacity: 0.6; filter: drop-shadow(0 0 2px var(--prepaid-data-primary, #0284c7)); }
    100% { opacity: 1; filter: drop-shadow(0 0 10px var(--prepaid-data-accent, #7c3aed)); }
}

.prepaid-data-section-header {
    text-align: center;
    margin-bottom: 25px;
}

.prepaid-data-section-header h2 {
    font-size: 1.8rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--prepaid-data-primary, #38bdf8), var(--prepaid-data-accent, #a78bfa));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.prepaid-data-section-header p {
    color: var(--prepaid-data-text-muted, #94a3b8);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* التبويبات الفرعية المتطورة */
.prepaid-subtabs-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--prepaid-data-border-color, rgba(255, 255, 255, 0.1));
    padding-bottom: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.subtab-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--prepaid-data-border-color, rgba(255, 255, 255, 0.1));
    color: var(--prepaid-data-text-muted, #94a3b8);
    padding: 10px 18px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.subtab-btn:hover {
    background: rgba(124, 58, 237, 0.15);
    color: #fff;
    border-color: var(--prepaid-data-accent, #7c3aed);
}

.subtab-btn.active {
    background: linear-gradient(135deg, var(--prepaid-data-primary, #0284c7), var(--prepaid-data-accent, #7c3aed));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.prepaid-subtab-content {
    display: none;
    animation: fadeInSubtab 0.4s ease forwards;
}

.prepaid-subtab-content.active {
    display: block;
}

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

.prepaid-subtab-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--prepaid-data-primary, #38bdf8);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.prepaid-subtab-title span {
    font-size: 0.85rem;
    color: var(--prepaid-data-text-muted, #94a3b8);
}

.prepaid-data-card-badge {
    display: inline-block;
    background: linear-gradient(135deg, #7c3aed, #db2777);
    color: #fff;
    font-weight: bold;
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 15px;
    box-shadow: 0 0 10px rgba(219, 39, 119, 0.3);
}

.full-width-card {
    margin-bottom: 25px;
    line-height: 1.7;
}

/* الجداول */
.prepaid-data-table-container {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--prepaid-data-border-color, rgba(255, 255, 255, 0.1));
    background: var(--prepaid-data-surface-solid, rgba(30, 41, 59, 0.5));
    margin-bottom: 35px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
    transition: background 0.4s ease, border-color 0.4s ease;
}

.prepaid-data-table-container table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.prepaid-data-table-container th {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.2), rgba(124, 58, 237, 0.2));
    color: var(--prepaid-data-primary, #38bdf8);
    padding: 16px;
    font-weight: 700;
    font-size: 0.95rem;
    border-bottom: 2px solid var(--prepaid-data-border-glow, rgba(124, 58, 237, 0.3));
    letter-spacing: 0.5px;
}

.prepaid-data-table-container td {
    padding: 15px 18px;
    border-bottom: 1px solid var(--prepaid-data-border-color, rgba(255, 255, 255, 0.05));
    font-size: 0.95rem;
    color: var(--prepaid-data-text-main, #f1f5f9);
    transition: all 0.3s ease;
}

.prepaid-data-table-container tbody tr {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.prepaid-data-table-container tbody tr:hover {
    background: var(--prepaid-data-table-hover, rgba(124, 58, 237, 0.1));
    transform: scale(1.002);
}

.prepaid-data-table-container tbody td:last-child {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color: var(--prepaid-data-primary, #38bdf8);
    letter-spacing: 1px;
}

.prepaid-data-table-footer-row td {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(37, 99, 235, 0.15));
    font-weight: 600;
    color: var(--prepaid-data-text-main, #f1f5f9);
    border-top: 2px solid var(--prepaid-data-border-glow, rgba(124, 58, 237, 0.3));
    padding: 18px;
}

/* الشبكات والبطاقات والمعلومات */
.prepaid-data-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
}

.prepaid-data-info-card {
    background: var(--prepaid-data-surface-solid, rgba(30, 41, 59, 0.5));
    border: 1px solid var(--prepaid-data-border-color, rgba(255, 255, 255, 0.1));
    border-radius: 16px;
    padding: 22px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.prepaid-data-info-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--prepaid-data-primary, #0284c7);
    transition: width 0.3s ease;
}

.prepaid-data-info-card:hover {
    transform: translateY(-5px);
    border-color: var(--prepaid-data-primary, #38bdf8);
    box-shadow: 0 10px 30px -10px var(--prepaid-data-glow, rgba(124, 58, 237, 0.3));
}

.prepaid-data-info-card:hover::before {
    width: 8px;
}

.prepaid-data-info-card h3 {
    font-size: 1.05rem;
    color: var(--prepaid-data-primary, #38bdf8);
    margin-bottom: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.prepaid-data-info-card h3::before {
    content: "⚡";
    font-size: 0.85rem;
}

.prepaid-data-info-card ul {
    list-style: none;
}

.prepaid-data-info-card li, .prepaid-data-info-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--prepaid-data-text-muted, #cbd5e1);
}

/* قسم الأسئلة الشائعة FAQ */
.prepaid-faq-section {
    margin-top: 30px;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid var(--prepaid-data-border-color, rgba(255, 255, 255, 0.08));
}

.prepaid-faq-section h3 {
    color: var(--prepaid-data-accent, #a78bfa);
    font-size: 1.1rem;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
}

.faq-item {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-q {
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    font-size: 0.95rem;
}

.faq-q::before {
    content: "❓ ";
}

.faq-a {
    color: var(--prepaid-data-text-muted, #94a3b8);
    font-size: 0.9rem;
    padding-right: 20px;
    line-height: 1.5;
}

/* التجاوب مع الجوال */
@media (max-width: 768px) {
    .prepaid-data-scope {
        padding: 15px 10px;
    }

    #prepaid-data-card-quota {
        padding: 15px;
    }

    .prepaid-data-section-header h2 {
        font-size: 1.35rem;
    }

    .subtab-btn {
        width: 100%;
        text-align: center;
    }

    .prepaid-data-table-container table, 
    .prepaid-data-table-container thead, 
    .prepaid-data-table-container tbody, 
    .prepaid-data-table-container th, 
    .prepaid-data-table-container td, 
    .prepaid-data-table-container tr {
        display: block;
    }

    .prepaid-data-table-container thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .prepaid-data-table-container tr {
        margin-bottom: 15px;
        border: 1px solid var(--prepaid-data-border-color, rgba(255, 255, 255, 0.1));
        border-radius: 12px;
        background: var(--prepaid-data-surface-solid, rgba(30, 41, 59, 0.5));
        padding: 5px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .prepaid-data-table-container td {
        border: none;
        border-bottom: 1px solid var(--prepaid-data-border-color, rgba(255, 255, 255, 0.05));
        position: relative;
        padding-left: 50%;
        text-align: left;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .prepaid-data-table-container td:last-child {
        border-bottom: none;
    }

    .prepaid-data-table-container td::before {
        content: attr(data-label);
        position: absolute;
        right: 15px;
        width: 45%;
        white-space: nowrap;
        font-weight: bold;
        text-align: right;
        color: var(--prepaid-data-text-muted, #94a3b8);
    }

    .prepaid-data-info-grid {
        grid-template-columns: 1fr;
    }
}


/* ===== <style id="postpaid-qouta-tabs-css"> ===== */
#postpaid-qouta .pq-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0 0 1.35rem;
  padding: 8px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(124,58,237,0.15);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(15,23,42,0.04);
}
[data-theme="dark"] #postpaid-qouta .pq-tabs-nav {
  background: rgba(30,41,59,0.9);
  border-color: rgba(148,163,184,0.18);
}
#postpaid-qouta .pq-tab-btn {
  flex: 1 1 auto;
  min-width: 130px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.92rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: transparent;
  color: #64748b;
  transition: all 0.22s ease;
}
#postpaid-qouta .pq-tab-btn:hover {
  background: #f5f3ff;
  color: #5b21b6;
}
#postpaid-qouta .pq-tab-btn.is-active {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(91,33,182,0.3);
}
[data-theme="dark"] #postpaid-qouta .pq-tab-btn { color: #94a3b8; }
[data-theme="dark"] #postpaid-qouta .pq-tab-btn:hover { background: rgba(91,33,182,0.2); color: #e9d5ff; }
#postpaid-qouta .pq-panel { display: none; animation: pqIn 0.28s ease; }
#postpaid-qouta .pq-panel.is-active { display: block; }
@keyframes pqIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

#postpaid-qouta .pq-evening-card {
  background: linear-gradient(145deg, rgba(124,58,237,0.06), rgba(6,182,212,0.05));
  border: 1px solid rgba(124,58,237,0.18);
  border-radius: 16px;
  padding: 1.25rem 1.15rem;
  margin-bottom: 1rem;
}
[data-theme="dark"] #postpaid-qouta .pq-evening-card {
  background: rgba(30,41,59,0.6);
  border-color: rgba(167,139,250,0.25);
}
#postpaid-qouta .pq-evening-head {
  text-align: center;
  margin-bottom: 1rem;
}
#postpaid-qouta .pq-evening-head h3 {
  margin: 0 0 0.35rem;
  color: #5b21b6;
  font-size: 1.25rem;
  font-weight: 800;
}
[data-theme="dark"] #postpaid-qouta .pq-evening-head h3 { color: #c4b5fd; }
#postpaid-qouta .pq-evening-head p {
  margin: 0;
  color: #64748b;
  font-size: 0.92rem;
  font-weight: 600;
}
#postpaid-qouta .pq-evening-table-wrap {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(124,58,237,0.15);
  background: var(--card-bg, #fff);
}
#postpaid-qouta .pq-evening-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
#postpaid-qouta .pq-evening-table th {
  background: linear-gradient(90deg, #5b21b6, #7c3aed);
  color: #fff;
  padding: 14px 12px;
  font-weight: 800;
  font-size: 0.95rem;
}
#postpaid-qouta .pq-evening-table td {
  padding: 14px 12px;
  border-bottom: 1px solid rgba(15,23,42,0.06);
  color: var(--text-main, #0f172a);
  font-weight: 600;
}
#postpaid-qouta .pq-evening-table tr:nth-child(even) td {
  background: rgba(124,58,237,0.04);
}
#postpaid-qouta .pq-code {
  display: inline-block;
  background: #f5f3ff;
  color: #5b21b6;
  border: 1px solid #ddd6fe;
  border-radius: 8px;
  padding: 4px 10px;
  font-weight: 800;
  font-family: ui-monospace, monospace;
  direction: ltr;
}
[data-theme="dark"] #postpaid-qouta .pq-code {
  background: rgba(91,33,182,0.25);
  color: #e9d5ff;
  border-color: rgba(167,139,250,0.3);
}
#postpaid-qouta .pq-evening-note {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: #f8fafc;
  border-right: 3px solid #7c3aed;
  color: #475569;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.65;
}
[data-theme="dark"] #postpaid-qouta .pq-evening-note {
  background: rgba(15,23,42,0.5);
  color: #cbd5e1;
}
#postpaid-qouta .pq-faq-wrap {
  margin-top: 1.35rem;
}
#postpaid-qouta .pq-faq-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 1.1rem;
  font-size: 1.25rem;
  font-weight: 900;
  color: #5b21b6;
}
[data-theme="dark"] #postpaid-qouta .pq-faq-title { color: #c4b5fd; }
#postpaid-qouta .pq-faq-title span.line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(124,58,237,0.35), transparent);
  max-width: 120px;
}
#postpaid-qouta .pq-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#postpaid-qouta .pq-faq-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
  background: #fff;
  border: 1px solid rgba(124,58,237,0.14);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 4px 14px rgba(15,23,42,0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#postpaid-qouta .pq-faq-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(109,40,217,0.1);
}
[data-theme="dark"] #postpaid-qouta .pq-faq-item {
  background: rgba(30,41,59,0.85);
  border-color: rgba(167,139,250,0.2);
}
#postpaid-qouta .pq-faq-num {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #5b21b6, #7c3aed);
  color: #fff;
  font-weight: 900;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(91,33,182,0.3);
  flex-shrink: 0;
}
#postpaid-qouta .pq-faq-body h4 {
  margin: 0 0 6px;
  font-size: 0.98rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.45;
}
[data-theme="dark"] #postpaid-qouta .pq-faq-body h4 { color: #f1f5f9; }
#postpaid-qouta .pq-faq-body p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #475569;
  font-weight: 600;
}
[data-theme="dark"] #postpaid-qouta .pq-faq-body p { color: #cbd5e1; }
#postpaid-qouta .pq-faq-body ul {
  margin: 6px 0 0;
  padding-right: 1.15rem;
  color: #475569;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.7;
}
[data-theme="dark"] #postpaid-qouta .pq-faq-body ul { color: #cbd5e1; }
#postpaid-qouta .pq-faq-body li { margin-bottom: 2px; }


/* ===== <style id="volte-service-styles"> ===== */
#volte {
      padding: 10px;
      background: transparent;
      border: none;
      box-shadow: none;
    }
    .volte-wrapper {
      --volte-main: #0e7490;
      --volte-deep: #155e75;
      --volte-accent: #06b6d4;
      --volte-lime: #22d3ee;
      --volte-card: rgba(255,255,255,0.96);
      --volte-text: #0f172a;
      --volte-muted: #475569;
      font-family: 'Cairo', 'Tajawal', sans-serif;
      max-width: 960px;
      margin: 0 auto;
      animation: voltePopIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    [data-theme="dark"] .volte-wrapper {
      --volte-card: #1e293b;
      --volte-text: #f8fafc;
      --volte-muted: #94a3b8;
    }
    @keyframes voltePopIn {
      from { opacity: 0; transform: translateY(18px) scale(0.98); }
      to { opacity: 1; transform: none; }
    }
    @keyframes volteGradientBG {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    @keyframes voltePulse {
      from { transform: scale(1); opacity: 0.85; }
      to { transform: scale(1.08); opacity: 1; }
    }
    .volte-hero {
      background: linear-gradient(-45deg, #0c4a6e, #0e7490, #0891b2, #155e75);
      background-size: 300% 300%;
      animation: volteGradientBG 12s ease infinite;
      color: #fff;
      padding: 42px 32px;
      border-radius: 24px;
      box-shadow: 0 16px 40px rgba(14, 116, 144, 0.28);
      margin-bottom: 28px;
      position: relative;
      overflow: hidden;
    }
    .volte-hero-glow {
      position: absolute;
      width: 220px; height: 220px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(34,211,238,0.35), transparent 70%);
      top: -60px; left: -40px;
      pointer-events: none;
    }
    .volte-hero-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 18px;
      position: relative;
      z-index: 1;
    }
    .volte-logo-4g {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.35);
      backdrop-filter: blur(10px);
      border-radius: 16px;
      padding: 10px 16px;
    }
    .volte-logo-4g svg { flex-shrink: 0; }
    .volte-logo-4g .badge-4g {
      font-size: 1.55rem;
      font-weight: 900;
      letter-spacing: -0.03em;
      color: #fff;
      text-shadow: 0 2px 8px rgba(0,0,0,0.25);
      line-height: 1;
    }
    .volte-logo-4g .badge-4g span {
      color: #67e8f9;
      font-size: 1.15rem;
      vertical-align: super;
    }
    .volte-towers {
      display: flex;
      gap: 8px;
      align-items: flex-end;
    }
    .volte-towers svg {
      opacity: 0.9;
      animation: voltePulse 2.4s ease-in-out infinite alternate;
    }
    .volte-towers svg:nth-child(2) { animation-delay: 0.4s; }
    .volte-towers svg:nth-child(3) { animation-delay: 0.8s; }
    .volte-hero-title {
      font-size: 2.15rem;
      font-weight: 900;
      margin: 0 0 14px;
      color: #fff !important;
      text-shadow: 0 2px 10px rgba(0,0,0,0.25);
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .volte-hero-title::after { display: none !important; }
    .volte-hero-badge {
      background: rgba(255,255,255,0.18);
      border: 1px solid rgba(255,255,255,0.4);
      padding: 5px 14px;
      border-radius: 999px;
      font-size: 0.9rem;
      font-weight: 700;
    }
    .volte-hero-desc {
      font-size: 1.05rem;
      line-height: 1.95;
      color: #fff;
      font-weight: 500;
      text-align: justify;
      background: rgba(0,0,0,0.14);
      padding: 16px 20px;
      border-radius: 16px;
      border-right: 4px solid #22d3ee;
      position: relative;
      z-index: 1;
    }
    .volte-card {
      background: var(--volte-card);
      border-radius: 22px;
      padding: 28px;
      margin-bottom: 22px;
      border: 1px solid rgba(14,116,144,0.15);
      box-shadow: 0 10px 28px rgba(14,116,144,0.07);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .volte-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 36px rgba(14,116,144,0.12);
    }
    .volte-section-title {
      font-size: 1.28rem;
      font-weight: 800;
      color: var(--volte-main);
      margin: 0 0 18px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    [data-theme="dark"] .volte-section-title { color: #22d3ee; }
    .volte-section-title::before {
      content: '';
      width: 6px;
      height: 22px;
      border-radius: 10px;
      background: linear-gradient(to bottom, #06b6d4, #0e7490);
      display: inline-block;
    }
    .volte-benefits {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 14px;
    }
    .volte-benefit {
      background: linear-gradient(145deg, rgba(6,182,212,0.08), rgba(14,116,144,0.04));
      border: 1px solid rgba(14,116,144,0.14);
      border-radius: 16px;
      padding: 16px 14px;
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }
    [data-theme="dark"] .volte-benefit {
      background: rgba(6,182,212,0.08);
      border-color: rgba(34,211,238,0.18);
    }
    .volte-benefit-icon {
      width: 42px; height: 42px;
      border-radius: 12px;
      background: linear-gradient(135deg, #0e7490, #06b6d4);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(14,116,144,0.25);
    }
    .volte-benefit-icon svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2; }
    .volte-benefit h4 {
      margin: 0 0 4px;
      font-size: 0.98rem;
      font-weight: 800;
      color: var(--volte-text);
    }
    .volte-benefit p {
      margin: 0;
      font-size: 0.88rem;
      line-height: 1.6;
      color: var(--volte-muted);
      font-weight: 600;
    }
    .volte-faq {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .volte-faq-item {
      border: 1px solid rgba(14,116,144,0.14);
      border-radius: 14px;
      padding: 14px 16px;
      background: rgba(240,249,255,0.5);
    }
    [data-theme="dark"] .volte-faq-item {
      background: rgba(15,23,42,0.5);
      border-color: rgba(34,211,238,0.15);
    }
    .volte-faq-q {
      font-weight: 800;
      font-size: 0.98rem;
      color: var(--volte-main);
      margin-bottom: 6px;
      display: flex;
      gap: 8px;
      align-items: flex-start;
    }
    [data-theme="dark"] .volte-faq-q { color: #67e8f9; }
    .volte-faq-q svg { flex-shrink: 0; margin-top: 2px; }
    .volte-faq-a {
      font-size: 0.92rem;
      line-height: 1.75;
      color: var(--volte-muted);
      font-weight: 600;
      padding-right: 26px;
    }
    .volte-note {
      margin-top: 8px;
      padding: 12px 14px;
      border-radius: 12px;
      background: linear-gradient(90deg, rgba(6,182,212,0.12), rgba(14,116,144,0.06));
      border-right: 3px solid #06b6d4;
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--volte-text);
      display: flex;
      gap: 10px;
      align-items: center;
    }
    @media (max-width: 640px) {
      .volte-hero { padding: 28px 18px; }
      .volte-hero-title { font-size: 1.55rem; }
      .volte-card { padding: 18px; }
    }


/* ===== <style id="ccare-ai-bot-styles"> ===== */
#ccareAiBotRoot{position:fixed;bottom:92px;left:20px;z-index:9999;font-family:'Cairo','Segoe UI',Tahoma,sans-serif;direction:rtl}
#ccareAiBotRoot.is-hidden-on-lock{display:none!important}
.ccare-ai-fab{
  width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 45%,#06b6d4 100%);
  color:#fff;box-shadow:0 8px 24px rgba(109,40,217,.45),0 0 0 0 rgba(124,58,237,.35);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s ease, box-shadow .25s ease;
  animation:ccareFabPulse 2.6s ease-in-out infinite;
  overflow:visible;position:relative;
}
.ccare-ai-fab:hover{transform:scale(1.1);animation-play-state:paused}
@keyframes ccareFabPulse{
  0%,100%{box-shadow:0 8px 24px rgba(109,40,217,.45),0 0 0 0 rgba(124,58,237,.35)}
  50%{box-shadow:0 8px 28px rgba(109,40,217,.55),0 0 0 10px rgba(124,58,237,0)}
}

/* ===== FAQs Floating Button + Panel ===== */
#ccareFaqsFab{
  position:fixed;bottom:22px;left:20px;z-index:9998;
  border:none;cursor:pointer;
  padding:10px 16px;border-radius:999px;
  background:linear-gradient(135deg,#f59e0b 0%,#fbbf24 50%,#f59e0b 100%);
  color:#1c1917;font-weight:900;font-size:0.88rem;
  font-family:'Cairo','Tajawal',sans-serif;
  box-shadow:0 8px 22px rgba(245,158,11,.4),0 0 0 0 rgba(251,191,36,.35);
  display:flex;align-items:center;gap:8px;
  transition:transform .25s ease, box-shadow .25s ease;
  animation:faqsFabPulse 2.8s ease-in-out infinite;
  direction:rtl;
}
#ccareFaqsFab:hover{transform:translateY(-3px) scale(1.05);animation-play-state:paused}
#ccareFaqsFab .faqs-fab-icon{
  width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;
  font-size:0.85rem;
}
@keyframes faqsFabPulse{
  0%,100%{box-shadow:0 8px 22px rgba(245,158,11,.4),0 0 0 0 rgba(251,191,36,.35)}
  50%{box-shadow:0 8px 26px rgba(245,158,11,.5),0 0 0 10px rgba(251,191,36,0)}
}
#ccareFaqsOverlay{
  position:fixed;inset:0;z-index:10080 !important;
  background:rgba(15,23,42,.55);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;
  padding:16px;opacity:0;transition:opacity .28s ease;
  pointer-events:none;
}
#ccareFaqsOverlay.is-open{
  display:flex !important;
  opacity:1 !important;
  pointer-events:auto !important;
  z-index:10080 !important;
}
#ccareFaqsPanel{
  width:min(640px,100%);max-height:min(86vh,720px);
  background:rgba(255,255,255,0.45);
  backdrop-filter:blur(16px) saturate(1.25);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  border-radius:22px;overflow:hidden;
  border:1px solid rgba(124,58,237,.22);
  box-shadow:0 24px 60px rgba(15,23,42,.22);
  display:flex;flex-direction:column;
  transform:translateY(18px) scale(.97);
  transition:transform .32s cubic-bezier(.22,1,.36,1);
  direction:rtl;font-family:'Cairo','Tajawal',sans-serif;
}
#ccareFaqsOverlay.is-open #ccareFaqsPanel{transform:none}
#ccareFaqsPanel .faqs-head{
  background:linear-gradient(120deg,#5b21b6,#7c3aed,#6d28d9);
  color:#fff;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;
}
#ccareFaqsPanel .faqs-head h2{
  margin:0;font-size:1.35rem;font-weight:900;color:#fff!important;letter-spacing:-.02em;
}
#ccareFaqsPanel .faqs-head h2::after{display:none!important}
#ccareFaqsPanel .faqs-close{
  width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.18);color:#fff;font-size:1.15rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease, transform .2s ease;
}
#ccareFaqsPanel .faqs-close:hover{background:rgba(255,255,255,.3);transform:rotate(90deg)}
#ccareFaqsPanel .faqs-body{
  overflow-y:auto;padding:14px 14px 18px;
  background:linear-gradient(180deg,rgba(245,243,255,.5),transparent 120px);
}
#ccareFaqsPanel .faqs-item{
  display:grid;grid-template-columns:42px 1fr;gap:10px;
  margin-bottom:12px;border-radius:16px;overflow:hidden;
  border:1px solid rgba(124,58,237,.14);
  background:var(--card-bg,#fff);
  box-shadow:0 4px 14px rgba(15,23,42,.04);
  transition:transform .22s ease, box-shadow .22s ease;
  animation:faqsItemIn .45s ease both;
}
#ccareFaqsPanel .faqs-item:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(109,40,217,.12);
}
#ccareFaqsPanel .faqs-num{
  background:linear-gradient(160deg,#f59e0b,#fbbf24);
  color:#1c1917;font-weight:900;font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  min-height:100%;
}
#ccareFaqsPanel .faqs-content{padding:12px 12px 12px 8px}
#ccareFaqsPanel .faqs-q{
  margin:0 0 6px;font-size:.95rem;font-weight:800;
  color:#5b21b6;line-height:1.45;
  background:linear-gradient(90deg,rgba(124,58,237,.1),transparent);
  border-radius:8px;padding:6px 10px;
}
#ccareFaqsPanel .faqs-a{
  margin:0;font-size:.9rem;font-weight:600;
  color:var(--text-main,#0f172a);line-height:1.7;
  padding:0 8px;
}
#ccareFaqsPanel .faqs-a ul{
  margin:6px 0 0;padding-right:1.2rem;line-height:1.75;
}
#ccareFaqsPanel .faqs-a li{margin-bottom:2px}
@keyframes faqsItemIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
#ccareFaqsPanel .faqs-item:nth-child(1){animation-delay:.04s}
#ccareFaqsPanel .faqs-item:nth-child(2){animation-delay:.08s}
#ccareFaqsPanel .faqs-item:nth-child(3){animation-delay:.12s}
#ccareFaqsPanel .faqs-item:nth-child(4){animation-delay:.16s}
#ccareFaqsPanel .faqs-item:nth-child(5){animation-delay:.2s}
#ccareFaqsPanel .faqs-item:nth-child(6){animation-delay:.24s}
#ccareFaqsPanel .faqs-item:nth-child(7){animation-delay:.28s}
#ccareFaqsPanel .faqs-item:nth-child(8){animation-delay:.32s}
#ccareFaqsPanel .faqs-item:nth-child(9){animation-delay:.36s}
#ccareFaqsPanel .faqs-item:nth-child(10){animation-delay:.4s}
#ccareFaqsPanel .faqs-item:nth-child(11){animation-delay:.44s}
#ccareFaqsPanel .faqs-item:nth-child(12){animation-delay:.48s}
#ccareFaqsPanel .faqs-item:nth-child(13){animation-delay:.52s}
#ccareFaqsPanel .faqs-item:nth-child(14){animation-delay:.56s}
#ccareFaqsPanel .faqs-item:nth-child(15){animation-delay:.6s}
[data-theme="dark"] #ccareFaqsPanel{
  background:rgba(15,23,42,0.55);border-color:rgba(167,139,250,.3);
}
[data-theme="dark"] #ccareFaqsPanel .faqs-body{
  background:linear-gradient(180deg,rgba(91,33,182,.15),transparent 120px);
}
[data-theme="dark"] #ccareFaqsPanel .faqs-item{
  background:#0f172a;border-color:rgba(167,139,250,.2);
}
[data-theme="dark"] #ccareFaqsPanel .faqs-q{color:#c4b5fd}
[data-theme="dark"] #ccareFaqsPanel .faqs-a{color:#e2e8f0}
@media(max-width:480px){
  #ccareFaqsFab{bottom:16px;left:12px;padding:8px 12px;font-size:.8rem}
  #ccareFaqsPanel{max-height:88vh;border-radius:18px}
}


/* شخصية البوت — يد كاملة تلوّح هاي-فايف + تعبيرات */
.ccare-bot-char{
  position:relative;width:42px;height:36px;display:block;
}
.ccare-bot-body{
  position:absolute;left:8px;top:2px;width:26px;height:30px;
}
.ccare-bot-head{
  position:absolute;left:0;top:0;width:26px;height:26px;
  background:linear-gradient(160deg,#f8fafc 0%,#e2e8f0 100%);
  border-radius:8px;
  box-shadow:inset 0 -2px 0 rgba(79,70,229,.12),0 1px 3px rgba(15,23,42,.15);
  animation:ccareBotBob 2.4s ease-in-out infinite;
}
@keyframes ccareBotBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}
.ccare-bot-eye{
  position:absolute;top:8px;width:5px;height:5px;
  background:#312e81;border-radius:50%;
  animation:ccareBotBlink 3.4s infinite;
}
.ccare-bot-eye.left{left:5px}
.ccare-bot-eye.right{right:5px}
@keyframes ccareBotBlink{
  0%,90%,100%{transform:scaleY(1)}
  92%,96%{transform:scaleY(0.1)}
}
.ccare-bot-mouth{
  position:absolute;bottom:5px;left:50%;transform:translateX(-50%);
  width:11px;height:5px;
  border:2px solid #4f46e5;border-top:none;border-radius:0 0 10px 10px;
  animation:ccareBotSmile 2.2s ease-in-out infinite;
}
@keyframes ccareBotSmile{
  0%,100%{width:11px;height:5px;border-radius:0 0 10px 10px}
  40%{width:13px;height:6px}
  70%{width:9px;height:4px;border-radius:0 0 6px 6px}
}
/* ذراع يسرى خفيفة */
.ccare-bot-arm-l{
  position:absolute;left:2px;top:16px;width:9px;height:3.5px;
  background:#c7d2fe;border-radius:3px;
  transform-origin:right center;
  animation:ccareArmL 2.6s ease-in-out infinite;
}
@keyframes ccareArmL{
  0%,100%{transform:rotate(-12deg)}
  50%{transform:rotate(8deg)}
}
/* ذراع يمنى كاملة + كف هاي-فايف */
.ccare-bot-arm-r{
  position:absolute;right:0;top:14px;width:14px;height:4px;
  background:#a5b4fc;border-radius:3px;
  transform-origin:left center;
  animation:ccareArmWave 1.15s ease-in-out infinite;
  box-shadow:0 0 6px rgba(165,180,252,.5);
  z-index:2;
}
.ccare-bot-hand{
  position:absolute;right:-6px;top:8px;width:12px;height:12px;
  background:#e0e7ff;border-radius:4px 6px 6px 4px;
  border:1.5px solid rgba(79,70,229,.25);
  transform-origin:left bottom;
  animation:ccareHandHi 1.15s ease-in-out infinite;
  z-index:3;
  box-shadow:0 0 10px rgba(167,139,250,.55);
}
.ccare-bot-hand::before{
  content:'';position:absolute;top:1px;right:2px;width:3px;height:7px;
  background:rgba(79,70,229,.2);border-radius:2px;
  box-shadow:-3.5px 0 0 rgba(79,70,229,.18),-7px 0 0 rgba(79,70,229,.15);
}
@keyframes ccareArmWave{
  0%,100%{transform:rotate(25deg)}
  50%{transform:rotate(-40deg)}
}
@keyframes ccareHandHi{
  0%,100%{transform:rotate(25deg) translate(0,0)}
  50%{transform:rotate(-40deg) translate(2px,-4px) scale(1.08)}
}
.ccare-ai-fab.is-open .ccare-bot-arm-r,
.ccare-ai-fab.is-open .ccare-bot-hand{
  animation-duration:.85s;
}
.ccare-ai-fab.is-open .ccare-bot-mouth{
  width:8px;height:3px;border:none;background:#4f46e5;border-radius:3px;animation:none;
}

.ccare-ai-quick{
  max-height:72px;overflow-y:auto;
}
.ccare-ai-panel{position:absolute;bottom:64px;left:0;width:min(430px,calc(100vw - 32px));height:min(580px,calc(100vh - 150px));background:rgba(255,255,255,0.38);backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);border:1px solid rgba(124,58,237,.25);border-radius:18px;box-shadow:0 20px 50px rgba(15,23,42,.18);display:none;flex-direction:column;overflow:hidden}
.ccare-ai-panel.is-open{display:flex}
.ccare-ai-head-user{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.ccare-ai-head-avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#4f46e5,#7c3aed 55%,#06b6d4);
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 2px 10px rgba(109,40,217,.35);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
}
.ccare-ai-head-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ccare-ai-head-avatar span{font-size:.8rem;font-weight:800;color:#fff;z-index:0;text-transform:uppercase}

.ccare-ai-head{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0}
.ccare-ai-head h3{margin:0;font-size:.95rem;font-weight:800;display:flex;align-items:center;gap:8px}
.ccare-ai-head-actions{display:flex;gap:6px}
.ccare-ai-icon-btn{background:rgba(255,255,255,.18);border:none;color:#fff;width:30px;height:30px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ccare-ai-icon-btn:hover{background:rgba(255,255,255,.32)}
.ccare-ai-msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;background:rgba(241,245,249,0.35);position:relative;isolation:isolate}
.ccare-ai-msgs::before{
  content:"";
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--ccare-user-avatar-bg, none);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  opacity:0.22;
  filter:none;
}
[data-theme="dark"] .ccare-ai-msgs::before{opacity:0.18}
.ccare-ai-msgs > *{position:relative;z-index:1}
/* msg styles — glass readable bubbles */
.ccare-ai-msg-row{display:flex;align-items:flex-end;gap:8px;max-width:100%}
.ccare-ai-msg-row.user{flex-direction:row-reverse}
.ccare-ai-msg{max-width:86%;padding:10px 12px;border-radius:14px;font-size:.88rem;line-height:1.65;font-weight:600;word-break:break-word}
.ccare-ai-msg.bot{background:rgba(255,255,255,0.82);border:1px solid rgba(124,58,237,0.12);color:var(--text-main,#0f172a);backdrop-filter:blur(8px)}
.ccare-ai-msg.user{background:linear-gradient(135deg,rgba(79,70,229,0.92),rgba(124,58,237,0.92));color:#fff;border:1px solid rgba(255,255,255,0.15)}
[data-theme="dark"] .ccare-ai-msg.bot{background:rgba(30,41,59,0.82);border-color:rgba(167,139,250,0.2);color:#e2e8f0}






.ccare-ai-greet-wrap{display:block;margin-bottom:8px}
.ccare-ai-greet-top{
  display:block;
  font-weight:800;
  font-size:0.98rem;
  line-height:1.9;
  margin-bottom:6px;
  color:var(--text-main,#0f172a);
}
.ccare-ai-greet-sub{
  display:block;
  font-weight:800;
  font-size:0.92rem;
  margin-bottom:6px;
  color:var(--text-main,#0f172a);
}
.ccare-ai-greet-desc{
  display:block;
  font-weight:600;
  font-size:0.84rem;
  opacity:0.92;
  margin-bottom:4px;
}
.ccare-ai-greet-ask{
  display:block;
  font-weight:700;
  margin:8px 0 4px;
}
.ccare-ai-username{
  display:inline-block;
  font-weight:900 !important;
  font-size:1.06em;
  padding:2px 10px;
  margin:0 4px;
  border-radius:8px;
  vertical-align:middle;
  color:#fff !important;
  background:linear-gradient(135deg,#6d28d9 0%,#7c3aed 55%,#4f46e5 100%);
  box-shadow:0 0 10px rgba(109,40,217,.4);
}
/* bot moved — cleaned orphan keyframes */

.ccare-ai-msg-row{display:flex;align-items:flex-end;gap:8px;max-width:100%;width:100%}
.ccare-ai-msg-row.bot{align-self:flex-start;flex-direction:row}
.ccare-ai-msg-row.user{align-self:flex-end;flex-direction:row-reverse}
.ccare-ai-msg-avatar{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#4f46e5,#7c3aed 55%,#06b6d4);
  border:1.5px solid rgba(255,255,255,.85);
  box-shadow:0 2px 6px rgba(15,23,42,.12);
  font-size:.65rem;font-weight:800;color:#fff;text-transform:uppercase;
}
.ccare-ai-msg-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ccare-ai-msg-avatar.bot-av{
  background:linear-gradient(135deg,#6366f1,#06b6d4);
}
.ccare-ai-msg{max-width:min(86%,340px);padding:10px 12px;border-radius:14px;font-size:.86rem;line-height:1.75;white-space:pre-wrap;word-break:break-word}
.ccare-ai-msg.bot{background:var(--card-bg,#fff);border:1px solid var(--border-color,#e2e8f0);color:var(--text-main,#0f172a);border-bottom-right-radius:4px}
.ccare-ai-msg.user{background:linear-gradient(135deg,#6366f1,#7c3aed);color:#fff;border-bottom-left-radius:4px}
.ccare-ai-answer-block{background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.28);border-radius:10px;padding:10px 12px;margin:4px 0 6px}
.ccare-ai-answer-block.warn{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.35)}
.ccare-ai-answer-block .ai-ans-title{color:#059669;font-weight:800;font-size:.88rem;margin-bottom:6px;display:block}
.ccare-ai-answer-block.warn .ai-ans-title{color:#d97706}
.ccare-ai-fact-line{padding:5px 0;border-bottom:1px dashed rgba(15,23,42,.08);font-size:.84rem}
.ccare-ai-fact-line:last-child{border-bottom:none}
.ccare-ai-svc,.ccare-ai-choices{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ccare-ai-svc button,.ccare-ai-choices button{background:#ffffff;border:1.5px solid #7c3aed;color:#4c1d95;-webkit-text-fill-color:#4c1d95;border-radius:10px;padding:7px 11px;font-size:.76rem;font-weight:800;cursor:pointer;font-family:inherit;text-align:right;box-shadow:0 1px 4px rgba(109,40,217,.1)}
.ccare-ai-svc button:hover,.ccare-ai-choices button:hover{background:#6d28d9;border-color:#5b21b6;color:#ffffff;-webkit-text-fill-color:#ffffff}
.ccare-ai-choices button.primary{background:#6d28d9;color:#ffffff;-webkit-text-fill-color:#ffffff;border:1.5px solid #5b21b6}
[data-theme="dark"] .ccare-ai-svc button,[data-theme="dark"] .ccare-ai-choices button{background:#312e81;border:1.5px solid #a78bfa;color:#f5f3ff;-webkit-text-fill-color:#f5f3ff}
[data-theme="dark"] .ccare-ai-svc button:hover,[data-theme="dark"] .ccare-ai-choices button:hover,[data-theme="dark"] .ccare-ai-choices button.primary{background:#7c3aed;color:#ffffff;-webkit-text-fill-color:#ffffff}
.ccare-ai-goto{margin-top:6px;margin-left:4px;background:var(--primary-purple,#6d28d9);color:#fff;border:none;border-radius:8px;padding:5px 11px;font-size:.76rem;font-weight:700;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:4px}
.ccare-ai-meta{display:block;font-size:.68rem;opacity:.65;margin-top:6px}
.ccare-ai-quick{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px;border-top:1px solid rgba(226,232,240,0.5);background:rgba(255,255,255,0.88);flex-shrink:0}
[data-theme="dark"] .ccare-ai-quick{background:rgba(15,23,42,0.95);border-top-color:rgba(139,92,246,0.25)}
.ccare-ai-chip{background:#ffffff;border:1.5px solid #7c3aed;color:#4c1d95;-webkit-text-fill-color:#4c1d95;border-radius:20px;padding:4px 11px;font-size:.74rem;font-weight:800;cursor:pointer;font-family:inherit;box-shadow:0 1px 4px rgba(109,40,217,.1)}
.ccare-ai-chip:hover{background:#6d28d9;border-color:#5b21b6;color:#ffffff;-webkit-text-fill-color:#ffffff}
[data-theme="dark"] .ccare-ai-chip{background:#312e81;border:1.5px solid #a78bfa;color:#f5f3ff;-webkit-text-fill-color:#f5f3ff}
[data-theme="dark"] .ccare-ai-chip:hover{background:#7c3aed;border-color:#c4b5fd;color:#ffffff;-webkit-text-fill-color:#ffffff}
.ccare-ai-input-row{display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px;padding:8px 10px;border-top:1px solid rgba(226,232,240,0.45);background:rgba(255,255,255,0.92);flex-shrink:0;min-width:0;width:100%;box-sizing:border-box;overflow:visible!important}
[data-theme="dark"] .ccare-ai-input-row{background:rgba(15,23,42,0.96)}
.ccare-ai-input{flex:1 1 auto!important;min-width:0!important;max-width:calc(100% - 56px)!important;border:1.5px solid var(--border-color,#e2e8f0);border-radius:12px;padding:8px 10px;font-size:.8rem;font-family:inherit;background:var(--bg-color,#f8fafc);color:var(--text-main,#0f172a);outline:none;text-align:right;box-sizing:border-box}
.ccare-ai-input:focus{border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.15)}
.ccare-ai-send{background:linear-gradient(135deg,#4f46e5,#7c3aed)!important;color:#fff!important;border:none!important;border-radius:12px!important;width:44px!important;min-width:44px!important;max-width:44px!important;height:40px!important;cursor:pointer;font-size:1.1rem;flex:0 0 44px!important;display:inline-flex!important;align-items:center;justify-content:center;visibility:visible!important;opacity:1!important;box-sizing:border-box;z-index:5;position:relative}
.ccare-ai-send:disabled{opacity:.55;cursor:not-allowed}
.ccare-ai-typing{align-self:flex-start;padding:7px 12px;background:var(--card-bg,#fff);border-radius:12px;font-size:.78rem;color:var(--text-muted,#64748b);border:1px solid var(--border-color,#e2e8f0)}
.ccare-ai-typing span{display:inline-block;width:5px;height:5px;background:#7c3aed;border-radius:50%;margin:0 2px;animation:ccareAiDot 1s infinite ease-in-out}
.ccare-ai-typing span:nth-child(2){animation-delay:.15s}
.ccare-ai-typing span:nth-child(3){animation-delay:.3s}
@keyframes ccareAiDot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media(max-width:480px){#ccareAiBotRoot{bottom:78px;left:12px}.ccare-ai-panel{width:calc(100vw - 24px);height:min(70vh,520px);bottom:60px}.ccare-ai-fab{width:48px;height:48px;font-size:1.2rem}.tt-fab-root{bottom:140px;left:12px}.tt-fab-btn{width:44px;height:44px}.tt-fab-btn .tt-fab-icon{font-size:1.2rem}#ccareFaqsFab{bottom:16px;left:12px}}


/* ===== <style id="eye-comfort-colors"> ===== */
/* ===== ألوان مريحة للعين — إنترنت + عروض شباب ===== */
#prepaid-quota .pq-table th {
  background: #5b6abf !important;
  color: #fff !important;
}
#prepaid-quota .pq-title {
  color: #4338ca !important;
  -webkit-text-fill-color: #4338ca !important;
}
#prepaid-quota .pq-header,
#prepaid-quota .pq-table-container,
#prepaid-quota .pq-card {
  background: #fafbff !important;
  border-color: #e8eaf6 !important;
}
[data-theme="dark"] #prepaid-quota .pq-header,
[data-theme="dark"] #prepaid-quota .pq-table-container,
[data-theme="dark"] #prepaid-quota .pq-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}
#prepaid-quota .pq-table td {
  background: #ffffff !important;
  color: #1e293b !important;
  border-bottom-color: #eef0f7 !important;
}
#prepaid-quota .pq-table tbody tr:nth-child(even) td {
  background: var(--table-even-bg, #f8fafc) !important;
}
#prepaid-quota .pq-table tbody tr:hover td {
  background: #eef1fb !important;
}
[data-theme="dark"] #prepaid-quota .pq-table td {
  background: #0f172a !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] #prepaid-quota .pq-table tbody tr:nth-child(even) td {
  background: #1e293b !important;
}

#prepaid-social-stream table.pss-table th {
  background: #6b7fd7 !important;
  color: #fff !important;
}
#prepaid-social-stream .pss-title,
#prepaid-social-stream .pss-section-title {
  color: #4c51bf !important;
  -webkit-text-fill-color: #4c51bf !important;
}
[data-theme="dark"] #prepaid-social-stream .pss-title,
[data-theme="dark"] #prepaid-social-stream .pss-section-title {
  color: #a5b4fc !important;
  -webkit-text-fill-color: #a5b4fc !important;
}
#prepaid-social-stream .pss-header,
#prepaid-social-stream .pss-section {
  background: #fafbff !important;
  border-color: #e8eaf6 !important;
}
[data-theme="dark"] #prepaid-social-stream .pss-header,
[data-theme="dark"] #prepaid-social-stream .pss-section {
  background: #1e293b !important;
  border-color: #334155 !important;
}
#prepaid-social-stream table.pss-table td {
  background: #ffffff !important;
  color: #1e293b !important;
  border-bottom-color: #eef0f7 !important;
}
#prepaid-social-stream table.pss-table tbody tr:nth-child(even) td {
  background: var(--table-even-bg, #f8fafc) !important;
}
[data-theme="dark"] #prepaid-social-stream table.pss-table td {
  background: #0f172a !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] #prepaid-social-stream table.pss-table tbody tr:nth-child(even) td {
  background: #1e293b !important;
}
#prepaid-social-stream .pss-price-inc,
#prepaid-social-stream .pss-price-inc b {
  color: #047857 !important;
  font-weight: 800 !important;
}
#prepaid-social-stream .pss-price-exc {
  color: #334155 !important;
  font-weight: 700 !important;
}
[data-theme="dark"] #prepaid-social-stream .pss-price-inc,
[data-theme="dark"] #prepaid-social-stream .pss-price-inc b {
  color: #34d399 !important;
}
[data-theme="dark"] #prepaid-social-stream .pss-price-exc {
  color: #cbd5e1 !important;
}
#prepaid-social-stream .pss-badge {
  background: #6b7fd7 !important;
}

/* أسعار الإهداء واضحة */
#prepaid-gifting .price-inc,
#prepaid-gifting .bold-price {
  color: #047857 !important;
  font-weight: 800 !important;
}
[data-theme="dark"] #prepaid-gifting .price-inc,
[data-theme="dark"] #prepaid-gifting .bold-price {
  color: #34d399 !important;
}


/* ===== <style id="gifting-quota-ui-fix"> ===== */
/* ===== باقات الإنترنت: عناوين البطاقات واضحة ===== */
#prepaid-quota .pq-card-header h3 {
  color: #312e81 !important;
  -webkit-text-fill-color: #312e81 !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
[data-theme="dark"] #prepaid-quota .pq-card-header h3 {
  color: #c7d2fe !important;
  -webkit-text-fill-color: #c7d2fe !important;
}
#prepaid-quota .pq-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
}
[data-theme="dark"] #prepaid-quota .pq-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}
#prepaid-quota .pq-list li {
  color: #475569 !important;
  opacity: 1 !important;
}
[data-theme="dark"] #prepaid-quota .pq-list li { color: #94a3b8 !important; }
#prepaid-quota .pq-table th {
  background: #5b6abf !important;
}
#prepaid-quota .pq-header {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}
#prepaid-quota .pq-title {
  color: #4338ca !important;
  -webkit-text-fill-color: #4338ca !important;
}

/* ===== الإهداء: ترتيب + مسافات + هوفر ===== */
#prepaid-gifting.tab-content {
  padding: 1.25rem 1.25rem 2.5rem !important;
  background: #f1f5f9 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
}
[data-theme="dark"] #prepaid-gifting.tab-content {
  background: #0f172a !important;
}
#prepaid-gifting > h1 {
  text-align: center;
  font-size: 1.35rem !important;
  color: #4c1d95 !important;
  -webkit-text-fill-color: #4c1d95 !important;
  margin: 0 0 0.5rem !important;
}
[data-theme="dark"] #prepaid-gifting > h1 {
  color: #c4b5fd !important;
  -webkit-text-fill-color: #c4b5fd !important;
}
#prepaid-gifting > p {
  text-align: center;
  color: #64748b !important;
  margin: 0 auto 1.25rem !important;
  max-width: 640px;
}
#prepaid-gifting .search-container {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem !important;
}
#prepaid-gifting #prepaidGiftingSearchInput {
  width: 100%;
  max-width: 520px;
  padding: 0.65rem 1.1rem !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #0f172a !important;
  font-size: 0.95rem !important;
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
}
[data-theme="dark"] #prepaid-gifting #prepaidGiftingSearchInput {
  background: #1e293b !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}

#prepaid-gifting .gifting-section-container {
  display: flex;
  flex-direction: column;
  gap: 2rem !important;
  max-width: 1100px;
  margin: 0 auto;
}

#prepaid-gifting .gifting-title {
  font-size: 1.12rem !important;
  font-weight: 800 !important;
  color: #4c1d95 !important;
  text-align: center;
  margin: 0 0 0.85rem !important;
  padding: 0.55rem 1rem;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
}
[data-theme="dark"] #prepaid-gifting .gifting-title {
  color: #c4b5fd !important;
  background: #1e293b;
  border-color: #334155;
}

#prepaid-gifting .custom-data-table-container {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 0.75rem;
  margin-bottom: 0.5rem !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
  overflow-x: auto;
}
[data-theme="dark"] #prepaid-gifting .custom-data-table-container {
  background: #1e293b;
  border-color: #334155;
}

#prepaid-gifting table.gifting-table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  margin: 0 !important;
  table-layout: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 10px;
  overflow: hidden;
}

#prepaid-gifting table.gifting-table th,
#prepaid-gifting table.gifting-table td {
  display: table-cell !important;
  vertical-align: middle !important;
  text-align: center !important;
  padding: 11px 10px !important;
  white-space: nowrap;
}

#prepaid-gifting table.gifting-table thead th {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 0.84rem !important;
  border: none !important;
}

#prepaid-gifting table.call-bundles-table thead tr,
#prepaid-gifting table.call-bundles-table tfoot td {
  background: #5b21b6 !important;
  color: #fff !important;
}
#prepaid-gifting table.internet-bundles-table thead tr,
#prepaid-gifting table.internet-bundles-table tfoot td {
  background: #0369a1 !important;
  color: #fff !important;
}
#prepaid-gifting table.flex-gift-table thead tr,
#prepaid-gifting table.flex-gift-table tfoot td {
  background: #6b21a8 !important;
  color: #fff !important;
}

#prepaid-gifting table.gifting-table tbody td {
  color: #0f172a !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #ffffff !important;
}
[data-theme="dark"] #prepaid-gifting table.gifting-table tbody td {
  color: #e2e8f0 !important;
  background: #0f172a !important;
  border-bottom-color: #1e293b !important;
}

#prepaid-gifting table.gifting-table tbody tr:nth-child(even) td {
  background: var(--table-even-bg, #f8fafc) !important;
}
[data-theme="dark"] #prepaid-gifting table.gifting-table tbody tr:nth-child(even) td {
  background: #1e293b !important;
}

#prepaid-gifting table.gifting-table tbody tr:hover td {
  background: #ede9fe !important;
  transition: background 0.15s ease;
}
[data-theme="dark"] #prepaid-gifting table.gifting-table tbody tr:hover td {
  background: #4c1d95 !important;
}

#prepaid-gifting table.gifting-table tbody td.price-exc {
  color: #334155 !important;
  font-variant-numeric: tabular-nums;
}
#prepaid-gifting table.gifting-table tbody td.price-inc,
#prepaid-gifting table.gifting-table tbody td.bold-price {
  color: #047857 !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] #prepaid-gifting table.gifting-table tbody td.price-inc,
[data-theme="dark"] #prepaid-gifting table.gifting-table tbody td.bold-price {
  color: #34d399 !important;
}

#prepaid-gifting table.gifting-table tbody td bdi.code-cell,
#prepaid-gifting table.gifting-table tbody .code-cell {
  display: inline-block !important;
  background: #f5f3ff !important;
  color: #5b21b6 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  border: 1px solid #ddd6fe !important;
  direction: ltr;
  -webkit-text-fill-color: #5b21b6 !important;
}
[data-theme="dark"] #prepaid-gifting table.gifting-table tbody bdi.code-cell {
  background: #4c1d95 !important;
  color: #e9d5ff !important;
  border-color: #6b21a8 !important;
  -webkit-text-fill-color: #e9d5ff !important;
}

#prepaid-gifting table.gifting-table tfoot td {
  padding: 12px !important;
  font-weight: 700 !important;
  color: #fff !important;
}
#prepaid-gifting table.gifting-table tfoot bdi.code-cell {
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.35) !important;
  -webkit-text-fill-color: #fff !important;
}

/* صف FLEX: خلايا كجدول فقط */
#prepaid-gifting #flex-row-inc td,
#prepaid-gifting #flex-row-exc td {
  display: table-cell !important;
}


/* ===== <style id="pgift-tabs-ui"> ===== */
#prepaid-gifting.tab-content {
  padding: 0.75rem 0.75rem 2rem !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 100% !important;
}
.pgift-shell {
  max-width: 1080px;
  margin: 0 auto;
}
.pgift-hero {
  text-align: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.15rem 1rem 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 16px rgba(15,23,42,0.05);
}
[data-theme="dark"] .pgift-hero {
  background: #1e293b;
  border-color: #334155;
}
.pgift-hero h1 {
  margin: 0 0 0.35rem !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #5b21b6 !important;
  -webkit-text-fill-color: #5b21b6 !important;
  background: none !important;
}
[data-theme="dark"] .pgift-hero h1 {
  color: #c4b5fd !important;
  -webkit-text-fill-color: #c4b5fd !important;
}
.pgift-hero h1::after { display: none !important; }
.pgift-hero p {
  margin: 0 auto 0.9rem !important;
  color: #64748b !important;
  font-size: 0.9rem;
  max-width: 520px;
}
.pgift-search-wrap {
  display: flex;
  justify-content: center;
}
#prepaidGiftingSearchInput {
  width: 100%;
  max-width: 480px;
  padding: 0.6rem 1rem !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.92rem !important;
  text-align: right;
}
[data-theme="dark"] #prepaidGiftingSearchInput {
  background: #0f172a !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}
#prepaidGiftingSearchInput:focus {
  outline: none;
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.pgift-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1rem;
  padding: 6px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(15,23,42,0.04);
}
[data-theme="dark"] .pgift-tabs {
  background: #1e293b;
  border-color: #334155;
}
.pgift-tab {
  flex: 1 1 auto;
  min-width: 140px;
  max-width: 280px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  background: transparent;
  color: #64748b;
  transition: all 0.2s ease;
}
.pgift-tab:hover {
  background: #f5f3ff;
  color: #5b21b6;
}
[data-theme="dark"] .pgift-tab:hover {
  background: #312e81;
  color: #e9d5ff;
}
.pgift-tab.is-active {
  background: linear-gradient(135deg, #5b21b6, #7c3aed);
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(91, 33, 182, 0.35);
}

.pgift-panel { display: none; }
.pgift-panel.is-active { display: block; animation: pgiftIn 0.28s ease; }
@keyframes pgiftIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.pgift-table-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 0.65rem;
  box-shadow: 0 6px 20px rgba(15,23,42,0.06);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
[data-theme="dark"] .pgift-table-card {
  background: #1e293b;
  border-color: #334155;
}

#prepaid-gifting table.gifting-table {
  width: 100% !important;
  min-width: 520px;
  border-collapse: collapse !important;
  margin: 0 !important;
  table-layout: auto !important;
}
#prepaid-gifting .pgift-table-card--wide table.gifting-table {
  min-width: 720px;
}
#prepaid-gifting table.gifting-table th,
#prepaid-gifting table.gifting-table td {
  display: table-cell !important;
  text-align: center !important;
  vertical-align: middle !important;
  padding: 10px 8px !important;
  font-size: 0.88rem !important;
  white-space: nowrap;
}
#prepaid-gifting table.call-bundles-table thead tr,
#prepaid-gifting table.call-bundles-table tfoot td {
  background: #5b21b6 !important;
  color: #fff !important;
}
#prepaid-gifting table.internet-bundles-table thead tr,
#prepaid-gifting table.internet-bundles-table tfoot td {
  background: #0369a1 !important;
  color: #fff !important;
}
#prepaid-gifting table.flex-gift-table thead tr,
#prepaid-gifting table.flex-gift-table tfoot td {
  background: #6b21a8 !important;
  color: #fff !important;
}
#prepaid-gifting table.gifting-table tbody td {
  color: #0f172a !important;
  font-weight: 600 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #fff !important;
}
[data-theme="dark"] #prepaid-gifting table.gifting-table tbody td {
  color: #e2e8f0 !important;
  background: #0f172a !important;
  border-bottom-color: #1e293b !important;
}
#prepaid-gifting table.gifting-table tbody tr:nth-child(even) td {
  background: var(--table-even-bg, #f8fafc) !important;
}
[data-theme="dark"] #prepaid-gifting table.gifting-table tbody tr:nth-child(even) td {
  background: #1e293b !important;
}
#prepaid-gifting table.gifting-table tbody tr:hover td {
  background: #ede9fe !important;
}
[data-theme="dark"] #prepaid-gifting table.gifting-table tbody tr:hover td {
  background: #4c1d95 !important;
}
#prepaid-gifting table.gifting-table .price-inc,
#prepaid-gifting table.gifting-table .bold-price {
  color: #047857 !important;
  font-weight: 800 !important;
}
[data-theme="dark"] #prepaid-gifting table.gifting-table .price-inc,
[data-theme="dark"] #prepaid-gifting table.gifting-table .bold-price {
  color: #34d399 !important;
}
#prepaid-gifting table.gifting-table bdi.code-cell {
  display: inline-block !important;
  background: #f5f3ff !important;
  color: #5b21b6 !important;
  padding: 3px 7px !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  border: 1px solid #ddd6fe !important;
  direction: ltr;
}
[data-theme="dark"] #prepaid-gifting table.gifting-table bdi.code-cell {
  background: #4c1d95 !important;
  color: #e9d5ff !important;
  border-color: #6b21a8 !important;
}
#prepaid-gifting table.gifting-table tfoot td { color: #fff !important; font-weight: 700; }
#prepaid-gifting table.gifting-table tfoot bdi.code-cell {
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.35) !important;
}

@media (max-width: 640px) {
  .pgift-tab { min-width: 100%; max-width: none; font-size: 0.85rem; padding: 0.65rem; }
  #prepaid-gifting table.gifting-table { min-width: 480px; }
}


/* ===== <style id="pss-eye-comfort-v2"> ===== */
/* عروض شباب — ألوان مريحة ومتباينة للوضع النهاري والليلي */

/* الوضع النهاري (افتراضي) */
#prepaid-social-stream.tab-content {
  background: #f8fafc !important;
  color: #0f172a !important;
  padding: 0.75rem 0.85rem 2rem !important;
  border: none !important;
  box-shadow: none !important;
}
#prepaid-social-stream {
  --pss-bg-main: #f8fafc !important;
  --pss-bg-section: #ffffff !important;
  --pss-bg-card: #ffffff !important;
  --pss-bg-card-hover: #f1f5f9 !important;
  --pss-bg-platform: #f1f5f9 !important;
  --pss-bg-table-header: #5b6abf !important;
  --pss-primary-accent: #5b21b6 !important;
  --pss-secondary-neon: #0369a1 !important;
  --pss-border-color: #e2e8f0 !important;
  --pss-border-light: #e2e8f0 !important;
  --pss-text-main: #0f172a !important;
  --pss-text-muted: #475569 !important;
  --pss-text-table: #1e293b !important;
  --pss-success-color: #047857 !important;
  --pss-title-gradient: none !important;
}

#prepaid-social-stream .pss-content-relative {
  max-width: 1080px;
  margin: 0 auto;
}

#prepaid-social-stream .pss-header {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 1.15rem 1rem !important;
  margin-bottom: 1.1rem !important;
  box-shadow: 0 4px 14px rgba(15,23,42,0.05) !important;
}
#prepaid-social-stream .pss-title {
  color: #4c1d95 !important;
  background: none !important;
  -webkit-text-fill-color: #4c1d95 !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
}
#prepaid-social-stream .pss-subtitle {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  font-size: 0.92rem !important;
}
#prepaid-social-stream .pss-badge {
  background: #5b21b6 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

#prepaid-social-stream .pss-section {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 1.15rem !important;
  margin-bottom: 1.15rem !important;
  box-shadow: 0 4px 16px rgba(15,23,42,0.05) !important;
  backdrop-filter: none !important;
}
#prepaid-social-stream .pss-section-title {
  color: #4c1d95 !important;
  -webkit-text-fill-color: #4c1d95 !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  background: none !important;
}

/* منصات التطبيقات */
#prepaid-social-stream .pss-platform-item,
#prepaid-social-stream .pss-platforms-bar span {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  box-shadow: 0 1px 4px rgba(15,23,42,0.06) !important;
}

/* الجداول */
#prepaid-social-stream table.pss-table th {
  background: #5b6abf !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
#prepaid-social-stream table.pss-table td {
  background: #ffffff !important;
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
#prepaid-social-stream table.pss-table tbody tr:nth-child(even) td {
  background: var(--table-even-bg, #f8fafc) !important;
}
#prepaid-social-stream .pss-price-exc {
  color: #334155 !important;
  font-weight: 700 !important;
}
#prepaid-social-stream .pss-price-inc,
#prepaid-social-stream .pss-price-inc b {
  color: #047857 !important;
  font-weight: 800 !important;
}
#prepaid-social-stream .pss-code-badge {
  background: #ede9fe !important;
  color: #5b21b6 !important;
  border: 1px solid #ddd6fe !important;
  -webkit-text-fill-color: #5b21b6 !important;
}

/* أولوية الاستهلاك — بطاقات واضحة */
#prepaid-social-stream .pss-flow-container,
#prepaid-social-stream .pss-flow-grid {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  color: #0f172a !important;
}
#prepaid-social-stream .pss-flow-title,
#prepaid-social-stream .pss-flow-card h5,
#prepaid-social-stream .pss-flow-card h4,
#prepaid-social-stream .pss-flow-card h3 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}
#prepaid-social-stream .pss-flow-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  color: #0f172a !important;
  box-shadow: none !important;
}
#prepaid-social-stream .pss-flow-step {
  background: #ffffff !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 12px !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  box-shadow: 0 2px 8px rgba(15,23,42,0.05) !important;
}
#prepaid-social-stream .pss-flow-arrow {
  color: #64748b !important;
  opacity: 1 !important;
}

/* تمييز مستويات الأولوية بألوان هادئة ومقروءة */
#prepaid-social-stream .pss-flow-step:nth-child(1),
#prepaid-social-stream .pss-flow-steps > *:nth-child(1) {
  border-color: #34d399 !important;
  background: #ecfdf5 !important;
  color: #065f46 !important;
  -webkit-text-fill-color: #065f46 !important;
}
#prepaid-social-stream .pss-flow-steps > div:nth-child(1) .pss-flow-step {
  border-color: #34d399 !important;
  background: #ecfdf5 !important;
  color: #065f46 !important;
}

/* بطاقات أكواد */
#prepaid-social-stream .pss-code-box,
#prepaid-social-stream [class*="code-box"] {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

/* ===== الوضع الليلي ===== */
[data-theme="dark"] #prepaid-social-stream.tab-content,
body.dark-mode #prepaid-social-stream.tab-content {
  background: #0f172a !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] #prepaid-social-stream,
body.dark-mode #prepaid-social-stream {
  --pss-bg-main: #0f172a !important;
  --pss-bg-section: #1e293b !important;
  --pss-bg-card: #1e293b !important;
  --pss-text-main: #f1f5f9 !important;
  --pss-text-muted: #94a3b8 !important;
  --pss-text-table: #e2e8f0 !important;
  --pss-border-color: #334155 !important;
  --pss-border-light: #334155 !important;
}
[data-theme="dark"] #prepaid-social-stream .pss-header,
[data-theme="dark"] #prepaid-social-stream .pss-section,
[data-theme="dark"] #prepaid-social-stream .pss-flow-container,
[data-theme="dark"] #prepaid-social-stream .pss-flow-card,
body.dark-mode #prepaid-social-stream .pss-header,
body.dark-mode #prepaid-social-stream .pss-section {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] #prepaid-social-stream .pss-title,
[data-theme="dark"] #prepaid-social-stream .pss-section-title,
body.dark-mode #prepaid-social-stream .pss-title,
body.dark-mode #prepaid-social-stream .pss-section-title {
  color: #c4b5fd !important;
  -webkit-text-fill-color: #c4b5fd !important;
}
[data-theme="dark"] #prepaid-social-stream .pss-subtitle,
body.dark-mode #prepaid-social-stream .pss-subtitle {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}
[data-theme="dark"] #prepaid-social-stream table.pss-table td,
body.dark-mode #prepaid-social-stream table.pss-table td {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
  border-bottom-color: #1e293b !important;
}
[data-theme="dark"] #prepaid-social-stream table.pss-table tbody tr:nth-child(even) td,
body.dark-mode #prepaid-social-stream table.pss-table tbody tr:nth-child(even) td {
  background: #1e293b !important;
}
[data-theme="dark"] #prepaid-social-stream .pss-platform-item,
body.dark-mode #prepaid-social-stream .pss-platform-item {
  background: #0f172a !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
}
[data-theme="dark"] #prepaid-social-stream .pss-flow-step,
body.dark-mode #prepaid-social-stream .pss-flow-step {
  background: #0f172a !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
}
[data-theme="dark"] #prepaid-social-stream .pss-flow-title,
[data-theme="dark"] #prepaid-social-stream .pss-flow-card h5,
body.dark-mode #prepaid-social-stream .pss-flow-title {
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}
[data-theme="dark"] #prepaid-social-stream .pss-code-badge,
body.dark-mode #prepaid-social-stream .pss-code-badge {
  background: #4c1d95 !important;
  color: #e9d5ff !important;
  border-color: #6b21a8 !important;
  -webkit-text-fill-color: #e9d5ff !important;
}
[data-theme="dark"] #prepaid-social-stream .pss-price-inc,
[data-theme="dark"] #prepaid-social-stream .pss-price-inc b,
body.dark-mode #prepaid-social-stream .pss-price-inc {
  color: #34d399 !important;
}


/* ===== <style id="unified-taktik-postquota-ui"> ===== */
/* =========================================================
   تك تك: خلفية اللونين على كامل التاب + جداول متناسقة
   إنترنت الآجل: واجهة عصرية
   ========================================================= */

/* خلفية التابات تُدار حصرياً من taktik-modern-ui-2026 (خلفية واحدة) */
#prepaid-taktik.tab-content,
#postpaid-taktik.tab-content {
  /* لا نضع خلفية هنا — تُعرّف في taktik-modern-ui-2026 */
  overflow: auto !important;
  min-height: calc(100vh - 120px) !important;
  color: #ffffff !important;
}

#b2b-pre-taktik-hy.tab-content {
  /* لا نضع خلفية هنا — تُعرّف في taktik-modern-ui-2026 */
  overflow: auto !important;
  color: #ffffff !important;
}

/* الأغلفة شفافة لتمرير الخلفية */
#prepaid-taktik-wrapper,
#postpaid-taktik-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 12px 8px 24px !important;
  color: #ffffff !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  text-align: center !important;
  position: relative !important;
  overflow: visible !important;
}
.b2b-post-taktik-main-content-wrapper,
.b2b-pre-taktik-main-content-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  padding: 12px 8px 24px !important;
  color: #0f172a !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  text-align: center !important;
  position: relative !important;
  overflow: visible !important;
}
#prepaid-taktik-wrapper::before,
#postpaid-taktik-wrapper::before,
.b2b-post-taktik-main-content-wrapper::before,
.b2b-pre-taktik-main-content-wrapper::before {
  display: none !important;
}

/* العناوين */
#prepaid-taktik-wrapper h1.taktik-title,
#postpaid-taktik-wrapper h1.postpaid-taktik-h1,
h1.b2b-post-taktik-h1,
h1.b2b-pre-taktik-h1,
#prepaid-taktik h1,
#postpaid-taktik h1,
#b2b-pre-taktik h1,
#b2b-post-taktik h1,
#b2b-pre-taktik-hy h1 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: none !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
  font-size: clamp(1.2rem, 2.3vw, 1.65rem) !important;
  font-weight: 800 !important;
  margin: 0 auto 1.15rem !important;
  padding: 0.85rem 1.4rem !important;
  text-align: center !important;
  width: fit-content;
  max-width: 95%;
}
#prepaid-taktik-wrapper h1.taktik-title::after,
#postpaid-taktik-wrapper h1.postpaid-taktik-h1::after,
h1.b2b-post-taktik-h1::after,
h1.b2b-pre-taktik-h1::after {
  display: none !important;
}

.b2b-post-taktik-sub-header-code,
.b2b-pre-taktik-sub-header-code {
  background: rgba(255,255,255,0.16) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 0.65rem 1rem !important;
  margin-bottom: 1rem !important;
  backdrop-filter: blur(6px);
}

/* بطاقات بيضاء فوق الخلفية الملونة */
.taktik-details-container,
.postpaid-taktik-details-container,
.b2b-post-taktik-details-container,
.b2b-pre-taktik-details-container {
  max-width: 1000px !important;
  width: 100% !important;
  margin: 0 auto 1.25rem auto !important;
  background: rgba(255,255,255,0.96) !important;
  padding: 1.2rem 1.15rem !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.16) !important;
  color: #0f172a !important;
  text-align: right !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
}

.taktik-details-header,
.postpaid-taktik-details-header,
.b2b-post-taktik-details-header,
.b2b-pre-taktik-details-header,
.taktik-section-title,
.postpaid-taktik-details-section-title,
.b2b-post-taktik-details-section-title,
.b2b-pre-taktik-details-section-title {
  background: #5f2c82 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  padding: 12px 18px !important;
  border-radius: 10px !important;
  margin-bottom: 1rem !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(95,44,130,0.22) !important;
}

/* جداول متناسقة مع ألوان الخلفية (تركواز → بنفسجي) */
#prepaid-taktik table,
#postpaid-taktik table,
#b2b-pre-taktik table,
#b2b-post-taktik table,
#b2b-pre-taktik-hy table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 0.75rem !important;
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(95,44,130,0.08) !important;
}
#prepaid-taktik th,
#postpaid-taktik th,
#b2b-pre-taktik th,
#b2b-post-taktik th,
#b2b-pre-taktik-hy th {
  background: #5f2c82 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-weight: 800 !important;
  font-size: 0.84rem !important;
  padding: 11px 9px !important;
  text-align: center !important;
  border: none !important;
}
#prepaid-taktik td,
#postpaid-taktik td,
#b2b-pre-taktik td,
#b2b-post-taktik td,
#b2b-pre-taktik-hy td {
  padding: 10px 9px !important;
  text-align: center !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  border-bottom: 1px solid #eef2f7 !important;
  background: #ffffff !important;
}
#prepaid-taktik tbody tr:nth-child(even) td,
#postpaid-taktik tbody tr:nth-child(even) td,
#b2b-pre-taktik tbody tr:nth-child(even) td,
#b2b-post-taktik tbody tr:nth-child(even) td,
#b2b-pre-taktik-hy tbody tr:nth-child(even) td {
  background: rgba(15,23,42,0.06) !important;
}
#prepaid-taktik tbody tr:hover td,
#postpaid-taktik tbody tr:hover td,
#b2b-pre-taktik tbody tr:hover td,
#b2b-post-taktik tbody tr:hover td,
#b2b-pre-taktik-hy tbody tr:hover td {
  background: var(--table-hover-bg, #ede9fe) !important; color: var(--table-cell-text, #0f172a) !important;
}

#prepaid-taktik .price-inc,
#postpaid-taktik .price-inc,
#postpaid-taktik .postpaid-price-inc,
#b2b-pre-taktik .price-inc,
#b2b-post-taktik .price-inc {
  color: #0f766e !important;
  font-weight: 800 !important;
}
#prepaid-taktik .price-exc,
#postpaid-taktik .price-exc,
#postpaid-taktik .postpaid-price-exc {
  color: #334155 !important;
  font-weight: 700 !important;
}
#prepaid-taktik bdi.code-cell,
#postpaid-taktik bdi.code-cell,
#b2b-pre-taktik bdi.code-cell,
#b2b-post-taktik bdi.code-cell,
#b2b-pre-taktik-hy bdi.code-cell,
#prepaid-taktik .code-cell,
#postpaid-taktik .code-cell {
  display: inline-block !important;
  background: linear-gradient(135deg, #e6f7f6, #f3e8ff) !important;
  color: #5f2c82 !important;
  -webkit-text-fill-color: #5f2c82 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  border: 1px solid rgba(95,44,130,0.25) !important;
  direction: ltr;
}

.taktik-unit-box,
.postpaid-taktik-unit-item-box,
.b2b-post-taktik-unit-item-box,
.b2b-pre-taktik-unit-item-box {
  background: #5f2c82 !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(95,44,130,0.28) !important;
}

/* أي عناصر أخرى داخل تاب تك تك لا تكسر الخلفية */
#prepaid-taktik .tab-content,
#postpaid-taktik > div,
#b2b-pre-taktik > div,
#b2b-post-taktik > div {
  background-color: transparent !important;
}

/* ========== إنترنت الآجل — UI عصري ========== */
#postpaid-qouta.tab-content {
  padding: 0.75rem 0.85rem 2rem !important;
  background: linear-gradient(180deg, #f0f9ff 0%, #f8fafc 40%, #ffffff 100%) !important;
  border: none !important;
  box-shadow: none !important;
}
#postpaid-qouta .sub-postpaid-container {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#postpaid-qouta h1 {
  text-align: center !important;
  font-size: clamp(1.2rem, 2.3vw, 1.55rem) !important;
  font-weight: 800 !important;
  color: #0369a1 !important;
  -webkit-text-fill-color: #0369a1 !important;
  background: #ffffff !important;
  border: 1px solid #bae6fd !important;
  border-radius: 16px !important;
  padding: 1rem 1.25rem !important;
  margin: 0 0 0.5rem !important;
  box-shadow: 0 8px 24px rgba(3, 105, 161, 0.1) !important;
  position: relative !important;
}
#postpaid-qouta h1::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, #0284c7, #06b6d4, #6366f1);
}
#postpaid-qouta h1::after { display: none !important; }
#postpaid-qouta .sub-postpaid-subtitle {
  text-align: center !important;
  color: #64748b !important;
  font-weight: 600 !important;
  margin: 0 0 1.15rem !important;
}
#postpaid-qouta .sub-postpaid-table-section,
#postpaid-qouta .sub-postpaid-rules-section {
  background: #ffffff !important;
  border: 1px solid #e0f2fe !important;
  border-radius: 16px !important;
  padding: 1.15rem 1.2rem !important;
  margin-bottom: 1.15rem !important;
  box-shadow: 0 6px 22px rgba(3, 105, 161, 0.08) !important;
}
#postpaid-qouta .sub-postpaid-section-title,
#postpaid-qouta .sub-postpaid-rules-title {
  display: inline-flex !important;
  background: linear-gradient(135deg, #0284c7, #0ea5e9) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  margin: 0 0 1rem !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
}
#postpaid-qouta table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
#postpaid-qouta th {
  background: linear-gradient(135deg, #0369a1, #0284c7) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  padding: 12px 8px !important;
  text-align: center !important;
  border: none !important;
}
#postpaid-qouta td {
  padding: 11px 8px !important;
  text-align: center !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  border-bottom: 1px solid #f0f9ff !important;
  background: #fff !important;
}
#postpaid-qouta tbody tr:nth-child(even) td { background: var(--table-even-bg, #f8fafc) !important; }
#postpaid-qouta tbody tr:hover td { background: var(--table-hover-bg, #e0f2fe) !important; color: var(--table-cell-text, #0f172a) !important; }
html[data-theme="dark"] #postpaid-qouta tbody tr:hover td { background: #0c4a6e !important; color: #fff !important; }
#postpaid-qouta .post-price-inc { color: #047857 !important; font-weight: 800 !important; }
#postpaid-qouta .post-price-exc { color: #334155 !important; font-weight: 700 !important; }
#postpaid-qouta bdi.code-cell {
  display: inline-block !important;
  background: #e0f2fe !important;
  color: #0369a1 !important;
  -webkit-text-fill-color: #0369a1 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  border: 1px solid #bae6fd !important;
  direction: ltr;
}
#postpaid-qouta .sub-postpaid-rule-item {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-right: 3px solid #0284c7 !important;
  border-radius: 10px !important;
  padding: 0.75rem 1rem !important;
  margin-bottom: 0.65rem !important;
  color: #334155 !important;
  line-height: 1.65 !important;
}

[data-theme="dark"] #postpaid-qouta.tab-content,
body.dark-mode #postpaid-qouta.tab-content {
  background: #0f172a !important;
}
[data-theme="dark"] #postpaid-qouta h1 {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #38bdf8 !important;
  -webkit-text-fill-color: #38bdf8 !important;
}
[data-theme="dark"] #postpaid-qouta .sub-postpaid-table-section,
[data-theme="dark"] #postpaid-qouta .sub-postpaid-rules-section {
  background: #1e293b !important;
  border-color: #334155 !important;
}
[data-theme="dark"] #postpaid-qouta td {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
  border-bottom-color: #1e293b !important;
}
[data-theme="dark"] #postpaid-qouta tbody tr:nth-child(even) td { background: #1e293b !important; }
[data-theme="dark"] #postpaid-qouta tbody tr:hover td { background: #0c4a6e !important; }
[data-theme="dark"] #postpaid-qouta bdi.code-cell {
  background: #0c4a6e !important;
  color: #7dd3fc !important;
  -webkit-text-fill-color: #7dd3fc !important;
  border-color: #0369a1 !important;
}
[data-theme="dark"] .taktik-details-container,
[data-theme="dark"] .postpaid-taktik-details-container,
[data-theme="dark"] .b2b-post-taktik-details-container,
[data-theme="dark"] .b2b-pre-taktik-details-container {
  background: rgba(30, 41, 59, 0.95) !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}
[data-theme="dark"] html[data-theme="dark"] #prepaid-taktik table:not(.tt-modern-table) td,
html[data-theme="dark"] #postpaid-taktik table:not(.tt-modern-table) td,
html[data-theme="dark"] #b2b-pre-taktik td,
html[data-theme="dark"] #b2b-post-taktik td {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
  border-bottom-color: #1e293b !important;
}
[data-theme="dark"] #prepaid-taktik tbody tr:nth-child(even) td,
[data-theme="dark"] #postpaid-taktik tbody tr:nth-child(even) td {
  background: #1e293b !important;
}


/* --- Dark mode complete fix for TakTik tables --- */
html[data-theme="dark"] #prepaid-taktik tbody tr:hover td,
html[data-theme="dark"] #postpaid-taktik tbody tr:hover td,
html[data-theme="dark"] #b2b-pre-taktik tbody tr:hover td,
html[data-theme="dark"] #b2b-post-taktik tbody tr:hover td,
html[data-theme="dark"] #b2b-pre-taktik-hy tbody tr:hover td {
  background: #4c1d95 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html[data-theme="dark"] html[data-theme="dark"] #prepaid-taktik table:not(.tt-modern-table) tbody td,
html[data-theme="dark"] #postpaid-taktik table:not(.tt-modern-table) tbody td,
html[data-theme="dark"] #b2b-pre-taktik tbody td,
html[data-theme="dark"] #b2b-post-taktik tbody td,
html[data-theme="dark"] #b2b-pre-taktik-hy tbody td {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
}
html[data-theme="dark"] #prepaid-taktik tbody tr:nth-child(even) td,
html[data-theme="dark"] #postpaid-taktik tbody tr:nth-child(even) td,
html[data-theme="dark"] #b2b-pre-taktik tbody tr:nth-child(even) td,
html[data-theme="dark"] #b2b-post-taktik tbody tr:nth-child(even) td,
html[data-theme="dark"] #b2b-pre-taktik-hy tbody tr:nth-child(even) td {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
}
/* بطاقات التفاصيل البيضاء: نص داكن دائماً */
#prepaid-taktik .taktik-details-container,
#postpaid-taktik .postpaid-taktik-details-container,
#b2b-pre-taktik .b2b-pre-taktik-details-container,
#b2b-post-taktik .b2b-post-taktik-details-container,
.taktik-details-container,
.postpaid-taktik-details-container,
.b2b-pre-taktik-details-container,
.b2b-post-taktik-details-container {
  background: #ffffff !important;
  color: #0f172a !important;
}
#prepaid-taktik .taktik-details-container *,
#postpaid-taktik .postpaid-taktik-details-container *,
#b2b-pre-taktik .b2b-pre-taktik-details-container *,
#b2b-post-taktik .b2b-post-taktik-details-container *,
.taktik-details-container *:not(i):not(svg),
.postpaid-taktik-details-container *:not(i):not(svg),
.b2b-pre-taktik-details-container *:not(i):not(svg),
.b2b-post-taktik-details-container *:not(i):not(svg) {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
.taktik-details-container .code-cell,
.postpaid-taktik-details-container .code-cell,
.b2b-pre-taktik-details-container .code-cell,
.b2b-post-taktik-details-container .code-cell,
.taktik-details-container bdi,
.postpaid-taktik-details-container bdi {
  color: #6d28d9 !important;
  -webkit-text-fill-color: #6d28d9 !important;
  background: #f5f3ff !important;
}


/* ===== <style id="taktik-solid-color-fix"> ===== */
/* لون واحد ثابت لكل عناصر تك تك */
#prepaid-taktik .taktik-unit-box,
#postpaid-taktik .postpaid-taktik-unit-item-box,
#b2b-pre-taktik .b2b-pre-taktik-unit-item-box,
#b2b-post-taktik .b2b-post-taktik-unit-item-box,
#b2b-pre-taktik-hy .b2b-pre-taktik-unit-item-box,
.taktik-unit-box,
.postpaid-taktik-unit-item-box,
.b2b-post-taktik-unit-item-box,
.b2b-pre-taktik-unit-item-box {
  background: #5f2c82 !important;
  background-image: none !important;
  color: #ffffff !important;
}

#prepaid-taktik th,
#postpaid-taktik th,
#b2b-pre-taktik th,
#b2b-post-taktik th,
#b2b-pre-taktik-hy th,
#prepaid-taktik thead th,
#postpaid-taktik thead th,
#b2b-pre-taktik thead th,
#b2b-post-taktik thead th {
  background: #5f2c82 !important;
  background-image: none !important;
  color: #ffffff !important;
}

#prepaid-taktik .taktik-details-header,
#prepaid-taktik .taktik-section-title,
#postpaid-taktik .postpaid-taktik-details-header,
#postpaid-taktik .postpaid-taktik-details-section-title,
#b2b-pre-taktik .b2b-pre-taktik-details-header,
#b2b-pre-taktik .b2b-pre-taktik-details-section-title,
#b2b-post-taktik .b2b-post-taktik-details-header,
#b2b-post-taktik .b2b-post-taktik-details-section-title {
  background: #5f2c82 !important;
  background-image: none !important;
  color: #ffffff !important;
}


/* ===== <style id="b2b-taktik-dual-bg"> ===== */
/* B2B تك تك: الخلفية تُدار من taktik-modern-ui-2026 فقط (خلفية واحدة) */
#b2b-pre-taktik.tab-content,
#b2b-post-taktik.tab-content {
  overflow: auto !important;
  min-height: calc(100vh - 120px) !important;
  color: #ffffff !important;
}
.b2b-post-taktik-main-content-wrapper,
.b2b-pre-taktik-main-content-wrapper {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 12px 8px 24px !important;
}
#b2b-pre-taktik h1,
#b2b-post-taktik h1,
h1.b2b-post-taktik-h1,
h1.b2b-pre-taktik-h1 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 14px !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
  font-weight: 800 !important;
  padding: 0.85rem 1.4rem !important;
  margin: 0 auto 1rem !important;
  width: fit-content;
  max-width: 95%;
}
.b2b-post-taktik-sub-header-code,
.b2b-pre-taktik-sub-header-code {
  background: rgba(15, 23, 42, 0.45) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 0.65rem 1.15rem !important;
  margin-bottom: 1rem !important;
  font-weight: 700 !important;
}
.b2b-post-taktik-details-container,
.b2b-pre-taktik-details-container {
  background: rgba(255,255,255,0.96) !important;
  color: #0f172a !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.16) !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  max-width: 1000px !important;
  width: 100% !important;
  margin: 0 auto 1.25rem auto !important;
  padding: 1.2rem 1.15rem !important;
}
.b2b-post-taktik-details-header,
.b2b-pre-taktik-details-header,
.b2b-post-taktik-details-section-title,
.b2b-pre-taktik-details-section-title {
  background: #0f766e !important;
  background-image: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-radius: 10px !important;
  padding: 12px 18px !important;
  font-weight: 700 !important;
  text-align: center !important;
}
#b2b-pre-taktik th,
#b2b-post-taktik th {
  background: #0f766e !important;
  background-image: none !important;
  color: #fff !important;
}
#b2b-pre-taktik .b2b-pre-taktik-unit-item-box,
#b2b-post-taktik .b2b-post-taktik-unit-item-box,
.b2b-pre-taktik-unit-item-box,
.b2b-post-taktik-unit-item-box {
  background: #0f766e !important;
  background-image: none !important;
  color: #fff !important;
}
#b2b-pre-taktik tbody tr:nth-child(even) td,
#b2b-post-taktik tbody tr:nth-child(even) td {
  background: rgba(15,23,42,0.06) !important;
}
#b2b-pre-taktik tbody tr:hover td,
#b2b-post-taktik tbody tr:hover td {
  background: var(--table-hover-bg, #ccfbf1) !important;
  color: var(--table-cell-text, #0f172a) !important;
}
html[data-theme="dark"] #b2b-pre-taktik tbody tr:hover td,
html[data-theme="dark"] #b2b-post-taktik tbody tr:hover td {
  background: #0f766e !important;
  color: #ffffff !important;
}
#b2b-pre-taktik bdi.code-cell,
#b2b-post-taktik bdi.code-cell {
  background: #ecfdf5 !important;
  color: #0f766e !important;
  -webkit-text-fill-color: #0f766e !important;
  border: 1px solid #99f6e4 !important;
}


/* ===== <style id="bsvc-subtabs-ui"> ===== */
#bede-service .bsvc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0.5rem 0 1.15rem;
  padding: 6px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(15,23,42,0.04);
}
#bede-service .bsvc-tab {
  flex: 1 1 auto;
  min-width: 140px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: transparent;
  color: #64748b;
}
#bede-service .bsvc-tab:hover { background: #f5f3ff; color: #5b21b6; }
#bede-service .bsvc-tab.is-active {
  background: linear-gradient(135deg, #5b21b6, #7c3aed);
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(91,33,182,0.3);
}
#bede-service .bsvc-panel { display: none; }
#bede-service .bsvc-panel.is-active { display: block; animation: bsvcIn 0.25s ease; }
@keyframes bsvcIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

#bede-service .bsvc-guide-hero {
  text-align: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
#bede-service .bsvc-guide-hero h2 {
  margin: 0 0 0.35rem;
  color: #5b21b6;
  font-size: 1.15rem;
  font-weight: 800;
}
#bede-service .bsvc-guide-hero p {
  margin: 0;
  color: #64748b;
  font-size: 0.9rem;
  line-height: 1.55;
}
#bede-service .bsvc-steps {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1rem;
}
#bede-service .bsvc-step-card {
  display: flex;
  gap: 0.9rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1rem 1.05rem;
  box-shadow: 0 4px 14px rgba(15,23,42,0.04);
}
#bede-service .bsvc-step-card--warn {
  border-color: #fde68a;
  background: #fffbeb;
}
#bede-service .bsvc-step-num {
  flex: 0 0 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #5b21b6, #7c3aed);
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
#bede-service .bsvc-step-card--warn .bsvc-step-num {
  background: linear-gradient(135deg, #d97706, #f59e0b);
}
#bede-service .bsvc-step-body { flex: 1; min-width: 0; }
#bede-service .bsvc-step-body h3 {
  margin: 0 0 0.45rem;
  font-size: 1rem;
  color: #0f172a;
  font-weight: 800;
}
#bede-service .bsvc-step-body ul {
  margin: 0;
  padding-right: 1.1rem;
  color: #334155;
  line-height: 1.65;
  font-size: 0.9rem;
  font-weight: 600;
}
#bede-service .bsvc-alert {
  margin: 0;
  color: #92400e;
  font-weight: 700;
  line-height: 1.6;
  font-size: 0.92rem;
}
#bede-service .bsvc-note {
  margin-top: 0.55rem;
  padding: 0.5rem 0.75rem;
  background: #f8fafc;
  border-radius: 8px;
  border-right: 3px solid #8b5cf6;
  color: #475569;
  font-size: 0.85rem;
  font-weight: 600;
}
#bede-service .bsvc-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}
#bede-service .bsvc-info-card {
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  border-radius: 12px;
  padding: 0.9rem 1rem;
}
#bede-service .bsvc-info-card h4 {
  margin: 0 0 0.35rem;
  color: #5b21b6;
  font-size: 0.92rem;
  font-weight: 800;
}
#bede-service .bsvc-info-card p {
  margin: 0;
  color: #475569;
  font-size: 0.88rem;
  line-height: 1.55;
  font-weight: 600;
}
[data-theme="dark"] #bede-service .bsvc-tabs,
[data-theme="dark"] #bede-service .bsvc-guide-hero,
[data-theme="dark"] #bede-service .bsvc-step-card {
  background: #1e293b;
  border-color: #334155;
}
[data-theme="dark"] #bede-service .bsvc-guide-hero h2,
[data-theme="dark"] #bede-service .bsvc-step-body h3 { color: #e2e8f0; }
[data-theme="dark"] #bede-service .bsvc-step-body ul { color: #cbd5e1; }
[data-theme="dark"] #bede-service .bsvc-info-card {
  background: #312e81;
  border-color: #4c1d95;
}
[data-theme="dark"] #bede-service .bsvc-info-card h4 { color: #e9d5ff; }
[data-theme="dark"] #bede-service .bsvc-info-card p { color: #c4b5fd; }


/* ===== <style id="bsvc-phone-cards-ui"> ===== */
#bede-service .bsvc-phone-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}
#bede-service .bsvc-phone-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(15,23,42,0.06);
  display: flex;
  flex-direction: column;
}
#bede-service .bsvc-phone-card--wide { grid-column: 1 / -1; }
#bede-service .bsvc-phone-bar {
  background: linear-gradient(135deg, #5b21b6, #7c3aed);
  color: #fff;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 0.55rem 0.85rem;
  text-align: center;
}
#bede-service .bsvc-phone-bar--warn {
  background: linear-gradient(135deg, #d97706, #f59e0b);
}
#bede-service .bsvc-phone-body {
  padding: 0.95rem 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
#bede-service .bsvc-phone-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  text-align: center;
}
#bede-service .bsvc-phone-sub {
  text-align: center;
  color: #64748b;
  font-size: 0.88rem;
  font-weight: 600;
}
#bede-service .bsvc-phone-hint {
  text-align: center;
  color: #64748b;
  font-size: 0.8rem;
  line-height: 1.45;
}
#bede-service .bsvc-ltr { direction: ltr; unicode-bidi: isolate; }
#bede-service .bsvc-fake-input {
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  background: #f8fafc;
  color: #64748b;
  font-weight: 600;
  font-size: 0.88rem;
  text-align: center;
}
#bede-service .bsvc-fake-input--ok {
  border-color: #34d399;
  background: #ecfdf5;
  color: #065f46;
}
#bede-service .bsvc-check-line {
  font-size: 0.82rem;
  color: #475569;
  font-weight: 600;
  text-align: right;
}
#bede-service .bsvc-fake-btn {
  background: #0f172a;
  color: #fff;
  text-align: center;
  padding: 0.7rem;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.9rem;
}
#bede-service .bsvc-fake-btn--disabled {
  background: #cbd5e1;
  color: #64748b;
}
#bede-service .bsvc-otp-boxes {
  display: flex;
  gap: 6px;
  justify-content: center;
}
#bede-service .bsvc-otp-boxes span {
  width: 32px;
  height: 38px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
}
#bede-service .bsvc-phone-links {
  text-align: center;
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 600;
}
#bede-service .bsvc-phone-points {
  margin: 0.25rem 0 0;
  padding-right: 1.1rem;
  color: #334155;
  font-size: 0.82rem;
  line-height: 1.55;
  font-weight: 600;
}
#bede-service .bsvc-balance-box {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #fff;
  border-radius: 12px;
  padding: 0.85rem;
  text-align: center;
  font-size: 0.85rem;
}
#bede-service .bsvc-balance-val {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 2px;
  margin-top: 0.25rem;
}
#bede-service .bsvc-quick-grid,
#bede-service .bsvc-svc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
#bede-service .bsvc-quick-grid span,
#bede-service .bsvc-svc-grid span {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.45rem 0.35rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #334155;
}
#bede-service .bsvc-field-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #64748b;
  text-align: right;
}
#bede-service .bsvc-alert-banner {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  color: #92400e;
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.55;
}
[data-theme="dark"] #bede-service .bsvc-phone-card {
  background: #1e293b;
  border-color: #334155;
}
[data-theme="dark"] #bede-service .bsvc-phone-title { color: #f1f5f9; }
[data-theme="dark"] #bede-service .bsvc-fake-input {
  background: #0f172a;
  border-color: #475569;
  color: #94a3b8;
}
[data-theme="dark"] #bede-service .bsvc-phone-points { color: #cbd5e1; }


/* ===== <style id="bsvc-force-show"> ===== */
#bede-service .bsvc-panel { display: none !important; }
#bede-service .bsvc-panel.is-active { display: block !important; }
#bede-service .bsvc-phone-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: 1rem !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#bede-service .bsvc-phone-card {
  display: flex !important;
  visibility: visible !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  min-height: 200px;
}


/* ===== <style id="zain-font-global"> ===== */
/* خط Zain للنصوص — دون كسر أيقونات Font Awesome */
html, body,
button, input, select, textarea,
.nav-link, .dropdown-link, .tab-content, table, th, td,
.ccare-ai-panel, .ccare-ai-msg, .ccare-ai-chip, .ccare-ai-input,
.ccare-ai-svc button, .ccare-ai-choices button,
h1, h2, h3, h4, h5, h6, p, a, li, label {
  font-family: "Zain", "Cairo", "Segoe UI", Tahoma, Arial, sans-serif !important;
}
/* لا نفرض الخط على body * ولا على span حتى لا تُكسر أيقونات FA */
span:not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-brands):not(.fa-regular) {
  font-family: "Zain", "Cairo", "Segoe UI", Tahoma, Arial, sans-serif !important;
}


/* ===== <style id="font-awesome-protect"> ===== */
/* حماية كاملة لأيقونات Font Awesome من أي font-family مفروض */
i.fa, i.fas, i.far, i.fab, i.fa-solid, i.fa-brands, i.fa-regular,
.fa, .fas, .far, .fab, .fa-solid, .fa-brands, .fa-regular,
[class^="fa-"], [class*=" fa-"] {
  font-family: "Font Awesome 6 Free" !important;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  -webkit-text-fill-color: currentColor !important;
}
i.fa-brands, .fa-brands, .fab,
i.fab, [class*="fa-brands"] {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}
i.fa-solid, .fa-solid, .fas,
i.fas {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}
i.fa-regular, .fa-regular, .far {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 400 !important;
}
/* ::before هو مصدر رسم الأيقونة */
i.fa::before, i.fas::before, i.far::before, i.fab::before,
i.fa-solid::before, i.fa-brands::before, i.fa-regular::before,
.fa::before, .fas::before, .far::before, .fab::before,
.fa-solid::before, .fa-brands::before, .fa-regular::before {
  font-family: inherit !important;
}


/* ===== <style id="navbar-soft-glow"> ===== */
/* إضاءة أوضح على النافبار */
.header-nav {
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.35),
    0 4px 28px rgba(124, 58, 237, 0.28),
    0 0 60px rgba(139, 92, 246, 0.2),
    0 0 100px rgba(99, 102, 241, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
.header-nav::after {
  height: 3px !important;
  opacity: 1 !important;
  background: linear-gradient(90deg, transparent 0%, #818cf8 15%, #a78bfa 35%, #22d3ee 50%, #c4b5fd 65%, #818cf8 85%, transparent 100%) !important;
  background-size: 200% 100% !important;
  filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.85)) drop-shadow(0 0 22px rgba(99, 102, 241, 0.55)) !important;
}
.header-nav .nav-link:not(.active) {
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.15), inset 0 0 0 1px rgba(167, 139, 250, 0.12);
}
.header-nav .nav-link.active {
  box-shadow:
    0 0 22px rgba(167, 139, 250, 0.55),
    0 4px 18px rgba(109, 40, 217, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
[data-theme="dark"] .header-nav {
  background: linear-gradient(180deg, rgba(49, 46, 129, 0.55) 0%, rgba(30, 27, 75, 0.75) 40%, rgba(15, 23, 42, 0.95) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.4),
    0 8px 32px rgba(124, 58, 237, 0.32),
    0 0 70px rgba(139, 92, 246, 0.22),
    0 0 120px rgba(99, 102, 241, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .header-nav .nav-link:not(.active) {
  border-color: rgba(167, 139, 250, 0.35) !important;
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.18);
}


/* ===== <style id="ccare-ai-send-force"> ===== */
#ccareAiPanel .ccare-ai-input-row{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:8px !important;
  width:100% !important;
  box-sizing:border-box !important;
  overflow:visible !important;
  padding:8px 10px !important;
}
#ccareAiPanel .ccare-ai-input{
  flex:1 1 auto !important;
  min-width:0 !important;
  max-width:calc(100% - 56px) !important;
  font-size:0.8rem !important;
  padding:8px 10px !important;
}
#ccareAiPanel .ccare-ai-send,
#ccareAiSend{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  flex:0 0 44px !important;
  width:44px !important;
  min-width:44px !important;
  height:40px !important;
  background:linear-gradient(135deg,#4f46e5,#7c3aed) !important;
  color:#fff !important;
  border:none !important;
  border-radius:12px !important;
  z-index:20 !important;
  position:relative !important;
}
#ccareAiPanel .ccare-ai-chip{
  background:#fff !important;
  border:1.5px solid #7c3aed !important;
  color:#4c1d95 !important;
  -webkit-text-fill-color:#4c1d95 !important;
  font-weight:800 !important;
}
[data-theme="dark"] #ccareAiPanel .ccare-ai-chip{
  background:#312e81 !important;
  border-color:#a78bfa !important;
  color:#f5f3ff !important;
  -webkit-text-fill-color:#f5f3ff !important;
}


/* ===== <style id="logo-no-box"> ===== */
/* شعار Customer Care — إضاءة خفيفة مريحة للعين */
#siteLogo.logo,
a.logo#siteLogo,
.header-nav .logo {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
#siteLogo.logo:hover,
a.logo#siteLogo:hover,
.header-nav .logo:hover {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}
#siteLogo.logo::before,
#siteLogo.logo::after,
.header-nav .logo::before,
.header-nav .logo::after {
  display: none !important;
  content: none !important;
}
#siteLogo .logo-text {
  background: linear-gradient(135deg, #818cf8 0%, #a78bfa 40%, #22d3ee 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.35)) drop-shadow(0 0 8px rgba(99, 102, 241, 0.2)) !important;
  box-shadow: none !important;
  border: none !important;
}
#siteLogo .logo-icon {
  filter: drop-shadow(0 0 5px rgba(167, 139, 250, 0.4)) drop-shadow(0 0 10px rgba(108, 92, 231, 0.22)) !important;
}
#siteLogo.logo:hover .logo-text {
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.45)) drop-shadow(0 0 10px rgba(34, 211, 238, 0.25)) !important;
}
#siteLogo.logo:hover .logo-icon {
  filter: drop-shadow(0 0 7px rgba(167, 139, 250, 0.5)) drop-shadow(0 0 12px rgba(108, 92, 231, 0.28)) !important;
}


/* ===== <style id="ccare-ai-azmif-enhance"> ===== */
#ccareAiPanel .ccare-ai-brand-foot{
  text-align:center;
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.08em;
  color:rgba(100,116,139,0.65);
  padding:4px 8px 8px;
  user-select:none;
  pointer-events:none;
  border-top:1px solid rgba(124,58,237,0.12);
  background:rgba(255,255,255,0.25);
}
[data-theme="dark"] #ccareAiPanel .ccare-ai-brand-foot{
  color:rgba(148,163,184,0.55);
  background:rgba(15,23,42,0.35);
  border-top-color:rgba(167,139,250,0.15);
}
#ccareAiPanel .ccare-ai-mic{
  flex:0 0 40px !important;
  width:40px !important;
  min-width:40px !important;
  height:40px !important;
  border:none !important;
  border-radius:12px !important;
  background:linear-gradient(135deg,#06b6d4,#7c3aed) !important;
  color:#fff !important;
  font-size:1.05rem !important;
  cursor:pointer !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 4px 12px rgba(6,182,212,0.3) !important;
  transition:transform .15s, filter .15s, box-shadow .2s !important;
}
#ccareAiPanel .ccare-ai-mic:hover{ filter:brightness(1.08); transform:scale(1.05); }
#ccareAiPanel .ccare-ai-mic.is-listening{
  background:linear-gradient(135deg,#ef4444,#f97316) !important;
  box-shadow:0 0 0 3px rgba(239,68,68,0.25), 0 6px 16px rgba(239,68,68,0.35) !important;
  animation: ccareMicPulse 1.1s ease-in-out infinite;
}
@keyframes ccareMicPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.08); }
}
#ccareAiPanel .ccare-ai-input-row{
  gap:6px !important;
}
#ccareAiPanel .ccare-ai-input{
  max-width:calc(100% - 100px) !important;
}
#ccareAiPanel .ccare-ai-answer-block.warn .ai-ans-title{ color:#f59e0b; }
#ccareAiPanel .ccare-ai-answer-block.strict .ai-ans-title{ color:#06b6d4; }
#ccareAiPanel .ccare-ai-multi-q{
  margin:0.35rem 0 0.55rem;
  padding:0.45rem 0.65rem;
  border-radius:10px;
  background:rgba(124,58,237,0.08);
  border:1px dashed rgba(124,58,237,0.25);
  font-size:0.82rem;
  color:#64748b;
  font-weight:700;
}
[data-theme="dark"] #ccareAiPanel .ccare-ai-multi-q{ color:#94a3b8; background:rgba(124,58,237,0.12); }


/* ===== <style id="ccare-ai-mic2-friendly"> ===== */
#ccareAiPanel .ccare-ai-mic-head{
  font-size:1rem !important;
  background:linear-gradient(135deg,#06b6d4,#7c3aed) !important;
  color:#fff !important;
  border-radius:10px !important;
  width:34px !important;
  height:34px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 3px 10px rgba(6,182,212,0.3) !important;
}
#ccareAiPanel .ccare-ai-mic-head.is-listening,
#ccareAiPanel .ccare-ai-mic.is-listening{
  background:linear-gradient(135deg,#ef4444,#f97316) !important;
  box-shadow:0 0 0 3px rgba(239,68,68,0.25), 0 6px 16px rgba(239,68,68,0.35) !important;
  animation: ccareMicPulse 1.1s ease-in-out infinite;
}
#ccareAiPanel .ccare-ai-greet-desc{
  line-height:1.65;
}
#ccareAiPanel .ccare-ai-msg.bot{
  border-radius:14px 14px 14px 4px;
}


/* ===== <style id="ccare-ai-smart-v2"> ===== */
#ccareAiPanel .ccare-ai-primary{
  font-weight:800 !important;
  font-size:0.95rem !important;
  line-height:1.7 !important;
  color:inherit !important;
  padding:0.35rem 0.15rem 0.5rem !important;
}
#ccareAiPanel .ccare-ai-related-label{
  margin-top:0.45rem;
  font-size:0.78rem;
  font-weight:800;
  opacity:0.8;
}
#ccareAiPanel .ccare-ai-secondary{
  opacity:0.88;
  font-size:0.88rem !important;
}
#ccareAiPanel .ccare-ai-answer-block.strict{
  border:1px solid rgba(6,182,212,0.25);
}


/* ===== <style id="taktik-modern-ui-2026"> ===== */
/* =========================================================
   تك تك — واجهة حديثة متناسقة (نهاري / ليلي) 2026
   خلفية واحدة فقط — بدون طبقات مكررة
   ========================================================= */

/* --- خلفية واحدة نظيفة على مستوى التاب --- */
#prepaid-taktik.tab-content,
#postpaid-taktik.tab-content,
#b2b-pre-taktik.tab-content,
#b2b-post-taktik.tab-content,
#b2b-pre-taktik-hy.tab-content {
  background: linear-gradient(155deg, #5b21b6 0%, #6d28d9 35%, #7c3aed 65%, #0e7490 100%) !important;
  border-radius: 22px !important;
  padding: 1.75rem 1.25rem 2.25rem !important;
  box-shadow: 0 18px 45px rgba(109, 40, 217, 0.22), 0 6px 16px rgba(0,0,0,0.1) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* لمعة خفيفة فوق الخلفية الواحدة */
#prepaid-taktik.tab-content::before,
#postpaid-taktik.tab-content::before,
#b2b-pre-taktik.tab-content::before,
#b2b-post-taktik.tab-content::before,
#b2b-pre-taktik-hy.tab-content::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse 90% 55% at 50% -15%, rgba(255,255,255,0.14), transparent 55%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  border-radius: inherit !important;
}

/* المحتوى فوق اللمعة */
#prepaid-taktik.tab-content > *,
#postpaid-taktik.tab-content > *,
#b2b-pre-taktik.tab-content > *,
#b2b-post-taktik.tab-content > *,
#b2b-pre-taktik-hy.tab-content > * {
  position: relative;
  z-index: 1;
}

/* --- إلغاء كل الخلفيات القديمة من الـ wrappers (منع التضاعف) --- */
#prepaid-taktik-wrapper,
#postpaid-taktik-wrapper,
.b2b-pre-taktik-main-content-wrapper,
.b2b-post-taktik-main-content-wrapper,
.b2b-pre-taktik-hy-main-content-wrapper {
  background: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  padding: 0.5rem 0.25rem 0.75rem !important;
  box-shadow: none !important;
  border: none !important;
  position: relative !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  color: #ffffff !important;
}

/* إلغاء أي ::before قديم على الـ wrappers */
#prepaid-taktik-wrapper::before,
#postpaid-taktik-wrapper::before,
.b2b-pre-taktik-main-content-wrapper::before,
.b2b-post-taktik-main-content-wrapper::before,
.b2b-pre-taktik-hy-main-content-wrapper::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* العناوين */
#prepaid-taktik-wrapper h1.taktik-title,
#postpaid-taktik-wrapper h1.postpaid-taktik-h1,
h1.b2b-pre-taktik-h1,
h1.b2b-post-taktik-h1,
h1.b2b-pre-taktik-hy-h1 {
  background: rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff !important;
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  padding: 0.75rem 1.75rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.25) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto 1.75rem !important;
  letter-spacing: -0.02em;
  animation: none !important;
}

/* الحاوية البيضاء / الزجاجية الداخلية */
.taktik-details-container,
.postpaid-taktik-details-container,
.b2b-pre-taktik-details-container,
.b2b-post-taktik-details-container,
.b2b-pre-taktik-hy-details-container {
  background: rgba(255,255,255,0.97) !important;
  border-radius: 20px !important;
  padding: 1.75rem 1.5rem !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(109,40,217,0.08) !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
  max-width: 980px !important;
  margin: 0 auto 2rem !important;
  color: #0f172a !important;
}

/* الهيدر الداخلي */
.taktik-details-header,
.postpaid-taktik-details-header,
.b2b-pre-taktik-details-header,
.b2b-post-taktik-details-header,
.b2b-pre-taktik-hy-details-header {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
  color: #fff !important;
  padding: 0.9rem 1.4rem !important;
  border-radius: 14px !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin-bottom: 1.5rem !important;
  box-shadow: 0 6px 18px rgba(109,40,217,0.3) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* عناوين الأقسام */
.taktik-section-title,
.postpaid-taktik-details-section-title,
.b2b-pre-taktik-details-section-title,
.b2b-post-taktik-details-section-title,
.b2b-pre-taktik-hy-details-section-title {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
  color: #fff !important;
  padding: 0.65rem 1.25rem !important;
  border-radius: 999px !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.45rem;
  margin: 1.35rem 0 1rem !important;
  box-shadow: 0 4px 14px rgba(109,40,217,0.28) !important;
  width: auto !important;
  max-width: 100%;
}
.taktik-section-title i,
.postpaid-taktik-details-section-title i,
.b2b-pre-taktik-details-section-title i,
.b2b-post-taktik-details-section-title i,
.b2b-pre-taktik-hy-details-section-title i {
  font-size: 0.9rem;
  opacity: 0.95;
}

/* ===== نظام الوحدات الحديث ===== */
.modern-units,
.taktik-unit-conversion.modern-units,
.postpaid-taktik-unit-conversion-section.modern-units,
.b2b-pre-taktik-unit-conversion-section.modern-units,
.b2b-post-taktik-unit-conversion-section.modern-units,
.b2b-pre-taktik-hy-unit-conversion-section.modern-units {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.25rem !important;
  margin: 1.25rem 0 1.75rem !important;
  width: 100%;
}

/* شارة "1 وحدة تعادل" */
.modern-units .taktik-main-unit,
.modern-units .postpaid-taktik-main-unit-display,
.modern-units .b2b-pre-taktik-main-unit-display,
.modern-units .b2b-post-taktik-main-unit-display,
.modern-units .b2b-pre-taktik-hy-main-unit-display {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #6d28d9 100%) !important;
  color: #fff !important;
  padding: 0.7rem 1.6rem !important;
  border-radius: 999px !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 22px rgba(124,58,237,0.4), inset 0 1px 0 rgba(255,255,255,0.25) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(255,255,255,0.25) !important;
  letter-spacing: 0.01em;
}
.modern-units .taktik-main-unit i,
.modern-units .postpaid-taktik-main-unit-display i,
.modern-units .b2b-pre-taktik-main-unit-display i,
.modern-units .b2b-post-taktik-main-unit-display i,
.modern-units .b2b-pre-taktik-hy-main-unit-display i {
  font-size: 1.05rem;
  opacity: 0.95;
}

/* شبكة البطاقات الأربع */
.modern-units .taktik-unit-wrapper,
.modern-units .postpaid-taktik-unit-box-wrapper,
.modern-units .b2b-pre-taktik-unit-box-wrapper,
.modern-units .b2b-post-taktik-unit-box-wrapper,
.modern-units .b2b-pre-taktik-hy-unit-box-wrapper {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.85rem !important;
  width: 100% !important;
  max-width: 820px;
  justify-content: center;
}

/* البطاقة الواحدة */
.modern-units .taktik-unit-box,
.modern-units .postpaid-taktik-unit-item-box,
.modern-units .b2b-pre-taktik-unit-item-box,
.modern-units .b2b-post-taktik-unit-item-box,
.modern-units .b2b-pre-taktik-hy-unit-item-box {
  background: linear-gradient(160deg, #7c3aed 0%, #6d28d9 55%, #5b21b6 100%) !important;
  color: #fff !important;
  border-radius: 18px !important;
  padding: 1.15rem 0.75rem 1rem !important;
  text-align: center !important;
  box-shadow: 0 10px 25px rgba(109,40,217,0.35), 0 2px 6px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem;
  min-height: 118px;
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s ease !important;
  position: relative;
  overflow: hidden;
}
.modern-units .taktik-unit-box::before,
.modern-units .postpaid-taktik-unit-item-box::before,
.modern-units .b2b-pre-taktik-unit-item-box::before,
.modern-units .b2b-post-taktik-unit-item-box::before,
.modern-units .b2b-pre-taktik-hy-unit-item-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.15), transparent);
  pointer-events: none;
}

.modern-units .taktik-unit-box:hover,
.modern-units .postpaid-taktik-unit-item-box:hover,
.modern-units .b2b-pre-taktik-unit-item-box:hover,
.modern-units .b2b-post-taktik-unit-item-box:hover,
.modern-units .b2b-pre-taktik-hy-unit-item-box:hover {
  transform: translateY(-6px) scale(1.03) !important;
  box-shadow: 0 16px 36px rgba(109,40,217,0.45), 0 4px 12px rgba(0,0,0,0.12) !important;
}

/* الأيقونة */
.modern-units .unit-icon {
  font-size: 1.55rem !important;
  margin-bottom: 0.2rem;
  opacity: 0.95;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* القيمة والتسمية */
.modern-units .value,
.modern-units .postpaid-taktik-value,
.modern-units .b2b-pre-taktik-value,
.modern-units .b2b-post-taktik-value,
.modern-units .b2b-pre-taktik-hy-value {
  font-size: 1.12rem !important;
  font-weight: 800 !important;
  line-height: 1.25;
  color: #fff !important;
  letter-spacing: -0.01em;
}
.modern-units .label,
.modern-units .postpaid-taktik-label,
.modern-units .b2b-pre-taktik-label,
.modern-units .b2b-post-taktik-label,
.modern-units .b2b-pre-taktik-hy-label {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.88) !important;
  margin-top: 0 !important;
  line-height: 1.3;
}

/* نص المعلومات والكود */
.taktik-info-text,
.postpaid-taktik-details-info-text.taktik-info-text {
  color: #334155 !important;
  font-weight: 600 !important;
  font-size: 0.98rem !important;
  line-height: 1.7 !important;
  margin-bottom: 0.5rem !important;
  text-align: right;
}
.taktik-code {
  background: linear-gradient(135deg, #f3e8ff, #ede9fe) !important;
  color: #6d28d9 !important;
  font-weight: 800 !important;
  font-size: 1.05em !important;
  padding: 0.2rem 0.55rem !important;
  border-radius: 8px !important;
  border: 1px solid rgba(124,58,237,0.25) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  display: inline-block;
  direction: ltr;
}

/* قوائم القواعد */
.taktik-rules-list li,
.postpaid-taktik-details-rules-list li,
.b2b-pre-taktik-details-rules-list li,
.b2b-post-taktik-details-rules-list li,
.b2b-pre-taktik-hy-details-rules-list li {
  position: relative;
  padding-right: 1.85rem !important;
  margin-bottom: 0.75rem !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
  color: #1e293b !important;
}
.taktik-rules-list li::before,
.postpaid-taktik-details-rules-list li::before,
.b2b-pre-taktik-details-rules-list li::before,
.b2b-post-taktik-details-rules-list li::before,
.b2b-pre-taktik-hy-details-rules-list li::before {
  content: '✓' !important;
  position: absolute !important;
  right: 0 !important;
  top: 0.15rem !important;
  width: 1.35rem;
  height: 1.35rem;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff !important;
  font-size: 0.72rem !important;
  font-weight: 800;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(109,40,217,0.3);
}

/* جداول تك تك */
.taktik-table,
table.postpaid-taktik-table,
table.b2b-pre-taktik-table,
table.b2b-post-taktik-table,
table.b2b-pre-taktik-hy-table {
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.1) !important;
  border: none !important;
}
.taktik-table thead th,
table.postpaid-taktik-table thead th,
table.b2b-pre-taktik-table thead th,
table.b2b-post-taktik-table thead th,
table.b2b-pre-taktik-hy-table thead th {
  background: linear-gradient(135deg, #6d28d9, #7c3aed) !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 0.85rem 0.75rem !important;
  border: none !important;
}

/* رموز الخدمة (B2B) */
.b2b-pre-taktik-codes-box,
.b2b-post-taktik-codes-box,
.b2b-pre-taktik-hy-codes-box {
  background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(109,40,217,0.05)) !important;
  border-right: 4px solid #7c3aed !important;
  border-radius: 12px !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 1.25rem !important;
}
.b2b-pre-taktik-sub-header-code,
.b2b-post-taktik-sub-header-code,
.b2b-pre-taktik-hy-sub-header-code {
  background: rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(8px);
  color: #fff !important;
  padding: 0.55rem 1.4rem !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  margin-bottom: 1.25rem !important;
  display: inline-block !important;
}

/* ========== الوضع الليلي — خلفية واحدة فقط ========== */
[data-theme="dark"] #prepaid-taktik.tab-content,
[data-theme="dark"] #postpaid-taktik.tab-content,
[data-theme="dark"] #b2b-pre-taktik.tab-content,
[data-theme="dark"] #b2b-post-taktik.tab-content,
[data-theme="dark"] #b2b-pre-taktik-hy.tab-content {
  background: linear-gradient(155deg, #1e1b4b 0%, #312e81 30%, #4c1d95 60%, #0f172a 100%) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,0.45), 0 0 0 1px rgba(167,139,250,0.18) !important;
  border-color: rgba(167,139,250,0.2) !important;
}

[data-theme="dark"] #prepaid-taktik-wrapper,
[data-theme="dark"] #postpaid-taktik-wrapper,
[data-theme="dark"] .b2b-pre-taktik-main-content-wrapper,
[data-theme="dark"] .b2b-post-taktik-main-content-wrapper,
[data-theme="dark"] .b2b-pre-taktik-hy-main-content-wrapper {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

[data-theme="dark"] .taktik-details-container,
[data-theme="dark"] .postpaid-taktik-details-container,
[data-theme="dark"] .b2b-pre-taktik-details-container,
[data-theme="dark"] .b2b-post-taktik-details-container,
[data-theme="dark"] .b2b-pre-taktik-hy-details-container {
  background: rgba(30, 41, 59, 0.92) !important;
  border-color: rgba(148,163,184,0.18) !important;
  color: #f1f5f9 !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important;
}

[data-theme="dark"] .taktik-details-header,
[data-theme="dark"] .postpaid-taktik-details-header,
[data-theme="dark"] .b2b-pre-taktik-details-header,
[data-theme="dark"] .b2b-post-taktik-details-header,
[data-theme="dark"] .b2b-pre-taktik-hy-details-header,
[data-theme="dark"] .taktik-section-title,
[data-theme="dark"] .postpaid-taktik-details-section-title,
[data-theme="dark"] .b2b-pre-taktik-details-section-title,
[data-theme="dark"] .b2b-post-taktik-details-section-title,
[data-theme="dark"] .b2b-pre-taktik-hy-details-section-title {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
  box-shadow: 0 6px 18px rgba(139,92,246,0.35) !important;
}

[data-theme="dark"] .modern-units .taktik-unit-box,
[data-theme="dark"] .modern-units .postpaid-taktik-unit-item-box,
[data-theme="dark"] .modern-units .b2b-pre-taktik-unit-item-box,
[data-theme="dark"] .modern-units .b2b-post-taktik-unit-item-box,
[data-theme="dark"] .modern-units .b2b-pre-taktik-hy-unit-item-box {
  background: linear-gradient(160deg, #7c3aed 0%, #6d28d9 50%, #4c1d95 100%) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

[data-theme="dark"] .taktik-info-text,
[data-theme="dark"] .postpaid-taktik-details-info-text.taktik-info-text,
[data-theme="dark"] .taktik-rules-list li,
[data-theme="dark"] .postpaid-taktik-details-rules-list li,
[data-theme="dark"] .b2b-pre-taktik-details-rules-list li,
[data-theme="dark"] .b2b-post-taktik-details-rules-list li,
[data-theme="dark"] .b2b-pre-taktik-hy-details-rules-list li {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .taktik-code {
  background: linear-gradient(135deg, rgba(124,58,237,0.25), rgba(109,40,217,0.2)) !important;
  color: #c4b5fd !important;
  border-color: rgba(167,139,250,0.35) !important;
}

[data-theme="dark"] .b2b-pre-taktik-codes-box,
[data-theme="dark"] .b2b-post-taktik-codes-box,
[data-theme="dark"] .b2b-pre-taktik-hy-codes-box {
  background: rgba(124,58,237,0.12) !important;
  border-right-color: #a78bfa !important;
  color: #e2e8f0;
}

/* استجابة */
@media (max-width: 768px) {
  .modern-units .taktik-unit-wrapper,
  .modern-units .postpaid-taktik-unit-box-wrapper,
  .modern-units .b2b-pre-taktik-unit-box-wrapper,
  .modern-units .b2b-post-taktik-unit-box-wrapper,
  .modern-units .b2b-pre-taktik-hy-unit-box-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.7rem !important;
  }
  .modern-units .taktik-unit-box,
  .modern-units .postpaid-taktik-unit-item-box,
  .modern-units .b2b-pre-taktik-unit-item-box,
  .modern-units .b2b-post-taktik-unit-item-box,
  .modern-units .b2b-pre-taktik-hy-unit-item-box {
    min-height: 105px;
    padding: 0.95rem 0.5rem !important;
  }
  .modern-units .unit-icon { font-size: 1.35rem !important; }
  .modern-units .value,
  .modern-units .postpaid-taktik-value,
  .modern-units .b2b-pre-taktik-value,
  .modern-units .b2b-post-taktik-value,
  .modern-units .b2b-pre-taktik-hy-value { font-size: 1rem !important; }
}
@media (max-width: 420px) {
  .modern-units .taktik-unit-wrapper,
  .modern-units .postpaid-taktik-unit-box-wrapper,
  .modern-units .b2b-pre-taktik-unit-box-wrapper,
  .modern-units .b2b-post-taktik-unit-box-wrapper,
  .modern-units .b2b-pre-taktik-hy-unit-box-wrapper {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* ===== <style id="ccare-float-drag-physics"> ===== */
/* أزرار عائمة قابلة للسحب والرمي — بدون تعطيل النقر */
#ttFabRoot.ccare-draggable,
#ccareAiBotRoot.ccare-draggable,
#ccareFaqsFab.ccare-draggable {
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  will-change: left, top;
  cursor: grab !important;
}
#ttFabRoot.ccare-draggable.is-dragging,
#ccareAiBotRoot.ccare-draggable.is-dragging,
#ccareFaqsFab.ccare-draggable.is-dragging {
  cursor: grabbing !important;
  z-index: 10060 !important;
  transition: none !important;
}
#ttFabRoot.ccare-draggable.is-dragging .tt-fab-btn,
#ccareAiBotRoot.ccare-draggable.is-dragging .ccare-ai-fab,
#ccareFaqsFab.ccare-draggable.is-dragging {
  animation: none !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.28) !important;
}
#ttFabRoot.ccare-draggable.is-physics,
#ccareAiBotRoot.ccare-draggable.is-physics,
#ccareFaqsFab.ccare-draggable.is-physics {
  transition: none !important;
}
#ttFabRoot.ccare-draggable.is-dragging .tt-fab-btn:hover,
#ccareAiBotRoot.ccare-draggable.is-dragging .ccare-ai-fab:hover,
#ccareFaqsFab.ccare-draggable.is-dragging:hover {
  transform: none !important;
}
/* فصل الطبقات الافتراضية حتى لا تختلط */
#ccareFaqsFab { z-index: 10020 !important; }
#ccareAiBotRoot { z-index: 10010 !important; }
#ttFabRoot { z-index: 10000 !important; }
#ccareFaqsOverlay { z-index: 10080 !important; }
#ccareFaqsOverlay.is-open { z-index: 10080 !important; }