/* Hide elements with the .hidden class */
.hidden {
    display: none !important;
}

/* Style active navigation links */
.header__nav ul li a.active {
    color: var(--color-accent);
    text-decoration: underline;
}

/* Style disabled buttons */
.button:disabled {
    background-color: var(--color-secondary);
    color: var(--color-background);
    cursor: not-allowed;
}

/* Style hovered cards */
.card:hover {
    border-color: var(--color-accent);
}

/* Style focused form fields */
.form__field:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Light blue shadow */
}

/* Style invalid form fields */
.form__field:invalid {
    border-color: #dc3545; /* Red */
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.5); /* Light red shadow */
}