* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", "Tahoma", "Noto Sans Thai", sans-serif;
    background: #f5f6f8;
    color: #222;
}

.page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

/* ===== เมนูนำทางหลัก =====
   จอเล็ก (ค่าเริ่มต้น < 640px คือขนาดที่ใช้งานจริงผ่าน LINE LIFF): แถวเดียว โลโก้ | ปุ่มแฮมเบอร์เกอร์ | โปรไฟล์ LINE
     เมนูยุบเป็น dropdown (.nav-menu) กดปุ่ม (.site-burger) เปิด/ปิด (เดิมเป็นแถบเลื่อนแนวนอน เปลี่ยนมาใช้แบบนี้
     เพราะรายการเมนูยาว/หลายอันเลื่อนดูรกและซ่อนเมนูท้าย ๆ ไม่ให้เห็น — ดู includes/header.php สำหรับ markup/JS toggle)
   จอกว้างขึ้น (>= 640px แต่ยังต่ำกว่า 900px ที่โดน desktop gate กันไว้): กลับเป็นแถวเดียวธรรมดา โลโก้ | เมนู | โปรไฟล์
     ไม่มีปุ่มแฮมเบอร์เกอร์ (เมนูเห็นครบพอดีแถวเดียวไม่ต้องยุบ) */
.site-nav {
    position: relative;
    background: #17181c;
}

.site-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand {
    order: 1;
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .5px;
    text-decoration: none;
    white-space: nowrap;
}

/* ---------- ปุ่มแฮมเบอร์เกอร์ (เฉพาะจอเล็กกว่า 640px) ---------- */
.site-burger {
    display: flex;
    order: 2;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 0;
    margin-left: auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .04);
    cursor: pointer;
    flex-shrink: 0;
}

.site-burger span {
    display: block;
    width: 17px;
    height: 2px;
    border-radius: 2px;
    background: #e7e8ec;
    transition: transform .2s ease, opacity .2s ease;
}

.site-burger.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.site-burger.is-active span:nth-child(2) {
    opacity: 0;
}

.site-burger.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.nav-menu {
    order: 4;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 10px 16px 16px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(17, 18, 22, .98);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height .25s ease, opacity .2s ease;
}

.nav-menu.is-open {
    max-height: 320px;
    opacity: 1;
    pointer-events: auto;
}

.nav-link {
    display: block;
    padding: 12px 14px;
    border-radius: 8px;
    color: #c9cad0;
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.nav-link:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}

/* กล่องโปรไฟล์ LINE ตอนนี้อยู่ใน <li> ท้ายสุดของเมนู (#navMenu) — จอเล็ก (dropdown แนวตั้ง) คั่นด้วยเส้นบาง ๆ
   ด้านบนแยกจากลิงก์เมนู, จอ >= 640px (เมนูเป็นแถวนอน) ดันไปชิดขวาสุดด้วย margin-left: auto แทน */
.nav-menu-profile {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

@media (min-width: 640px) {
    .site-burger {
        display: none;
    }

    .nav-menu {
        order: 2;
        position: static;
        flex-direction: row;
        align-items: center;
        flex: 0 1 auto;
        gap: 4px;
        margin: 0 auto;
        padding: 0;
        background: transparent;
        border-bottom: none;
        max-height: none;
        overflow: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .nav-menu-profile {
        margin-top: 0;
        margin-left: auto;
        padding-top: 0;
        border-top: none;
    }

    .nav-link {
        padding: 8px 14px;
        border-radius: 999px;
    }
}

/* ===== แถบโปรไฟล์ LINE (ดึงจาก LIFF ทุกหน้า ดู assets/liff-profile.js) ===== */
.liff-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    font-size: 13px;
    color: #e7e8ec;
    white-space: nowrap;
}

.liff-profile.is-mock {
    background: rgba(239, 197, 63, .14);
    color: #EFC53F;
}

.liff-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    background: #444;
    flex-shrink: 0;
}

.liff-avatar-fallback {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #06C755, #048c3b);
    flex-shrink: 0;
}

