.filter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    background: rgb(240, 243, 240);
    border: 1px solid #ddd;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    padding: 0 2;
    width: 100%;
    max-height: 250px; /* Batas maksimal tinggi */
    overflow-y: auto; /* Scroll jika konten terlalu panjang */
    
}

.filter-dropdown ul {
    list-style: none;
    padding: 0;
    margin: 0;
    
}

.filter-dropdown ul li {
    padding: 3px 10px;
    cursor: pointer;
}

.filter-dropdown ul li:hover {
    background-color: #575454;
}

/* Simbol Panah */
.filter-row .fas {
    margin-left: 2px; /* Jarak antara teks dan ikon */
    font-size: 14px; /* Ukuran ikon */
    color: rgb(61, 61, 61); /* Warna ikon */
    vertical-align: middle; /* Selaraskan dengan teks */
}

/* Tambahkan efek hover untuk ikon */
.filter-row:hover .fas {
    color: #F70D1A; /* Ubah warna saat hover */
    transition: color 0.3s ease; /* Animasi transisi */
}

.d-none {
    display: none;
}


/* Dropdown Title */
.dropdown-title {
    font-weight: bold;
    font-size: 14px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #ddd;
    padding: 2px;
    color: #140a12;
    position: sticky; /* Tetap di bagian atas saat scroll */
    top: 0; /* Menempel di atas container */
    z-index: 1; /* Pastikan berada di atas item filter */
}

/* Dropdown Title */
.dropdown-item {
    font-weight: bold;
    font-size: 14px;
    padding: 10px;
    color: #1a191d;
    
   
}

/* Buat overlay untuk memblokir elemen di belakang */
.overlay {
    display: none; /* Default tidak terlihat */
    position: fixed; /* Tetap di posisi layar */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(173, 17, 17, 0); /* Transparan untuk UX */
    z-index: 1049; /* Lebih rendah dari dropdown tapi lebih tinggi dari elemen lainnya */
}

/* Tampilkan overlay saat dropdown aktif */
.overlay.active {
    display: block;
}

/* Atur jarak antar elemen daftar */
.recommended-list {
    list-style: none; /* Hilangkan bullet points */
    padding: 0;
    margin: 0;
    
}

.recommended-list li {
    margin-top: 5px; /* Jarak atas */
    margin-bottom: 5px; /* Jarak bawah */
}

/* Gaya gambar rekomendasi */
.recommended-image {
    width: 100%; /* Pastikan gambar memenuhi lebar kontainer */
    height: auto; /* Pertahankan proporsi gambar */
    border-radius: 5px; /* Tambahkan sudut melengkung jika diperlukan */
    display: block; /* Pastikan gambar tidak inline */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Tambahkan bayangan untuk estetika */
}

/* Atur elemen property-seeker agar tetap rapi */
.property-seeker {
    display: flex;
    justify-content: center; /* Tengah secara horizontal */
    gap: 10px; /* Jarak antar elemen A dan S */
    margin-top: 5px; /* Jarak dari gambar */
}

/* Mobile Styling */
@media (max-width: 768px) {
    .filter-dropdown {
        position: absolute; /* Keluar dari konteks layout */
        top: 5%; /* Posisikan di tengah layar */
       
        width: auto; /* Sesuaikan lebar */
        z-index: 9999; /* Tetap tinggi */
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    }
}




.row.filter-row {
    position: relative;
    overflow: visible; /* Pastikan elemen tidak membatasi dropdown */
    border: 1px solid #ddd; /* Warna abu-abu terang */
    border-radius: 5px; /* Tambahkan sudut melengkung */
    padding: 10px; /* Tambahkan padding */
    margin-bottom: 15px; /* Tambahkan jarak antar filter */
    
    
}


.panel.panel-default {
    overflow: visible; /* Pastikan elemen tidak memblokir dropdown */
    
}
.container {
    overflow: visible; /* Jangan batasi elemen dropdown */
}


/* Pastikan semua filter-row memiliki border */
.filter-row {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 15px;
}

/* Aturan khusus untuk elemen Transmisi */
.filter-row:last-child {
    border: 2px solid #ddd; /* Tambahkan border untuk elemen terakhir */
    margin-bottom: 15px; /* Beri jarak di bawahnya */
}



.panel.panel-default.sidebar-menu {
    position: relative;
    z-index: auto; /* Gunakan auto untuk menghindari konflik */
}
/* Atur lebar kolom filter */
.filter-row .col-xs-5 {
    width: 40%;
    padding-right: 2px;
}

.filter-row .col-xs-7 {
    width: 60%;
    padding-left: 5px;
}

