/* ============================================================================
   CAMPO DE TELEFONE — país + DDD + número.

   Carregado pelo SITE e pela PLATAFORMA. Como marca.css, todo var() tem
   fallback: os dois hospedeiros definem conjuntos de tokens diferentes, e
   token ausente resolve para NADA — erro silencioso, sem aviso no console.
   ============================================================================ */

.s3-tel { position: relative; }

/* UMA grade para campos e rótulos: as colunas passam a ser as mesmas por
   construção. Antes eram duas grades irmãs com a mesma declaração
   (`auto 74px minmax(0,1fr)`), o que parece igual e não é — `auto` mede o
   CONTEÚDO de cada uma: na linha dos campos era o botão de país (~118px), na
   dos rótulos era a palavra "País" (~28px). Resultado: "DDD" caía embaixo do
   seletor de país. */
.s3-tel__linha {
  display: grid;
  grid-template-columns: auto 74px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 5px 8px;
  align-items: stretch;
}
/* os rótulos entram na SEGUNDA linha da mesma grade */
.s3-tel__linha > .s3-tel__rot { grid-row: 2; align-self: start; }
/* país sem DDD (Portugal, França…): a caixa some e o número ocupa o lugar */
/* país sem DDD (Portugal, França…): a caixa e o rótulo somem juntos */
.s3-tel__linha:has(.s3-tel__ddd[style*="none"]) { grid-template-columns: auto minmax(0, 1fr); }
.s3-tel__linha:has(.s3-tel__ddd[style*="none"]) .s3-tel__rot--ddd { display: none; }

/* ------------------------------------------------------------- seletor */
.s3-tel__pais { position: relative; }
.s3-tel__btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 100%; min-height: 46px;
  padding: 0 12px;
  background: var(--s3-branco, var(--s3-papel, #FBF8F3));
  border: 1px solid var(--s3-borda-input, var(--s3-borda, #D9CDBB));
  border-radius: var(--s3-raio-campo, 10px);
  font-family: var(--s3-fonte, 'Lato', system-ui, sans-serif);
  font-size: 14.5px;
  color: var(--s3-texto, #432119);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.s3-tel__btn:hover { border-color: var(--s3-laranja, var(--s3-vinho, #903A27)); }
.s3-tel__btn:focus-visible {
  outline: none;
  border-color: var(--s3-laranja, var(--s3-vinho, #903A27));
  box-shadow: 0 0 0 3px rgba(144, 58, 39, .18);
}
.s3-tel__flag { display: block; border-radius: 2px; flex: 0 0 auto; }
.s3-tel__cod { font-weight: 700; letter-spacing: .02em; }
.s3-tel__ddi {
  font-family: var(--s3-fonte-mono, 'IBM Plex Mono', ui-monospace, monospace);
  color: var(--s3-texto-suave, var(--s3-texto-fraco, #5A3226));
}
.s3-tel__seta { font-size: 9px; color: var(--s3-texto-fraco, #7B6550); }

/* ------------------------------------------------------------ dropdown */
.s3-tel__pop {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  width: 290px; max-width: 82vw;
  background: var(--s3-branco, var(--s3-papel, #FBF8F3));
  border: 1px solid var(--s3-borda, #D9CDBB);
  border-radius: 12px;
  box-shadow: 0 14px 36px -12px rgba(67, 33, 25, .3);
  overflow: hidden;
}
.s3-tel__busca {
  width: 100%; border: none; border-bottom: 1px solid var(--s3-borda, #D9CDBB);
  padding: 11px 14px;
  font-family: var(--s3-fonte, 'Lato', system-ui, sans-serif); font-size: 14px;
  color: var(--s3-texto, #432119);
  background: var(--s3-cinza-card, var(--s3-tela-quente, #F2ECE4));
}
.s3-tel__busca:focus { outline: none; background: var(--s3-branco, var(--s3-papel, #FBF8F3)); }
.s3-tel__lista {
  list-style: none; margin: 0; padding: 4px;
  max-height: 246px; overflow-y: auto;
}
.s3-tel__opcao {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  font-size: 14px; color: var(--s3-texto, #432119);
}
.s3-tel__opcao[hidden] { display: none; }
.s3-tel__opcao:hover,
.s3-tel__opcao:focus-visible { background: var(--s3-cinza-card, var(--s3-tela-quente, #F2ECE4)); outline: none; }
.s3-tel__opcao[aria-selected="true"] {
  background: var(--s3-laranja-clara, var(--s3-tela-quente, #F1E3DC)); font-weight: 700;
}
.s3-tel__opnome { flex: 1 1 auto; }
.s3-tel__opddi {
  font-family: var(--s3-fonte-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 12.5px; color: var(--s3-texto-suave, var(--s3-texto-fraco, #5A3226));
}

/* --------------------------------------------------------- as caixas */
.s3-tel__ddd, .s3-tel__num {
  min-height: 46px;
  font-family: var(--s3-fonte-mono, 'IBM Plex Mono', ui-monospace, monospace);
  letter-spacing: .04em;
}
/* quando o hospedeiro não tem .s3-entrada, o campo ainda precisa de forma */
.s3-tel__ddd:not(.s3-entrada), .s3-tel__num:not(.s3-entrada) {
  border: 1px solid var(--s3-borda-input, var(--s3-borda, #D9CDBB));
  border-radius: var(--s3-raio-campo, 10px);
  padding: 0 12px;
}

/* rótulos abaixo, como na referência: dizem o que cada caixa espera sem
   ocupar a linha de cima */
.s3-tel__rot {
  font-size: 11.5px;
  color: var(--s3-texto-fraco, #7B6550);
}

.s3-tel__erro {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--s3-erro, #A6432B);
}

@media (max-width: 480px) {
  .s3-tel__linha { grid-template-columns: auto 62px minmax(0, 1fr); }
}