/* ==========================================================================
   ELPOP Dynamic CSS v3.1 — Central Variable Bridge
   
   This file is the SINGLE SOURCE OF TRUTH for all dynamic CSS variables.
   Variables are injected inline by class-elpop-frontend.php from admin settings.
   
   Structure:
   1. Variable declarations (set via inline from admin)
   2. Font hierarchy system
   3. Text glow utilities
   4. Table styling
   5. Related tools
   6. Article button
   7. Isolation
   ========================================================================== */

/* ── 1. Variable Declarations (defaults, overridden by inline styles) ── */
.elpop-plugin-wrap {
    --elpop-global-font-size: 18px;
    --elpop-title-font-size: 32px;
    --elpop-desc-font-size: 18px;
    --elpop-tag-font-size: 14px;
    --elpop-title-color: #ffffff;
    --elpop-desc-color: #cccccc;
    --elpop-secondary-color: #a855f7;
    --elpop-border-radius: 12px;
    --elpop-border-radius-sm: 8px;
    --elpop-border-radius-lg: 16px;
}

/* ── 2. Font Hierarchy System ── */
/* Base font size — all elements scale proportionally */
.elpop-plugin-wrap {
    font-size: var(--elpop-global-font-size) !important;
}

/* Main text elements */
.elpop-plugin-wrap p:not(.tool-desc-text),
.elpop-plugin-wrap .main-text {
    font-size: var(--elpop-global-font-size) !important;
}

/* Form and UI elements — scaled relative to global */
.elpop-plugin-wrap label {
    font-size: calc(var(--elpop-global-font-size) * 0.85) !important;
}
.elpop-plugin-wrap select,
.elpop-plugin-wrap input,
.elpop-plugin-wrap textarea,
.elpop-plugin-wrap button:not(.btn-sm) {
    font-size: calc(var(--elpop-global-font-size) * 0.9) !important;
}
.elpop-plugin-wrap .settings-header {
    font-size: calc(var(--elpop-global-font-size) * 0.95) !important;
}
.elpop-plugin-wrap .btn-sm {
    font-size: calc(var(--elpop-global-font-size) * 0.8) !important;
}
.elpop-plugin-wrap .range-value {
    font-size: calc(var(--elpop-global-font-size) * 0.8) !important;
}
.elpop-plugin-wrap .card-title {
    font-size: calc(var(--elpop-global-font-size) * 1.1) !important;
    font-weight: 700 !important;
}

/* User-defined Title Size — H1, H2, H3 */
.elpop-plugin-wrap .tool-name-heading,
.elpop-plugin-wrap h1,
.elpop-plugin-wrap h2,
.elpop-plugin-wrap h3 {
    font-size: var(--elpop-title-font-size) !important;
    color: var(--elpop-title-color) !important;
}

/* Scale sub-headings proportionally */
.elpop-plugin-wrap h2 {
    font-size: calc(var(--elpop-title-font-size) * 0.85) !important;
}
.elpop-plugin-wrap h3 {
    font-size: calc(var(--elpop-title-font-size) * 0.7) !important;
}

/* User-defined Description Size */
.elpop-plugin-wrap .tool-desc-text,
.elpop-plugin-wrap .tool-desc-text *,
.elpop-plugin-wrap .faq-q,
.elpop-plugin-wrap .faq-a,
.elpop-plugin-wrap .elpop-property-label,
.elpop-plugin-wrap .elpop-property-value {
    font-size: var(--elpop-desc-font-size) !important;
    color: var(--elpop-desc-color) !important;
}

/* User-defined Tag Size */
.elpop-plugin-wrap .tag-item,
.elpop-plugin-wrap .elpop-tag {
    font-size: var(--elpop-tag-font-size) !important;
}

/* Override border radius based on admin setting */
.elpop-plugin-wrap .card,
.elpop-plugin-wrap .settings-section,
.elpop-plugin-wrap .upload-zone,
.elpop-plugin-wrap .preview-container,
.elpop-plugin-wrap .btn,
.elpop-plugin-wrap .tool-faq-box,
.elpop-plugin-wrap .faq-item {
    border-radius: var(--elpop-border-radius) !important;
}

