/* blog/post.php — v2
   Container/hero/footer-links still mirror pages__refund.css etc (.legal-wrap
   / .back-btn / .legal-hero / .page-badge / .divider / .legal-footer-links)
   so the page stays inside the site's design system. Everything below that
   (banner, share bar, glass content card, CTA, author card, related grid)
   is the upgraded reading experience specific to blog posts. */

.legal-wrap { max-width:820px; margin:0 auto; padding:130px 24px 90px; }
.post-page-wrap { max-width:860px; }

.back-btn { display:inline-flex; align-items:center; gap:8px; color:#86efac; text-decoration:none; font-weight:600; font-size:14px; margin-bottom:32px; transition:.2s; }
.back-btn:hover { color:#fff; gap:12px; }

.legal-hero { text-align:center; margin-bottom:32px; }
.legal-hero .page-badge {
  display:inline-flex; align-items:center; gap:8px; padding:8px 18px;
  background:rgba(var(--color-secondary-rgb),0.1); border:1px solid rgba(var(--color-secondary-rgb),0.3);
  border-radius:50px; color:#86efac; font-size:13px; font-weight:600; margin-bottom:18px;
  text-decoration:none; transition:.2s;
}
.legal-hero .page-badge:hover { background:rgba(var(--color-secondary-rgb),0.18); }
.legal-hero h1 { font-size:34px; font-weight:800; line-height:1.3; margin-bottom:18px; }

.post-meta-row { display:flex; flex-wrap:wrap; justify-content:center; gap:18px; color:#666; font-size:13px; font-weight:600; }
.post-meta-row span { display:inline-flex; align-items:center; gap:7px; }

/* ═══ Featured Image / Banner ═══ */
.post-banner {
  border-radius:24px; overflow:hidden; margin-bottom:26px;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 25px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(var(--color-primary-rgb),0.06);
  position:relative;
}
.post-banner::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.35) 100%);
  pointer-events:none;
}
.post-banner img { width:100%; display:block; max-height:480px; object-fit:cover; }

