/* Мини-апп и сайт: только то, чего нет в CSS сайта, — загрузка, раскрытие описания, уведомление, вход через Telegram */

.bubs-loading { display: flex; justify-content: center; padding: 6rem 0; }
.bubs-spinner {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  border: 3px solid rgb(255 255 255 / 0.15); border-top-color: #a855f7;
  animation: bubs-spin 0.8s linear infinite;
}
@keyframes bubs-spin { to { transform: rotate(360deg); } }

/* Карточка товара: кнопка со стрелкой плавно раскрывает описание целиком (высоту задаёт app.js → toggleDescription) */
[data-desc] { overflow: hidden; transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
[data-card] [data-toggle] svg { transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
[data-card].is-open [data-toggle] svg { transform: rotate(180deg); }

.bubs-button {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%;
  padding: 0.875rem 1rem; border-radius: 0.875rem; font-weight: 600; font-size: 0.95rem; cursor: pointer;
  color: #fff; background: linear-gradient(90deg, #a855f7, #ec4899); border: 0; transition: filter 0.2s, transform 0.1s;
}
.bubs-button:active { transform: scale(0.98); }
.bubs-input {
  width: 100%; padding: 0.8rem 1rem; border-radius: 0.875rem; font-size: 1rem; color: #fff; outline: none;
  background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.2);
}
.bubs-input:focus { border-color: rgb(168 85 247 / 0.7); box-shadow: 0 0 0 3px rgb(168 85 247 / 0.2); }

/* Короткое уведомление снизу */
.bubs-toast {
  position: fixed; left: 50%; bottom: calc(1.5rem + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 70; max-width: calc(100% - 2rem); padding: 0.75rem 1.1rem; border-radius: 0.875rem;
  background: rgb(17 24 39 / 0.95); border: 1px solid rgb(255 255 255 / 0.2); color: #fff; font-size: 0.875rem;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.4); animation: bubs-sheet 0.2s ease-out;
}

/* «Войти через Telegram» — на сайте, пока покупатель не вошёл */
.bubs-tg-login {
  display: flex; align-items: center; gap: 0.5rem; height: 3rem; padding: 0 1rem; border: 0; border-radius: 0.75rem;
  font-weight: 600; font-size: 0.9rem; color: #fff; background: #54a9eb; cursor: pointer; white-space: nowrap;
  transition: background 0.2s, transform 0.1s;
}
.bubs-tg-login:hover { background: #3f9ae0; }
.bubs-tg-login:active { transform: scale(0.97); }

/* Значок в окнах «Ошибка покупки», «Добавлено в корзину», «Заказ оформлен» */
.bubs-notice-icon {
  width: 3.5rem; height: 3.5rem; margin: 0 auto; border-radius: 9999px; display: flex; align-items: center;
  justify-content: center; background: rgb(59 130 246 / 0.2); border: 1px solid rgb(59 130 246 / 0.3);
}
.bubs-details summary { list-style: none; }
.bubs-details summary::-webkit-details-marker { display: none; }
.bubs-details svg { transition: transform 0.2s; }
.bubs-details[open] summary svg { transform: rotate(90deg); }

.bubs-search { display: flex; gap: 0.5rem; align-items: center; }

/* Прокрутка к корзине и к способам оплаты — чтобы верх блока не прятался под липкой шапкой */
#cart, #topup-methods { scroll-margin-top: 5rem; }

/* Орбы фона (app.js → floatingOrbs): летят снизу вверх и чуть вправо */
.bubs-orb {
  position: absolute; bottom: -12px; border-radius: 9999px; opacity: 0;
  background: linear-gradient(45deg, #3b82f6, #8b5cf6); box-shadow: 0 0 6px 1px rgb(99 102 241 / 0.6);
  animation-timing-function: linear; animation-iteration-count: infinite; will-change: transform, opacity;
}
@keyframes bubs-orb-right {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  10%, 90% { opacity: 0.7; }
  100% { opacity: 0; transform: translate3d(80px, calc(-100vh - 24px), 0); }
}
@keyframes bubs-orb-right-less {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  10%, 90% { opacity: 0.6; }
  100% { opacity: 0; transform: translate3d(40px, calc(-100vh - 24px), 0); }
}
@keyframes bubs-orb-right-more {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  10%, 90% { opacity: 0.75; }
  100% { opacity: 0; transform: translate3d(130px, calc(-100vh - 24px), 0); }
}
@media (prefers-reduced-motion: reduce) { .bubs-orb { display: none; } }

/* «Наверх» и «Назад» справа внизу (app.js → renderFloatingButtons). «Назад» — как на сайте */
.bubs-float {
  position: fixed; right: 1rem; bottom: calc(2rem + env(safe-area-inset-bottom)); z-index: 60;
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem; pointer-events: none;
}
.bubs-float > button {
  position: relative; width: 3rem; height: 3rem; border-radius: 9999px; display: flex; align-items: center;
  justify-content: center; color: #fff; cursor: pointer; border: 1px solid rgb(255 255 255 / 0.2);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.35); backdrop-filter: blur(12px);
  opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bubs-float.is-visible > button { opacity: 1; transform: none; pointer-events: auto; }
.bubs-float.is-visible > button:hover { transform: scale(1.08); }
.bubs-float.is-visible > button:active { transform: scale(0.95); }
.bubs-float:not(.has-back) .bubs-float__back { display: none; }
.bubs-float__up { background: linear-gradient(135deg, #6366f1, #7c3aed); }
.bubs-float__back { background: linear-gradient(to right, rgb(147 51 234), rgb(236 72 153)); }
/* Кольцо заполняется от верхней точки против часовой стрелки — как на скринах сайта */
.bubs-float__ring { position: absolute; inset: 0; width: 100%; height: 100%; color: #fff; transform: rotate(-90deg) scaleY(-1); }
.bubs-float__ring circle { transition: stroke-dashoffset 0.15s linear; }
@media (min-width: 640px) {
  .bubs-float { right: 1.5rem; bottom: calc(2.5rem + env(safe-area-inset-bottom)); }
  .bubs-float > button { width: 3.5rem; height: 3.5rem; }
}

/* Полоса прокрутки сверху: растёт до всей ширины к концу страницы (app.js → updateFloatingButtons) */
.bubs-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; pointer-events: none;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.15s linear;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899); box-shadow: 0 0 8px rgb(236 72 153 / 0.45);
}