/* ── 3. Text Glow Utilities ── */
/* Glow effect — enabled/disabled by body class set from PHP */
body.elpop-glow-on .elpop-plugin-wrap .tool-name-heading {
    text-shadow: 0 0 10px var(--cyan), 0 0 30px rgba(0, 229, 255, 0.3), 0 0 60px rgba(0, 229, 255, 0.1);
}

body.elpop-glow-on .elpop-plugin-wrap h1 {
    text-shadow: 0 0 8px var(--cyan), 0 0 25px rgba(0, 229, 255, 0.2);
}

body.elpop-glow-on .elpop-plugin-wrap h2 {
    text-shadow: 0 0 6px var(--elpop-secondary-color), 0 0 20px rgba(168, 85, 247, 0.2);
}

body.elpop-glow-on .elpop-plugin-wrap h3 {
    text-shadow: 0 0 5px var(--elpop-secondary-color), 0 0 15px rgba(168, 85, 247, 0.15);
}

body.elpop-glow-on .elpop-plugin-wrap .card-title {
    text-shadow: 0 0 6px var(--cyan), 0 0 15px rgba(0, 229, 255, 0.15);
}

body.elpop-glow-on .elpop-plugin-wrap .faq-q {
    text-shadow: 0 0 4px var(--cyan), 0 0 10px rgba(0, 229, 255, 0.1);
}

body.elpop-glow-on .elpop-plugin-wrap .btn-primary {
    box-shadow: 0 4px 15px rgba(0, 229, 255, 0.3), 0 0 20px rgba(0, 229, 255, 0.1) !important;
}

body.elpop-glow-on .elpop-plugin-wrap .btn-primary:hover {
    box-shadow: 0 6px 25px rgba(0, 229, 255, 0.5), 0 0 35px rgba(0, 229, 255, 0.2) !important;
}

/* No glow fallback — clean shadows */
body:not(.elpop-glow-on) .elpop-plugin-wrap .tool-name-heading,
body:not(.elpop-glow-on) .elpop-plugin-wrap h1,
body:not(.elpop-glow-on) .elpop-plugin-wrap h2,
body:not(.elpop-glow-on) .elpop-plugin-wrap h3 {
    text-shadow: none;
}

/* ── 4. Unified Table Styling ── */
/* Base table styles applied to ALL tables inside plugin */
.elpop-plugin-wrap table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--elpop-border-radius);
    overflow: hidden;
    border: 1px solid var(--border-color);
    margin-bottom: 16px;
    font-size: var(--elpop-global-font-size);
}

.elpop-plugin-wrap table thead th {
    padding: 14px 16px;
    font-weight: 700;
    text-align: right;
    font-size: calc(var(--elpop-global-font-size) * 0.9);
}

.elpop-plugin-wrap table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: calc(var(--elpop-global-font-size) * 0.88);
}

.elpop-plugin-wrap table tbody tr:last-child td {
    border-bottom: none;
}

/* Neon table style (default) */
body.elpop-table-neon .elpop-plugin-wrap table thead th {
    background: linear-gradient(135deg, var(--cyan), var(--elpop-secondary-color));
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

body.elpop-table-neon .elpop-plugin-wrap table tbody tr:hover {
    background: rgba(0, 229, 255, 0.05);
}

body.elpop-table-neon .elpop-plugin-wrap table {
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.08), 0 0 30px rgba(168, 85, 247, 0.05);
}

/* Minimal table style */
body.elpop-table-minimal .elpop-plugin-wrap table thead th {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
}

body.elpop-table-minimal .elpop-plugin-wrap table tbody tr:hover {
    background: var(--bg-tertiary);
}

/* Striped table style */
body.elpop-table-striped .elpop-plugin-wrap table thead th {
    background: var(--bg-card);
    color: var(--cyan);
    border-bottom: 2px solid var(--cyan);
}

body.elpop-table-striped .elpop-plugin-wrap table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

