/* ==========================================================================
   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.
   ========================================================================== */
.tipovi-content { width: 100%; }

.reklama-2 { padding: 0px; margin: 0px; text-align: center; }

.reklama img, .reklama-2 img { width: 100%; border-radius: 0.25rem; margin: 0.2rem auto; }

.wstatus { padding: 0.35rem 0.6rem; margin-right: 0.5rem; color: var(--kl-on-dark); background: var(--success); border: 1px solid var(--success); border-radius: 0.25rem; cursor: pointer; }

.lstatus { padding: 0.35rem 0.6rem; background: red; margin-right: 1.5rem; color: var(--kl-on-dark); border-radius: 0.25rem; border: 1px solid red; cursor: pointer; }

.vstatus { padding: 0.35rem 0.6rem; margin-right: 0.5rem; color: var(--kl-on-dark); background: orange; border-radius: 0.25rem; border: 1px solid orange; cursor: pointer; }

.btnLarge { min-height: 2.5rem; padding: 0.5rem 1rem; width: 100%; margin: 0.5rem 0px; }

@media only screen and (max-width: 1023px) {
  #loadMoreBtn { display: inline-block; }
}

@media only screen and (min-width: 1024px) {
  #loadMoreBtn { display: inline-block; }
}

.matchScore { font-size: 0.875rem; color: rgb(95, 95, 95); }

.tooltipScore { position: relative; display: inline-block; cursor: pointer; }

.tooltipScore .tooltipS-text { visibility: hidden; width: auto; background-color: black; color: var(--kl-on-dark); text-align: center; padding: 0.5rem; border-radius: 0.25rem; position: absolute; z-index: 1; bottom: 125%; left: 50%; transform: translateX(-50%); white-space: nowrap; opacity: 0; transition: opacity 0.3s; font-size: 0.875rem; }

.tooltipScore:hover .tooltipS-text { visibility: visible; opacity: 1; }

.matchScore { display: flex; align-items: center; gap: 4px; }

/* ==========================================================================
   Redesign 2026 — Tipovi listing (screens 10a/10b + desktop).
   Original bet-card structure (shared .kl-betcards tuning in kl-shell.css);
   this file handles the page chrome. Mobile-first; desktop at 1024px.
   ========================================================================== */

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

/* --- Page head ---------------------------------------------------------- */
.kl-tipovi-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--kl-sp-16);
}


.kl-tipovi-add { display: none; flex-shrink: 0; }

/* --- Filter chips (screen 10a: sport chips + date dropdown) ---------------- */
.kl-tipovi-filters {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-8);
  margin-top: var(--kl-sp-16);
}

/* Sport chips: a single horizontal-scroll strip so they never wrap or overflow
   the viewport at narrow widths (e.g. 360px); the date pill stays pinned right. */
.kl-tipovi-sports {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-6);
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;             /* Firefox */
  -webkit-overflow-scrolling: touch;
}

.kl-tipovi-sports::-webkit-scrollbar { display: none; } /* WebKit */

.kl-tipovi-date {
  position: relative;
  flex-shrink: 0;
}

.kl-chip-date {
  display: inline-flex;
  align-items: center;
  gap: var(--kl-sp-4);
}

.kl-chip-caret { font-size: 0.85em; line-height: 1; }

.kl-date-menu {
  position: absolute;
  top: calc(100% + var(--kl-sp-6));
  right: 0;
  min-width: 168px;
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-2);
  padding: var(--kl-sp-4);
  background: var(--kl-surface);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-10);
  box-shadow: var(--kl-shadow-card);
  z-index: 20;
}

.kl-date-menu[hidden] { display: none; }

.kl-date-opt {
  text-align: left;
  font: 600 var(--kl-fs-13) var(--kl-font-ui);
  color: var(--kl-text);
  background: transparent;
  border: 0;
  border-radius: var(--kl-r-8);
  padding: var(--kl-sp-8) var(--kl-sp-10);
  white-space: nowrap;
  cursor: pointer;
}

.kl-date-opt:hover { background: var(--kl-surface-3); }

