/* =================================================================
   WERK Design System v2 — Premium Effects
   -----------------------------------------------------------------
   Глобальные премиум-визуальные эффекты, которые добавляются когда
   ЛЮБОЙ v2.* флаг активен (html[data-v2-active="1"]).
   ----------------------------------------------------------------
   ✨ Aurora animated background (плавающие radial-gradient блобы)
   ✨ Decorative grid pattern (точки на body)
   ✨ Custom scrollbar (Apple-style)
   ✨ Universal shimmer keyframes для прогресс-баров
   ✨ Glow-pulse keyframes для CTA-кнопок
   ✨ Tilt-hover для карточек
   ✨ Animated gradient borders для hero-карточек
   ✨ Pulse-dot волны для online-индикаторов
   ----------------------------------------------------------------
   Подключается ТОЛЬКО когда html[data-v2-active="1"]. Если флаг
   снять — все эффекты исчезнут без следа.
   ================================================================= */

/* =================================================================
   🌌 AURORA — анимированный фон со светящимися блобами
   ================================================================= */

html[data-v2-active="1"] body {
  position: relative;
}

/* Контейнер aurora создаётся через js или статично в разметке.
   Если контейнера .v2-aurora нет — fallback на body::before/::after. */

.v2-aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  display: none;
}
html[data-v2-active="1"] .v2-aurora { display: block; }

.v2-aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  will-change: transform;
}
.v2-aurora-blob.b1 {
  width: 55vw; height: 55vw; top: -15%; left: -12%;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.18), transparent 60%);
  animation: v2AuroraOrb1 24s ease-in-out infinite alternate;
}
.v2-aurora-blob.b2 {
  width: 45vw; height: 45vw; bottom: -12%; right: -10%;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.16), transparent 60%);
  animation: v2AuroraOrb2 28s ease-in-out infinite alternate;
}
.v2-aurora-blob.b3 {
  width: 35vw; height: 35vw; top: 40%; left: -8%;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.12), transparent 60%);
  animation: v2AuroraOrb3 32s ease-in-out infinite alternate;
}
.v2-aurora-blob.b4 {
  width: 30vw; height: 30vw; top: 10%; right: -5%;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.09), transparent 60%);
  animation: v2AuroraOrb4 26s ease-in-out infinite alternate;
}
.v2-aurora-blob.b5 {
  width: 40vw; height: 40vw; bottom: 30%; left: 35%;
  background: radial-gradient(circle, rgba(255, 140, 94, 0.09), transparent 60%);
  animation: v2AuroraOrb5 36s ease-in-out infinite alternate;
}
@keyframes v2AuroraOrb1 {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(80px,-60px) scale(1.12); }
}
@keyframes v2AuroraOrb2 {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-90px,40px) scale(1.18); }
}
@keyframes v2AuroraOrb3 {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(120px,-80px) scale(1.10); }
}
@keyframes v2AuroraOrb4 {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-70px,90px) scale(1.20); }
}
@keyframes v2AuroraOrb5 {
  0%   { transform: translate(0,0) scale(0.95); }
  100% { transform: translate(60px,70px) scale(1.15); }
}

/* Если контейнера .v2-aurora нет — рисуем 2 блоба через ::before/::after */
html[data-v2-active="1"]:not(:has(.v2-aurora)) body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60vw 60vw at 8% 12%, rgba(249, 115, 22, 0.10), transparent 60%),
    radial-gradient(50vw 50vw at 92% 88%, rgba(167, 139, 250, 0.10), transparent 60%),
    radial-gradient(40vw 40vw at 50% 50%, rgba(96, 165, 250, 0.06), transparent 60%);
  animation: v2AuroraStatic 30s ease-in-out infinite alternate;
}
@keyframes v2AuroraStatic {
  0%   { opacity: 0.8; transform: scale(1); }
  100% { opacity: 1.0; transform: scale(1.08); }
}

/* =================================================================
   🎯 DECORATIVE GRID — точки 36×36 на фоне
   ================================================================= */

html[data-v2-active="1"] body {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.020) 1px, transparent 0) !important;
  background-size: 36px 36px !important;
  background-attachment: fixed !important;
}

/* =================================================================
   📜 CUSTOM SCROLLBAR (Apple-style)
   ================================================================= */

html[data-v2-active="1"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html[data-v2-active="1"] ::-webkit-scrollbar-track {
  background: transparent;
}
html[data-v2-active="1"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background 0.2s ease;
}
html[data-v2-active="1"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.20);
  background-clip: padding-box;
}
html[data-v2-active="1"] ::-webkit-scrollbar-corner {
  background: transparent;
}

