/* ==========================================================================
   Section rules moved from css/style-15.css (CSS-PLAN Step 8 Wave 2).
   PREPENDED so this sheet's own rules keep winning their ties.
   ========================================================================== */
.fixture-leagueTime { height: 20px; }

.reklama { margin: 0.5rem 0px; }

.fa-comment { color: rgb(49, 108, 180) !important; margin: -2px 5px !important; }

.novo { margin: 0px 0.25rem; color: red; font-size: 11px; cursor: pointer; }

.cleft { float: left; }

.cleft i { color: brown; margin-left: 6px; }

.m-thed { display: none; }

.stroke-3 { stroke-width: 3px; }

.odd-value { font-weight: 700; }

.odd-link { display: inline-block; color: var(--blue); text-decoration: none; font-weight: 700; }

.highlightStat { font-weight: 500; }

.toggle-arrow { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; transition: transform 0.3s; }

.fixture-count { font-size: 0.875rem; color: var(--darkGrey); }

.country-content { display: block; }

.fixture-leagueTime { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; color: var(--darkGrey); }

.fixtures-scroll { display: flex; flex-wrap: wrap; overflow-x: auto; gap: 15px; scrollbar-width: thin; }

.fixture-card { display: flex; flex-direction: column; min-width: 200px; border: 1px solid rgb(234, 234, 234); border-radius: 6px; padding: 12px; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 3px; width: 32.4%; background: var(--white); }

.fixture-leagueTime { display: flex; flex-direction: row; align-items: center; }

/* ==========================================================================
   Redesign 2026 — Trendovi / nizovi (design 11e, faithful pass).
   All values from css/design-tokens.css. Mobile-first; desktop at 1024px.
   ========================================================================== */

.kl-nizovi {
  max-width: 1360px;
  margin: 0 auto;
  padding: var(--kl-sp-16) var(--kl-sp-20) var(--kl-sp-24) var(--kl-sp-20);
  background: var(--kl-surface);
  min-height: 60vh;
}

.kl-nizovi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kl-sp-12);
}

.kl-nizovi .kl-page-title {
  font: 800 21px var(--kl-font-display);
  color: var(--kl-ink);
  line-height: 1.2;
  margin: 0;
}

.kl-nizovi .kl-page-lead {
  font: 400 12.5px var(--kl-font-ui);
  color: var(--kl-text-3);
  margin: var(--kl-sp-4) 0 0 0;
}

/* --- Date pager: single pill (design) ------------------------------------- */
.kl-nizovi-datenav {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--kl-border-strong);
  border-radius: var(--kl-r-pill);
  padding: 5px 6px;
  flex-shrink: 0;
}

.kl-nizovi-datenav a {
  font: 600 var(--kl-fs-13) var(--kl-font-ui);
  color: var(--kl-text-2);
  padding: 0 var(--kl-sp-6);
  text-decoration: none;
}

.kl-nizovi-datenav a:hover { color: var(--kl-ink); }

.kl-nizovi-datenav time {
  font: 700 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-ink);
}

/* --- Country/league groups -------------------------------------------------- */
.kl-nizovi-country { margin-top: var(--kl-sp-16); }

.kl-nizovi-country-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kl-sp-8);
  margin-bottom: var(--kl-sp-8);
}

.kl-nizovi-country-id {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

/* Round country badge (flag cropped to circle, like the design's initials) */
.kl-nizovi-flag {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--kl-navy);
  flex-shrink: 0;
}

.kl-nizovi-country-id h2 {
  font: 700 var(--kl-fs-13) var(--kl-font-display);
  color: var(--kl-ink);
  margin: 0;
  white-space: nowrap;
}

.kl-nizovi-leaguename {
  font: 500 var(--kl-fs-11) var(--kl-font-ui);
  color: var(--kl-text-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kl-nizovi-toggle {
  font: 600 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-text-2);
  background: var(--kl-surface-3);
  border: 0;
  border-radius: var(--kl-r-pill);
  padding: var(--kl-sp-4) var(--kl-sp-12);
  cursor: pointer;
  white-space: nowrap;
}

.kl-nizovi-country-body.is-collapsed { display: none; }

/* global.css's legacy .is-expanded rule forces display:block on this container,
   so stacked cards get their spacing from margins rather than a flex gap. */
.kl-nizovi-country-body > * + * { margin-top: var(--kl-sp-8); }

/* --- Match trend card (design 11e) ------------------------------------------ */
.kl-nizovi-card {
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-16);
  overflow: hidden;
}

/* Grey header strip: time + teams (+ score/Završeno) */
.kl-nizovi-match {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-10);
  padding: var(--kl-sp-12) var(--kl-sp-14);
  background: var(--kl-surface-2);
  border-bottom: 1px solid var(--kl-divider);
}

.kl-nizovi-time {
  font: 700 var(--kl-fs-11) var(--kl-font-ui);
  color: var(--kl-ink);
  flex-shrink: 0;
}