/* Atur lebar panel filter secara keseluruhan */
.panel-body.search-widget {
    width: 90%;
    max-width: 400px;
    margin: 0 auto;
}



@media (max-width: 768px) {
    

    .filter-row .col-xs-5 {
        width: auto; /* Ukuran sesuai konten */
        padding-right: 2px;
    }

    .filter-dropdown {
      
        width: 180px; /* Jangan memenuhi layar */
    }
}

.item-thumb {
    position: relative; /* Untuk memastikan posisi label terkait dengan container */
    overflow: hidden; /* Pastikan elemen yang keluar tidak terlihat */
}

.item-thumb img {
    width: 100%; /* Pastikan gambar memenuhi lebar container */
    height: auto; /* Pertahankan proporsi gambar */
    display: block;
}

.label-bekas {
    position: absolute; /* Agar dapat ditempatkan di atas gambar */
    bottom: 1px; /* Jarak dari bawah */
    right: 1px; /* Jarak dari kanan */
    background-color: rgba(88, 78, 78, 0.8); /* Warna merah semi-transparan */
    color: white; /* Warna teks putih */
    font-size: 12px; /* Ukuran font kecil */
    padding: 3px 8px; /* Tambahkan padding di dalam label */
    border-radius: 2px; /* Sudut melengkung untuk estetika */
    z-index: 10; /* Pastikan label berada di atas elemen lain */
    pointer-events: none; /* Agar tidak menghalangi interaksi pengguna */
}

/* Container galeri */
.gallery-container {
    width: 100%; /* Mengisi seluruh lebar parent */
    
}

/* Gambar utama */
.main-image-container img {
    width: 100%; /* Lebar penuh mengikuti parent */
    height: auto;
    border-radius: 5px;
    border: 1px solid #ddd;
}

/* Thumbnail Gallery Container */
.thumbnail-gallery-container {
    display: flex;
    justify-content: center; /* Tengahkan konten horizontal */
    align-items: center; /* Tengahkan konten vertikal */
    margin-top: 10px;
    padding: 10px 0x;
}

/* Galeri Thumbnail */
.thumbnail-gallery {
    display: flex; /* Susunan horizontal */
    flex-wrap: nowrap; /* Pastikan tidak pindah baris */
    justify-content: center; /* Tengah secara horizontal */
    gap: 5px; /* Jarak antar thumbnail */
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden; /* Hapus scroll bar */
}

/* Setiap Item Thumbnail */
.thumbnail-gallery-item img {
    width: 80px; /* Ukuran thumbnail */
    height: 60px; /* Tinggi thumbnail */
    object-fit: cover; /* Pastikan gambar menyesuaikan proporsi */
    border-radius: 5px;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

/* Item Thumbnail */
.thumbnail-gallery-item img {
    width: 80px; /* Ukuran thumbnail */
    height: 60px;
    object-fit: cover; /* Sesuaikan gambar */
    border-radius: 5px;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

/* Efek Hover */
.thumbnail-gallery-item img:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Aktif */
.thumbnail-gallery-item.active img {
    border: 2px solid #F70D1A;
    transform: scale(1.1);
}

/* Hilangkan Scroll pada Body atau Elemen */
body {
    overflow-x: hidden; /* Hapus scroll horizontal global */
}

/* Responsif */
@media (max-width: 768px) {
    .thumbnail-gallery-container {
        overflow-x: auto; /* Scroll horizontal */
        padding: 5px 0;
    }

    .thumbnail-gallery-item img {
        width: 60px;
        height: 45px;
    }
}

/* CSS untuk rekomendasi iklan */
.recent-property-widget h2 {
    font-size: 20px; /* Ukuran huruf */
    color: #e92626; /* Warna hitam */
    margin: 1px ; /* Jarak dengan elemen atas */
    font-weight: bold; /* Tebal */
}
.recent-property-widget span {
    font-size: 16px; /* Ukuran huruf */
    color: #1a1b1a; /* Warna hitam */
    margin-top: 1px; /* Jarak dengan elemen atas */
    font-weight: bold; /* Tebal */
}

.btn-whatsapp {
    background-color: #25D366; /* Warna hijau khas WhatsApp */
    color: #ffffff; /* Warna teks dan ikon putih */
    font-size: 16px; /* Ukuran teks */
    padding: 10px 20px; /* Padding tombol */
    border-radius: 8px; /* Melengkungkan sudut tombol */
    transition: all 0.3s ease; /* Efek transisi saat hover */
    border: none; /* Hilangkan border */
    display: inline-flex; /* Agar ikon dan teks sejajar */
    align-items: center; /* Rata tengah vertikal */
    justify-content: center; /* Rata tengah horizontal */
    text-decoration: none; /* Hilangkan garis bawah pada link */
}

.btn-whatsapp i {
    font-size: 20px; /* Ukuran ikon */
    margin-right: 8px; /* Jarak antara ikon dan teks */
}

.btn-whatsapp:hover {
    background-color: #128C7E; /* Warna hijau lebih gelap saat hover */
    transform: scale(1.05); /* Efek membesar saat hover */
    color: #ffffff; /* Pastikan teks tetap putih saat hover */
    text-decoration: none; /* Hilangkan garis bawah pada link saat hover */
}

@media (max-width: 768px) {
    .box-samping {
        padding: 5px 0px; /* Mengurangi padding untuk layar kecil */
        margin-top: 10px; /* Mengurangi margin atas */
        transition: all 0.2s ease 0s; /* Efek transisi tetap sama */
        font-weight: bold;
    }
}
@media (max-width: 894px) {
    .box-samping {
        padding: 5px 0px; /* Mengurangi padding untuk layar kecil */
        margin-top: 10px; /* Mengurangi margin atas */
        transition: all 0.2s ease 0s; /* Efek transisi tetap sama */
        font-weight: bold;
    }
}

#togglePassword {
    cursor: pointer;
    font-size: 14px;
    color: #151616;
    margin-top: -15px;
    margin-bottom: 10px;
    display: block; /* Pastikan tulisan tampil sebagai blok */
}

.box-for .btn-danger {
    background-color: #f10a0a !important; /* Bootstrap default warna merah */
    color: white !important;
}

#nickname-menu {
    background-color: #f10a0a; /* Warna hijau lebih gelap saat hover */
    color: #ffffff;
   
}

