/* ================================================================
   pay-card.css — Страницы оплаты / политика | Северный город Premium
   Scope: .payCard
   ================================================================ */

.payCard {
  --g:   #c8a84b;
  --gs:  rgba(200,168,75,.11);
  --gb:  rgba(200,168,75,.28);
  --dk:  #07192b;
  --ink: #0f172a;
  --mt:  #64748b;
  --ln:  rgba(2,6,23,.10);
  --sh:  0 4px 24px rgba(2,6,23,.07);
  --r:   18px;

  background: #fff;
  border: 1px solid var(--ln);
  border-radius: var(--r);
  box-shadow: var(--sh);
  padding: clamp(20px, 3vw, 36px) clamp(20px, 3.5vw, 42px);
  line-height: 1.78;
  color: var(--mt);
  max-width: 1140px;
  margin: 0 auto;
}

.payCard * { box-sizing: border-box; }

/* ── Ссылки ───────────────────────────────────────────────────── */
.payCard a {
  color: var(--g);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(200,168,75,.4);
  text-underline-offset: 3px;
  transition: text-decoration-color .18s;
}
.payCard a:hover { text-decoration-color: var(--g); }

/* ── Параграфы ────────────────────────────────────────────────── */
.payCard p { margin: 0 0 12px; }
.payCard strong { color: var(--ink); }

/* ── Главный заголовок ────────────────────────────────────────── */
.payCard__title {
  margin: 0 0 18px;
  font-weight: 900;
  font-size: clamp(22px, 2.8vw, 36px);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--dk);
  position: relative;
  padding-bottom: 16px;
}
.payCard__title::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: clamp(120px, 18vw, 240px); height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--g), #e8c96a);
  display: block; margin: 0;
}

/* ── Подзаголовок ─────────────────────────────────────────────── */
.payCard__subtitle {
  margin: 22px 0 10px;
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 800;
  color: var(--dk);
  letter-spacing: -.01em;
  position: relative;
  padding-left: 14px;
}
.payCard__subtitle::before {
  content: "";
  position: absolute; left: 0; top: .15em; bottom: .15em;
  width: 3px; border-radius: 999px;
  background: linear-gradient(180deg, var(--g), #e8c96a);
}

/* ── Бренд-блок ───────────────────────────────────────────────── */
.payCard__brand { margin: 8px 0; }
.payCard__brandLogo {
  display: block;
  max-width: 200px; height: auto;
  filter: none;
}

/* ── Логотипы платёжных систем ────────────────────────────────── */
.payCard__logos {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 12px;
  margin: 10px 0 14px;
}
.payCard__logos img {
  height: 32px; width: auto;
  max-width: 100%; display: block;
  filter: grayscale(40%); opacity: .85;
  transition: filter .2s, opacity .2s;
}
.payCard__logos img:hover { filter: grayscale(0); opacity: 1; }
.payCard__logos--small img { height: 26px; }

/* ── Список ───────────────────────────────────────────────────── */
.payCard__list {
  margin: 6px 0 14px;
  padding: 0;
  list-style: none;
  display: grid; gap: 8px;
}
.payCard__list li {
  position: relative;
  padding-left: 20px;
  color: var(--mt);
  line-height: 1.6;
}
.payCard__list li::before {
  content: "";
  position: absolute; left: 0; top: .58em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--g);
  box-shadow: 0 0 0 3px rgba(200,168,75,.18);
}

/* ── Примечание ───────────────────────────────────────────────── */
.payCard__note {
  padding: 12px 16px;
  background: var(--gs);
  border: 1px solid var(--gb);
  border-left: 4px solid var(--g);
  border-radius: 0 12px 12px 0;
  font-size: 14px; color: var(--mt);
  line-height: 1.6;
}

/* ── Разделитель ──────────────────────────────────────────────── */
.payCard__hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gb), transparent);
  margin: 22px 0;
}

/* ── Таблица реквизитов ───────────────────────────────────────── */
.payCard__tableWrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  border: 1px solid var(--ln);
  box-shadow: var(--sh);
  margin: 8px 0 14px;
}
.payCard__table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
  background: #fff;
  font-size: 14px;
}
.payCard__table th,
.payCard__table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--ln);
  vertical-align: top;
  text-align: left;
  line-height: 1.5;
}
.payCard__table tr:last-child th,
.payCard__table tr:last-child td { border-bottom: none; }
.payCard__table th {
  width: 34%;
  font-weight: 800; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--dk);
  background: var(--dk);
  color: var(--g) !important;
  border-right: 1px solid rgba(255,255,255,.08);
  border-bottom-color: rgba(200,168,75,.25) !important;
}
.payCard__table td { color: var(--mt); }
.payCard__table tr:nth-child(even) td { background: #fafafa; }
.payCard__table tr:hover td { background: var(--gs) !important; }

/* ── Адаптив ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .payCard {
    padding: 18px 16px 22px;
    border-radius: 14px;
  }
  .payCard__title { font-size: 22px; }
  .payCard__logos img { height: 28px; }
  .payCard__brandLogo { max-width: 180px; }
}