/*

/*
====================================================
SECTION: TABLE MAP LAYOUT
====================================================
*/
/* PERUBAHAN: Kontainer utama sekarang hanya sebagai pembatas */
#table-layout-container {
    width: 100%; /* Tetap mengisi lebar modal */
    height: 100%; /* Tetap mengisi tinggi modal */
    overflow: auto; /* PERBAIKAN: Izinkan scrolling bawaan browser */
    /* PERUBAHAN: Sembunyikan scrollbar */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    background-color: #ffffff; /* PERBAIKAN: Hapus efek blur dan set background putih */
}
#table-layout-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
    cursor: grab; /* Tetap gunakan cursor grab untuk indikasi bisa digeser */
}

/* PERUBAHAN: Wrapper baru untuk gambar dan meja */
.map-image-wrapper {
    position: relative;
    width: 1280px; /* Ukuran lebar peta yang tetap */
    height: 800px; /* Ukuran tinggi peta yang tetap */
    display: grid; /* KUNCI: Gunakan Grid untuk menumpuk elemen */
    transition: transform 0.3s ease; /* Animasi halus untuk zoom */
    transform-origin: top left; /* PERBAIKAN: Atur titik asal zoom ke kiri atas */
    align-items: start; /* Rata atas secara vertikal */
    justify-items: center; /* Tetap rata tengah secara horizontal */
    margin: auto; /* PERUBAHAN: Posisikan map wrapper di atas slider */
    z-index: 10;
    overflow: hidden; /* PERBAIKAN: Memastikan konten di dalamnya (gambar) terpotong sesuai border-radius */
    border-radius:15px !important;
}

/* PERUBAHAN: Style untuk gambar peta */
.map-background-image {
    grid-area: 1 / 1; /* Tempatkan di sel grid pertama */
    width: 100%; /* Mengisi lebar .map-image-wrapper */
   
    
    overflow: hidden; /* PERBAIKAN: Memastikan konten di dalamnya (gambar) terpotong sesuai border-radius */
    border-radius:15px !important;
    
}

/* PERUBAHAN: Wrapper meja sekarang menjadi overlay di atas gambar */
.table-map-inner-wrapper {
    grid-area: 1 / 1; /* KUNCI: Tempatkan di sel grid yang sama dengan gambar */
    position: relative; /* Posisi relatif terhadap sel grid */
    width: 100%; /* Mengisi lebar .map-image-wrapper */
    height: 100%; /* Mengisi tinggi .map-image-wrapper */
}

.section-area-buttons {
    display: flex;
    gap: 10px; /* Memberi jarak antar tombol */
}

/*
====================================================
STYLE UNTUK MEJA (TABLE CARDS)
====================================================
*/

/* Wrapper untuk setiap meja */
.table-card-wrapper {
    position: absolute; /* KUNCI: Semua meja diposisikan secara absolut */
    /* PERUBAHAN: Sembunyikan meja secara default */
    display: none;
    /* PERUBAHAN: Hapus semua gaya kotak, wrapper sekarang transparan */
    transition: transform 0.3s ease;
    text-align: center; /* Agar nomor di tengah ikon */
}

/* PERUBAHAN: Style untuk ikon lokasi */
/* PERUBAHAN: Ikon dibuat lebih besar dan diberi posisi relatif untuk menampung nomor meja */
.table-location-icon {
    font-size: 26px; /* PERUBAHAN: Perbesar ukuran ikon agar lebih menonjol */
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    transition: color 0.3s ease; /* Transisi untuk perubahan warna */
    position: relative; /* Diperlukan agar pseudo-element ::before bisa diposisikan */
    display: inline-block; /* Pastikan elemen memiliki dimensi */
}

/* Style untuk nomor meja */
/* PERUBAHAN: Nomor meja sekarang diposisikan di tengah ikon, bukan sebagai bar di atas */
.table-number-display {
    position: absolute;
    top: 10%; /* PERUBAHAN: Posisikan sedikit lebih ke atas */
    left: 0;
    width: 100%; /* Mengisi lebar wrapper */
    text-align: center;
    font-size: 12px; /* PERUBAHAN: Perbesar ukuran font agar lebih menonjol */
    font-weight: bold;
    color: rgb(12, 12, 12);
    transition: color 0.3s ease; /* PERUBAHAN: Tambahkan transisi untuk perubahan warna yang halus */
    z-index: 3; /* Pastikan nomor di atas ikon */
    background-color: #ffc107;
    border-radius:2px;
}

