/* Fundo da página */
body {
    background-color: #f3e7f8;
}

/* Cor personalizada */
.text-purple {
    color: #4b006e;
}

/* Botão estilizado */
.btn-purple {
    background-color: #4b006e;
    color: white;
    border-radius: 999px;
    padding: 10px 0;
    font-weight: bold;
}

.btn-purple:hover {
    background-color: #36004e;
}

/* Cartão do formulário (ajustado para ser mais largo e sem espaços laterais) */
.login-card {
    background-color: white;
    border-radius: 24px;
    max-width: 1100px;
    width: 100%;
    padding: 0;
    overflow: hidden; /* Garante que imagem e form se encaixem sem transbordar */
}

/* Ícones dentro dos inputs */
.input-icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: #666;
    font-size: 1.1rem;
}

/* Ícone para mostrar/ocultar senha */
.toggle-password {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: #999;
    cursor: pointer;
}

/* Estilização dos campos de input */
.custom-input {
    border-radius: 999px;
    background-color: #f2f2f2;
    border: none;
    padding: 10px 16px;
    font-size: 0.95rem;
    color: #333;
    width: 100%;
}

/* Placeholder dos inputs */
.custom-input::placeholder {
    color: #888;
}

/* Imagem do lado direito (cobre todo o espaço da coluna) */
.object-fit-cover {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}