/*
 * Единая кнопка-«пилюля» со стрелкой в кружке:
 * шапка (.menu__phone «Связаться с нами») и .btn (--alt / --two) по всему сайту.
 * Кружок утоплен внутрь пилюли (как логотипы в блоке технологий),
 * ховер — как у карточек портфолио: из кружка растекается зелёная капля
 * и заливает пилюлю (js/cta-drop.js, gooey-фильтр #cta-goo).
 * Правила вне @layer — перебивают слоистые .btn из template_styles.css.
 */

:root {
    --cta-h: 44px;          /* было 66px */
    --cta-inset: 4px;       /* отступ кружка от края пилюли */
    --cta-circle: calc(var(--cta-h) - 2 * var(--cta-inset) - 2px);
    --cta-ease: cubic-bezier(.22, 1, .36, 1);
}

@media (max-width: 620px) {
    :root {
        --cta-h: 40px;
        --cta-inset: 3px;
    }
}

/* ---------- пилюля ---------- */
.btn > span,
.menu__phone > span {
    box-sizing: border-box;
    min-height: var(--cta-h);
    padding: 0 var(--cta-inset) 0 20px;
    gap: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.1;
    white-space: nowrap;
    border: 1px solid var(--color-alt);
    border-radius: 999px;
    transition:
        transform .35s var(--cta-ease),
        box-shadow .35s var(--cta-ease),
        background-color .35s ease,
        border-color .35s ease,
        color .35s ease;
}

.btn > span.simple {
    padding: 0 20px;
}

/* ---------- кружок со стрелкой ---------- */
.btn > span > span,
.menu__phone > span > span {
    --size: var(--cta-circle);
    width: var(--size);
    height: var(--size);
    flex: 0 0 var(--size);
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 0;
    transition:
        background-color .35s ease,
        box-shadow .35s var(--cta-ease);
}

.btn > span > span:before,
.menu__phone > span > span:before {
    width: 14px;
    height: 11px;
    margin: 0;
    animation: none;
    transition: transform .35s var(--cta-ease), background-color .35s ease;
}

/* ---------- цветовые варианты (в покое) ---------- */
/* шапка: белый фон */
.menu__phone > span {
    color: var(--color-primary);
    background: transparent;
}
.menu__phone > span > span { background: #efefef; }
.menu__phone > span > span:before { background: var(--color-blck); }

/* --alt: тёмный фон */
.btn--alt > span {
    color: var(--color-whte);
    background: transparent;
}
.btn--alt > span > span { background: var(--color-whte); }
.btn--alt > span > span:before { background: #262325; }

/* --two: залитая зелёная */
.btn--two > span {
    color: var(--color-primary);
    background: var(--color-alt);
}
.btn--two > span > span { background: var(--color-whte); }
.btn--two > span > span:before { background: #262325; }

/* --light: белая пилюля с зелёным контуром (кнопки видео, «Связаться с нами» в мобильной шапке) */
.btn--light > span {
    color: var(--color-primary);
    background: var(--color-whte);
}

/* --dark: тёмная пилюля с зелёным контуром (кнопка заявки на странице услуги) */
.btn--dark > span {
    color: var(--color-whte);
    background: #262325;
}

/* зелёный кружок с белой иконкой — общий для --light, --dark и мобильной шапки
   (.mobile-header есть только на мобильном — отдельный @media не нужен) */
.btn--light > span > span,
.btn--dark > span > span,
.mobile-header .menu__phone > span > span {
    background: var(--color-alt);
}
.btn--light > span > span:before,
.btn--dark > span > span:before,
.mobile-header .menu__phone > span > span:before {
    background: var(--color-whte);
}

/* мобильный: конверсионные кнопки на тёмной шапке (кейс, услуга, клиент) — белый аналог, как --light;
   кнопка видео (--play) остаётся тёмной */
@media only screen and (max-width: 769px) {
    .intro .btn--dark.ordercall > span {
        color: var(--color-primary);
        background: var(--color-whte);
    }
}

/* --play: в кружке ▶ вместо стрелки (иконка задаётся --icon, как у стрелки) */
.btn--play > span > span:before {
    width: 11px;
    height: 13px;
    margin-left: 2px;
}

/* ---------- ховер: растекающаяся капля (js/cta-drop.js) ---------- */
.btn > span,
.menu__phone > span {
    position: relative;
    isolation: isolate;  /* слой капли (z-index: -1) — над фоном пилюли, под текстом */
    overflow: hidden;
}

.cta-fill {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    filter: url(#cta-goo);
}

.cta-fill__blob {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: var(--color-alt);
    will-change: transform;
}

.btn--two .cta-fill__blob { background: #262325; }

/* кружок и стрелка при наведении остаются на месте: увеличенный кружок упирался в край пилюли,
   а сдвинутая вправо стрелка уходила из центра кружка — кнопка выглядела кривой */
.btn > span > span,
.menu__phone > span > span {
    position: relative;
    transition:
        background-color .3s ease,
        box-shadow .3s ease;
}

@media (any-hover: hover) {
    /* старое «подталкивание» стрелки (arrowNudge в template_styles.css) тоже снимаем */
    .btn:hover > span > span:before,
    .menu__phone:hover > span > span:before {
        animation: none;
    }

    /* без JS (или до его загрузки) — спокойная заливка вместо капли */
    html:not(.cta-fx) .btn:hover > span,
    html:not(.cta-fx) .menu__phone:hover > span {
        background: var(--color-alt);
        color: var(--color-primary);
    }
}

/* капля накрыла пилюлю: текст контрастный, кружок белый с мягкой тенью */
.is-cta-filled > span > span {
    background: var(--color-whte);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}
.menu__phone.is-cta-filled > span,
.btn--alt.is-cta-filled > span,
.btn--light.is-cta-filled > span,
.btn--dark.is-cta-filled > span { color: var(--color-primary); }
/* капля залила пилюлю — кружок белый, иконка тёмная */
.btn--light.is-cta-filled > span > span:before,
.btn--dark.is-cta-filled > span > span:before { background: #262325; }
.btn--two.is-cta-filled > span { color: var(--color-whte); }

.btn:focus-visible,
.menu__phone:focus-visible {
    outline: none;
}
.btn:focus-visible > span,
.menu__phone:focus-visible > span {
    box-shadow: 0 0 0 3px rgba(143, 198, 38, .45);
}

/* мобильная шапка показывает только иконку телефона — пилюлю не трогаем */
@media (max-width: 769px) {
    .menu__phone > span { display: none; }
}