/*
Theme Name:  كورة لايف | Koora Live
Theme URI:   https://www.koralivdb.online
Author:      koora live
Author URI:  https://www.koralivdb.online
Description: قالب كورة لايف لمشاهدة مباريات اليوم بث مباشر مجاني بجودة HD — Premier League, La Liga, Ligue 1, UCL
Version:     1.0.0
Requires at least: 6.0
Requires PHP:      7.4
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: koora-live
Tags: sports, football, rtl, dark-mode, responsive
*/

/* ═══════════════════════════════════════════════
   CSS CUSTOM PROPERTIES
═══════════════════════════════════════════════ */
:root {
  --bg-page:    #1c2133;
  --bg-card:    #242b40;
  --bg-card2:   #1e2538;
  --bg-group:   #28304a;
  --bg-hover:   #2e3855;
  --bg-header:  #1a2035;
  --border:     #2e3a55;
  --border2:    #374460;
  --accent:     #4a9ee8;
  --accent2:    #7ec8f5;
  --text-primary:   #e0eaf8;
  --text-secondary: #7a9ec0;
  --text-muted:     #4a6580;
  --live-red:       #f05252;
  --ended:          #4a6080;
  --score-active:   #f0f6ff;
  --score-ended:    #4a6080;
  --team-badge-bg:  #1e2a3e;
  --meta-league-bg: #1a2538;
  --time-upcoming-bg: #1e2a3e;
  --match-border:   #252d45;
}

body.light-mode {
  --bg-page:    #f0f4f8;
  --bg-card:    #ffffff;
  --bg-card2:   #e8eef5;
  --bg-group:   #dde6f0;
  --bg-hover:   #d4e0ed;
  --bg-header:  #1565c0;
  --border:     #c2d1e0;
  --border2:    #b0c4d8;
  --accent:     #1976d2;
  --accent2:    #0d47a1;
  --text-primary:   #0d1b2a;
  --text-secondary: #2c4a6e;
  --text-muted:     #6b8fb5;
  --live-red:       #d32f2f;
  --ended:          #78909c;
  --score-active:   #0d1b2a;
  --score-ended:    #90a4ae;
  --team-badge-bg:  #dde6f0;
  --meta-league-bg: #e8eef5;
  --time-upcoming-bg: #dde6f0;
  --match-border:   #e0eaf4;
}

/* ═══════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  min-height: 100vh;
  direction: rtl;
  transition: background .35s, color .35s;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }
ul { list-style: none; }

/* ═══════════════════════════════════════════════
   THEME TOGGLE
═══════════════════════════════════════════════ */
.theme-toggle {
  width: 42px; height: 24px;
  background: #2e3a5a;
  border-radius: 20px;
  border: 1.5px solid #3d4f7a;
  cursor: pointer;
  position: relative;
  transition: background .3s, border-color .3s;
  flex-shrink: 0;
  padding: 0; outline: none;
}
body.light-mode .theme-toggle { background: #fef3c7; border-color: #f9a825; }

.toggle-thumb {
  position: absolute;
  top: 3px; right: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #82bcff;
  transition: right .3s, background .3s;
  font-size: 10px; line-height: 16px; text-align: center;
}
body.light-mode .toggle-thumb { right: 21px; background: #f9a825; }

.icon-moon { display: inline; }
.icon-sun  { display: none; }
body.light-mode .icon-moon { display: none; }
body.light-mode .icon-sun  { display: inline; }

/* ═══════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════ */
.kl-header {
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 16px rgba(0,0,0,.3);
}

.kl-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; flex-shrink: 0; }
.kl-logo-icon {
  width: 34px; height: 34px;
  background: #1565c0;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 900; color: #fff;
  border: 1px solid #1e4a8e;
}
.kl-logo-ar { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.1; }
.kl-logo-en { font-size: 9px; color: var(--accent); letter-spacing: 1.5px; }

/* ═══════════════════════════════════════════════
   LIVE INDICATOR
═══════════════════════════════════════════════ */
.live-indicator {
  display: flex; align-items: center; gap: 5px;
  background: rgba(240,82,82,.12);
  border: 1px solid rgba(240,82,82,.3);
  padding: 3px 9px; border-radius: 20px; flex-shrink: 0;
}
.live-dot {
  width: 6px; height: 6px;
  background: var(--live-red); border-radius: 50%;
  animation: blink 1.2s ease-in-out infinite;
}
@keyframes blink {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.4; transform:scale(.7); }
}
.live-text { font-size: 11px; font-weight: 700; color: var(--live-red); }

