/* Layout: 3 naast elkaar met Bootstrap grid */
.show-equipment.row > [class*="col-"] {
    display: flex;
    justify-content: center;
}

/* Kaartje */
.equip-card {
    --equip-yellow: #0f2a43 ;
    --equip-yellow-bg: #0f2a43 ;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    text-align: center;
    cursor: pointer;

    padding: 10px 8px;
    border-radius: 12px;
    transition: box-shadow .15s ease, transform .05s ease;
}

/* Icoon */
.equip-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
    display: block;
}

/* Titel en prijs */
.equip-name {
    font-weight: 600;
    margin: 2px 0 0;
}

.equip-price {
    color: #6b7280;
    font-size: .9rem;
    margin: 0;
}

/* Verborgen native checkbox */
.equip-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* Custom checkbox-kwadraat */
.equip-check {
    position: relative;
    width: 26px;
    height: 26px;
    border: 2px solid var(--equip-yellow);
    border-radius: 6px;
    display: inline-block;
    transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}

/* Checkmark */
.equip-check::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 5px;
    width: 10px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
    opacity: 0;
    transition: opacity .15s ease;
}

/* Gecheckt-staat */
.equip-input:checked + .equip-check {
    background: var(--equip-yellow-bg);
    box-shadow: inset 0 0 0 2px var(--equip-yellow);
}

.equip-input:checked + .equip-check::after {
    opacity: 1;
}

/* Optionele highlight van de hele kaart als hij geselecteerd is */
.equip-input:checked ~ .equip-name {
    color: #fff;
}