/* Тарифы: один компонент .plans для публичной части и кабинета (PlansTable.php, design-cabinet.md 2а и 2в).
   Цвета берутся из токенов публичной части (site.css), у кабинета (style.css) - из его токенов. */
.plans-sel { --p-surface: var(--surface, var(--field)); --p-line: var(--ui-line, var(--line)); --p-soft: var(--soft, var(--muted)); --p-link: var(--link, var(--accent)); --p-ink: var(--accent-ink, #fff); --p-radius: var(--radius, 8px); display: grid; gap: 16px; }
.table-scroll { max-width: 100%; overflow-x: auto; border-radius: 12px; background: var(--p-surface); }
.plans { width: 100%; border-collapse: collapse; table-layout: fixed; }
.plans th, .plans td { padding: 14px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--p-line); overflow-wrap: break-word; }
.plans thead th { font-weight: 500; padding-block: 20px; }
.plans thead th > * { display: block; }
.plans thead th .btn, .plans thead th button { overflow-wrap: normal; padding-inline: 8px; display: flex; align-items: center; justify-content: center; margin-top: 12px; min-height: 44px; width: 100%; }
.plans thead th form { margin: 0; }
.price-block { display: block; }
.price-block > * { display: block; }
.price-block + .price-block { margin-top: 12px; }
.price-block[hidden] { display: none; }
.js .plans .price-block[data-period="month"] { display: none; }
.js .plans[data-period="month"] .price-block[data-period="month"] { display: block; }
.js .plans[data-period="month"] .price-block[data-period="year"] { display: none; }
.plan-name { font-weight: 600; }
.price { font-size: 1.5rem; font-weight: 500; margin-top: 4px; }
.price-year { color: var(--muted); font-size: var(--step-small, .875rem); }
.plans tbody th { font-weight: 400; color: var(--p-soft); width: 30%; background: var(--p-surface); }
.plans tbody tr:last-child th, .plans tbody tr:last-child td { border-bottom: 0; }
.plans .pro { background: color-mix(in srgb, var(--accent) 14%, var(--p-surface)); }
.plans .no { color: var(--muted); }
.yes { color: var(--p-link); display: inline-flex; }
.plans.diff-only .same { display: none; }

/* от 768 px таблица сравнения, уже 768 px один тариф за раз: переключатель на radio, без JS; таблица остается таблицей */
.sel-r { position: absolute; opacity: 0; pointer-events: none; }
.seg { display: none; gap: 4px; padding: 4px; background: var(--p-surface); border-radius: var(--p-radius); }
.seg label { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 8px; border-radius: var(--p-radius); font-weight: 500; text-align: center; cursor: pointer; }
.seg label:hover { background: var(--field); }
#sel-free:checked ~ .seg label[for="sel-free"], #sel-basic:checked ~ .seg label[for="sel-basic"], #sel-pro:checked ~ .seg label[for="sel-pro"] { background: var(--accent); color: var(--p-ink); font-weight: 600; }
#sel-free:focus-visible ~ .seg label[for="sel-free"], #sel-basic:focus-visible ~ .seg label[for="sel-basic"], #sel-pro:focus-visible ~ .seg label[for="sel-pro"] { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 767.98px) {
  .seg { display: flex; }
  .plans .c-free, .plans .c-basic, .plans .c-pro { display: none; }
  #sel-free:checked ~ .table-scroll .c-free, #sel-basic:checked ~ .table-scroll .c-basic, #sel-pro:checked ~ .table-scroll .c-pro { display: table-cell; }
  .plans tbody th { width: 42%; }
  .plans th, .plans td { padding-inline: 12px; }
  .price { font-size: 1.25rem; }
}
@media (min-width: 768px) and (max-width: 1023.98px) { .plans th, .plans td { padding-inline: 12px; } .price { font-size: 1.25rem; } }