/*
 * StepraEngine Lite - Freemius in-dashboard upgrade skin.
 * Scope: Freemius Upgrade page inside wp-admin only.
 * Purpose: simplify the pricing table, keep all Freemius controls visible,
 * and clarify that the plan difference is site activations only.
 */

#fs_pricing,
#fs_pricing_wrapper,
#fs_pricing_app {
    --stepra-green: #00bf7a;
    --stepra-green-dark: #00a86c;
    --stepra-navy: #111827;
    --stepra-text: #374151;
    --stepra-muted: #6b7280;
    --stepra-border: #e5e7eb;
    --stepra-soft: #ecfdf5;
    --stepra-bg: #f8fafc;
    --fs-ds-theme-primary-accent-color: #00bf7a !important;
    --fs-ds-theme-primary-accent-color-hover: #00a86c !important;
    --fs-ds-theme-primary-green-color: #00bf7a !important;
    --fs-ds-theme-heading-text-color: #111827 !important;
    --fs-ds-theme-text-color: #374151 !important;
    --fs-ds-theme-muted-text-color: #6b7280 !important;
    --fs-ds-theme-divider-color: #e5e7eb !important;
    --fs-ds-theme-border-color: #e5e7eb !important;
    --fs-ds-theme-background-shade: #f8fafc !important;
    --fs-ds-theme-background-accented: #f8fafc !important;
    --fs-ds-theme-package-popular-background: #ecfdf5 !important;
    color: var(--stepra-text) !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

#fs_pricing.wrap.fs-section.fs-full-size-wrapper {
    margin: 0 !important;
    padding: 28px 24px 48px !important;
    background: var(--stepra-bg) !important;
    min-height: calc(100vh - 32px) !important;
}

#fs_pricing_wrapper {
    max-width: 1120px !important;
    margin: 0 auto !important;
}

#fs_pricing_app,
#fs_pricing_app * {
    box-sizing: border-box !important;
}

#fs_pricing_app .fs-app-header,
#fs_pricing_app .fs-page-title {
    color: var(--stepra-navy) !important;
}

#fs_pricing_app .fs-page-title h1 {
    color: var(--stepra-navy) !important;
    font-size: 26px !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
}

#fs_pricing_app .fs-page-title h3 {
    color: var(--stepra-muted) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-top: 0 !important;
}

#fs_pricing_app .stepra-pricing-site-note {
    max-width: 820px !important;
    margin: 10px auto 18px !important;
    padding: 13px 16px !important;
    background: var(--stepra-soft) !important;
    border: 1px solid rgba(0, 191, 122, 0.24) !important;
    border-radius: 12px !important;
    color: #065f46 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

#fs_pricing_app .fs-section--plans-and-pricing,
#fs_pricing_app .fs-section--packages {
    background: transparent !important;
    overflow: visible !important;
}

#fs_pricing_app .fs-packages-nav,
#fs_pricing_app .fs-packages {
    overflow: visible !important;
}

#fs_pricing_app .fs-packages {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 18px !important;
    margin: 18px auto 28px !important;
    padding: 8px 0 !important;
    background: transparent !important;
}

#fs_pricing_app .fs-package {
    position: relative !important;
    z-index: 1 !important;
    flex: 1 1 300px !important;
    max-width: 330px !important;
    min-width: 280px !important;
    background: #ffffff !important;
    border: 1px solid var(--stepra-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
    overflow: visible !important;
}

#fs_pricing_app .fs-package:hover,
#fs_pricing_app .fs-package:focus-within {
    z-index: 20 !important;
    border-color: rgba(0, 191, 122, 0.36) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.09) !important;
}

#fs_pricing_app .fs-package:first-child,
#fs_pricing_app .fs-package + .fs-package,
#fs_pricing_app .fs-package:last-child {
    border-left: 1px solid var(--stepra-border) !important;
    border-right: 1px solid var(--stepra-border) !important;
}

#fs_pricing_app .fs-package:nth-child(2),
#fs_pricing_app .fs-package.fs-featured-plan {
    border-color: var(--stepra-green) !important;
}

#fs_pricing_app .fs-package:nth-child(2)::before {
    content: "Most popular";
    display: block !important;
    padding: 8px 12px !important;
    background: var(--stepra-soft) !important;
    color: var(--stepra-green-dark) !important;
    border-radius: 16px 16px 0 0 !important;
    border-bottom: 1px solid rgba(0, 191, 122, 0.22) !important;
    text-align: center !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
}

#fs_pricing_app .fs-package.fs-featured-plan .fs-most-popular {
    background: var(--stepra-soft) !important;
    color: var(--stepra-green-dark) !important;
    border-radius: 16px 16px 0 0 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
}

#fs_pricing_app .fs-package .fs-package-content {
    padding: 0 18px 22px !important;
    overflow: visible !important;
}

#fs_pricing_app .fs-package .fs-plan-title,
#fs_pricing_app .fs-package.fs-featured-plan .fs-plan-title {
    background: #ffffff !important;
    color: var(--stepra-navy) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--stepra-border) !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 18px 12px 14px !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.015em !important;
}

#fs_pricing_app .fs-package:nth-child(2) .fs-plan-title {
    border-radius: 0 !important;
}

#fs_pricing_app .fs-package .fs-plan-description {
    max-width: 250px !important;
    min-height: 44px !important;
    margin: 16px auto 12px !important;
    color: var(--stepra-text) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

#fs_pricing_app .fs-package .fs-selected-pricing-amount {
    margin: 14px 0 8px !important;
    color: var(--stepra-navy) !important;
}

