/* ─── Pricing period toggle (.hzo-price-toggle) ────────────────────────
   Two-button aria-pressed group; pricing-toggle.js mirrors the pressed
   button into data-period="monthly|annual" on the closest
   [data-hzo-price-group] ancestor, and the display rules below swap any
   [data-price-monthly] / [data-price-annual] elements inside it. Default
   — and the no-JS state — is monthly (annual simply stays hidden and the
   toggle is inert). Markup: blocks/pricing-toggle.html or the
   [hzo_pricing_toggle] shortcode (pricing-toggle.php). */
.hzo-price-toggle {
    display: inline-flex;
    gap: var(--space-xs);
    padding: var(--space-xs);
    background: var(--surface, #fff);
    border: 1px solid var(--surface-border, var(--border));
    border-radius: var(--radius-full);
}
.hzo-price-toggle > button {
    min-height: 44px;
    padding: 0 var(--space-lg);
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: var(--fw-600, 600);
    color: var(--on-surface-muted, var(--text-muted));
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
}
.hzo-price-toggle > button[aria-pressed="true"] {
    background: var(--brand);
    color: var(--text-on-brand);
}
.hzo-price-toggle > button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* Disabled state (defensive — e.g. a client/JS locking a period to "annual only").
   Restored from OURS during the unified merge; his kept version omitted it. */
.hzo-price-toggle > button[disabled], .hzo-price-toggle > button[aria-disabled="true"] { opacity: var(--opacity-disabled); pointer-events: none; }
/* Period swap — :not() keeps monthly visible before JS seeds data-period. */
[data-hzo-price-group]:not([data-period="annual"]) [data-price-annual] { display: none; }
[data-hzo-price-group][data-period="annual"] [data-price-monthly] { display: none; }
@media (prefers-reduced-motion: reduce) {
    .hzo-price-toggle > button { transition: none; }
}