/* Teams + kick-off time: the box under a post's title (.mbox) and the line on cards (.mchip).
   Text comes from SeoCore.matchBoxHtml / matchChipHtml (Tehran time, Persian digits). */
/* Visual52: stable RTL columns, quiet red/blue accents and readable time. */
.mbox { margin: 6px 0 22px; padding: 22px; border-radius: 20px; color: #e8eef6;
  background: linear-gradient(110deg, rgba(59,130,255,.08), transparent 45%, rgba(255,46,79,.08)), #0b0b12;
  border: 1px solid #30313e; box-shadow: 0 12px 28px -20px #000; }
.mbox-teams { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: stretch; gap: 14px; text-align: center; }
.mbox-teams:has(> :only-child) { grid-template-columns: 1fr; }
.mbox-team { display: flex; align-items: center; justify-content: center; padding: 14px 10px; min-width: 0;
  font-family: 'Noto Sans Arabic', 'Vazirmatn', sans-serif; font-weight: 800; font-size: clamp(18px, 3.4vw, 27px); line-height: 1.7;
  overflow-wrap: anywhere; color: #fff; border-radius: 12px; background: #15121b; border: 1px solid #4e2734; border-top: 3px solid #ff2e4f; }
.mbox-team:last-child:not(:first-child) { background: #111825; border-color: #263d60; border-top-color: #3b82ff; }
.mbox-vs, .mchip-vs { display: inline-flex; align-items: center; justify-content: center; flex: none; direction: ltr;
  font-family: Arial, sans-serif; font-weight: 800; color: #f8fafc; background: #141720; border: 1px solid #414858;
  box-shadow: 3px 0 0 -1px #ff2e4f, -3px 0 0 -1px #3b82ff; }
.mbox-vs { align-self: center; width: 40px; height: 40px; border-radius: 12px; font-size: 12px; }
.mbox-when { display: block; margin-top: 18px; padding: 12px 8px 0; line-height: 2; border-top: 1px solid #2a2b36;
  font-size: 14px; font-weight: 600; color: #e2e8f0; text-align: center; font-variant-numeric: tabular-nums; }
.mbox-when .mt-done { margin-inline-start: 8px; vertical-align: 1px; }
.mbox-teams:empty + .mbox-when, .mbox > .mbox-when:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.mbox-when svg { display: inline-block; width: 17px; height: 17px; color: #82b0ff; vertical-align: -3px; margin-inline-end: 6px; }
.mbox-venue { margin-top: 6px; text-align: center; font-size: 12px; line-height: 1.9; color: #b3bdcd; overflow-wrap: anywhere; }
.mchip { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0 0 12px; padding: 11px;
  border: 1px solid #2e303d; border-radius: 12px; background: #101119; font-size: 12px; line-height: 1.8; min-width: 0; }
.mchip-teams { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 8px; font-weight: 700; color: #f1f5f9; text-align: center; }
.mchip-teams:has(> :only-child) { grid-template-columns: 1fr; }
.mchip-team { min-width: 0; overflow-wrap: anywhere; border-bottom: 2px solid #ff2e4f; padding: 3px 0 5px; }
.mchip-team:last-child:not(:first-child) { border-color: #3b82ff; }
.mchip-vs { width: 26px; height: 26px; border-radius: 8px; font-size: 9px; }
.mchip-when { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; padding-top: 6px;
  border-top: 1px solid #262935; color: #c2cddd; font-variant-numeric: tabular-nums; }
.mchip-when svg { width: 14px; height: 14px; flex: none; color: #82b0ff; }
.mchip > .mt-done { align-self: center; }
.rel-card .mchip { margin: 10px 10px 0; font-size: 11.5px; }
@media (max-width: 480px) {
  .mbox { padding: 14px 10px; border-radius: 16px; }
  .mbox-teams { gap: 8px; }
  .mbox-team { padding: 10px 5px; font-size: 18px; }
  .mbox-vs { width: 30px; height: 32px; border-radius: 9px; font-size: 10px; }
  .mbox-when { font-size: 12.5px; }
}

.mt-done { margin-right: 8px; vertical-align: 1px; }
.mbox-teams:empty + .mbox-when, .mbox > .mbox-when:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.mbox-when svg { display: inline-block; width: 17px; height: 17px; color: #ff2e4f; vertical-align: -3px; margin-left: 6px; }
.mbox-venue { margin-top: 6px; text-align: center; font-size: 13px; color: #94a3b8; }

.mchip { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; }
.mchip-teams { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #f1f5f9; }
.mchip-vs { font: 700 10px/1 'Space Mono', monospace; color: #ff2e4f; padding: 3px 5px; border-radius: 6px; background: rgba(255,46,79,.12); }
.mchip-when { display: inline-flex; align-items: center; gap: 4px; color: #94a3b8; }
.mchip-when svg { width: 13px; height: 13px; color: #ff2e4f; }
.rel-card .mchip { margin: 8px 10px -4px; font-size: 12px; }

.mt-done { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  color: #fecaca; background: rgba(239,68,68,.16); border: 1px solid rgba(239,68,68,.35); }

/* result of the prediction under the match box (light article background) */
.pr-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: -6px 0 18px; padding: 12px 16px; border-radius: 14px; background: #f1f5f9; border: 1px solid #e2e8f0; color: #334155; font-size: 14px; }
.pr-box b { color: #0f172a; }
.pr-box a { margin-inline-start: auto; color: #2563eb; font-size: 13px; text-decoration: none; }
.rs { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.rs-won { background: rgba(22,163,74,.14); color: #15803d; border: 1px solid rgba(22,163,74,.35); }
.rs-lost { background: rgba(220,38,38,.12); color: #dc2626; border: 1px solid rgba(220,38,38,.35); }
.rs-void { background: rgba(100,116,139,.14); color: #64748b; border: 1px solid rgba(100,116,139,.35); }
/* the two teams' pages + their next match, under an article (dark page background) */
.tb { margin: 18px 0 0; }
.tb ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .tb ul { grid-template-columns: 1fr 1fr; } }
.tb li { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.tb-team { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 700; text-decoration: none; }
.tb-team svg { width: 14px; height: 14px; color: #ff5b78; }
.tb-team:hover { color: #3b82ff; }
.tb-next { color: #94a3b8; font-size: 13.5px; text-decoration: none; }
.tb-next:hover { color: #3b82ff; }

/* «دسترسی سریع»: top of the home page and the free predictions page */
.qn { margin: 0 0 22px; }
.qn-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.qn-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 8px 12px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.12);
  color: #e8eef6; font-size: 13.5px; font-weight: 700; text-align: center; text-decoration: none; line-height: 1.5; transition: border-color .2s, transform .2s, box-shadow .2s; }
.qn-btn svg { width: 24px; height: 24px; color: #5aa6ff; }
.qn-btn b { font-size: 11.5px; font-weight: 700; color: #4ade80; }
.qn-today { background: linear-gradient(180deg, rgba(255,46,79,.22), rgba(255,46,79,.08)); border-color: rgba(255,46,79,.45); }
.qn-today svg { color: #ff5b78; }
.qn-today b { position: absolute; top: 8px; left: 10px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #ff2e4f; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.qn-res svg { color: #4ade80; }
.qn-btn:hover, .qn-btn:focus-visible { border-color: rgba(59,130,255,.7); transform: translateY(-2px); box-shadow: 0 0 18px rgba(59,130,255,.25); }
.qn-teams { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.qn-teams::-webkit-scrollbar { display: none; }
.qn-chip { flex: 0 0 auto; padding: 7px 15px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: #e2e8f0; font-size: 13.5px; text-decoration: none; white-space: nowrap; transition: border-color .2s, color .2s; }
.qn-chip:hover, .qn-chip:focus-visible { border-color: rgba(59,130,255,.7); color: #fff; }
.qn-more { color: #5aa6ff; }
@media (min-width: 768px) { .qn-btn { flex-direction: row; gap: 10px; padding: 14px 16px; font-size: 15px; } .qn-today b { position: static; } }
/* on the home page the strip lines up with the sections below it */
.qn-home { width: min(1200px, calc(100% - 32px)); margin-inline: auto; }
@media (min-width: 768px) { .qn-home { width: min(1200px, calc(100% - 64px)); } }

/* the picture at the top of each section page (sharp, like ApexSlip's section heroes) */
.pg-art { position: relative; margin: 0 0 22px; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 6; background: #08070d; box-shadow: 0 18px 40px -22px rgba(0,0,0,.8); }
.pg-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 60%, rgba(8,7,13,.55) 100%); }
@media (max-width: 640px) { .pg-art { aspect-ratio: 16 / 8; border-radius: 16px; margin-bottom: 18px; } }

/* readable on the sharp background picture: every box that holds text gets a near-solid dark fill */
body .bg-white\/\[0\.03\], body .dp-card, body .rs-row a, body .rs-stat, body .tb li, body .vp-glass, body .vp-plan {
  background: linear-gradient(180deg, rgba(20, 15, 32, .94), rgba(12, 9, 20, .95)); }
body .vp-lead { background: linear-gradient(135deg, rgba(255,46,79,.10), rgba(255,176,32,.06)), linear-gradient(180deg, rgba(20,15,32,.94), rgba(12,9,20,.95)); }
body .qn-btn { background: linear-gradient(180deg, rgba(30, 24, 46, .95), rgba(16, 12, 26, .95)); }
body .qn-today { background: linear-gradient(180deg, rgba(70, 14, 30, .95), rgba(30, 9, 20, .95)); }
body .qn-chip, body .dp-chip { background: rgba(16, 12, 26, .92); }
body .glass { background: linear-gradient(180deg, rgba(22, 15, 34, .88), rgba(12, 9, 20, .86)); }
/* titles that sit straight on the picture */
.hm-sec-title, .td-title, .td-sub, .dp-h, .qn, .hm-more { text-shadow: 0 2px 10px rgba(0, 0, 0, .85); }

/* the rest of the text that sat straight on the picture (found by checking every page) */
body main.vp > section:not(.vp-plans):not(.vp-lead):not([hidden]), body .vp-trust, body .vp-note, body .vp details {
  background: linear-gradient(180deg, rgba(20, 15, 32, .94), rgba(12, 9, 20, .95)); border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; }
body main.vp > section:not(.vp-plans):not(.vp-lead):not([hidden]) { padding: 18px 16px; margin-bottom: 18px; }
body .vp-trust, body .vp-note { padding: 12px 16px; }
body .vp details { padding: 10px 14px; margin-bottom: 10px; }
body main.vp > section details { background: rgba(255, 255, 255, .03); }
/* post page: «back» link and «more posts» */
body #postDetail > a:first-child { padding: 6px 14px; border-radius: 999px; background: rgba(12, 9, 20, .9); border: 1px solid rgba(255, 255, 255, .12); }
body .rel-card { background: linear-gradient(180deg, rgba(20, 15, 32, .95), rgba(12, 9, 20, .96)); }
body .rel-head { display: inline-block; padding: 4px 14px; border-radius: 12px; background: rgba(12, 9, 20, .85); }
/* home: section titles */
body .td-head, body .hm-sec-head { padding: 10px 14px; border-radius: 14px; background: rgba(12, 9, 20, .82); }
/* the big page frame lets the page's picture show through (the cards inside stay solid) */
body .glass { background: linear-gradient(180deg, rgba(14, 10, 24, .58), rgba(10, 8, 18, .52)); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
body .glass > * > h1, body .glass h1, body .glass .dp-intro, body .glass .dp-stat, body .glass .dp-h, body .glass .dp-how, body .glass .dp-empty { text-shadow: 0 2px 8px rgba(0, 0, 0, .9); }
body .glass .dp-how, body .glass .dp-intro { padding: 10px 14px; border-radius: 14px; background: rgba(10, 8, 18, .72); }
body .vp-lead { background: linear-gradient(135deg, rgba(255,46,79,.12), rgba(255,176,32,.06)), rgba(12, 9, 20, .6); backdrop-filter: blur(5px); }