/*
====================================================
SECTION: MAP MODAL (CUSTOM WIDTH & FULLSCREEN)
====================================================
*/
/* Override Bootstrap's modal-xl untuk modal peta agar lebih lebar */
@media (min-width: 1200px) {
    .modal-map {
        max-width: 95%; /* Gunakan persentase agar lebih fleksibel, atau nilai tetap seperti 1300px */
    }
}

/* PERUBAHAN: Menghilangkan padding/border ganda saat peta di dalam modal */
.modal-body #table-layout-container {
    border: none;
    box-shadow: none;
    padding: 0;
    margin-top: 0;
    height: 100%; /* PERUBAHAN: Membuat peta mengisi tinggi modal */
    background-color: #ffffff !important; /* PERBAIKAN: Ganti latar belakang menjadi putih solid */
}
 
/* PERBAIKAN: Memposisikan tombol tutup modal peta secara absolut */
#mapModal .close {
    display:none;
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 10; /* Pastikan di atas konten modal */
    font-size: 2.5rem;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    opacity: 0.9;
}


/* PERBAIKAN: Membuat modal peta menjadi full screen */
#mapModal .modal-dialog {
    max-width: 100%;
    width: 100%;
    height: 100%;
    margin: 0;
}

#mapModal .modal-content {
    height: 100%;
    border: none; /* PERBAIKAN: Gunakan none untuk konsistensi */
    border-radius: 0;
    background-color: #ffffff !important; /* PERBAIKAN: Ganti latar belakang menjadi putih solid */

}

#mapModal .modal-body {
    overflow-y: auto; /* Tambahkan scroll jika konten lebih tinggi dari layar */
    flex: 1 1 auto; /* PERBAIKAN: Pastikan modal-body mengisi sisa ruang vertikal */
    /* PERUBAHAN: Sembunyikan scrollbar */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
#mapModal .modal-body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Menghapus override lebar 95% yang sudah tidak diperlukan */
@media (min-width: 1200px) {
    .modal-map { max-width: 100%; }
}

/*
====================================================
PERBAIKAN: Style untuk Modal Pemesanan (bookingModal)
====================================================
*/

/* Posisi tombol tutup */
#bookingModal .close {
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 10;
    font-size: 2rem;
    color: #aaa;
    background: none;
    border: none;
}

/* Logo di dalam modal */
.modal-logo-img {
    max-height: 40px; /* Batasi tinggi logo */
}

/* Placeholder untuk banner */
.dummy-banner {
    height: 50px;
    background-color: #e9ecef;
    border: 2px dashed #ced4da;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    color: #6c757d;
    border-radius: 4px;
}
/* PERBAIKAN: Style untuk slider gambar di dalam modal */
#areaImageSlider {
    border-radius: 2px;
    overflow: hidden; /* Pastikan gambar tidak keluar dari border-radius */
    height: 100%;
    background-color: #f0f0f0; /* Warna latar saat gambar dimuat */
}

#areaImageSlider .carousel-inner,
#areaImageSlider .carousel-item {
    height: 100%;
}

#areaImageSlider .carousel-item img {
    height: 100%;
    width: 100%;
    object-fit: cover; /* Pastikan gambar mengisi area tanpa distorsi */
}

/* PERUBAHAN: Memberikan tinggi tetap pada baris galeri gambar */
.image-gallery-row {
    height: 180px; /* Tinggi frame tetap, sesuaikan jika perlu */
    margin-bottom: 1.5rem; /* Memberi jarak ke form di bawahnya */
}

/* PERBAIKAN: Memastikan kolom di dalam galeri juga memiliki tinggi penuh */
.image-gallery-row > [class*="col-"] {
    height: 100%;
    padding-left: 0px; /* PERUBAHAN: Mengurangi padding kiri */
    padding-right: 0px; /* PERUBAHAN: Mengurangi padding kanan */
    padding-top: 0px; /* PERUBAHAN: Mengurangi padding atas */
    padding-bottom: 0px; /* PERUBAHAN: Mengurangi padding bawah */
}

/* PERBAIKAN: Membuat tag <a> di dalam kolom gambar mengisi ruang yang tersedia */
.image-column a {
    display: flex; /* Membuat <a> menjadi flex container */
    flex: 1;       /* Membuat <a> mengisi ruang yang tersedia di .image-column */
    min-height: 0; /* Diperlukan agar flex item bisa menyusut dengan benar */
    margin-bottom: 0px;
}
.image-column a:last-child {
    margin-bottom: 0; /* Hapus margin bawah dari gambar terakhir */
}

