/* ============================================================================
   POOD — LOGIN SOCIAL
   Botoes de "continuar com" nas telas de login e de cadastro, mais a tela de
   conclusao (loginsocial/conta/completar).

   POR QUE O CSS ESTA AQUI E NAO DENTRO DO MODULO
   Um <css src="PoodModulos_LoginSocial::..."> entraria na fila de assets do
   Magento, que carrega ANTES dos <link> que o Porto imprime a mao — e os botoes
   ficam dentro da area de formulario do Porto, onde ele tem regra de `.action`,
   de `button` e de `.fieldset`. Vindo antes, perderiamos todo empate de
   especificidade, em silencio. Ver a nota do pood-css.phtml e o §33.2.

   O ESPACO DO ICONE NASCE VAZIO, de proposito: Google, Facebook e Apple exigem
   os arquivos oficiais de marca, e aproximar o simbolo deles a mao seria uso
   indevido (mesmo motivo do rodape nao usar bandeira de cartao). Quando os
   arquivos entrarem em pub/media/pood/icones/, e so apontar a mascara nas tres
   regras marcadas com ICONE OFICIAL abaixo.
   ============================================================================ */

/* ---------- 1. A faixa "ou continue com" ---------- */

.pood-ls {
    max-width: 460px;
    margin: 30px auto 0;
}

/* O fio atravessa a caixa e o rotulo o interrompe. Duas linhas com um texto
   solto no meio leriam como tres elementos; assim le como um separador. */
.pood-ls__faixa {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    color: var(--pood-tinta-2);
    font-size: var(--pood-t-rotulo);
    font-weight: 600;
    letter-spacing: var(--pood-ls-rotulo);
    text-transform: uppercase;
}

.pood-ls__faixa::before,
.pood-ls__faixa::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--pood-linha);
}

.pood-ls__botoes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---------- 2. O botao ---------- */

.pood-ls__botao,
.pood-ls__botao:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid var(--pood-linha);
    border-radius: 999px;
    background: var(--pood-papel);
    color: var(--pood-tinta);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

/* O sublinhado do Porto mora no <span>, nao no <a> (§29.6) — os dois zerados. */
.pood-ls__botao:hover,
.pood-ls__botao:hover .pood-ls__rotulo,
.pood-ls__botao:focus,
.pood-ls__botao:focus .pood-ls__rotulo {
    color: var(--pood-tinta);
    text-decoration: none;
}

.pood-ls__botao:hover {
    border-color: var(--pood-tinta-3);
    background: var(--pood-fundo);
}

.pood-ls__botao:focus-visible {
    outline: 2px solid var(--pood-acento);
    outline-offset: 2px;
}

/* ICONE OFICIAL — o espaco esta reservado e a caixa nao pula quando ele chegar.
   Sem arquivo, `display:none` evita um vao de 18px sem nada dentro. */
.pood-ls__icone {
    display: none;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
}

/* ---------- 3. A tela de conclusao ---------- */

.pood-lsc {
    max-width: 480px;
    margin: 0 auto;
    padding: 56px 0 88px;
}

.pood-lsc__titulo {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--pood-tinta);
}

.pood-lsc__apoio {
    margin: 0 0 26px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--pood-tinta-2);
}

.pood-lsc__forma {
    padding: var(--pood-pad-cartao);
    border: 1px solid var(--pood-linha);
    border-radius: var(--pood-r-cartao);
    background: var(--pood-papel);
}

.pood-lsc__campo {
    margin: 0 0 18px;
}

.pood-lsc__rotulo {
    display: block;
    margin: 0 0 7px;
    font-size: var(--pood-t-rotulo);
    font-weight: 600;
    letter-spacing: var(--pood-ls-rotulo);
    text-transform: uppercase;
    color: var(--pood-tinta-2);
}

/* O e-mail confirmado pelo provedor e MOSTRADO, nunca um campo desabilitado:
   campo cinza convida a tentar editar e nao explica por que nao deixa. */
.pood-lsc__campo--fixo .pood-lsc__valor {
    display: block;
    font-size: 14px;
    color: var(--pood-tinta);
    word-break: break-all;
}

.pood-lsc__forma .input-text {
    width: 100%;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--pood-linha);
    border-radius: var(--pood-r-campo);
    background: var(--pood-papel);
    font-size: 14px;
    color: var(--pood-tinta);
}

.pood-lsc__forma .input-text:focus {
    border-color: var(--pood-tinta);
    box-shadow: none;
}

.pood-lsc__dica {
    display: block;
    margin: 6px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--pood-tinta-2);
}

.pood-lsc__acao.action.primary {
    width: 100%;
    min-height: 40px;
    margin: 4px 0 0;
    border: 0;
    border-radius: 999px;
    background: var(--pood-tinta);
    color: var(--pood-papel);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.pood-lsc__acao.action.primary:hover {
    background: var(--pood-tinta-2);
    color: var(--pood-papel);
}

.pood-lsc__rodape {
    margin: 18px 0 0;
    font-size: 12.5px;
    color: var(--pood-tinta-2);
    text-align: center;
}

@media (max-width: 991px) {
    .pood-lsc {
        padding: 34px 0 56px;
    }

    .pood-lsc__forma {
        padding: 22px 20px 24px;
    }
}