/* ===== MOBILE FILTER FIX ===== */
/* Fix untuk menampilkan konten filter pada mobile */

@media (max-width: 767px) {
    /* Pastikan collection-filter terlihat ketika dibuka */
    .collection-filter {
        position: fixed !important;
        top: 60px !important; /* Mulai dari bawah navbar */
        left: -350px !important;
        width: 350px !important;
        max-width: 350px !important;
        height: calc(100vh - 60px) !important; /* Tinggi dikurangi navbar */
        background-color: #ffffff !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        transition: left 0.3s ease !important;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1) !important;
        display: block !important;
        padding-top: 0 !important; /* Reset padding */
    }
    
    /* SEMBUNYIKAN back button secara default */
    .collection-filter .collection-mobile-back {
        display: none !important;
    }
    
    /* Ketika filter dibuka */
    .collection-filter.filter-opened {
        left: 0 !important;
        z-index: 99999 !important;
    }
    
    /* TAMPILKAN back button HANYA ketika filter terbuka - sebagai bagian dari filter */
    .collection-filter.filter-opened .collection-mobile-back {
        display: block !important;
        position: relative !important; /* Ubah dari fixed ke relative */
        top: 0 !important; /* Reset ke 0 */
        left: 0 !important;
        width: 100% !important; /* Full width dalam container */
        padding: 15px 20px !important;
        border-bottom: 1px solid #eee !important;
        background-color: #f8f9fa !important;
        margin: 0 !important;
        z-index: auto !important; /* Reset z-index */
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
    
    /* Style untuk back button text dan icon */
    .collection-filter.filter-opened .collection-mobile-back span {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #333 !important;
        text-transform: uppercase !important;
        cursor: pointer !important;
        display: inline-block !important;
    }
    
    .collection-filter.filter-opened .collection-mobile-back span i {
        margin-right: 8px !important;
        font-size: 18px !important;
        display: inline-block !important;
    }
    
    /* Pastikan semua konten di dalam filter terlihat */
    .collection-filter * {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Khusus untuk elemen yang mungkin disembunyikan */
    .collection-filter .collection-filter-block,
    .collection-filter .creative-card,
    .collection-filter .creative-inner,
    .collection-filter .collection-collapse-block,
    .collection-filter .collection-collapse-block-content,
    .collection-filter .collection-brand-filter,
    .collection-filter form,
    .collection-filter .form-group,
    .collection-filter .input-group {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Padding untuk konten filter - rapatkan spacing */
    .collection-filter .creative-card.creative-inner {
        padding: 10px 15px !important; /* Kurangi dari 15px 20px */
    }
    
    /* Style untuk form elements - PERBAIKAN FORM FILTER */
    .collection-filter .form-check,
    .collection-filter .collection-filter-checkbox {
        display: block !important;
        margin-bottom: 10px !important;
    }
    
    .collection-filter input[type="checkbox"],
    .collection-filter input[type="radio"] {
        display: inline-block !important;
        width: auto !important;
        margin-right: 8px !important;
    }
    
    .collection-filter label {
        display: inline-block !important;
        cursor: pointer !important;
    }
    
    /* PERBAIKAN INPUT FIELDS - Min/Max Price - COMPACT */
    .collection-filter .input-group {
        margin-bottom: 8px !important; /* Kurangi dari 15px */
        display: flex !important;
        width: 100% !important;
    }
    
    .collection-filter .input-group-text {
        background-color: #f8f9fa !important;
        border: 1px solid #dee2e6 !important;
        border-right: none !important;
        padding: 6px 10px !important; /* Kurangi dari 8px 12px */
        font-size: 13px !important; /* Kurangi dari 14px */
        color: #495057 !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .collection-filter .form-control {
        border: 1px solid #dee2e6 !important;
        border-radius: 0 4px 4px 0 !important;
        padding: 6px 10px !important; /* Kurangi dari 8px 12px */
        font-size: 13px !important; /* Kurangi dari 14px */
        height: auto !important;
        flex: 1 !important;
        display: block !important;
        width: 100% !important;
        background-color: #ffffff !important;
        color: #495057 !important;
    }
    
    .collection-filter .form-control:focus {
        border-color: #80bdff !important;
        outline: 0 !important;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
    }
    
    /* PERBAIKAN SELECT DROPDOWN - Filter Lainnya - COMPACT */
    .collection-filter .form-select,
    .collection-filter select {
        display: block !important;
        width: 100% !important;
        padding: 6px 10px !important; /* Kurangi dari 8px 12px */
        font-size: 13px !important; /* Kurangi dari 14px */
        font-weight: 400 !important;
        line-height: 1.4 !important; /* Kurangi dari 1.5 */
        color: #495057 !important;
        background-color: #ffffff !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-position: right 6px center !important; /* Kurangi dari 8px */
        background-size: 14px 10px !important; /* Kurangi dari 16px 12px */
        border: 1px solid #dee2e6 !important;
        border-radius: 4px !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
    }
    
    .collection-filter .form-select:focus,
    .collection-filter select:focus {
        border-color: #80bdff !important;
        outline: 0 !important;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
    }
    
    /* PERBAIKAN TOMBOL - COMPACT */
    .collection-filter .btn {
        display: block !important;
        width: 100% !important;
        margin-bottom: 6px !important; /* Kurangi dari 10px */
        padding: 8px 12px !important; /* Kurangi dari 12px 15px */
        font-size: 13px !important; /* Kurangi dari 14px */
        font-weight: 600 !important;
        border-radius: 4px !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }
    
    /* Tombol Terapkan - ORANGE */
    .collection-filter .btn.bg-basic,
    .collection-filter .btn[type="submit"] {
        background-color: #ff6600 !important;
        color: #ffffff !important;
    }
    
    .collection-filter .btn.bg-basic:hover,
    .collection-filter .btn[type="submit"]:hover {
        background-color: #e55a00 !important;
    }
    
    /* Tombol Reset */
    .collection-filter .btn.btn-outline-dark,
    .collection-filter .btn[type="button"] {
        background-color: transparent !important;
        color: #495057 !important;
        border: 1px solid #dee2e6 !important;
    }
    
    .collection-filter .btn.btn-outline-dark:hover,
    .collection-filter .btn[type="button"]:hover {
        background-color: #f8f9fa !important;
        border-color: #adb5bd !important;
    }
    
    /* Sub motors container */
    .collection-filter .sub-motors-container {
        margin-left: 20px !important;
        margin-bottom: 15px !important;
        display: block !important;
    }
    
    /* Collapse titles - COMPACT */
    .collection-filter .collapse-block-title {
        font-size: 15px !important; /* Kurangi dari 16px */
        font-weight: 600 !important;
        color: #333 !important;
        margin-bottom: 8px !important; /* Kurangi dari 15px */
        margin-top: 12px !important; /* Kurangi dari 20px */
        display: block !important;
        padding-bottom: 5px !important; /* Kurangi dari 8px */
        border-bottom: 1px solid #eee !important;
    }
    
    /* First section no top margin */
    .collection-filter .collection-collapse-block:first-of-type .collapse-block-title {
        margin-top: 0 !important;
    }
    
    /* Filter sections spacing - COMPACT */
    .collection-filter .collection-collapse-block {
        margin-bottom: 15px !important; /* Kurangi dari 25px */
    }
    
    .collection-filter .collection-collapse-block-content {
        padding-top: 5px !important; /* Kurangi dari 10px */
    }
    
    /* Checkbox styling improvements - COMPACT */
    .collection-filter .collection-filter-checkbox {
        padding: 5px 0 !important; /* Kurangi dari 8px */
        border-bottom: 1px solid #f8f9fa !important;
        margin-bottom: 5px !important; /* Kurangi dari default */
    }
    
    .collection-filter .collection-filter-checkbox:last-child {
        border-bottom: none !important;
        margin-bottom: 0 !important;
    }
    
    .collection-filter .collection-filter-checkbox label {
        font-size: 13px !important; /* Kurangi dari 14px */
        color: #495057 !important;
        font-weight: 400 !important;
        margin-bottom: 0 !important;
        padding-left: 5px !important;
        line-height: 1.3 !important;
    }
    
    /* Coming soon badges */
    .collection-filter .collection-filter-checkbox.coming-soon {
        opacity: 0.6 !important;
    }
    
    /* Sub motors styling - COMPACT - COMPLETELY HIDDEN */
    .collection-filter .sub-motors-container {
        display: none !important; /* Force hide sub-motors completely */
        margin-left: 20px !important;
        margin-top: 5px !important; /* Kurangi dari 10px */
        margin-bottom: 8px !important; /* Kurangi dari 15px */
        padding-left: 10px !important; /* Kurangi dari 15px */
        border-left: 2px solid #f8f9fa !important;
    }
    
    .collection-filter .sub-motors-container .form-check {
        display: none !important; /* Force hide individual sub-motor checkboxes */
        margin-bottom: 4px !important; /* Kurangi dari 8px */
        padding: 3px 0 !important; /* Kurangi dari 5px */
    }
    
    .collection-filter .sub-motors-container .form-check label {
        display: none !important; /* Force hide sub-motor labels */
        font-size: 12px !important; /* Kurangi dari 13px */
        color: #6c757d !important;
        line-height: 1.2 !important;
    }
    
    /* Container padding and spacing - COMPACT */
    .collection-filter .filter-harga-wrapper {
        margin-top: 5px !important; /* Kurangi dari 10px */
    }
    
    /* Button container spacing - COMPACT */
    .collection-filter .mt-3:last-child {
        margin-top: 15px !important; /* Kurangi dari 25px */
        padding-top: 12px !important; /* Kurangi dari 20px */
        border-top: 1px solid #eee !important;
    }
    
    /* Pastikan navbar tidak mengganggu filter */
    .collection-filter.filter-opened ~ .navbar,
    .collection-filter.filter-opened ~ header,
    .collection-filter.filter-opened ~ .header {
        z-index: 9998 !important;
    }
    
    /* Override navbar z-index ketika filter terbuka */
    body:has(.collection-filter.filter-opened) .navbar,
    body:has(.collection-filter.filter-opened) header,
    body:has(.collection-filter.filter-opened) .header {
        z-index: 9998 !important;
    }
}