.liff-profile.is-mock .liff-avatar-fallback {
    background: linear-gradient(135deg, #EFC53F, #b5911c);
    color: #4a3b00;
}

.liff-name {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 640px) {
    .liff-name {
        max-width: 140px;
    }
}

.nav-link.active {
    background: #fff;
    color: #111;
    font-weight: 600;
}

/* ===== การ์ดเมนูหน้าแรก ===== */
.hero {
    text-align: center;
    padding: 8px 16px;
}

.hero h1 {
    font-size: 26px;
    margin-bottom: 8px;
}

.hero p {
    color: #666;
    font-size: 14px;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    margin: 28px 0 8px;
}

.menu-card {
    display: block;
    background: #fff;
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    text-decoration: none;
    color: #222;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    transition: transform .15s ease, box-shadow .15s ease;
}

.menu-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.menu-card .icon {
    font-size: 34px;
    display: block;
    margin-bottom: 12px;
}

.menu-card .title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.menu-card .desc {
    font-size: 13px;
    color: #777;
}

/* ===== เมนูอาหาร ===== */
.food-section {
    margin-bottom: 28px;
}

.food-section h2 {
    font-size: 18px;
    border-bottom: 2px solid #eee;
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.food-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.food-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.food-item .name {
    flex: 1;
    font-size: 14px;
}

.food-item.food-item-noimg .name {
    flex: 1;
}

.food-item .name small {
    display: block;
    color: #888;
    font-size: 12px;
}

.food-item .price {
    font-weight: 600;
    color: #C51927;
    white-space: nowrap;
}

.food-item-thumb-wrap {
    flex-shrink: 0;
}

.food-item-thumb {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    background: #f0f0f0;
}

.food-item-thumb.is-blurred {
    filter: blur(6px);
}

.food-item-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.food-empty {
    text-align: center;
    color: #888;
    padding: 40px 16px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* ===== ฟอร์ม mockup (คอนเสิร์ท / ขอเพลง) ===== */
.mock-card {
    max-width: 560px;
    margin: 0 auto;
    background: #fff;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

.form-field {
    margin-bottom: 16px;
}

.form-field label {
    display: block;
    font-size: 13px;
    color: #444;
    margin-bottom: 6px;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
}

.form-field textarea {
    resize: vertical;
    min-height: 80px;
}

.btn-primary {
    display: inline-block;
    background: #C51927;
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary:hover {
    background: #a5141f;
}

/* ===== หน้า "ดึงข้อมูล LINE ไม่ได้" (line-error/index.php) =====
   ใช้ .line-error-wrap แทน .page เพราะ .page ถูกซ่อนตอนจอ >= 900px (desktop gate) — หน้านี้ต้องเห็นได้ทุกขนาดจอ */
.line-error-wrap {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    box-sizing: border-box;
    overflow: hidden;
    background: linear-gradient(160deg, #1d1e24 0%, #0d0e12 100%);
}

/* แสงเรือง brand สีแดงด้านหลังการ์ด */
.line-error-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 420px;
    height: 420px;
    transform: translate(-50%, -60%);
    background: radial-gradient(circle, rgba(197, 25, 39, .45) 0%, rgba(197, 25, 39, 0) 70%);
    pointer-events: none;
}

.line-error-card {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: 22px;
    padding: 30px 24px 24px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    animation: line-error-in .45s ease-out both;
}

@keyframes line-error-in {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.line-error-brand {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    color: #9a9ca3;
    margin-bottom: 20px;
}

.line-error-icon {
    position: relative;
    width: 76px;
    height: 76px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(145deg, #e0303f, #a5141f);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(197, 25, 39, .35);
}

/* วงแหวนกระเพื่อมรอบไอคอน */
.line-error-icon::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(197, 25, 39, .35);
    animation: line-error-pulse 2s ease-out infinite;
}

@keyframes line-error-pulse {
    0%   { transform: scale(.9); opacity: 1; }
    100% { transform: scale(1.25); opacity: 0; }
}

.line-error-card h1 {
    margin: 0 0 8px;
    font-size: 21px;
    color: #17181c;
}

.line-error-message {
    margin: 0 0 18px;
    color: #555;
    font-size: 14px;
    line-height: 1.6;
}

.line-error-tips {
    list-style: none;
    margin: 0 0 22px;
    padding: 14px 16px;
    background: #f5f6f8;
    border-radius: 12px;
    text-align: left;
}

.line-error-tips li {
    position: relative;
    padding-left: 22px;
    font-size: 13px;
    color: #444;
    line-height: 1.5;
}

.line-error-tips li + li {
    margin-top: 6px;
}

.line-error-tips li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #C51927;
}

.line-error-retry {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 20px;
    border-radius: 12px;
    background: linear-gradient(145deg, #d42232, #a5141f);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(197, 25, 39, .3);
    transition: transform .15s ease, box-shadow .15s ease;
}

.line-error-retry:active {
    transform: scale(.97);
    box-shadow: 0 4px 10px rgba(197, 25, 39, .3);
}

.line-error-retry.is-loading {
    opacity: .85;
    pointer-events: none;
}

.line-error-retry.is-loading .line-error-retry-icon {
    animation: line-error-spin .8s linear infinite;
}

@keyframes line-error-spin {
    to { transform: rotate(360deg); }
}

.line-error-home {
    display: inline-block;
    margin-top: 14px;
    font-size: 13px;
    color: #888;
    text-decoration: none;
}

.line-error-home:hover {
    color: #C51927;
}

@media (prefers-reduced-motion: reduce) {
    .line-error-card,
    .line-error-icon::after,
    .line-error-retry.is-loading .line-error-retry-icon {
        animation: none;
    }
}

.screen-preview {
    margin-top: 22px;
    background: #111;
    color: #fff;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

.screen-preview .label {
    font-size: 11px;
    letter-spacing: 1px;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.screen-preview .now-playing {
    font-size: 18px;
    font-weight: 600;
}

.badge-soon {
    display: inline-block;
    background: #EFC53F;
    color: #4a3b00;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 12px;
}

h1 {
    text-align: center;
    font-size: 22px;
    margin-bottom: 16px;
}

/* ช่องเลือกวันที่ (ใช้กับ assets/datepicker.js เช่นที่ reservation/index.php เลือกวันที่จองล่วงหน้า) */
.date-field {
    max-width: 260px;
    margin: 0 auto 20px;
}

.date-field label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
    text-align: center;
}

.date-input-wrap {
    position: relative;
}

.date-input-wrap .date-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    pointer-events: none;
}

.date-field input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 14px;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
}

.date-field input:focus {
    outline: none;
    border-color: #C51927;
    box-shadow: 0 0 0 3px rgba(197, 25, 39, .15);
}

/* ป้ายโปรโมทอีเว้น — โชว์เฉพาะวันที่มี events.event_date ตรงกับวันที่เลือกใน reservation/index.php
   ลิงก์ไปหน้า concert-booking/ ทั้งกล่อง (ไม่ใช่แค่ปุ่มด้านใน) */
.event-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1100px;
    margin: 0 auto 20px;
    padding: 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, #C51927, #7d0f18);
    box-shadow: 0 8px 20px rgba(197, 25, 39, .3);
    text-decoration: none;
    color: #fff;
    transition: transform .15s ease, box-shadow .15s ease;
}

.event-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(197, 25, 39, .4);
}

.event-banner-img {
    width: 64px;
    height: 64px;
    border-radius: 9px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

.event-banner-body {
    min-width: 0;
    flex: 1;
}

.event-banner-tag {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .3px;
    background: rgba(255, 255, 255, .18);
    padding: 3px 9px;
    border-radius: 999px;
    margin-bottom: 6px;
}

.event-banner-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-banner-desc {
    margin: 0 0 8px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .85);
    line-height: 1.5;
}

.event-banner-btn {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    background: #fff;
    color: #C51927;
    padding: 6px 14px;
    border-radius: 999px;
}

/* ข้อความแจ้งงดจองโต๊ะปกติ (โชว์แทนผังโต๊ะทั้งหมด เฉพาะวันที่มีอีเว้น — ดู .event-banner ด้านบน) */
.event-block-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px;
    border-radius: 10px;
    background: #fdf1f1;
    border: 1px solid #f3c9c9;
    color: #8a1f1f;
    font-size: 13.5px;
    line-height: 1.6;
}

.event-block-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.event-block-notice p {
    margin: 0;
}

/* ลิงก์ย้อนกลับทั่วไป (เช่น "← กลับไปเลือกอีเว้นอื่น" ใน concert-booking/index.php) */
.back-link {
    color: #C51927;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.back-link:hover {
    text-decoration: underline;
}

/* รายการอีเว้น (concert-booking/index.php ตอนยังไม่เลือกอีเว้น — ?event_id= ว่าง) */
.concert-event-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 700px;
    margin: 0 auto 24px;
}

.concert-event-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    border: 1px solid #eee;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.concert-event-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .12);
    border-color: #C51927;
}

