/* Checkboxes en radiobuttons met afbeeldingen - afbeelding links van tekst (NIET in modal) */
/* OVERSCHRIJFT: main.css .product-bar .choice-wrapper styling */

/* Items container - GRID LAYOUT (overschrijft flex van main.css) */
/* BELANGRIJK: Target zowel .active ALS .completed (completed wordt gezet na selectie) */
.product-bar .option-wrapper.active > .choice-wrapper,
.product-bar .option-wrapper.completed > .choice-wrapper {
    display: grid !important; /* Overschrijft display: flex */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 15px !important;
    margin: 15px 0 !important;
    flex-wrap: unset !important; /* Reset main.css */
    flex-direction: unset !important; /* Reset main.css */
}

.product-bar .option-wrapper.active > .choice-wrapper > .item,
.product-bar .option-wrapper.completed > .choice-wrapper > .item {
    margin: 0 !important;
    max-width: none !important; /* Overschrijft max-width: 28% */
    flex: unset !important; /* Reset flex: 0 0 28% */
    position: relative !important;
}

/* Label styling - FLEX ROW (afbeelding links) */
.product-bar .option-wrapper.active > .choice-wrapper > .item > label,
.product-bar .option-wrapper.completed > .choice-wrapper > .item > label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 15px 20px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    background: #fff !important;
    min-height: 90px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important; /* Overschrijft height: 100% */
}

.product-bar .option-wrapper.active > .choice-wrapper > .item > label:hover,
.product-bar .option-wrapper.completed > .choice-wrapper > .item > label:hover {
    border-color: #2f9493 !important;
    box-shadow: 0 2px 8px rgba(47, 148, 147, 0.15) !important;
}

.product-bar .option-wrapper.active > .choice-wrapper > .item input:checked + label,
.product-bar .option-wrapper.completed > .choice-wrapper > .item input:checked + label {
    border-color: #2f9493 !important;
    background: #f0f9f9 !important;
}

/* Afbeelding links - vaste breedte */
.product-bar .option-wrapper.active > .choice-wrapper > .item > label img,
.product-bar .option-wrapper.completed > .choice-wrapper > .item > label img,
.product-bar .option-wrapper.active > .choice-wrapper > .item > label a img,
.product-bar .option-wrapper.completed > .choice-wrapper > .item > label a img {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
    order: -2 !important;
}

/* <a> tag om afbeelding moet ook flexbox respecteren */
.product-bar .option-wrapper.active > .choice-wrapper > .item > label a,
.product-bar .option-wrapper.completed > .choice-wrapper > .item > label a {
    order: -2 !important;
    flex-shrink: 0 !important;
    line-height: 0 !important; /* Prevent extra spacing */
}

/* Tekst container - neemt alle beschikbare ruimte */
.product-bar .option-wrapper.active > .choice-wrapper > .item > label b,
.product-bar .option-wrapper.completed > .choice-wrapper > .item > label b {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: left !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    white-space: normal !important;
}

