/* ============================================
   Smart CTA Engine — bar (mobile) + card (desktop) + collapsed tab

   Документация: docs/marketing/smart-cta-engine.md §3
   Подключается ГЛОБАЛЬНО через includes/header.php (на всех страницах)
   ============================================ */

.cta-bar,
.cta-bar-tab {
    display: none;
}

/* ---------- Mobile bar (полная ширина снизу) ---------- */
@media (max-width: 767px) {
    .cta-bar.cta-bar--mobile,
    .cta-bar:not(.cta-bar--desktop) {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: #fff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        padding: 0.625rem 1rem;
        padding-bottom: calc(0.625rem + env(safe-area-inset-bottom, 0px));
        transform: translateY(100%);
        transition: transform 300ms ease;
    }

    .cta-bar.cta-bar--mobile.is-visible,
    .cta-bar:not(.cta-bar--desktop).is-visible {
        transform: translateY(0);
    }

    .cta-bar__body {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .cta-bar__text {
        flex: 1;
        min-width: 0;
    }

    .cta-bar__title {
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--text, #1a1a2e);
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cta-bar__sub {
        font-size: 0.6875rem;
        color: #9ca3af;
        line-height: 1.3;
        margin-top: 1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cta-bar__btn {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
        font-weight: 600;
        color: #fff;
        background: var(--primary, #ed538a);
        border: none;
        border-radius: 8px;
        cursor: pointer;
        text-decoration: none;
        white-space: nowrap;
        transition: background 0.2s ease;
    }

    .cta-bar__btn:hover,
    .cta-bar__btn:active {
        background: var(--primary-light, #f06e9f);
        color: #fff;
    }

    .cta-bar__close {
        position: absolute;
        top: 4px;
        right: 6px;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        font-size: 1.125rem;
        color: #9ca3af;
        cursor: pointer;
        padding: 0;
        line-height: 1;
    }

    .cta-bar__close:hover {
        color: var(--text, #1a1a2e);
    }

    /* ---------- Mobile хвостик — свёрнутая полоска снизу ---------- */
    .cta-bar-tab.cta-bar-tab--mobile {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.625rem 1rem;
        padding-bottom: calc(0.625rem + env(safe-area-inset-bottom, 0px));
        background: var(--primary, #ed538a);
        color: #fff;
        border: none;
        border-radius: 0;
        cursor: pointer;
        text-align: left;
        font-family: inherit;
        box-shadow: 0 -4px 14px rgba(237, 83, 138, 0.28);
        transform: translateY(100%);
        transition: transform 300ms ease;
    }

    .cta-bar-tab.cta-bar-tab--mobile.is-visible {
        transform: translateY(0);
    }

    .cta-bar-tab--mobile .cta-bar-tab__title {
        flex: 1;
        min-width: 0;
        font-size: 0.8125rem;
        font-weight: 700;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: opacity 240ms ease, transform 240ms ease;
    }

    /* Авто-ротация текста: fade-out перед сменой варианта, fade-in после */
    .cta-bar-tab--mobile.is-rotating .cta-bar-tab__title {
        opacity: 0;
        transform: translateY(-6px);
    }

    @media (prefers-reduced-motion: reduce) {
        .cta-bar-tab--mobile .cta-bar-tab__title {
            transition: opacity 180ms ease;
        }
        .cta-bar-tab--mobile.is-rotating .cta-bar-tab__title {
            transform: none;
        }
    }

    .cta-bar-tab--mobile .cta-bar-tab__chevron {
        flex-shrink: 0;
        color: #fff;
    }
}

/* ---------- Desktop card (правый нижний угол) ---------- */
@media (min-width: 768px) {
    .cta-bar.cta-bar--desktop {
        display: block;
        position: fixed;
        bottom: 24px;
        right: 24px;
        z-index: 1000;
        width: 340px;
        max-width: calc(100vw - 48px);
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 12px 32px rgba(20, 20, 60, 0.18), 0 2px 6px rgba(20, 20, 60, 0.08);
        padding: 1rem 1.125rem 1.125rem;
        transform: translateX(120%);
        opacity: 0;
        transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1), opacity 350ms ease;
        border: 1px solid rgba(0, 0, 0, 0.04);
    }

    .cta-bar.cta-bar--desktop.is-visible {
        transform: translateX(0);
        opacity: 1;
    }

    .cta-bar.cta-bar--desktop .cta-bar__body {
        display: flex;
        flex-direction: column;
        gap: 0.875rem;
    }

    .cta-bar.cta-bar--desktop .cta-bar__text {
        min-width: 0;
    }

    .cta-bar.cta-bar--desktop .cta-bar__title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--text, #1a1a2e);
        line-height: 1.35;
        margin-bottom: 0.375rem;
    }

    .cta-bar.cta-bar--desktop .cta-bar__sub {
        font-size: 0.8125rem;
        color: #6b7280;
        line-height: 1.45;
    }

    .cta-bar.cta-bar--desktop .cta-bar__btn {
        align-self: flex-start;
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.625rem 1.125rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: #fff;
        background: var(--primary, #ed538a);
        border: none;
        border-radius: 10px;
        cursor: pointer;
        text-decoration: none;
        white-space: nowrap;
        transition: background 0.2s ease, transform 0.1s ease;
    }

    .cta-bar.cta-bar--desktop .cta-bar__btn:hover {
        background: var(--primary-light, #f06e9f);
        transform: translateY(-1px);
    }

    .cta-bar.cta-bar--desktop .cta-bar__btn:active {
        transform: translateY(0);
    }

    .cta-bar.cta-bar--desktop .cta-bar__close {
        position: absolute;
        top: 8px;
        right: 10px;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        font-size: 1.25rem;
        color: #9ca3af;
        cursor: pointer;
        padding: 0;
        line-height: 1;
        border-radius: 6px;
        transition: background 0.15s ease, color 0.15s ease;
    }

    .cta-bar.cta-bar--desktop .cta-bar__close:hover {
        color: var(--text, #1a1a2e);
        background: rgba(0, 0, 0, 0.04);
    }

    /* ---------- Desktop хвостик — вертикальный tab справа ---------- */
    .cta-bar-tab.cta-bar-tab--desktop {
        display: flex;
        position: fixed;
        right: 0;
        bottom: 120px;
        z-index: 1000;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.625rem;
        width: 44px;
        min-height: 188px;
        padding: 1rem 0 1.125rem;
        background: var(--primary, #ed538a);
        color: #fff;
        border: none;
        border-radius: 12px 0 0 12px;
        cursor: pointer;
        font-family: inherit;
        box-shadow: -6px 6px 22px rgba(237, 83, 138, 0.32), -2px 2px 6px rgba(20, 20, 60, 0.1);
        transform: translateX(100%);
        opacity: 0;
        transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), opacity 380ms ease, background 0.2s ease, box-shadow 0.2s ease, padding-right 0.2s ease;
    }

    .cta-bar-tab.cta-bar-tab--desktop.is-visible {
        transform: translateX(0);
        opacity: 1;
        animation: ctaTabPulse 2.8s ease-in-out 1s infinite;
    }

    .cta-bar-tab.cta-bar-tab--desktop:hover {
        background: var(--primary-light, #f06e9f);
        padding-right: 4px;
        box-shadow: -10px 6px 28px rgba(237, 83, 138, 0.45), -2px 2px 8px rgba(20, 20, 60, 0.12);
    }

    .cta-bar-tab--desktop .cta-bar-tab__arrow {
        color: #fff;
        flex-shrink: 0;
    }

    .cta-bar-tab--desktop .cta-bar-tab__text {
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1;
        color: #fff;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        white-space: nowrap;
    }

    @keyframes ctaTabPulse {
        0%, 100% {
            box-shadow: -6px 6px 22px rgba(237, 83, 138, 0.32), -2px 2px 6px rgba(20, 20, 60, 0.1);
        }
        50% {
            box-shadow: -6px 6px 30px rgba(237, 83, 138, 0.55), -2px 2px 8px rgba(20, 20, 60, 0.12);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .cta-bar-tab.cta-bar-tab--desktop.is-visible {
            animation: none;
        }
    }
}