.concert-event-card-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    flex-shrink: 0;
}

.concert-event-card-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f6f8;
    font-size: 40px;
}

.concert-event-card-body {
    min-width: 0;
    flex: 1;
    padding: 14px;
}

.concert-event-card-title {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.concert-event-card-date {
    font-size: 12.5px;
    color: #666;
    margin-bottom: 6px;
}

.concert-event-card-desc {
    margin: 0 0 8px;
    font-size: 12px;
    color: #888;
    line-height: 1.5;
}

.concert-event-card-btn {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    color: #C51927;
}

.concert-event-empty {
    max-width: 460px;
    margin: 0 auto;
    text-align: center;
    padding: 48px 24px;
    color: #888;
    background: #fff;
    border: 1px dashed #ddd;
    border-radius: 16px;
}

.concert-event-empty span {
    font-size: 46px;
    display: block;
    margin-bottom: 14px;
}

.concert-event-empty p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

/* ฟอร์ม "ข้อมูลติดต่อ" ใน SweetAlert2 ตอนคลิกจองโต๊ะ (reservation/index.php, assets/reservation-booking.js) */
.res-booking-summary {
    display: flex;
    justify-content: center;
    gap: 18px;
    background: #f7f0dc;
    border: 1px solid #e8dcb8;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 600;
    color: #7a4a1a;
}

.res-booking-form {
    text-align: left;
}

.res-booking-form label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #6b6d78;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin: 12px 0 5px;
}

