/* Pro plan components (2026-10-04) — built from the Claude Design handoff
   "Pro Paywall – Portal v2": §4.1 ProChip, §4.2 LockedControl (switch with a
   padlock knob), the S1–S4 capacity stepper, the S2 upsell strip, the S5/WL2
   travelers strip. Tokens are the file's own: ink #212735, body #565656,
   muted #7A7E84, purple #8833FF, tint #F3EBFF, tint-ink #501C9A, line #E0E1E3.
   Loaded by the portal layout and the create wizard. */

/* ---------- ProChip ---------- */
.pro-chip{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:999px;border:1px solid #8833FF;color:#8833FF;font-size:10px;font-weight:800;letter-spacing:.8px;white-space:nowrap;flex:none;text-transform:uppercase;line-height:1}
.pro-chip-solid{border-color:#8833FF;background:#8833FF;color:#fff}
.pro-chip-ondark{border-color:rgba(255,255,255,.55);color:#fff}

/* ---------- Switch (design 48×28; locked = light track + padlock knob) ---------- */
.pro-switch{position:relative;display:inline-block;width:48px;height:28px;flex:none;cursor:pointer}
.pro-switch input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pro-switch-track{position:absolute;inset:0;border-radius:999px;background:#ECEAF1;transition:background .15s}
.pro-switch-knob{position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(23,16,48,.2);display:flex;align-items:center;justify-content:center;color:#7A7E84;transition:left .15s}
.pro-switch input:checked + .pro-switch-track{background:#8833FF}
.pro-switch input:checked + .pro-switch-track .pro-switch-knob{left:23px}
.pro-switch.is-locked{cursor:default}
.pro-switch.is-locked .pro-switch-track{background:#ECEAF1}
.pro-switch-knob svg{display:none}
.pro-switch.is-locked .pro-switch-knob svg{display:block}

/* ---------- Locked control card (A1 / WL1) ---------- */
.pro-card{background:#fff;border-radius:16px;box-shadow:0 2px 12px rgba(23,16,48,.05);padding:16px;display:flex;flex-direction:column;gap:10px}
.pro-card.is-locked{cursor:pointer}
.pro-card-row{display:flex;gap:12px;align-items:flex-start}
.pro-card-main{flex:1;min-width:0}
.pro-card-title{display:flex;gap:8px;align-items:center;font-size:15px;font-weight:700;color:#212735}
.pro-card-body{font-size:13px;color:#565656;line-height:1.5;margin-top:4px}
.pro-card-caption{font-size:12.5px;color:#7A7E84;margin-top:2px}
.pro-card-foot{display:flex;gap:6px;align-items:center;font-size:12.5px;color:#565656;padding-top:10px;border-top:1px solid #F0F0F2;min-height:34px}
.pro-card-foot svg{color:#7A7E84;flex:none}
.pro-link{font-weight:700;color:#8833FF;text-decoration:none;cursor:pointer}
.pro-link:hover{text-decoration:underline}

/* ---------- Capacity stepper (S1–S4) ---------- */
.pro-field-label{font-size:11px;font-weight:700;letter-spacing:1px;color:#7A7E84;text-transform:uppercase}
.pro-stepper{display:flex;align-items:center;gap:10px}
.pro-stepper-btn{width:48px;height:48px;border-radius:12px;border:1px solid #E0E1E3;background:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;color:#212735;cursor:pointer;padding:0;flex:none;font-family:inherit}
.pro-stepper-btn:disabled{opacity:.4;cursor:default}
.pro-stepper-btn.is-locked{background:#F3EBFF;border-color:#DCC6FF;color:#8833FF;opacity:1;cursor:pointer}
.pro-stepper-btn.is-locked .pro-stepper-plus{display:none}
.pro-stepper-btn .pro-stepper-lock{display:none}
.pro-stepper-btn.is-locked .pro-stepper-lock{display:block}
.pro-stepper-input{flex:1;min-width:0;height:48px;border-radius:12px;border:1px solid #E0E1E3;background:#fff;text-align:center;font-size:22px;font-weight:700;color:#212735;outline:none;font-family:inherit;-moz-appearance:textfield}
.pro-stepper-input::-webkit-outer-spin-button,.pro-stepper-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pro-stepper-input:focus{border-color:#8833FF}
.pro-stepper-input::placeholder{color:#B0B3B8;font-weight:600;font-size:16px}
.pro-helper{font-size:12.5px;color:#565656;line-height:1.5}
.pro-helper-muted{font-size:12.5px;color:#7A7E84;line-height:1.5}
.pro-strip{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:#501C9A;line-height:1.5;background:#F3EBFF;border-radius:10px;padding:10px 12px}
.pro-strip .pro-link{text-decoration:underline}
[hidden].pro-strip,[hidden].pro-helper,[hidden].pro-helper-muted{display:none}

/* ---------- Travelers-tab full strip (S5 / WL2) ---------- */
.pro-full-strip{display:flex;gap:10px;align-items:center;background:#fff;border-radius:12px;padding:10px 12px;box-shadow:0 2px 12px rgba(23,16,48,.05);margin-bottom:10px}
.pro-full-strip-text{flex:1;font-size:12.5px;color:#565656;line-height:1.4}
.pro-full-strip-text span{display:block}
.pro-full-strip-text .muted{color:#7A7E84;margin-top:2px}
.pro-full-strip .pro-link{font-size:12.5px;white-space:nowrap;padding:8px 0}