body.elpop-table-striped .elpop-plugin-wrap table tbody tr:nth-child(odd) {
    background: var(--bg-tertiary);
}

body.elpop-table-striped .elpop-plugin-wrap table tbody tr:hover {
    background: rgba(0, 229, 255, 0.05);
}

/* ── 5. Article Button Style ── */
.elpop-actions-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    margin: 30px 0;
}
.elpop-actions-row .elpop-rating-card {
    margin: 0 !important;
    height: 100%;
    box-sizing: border-box;
}
.elpop-actions-row .tool-article-link-wrap {
    margin: 0 !important;
    height: 100%;
    display: flex;
    align-items: center;
}
.elpop-plugin-wrap .tool-article-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--bg-tertiary);
    color: var(--cyan);
    padding: 14px 28px;
    border-radius: var(--elpop-border-radius-lg, 16px);
    font-size: calc(var(--elpop-desc-font-size) * 1.1) !important;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}
.elpop-plugin-wrap .tool-article-btn:hover {
    background: var(--bg-card);
    border-color: var(--cyan);
    box-shadow: 0 4px 15px rgba(0,229,255,0.2);
    transform: translateY(-2px);
    color: var(--cyan);
}

/* ── 6. Related Tools Section ── */
.elpop-related-tools {
    margin: 30px 0;
    padding: 20px;
    border-radius: var(--elpop-border-radius-lg, 16px);
}
.elpop-related-tools .related-tools-title {
    font-size: calc(var(--elpop-title-font-size) * 0.6) !important;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--text-primary);
    text-align: center;
}
.elpop-related-tools .related-tools-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}
@media (max-width: 900px) {
    .elpop-related-tools .related-tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.elpop-related-tools .related-tool-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    padding: 15px;
    border-radius: var(--elpop-border-radius);
    transition: all 0.3s;
}
.elpop-related-tools .related-icon {
    font-size: calc(var(--elpop-title-font-size) * 0.7);
    margin-bottom: 10px;
}
.elpop-related-tools .related-title {
    font-size: calc(var(--elpop-desc-font-size) * 0.85) !important;
    font-weight: 600;
    color: var(--text-primary);
}

/* Classic Style */
.elpop-style-classic { background: transparent; }
.elpop-style-classic .related-tool-card { background: var(--bg-card); border: 1px solid var(--border-color); }
.elpop-style-classic .related-tool-card:hover { border-color: var(--cyan); }
.elpop-style-classic .related-icon { color: var(--cyan); }

