/*---------- 1. ฟอนต์ Sarabun ----------*/
@import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

html, body {
    font-family: 'Sarabun', sans-serif !important;
    font-size: 14px;
    margin: 0;
    padding: 0;
}

/*---------- 2. การตั้งค่าพื้นหลัง (เปลี่ยนจากสีม่วงเป็นรูปภาพ) ----------*/
#body_index {
    /* เปลี่ยนชื่อไฟล์ภาพที่ urlด้านล่างนี้ */
    background-image: url('../img/01.png') !important; 
    
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: top center !important;
    background-attachment: fixed !important; /* ล็อกรูปให้ไม่เลื่อนตามการ Scroll */
    min-height: 100vh;
}

/*---------- 3. ส่วนจัดการแผนผังที่นั่ง (Seat Map) ----------*/
#map {
    background-color: rgba(251, 216, 214, 0.8); /* ใส่ความโปร่งใสเล็กน้อยเพื่อให้เห็นพื้นหลัง */
}

.seatmap table {
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

#table_work button {
    width: 60px;
    height: 60px;
    padding: 0;
    border-radius: 8px; /* เพิ่มความโค้งมนให้ปุ่ม */
    transition: all 0.3s ease;
}

#table_work button:hover {
    filter: brightness(1.2);
    transform: scale(1.05);
}

/*---------- 4. สถานะของปุ่ม (Status Colors) ----------*/
button.status0 { background-color: #71dd37; border-color: #71dd37; color: #fff; } /* ว่าง */
button.status1 { background-color: #8592a3; border-color: #8592a3; color: #fff; } /* ไม่ว่าง */
button.status2 { background-color: #ffab00; border-color: #ffab00; color: #fff; } /* จอง */
button.status3 { background-color: #696cff; border-color: #696cff; color: #fff; } /* กำลังใช้งาน */
button.status4 { background-color: #ff3e1d; border-color: #ff3e1d; color: #fff; } /* ปิดปรับปรุง */

/* เมื่อเลือกที่นั่ง */
button.select {
    background-image: url('../img/check.png') !important;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #03a9f4 !important;
}
button.select span { display: none; }

/*---------- 5. ส่วนแสดงราคาและ Mobile Responsive ----------*/
.box_pay .money {
    font-size: 24px;
    color: #0086d5;
    background-color: rgba(224, 255, 232, 0.8);
    padding: 10px;
    border-radius: 10px;
}

@media (max-width: 576px) {
    #table_work button {
        width: 32px; /* ปรับขนาดปu่มให้กดง่ายขึ้นในมือถือ */
        height: 32px;
        font-size: 10px;
    }
    
    .box_pay {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #222;
        color: #fff;
        padding: 15px;
        z-index: 1000;
    }
}

/*---------- 6. ปรับแต่งเมนูและ UI อื่นๆ ----------*/
.bg-menu-theme {
    background-color: #28243d !important;
}

.form-control {
    border-radius: 0.375rem;
    border: 1px solid #d4d3d5;
}
/* ===============================
   FIX MOBILE BOX_PAY (วางทับทั้งหมด)
   =============================== */
@media (max-width: 576px) {

    /* ปรับปุ่มโต๊ะให้เล็กพอดี */
    #table_work button {
        width: 32px;
        height: 32px;
        font-size: 10px;
        border-radius: 6px;
    }

    /* กล่องสรุปราคาด้านล่าง */
    .box_pay {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;

        background: #222;
        color: #fff;

        padding: 8px 10px;
    }

    /* ล้างสไตล์การ์ดให้เตี้ย */
    .box_pay .card,
    .box_pay .card-body {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* ข้อความหัวข้อ */
    .box_pay .text1 {
        font-size: 11px;
        margin: 0 0 2px 0;
        opacity: .85;
    }

    /* ข้อความค่า */
    .box_pay .text2 {
        font-size: 12px;
        margin: 0;
        line-height: 1.1;
    }

    /* ราคา */
    .box_pay .money {
        font-size: 16px !important;
        padding: 4px 6px !important;
        border-radius: 8px;
        background-color: rgba(224, 255, 232, .85);
        color: #0086d5;
        display: inline-block;
    }

    /* ปุ่มดำเนินการต่อ */
    .box_pay #btn_add {
        font-size: 13px;
        padding: 6px 12px;
    }

    /* เผื่อพื้นที่ด้านล่าง กัน fixed บังผัง */
    .seatmap-wrapper,
    .table-overflow,
    .container-xxl {
        padding-bottom: 150px !important;
    }
}