.kl-date-opt.is-active { color: var(--kl-blue); font-weight: 700; }

/* --- Empty state (no tips for the selected filter) ------------------------- */
.kl-tipovi-empty {
  grid-column: 1 / -1;
  padding: var(--kl-sp-40) var(--kl-sp-16);
  text-align: center;
  color: var(--kl-text-2);
  font: 500 var(--kl-fs-14) var(--kl-font-ui);
  line-height: 1.5;
}

/* --- List ----------------------------------------------------------------- */
.kl-tipovi-lista {
  display: flex;
  flex-direction: column;
  margin-top: var(--kl-sp-16);
}

.kl-loadmore {
  display: flex;
  width: 100%;
  margin-top: var(--kl-sp-16);
}

.kl-loadmore:disabled {
  opacity: 0.6;
  cursor: default;
}

/* IA-14: the legacy #loadMoreBtn display rules (both media queries, above)
   outrank the HTML `hidden` attribute, so an empty result still showed a
   "Učitaj još tipova" button with nothing to load. Matching the id keeps this
   ahead of them without reaching for a specificity hack. */
#loadMoreBtn[hidden], .kl-loadmore[hidden] { display: none; }

/* --- Promo slot (IA-11) -----------------------------------------------------
   Admin-managed rows from bookmaker_promos, placement "tipovi". Replaces the
   two hardcoded .reklama-2 banners the page carried before the redesign. */
.kl-tipovi-promo {
  margin-top: var(--kl-sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-8);
}
.kl-tipovi-promo-card {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-12);
  padding: var(--kl-sp-12) var(--kl-sp-16);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-14);
  background: var(--kl-promo-bg, var(--kl-surface-2));
  text-decoration: none;
}
.kl-tipovi-promo-logo {
  border-radius: var(--kl-r-8);
  object-fit: contain;
  flex-shrink: 0;
}
.kl-tipovi-promo-text {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-2);
  min-width: 0;
  flex: 1;
}
.kl-tipovi-promo-text strong {
  font: 700 13px var(--kl-font-display);
  color: var(--kl-on-dark);
}
.kl-tipovi-promo-text small {
  font: 500 12px var(--kl-font-ui);
  color: var(--kl-on-dark);
  opacity: 0.85;
}
.kl-tipovi-promo-cta {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: var(--kl-r-pill);
  background: var(--kl-surface);
  font: 700 12px var(--kl-font-ui);
  color: var(--kl-ink);
}
.kl-tipovi-promo-note {
  margin: 0;
  font: 500 11px var(--kl-font-ui);
  color: var(--kl-text-disabled);
  text-align: center;
}

/* SEO / editorial content is fully styled in the dedicated block near the end
   of this sheet (token-based redesign). */

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

  .kl-tipovi .kl-page-title { font-size: 28px; }

  .kl-tipovi-add { display: inline-flex; }

  /* Screen 10a: 3-column grid of shared bet-cards, full content width. */
  .kl-tipovi-lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--kl-sp-16);
    align-items: stretch;
  }

  /* Grid gap handles spacing; cards stretch to equal row height with the
     details strip pinned to the bottom (content grows to fill). */
  .kl-tipovi-lista .bet-card { margin: 0; height: 100%; }
  .kl-tipovi-lista .bet-card-content { flex: 1 1 auto; }

  /* Load more: centered outline pill (mock), not full width. */
  .kl-loadmore {
    width: fit-content;
    margin: var(--kl-sp-24) auto 0;
    padding: var(--kl-sp-10) var(--kl-sp-24);
  }

  /* Promo slot stays a standard width; SEO content spans the full column. */
  .kl-tipovi-promo {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* Global base formerly supplied by css/home.css on /tipovi (CSS-PLAN Step 7.1) */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family:
    "Red Hat Display",
    Inter,
    -apple-system,
    Helvetica,
    sans-serif;
  background-color: var(--kl-surface);
}

.league-name {
  line-height: 1;
  text-transform: uppercase;
  display: block;
}

