/* =========================
   FILTERS WRAPPER
========================= */
#serilerWrapper {
	    display: flex;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.05);
    margin: 0px var(--margin-left-right) 10px;
    align-items: center;
    flex-wrap: wrap;
}
#seriesList {min-height: 100vh;min-height: 100dvh;margin: 0px var(--margin-left-right);}
.seri-filter {
  margin-bottom: 10px;flex:1 1 120px;white-space: nowrap;
}

/* title */
.seri-filter-title {
  font-size: 12px;
  opacity: 0.65;
  margin-bottom: 4px;
  padding-left: 2px;
}

/* =========================
   SELECT
========================= */


.seri-filter select {
	width: 100%;
    cursor: pointer;
  padding: 8px 36px 8px 12px;
  font-size: 13px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    var(--input-bg2)
    url("data:image/svg+xml;utf8,<svg fill='%23aaa' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M5 7l5 6 5-6z'/></svg>")
    no-repeat right 0px center;
  background-size: 16px;
  color: var(--text-secondary);
  min-height: 40px;
  appearance: none;
  -webkit-appearance: none;
}


/* =========================
   LIST
========================= */

.seri-row {
  display: grid;
  grid-template-columns: 1fr 90px 60px;
  gap: 6px;

  padding: 10px 8px;

  border-bottom: 1px solid var(--bg-hover);
  background: var(--bg-card);

  align-items: center;
  font-size: 13px;

  cursor: pointer;

  transition: background .12s ease;
}

.seri-row:hover {
  background: var(--bg-hover);
}

/* =========================
   TEAMS
========================= */

.seri-teams {
  overflow: hidden;
}

.team {
  opacity: 0.65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team.hot {
  color: var(--accent-readable);
  font-weight: 600;
  opacity: 1;
}

.vs {
  opacity: 0.4;
}

/* =========================
   SERI COUNT (🔥)
========================= */

.seri-count {
  font-size: 12px;
  text-align: center;
  white-space: nowrap;font-weight: bold;
}

.seri-count b {
  font-size: 14px;
  font-weight: 700;
}

/* 🔥 BIG STREAK BOOST */
.seri-row[data-seri="5"] .seri-count,
.seri-row[data-seri="6"] .seri-count,
.seri-row[data-seri="7"] .seri-count,
.seri-row[data-seri="8"] .seri-count,
.seri-row[data-seri="9"] .seri-count,
.seri-row[data-seri="10"] .seri-count {
  color: var(--accent);
}

/* =========================
   ODDS
========================= */

.seri-odds {
  text-align: center;
  font-weight: 600;
  font-size: 13px;

  padding: 4px 6px;
  border-radius: 6px;

  background: rgba(255,255,255,0.05);
}

/* optional hover (bet intent) */
.seri-row:hover .seri-odds {
  background: var(--accent);
  color: var(--accent-text);
}

/* =========================
   TIME
========================= */

.seri-time {
  opacity: 0.6;
}

/* =========================
   EMPTY STATE
========================= */

.seri-empty {
  text-align: center;
  padding: 20px;
  font-size: 13px;
  opacity: 0.6;
}

/* =========================
   MOBILE OPTIMIZATION
========================= */

@media (max-width: 480px) {

  .seri-row {
    grid-template-columns: 1fr 70px 55px;
    padding: 9px 6px;
    font-size: 12px;
  }

  .seri-count b {
    font-size: 13px;
  }

  .seri-odds {
    font-size: 12px;
    padding: 3px 4px;
  }

  

}

/* =========================
   TOUCH FEEDBACK
========================= */


.seri-tur-title-stick {
font-size: 13px;
    position: sticky;
    top: calc(var(--height-header) + 4px);border-radius: 6px;
    z-index: 1;
    background: var(--accent);
    color: var(--accent-text);
    padding: 4px 8px;
    font-weight: bold;
    text-align: center;margin-bottom: 10px;
}
.seri_renk {color: var(--accent-readable);}
.seri-headers {background: var(--bg-main);font-weight: bold;}
.seri-headers > *:not(:first-child) {text-align: center;}
.seri-date-header {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 8px;
  background: var(--bg-main);
  color: var(--text-primary);
}