html {
}

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

body {
  margin: auto;
}

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

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

[value="itaxb-radio"]:checked ~ .cardsxb .cardxb:not([data-category="itaxb-radio"]), /* Changed ita-radio to itaxb-radio */
[value="fraxb-radio"]:checked ~ .cardsxb .cardxb:not([data-category="fraxb-radio"]), /* Changed fra-radio to fraxb-radio */
[value="polxb-radio"]:checked ~ .cardsxb .cardxb:not([data-category="polxb-radio"]) /* Changed pol-radio to polxb-radio */

{ 
  display: none;
  animation: fadeOut .25s;
}
[value="postxb-radio"]:checked ~ .cardsxb .cardxb:not([data-category="postxb-radio"]) {
  display: none;
  animation: fadeOut .25s;

[value="itaxb-radio"]:not(:checked) ~ .cardsxb .cardxb[data-category="itaxb-radio"], /* Changed ita-radio to itaxb-radio */
[value="fraxb-radio"]:not(:checked) ~ .cardsxb .cardxb[data-category="fraxb-radio"], /* Changed fra-radio to fraxb-radio */
[value="polxb-radio"]:not(:checked) ~ .cardsxb .cardxb[data-category="polxb-radio"] /* Changed pol-radio to polxb-radio */

{
  animation: fadeIn .25s;
}
[value="postxb-radio"]:not(:checked) ~ .cardsxb .cardxb[data-category="postxb-radio"] {
  animation: fadeIn .25s;
}