/* ============================================================
   NCR TVET — Language Picker styles
   Works on both light navbar (index.html) and dark inner pages.
   ============================================================ */

/* DESKTOP PICKER --------------------------------------------- */
.lang-picker{
  position:relative;
  display:inline-flex;
  align-items:center;
  margin-right:6px;
}
.lang-picker-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(14,165,233,.13);
  border:1.5px solid rgba(14,165,233,.45);
  color:#0d1f3c;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12px;
  font-weight:700;
  padding:8px 14px;
  border-radius:10px;
  cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,transform .15s;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 2px 8px rgba(14,165,233,.18);
}
.lang-picker-btn:hover{
  background:rgba(14,165,233,.22);
  border-color:rgba(14,165,233,.6);
  transform:translateY(-1px);
}
.lang-picker-icon{font-size:13px;color:#0ea5e9}
.lang-picker-flag{
  font-family:'Space Grotesk','Outfit',monospace;
  font-size:11px;
  font-weight:800;
  letter-spacing:.8px;
  background:linear-gradient(135deg,#0ea5e9,#14b8a6);
  color:#fff;
  padding:3px 7px;
  border-radius:5px;
  line-height:1;
}
.lang-picker-label{font-weight:700;color:#0d1f3c;letter-spacing:.2px}
.lang-picker-caret{font-size:9px;color:#5b7a9a;transition:transform .25s}
.lang-picker.open .lang-picker-caret{transform:rotate(180deg)}

.lang-picker-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:215px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  box-shadow:0 16px 48px rgba(13,31,60,.18), 0 2px 8px rgba(0,0,0,.04);
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:2px;
  opacity:0;
  transform:translateY(-6px) scale(.97);
  pointer-events:none;
  transition:opacity .2s,transform .2s;
  z-index:1100;
}
.lang-picker.open .lang-picker-menu{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.lang-option{
  background:none;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 11px;
  border-radius:9px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:13px;
  font-weight:600;
  color:#0d1f3c;
  text-align:left;
  transition:background .15s,color .15s;
  width:100%;
}
.lang-option:hover{background:rgba(14,165,233,.08)}
.lang-option-flag{
  font-family:'Space Grotesk','Outfit',monospace;
  font-size:10px;
  font-weight:800;
  letter-spacing:.6px;
  background:linear-gradient(135deg,#0ea5e9,#14b8a6);
  color:#fff;
  padding:4px 7px;
  border-radius:5px;
  line-height:1;
  min-width:32px;
  text-align:center;
  flex-shrink:0;
}
.lang-option-name{flex:1}
.lang-option-check{
  font-size:11px;
  color:#0ea5e9;
  opacity:0;
  transition:opacity .15s;
  flex-shrink:0;
}
.lang-option-active{
  background:rgba(14,165,233,.1);
  color:#0369a1;
}
.lang-option-active .lang-option-check{opacity:1}

/* When navbar is scrolled / on dark pages — keep the picker readable
   The navbar background is white-ish at all times, so default styles work.
   But for the rare dark-navbar scenario we add this fallback: */
#navbar.scrolled .lang-picker-btn,
#navbar .lang-picker-btn{
  /* default styles already fine */
}

/* MOBILE PICKER (inside .mob-menu) --------------------------- */
.lang-picker-mob{
  margin-top:24px;
  padding:24px 32px;
  border-top:1px solid rgba(0,0,0,.07);
  width:100%;
  max-width:420px;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
}
.lang-picker-mob-label{
  font-family:'Space Grotesk','Plus Jakarta Sans',monospace;
  font-size:11px;
  font-weight:700;
  letter-spacing:2px;
  color:#5b7a9a;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:8px;
}
.lang-picker-mob-label i{color:#0ea5e9}
.lang-picker-mob-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  width:100%;
}
.lang-option-mob{
  background:rgba(14,165,233,.06);
  border:1.5px solid rgba(14,165,233,.18);
  border-radius:12px;
  padding:14px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:13px;
  font-weight:700;
  color:#0d1f3c;
  transition:all .2s;
}
.lang-option-mob:hover{
  background:rgba(14,165,233,.12);
  border-color:rgba(14,165,233,.35);
  transform:translateY(-2px);
}

/* Compact picker on tighter screens (label hidden) */
@media(max-width:1100px){
  .lang-picker-label{display:none}
  .lang-picker-btn{padding:8px 10px}
}
/* Hide on tiniest screens — mobile menu has its own picker */
@media(max-width:520px){
  .lang-picker{display:none}
}

/* Print: hide picker */
@media print{
  .lang-picker,.lang-picker-mob{display:none !important}
}