.bb-loyalty { --bbl-accent: #1c5bff; --bbl-text: #111; --bbl-muted: #6b7280; --bbl-border: #e5e7eb; --bbl-bg: #fff; font-family: var(--font1, Inter, system-ui, sans-serif); color: var(--bbl-text); }
.bb-loyalty__card { padding: 24px; border: 1px solid var(--bbl-border); border-radius: 16px; background: var(--bbl-bg); display: flex; flex-direction: column; gap: 14px; }
.bb-loyalty__card--user { flex-direction: row; flex-wrap: wrap; align-items: center; }
.bb-loyalty__title { margin: 0; font-size: 20px; font-weight: 600; }
.bb-loyalty__hint { margin: 0; font-size: 14px; color: var(--bbl-muted); }
.bb-loyalty__hint a { color: var(--bbl-accent); }
.bb-loyalty__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--bbl-border); background: #fff; color: var(--bbl-text); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; text-decoration: none; transition: background .15s, opacity .15s; }
.bb-loyalty__btn:hover { background: #f5f6f8; }
.bb-loyalty__btn:disabled { opacity: .55; cursor: default; }
.bb-loyalty__btn--primary { background: var(--bbl-accent); border-color: var(--bbl-accent); color: #fff; }
.bb-loyalty__btn--primary:hover { background: #164ad4; }
.bb-loyalty__btn--ghost { border-color: transparent; color: var(--bbl-muted); }
.bb-loyalty__gicon { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); }
.bb-loyalty__sep { display: flex; align-items: center; gap: 12px; color: var(--bbl-muted); font-size: 13px; }
.bb-loyalty__sep::before, .bb-loyalty__sep::after { content: ""; flex: 1; height: 1px; background: var(--bbl-border); }
.bb-loyalty__form { display: flex; flex-direction: column; gap: 12px; }
.bb-loyalty__field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--bbl-muted); }
.bb-loyalty__field input { min-height: 44px; padding: 0 12px; border: 1px solid var(--bbl-border); border-radius: 10px; font: inherit; font-size: 15px; color: var(--bbl-text); }
.bb-loyalty__field input:focus { outline: 2px solid var(--bbl-accent); outline-offset: 1px; border-color: transparent; }
.bb-loyalty__link { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--bbl-accent); font: inherit; font-size: 14px; cursor: pointer; }
.bb-loyalty__msg { margin: 0; min-height: 1.2em; font-size: 14px; color: var(--bbl-muted); }
.bb-loyalty__msg.is-error { color: #d92d20; }
.bb-loyalty__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.bb-loyalty__who { flex: 1; min-width: 0; }
.bb-loyalty__name { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-loyalty__email { font-size: 13px; color: var(--bbl-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-loyalty__coins { flex-basis: 100%; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: #eef3ff; }
.bb-loyalty__coins-num { font-size: 28px; font-weight: 700; color: var(--bbl-accent); line-height: 1; }
.bb-loyalty__coins-label { font-size: 14px; color: var(--bbl-text); }
.bb-loyalty__coins-pending { font-size: 13px; color: var(--bbl-muted); margin-left: auto; }
.bb-loyalty__actions { flex-basis: 100%; display: flex; gap: 10px; flex-wrap: wrap; }
.bb-loyalty.is-busy { opacity: .8; }

/* Бейдж «+X Blue Coins» біля ціни товару */
.bb-coins-badge { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; margin-left: 10px; padding: 4px 10px 4px 5px; border-radius: 999px; background: #ece9fb; color: #2f2a7a; font-family: var(--font1, Inter, system-ui, sans-serif); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; }
.bb-coins-badge__icon { display: inline-flex; flex: 0 0 18px; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #4b3fd6; color: #fff; font-style: normal; font-size: 11px; font-weight: 700; line-height: 1; }
.bb-coins-badge__num, .bb-coins-badge__label { flex: 0 0 auto; }
.bb-coins-badge__label { font-weight: 500; }
.bb-coins-badge--short { margin-left: 8px; padding: 3px 8px 3px 4px; font-size: 12px; }
/* Перемикач «Списати N Blue Coins» у попапі швидкого замовлення */
.bb-coins-toggle { margin: 4px 0 16px; padding: 14px 16px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; transition: background .25s, border-color .25s, opacity .25s; }
.bb-coins-toggle__row { display: flex; align-items: center; gap: 14px; cursor: pointer; margin: 0; }
.bb-coins-toggle__input { position: absolute; opacity: 0; width: 0; height: 0; }
.bb-coins-toggle__switch { position: relative; flex: 0 0 48px; width: 48px; height: 28px; border-radius: 999px; background: #d1d5db; transition: background .25s; }
.bb-coins-toggle__switch:after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .25s; }
.bb-coins-toggle__input:checked + .bb-coins-toggle__switch { background: #311b92; }
.bb-coins-toggle__input:checked + .bb-coins-toggle__switch:after { transform: translateX(20px); }
.bb-coins-toggle__text { display: flex; flex-direction: column; gap: 3px; font-family: var(--font1, Inter, system-ui, sans-serif); }
.bb-coins-toggle__title { font-size: 16px; font-weight: 600; color: #151515; }
.bb-coins-toggle__hint { font-size: 13px; font-weight: 500; color: #6b7280; }
.bb-coins-toggle.is-ready { background: #ece9fb; border-color: #856fec; }
.bb-coins-toggle.is-ready .bb-coins-toggle__hint { color: #4b3fd6; }
.bb-coins-toggle.is-off { opacity: .6; }
.bb-coins-toggle.is-off .bb-coins-toggle__row { cursor: default; }
.bb-coins-toggle__toast { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #311b92; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.35; }
.bb-coins-toggle__toast[hidden] { display: none; }
.bb-coins-toggle__toast .bb-coins-badge__icon { flex: 0 0 24px; width: 24px; height: 24px; font-size: 12px; background: #856fec; }
/* Списання увімкнено: ціна в попапі закреслена, поруч 0 грн */
.popup.bb-coins-on .price-current { text-decoration: line-through; opacity: .6; }
.bb-coins-zero { display: none; font-weight: 700; font-size: 24px; color: #1e1e1e; margin-top: 6px; }
.popup.bb-coins-on .bb-coins-zero { display: block; }
/* За покупку балами кешбек не нараховується — бейдж нарахування в попапі закреслений */
.popup.bb-coins-on .bb-coins-badge { text-decoration: line-through; opacity: .55; }
.popup.bb-coins-on .bb-coins-badge .bb-coins-badge__icon { background: #9a94c2; }

/* Нарахування не буде (замовлення оплачується балами): бейдж закреслений, а не прихований */
.bb-coins-badge--void { text-decoration: line-through; opacity: .55; }
.bb-coins-badge--void .bb-coins-badge__icon { background: #9a94c2; }
.bb-coins-badge--short .bb-coins-badge__icon { width: 16px; height: 16px; font-size: 10px; }
.price-current .bb-coins-badge { position: relative; top: -4px; }
.bb-coins-row .bb-coins-badge { margin-left: 0; }
.bb-coins-row--right { display: flex; justify-content: flex-end; align-items: center; gap: 10px; width: 100%; margin-top: 6px; }
.bb-coins-row--left { display: flex; justify-content: flex-start; align-items: center; gap: 10px; width: 100%; margin-top: 6px; }
.bb-coins-row--left:has(> [hidden]) { display: none; }
.bb-coins-row__label { font-size: 13px; font-weight: 500; color: #6b7280; white-space: nowrap; }
/* Мінікошик: підсумок балів не має злипатись із кнопкою «Оформити замовлення» */
.header-basket-bottom > .bb-coins-row--right { margin: 8px 0 18px; }
.bb-coins-row--right[hidden], .bb-coins-row--right:has(> [hidden]) { display: none; }

/* Бейдж окремим рядком під блоком цін (.price.bb-price-with-coins), як у Чуйці 4.0.
   order — щоб за порядком у DOM він не потрапляв між ціною з ПДВ і без ПДВ; прихований
   блок з ПДВ (display:none при сертифікаті) випадає, і бейдж лишається під видимою ціною. */
.bb-price-with-coins { display: flex; flex-direction: column; align-items: flex-start; }
.bb-price-with-coins > .bb-coins-badge--aside { order: 10; width: max-content; margin: 10px 0 0; top: 0; }
.bb-price-with-coins > .bb-coins-badge--aside[hidden] { display: none; }
@media (max-width: 767px) { .bb-coins-badge { margin-left: 6px; font-size: 12px; } }