/* Professional Style */
.elpop-style-professional { background: var(--bg-tertiary); border: 1px solid var(--border-color); }
.elpop-style-professional .related-tool-card { background: var(--bg-card); box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.elpop-style-professional .related-tool-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,229,255,0.15); }
.elpop-style-professional .related-icon { color: var(--elpop-secondary-color, #a855f7); }

/* Modern Style */
.elpop-style-modern { background: linear-gradient(135deg, rgba(0,229,255,0.05), rgba(168,85,247,0.05)); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px); }
.elpop-style-modern .related-tool-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.05); }
.elpop-style-modern .related-tool-card:hover { background: linear-gradient(135deg, rgba(0,229,255,0.1), rgba(168,85,247,0.1)); border-color: var(--cyan); }
.elpop-style-modern .related-icon { background: linear-gradient(135deg, #00e5ff, var(--elpop-secondary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* Text Emoji Style */
.elpop-style-text-emoji { background: transparent; }
.elpop-style-text-emoji .related-tools-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.elpop-style-text-emoji .related-tool-card { flex-direction: row; padding: 8px 16px; background: var(--bg-tertiary); border-radius: 20px; gap: 8px; }
.elpop-style-text-emoji .related-icon { margin: 0; font-size: calc(var(--elpop-global-font-size) * 0.75); color: var(--text-secondary); }
.elpop-style-text-emoji .related-tool-card:hover { background: var(--bg-card); }
.elpop-style-text-emoji .related-tool-card:hover .related-icon,
.elpop-style-text-emoji .related-tool-card:hover .related-title { color: var(--cyan); }

/* ── 7. Isolation CSS for single tool pages ── */
#elpop-isolation-style + .elpop-plugin-wrap .tab-content { display: none !important; }
#elpop-isolation-style + .elpop-plugin-wrap .tab-nav { display: none !important; }
#elpop-isolation-style + .elpop-plugin-wrap .app-header { display: none !important; }

/* ── 8. AI Tab — Controlled Sizing (replaces aggressive overrides) ── */
/* AI elements use the global variable system proportionally */
#content-ai .ai-avatar-name { font-size: calc(var(--elpop-global-font-size) * 0.95) !important; font-weight: 700 !important; }
#content-ai .chat-welcome h3 { font-size: calc(var(--elpop-title-font-size) * 0.6) !important; font-weight: 700 !important; }
#content-ai .chat-welcome p { font-size: calc(var(--elpop-global-font-size) * 0.9) !important; font-weight: 400 !important; }
#content-ai .chat-welcome-chip { font-size: calc(var(--elpop-global-font-size) * 0.8) !important; font-weight: 400 !important; }
#content-ai .ai-sidebar-section-title { font-size: calc(var(--elpop-global-font-size) * 0.82) !important; font-weight: 700 !important; }
#content-ai .form-group label { font-size: calc(var(--elpop-global-font-size) * 0.88) !important; font-weight: 400 !important; }
#content-ai .form-group select,
#content-ai .form-group input { font-size: calc(var(--elpop-global-font-size) * 0.88) !important; font-weight: 400 !important; }
#content-ai #chat-input { font-size: calc(var(--elpop-global-font-size) * 0.9) !important; font-weight: 400 !important; }
#content-ai .chat-msg-bubble,
#content-ai .message-content { font-size: calc(var(--elpop-global-font-size) * 0.92) !important; font-weight: 400 !important; line-height: 1.75 !important; }
#content-ai .chat-msg-meta { font-size: calc(var(--elpop-global-font-size) * 0.68) !important; font-weight: 400 !important; }
#content-ai .ai-model-select { font-size: calc(var(--elpop-global-font-size) * 0.78) !important; }
#content-ai .ai-topbar-btn { font-size: calc(var(--elpop-global-font-size) * 1) !important; }
#content-ai .quick-action-btn { font-size: calc(var(--elpop-global-font-size) * 0.74) !important; font-weight: 400 !important; }
#content-ai .btn { font-size: calc(var(--elpop-global-font-size) * 0.88) !important; font-weight: 600 !important; }
#content-ai p { font-size: calc(var(--elpop-global-font-size) * 0.9) !important; font-weight: 400 !important; }
#content-ai li { font-size: calc(var(--elpop-global-font-size) * 0.9) !important; font-weight: 400 !important; }
#content-ai textarea,
#content-ai input,
#content-ai select,
#content-ai label { font-size: calc(var(--elpop-global-font-size) * 0.88) !important; font-weight: 400 !important; }
#content-ai h1,
#content-ai h2,
#content-ai h3,
#content-ai .ai-sidebar-section-title { font-size: calc(var(--elpop-title-font-size) * 0.55) !important; font-weight: 700 !important; }

/* ══════════════════════════════════════════════════════════
   ELPOP Dynamic — Mobile Override v1.0
   إصلاح الإطار الأبيض على الموبايل + عرض كامل
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* إلغاء الـ border-radius على المستوى الخارجي */
  .elpop-plugin-wrap {
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* إعادة تعيين border-radius للعناصر الداخلية فقط */
  .elpop-plugin-wrap .card,
  .elpop-plugin-wrap .settings-section,
  .elpop-plugin-wrap .upload-zone,
  .elpop-plugin-wrap .preview-container,
  .elpop-plugin-wrap .btn,
  .elpop-plugin-wrap .tool-faq-box,
  .elpop-plugin-wrap .faq-item {
    border-radius: var(--elpop-border-radius, 12px) !important;
  }

  /* إصلاح font hierarchy على موبايل */
  .elpop-plugin-wrap .tool-name-heading,
  .elpop-plugin-wrap h1 {
    font-size: calc(var(--elpop-title-font-size, 32px) * 0.65) !important;
    word-break: break-word !important;
  }

  .elpop-plugin-wrap h2 {
    font-size: calc(var(--elpop-title-font-size, 32px) * 0.55) !important;
  }

  .elpop-plugin-wrap h3 {
    font-size: calc(var(--elpop-title-font-size, 32px) * 0.48) !important;
  }

  .elpop-plugin-wrap .tool-desc-text,
  .elpop-plugin-wrap .tool-desc-text * {
    font-size: calc(var(--elpop-desc-font-size, 18px) * 0.85) !important;
  }

  /* AI Tab font fixes */
  #content-ai .chat-welcome h3 {
    font-size: calc(var(--elpop-title-font-size, 32px) * 0.42) !important;
  }

  /* Related tools title */
  .elpop-related-tools .related-tools-title {
    font-size: calc(var(--elpop-title-font-size, 32px) * 0.42) !important;
  }

}
/* ==========================================================================
   ELPOP — White Line / White Border Fix
   إصلاح الخط الأبيض الظاهر بين الهيدر والمحتوى
   ========================================================================== */

/* ══ السبب الأساسي: الثيم يضيف background أبيض على body/header/main
   الحل: نضمن أن كل حاوية بتحيط بالبلجن تأخذ نفس الخلفية الداكنة ══ */

/* 1. إخفاء أي خلفية بيضاء تظهر حول البلجن من الثيم */
body.has-elpop-tool,
body.has-elpop-tool .site-main,
body.has-elpop-tool main,
body.has-elpop-tool .entry-content,
body.has-elpop-tool .post-content,
body.has-elpop-tool article,
body.has-elpop-tool .page-content,
body.has-elpop-tool .elementor-widget-container,
body.has-elpop-tool .wp-block-group,
body.has-elpop-tool .wp-block-post-content {
  background: #0a0a0f !important;
  background-color: #0a0a0f !important;
}

/* 2. الخط الأبيض نفسه — غالباً border أو background على sticky header */
.elpop-plugin-wrap .app-header {
  background: var(--bg-secondary, #12121a) !important;
  border-bottom: 1px solid var(--border-color, #2a2a4a) !important;
  /* منع أي شفافية تُظهر خلفية الثيم */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 3. على الموبايل: app-header not sticky — يمنع ظهور الخط عند التمرير */
@media (max-width: 768px) {
  .elpop-plugin-wrap .app-header {
    position: relative !important;
    top: auto !important;
    /* خلفية صلبة بدون blur لأن blur يُظهر ما خلفه */
    background: var(--bg-secondary, #12121a) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--border-color, #2a2a4a) !important;
    /* إزالة أي margin خارجي */
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 4. Tab nav — منع الخلفية الشفافة */
  .tab-nav {
    background: var(--bg-primary, #0a0a0f) !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border-color, #2a2a4a) !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 5. الحاوية الرئيسية — إزالة أي gap يُظهر الخلفية البيضاء */
  .elpop-plugin-wrap {
    background: var(--bg-primary, #0a0a0f) !important;
    /* غلق كل الثغرات */
    gap: 0 !important;
    row-gap: 0 !important;
  }

  /* 6. منع أي عنصر مباشر داخل الـ wrap من إظهار خلفية بيضاء */
  .elpop-plugin-wrap > * {
    background-color: transparent;
  }

  /* 7. الـ elpop-navbar إن وُجدت */
  .elpop-navbar {
    background: var(--menu-bg, var(--bg-secondary, #12121a)) !important;
    border-bottom: 1px solid var(--border-color, #2a2a4a) !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* 8. الـ tab-content — إزالة أي فراغ فوقه */
  .tab-content.active {
    margin-top: 0 !important;
    padding-top: 10px !important;
  }
}

/* ══ Light Theme ══ */
body.light-theme .elpop-plugin-wrap .app-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
body.light-theme .tab-nav {
  background: #f0f2f5 !important;
}