:root{
  --c-bg-dark:#0d1a2b;
  --c-bg-card:#ffffff;
  --c-border:#dcdfe4;
  --c-text:#0d1a2b;
  --radius:12px;
  --shadow:0 6px 14px rgba(0,0,0,.18);
  --sel-padding:11px 14px;
}

#locale-wrapper{
  background:var(--c-bg-dark);
  padding:5px;
  display:flex;
  justify-content:center;
}

.locale-card{
  background:var(--c-bg-card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px 16px 20px 16px;
  max-width:280px;
  text-align:left;
  font-family:inherit;
}

.locale-card label{
  display:block;
  font-size:14px !important;
  font-weight:600;
  color:var(--c-text);
}

.locale-field{
  width:100%;
  padding:var(--sel-padding);
  font-size:12x !important;
  color:var(--c-text);
  border:1px solid var(--c-border);
  border-radius:6px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" fill="none" stroke="%230d1a2b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 8px center/8px 8px;
  appearance:none;
  transition:border .2s;
}
.locale-field:focus{outline:none;border-color:#6a8fff;}

.locale-trigger{
  background:none;
  border:none;
  color:#fff;                /* ← texto y trazo del SVG en blanco */
  font:600 16px/1.3 inherit;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  padding: 15px !important;
}

.locale-trigger svg{
  width:20px;
  height:20px;
  flex-shrink:0;
}

#locale-current{
  color:#fff;         
  font-weight:400;
  font-size: 14px;
}

.hidden{display:none;}
/* separador extra para el segundo label */
#lab-lang{margin-top:10px;}

/* Contenedor del gatillo ----------------------------------------- */
.locale-trigger-wrap{
  position:relative;          
  display:inline-flex;       
}

/* Pop-up flotante ------------------------------------------------- */
#locale-popup{
  position:absolute;          
  bottom:calc(100% + 12px);   
  right:0;                    
  z-index:9999;
  transition:opacity .25s ease, transform .25s ease;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px); 
}
#locale-popup.open{         
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}