/* Pedido de acesso */

.hero{padding:clamp(48px,7vw,84px) 0 clamp(52px,7vw,86px)}
.conta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(32px,5vw,64px);align-items:start}
.hero h1{max-width:14ch;font-size:clamp(2rem,4vw,2.9rem)}
.hero h1 em{font-style:normal;color:var(--cyan)}
.hero-sub{max-width:46ch}

.conta-lista{list-style:none;margin-top:30px;display:grid;gap:16px}
.conta-lista li{position:relative;padding-left:30px}
.conta-lista li::before{
  content:'';position:absolute;left:0;top:4px;width:19px;height:19px;border-radius:50%;
  background:rgba(34,211,238,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2322D3EE' stroke-width='2.6'%3E%3Cpath d='M4 8.3l2.6 2.6L12 5.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:12px;
}
.conta-lista b{display:block;font-weight:700;color:#fff;font-size:.98rem}
.conta-lista span{display:block;font-size:.92rem;color:rgba(255,255,255,.62);margin-top:1px}

.conta-alt{margin-top:28px;font-size:.94rem;color:rgba(255,255,255,.62)}
.conta-alt a{color:var(--cyan);font-weight:600}

/* cartão do formulário */
.conta-form{
  background:#fff;border-radius:var(--r-card);
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 30px 60px -28px rgba(0,0,0,.7);
  padding:clamp(24px,3vw,34px);
}
.campo{margin-bottom:16px}
.campo-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.campo label{display:block;font-size:.8rem;font-weight:700;color:var(--ink);margin-bottom:6px}
.campo label i{font-style:normal;font-weight:500;color:var(--muted)}
.campo input,.campo textarea{
  width:100%;border:1.5px solid var(--line);border-radius:10px;
  padding:12px 14px;font-family:inherit;font-size:.98rem;color:var(--ink);background:#fff;
  transition:border-color .15s,box-shadow .15s;
}
.campo textarea{resize:vertical;min-height:84px}
.campo input:focus,.campo textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,107,255,.14);
}
.campo input::placeholder,.campo textarea::placeholder{color:#9AA7BD}
.ajuda-campo{display:block;margin-top:6px;font-size:.82rem;color:var(--muted)}

.isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.erros{
  background:rgba(225,87,76,.08);border:1px solid rgba(225,87,76,.35);
  border-radius:12px;padding:14px 16px;margin-bottom:18px;font-size:.92rem;color:#9B3129;
}
.erros b{display:block;margin-bottom:6px}
.erros ul{margin:0;padding-left:18px}

.conta-nota{margin-top:14px;font-size:.84rem;color:var(--muted);text-align:center}

/* confirmação */
.ok-ic{
  width:64px;height:64px;border-radius:50%;margin-bottom:22px;
  background:rgba(18,164,116,.16);color:#5BD9AE;
  display:flex;align-items:center;justify-content:center;
}

/* passos */
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.passo{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:26px 24px}
.passo-n{width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.88rem;margin-bottom:14px}
.passo b{display:block;font-weight:700;margin-bottom:6px}
.passo p{font-size:.93rem;color:var(--muted)}

@media(max-width:900px){
  .conta-grid{grid-template-columns:1fr}
  .passos{grid-template-columns:1fr}
}
@media(max-width:520px){
  .campo-2{grid-template-columns:1fr}
}

/* ── SELETOR DE PAÍS COM BANDEIRA ───────────────────── */
.pais-sel {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background: #fff;
    padding: 0 14px;
    gap: 10px;
    height: 46px; /* Altura equivalente aos outros inputs */
    transition: border-color .15s, box-shadow .15s;
}
/* Efeito de foco igual aos outros campos */
.pais-sel:focus-within {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(47,107,255,.14);
}

/* A caixa que segura a bandeira */
.pais-bandeira {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;   /* Tamanho final da bandeira */
    height: 18px;  /* Proporção 3:2 */
    flex-shrink: 0;
    border-radius: 3px;
    overflow: hidden;
    /* Bordinha sutil para a bandeira não se perder em fundos brancos */
    box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); 
}
/* Força o SVG a fills a caixinha acima */
.pais-bandeira svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* O select em si (sem borda, transparente) */
/* No seu criar-conta.css, altere: */

.pais-sel select {
    flex: 0 1 auto;        /* muda de flex: 1 para auto */
    width: auto;           /* adiciona isso */
    min-width: 140px;      /* largura mínima para caber "Brasil (+55)" */
    max-width: 220px;      /* limite caso o país tenha nome longo */
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: .95rem;
    color: var(--ink);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 24px;
}

/* A sua setinha customizada de dropdown */
.pais-seta {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    pointer-events: none; /* Permite clicar no select através da seta */
    color: var(--muted);
}
/* Garante que o wrapper tenha posição relativa para a seta absoluta */
.campo-zap {
  grid-template-columns: 7rem 1fr;
}

.campo-zap .pais-sel,
.campo-zap .pais-sel select {
  width: 100%;
  min-width: 0;
}