/* ============================================================ PrivSeat — Dark Mode (override ตัวแปรสีของทั้ง classic + luxe) เปิดด้วย class .dark บน ============================================================ */ /* ---------- ตัวแปรสี (classic = ps-, luxe = lx-) ---------- */ html.dark, html.dark body { --ps-cream: #15110c; --ps-cream-2: #1d160f; --ps-bg: #15110c; --ps-surface: #201910; --ps-surface-2: #271f15; --ps-ink: #ECE3D2; --ps-ink-soft: #ADA08D; --ps-line: #3a2f22; --ps-line-soft: #2c2418; --ps-primary-soft: #3a2418; --ps-jade-soft: #16302b; /* ⭐ ตรึงสีหลักเดิมของโหมดมืด (โหมดสว่างเปลี่ยนเป็นส้มสดใน priviseat.css) */ --ps-primary: #F59064; --ps-primary-2: #E6733F; --ps-gold: #C9A96E; } html.dark .lx-body { --lx-cream: #14100b; --lx-cream-2: #1e1810; --lx-paper: #211a12; --lx-ink: #EFE6D4; --lx-ink-soft: #B0A491; --lx-line: #392e21; /* ⭐ ตรึงพาเลตทอง/เทอร์ราเดิมของโหมดมืด — โหมดสว่างเปลี่ยนเป็นส้มแล้ว (:root ใน priviseat-luxe.css) */ --lx-gold: #BE9B5A; --lx-gold-2: #9C7B3E; --lx-gold-soft: #E6D3A6; --lx-terra: #C8531C; --lx-terra-2: #E0703B; } /* ---------- พื้นหลัง / ตัวอักษรพื้นฐาน ---------- */ html.dark body { background: #15110c !important; color: #ECE3D2; } html.dark body.lx-body { background: radial-gradient(1100px 560px at 88% -8%, rgba(190,155,90,.22), transparent 60%), radial-gradient(900px 620px at -10% 14%, rgba(200,83,28,.16), transparent 62%), radial-gradient(1100px 820px at 50% 122%, rgba(190,155,90,.16), transparent 64%), radial-gradient(820px 520px at 50% -6%, rgba(214,182,120,.14), transparent 60%), linear-gradient(180deg, #14100b, #1b1409 55%, #14100b) !important; } /* dark — ลายจุด + ดวงทอง ปรับให้เข้ากับพื้นมืด */ html.dark body.lx-body::before { background-image: radial-gradient(rgba(190,155,90,.14) 1px, transparent 1.5px); opacity: .4; } html.dark body.lx-body::after { background: radial-gradient(460px 460px at 88% -4%, rgba(190,155,90,.26), transparent 64%), radial-gradient(400px 400px at 2% 84%, rgba(200,83,28,.18), transparent 66%), radial-gradient(340px 340px at 74% 82%, rgba(214,182,120,.16), transparent 68%); } /* ---------- การ์ด / พื้นผิวที่ hardcode สีไว้ ---------- */ html.dark .ps-card, html.dark .ps-booking-card, html.dark .ps-sticky-card, html.dark .ps-input, html.dark .ps-input-box { background: #201910 !important; color: #ECE3D2; border-color: #3a2f22 !important; } html.dark .ps-input::placeholder, html.dark .ps-input-box::placeholder { color: #8a7f6e; } /* luxe surfaces ที่ใช้ var อยู่แล้วจะ flip เอง — เก็บตกที่ hardcode */ html.dark .lx-card, html.dark .lx-value, html.dark .lx-meal, html.dark .lx-sticky, html.dark .lx-search, html.dark .lx-chip { background: var(--lx-paper) !important; color: var(--lx-ink); border-color: var(--lx-line) !important; } html.dark .lx-search input { color: var(--lx-ink); } html.dark .lx-chip { color: var(--lx-ink-soft); } /* ⭐ ปุ่มหลัก luxe (ค้นหา / จองทันที) — dark mode พลิก --lx-ink เป็นสีอ่อน ทำให้ปุ่มเดิม (พื้น = --lx-ink) กลายเป็นพื้นอ่อน+ตัวอักษรอ่อน มองไม่เห็น จึงบังคับเป็นปุ่มทองตัวอักษรเข้ม ให้อ่านชัดและเข้าธีม */ html.dark .lx-btn-primary { background: linear-gradient(135deg, var(--lx-gold, #be9b5a), var(--lx-gold-soft, #e6d3a6)); color: #1b140d; } html.dark .lx-btn-primary:hover { background: var(--lx-terra, #c8531c); color: #fff; } /* ⭐ Footer luxe — dark mode พลิก --lx-ink เป็นสีอ่อน ทำให้ footer (พื้น = --lx-ink) กลายเป็นพื้นอ่อน+ตัวอักษรอ่อน มองไม่เห็น จึงบังคับพื้นกลับเป็นโทนมืด */ html.dark .lx-footer { background: #100b06; color: #cebfa6; } html.dark .lx-footer .lx-brand-word { color: #fff; } html.dark .lx-footer-bottom { border-top-color: rgba(190,155,90,.16); } html.dark .lx-chip.active { background: var(--lx-gold) !important; color: #1b140d !important; border-color: var(--lx-gold) !important; } /* ---------- Modal / dropdown / panel ---------- */ html.dark .modal-content { background: #201910; color: #ECE3D2; } html.dark .modal-content .btn-close { filter: invert(1) grayscale(1) brightness(1.4); } html.dark .ps-filter-label, html.dark .ps-filter-group { color: #ECE3D2; border-color: #3a2f22; } html.dark .ps-filter-input, html.dark .form-control, html.dark .form-select { background: #271f15 !important; color: #ECE3D2 !important; border-color: #3a2f22 !important; } html.dark .ps-tod-chip { background: #271f15; color: #cbbfad; border-color: #3a2f22; } html.dark .ps-bell-panel { background: #201910; border-color: #3a2f22; } html.dark .ps-bell-head { color: #ECE3D2; border-color: #3a2f22; } html.dark .ps-bell-item { color: #ECE3D2; border-color: #2c2418; } html.dark .ps-bell-item:hover { background: #271f15; } html.dark .ps-bell-item.unread { background: #2a1f13; } html.dark .ps-bell-bd { color: #ada08d; } html.dark .select2-dropdown, html.dark .select2-results__option { background: #201910 !important; color: #ECE3D2 !important; } html.dark .select2-container--default .select2-selection--single { background: #271f15 !important; border-color: #3a2f22 !important; } html.dark .select2-container--default .select2-selection--single .select2-selection__rendered { color: #ECE3D2 !important; } /* ---------- ปุ่ม fav/share บนการ์ด (พื้นขาว → ไอคอนต้องเข้มเสมอ) ---------- */ html.dark .lx-fab { color: #1a1410; } html.dark .lx-fab.active { color: #fff; } html.dark .ps-hotel-card .ps-share-fab { color: #1a1410; } html.dark .ps-hotel-card .ps-share-fab:hover { color: #fff; } /* ---------- Bottom nav (classic floating pill) ---------- */ html.dark .ps-bottom-nav { background: rgba(32,25,16,.92) !important; border-color: #3a2f22 !important; } html.dark .ps-bottom-nav a { color: #ada08d; } /* ---------- ปุ่มสลับโหมด (โหลดเสมอ) ---------- */ .ps-darktoggle { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ps-line, #e7e0d4); background: transparent; color: #4b3f33; display: grid; place-items: center; cursor: pointer; font-size: 16px; transition: .15s; padding: 0; } .ps-darktoggle:hover { color: var(--ps-primary, #c8531c); border-color: var(--ps-primary, #c8531c); } .lx-body .ps-darktoggle { color: #e8ddc8; border-color: rgba(190,155,90,.4); background: rgba(255,255,255,.05); } .lx-body .ps-darktoggle:hover { background: var(--lx-gold, #be9b5a); color: #1b140d; border-color: var(--lx-gold, #be9b5a); } html.dark .ps-darktoggle { color: #E6D3A6; border-color: #3a2f22; } .ps-darktoggle .bi-sun-fill { display: none; } html.dark .ps-darktoggle .bi-moon-stars-fill { display: none; } html.dark .ps-darktoggle .bi-sun-fill { display: inline-block; color: #E6D3A6; } /* toast / misc */ html.dark .ps-toast { background: #201910; color: #ECE3D2; border-color: #3a2f22; } /* bottom-nav 5 ช่อง — พอดีจอเล็ก (โหลดทั้ง 2 ธีม) */ @media (max-width: 575.98px) { .ps-bottom-nav[style*="--cols: 5"] a { padding: 8px 1px; gap: 2px; } .ps-bottom-nav[style*="--cols: 5"] a span { font-size: 9.5px; } } /* ============================================================ กันจอ "ไหล/กระตุก" ตอนเปิด modal (เช่น ตัวกรองหน้าแรก) — โหลดทั้ง 2 ธีม - scrollbar-gutter: stable → จองพื้นที่ scrollbar ไว้ตลอด ความกว้าง viewport ไม่เปลี่ยน → fixed header / bottom-nav ไม่เลื่อนตอน modal เปิด/ปิด - body.modal-open padding-right:0 → ไม่ให้ bootstrap เติม padding ชดเชย (เพราะจองที่ไว้แล้ว) ============================================================ */ html { scrollbar-gutter: stable; } body.modal-open { padding-right: 0 !important; } .lx-body.modal-open .lx-header, body.modal-open .ps-top-header, body.modal-open .ps-bottom-nav { right: 0 !important; padding-right: 0 !important; } /* ⭐ ตอน modal เปิด: ดึง header/bottom-nav (fixed) ลงต่ำกว่า backdrop(1050)+modal(1055) กันไม่ให้ header ทับส่วนหัว modal จนกดปุ่มปิด (X) ไม่ได้บนมือถือ */ body.modal-open .lx-header, body.modal-open .ps-top-header, body.modal-open .ps-bottom-nav { z-index: 1040 !important; }