/* Плашки способов оплаты — один вид на все экраны CRM, где берут деньги.

   Способов у клиента бывает шесть (касса наличными и картой, ссылка, депозит,
   кошелёк, акция), и плоский ряд кнопок читался как стена: оператор искал
   нужную глазами каждый раз. Частые стоят карточками сразу, редкие живут в
   отдельном окне — там же, где видно, ЧТО оплачивается.

   Файл отдельный, а не внутри booking-card.css, потому что ряд один и тот же
   в карточке записи, в кассе визита и в продаже без записи, а booking-card.css
   на страницу продажи не подключён — там макрос отрисовался бы голым списком.
   Разметка ряда — partials/_pay_card.html. */

/* Ровно три в ряду: способов бывает шесть, и «сколько влезет» давало то пять
   в строку, то два — глаз каждый раз искал нужный заново. Три держат сетку
   предсказуемой, а лишние уезжают на вторую строку. */
.bk-pay-quick {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
}
@media (max-width: 900px) { .bk-pay-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bk-pay-quick { grid-template-columns: 1fr; } }
.bk-pay-card {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .85rem;
    border: 1px solid var(--bp-line, #e2dccc);
    border-radius: var(--bp-radius-sm, 8px);
    background: var(--bp-sheet, #fff);
    text-align: left;
    width: 100%;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.bk-pay-card:hover:not(:disabled) {
    border-color: var(--bp-ink-2, #6b6357);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}
.bk-pay-card:disabled { opacity: .55; }
.bk-pay-card__icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: 50%;
    font-size: 1rem;
}
/* Цвет иконки говорит, куда идут деньги: зелёный — касса клуба здесь и
   сейчас, синий — онлайн-ссылка клиенту, серый — уже оплаченное клиентом
   (депозит, абонемент), тёмный — расчёт по договору. */
.bk-pay-card__icon--till { background: var(--bp-green-tint, #eef6e0); color: var(--bp-green-dark, #5c8a1a); }
.bk-pay-card__icon--online { background: var(--bp-blue-tint, #e6edf5); color: var(--bp-blue, #044184); }
.bk-pay-card__icon--stored { background: var(--bp-paper-2, #eef0f4); color: var(--bp-ink-2, #6b6357); }
.bk-pay-card__body { min-width: 0; }
.bk-pay-card__title { font-weight: 600; overflow-wrap: anywhere; }
.bk-pay-card__note {
    font-size: .78rem;
    color: var(--bp-muted, #6b6e76);
    overflow-wrap: anywhere;
}

/* Общее ОБРАМЛЕНИЕ панели оплаты: заголовок блока и подсказка под полем.
   Переехали сюда из booking-card.css по той же причине, по которой здесь
   лежит сам ряд плашек: панель оплаты теперь рисует и продажа без записи
   (`partials/_sale_pay.html` с формой скидки), а стилей карточки записи на
   её страницах нет — заголовок «Скидка» выходил обычным текстом, подсказка
   про вид скидки теряла приглушённый мелкий шрифт. */
.pay-sec__head {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    font-weight: 600;
    font-size: .86rem;
}
.pay-sec__title { flex: 1 1 auto; white-space: normal; overflow-wrap: anywhere; }
.bk-hint { font-size: .78rem; color: var(--bp-ink-2, #6b6357); margin-top: .4rem; }