/* =============  GROEP LABELS  ============= */
.bb-attr{ margin: 18px 0 24px; border: none;}
.bb-attr__label{
  display:flex; align-items:center; gap:8px;
  font-weight:700; color:#0f172a; margin:0 0 12px;
}

/* Alleen bij MAAT een oranje infodot */
.bb-attr[data-attribute_name="attribute_pa_maat"] .bb-attr__label::after{
  content:""; width:10px; height:10px; border-radius:999px; background:#ff5a00;
  display:inline-block; transform:translateY(-1px);
}

/* =============  TEGELS  ============= */
.bb-attr__group{ display:flex; flex-wrap:wrap; gap:14px; }
.bb-check{
  position:relative;
  display:flex; align-items:center;
  justify-content:center;
  min-width: 168px; min-height: 78px;
  padding: 12px 16px 38px;               /* extra ruimte voor statusbalk */
  border:1.5px solid #e9e9e9; border-radius:16px;
  background:#fff; cursor:pointer; user-select:none;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  transition:.18s ease;
}
.bb-check:hover{ border-color:#dadada; transform:translateY(-1px); }
.bb-check.is-selected{
  border:2px solid #ff5a00;
  box-shadow:0 0 0 3px rgba(255,90,0,.12) inset;
}

/* Make selected state unmistakable and override theme */
.bb-check.is-selected{
  border:2px solid #ff5a00 !important;
  box-shadow:0 0 0 3px rgba(255,90,0,.12) inset !important;
}
.bb-check.is-selected:hover{ border-color:#ff5a00 !important; }
.bb-check.is-selected .bb-check__text{ color:#ff5a00; }

/* Ensure the custom tick is visible */
.bb-check.is-selected .bb-check__box{ border-color:#ff5a00; background:#ff5a00; }
.bb-check.is-selected .bb-check__box::after{ opacity:1; }

/* Also show selection when focused via keyboard */
.bb-check:focus-within{ outline:2px solid rgba(255,90,0,.35); outline-offset:2px; }

.bb-check.is-selected::after{ content:none !important; }
/* Oranje check-badge rechtsboven */
/* Removed per instructions */

.bb-check.is-disabled{ opacity:.55; cursor:not-allowed; filter:grayscale(.08); }

/* Tekst */
.bb-check__text{
  font-size:16px; font-weight:700; color:#111827; letter-spacing:.1px;
}

/* Custom visual checkbox */
.bb-check__box{
  position:relative;
  display:none;
  width:18px; height:18px;
  border:2px solid #d7d7d7;
  border-radius:4px;
  background:#fff;
  margin-right:10px;
  box-sizing: border-box;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.bb-check.is-selected .bb-check__box {
  border-color:#ff5a00; background:#ff5a00;
}
.bb-check__box::after{
  content:""; position:absolute; left:4px; top:2px; width:8px; height:4px;
  border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg);
  opacity:0; transition:opacity .18s ease;
}
.bb-check.is-selected .bb-check__box::after{ opacity:1; }

/* Hide native checkbox input */
.bb-check__input{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:1px; height:1px;
  margin:0; padding:0; border:0;
}

/* =============  STATUSBALK ONDER  ============= */
.bb-check::before{
  content:"Op voorraad";
  position:absolute; left:0; right:0; bottom:0; height:28px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; color:#4b5563;
  background:#f3f4f6; border-bottom-left-radius:16px; border-bottom-right-radius:16px;
}
.bb-check.is-disabled::before{
  content:"Niet op voorraad"; background:#eeeeee; color:#6b7280;
}

/* =============  KLEURTEGELS  ============= */
/* Brede kleurband bovenaan de kaart */
.bb-attr[data-attribute_name="attribute_pa_hoofdkleur"] .bb-check{
  padding-top:18px;                         /* ruimte voor band */
}
.bb-attr[data-attribute_name="attribute_pa_hoofdkleur"] .bb-check::marker { content: none; }
.bb-attr[data-attribute_name="attribute_pa_hoofdkleur"] .bb-check::before{
  /* statusbalk blijft gewoon; we voegen hier een extra band toe met ::after */
  content:"Op voorraad";
}
.bb-attr[data-attribute_name="attribute_pa_hoofdkleur"] .bb-check::after{
  /* kleurband */
  content:"";
  display: none;
  position:absolute; left:12px; right:12px; top:12px; height:24px;
  border-radius:10px; border:1px solid rgba(0,0,0,.06);
  background:linear-gradient(45deg,#fafafa,#ececec); /* fallback */
}

/* Kleur mapping per value (vul aan met je slugs/kleuren) */
label[for="attribute_pa_hoofdkleur_geel"]::after       { background:#E9B11A; }
label[for="attribute_pa_hoofdkleur_licht-blauw"]::after{ background:#74B3E9; }
label[for="attribute_pa_hoofdkleur_zwart"]::after      { background:#000000; }
label[for="attribute_pa_hoofdkleur_oranje"]::after     { background:#FF7A00; }

/* =============  RESPONSIVE  ============= */
@media (max-width:640px){
  .bb-check{ min-width: calc(50% - 7px); }
}