/* ============================================================
   LUCIDE ICONS GLOBAL FIX
   Menyelesaikan masalah: ikon tidak muncul, ikon bertumpuk,
   ukuran tidak konsisten, ikon jadi kotak hitam
   ============================================================ */

/* Base reset untuk semua icon Lucide */
[data-lucide],
svg.lucide,
i.lucide {
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    min-width: 1em;
    min-height: 1em;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
    stroke-width: 2;
    fill: none;
    stroke: currentColor;
    overflow: visible;
    position: static;
    pointer-events: none;
    /* Cegah SVG raksasa sebelum lucide render */
    max-width: 100%;
}

/* Sebelum di-render (masih <i>), sembunyikan supaya tidak ada kotak aneh */
i[data-lucide]:not(svg) {
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    visibility: hidden;
}

/* Setelah di-render jadi <svg class="lucide">, tampilkan */
svg.lucide {
    visibility: visible;
}

/* ============================================================
   UKURAN DEFAULT per konteks
   ============================================================ */

/* Dalam tombol */
button svg.lucide,
.btn-primary svg.lucide,
.btn-cta-white svg.lucide,
.btn-cta-ghost svg.lucide,
.btn-detail svg.lucide,
.btn-add-news svg.lucide,
.btn-save svg.lucide,
.btn-cancel svg.lucide,
.btn-promo-primary svg.lucide,
.btn-promo-ghost svg.lucide,
.btn-white svg.lucide,
.btn-ghost-white svg.lucide,
.btn-whatsapp svg.lucide,
.pricing-cta svg.lucide,
.service-link svg.lucide,
.promo-card-cta svg.lucide {
    width: 18px !important;
    height: 18px !important;
}

/* Dalam heading */
h1 svg.lucide,
h2 svg.lucide,
h3 svg.lucide,
h4 svg.lucide {
    width: 1.1em !important;
    height: 1.1em !important;
}

/* ============================================================
   PREVENT STACKING — jika ada banyak ikon dalam 1 container
   ============================================================ */

/* Flex container dengan banyak ikon → tidak boleh overlap */
.hero-badge svg.lucide,
.activity-meta svg.lucide,
.activity-category svg.lucide,
.about-hero-badge svg.lucide,
.top-bar-item svg.lucide,
.footer-links svg.lucide,
.footer-links li svg.lucide,
.about-stat-icon svg.lucide,
.coverage-stat-icon svg.lucide,
.service-icon svg.lucide,
.value-icon svg.lucide,
.legal-icon svg.lucide,
.coverage-info-icon svg.lucide,
.tech-card-icon svg.lucide,
.tech-list .check-icon svg.lucide,
.browser-chip svg.lucide,
.about-split-list .check-icon svg.lucide,
.pricing-features .check-icon svg.lucide,
.service-features .check-icon svg.lucide,
.promo-card-features .check-icon svg.lucide {
    width: 16px !important;
    height: 16px !important;
    display: inline-block !important;
    flex-shrink: 0;
}

/* Fix khusus: category chips dengan ikon */
.activity-category,
.activity-meta-item,
.top-bar-item,
.browser-chip,
.hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem;
}

.activity-category svg.lucide,
.activity-meta-item svg.lucide {
    width: 13px !important;
    height: 13px !important;
}

/* ============================================================
   FIX: Ikon di dalam absolute/fixed container
   ============================================================ */
.admin-list-thumb svg.lucide,
.admin-list-thumb i[data-lucide] {
    width: 28px !important;
    height: 28px !important;
    position: static !important;
    display: block !important;
}

.admin-list-actions svg.lucide {
    width: 16px !important;
    height: 16px !important;
}

.admin-stat-icon svg.lucide {
    width: 22px !important;
    height: 22px !important;
}

.admin-nav-item svg.lucide {
    width: 18px !important;
    height: 18px !important;
}

.admin-quick-btn svg.lucide {
    width: 22px !important;
    height: 22px !important;
}

/* ============================================================
   FIX: Ikon di dalam overlay/modal
   ============================================================ */
.admin-modal-header svg.lucide,
.modal-close-btn svg.lucide,
.admin-toast svg.lucide {
    width: 18px !important;
    height: 18px !important;
    display: inline-block !important;
}

