/* Login styles for Quotynt */

:root {
    --primary-green: #6EB05A;
    --secondary-green: #4A7A3D;
    --light-bg: #F5F7F2;
    --dark-card: #253530;
    --light-accent: #E8EFDE;
    --text-dark: #1A2721;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: var(--light-bg);
    color: var(--text-dark);
}

.bg-gradient-to-r {
    background: linear-gradient(to right, #6EB05A, #58A65E, #4A7A3D);
}

/* Form focus states */
input:focus, 
button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(110, 176, 90, 0.3);
}

/* Green button styles */
.btn-primary,
.bg-green-600 {
    background-color: var(--primary-green);
}

.hover\:bg-green-700:hover {
    background-color: var(--secondary-green);
}

.text-green-600 {
    color: var(--primary-green);
}

.hover\:text-green-700:hover {
    color: var(--secondary-green);
}

/* Animations */
.card-animate {
    animation: fadeUp 0.5s ease-out;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal animation */
.modal-enter {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Password toggle icon */
.fa-eye:hover,
.fa-eye-slash:hover {
    color: var(--primary-green) !important;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Error state for inputs */
.input-error {
    border-color: #f44336 !important;
}

.input-error:focus {
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.3) !important;
}

/* Success messages */
.success-message {
    background-color: rgba(110, 176, 90, 0.1);
    color: var(--primary-green);
    border: 1px solid rgba(110, 176, 90, 0.3);
}

/* Match dashboard theme */
body {
    background-color: var(--light-bg) !important;  /* This uses the existing variable */
}

/* Add this if you want to add the "back to website" link while keeping the centered logo */
.container {
    position: relative;
}

/* Footer background */
footer {
    background-color: white;
}