/* /assets/tarify.css — сторінка /tarify/ (тарифи Free/Premium).
   Warm-палітра дублює cabinet --pf-* токени (вони scoped-інлайн у cabinet/index.php). */
:root {
  --pf-text-primary:   #111827;
  --pf-text-secondary: #6b7280;
  --pf-text-tertiary:  #9ca3af;
  --pf-text-success:   #0F6E56;
  --pf-success-bg:     rgba(15,110,86,0.08);
  --pf-accent-action:  #10b981;
  --pf-accent-action-hover: #059669;
  --pf-accent-tg:      #0088cc;
  --pf-bg-page:        #FAFAF7;
  --pf-bg-primary:     #FFFFFF;
  --pf-bg-secondary:   #F4F2EC;
  --pf-border:         rgba(60,50,30,0.10);
  --pf-border-soft:    rgba(60,50,30,0.05);
}

body { background: var(--pf-bg-page); }

.tarify-root { max-width: 980px; margin: 0 auto; padding: 40px 20px 64px; color: var(--pf-text-primary); }

.tarify-h1 {
  font-family: 'Unbounded', system-ui, sans-serif;
  font-size: 34px; font-weight: 900; line-height: 1.15;
  letter-spacing: -0.5px; margin-bottom: 12px; text-align: center;
}
.tarify-sub { text-align: center; color: var(--pf-text-secondary); font-size: 16px; margin-bottom: 28px; }

/* Банер бети */
.tarify-beta {
  background: var(--pf-success-bg); border: 1px solid rgba(15,110,86,0.18);
  border-radius: 14px; padding: 18px 22px; margin: 0 auto 36px;
  max-width: 760px; color: var(--pf-text-success); font-size: 15px; line-height: 1.55;
}
.tarify-beta strong { font-weight: 700; }

/* Сітка карток */
.tarify-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch;
  margin-bottom: 40px;
}
.tarify-card {
  background: var(--pf-bg-primary); border: 1px solid var(--pf-border);
  border-radius: 16px; padding: 28px 26px; display: flex; flex-direction: column;
}
.tarify-card.premium { border: 2px solid var(--pf-accent-action); box-shadow: 0 8px 28px rgba(16,185,129,0.10); position: relative; }

.tarify-card-name { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--pf-text-secondary); margin-bottom: 6px; }
.tarify-card.premium .tarify-card-name { color: var(--pf-text-success); }

.tarify-price { font-family: 'Unbounded', system-ui, sans-serif; font-size: 30px; font-weight: 900; line-height: 1.1; margin-bottom: 4px; }
.tarify-price small { font-family: system-ui, sans-serif; font-size: 14px; font-weight: 500; color: var(--pf-text-tertiary); }
.tarify-price-year { font-size: 14px; color: var(--pf-text-secondary); margin-bottom: 8px; }

.tarify-badge {
  display: inline-block; background: var(--pf-success-bg); color: var(--pf-text-success);
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; margin-bottom: 16px;
}

.tarify-features { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.tarify-features li { font-size: 15px; line-height: 1.45; padding-left: 26px; position: relative; color: var(--pf-text-primary); }
.tarify-features li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--pf-text-success); font-weight: 700; }
.tarify-features li.hl { font-weight: 600; }
.tarify-features li.muted { color: var(--pf-text-tertiary); }
.tarify-features li.muted::before { content: "•"; color: var(--pf-text-tertiary); }
.tarify-features li.soon::after { content: " скоро"; font-size: 11px; color: var(--pf-accent-tg); font-weight: 600; }
.tarify-features li.strike { color: var(--pf-text-tertiary); text-decoration: line-through; }
.tarify-features li.strike::before { content: "×"; color: var(--pf-text-tertiary); text-decoration: none; }

/* CTA */
.tarify-cta { text-align: center; margin: 8px 0 44px; }
.tarify-wl-btn {
  display: inline-block; background: var(--pf-accent-action); color: #fff;
  border: none; cursor: pointer; font-family: inherit; font-size: 17px; font-weight: 700;
  padding: 16px 34px; border-radius: 12px; transition: .15s; box-shadow: 0 4px 16px rgba(16,185,129,0.28);
}
.tarify-wl-btn:hover:not(:disabled) { background: var(--pf-accent-action-hover); transform: translateY(-1px); }
.tarify-wl-btn:disabled { background: var(--pf-bg-secondary); color: var(--pf-text-success); cursor: default; box-shadow: none; }
.tarify-wl-note { display: block; margin-top: 10px; font-size: 13px; color: var(--pf-text-tertiary); }
.tarify-wl-thanks { margin-top: 12px; font-size: 14px; color: var(--pf-text-success); font-weight: 600; }

/* FAQ */
.tarify-faq { max-width: 760px; margin: 0 auto; }
.tarify-faq h2 { font-family: 'Unbounded', system-ui, sans-serif; font-size: 22px; font-weight: 900; text-align: center; margin-bottom: 22px; }
.tarify-faq-item { background: var(--pf-bg-primary); border: 1px solid var(--pf-border); border-radius: 12px; padding: 18px 22px; margin-bottom: 12px; }
.tarify-faq-q { font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.tarify-faq-a { color: var(--pf-text-secondary); font-size: 15px; line-height: 1.55; }

@media (max-width: 720px) {
  .tarify-grid { grid-template-columns: 1fr; }
  .tarify-h1 { font-size: 27px; }
  .tarify-root { padding: 28px 16px 48px; }
}