/*
 * Xive Plus on /pricing (pages/pricing.blade.php, 2026-10-25): the "I mostly watch / stream"
 * switch, the Plus card's accent, and the notices under the Plus and upgrade buttons.
 * NOT BUILT -- linked as-is from the page, like pricing-notes.css beside it.
 *
 * Pink is Plus and purple is Pro, as on the proposal and the mockup. The switch only lights a
 * card; nothing is hidden, so every card and button works whichever way it is set.
 */
.pv .pp-tiers { display: flex; flex-direction: column; gap: 22px; }

.pv .pp-who {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center;
}
.pv .pp-who-pick {
    appearance: none; min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .16); background: transparent; color: var(--pv-ink, #f5f5f7);
    font: 600 15px/1 var(--pv-font, inherit);
    transition: background .15s, color .15s, border-color .15s;
}
.pv .pp-who-pick:hover { border-color: rgba(255, 255, 255, .36); }
.pv .pp-who-pick:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--pv-accent, #a855f7); }
.pv .pp-who-pick.is-on { background: var(--pv-ink, #f5f5f7); color: #14111b; border-color: var(--pv-ink, #f5f5f7); }

.pv .pp-plan-plus { border-color: rgba(255, 45, 120, .45); transition: box-shadow .2s, border-color .2s; }
.pv .pp-plan-plus.is-lit { border-color: var(--pv-pink, #ff2d78); box-shadow: 0 30px 80px rgba(255, 45, 120, .2); }
.pv .pp-plan-pro { transition: opacity .2s; }
.pv .pp-plan-pro.is-dim { opacity: .72; }

.pv .pp-chip-plus { background: #3a1626; color: #ffb3d1; border-color: transparent; }

.pv .pp-btn-plus { background: var(--pv-pink, #ff2d78); color: #fff; border: 0; }
.pv .pp-btn-plus:hover { filter: brightness(1.08); }
.pv .pp-btn-plus:disabled { opacity: .6; cursor: progress; }

.pv .pp-plus-notice { margin: 10px 0 0; }
.pv .pp-plus-notice[data-type="success"] { color: var(--pv-green, #24e28a); }
.pv .pp-plus-notice[data-type="error"] { color: var(--pv-red, #ff4d6d); }

.pv .pp-upgrade-line { text-align: center; margin: 0; }

@media (prefers-reduced-motion: reduce) {
    .pv .pp-who-pick, .pv .pp-plan-plus, .pv .pp-plan-pro { transition: none; }
}