/* Styles for the button */
.button {
    background-color: transparent; /* Transparent background initially */
    color: var(--button-text-color); /* Blue text color */
    border: 2px solid var(--button-border-color); /* Blue border */
    padding: 12px 24px; /* Padding for buttons */
    font-size: 1em; /* Font size for buttons */
    border-radius: 12px; /* Increased border radius */
    text-align: center;
    cursor: pointer; /* Pointer cursor for buttons */
    transition: background-color 0.1s, color 0.1s, box-shadow 0.1s, transform 0.1s; /* Smooth transition for background, text color, shadow, and transform */
    text-decoration: none; /* Remove underline from links */
    font-weight: bold; /* Bold text */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for 3D effect */
    /* Ensure the button scales around its center */
    transform-origin: center;
}

/* Hover styles for the button */
.button:hover {
    background-color: var(--button-hover-background-color); /* Blue background on hover */
    color: var(--button-hover-text-color); /* White text color on hover */
    font-size: 1.02em; /* Slightly increase font size on hover */
    border-radius: 14px; /* Slightly more rounded corners on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
    transform: scale(1.05); /* Slightly enlarge the button on hover without affecting adjacent elements */
}

/* Disabled button styles */
.button:disabled {
    background-color: var(--button-disabled-background-color);
    color: var(--button-disabled-text-color);
    border: 2px solid var(--button-disabled-background-color);
    cursor: not-allowed; /* Not-allowed cursor for disabled buttons */
    opacity: 0.6; /* Slightly transparent to indicate disabled state */
    pointer-events: none; /* Prevent click events on disabled buttons */
}