/* Pricing monthly/annual toggle — visual styles only.
 * Used by static/js/marketing/pricing_toggle.js.
 * Scoped to .pricing-toggle so it cannot leak.
 */
.pricing-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin: 1.25rem auto 0;
    padding: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    backdrop-filter: blur(6px);
}

.pricing-toggle-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.55rem 1.25rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.05s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.pricing-toggle-btn:hover { color: #fff; }
.pricing-toggle-btn:active { transform: translateY(1px); }

.pricing-toggle-btn.is-active {
    background: #fff;
    color: #111;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

.pricing-toggle-save {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
    line-height: 1;
}

.pricing-toggle-btn.is-active .pricing-toggle-save {
    background: rgba(34, 197, 94, 0.22);
    color: #16a34a;
}

/* Light-mode fallback (used on for_estimators.html which inherits marketing.css) */
[data-theme="light"] .pricing-toggle {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .pricing-toggle-btn { color: #444; }
[data-theme="light"] .pricing-toggle-btn:hover { color: #000; }
[data-theme="light"] .pricing-toggle-btn.is-active {
    background: #111;
    color: #fff;
}