/* ===== FAB Menu (Floating Action Button) ===== */
.nav-toggle{
  position:fixed;
  bottom:24px;
  right:24px;
  width:56px;
  height:56px;
  background:linear-gradient(135deg, var(--brand, #513A1E), var(--secondary, #BB762A));
  color:#fff;
  border:0;
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.15);
  z-index:998;
  transition:all .3s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  /* Ensure button is visible and clickable */
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}
.nav-toggle:hover{
  transform:scale(1.1);
  box-shadow:0 6px 20px rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.2);
}
.nav-toggle:active{
  transform:scale(0.95);
}
.nav-burger, .nav-burger::before, .nav-burger::after{
  content:"";
  display:block;
  width:24px;
  height:3px;
  background:#fff;
  border-radius:3px;
  transition:all .3s ease;
}
.nav-burger::before{ margin-top:-8px }
.nav-burger::after{ margin-top:5px }

/* Animation เมื่อเปิดเมนู */
.nav-toggle[aria-expanded="true"] .nav-burger{
  background:transparent;
}
.nav-toggle[aria-expanded="true"] .nav-burger::before{
  transform:rotate(45deg);
  margin-top:0;
}
.nav-toggle[aria-expanded="true"] .nav-burger::after{
  transform:rotate(-45deg);
  margin-top:-3px;
}

/* ปุ่ม FAB ใน header - ซ่อนบนเดสก์ท็อป */
.brand .nav-toggle{
  display:none !important;
}

/* Force show FAB on mobile devices - fallback */
@media screen and (max-width: 1024px){
  .brand .nav-toggle{
    display:flex !important;
    position:fixed !important;
    bottom:24px !important;
    right:24px !important;
    z-index:998 !important;
    visibility:visible !important;
    opacity:1 !important;
  }
}

/* ===== Drawer (popup from FAB) ===== */
.drawer{ position:fixed; inset:0; z-index:999; pointer-events:none; }
.drawer__panel{
  z-index: 1001;
  position:fixed;
  bottom:90px;
  right:24px;
  width:min(90vw, 320px);
  max-height:calc(100vh - 120px);
  background:rgba(81,58,30,0.98);
  backdrop-filter:blur(10px);
  color:#fff;
  border-radius:20px;
  box-shadow:0 8px 32px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.15);
  padding:48px 16px 20px 16px;
  transform:translateY(100%) scale(0.9);
  opacity:0;
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.drawer__backdrop{
  z-index: 1000;
  position:absolute; inset:0; background:rgba(0,0,0,.4);
  opacity:0; transition:opacity .25s ease;
}
.drawer.open{ pointer-events:auto; }
.drawer.open .drawer__panel{ 
  transform:translateY(0) scale(1);
  opacity:1;
}
.drawer.open .drawer__backdrop{ opacity:1; }

.drawer__close{
  display:none !important;
}

