/**
 * Buttons – единый UI-компонент (pill / rounded)
 *
 * Канон:
 *   .ps-btn.ps-btn--filled   – заливка (primary CTA)
 *   .ps-btn.ps-btn--outline  – тонкая рамка, пустой фон
 *   .ps-btn.ps-btn--telegram / --white / --ghost
 *
 * Legacy-классы алиасятся. Hover: цвет/тень, БЕЗ translateY «подпрыгивания».
 * См. COMPONENTS.md
 */

/* ===== Base (все кнопки – pill) ===== */
.ps-btn,
.btn-order,
.btn-primary-hero,
.btn-hero-form,
.btn-submit,
.btn-submit-sidebar,
.btn-cta-white,
.btn-cta-telegram,
.btn-secondary,
.btn-calc-order,
.order-popup-btn,
.service-block__btn,
.services-included-card__btn,
.ps-pricing-card__btn,
.ps-pricing-trust__btn,
.exit-popup__btn,
.calc-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    margin: 0;
    padding: 12px 24px;
    border: 1.5px solid transparent;
    border-radius: var(--radius-full);
    font-family: inherit;
    font-size: var(--btn-fs, 0.9375rem);
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    transform: none !important;
}

.ps-btn:hover,
.ps-btn:active,
.ps-btn:focus,
.btn-order:hover,
.btn-order:active,
.btn-primary-hero:hover,
.btn-primary-hero:active,
.btn-secondary:hover,
.btn-secondary:active,
.btn-cta-white:hover,
.btn-cta-telegram:hover,
.btn-calc-order:hover,
.service-block__btn:hover,
.services-included-card__btn:hover,
.ps-pricing-card__btn:hover,
.ps-pricing-trust__btn:hover,
.exit-popup__btn:hover,
.order-popup-btn:hover,
.calc-nav:hover,
.calc-nav:active {
    transform: none !important;
}

.ps-btn:focus-visible,
.btn-order:focus-visible,
.btn-primary-hero:focus-visible,
.btn-submit:focus-visible,
.btn-cta-white:focus-visible,
.btn-cta-telegram:focus-visible,
.btn-secondary:focus-visible,
.service-block__btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.ps-btn--block,
.ps-btn--full {
    width: 100%;
}

/* ===== Filled (заливка) ===== */
.ps-btn--filled,
.ps-btn--primary,
.btn-order,
.btn-primary-hero,
.btn-hero-form,
.btn-submit,
.btn-calc-order,
.order-popup-btn,
.exit-popup__btn,
.services-included-card__btn,
.ps-pricing-trust__btn {
    background: var(--gradient-primary);
    color: var(--color-white) !important;
    border-color: transparent;
    box-shadow: var(--shadow-xs);
}

.ps-btn--filled:hover,
.ps-btn--primary:hover,
.btn-order:hover,
.btn-primary-hero:hover,
.btn-hero-form:hover,
.btn-submit:hover,
.btn-calc-order:hover,
.order-popup-btn:hover,
.exit-popup__btn:hover,
.services-included-card__btn:hover,
.ps-pricing-trust__btn:hover {
    background: var(--gradient-primary-hover);
    color: var(--color-white) !important;
    box-shadow: var(--shadow-primary);
    transform: none !important;
}

.btn-primary-hero {
    padding: 14px 28px;
    font-weight: 700;
}

.btn-submit,
.btn-submit-sidebar,
.hero-form-container .btn-order.hero-form-submit,
.exit-popup__btn {
    width: 100%;
}

.btn-submit-sidebar {
    background: var(--gradient-success);
}

