.card-custom {
  transition: box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out, transform 0.3s ease-in-out;
  cursor: pointer; /* Indicate clickable */
}

.card-custom:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; /* Equivalent to hover:shadow-md */
  transform: translateY(-2px); /* Slight lift on hover */
}

/* Highlight for selected card */
.card-custom.selected {
  border-color: #007bff !important; /* Primary blue border */
  box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25) !important; /* Bootstrap focus-ring like shadow */
  transform: scale(1.02); /* Slightly larger */
}

/* Icon styling */
.payment-icon {
  font-size: 3.5rem; /* Larger icon size */
  margin-bottom: 0.75rem; /* Space below icon */
  color: #343a40; /* Dark color for icons */
}