/* ==========================================================================
   SEO / editorial content — token-based redesign.
   Not part of the 10a mock (an "extra" section) → styled cleanly to the design
   tokens. Full content width; flowing prose kept to a comfortable reading
   measure while card grids span the whole column.
   ========================================================================== */
.tipovi-seo { margin: 0; }

.kl-tipovi .seo-content-section {
  margin-top: var(--kl-sp-40);
  padding-top: var(--kl-sp-32);
  border-top: 1px solid var(--kl-border);
}

.kl-tipovi .seo-text-block {
  display: flex;
  flex-direction: column;
}

/* --- Headings ------------------------------------------------------------- */
.kl-tipovi .seo-content-section h2 {
  margin: 0 0 var(--kl-sp-12);
  font: 800 var(--kl-fs-22) var(--kl-font-display);
  color: var(--kl-ink);
  line-height: 1.25;
}

.kl-tipovi .seo-content-section h3 {
  margin: var(--kl-sp-32) 0 var(--kl-sp-12);
  font: 700 var(--kl-fs-19) var(--kl-font-display);
  color: var(--kl-ink);
  line-height: 1.3;
}

.kl-tipovi .seo-content-section h4 {
  margin: 0 0 var(--kl-sp-6);
  font: 700 var(--kl-fs-15) var(--kl-font-display);
  color: var(--kl-ink);
}

/* --- Flowing prose (readable measure) ------------------------------------- */
.kl-tipovi .seo-content-section p {
  margin: 0 0 var(--kl-sp-12);
  font: 400 var(--kl-fs-14) var(--kl-font-ui);
  color: var(--kl-text);
  line-height: 1.7;
  max-width: 72ch;
}

.kl-tipovi .seo-text-block > ul {
  margin: 0 0 var(--kl-sp-16);
  padding-left: var(--kl-sp-20);
  max-width: 72ch;
}

.kl-tipovi .seo-text-block > ul > li {
  margin-bottom: var(--kl-sp-6);
  font: 400 var(--kl-fs-14) var(--kl-font-ui);
  color: var(--kl-text);
  line-height: 1.7;
}

/* --- Vrste tipova: cards -------------------------------------------------- */
.kl-tipovi .tip-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--kl-sp-16);
  margin: var(--kl-sp-16) 0 var(--kl-sp-8);
}

.kl-tipovi .tip-type {
  padding: var(--kl-sp-20);
  background: var(--kl-surface);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-12);
}

.kl-tipovi .tip-type p {
  margin: 0;
  max-width: none;
  font-size: var(--kl-fs-13);
  color: var(--kl-text-2);
}

/* --- Sportovi: clean bordered rows ---------------------------------------- */
.kl-tipovi .sports-list {
  display: grid;
  gap: var(--kl-sp-8);
  margin: var(--kl-sp-16) 0;
  padding: 0;
  list-style: none;
}

.kl-tipovi .sports-list li {
  padding: var(--kl-sp-12) var(--kl-sp-14);
  background: var(--kl-surface-2);
  border: 1px solid var(--kl-border);
  border-left: 3px solid var(--kl-blue);
  border-radius: var(--kl-r-10);
  font: 500 var(--kl-fs-14) var(--kl-font-ui);
  color: var(--kl-text);
}

/* --- Zašto pratiti: reason cards ------------------------------------------ */
.kl-tipovi .why-follow-tips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--kl-sp-16);
  margin: var(--kl-sp-16) 0;
}

.kl-tipovi .reason {
  padding: var(--kl-sp-16);
  background: var(--kl-surface);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-12);
  font: 400 var(--kl-fs-14) var(--kl-font-ui);
  color: var(--kl-text);
  line-height: 1.6;
}

/* --- Lige: pills ---------------------------------------------------------- */
.kl-tipovi .leagues-section { margin-top: var(--kl-sp-8); }

.kl-tipovi .leagues-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--kl-sp-8);
  margin: var(--kl-sp-16) 0;
}

.kl-tipovi .leagues-grid div {
  padding: var(--kl-sp-8) var(--kl-sp-12);
  background: var(--kl-surface);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-pill);
  font: 500 var(--kl-fs-13) var(--kl-font-ui);
  color: var(--kl-text);
}