.kl-nizovi-teams {
  flex: 1;
  min-width: 0;
  font: 800 13.5px var(--kl-font-display);
  color: var(--kl-ink);
}

.kl-nizovi-result {
  display: inline-flex;
  align-items: center;
  gap: var(--kl-sp-6);
  flex-shrink: 0;
}

.kl-nizovi-result b {
  font: 800 var(--kl-fs-12) var(--kl-font-display);
  color: var(--kl-ink);
}

.kl-nizovi-result small {
  font: 600 9px var(--kl-font-ui);
  color: var(--kl-green);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kl-nizovi-body {
  padding: var(--kl-sp-12) var(--kl-sp-14);
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-10);
}

/* --- Trend bullets ------------------------------------------------------------ */
.kl-nizovi-trends {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-6);
}

.kl-nizovi-trends li {
  font: 400 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-text);
  line-height: 1.5;
  padding-left: var(--kl-sp-16);
  position: relative;
}

.kl-nizovi-trends li::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 9px;
  color: var(--kl-text-4);
}

/* --- Pick row: boxed (design) -------------------------------------------------- */
.kl-nizovi-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kl-sp-10);
  background: var(--kl-surface-2);
  border: 1px solid #EDEEF0;
  border-radius: var(--kl-r-12);
  padding: var(--kl-sp-10) var(--kl-sp-14);
}

.kl-nizovi-pick strong {
  font: 800 var(--kl-fs-13) var(--kl-font-display);
  color: var(--kl-ink);
}

.kl-nizovi-odd {
  display: inline-flex;
  align-items: center;
  gap: var(--kl-sp-10);
  text-decoration: none;
}

.kl-nizovi-odd b {
  font: 800 var(--kl-fs-14) var(--kl-font-display);
  color: var(--kl-blue);
}

.kl-nizovi-trend-up { color: var(--kl-green); font: 700 var(--kl-fs-12) var(--kl-font-ui); }
.kl-nizovi-trend-down { color: var(--kl-red); font: 700 var(--kl-fs-12) var(--kl-font-ui); }

.kl-nizovi-bookie {
  font: 700 9px var(--kl-font-ui);
  color: var(--kl-ink);
  background: var(--kl-surface);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-6);
  padding: 3px 7px;
  letter-spacing: 0.03em;
}

/* Success state (past days) */
.kl-nizovi-pick.is-correct {
  background: var(--kl-green-tint);
  border-color: var(--kl-green-tint);
}

.kl-nizovi-pick.is-correct strong { color: var(--kl-green); }

.kl-nizovi-correct {
  display: inline-flex;
  align-items: center;
  gap: var(--kl-sp-8);
  font: 700 var(--kl-fs-11) var(--kl-font-ui);
  color: var(--kl-green);
}

.kl-nizovi-correct i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--kl-green);
  color: #fff;
  font: 800 10px var(--kl-font-ui);
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Miss state (past days) */
.kl-nizovi-pick.is-incorrect {
  background: var(--kl-red-tint);
  border-color: var(--kl-red-tint);
}

.kl-nizovi-pick.is-incorrect strong { color: var(--kl-red); }

.kl-nizovi-incorrect {
  display: inline-flex;
  align-items: center;
  gap: var(--kl-sp-8);
  font: 700 var(--kl-fs-11) var(--kl-font-ui);
  color: var(--kl-red);
}

.kl-nizovi-incorrect i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--kl-red);
  color: #fff;
  font: 800 10px var(--kl-font-ui);
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* League context line (Phase 3): latest league averages under the heading */
.kl-nizovi-leaguestats {
  margin: 0 0 var(--kl-sp-10);
  font: 500 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-text-3);
}

/* "Prikaži još" reveal for trends beyond the display cap */
.kl-nizovi-morebtn {
  align-self: flex-start;
  margin-top: var(--kl-sp-8);
}

/* Past-day hit-rate summary in the page head */
.kl-nizovi-daystats {
  margin-top: var(--kl-sp-4);
  font: 500 var(--kl-fs-13) var(--kl-font-ui);
  color: var(--kl-text-2);
}

.kl-nizovi-daystats strong {
  font-weight: 800;
  color: var(--kl-ink);
}

/* --- Desktop -------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .kl-nizovi { padding: var(--kl-sp-28) var(--kl-sp-40) var(--kl-sp-48) var(--kl-sp-40); }
  .kl-nizovi .kl-page-title { font-size: 28px; }

  .kl-nizovi-head,
  .kl-nizovi-country { max-width: 860px; margin-left: auto; margin-right: auto; }
  .kl-nizovi-country { margin-top: var(--kl-sp-16); }
}

/* IA-2026: team names link to the bet-centar match page */
a.kl-nizovi-teams { color: inherit; text-decoration: none; }
a.kl-nizovi-teams:hover { text-decoration: underline; }