/* ============================================================
   Кнопка «Купить» на странице товара (product.php).

   Выбранный вариант: «CTA со стрелкой, с наклоном» + монетки и искры.
   Идея из присланного примера: скошенная кнопка, смещённая тень,
   стрелка из трёх слоёв (при наведении они выезжают и мигают цветом).
   Монетки и искры — существующий эффект (.magic-btn, magic-button.css/js).

   Подключается только на странице товара:
       <link rel="stylesheet" href="/assets/css/cta-button.css?v=1">

   Всё завязано на класс .cta-buy — другие кнопки сайта не затрагиваются.
   ============================================================ */

/* ---------- каркас кнопки ---------- */

.cta-buy {
    /* настройки внешнего вида: правьте здесь */
    --cta-accent: #eaffb0;   /* цвет вспышки стрелок при наведении */
    --cta-skew: -12deg;      /* наклон кнопки */

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    height: 56px;
    padding: 0 28px;
    margin: 0;
    box-sizing: border-box;

    border: 0;
    border-radius: 6px;
    background: var(--primary1, #2bd228);
    color: #fff;

    font-family: "Onest", "Geologica", sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .3px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;

    transform: skewX(var(--cta-skew));
    box-shadow: 0 0 0 0 rgb(43 210 40 / 55%), 6px 6px 0 rgb(0 0 0 / 35%);
    transition: box-shadow .5s ease, background-color .3s ease;

    /* Изолируем слои: тогда слой монеток (.magic-fx) с z-index:-1
       окажется над фоном кнопки, но под её содержимым. */
    isolation: isolate;
}

.cta-buy:hover {
    background: var(--primary_hover, #139522);
    box-shadow: 0 0 26px 4px rgb(43 210 40 / 55%), 8px 8px 0 rgb(0 0 0 / 35%);
}

.cta-buy:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Кнопка наклонена — содержимое возвращаем в вертикаль (как в оригинале). */
.cta-buy__text,
.cta-buy__icon,
.cta-buy__arrow {
    transform: skewX(calc(-1 * var(--cta-skew)));
}

.cta-buy__text {
    display: block;
}

.cta-buy__icon {
    display: block;
    width: 22px;
    height: 22px;
}

/* ---------- стрелка из трёх слоёв ---------- */

.cta-buy__arrow {
    position: relative;
    display: flex;
    align-items: center;
    width: 26px;
    height: 19px;
    /* main.css: * { z-index: 2 } — держим стрелку выше фона и частиц */
    z-index: 3;
    transition: transform .5s ease;
}

.cta-buy__arrow svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cta-buy__arrow path {
    fill: #fff;
}

/* В покое видна одна стрелка, две другие спрятаны левее. */
.cta-buy__arrow path.one {
    transform: translateX(-60%);
    transition: transform .4s ease;
}

.cta-buy__arrow path.two {
    transform: translateX(-30%);
    transition: transform .5s ease;
}

.cta-buy__arrow path.three {
    transition: transform .5s ease;
}

.cta-buy:hover .cta-buy__arrow path.one {
    transform: translateX(0);
    animation: cta-color 1s infinite .6s;
}

.cta-buy:hover .cta-buy__arrow path.two {
    transform: translateX(0);
    animation: cta-color 1s infinite .4s;
}

.cta-buy:hover .cta-buy__arrow path.three {
    animation: cta-color 1s infinite .2s;
}

@keyframes cta-color {

    0%,
    100% {
        fill: #fff;
    }

    50% {
        fill: var(--cta-accent);
    }
}

/* ---------- монетки и искры (класс .magic-btn) ----------

   Разметку и скрипт эффекта трогать не нужно: готовая кнопка получает
   класс magic-btn, и magic-button.js сам создаёт слой .magic-fx.

   ⚠ В magic-button.css у .magic-btn заданы СОБСТВЕННЫЕ цвета наведения
   (--primary_hover/--primary_click — синие). Ниже возвращаем зелёные сайта,
   чтобы кнопка и её свечение выглядели согласованно. Хотите прежний
   синий ховер — просто удалите этот блок. */

.cta-buy.magic-btn {
    --primary_hover: #139522;
    --primary_click: #db2e00;
}

/* ---------- мобильные (как у прежней кнопки при ≤1050px) ---------- */

@media screen and (max-width: 1050px) {
    .cta-buy {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- кому анимация мешает ---------- */

@media (prefers-reduced-motion: reduce) {
    .cta-buy:hover .cta-buy__arrow path {
        animation: none;
    }
}