.product-bar .option-wrapper.active > .choice-wrapper > .item > label > span:not(.infobox):not(.popover-custom),
.product-bar .option-wrapper.completed > .choice-wrapper > .item > label > span:not(.infobox):not(.popover-custom) {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: left !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

/* PDF link en infobox rechts */
.product-bar .option-wrapper.active > .choice-wrapper > .item > label #choice-pdf,
.product-bar .option-wrapper.completed > .choice-wrapper > .item > label #choice-pdf,
.product-bar .option-wrapper.active > .choice-wrapper > .item > label .popover-custom,
.product-bar .option-wrapper.completed > .choice-wrapper > .item > label .popover-custom,
.product-bar .option-wrapper.active > .choice-wrapper > .item > label .infobox,
.product-bar .option-wrapper.completed > .choice-wrapper > .item > label .infobox {
    order: 1 !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

/* Responsive aanpassingen voor choice-wrapper */
@media (max-width: 768px) {
    .product-bar .option-wrapper.active > .choice-wrapper,
    .product-bar .option-wrapper.completed > .choice-wrapper {
        grid-template-columns: 1fr !important;
    }

    .product-bar .option-wrapper.active > .choice-wrapper > .item > label img,
    .product-bar .option-wrapper.completed > .choice-wrapper > .item > label img {
        width: 50px !important;
        height: 50px !important;
    }

    .product-bar .option-wrapper.active > .choice-wrapper > .item > label,
    .product-bar .option-wrapper.completed > .choice-wrapper > .item > label {
        gap: 10px !important;
        padding: 8px 10px !important;
    }

    .product-bar .option-wrapper.active > .choice-wrapper > .item > label b,
    .product-bar .option-wrapper.completed > .choice-wrapper > .item > label b {
        font-size: 13px !important;
    }
}

@media (min-width: 1200px) {
    .product-bar .option-wrapper.active > .choice-wrapper,
    .product-bar .option-wrapper.completed > .choice-wrapper {
        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)) !important;
    }
}

/* Modal 20% kleiner maken (80% van origineel) */

/* Modal content - breedte verkleinen */
.option-wrapper .modal .content {
    max-width: 640px !important; /* 800px * 0.80 = 640px */
    padding: 16px !important; /* 20px * 0.80 = 16px */
}

/* Title in modal kleiner */
.option-wrapper .modal .title-modal {
    font-size: 16px !important; /* kleinere font */
    padding: 12px 16px !important;
}

.option-wrapper .modal .title-modal .JS-title {
    font-size: 16px !important;
}

/* Close button kleiner */
.option-wrapper .modal .close-modal {
    width: 9.45px !important; /* 11.807 * 0.80 */
    height: 9.45px !important;
}

/* Choice wrapper padding aanpassen */
.option-wrapper .modal .choice-wrapper {
    padding: 12px !important;
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
}

/* Items 20% kleiner */
.option-wrapper .modal .choice-wrapper .item {
    width: calc(25% - 10px) !important; /* 4 items per rij, met gap */
    min-width: 120px !important;
    margin: 0 !important;
    padding: 6px !important;
}

.option-wrapper .modal .choice-wrapper .item label {
    padding: 8px !important;
    font-size: 12px !important; /* kleinere tekst */
}

/* Images in items kleiner */
.option-wrapper .modal .choice-wrapper .item img {
    max-width: 100%;
    height: auto;
    max-height: 80px !important; /* 100px * 0.80 */
}

.option-wrapper .modal .choice-wrapper .item label b {
    font-size: 12px !important;
    line-height: 1.3;
}

/* Radio buttons kleiner */
.option-wrapper .modal .choice-wrapper .item input[type="radio"] {
    width: 16px !important; /* 20px * 0.80 */
    height: 16px !important;
}

/* Responsive aanpassingen */
@media (max-width: 1200px) {
    .option-wrapper .modal .content {
        max-width: 600px !important; /* iets groter op medium screens */
    }

    .option-wrapper .modal .choice-wrapper .item {
        width: calc(25% - 8px) !important; /* 4 items per rij */
    }
}

@media (max-width: 768px) {
    .option-wrapper .modal .content {
        max-width: 90% !important; /* bijna full width op mobile */
    }

    .option-wrapper .modal .choice-wrapper .item {
        width: calc(33.33% - 8px) !important; /* 3 items per rij op mobile */
        min-width: 80px !important;
    }

    .option-wrapper .modal .choice-wrapper .item img {
        max-height: 50px !important;
    }
}

@media (max-width: 480px) {
    .option-wrapper .modal .choice-wrapper .item {
        width: calc(50% - 8px) !important; /* 2 items per rij op zeer kleine screens */
    }
}

/* Action bar - button en input uitgelijnd ondanks label */
.product-bar .action-bar {
    align-items: flex-end !important;
}

.product-bar .action-bar .form-group.Qty {
    margin-bottom: 0 !important;
}