/* รายการเมนูใน drawer */
.drawer__nav{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.drawer__nav a, .drawer__muted{
  pointer-events: auto;
  display:flex; 
  align-items:center; 
  gap:12px;
  padding:14px 16px;
  border-radius:12px;
  text-transform:uppercase; 
  letter-spacing:.5px; 
  font-weight:600;
  font-size:12px;
  color:#fff; 
  text-decoration:none;
  transition:all .2s ease;
  background:rgba(255,255,255,.05);
}
.drawer__nav a::before{
  content:"→"; 
  width:20px; 
  text-align:center; 
  color:#FCB017; 
  font-weight:700;
  font-size:16px;
  transition:transform .2s ease;
}
.drawer__nav a:hover{ 
  background:rgba(252,176,23,.2);
  color:#fff;
  transform:translateX(4px);
}
.drawer__nav a:hover::before{
  transform:translateX(4px);
}
.drawer__nav a.active, .drawer__nav a[aria-current="page"]{
  background:rgba(252,176,23,.3);
  color:#fff;
}
.drawer__nav a.active::before, .drawer__nav a[aria-current="page"]::before{
  content:"✓"; 
  color:#FCB017;
}
.drawer__muted{ 
  color:rgba(255,255,255,.6); 
  cursor:default;
  background:transparent !important;
}

/* ซ่อนเมนูเดสก์ท็อปบนจอเล็ก + แสดงปุ่ม FAB */
/* รองรับทุกขนาดหน้าจอมือถือ */
@media screen and (max-width: 1024px){
  .menu-desktop{ display:none !important; }
  .nav-inner{ position:relative; padding:6px 8px; }
  /* ปุ่ม nav-toggle ใน nav bar (เก่า) - ซ่อน */
  .nav-inner .nav-toggle{ display:none !important; }
  /* แสดงปุ่ม FAB เมื่อจอเล็ก - ใช้ !important เพื่อ override ทุกอย่าง */
  .brand .nav-toggle{ 
    display:flex !important;
    position:fixed !important;
    bottom:24px !important;
    right:24px !important;
    z-index:998 !important;
    visibility:visible !important;
    opacity:1 !important;
    width:56px !important;
    height:56px !important;
  }
}

/* Tablet และมือถือขนาดใหญ่ (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 481px){
  .brand .nav-toggle{
    width:56px;
    height:56px;
    bottom:24px;
    right:24px;
  }
  .drawer__panel{
    bottom:90px;
    right:24px;
    width:min(90vw, 320px);
    max-height:calc(100vh - 120px);
  }
}

/* มือถือขนาดกลาง (481px - 768px) */
@media (max-width: 768px) and (min-width: 481px){
  .brand .nav-toggle{
    width:54px;
    height:54px;
    bottom:22px;
    right:22px;
  }
  .drawer__panel{
    bottom:85px;
    right:22px;
    width:min(88vw, 300px);
    max-height:calc(100vh - 110px);
  }
}

/* มือถือขนาดเล็ก (360px - 480px) */
@media (max-width: 480px) and (min-width: 361px){
  .brand .nav-toggle{
    bottom:20px;
    right:20px;
    width:52px;
    height:52px;
  }
  .drawer__panel{
    bottom:80px;
    right:20px;
    left:20px;
    width:auto;
    max-height:calc(100vh - 100px);
  }
}

/* มือถือขนาดเล็กมาก (< 360px) */
@media (max-width: 360px){
  .brand .nav-toggle{
    bottom:16px;
    right:16px;
    width:48px;
    height:48px;
  }
  .drawer__panel{
    bottom:72px;
    right:16px;
    left:16px;
    width:auto;
    max-height:calc(100vh - 90px);
    padding:40px 12px 16px 12px;
  }
  .drawer__nav a{
    padding:12px 14px;
    font-size:11px;
  }
}

/* Landscape mode สำหรับมือถือ */
@media (max-width: 1024px) and (orientation: landscape){
  .brand .nav-toggle{
    bottom:16px;
    right:16px;
  }
  .drawer__panel{
    bottom:80px;
    right:16px;
    max-height:calc(100vh - 100px);
  }
}

/* Touch device optimization */
@media (hover: none) and (pointer: coarse){
  .nav-toggle{
    /* เพิ่มขนาดพื้นที่กดสำหรับ touch */
    min-width:44px;
    min-height:44px;
  }
  /* Force show FAB on touch devices */
  .brand .nav-toggle{
    display:flex !important;
    position:fixed !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  .drawer__nav a{
    /* เพิ่มขนาดพื้นที่กดสำหรับ touch */
    min-height:44px;
    padding:14px 16px;
  }
  .drawer__close{
    min-width:44px;
    min-height:44px;
  }
}

/* Additional fallback for mobile devices */
@media only screen and (max-device-width: 1024px){
  .brand .nav-toggle{
    display:flex !important;
    position:fixed !important;
    visibility:visible !important;
    opacity:1 !important;
  }
}

/* ล็อกสกอร์ลตอนเปิด drawer */
body.no-scroll{ overflow:hidden; }

/* z-index และ pointer สำหรับคลาสที่ใช้งานจริง */
/* .drawer { z-index: 1001; } 
.drawer__backdrop { z-index: 1000; } 
.drawer__nav a { pointer-events: auto; }*/