/* PERUBAHAN: Style untuk nomor meja yang sudah ada di keranjang */
.table-number-display.in-cart {
    background-color: #d853b7; /* Warna ungu custom */
    color: #fcfcfc; /* Warna teks putih agar kontras */
    text-shadow: none; /* Hapus bayangan teks agar lebih jelas */
}

/* PERUBAHAN: Efek hover sekarang mengubah warna ikon dan membesarkannya */
.table-card-wrapper.status-available:hover {
    transform: translateY(-6px) scale(1.03);
    z-index: 10; /* Pastikan ikon yang di-hover ada di atas yang lain */
}

/* Status, Overlay, dan Disable */
.table-card-wrapper.status-available { cursor: pointer; }
.table-card-wrapper.disabled {
    cursor: not-allowed;
    box-shadow: none;
}
.table-card-wrapper.status-available:hover .table-location-icon {
    color: #4b5e06; /* PERUBAHAN: Hijau gelap saat hover */
}

/* PERUBAHAN: Ganti warna nomor meja menjadi hijau saat di-hover */
.table-card-wrapper.status-available:hover .table-number-display {
    color: #28a745; /* Warna hijau (success) */
}
.table-card-wrapper.status-booked .table-location-icon,
.table-card-wrapper.status-maintenance .table-location-icon {
    color: #dc3545; /* Merah */
}

/* PERUBAHAN: Sembunyikan meja yang sedang dalam perbaikan */
.table-card-wrapper.status-maintenance {
    display: none;
}

/*
====================================================
STYLE BARU: WARNA MEJA BERDASARKAN AREA
====================================================
*/

/* Area 3xx - Sun Lounger (Kuning) */
.table-card-wrapper[data-table-number^="3"].status-available .table-location-icon {
    color: #ffb703; /* Kuning-Oranye */
}
.table-card-wrapper[data-table-number^="3"].status-available .table-number-display {
    background-color: #ffb703;
    color: #583d00;
}

/* Area 4xx - Sun Lounger (Kuning) */
.table-card-wrapper[data-table-number^="4"].status-available .table-location-icon {
    color: #47e955; /* Kuning-Oranye */
}
.table-card-wrapper[data-table-number^="4"].status-available .table-number-display {
    background-color: #47e955;
    color: #583d00;
}

/* Area 6xx - Full Daybed (Hijau) */
.table-card-wrapper[data-table-number^="6"].status-available .table-location-icon {
    color: #2a9d8f; /* Hijau Tosca */
}
.table-card-wrapper[data-table-number^="6"].status-available .table-number-display {
    background-color: #2a9d8f;
    color: #ffffff;
}

/* Area 5xx - Pool Daybed (Biru) */
.table-card-wrapper[data-table-number^="5"].status-available .table-location-icon {
    color: #219ebc; /* Biru Cerah */
}
.table-card-wrapper[data-table-number^="5"].status-available .table-number-display {
    background-color: #219ebc;
    color: #ffffff;
}

/* Area 7xx & 9xx - Booth & Suites (Ungu) */
.table-card-wrapper[data-table-number^="7"].status-available .table-location-icon{
    color: #4446ad; /* Ungu */
}
.table-card-wrapper[data-table-number^="9"].status-available .table-location-icon {
    color: #8e44ad; /* Ungu */
}
.table-card-wrapper[data-table-number^="7"].status-available .table-number-display{
    background-color: #4446ad;
    color: #ffffff;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.table-card-wrapper[data-table-number^="9"].status-available .table-number-display {
    background-color: #8e44ad;
    color: #ffffff;
}
/*
====================================================
PERUBAHAN: KOORDINAT MEJA 
====================================================
*/