/* PERUBAHAN: Style untuk kolom gambar tambahan di modal */
.image-column {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.image-column a .img-fluid {
    width: 100%; /* Pastikan gambar mengisi lebar <a> */
    height: 100%; /* Pastikan gambar mengisi tinggi <a> */
    object-fit: cover; /* Memastikan gambar mengisi area tanpa distorsi */
    border-radius: 2px; /* PERUBAHAN: Mengubah radius sudut */
}

.reservation-summary {
    padding-right: 10px; /* Beri sedikit ruang di sisi kanan detail */
}

/*
====================================================
PERUBAHAN: Style untuk Modal Pemesanan agar Geser dari Kanan
====================================================
*/

.modal.modal-right .modal-dialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    width: 800px; /* Sesuaikan lebar sesuai kebutuhan */
    max-width: 100%;
    transform: translateX(100%); /* Mulai dari luar layar kanan */
    transition: transform .4s ease-out;
}

.modal.modal-right.show .modal-dialog {
    transform: translateX(0); /* Pindahkan ke dalam layar saat modal ditampilkan */
}

.modal.modal-right .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
    overflow-y: auto; /* Tambahkan scroll jika konten panjang */
}

/* Menyesuaikan posisi tombol tutup di modal baru */
.modal.modal-right .close {
    top: 15px;
    right: 25px;
}

/* Menghilangkan latar belakang gelap default modal */
.modal-backdrop.show {
    opacity: 0.5; /* Anda bisa atur ini ke 0 jika tidak ingin ada overlay sama sekali */
}

/*
====================================================
PERUBAHAN: Style untuk Header Kustom di Modal Pemesanan
====================================================
*/
.modal-custom-header {
    display: flex;
    justify-content: space-between; /* Mendorong judul ke kiri dan tombol ke kanan */
    align-items: center;
    padding-bottom: 0.75rem; /* PERUBAHAN: Mengurangi padding bawah */
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 1rem; /* PERUBAHAN: Mengurangi margin bawah */
}

.modal-custom-header .modal-title {
    margin-bottom: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #343a40;
    text-transform: capitalize; /* Membuat huruf pertama setiap kata menjadi besar */
}

.modal-sub-header {
    display: flex;
    flex-direction: column; /* PERUBAHAN: Tumpuk item secara vertikal */
    align-items: flex-start; /* Ratakan item ke kiri */
    margin-top: 0.25rem;
}

.modal-capacity {
    margin: 0; /* Hapus margin default dari <p> */
    font-size: 0.9rem;
    color: #6c757d; /* Warna abu-abu (text-muted) */
}

/* PERUBAHAN: Style untuk baris info orang */
.modal-person-info {
    display: flex;
    align-items: center;
    gap: 1rem; /* Beri jarak antara kapasitas dan tombol tambah orang */
}

.modal-add-person {
    margin: 0; /* Hapus margin default dari <p> */
    font-size: 0.9rem;
    color: #28a745; /* Warna hijau (success) */
    font-weight: 500;
    display: none; /* Diubah menjadi 'flex' oleh JS jika ada opsi */
    align-items: center;
    gap: 0.5rem; /* Jarak antara label dan stepper */
}

/* PERUBAHAN: Style untuk tombol pemicu stepper (+) */
.stepper-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 20px;
    transition: background-color 0.2s;
    border: 1px solid transparent;
}

.stepper-trigger:hover {
    background-color: #e9ecef;
    border-color: #ced4da;
}

/* PERUBAHAN: Style untuk komponen stepper "Additional Person" yang lebih modern */
.person-stepper {
    display: flex;
    align-items: center;
    border: 1px solid #ced4da;
    border-radius: 20px; /* Membuat sudut sangat membulat */
    background-color: #fff;
    padding: 2px;
}

.stepper-btn {
    background-color: #e9ecef;
    border: none;
    color: #495057;
    font-weight: bold;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1.2rem;
    line-height: 1;
    transition: background-color 0.2s, color 0.2s;
}

.stepper-btn:hover {
    background-color: #007bff;
    color: #fff;
}

.stepper-value {
    padding: 0 15px;
    font-weight: 600;
    font-size: 1rem;
    min-width: 40px; /* Memberi ruang agar tidak bergeser saat angka berubah */
    text-align: center;
}

