/* Make the spider chart big and centered */
.interest-chart-wrap{
  width: 100%;
  height: 380px;       /* bigger */
}

/* Picked interests boxes */
.picked-box{
  background: #fff;
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}
.picked-box:hover{
  transform: translateY(-1px);
  box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.06);
}

/* Modal cards */
.interest-card {
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}
.interest-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.06);
}
.interest-check { opacity: .25; }

.interest-checkbox:checked + .interest-card {
  border-color: rgba(105,108,255,.55) !important;
  box-shadow: 0 0.4rem 1rem rgba(105,108,255,.15);
}
.interest-checkbox:checked + .interest-card .interest-check {
  opacity: 1;
}


/* ===== Modal selection highlight (robust) ===== */

.interest-card{
  cursor: pointer;
  border: 1px solid rgba(0,0,0,.12);
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease, background-color .08s ease;
}

.interest-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.06);
}

/* icon default */
.interest-check{
  opacity: .25;
}

/* Fallback (works if input is directly before the card) */
.interest-checkbox:checked + .interest-card{
  border-color: rgba(105,108,255,.75) !important;
  box-shadow: 0 0.4rem 1rem rgba(105,108,255,.18) !important;
  background: rgba(105,108,255,.06);
}
.interest-checkbox:checked + .interest-card .interest-check{
  opacity: 1;
}

/* Modern robust (works even if structure changes) */
label:has(.interest-checkbox:checked) .interest-card{
  border-color: rgba(105,108,255,.75) !important;
  box-shadow: 0 0.4rem 1rem rgba(105,108,255,.18) !important;
  background: rgba(105,108,255,.06);
}
label:has(.interest-checkbox:checked) .interest-check{
  opacity: 1;
}

/* Optional: show "selected" outline stronger */
label:has(.interest-checkbox:checked) .interest-card:focus-within{
  outline: 2px solid rgba(105,108,255,.35);
  outline-offset: 2px;
}
/* chart size */
.interest-chart-wrap{
  max-width: 720px;
  height: 360px;
  margin: 0 auto;
}

/* picked box style */
.picked-box{
  background: #fff;
}

/* modal selection cards */
.interest-card{
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}

.interest-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.06);
}

.interest-check{
  opacity: .25;
}

/* ✅ This is the key: input immediately followed by .interest-card */
.interest-checkbox:checked + .interest-card{
  border-color: rgba(105,108,255,.55) !important;
  box-shadow: 0 0.4rem 1rem rgba(105,108,255,.15);
}

.interest-checkbox:checked + .interest-card .interest-check{
  opacity: 1;
}