.res-booking-form label:first-of-type {
    margin-top: 0;
}

.res-optional {
    text-transform: none;
    font-weight: 400;
    color: #999;
}

.res-booking-form input,
.res-booking-form textarea {
    width: 100%;
    padding: 9px 11px;
    border-radius: 8px;
    border: 1px solid #d8d9de;
    font-size: 13.5px;
    font-family: inherit;
    box-sizing: border-box;
}

.res-booking-form input:focus,
.res-booking-form textarea:focus {
    outline: none;
    border-color: #C51927;
    box-shadow: 0 0 0 3px rgba(197, 25, 39, .12);
}

/* หน้าชำระเงิน (concert-booking/pay/index.php, assets/concert-payment.js) */
.pay-loading {
    text-align: center;
    color: #888;
    padding: 40px 20px;
}

.pay-section-title {
    font-size: 15px;
    margin: 24px 0 10px;
    text-align: center;
}

/* การ์ดสรุปการจอง (ticket) แสดงบนสุดของหน้าชำระเงิน */
.pay-summary-card {
    max-width: 420px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #C51927, #7a0f18);
    color: #fff;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 10px 26px rgba(197, 25, 39, .25);
    box-sizing: border-box;
}

.pay-summary-title {
    margin: 0 0 12px;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: break-word;
}

.pay-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
}

.pay-summary-item-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    opacity: .75;
    margin-bottom: 2px;
}

.pay-summary-item-value {
    font-size: 13.5px;
    font-weight: 600;
    overflow-wrap: break-word;
}

.pay-summary-price {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .25);
    font-size: 13.5px;
}

.pay-summary-price strong {
    font-size: 17px;
}

/* การ์ดบัญชีสำหรับโอนเงิน */
.pay-bank-card {
    max-width: 420px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 20px 18px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
    text-align: center;
    box-sizing: border-box;
}

