/* Pricing Switcher — bkpsw- */ .bkpsw-wrap { display: flex; justify-content: center; padding: 20px 0; width: 100%; } .bkpsw-switch { display: inline-flex; align-items: center; padding: 4px; gap: 4px; background: var(--bkpsw-bg, #f3f3f7); border-radius: var(--bkpsw-radius, 40px); } .bkpsw-btn { padding: 8px 24px; border-radius: calc( var(--bkpsw-radius, 40px) - 4px ); background: transparent; color: var(--bkpsw-inactive-text, #555); border: none; cursor: pointer; font-family: var(--bkpsw-lb-font-family, inherit); font-size: var(--bkpsw-lb-font-size-d, 14px); font-weight: var(--bkpsw-lb-font-weight, 600); font-style: var(--bkpsw-lb-font-style, normal); text-decoration: var(--bkpsw-lb-text-decoration, none); text-transform: var(--bkpsw-lb-text-transform, none); line-height: var(--bkpsw-lb-line-height-d, 1.4); letter-spacing: var(--bkpsw-lb-letter-spacing-d, normal); word-spacing: var(--bkpsw-lb-word-spacing-d, normal); transition: background 0.25s, color 0.25s; } .bkpsw-btn.bkpsw-active { background: var(--bkpsw-accent, #6c3fb5); color: var(--bkpsw-active-text, #fff); } /* Badge */ .bkpsw-badge { margin-left: 6px; background: #f59e0b; color: #fff; border-radius: 20px; padding: 2px 7px; vertical-align: middle; display: inline-block; font-family: var(--bkpsw-bd-font-family, inherit); font-size: var(--bkpsw-bd-font-size-d, 11px); font-weight: var(--bkpsw-bd-font-weight, 700); font-style: var(--bkpsw-bd-font-style, normal); text-decoration: var(--bkpsw-bd-text-decoration, none); text-transform: var(--bkpsw-bd-text-transform, none); line-height: var(--bkpsw-bd-line-height-d, normal); letter-spacing: var(--bkpsw-bd-letter-spacing-d, normal); word-spacing: var(--bkpsw-bd-word-spacing-d, normal); } /* ---- Slider style ---- */ .bkpsw-style-slider .bkpsw-switch { position: relative; } .bkpsw-style-slider .bkpsw-btn { position: relative; z-index: 1; } /* ---- Toggle style ---- */ .bkpsw-style-toggle .bkpsw-switch { gap: 10px; background: transparent !important; padding: 0; } .bkpsw-style-toggle .bkpsw-btn { background: transparent !important; color: var(--bkpsw-inactive-text, #555); border: none !important; padding: 0 4px; } .bkpsw-style-toggle .bkpsw-btn.bkpsw-active { color: var(--bkpsw-accent, #6c3fb5); background: transparent !important; } .bkpsw-style-toggle .bkpsw-switch::before { content: ''; display: inline-block; width: 48px; height: 26px; background: var(--bkpsw-accent, #6c3fb5); border-radius: 13px; vertical-align: middle; transition: background 0.25s; cursor: pointer; flex-shrink: 0; } .bkpsw-style-toggle .bkpsw-switch::after { content: ''; position: absolute; left: calc( 50% - 24px + 2px ); top: 50%; transform: translateY(-50%); width: 22px; height: 22px; background: #fff; border-radius: 50%; transition: left 0.25s; pointer-events: none; } .bkpsw-yearly-active .bkpsw-style-toggle .bkpsw-switch::after { left: calc( 50% - 24px + 26px ); } /* ---- Pricing table visibility integration ---- */ .wp-block-blockenberg-pricing-table .bkpsw-monthly, .wp-block-blockenberg-pricing-table .bkpsw-yearly { display: none; } /* When page is in monthly mode */ body.bkpsw-page-monthly .wp-block-blockenberg-pricing-table .bkpsw-monthly, .bkpsw-monthly-active ~ .wp-block-blockenberg-pricing-table .bkpsw-monthly { display: ''; } /* When page is in yearly mode */ body.bkpsw-page-yearly .wp-block-blockenberg-pricing-table .bkpsw-yearly, .bkpsw-yearly-active ~ .wp-block-blockenberg-pricing-table .bkpsw-yearly { display: ''; } @media (max-width: 1024px) { .bkpsw-btn { font-size: var(--bkpsw-lb-font-size-t, 14px); line-height: var(--bkpsw-lb-line-height-t, 1.4); letter-spacing: var(--bkpsw-lb-letter-spacing-t, normal); word-spacing: var(--bkpsw-lb-word-spacing-t, normal); } .bkpsw-badge { font-size: var(--bkpsw-bd-font-size-t, 11px); line-height: var(--bkpsw-bd-line-height-t, normal); letter-spacing: var(--bkpsw-bd-letter-spacing-t, normal); word-spacing: var(--bkpsw-bd-word-spacing-t, normal); } } @media (max-width: 767px) { .bkpsw-btn { font-size: var(--bkpsw-lb-font-size-m, 14px); line-height: var(--bkpsw-lb-line-height-m, 1.4); letter-spacing: var(--bkpsw-lb-letter-spacing-m, normal); word-spacing: var(--bkpsw-lb-word-spacing-m, normal); } .bkpsw-badge { font-size: var(--bkpsw-bd-font-size-m, 11px); line-height: var(--bkpsw-bd-line-height-m, normal); letter-spacing: var(--bkpsw-bd-letter-spacing-m, normal); word-spacing: var(--bkpsw-bd-word-spacing-m, normal); } }