/* Seletor de país + telefone, padrão do site. Par do /shared/telefone.js.
   Só usa tokens que as 3 LPs têm em comum (--line, --text-high, --orange) e cai
   em valor literal quando o token pode não existir, para nenhuma página herdar
   texto invisível. */

.lphone { position: relative; display: flex; gap: .5rem; }

.lphone-cc {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 0 .7rem;
  border-radius: 10px;
  border: 1px solid var(--line, rgba(255, 255, 255, .12));
  background: rgba(255, 255, 255, .03);
  color: var(--text-high, #F3F3F3);
  font: inherit;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.lphone-cc:hover { border-color: var(--orange, #FFA01A); }
.lphone-cc:focus-visible { outline: 2px solid var(--orange, #FFA01A); outline-offset: 2px; }
.lphone-flag { font-size: 1.15rem; line-height: 1; }
.lphone-chev { font-size: .7rem; opacity: .7; }

.lphone > input { flex: 1; min-width: 0; }

/* position:fixed, e nao absolute, de proposito: a modal tem overflow-y:auto e
   qualquer popup absoluto dentro dela e RECORTADO pelo scroll do container.
   Fixed escapa desse contexto; o JS calcula left/top/width a cada abertura. */
.lphone-pop {
  position: fixed;
  z-index: 200;
  border-radius: 12px;
  border: 1px solid var(--line, rgba(255, 255, 255, .12));
  background: #121110;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .8);
  padding: .5rem;
  max-height: min(17rem, 46vh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
/* Sem esta linha o display:flex acima vence o atributo [hidden] e o popup nasce
   aberto. Foi o que aconteceu em producao em 08/09. */
.lphone-pop[hidden] { display: none; }

.lphone-busca {
  width: 100%;
  padding: .55rem .7rem;
  border-radius: 8px;
  border: 1px solid var(--line, rgba(255, 255, 255, .12));
  background: rgba(255, 255, 255, .04);
  color: var(--text-high, #F3F3F3);
  font: inherit;
  font-size: 1rem;  /* 16px: abaixo disso o Safari do iPhone da zoom ao focar */
}
.lphone-busca:focus-visible { outline: 2px solid var(--orange, #FFA01A); outline-offset: 1px; }

.lphone-lista { overflow-y: auto; display: flex; flex-direction: column; }

.lphone-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .5rem .6rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text-high, #F3F3F3);
  font: inherit;
  font-size: .92rem;
  text-align: left;
  cursor: pointer;
}
.lphone-item:hover,
.lphone-item.sel { background: rgba(255, 160, 26, .1); }
.lphone-item:focus-visible { outline: 2px solid var(--orange, #FFA01A); outline-offset: -2px; }
.lphone-nome { flex: 1; min-width: 0; }
.lphone-ddi { color: var(--orange, #FFA01A); font-variant-numeric: tabular-nums; font-size: .86rem; }
.lphone-vazio { margin: 0; padding: .8rem .6rem; font-size: .88rem; opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  .lphone-cc { transition: none; }
}