:root {
    --green: #A5CEBB; /* Green */
    --light-green: #d1e7dd; /* Light green */
    --light-gray: #f8f9fa; /* Light */
    --card-shadow-dark: 0 0.5rem 1rem rgba(0, 0, 0, 0.35);
    --card-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
    --card-shadow-light: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.card-radio {
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    border: none;
    padding: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: var(--card-shadow-light);
}

    .card-radio:hover {
        background-color: var(--light-gray);
        box-shadow: var(--card-shadow-dark) !important;
    }

input[type="radio"]:checked + label.card-radio {
    background-color: var(--light-green);
    border-color: var(--green);
    border: 0.15rem solid var(--green);
    box-shadow: var(--card-shadow);
}