/* Billing Interval Toggle Styles */

.billing-interval-toggle {
    position: relative;
}

/* Override toggle colors for billing section */
.billing-interval-toggle .toggle-switch input:checked + .toggle-slider {
    background: var(--color-primary, #667eea);
}

.billing-interval-toggle .toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

.billing-interval-toggle .toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Smooth transitions for price changes */
.monthly-price, .yearly-price {
    transition: all 0.3s ease;
}

/* Toggle animation improvements - scoped to billing only */
.billing-interval-toggle .toggle-slider:before {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover effects */
.billing-interval-toggle:hover .toggle-switch {
    transform: scale(1.05);
}

.billing-interval-toggle:hover .toggle-slider:before {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Active state */
.billing-interval-toggle .toggle-switch input:active + .toggle-slider {
    transform: scale(0.95);
}

/* Dark mode support */
[data-theme="dark"] .billing-interval-toggle .toggle-slider {
    background: var(--color-border, #374151);
}

[data-theme="dark"] .billing-interval-toggle .toggle-switch input:checked + .toggle-slider {
    background: var(--color-primary, #667eea);
}