/* Task 1: "Typ ciasta" radio selector inside combo product list cards.
   Uses a dedicated class (NOT .product-combo-radio__option) so these radios
   do not collide with the existing delegated change handlers in
   product-popup-1.js / product-popup-2.js / wp-new.js. Styling mirrors the
   site's radio look (green active state). */
   .combo-typ-ciasta-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.combo-typ-ciasta-radio__option {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.combo-typ-ciasta-radio__option input {
    display: none;
}

.combo-typ-ciasta-radio__option span {
    display: block;
    border-radius: 10px;
    border: solid 1px var(--border-color);
    padding: 6px 10px;
    text-align: center;
    font-size: 14px;
    line-height: 1.1;
    color: var(--color-black);
    cursor: pointer;
    white-space: nowrap;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}

.combo-typ-ciasta-radio__option input:checked ~ span {
    background: #E67B66;
    border-color: #E67B66;
    color: var(--color-white);
}

@media (min-width: 992px) {
    .combo-typ-ciasta-radio__option:hover span {
        border-color: var(--color-green);
    }
}

/* --- Fix: double scrollbar on the combo detail popup ---
   The theme rule `#product-combo .product_combo_output .product-card__right`
   (max-height:80vh; overflow:scroll) ALSO matches the DETAIL card's inner
   .product-card__right, because the detail is loaded inside .product-card__left.
   So the detail content scrolls inside itself (80vh) WHILE .product-card__left
   also scrolls (75vh) -> two nested scrollbars. Neutralise overflow only for the
   inner (detail) panel; the outer combo list (#list-combo-data-right) is NOT a
   descendant of .product-card__left, so it keeps its own scroll. */
#product-combo .product-card__left .product-card_combo .product-card__right {
    max-height: none;
    overflow: visible;
}

#product-combo .product-card__grid .product-card__left {
    overflow-y: auto;
}

/* The combo list (right column) got taller because of the typ-ciasta radios.
   Its theme rule sets max-height:80vh, which pushes the last card under the
   black bottom bar (so it "won't scroll"). Match the working left panel height
   and force it via 2 IDs (highest specificity -> beats style.css regardless of
   load order). */
#product-combo #list-combo-data-right {
    /* push the panel (and its scrollbar) down so it starts below the close (X)
       button; reduce the height by the same amount so the bottom stays put. */
    margin-top: 34px;
    max-height: calc(75vh - 34px);
    overflow-y: auto;
    overflow-x: hidden;
}

@media (max-width: 768px) {
    #product-combo.popup-content .product-card__grid {
        overflow-y: auto;
        overflow-x: hidden;
    }
    #product-combo .product-card__grid .product-card__left,
    #product-combo #list-combo-data-right {
        max-height: none;
        overflow: visible;
        margin-top: 0;
    }
}

/* Task 2: Mobile bottom bar — price + Zmienić + Zmień skład in one row (ursynow, < 768px) */
.combo-product__bottom {
    display: none;
}

@media (max-width: 767px) {
    .combo-product__bottom {
        display: flex;
        align-items: center;
        gap: 8px;
        padding-top: 6px;
    }

    .combo-product__bottom .combo-product__price {
        flex: 1;
        margin: 0;
    }

    .combo-product__bottom .change-composition-button {
        flex-shrink: 0;
        padding: 6px 12px;
        font-size: 13px;
        white-space: nowrap;
    }

    /* Hide original price block and arrow when the bottom bar is present */
    .combo-product:has(.combo-product__bottom) .wrapper_product_info_combo {
        display: none;
    }

    .combo-product:has(.combo-product__bottom) > .combo-product__arrow {
        display: none;
    }

    /* Suppress the absolute-positioned Zmienić button in favour of the bottom bar */
    .combo-product:has(.combo-product__bottom) > .open_popup_combo_list_button {
        display: none !important;
    }

    /* Remove extra padding-bottom that was added for the absolute button */
    .combo-product:has(.combo-product__bottom).open_popup_combo_list {
        padding-bottom: 10px;
    }
}