/*
====================================================
PERUBAHAN: Style Kustom untuk Lightbox2 (Galeri Popup)
====================================================
*/

/* Memastikan background gelap transparan terlihat */
#lightboxOverlay {
    background-color: #000;
    opacity: 0.8; /* Anda bisa atur tingkat transparansi di sini */
    z-index: 1050; /* Pastikan di atas modal tapi di bawah gambar popup */
}

/* Memastikan container lightbox di atas overlay */
#lightbox {
    z-index: 1060;
}

/* Memastikan tombol navigasi (prev/next) dan close terlihat jelas */
.lb-nav a.lb-prev,
.lb-nav a.lb-next,
.lb-data .lb-close {
    opacity: 0.7;
    transition: opacity 0.2s;
}

.lb-nav a.lb-prev:hover,
.lb-nav a.lb-next:hover,
.lb-data .lb-close:hover {
    opacity: 1;
}

/*
====================================================
PERUBAHAN: Style untuk Baris Harga & Aksi di Modal
====================================================
*/
.modal-price-action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 0.75rem; /* PERUBAHAN: Mengurangi padding bawah */
}

.price-display {
    font-size: 1.6rem; /* Sedikit diperbesar agar lebih menonjol */
    font-weight: 700;
    color: #fd7e14; /* PERUBAHAN: Warna oranye */
}

.price-display small {
    font-size: 0.9rem;
    font-weight: 500;
    color: #6c757d;
}

/*
====================================================
Modern List style
====================================================
*/
.modern-list {
    list-style: none; /* Menghilangkan bullet bawaan */
    padding: 0;
    margin: 20px 0;
    font-family: Arial, sans-serif;
}

.modern-list li {
    padding: 10px 15px;
    margin-bottom: 5px;
    border-left: 5px solid #007bff; /* Garis vertikal sebagai penanda */
    background-color: #f8f9fa; /* Latar belakang item */
    border-radius: 4px;
    transition: background-color 0.3s, transform 0.3s;
}

.modern-list li:hover {
    background-color: #e9ecef; /* Warna latar saat hover */
    transform: translateX(5px); /* Efek pergeseran ringan saat hover */
    cursor: pointer;
}

.macos-list {
    list-style: none;
    padding: 0;
    margin-top:-20px;
    margin-left:30px;
    width: 90%; /* Lebar list */
    max-width: 500px;
    font-family: 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Font ala Apple */
    background-color: rgba(255, 255, 255, 0.7); /* Latar belakang putih transparan */
    border-radius: 12px; /* Sudut membulat yang khas */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Bayangan lembut */
    /* Efek Blur (Kaca Buram) - Catatan: Tidak semua browser mendukung ini secara konsisten */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.4); /* Garis batas tipis */
}

.macos-list li {
    padding: 3px 3px;
    font-size: 16px;
    color: #333; /* Warna teks yang kontras */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Garis pemisah tipis */
    transition: background-color 0.2s ease-in-out;
    position: relative;
}

/* Hilangkan border bawah pada item terakhir */
.macos-list li:last-child {
    border-bottom: none;
}

/* Efek saat kursor menyentuh (Hover) */
.macos-list li:hover {
    background-color: rgba(0, 0, 0, 0.05); /* Sedikit gelap saat di-hover */
    cursor: pointer;
}

/* Menambahkan Icon Penanda (Optional) */
.macos-list li::before {
    content: '•';
    color: #007aff; /* Warna biru khas macOS */
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

/* PERUBAHAN: Style paragraf ala macOS */
.macos-style-paragraph {
    padding: 15px 20px; /* Padding yang sesuai untuk paragraf */
    font-size: 16px; /* Ukuran font yang pas */
    line-height: 1.6; /* Jarak antar baris agar mudah dibaca */
    color: #494949; /* Warna teks yang kontras */
    font-family: 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Font ala Apple */
    background-color: rgba(242, 242, 247, 0.8); /* Latar belakang abu-abu terang transparan ala macOS */
    border-radius: 12px; /* Sudut membulat yang khas */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Bayangan lembut */
    backdrop-filter: blur(10px); /* Efek Kaca Buram (Blur) */
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.05); /* Garis batas sangat tipis */
    margin-top: 1rem !important; /* Menyesuaikan jarak atas */
}