.btn-submit-sidebar:hover {
    background: var(--gradient-success-hover, linear-gradient(135deg, #059669 0%, #10b981 100%));
}

/* ===== Outline (тонкая рамка, пустой фон) ===== */
.ps-btn--outline,
.btn-secondary,
.service-block__btn {
    background: transparent;
    color: var(--color-primary) !important;
    border: 1.5px solid var(--color-primary);
    box-shadow: none;
}

.ps-btn--outline:hover,
.btn-secondary:hover,
.service-block__btn:hover {
    background: var(--color-primary-bg);
    color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark);
    box-shadow: none;
}

/* Reviews / FAQ CTA: soft filled surface + outline feel */
.reviews-cta .btn-secondary,
.faq-cta .btn-secondary,
.reviews-cta .ps-btn--outline,
.faq-cta .ps-btn--outline {
    background: var(--color-bg-section);
    border-color: var(--color-border);
    color: var(--color-primary) !important;
}

.reviews-cta .btn-secondary:hover,
.faq-cta .btn-secondary:hover,
.reviews-cta .ps-btn--outline:hover,
.faq-cta .ps-btn--outline:hover {
    background: var(--color-white);
    border-color: var(--color-primary);
}

/* ===== White on dark ===== */
.ps-btn--white,
.btn-cta-white {
    background: var(--color-white);
    color: var(--color-primary) !important;
    border-color: transparent;
    font-weight: 700;
    width: 100%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.ps-btn--white:hover,
.btn-cta-white:hover {
    background: var(--color-white);
    color: var(--color-primary-dark) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

@media (min-width: 922px) {
    .ps-btn--white,
    .btn-cta-white {
        width: auto;
        padding: 14px 36px;
    }
}

/* ===== Telegram ===== */
.ps-btn--telegram,
.btn-cta-telegram {
    background: var(--color-telegram);
    color: var(--color-white) !important;
    border-color: transparent;
    padding: 14px 28px;
    box-shadow: 0 4px 14px rgba(0, 136, 204, 0.35);
    width: 100%;
    max-width: 320px;
}

.ps-btn--telegram:visited,
.btn-cta-telegram:visited {
    background: var(--color-telegram);
    color: var(--color-white) !important;
    box-shadow: 0 4px 14px rgba(0, 136, 204, 0.35);
}

.ps-btn--telegram:hover,
.btn-cta-telegram:hover {
    background: var(--color-telegram-hover);
    color: var(--color-white) !important;
    box-shadow: 0 6px 18px rgba(0, 136, 204, 0.4);
}

.ps-btn--telegram svg,
.btn-cta-telegram svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

@media (min-width: 922px) {
    .ps-btn--telegram,
    .btn-cta-telegram {
        width: auto;
        max-width: none;
        padding: 16px 32px;
    }
}

.btn-cta-telegram--sm {
    padding: 10px 18px;
    font-size: 0.875rem;
    max-width: none;
    width: auto;
}

/* ===== Ghost / text (не путать с .seo-intro-more – он в _components.css) ===== */
.ps-btn--ghost,
.ps-btn-text,
.task-expand-modal__btn--ghost {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--color-primary) !important;
    border: 0 !important;
    border-radius: 0;
    padding: 0;
    font-weight: 600;
    transform: none !important;
    scale: 1 !important;
    font-size: 0.9375rem !important;
}

.ps-btn--ghost:hover,
.ps-btn-text:hover {
    color: var(--color-primary-dark) !important;
}

/* ===== Service card overlay ===== */
.service-card-overlay .btn-card-order,
.overlay-buttons .btn-card-order {
    background: var(--color-white);
    color: var(--color-primary) !important;
    border-color: transparent;
    box-shadow: none;
    padding: 10px 20px;
    font-size: 0.875rem;
}

.service-card-overlay .btn-card-order:hover,
.overlay-buttons .btn-card-order:hover {
    background: var(--color-success);
    color: var(--color-white) !important;
}

.service-card-overlay .btn-card-more,
.overlay-buttons .btn-card-more {
    background: transparent;
    color: var(--color-white) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    box-shadow: none;
    padding: 10px 20px;
    font-size: 0.875rem;
}

.service-card-overlay .btn-card-more:hover,
.overlay-buttons .btn-card-more:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--color-white);
    color: var(--color-white) !important;
}

/* ===== Sizes ===== */
.ps-btn--sm,
.service-block__btn {
    padding: 10px 18px;
    font-size: 0.875rem;
}

.ps-btn--lg {
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 700;
}

@media (max-width: 921px) {
    .ps-btn,
    .btn-order,
    .btn-primary-hero,
    .btn-secondary,
    .service-block__btn,
    .btn-cta-telegram {
        font-size: 0.875rem;
        padding: 11px 18px;
    }

    .btn-primary-hero {
        padding: 12px 22px;
    }
}