/* Styling for the UL container */
.forms-list {
    list-style-type: none; /* Remove default bullets */
    margin: 20px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Add space between list items */
    align-items: center; /* Center align list items */
}

/* Styling for each list item */
.form-link {
    width: 100%;
    max-width: 400px; /* Limit the width of each link */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Styling for the anchor links */
.form-link a {
    display: block; /* Make the entire block clickable */
    background-color: var(--color-background);
    color: var(--color-primary);
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
    padding: 15px 20px;
    border: 1px solid var(--primary-300); /* Subtle border */
    border-radius: 10px; /* Rounded corners */
    text-align: center; /* Center-align text */
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Hover effect for the links */
.form-link a:hover {
    background-color: var(--gray); /* Blue background */
    transform: translateY(-2px); /* Lift the button slightly */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Stronger shadow */
}

/* Focus and active states */
.form-link a:focus,
.form-link a:active {
    background-color: var(--gray);
    outline: none;
    border-color: #0056b3; /* Darker blue border */
    box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.5); /* Blue focus ring */
    transform: translateY(-1px); /* Slight lift */
}

form.faction-info label:has(+ input[required])::after,
form.faction-info label:has(+ textarea[required])::after,
form.faction-info label:has(+ select[required])::after {
    content: " *";
    color: #ff2727;
}