/* * Direktori: demolive.kostblora.com/wp-content/themes/royal-elementor-kit/assets/css/
 * File: kamar.css
 */

:root {
    /* Menggunakan font SF Pro Display secara MUTLAK */
    --custom-font: 'SF Pro Display', sans-serif !important; 
}

#app-kamar { 
    background-color: #FAFAFA; 
    color: #334155; 
    min-height: 100vh; 
    font-family: var(--custom-font) !important;
}

/* Memaksa semua elemen anak patuh pada font kita, kecuali tag icon <i> */
#app-kamar *:not(i) {
    font-family: var(--custom-font) !important;
}

#app-kamar a, #app-kamar button {
    text-decoration: none !important;
    outline: none !important;
}

/* ========================================================
   ANTI-BOCOR TEMA WP: STYLING KHUSUS UNTUK TOMBOL 
   ======================================================== */

/* 1. Tombol Fasilitas (KM Dalam, AC, dll) */
.fac-btn {
    background-color: #ffffff !important;
    color: #475569 !important; /* Slate 600 */
    border: 1px solid #e2e8f0 !important; /* Slate 200 */
    outline: none !important;
    box-shadow: none !important;
}
.fac-btn:hover {
    background-color: #f1f5f9 !important; /* Slate 100 */
    color: #0f172a !important; /* Hitam tegas */
    border-color: #cbd5e1 !important;
}
.fac-btn.active {
    background-color: #0f172a !important; /* Hitam saat aktif */
    color: #ffffff !important; /* Putih */
    border-color: #0f172a !important;
}
.fac-btn.active:hover {
    background-color: #1e293b !important;
}

/* 2. Tombol Filter Mobile */
.btn-mobile-filter {
    background-color: #f1f5f9 !important; /* slate-100 */
    color: #0f172a !important; /* brand-900 */
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.btn-mobile-filter:hover, .btn-mobile-filter:focus, .btn-mobile-filter:active {
    background-color: #e2e8f0 !important; /* slate-200 */
    color: #0f172a !important;
}

/* 3. Tombol Reset Filter */
.btn-reset {
    background-color: transparent !important;
    color: #ef4444 !important; /* Merah */
    border: 1px solid transparent !important;
    outline: none !important;
    box-shadow: none !important;
}
.btn-reset:hover {
    background-color: #fee2e2 !important; /* Merah sangat muda */
    color: #b91c1c !important; /* Merah tua */
}
.btn-reset:focus, .btn-reset:active {
    background-color: #fecaca !important;
    color: #b91c1c !important;
    border-color: transparent !important;
    outline: none !important;
}

/* ======================================================== */

/* Custom Select Native */
.custom-select-wrapper::after {
    content: '\25BC'; 
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%) scale(0.7);
    pointer-events: none;
    color: #64748b;
}

/* Custom Leaflet Marker Styling */
.custom-marker {
    background-color: #0f172a;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.custom-marker.active {
    background-color: #f59e0b !important;
    transform: scale(1.4) !important;
    z-index: 1000 !important;
}
.leaflet-popup-content-wrapper { border-radius: 12px; font-family: var(--custom-font); font-weight: bold; }
.leaflet-popup-tip { background: white; }

/* Custom noUiSlider Styling (Ditambah !important anti-bocor) */
.noUi-target { background: #e2e8f0 !important; border: none !important; box-shadow: none !important; height: 6px !important; }
.noUi-connect { background: #0f172a !important; }
.noUi-handle { border: 2px solid #0f172a !important; border-radius: 50% !important; background: #fff !important; cursor: pointer !important; box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important; }
.noUi-horizontal .noUi-handle { width: 20px !important; height: 20px !important; right: -10px !important; top: -7px !important; }
.noUi-handle:before, .noUi-handle:after { display: none !important; }