html {
}

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

body {
  margin: auto;
}

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

.cardxs { /* Changed .card to .cardxs */
  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="allxs-radio"]:checked ~ .cardsxs [data-category] { /* Changed value to allxs-radio and class to cardsxs */
  display: block;
}

[value="itaxs-radio"]:checked ~ .cardsxs .cardxs:not([data-category="itaxs-radio"]), /* Changed ita-radio to itaxs-radio */
[value="fraxs-radio"]:checked ~ .cardsxs .cardxs:not([data-category="fraxs-radio"]), /* Changed fra-radio to fraxs-radio */
[value="polxs-radio"]:checked ~ .cardsxs .cardxs:not([data-category="polxs-radio"]) /* Changed pol-radio to polxs-radio */
{ 
  display: none;
  animation: fadeOut .25s;
}
[value="postxs-radio"]:checked ~ .cardsxs .cardxs:not([data-category="postxs-radio"])
{ 
  display: none;
  animation: fadeOut .25s;
}

[value="itaxs-radio"]:not(:checked) ~ .cardsxs .cardxs[data-category="itaxs-radio"], /* Changed ita-radio to itaxs-radio */
[value="fraxs-radio"]:not(:checked) ~ .cardsxs .cardxs[data-category="fraxs-radio"], /* Changed fra-radio to fraxs-radio */
[value="polxs-radio"]:not(:checked) ~ .cardsxs .cardxs[data-category="polxs-radio"] /* Changed pol-radio to polxs-radio */
{
  animation: fadeIn .25s;
}

[value="postxs-radio"]:not(:checked) ~ .cardsxs .cardxs[data-category="postxs-radio"]
{
  animation: fadeIn .25s;
}