/* ================================================================
   SYRIA LIVE — Pro Design v7
   Match Cards (يلا شوت style) + Header + Single Page
   ================================================================ */

/* ── VARIABLES ─────────────────────────────────────────── */
:root {
  /* Palette D — Clean Day Sports */
  --sl-red:         #16A34A; /* primary accent (was red) */
  --sl-live:        #16A34A;
  --sl-soon:        #F59E0B;
  --sl-end:         #DC2626;
  --sl-accent:      #16A34A;
  --ko-accent:      #16A34A; /* options must NOT overwrite match UI */
  --main-color:     #16A34A; /* was undefined / DB red #d63232 */
  --sl-navy:        #0F172A;
  --sl-page-bg:     #E8F4FC;
  --sl-card-bg:     #ffffff;
  --sl-card-border: #e8ecf0;
  --sl-shadow:      0 1px 6px rgba(0,0,0,.08);
  --sl-text:        #1a1a2e;
  --sl-muted:       #6b7280;
  --sl-info-bg:     #f8f9fb;
}
/* Soft sky page background — day only; Night keeps its own vars */
body:not(.Night) {
  background: var(--sl-page-bg) !important;
}
body.Night {
  --sl-card-bg:     #1c2733;
  --sl-card-border: #2a3a52;
  --sl-shadow:      0 1px 8px rgba(0,0,0,.3);
  --sl-text:        #e8edf5;
  --sl-muted:       #8a9bb5;
  --sl-info-bg:     #16202d;
}

