/* =======================================================
   COLLECTION: 24 SOFT NEUMORPHIC THEMES (FINAL & iOS SAFE)
   ======================================================= */

/* --- 1. DEFINISI VARIABEL DEFAULT ROOT (PENTING UNTUK IPHONE) --- */
:root, body {
    --bg: #E6E7EE;
    --shd-1: #B8B9BE;
    --shd-2: #FFFFFF;
    --txt: #31344B;
    background-color: var(--bg);
    color: var(--txt);
    -webkit-font-smoothing: antialiased; /* Obat iPhone */
}

/* 0. DEFAULT (Abu-abu Neumorphism Asli BioSolution) */
body.theme-0 { --bg: #E6E7EE; --shd-1: #B8B9BE; --shd-2: #FFFFFF; --txt: #31344B; }

/* 1-5 */
body.theme-1  { --bg: #E1E8E2; --shd-1: #BDC7BE; --shd-2: #FFFFFF; --txt: #18634B; }
body.theme-2  { --bg: #E1E7F0; --shd-1: #BCC7D6; --shd-2: #FFFFFF; --txt: #2D4CC8; }
body.theme-3  { --bg: #F0E2E7; --shd-1: #D6BCC4; --shd-2: #FFFFFF; --txt: #A91E2C; }
body.theme-4  { --bg: #F5F3E7; --shd-1: #D6D2B8; --shd-2: #FFFFFF; --txt: #A97B1E; }
body.theme-5  { --bg: #E6E7EE; --shd-1: #D1D9E6; --shd-2: #FFFFFF; --txt: #31344b; }
/* 6-10 */
body.theme-6  { --bg: #EAE6F0; --shd-1: #CDC7D6; --shd-2: #FFFFFF; --txt: #6f42c1; }
body.theme-7  { --bg: #F5EAE2; --shd-1: #D6C7BC; --shd-2: #FFFFFF; --txt: #A95E1E; }
body.theme-8  { --bg: #E1F0ED; --shd-1: #BCCEC9; --shd-2: #FFFFFF; --txt: #0056B3; }
body.theme-9  { --bg: #F2F5E1; --shd-1: #D6DAB7; --shd-2: #FFFFFF; --txt: #7A8118; }
body.theme-10 { --bg: #E6EBED; --shd-1: #C6CED1; --shd-2: #FFFFFF; --txt: #44476A; }
/* 11-15 */
body.theme-11 { --bg: #E7F0E1; --shd-1: #C8D1C2; --shd-2: #FFFFFF; --txt: #4B6318; }
body.theme-12 { --bg: #F5E8E1; --shd-1: #D6C9C2; --shd-2: #FFFFFF; --txt: #B34F00; }
body.theme-13 { --bg: #E1E4F5; --shd-1: #C2C5D6; --shd-2: #FFFFFF; --txt: #3A45B3; }
body.theme-14 { --bg: #F5EFDF; --shd-1: #D6D0C0; --shd-2: #FFFFFF; --txt: #817218; }
body.theme-15 { --bg: #DFFAF4; --shd-1: #C0D6D1; --shd-2: #FFFFFF; --txt: #166355; }
/* 16-20 */
body.theme-16 { --bg: #FCE8ED; --shd-1: #D6C4C8; --shd-2: #FFFFFF; --txt: #B30030; }
body.theme-17 { --bg: #EEF2E1; --shd-1: #CFD3C2; --shd-2: #FFFFFF; --txt: #606316; }
body.theme-18 { --bg: #E1EBF5; --shd-1: #C2CBD6; --shd-2: #FFFFFF; --txt: #2D5881; }
body.theme-19 { --bg: #F5ECE1; --shd-1: #D6CDC2; --shd-2: #FFFFFF; --txt: #81542D; }
body.theme-20 { --bg: #EBEBEB; --shd-1: #CCCCCC; --shd-2: #FFFFFF; --txt: #333333; }
/* 21-23 */
body.theme-21 { --bg: #F5F0E1; --shd-1: #D6D1C2; --shd-2: #FFFFFF; --txt: #B38F00; }
body.theme-22 { --bg: #F5E1F0; --shd-1: #D6C2D1; --shd-2: #FFFFFF; --txt: #B3008F; }
body.theme-23 { --bg: #E1F5F5; --shd-1: #C2D6D6; --shd-2: #FFFFFF; --txt: #00B3B3; }

/* --- 2. LOGIKA GLOBAL --- */
body[class*="theme-"] {
    background-color: var(--bg) !important;
    color: var(--txt) !important;
    transition: background-color 0.4s ease;
}

/* --- 3. ELEMEN TIMBUL (POP-OUT) --- */
/* KUNCI PERBAIKAN: Memasukkan kembali .card dan memperkuat kodenya untuk accordion */
.card, body .bio-accordion .card, .navbar-main, .footer, 
.section, .gallery-item, .shadow-soft, 
.bio-accordion-btn, #myBtn, .btn-primary, 
.badge.dropdown-toggle, .light-card, 
.plant-card, .guide-card, .search-item-bar,
.feature-decor-item {
    background-color: var(--bg) !important;
    -webkit-box-shadow: 6px 6px 12px var(--shd-1), -6px -6px 12px var(--shd-2) !important;
    box-shadow: 6px 6px 12px var(--shd-1), -6px -6px 12px var(--shd-2) !important;
    border: none !important;
    color: var(--txt);
    -webkit-transform: translateZ(0); 
}

/* --- 4. ELEMEN TENGGELAM (INSET) --- */
.form-control, .input-group-text, 
.breadcrumb, .search-item-img-box, 
.search-input-modern, .feature-icon-box {
    background-color: var(--bg) !important;
    -webkit-box-shadow: inset 3px 3px 6px var(--shd-1), inset -3px -3px 6px var(--shd-2) !important;
    box-shadow: inset 3px 3px 6px var(--shd-1), inset -3px -3px 6px var(--shd-2) !important;
    border: none !important;
    color: var(--txt);
    -webkit-appearance: none; 
}

/* Pop-up Dropdown */
.dropdown-menu {
    background-color: var(--bg) !important;
    -webkit-box-shadow: 10px 10px 20px var(--shd-1), -5px -5px 10px var(--shd-2) !important;
    box-shadow: 10px 10px 20px var(--shd-1), -5px -5px 10px var(--shd-2) !important;
    border: 1px solid var(--shd-1) !important;
}

.dropdown-header { color: var(--txt) !important; opacity: 1 !important; font-weight: bold; }
.navbar-brand-dark { display: block !important; }
.navbar-brand-light { display: none !important; }

/* Akordeon Footer & Konten Latar (Gelap sedikit) */
.bio-accordion-body,
.bio-intro-wrapper,
.benefits-light-wrapper,
.bio-plants-section,
.usage-wrapper,
.bio-comp-section,
.section-footer-biosolution {
    background-color: var(--bg) !important;
    filter: brightness(97%);
    color: var(--txt) !important;
}

/* Penyelaras Teks */
h1, h2, h3, h4, h5, h6,
.plant-category, .comp-category-title, 
.guide-dose, .bio-text-col h3,
.dropdown-header, .feature-text-box strong, .feature-text-box span {
    color: var(--txt) !important;
    opacity: 1 !important;
}

.navbar-toggler-icon { filter: none; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--shd-1) !important; }

/* =======================================================
   PENYELARAS HASIL PENCARIAN & LAINNYA
   ======================================================= */
.search-item-bar:hover { -webkit-box-shadow: 10px 10px 20px var(--shd-1), -10px -10px 20px var(--shd-2) !important; box-shadow: 10px 10px 20px var(--shd-1), -10px -10px 20px var(--shd-2) !important; color: var(--txt) !important; }
.search-item-title, .search-item-bar:hover .search-item-arrow { color: var(--txt) !important; }
.search-item-arrow { color: var(--shd-1) !important; }
.search-input-modern:focus { -webkit-box-shadow: inset 6px 6px 12px var(--shd-1), inset -6px -6px 12px var(--shd-2) !important; box-shadow: inset 6px 6px 12px var(--shd-1), inset -6px -6px 12px var(--shd-2) !important; }
.btn-search-absolute { background: var(--bg) !important; color: var(--txt) !important; -webkit-box-shadow: 4px 4px 8px var(--shd-1), -4px -4px 8px var(--shd-2) !important; box-shadow: 4px 4px 8px var(--shd-1), -4px -4px 8px var(--shd-2) !important; }
.btn-search-absolute:active { -webkit-box-shadow: inset 3px 3px 6px var(--shd-1), inset -3px -3px 6px var(--shd-2) !important; box-shadow: inset 3px 3px 6px var(--shd-1), inset -3px -3px 6px var(--shd-2) !important; }

.spec-table tr:nth-child(even) { background-color: rgba(0,0,0,0.03); }
.spec-value, .amino-item b { color: var(--txt) !important; }
.guide-dose { color: var(--txt) !important; font-weight: 800; }

/* =======================================================
   OBAT KHUSUS IPHONE / SAFARI IOS FIX
   ======================================================= */
.btn, .form-control, .bio-accordion-btn, .cta-btn, button, input {
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* =======================================================
   PERBAIKAN WARNA MENU HP (NAVBAR COLLAPSE) & KATEGORI
   ======================================================= */

/* 1. Mengubah Warna Background Menu Putih di HP (Hamburger Menu) */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: var(--bg) !important;
        color: var(--txt) !important;
        border-radius: 15px; /* Biar ujungnya manis */
    }
    
    /* Menyelaraskan teks & tombol close di dalam menu HP */
    .navbar-collapse .collapse-close a,
    .navbar-collapse-header a,
    .navbar-collapse a.nav-link {
        color: var(--txt) !important;
    }
}

/* 2. Menyelaraskan Kotak Daftar Kategori (List Group / Widget) */
.list-group-item,
.widget-category,
.category-list,
.nav-pills .nav-link {
    background-color: var(--bg) !important;
    color: var(--txt) !important;
    border-color: rgba(0,0,0,0.05) !important; /* Garis batas super halus */
}

/* Efek Hover untuk menu Kategori */
.list-group-item:hover,
.nav-pills .nav-link:hover {
    background-color: rgba(0,0,0,0.03) !important; /* Sedikit lebih gelap saat disentuh */
    color: var(--txt) !important;
}