/* Estilos personalizados para um visual mais moderno */
html,
body {
    height: 100%;
    font-family: 'Inter', sans-serif;
}

header {
    background-color: #ffffff;
}

.bg-login {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size: cover;
    background-position: center center;
    /* Imagem padrão para dispositivos móveis */
    background-image: url('/assets/img/Background-login.png');
}

/* Media query para trocar a imagem em telas maiores */
@media (min-width: 768px) {
    .bg-login {
        /* Imagem para desktops */
        background-image: url('/assets/img/Background-login.png');
    }
}

.login-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column; /* Empilha o card e o toast verticalmente */
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-card {
    width: 100%;
    max-width: 420px;
    padding: 2rem;
    border: none;
    border-radius: 1rem;
    background-color: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.04);
    text-align: center;
}

    .login-card .logo {
        margin-bottom: 1rem;
        -webkit-user-select: none;
        user-select: none
    }

.form-floating > .form-control {
    border-radius: 2rem; /* Bordas mais arredondadas */
}

.form-control:focus,
.form-select:focus {
    border-color: #ffc999;
    box-shadow: 0 0 0 .25rem rgba(255, 123, 0, 0.25);
}

/* Remove o ícone de validação do Bootstrap de dentro do input */
.form-control.is-invalid {
    background-image: none;
}

.btn-primary {
    background: linear-gradient(to right, rgba(255, 163, 161, 1) 50%, rgba(255, 146, 85, 1) 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    border: none;
    padding: 0.875rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 2rem; /* Bordas mais arredondadas */
    transition: background-position 0.6s ease-in-out;
    text-transform: uppercase;
    color: white;
}

    .btn-primary:hover {
        background-position: 0 0;
    }

.form-check {
    text-align: left;
}

.form-check-input {
    transition: background-color 0.4s ease-in-out, border-color 0.4s ease-in-out; /* Transição mais lenta */
}

    .form-check-input:checked {
        background-color: #FF7B00;
        border-color: #FF7B00;
    }

        .form-check-input:checked:hover {
            background-color: #FFA3A1;
            border-color: #FFA3A1;
        }

    .form-check-input:focus {
        box-shadow: 0 0 0 .25rem rgba(255, 123, 0, 0.25);
    }

.form-check label {
    font-size: .9rem;
}

/* Posicionamento e estilo do ícone dentro do campo */
.form-select {
    border-radius: 3rem;
}

/* Adiciona um preenchimento à esquerda no select para dar espaço ao ícone */
.form-floating-icon-group .form-select {
    padding-left: 3rem;
}

/* Estilo da label, com preenchimento para alinhar com o texto (após o ícone) */
.form-floating-icon-group .form-floating > label {
    transition: all 0.2s ease-in-out;
    padding-left: 3rem;
    background: transparent;
}

/* ANIMAÇÃO 1: Move o ícone para cima quando o campo está focado ou preenchido */
.form-floating-icon-group:focus-within .bi,
.form-floating-icon-group.is-filled .bi {
    top: 65%;
}

/* Correção para o comportamento padrão do Bootstrap em selects com label flutuante.
           Força a label a ficar "para baixo" inicialmente. */
.form-floating-icon-group .form-floating > .form-select ~ label {
    transform: scale(1) translateY(0) translateX(0);
}

/* ANIMAÇÃO 2: Animação da label para a posição "flutuante" (para cima) 
           quando o campo está focado ou preenchido. */
.form-floating-icon-group:focus-within .form-floating > label,
.form-floating-icon-group.is-filled .form-floating > label {
    padding-left: 0;
    transform: scale(.85) translateY(-.5rem) translateX(1.75rem);
    color: #666666;
}

/* Remove uma linha de fundo que o Bootstrap adiciona na label flutuante */
.form-floating > .form-select ~ label::after {
    height: 0px;
}

/* Classe que torna o texto do "placeholder" do select transparente */
.select-placeholder {
    color: transparent;
}
/* Garante que o texto volte a ser visível ao focar */
.form-select:focus {
    color: #212529;
}

.signup-prompt {
    color: #333333;
    font-size: .9rem;
    white-space: nowrap;
}

.login-card a {
    color: #FF7B00;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease-in-out;
}

    .login-card a:hover {
        color: #FFA3A1;
    }

.form-floating-icon-group {
    position: relative;
}

    .form-floating-icon-group .bi-lock-fill,
    .form-floating-icon-group .bi-person-fill,
    .form-floating-icon-group .bi-envelope-fill,
    .form-floating-icon-group .bi-telephone-fill,
    .form-floating-icon-group .bi-capsule-pill {
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 1.5rem;
        transform: translateY(-50%);
        color: #999999;
        transition: color .2s, top .2s;
    }

    .form-floating-icon-group .form-control {
        padding-left: 3rem;
    }

    .form-floating-icon-group .bi-eye-fill,
    .form-floating-icon-group .bi-eye-slash-fill {
        position: absolute;
        z-index: 3;
        top: 50%;
        right: 1.5rem;
        transform: translateY(-50%);
        color: #999999;
        cursor: pointer;
        transition: color .2s, top .2s;
    }

    .form-floating-icon-group .form-floating > label {
        transition: all 0.2s ease-in-out;
    }

.form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-select ~ label::after {
    background-color: transparent;
}

.form-floating-icon-group .form-floating > .form-control:placeholder-shown:not(:focus) ~ label {
    padding-left: 3rem;
}

.form-floating-icon-group:focus-within .bi,
.form-floating-icon-group.is-filled .bi {
    top: 65%;
}

.form-floating-icon-group .form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating-icon-group .form-floating > .form-control:focus ~ label {
    padding-left: 0;
    transform: scale(.85) translateY(-.5rem) translateX(1.75rem);
    color: #666666;
}

/* Estilos para o toast */
.toast-container {
    width: 100%;
    max-width: 420px; /* Alinha com a largura do card */
    z-index: 1056;
}

.toast {
    border-radius: 2rem !important; /* Bordas arredondadas igual ao card */
}

#errorToast {
    width: 100%;
}

.toast-body {
    padding: 1rem 0 1rem 1.5rem;
    font-size: 1rem !important;
}

    .toast-body + button {
        padding-right: 1.5rem;
    }

@media (max-width: 767.98px) {
    .toast-container {
        transform: translateX(-50%) translateY(-110%) !important;
    }

    .toast-body {
        padding: 1rem 0 1rem 1rem;
    }

        .toast-body + button {
            padding-right: 1rem;
        }
}


/* coloque no seu CSS global, após os demais estilos */
.usuario-logado .dropdown-toggle a.elementor-animated-menu {
    pointer-events: none !important;
}