/* ── TABS ──────────────────────────────────────────────── */
.nav-tabs { display:flex!important; gap:8px!important; padding:12px 4px!important; justify-content:center!important; border:none!important; background:transparent!important; }
.nav-tabs li { flex:1!important; max-width:200px!important; margin:0!important; box-shadow:none!important; }
.nav-tabs li a { display:flex!important; align-items:center!important; justify-content:center!important; height:40px!important; font-size:14px!important; font-weight:700!important; border-radius:10px!important; border:1.5px solid #dde0e8!important; background:#fff!important; color:#444!important; transition:all .2s!important; box-shadow:0 1px 4px rgba(0,0,0,.06)!important; float:none!important; width:100%!important; margin:0!important; padding:0!important; text-shadow:none!important; }
.nav-tabs li a:hover, .nav-tabs li.activenv a { background:#16A34A!important; color:#fff!important; border-color:#16A34A!important; box-shadow:0 3px 12px rgba(22,163,74,.3)!important; }
body.Night .nav-tabs li a { background:#1a2535!important; color:#c8d0dc!important; border-color:#263348!important; }
body.Night .nav-tabs li a:hover, body.Night .nav-tabs li.activenv a { background:#16A34A!important; color:#fff!important; border-color:#16A34A!important; }

/* ── MATCH CARD ────────────────────────────────────────── */
.match-container { background:var(--sl-card-bg)!important; border:1px solid var(--sl-card-border)!important; border-radius:14px!important; box-shadow:var(--sl-shadow)!important; margin-bottom:10px!important; padding:0!important; overflow:visible!important; position:relative!important; transition:box-shadow .2s,transform .15s!important; text-align:center!important; }
.match-container:hover { box-shadow:0 4px 18px rgba(0,0,0,.12)!important; transform:translateY(-1px)!important; }
.match-container.live,.match-container.started,.match-container.gools { border-color:var(--sl-live)!important; box-shadow:0 2px 14px rgba(22,163,74,.18)!important; }
.match-container.soon,.match-container.commingsoon,.match-container.comming { border-color:var(--sl-soon)!important; }
.match-container.finshed,.match-container.end { border-color:var(--sl-card-border)!important; }

.match-container > a { display:block!important; float:none!important; overflow:visible!important; width:100%!important; padding:16px 10px 0!important; box-sizing:border-box!important; color:inherit!important; text-decoration:none!important; }
.match-container > a::after { content:""!important; display:table!important; clear:both!important; }

.right-team,.left-team,.match-center { width:33.33333333%!important; float:right!important; display:block!important; }

/* شعار الفريق — مربع بيض كورنر كبير */
.match-container .team-logo { float:none!important; width:90px!important; height:90px!important; background:#f5f7fa!important; border:1.5px solid #e8ecf0!important; border-radius:16px!important; display:flex!important; align-items:center!important; justify-content:center!important; margin:0 auto!important; overflow:hidden!important; padding:0!important; }
body.Night .match-container .team-logo { background:#1a2535!important; border-color:#2a3a52!important; }
.match-container .team-logo img { width:70px!important; height:70px!important; object-fit:contain!important; display:block!important; margin:0 auto!important; max-width:100%!important; max-height:100%!important; }

.match-container .team-name { margin:8px auto 4px!important; display:block!important; font-size:13px!important; font-weight:700!important; color:var(--sl-text)!important; text-align:center!important; line-height:1.4!important; clear:both!important; max-width:100%!important; }

.match-container .match-center { display:flex!important; align-items:center!important; justify-content:center!important; float:right!important; min-height:90px!important; }
.match-container .match-timing { margin:0 auto!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:6px!important; padding:0!important; }

/* النتيجة/الوقت بالأحمر */
.match-container .result { font-size:26px!important; font-weight:900!important; letter-spacing:6px!important; color:var(--sl-navy)!important; direction:ltr!important; margin:0!important; display:block!important; line-height:1.2!important; }
.match-container .match-timing > div:not([class]) { font-size:20px!important; font-weight:800!important; color:var(--sl-navy)!important; direction:ltr!important; line-height:1.2!important; }

/* بادجات — Palette D + no truncation of «جارية الآن» */
.match-container .match-timing .date { font-size:11px!important; font-weight:700!important; padding:4px 14px!important; border-radius:20px!important; display:inline-block!important; margin:0!important; line-height:1.7!important; background:var(--sl-end)!important; color:#fff!important; border:none!important; white-space:nowrap!important; max-width:none!important; overflow:visible!important; box-sizing:border-box!important; }
/* Live: show real HTML text (not font-size:0 + ::before) so full «جارية الآن» fits */
.match-container .match-timing .live,
.match-container .match-timing .date.live {
  background:#16A34A!important; padding:4px 14px!important; border-radius:20px!important; display:inline-block!important; margin:0!important; line-height:1.7!important; font-size:11px!important; font-weight:800!important; color:#fff!important; animation:slBlink 800ms ease-in-out infinite!important; white-space:nowrap!important; min-width:max-content!important; width:auto!important; max-width:none!important; overflow:visible!important; box-sizing:border-box!important;
}
/* Kill legacy ::before from style.css that duplicated/clipped the label */
.match-container .match-timing .live::before,
.match-container .match-timing .date.live::before {
  content:none!important; display:none!important; padding:0!important; margin:0!important; background:none!important; animation:none!important;
}
.match-container .match-timing .soon { background:var(--sl-soon)!important; color:#fff!important; border-radius:20px!important; padding:4px 14px!important; font-size:11px!important; font-weight:700!important; line-height:1.7!important; display:inline-block!important; margin:0!important; border:none!important; white-space:nowrap!important; overflow:visible!important; }
@keyframes slBlink { 0%,100%{opacity:1} 50%{opacity:.6} }

/* شريط المعلومات */
.match-container .match-info { border-top:1px solid var(--sl-card-border)!important; display:table!important; overflow:hidden!important; width:100%!important; float:none!important; padding:0!important; margin:12px 0 0!important; background:var(--sl-info-bg)!important; clear:both!important; box-sizing:border-box!important; }
.match-container .match-info ul { display:block!important; overflow:hidden!important; margin:0!important; padding:0!important; list-style:none!important; width:100%!important; }
.match-container .match-info li, .match-container .match-info ul li { width:33.33333333%!important; float:right!important; font-size:12px!important; font-weight:500!important; display:block!important; text-align:center!important; padding:7px 4px!important; color:var(--sl-muted)!important; border-left:1px solid var(--sl-card-border)!important; box-sizing:border-box!important; }
.match-container .match-info li:last-child, .match-container .match-info ul li:last-child { border-left:none!important; }

.match-container .overlay-match { position:absolute!important; inset:0!important; opacity:0!important; cursor:pointer!important; background:rgba(22,163,74,.08)!important; z-index:9!important; border-radius:14px!important; transition:opacity .2s!important; }
.match-container:hover .overlay-match { opacity:1!important; }
.match-container .text-match { position:absolute!important; inset:0!important; margin:auto!important; width:44px!important; height:44px!important; background:no-repeat center/100% url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ccircle cx='256' cy='256' r='256' fill='%2316A34A'/%3E%3Cpath fill='%23ffffff' d='M208 160v192l160-96z'/%3E%3C/svg%3E")!important; opacity:0!important; transition:opacity .2s!important; }
.match-container:hover .text-match { opacity:1!important; }

.albaflex { padding:8px 0!important; }

/* ── DARK MODE ─────────────────────────────────────────── */
body.Night .menu-section { background:#1c2733!important; }
body.Night .menu-section .navmenu .nav .navsiteta a { background:#1c2733!important; color:#fff!important; }
body.Night .menu-section .navmenu .linkm { background:#263545!important; }
body.Night .menu-section .menulabc { background:#1c2733!important; }
body.Night .match-container { background:var(--sl-card-bg)!important; border-color:var(--sl-card-border)!important; }
body.Night .match-container .result,
body.Night .match-container .match-timing > div:not([class]) { color:#4ade80!important; }
body.Night .match-container .team-name { color:var(--sl-text)!important; }
body.Night .match-container .match-info { border-top-color:var(--sl-card-border)!important; background:var(--sl-info-bg)!important; }
body.Night .match-container .match-info li, body.Night .match-container .match-info ul li { color:var(--sl-muted)!important; border-left-color:var(--sl-card-border)!important; }
body.Night .match-container .match-timing .date { background:#2a3a52!important; }
body.Night .match-container .match-timing .date.live,
body.Night .match-container .match-timing .live { background:#16A34A!important; color:#fff!important; }
body.Night .match-container.end .match-timing .date,
body.Night .match-container .match-timing .date.end { background:#DC2626!important; color:#fff!important; }
body.Night .match-container.comming .match-timing .date,
body.Night .match-container .match-timing .date.comming { background:#64748B!important; color:#fff!important; }

/* ══════════════════════════════════════════════════════════════
   SINGLE MATCH PAGE
   ══════════════════════════════════════════════════════════════ */
.coMatch .backMatch { display:none!important; }
.coMatch .baMatch   { display:none!important; }
.coMatch { background:transparent!important; box-shadow:none!important; padding:0!important; margin-bottom:16px!important; border-radius:0!important; }

.sl-match-hero {
  background:linear-gradient(135deg,#15803d 0%,#16A34A 55%,#166534 100%);
  border-radius:16px; padding:28px 16px 20px;
  margin-bottom:14px; position:relative; overflow:hidden;
}
.sl-match-hero::before { content:''; position:absolute; top:-50px; right:-50px; width:180px; height:180px; background:rgba(255,255,255,.06); border-radius:50%; }
.sl-match-hero::after  { content:''; position:absolute; bottom:-40px; left:-40px; width:140px; height:140px; background:rgba(255,255,255,.04); border-radius:50%; }
.sl-match-league { text-align:center; font-size:11px; font-weight:700; color:rgba(255,255,255,.7); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:16px; position:relative; z-index:1; }
.sl-teams-row { display:flex; align-items:center; justify-content:space-between; gap:8px; position:relative; z-index:1; }
.sl-team { display:flex; flex-direction:column; align-items:center; gap:10px; flex:1; }
.sl-team-logo { width:88px; height:88px; background:#fff; border-radius:16px; display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,.25); }
.sl-team-logo-bg { width:68px; height:68px; background-size:contain; background-repeat:no-repeat; background-position:center; }
.sl-team-name { font-size:14px; font-weight:800; color:#fff; text-align:center; line-height:1.4; text-shadow:0 1px 4px rgba(0,0,0,.25); }
.sl-vs-box { display:flex; flex-direction:column; align-items:center; gap:8px; flex-shrink:0; min-width:110px; overflow:visible!important; }
.sl-score { font-size:36px; font-weight:900; color:#fff; letter-spacing:4px; direction:ltr; line-height:1; text-shadow:0 2px 8px rgba(0,0,0,.2); }
.sl-match-time { font-size:26px; font-weight:900; color:#fff; direction:ltr; line-height:1; }
.sl-status-badge { font-size:11px; font-weight:800; padding:4px 14px; border-radius:20px; letter-spacing:.5px; display:inline-block; white-space:nowrap; overflow:visible; max-width:none; }
.sl-status-badge.live,
body.Night .sl-status-badge.live,
.sl-match-hero .sl-status-badge.live,
body.Night .sl-match-hero .sl-status-badge.live {
  background:#16A34A!important; color:#fff!important; border:2px solid #fff!important;
  -webkit-text-fill-color:#fff!important; animation:slBlink 800ms ease-in-out infinite;
}
.sl-status-badge.soon { background:rgba(255,255,255,.2); color:#fff; border:1px solid rgba(255,255,255,.5); }
.sl-status-badge.end,
body.Night .sl-status-badge.end,
.sl-match-hero .sl-status-badge.end {
  background:#DC2626!important; color:#fff!important; -webkit-text-fill-color:#fff!important;
}

.sl-match-info-card { background:#fff; border-radius:14px; border:1px solid #e8ecf0; overflow:hidden; margin-bottom:16px; box-shadow:0 2px 10px rgba(0,0,0,.06); }
body.Night .sl-match-info-card { background:#1c2733; border-color:#2a3a52; }
.sl-info-row { display:flex; align-items:center; padding:12px 16px; border-bottom:1px solid #f0f2f6; }
body.Night .sl-info-row { border-bottom-color:#2a3a52; }
.sl-info-row:last-child { border-bottom:none; }
.sl-info-icon  { font-size:16px; margin-left:10px; flex-shrink:0; }
.sl-info-label { color:#9e9e9e; font-size:12px; font-weight:600; min-width:110px; flex-shrink:0; }
body.Night .sl-info-label { color:#6b7fa0; }
.sl-info-value { color:#1a1a2e; font-weight:700; font-size:14px; flex:1; text-align:left; }
body.Night .sl-info-value { color:#e8edf5; }

.blog-post.hentry.item-post .table-bordered,
.blog-post.hentry.item-post table.table { display:none!important; }

@media (max-width: 500px) {
  .sl-team-logo { width:70px!important; height:70px!important; }
  .sl-team-logo-bg { width:52px!important; height:52px!important; }
  .sl-score { font-size:26px!important; }
  .sl-match-time { font-size:20px!important; }
  .sl-vs-box { min-width:70px!important; }
  .sl-team-name { font-size:11px!important; }
  .sl-match-hero { padding:18px 10px 14px!important; border-radius:12px!important; }
}

/* ══════════════════════════════════════════════════════
   HEADER FINAL v3
   ══════════════════════════════════════════════════════ */
.menu-section {
  position:sticky !important; top:0 !important; z-index:1000 !important;
  background:#fff !important;
  border-bottom:3px solid #16A34A !important;
  box-shadow:0 1px 4px rgba(0,0,0,.08) !important;
}
.Night .menu-section { background:#1c2733 !important; }

.menu-section .container {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex-wrap:nowrap !important;
  height:65px !important;
  position:relative !important;
}

/* اللوجو يمين */
.menu-section .navbar-brand {
  float:none !important; position:static !important;
  transform:none !important; flex-shrink:0 !important;
  width:auto !important; margin:0 !important; order:0 !important;
}

/* ══ ديسكتوب (أكبر من 768px) ══ */
@media screen and (min-width:769px) {
  /* إخفاء كل عناصر الموبايل */
  .mob-nav        { display:none !important; }
  .mob-dark-left  { display:none !important; }

  /* القائمة الأفقية */
  #desk-nav {
    display:flex !important; align-items:center !important;
    gap:6px !important; order:1 !important;
  }
  #desk-nav .desk-dark {
    position:static !important; left:auto !important; top:auto !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
  }
  #desk-nav .desk-menu-list {
    display:flex !important; align-items:center !important;
    list-style:none !important; margin:0 !important; padding:0 !important;
    gap:2px !important; flex-direction:row-reverse !important;
  }
  #desk-nav .desk-menu-list li a {
    display:block !important; font-size:14px !important; font-weight:600 !important;
    color:#222 !important; padding:6px 12px !important; border-radius:6px !important;
    white-space:nowrap !important; text-decoration:none !important;
    transition:background .2s,color .2s !important;
  }
  #desk-nav .desk-menu-list li a:hover { background:#16A34A !important; color:#fff !important; }
  .Night #desk-nav .desk-menu-list li a { color:#ddd !important; }
}

/* ══ موبايل (768px وأقل) ══ */
@media screen and (max-width:768px) {
  /* إخفاء ديسكتوب */
  #desk-nav { display:none !important; }

  /* اللوجو وسط */
  .menu-section .navbar-brand {
    position:absolute !important;
    left:50% !important; top:50% !important;
    transform:translate(-50%,-50%) !important;
  }
  .menu-section .container { height:55px !important; }

  /* هامبرجر يمين */
  .mob-nav {
    display:flex !important; align-items:center !important;
    gap:6px !important; order:0 !important; flex-shrink:0 !important;
  }
  .mob-nav .menublabel.op {
    position:static !important; right:auto !important; top:auto !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
  }
  /* إخفاء dnmo.mo القديم داخل navmenu */
  .mob-nav .dnmo.mo { display:none !important; }

  /* أيقونة الليلي يسار اللوجو */
  .mob-dark-left {
    display:flex !important; align-items:center !important; justify-content:center !important;
    position:static !important; left:auto !important; top:auto !important;
    order:1 !important; flex-shrink:0 !important;
  }

  /* إخفاء dnmo.mo الـ absolute القديم من style.css */
  .menu-section .container > .dnmo.mo:not(.mob-dark-left) { display:none !important; }
}

/* ══════════════════════════════════════════════════════════════
   BOX-TITLE — ترويسة الأقسام (بطاقة المباراة، معلومات المباراة)
   ══════════════════════════════════════════════════════════════ */
.blogpost .box-title,
.blog-post .box-title {
  position: relative;
  margin: 20px 0 12px;
  padding: 0;
  background: transparent;
  border: none;
}

.blogpost .box-title h2,
.blog-post .box-title h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--sl-text);
  margin: 0;
  padding: 8px 16px 8px 12px;
  background: var(--sl-card-bg);
  border: 1.5px solid var(--sl-card-border);
  border-radius: 10px;
  box-shadow: var(--sl-shadow);
  position: relative;
  line-height: 1.4;
}

/* Accent bar — Palette D green */
.blogpost .box-title h2::before,
.blog-post .box-title h2::before,
body.Night .blogpost .box-title h2::before,
body.Night .blog-post .box-title h2::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 18px;
  background: #16A34A !important;
  border-radius: 3px;
  flex-shrink: 0;
}

/* دارك مود */
body.Night .blogpost .box-title h2,
body.Night .blog-post .box-title h2 {
  color: var(--sl-text);
  background: var(--sl-card-bg);
  border-color: var(--sl-card-border);
}


/* ══════════════════════════════════════════════════════════════
   PALETTE D overrides (title bars / tabs from combined CSS)
   ══════════════════════════════════════════════════════════════ */
body:not(.Night) .matches-title-bar { background:#16A34A !important; }
body:not(.Night) .matches-tabs-row { border-color:#16A34A !important; }
.section-title-matches,
body.Night .section-title-matches { color:#16A34A !important; }
.section-title-matches::before,
body.Night .section-title-matches::before { background:#16A34A !important; }
body:not(.Night) .matches-tabs-row .nav-tabs li:nth-child(2) a { background:#16A34A !important; }
body:not(.Night) .tabs-header .nav-tabs li:nth-child(2) a { background:#16A34A !important; }
/* Ensure center column does not clip status pills */
.match-container .match-center,
.match-container .match-timing { overflow:visible !important; }

/* ══════════════════════════════════════════════════════════════
   v1.6 — Force Palette D (ended-red, live contrast, Night accents)
   ══════════════════════════════════════════════════════════════ */
:root {
  --ko-accent: #16A34A !important;
  --main-color: #16A34A !important;
  --primary-color: #16A34A !important;
  --sl-live: #16A34A !important;
  --sl-red: #16A34A !important;
  --sl-accent: #16A34A !important;
  --sl-end: #DC2626 !important;
}
body:not(.Night) { background: #E8F4FC !important; }
.match-container .text-match {
  background: no-repeat center/100% url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 512 512%27%3E%3Ccircle cx=%27256%27 cy=%27256%27 r=%27256%27 fill=%27%2316A34A%27/%3E%3Cpath fill=%27%23ffffff%27 d=%27M208 160v192l160-96z%27/%3E%3C/svg%3E") !important;
}
.sl-match-hero,
body.Night .sl-match-hero {
  background: linear-gradient(135deg,#15803d 0%,#16A34A 55%,#166534 100%) !important;
}
.sl-status-badge.live,
.sl-match-hero .sl-status-badge.live,
body.Night .sl-status-badge.live {
  background:#16A34A!important; color:#fff!important; border:2px solid #fff!important;
  -webkit-text-fill-color:#fff!important;
}
.sl-status-badge.end,
body.Night .sl-status-badge.end {
  background:#DC2626!important; color:#fff!important; -webkit-text-fill-color:#fff!important;
}
.match-container.end .match-timing .date,
.match-timing .date.end {
  background:#DC2626!important; color:#fff!important;
}
.section-title-matches,
body.Night .section-title-matches { color:#16A34A !important; }
.section-title-matches::before,
body.Night .section-title-matches::before,
.blogpost .box-title h2::before,
.blog-post .box-title h2::before { background:#16A34A !important; }


/* ══════════════════════════════════════════════════════════════
   v1.7 — Ostora-style footer match tags
   ══════════════════════════════════════════════════════════════ */
.match-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.55rem 0.65rem;
	margin: 1.1rem 0 1.15rem;
	text-align: center;
}
.match-tags--footer {
	width: min(1100px, calc(100% - 2rem));
	margin: 1rem auto 0.35rem;
	padding: 0 0.5rem;
}
.match-tags__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.32rem 0.95rem;
	border-radius: 999px;
	background: #eeeeee;
	color: #222222;
	border: 0;
	text-decoration: none;
	font-weight: 700;
	line-height: 1.45;
	font-size: 13px;
}
.match-tags__item:hover {
	background: #e2e2e2;
	color: #16A34A;
}
.Night .match-tags__item {
	background: #1c2733;
	color: #e6edf3;
	border: 1px solid #30363d;
}
.Night .match-tags__item:hover {
	border-color: #16A34A;
	color: #16A34A;
	background: #263545;
}


/* Under-header announcement bar (custom settings) */
.under-header.kickoff-under-bar {
	display: block !important;
	height: auto !important;
	min-height: 0;
	background: #fff !important;
	border-bottom: 1px solid #e8eaed !important;
	padding: 8px 0 !important;
}
.Night .under-header.kickoff-under-bar {
	background: #111820 !important;
	border-color: #263545 !important;
}
.under-header.kickoff-under-bar .container {
	padding: 0 12px;
}
.under-header.kickoff-under-bar .message-box {
	color: #155724;
	background: #d4edda;
	border: 1px solid #c3e6cb;
	padding: 8px 14px;
	border-radius: 5px;
	font-size: 13px;
	line-height: 1.6;
	margin: 0;
	width: 100%;
	text-align: center;
}
.Night .under-header.kickoff-under-bar .message-box {
	color: #d1e7dd;
	background: #1b4332;
	border-color: #2d6a4f;
}

/* Visitor-locked match cards stay visible but not clickable */
a.match-card-link.is-locked,
a.is-locked {
	cursor: default;
	pointer-events: none;
}