@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
    height: 100vh;
    overflow: hidden;
}

.btn-primary {
    background: linear-gradient(135deg, #25D366 0%, #34E89E 100%);
    box-shadow: 0 4px 14px 0 rgba(37, 211, 102, 0.3);
    transition: all 0.3s ease;
}

.btn-primary:not(.btn-loading):not(:disabled) {
    background: linear-gradient(135deg, #25D366 0%, #34E89E 100%);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px 0 rgba(37, 211, 102, 0.4);
}

.input-field {
    transition: all 0.2s ease;
}

.input-field:focus {
    border-color: #25D366;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1);
}


/* Card de login */
.login-card {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
}

/* Animações */
@keyframes float {
    0%, 100% { 
        transform: translateY(0px); 
    }
    50% { 
        transform: translateY(-15px); 
    }
}

/* Backgrounds */
.gradient-bg {
    background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 50%, #F1F5F9 100%);
}

.whatsapp-pattern {
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(37, 211, 102, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(52, 232, 158, 0.08) 0%, transparent 50%);
}

/* Toggle de senha */
.password-toggle {
    cursor: pointer;
    transition: color 0.2s ease;
}

.password-toggle:hover {
    color: #25D366;
}

/* Desabilitar ícone nativo do navegador para senhas */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-strong-password-auto-fill-button {
    display: none !important;
}

/* Para Firefox */
input[type="password"] {
    -moz-appearance: textfield;
}

/* Elementos flutuantes decorativos */
.floating-element {
    animation: float 6s ease-in-out infinite;
}

.floating-element:nth-child(2) {
    animation-delay: -3s;
}

.floating-element:nth-child(3) {
    animation-delay: -1.5s;
}

/* Estados de loading */
.btn-loader {
    transition: opacity 0.3s ease;
}

/* Loading state for login button - match register style */
.btn-primary:disabled,
.btn-primary.btn-loading {
    background: #9ca3af !important;
    color: white !important;
    cursor: not-allowed !important;
    opacity: 0.9 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Animações de entrada */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease-out;
}

.fade-in-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* Responsividade específica do login */
@media (max-height: 700px) {
    .login-container {
        padding: 1rem 0;
    }
    
    .login-header {
        margin-bottom: 1rem;
    }
    
    .login-footer {
        margin-top: 1rem;
    }
}

@media (max-width: 480px) {
    .login-card {
        margin: 0 0.5rem;
    }
    
    .floating-element {
        opacity: 0.5;
    }
}