/* ===========================
   BiLLU – Elementor Overrides
   Custom CSS classes for use in Elementor widgets
   =========================== */

/* ── Global Elementor Typography ─────────────────────────── */
body .elementor h1,
body .elementor h2,
body .elementor h3 {
    font-family: var(--font-heading);
    color: var(--text-heading);
}
body .elementor p,
body .elementor .elementor-widget-text-editor {
    font-family: var(--font-body);
    color: var(--text-main);
}

/* ── BiLLU Section Backgrounds ───────────────────────────── */
.billu-bg-hero {
    background: linear-gradient(135deg, #0B2430 0%, #0f3340 50%, #143845 100%) !important;
}
.billu-bg-ksef {
    background: linear-gradient(135deg, #0B2430 0%, #143845 60%, #0f3040 100%) !important;
}
.billu-bg-cta {
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2)) !important;
}
.billu-bg-dark {
    background: var(--brand-navy) !important;
}
.billu-bg-light {
    background: var(--bg-secondary) !important;
}
.billu-bg-primary {
    background: var(--bg-primary) !important;
}
.billu-bg-card {
    background: var(--bg-card) !important;
}

/* ── BiLLU Icon Box Styles ───────────────────────────────── */
.billu-icon-box .elementor-icon {
    background: rgba(0,143,143,.1) !important;
    color: var(--accent-1) !important;
    border-radius: var(--radius-sm);
    width: 52px !important;
    height: 52px !important;
}
.billu-icon-box-bordo .elementor-icon {
    background: rgba(136,45,97,.1) !important;
    color: var(--accent-2) !important;
}
.billu-icon-box-navy .elementor-icon {
    background: rgba(11,36,48,.08) !important;
    color: var(--brand-navy) !important;
}

/* ── BiLLU Feature Cards ─────────────────────────────────── */
.billu-feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 28px !important;
    transition: all var(--transition);
}
.billu-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(0,143,143,.3);
}

/* ── BiLLU Section Tag ───────────────────────────────────── */
.billu-section-tag {
    display: inline-block !important;
    background: rgba(0,143,143,.1);
    color: var(--accent-1) !important;
    font-size: 13px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 6px 14px;
    border-radius: 20px;
    font-family: var(--font-body) !important;
}
.billu-section-tag-white {
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.9) !important;
}

/* ── BiLLU Buttons ───────────────────────────────────────── */
.billu-btn-primary .elementor-button {
    background-color: var(--accent-1) !important;
    border-color: var(--accent-1) !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    border-radius: var(--radius-sm) !important;
}
.billu-btn-primary .elementor-button:hover {
    background-color: #007070 !important;
    border-color: #007070 !important;
    transform: translateY(-1px);
}
.billu-btn-outline .elementor-button {
    background-color: transparent !important;
    border: 2px solid var(--accent-1) !important;
    color: var(--accent-1) !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    border-radius: var(--radius-sm) !important;
}
.billu-btn-outline .elementor-button:hover {
    background-color: var(--accent-1) !important;
    color: #fff !important;
}
.billu-btn-white .elementor-button {
    background-color: #fff !important;
    color: var(--accent-1) !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    border-radius: var(--radius-sm) !important;
}

/* ── BiLLU Stats / Counters ──────────────────────────────── */
.billu-counter .elementor-counter-number-wrapper {
    font-family: var(--font-heading) !important;
    color: var(--accent-1) !important;
    font-size: 3rem !important;
}
.billu-counter .elementor-counter-title {
    font-family: var(--font-body) !important;
    color: var(--text-main) !important;
}

/* ── BiLLU Security Cards ────────────────────────────────── */
.billu-security-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 24px !important;
    transition: all var(--transition);
}
.billu-security-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* ── BiLLU Pricing Cards ─────────────────────────────────── */
.billu-pricing-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg) !important;
    padding: 36px 28px !important;
    transition: all var(--transition);
}
.billu-pricing-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}
.billu-pricing-featured {
    border-color: var(--accent-1) !important;
    box-shadow: 0 0 0 2px var(--accent-1), var(--shadow-lg) !important;
}
.billu-price-amount {
    font-family: var(--font-heading) !important;
    font-size: 3rem !important;
    color: var(--text-heading) !important;
    font-weight: 700 !important;
}

/* ── BiLLU Testimonial Cards ─────────────────────────────── */
.billu-testimonial {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 28px 24px !important;
}
.billu-testimonial .elementor-testimonial-content {
    font-family: var(--font-body) !important;
    font-size: .9rem !important;
    line-height: 1.65 !important;
}

/* ── BiLLU Comparison Lists ──────────────────────────────── */
.billu-before-list .elementor-icon-list-icon i { color: #dc2626 !important; }
.billu-after-list .elementor-icon-list-icon i { color: var(--accent-1) !important; }
.billu-check-list .elementor-icon-list-icon i { color: var(--accent-1) !important; }

/* ── BiLLU Tabs ──────────────────────────────────────────── */
.billu-tabs .elementor-tab-title {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
}
.billu-tabs .elementor-tab-title.elementor-active {
    color: var(--accent-1) !important;
}

/* ── BiLLU Accordion / FAQ ───────────────────────────────── */
.billu-faq .elementor-accordion-item {
    border-color: var(--border-color) !important;
}
.billu-faq .elementor-tab-title {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    color: var(--text-heading) !important;
}
.billu-faq .elementor-active .elementor-tab-title {
    color: var(--accent-1) !important;
}

/* ── BiLLU Badge ─────────────────────────────────────────── */
.billu-hero-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px !important;
    color: rgba(255,255,255,.85) !important;
}
.billu-hero-badge::before {
    content: '';
    width: 8px; height: 8px;
    background: var(--accent-1);
    border-radius: 50%;
    animation: billu-pulse 2s infinite;
}
@keyframes billu-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── BiLLU Compliance Badges ─────────────────────────────── */
.billu-compliance-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-size: 14px !important;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

/* ── BiLLU Trust Items (Hero) ────────────────────────────── */
.billu-trust-items .elementor-icon-list-item {
    color: rgba(255,255,255,.65) !important;
    font-size: 13px !important;
}
.billu-trust-items .elementor-icon-list-icon i {
    color: var(--accent-1) !important;
}

/* ── Dashboard Mockup (HTML widget) ──────────────────────── */
.billu-dashboard-mockup { /* styles from layout.css apply */ }

/* ── KSeF Visual (HTML widget) ───────────────────────────── */
.billu-ksef-visual { /* styles from layout.css apply */ }

/* ── Dark Mode Elementor Overrides ───────────────────────── */
[data-theme="dark"] .billu-feature-card,
[data-theme="dark"] .billu-security-card,
[data-theme="dark"] .billu-pricing-card,
[data-theme="dark"] .billu-testimonial {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .elementor-heading-title {
    color: var(--text-heading);
}
[data-theme="dark"] .elementor-widget-text-editor {
    color: var(--text-main);
}

/* ── Responsive Elementor ────────────────────────────────── */
@media (max-width: 768px) {
    .billu-pricing-card,
    .billu-feature-card,
    .billu-security-card {
        padding: 20px !important;
    }
}