html {
}
*, *:before, *:after {
  box-sizing: border-box; /* Ensures consistent box sizing across elements */
}

body {
  margin: auto;
}

.cards {
  display: block; /* Ensure cards are displayed vertically */
 margin: 0; /* No margin */
  padding: 0; /* No padding */

}

.card {
  text-align: left;
  margin: 0.1em 0; /* Added margin for spacing between rows */
  padding: 0.1rem; /* Added padding for touch targets */
}

/* Styles for radio buttons */
input[type="radio"] {
  display: none; /* Hide the default radio button */

}

label {

  cursor: pointer; /* Change cursor to pointer for labels */
  padding: 5px 5px; /* Padding to create clickable area */
  margin: 0 5px; /* Margin for spacing between buttons */
  border-radius: 5px; /* Rounded corners */
  font-weight: bold; /* Make text bold by default */
  background: black; /* Default background for non-selected options */
  color: white; /* Default text color */
  transition: background-color .3s; /* Smooth transition for background color */
}

/* Active state for radio buttons */
input[type="radio"]:checked + label {
  background: #ff6600; /* Set background to #ff6600 when selected */
  color: white; /* Keep text color white */
}

/* Radio button style for unselected options */
input[type="radio"]:not(:checked) + label {
  background: black; /* Black background for non-selected radio */
}

/* Keyframe animations */
@keyframes fadeIn {
   0% {opacity: 0;}
   100% {opacity: 1;} 
}
@keyframes fadeOut {
   0% {opacity: 1;}
   100% {opacity: 0;} 
}

/* RADIO BUTTON SELECTORS */
[value="all-radio"]:checked ~ .cards [data-category] {
  display: block;

}

[value="buy"]:checked ~ .cards .card:not([data-category="buy"]),
[value="sell"]:checked ~ .cards .card:not([data-category="sell"]),
[value="red-radio"]:checked ~ .cards .card:not([data-category="red-radio"])
{ 
  display: none;
  animation: fadeOut .25s;
}

[value="buy"]:not(:checked) ~ .cards .card[data-category="buy"],
[value="sell"]:not(:checked) ~ .cards .card[data-category="sell"],
[value="red-radio"]:not(:checked) ~ .cards .card[data-category="red-radio"]
{
  animation: fadeIn .25s;
}