/* Слайдер списания баллов лояльности. */
/* Теннисный мячик 🎾 — thumb ползунка списания баллов. Общий partial для
   чекаута (book.html) и оплаты существующей брони (my-bookings.html):
   один источник + рендерится в HTML (не в кешируемый static-CSS, чтобы
   правка не залипала в браузере на max-age brand-tokens.css). */
.loyalty-slider {
    width: 100%;
    /* Мяч в 26px сидит на дорожке в 8px, то есть свисает на 9px вверх и вниз.
       Отступ обязан ЭТО учитывать: при прежних 12/8 снизу оставался ноль, и
       мяч касался строки «Не списывать». Ступени 4 и 6 дают чистые 7 и 15. */
    margin: var(--bp-space-4) 0 var(--bp-space-6);
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    background: transparent;
    cursor: pointer;
}
.loyalty-slider::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(146, 196, 58, 0.25);
}
.loyalty-slider::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(146, 196, 58, 0.25);
}
.loyalty-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    margin-top: -9px;
    border-radius: 50%;
    transform: rotate(var(--ball-angle, 0deg));
    border: none;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.4);
    background: #d4f000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15.5' fill='%23d4f000'/%3E%3Cpath d='M6 6 Q15 16 6 26' fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round'/%3E%3Cpath d='M26 6 Q17 16 26 26' fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.loyalty-slider::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.4);
    background: #d4f000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15.5' fill='%23d4f000'/%3E%3Cpath d='M6 6 Q15 16 6 26' fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round'/%3E%3Cpath d='M26 6 Q17 16 26 26' fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}