/* Каталог: страницы eSIM, номеров и прокси. Сверху приёмник, ниже полный список с поиском и короткая инструкция. */

.list-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 32px; margin-bottom: 26px; }
.list-sub { margin: 56px 0 20px; font-size: clamp(36px, 4vw, 52px); }
.find { position: relative; flex: 0 1 380px; }
.find input { width: 100%; height: 50px; padding: 0 14px 0 44px; border: 2px solid var(--line); border-radius: 12px; background: var(--plate); color: var(--ink); font: 400 16px/1 var(--f-text); }
.find svg { position: absolute; left: 14px; top: 15px; width: 20px; height: 20px; color: var(--ink-2); pointer-events: none; }
.empty a { font-weight: 500; }

/* ---------- справочник стран: буква на полях, как в телефонной книге ---------- */
.dir-group { display: grid; grid-template-columns: 64px minmax(0, 1fr); border-top: 2px solid var(--ink); }
.dir-letter { padding-top: 14px; font: 800 46px/1 var(--f-display); color: var(--enamel); }
.dir-rows { list-style: none; margin: 0; padding: 0; }
.dir-row { display: grid; grid-template-columns: minmax(210px, 290px) minmax(0, 1fr); gap: 12px 28px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.dir-row:first-child { border-top: 0; }
.dir-name { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dir-name .flag { width: 42px; height: 31.5px; border-radius: 4px; }
.dir-name b { display: block; font: 700 30px/1 var(--f-display); }
.dir-name small { display: block; margin-top: 4px; color: var(--ink-2); font-size: 13.5px; line-height: 1.35; }
.dir-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; max-width: 830px; }
.plan {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; min-height: 60px; padding: 8px 12px 9px;
  border: 2px solid var(--line); border-radius: 12px; background: transparent; color: var(--ink-2); text-align: left; cursor: pointer; font: 500 13px/1 var(--f-text);
}
.pv { white-space: nowrap; }
.plan b { color: var(--ink); font: 700 20px/1 var(--f-display); }
.plan i { font: 500 25px/1 var(--f-led); font-style: normal; color: var(--enamel); white-space: nowrap; }
.plan:hover { border-color: var(--enamel); background: color-mix(in srgb, var(--enamel) 7%, transparent); }
.dir-more { display: none; }
@media (max-width: 860px) { .dir-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .dir-name { position: relative; }
  .dir-name > div { padding-right: 104px; }
  .dir-more { position: absolute; inset: -10px 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 2px 0 0;
    border: 0; border-radius: 10px; background: none; color: var(--enamel); font: 500 23px/1 var(--f-led); cursor: pointer; }
  .dir-more::after { content: ""; width: 9px; height: 9px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .2s ease; }
  .dir-row.open .dir-more::after { transform: translateY(2px) rotate(225deg); }
  .dir-row:not(.open) .dir-plans { display: none; }
  .dir-row { padding: 18px 0; }
}
@media (max-width: 760px) { .dir-group { grid-template-columns: 38px minmax(0, 1fr); } .dir-letter { font-size: 34px; } }
@media (max-width: 520px) { .dir-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- таблицы цен: номера и прокси ---------- */
.ptable { width: 100%; border-collapse: collapse; }
.ptable thead th { padding: 0 12px 10px; border-bottom: 2px solid var(--ink); color: var(--ink-2); font: 500 14px/1.2 var(--f-text); text-align: left; }
.ptable .grp th { padding: 40px 12px 12px; border-bottom: 2px solid var(--ink); text-align: left; font-weight: 400; }
.ptable tbody:first-of-type .grp th { padding-top: 20px; }
.grp-name { margin-right: 14px; font: 800 38px/1 var(--f-display); }
.grp-min { font: 500 25px/1 var(--f-led); color: var(--enamel); white-space: nowrap; }
.grp-desc { display: block; max-width: 70ch; margin-top: 8px; color: var(--ink-2); font: 400 15px/1.45 var(--f-text); }
.ptable tr[data-sku] > * { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ptable tr[data-sku] th { font-weight: 500; text-align: left; }
.ptable tr[data-sku] th .flag { width: 32px; height: 24px; margin-right: 12px; vertical-align: -6px; }
.ptable .period { color: var(--ink-2); white-space: nowrap; }
.ptable .price { font: 500 27px/1 var(--f-led); color: var(--enamel); white-space: nowrap; }
.ptable .buy { width: 1%; text-align: right; white-space: nowrap; }
.ptable tr[data-sku] { cursor: pointer; }
.ptable tr[data-sku]:hover > * { background: color-mix(in srgb, var(--enamel) 6%, transparent); }
.ptable tr[data-sku]:hover .btn.ghost { --c: #fff; background: var(--needle); box-shadow: 0 3px 0 var(--needle-2); }
@media (max-width: 640px) {
  .ptable, .ptable tbody { display: block; }
  .ptable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ptable .grp, .ptable .grp th { display: block; }
  .ptable .grp th { padding: 32px 0 10px; }
  .grp-name { font-size: 32px; }
  .ptable tr[data-sku] { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .ptable tr[data-sku] > * { padding: 0; border: 0; }
  .ptable tr[data-sku] th { display: flex; align-items: center; min-width: 0; }
  .ptable tr[data-sku] th .flag { width: 28px; height: 21px; margin-right: 10px; }
  .ptable .price { font-size: 23px; }
  .px-table tr[data-sku] { grid-template-columns: minmax(0, 1fr) auto auto; }
  .px-table .period { grid-column: 1; grid-row: 2; padding-left: 38px; font-size: 14px; }
  .px-table .price { grid-column: 2; grid-row: 1 / span 2; }
  .px-table .buy { grid-column: 3; grid-row: 1 / span 2; }
}

/* ---------- как это работает ---------- */
.flow-h { margin-bottom: 30px; }
.flow { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin: 0 0 24px; padding: 0; counter-reset: f; }
.flow li { counter-increment: f; padding-top: 14px; border-top: 2px solid var(--ink); color: var(--ink-2); }
.flow li::before { content: counter(f); display: block; margin-bottom: 8px; font: 500 46px/1 var(--f-led); color: var(--enamel); }
.flow b { display: block; margin-bottom: 6px; color: var(--ink); font: 700 26px/1.05 var(--f-display); }
@media (max-width: 960px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .flow { grid-template-columns: 1fr; } }

/* номера и прокси: таблица слева, рядом короткая инструкция, на телефоне она уходит под таблицу */
.list-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 40px 64px; align-items: start; }
.list-aside { position: sticky; top: 24px; }
.list-aside h2 { margin-bottom: 18px; font-size: clamp(34px, 3.4vw, 44px); }
.list-aside .tape { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: t; border-top: 2px solid var(--ink); }
.list-aside .tape li { counter-increment: t; position: relative; padding: 14px 0 13px 52px; border-bottom: 1px dashed var(--line); color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.list-aside .tape li::before { content: counter(t); position: absolute; left: 0; top: 13px; font: 500 34px/1 var(--f-led); color: var(--enamel); }
.list-aside .tape b { display: block; margin-bottom: 3px; color: var(--ink); font: 700 23px/1.05 var(--f-display); }
.list-aside p { font-size: 15px; color: var(--ink-2); }
@media (max-width: 1000px) { .list-cols { grid-template-columns: minmax(0, 1fr); } .list-aside { position: static; } }