/*
 * Package Builder, storefront. Inherits the theme's type; the accent comes
 * from Settings (--fcpb-accent) and falls back to the text colour.
 */
.fcpb { --_accent: var(--fcpb-accent, currentColor); --_radius: var(--fcpb-radius, 14px); --_line: rgba(0, 0, 0, .1); display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 28px; align-items: start; margin: 0 0 24px; }
.fcpb-intro { grid-column: 1 / -1; margin: 0; }
.fcpb-label { display: block; font-size: .8em; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; opacity: .7; margin: 0 0 8px; }

/* billing cycle: a toggle with a label each side (two cycles), or a pill per cycle */
.fcpb-cycles { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; min-width: 0; }
.fcpb-toggle { display: inline-flex; align-items: center; gap: 16px; padding-top: 1.4em; }
.fcpb-toggle__label { position: relative; display: inline-flex; align-items: center; cursor: pointer; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .9em; opacity: .5; transition: opacity .15s; margin: 0; }
.fcpb-toggle__label.is-active { opacity: 1; }
.fcpb-toggle__label input { position: absolute; opacity: 0; width: 0; height: 0; }
.fcpb-toggle__label .fcpb-save { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); margin: 0; white-space: nowrap; }
.fcpb-toggle__switch { position: relative; width: 56px; height: 30px; border: 0; border-radius: 999px; background: rgba(127, 127, 127, .35); cursor: pointer; padding: 0; flex: none; transition: background .15s; }
.fcpb-toggle__thumb { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--_accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
.fcpb-toggle__switch[aria-checked="true"] .fcpb-toggle__thumb { transform: translateX(26px); }
.fcpb-toggle__switch:focus-visible { outline: 2px solid var(--_accent); outline-offset: 3px; }
.fcpb-toggle__label:has(input:focus-visible) { outline: 2px solid var(--_accent); outline-offset: 4px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .fcpb-toggle__thumb, .fcpb-toggle__label { transition: none; } }
.fcpb-cycles__options { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--_line); border-radius: 999px; }
.fcpb-cycle { position: relative; }
.fcpb-cycle input { position: absolute; opacity: 0; width: 0; height: 0; }
.fcpb-cycle span { display: inline-block; padding: 7px 16px; border-radius: 999px; cursor: pointer; font-size: .95em; }
.fcpb-cycle input:checked + span { background: var(--_accent); color: #fff; }
.fcpb-cycle input:focus-visible + span { outline: 2px solid var(--_accent); outline-offset: 2px; }

/* presets */
.fcpb-presets { grid-column: 1 / -1; }
.fcpb-presets__options { display: flex; flex-wrap: wrap; gap: 8px; }
.fcpb-preset { padding: 8px 16px; border: 1px solid var(--_line); border-radius: 999px; background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: .95em; }
.fcpb-preset:hover { border-color: var(--_accent); }
.fcpb-preset[aria-pressed="true"] { border-color: var(--_accent); background: var(--_accent); color: #fff; }

/* services */
.fcpb-services { display: grid; gap: 12px; }
.fcpb-service { border: 1px solid var(--_line); border-radius: var(--_radius); padding: 16px 18px; transition: border-color .15s, box-shadow .15s; }
.fcpb-service.is-included { border-color: var(--_accent); box-shadow: 0 0 0 1px var(--_accent); }
.fcpb-service.is-unavailable { opacity: .5; }
.fcpb-service__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fcpb-service__toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; margin: 0; }

.fcpb-service__pill { font-size: .75em; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(127, 127, 127, .15); }
.fcpb-service__price { font-weight: 600; white-space: nowrap; }
.fcpb-service__desc { margin: 6px 0 0 30px; font-size: .9em; opacity: .75; }
.fcpb-service__sizes { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0 30px; }
.fcpb-service:not(.is-included) .fcpb-service__sizes { opacity: .6; }
/* a size chip: the pill is the label, the price sits inside it in a lighter tone */
.fcpb-size { position: relative; display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border: 1px solid var(--_line); border-radius: 8px; cursor: pointer; font-size: .9em; transition: border-color .15s, background .15s; }
.fcpb-size input { position: absolute; opacity: 0; width: 0; height: 0; }
.fcpb-size__label { display: inline-block; }
.fcpb-size__price { font-size: .85em; opacity: .7; }
.fcpb-size:hover { border-color: var(--_accent); }
.fcpb-size.is-checked, .fcpb-size:has(input:checked) { border-color: var(--_accent); background: var(--_accent); color: #fff; }
.fcpb-size.is-checked .fcpb-size__price, .fcpb-size:has(input:checked) .fcpb-size__price { opacity: .85; }
.fcpb-size:has(input:focus-visible) { outline: 2px solid var(--_accent); outline-offset: 2px; }
.fcpb-size.is-unavailable { opacity: .4; cursor: not-allowed; }
.fcpb-service__note { margin: 8px 0 0 30px; font-size: .85em; opacity: .75; }

/* summary */
.fcpb-summary { position: sticky; top: 24px; border: 1px solid var(--_line); border-radius: var(--_radius); padding: 18px 20px; }
.fcpb-summary__title { margin: 0 0 12px; font-size: 1.05em; }
.fcpb-summary__lines { list-style: none; margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--_line); font-size: .92em; }
.fcpb-summary__line { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.fcpb-summary__lines:empty { display: none; }
.fcpb-summary__row { display: flex; justify-content: space-between; gap: 12px; font-size: .92em; padding: 2px 0; }
.fcpb-summary__row--discount { color: var(--_accent); font-weight: 600; }
.fcpb-summary__total { margin: 10px 0 4px; font-size: 1.6em; font-weight: 700; line-height: 1.2; }
.fcpb-summary__total small { font-size: .5em; font-weight: 500; opacity: .7; }
.fcpb-summary__hint { margin: 0 0 14px; font-size: .9em; opacity: .8; min-height: 1.3em; }
.fcpb-subscribe { display: block; width: 100%; padding: 13px 18px; border: 0; border-radius: calc(var(--_radius) - 4px); background: var(--_accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.fcpb-subscribe:disabled { opacity: .5; cursor: not-allowed; }
.fcpb-subscribe.is-busy { opacity: .7; }
.fcpb-subscribe:focus-visible { outline: 2px solid var(--_accent); outline-offset: 3px; }
.fcpb-summary__error { margin: 10px 0 0; font-size: .9em; color: #b42318; }
.fcpb-noscript { grid-column: 1 / -1; }

@media (max-width: 782px) {
    .fcpb { grid-template-columns: 1fr; }
    .fcpb-summary { position: static; }
    .fcpb-service__desc, .fcpb-service__sizes, .fcpb-service__note { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .fcpb-service { transition: none; } }

/* ---- feature lines under a chosen size, and the Custom controls ---- */
.fcpb-service__features { list-style: none; margin: 10px 0 0 30px; padding: 0; display: grid; gap: 4px; font-size: .88em; }
.fcpb-service__features li { display: flex; align-items: baseline; gap: 8px; }
.fcpb-service__features li.is-off { opacity: .55; text-decoration: line-through; }
.fcpb-card__mark { flex: none; display: inline-flex; color: var(--_accent); }
.fcpb-card__mark svg, .fcpb-feature__step svg, .fcpb-tip svg { width: 1em; height: 1em; }
.fcpb-tip svg { width: 1.1em; height: 1.1em; }
.is-off > .fcpb-card__mark { color: inherit; opacity: .6; }
.fcpb-features { margin: 12px 0 0 30px; }
.fcpb-service__custom { padding: 12px 14px; border: 1px dashed var(--_line); border-radius: calc(var(--_radius) - 4px); }
.fcpb-features__start { display: grid; gap: 8px; margin: 0 0 14px; }
.fcpb-features__start-label { font-size: .8em; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; opacity: .7; }
.fcpb-features__sizes { display: flex; flex-wrap: wrap; gap: 6px; }

.fcpb-features__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fcpb-feature { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .92em; position: relative; }
.fcpb-feature__toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; }

.fcpb-feature__tag, .fcpb-feature__price { font-size: .82em; opacity: .7; }
.fcpb-feature__qty { display: inline-flex; align-items: center; border: 1px solid var(--_line); border-radius: 8px; overflow: hidden; }
.fcpb-feature__qty input { width: 3.2em; text-align: center; border: 0; font: inherit; padding: 4px 0; -moz-appearance: textfield; }
.fcpb-feature__qty input::-webkit-outer-spin-button, .fcpb-feature__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fcpb-feature__step { border: 0; background: transparent; font: inherit; width: 2.2em; height: 2.2em; cursor: pointer; color: inherit; display: inline-flex; align-items: center; justify-content: center; }
.fcpb-feature__step:disabled { opacity: .35; cursor: not-allowed; }
.fcpb-feature__step:focus-visible { outline: 2px solid var(--_accent); outline-offset: -2px; }

/* tooltips: a "?" mark; the bubble itself is one floating element on <body>, placed by the script */
.fcpb-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: inherit; opacity: .6; cursor: help; padding: 0; }
.fcpb-tip:hover, .fcpb-tip:focus-visible { opacity: 1; }
.fcpb-tip:focus-visible { outline: 2px solid var(--_accent); outline-offset: 2px; border-radius: 50%; }
.fcpb-tip__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fcpb-tooltip { position: absolute; z-index: 10000; max-width: 280px; padding: 10px 12px; border-radius: 10px; background: #14171f; color: #fff; font-size: 13px; line-height: 1.45; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.fcpb-tooltip.is-visible { opacity: 1; transform: none; }
.fcpb-tooltip__arrow { position: absolute; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: #14171f; transform: rotate(45deg); }
.fcpb-tooltip.is-below .fcpb-tooltip__arrow { bottom: auto; top: -6px; }
@media (prefers-reduced-motion: reduce) { .fcpb-tooltip { transition: none; transform: none; } }
.fcpb-card__features li, .fcpb-feature { position: relative; }

/* ---- pricing cards ---- */
.fcpb-pricing { --_accent: var(--fcpb-accent, currentColor); --_radius: var(--fcpb-radius, 14px); --_line: rgba(127, 127, 127, .25); display: grid; gap: 28px; margin: 0 0 24px; }
.fcpb-pricing__cycles { justify-self: center; }
.fcpb-save { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--_accent); color: #fff; font-style: normal; font-size: .75em; font-weight: 700; letter-spacing: .04em; }
.fcpb-cycle input:checked + span .fcpb-save { background: #fff; color: var(--_accent); }
.fcpb-pricing__cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.fcpb-card { border: 1px solid var(--_line); border-radius: var(--_radius); padding: 24px; display: grid; gap: 14px; background: rgba(127, 127, 127, .06); }
.fcpb-card.is-unavailable { opacity: .5; }
.fcpb-card__head { margin: 0; }
.fcpb-card__title { margin: 0; font-size: 1.25em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fcpb-card__size { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2em; height: 2.2em; padding: 0 .5em; border-radius: 50%; background: var(--_accent); color: #fff; font-size: .8em; font-weight: 700; }
.fcpb-card__size--custom { border-radius: 999px; }
.fcpb-card__price { margin: 0; display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.fcpb-card__amount { font-size: 2.4em; font-weight: 300; line-height: 1; }
.fcpb-card__per { display: grid; font-size: .8em; opacity: .75; line-height: 1.3; }
.fcpb-card__features { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fcpb-card__features li { display: flex; align-items: baseline; gap: 8px; }
.fcpb-card__features li.is-off .fcpb-card__text { text-decoration: line-through; opacity: .6; }
/* a divider: a small heading between features, a bare rule when it has no text */
.fcpb-card__divider, .fcpb-feature--divider, .fcpb-service__divider { display: flex !important; align-items: center !important; gap: 10px; margin-top: 6px; font-size: .74em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.fcpb-card__divider::before, .fcpb-card__divider::after, .fcpb-feature--divider::before, .fcpb-feature--divider::after, .fcpb-service__divider::before, .fcpb-service__divider::after { content: ""; flex: 1; border-top: 1px solid var(--_line); }
.fcpb-card__divider span, .fcpb-feature--divider span, .fcpb-service__divider span { flex: 0 0 auto; }
.fcpb-custom .fcpb-feature--divider { padding: 14px 0 4px; border-bottom: 0; }
.fcpb-card__cta { display: inline-flex; justify-content: center; align-items: center; padding: 12px 22px; border-radius: 999px; background: var(--_accent); color: #fff; text-decoration: none; font-weight: 600; border: 0; font: inherit; cursor: pointer; justify-self: start; }
.fcpb-card__cta:hover { filter: brightness(1.08); }
.fcpb-card__cta:focus-visible { outline: 2px solid var(--_accent); outline-offset: 3px; }
.fcpb-card__cta[aria-disabled="true"] { pointer-events: none; opacity: .5; }
.fcpb-card--custom .fcpb-features { margin-left: 0; }
@media (max-width: 782px) { .fcpb-pricing__cards { grid-template-columns: 1fr; } }

/* ---- Build your own as a section ---- */
.fcpb-custom { --_accent: var(--fcpb-accent, currentColor); --_radius: var(--fcpb-radius, 14px); --_line: rgba(127, 127, 127, .25); display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 28px; align-items: start; margin: 0 0 24px; }
.fcpb-custom__title { margin: 0 0 14px; }
.fcpb-custom__cycles { margin: 0 0 16px; padding: 0; border: 0; }
.fcpb-custom .fcpb-features { margin: 0; }
.fcpb-custom .fcpb-feature { padding: 10px 0; border-bottom: 1px solid var(--_line); }
.fcpb-custom .fcpb-feature:last-child { border-bottom: 0; }
.fcpb-custom__summary { position: sticky; top: 24px; }
.fcpb-summary__charged { margin: 0 0 10px; font-size: .85em; opacity: .7; }
.fcpb-summary__charged[hidden] { display: none; }
.fcpb-summary__note { margin: 0 0 12px; font-size: .8em; opacity: .7; }
@media (max-width: 782px) { .fcpb-custom { grid-template-columns: 1fr; } .fcpb-custom__summary { position: static; } }

/* ---- switches: the include toggle on a service and the optional features in Build your own ---- */
.fcpb-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.fcpb-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.fcpb-switch__track { flex: none; width: 38px; height: 22px; border-radius: 999px; background: rgba(127, 127, 127, .35); position: relative; transition: background .15s; }
.fcpb-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .15s; }
.fcpb-switch input:checked + .fcpb-switch__track { background: var(--_accent); }
.fcpb-switch input:checked + .fcpb-switch__track::after { transform: translateX(16px); }
.fcpb-switch input:focus-visible + .fcpb-switch__track { outline: 2px solid var(--_accent); outline-offset: 2px; }
.fcpb-switch input:disabled + .fcpb-switch__track { opacity: .5; cursor: not-allowed; }
.fcpb-card__save { display: inline-block; align-self: center; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--_accent); color: var(--_accent); font-size: .75em; font-style: normal; font-weight: 700; letter-spacing: .03em; }
.fcpb-card__save[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .fcpb-switch__track, .fcpb-switch__track::after { transition: none; } }