/**
 * Way2Rentals Card Selectable - Clickable card with hover and selected states
 * A layout-agnostic base for any selectable card (payment methods, plans, etc.)
 *
 * Selected state via:
 *   - CSS :has(input:checked) for radio/checkbox cards (automatic)
 *   - .selected class for non-input use cases (e.g. link mode, JS toggle)
 *
 * @package Way2Rentals
 * @since 2.2.0
 */

.w2r-card-selectable {
    border: 2px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--color-bg-card);
}

.w2r-card-selectable:hover {
    border-color: var(--color-btn-bg);
    box-shadow: var(--shadow-main);
}

.w2r-card-selectable.selected,
.w2r-card-selectable:has(input[type="radio"]:checked),
.w2r-card-selectable:has(input[type="checkbox"]:checked) {
    border-color: var(--color-btn-bg);
    background-color: var(--color-bg-selected);
}

/* Radio/checkbox inputs inside selectable cards */
.w2r-card-selectable input[type="radio"],
.w2r-card-selectable input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--color-btn-bg);
}