/*=====================================================================
  Login em modal da praca — MESMO visual em todas as telas: card branco
  centrado no topo, fundo escurecido (igual ao modal da loja).
  O POSICIONAMENTO (overlay/caixa) vem INLINE na partial _ModalLoginPraca,
  para valer mesmo se este stylesheet falhar; aqui fica so o acabamento.
=====================================================================*/
.login-modal-caixa {
    animation: loginModalSobe .18s ease-out;
}

@keyframes loginModalSobe {
    from { transform: translateY(24px); opacity: .6; }
    to { transform: translateY(0); opacity: 1; }
}

/* Cores de texto: text-gray-600/900 existem no CSS da LOJA mas nao no da praca.
   Definidas aqui (escopadas no modal) para o visual ficar igual nos dois lados. */
.login-modal-praca .text-gray-900 {
    color: #1F2021;
}

.login-modal-praca .text-gray-600 {
    color: #6F7175;
}

body.login-modal-aberto {
    overflow: hidden; /* trava o scroll do fundo enquanto o modal esta aberto */
}

/* Topo */
.login-modal-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid #E9ECEF;
}

    .login-modal-topo > span {
        flex: 1 1 auto;
        color: #1F2021;
    }

.login-modal-fechar,
.login-modal-voltar {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #F0F2F4;
    color: #1F2021;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Corpo */
.login-modal-corpo {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-modal-texto {
    margin: 0 0 4px;
}

/* Medidas com escopo + !important: os temas da praca/loja tem regras de input
   com especificidade maior (ex.: input.form-control) que achatavam o campo. */
.login-modal-praca .login-modal-input {
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 10px !important;
    border: 1px solid #DEE2E6 !important;
    padding: 0 12px !important;
    font-size: 16px !important; /* 16px evita o zoom automatico do iOS ao focar */
    line-height: normal !important;
    width: 100% !important;
    background: #FFFFFF !important;
    box-shadow: none;
}

    .login-modal-praca .login-modal-input:focus {
        outline: none !important;
        border-color: #CC161C !important;
        box-shadow: 0 0 0 3px rgba(204, 22, 28, 0.12) !important;
    }

.login-modal-codigo {
    letter-spacing: 6px;
    text-align: center;
    font-weight: 600;
}

.login-modal-linha-dupla {
    display: flex;
    gap: 10px;
}

    .login-modal-linha-dupla > div {
        flex: 1 1 0;
        min-width: 0;
    }

/* Senha com botao de ver */
.login-modal-senha-wrap {
    position: relative;
}

.login-modal-ver-senha {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: #6F7175;
    cursor: pointer;
}

/* Cor propria do botao: a classe btn-padrao-restaurante so existe no layout da
   LOJA (CssLoja por tenant) — na praca o botao ficava cinza. */
.login-modal-btn {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 100px;
    margin-top: 8px;
    cursor: pointer;
    background: #CC161C;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
}

    .login-modal-btn:hover,
    .login-modal-btn:focus {
        background: #B01217;
        color: #FFFFFF;
    }

    .login-modal-btn:disabled {
        opacity: .65;
        cursor: default;
    }

.login-modal-erro {
    background: #FDECEC;
    color: #B01217;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
}

.login-modal-links {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

    .login-modal-links a {
        color: #CC161C;
        font-size: 14px;
        text-decoration: none;
    }

        .login-modal-links a:hover {
            text-decoration: underline;
        }


/*=====================================================================
  Passo 1 no formato do whitelabel: WhatsApp (padrao) x E-mail
=====================================================================*/
/* Campo de telefone com prefixo +55 embutido */
.login-modal-praca .login-modal-input-ddi {
    display: flex;
    align-items: center;
    border: 1px solid #DEE2E6;
    border-radius: 10px;
    background: #FFFFFF;
    overflow: hidden;
}

    .login-modal-praca .login-modal-input-ddi:focus-within {
        border-color: #CC161C;
        box-shadow: 0 0 0 3px rgba(204, 22, 28, 0.12);
    }

    .login-modal-praca .login-modal-ddi {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0 10px 0 12px;
        color: #5C5E61;
        border-right: 1px solid #E9ECEF;
        height: 28px;
        flex: 0 0 auto;
    }

    /* o input dentro do grupo nao repete borda/altura */
    .login-modal-praca .login-modal-input-ddi .login-modal-input {
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        flex: 1 1 auto;
        min-width: 0;
    }

/* Separador "ou" */
.login-modal-separador {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 10px;
    color: #6F7175;
    font-size: 14px;
}

    .login-modal-separador::before,
    .login-modal-separador::after {
        content: '';
        flex: 1 1 auto;
        height: 1px;
        background: #E9ECEF;
    }

/* Botao secundario (trocar de canal) */
.login-modal-btn-alt {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #CED4DA;
    border-radius: 100px;
    background: #FFFFFF;
    color: #3F4042;
    cursor: pointer;
}

    .login-modal-btn-alt:hover,
    .login-modal-btn-alt:focus {
        background: #F7F9FA;
        border-color: #ADB5BD;
    }

/* Um unico link no rodape do passo: fica centralizado */
.login-modal-links.login-modal-links-centro {
    justify-content: center;
}

/* Aceite dos termos no cadastro (texto informativo antes do botao, como na
   tela de cadastro de producao) */
.login-modal-termos {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.45;
    color: #6F7175;
    text-align: center;
}

    .login-modal-termos a {
        color: #CC161C;
        text-decoration: underline;
    }