/* ============================================================
   КАРТОЧКА ТОВАРА: чекбокс опции в виде неоморфного переключателя
   (стиль из примера Uiverse by csemszepp, сжат до 76x30 под строку опции).

   Подключается только на product.php:
     <link rel="stylesheet" href="/assets/css/product-toggle.css?v=1">

   Как работает: input остаётся рабочим чекбоксом (визуально скрыт),
   состояние читается через input:checked + label, вся графика — на вложенных
   span'ах внутри label. Пересчёт цены и бонусов слушает change на самом
   input, поэтому в JS и в атрибутах ничего не меняется.

   Какая нужна разметка (это уже сделано в product.php):
     <div class="form__checkbox" data-required-group="option_X[]">
       <input type="checkbox" ...>
       <label for="...">
         <span class="neo-switch" aria-hidden="true">
           <span class="neo-indicator left"></span>
           <span class="neo-indicator right"></span>
           <span class="neo-button"></span>
         </span>
         <span class="neo-text">Название <span class="blue">(+100 RUB)</span></span>
       </label>
     </div>

   Два подводных камня, которые здесь уже учтены:
   1) в main.css у .form__checkbox label:before прописаны left: 0 и рамка —
      прежний квадратик галочки отключаем (display: none);
   2) в main.css есть ГЛОБАЛЬНОЕ правило * { z-index: 2 }, поэтому гнёздам
      задан z-index 2, а кнопке — 3 (иначе кнопка уходит под гнёзда).
   ============================================================ */

/* ---------- строка опции ---------- */

.product__price-list .form__checkbox {
    position: relative;
}

/* чекбокс остаётся в форме, но визуально скрыт (как было и до этого) */
.product__price-list .form__checkbox input[type=checkbox] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    z-index: -1;
}

.product__price-list .form__checkbox label {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0;
    cursor: pointer;
}

/* прежний квадратик галочки больше не нужен */
.product__price-list .form__checkbox label::before {
    display: none;
}

/* ---------- сам переключатель ---------- */

.product__price-list .form__checkbox label .neo-switch {
    --tg-hue: 220deg;
    --tg-accent: 122deg;
    --tg-w: 76px;
    --tg-dur: .6s;
    --tg-ease: cubic-bezier(1, 0, 1, 1);
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    width: var(--tg-w);
    height: calc(var(--tg-w) / 2.5);
    border-radius: var(--tg-w);
    background: hsl(var(--tg-hue) 14% 19%);
    box-shadow: inset 2px 2px 3px hsl(var(--tg-hue) 16% 9% / .95),
        inset -2px -2px 3px hsl(var(--tg-hue) 16% 42% / .65);
}

/* гнёзда */
.product__price-list .form__checkbox label .neo-indicator {
    position: absolute;
    z-index: 2;
    /* см. пункт 2 в шапке файла */
    width: 40%;
    height: 62%;
    box-shadow: inset 0 0 1px hsl(var(--tg-hue) 20% 10% / .6),
        inset 0 0 2px 1px hsl(var(--tg-hue) 20% 10% / .55),
        inset 0 0 3px 1px hsl(var(--tg-hue) 20% 45% / .5);
    transition: all var(--tg-dur) var(--tg-ease);
}

.product__price-list .form__checkbox label .neo-indicator.left {
    left: 9%;
    overflow: hidden;
    border-radius: 100px 0 0 100px;
    /* зелёное гнездо — слева */
    background: linear-gradient(180deg,
            hsl(142 95% 78%) 10%,
            hsl(142 100% 58%) 30%,
            hsl(var(--tg-accent) 90% 45%) 60%,
            hsl(var(--tg-accent) 90% 50%) 75%,
            hsl(var(--tg-accent) 90% 42%));
}

.product__price-list .form__checkbox label .neo-indicator.right {
    right: 9%;
    border-radius: 0 100px 100px 0;
    /* серое гнездо — справа */
    background-image: linear-gradient(180deg,
            hsl(var(--tg-hue) 12% 74%),
            hsl(var(--tg-hue) 12% 46%) 60%,
            hsl(var(--tg-hue) 12% 52%) 70%,
            hsl(var(--tg-hue) 12% 46%));
}

