/* Base (unchecked): NO border + muted text */
.z-radio-card,
.z-radio-card-big {
  border: 1px solid var(--mantine-color-deepBlue-9);
  color: var(--mantine-color-deepBlue-9);
  background: var(--mantine-color-lightBlue-1);
  font-weight: 800;
  border-radius: 0; /* or 8px if you prefer */
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  opacity: 0.4;
}

/* size variants */
.z-radio-card {
  font-size: 20px;
  max-width: 90px;
  height: 42px;
}
.z-radio-card-big {
  font-size: 16px;
  height: 90px;
}

/* Selected state: add border + switch to deep blue + white bg */
.z-radio-card[data-checked],
.z-radio-card-big[data-checked] {
  border: 1px solid var(--mantine-color-deepBlue-9);
  color: var(--mantine-color-deepBlue-9);
  background: var(--mantine-color-lightBlue-1);
  opacity: 1;
}

/* Disabled state (optional) */
.z-radio-card[data-disabled],
.z-radio-card-big[data-disabled] {
  border: 1px solid var(--mantine-color-deepBlue-9);
  color: var(--mantine-color-deepBlue-9);
  background: var(--mantine-color-lightBlue-1);
  opacity: 0.4;
}

/* Accessible focus ring */
.z-radio-card:focus-visible,
.z-radio-card-big:focus-visible {
  outline: 3px solid
    color-mix(in sRGB, var(--mantine-color-deepBlue-9) 35%, transparent);
  outline-offset: 2px;
}

/* (Optional) ensure the dot uses deepBlue when checked */
.z-radio-card[data-checked] .mantine-Radio-icon,
.z-radio-card-big[data-checked] .mantine-Radio-icon {
  color: var(--mantine-color-deepBlue-9);
}

.z-vgrid .z-vcol:not(:first-of-type) {
  border-left: 1px solid var(--mantine-color-deepBlue-9);
  /* Optional: add padding for spacing */
  padding-left: 16px;
}

.z-grid-header {
  border-bottom: 1.5px solid var(--mantine-color-deepBlue-9);
}

.z-grid-row:not(:last-of-type) {
  border-bottom: 1px solid var(--mantine-color-deepBlue-9);
}

.z-grid-row-last {
  border-bottom: none !important;
}