/* =========================================================
   ARENA UI — LANGUAGE FLAG COMPONENT
   Estratto dal file originale e ottimizzato
   Mobile-first • Zero modifiche estetiche
========================================================= */

/* ---------------------------------------------------------
   FLAG WRAPPER
--------------------------------------------------------- */

.lang-flag {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(
      circle at 30% 0%,
      rgba(148,163,184,0.6),
      transparent 60%
    ),
    #020617;

  box-shadow: 0 0 10px rgba(15,23,42,0.9);
}


/* ---------------------------------------------------------
   FLAG IMAGE
--------------------------------------------------------- */

.lang-flag img {
  width: 100%;
  height: 100%;

  display: block;
  object-fit: cover;
}


.lang-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 4px;
  border-radius: 999px;

  background: rgba(5, 8, 22, 0.55);
  border: 1px solid rgba(56,189,248,.22);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  box-shadow:
    0 0 0 1px rgba(56,189,248,.10) inset,
    0 0 12px rgba(56,189,248,.22);
}

.lang-pill__opt{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* ?? pill “circolare” attorno alla bandiera */
  width: 38px;
  height: 32px;

  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;

  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.lang-pill__opt.is-active{
  background: rgba(56,189,248,.22);
  border-color: rgba(56,189,248,.38);
  box-shadow:
    0 0 0 1px rgba(56,189,248,.18) inset,
    0 0 18px rgba(56,189,248,.32);
}

@media (hover:hover) and (pointer:fine){
  .lang-pill__opt:hover{
    background: rgba(56,189,248,.14);
    border-color: rgba(56,189,248,.20);
  }
}

.lang-pill__opt:focus-visible{
  outline: 2px solid rgba(56,189,248,.55);
  outline-offset: 2px;
}

/* drawer full-width (optional) */
.lang-pill--block{
  width: 100%;
  justify-content: space-between;
}