/* ============================================================
   JEEKSSHIRE 24 — страница подписки Premium (/premium)
   Поверх app/css/main.css: берёт его токены, сетку и типографику,
   добавляет только то, чего в общей теме нет — две кассы и опись.
   ============================================================ */

/* Атрибут hidden против класса с display: у этих узлов display задан классом,
   а он сильнее правила [hidden]{display:none} из таблицы браузера. Селектор с
   атрибутом возвращает приоритет скрытию — без !important. */
.prem__status[hidden],
.prem__btn[hidden],
.prem__signin[hidden],
.prem__err[hidden]{display:none}

.prem__wrap{padding-block:clamp(28px,6vh,64px)}

.prem__head{max-width:720px;margin-bottom:clamp(24px,4vh,40px)}
.prem__head .section__sub{margin-top:12px;color:var(--muted)}

/* Возврат с кассы. Один узел на оба исхода — цвет задаёт модификатор. */
.prem__status{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin-bottom:clamp(20px,3vh,32px);padding:16px 18px;
  border:1px solid var(--line-strong);border-radius:var(--r-out);
  background:var(--surface);color:var(--ink);font-weight:600;
}
.prem__status--ok{border-color:color-mix(in srgb,var(--j2) 55%,var(--line-strong));background:color-mix(in srgb,var(--j2) 12%,var(--surface))}
.prem__status--off{border-color:var(--line-strong)}
.prem__status a{
  margin-inline-start:auto;padding:9px 16px;border-radius:var(--r-pill);
  background:var(--j2);color:#04140E;font-weight:700;text-decoration:none;white-space:nowrap;
}
.prem__status a:hover{filter:brightness(1.08)}

.prem__grid{display:grid;gap:clamp(16px,2.4vw,24px);grid-template-columns:1fr}
@media (min-width:900px){.prem__grid{grid-template-columns:1.15fr .85fr;align-items:start}}

.prem__card{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);padding:clamp(20px,3vw,30px);
}
.prem__card--pay{position:sticky;top:clamp(76px,9vh,96px)}
@media (max-width:899px){.prem__card--pay{position:static}}

.prem__plan{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.prem__price{font-family:var(--font-display);font-size:clamp(2.6rem,7vw,3.6rem);font-weight:800;line-height:1.05;margin-top:6px}
.prem__per{color:var(--muted);margin-top:4px}

.prem__feats{list-style:none;margin:clamp(20px,3vh,28px) 0 0;padding:0;display:grid;gap:14px}
.prem__feat{display:grid;gap:3px;padding-inline-start:26px;position:relative}
.prem__feat::before{
  content:"";position:absolute;inset-inline-start:0;top:.55em;
  width:9px;height:9px;border-radius:50%;
  background:var(--j2);box-shadow:0 0 0 4px color-mix(in srgb,var(--j2) 18%,transparent);
}
.prem__feat b{font-weight:700}
.prem__feat span{color:var(--muted);font-size:.95rem;line-height:1.5}

.prem__paytitle{font-size:1.1rem;font-weight:700;margin-bottom:18px}

.prem__methods{display:grid;gap:12px}

.prem__btn{
  display:grid;gap:3px;width:100%;text-align:start;
  padding:16px 20px;border-radius:var(--r-out);
  border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink);
  font-family:inherit;font-size:1rem;cursor:pointer;text-decoration:none;
  transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease);
}
.prem__btn b{font-weight:700}
.prem__btnsum{color:var(--muted);font-size:.9rem}
.prem__btn:hover:not([disabled]){border-color:var(--j1-t);background:color-mix(in srgb,var(--j1) 10%,var(--surface-2))}
.prem__btn:active:not([disabled]){transform:translateY(1px)}
.prem__btn:focus-visible{outline:2px solid var(--j1-t);outline-offset:3px}
.prem__btn[disabled]{cursor:default;opacity:.62}
.prem__btn[disabled] .prem__btnsum{color:var(--muted-2)}

.prem__btn--stripe{border-color:color-mix(in srgb,var(--j1) 45%,var(--line-strong))}
.prem__btn--signin{background:var(--j1);border-color:var(--j1);color:#F3F6FF;justify-items:start}
.prem__btn--signin:hover{filter:brightness(1.07);background:var(--j1)}

/* Пока идёт запрос к кассе — кнопка занята, но ширину не меняет. */
.prem__btn.is-busy{opacity:.7;pointer-events:none}

.prem__err{
  margin-top:14px;padding:13px 16px;border-radius:var(--r-in);
  border:1px solid color-mix(in srgb,var(--j6) 50%,var(--line-strong));
  background:color-mix(in srgb,var(--j6) 12%,var(--surface-2));
  color:var(--ink);font-size:.95rem;line-height:1.5;
}

.prem__note{margin-top:18px;color:var(--muted);font-size:.95rem;line-height:1.55}
.prem__fine{margin-top:10px;color:var(--muted-2);font-size:.85rem;line-height:1.5}

/* Телефон 375px: ничего не выходит за край и не режется. */
@media (max-width:420px){
  .prem__card{padding:18px 16px}
  .prem__btn{padding:14px 16px}
  .prem__status{flex-direction:column;align-items:flex-start}
  .prem__status a{margin-inline-start:0}
}

/* Вход на самой странице: страницы входа у сайта больше нет. */
.prem__signin{display:grid;gap:12px}
.prem__field{display:grid;gap:6px}
.prem__label{font-size:.85rem;font-weight:600;color:var(--muted)}
.prem__field input{
  width:100%;padding:13px 16px;border-radius:var(--r-in);
  border:1px solid var(--line-strong);background:var(--surface-2);
  color:var(--ink);font-family:inherit;font-size:1rem;
}
.prem__field input:focus-visible{outline:2px solid var(--j1-t);outline-offset:2px;border-color:var(--j1-t)}
.prem__btn--signin{justify-items:center;text-align:center;margin-top:4px}