/* кнопка: выключено — слева, включено — уезжает вправо */
.product__price-list .form__checkbox label .neo-button {
    position: absolute;
    z-index: 3;
    /* должно быть выше гнёзд: см. пункт 2 в шапке файла */
    left: 4%;
    width: 55%;
    height: 82%;
    border-radius: 100px;
    background-image: linear-gradient(160deg, hsl(var(--tg-hue) 14% 90%) 40%, hsl(var(--tg-hue) 14% 62%) 70%);
    box-shadow: 1px 1px 2px hsl(var(--tg-hue) 18% 8% / .85),
        2px 3px 4px hsl(var(--tg-hue) 18% 8% / .5);
    transition: all var(--tg-dur) var(--tg-ease);
}

/* две «канавки» на кнопке — как в оригинале */
.product__price-list .form__checkbox label .neo-button::before,
.product__price-list .form__checkbox label .neo-button::after {
    content: "";
    position: absolute;
    top: 12%;
    width: 40%;
    height: 76%;
    border-radius: 100%;
}

.product__price-list .form__checkbox label .neo-button::before {
    left: 6%;
    background-image: linear-gradient(-50deg, hsl(var(--tg-hue) 14% 92%) 20%, hsl(var(--tg-hue) 14% 78%) 80%);
    box-shadow: inset 1px 1px 1px hsl(var(--tg-hue) 20% 88% / .7);
}

.product__price-list .form__checkbox label .neo-button::after {
    right: 6%;
    background-image: linear-gradient(-50deg, hsl(var(--tg-hue) 14% 92%) 20%, hsl(var(--tg-hue) 14% 68%) 80%);
    box-shadow: inset 1px 1px 2px hsl(var(--tg-hue) 20% 62% / .7);
}

/* ---------- состояния ---------- */

/* включено — кнопка уезжает вправо и открывает зелёное гнездо слева */
.product__price-list .form__checkbox input[type=checkbox]:checked + label .neo-button {
    left: 41%;
}

/* «вдавлено» то гнездо, которое закрыто кнопкой:
   слева при выключенном, справа при включённом */
.product__price-list .form__checkbox input[type=checkbox]:not(:checked) + label .neo-indicator.left,
.product__price-list .form__checkbox input[type=checkbox]:checked + label .neo-indicator.right {
    box-shadow: inset 0 0 3px hsl(var(--tg-hue) 20% 8% / 1),
        inset 6px 6px 4px hsl(var(--tg-hue) 20% 8% / .9),
        inset 6px 6px 6px hsl(var(--tg-hue) 20% 45% / .85);
}

/* опция «нет в наличии» — приглушаем всю строку */
.product__price-list .form__checkbox input[type=checkbox]:disabled + label {
    opacity: .45;
    cursor: default;
}

/* доступность: видимая рамка при навигации с клавиатуры */
.product__price-list .form__checkbox input[type=checkbox]:focus-visible + label .neo-switch {
    outline: 2px solid var(--primary1, #2bd228);
    outline-offset: 3px;
}

/* ---------- светлая тема: светлый неоморфизм ---------- */

body.light-theme .product__price-list .form__checkbox label .neo-switch {
    background: hsl(var(--tg-hue) 20% 88%);
    box-shadow: inset 2px 2px 3px hsl(var(--tg-hue) 20% 74%),
        inset -2px -2px 3px hsl(var(--tg-hue) 20% 99%);
}

body.light-theme .product__price-list .form__checkbox label .neo-indicator.right {
    background-image: linear-gradient(180deg,
            hsl(var(--tg-hue) 20% 94%),
            hsl(var(--tg-hue) 20% 70%) 60%,
            hsl(var(--tg-hue) 20% 74%) 70%,
            hsl(var(--tg-hue) 20% 70%));
}

body.light-theme .product__price-list .form__checkbox label .neo-button {
    background-image: linear-gradient(160deg, hsl(var(--tg-hue) 20% 96%) 40%, hsl(var(--tg-hue) 20% 72%) 70%);
    box-shadow: 2px 2px 3px hsl(var(--tg-hue) 18% 60% / .8),
        2px 2px 6px hsl(var(--tg-hue) 18% 60% / .4),
        10px 20px 10px hsl(var(--tg-hue) 18% 60% / .25);
}

/* ---------- доступность: без анимации, если так просит система ---------- */

@media (prefers-reduced-motion: reduce) {

    .product__price-list .form__checkbox label .neo-indicator,
    .product__price-list .form__checkbox label .neo-button {
        transition: none;
    }
}