/* =========================================================
   HEADER BASE
========================================================= */
.main-header{
  position:relative;
  z-index:999;
  background:#fff;
  transition:box-shadow .25s ease;
}
.main-header.is-sticky{
  position:fixed;
  top:0;left:0;width:100%;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  animation:slideDown .25s ease;
}
body.has-sticky-header{ padding-top:90px; }
@keyframes slideDown{ from{transform:translateY(-100%)} to{transform:translateY(0)} }

.main-header .nav-link,
.main-header .dropdown-toggle{ color:#0a2540; }
.main-header .nav-link:hover,
.main-header .dropdown-toggle:hover{ color:#098cda; }

.dropdown-menu{ z-index:99999 !important; }
.main-header, .header-sticky, .navbar, .navbar-collapse{ overflow:visible !important; }

/* =========================================================
   LANGUAGE SWITCHER (DESKTOP)
========================================================= */
.lang-switcher .dropdown-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #e6eef5;
  background:#fff;
  font-weight:700;
  color:#0a2540;
  transition:.2s ease;
}
/* กัน bootstrap caret ซ้ำ */
.lang-switcher .dropdown-toggle::after{ display:none !important; }
.lang-switcher .dropdown-toggle:hover{
  border-color:#cfe5f6;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  color:#098cda;
}
.lang-switcher svg{ width:16px;height:16px; }
.lang-switcher .dropdown-menu{
  border-radius:14px;
  padding:8px;
  border:1px solid #eee;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.lang-switcher .dropdown-item{
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:10px;
  padding:10px;
}
.lang-switcher .dropdown-item.active{
  background:#f4f8fb;
  color:#098cda;
}
.lang-pill{
  font-size:12px;
  font-weight:800;
  padding:3px 8px;
  border-radius:999px;
  background:#f4f8fb;
  border:1px solid #e6eef5;
}

/* =========================================================
   ✅ PREMIUM MOBILE MENU OVERRIDE
   ครอบคลุมทั้งเมนูใน #menu และ .responsive-menu (ธีม clone)
========================================================= */
 
@media (max-width: 991.98px){

  /* 1) เมนู overlay ทั้งหมด ให้เป็นโทนเดียว อ่านง่าย */
  .responsive-menu,
  .responsive-menu *,
  .slicknav_nav,
  .slicknav_nav *{
    box-shadow: none !important;
  }

  /* 2) ลิงก์เมนูให้เป็นสีขาวชัด (แก้ปัญหาสีกรมบนพื้นเทา) */
  .main-header #menu .nav-link,
  .responsive-menu a,
  .responsive-menu .nav-link,
  .slicknav_nav a{
    color: rgba(255,255,255,.92) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    padding: 14px 18px !important;
    letter-spacing: .2px;
    background: transparent !important;
    border: none !important;
    border-radius: 12px !important;
    margin: 2px 10px !important;
  }

  /* 3) Hover/Active ให้ดู premium */
  .main-header #menu .nav-link:hover,
  .responsive-menu a:hover,
  .slicknav_nav a:hover{
    background: rgba(255,255,255,.08) !important;
    color: #7fd3ff !important;
  }

  /* 4) ยกเลิกเส้นแบ่งแข็ง ๆ (ถ้ามี) */
  .responsive-menu li,
  .slicknav_nav li,
  .main-header #menu .nav-item{
    border: none !important;
  }

  /* 5) ยกเลิกการทำให้ highlighted-menu เด่นกว่าคนอื่นทั้งหมด (ปัญหาที่ทำให้ POS เด่นอยู่คนเดียว) */
  .main-header #menu .nav-item.highlighted-menu .nav-link,
  .responsive-menu .highlighted-menu a,
  .slicknav_nav .highlighted-menu a{
    background: transparent !important;
    color: rgba(255,255,255,.92) !important;
    box-shadow: none !important;
    border: none !important;
  }
  .main-header #menu .nav-item.highlighted-menu .nav-link:hover,
  .responsive-menu .highlighted-menu a:hover,
  .slicknav_nav .highlighted-menu a:hover{
    background: rgba(255,255,255,.08) !important;
    color: #7fd3ff !important;
  }

  /* 6) Language Switcher (Mobile) ให้กลมกลืนกับเมนู */
  .lang-switcher-mobile{
    margin: 14px 10px 10px !important;
    padding-top: 6px !important;
  }
  .lang-switcher-mobile .dropdown-toggle{
    width: calc(100% - 20px);
    margin: 0 10px !important;
    padding: 14px 18px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    background: rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.92) !important;
    font-weight: 800 !important;
  }
  .lang-switcher-mobile .dropdown-toggle:hover{
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(255,255,255,.25) !important;
  }

  .lang-switcher-mobile .lang-pill{
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    color: rgba(255,255,255,.92) !important;
  }

  /* dropdown list ของ language ก็ให้ดู premium */
  .lang-switcher-mobile .dropdown-menu{
    border-radius: 14px !important;
    padding: 8px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 14px 40px rgba(0,0,0,.25) !important;
  }
}


/* =========================================================
   FIX: Language dropdown items become white on white (mobile)
   Only affect language switcher dropdown list
========================================================= */
.lang-switcher .dropdown-menu {
  background: #ffffff !important;
}

.lang-switcher .dropdown-menu .dropdown-item {
  color: #0a2540 !important;
  background: transparent !important;
  font-weight: 700 !important;
}

.lang-switcher .dropdown-menu .dropdown-item:hover {
  background: #f4f8fb !important;
  color: #098cda !important;
}

/* ทำให้ pill ใน dropdown กลับเป็นโทนปกติ */
.lang-switcher .dropdown-menu .lang-pill {
  background: #f4f8fb !important;
  border: 1px solid #e6eef5 !important;
  color: #0a2540 !important;
}

/* ถ้า item active ให้เด่น */
.lang-switcher .dropdown-menu .dropdown-item.active {
  background: #f4f8fb !important;
  color: #098cda !important;
}



/* =========================================================
   MOBILE SWITCHER (ฐาน)
========================================================= */
.lang-switcher-mobile .dropdown-toggle .left{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.lang-switcher-mobile .chev{
  font-size:12px;
  line-height:1;
}
