/* Formatting for post bodies — used by the post page AND the admin editor,
   so what you see while writing is what visitors see. */
.post-content { font-family: 'Vazirmatn', Tahoma, sans-serif; color: #1f2937; line-height: 2; font-size: 16px; overflow-wrap: anywhere; }
.post-content p, .post-content div { margin: 0 0 1em; }
.post-content h2 { font-size: 1.6em; font-weight: 700; line-height: 1.5; margin: 0.8em 0 0.4em; color: #100b18; }
.post-content h3 { font-size: 1.3em; font-weight: 700; line-height: 1.5; margin: 0.7em 0 0.3em; color: #100b18; }
.post-content h4 { font-size: 1.1em; font-weight: 700; margin: 0.6em 0 0.3em; }
.post-content ul, .post-content ol { padding-right: 1.6em; padding-left: 0; margin: 0 0 0.8em; }
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content blockquote { border-right: 4px solid #e11d48; background: #f1f5f2; margin: 0.8em 0; padding: 0.6em 1em; border-radius: 8px; }
.post-content a { color: #0b7a55; text-decoration: underline; }
.post-content img { display: block; max-width: 100%; height: auto; margin: 1em auto; border-radius: 12px; }
.post-content strong, .post-content b { font-weight: 700; }

/* headings: leave room for the fixed header when jumping from the table of contents */
.post-content h2, .post-content h3 { scroll-margin-top: 96px; }
/* automatic table of contents (3+ headings) */
.post-content .post-toc { background: #f1f5f2; border: 1px solid #d6e6dc; border-radius: 14px; padding: 14px 18px; margin: 0 0 1.4em; }
.post-content .post-toc-title { font-weight: 700; color: #100b18; margin: 0 0 6px; }
.post-content .post-toc ol { list-style-type: persian; padding-right: 1.5em; padding-left: 0; margin: 0; }
.post-content .post-toc ol ol { padding-right: 1.4em; margin: 2px 0 4px; font-size: .94em; }
.post-content .post-toc li { margin: 2px 0; }
.post-content .post-toc a { color: #0b7a55; text-decoration: none; }
.post-content .post-toc a:hover { text-decoration: underline; }

/* "more posts" cards under an article (outside .post-content, on the dark page) */
.rel-wrap { margin: 28px 0 0; font-family: 'Vazirmatn', Tahoma, sans-serif; }
.rel-head { color: #e5f7ef; font-size: 18px; font-weight: 700; margin: 0 4px 12px; }
.rel-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px; }
.rel-track::-webkit-scrollbar { display: none; }
.rel-track > * { flex: 0 0 calc((100% - 24px) / 3); min-width: 0; scroll-snap-align: start; }
@media (max-width: 639px) { .rel-track > * { flex-basis: 72%; } }
.rel-nav { display: flex; justify-content: space-between; margin-top: 12px; }
.rel-nav[hidden] { display: none; }
.rel-arrow { width: 42px; height: 42px; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .07);
  color: #e5e7eb; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.rel-arrow:hover:not(:disabled) { border-color: #e11d48; color: #e11d48; }
.rel-arrow:disabled { opacity: .3; cursor: default; }
.rel-card { flex-direction: row; align-items: center; }
  .rel-thumb { flex: 0 0 38%; }
  .rel-title { flex: 1; font-size: 14px; }
}
.rel-card { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; text-decoration: none;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); transition: border-color .15s ease, transform .15s ease; }
.rel-card:hover { border-color: #e11d48; transform: translateY(-2px); }
.rel-thumb { display: block; aspect-ratio: 16 / 9; background: #120a14; overflow: hidden; }
.rel-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rel-thumb img.rel-noimg { object-fit: contain; padding: 14%; opacity: .8; }
.rel-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: #e5e7eb; font-size: 13px; font-weight: 700; line-height: 1.8; padding: 8px 10px 10px; }
.rel-track .ad-related { min-height: 0; height: 100%; }

/* Two quote styles, picked in the editor:
   - «نقل‌قول بلیت»  (q-ticket): dark "bet slip" with a neon edge, punched-out sides and the logo
   - «نقل‌قول ساده»  (q-plain) : the classic light box with a green line
   A quote with no style picked (older posts) becomes a ticket when it holds a list of options.
   The «پیش‌بینی ما» box follows the style of its quote. */
.post-content :is(.pred-box:not(.pred-box-bq), .pred-box-bq:not(:has(> blockquote.q-plain)), blockquote.q-ticket, blockquote:not(.q-plain):has(> ul, > ol)) { position: relative; margin: 1.3em 0; padding: 18px 26px 16px 22px; border: 0; border-radius: 16px; color: #e6edf5;
  background: linear-gradient(225deg, #131c28 0%, #0f1621 60%, #0e2a20 100%);
  -webkit-mask: radial-gradient(circle 11px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 11px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  box-shadow: inset -4px 0 0 #ff2e4f, inset 0 0 0 1px rgba(255, 46, 79, .22); }
.post-content :is(.pred-box:not(.pred-box-bq), .pred-box-bq:not(:has(> blockquote.q-plain)), blockquote.q-ticket, blockquote:not(.q-plain):has(> ul, > ol))::after { content: ""; position: absolute; top: 12px; left: 14px; width: 30px; height: 30px; border-radius: 8px; opacity: .95;
  background: #0f1621 no-repeat center / cover url("/assets/pwa/icon-192.png"); box-shadow: 0 0 0 1px rgba(255, 46, 79, .3); }
.post-content :is(.pred-box:not(.pred-box-bq), .pred-box-bq:not(:has(> blockquote.q-plain)), blockquote.q-ticket, blockquote:not(.q-plain):has(> ul, > ol)) > :first-child, .post-content :is(.pred-box:not(.pred-box-bq), .pred-box-bq:not(:has(> blockquote.q-plain)), blockquote.q-ticket, blockquote:not(.q-plain):has(> ul, > ol)) > blockquote > :first-child { padding-left: 38px; }
.post-content :is(.pred-box:not(.pred-box-bq), .pred-box-bq:not(:has(> blockquote.q-plain)), blockquote.q-ticket, blockquote:not(.q-plain):has(> ul, > ol)) strong, .post-content :is(.pred-box:not(.pred-box-bq), .pred-box-bq:not(:has(> blockquote.q-plain)), blockquote.q-ticket, blockquote:not(.q-plain):has(> ul, > ol)) b, .post-content :is(.pred-box:not(.pred-box-bq), .pred-box-bq:not(:has(> blockquote.q-plain)), blockquote.q-ticket, blockquote:not(.q-plain):has(> ul, > ol)) a { color: #ff2e4f; }
.post-content :is(.pred-box:not(.pred-box-bq), .pred-box-bq:not(:has(> blockquote.q-plain)), blockquote.q-ticket, blockquote:not(.q-plain):has(> ul, > ol)) p, .post-content :is(.pred-box:not(.pred-box-bq), .pred-box-bq:not(:has(> blockquote.q-plain)), blockquote.q-ticket, blockquote:not(.q-plain):has(> ul, > ol)) li { color: #e6edf5; }
.post-content :is(.pred-box:not(.pred-box-bq), .pred-box-bq:not(:has(> blockquote.q-plain)), blockquote.q-ticket, blockquote:not(.q-plain):has(> ul, > ol)) li::marker { color: #ff2e4f; }
.post-content :is(.pred-box:not(.pred-box-bq), .pred-box-bq:not(:has(> blockquote.q-plain)), blockquote.q-ticket, blockquote:not(.q-plain):has(> ul, > ol)) ul, .post-content :is(.pred-box:not(.pred-box-bq), .pred-box-bq:not(:has(> blockquote.q-plain)), blockquote.q-ticket, blockquote:not(.q-plain):has(> ul, > ol)) ol { margin: 0; }
.post-content :is(.pred-box:not(.pred-box-bq), .pred-box-bq:not(:has(> blockquote.q-plain)), blockquote.q-ticket, blockquote:not(.q-plain):has(> ul, > ol)) > :last-child, .post-content :is(.pred-box:not(.pred-box-bq), .pred-box-bq:not(:has(> blockquote.q-plain)), blockquote.q-ticket, blockquote:not(.q-plain):has(> ul, > ol)) > blockquote > :last-child { margin-bottom: 0; }
.post-content .pred-box:not(.pred-box-bq) > p:first-child { font-size: 1.08em; font-weight: 700; color: #fff; }
.post-content .pred-box > p { margin: .3em 0; }
/* ticket wrapper around a quote → the quote itself adds nothing */
.post-content .pred-box-bq:not(:has(> blockquote.q-plain)) > blockquote { border: 0; background: none; padding: 0; margin: 0; box-shadow: none; -webkit-mask: none; mask: none; border-radius: 0; }
.post-content .pred-box-bq:not(:has(> blockquote.q-plain)) > blockquote::after { content: none; }
/* classic style: the wrapper is invisible and the quote keeps its light box */
.post-content .pred-box-bq:has(> blockquote.q-plain) { border: 0; background: none; padding: 0; margin: 0; }
.post-content blockquote.q-plain { border: 0; border-right: 4px solid #e11d48; background: #f1f5f2; margin: 0.8em 0; padding: 0.6em 1em; border-radius: 8px; color: inherit; }
.post-content blockquote.q-plain::after { content: none; }

/* ==text== lines: the black «Pick» box */
.post-content p.pick-box { position: relative; margin: 1.1em 0; padding: 14px 18px 14px 18px; padding-inline-start: 74px; border-radius: 14px;
  background: linear-gradient(135deg, #0b0b10, #16161f); color: #fff; font-weight: 700; font-size: 1.05em; line-height: 1.8;
  border: 1px solid #2a2a36; box-shadow: 0 10px 24px -14px rgba(0,0,0,.7); }
.post-content p.pick-box::before { content: "PICK"; position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%);
  padding: 3px 9px; border-radius: 999px; background: #ff2e4f; color: #fff; font: 700 11px/1.4 system-ui, sans-serif; letter-spacing: .08em; }
.post-content p.pick-box strong, .post-content p.pick-box b { color: #ffd56b; }
.post-content p.pick-box a { color: #7ab8ff; }