/* --- Disclaimer / callout panels ------------------------------------------ */
.kl-tipovi .disclaimer-section {
  margin-top: var(--kl-sp-24);
  padding: var(--kl-sp-20);
  background: var(--kl-surface-2);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-14);
}

.kl-tipovi .disclaimer-section h3 { margin: 0 0 var(--kl-sp-10); }

.kl-tipovi .disclaimer-text {
  max-width: none;
  font-size: var(--kl-fs-13);
  color: var(--kl-text-2);
}

/* --- Takmičenje tipstera: panel ------------------------------------------- */
.kl-tipovi .competition-section {
  margin-top: var(--kl-sp-24);
  background: var(--kl-surface);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-16);
  overflow: hidden;
}

.kl-tipovi .competition-section h3 {
  margin: 0;
  padding: var(--kl-sp-16) var(--kl-sp-20);
  border-bottom: 1px solid var(--kl-divider);
  font: 700 var(--kl-fs-17) var(--kl-font-display);
  color: var(--kl-ink);
}

.kl-tipovi .competition-requirements { padding: var(--kl-sp-20); }

.kl-tipovi .competition-requirements h4 {
  margin: 0 0 var(--kl-sp-12);
  font: 700 var(--kl-fs-15) var(--kl-font-display);
  color: var(--kl-ink);
}

.kl-tipovi .competition-section--paused p {
  margin: 0;
  max-width: none;
  color: var(--kl-text-2);
  line-height: 1.7;
}

/* Requirement / prize / bonus grids (shown only when the contest is re-enabled;
   neutral token cards, rank conveyed by the emoji rather than medal colours). */
.kl-tipovi .requirements-grid,
.kl-tipovi .prizes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--kl-sp-12);
}

.kl-tipovi .bonus-info {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-12);
  margin-bottom: var(--kl-sp-12);
}

.kl-tipovi .requirement-item,
.kl-tipovi .bonus-item {
  display: flex;
  gap: var(--kl-sp-10);
  padding: var(--kl-sp-16);
  background: var(--kl-surface-2);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-10);
}

.kl-tipovi .requirement-item::before {
  content: attr(data-icon);
  font-size: var(--kl-fs-19);
  line-height: 1;
}

.kl-tipovi .bonus-item::before {
  content: "🏆";
  font-size: var(--kl-fs-19);
  line-height: 1;
}

.kl-tipovi .requirement-item strong,
.kl-tipovi .bonus-item strong {
  display: block;
  margin-bottom: var(--kl-sp-4);
  font-weight: 700;
  color: var(--kl-ink);
}

.kl-tipovi .requirement-item span,
.kl-tipovi .bonus-item span {
  font-size: var(--kl-fs-13);
  color: var(--kl-text-2);
}

.kl-tipovi .prize-item {
  padding: var(--kl-sp-16);
  text-align: center;
  background: var(--kl-surface-2);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-12);
}

.kl-tipovi .prize-emoji {
  display: block;
  margin-bottom: var(--kl-sp-6);
  font-size: var(--kl-fs-27);
}

.kl-tipovi .prize-position {
  margin-bottom: var(--kl-sp-6);
  font: 700 var(--kl-fs-12) var(--kl-font-ui);
  letter-spacing: 0.04em;
  color: var(--kl-text-2);
}

.kl-tipovi .prize-amount {
  display: inline-block;
  padding: var(--kl-sp-4) var(--kl-sp-12);
  background: var(--kl-ink);
  color: var(--kl-surface);
  border-radius: var(--kl-r-pill);
  font: 700 var(--kl-fs-15) var(--kl-font-display);
}

.kl-tipovi .bonus-note {
  margin: var(--kl-sp-12) 0 0;
  padding-top: var(--kl-sp-12);
  border-top: 1px solid var(--kl-divider);
  text-align: center;
  font-size: var(--kl-fs-12);
  font-style: italic;
  color: var(--kl-text-2);
}