/* ===============================
   FIXTURE PAGE LAYOUT — 2Babak.com
   Struktur body utama (judul, filter, sidebar, match list)
=============================== */

main {
  max-width: 1300px;
  margin: 0 auto;
  padding: 25px;
}

/* ===============================
   SECTION JUDUL
=============================== */
section.content h2 {
  color: #15171c;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 18px;
}

/* ===============================
   FILTER BAR
=============================== */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 25px;
  flex-wrap: wrap;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

.filter-bar label {
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
}

.filter-bar input[type="text"] {
  background: #faf8f3;
  border: 1px solid #f2efe7;
  color: #15171c;
  padding: 6px 10px;
  border-radius: 5px;
  outline: none;
  min-width: 160px;
  font-size: 14px;
}

.filter-bar input::placeholder {
  color: #6b7280;
}

.filter-bar button {
  background: #0b6e3f;
  border: none;
  color: #faf8f3;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-bar button:hover {
  background: #0b6e3f;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
}

/* ===============================
   WRAPPER FIXTURES
=============================== */
.fixtures-wrapper {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* ===============================
   SIDEBAR LIGA (KIRI)
=============================== */
.sidebar-leagues {
  width: 260px;
  background: #ffffff;
  border: 1px solid #f2efe7;
  border-radius: 10px;
  padding: 12px;
  overflow-y: auto;
  max-height: 75vh;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);
}

.sidebar-leagues::-webkit-scrollbar {
  width: 6px;
}
.sidebar-leagues::-webkit-scrollbar-thumb {
  background: #e5e1d6;
  border-radius: 5px;
}

.league-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.25s ease;
}

.league-item:hover {
  background: #e5e1d6;
}

.league-item img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: #ffffff;
  border-radius: 10px;
  padding: 6px;
}

.league-item span {
  color: #15171c;
  font-size: 14px;
  font-weight: 500;
}

.league-item small {
  color: #aaa;
  font-size: 12px;
}

/* ===============================
   MATCH CONTAINER (KANAN)
=============================== */
.match-container {
  flex: 1;
  background: #ffffff;
  border: 1px solid #f2efe7;
  border-radius: 10px;
  padding: 6px 10px;
  overflow-y: auto;
  max-height: 75vh;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.35);
}

/* ===============================
   SETIAP BARIS PERTANDINGAN
=============================== */
.fixture {
  display: grid;
  grid-template-columns: 1fr 60px 1fr 80px; /* kiri | skor | kanan | status */
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #e5e1d6;
  border-radius: 8px;
  padding: 5px 12px;
  margin-bottom: 5px;
  transition: all 0.2s ease;
}
.fixture:hover {
  background: #e5e1d6;
  transform: scale(1.01);
}

