/* ========================================================
   Product Addons — Compact pill layout
   Работи САМО заедно с addon_compact.js inline code!
   ======================================================== */

.product-addon-group {
    border-top: 0px solid #eee !important;
    padding: 10px !important;
    margin-top: 5px !important;
}

.product-options-meta {
    padding-left: 10px !important;
    margin-bottom: 7px !important;
}

.product-addon-group .product-options-meta {
    padding-left: 0 !important;
    margin-bottom: 7px !important;
}

.product-addon-group .product-options-meta h4 {
    color: #00aeef !important;
    font-size: 13px !important;
    font-weight: bold !important;
    margin: 0 0 2px 0 !important;
    text-align: left !important;
}

.product-addon-group .product-options-meta p {
    color: #000000 !important;
    font-size: 11px !important;
    margin: 0 !important;
}

/* Pills контейнер (добавен от JS) */
.hop-addon-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 8px !important;
}

/* Всеки pill wrapper */
.hop-addon-pill {
    position: relative !important;
}

.hop-addon-pill input[type="radio"],
.hop-addon-pill input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

.hop-addon-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    border: 1px solid #ccc !important;
    background: #fff !important;
    font-size: 12px !important;
    font-weight: normal !important;
    font-style: normal !important;
    color: #333 !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
}

.hop-addon-label:hover {
    border-color: #00aeef !important;
    background: #f0faff !important;
}

.hop-addon-label .pill-price {
    color: #999 !important;
    font-size: 11px !important;
}

/* Избрана опция (чрез активен клас или checked input) */
.hop-addon-pill input:checked + .hop-addon-label,
.hop-addon-label--active {
    border-color: #00aeef !important;
    background: #e6f7fe !important;
    color: #007ab5 !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(0, 174, 239, 0.1) !important;
}

.hop-addon-pill input:checked + .hop-addon-label .pill-price,
.hop-addon-label--active .pill-price {
    color: #007ab5 !important;
}