/* Posisi untuk beberapa Grass Daybed di kiri atas dan bawah */
/* Grass Daybed Kiri */
[data-table-number="315"] {
    display: inline-block;
    top: 42.00%;
    left: 39.50%;
}
[data-table-number="316"] {
    display: inline-block;
    top: 44.00%;
    left: 36.00%;
}
[data-table-number="317"] {
    display: inline-block;
    top: 46.10%;
    left: 32.30%;
}
[data-table-number="318"] {
    display: inline-block;
    top: 48.10%;
    left: 28.00%;
}
[data-table-number="319"] {
    display: inline-block;
    top: 50.10%;
    left: 23.60%;
}
/* Grass Daybed Kanan */
[data-table-number="415"] {
    display: inline-block;
    top: 32.90%;
    left: 63.50%;
}
[data-table-number="416"] {
    display: inline-block;
    top: 34.30%;
    left: 60.40%;
}
[data-table-number="417"] {
    display: inline-block;
    top: 35.50%;
    left: 57.30%;
}
[data-table-number="418"] {
    display: inline-block;
    top: 36.50%;
    left: 54.00%;
}
[data-table-number="419"] {
    display: inline-block;
    top: 38.50%;
    left: 50.40%;
}
/* Pool Daybed A */
[data-table-number="501"] {
    display: inline-block;
    top: 55.70%;
    left: 26.00%;
}
[data-table-number="502"] {
    display: inline-block;
    top: 53.70%;
    left: 30.00%;
}
[data-table-number="503"] {
    display: inline-block;
    top: 51.90%;
    left: 33.10%;
}
[data-table-number="504"] {
    display: inline-block;
    top: 50.70%;
    left: 37.00%;
}
[data-table-number="505"] {
    display: inline-block;
    top: 49.20%;
    left: 40.30%;
}
[data-table-number="506"] {
    display: inline-block;
    top: 47.70%;
    left: 43.80%;
}
/*Pool Daybed Kiri B*/
[data-table-number="507"] {
    display: inline-block;
    top: 50%;
    left: 49.80%;
}
[data-table-number="508"] {
    display: inline-block;
    top: 52%;
    left: 46.50%;
}
[data-table-number="509"] {
    display: inline-block;
    top: 54%;
    left: 42.90%;
}
[data-table-number="510"] {
    display: inline-block;
    top: 55.70%;
    left: 39.50%;
}
[data-table-number="511"] {
    display: inline-block;
    top: 57.80%;
    left: 36.10%;
}
[data-table-number="512"] {
    display: inline-block;
    top: 59.70%;
    left: 32.40%;
}
[data-table-number="514"] {
    display: inline-block;
    top: 62%;
    left: 28.30%;
}
[data-table-number="515"] {
    display: inline-block;
    top: 64%;
    left: 24.80%;
}

/* Pool Daybed A */
[data-table-number="601"] {
    display: inline-block;
    top: 42.80%;
    left: 54.70%;
}
[data-table-number="602"] {
    display: inline-block;
    top: 41.40%;
    left: 57.80%;
}
[data-table-number="603"] {
    display: inline-block;
    top: 39.60%;
    left: 60.60%;
}
[data-table-number="604"] {
    display: inline-block;
    top: 38.30%;
    left: 63.60%;
}
[data-table-number="605"] {
    display: inline-block;
    top: 36.90%;
    left: 66.30%;
}
[data-table-number="606"] {
    display: inline-block;
    top: 35.90%;
    left: 69.30%;
}
/* Pool Daybed Kanan B */
[data-table-number="607"] {
    display: inline-block;
    top: 37.40%;
    left: 74.60%;
}
[data-table-number="608"] {
    display: inline-block;
    top: 38.40%;
    left: 72.00%;
}
[data-table-number="609"] {
    display: inline-block;
    top: 39.60%;
    left: 69.70%;
}
[data-table-number="610"] {
    display: inline-block;
    top: 40.80%;
    left: 67.40%;
}
[data-table-number="611"] {
    display: inline-block;
    top: 42.60%;
    left: 65.00%;
}
[data-table-number="612"] {
    display: inline-block;
    top: 43.90%;
    left: 62.00%;
}
[data-table-number="614"] {
    display: inline-block;
    top: 45.60%;
    left: 59.00%;
}
[data-table-number="615"] {
    display: inline-block;
    top: 47.40%;
    left: 55.90%;
}
/* Posisi untuk Pool Booth */
[data-table-number="701"] {
    display: inline-block;
    top: 67.40%;
    left: 47.80%;
}
[data-table-number="702"] {
    display: inline-block;
    top: 55%;
    left: 67.05%;
}
[data-table-number="703"] {
    display: inline-block;
    top: 46%;
    left: 81.48%;
}