/* ===============================
   TIM KIRI & KANAN
=============================== */
.fixture .team {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
.fixture .team img {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  flex-shrink: 0;
}
.fixture .team span {
  font-size: 13px;
  font-weight: 500;
  color: #e6edf3;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* ===============================
   SKOR
=============================== */
.fixture .score {
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  color: #0b6e3f;
  letter-spacing: 0.5px;
}

/* ===============================
   STATUS
=============================== */
.fixture .status {
  text-align: right;
  font-size: 12px;
  font-weight: 500;
  color: #8b949e;
}
.fixture .status .live {
  color: #f85149;
  font-weight: 600;
}

/* ===============================
   SCROLLBAR
=============================== */
.match-container::-webkit-scrollbar {
  width: 5px;
}
.match-container::-webkit-scrollbar-thumb {
  background: #e5e1d6;
  border-radius: 4px;
}
.match-container::-webkit-scrollbar-thumb:hover {
  background: #e5e1d6;
}

/* ===============================
   RESPONSIVE
=============================== */
@media (max-width: 960px) {
  .fixtures-wrapper {
    flex-direction: column;
  }

  .sidebar-leagues {
    width: 100%;
    max-height: 260px;
    display: flex;
    flex-wrap: wrap;
    overflow-x: auto;
  }

  .league-item {
    width: 48%;
    margin-bottom: 10px;
  }

  .match-container {
    max-height: unset;
  }
}


/* ============================= */
/* Jadwal v2 (2Babak) — grup liga + filter + Piala Dunia */
/* ============================= */
.jx-hero{padding:18px 0 6px}
.jx-hero h1{font-size:1.6rem;margin:0 0 4px;color:#15171c}
.jx-hero p{margin:0;color:#6b7280;font-size:.95rem;max-width:700px}

.wc-block{margin:16px 0}
.wc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.wc-title{font-weight:700;color:#c77d0a;font-size:1.12rem}
.wc-all{color:#0b6e3f;text-decoration:none;font-size:.85rem;font-weight:600}
.wc-matches{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
.wc-card{background:linear-gradient(135deg,#ffffff,#ffffff);border:1px solid #e5e1d6;border-radius:14px;padding:12px;cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:8px}
.wc-card:hover{border-color:#c77d0a;transform:translateY(-2px)}
.wc-dt{font-size:.78rem;color:#c77d0a;font-weight:600}
.wc-vs{display:flex;align-items:center;gap:8px}
.wc-vs img{width:24px;height:24px;object-fit:contain}
.wc-vs span{font-size:.9rem;color:#15171c;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-x{font-size:.72rem;color:#6b7280;text-align:center}

.jx-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:8px 0 18px;position:sticky;top:0;z-index:5;background:#faf8f3;padding:10px 0}
.jx-dates{display:flex;align-items:center;gap:6px}
.jx-navbtn{width:36px;height:36px;border-radius:10px;border:1px solid #e5e1d6;background:#ffffff;color:#15171c;font-size:1.2rem;cursor:pointer;line-height:1}
.jx-navbtn:hover{border-color:#0b6e3f;color:#0b6e3f}
.jx-date{width:130px;text-align:center;background:#ffffff;border:1px solid #e5e1d6;border-radius:10px;color:#15171c;padding:8px;font-weight:600;cursor:pointer}
.jx-today{background:#0b6e3f;color:#ffffff;border:0;border-radius:10px;padding:8px 14px;font-weight:700;cursor:pointer}
.jx-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.jx-select,.jx-club{background:#ffffff;border:1px solid #e5e1d6;border-radius:10px;color:#15171c;padding:9px 12px;font-size:.9rem;min-width:160px}
.jx-select:focus,.jx-club:focus{outline:none;border-color:#0b6e3f}
.jx-reset{background:#ffffff;border:1px solid #e5e1d6;color:#6b7280;border-radius:10px;padding:9px 14px;cursor:pointer}
.jx-reset:hover{color:#15171c;border-color:#0b6e3f}

.lg-group{background:#faf8f3;border:1px solid #f2efe7;border-radius:14px;margin-bottom:14px;overflow:hidden}
.lg-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#ffffff;border-bottom:1px solid #f2efe7}
.lg-head img{width:26px;height:26px;object-fit:contain;background:#15171c;border-radius:6px;padding:2px}
.lg-meta{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}
.lg-name{font-weight:700;color:#15171c;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-country{font-size:.75rem;color:#6b7280}
.lg-count{background:#ffffff;color:#6b7280;border-radius:20px;padding:2px 10px;font-size:.78rem;font-weight:600}
.lg-matches{display:flex;flex-direction:column}

.mc{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid #ffffff;cursor:pointer;transition:.12s}
.mc:last-child{border-bottom:0}
.mc:hover{background:#ffffff}
.mc-team{display:flex;align-items:center;gap:8px;min-width:0}
.mc-home{justify-content:flex-end;text-align:right}
.mc-away{justify-content:flex-start;text-align:left}
.mc-team img{width:24px;height:24px;object-fit:contain;flex-shrink:0}
.mc-name{font-size:.9rem;color:#15171c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-center{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:64px}
.mc-time{font-weight:700;color:#3c414c;font-size:.95rem}
.mc-score{font-weight:800;color:#15171c;font-size:1.02rem}
.mc-badge{font-size:.66rem}
.st-ns{color:#6b7280}
.st-ft{color:#6b7280}
.st-live{color:#ffffff;background:#0b6e3f;border-radius:6px;padding:1px 6px;font-weight:800;animation:bbpulse 1.4s infinite}
@keyframes bbpulse{0%,100%{opacity:1}50%{opacity:.5}}

.others-wrap{margin-top:6px}
.others-toggle{width:100%;background:#ffffff;border:1px dashed #e5e1d6;color:#6b7280;border-radius:12px;padding:12px;cursor:pointer;font-weight:600}
.others-toggle:hover{color:#15171c;border-color:#0b6e3f}
.others-body{margin-top:12px}

.jx-empty,.jx-loading{text-align:center;color:#6b7280;padding:30px 10px}
.mdp-close{position:absolute;top:10px;right:14px;font-size:1.6rem;color:#15171c;cursor:pointer;z-index:2}

/* Homepage jadwal hero widget */
.home-jadwal{background:#faf8f3;border:1px solid #f2efe7;border-radius:16px;padding:14px 16px;margin:0 0 22px}
.home-jadwal .hj-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.home-jadwal .hj-title{font-weight:800;color:#15171c;font-size:1.15rem}
.home-jadwal .hj-all{color:#0b6e3f;text-decoration:none;font-weight:700;font-size:.85rem}
.home-jadwal .lg-group{margin-bottom:10px}

@media(max-width:560px){
  .jx-controls{flex-direction:column;align-items:stretch}
  .jx-filters{justify-content:space-between}
  .jx-select,.jx-club{min-width:0;flex:1}
  .mc-name{font-size:.82rem}
  .wc-matches{grid-template-columns:1fr 1fr}
}

/* WC quick links (homepage) */
.wc-quick{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.wc-quick .wcq{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#15171c;border-radius:24px;padding:9px 16px;text-decoration:none;font-weight:600;font-size:.85rem;white-space:nowrap}
.wc-quick .wcq:hover{background:#0b6e3f;color:#ffffff;border-color:#0b6e3f}

/* WC groups (homepage) */
.wc-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.wcg-card{background:#faf8f3;border:1px solid #f2efe7;border-radius:14px;overflow:hidden}
.wcg-head{background:#ffffff;padding:9px 12px;font-weight:700;color:#c77d0a;border-bottom:1px solid #f2efe7;font-size:.92rem}
.wcg-team{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid #ffffff;font-size:.85rem;color:#15171c}
.wcg-team:last-child{border-bottom:0}
.wcg-team img{width:20px;height:20px;object-fit:contain}
.wcg-pts{margin-left:auto;color:#6b7280;font-size:.78rem}