/* ========================================================================== MOBILE BOTTOM NAVIGATION (แถบเมนูล่างจอ แบบแอป) - แสดงเฉพาะมือถือ (<=768px) · เดสก์ท็อปใช้เมนูบนเหมือนเดิม - สลับสไตล์ด้วย class บน : bn-a (คลาสสิก) / bn-b (ปุ่มจองกลาง) / bn-c (แถบลอย) - z-index scale ของเว็บ: bottom-nav 900 < sticky-bar 950 < header 1000 ========================================================================== */ .bottom-nav { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid rgba(197, 168, 112, 0.28); padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -2px 18px rgba(80, 64, 40, 0.07); } .bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 50px; padding: 4px 2px; text-decoration: none; color: var(--text-muted); font-size: 10.5px; font-weight: 400; line-height: 1.25; letter-spacing: normal; text-transform: none; position: relative; cursor: pointer; transition: color 0.25s var(--transition-smooth, ease); -webkit-tap-highlight-color: transparent; } .bottom-nav a svg { width: 21px; height: 21px; stroke-width: 1.7; transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1); } .bottom-nav a.active { color: var(--color-gold-dark); font-weight: 500; } .bottom-nav a:active svg { transform: scale(0.9); } .bottom-nav a:focus-visible { outline: 2px solid var(--color-gold); outline-offset: -3px; border-radius: 10px; } /* ── แบบ A: ขีดทองเหนือเมนูที่อยู่ ───────────────────────────────── */ body.bn-a .bottom-nav a.active::before { content: ''; position: absolute; top: 0; width: 26px; height: 2.5px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light)); } /* ── แบบ B: ปุ่มจองวงกลมยกขึ้นกลางแถบ ────────────────────────────── */ body.bn-b .bottom-nav .bnav-fab { flex: 0 0 auto; margin-top: -26px; } body.bn-b .bottom-nav .bnav-fab .bnav-circle { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--color-gold-dark), var(--color-gold)); display: flex; align-items: center; justify-content: center; color: #fff; border: 3px solid #fff; box-shadow: 0 6px 18px rgba(197, 168, 112, 0.45); transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1); } body.bn-b .bottom-nav .bnav-fab .bnav-circle svg { width: 23px; height: 23px; stroke-width: 1.9; } body.bn-b .bottom-nav .bnav-fab:active .bnav-circle { transform: scale(0.94); } body.bn-b .bottom-nav .bnav-fab .bnav-label { margin-top: 3px; color: var(--color-gold-dark); font-weight: 500; } /* แบบ B ซ่อนเมนู "ห้องพัก" ปกติ เพราะปุ่มกลางทำหน้าที่แทน */ body.bn-b .bottom-nav .bnav-rooms { display: none; } /* ── แบบ C: แถบลอยขอบมน ─────────────────────────────────────────── */ body.bn-c .bottom-nav { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); border-radius: 20px; border: 1px solid rgba(197, 168, 112, 0.3); box-shadow: 0 8px 24px rgba(80, 64, 40, 0.16); padding: 6px 4px; } body.bn-c .bottom-nav a.active { color: #fff; } body.bn-c .bottom-nav a.active .bnav-pill { position: absolute; inset: 4px 6px; border-radius: 14px; z-index: -1; background: linear-gradient(135deg, var(--color-gold-dark), var(--color-gold)); } /* ── เปิดใช้เฉพาะมือถือ + จัดของอื่นให้หลบ ───────────────────────── */ @media (max-width: 768px) { .bottom-nav { display: flex; align-items: stretch; justify-content: space-around; } /* กันเนื้อหาท้ายหน้าถูกแถบบัง */ body { padding-bottom: 68px; } body.bn-c { padding-bottom: 80px; } /* ปุ่มลอยจอง LINE ซ้ำหน้าที่กับแถบล่างแล้ว — ซ่อนบนมือถือ */ .floating-booking-hub { display: none !important; } /* ปุ่มกลับขึ้นบน + แถบจองของหน้าห้อง ต้องอยู่เหนือแถบเมนู */ .back-to-top-btn { bottom: calc(80px + env(safe-area-inset-bottom)) !important; } .room-sticky-bar { bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 950; } body.bn-c .room-sticky-bar { bottom: calc(100px + env(safe-area-inset-bottom)); } body.bn-c .back-to-top-btn { bottom: calc(116px + env(safe-area-inset-bottom)) !important; } /* หน้าห้องมีแถบจองอยู่แล้ว ต้องเผื่อที่ทั้งสองแถบ */ body.has-sticky-bar { padding-bottom: 132px; } } @media (prefers-reduced-motion: reduce) { .bottom-nav a svg, body.bn-b .bottom-nav .bnav-fab .bnav-circle { transition: none; } }