/**
 * Negarnovin AI SEO Pro — Frontend styles for AI blocks + dark mode support.
 * Version: 2.2.1
 *
 * Targets:
 *   .nv-featured-snippet  — Quick Answer block
 *   .nv-tldr              — TL;DR / Key Takeaways block
 *   .nv-paa-block         — People Also Ask block
 *   .nv-eeat-block        — Reviewed-by trust block
 *   .nv-llm-only-block    — Marker class for LLM-only visibility
 *   .nv-hey-ai-btn        — "Hey AI, learn about this page" floating button
 *
 * Dark mode support follows Bootstrap 5's data-bs-theme="dark" attribute,
 * which is the convention used by the Hostim theme family.
 */

/* ── Light mode (default) ─────────────────────────────────────────── */
.nv-llm-only-block {
    --nv-block-bg: rgba(0, 0, 0, 0.02);
    --nv-block-border: rgba(229, 231, 235, 0.6);
    --nv-block-text: #1f2937;
    --nv-block-heading: #111827;
    --nv-block-muted: #6b7280;
}

.nv-featured-snippet {
    --nv-block-bg: rgba(2, 132, 199, 0.08);
    --nv-block-border: #0284c7;
    --nv-block-heading: #0c4a6e;
}

.nv-tldr {
    --nv-block-bg: rgba(202, 138, 4, 0.08);
    --nv-block-border: #ca8a04;
    --nv-block-heading: #713f12;
}

.nv-paa-block {
    --nv-block-bg: rgba(124, 58, 237, 0.04);
    --nv-block-border: rgba(124, 58, 237, 0.2);
    --nv-block-heading: #5b21b6;
}

.nv-eeat-block {
    --nv-block-bg: rgba(250, 251, 252, 0.6);
    --nv-block-border: rgba(229, 231, 235, 0.6);
    --nv-block-heading: #374151;
}

/* ── Dark mode (Bootstrap 5 convention) ───────────────────────────── */
[data-bs-theme="dark"] .nv-llm-only-block,
[data-bs-theme="dark"] .nv-featured-snippet,
[data-bs-theme="dark"] .nv-tldr,
[data-bs-theme="dark"] .nv-paa-block,
[data-bs-theme="dark"] .nv-eeat-block {
    --nv-block-bg: rgba(30, 41, 59, 0.6);
    --nv-block-border: rgba(255, 255, 255, 0.05);
    --nv-block-heading: #f8fafc;
    --nv-block-text: #cbd5e1;
    --nv-block-muted: #94a3b8;
    color: #fff;
    background-color: var(--nv-block-bg) !important;
}

[data-bs-theme="dark"] .nv-featured-snippet {
    --nv-block-bg: rgba(2, 132, 199, 0.15);
    --nv-block-border: rgba(96, 165, 250, 0.4);
    --nv-block-heading: #60a5fa;
}

[data-bs-theme="dark"] .nv-tldr {
    --nv-block-bg: rgba(202, 138, 4, 0.15);
    --nv-block-border: rgba(251, 191, 36, 0.4);
    --nv-block-heading: #fbbf24;
}

[data-bs-theme="dark"] .nv-paa-block {
    --nv-block-bg: rgba(124, 58, 237, 0.12);
    --nv-block-border: rgba(167, 139, 250, 0.3);
    --nv-block-heading: #a78bfa;
}

[data-bs-theme="dark"] .nv-eeat-block {
    --nv-block-bg: rgba(30, 41, 59, 0.5);
    --nv-block-border: rgba(255, 255, 255, 0.05);
    --nv-block-heading: #f8fafc;
}

/* Force text colors in dark mode (override theme defaults) */
[data-bs-theme="dark"] .nv-llm-only-block h1,
[data-bs-theme="dark"] .nv-llm-only-block h2,
[data-bs-theme="dark"] .nv-llm-only-block h3,
[data-bs-theme="dark"] .nv-llm-only-block h4,
[data-bs-theme="dark"] .nv-llm-only-block h5,
[data-bs-theme="dark"] .nv-llm-only-block h6,
[data-bs-theme="dark"] .nv-llm-only-block p,
[data-bs-theme="dark"] .nv-llm-only-block span,
[data-bs-theme="dark"] .nv-llm-only-block li,
[data-bs-theme="dark"] .nv-llm-only-block a,
[data-bs-theme="dark"] .nv-llm-only-block strong,
[data-bs-theme="dark"] .nv-llm-only-block em {
    color: #fff !important;
    background-color: inherit !important;
}

[data-bs-theme="dark"] .nv-llm-only-block a {
    color: #60a5fa !important;
}

[data-bs-theme="dark"] .nv-llm-only-block a:hover {
    color: #93c5fd !important;
}

/* ── Hey AI button — glassmorphism (semi-transparent backdrop blur) ── */
.nv-hey-ai-btn,
#nv-hey-ai-link,
.nv-llm-view-link {
    background: rgba(79, 70, 229, 0.65) !important;
    backdrop-filter: blur(10px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    transition: all 0.25s ease !important;
}

.nv-hey-ai-btn:hover,
#nv-hey-ai-link:hover,
.nv-llm-view-link:hover {
    background: rgba(79, 70, 229, 0.8) !important;
    backdrop-filter: blur(14px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
    box-shadow: 0 8px 30px rgba(79, 70, 229, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-1px);
}

[data-bs-theme="dark"] .nv-hey-ai-btn,
[data-bs-theme="dark"] #nv-hey-ai-link,
[data-bs-theme="dark"] .nv-llm-view-link {
    background: rgba(99, 102, 241, 0.5) !important;
    backdrop-filter: blur(12px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .nv-hey-ai-btn:hover,
[data-bs-theme="dark"] #nv-hey-ai-link:hover,
[data-bs-theme="dark"] .nv-llm-view-link:hover {
    background: rgba(99, 102, 241, 0.7) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* ── Inline overrides on each block (for older browsers without CSS vars) ── */
.nv-featured-snippet,
.nv-tldr,
.nv-paa-block,
.nv-eeat-block {
    background-color: var(--nv-block-bg, rgba(0, 0, 0, 0.02)) !important;
    border-color: var(--nv-block-border, rgba(229, 231, 235, 0.6)) !important;
    color: var(--nv-block-text, #1f2937) !important;
}

.nv-featured-snippet h2,
.nv-tldr h2,
.nv-paa-block h2,
.nv-eeat-block strong {
    color: var(--nv-block-heading, #111827) !important;
}