/* ============================================================
   FIX: Ikon di CTA banner
   ============================================================ */
.cta-banner svg.lucide,
.promo-cta-bottom svg.lucide,
.about-cta svg.lucide,
.coverage-cta svg.lucide {
    width: 18px !important;
    height: 18px !important;
}

/* ============================================================
   FIX: Slider navigation
   ============================================================ */
.slide-nav-btn svg.lucide,
.hero-section .slide-nav-btn svg {
    width: 22px !important;
    height: 22px !important;
}

/* ============================================================
   FIX: Ikon di table/list grid
   ============================================================ */
.list-check svg.lucide,
.ef-list-item svg.lucide,
.about-item-header svg.lucide,
.ef-actions svg.lucide {
    width: 14px !important;
    height: 14px !important;
    display: inline-block !important;
}

/* ============================================================
   Fallback: pastikan SVG Lucide tidak collapse
   ============================================================ */
svg:not([width]):not([height]):not([viewBox]) {
    min-width: 16px;
    min-height: 16px;
}

/* ============================================================
   FIX: Ikon di "About" timeline, values, dll
   ============================================================ */
.timeline-dot svg.lucide,
.vm-icon svg.lucide,
.visual-icon svg.lucide,
.timeline-year svg.lucide {
    width: 16px !important;
    height: 16px !important;
}

.vm-icon svg.lucide,
.visual-icon svg.lucide {
    width: 28px !important;
    height: 28px !important;
}

/* ============================================================
   FIX: Ikon di promo ribbon dan card head
   ============================================================ */
.promo-ribbon svg.lucide,
.promo-card-icon svg.lucide,
.promo-step-icon svg.lucide,
.promo-countdown-label svg.lucide,
.promo-terms-header svg.lucide {
    width: 18px !important;
    height: 18px !important;
    display: inline-block !important;
}

.promo-card-icon svg.lucide {
    width: 30px !important;
    height: 30px !important;
}

/* ============================================================
   FIX: Ikon di activity page
   ============================================================ */
.featured-tag svg.lucide,
.activity-readmore svg.lucide,
.activity-status svg.lucide,
.activity-search svg.lucide,
.activity-tab svg.lucide {
    width: 14px !important;
    height: 14px !important;
    display: inline-block !important;
}

.activity-empty svg.lucide {
    width: 56px !important;
    height: 56px !important;
    opacity: 0.5;
    display: block !important;
    margin: 0 auto 1rem !important;
}

/* ============================================================
   FIX: Ikon di service card
   ============================================================ */
.service-badge svg.lucide {
    width: 12px !important;
    height: 12px !important;
}

/* ============================================================
   FIX: Ikon di pricing card
   ============================================================ */
.pricing-badge svg.lucide,
.pricing-speed svg.lucide {
    width: 14px !important;
    height: 14px !important;
}

.pricing-icon svg.lucide {
    width: 28px !important;
    height: 28px !important;
}

/* ============================================================
   FIX: Prevent icon <i> muncul sebagai kotak sebelum di-render
   ============================================================ */
body:not(.lucide-ready) i[data-lucide] {
    width: 1em;
    height: 1em;
    display: inline-block;
}

/* ============================================================
   FIX: PRICING CARD — Badge "Paling Populer" bertumpuk icon
   ============================================================ */

/* Card popular: beri padding-top extra supaya icon tidak ketemu badge */
.pricing-card.popular {
    padding-top: 4.5rem !important;
}

/* Badge "Paling Populer" — posisikan rapi di atas, tidak bertumpuk */
.pricing-card .pricing-badge {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    z-index: 10 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    padding: 0.4rem 0.85rem !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.pricing-card .pricing-badge svg.lucide {
    width: 12px !important;
    height: 12px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Icon di dalam pricing card popular — pastikan tidak overlap */
.pricing-card .pricing-icon {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
}

/* Pada layar kecil, badge jangan keluar dari card */
@media (max-width: 640px) {
    .pricing-card.popular {
        padding-top: 4rem !important;
    }
    .pricing-card .pricing-badge {
        top: 0.75rem !important;
        right: 0.75rem !important;
        font-size: 0.65rem !important;
        padding: 0.35rem 0.7rem !important;
    }
}