.ta-hotspot-native-hidden{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.ta-hotspot-figure{position:relative;display:inline-block;max-width:100%;line-height:0;cursor:crosshair}
.ta-hotspot-figure img{display:block;max-width:100%;height:auto}
.ta-hotspot-zone{position:absolute;box-sizing:border-box;padding:0;min-width:44px;min-height:44px}

/* Single: geometrie is uitsluitend een onzichtbaar hit-testgebied. Geen rand, vlak,
   nummer of hovereffect vóór of na de keuze. */
.ta-hotspot[data-visibility="hidden-free"] .ta-hotspot-zone{
    border:0!important;background:transparent!important;box-shadow:none!important;
    opacity:0!important;pointer-events:none!important;cursor:crosshair
}
.ta-hotspot[data-visibility="hidden-free"] .ta-hotspot-num{display:none!important}
.ta-hotspot[data-visibility="hidden-free"] .ta-hotspot-legend{display:none!important}
.ta-hotspot-click-marker{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#2563eb;border:3px solid #fff;box-shadow:0 0 0 2px #1e40af;pointer-events:none;z-index:5}

/* Multiple: altijd een zichtbaar raster met nummers. */
.ta-hotspot[data-visibility="visible-grid"] .ta-hotspot-figure{cursor:default}
.ta-hotspot[data-visibility="visible-grid"] .ta-hotspot-zone{
    border:2px solid rgba(34,113,177,.9);background:rgba(34,113,177,.10);
    border-radius:0;cursor:pointer
}
.ta-hotspot[data-visibility="visible-grid"] .ta-hotspot-zone:hover{background:rgba(34,113,177,.20)}
.ta-hotspot[data-visibility="visible-grid"] .ta-hotspot-zone.is-selected{border-color:#d63638;background:rgba(214,54,56,.26)}
.ta-hotspot[data-visibility="visible-grid"] .ta-hotspot-zone .ta-hotspot-num{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    background:rgba(29,35,39,.85);color:#fff;min-width:30px;height:30px;line-height:30px;
    text-align:center;border-radius:50%;font-size:16px
}
.ta-hotspot[data-visibility="visible-grid"] .ta-hotspot-zone.is-selected .ta-hotspot-num{background:#d63638}
.ta-hotspot-legend{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px;line-height:1.4}
.ta-hotspot-legend .ta-hotspot-num{display:inline-block;background:#1d2327;color:#fff;min-width:20px;height:20px;line-height:20px;text-align:center;border-radius:50%;font-size:12px;margin-right:4px}
.ta-hotspot-zone.is-correct{border-color:#00a32a!important;background:rgba(0,163,42,.25)!important}
.ta-hotspot-zone.is-wrong{border-color:#d63638!important;background:rgba(214,54,56,.25)!important}


/* Reviewweergave voor verborgen single-hotspots. Tijdens beantwoorden blijft de
   zone onzichtbaar; uitsluitend nadat LearnDash zichtbare antwoordfeedback toont,
   wordt de juiste zone als groen kader getoond. */
.ta-hotspot[data-visibility="hidden-free"].is-review .ta-hotspot-zone[data-correct="1"]{
    opacity:1!important;display:block!important;border:4px solid #16a34a!important;
    background:rgba(22,163,74,.10)!important;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 5px rgba(22,163,74,.25)!important;
    pointer-events:none!important;z-index:4
}
.ta-hotspot[data-visibility="hidden-free"].is-review .ta-hotspot-zone[data-correct="1"] .ta-hotspot-num{display:none!important}