#nickname-menu li {
    margin-bottom: 10px; /* Atur jarak antar-elemen */
    color: #ffffff;
    
}

#nickname-menu li a {
    color: #ffffff;
}
#nickname-menu li a:hover {
    color: #f50d0d;
    font-weight: bold;
}

#nickname-menu li:last-child {
    margin-bottom: 0; /* Hilangkan jarak untuk elemen terakhir */
}

.mobil-img {
   
    object-fit: cover; /* Memastikan gambar terisi penuh dengan proporsi yang tepat */
    border-radius: 5px; /* Opsional: menambahkan sudut melengkung */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Opsional: menambahkan bayangan */
    margin-bottom: 10px;
}

.hidden-input {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.order_by_price {
    background-color: #e92626;
    color: #575454;
}

  /* Container galeri */
  .thumbnail-gallery-containers {
    position: relative;
    width: 100%;
    overflow: hidden; /* Sembunyikan gambar yang melampaui batas */
}

/* Galeri gambar */
.thumbnail-gallerys {
    display: flex;
    gap: 5px;
    overflow-x: auto; /* Aktifkan scroll horizontal */
    scroll-behavior: smooth; /* Smooth scrolling */
    padding: 10px;
}

/* Item galeri */
.thumbnail-gallery-items {
    min-width: 100px; /* Lebar minimal setiap gambar */
    flex: 0 0 auto; /* Gambar tidak mengecil di bawah lebar minimal */
}

/* Gambar */
.image-containers img {
    width: 100px; /* Lebar penuh pada item */
    height: 100px; /* Jaga proporsi gambar */
    border: 2px solid #ddd;
    border-radius: 5px;
    object-fit: cover; /* Pangkas gambar jika terlalu besar */
}

/* Tombol navigasi */
.nav-buttons {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(238, 5, 5, 0.5);
    color: white;
    border: none;
    padding: 5px;
    cursor: pointer;
    z-index: 10;
}

/* Tombol kiri */
.nav-buttons.left {
    left: 0;
}

/* Tombol kanan */
.nav-buttons.right {
    right: 0;
}

.form-controls {
    display: flex;
    align-items: center;
    padding: 0;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    
}
.form-controls input {
    border: none;
    flex: 1;
    padding: 0.375rem;
}
.form-controls span {
    padding: 0.375rem 0.75rem;
    background-color: #f8f9fa;
    white-space: nowrap;
}


.thumbnail-item {
    position: relative;
    display: inline-block;
}

.thumbnail-item img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 2px solid #ddd;
    border-radius: 5px;
}

.thumbnail-item .remove-thumbnail {
    position: absolute;
    top: -5px;
    right: -5px;
    background: red;
    color: white;
    font-size: 12px;
    width: 20px;
    height: 20px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    line-height: 18px;
}

.image-container {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
}
/* Style untuk close button */
.close-button {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
    color: white;
    font-weight: bold;
    font-size: 15px;
    padding: 2px 6px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    z-index: 10; /* Memastikan z-index lebih tinggi dari gambar */
}

