/*
 * CSS DEDICADO E ISOLADO do modal de login do carrinho/aposta.
 * Replica EXATAMENTE o que a HOME renderiza para o partial
 * resources/views/admin/pages/auth/login.blade.php.
 *
 * Todo seletor está escopado sob #exampleModalCenter para isolar 100%
 * o modal — não conflita com a home nem com nenhuma outra página.
 *
 * Fonte de cada regra anotada ao lado. Valores idênticos às fontes.
 * Classes neutras na home (.container-login100, .wrap-login100,
 * .wrap-input100, .focus-input100, .input100, .login) NÃO são estilizadas
 * em nenhuma fonte da home, portanto também ficam neutras aqui.
 */

/* Largura igual à home (modal Bootstrap padrão 500px no desktop). */
#exampleModalCenter .modal-dialog {
    max-width: 500px;
}

/* ----- modal-content (fundo escuro) -----
   base: public/admin/layouts/css/master.css (.modal-content)
   override de cor: home.blade.php / admin-home.css (.modal-content) */
#exampleModalCenter .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #212425;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.3rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5);
    outline: 0;
}

/* ----- login-card-body -----
   fonte: public/admin/layouts/css/master.css (.login-card-body) */
#exampleModalCenter .login-card-body {
    background: #222425;
    border-top: 0;
    color: #666;
    padding: 0;
}

/* ----- login-logo -----
   fonte: public/admin/layouts/css/master.css (.login-logo) */
#exampleModalCenter .login-logo {
    font-size: 2.1rem;
    font-weight: 300;
    margin-bottom: 0.9rem;
    text-align: center;
}

#exampleModalCenter .login-logo a {
    color: #495057;
}

/* ----- inputs (.new-login) -----
   fonte: public/admin/layouts/css/master.css (.new-login) */
#exampleModalCenter .new-login {
    width: 90%;
    display: block !important;
    margin: 0 auto;
    background-color: #424344;
    border: none;
    padding: 20px 15px 5px 20px;
    color: #fff;
    border-radius: 10px;
}

/* ----- botão "Entrar" (.login100-form-btn) -----
   fonte: admin-home.css / home.blade.php (.login100-form-btn) */
#exampleModalCenter .login100-form-btn {
    border-radius: 5px;
    padding: 10px;
    border: none;
    width: 90%;
    background: #9FD214;
    color: #212425;
    font-weight: 700;
}

#exampleModalCenter .login100-form-btn:hover {
    background: #212425;
    color: #9FD214;
    font-weight: 700;
    border: 1px solid #9FD214;
}

/* ----- bloco social (divisor + título) -----
   fonte: admin-home.css / home.blade.php (.login-social, .l-title*)
   fonte: public/admin/layouts/css/master.css (.login-social-icons) */
#exampleModalCenter .login-social {
    margin: 0 auto;
    width: 90%;
}

#exampleModalCenter .l-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#exampleModalCenter .l-title-body {
    width: 100%;
    white-space: nowrap;
    padding: 13px;
}

#exampleModalCenter .l-title-linha {
    width: 100%;
    height: 0.5px;
    background-color: #7C7E7E;
}

#exampleModalCenter .login-social-icons {
    display: flex;
    width: 100%;
    justify-content: center;
}

/* ----- botão do Google -----
   fonte: @push('styles') de login.blade.php (.google-btn*) */
#exampleModalCenter .google-btn {
    width: 240px;
    height: 50px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .25);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: none;
    transition: box-shadow .3s ease;
    font-family: 'Roboto', sans-serif;
}

#exampleModalCenter .google-btn:hover {
    box-shadow: 0 0 6px #4285f4;
}

#exampleModalCenter .google-btn:active {
    background: #f8f9fa;
}

#exampleModalCenter .google-icon-wrapper {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#exampleModalCenter .google-icon {
    width: 24px;
    height: 24px;
}

#exampleModalCenter .google-text {
    color: #757575;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.2px;
    margin-left: 24px;
    flex: 1;
    text-align: left;
}

/* ----- link "Criar uma conta grátis" (.register-link) -----
   fonte: admin-home.css / home.blade.php (.register-link) */
#exampleModalCenter .register-link {
    text-align: center;
    font-weight: 400;
    font-size: 13px;
    margin-top: 15px;
}