/* ══ Plan builder ═══════════════════════════════════════════════════════
   One builder, used on the public pricing page and inside the application on
   the subscription screen. Those two live in different layouts with different
   palettes, so the rules here speak only in --pb-* and each host page maps its
   own colours onto them. Two copies of this would drift apart within a week.

   Required from the host:
     --pb-card  --pb-card2  --pb-line  --pb-text  --pb-muted
     --pb-accent  --pb-accent-text  --pb-input  --pb-good  --pb-bad
   ------------------------------------------------------------------------ */

.pb-head { text-align: center; margin: 0 0 26px; }
.pb-head h1 { margin: 0; font-size: clamp(26px, 4vw, 34px); font-weight: 600; letter-spacing: -0.02em; }
.pb-head p { margin: 8px 0 0; font-size: 14.5px; color: var(--pb-muted); }

.pb-switch {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 18px; padding: 5px;
    border-radius: 999px; border: 1px solid var(--pb-line); background: var(--pb-card);
}
.pb-switch button {
    border: 0; background: transparent; font: inherit; font-size: 13.5px; font-weight: 500;
    color: var(--pb-muted); padding: 7px 16px; border-radius: 999px; cursor: pointer;
    transition: background .16s ease, color .16s ease;
}
.pb-switch button.is-on { background: var(--pb-accent); color: var(--pb-accent-text); font-weight: 600; }

.pb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 20px; align-items: start; }
.pb-col { display: flex; flex-direction: column; gap: 16px; }

.pb-card {
    background: var(--pb-card); color: var(--pb-text);
    border: 1px solid var(--pb-line); border-radius: 24px; padding: 24px;
}
.pb-card__h {
    margin: 0 0 16px; font-size: 12px; font-weight: 600; letter-spacing: .07em;
    text-transform: uppercase; color: var(--pb-muted);
}

.pb-base { display: flex; align-items: flex-start; gap: 14px; }
.pb-base__ic {
    width: 42px; height: 42px; border-radius: 13px; background: var(--pb-card2);
    color: var(--pb-text); display: grid; place-items: center; flex-shrink: 0;
}
.pb-base__ic svg { width: 21px; height: 21px; }
.pb-base__t { flex: 1; min-width: 0; }
.pb-base__name { display: block; font-size: 16px; font-weight: 600; }
.pb-base__desc { display: block; margin-top: 4px; font-size: 13.5px; color: var(--pb-muted); line-height: 1.5; max-width: 44ch; }
.pb-base__amt { font-size: 19px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

.pb-mods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pb-mod {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 14px;
    border: 1px solid var(--pb-line); border-radius: 14px; background: var(--pb-card);
    cursor: pointer; transition: border-color .14s ease, background .14s ease;
}
.pb-mod:hover { border-color: var(--pb-muted); }
.pb-mod.is-on { border-color: var(--pb-accent); background: var(--pb-card2); }
.pb-mod__ic {
    width: 34px; height: 34px; border-radius: 11px; background: var(--pb-card2);
    color: var(--pb-muted); display: grid; place-items: center; flex-shrink: 0;
    transition: background .14s ease, color .14s ease;
}
.pb-mod__ic svg { width: 17px; height: 17px; }
.pb-mod.is-on .pb-mod__ic { background: var(--pb-accent); color: var(--pb-accent-text); }
.pb-mod__name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.pb-mod__amt { font-size: 13px; color: var(--pb-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pb-mod input { position: absolute; opacity: 0; pointer-events: none; }
.pb-mod__tick {
    width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--pb-line);
    display: grid; place-items: center; flex-shrink: 0; color: transparent;
    transition: background .14s ease, border-color .14s ease;
}
.pb-mod.is-on .pb-mod__tick { background: var(--pb-accent); border-color: var(--pb-accent); color: var(--pb-accent-text); }
.pb-mod__tick svg { width: 12px; height: 12px; }

.pb-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pb-count label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.pb-count input {
    width: 100%; height: 46px; padding: 0 14px; border-radius: 12px;
    border: 1px solid var(--pb-line); background: var(--pb-input); color: var(--pb-text);
    font: inherit; font-size: 14px; outline: none; font-variant-numeric: tabular-nums;
    box-shadow: none;
}
.pb-count input:focus { border-color: var(--pb-accent); }
.pb-count small { display: block; margin-top: 6px; font-size: 12px; color: var(--pb-muted); }

.pb-sum { position: sticky; top: 86px; }
.pb-line {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 8px 0; font-size: 13.5px; border-bottom: 1px solid var(--pb-line);
}
.pb-line:last-of-type { border-bottom: 0; }
.pb-line span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pb-total {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-top: 16px; padding-top: 16px; border-top: 1.5px solid var(--pb-line);
}
.pb-total__amt { font-size: 27px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pb-total__per { font-size: 12.5px; color: var(--pb-muted); margin-left: 4px; }

.pb-coupon-ok { margin-top: 12px; }
.pb-line--off { border-bottom: 0; padding: 0; color: var(--pb-good); font-weight: 600; }
.pb-total--pay { margin-top: 8px; padding-top: 12px; }

.pb-go {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 48px;
    margin-top: 16px; border: 0; border-radius: 999px; background: var(--pb-accent);
    color: var(--pb-accent-text); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
    transition: opacity .16s ease;
}
.pb-go:hover { opacity: .9; color: var(--pb-accent-text); }

.pb-note { margin: 10px 0 0; font-size: 12px; color: var(--pb-muted); line-height: 1.5; }
.pb-warn { margin: 10px 0 0; font-size: 12.5px; color: var(--pb-bad); }
.pb-empty { font-size: 13.5px; color: var(--pb-muted); }

/* What the customer is on today, so a change is read against something. */
.pb-current {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px;
    padding: 12px 14px; border-radius: 14px; background: var(--pb-card2); font-size: 13px;
}
.pb-current b { font-weight: 600; }
.pb-current span { color: var(--pb-muted); }

@media (max-width: 900px) {
    .pb-grid { grid-template-columns: minmax(0, 1fr); }
    .pb-mods { grid-template-columns: minmax(0, 1fr); }
    .pb-sum { position: static; }
}