/* =====================================================================
   ОКСИТЕЛЬ — pay.css
   Доп. стили для страницы оплаты /pay/ и страниц статуса /pay/success/,
   /pay/fail/. Аддитивный слой поверх style.css (его НЕ меняем).
   Без внешних шрифтов/библиотек. Уважает prefers-reduced-motion.
   ===================================================================== */

/* --- сообщения под кнопкой оплаты (info / warn) --- */
.pay-mock { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px;
  font-size: 14px; line-height: 1.45; }
.pay-mock--info { background: rgba(14, 143, 214, .10); color: #0b5e8e;
  border: 1px solid rgba(14, 143, 214, .25); }
.pay-mock--warn { background: rgba(240, 173, 78, .14); color: #8a5a00;
  border: 1px solid rgba(240, 173, 78, .35); }

/* кнопка во время отправки */
.btn[disabled] { opacity: .6; cursor: not-allowed; }

/* --- страницы статуса оплаты --- */
.pay-status { max-width: 640px; margin: 0 auto; text-align: center;
  background: #fff; border-radius: 22px; padding: 40px 28px;
  box-shadow: 0 18px 50px rgba(13, 71, 110, .10); }
.pay-status__icon { width: 84px; height: 84px; margin: 0 auto 18px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 40px; font-weight: 700; }
.pay-status--pending .pay-status__icon { background: rgba(14, 143, 214, .10); color: #0e8fd6; }
.pay-status--ok .pay-status__icon { background: rgba(124, 194, 67, .16); color: #4e8f1d; }
.pay-status--fail .pay-status__icon { background: rgba(214, 69, 69, .12); color: #c33; }
.pay-status__title { margin: 0 0 10px; }
.pay-status__text { margin: 0 auto 8px; max-width: 520px; color: var(--c-ink, #1d2b36); }
.pay-status__hint { font-size: 13px; margin: 6px auto 0; max-width: 520px; }
.pay-status__actions { margin-top: 22px; display: flex; gap: 12px;
  justify-content: center; flex-wrap: wrap; }

/* спиннер ожидания */
.pay-spinner { width: 40px; height: 40px; border-radius: 50%;
  border: 4px solid rgba(14, 143, 214, .25); border-top-color: #0e8fd6;
  display: inline-block; animation: pay-spin 0.9s linear infinite; }
/* FIX: атрибут hidden должен побеждать display:inline-block выше (иначе спиннер
   остаётся крутиться поверх/рядом с галочкой после подтверждения оплаты).
   Плюс в подтверждённом/ошибочном состоянии спиннер скрыт всегда. */
.pay-spinner[hidden] { display: none !important; }
.pay-status--ok .pay-spinner,
.pay-status--fail .pay-spinner { display: none !important; }
.pay-status__check { font-size: 44px; line-height: 1; }
.pay-status__cross { font-size: 40px; line-height: 1; }

@keyframes pay-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .pay-spinner { animation: none; }
}

@media (max-width: 560px) {
  .pay-status { padding: 30px 18px; }
  .pay-status__actions .btn { width: 100%; }
}

/* --- поштучная оплата коктейлей (стоит в svc-grid сразу под карточкой коктейлей) --- */
.portions-box { padding: 14px 16px;
  border: 1px solid rgba(14, 143, 214, .25); border-radius: 14px;
  background: rgba(14, 143, 214, .06); }
.portions-box[hidden] { display: none !important; }              /* атрибут hidden должен побеждать */
.portions-box__head { font-weight: 700; margin-bottom: 8px; color: #0b5e8e; }
.portions-ctl { margin-top: 12px; display: flex; align-items: center;
  gap: 14px; flex-wrap: wrap; }
.portions-ctl[hidden] { display: none !important; }
.portions-qty { display: inline-flex; align-items: center; gap: 10px; }
.portions-btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(14,143,214,.35);
  background: #fff; color: #0e8fd6; font-size: 24px; line-height: 1; font-weight: 700;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.portions-btn:hover:not([disabled]) { background: rgba(14,143,214,.10); }
.portions-btn[disabled] { opacity: .4; cursor: not-allowed; }
.portions-num { min-width: 40px; text-align: center; font-size: 20px; font-weight: 700; }