.close-button:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Sembunyikan ikon close secara default */
.other-image-input-group .close-icon {
    display: none;
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
    color: red;
    font-size: 1.2em;
}

/* Tampilkan ikon close saat label di-hover (hanya jika ada preview) */
.other-image-input-group:hover .close-icon {
    display: block;
}

.kebijakan {
    text-align: center; /* Rata kiri dan kanan */
    line-height: 1.4; /* Jarak antar baris */
    margin: 0; /* Menghilangkan margin default */
}

.kebijakan p {
    margin-bottom: 2px; /* Jarak antar paragraf */
}

.kebijakan a {
    text-decoration: none; /* Menghilangkan garis bawah pada link */
    color: #e60000; /* Warna merah untuk link */
}

.kebijakan a:hover {
    text-decoration: underline; /* Menambahkan garis bawah saat hover */
    color: #b50000; /* Warna merah yang lebih gelap saat hover */
}


/*  Style untuk Paket Iklan  */
.paket-iklan {
    margin-top: 15px;
}

.paket-iklan-container .card {
    border: 2px solid #dee2e6; /* Warna border abu-abu muda */
    border-radius: 15px; /* Sudut lebih membulat */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Shadow tipis */
    transition: transform 0.2s ease; /* Efek transisi saat hover */
    
}
    
.paket-iklan-container .card:hover {
    transform: scale(1.02); /* Sedikit membesar saat hover */
}

.paket-iklan-container .card-header {
    background-color: #f8f9fa; /* Background abu-abu sangat muda */
    border-bottom: none; /* Hilangkan border bawah header */
    padding-top: 1rem; /* Padding atas */
    padding-bottom: 1rem; /* Padding bawah */
    border-top-left-radius: 13px;  /* Sesuaikan nilainya */
    border-top-right-radius: 13px; /* Sesuaikan nilainya */
}

.paket-iklan-container .card-header h4 {
    font-weight: 700; /* Lebih tebal dari fw-bold (600) */
    margin-bottom: 0; /* Hilangkan margin bawah */
    text-transform: uppercase; /* Kapital semua */
}

.paket-iklan-container .card-body {
    padding: 1.5rem; /* Padding lebih besar */
}

.paket-iklan-container .card-body ul {
    list-style: none; /* Hilangkan bullet bawaan */
    padding-left: 0; /* Hilangkan padding kiri */
}

.paket-iklan-container .card-body li {
    margin-bottom: 0.75rem; /* Margin antar item */
}
.paket-iklan-container  .card-body li i{
    min-width: 22px; /* Menyamakan jarak icon */
}

.paket-iklan-container .card-footer {
   
    border-top: none; /* Hilangkan border atas footer */
    padding-bottom: 1.5rem; /* Padding bawah */
}

.paket-iklan-container .card-footer h5 {
    font-weight: 700; /* Lebih tebal */
    margin-bottom: 1rem; /* Margin bawah */
}

.paket-iklan-container .btn-primary {
    /* Style tombol (sesuaikan dengan tema warna Anda) */
    background-color: #0d6efd;
    border-color: #0d6efd;
    padding-left: 1.5rem; /* Padding lebih lebar */
    padding-right: 1.5rem;
    border-radius: 8px;
}
.paket-iklan-container .btn-primary:hover {
    /* Style tombol saat hover */
    background-color: #0b5ed7;
    border-color: #0a58ca;
}


/* Style khusus untuk Paket Premium */
.paket-iklan-container .paket-premium .card-header {
    background-color: rgb(112, 64, 252);
    color: white; /* Teks putih */
}

.paket-iklan-container .harga-timpa {
    position: absolute;
    top: -2rem; /* Posisikan di atas footer */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgb(112, 64, 252);
    color: white;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 999px; /* Pill shape */
    z-index: 1; /* Pastikan di atas elemen lain */
    white-space: nowrap; /* Agar tidak wrap */
}
.paket-iklan-container .card-body,
.paket-iklan-container .card-header,
.paket-iklan-container .card-footer{
    position: relative; /* Untuk stacking context */
    z-index: 2;
}

/* Style untuk tampilan mobile */
@media (max-width: 767.98px) {
    .paket-iklan-container .card {
        margin-bottom: 1rem; /* Margin antar kartu di mobile */
    }
}

.btn-spacing {
    margin-right: 10px; /* Sesuaikan nilai margin sesuai kebutuhan */
  }

  @media (max-width: 768px) { /* Berlaku untuk layar kecil */
    .card-body {
        height: auto !important; /* Hilangkan height pada tampilan mobile */
    }
}

.custom-fancy-font {
    font-family: 'Roboto', sans-serif;
}