/* Shared "Per maand / Per jaar" switch (templates/partials/period_toggle.html). Same as cmdb.nu/shop. */
.shop-period-bar { display: flex; justify-content: center; align-items: center; gap: .85rem; margin: 0 auto 2.5rem; }
.shop-period-bar[data-align="start"] { justify-content: flex-start; margin: 0 0 1.5rem; }
.shop-period-label { font-size: .95rem; font-weight: 650; color: #9ca3af; cursor: pointer; user-select: none; transition: color .18s ease; }
.shop-period-label.active { color: #fff; }
html.light .shop-period-label { color: #64748b; }
html.light .shop-period-label.active { color: #0f172a; }
.bmx-toggle { display: inline-flex; align-items: center; background: none; border: 0; cursor: pointer; padding: 0; font: inherit; }
.bmx-toggle-track { position: relative; width: 52px; height: 28px; border-radius: 999px; background: #475569; transition: background .18s ease; box-shadow: inset 0 1px 2px rgba(0,0,0,.25); }
.bmx-toggle-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: left .18s ease; }
.bmx-toggle.on .bmx-toggle-track { background: #22c55e; }
.bmx-toggle.on .bmx-toggle-knob { left: 27px; }
.bmx-toggle:focus-visible .bmx-toggle-track { outline: 2px solid #3b82f6; outline-offset: 2px; }
[data-period-root][data-period="month"] .pv-year { display: none !important; }
[data-period-root][data-period="year"] .pv-month { display: none !important; }
/* Shared switch states (also used by the BastionMX column on /account/domains, partials/switch.html) */
.bmx-toggle:disabled { cursor: not-allowed; opacity: .5; }
.bmx-toggle.is-busy { opacity: 1; cursor: progress; }
.bmx-toggle.is-busy .bmx-toggle-track { background: #64748b; }
.bmx-toggle.is-busy .bmx-toggle-knob::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 2px solid #94a3b8; border-top-color: #2563eb; animation: bmx-spin .8s linear infinite; }
.bmx-toggle.is-error .bmx-toggle-track { background: #b91c1c; }
@keyframes bmx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bmx-toggle.is-busy .bmx-toggle-knob::after { animation-duration: 2.4s; } }