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

/* ── VARIABLES ─────────────────────────────────────────── */
:root {
  --sl-red:         #d32f2f;
  --sl-live:        #e53935;
  --sl-soon:        #2e7d32;
  --sl-end:         #78909c;
  --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;
}
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:var(--sl-red)!important; color:#fff!important; border-color:var(--sl-red)!important; box-shadow:0 3px 12px rgba(211,47,47,.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:var(--sl-red)!important; color:#fff!important; border-color:var(--sl-red)!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:hidden!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-red)!important; box-shadow:0 2px 14px rgba(211,47,47,.15)!important; }
.match-container.soon,.match-container.commingsoon,.match-container.comming { border-color:#43a047!important; }
.match-container.finshed,.match-container.end { border-color:var(--sl-card-border)!important; }

.match-container > a { display:block!important; float:none!important; overflow:hidden!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-red)!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-red)!important; direction:ltr!important; line-height:1.2!important; }

/* بادجات */
.match-container .match-timing .date { font-size:11px!important; font-weight:700!important; padding:3px 12px!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; }
.match-container .match-timing .live { background:var(--sl-live)!important; padding:3px 12px!important; border-radius:20px!important; display:inline-block!important; margin:0!important; line-height:1.7!important; font-size:0!important; color:transparent!important; animation:slBlink 800ms ease-in-out infinite!important; }
.match-container .match-timing .live::before { content:"جارية الآن"!important; background:transparent!important; color:#fff!important; font-size:11px!important; font-weight:800!important; padding:0!important; border-radius:0!important; display:inline!important; margin:0!important; animation:none!important; position:static!important; line-height:1.7!important; }
.match-container .match-timing .soon { background:var(--sl-soon)!important; color:#fff!important; border-radius:20px!important; padding:3px 12px!important; font-size:11px!important; font-weight:700!important; line-height:1.7!important; display:inline-block!important; margin:0!important; border:none!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(211,47,47,.07)!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%3Cpath fill='%23d32f2f' d='M256,0C114.617,0,0,114.615,0,256s114.617,256,256,256s256-114.615,256-256S397.383,0,256,0z M344.48,269.57l-128,80c-2.59,1.617-5.535,2.43-8.48,2.43c-2.668,0-5.34-0.664-7.758-2.008C195.156,347.172,192,341.82,192,336V176c0-5.82,3.156-11.172,8.242-13.992c5.086-2.836,11.305-2.664,16.238,0.422l128,80c4.676,2.93,7.52,8.055,7.52,13.57S349.156,266.641,344.48,269.57z'/%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:var(--sl-red)!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; }

/* ══════════════════════════════════════════════════════════════
   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,#c62828 0%,#d32f2f 60%,#b71c1c 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:90px; }
.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; }
.sl-status-badge.live { background:#fff; color:#d32f2f; 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  { background:rgba(0,0,0,.25); color:rgba(255,255,255,.8); }

.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 var(--main-color) !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:var(--main-color) !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;
}

/* الخط الأحمر على اليمين */
.blogpost .box-title h2::before,
.blog-post .box-title h2::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 18px;
  background: var(--sl-red);
  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);
}