#fs_pricing_app .fs-package .fs-selected-pricing-amount .fs-currency-symbol {
    color: var(--stepra-navy) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
}

#fs_pricing_app .fs-package .fs-selected-pricing-amount .fs-selected-pricing-amount-integer {
    color: var(--stepra-navy) !important;
    font-size: 54px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    letter-spacing: -0.04em !important;
}

#fs_pricing_app .fs-package .fs-selected-pricing-amount .fs-selected-pricing-amount-fraction-container,
#fs_pricing_app .fs-package .fs-selected-pricing-amount .fs-selected-pricing-amount-cycle,
#fs_pricing_app .fs-package .fs-billing-cycle,
#fs_pricing_app .fs-package .fs-selected-pricing-license-quantity,
#fs_pricing_app .fs-package .fs-licenses {
    color: var(--stepra-text) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

#fs_pricing_app .fs-package .fs-billing-cycle {
    margin-top: 12px !important;
    color: var(--stepra-navy) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

#fs_pricing_app .fs-package .fs-support-and-main-features {
    margin: 20px -18px 0 !important;
    padding: 16px 18px 12px !important;
    background: #f8fafc !important;
    border-top: 1px solid var(--stepra-border) !important;
    border-bottom: 1px solid var(--stepra-border) !important;
    color: var(--stepra-text) !important;
    overflow: visible !important;
}

#fs_pricing_app .fs-package .fs-plan-support {
    margin-bottom: 12px !important;
    color: var(--stepra-navy) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

#fs_pricing_app .fs-package .fs-plan-features-with-value,
#fs_pricing_app .fs-package .fs-plan-features-with-value li,
#fs_pricing_app .fs-package .fs-plan-features,
#fs_pricing_app .fs-package .fs-plan-features li {
    color: var(--stepra-text) !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
}

#fs_pricing_app .fs-package .fs-plan-features-with-value li,
#fs_pricing_app .fs-package .fs-plan-features li {
    margin-bottom: 8px !important;
}

#fs_pricing_app .fs-package .fs-plan-features-with-value li .fs-feature-title,
#fs_pricing_app .fs-package .fs-plan-features li .fs-feature-title {
    color: var(--stepra-text) !important;
    font-weight: 500 !important;
}

#fs_pricing_app .fs-package .fs-plan-features-with-value li > strong,
#fs_pricing_app .fs-package .fs-plan-features-with-value li b,
#fs_pricing_app .fs-package .fs-plan-features li > strong,
#fs_pricing_app .fs-package .fs-plan-features li b {
    color: var(--stepra-navy) !important;
    font-weight: 800 !important;
}

#fs_pricing_app .fs-package .fs-upgrade-button {
    margin-top: 18px !important;
}

#fs_pricing_app .fs-package .fs-upgrade-button a,
#fs_pricing_app .fs-package .fs-upgrade-button button,
#fs_pricing_app .fs-package .fs-button,
#fs_pricing_app a.fs-button {
    min-height: 46px !important;
    width: 100% !important;
    border-radius: 10px !important;
    background: var(--stepra-green) !important;
    border: 1px solid var(--stepra-green) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

#fs_pricing_app .fs-package .fs-upgrade-button a:hover,
#fs_pricing_app .fs-package .fs-upgrade-button button:hover,
#fs_pricing_app .fs-package .fs-button:hover,
#fs_pricing_app a.fs-button:hover {
    background: var(--stepra-green-dark) !important;
    border-color: var(--stepra-green-dark) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

#fs_pricing_app .fs-package .fs-plan-features {
    margin: 18px 0 0 !important;
    padding: 16px 18px 0 !important;
    border-top: 1px solid var(--stepra-border) !important;
}

#fs_pricing_app .fs-package .fs-plan-features li::marker,
#fs_pricing_app .fs-package .fs-plan-features svg,
#fs_pricing_app .fs-package .fs-plan-features .dashicons,
#fs_pricing_app .fs-package .fs-plan-features-with-value .dashicons {
    color: var(--stepra-green-dark) !important;
}

#fs_pricing_app .fs-tooltip,
#fs_pricing_app .dashicons-editor-help,
#fs_pricing_app .dashicons-info {
    color: var(--stepra-muted) !important;
    opacity: 0.8 !important;
}

#fs_pricing_app .fs-tooltip-trigger {
    position: relative !important;
    z-index: 30 !important;
}

#fs_pricing_app .fs-tooltip-trigger .fs-tooltip,
#fs_pricing_app .fs-tooltip {
    z-index: 999999 !important;
}

#fs_pricing_app .fs-tooltip-trigger:hover,
#fs_pricing_app .fs-tooltip-trigger:focus,
#fs_pricing_app .dashicons-editor-help:hover,
#fs_pricing_app .dashicons-info:hover {
    z-index: 999999 !important;
}

#fs_pricing_app a:not(.fs-button) {
    color: var(--stepra-green-dark) !important;
}

@media only screen and (max-width: 1120px) {
    #fs_pricing_app .fs-packages {
        gap: 14px !important;
    }

    #fs_pricing_app .fs-package {
        min-width: 250px !important;
    }
}

@media only screen and (max-width: 782px) {
    #fs_pricing.wrap.fs-section.fs-full-size-wrapper {
        padding: 18px 12px 36px !important;
    }

    #fs_pricing_app .fs-packages {
        display: block !important;
    }

    #fs_pricing_app .fs-package {
        max-width: 380px !important;
        margin: 0 auto 18px !important;
    }

    #fs_pricing_app .stepra-pricing-site-note {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: left !important;
    }
}