.pay-bank-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.pay-bank-logo {
    height: 46px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

.pay-bank-name {
    font-size: 15px;
    font-weight: 700;
    color: #232323;
    overflow-wrap: break-word;
    max-width: 100%;
}

.pay-bank-account {
    background: #f7f0dc;
    border: 1px dashed #e0c98a;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
}

.pay-bank-account-number {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #7a4a1a;
    margin-bottom: 10px;
    word-break: break-all;
}

.pay-bank-copy-btn {
    border: 1px solid #C51927;
    background: #fff;
    color: #C51927;
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.pay-bank-copy-btn:hover {
    background: #C51927;
    color: #fff;
}

.pay-bank-account-name {
    font-size: 13px;
    color: #666;
    overflow-wrap: break-word;
}

.pay-bank-empty {
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
    color: #8a1f1f;
    background: #fdf1f1;
    border: 1px solid #f3c9c9;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.6;
}

.pay-slip-form {
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
}

.pay-slip-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 30px 16px;
    margin-bottom: 14px;
    border: 2px dashed #d8b98a;
    border-radius: 14px;
    background: #fffaf0;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.pay-slip-dropzone:hover,
.pay-slip-dropzone:active {
    background: #fdf3de;
    border-color: #C51927;
}

.pay-slip-dropzone-icon {
    font-size: 30px;
    margin-bottom: 4px;
}

.pay-slip-dropzone-text {
    font-size: 14px;
    font-weight: 700;
    color: #7a4a1a;
}

.pay-slip-dropzone-hint {
    font-size: 11.5px;
    color: #a08a5e;
}

.pay-slip-preview {
    margin-bottom: 14px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #eee;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

.pay-slip-preview img {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    background: #f5f6f8;
}

.pay-slip-change-btn {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: none;
    border-top: 1px solid #eee;
    background: #fafafa;
    color: #555;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.pay-slip-change-btn:hover {
    background: #f2f2f2;
}

.pay-submit-btn {
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-radius: 9px;
    background: linear-gradient(135deg, #C51927, #9c141f);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(197, 25, 39, .3);
}

.pay-submit-btn:hover {
    filter: brightness(1.08);
}

.pay-status-message {
    max-width: 420px;
    margin: 20px auto 0;
    text-align: center;
    padding: 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
}

.pay-status-error {
    background: #fdf1f1;
    color: #8a1f1f;
    border: 1px solid #f3c9c9;
}

.pay-status-success {
    background: #eafaf0;
    color: #1c7a3f;
    border: 1px solid #b8ecc8;
}

.pay-status-cancel {
    background: #f5f6f8;
    color: #666;
    border: 1px solid #ddd;
}

.pay-status-pending {
    background: #fff9e8;
    color: #8a6d1f;
    border: 1px solid #f3e3b0;
}

/* .legend, .floorplan-wrap, .hotspot ฯลฯ ย้ายไปอยู่ assets/floorplan.css แล้ว
   (ใช้ร่วมกับ backoffice/events/detail/ ด้วย — ต้อง <link> ไฟล์นั้นเพิ่มในหน้าที่มีผังที่นั่ง)
   .hint ยังอยู่ที่นี่เหมือนเดิมเพราะเป็น utility ทั่วไป ใช้ในหน้าอื่นที่ไม่มีผังด้วย (เช่น food-menu/) */
.hint {
    text-align: center;
    color: #666;
    font-size: 13px;
    margin-top: 14px;
}

/* ===== Desktop gate =====
   เว็บหลักออกแบบมาให้ใช้งานผ่าน LINE LIFF บนมือถือเท่านั้น
   จอใหญ่ (>= 900px) ให้ซ่อนเนื้อหาเว็บทั้งหมดแล้วโชว์กล่องนี้แทน (โลโก้ mockup + QR เพิ่มเพื่อน LINE OA)
   ลิงก์ LINE OA ตั้งค่าได้ที่ backoffice > ตั้งค่า เก็บใน DB (ตาราง app_settings)
   ดู assets/desktop-gate.js สำหรับ logic ดึงลิงก์มาสร้าง QR */
.desktop-gate {
    display: none;
}

@media (min-width: 900px) {
    .site-nav,
    .page {
        display: none !important;
    }

    .desktop-gate {
        display: flex;
        position: fixed;
        inset: 0;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #17181c, #0d0e12);
        padding: 24px;
        z-index: 999;
    }

    /* ยกเว้น: จอใหญ่ที่มี LINE ID จริงอยู่แล้ว (เช่น เคย login ผ่าน LIFF ไว้ในเบราว์เซอร์เดียวกันมาก่อน)
       assets/liff-profile.js จะเช็คแบบไม่บังคับ login (กัน redirect รบกวนคนทั่วไปที่เปิดจอใหญ่ปกติ) แล้วเติมคลาสนี้ให้ที่ <html>
       ถ้าเจอ LINE ID จริง — ปล่อยให้เห็นเนื้อหาเว็บแทนกล่อง QR (มี flash กล่อง QR แว๊บแรกก่อน JS ตัดสินใจเสร็จ ยอมรับได้
       เพราะเป็น edge case ไม่ใช่พฤติกรรมหลัก) */
    html.liff-desktop-authed .site-nav,
    html.liff-desktop-authed .page {
        display: block !important;
    }

    html.liff-desktop-authed .desktop-gate {
        display: none !important;
    }
}

.desktop-gate-card {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: 20px;
    padding: 40px 32px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.desktop-gate-badge {
    display: inline-block;
    background: #EFC53F;
    color: #4a3b00;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.desktop-gate-logo {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, #C51927, #7d0f18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: .5px;
    box-shadow: 0 10px 24px rgba(197, 25, 39, .35);
}

.desktop-gate h1 {
    font-size: 19px;
    margin: 0 0 8px;
    color: #17181c;
    text-align: center;
}

.desktop-gate p {
    font-size: 13.5px;
    color: #666;
    margin: 0 0 20px;
    line-height: 1.6;
}

.desktop-gate-qr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 190px;
    height: 190px;
    margin: 0 auto 18px;
    padding: 10px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
}

.desktop-gate-qr img,
.desktop-gate-qr canvas,
.desktop-gate-qr table {
    max-width: 100%;
}

.desktop-gate-qr-empty {
    font-size: 12px;
    color: #999;
    line-height: 1.6;
}

.desktop-gate p.desktop-gate-hint {
    font-size: 12px;
    color: #999;
    word-break: break-all;
    margin: 0;
}