/* =================================================================
   ⚡ UNIVERSAL KEYFRAMES
   ================================================================= */

@keyframes v2-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes v2-cta-glow-orange {
  0%, 100% {
    box-shadow:
      0 10px 22px rgba(249, 115, 22, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
  50% {
    box-shadow:
      0 14px 32px rgba(249, 115, 22, 0.52),
      0 0 24px rgba(249, 115, 22, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }
}

@keyframes v2-cta-glow-green {
  0%, 100% {
    box-shadow:
      0 8px 18px rgba(16, 185, 129, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
  50% {
    box-shadow:
      0 12px 28px rgba(16, 185, 129, 0.50),
      0 0 22px rgba(16, 185, 129, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }
}

@keyframes v2-cta-glow-blue {
  0%, 100% {
    box-shadow:
      0 8px 18px rgba(96, 165, 250, 0.30),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
  50% {
    box-shadow:
      0 12px 28px rgba(96, 165, 250, 0.48),
      0 0 22px rgba(96, 165, 250, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }
}

@keyframes v2-pulse-dot-wave {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

@keyframes v2-num-halo {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.18); }
}

@keyframes v2-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes v2-rainbow-border {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes v2-urgent-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(248, 113, 113, 0.35),
      0 0 16px rgba(248, 113, 113, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(248, 113, 113, 0.50),
      0 0 24px rgba(248, 113, 113, 0.55);
  }
}

@keyframes v2-section-fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes v2-slide-shimmer {
  0%, 100% { left: -100%; }
  50%      { left: 100%; }
}

@keyframes v2-float-soft {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(20px, -20px) scale(1.05); }
}

/* =================================================================
   ✨ SHIMMER ON ALL PROGRESS BARS
   ================================================================= */

html[data-v2-active="1"] .order-progress-fill,
html[data-v2-active="1"] .inv-progress-fill,
html[data-v2-active="1"] .dash-progress-fill,
html[data-v2-active="1"] .ord-progress-fill,
html[data-v2-active="1"] .ait-my-progress-fill,
html[data-v2-active="1"] .preorder-progress-fill {
  position: relative;
  overflow: hidden;
}

html[data-v2-active="1"] .order-progress-fill::after,
html[data-v2-active="1"] .dash-progress-fill::after,
html[data-v2-active="1"] .ord-progress-fill::after,
html[data-v2-active="1"] .ait-my-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.30),
    transparent);
  animation: v2-shimmer 2.2s linear infinite;
  pointer-events: none;
}

/* =================================================================
   🔋 PULSE-DOT WAVES (online indicators)
   ================================================================= */

html[data-v2-active="1"] .dash-time-dot,
html[data-v2-active="1"] .ai-status-dot,
html[data-v2-active="1"] .pulse-dot,
html[data-v2-active="1"] .status-dot-online {
  animation: v2-pulse-dot-wave 2.2s infinite;
}

/* =================================================================
   🎬 SECTION FADE-IN ON LOAD
   ================================================================= */

html[data-v2-active="1"] .screen.active {
  animation: v2-section-fade-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =================================================================
   ⚠ SOFTENING — гарантия что v2-active.css больше не рисует рамку
   ================================================================= */

html[data-v2-active="1"] body::after {
  /* пересекается с aurora — оставляем aurora, рамку убираем */
  box-shadow: none !important;
}

/* =================================================================
   📐 BACKDROP BLUR HELPER для overlay/modal
   ================================================================= */

html[data-v2-active="1"] .modal-overlay,
html[data-v2-active="1"] .product-modal-overlay,
html[data-v2-active="1"] .order-detail-overlay,
html[data-v2-active="1"] .receipt-overlay,
html[data-v2-active="1"] .payment-type-overlay,
html[data-v2-active="1"] .edit-order-overlay {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* =================================================================
   🎚 GLOBAL CTA GLOW APPLICATION
   Применяется к основным «деньговым» кнопкам когда v2 активен.
   Подсветка только для primary-кнопок, не для всех подряд.
   ================================================================= */

html[data-v2-active="1"] .btn.btn-primary,
html[data-v2-active="1"] #checkoutBtn,
html[data-v2-active="1"] #confirmOrderBtn,
html[data-v2-active="1"] #confirmPaymentTypeBtn,
html[data-v2-active="1"] .product-add-btn,
html[data-v2-active="1"] .order-action-btn.primary {
  animation: v2-cta-glow-orange 3.6s ease-in-out infinite;
}

html[data-v2-active="1"] .order-action-btn.success,
html[data-v2-active="1"] .edit-order-save-btn,
html[data-v2-active="1"] .inv-create-btn {
  animation: v2-cta-glow-green 3.8s ease-in-out infinite;
}

html[data-v2-active="1"] .kaspi-qr-confirm {
  animation: v2-cta-glow-green 3.6s ease-in-out infinite;
}

/* =================================================================
   💎 CARD TILT-HOVER (subtle 3D lift)
   ================================================================= */

html[data-v2-active="1"] .product-card,
html[data-v2-active="1"] .customer-result,
html[data-v2-active="1"] .order-card,
html[data-v2-active="1"] .ord-card,
html[data-v2-active="1"] .prod-card,
html[data-v2-active="1"] .cust-card {
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.35s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

html[data-v2-active="1"] .product-card:hover {
  transform: translateY(-4px) scale(1.012);
  box-shadow:
    0 20px 40px -10px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(249, 115, 22, 0.22);
}
html[data-v2-active="1"] .customer-result:hover {
  transform: translateY(-3px) scale(1.006);
  box-shadow:
    0 18px 36px -10px rgba(0, 0, 0, 0.50),
    0 0 0 1px rgba(167, 139, 250, 0.20);
}
html[data-v2-active="1"] .order-card:hover {
  transform: translateY(-3px) scale(1.008);
  box-shadow:
    0 18px 36px -10px rgba(0, 0, 0, 0.50),
    0 0 0 1px rgba(249, 115, 22, 0.22);
}

/* =================================================================
   🌈 LEADERBOARD ROW GLOW — золото/серебро/бронза
   ================================================================= */

html[data-v2-active="1"] .lb-row.gold,
html[data-v2-active="1"] .leaderboard-row.gold,
html[data-v2-active="1"] [data-rank="1"] {
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.18);
}

/* =================================================================
   🔘 ICON BUTTONS HOVER
   ================================================================= */

html[data-v2-active="1"] .icbtn,
html[data-v2-active="1"] .dash-header-btn,
html[data-v2-active="1"] .header-action,
html[data-v2-active="1"] .header-back {
  transition:
    transform 0.25s var(--v2-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
    background 0.2s ease,
    border-color 0.2s ease;
}
html[data-v2-active="1"] .icbtn:hover,
html[data-v2-active="1"] .dash-header-btn:hover {
  transform: translateY(-1px) scale(1.05);
}
html[data-v2-active="1"] .icbtn:active,
html[data-v2-active="1"] .dash-header-btn:active {
  transform: translateY(0) scale(0.97);
}

/* =================================================================
   📱 PHONE-LIKE PAGE: уменьшить визуальный шум по краям
   (Бахтияр жаловался на рамку — v2-active.css больше её не рисует)
   ================================================================= */

html[data-v2-active="1"] body {
  /* убираем любые лишние внешние рамки на самом body */
  outline: none !important;
}

/* =================================================================
   ✨ STATUS BADGES GLOW
   ================================================================= */

html[data-v2-active="1"] .order-status.completed {
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.18);
}
html[data-v2-active="1"] .order-status.shipping {
  box-shadow: 0 0 14px rgba(96, 165, 250, 0.18);
}
html[data-v2-active="1"] .order-status.reserve {
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.18);
}

/* =================================================================
   🏷 PRIORITY BADGES — pulse для urgent, glow для VIP
   ================================================================= */

html[data-v2-active="1"] .c-type-badge.vip,
html[data-v2-active="1"] .cust-tb.vip,
html[data-v2-active="1"] .ai-task-priority-high,
html[data-v2-active="1"] .priority-urgent {
  box-shadow:
    0 0 0 1px rgba(255, 215, 0, 0.30),
    0 0 12px rgba(255, 215, 0, 0.20);
}

html[data-v2-active="1"] .ai-call-pr.urgent,
html[data-v2-active="1"] .priority-urgent-active {
  animation: v2-urgent-pulse 2s ease-in-out infinite;
}

/* =================================================================
   📑 OVERLAY MODALS — clean dark background
   ================================================================= */

html[data-v2-active="1"] .modal-overlay.show,
html[data-v2-active="1"] .product-modal-overlay.show,
html[data-v2-active="1"] .order-detail-overlay.show,
html[data-v2-active="1"] .payment-type-overlay.show {
  background: rgba(19, 21, 28, 0.78);
}

/* =================================================================
   END — Premium Effects
   ================================================================= */