/* =========================================================
   VELAEA CENTER - Premium Language Selector
   Compact Header + Responsive + SVG Flags
   วางทับ: assets/css/language.css
========================================================= */

.language-switcher{
  position:relative;
  z-index:120;
  display:inline-flex;
  align-items:center;
}

/* ---------- Trigger Button ---------- */
.lang-trigger{
  height:42px;
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 12px;
  border:1px solid rgba(214,178,94,.45);
  border-radius:14px;
  background:rgba(255,255,255,.76);
  color:#0b1424;
  font-weight:900;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  box-shadow:
    0 14px 30px rgba(10,20,40,.08),
    inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.lang-trigger:hover{
  transform:translateY(-1px);
  border-color:rgba(214,178,94,.8);
  box-shadow:
    0 16px 36px rgba(10,20,40,.12),
    0 0 0 4px rgba(214,178,94,.10),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.lang-trigger[aria-expanded="true"]{
  border-color:rgba(214,178,94,.95);
  box-shadow:
    0 16px 38px rgba(10,20,40,.14),
    0 0 0 5px rgba(214,178,94,.12);
}

.lang-current-text{
  max-width:92px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:13px;
  font-weight:900;
}

.lang-chevron{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  color:#b98419;
  font-size:13px;
  transition:transform .22s ease;
}

.lang-trigger[aria-expanded="true"] .lang-chevron{
  transform:rotate(180deg);
}

/* ---------- Flag Images ---------- */
.lang-current-flag,
.lang-option-flag{
  width:26px;
  height:26px;
  border-radius:999px;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background:rgba(255,255,255,.76);
  box-shadow:0 8px 18px rgba(10,20,40,.08);
}

.lang-current-img,
.lang-flag-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.lang-current-flag.flag-fallback::before,
.lang-option-flag.flag-fallback::before{
  content:attr(data-fallback);
  font-size:11px;
  font-weight:900;
  color:#0b1424;
}

/* ---------- Backdrop ---------- */
.lang-backdrop{
  position:fixed;
  inset:0;
  z-index:998;
  background:rgba(4,10,20,.22);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}

.lang-backdrop.open{
  opacity:1;
  pointer-events:auto;
}

/* ---------- Panel ---------- */
.lang-panel{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  z-index:999;
  width:min(720px, calc(100vw - 32px));
  padding:20px;
  border:1px solid rgba(214,178,94,.42);
  border-radius:26px;
  background:
    radial-gradient(circle at 14% 0%, rgba(214,178,94,.16), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90));
  color:#0b1424;
  box-shadow:
    0 34px 90px rgba(6,17,35,.22),
    0 0 0 1px rgba(255,255,255,.72) inset;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  transform:translateY(8px) scale(.985);
  transform-origin:top right;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}

.lang-panel::before{
  content:"";
  position:absolute;
  top:-8px;
  right:48px;
  width:16px;
  height:16px;
  transform:rotate(45deg);
  border-left:1px solid rgba(214,178,94,.38);
  border-top:1px solid rgba(214,178,94,.38);
  background:rgba(255,255,255,.96);
}

.lang-panel.open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

.lang-panel[hidden],
.lang-backdrop[hidden]{
  display:none !important;
}

.lang-panel-grip{
  display:none;
}

/* ---------- Header ---------- */
.lang-panel-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px;
}

