/* General Button Styling */
.button {
    width: 100%; /* Full width for all buttons */
    padding: 14px; /* Adequate padding for bigger buttons */
    font-size: 16px; /* Standard font size */
    font-weight: bold; /* Bold text */
    text-align: center; /* Center-align the button text */
    border-radius: 8px; /* Rounded corners */
    border: none; /* Remove default border */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth hover effect */
    display: block; /* Ensure it behaves like a block element */
    text-decoration: none; /* Remove underline for links styled as buttons */
    margin-top: 10px; /* Space between buttons */
}

/* Button Colors */

/* Green Button (For Login, Register, etc.) */
.button-green {
    background-color: #00e6ac; /* Green background */
    color: black; /* Text color */
}

.button-green:hover {
    background-color: #00cfa0; /* Slightly darker green on hover */
    transform: translateY(-2px); /* Slight lift effect */
}

/* Red Button (For Forgot Password, etc.) */
.button-red {
    background-color: #ff4040; /* Red background */
    color: white; /* White text */
}

.button-red:hover {
    background-color: #e63333; /* Darker red on hover */
    transform: translateY(-2px); /* Slight lift effect */
}

/* Black Button (For general use) */
.button-black {
    background-color: #333; /* Black background */
    color: white; /* White text */
}

.button-black:hover {
    background-color: #222; /* Darker black on hover */
    transform: translateY(-2px); /* Slight lift effect */
}

/* Button Styles for Links */
.button-link {
    background-color: transparent; /* Transparent background */
    color: #00b999; /* Green color for links */
    font-size: 16px; /* Font size */
    text-decoration: none; /* Remove underline */
}

.button-link:hover {
    text-decoration: underline; /* Underline on hover */
    color: #00d1a0; /* Darker green on hover */
}

/* Responsive Button Sizing */
@media (max-width: 480px) {
    .button {
        font-size: 14px; /* Adjust font size on small screens */
        padding: 12px; /* Smaller padding for compact buttons */
    }
}