/* ═══════════════════════════════════════════════
   АНИМИРОВАННЫЕ КНОПКИ — Город Мастеров
   Подключается ко всем страницам сайта
   ═══════════════════════════════════════════════ */

/* ── Базовый сброс для всех btn-primary ── */
.btn-primary,
a.btn-primary,
button.btn-primary {
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: transform .25s, box-shadow .25s, filter .25s !important;
}

/* ── Бегущий световой блик ── */
.btn-primary::after,
a.btn-primary::after,
button.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: btnShine 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes btnShine {
  0%   { left: -75%; opacity: 0; }
  20%  { opacity: 1; }
  60%  { left: 130%; opacity: 0; }
  100% { left: 130%; opacity: 0; }
}

/* ── Пульсирующее свечение ── */
.btn-primary,
a.btn-primary,
button.btn-primary {
  animation: btnGlow 3s ease-in-out infinite;
}

@keyframes btnGlow {
  0%, 100% { box-shadow: 0 4px 15px rgba(138,43,226,.35); }
  50%       { box-shadow: 0 4px 28px rgba(138,43,226,.7), 0 0 0 4px rgba(138,43,226,.15); }
}

/* ── Hover — приподнимается и ярче ── */
.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 8px 32px rgba(138,43,226,.6) !important;
  filter: brightness(1.15) !important;
  animation: none !important;
}

/* ── Active — нажатие ── */
.btn-primary:active,
a.btn-primary:active,
button.btn-primary:active {
  transform: translateY(0) scale(.97) !important;
  box-shadow: 0 2px 8px rgba(138,43,226,.4) !important;
}

/* ══════════════════════════════════════════
   btn-outline / btn-outline — прозрачная кнопка
   ══════════════════════════════════════════ */
.btn-outline,
a.btn-outline,
button.btn-outline {
  position: relative;
  overflow: hidden;
  background: rgba(138,43,226,.1) !important;
  color: #c084fc !important;
  border: 1.5px solid rgba(138,43,226,.5) !important;
  transition: all .25s !important;
  animation: btnOutlinePulse 3s ease-in-out infinite;
}

@keyframes btnOutlinePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(138,43,226,0); }
  50%       { box-shadow: 0 0 0 5px rgba(138,43,226,.18); }
}

.btn-outline:hover,
a.btn-outline:hover,
button.btn-outline:hover {
  background: rgba(138,43,226,.22) !important;
  border-color: #8A2BE2 !important;
  transform: translateY(-2px) !important;
  animation: none !important;
}

/* ══════════════════════════════════════════
   btn-success (WhatsApp зелёная)
   ══════════════════════════════════════════ */
.btn-success,
a.btn-success,
button.btn-success {
  position: relative;
  overflow: hidden;
  animation: btnSuccessGlow 2.5s ease-in-out infinite;
  transition: transform .25s, box-shadow .25s !important;
}

@keyframes btnSuccessGlow {
  0%, 100% { box-shadow: 0 4px 14px rgba(37,211,102,.3); }
  50%       { box-shadow: 0 4px 28px rgba(37,211,102,.65), 0 0 0 4px rgba(37,211,102,.12); }
}

.btn-success::after {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.3) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: btnShine 3.2s ease-in-out infinite;
  pointer-events: none;
}

.btn-success:hover,
a.btn-success:hover,
button.btn-success:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 8px 28px rgba(37,211,102,.55) !important;
  filter: brightness(1.1) !important;
  animation: none !important;
}

/* ══════════════════════════════════════════
   btn-prim (школа) — такой же стиль
   ══════════════════════════════════════════ */
.btn-prim {
  position: relative;
  overflow: hidden;
  animation: btnGlow 3s ease-in-out infinite !important;
  transition: transform .25s, box-shadow .25s !important;
}
.btn-prim::after {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.3), transparent);
  transform: skewX(-20deg);
  animation: btnShine 2.8s ease-in-out infinite;
  pointer-events: none;
}
.btn-prim:hover {
  transform: translateY(-3px) scale(1.03) !important;
  animation: none !important;
}

/* ══════════════════════════════════════════
   Кнопки внутри страниц (без class="btn")
   — просто btn-primary как class напрямую
   ══════════════════════════════════════════ */
button.btn-primary,
a.btn-primary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}

/* ══════════════════════════════════════════
   Кнопка «Добавить в корзину»
   ══════════════════════════════════════════ */
.btn-add-to-cart {
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s !important;
  animation: btnGlow 3.5s ease-in-out infinite;
}
.btn-add-to-cart:hover {
  transform: translateY(-2px) scale(1.04) !important;
  animation: none !important;
}

/* ══════════════════════════════════════════
   HERO — кнопка «Перейти в каталог»
   Стиль: тёмная таблетка + градиентная рамка
   ══════════════════════════════════════════ */
.btn-hero-offer {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  color: #fff !important;
  text-decoration: none;
  border-radius: 50px;
  background: rgba(15, 8, 30, 0.85);
  position: relative;
  z-index: 0;
  cursor: pointer;
  letter-spacing: .02em;
  animation: heroOfferGlow 2.5s ease-in-out infinite;
  transition: transform .25s, filter .25s;
}

/* Градиентная рамка через псевдоэлемент */
.btn-hero-offer::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 52px;
  background: linear-gradient(90deg, #f97316, #8A2BE2, #f97316);
  background-size: 200% 100%;
  z-index: -1;
  animation: heroOfferBorder 2.5s linear infinite;
}

/* Внутренний тёмный фон поверх градиентной рамки */
.btn-hero-offer::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50px;
  background: rgba(15, 8, 30, 0.9);
  z-index: -1;
}

/* Движение градиента рамки */
@keyframes heroOfferBorder {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Пульсация свечения */
@keyframes heroOfferGlow {
  0%, 100% { box-shadow: 0 0 12px rgba(249,115,22,.4), 0 0 24px rgba(138,43,226,.3); }
  50%       { box-shadow: 0 0 22px rgba(249,115,22,.7), 0 0 40px rgba(138,43,226,.55), 0 0 0 5px rgba(138,43,226,.12); }
}

.btn-hero-offer:hover {
  transform: translateY(-3px) scale(1.04);
  filter: brightness(1.15);
  animation: none;
  box-shadow: 0 0 30px rgba(249,115,22,.8), 0 0 50px rgba(138,43,226,.6) !important;
}

.btn-hero-offer:active {
  transform: translateY(0) scale(.97);
}

@media (max-width: 768px) {
  .btn-hero-offer {
    font-size: .92rem;
    padding: 12px 22px;
  }
}
@media (max-width: 768px) {
  .btn-primary, a.btn-primary, button.btn-primary {
    animation: btnGlow 4s ease-in-out infinite;
  }
  .btn-primary::after, a.btn-primary::after, button.btn-primary::after {
    animation: btnShine 4s ease-in-out infinite;
  }

  /* ── Футер: текст не обрезается на всех страницах ── */
  .footer {
    overflow-x: hidden !important;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
    overflow-x: hidden !important;
  }
  .footer-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    padding: 0 16px !important;
  }
  .footer-link,
  .no-link-address,
  .footer-grid > div,
  .footer-grid > div > *,
  .footer-content > div,
  .footer-content > div > * {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }
  .footer-bottom {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}