/* ── Сброс и база ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', sans-serif;
  background: #0a1628;
  color: #e2e8f0;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Фон со льдом ─────────────────────────────────────────────────── */
.ice-bg {
  position: fixed;
  inset: -30px;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(56,189,248,.13) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(99,102,241,.10) 0%, transparent 60%),
    linear-gradient(160deg, #060d1a 0%, #0c1a35 50%, #080f20 100%);
  will-change: transform;
  transition: transform .05s linear;
  z-index: 0;
}

.fog {
  position: fixed;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(6,13,26,.7) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ── Кубики льда ──────────────────────────────────────────────────── */
.ice-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.ice {
  position: absolute;
  bottom: -80px;
  border-radius: 6px;
  background: linear-gradient(135deg,
    rgba(186,230,253,.55) 0%,
    rgba(56,189,248,.35) 40%,
    rgba(99,102,241,.25) 100%);
  border: 1px solid rgba(186,230,253,.3);
  box-shadow:
    0 0 12px rgba(56,189,248,.2),
    inset 0 1px 0 rgba(255,255,255,.25);
  backdrop-filter: blur(2px);
  animation: floatUp linear infinite;
}

@keyframes floatUp {
  0%   { transform: translateY(0)   rotate(0deg);   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-110vh) rotate(360deg); opacity: 0; }
}

/* Клик по кубику */
.ice.jumping {
  animation: cubeJump .6s ease-in forwards !important;
}
@keyframes cubeJump {
  0%   { transform: scale(1)   translateY(0); opacity: 1; }
  40%  { transform: scale(1.4) translateY(-30px); }
  100% { transform: scale(0)   translateY(-60px); opacity: 0; }
}

/* Снежинки при клике */
.snowflake {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  animation: flakeOut ease-out forwards;
  user-select: none;
}
@keyframes flakeOut {
  0%   { transform: translate(0,0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx), -80px) rotate(var(--dr)); opacity: 0; }
}

/* ── Ссылка "назад" ───────────────────────────────────────────────── */
.back-link {
  display: inline-block;
  margin: 2rem 0 1rem;
  color: #7dd3fc;
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;
  transition: color .2s;
}
.back-link:hover { color: #fff; }

/* ── Toast уведомление ───────────────────────────────────────────── */
.cart-toast {
  position: fixed;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%) translateY(16px) scale(.98);
  display: flex;
  align-items: center;
  gap: .7rem;
  max-width: min(92vw, 420px);
  padding: .7rem 1.1rem .7rem .75rem;
  background: linear-gradient(135deg, rgba(14,28,56,.96), rgba(10,20,42,.96));
  backdrop-filter: blur(12px);
  border: 1px solid rgba(56,189,248,.28);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
  color: #e2e8f0;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.35;
  opacity: 0;
  transition: opacity .25s ease, transform .3s cubic-bezier(.2,.9,.3,1.2);
  z-index: 9999;
  pointer-events: none;
}
.cart-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
.cart-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 800;
  background: rgba(56,189,248,.18);
  color: #7dd3fc;
}
.cart-toast-text { overflow-wrap: anywhere; }
.cart-toast--success { border-color: rgba(52,211,153,.35); }
.cart-toast--success .cart-toast-icon { background: rgba(52,211,153,.18); color: #6ee7b7; }
.cart-toast--warn { border-color: rgba(251,191,36,.35); }
.cart-toast--warn .cart-toast-icon { background: rgba(251,191,36,.18); color: #fcd34d; }

@media (prefers-reduced-motion: reduce) {
  .cart-toast { transition: opacity .2s; transform: translateX(-50%); }
  .cart-toast.show { transform: translateX(-50%); }
}

/* ── Попап "купить / в корзину" ──────────────────────────────────── */

/* ── Канвас с частицами ──────────────────────────────────────────── */
.particles-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Пока открыта модалка, страница под ней не прокручивается. */
body.modal-open { overflow: hidden; }

/* Атрибут hidden должен побеждать любые display из наших правил —
   иначе поля формы, скрытые для конкретного способа оплаты, остаются видны. */
[hidden] { display: none !important; }