.lang-kicker{
  margin:0 0 6px;
  color:#b98419;
  font-size:11px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.lang-panel-header h2{
  margin:0;
  color:#0b1424;
  font-size:21px;
  font-weight:900;
  line-height:1.15;
}

.lang-panel-header h2 span{
  margin-left:7px;
  color:#64748b;
  font-size:13px;
  font-weight:800;
}

.lang-close{
  width:38px;
  height:38px;
  border:1px solid rgba(214,178,94,.35);
  border-radius:999px;
  background:rgba(255,255,255,.7);
  color:#b98419;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}

.lang-close:hover{
  transform:rotate(90deg);
  border-color:rgba(214,178,94,.8);
  background:rgba(214,178,94,.12);
}

/* ---------- Search ---------- */
.lang-search-wrap{
  position:relative;
  display:flex;
  align-items:center;
  margin-bottom:16px;
}

.lang-search-wrap span{
  position:absolute;
  left:15px;
  top:50%;
  transform:translateY(-50%);
  color:#b98419;
  font-size:16px;
  z-index:1;
}

.lang-search-wrap input{
  width:100%;
  height:44px;
  padding:0 16px 0 42px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:14px;
  outline:none;
  background:rgba(255,255,255,.76);
  color:#0b1424;
  font-size:14px;
  font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.lang-search-wrap input:focus{
  border-color:rgba(214,178,94,.75);
  box-shadow:
    0 0 0 4px rgba(214,178,94,.12),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* ---------- Grid + Options ---------- */
.lang-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  max-height:min(420px, calc(100vh - 280px));
  overflow:auto;
  padding:2px 2px 4px;
  scrollbar-width:thin;
}

.lang-option{
  width:100%;
  min-height:70px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 13px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:17px;
  background:rgba(255,255,255,.66);
  color:#0b1424;
  text-align:left;
  cursor:pointer;
  box-shadow:
    0 12px 28px rgba(10,20,40,.06),
    inset 0 1px 0 rgba(255,255,255,.78);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.lang-option:hover{
  transform:translateY(-2px);
  border-color:rgba(214,178,94,.62);
  background:rgba(255,255,255,.86);
  box-shadow:
    0 18px 34px rgba(10,20,40,.10),
    0 0 0 4px rgba(214,178,94,.08);
}

.lang-option.active{
  border-color:rgba(214,178,94,.95);
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,248,229,.78));
  box-shadow:
    0 18px 40px rgba(184,132,25,.18),
    0 0 0 1px rgba(214,178,94,.28) inset;
}

.lang-option-text{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.lang-option-text strong{
  color:#0b1424;
  font-size:14px;
  font-weight:950;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.lang-option-text small{
  color:#64748b;
  font-size:12px;
  font-weight:800;
  line-height:1.1;
}

.lang-check{
  margin-left:auto;
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:linear-gradient(135deg,#f7d77a,#c9962e);
  color:#1e1405;
  font-size:13px;
  font-weight:950;
  opacity:0;
  transform:scale(.82);
  transition:opacity .18s ease, transform .18s ease;
}

.lang-option.active .lang-check{
  opacity:1;
  transform:scale(1);
}

.lang-note{
  margin:15px 0 0;
  text-align:center;
  color:#64748b;
  font-size:12px;
  font-weight:800;
}

/* ---------- Header Compact Fix ---------- */
.site-header .nav-wrap{
  min-height:76px;
}

.site-header .nav-actions{
  gap:8px;
  align-items:center;
}

.site-header .nav-tools{
  display:flex;
  align-items:center;
  gap:8px;
}

.site-header .theme-toggle{
  height:42px !important;
  min-height:42px !important;
  padding:0 13px !important;
  border-radius:14px !important;
  font-size:13px !important;
}

.site-header .nav-actions .btn{
  min-height:42px !important;
  height:42px !important;
  padding:0 18px !important;
  border-radius:12px !important;
  font-size:13px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* ---------- Dark Mode ---------- */
body.dark-mode .lang-trigger{
  background:rgba(7,17,31,.82);
  border-color:rgba(242,199,106,.42);
  color:#eef5ff;
  box-shadow:
    0 16px 36px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.08);
}

body.dark-mode .lang-panel{
  background:
    radial-gradient(circle at 14% 0%, rgba(242,199,106,.12), transparent 33%),
    linear-gradient(180deg, rgba(10,20,36,.96), rgba(4,11,22,.94));
  color:#eef5ff;
  border-color:rgba(242,199,106,.35);
  box-shadow:
    0 34px 100px rgba(0,0,0,.48),
    0 0 0 1px rgba(255,255,255,.06) inset;
}

body.dark-mode .lang-panel::before{
  background:rgba(10,20,36,.96);
  border-color:rgba(242,199,106,.28);
}

body.dark-mode .lang-panel-header h2,
body.dark-mode .lang-option-text strong{
  color:#eef5ff;
}

body.dark-mode .lang-panel-header h2 span,
body.dark-mode .lang-option-text small,
body.dark-mode .lang-note{
  color:#9fb0c8;
}

body.dark-mode .lang-close{
  background:rgba(255,255,255,.06);
  color:#f2c76a;
}

body.dark-mode .lang-search-wrap input{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
  color:#eef5ff;
}

body.dark-mode .lang-search-wrap input::placeholder{
  color:#93a4bc;
}

body.dark-mode .lang-option{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.09);
  box-shadow:
    0 12px 28px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.04);
}

body.dark-mode .lang-option:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(242,199,106,.42);
}

body.dark-mode .lang-option.active{
  background:linear-gradient(180deg, rgba(242,199,106,.13), rgba(255,255,255,.06));
  border-color:rgba(242,199,106,.72);
}

body.dark-mode .lang-current-flag,
body.dark-mode .lang-option-flag{
  background:rgba(255,255,255,.08);
  box-shadow:0 8px 20px rgba(0,0,0,.22);
}

body.dark-mode .lang-current-flag.flag-fallback::before,
body.dark-mode .lang-option-flag.flag-fallback::before{
  color:#f5d98b;
}

/* ---------- Responsive ---------- */
@media (max-width:1240px){
  .site-header .nav{
    gap:18px;
  }

  .site-header .nav a{
    font-size:13px;
  }

  .site-header .nav-actions .btn{
    padding:0 14px !important;
  }

  .lang-current-text{
    max-width:78px;
  }
}

@media (max-width:1140px){
  .lang-current-text{
    display:none;
  }

  .lang-trigger{
    width:44px;
    padding:0 !important;
  }

  .lang-chevron{
    display:none;
  }
}

@media (max-width:1100px){
  .lang-panel{
    width:min(680px, calc(100vw - 28px));
  }

  .lang-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:980px){
  .site-header .nav-actions{
    display:none;
  }

  .lang-current-text{
    display:none;
  }

  .lang-trigger{
    width:44px;
    padding:0 !important;
    justify-content:center;
  }

  .lang-current-flag{
    width:26px;
    height:26px;
  }
}

@media (max-width:680px){
  .lang-backdrop{
    background:rgba(3,8,18,.42);
  }

  .lang-panel{
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    top:auto;
    width:auto;
    max-height:calc(100vh - 28px);
    padding:18px;
    border-radius:26px;
    transform:translateY(28px) scale(.985);
    transform-origin:bottom center;
  }

  .lang-panel::before{
    display:none;
  }

  .lang-panel.open{
    transform:translateY(0) scale(1);
  }

  .lang-panel-grip{
    display:block;
    width:48px;
    height:5px;
    margin:0 auto 14px;
    border-radius:999px;
    background:rgba(148,163,184,.36);
  }

  .lang-panel-header h2{
    font-size:20px;
  }

  .lang-grid{
    grid-template-columns:1fr;
    max-height:calc(100vh - 260px);
  }

  .lang-option{
    min-height:64px;
  }
}

@media (max-width:440px){
  .lang-panel{
    left:8px;
    right:8px;
    bottom:8px;
    padding:16px;
  }

  .lang-search-wrap input{
    height:44px;
  }

  .lang-close{
    width:38px;
    height:38px;
  }
}