/* =========================================================
   enhance.css — легкі покращення дизайну + анімації
   Підключається ПІСЛЯ style.css. Щоб повністю відкотити —
   прибрати <link> на цей файл і <script src="js/enhance.js">.
   ========================================================= */
:root {
  --acc: #7b90dc;        /* фірмовий синьо-фіолетовий сайту */
  --acc-dark: #5d73c4;
  --cta: #ff8c1a;        /* помаранчевий кнопки/ціни */
}
html { scroll-behavior: smooth; }

/* ---------- Поява блоків при скролі ---------- */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1s ease, transform 1s ease;
  will-change: opacity, transform;
}
.js-anim .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Перший екран ---------- */
.js-anim .offer:not(.bottom) > img { animation: heroIn 1.2s ease both; }
@keyframes heroIn { from { opacity: 0; } to { opacity: 1; } }

.offer .sale { animation: saleBreath 5s ease-in-out infinite; transform-origin: center; }
@keyframes saleBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }


/* ---------- Картка форми замовлення ---------- */
.offer .order_form {
  border-radius: 18px;
  box-shadow: 0 0 0 2px rgba(123,144,220,.35), 0 18px 40px rgba(0,0,0,.35);
}
.timer_block .count span {
  background: linear-gradient(180deg, #92a4e6 0%, var(--acc) 50%, var(--acc-dark) 50%, #7084d2 100%) !important;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(93,115,196,.35);
}

.price .old .val span { text-decoration-color: #e53935; }

.m1-form input.field {
  border-radius: 10px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.m1-form input.field:focus {
  border-color: var(--acc);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(123,144,220,.22);
}

/* ---------- Кнопки: відблиск + легкий пульс ---------- */
.button-m {
  overflow: hidden;
  border-radius: 12px;
  transition: filter .2s ease;
}
.button-m::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: shine 7s ease-in-out infinite;
  pointer-events: none;
}
.button-m:hover { filter: brightness(1.06); }
.button-m:disabled { animation: none; opacity: .8; }
@keyframes shine { 0% { left: -75%; } 25%,100% { left: 130%; } }

/* ---------- Заголовки ---------- */
h2.title { letter-spacing: .2px; }

/* ---------- Фото / відео ---------- */
.b1 img, .b5 > img, .howto .howto-video {
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
}
.b1 p { padding-left: 8px; padding-right: 8px; }
.video_sect { overflow: hidden; }

/* ---------- Характеристики — картки ---------- */
.b5 ul { padding: 0 8px; }
.b5 li { padding: 0 6px; }
.b5 li h4 { color: #222; }
.b5 li p { color: #555; }

/* ---------- Кроки "Як підключити" ---------- */
.howto .howto-steps li {
  background: #f5f7ff;
  border-radius: 12px;
  padding: 10px 12px;
}
.howto .howto-steps li > b { box-shadow: 0 4px 10px rgba(123,144,220,.45); }

/* ---------- Як зробити замовлення ---------- */

/* ---------- Відгуки ---------- */
.reviews .item img { box-shadow: 0 10px 26px rgba(0,0,0,.2); }
.reviews .item h4::after {
  content: '★★★★★'; display: block; color: #ffb400; font-size: 16px; letter-spacing: 2px; margin-top: 2px;
}
.reviews .item h4 + p { font-style: italic; }

/* ---------- Липка кнопка "Замовити" внизу екрана ---------- */
.sticky-cta {
  position: fixed; left: 50%; bottom: 0; z-index: 999;
  width: 100%; max-width: 480px;
  transform: translate(-50%, 110%);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(34,36,41,.94);
  box-shadow: 0 -6px 20px rgba(0,0,0,.25);
  display: flex; align-items: center; gap: 12px;
  box-sizing: border-box;
}
.sticky-cta.show { transform: translate(-50%, 0); }
.sticky-cta .sc-price { color: #fff; font-size: 13px; line-height: 1.2; white-space: nowrap; }
.sticky-cta .sc-price s { color: #aaa; }
.sticky-cta .sc-price b { display: block; color: var(--cta); font-size: 24px; }
.sticky-cta a {
  flex: 1; display: block; text-align: center; text-decoration: none;
  background: var(--cta); color: #fff; font-weight: 700; font-size: 18px; text-transform: uppercase;
  border-radius: 10px; padding: 14px 10px;
}

/* ---------- Повага до налаштування "менше анімацій" ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js-anim .reveal { opacity: 1 !important; transform: none !important; }
}