/* Posisi untuk Deluxe Suite */
[data-table-number="901"] {
    display: inline-block;
    top: 24%;
    left: 51.20%;
}
[data-table-number="902"] {
    display: inline-block;
    top: 24%;
    left: 57.60%;
}
[data-table-number="903"] {
    display: inline-block;
    top: 24%;
    left: 63.60%;
}

/* Posisi untuk Suite */
[data-table-number="904"] {
    display: inline-block;
    top: 24%;
    left: 72.60%;
}

/* Posisi untuk STAGE */
[data-table-number="stage"] {
    display: inline-block;
    top: 26%;
    left: 85.60%;
}
/* Suite Layout Styles */
.suite-layout-container {
    position: relative;
    height: 500px;
    margin-top: 0px;
    margin-left: -40px;
}
.suite-title {
    position: absolute;
    top: 0;
    left: 50px;
    white-space: nowrap;
}
.suite-table-wrapper {
    position: absolute;
    transform: rotate(45deg);
}
.suite-table-901 { top: 33px; }
.suite-table-902 { top: 80px; left: 48px; }
.suite-table-903 { top: 45%; left: 76%; }
.suite-table-904 { top: 45%; left: 76%; }

/* Walkway Style */
.walkway {
    display: flex;
    margin-left: -10px;
    margin-top: -27px;
    align-items: center;
    justify-content: center;
    background-color: #141414ff;
    border-radius: 12px;
    writing-mode: horizontal-rl;
    text-orientation: mixed;
    font-weight: bold;
    color: #ffffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    width: 80px;
    height: 100px;
}

.area-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #495057;
}

/*
====================================================
PERUBAHAN: MENGGANTI IKON AREA DENGAN GIF
====================================================
*/

/* Base style untuk ikon GIF */
.table-card-wrapper.gif-icon .table-location-icon {
    font-size: 0; /* Sembunyikan ikon font */
    text-shadow: none;
    width: 60px; /* Lebar GIF */
    height: 60px; /* Tinggi GIF */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Sembunyikan nomor meja untuk ikon GIF */
.table-card-wrapper.gif-icon .table-number-display {
    display: none;
}

/* Jangan perbesar ikon GIF saat hover */
.table-card-wrapper.gif-icon:hover {
    transform: none;
}

/*
====================================================
PERBAIKAN: KHUSUS UNTUK STAGE (1001)
====================================================
*/

/* PERBAIKAN: Aturan spesifik untuk STAGE agar hanya menampilkan GIF */
.table-card-wrapper[data-table-number="stage"] .table-location-icon {
    background-image: url('../images/tables/stage.png'); /* Pastikan path ini benar */
    font-size: 0; /* Sembunyikan ikon panah di dalamnya */
    display: block; /* Pastikan elemen ini terlihat */
       width: 50px; /* PERBAIKAN: Beri lebar agar GIF terlihat */
    height: 50px; /* PERBAIKAN: Beri tinggi agar GIF terlihat */
    background-size: contain;
    background-repeat: no-repeat;
    border-radius:4px;
}
/* PERBAIKAN: Sembunyikan nomor meja khusus untuk stage */
.table-card-wrapper[data-table-number="stage"] .table-number-display {
    display: none;
}

/* GIF untuk KITCHEN (Asumsi menggunakan data-table-number="KITCHEN") */
.table-card-wrapper[data-table-number="KITCHEN"] .table-location-icon {
    background-image: url('../images/icons/kitchen.gif');
}

/* GIF untuk POOL (Asumsi menggunakan data-table-number="POOL") */
.table-card-wrapper[data-table-number="POOL"] .table-location-icon {
    background-image: url('../images/icons/pool.gif');
}

/* GIF untuk SISHA (Asumsi menggunakan data-table-number="SISHA") */
.table-card-wrapper[data-table-number="SISHA"] .table-location-icon {
    background-image: url('../images/icons/sisha.gif');
}