/* ───────── LANGUAGE SELECTOR ───────── */

.language-selector{
  position: relative;
  display: inline-block;
  z-index: 1000;
  isolation: isolate;
}

/* ───── BOTÃO PRINCIPAL ───── */

.language-button{
  display: flex;
  align-items: center;
  gap: .6rem;

  height: 42px;
  padding: 0 .85rem;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.03)
  );
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;

  color: #fff;
  font-weight: 500;
  cursor: pointer;

  transition: background .25s ease, box-shadow .25s ease, transform .15s ease;
}

.language-button:hover{
  background: rgba(255,255,255,.14);
  box-shadow: 0 0 14px rgba(120,255,230,.35);
  transform: translateY(-1px);
}

.language-button:active{
  transform: scale(.97);
}

/* Bandeira */
.language-button .flag-icon{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

/* Chevron */
.language-button i{
  font-size: .7rem;
  opacity: .7;
  transition: transform .25s ease;
}

.language-dropdown.active .language-button i{
  transform: rotate(180deg);
}

/* ───── DROPDOWN ───── */

.language-options{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;

  background: radial-gradient(
    circle at top,
    rgba(30,40,60,.98),
    rgba(10,14,24,.98)
  );
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;

  padding: .4rem;
  min-width: 180px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.96);

  transition: opacity .25s ease, transform .25s ease;
  z-index: 1200;

  box-shadow:
    0 20px 60px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.04);
}

/* Aberto */
.language-dropdown.active .language-options{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* ───── OPÇÃO ───── */

.language-option{
  display: flex;
  align-items: center;
  gap: .7rem;

  padding: .55rem .7rem;
  border-radius: 10px;

  color: rgba(255,255,255,.9);
  font-size: .9rem;
  cursor: pointer;

  transition: background .2s ease, color .2s ease;
}

.language-option:hover{
  background: rgba(255,255,255,.08);
  color: #fff;
}

/* Idioma ativo (opcional – se marcar via JS com .active) */
.language-option.active{
  background: linear-gradient(
    135deg,
    rgba(120,255,230,.25),
    rgba(0,180,255,.18)
  );
  color: #fff;
}

/* Flag na lista */
.language-option .flag-icon{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

/* ───────── MOBILE ───────── */

@media(max-width:768px){

  .language-selector{
    width: 100%;
  }

  .language-button{
    width: 100%;
    justify-content: center;
  }

  .language-options{
    left: 0;
    right: auto;
    width: 100%;
    max-height: 220px;
    overflow-y: auto;
  }

  .language-option{
    justify-content: center;
  }

  .language-options::-webkit-scrollbar{
    width: 6px;
  }

  .language-options::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.25);
    border-radius: 6px;
  }
}