/* Seletor de pais + telefone. Claro por padrao (formularios do site); a classe
   .sp--escuro serve ao painel escuro da roleta. Ver static/js/seletor_pais.js. */

.sp { display: flex; gap: 8px; align-items: stretch; }
.sp > input { flex: 1 1 auto; min-width: 0; }
.sp__sel { position: relative; flex: 0 0 auto; }

.sp__btn {
    display: flex; align-items: center; gap: 7px; height: 100%; box-sizing: border-box;
    padding: 10px 11px; border-radius: 10px; background: #fff;
    border: 1.5px solid #e5e7eb; color: #111827; font: inherit; font-size: 14px;
    cursor: pointer; transition: border-color .15s ease;
}
.sp__btn:hover { border-color: #cbd5e1; }
.sp__btn[aria-expanded="true"] { border-color: #6366f1; }
.sp__flag {
    width: 22px; height: 16px; border-radius: 3px; object-fit: cover; display: block;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .12);
}
.sp__ddi { font-weight: 700; letter-spacing: -.01em; }
.sp__seta { width: 13px; height: 13px; opacity: .5; }

/* O atributo `hidden` vale "display:none" pela folha do navegador, e isso perde
   para a regra de classe abaixo, que declara "display:grid". Sem esta linha a
   lista nasce ABERTA. */
.sp__lista[hidden] { display: none; }
/* `fixed`, e nao `absolute`: dentro de um modal com cantos arredondados o
   ancestral recorta o que passa da borda, e a lista aparecia cortada pela
   metade, sem como rolar ate o resto. Presa a janela, nada a recorta — a
   posicao vem do JS, que a coloca acima ou abaixo do botao conforme o espaco. */
.sp__lista {
    position: fixed; z-index: 9999; top: 0; left: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
    padding: 10px; width: 262px; border-radius: 14px; background: #fff;
    border: 1px solid #e5e7eb; box-shadow: 0 18px 44px rgba(15, 23, 42, .16);
}

.sp__op {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 4px; border: 0; border-radius: 10px; background: transparent;
    color: #475569; font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.sp__op:hover { background: rgba(99, 102, 241, .1); color: #1e293b; }
.sp__op[aria-selected="true"] { background: rgba(99, 102, 241, .16); color: #1e293b; }
.sp__op img {
    width: 26px; height: 19px; border-radius: 3px; object-fit: cover; display: block;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .14);
}

/* ── Tema escuro (roleta) ─────────────────────────────────────────────────── */
.sp--escuro .sp__btn {
    padding: 13px 11px; border-radius: 12px; background: rgba(7, 13, 26, .85);
    border: 1px solid rgba(255, 255, 255, .1); color: #e2e8f0; font-size: .92rem;
}
.sp--escuro .sp__btn:hover { border-color: rgba(255, 255, 255, .22); }
.sp--escuro .sp__flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.sp--escuro .sp__lista {
    background: #0d1627; border-color: rgba(255, 255, 255, .14);
    box-shadow: 0 18px 44px rgba(2, 6, 23, .6);
}
.sp--escuro .sp__op { color: #cbd5e1; }
.sp--escuro .sp__op:hover { background: rgba(99, 102, 241, .22); color: #fff; }
.sp--escuro .sp__op[aria-selected="true"] { background: rgba(99, 102, 241, .32); color: #fff; }
.sp--escuro .sp__op img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }