/* =============================================================================
   /coins - Polza Coin. ЛОКАЛЬНІ стилі.
   ─────────────────────────────────────────────────────────────────────────
   Усі великі блоки сторінки - спільні шаблони з /resources/css/course.css
   (hero, not-about, outcomes, insight, for-whom/not-for, lv-faq, btn-buy).
   Тут ЛИШЕ те, чого в дизайн-системі немає:
     - монета в hero (брендований знак polza-coin.svg, плаваюча анімація);
     - тарифні списки «Як заробити»;
     - фінальний CTA-банер;
     - вертикальний ритм блоків, які в course.css без margin-top.
   ============================================================================= */

:root {
  --coin-gold: #8F5C13; /* ашечка знака монети (найтемніша з трьох брендових) - контраст 5.66:1 на білому, D28E1F давав лише 2.75:1 */
}

/* ── Іконка монети біля назви в заголовку ── */
.coin-title-icon { width: 48px; height: 48px; margin-left: 10px; vertical-align: -6px; }

/* ── Гаманець під CTA в hero ── */
.coin-hero__wallet { margin: var(--space-3) 0 0; font-size: var(--text-base); }
.coin-hero__wallet a { color: var(--color-text-secondary); text-decoration: none; border-bottom: 1px solid var(--color-border-light, #e5e5e5); }
.coin-hero__wallet a:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* ── Монета: брендований знак (resources/img/polza-coin.svg) ── */
.coin-emblem { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); width: 343px; height: 343px; }
.coin-emblem__img {
  width: 256px; height: 256px;
  filter: drop-shadow(0 24px 60px var(--color-primary-glow));
  animation: coin-float 6s ease-in-out infinite;
}
.coin-emblem__unit {
  font-size: var(--text-base); font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary); letter-spacing: .5px;
}
@keyframes coin-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) { .coin-emblem__img { animation: none; } }

/* ── «Як заробити»: дві колонки способів ── */
.coin-earn { margin-top: 90px; }
.coin-earn__h2 {
  margin: 0; text-align: center;
  font-size: var(--text-2xl); font-weight: var(--font-weight-bold); line-height: var(--leading-tight);
}
.coin-earn__sub {
  max-width: 620px; margin: var(--space-3) auto 0;
  text-align: center; font-size: var(--text-md); line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}
.coin-earn__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5);
  margin-top: var(--space-8);
}
.coin-way {
  display: flex; flex-direction: column;
  padding: var(--space-8);
  background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-card);
}
.coin-way__label {
  font-size: var(--text-xs); font-weight: var(--font-weight-bold);
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-primary);
}
.coin-way__title {
  margin-top: 2px;
  font-size: var(--text-xl); font-weight: var(--font-weight-bold); line-height: var(--leading-tight);
}
.coin-way__desc {
  margin: var(--space-3) 0 var(--space-6);
  font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--color-text-secondary);
}
.coin-way__note {
  margin: var(--space-5) 0 0;
  font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-text-muted);
}

/* ── Тарифи за рекомендацію ── */
.coin-rates { list-style: none; margin: 0; padding: 0; }
.coin-rates__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light, #eee);
}
.coin-rates__row:last-child { border-bottom: 0; }
.coin-rates__name {
  font-size: var(--text-md); color: var(--color-text); text-decoration: none;
  border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease;
}
.coin-rates__name:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.coin-rates__value {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  width: 64px;
  font-size: var(--text-md); font-weight: var(--font-weight-bold); color: var(--coin-gold);
}
.coin-rates__value b { flex: 1; text-align: right; }
.coin-rates__icon { flex-shrink: 0; }

/* ── Тарифи за контент ── */
.coin-table { width: 100%; border-collapse: collapse; }
.coin-table th {
  padding: 0 0 var(--space-3);
  text-align: left;
  font-size: var(--text-xs); font-weight: var(--font-weight-bold);
  letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-muted);
}
.coin-table th:not(:first-child), .coin-table td:not(:first-child) { text-align: center; width: 96px; }
.coin-table td {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border-light, #eee);
  font-size: var(--text-md); line-height: var(--leading-normal);
}
.coin-table td b { color: var(--coin-gold); }
.coin-table__value { display: inline-flex; align-items: center; gap: 4px; }
.coin-table__icon { flex-shrink: 0; }

/* ── Фінальний банер ── */
.coin-final {
  margin-top: var(--space-20);
  border-radius: var(--radius-2xl);
  background: var(--color-dark);
}
.coin-final__inner { padding: var(--space-20) var(--space-10); text-align: center; color: #fff; }
.coin-final__inner h2 {
  margin: 0;
  font-size: var(--text-3xl); font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight); letter-spacing: -0.5px; color: #fff;
}
.coin-final__sub {
  max-width: 520px; margin: var(--space-3) auto 0;
  font-size: var(--text-lg); line-height: 1.5; opacity: .85;
}
.coin-final__cta { margin-top: var(--space-8); display: flex; justify-content: center; }
/* .btn-buy уже брендова - на темному тлі читається без правок */
.coin-final__alt { margin: var(--space-4) 0 0; font-size: var(--text-base); }
.coin-final__alt a { color: rgba(255, 255, 255, .8); text-decoration: underline; text-underline-offset: 3px; }
.coin-final__alt a:hover { color: #fff; }

/* ── Ритм блоків, які в course.css без margin-top ── */
.lv-faq { margin-top: var(--space-20); }

@media only screen and (max-width: 1279.98px) {
  .coin-emblem { width: 100%; height: auto; padding: var(--space-8) 0; }
}

@media only screen and (max-width: 743.98px) {
  .coin-earn { margin-top: var(--space-12); }
  .coin-earn__h2 { font-size: 22px; }
  .coin-earn__grid { grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-6); }
  .coin-way { padding: var(--space-5); }
  .coin-way__title { font-size: var(--text-lg); }

  .coin-emblem__img { width: 180px; height: 180px; }
  .coin-emblem__unit { font-size: var(--text-sm); }

  .coin-rates__name  { font-size: var(--text-base); }
  .coin-table td     { font-size: var(--text-base); }
  .coin-table th:not(:first-child), .coin-table td:not(:first-child) { width: 64px; }

  .lv-faq { margin-top: var(--space-12); }
  .coin-final { margin-top: var(--space-12); }
  .coin-final__inner { padding: var(--space-12) var(--space-4); }
  .coin-final__inner h2 { font-size: 24px; line-height: 30px; }
  .coin-final__sub { font-size: var(--text-md); }
}