/* components.css — buttons, cards, tables, badges */

/* Buttons */
.a99-btn {
  display: inline-flex; align-items: center; gap: var(--a99-space-2);
  padding: var(--a99-space-3) var(--a99-space-6);
  font-family: var(--a99-font-display); font-weight: 600; font-size: var(--a99-fs-body);
  border: none; border-radius: var(--a99-radius);
  cursor: pointer; transition: all var(--a99-transition);
  text-decoration: none;
}
.a99-btn--primary { background: var(--a99-emerald); color: #fff; box-shadow: var(--a99-shadow-cta); }
.a99-btn--primary:hover { background: var(--a99-emerald-hover); transform: translateY(-1px); }
.a99-btn--gold { background: var(--a99-gold); color: var(--a99-bg); }
.a99-btn--ghost { background: transparent; color: var(--a99-text); border: 1px solid var(--a99-border); }
.a99-btn--lg { padding: var(--a99-space-4) var(--a99-space-8); font-size: 1.125rem; }

/* Brand-coloured contact buttons (official WhatsApp + Telegram brand colors) */
.a99-btn--whatsapp { background: #25D366; color: #fff; }
.a99-btn--whatsapp:hover { background: #1DA851; color: #fff; text-decoration: none; transform: translateY(-1px); }
.a99-btn--telegram { background: #229ED9; color: #fff; }
.a99-btn--telegram:hover { background: #1A82B5; color: #fff; text-decoration: none; transform: translateY(-1px); }
.a99-btn svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Live-support trust strip (sitewide, above footer) */
.a99-support-strip {
  background: linear-gradient(135deg, var(--a99-surface), var(--a99-surface-2));
  border-top: 1px solid var(--a99-border);
  border-bottom: 1px solid var(--a99-border);
  padding: var(--a99-space-8) 0;
  margin-top: var(--a99-space-16);
}
.a99-support-strip__inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--a99-space-6); flex-wrap: wrap;
}
.a99-support-strip__text { flex: 1 1 280px; min-width: 0; }
.a99-support-strip__text h3 {
  margin: 0 0 var(--a99-space-2); color: var(--a99-gold);
  font-size: var(--a99-fs-h3); display: inline-flex; align-items: center; gap: var(--a99-space-2);
}
.a99-support-strip__text h3::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: var(--a99-emerald); box-shadow: 0 0 8px var(--a99-emerald);
  animation: a99-pulse 2s ease-in-out infinite;
}
.a99-support-strip__text p { margin: 0; color: var(--a99-muted); font-size: var(--a99-fs-small); }
.a99-support-strip__buttons {
  display: flex; gap: var(--a99-space-3); flex-wrap: wrap; flex-shrink: 0;
}
@keyframes a99-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}
@media (max-width: 600px) {
  .a99-support-strip__inner { flex-direction: column; text-align: center; }
  .a99-support-strip__text h3 { justify-content: center; }
}

/* Cards */
.a99-card {
  background: var(--a99-surface); border: 1px solid var(--a99-border);
  border-radius: var(--a99-radius-lg); padding: var(--a99-space-6);
  box-shadow: var(--a99-shadow-card); transition: transform var(--a99-transition);
}
.a99-card:hover { transform: translateY(-2px); }
.a99-card__title { color: var(--a99-gold); margin-bottom: var(--a99-space-2); margin-top: 0; }

/* Tables */
.a99-table { width: 100%; border-collapse: collapse; margin: var(--a99-space-6) 0; }
.a99-table th, .a99-table td { padding: var(--a99-space-3); border-bottom: 1px solid var(--a99-border); text-align: left; }
.a99-table th { background: var(--a99-surface); color: var(--a99-gold); font-family: var(--a99-font-display); }
.a99-table tr:hover { background: var(--a99-surface-2); }

/* Badges */
.a99-badge { display: inline-block; padding: 2px var(--a99-space-2); font-size: var(--a99-fs-small);
  border-radius: var(--a99-radius-sm); background: var(--a99-surface-2); color: var(--a99-gold); }
.a99-badge--hot { background: var(--a99-crimson); color: #fff; }
.a99-badge--new { background: var(--a99-emerald); color: #fff; }

/* FAQ accordion */
.a99-faq { background: var(--a99-surface); border-radius: var(--a99-radius); margin-bottom: var(--a99-space-3); border: 1px solid var(--a99-border); }
.a99-faq summary {
  padding: var(--a99-space-4); cursor: pointer; font-family: var(--a99-font-display); font-weight: 600;
  list-style: none; position: relative;
}
.a99-faq summary::-webkit-details-marker { display: none; }
.a99-faq summary::after { content: '+'; position: absolute; right: var(--a99-space-4); color: var(--a99-gold); font-size: 1.5rem; line-height: 1; }
.a99-faq[open] summary::after { content: '−'; }
.a99-faq__body { padding: 0 var(--a99-space-4) var(--a99-space-4); color: var(--a99-muted); }

/* TL;DR / Key Takeaways block */
.a99-tldr {
  background: linear-gradient(135deg, var(--a99-surface), var(--a99-surface-2));
  border-left: 4px solid var(--a99-gold);
  padding: var(--a99-space-6); border-radius: var(--a99-radius);
  margin: var(--a99-space-6) 0;
}
.a99-tldr h3 { margin-top: 0; color: var(--a99-gold); }
.a99-tldr ul { margin: 0; }

/* Meta strip (author, date, last updated) */
.a99-meta { display: flex; gap: var(--a99-space-4); flex-wrap: wrap; color: var(--a99-muted); font-size: var(--a99-fs-small); margin-bottom: var(--a99-space-6); }
.a99-meta a { color: var(--a99-muted); }

/* Trust strip */
.a99-trust-strip { display: flex; gap: var(--a99-space-6); flex-wrap: wrap; justify-content: center; padding: var(--a99-space-6) 0; border-top: 1px solid var(--a99-border); border-bottom: 1px solid var(--a99-border); }
.a99-trust-strip span { color: var(--a99-muted); font-size: var(--a99-fs-small); display: inline-flex; align-items: center; gap: var(--a99-space-2); }
.a99-trust-strip strong { color: var(--a99-text); }

/* Step / Number cards (for HowTo) */
.a99-step { background: var(--a99-surface); padding: var(--a99-space-6); border-radius: var(--a99-radius); position: relative; padding-left: var(--a99-space-12); }
.a99-step__num { position: absolute; left: var(--a99-space-4); top: var(--a99-space-4); width: 32px; height: 32px; background: var(--a99-gold); color: var(--a99-bg); font-family: var(--a99-font-display); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }

/* Disclaimer block */
.a99-disclaimer { padding: var(--a99-space-4); background: rgba(220, 38, 38, 0.08); border-left: 3px solid var(--a99-crimson); border-radius: var(--a99-radius-sm); font-size: var(--a99-fs-small); color: var(--a99-muted); margin: var(--a99-space-6) 0; }