/* ═══ Social Share Bar ═══ */
.share-bar {
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin-bottom:30px; padding:14px 18px;
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07);
  border-radius:16px;
}
.share-label { color:#888; font-size:13px; font-weight:700; display:inline-flex; align-items:center; gap:8px; margin-right:4px; }
.share-btn {
  width:38px; height:38px; border-radius:11px; border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.04); color:#cbd5e1; font-size:16px;
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; cursor:pointer; transition:.2s; flex-shrink:0;
}
.share-btn:hover { transform:translateY(-3px); }
.share-whatsapp:hover { background:rgba(37,211,102,0.15); border-color:rgba(37,211,102,0.4); color:#25d366; }
.share-telegram:hover { background:rgba(41,182,246,0.15); border-color:rgba(41,182,246,0.4); color:#29b6f6; }
.share-twitter:hover  { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.3); color:#fff; }
.share-copy.copied    { background:rgba(var(--color-secondary-rgb),0.18); border-color:rgba(var(--color-secondary-rgb),0.4); color:var(--color-secondary); }

/* ═══ Language Switcher (below share bar) — swaps content, not the page ═══ */
.blog-lang-switch {
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin-bottom:24px;
}
.blog-lang-btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:11px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  color:#b6bfcc; font-size:13.5px; font-weight:700; cursor:pointer;
  transition:.2s;
}
.blog-lang-btn:hover { background:rgba(255,255,255,0.08); color:#fff; }
.blog-lang-btn.active {
  background:rgba(var(--color-primary-rgb),0.16);
  border-color:rgba(var(--color-primary-rgb),0.5);
  color:var(--color-primary-light, var(--color-primary));
}

/* ═══ Glassmorphic Content Card ═══ */
.post-glass-card {
  position:relative; overflow:hidden;
  background:rgba(17,24,39,0.55);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:26px;
  padding:38px 40px;
  margin-bottom:34px;
  box-shadow:0 30px 70px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}
.post-glass-glow {
  position:absolute; top:-120px; right:-100px; width:320px; height:320px;
  background:radial-gradient(circle, rgba(var(--color-primary-rgb),0.28) 0%, transparent 70%);
  pointer-events:none; filter:blur(10px);
}

/* Body typography — 18px / 1.7 line-height per the dark-mode readability request */
.post-prose { position:relative; color:#c9d0dc; line-height:1.7; font-size:18px; }
.post-prose p { margin-bottom:20px; }

/* ═══ Auto Table of Contents ═══ */
.post-toc {
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);
  border-radius:14px; padding:16px 20px; margin-bottom:28px;
}
.post-toc-title { font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:#9aa4b2; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.post-toc ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.post-toc li a { color:#c9d0dc; text-decoration:none; font-size:14.5px; transition:.15s; }
.post-toc li a:hover { color:var(--color-primary-light, var(--color-primary)); }
.post-toc li.post-toc-sub { padding-left:18px; }

/* ═══ FAQ Accordion ═══ */
.post-faq { margin-top:34px; padding-top:28px; border-top:1px solid rgba(255,255,255,0.08); }
.post-faq h2 { display:flex; align-items:center; gap:10px; font-size:22px; margin-bottom:16px; }
.post-faq-item {
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);
  border-radius:12px; padding:14px 18px; margin-bottom:10px;
}
.post-faq-item summary { cursor:pointer; font-weight:700; font-size:15.5px; color:#e6e9ef; list-style:none; }
.post-faq-item summary::-webkit-details-marker { display:none; }
.post-faq-item summary::before { content:'+'; display:inline-block; width:18px; color:var(--color-primary); font-weight:800; }
.post-faq-item[open] summary::before { content:'−'; }
.post-faq-answer { margin-top:10px; padding-left:18px; color:#aeb6c2; line-height:1.65; font-size:15px; }
.post-prose h2 { color:#fff; font-size:25px; font-weight:700; margin:34px 0 16px; }
.post-prose h3 { color:#fff; font-size:20px; font-weight:700; margin:28px 0 14px; }
.post-prose a { color:var(--color-secondary); text-decoration:underline; text-underline-offset:3px; }
.post-prose img { max-width:100%; border-radius:16px; margin:20px 0; }
/* NOTE: li is intentionally NOT display:flex. A flex container turns every
   child element AND every run of text between them into its own anonymous
   flex item — so a <li> with mixed content like <strong>x</strong> — plain
   text <code>y</code> gets shredded into separate side-by-side boxes
   instead of flowing as one paragraph (this was the "table-like" garbled
   list bug). The bullet/number is now an absolutely-positioned ::before
   instead, so the <li> itself stays in normal block flow and inline
   content (strong/em/code/a mixed with text) wraps exactly like a
   sentence. */
.post-prose ul, .post-prose ol { padding-left:0; list-style:none; margin-bottom:20px; }
.post-prose ul li, .post-prose ol li {
  position:relative; color:#c9d0dc; font-size:18px; line-height:1.6;
  padding-left:26px; margin-bottom:11px;
}
.post-prose ul li::before {
  content:"\f054"; font-family:"Font Awesome 6 Free"; font-weight:900;
  color:var(--color-secondary); font-size:11px;
  position:absolute; left:2px; top:8px;
}
.post-prose ol { counter-reset:postol; }
.post-prose ol li { counter-increment:postol; padding-left:30px; }
.post-prose ol li::before {
  content:counter(postol) "."; font-weight:700; color:var(--color-secondary);
  position:absolute; left:0; top:0;
}
.post-prose blockquote {
  border-left:3px solid var(--color-secondary); padding:14px 22px; margin:26px 0;
  background:rgba(var(--color-secondary-rgb),0.08); border-radius:0 14px 14px 0; color:#e2e8f0; font-style:italic;
}
.post-prose code { background:rgba(255,255,255,0.09); padding:2px 8px; border-radius:6px; font-size:15px; }
.post-prose strong { color:#fff; }

/* ═══ Tables (feature comparisons, pros/cons, command references) ═══
   Previously had NO styling at all here, so any <table> in a post fell
   back to bare browser defaults (Image 2's flat, unstyled columns). */
.post-prose table {
  width:100%; border-collapse:collapse; margin:24px 0; font-size:15.5px;
  border:1px solid rgba(255,255,255,0.09); border-radius:14px; overflow:hidden;
}
.post-prose th, .post-prose td {
  padding:12px 16px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.07);
  color:#c9d0dc; vertical-align:top;
}
.post-prose thead th {
  background:rgba(255,255,255,0.05); color:#fff; font-weight:700;
  font-size:12.5px; text-transform:uppercase; letter-spacing:.04em;
}
.post-prose tbody tr:last-child td { border-bottom:none; }
.post-prose tbody tr:nth-child(even) td { background:rgba(255,255,255,0.015); }

/* ═══ Code blocks ═══
   .post-prose code above gives inline `code` a light pill background —
   fine on its own, but with no dedicated <pre> rule, a <pre><code> block
   had no dark background of its own, so multi-line code/config snippets
   could render on a plain/white block instead of matching the dark card. */
.post-prose pre {
  background:#0b0f17; border:1px solid rgba(255,255,255,0.08);
  border-radius:12px; padding:16px 18px; margin:20px 0;
  overflow-x:auto; font-size:14.5px; line-height:1.6;
}
.post-prose pre code { background:none; padding:0; color:#e6edf3; }

/* ═══ Step-by-step blocks (used in setup-guide style posts) ═══ */
.post-prose .step {
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);
  border-left:3px solid var(--color-primary); border-radius:14px;
  padding:4px 22px 18px; margin:22px 0;
}
.post-prose .step h3 { margin-top:16px; }

/* ═══ Inline tip/warning callouts ═══ */
.post-prose .note {
  background:rgba(var(--color-secondary-rgb),0.08);
  border:1px solid rgba(var(--color-secondary-rgb),0.25);
  border-radius:12px; padding:14px 18px; margin:18px 0;
  font-size:15.5px; color:#dbe4ee;
}

.post-tags { position:relative; display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; padding-top:26px; border-top:1px solid rgba(255,255,255,0.08); }
.post-tag {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.09);
  color:#94a3b8; font-size:12.5px; font-weight:600;
  padding:7px 15px; border-radius:20px; text-decoration:none; transition:.2s;
}
.post-tag:hover { background:rgba(var(--color-secondary-rgb),0.14); border-color:rgba(var(--color-secondary-rgb),0.3); color:#86efac; }

/* ═══ CTA Banner ═══ */
.post-cta-banner {
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:linear-gradient(135deg, rgba(var(--color-primary-rgb),0.16), rgba(var(--color-secondary-rgb),0.1));
  border:1px solid rgba(var(--color-primary-rgb),0.3);
  border-radius:22px; padding:30px 34px; margin-bottom:30px;
  box-shadow:0 20px 45px rgba(var(--color-primary-rgb),0.12);
}
.post-cta-text h3 { font-size:19px; font-weight:800; color:#fff; display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.post-cta-text h3 i { color:var(--color-primary-light); }
.post-cta-text p { color:#c4c9d4; font-size:14px; margin:0; }
.post-cta-btn {
  flex-shrink:0; display:inline-flex; align-items:center; gap:10px;
  background:var(--color-primary); color:#fff; font-weight:700; font-size:14.5px;
  padding:14px 26px; border-radius:14px; text-decoration:none; white-space:nowrap;
  box-shadow:0 10px 28px rgba(var(--color-primary-rgb),0.4); transition:.25s;
}
.post-cta-btn:hover { transform:translateY(-3px); }

/* ═══ About Author ═══ */
.author-card {
  display:flex; gap:20px;
  background:#111827; border:1px solid rgba(255,255,255,0.07); border-radius:20px;
  padding:26px 28px; margin-bottom:30px;
}
.author-avatar {
  width:60px; height:60px; border-radius:16px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:800;
}
.author-info { min-width:0; }
.author-eyebrow { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#666; }
.author-info h4 { font-size:17px; font-weight:800; color:#fff; margin:4px 0 8px; }
.author-info p { color:#8b93a1; font-size:13.5px; line-height:1.7; margin-bottom:12px; }
.author-socials { display:flex; gap:10px; }
.author-socials a {
  width:34px; height:34px; border-radius:10px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
  color:#9ca3af; display:flex; align-items:center; justify-content:center; font-size:14px;
  text-decoration:none; transition:.2s;
}
.author-socials a:hover { background:rgba(var(--color-primary-rgb),0.15); border-color:rgba(var(--color-primary-rgb),0.35); color:var(--color-primary-light); }

.divider { border:none; border-top:1px solid rgba(255,255,255,0.06); margin:38px 0; }

.related-section h2 { font-size:19px; font-weight:700; color:#fff; display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.related-section h2 i { color:var(--color-secondary); }
.related-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.related-card {
  display:flex; flex-direction:column;
  background:#111827; border:1px solid rgba(255,255,255,0.06); border-radius:16px;
  overflow:hidden; text-decoration:none; transition:.25s;
}
.related-card:hover { transform:translateY(-4px); border-color:rgba(var(--color-secondary-rgb),0.3); }
.related-card img { width:100%; aspect-ratio:16/10; object-fit:cover; }
.related-card-fallback { width:100%; aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; background:#0d1421; color:rgba(var(--color-secondary-rgb),0.4); font-size:26px; }
.related-card-body { padding:14px 16px; }
.related-card-body h4 { font-size:13.5px; font-weight:700; color:#fff; line-height:1.4; margin-bottom:8px; }
.related-card-body span { font-size:11.5px; color:#666; font-weight:600; }

.legal-footer-links { display:flex; justify-content:center; gap:28px; margin-top:50px; flex-wrap:wrap; }
.legal-footer-links a { color:#555; text-decoration:none; font-size:13px; transition:.2s; display:inline-flex; align-items:center; gap:7px; }
.legal-footer-links a:hover { color:#86efac; }

@media (max-width:720px) {
  .legal-wrap { padding:100px 18px 60px; }
  .legal-hero h1 { font-size:25px; }
  .post-glass-card { padding:26px 22px; border-radius:20px; }
  .post-prose, .post-prose ul li, .post-prose ol li { font-size:16.5px; }
  .post-prose table { display:block; overflow-x:auto; white-space:nowrap; scrollbar-width:none; -ms-overflow-style:none; }
  .post-prose table::-webkit-scrollbar { display:none; }
  .post-prose th, .post-prose td { font-size:14px; padding:10px 12px; }
  .post-cta-banner { flex-direction:column; align-items:flex-start; padding:24px; }
  .post-cta-btn { width:100%; justify-content:center; }
  .author-card { flex-direction:column; }
  .related-grid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .related-grid { grid-template-columns:1fr; }
  .share-bar { justify-content:center; }
}