/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 2.0.2
*/

/* ===== ФИЛЬТР ЦВЕТА ===== */

/* Контейнер списка цветов */
.blend-color-filter .wc-block-product-filter-checkbox-list__items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Каждый пункт */
.blend-color-filter .wc-block-product-filter-checkbox-list__item {
    margin: 0;
    padding: 0;
}

/* Кликабельная область под кружок */
.blend-color-filter .wc-block-product-filter-checkbox-list__label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;   /* под диаметр круга + обводки */
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
}

/* Базовый цветной круг 24px + белый бордер 2px */
.blend-color-filter .blend-color-dot {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #ffffff;       /* внутренний белый контур */
    box-sizing: border-box;
}

/* Внешний серый контур 1px вокруг круга */
.blend-color-filter .blend-color-dot::after {
    content: "";
    position: absolute;
    top: -3px;   /* 2px белого бордера + 1px серого */
    left: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    border-radius: 50%;
    border: 1px solid #cbcbcb;       /* внешний контур по умолчанию */
    box-sizing: border-box;
}

/* ВЫБРАННЫЙ цвет – меняем цвет внешней обводки */
.blend-color-filter .blend-selected .blend-color-dot::after {
    border-color: #7e7e7e;
}

/* === ВАЖНО: прячем чекбокс и текст ТОЛЬКО когда JS всё отрисовал === */

/* Скрываем чекбокс и галочку */
.blend-color-filter.blend-color-ready
.wc-block-product-filter-checkbox-list__input-wrapper {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Скрываем текст названия цвета — остаются только кружки */
.blend-color-filter.blend-color-ready
.wc-block-product-filter-checkbox-list__text-wrapper {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


/* -------===== ФИЛЬТР РАЗМЕРОВ =====------- */

/* Контейнер списка размеров – сетка, как у Be Shop Attributes */
.blend-size-filter .wc-block-product-filter-checkbox-list__items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
}

/* Убираем отступы у элемента списка */
.blend-size-filter .wc-block-product-filter-checkbox-list__item {
    margin: 0;
    padding: 0;
}

/* Прячем стандартный чекбокс и галочку */
.blend-size-filter .wc-block-product-filter-checkbox-list__input-wrapper {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Кнопка-плашка размера */
.blend-size-filter .wc-block-product-filter-checkbox-list__label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 30px;
    padding: 0 10px;
    border-radius: 2px;
    border: 1px solid #cbcbcb;      /* рамка неактивного */
    box-sizing: border-box;
    cursor: pointer;
    background: #ffffff;

    /* Шрифт как на скрине */
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 30px;
    font-weight: 400;
    color: #000000;
}

/* Немного UI – при наведении лёгкое затемнение рамки */
.blend-size-filter .wc-block-product-filter-checkbox-list__label:hover {
    border-color: #b0b0b0;
}

/* Активный (выбранный) размер – рамка #7e7e7e */
.blend-size-filter
.wc-block-product-filter-checkbox-list__item.is-active
.wc-block-product-filter-checkbox-list__label {
    border-color: #7e7e7e;
}

/* На всякий случай – убираем подчёркивания и лишние эффекты */
.blend-size-filter .wc-block-product-filter-checkbox-list__label,
.blend-size-filter .wc-block-product-filter-checkbox-list__label:visited {
    text-decoration: none;
}