.card-selector {
  display: grid !important;
  gap: 0px !important;
}

.card-selector > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0 !important;
  border-right-width: calc(1px * var(--tw-divide-x-reverse)) !important;
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))) !important;
  --tw-divide-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-divide-opacity, 1));
}

.card-selector {
  border-width: 0px !important;
  grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)) !important;
}

.card-selector > div {
  width: 100%;
}

.card-selector label {
  position: relative !important;
  display: block !important;
  cursor: pointer;
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}

@media (prefers-color-scheme: dark) {
  .card-selector label {
    --tw-bg-opacity: 1;
    background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
  }
}

.card-selector label {
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.card-selector > div:first-child > label {
  border-top-left-radius: 0.5rem !important;
  border-bottom-left-radius: 0.5rem !important;
}

.card-selector > div:last-child > label {
  border-top-right-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
}

.card-selector label .flex {
  flex-direction: column;
  gap: 0 !important;
}

.card-selector input[type="radio"] {
  display: none !important;
  z-index: 1;
}

.card-selector label:hover {
  border-color: #fcd34d;
  box-shadow: 0 0 0 1px rgba(252, 211, 77, 0.3);
}

.card-selector input[type="radio"]:checked + div {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
  --tw-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
  --tw-shadow-colored: inset 0 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (prefers-color-scheme: dark) {
  .card-selector input[type="radio"]:checked + div {
    --tw-bg-opacity: 1;
    background-color: rgb(146 64 14 / var(--tw-bg-opacity, 1));
  }
}

.card-selector input[type="radio"]:checked + div {
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.card-selector input[type="radio"]:checked ~ label {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
  --tw-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
  --tw-shadow-colored: inset 0 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (prefers-color-scheme: dark) {
  .card-selector input[type="radio"]:checked ~ label {
    --tw-bg-opacity: 1;
    background-color: rgb(146 64 14 / var(--tw-bg-opacity, 1));
  }
}

.card-selector > div:first-child input[type="radio"]:checked + div {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.card-selector > div:last-child input[type="radio"]:checked + div {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.card-selector input[type="radio"]:checked ~ label {
  --tw-bg-opacity: 1;
  background-color: rgb(2 132 199 / var(--tw-bg-opacity, 1));
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (prefers-color-scheme: dark) {
  .card-selector input[type="radio"]:checked ~ label {
    --tw-bg-opacity: 1;
    background-color: rgb(21 94 117 / var(--tw-bg-opacity, 1));
  }
}

.card-selector input[type="radio"]:focus + div {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f59e0b;
}

.card-selector .flex.flex-col.items-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0.5rem;
}

.card-selector svg {
  margin-bottom: 0.75rem;
  width: -moz-fit-content;
  width: fit-content;
}

.card-selector span.mt-2 {
  text-align: center;
  font-weight: 500;
}

.no-border-section {
  border-width: 0px !important;
  background-color: transparent !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}

.no-border-section .fi-section-content {
  background-color: transparent !important;
  padding: 0px !important;
  /* Optional, if content wrapper has a background */
}