/* ═══════════════════════════════════════════════
   NAV BUTTONS
═══════════════════════════════════════════════ */
.header-nav { display: flex; gap: 3px; flex-shrink: 0; }
.nav-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 11px;
  font-family: 'Cairo', sans-serif; font-weight: 600;
  padding: 4px 11px; border-radius: 7px; cursor: pointer; transition: all .2s;
}
.nav-btn:hover  { background: var(--bg-hover); color: var(--text-primary); }
.nav-btn.active { background: #1e3a60; color: var(--accent2); border-color: #2d5a9e; }

/* ═══════════════════════════════════════════════
   DATE BAR
═══════════════════════════════════════════════ */
.date-bar {
  background: var(--bg-card2); border-bottom: 1px solid var(--border);
  padding: 7px 16px; display: flex; align-items: center; justify-content: space-between;
}
.date-text { font-size: 12px; color: var(--accent); font-weight: 700; }
.tz-badge {
  font-size: 10px; color: var(--text-muted);
  background: var(--bg-group); padding: 2px 8px;
  border-radius: 5px; border: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════
   FILTER BAR
═══════════════════════════════════════════════ */
.filter-bar {
  background: var(--bg-card2); border-bottom: 1px solid var(--border);
  padding: 8px 16px; display: flex; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
}
.filter-bar::-webkit-scrollbar { display: none; }
.filter-btn {
  background: var(--bg-group); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 11px;
  font-family: 'Cairo', sans-serif; font-weight: 600;
  padding: 4px 11px; border-radius: 20px; cursor: pointer;
  white-space: nowrap; transition: all .2s; flex-shrink: 0;
}
.filter-btn:hover  { background: var(--bg-hover); color: var(--text-primary); }
.filter-btn.active { background: #1e3a60; color: var(--accent2); border-color: #2d5a9e; }

/* ═══════════════════════════════════════════════
   MAIN CONTAINER
═══════════════════════════════════════════════ */
.kl-container { max-width: 720px; margin: 0 auto; padding: 14px 10px 20px; }

/* ═══════════════════════════════════════════════
   LEAGUE SECTIONS
═══════════════════════════════════════════════ */
.league-section { margin-bottom: 14px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.league-header {
  background: var(--bg-group); padding: 7px 13px;
  display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border);
}
.league-flag { width: 20px; height: 14px; border-radius: 3px; flex-shrink: 0; overflow: hidden; }
.flag-es { background: linear-gradient(to bottom,#c60b1e 25%,#ffc400 25%,#ffc400 75%,#c60b1e 75%); }
.flag-en { background: #012169; }
.flag-fr { background: linear-gradient(to right,#002395 33%,#fff 33%,#fff 67%,#ed2939 67%); }
.flag-it { background: linear-gradient(to right,#009246 33%,#fff 33%,#fff 67%,#ce2b37 67%); }
.league-name  { font-size: 12px; color: var(--text-secondary); font-weight: 700; }
.league-count {
  font-size: 10px; color: var(--text-muted); margin-right: auto;
  background: var(--bg-card2); padding: 2px 7px;
  border-radius: 10px; border: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════
   MATCH ROW
═══════════════════════════════════════════════ */
.match-row {
  background: var(--bg-card); display: flex; align-items: center;
  padding: 10px 13px; border-bottom: 1px solid var(--match-border);
  transition: background .15s; gap: 10px; text-decoration: none; color: inherit;
}
.match-row:last-child { border-bottom: none; }
.match-row:hover { background: var(--bg-hover); }

.status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.status-upcoming { background: #2d5a9e; }
.status-live     { background: var(--live-red); animation: blink 1s infinite; }
.status-ended    { background: var(--ended); }

.teams-col { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.team-row  { display: flex; align-items: center; gap: 8px; }
.team-badge {
  width: 26px; height: 26px; border-radius: 5px;
  background: var(--team-badge-bg); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden; padding: 2px;
}
.team-badge img { width:100%; height:100%; object-fit:contain; display:block; }
.team-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.score-col { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 54px; }
.score-display { font-size: 15px; font-weight: 900; letter-spacing: 3px; direction: ltr; }
.score-display.active { color: var(--score-active); }
.score-display.ended  { color: var(--score-ended); }

.time-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 5px; white-space: nowrap; }
.time-badge.upcoming { background: var(--time-upcoming-bg); color: var(--accent); }
.time-badge.live     { background: rgba(240,82,82,.15); color: var(--live-red); border: 1px solid rgba(240,82,82,.3); }
.time-badge.ended    { background: var(--bg-group); color: var(--ended); }

.meta-col { min-width: 90px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.meta-league {
  font-size: 10px; color: var(--text-secondary);
  background: var(--meta-league-bg); padding: 2px 7px;
  border-radius: 4px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 100px; border: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════
   WATCH BUTTON
═══════════════════════════════════════════════ */
.kl-row-btn {
  display: inline-block; font-size: 11px; font-weight: 700;
  font-family: 'Cairo', sans-serif; padding: 4px 10px; border-radius: 6px;
  text-decoration: none; text-align: center; white-space: nowrap;
  cursor: pointer; transition: opacity .2s, transform .1s;
}
.kl-row-btn:hover { opacity: .82; transform: scale(.97); }
.watch-btn { background: rgba(240,82,82,.15); color: #f47a7a; border: 1px solid rgba(240,82,82,.35); }
body.light-mode .watch-btn { background: rgba(211,47,47,.1); color: #c62828; border: 1px solid rgba(211,47,47,.3); }

/* ═══════════════════════════════════════════════
   NEWS SECTION
═══════════════════════════════════════════════ */
.kl-news-section {
  max-width: 720px;
  margin: 0 auto 20px;
  padding: 0 10px;
}
.kl-news-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  padding: 0 2px;
}
.kl-news-bar {
  width: 4px; height: 20px;
  background: var(--accent);
  border-radius: 3px;
  display: block;
  flex-shrink: 0;
}
.kl-news-live {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--live-red);
  background: rgba(240,82,82,.1);
  border: 1px solid rgba(240,82,82,.25);
  padding: 2px 9px;
  border-radius: 20px;
}
.kl-news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 480px) { .kl-news-grid { grid-template-columns: 1fr; } }

.kl-news-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: background .15s, transform .2s;
}
.kl-news-card:hover { background: var(--bg-hover); transform: translateY(-2px); }

.kl-news-badge {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 4px;
  align-self: flex-start;
}
.kl-news-badge.ucl    { background: rgba(25,118,210,.13);  color: #4a9ee8; border: 1px solid rgba(25,118,210,.3); }
.kl-news-badge.barca  { background: rgba(163,0,50,.12);    color: #e05080; border: 1px solid rgba(163,0,50,.28); }
.kl-news-badge.red    { background: rgba(240,82,82,.12);   color: #f05252; border: 1px solid rgba(240,82,82,.28); }
.kl-news-badge.yellow { background: rgba(245,124,0,.12);   color: #ffab40; border: 1px solid rgba(245,124,0,.28); }
.kl-news-badge.green  { background: rgba(46,125,50,.12);   color: #66bb6a; border: 1px solid rgba(46,125,50,.28); }
.kl-news-badge.world  { background: rgba(74,20,140,.12);   color: #ab47bc; border: 1px solid rgba(74,20,140,.28); }
body.light-mode .kl-news-badge.ucl    { color: #1565c0; }
body.light-mode .kl-news-badge.barca  { color: #a30032; }
body.light-mode .kl-news-badge.red    { color: #c62828; }
body.light-mode .kl-news-badge.yellow { color: #e65100; }
body.light-mode .kl-news-badge.green  { color: #2e7d32; }
body.light-mode .kl-news-badge.world  { color: #4a148c; }

.kl-news-title { font-size: 12px; font-weight: 600; color: var(--text-primary); line-height: 1.6; }
.kl-news-meta  { font-size: 10px; color: var(--text-muted); }

/* ═══════════════════════════════════════════════
   POSTS (WordPress Loop)
═══════════════════════════════════════════════ */
.blog-posts { padding: 0 10px 20px; max-width: 720px; margin: 0 auto; }
.post-outer { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
.post-title a { display: block; padding: 13px 15px 0; font-size: 15px; font-weight: 700; color: var(--text-primary); text-decoration: none; }
.post-title a:hover { color: var(--accent2); }
.post-body   { padding: 9px 15px 13px; font-size: 13px; color: var(--text-secondary); line-height: 1.7; }
.post-footer { padding: 7px 15px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); }

/* Single post / page */
.entry-header { padding: 20px 15px 0; }
.entry-title  { font-size: 18px; font-weight: 700; color: var(--text-primary); line-height: 1.5; }
.entry-content { padding: 12px 15px 15px; font-size: 13px; color: var(--text-secondary); line-height: 1.8; }
.entry-content p { margin-bottom: 10px; }
.entry-content a { color: var(--accent); }
.entry-meta { padding: 8px 15px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); }

/* Pagination */
.navigation { max-width: 720px; margin: 10px auto; padding: 0 10px 20px; display: flex; gap: 8px; justify-content: center; }
.page-numbers {
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-secondary); padding: 5px 13px; border-radius: 7px; font-size: 12px; font-weight: 600;
}
.page-numbers.current { background: #1e3a60; color: var(--accent2); border-color: #2d5a9e; }
.page-numbers:hover    { background: var(--bg-hover); color: var(--text-primary); }

/* ═══════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════ */
.sidebar { max-width: 720px; margin: 0 auto; padding: 0 10px 20px; }
.widget { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.widget-title { background: var(--bg-group); padding: 7px 13px; font-size: 12px; font-weight: 700; color: var(--text-secondary); border-bottom: 1px solid var(--border); }
.widget-content { padding: 9px 13px; font-size: 12px; color: var(--text-secondary); }
.widget ul li { padding: 5px 0; border-bottom: 1px solid var(--border); }
.widget ul li:last-child { border-bottom: none; }
.widget ul li a { color: var(--accent); font-size: 12px; }

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
.kl-footer { background: var(--bg-card2); border-top: 1px solid var(--border); padding: 14px 16px; text-align: center; font-size: 11px; color: var(--text-muted); }
.kl-footer a { color: var(--accent); text-decoration: none; }

/* ═══════════════════════════════════════════════
   DAY SECTIONS
═══════════════════════════════════════════════ */
.day-section { display: none; }
.day-section.active { display: block; }

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 480px) {
  .meta-col   { min-width: 72px; }
  .meta-league { max-width: 72px; }
  .team-name  { font-size: 12px; }
  .kl-header  { padding: 0 10px; gap: 6px; }
  .kl-logo-ar { font-size: 13px; }
  .kl-logo-en { display: none; }
  .header-nav .nav-btn { padding: 3px 8px; font-size: 10px; }
}