/* ==========================================================================
   global.css — CSS-PLAN Step 8 Wave 3 (2026-07-21). Always-loaded layer,
   concatenated in the exact former load order:
     style-15.css remainder → components.css → kl-shell.css → aside.css
     → login-style-3.css  (dead rules pruned per wave-3 evidence; parked
     blocks kept: #pick-item/.pick__*, .premium/.m-thed/.tbold, substring
     suspects). style-15's :root vars now live in design-tokens.css as
     legacy aliases. Loads right after design-tokens, BEFORE page sheets —
     page sheets now win equal-specificity ties by design.
   ========================================================================== */

/* ── layer 1: style-15.css remainder ── */


html {font-size:16px;}

body {
    font-family: "Red Hat Display", sans-serif;
    margin: 0;
    font-size: 16px;
}

ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav.main-menu ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

p,
.o-komentar,
.komentar {
    word-break: break-word;
    font-family: "Inter", sans-serif;
    
}

a {
    text-decoration: none;
    color: var(--blue);
}

a:hover {
    text-decoration: underline;
}

p,
.o-komentar {
    color: var(--bodyText);
    line-height: 1.5;
}


h1 {
    color: var(--titleText);
}

h2 {
    color: var(--titleText);
}

h3 {
    font-size: 1.5rem;
    line-height: 1.4;
    margin:2rem 0 0.625rem;
    color: var(--titleText);
    font-weight: 700;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  }


.emph {
    color: #202020;
}


ul a {
    color: rgba(255,255,255, 0.90);
    font-size: 14px;
    text-transform: uppercase;
}


.site-header {
    width: 100%;
    background: linear-gradient(88deg, #046DF6 0%, #368BF9 100%);
    position: sticky;
    z-index: 1000;
    display: block;
    padding: 16px 0;
    color: rgba(255,255,255, 0.90);
    top: 0;
}

.header {
    display: flex;
    max-width: 1280px;
margin: 0 auto;
align-items: center;
justify-content: space-between;
}

.container-main {
    max-width: 1280px;
    margin: 1rem auto;
    display: flex;
    gap: 2rem;
    padding: 0;
    overflow: hidden;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    background-color: var(--white);
}

.logo img {
    width: 180px;
  opacity: 0.9;
}

/* .home-logo-title lived here with a 480px step. home-new.css declares the same
   base verbatim and loads later, so this copy never won, and its 11px/180px step
   was shadowed by that base at every width it matched — the tagline has only ever
   rendered 9.5px (≤430) or 12px. Deleted CSS-REST Step 2 (owner decision D3:
   accept the 2-step ramp). The live rules are home-new.css:35 and :49. */

.i-menu {
    display: none !important;
}


.mobile-nav-bottom {
    display: none;
}


.name {
    color: var(--bodyText);
    font-weight: 400;
    font-size: 1rem;
    margin-bottom: .25rem;
}


.zki {
    width: 130px;
}


.p-cointainer :-moz-placeholder {
    color: #c9c9c9;
    font-weight: 700
}

.p-cointainer ::-moz-placeholder {
    color: #c9c9c9;
    font-weight: 700
}

.p-cointainer :-ms-input-placeholder {
    color: #c9c9c9;
    font-weight: 700
}

.exit {
    color: #ccc;
    float: right;
    top: 3px;
    position: relative;
    cursor: pointer;
    right: 25px
}

.log {
    background-position: 0 1px !important;
     color: #fff !important;
    border: 2px solid #fff;
    margin-right: 1rem;
}


.reg,
.reg-submit {
    background-position: 0 -32px !important;
    background-color: var(--success) !important;
    border: 4px solid var(--success);
}


.sms-najava {
    background: var(--white);
    border-radius: .5rem;
    width: 100%;
    border: 1px solid var(--boxGrey);
}


.mobile-scroll {
    gap:0.5rem;
  display: flex;
  flex-direction: column;
}


  


.sms-najava-naslov {
    padding:
    1rem;
      font-size: 1.125rem;
     color: var(--titleText);
      font-weight: 500;
      border-radius:
    .5rem .5rem 0 0;
      background: var(--lightGrey);
}

#mob-margin h1,
.poslednje-aktivnosti h1 {
    line-height: 2px;
    padding: 10px 0 5px 15px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.8);
}

aside h2,
#mob-margin h2 {
 
    font-size: 1rem;
}


#mob-margin span {
    font-style: italic;
    color: #7B7B7B
}

/* Legacy-shell sidebar paragraphs. Scoped in CSS-FINAL Step 4; the bare rule
   reached 13 paragraphs across five surfaces, most of them redesigned pages that
   never asked for it, and kl-kladionica-detalji.css carried a padding:0
   neutralizer because of it.
   :where() is the whole trick, as in Step 8 of the previous run: it scopes the
   match while contributing ZERO specificity, so this stays 0,0,2 exactly like the
   bare `aside p` it replaces. A plain descendant scope would be 0,2,2 and would
   start beating page sheets' own rules.
   The one paragraph that lost a source here is the today-matches widget's empty
   state on the .kl-main rails; it now carries .kl-rail-empty (kl-news.css) with
   the same values. Audit: CSS-AUDIT-FINAL.md §6.2. */
:where(.container-main:not(.kl-main)) aside p {
    padding: 1rem;
    font-weight: 500;
    margin: 0;
}

.najbolji {
    position: relative;
    top: 0px
}
.poslednje span {
    font-size: 0.875rem;
    font-style: normal;
    color: var(--titleText);
}

.top5 {
    display: flex;
    padding: .75rem 1rem;
    column-gap: 1rem;
    align-items: center;
}

.top5 img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}


.top-user__info h2 {
    padding: 0;
    margin:0;
    margin-bottom: .25rem;
    font-weight: 500;
    font-size: 1rem;
}
.top-user__info span {
color: #545454;
}

.top-user__avatar img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
}

.prize {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    height: 2rem;
}

.prize-container {
    display: flex;
    flex-direction: row;
    padding: 2rem 1rem 0;
    justify-content: space-around;
}

.prize-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
}

.prize-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
}

.prize__avatar img {
    width: 26px;
    height: 26px;
}

.prize__info p {
    color: #545454;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    padding: 0;
    }

.pretraga_korisnika {
    position: relative;
    width: 96.4%;
}

.pretraga_korisnika input {
    width: calc(100% - 52px);
    padding: 10px 10px 10px 40px;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: rgba(12, 16, 25, 0.65);
}

.pretraga_korisnika i {
    position: absolute;
    top: 10px;
    left: 0;
    font-size: 18px;
}


#kladionice {
    width: 80px;
    height: 16px;
    border-radius: 2px;
}

#kladionice img {
    display: block;
}

/* Per-bookmaker logo image (replaces the ikonice.png sprite). */
.bookie-logo {
    display: block;
    height: 16px;
    width: auto;
    max-width: 90px;
    object-fit: contain;
    border-radius: 2px;
}


.onexbet {
    background: url(../img/ikonice.png) -34px -32px
}


.bcgame {
    background: url(../img/ikonice.png) -34px -64px
}

.fairpari {
    background: url(../img/ikonice.png) -34px -80px
}

.spinbetter {
    background: url(../img/ikonice.png) -34px -96px
}


.bz {
    background: url(../img/ikonice.png) -34px 0
}


.Nogomet {
    background: url(../img/sports/nogomet.svg);
}

.Football {
    background: url(../img/sports/nogomet.svg);
}


.Košarka {
    background: url(../img/sports/kosarka.svg);
}

.Tenis {
    background: url(../img/sports/tenis.svg);
}


.Hokej {
    background: url(../img/sports/hokej.svg);
}


.Rukomet {
    background: url(../img/sports/rukomet.svg);
}


.Vaterpolo {
    background: url(../img/sports/waterpolo.png);
}

.Futsal {
    background: url(../img/sports/futsal.png);
}


.Golf {
    background: url(../img/sports/golf.svg);
}

.Biciklizam {
    background: url(../img/sports/biciklizam.png);
}


.Other {
    background: url(../img/sports/ostalo.svg);
}

.Vrijeme {
    background: url(../static/img/icons/clock.svg) no-repeat;
}

.Pick {
    background: url(../static/img/icons/pick.svg) no-repeat;
}

.Ulog {
    background: url(../static/img/icons/ulog.svg) no-repeat;
}

.posaljiPoruku {
    background: url(../static/img/icons/posalji_poruku.svg) no-repeat;
}

.won {
    background: #fafafa;
    border-radius: 50px;
    padding: 0 1px
}

.pr_kraj a {
    color: #D3DCEF
}


.absolute {
    position:absolute;
}

.relative {
    position:relative;
}


.fa-check-circle {
    color: #57b46e !important;
}

.fa-times-circle {
    color: #b63a3a !important;
}


.fa-comments {
    color: #fff;
}


.show_ft {
    display: none
}

.dnevni {
    width: 100%
}

.dnevni tr {
    font-size: 14px;
    color: green
}

/*.dnevni i div {
    color: #316cb4;
    position: absolute;
    font-size: .75rem;
    width: 20px;
    text-align: center;
    font-weight: 600;
    top: 4px;
}*/

.dnevni i div {
    display: none;
}

.tablehed {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    line-height: 2rem;
    background: #0074e0;
    font-size: .875rem;
    color: #fafafa !important;
    border-radius: 6px 6px 3px 3px;
    gap: 1rem;
}
.dnevni td {
    border-bottom: 1px solid #C5D8EB;
    padding: 2px 0
}

.dnevni td:nth-child(1) {
    width: 2.9%
}

.dnevni td:nth-child(2) {
    width: 11.5%
}

.dnevni td:nth-child(3) {
    width: auto
}

.dnevni td:nth-child(4) {
    width: 11.4%
}

.dnevni td:nth-child(5) {
    width: 7.33%
}

.dnevni td:nth-child(6) {
    width: 3.7%
}

.dnevni td:nth-child(7) {
    width: 14.7%
}

.dnevni td:nth-child(8) {
    width: 10.7%
}


.tabela-tipstera thead td:nth-child(7):hover .einfo {
    display: block
}

.einfo {
    position: absolute;
    background: #5bbd72;
    width: 200px;
    padding: 10px;
    right: 0;
    top: 40px;
    border: 1px solid #334148;
    border-radius: 5px;
    display: none;
    font-size: 14px
}


.submit {
    background: #3b83c0;
    color: #fff;
    padding: 18px;
    border-radius: 4px;
    font-family: 'Roboto Condensed', sans-serif;
    border: 1px solid #2A679A;
    margin-left: 2%;
    cursor: pointer
}

.komentar {
    color: rgba(0, 0, 0, 0.70);
    line-height: 16px;
    font-size: 13px;
    border-top: 1px dotted #DCDCDC;
    padding: 12px 0;
    position: relative;
    top: 10px
}


.komentar time {
    top: 0;
}

.komentari_komentar {
    display: flex;
    margin-left: .5rem;
    column-gap: .5rem;
}

.komentari_komentar img {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.komentari_komentarContent {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    background-color: var(--superLightGrey);
  width: 100%;
  border-radius: 0 8px 8px 8px;
  padding: .5rem;
}

.komentari_komentarUserDetails {
    display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.komentari_komentarUserName {
    color: var(--blue);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.komentari_komentarUserTime {
    color: var(--darkGrey);
  font-size: .75rem;
  line-height: 1.3;
}

.komentari_komentarText {
font-size: .875rem;
line-height: 1.5;
color: var(--bodyText);
}


ul.tab {
    overflow: hidden;
    width: 100%;
    text-align: center
}

ul.tab li {
    width: 33.22%;
    border-bottom: 1px solid #DCDCDC;
    color: rgba(12, 16, 25, 0.47);
    padding: 15px 0;
    cursor: pointer
}


.border {
    border-right: 1px solid #DCDCDC;
    border-left: 1px solid #DCDCDC
}

.tipster {
    padding: 0.5rem 0 1rem;
    border-bottom: 1px solid #dcdcdc;
    display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}


#drzava {
    width: 16px;
    height: 11px;
    float: left;
    margin: 5px 10px 0 5px
}

.Srbija {
    background: url(../img/ikonice.png) -34px -145px
}

.Hrvatska {
    background: url(../img/ikonice.png) -50px -145px
}

.BiH {
    background: url(../img/ikonice.png) -66px -145px
}

.Makedonija {
    background: url(../img/ikonice.png) -82px -145px
}


.Slovenija {
    background: url(../img/ikonice.png) -50px -156px
}

.World {
    background: url(../img/ikonice.png) -34px -156px
}


.fa-user-plus,
.fa-user {
    margin: 0 6px 0 17px;
    color: #789
}

.statistika {
    position: relative
}

.statistika table {
    padding: 15px 0
}

.statistika img {
    width: 120px;
    border-radius: 50%;
    position: absolute;
    right: 20px;
    top: 9px;
}


.for {
    position: relative;
    top: 20px
}


.s-1 {
    background: url(/img/statsicon.png) no-repeat -7px -7px
}

.s-2 {
    background: url(../img/statsicon.png) no-repeat -7px -29px
}

.s-3 {
    background: url(../img/statsicon.png) no-repeat -7px -51px
}

.s-4 {
    background: url(../img/statsicon.png) no-repeat -7px -74px
}

.s-5 {
    background: url(../img/statsicon.png) no-repeat -4px -95px
}


.analize h1 {
    color: var(--titleText);
    font-size: 1.5rem;
    font-weight: 500;
    margin-top: 0;
}

article {
    position: relative;
}

.bet-card-link {
    color: var(--bodyText);
}


.share i {
    font-size: 1.25rem;
}


.objava {
  border-radius:0.75rem;
  width: 100%;
  border: 1px solid var(--boxGrey);
  padding: 0.75rem;
}


.objava textarea {
    background-size: 35px !important;
    padding: 9px 0 0 45px;
    width: 90%;
    height: 25px
}


.objava form {
    display: flex;
    margin-bottom: 15px
}


.time {
    color: #777;
    font-size: 12px !important;
    font-family: arial;
    font-weight: 100 !important
}

.plej {
    position: relative;
    cursor: pointer
}


.o-kom {
    background: #F9F9F9;
    margin: 10px -15px 0;
    border-top: 1px solid #dcdcdc
}

.o-komentar {
    padding: 15px;
    border-bottom: 1px solid #dcdcdc;
    font-size: 12px;
    font-family: arial;
    position: relative
}

.o-komentar a {
    font-size: 12px;
    line-height: 0
}

.o-kom input {
    margin: 0;
    padding: 0;
    margin-bottom: -15px;
    border-radius: 0 0 2px 0;
    width: 10%;
    height: 50px
}

.open-chat {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: linear-gradient(88deg, #046DF6 0%, #368BF9 100%);
    padding: 1rem;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(54,139,249, 0.6);
    transition: opacity 0.3s ease; 
}

footer {
    background: #1a1a1a;
    padding: 1rem;
}

.p-footer {
    color: var(--darkGrey);
    font-size: .875rem;
}

footer a {
    text-decoration: none;
    color: var(--mediumGrey);
    margin: 0 5px;
}

.footer__legal {
display: flex;
flex-direction: column;
margin: .5rem 0 0;
}

.footer__amblems {
    display:flex;
    align-items: center;
}

.legal_banners {
    display: flex;
flex-direction: row;
align-items: center;
gap: .5rem;
 }

.legal_banners a  {
    text-decoration:none;
}

button {
  border: none;
}


.min_age {
    padding: 1rem; 
    border: 4px solid var(--error); 
    border-radius:50%; 
    font-size: 1rem; 
    color:var(--white); 
    width:1.5rem; 
    height: 1.5rem; 
    display: flex; 
    align-items:center; 
    justify-content:center;
}

.footer__partneri {
    display: flex;
flex-wrap: wrap;
padding: 1rem 0;
border-top:  1px solid rgba(255, 255, 255, 0.1);
font-size: 0.75rem;
}

.footer__menu {
padding: 1rem 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
font-size: .875rem;
line-height: 1.5;
gap: .5rem;
text-align: center;
justify-content: flex-start;
}

.footer__copy {
display: flex;
justify-content: flex-start;
align-items: center;
margin: 1rem 0;
}

.pametno {
    width: 74%;
    margin: 0 auto;
    text-align: center;
    font-size: 11px;
    color: #969696;
    margin-top: 20px
}


/* NOVO NOVO NOVO NOVO NOVO NOVO NOVO NOVO NOVO NOVO NOVO NOVO NOVO NOVO NOVO NOVO NOVO NOVO NOVO NOVO NOVO NOVO NOVO NOVO */


.leva {
    flex:1;
    min-height: 100vh;
}

/* Legacy-shell sidebar. Scoped to the old shell (CSS-REST Step 8): on
   .container-main.kl-main pages every rail styles itself, and this bare rule was
   only leaking align-items/row-gap/flex-basis/1px-padding into them, which is why
   several kl-* sheets carry neutralizers. /analize and /utakmice have a bare
   <aside> with no rules of their own and are held up entirely by this.
   NOTE: the mobile `aside { display: none }` at global.css ~4875 is deliberately
   NOT scoped -- Bet Centar's .kl-liga-rail and the liga pages rely on it to hide
   the rail below 1024px and declare no display rule of their own.
   :where() is what makes this safe: it scopes the match while contributing ZERO
   specificity, so this stays 0,0,1 exactly like the bare rule it replaces. A
   plain `.container-main:not(.kl-main) aside` would be 0,2,1 and would start
   beating every page sheet's own single-class rule -- measured: it hid the World
   Cup hub's right column, which .wc2026-hub-grid__right (0,1,0) had been
   restoring over the bare mobile hide. */
:where(.container-main:not(.kl-main)) aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 1.5rem;
    flex:0 0 320px;
    padding: 1px;
}


#tipoicon {
    width: 14px;
    height: 14px;
    color: var(--bodyText);
    /* Sport SVGs are standardized 24×24 — scale the legacy background-class
       surfaces (fetch/html tables) instead of cropping. */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Per-sport icon <img> (kl_sport_icon in includes/bet-card.php) — replaces the
   background-class div on redesigned surfaces. */
.kl-sport-ic {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}


    

    
    
    


.kladionica {
 width: 80px;
}


.load_stats {
    position: relative;
    display: flex;
    flex-direction: row;
}


.titlehead h4,
.tipovi-main-heading {
    margin: 0 0 .25rem .25rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.titlehead p,
.page-subtitle {
    margin: 0 0 1.5rem .25rem;
    font-size: 1rem;
    font-weight: 500;
}

.bookmkr  {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1rem;
    padding: .75rem .5rem;
    margin: .5rem;
    border-radius: .25rem;
}

.bookmkr .bookmkr_name {
    margin: 0;
    padding: 0;
    font-weight: 500;
    font-size: 1rem;
    color: #1a1a1a;
}


.bookmkr_info  {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    flex: 1;
    gap: 1rem;
}

.bookmkr img {
	width:2.5rem;
    height: 2.5rem;
    border-radius: .25rem;
}

.bookmakers a {
    text-decoration: none;
}

.online_users {
    color: var(--darkGrey);
    font-size: .75rem;
    text-align: center;
}


.a_tip {
    flex: 1 1 0;
}


    

    

    


.popup{
    background-color: #ffffff;
    width: 80vw;
    max-width: 450px;
    padding: 16px;
    border-radius: 8px;
    display: none;
    text-align: center;
    z-index: 99;
    box-shadow: 0 4px 16px rgba(150,150,150, 0.5);
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -mstransform: translate(-50%, -50%);
}
.popup p{
    font-size: 14px;
    text-align: center;
    margin: 20px 0;
    line-height: 25px;
}

.tekst {
    color: var(--bodyText);
    line-height: 1.5;
}


/* BUTTON */

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 4rem;
    box-sizing: border-box;
    border-radius: 4px;
    cursor: pointer;
    padding: 8px 24px;
    transition: all 0.2s ease;
  }
  
  
  
  

  

  
  
  

  

  

  

  /* .banner-mid moved to dedicated section at end of file */

  
  
  
  
  

  


  .btnIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    background-color: var(--primaryAlt);
    border: 0;
    padding: 0 1rem;
  }

  
  


    


.btnBookie.spinbetter {
    background-color: #ac0ad5;
    background-image: none;
}


.btnBookie.bcgame {
    background-image: linear-gradient(to right, #33C778, #274846, #50EC80, #33C778);
}

.btnBookie.bcgame:hover {
    box-shadow: 0 4px 15px 0 rgba(40, 193, 70, 0.75);
}


.btnBookie.vavada {
    background-image: linear-gradient(to right, #fe284a, #272840, #fe284a, #272840);
}

.btnBookie.vavada:hover {
    box-shadow: 0 4px 15px 0 rgba(254, 40, 74, 0.75);
}


  /* BUTTON END */


  


.analize {
    width:100%;
    margin-bottom: 1rem;
}


/*Dodaj Tip*/


#tipovi {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .75rem;
}


.dodaj-tip select {
    background: var(--white);
    color: var(--bodyText);
    padding: .5rem 1rem;
    border: 1px solid var(--mediumGrey);
    border-radius: 4px;
    cursor: pointer;
    height: 2.5rem;
    width: 100%;
    font-size: 1rem;
}


/*
.dodaj-tip span {
    background: var(--mediumBlue);
    padding: .5rem 1rem;
    color: var(--bodyText);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    flex: 1;
    min-width: 20%;
}
*/


.dodaj-tip option {
    background: #5fba7d;
}


@media only screen and (max-width: 1023px) {
    

    article {
        border-top: none;
    }
}

/* Media query for desktop devices */
@media only screen and (min-width: 1024px) {
    
}


.main_content {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}


@media only screen and (max-width: 1023px) {
    .main_content {
        flex-direction: column;
    padding: 0;
    gap: 1rem;
    margin-bottom: 1rem;
    }
    
}

.vijest img {
    width: 100%;
  border-radius: .5rem .5rem 0 0;
}


.vijest {
    background: var(--white);
    box-shadow: var(--shadowButton);
    border-radius: .5rem;
    display: flex;
    flex-direction: column;
    border: 2px solid var(--lightGrey);
  }
  


.navbar {
    float: right;
}

.navbar img {
    width: 1.5rem;
    height: 1.5rem;
  border-radius: 50%;
  border: 2px solid var(--mediumGrey);
}

.navbar i {
  font-size: 1.5rem;
}


/******** FEATHER ICONS *********/

.feather {
 color: var(--bodyText);
}


.featherLight {
    color: var(--white);
   }

   

   .featherMedium {
    color: var(--mediumGrey);
   }

   

.featherDark {
    color: var(--titleText);
   }

.featherColor {
    color: var(--primaryAlt);
}

.success {
    color: var(--success);
}

.error {
    color: var(--error);
}


   


.f-16 {
    width: 1rem;
    height: 1rem;
   }

   .f-20 {
    width: 1.25rem;
    height: 1.25rem;
   }

   .f-24 {
    width: 1.5rem;
    height: 1.5rem;
   }

   

   


@media (hover: none) {
    /* For touch devices, handle tooltip visibility */
    
}


select:disabled {
    color: #999 !important; /* Change this to any color you want */
    background-color: #f5f5f5; /* Optional: Change background */
    cursor: not-allowed; /* Optional: Change cursor */
}

input:disabled {
    color: #999 !important; /* Change this to any color you want */
    background-color: #f5f5f5; /* Optional: Light gray background */
    cursor: not-allowed; /* Optional: Change cursor */
    opacity: 1; /* Ensures full visibility */
}

/* Hide dropdown arrow in WebKit browsers (Chrome, Safari, iOS) */
input::-webkit-calendar-picker-indicator {
    display: none !important;
    appearance: none;
}

/* Remove default styles that make it look like a dropdown */
input[list] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: transparent;
}

input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
}

/* iOS Safari zooms the whole page when a focused text control is under 16px.
   Hold every input/textarea/select at 16px on phones so no field triggers the
   zoom. Phones only — desktop keeps each control's own (often tighter) size.
   Page sheets that set a sub-16 size via a class outrank this and carry their
   own mobile override (composers). */
@media (max-width: 767px) {
    input, textarea, select { font-size: var(--kl-fs-16); }
}


.like-animation {
    transform: scale(1.3) rotate(-15deg);
}


/******** H2H SUSRET STATS *********/

.h2h__susret {
   display: flex; 
flex-direction: column;
align-items: center;
margin-bottom: 2rem;
justify-content: center;
}


.h2h__timovi {
    display: flex; 
 flex-direction: row;
 align-items: center;
 gap: 1rem;
 width: 100%;
 }


 


 .fixtures_teamImg {
    height: 24px;
 }

 

 

.h2h__timoviInline .h2h__tim.right {
    grid-column: 1;
    justify-content: flex-end;
    text-align: right;
}


.h2h__timoviInline .h2h__tim.left {
    grid-column: 3;
    justify-content: flex-start;
    text-align: left;
}


.empty-state {
    display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background-color: var(--white);
  border-radius: 0.5rem;
}

.empty-state p {
font-size: 1rem;
  color: var(--darkGrey);
  text-align: center;
}

.empty-state svg {
    opacity: 0.7;
}


.h2h__rezultat--live {
    background-color: #e74c3c;
    color: var(--white);
}

.h2h__rezultat--completed {
    background-color: var(--lightGrey);
    color: var(--bodyText);
}

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


.h2h__liga {
    font-size: 0.875rem;
    color: var(--bodyText);
}


/******** ANALIZE DETAILS PAGE *********/


.tipster {
    padding: 1rem .5rem;
}


  


  /*

  .btnTertiary:hover {
    background-color: var(--primaryAlt);
    border: 1px solid var(--primaryAlt);
    color: var(--white);
box-shadow: var(--shadow-blue);
  }
*/

/******** TIP DETAILS PAGE *********/

.tip-container {
padding: 1rem;
border-radius: .75rem;
border: 1px solid var(--lightBlue);
margin-bottom: 1rem;
background-color: var(--white);
}


  


 

 

.stats__team {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
}

.stats__teamInfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    font-size: 1.25rem;
    gap: 0.5rem;
    font-weight: 600;
    flex: 1;
    color: var(--titleText);
        font-family: "Red Hat Display", serif;
  font-optical-sizing: auto;
}

.stats__teamImg {
   height: 3rem;
}


.sastav__igrac {
    display: flex;
      flex-direction: row;
      align-items: center;
      gap: 1rem;
      border-bottom: 1px solid var(--lightGrey);
      padding-bottom: 0.5rem;
      margin-bottom: 0.5rem;
    }

    

    
    .sastav__igracInfo {
    display: flex;
      flex-direction: column;
      flex: 1;
      gap: 2px;
    }

    .sastav__formacija {
        color: var(--bodyText);
        font-size: 1rem;
        text-align: center;
        font-weight: 500;
        margin-bottom: 1.5rem;
    }

    

    .team-column{
        flex:1;
    }

    .sastav__broj {
        min-width: 20px;
        color: var(--darkGrey);
        font-size: .875rem;
        font-family: "Red Hat Display", serif;
  font-optical-sizing: auto;
  text-align: center;
    }

    .sastav__igracPozicija {
        font-size: .75rem;
color: var(--bodyText);
font-family: 'Roboto', sans-serif;
    }

    .sastav__igracImg {
        height: 32px;
        border-radius: 50%;
    
    }

    .sastav {
        gap: 0.5rem;
    }

    

    


    /* Ensure full width for select dropdowns */
    select {
        width: 100% !important;
        max-width: none !important;
    -webkit-appearance: none;
        display: block;
        box-sizing: border-box;
        appearance: auto; /* Enables the default browser styling */
        -webkit-appearance: auto;
        -moz-appearance: auto;
        padding: 10px;
        font-size: 16px;
        background-color: white;
        border: 1px solid #ccc;
        border-radius: 4px;
        cursor: pointer;
    }

    
    

/* Ensure optgroup styling on iOS */
optgroup {
    font-size: 14px;
    font-weight: bold;
    color: var(--bodyText); /* Match the previous date color */
}

/* Ensure the dropdown expands fully when opened */
select:focus {
    width: 100%;
}

/* Fix for Safari */
@supports (-webkit-touch-callout: none) {
    select {
        width: 100%;
        padding-right: 40px;
    }
}

/* tooltip za opkladu kod dodvanaja tipa */


@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

html {
    scroll-behavior: smooth;
}


@keyframes hero-gradient-animation {
    0% {
        --s-start-0: 3%;
        --s-end-0: 79%;
        --x-0: 0%;
        --y-0: 90%;
        --c-0: hsla(210.09900990099013, 84%, 76%, 1);
        --s-start-1: 3%;
        --s-end-1: 79%;
        --c-1: hsla(212.94736842105266, 86%, 74%, 1);
        --y-1: 35%;
        --x-1: 98%;
    }

    100% {
        --s-start-0: 4%;
        --s-end-0: 67%;
        --x-0: 24%;
        --y-0: 16%;
        --c-0: hsla(215.9473684210525, 0%, 100%, 1);
        --s-start-1: 4%;
        --s-end-1: 67%;
        --c-1: hsla(210.09900990099013, 84%, 76%, 1);
        --y-1: 100%;
        --x-1: 62%;
    }
}

@property --s-start-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 3%
}

@property --s-end-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 79%
}

@property --x-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%
}

@property --y-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 90%
}

@property --c-0 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(210.09900990099013, 84%, 76%, 1)
}

@property --s-start-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 3%
}

@property --s-end-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 79%
}

@property --c-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(215.94736842105266, 86%, 74%, 1)
}

@property --y-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 35%
}

@property --x-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 98%
}


 


 


.matchScore.isLive {
    animation: blink 1s infinite alternate;
    font-weight: 500;
    font-size: 0.875rem;

}

@keyframes blink {
    from { opacity: 1; }
    to { opacity: 0.5; }
}


/*Tooltip for dnevni analize score*/


    

    

    

    .open-chat {
        transition: opacity 0.3s ease-in-out;
    }

    
    .green { color: green; }

    

    

.ostavi_komentar {
    display: flex;
}

.napisi_komentar {
    display: flex;
    flex-direction: row;
    flex:1;
    gap: 0.5rem;
  }

  .napisi_komentar img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
  }

  .analiza__komentarInput {
  background: #F2F5F9;
  border: transparent;
  border-radius: 0.25rem;
  padding: 0.5rem;
  min-height: 2rem;
  color: #57728D;

}


.komentari_prijava {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.komentari_prijava p {
    font-size: .875rem;
    color: var(--darkGrey);
}

/* NIZOVI */


/* BASIC PAGE LAYOUT */
.sidebar {
  width: 250px;
  background: #fff;
  border-right: 1px solid #ccc;
  padding: 20px;
  box-sizing: border-box;
  min-height: 100vh;
  overflow-y: auto;
}


/* DATE NAVIGATION */
.date-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--mediumGrey);
  border-radius: 0.25rem;
  gap: 0.75rem;
  background-color: var(--lightGrey);
}


/* SIDEBAR ACCORDION */


/* FILTER CHIPS */

.chip {
  color: var(--bodyText);
  cursor: pointer;
  padding:0 0.75rem 0 0.5rem;
  font-size: 0.875rem;
  transition:all 0.3s ease;
  text-align: center;
  background: var(--lightGrey);
  border-radius:2rem;
  white-space:nowrap;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 32px;
}

.chip.active {
    background: var(--lightBlue);
    color: var(--blue);

}

/* RESET BUTTON */


/* TIPOVI MATCH CARDS */


.match-header {
  display: flex;
  align-items: center;
  background: var(--lightBlue);
  padding: 0.5rem;
  color: var(--titleText);
  gap:0.5rem;
  border-radius: 0.25rem;
}

.teams {
    display: flex;
  font-weight: 700;
  font-size: 1rem;
  font-family: "Red Hat Display", serif;
  text-transform: uppercase;
  flex: 1;
  gap: 0.25rem;
  overflow: hidden;
}

.match-time {
    font-size: 0.75rem;
    color: var(--bodyText);
    flex-shrink: 0;
  width: fit-content;
}

.league-name {
    font-size: 0.75rem;
    color: #5f5f5f;
  font-weight: 500;
    text-overflow: ellipsis;
    overflow: hidden;
}


.country-league {
  font-size: 0.85rem;
  text-transform: uppercase;
  color: hsl(213, 94%, 97%);
  margin-left: 20px;
  margin-top: 3px;
}


/* STAT CARD */


.recommendation {
  font-weight: 400;
  color: var(--titleText);
}


/*
.odd-link {
  display: inline-block;
  background-color: #FFF;
  color: #5f5f5f;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: 400;
  transition: background-color 0.2s ease, color 0.2s ease;
}*/


/* NO MATCHES STATE */


.country-flag {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
}


.country {
    font-size: 1rem;
    font-family: "Red Hat Display";
    font-weight: 500;
    white-space: nowrap;
}


.body-text {
    color: var(--bodyText);
}


/* Customize scrollbar inside dropdown */


.odd-trend.up {
    color: var(--primaryAlt);
}
.odd-trend.down {
    color: var(--error);
}


/**********   KVOTE PAGE ********** KVOTE PAGE ********** KVOTE PAGE **********/


  

  

  .goals-for, .goals-against {
      flex: 1;
  }

 

  


.goal-comparison-container .progress {
margin-bottom: 16px;
}

.goal-comparison-container .progress-bar {
/* The colors are set inline from your function, but you can override them here if needed */
transition: width 0.5s ease;
}


/* tabs */


  
.uo-tab.active {
    background-color: var(--lightBlue);
    color: var(--blue);
  }

/* Tab content */


.uo-tab-content.active {
  display: block;
}

/* Content styling */


.progress-bar {
  height: 100%;
  transition: width 0.6s ease;
}


/* Golovi detaljno Golovi detaljno Golovi detaljno Golovi detaljno */


/* Section styling */


/* Tabs styling */


  
.goals-tab.active {
    background-color: var(--lightBlue);
    color: var(--blue);
  }

/* Tab content */


.goals-tab-content.active {
  display: block;
}

/* Goals row styling */


/* Animation */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}


/* last 5 comparison */


/* Goals section styling */

.goals-row {
  display: grid;
  grid-template-columns: minmax(4rem, 1fr) minmax(8rem, auto) minmax(4rem, 1fr);
  column-gap: 0.5rem;
  align-items: center;
  margin-bottom: 25px;
}


.goals-row > .comparison-values {
    grid-column: 1 / -1;
    grid-row: 1;
}


    


        


        .correct {
            color: #2ecc71;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        


/* Support Bootstrap classes if not available */


.center {
    align-items: center;
}


  .match-league {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    color: var(--darkGrey);
    gap: 0.5rem;
    width:80%;
  }


    

      

      
/*
      .stats_wld::after {
        color: #000;
        content: '›';
        font-size: 14px;
        font-style: normal;
        line-height: 1;
        position: absolute;
     right:0;
      }*/

      
/*
      .form-block::after {
        background-color: #000;
        content: '-';
        height: 2px;
        margin-top: -1px;
        position: absolute;
        right: -4px;
        top: 50%;
        z-index: 5;
      }*/


/* clean sheets and no score */


  


.main-title {
  color: var(--bodyText);
  margin-top: 0;
  margin-bottom: 20px;
}

/* Section styling */
.stats-section {
  margin-bottom: 30px;
}


/* Tabs styling */

.stats-tab {
    color: var(--bodyText);
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    text-align: center;
    background: var(--lightGrey);
    border-radius: 0.25rem;
}

.stats-tab:hover {
    background-color: var(--lightBlue);
    color: var(--blue);
  }
  
.stats-tab.active {
    background-color: var(--lightBlue);
    color: var(--blue);
  }

/* Tab content */


.stats-tab-content.active {
  display: block;
}

/* Stats row styling */
.stat-row {
  margin-bottom: 15px;
}


/* Animation */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}


/* odnos snaga */
.comparison-container {

}


/* Metric styling */


/* Progress bar */


/* Prediction Summary Prediction Summary Prediction Summary Styling */


#predictions {
  padding: 0.75rem !important;
  border-radius: .5rem;
  background: var(--white);
  box-shadow: var(--shadowButton);
  margin-bottom: 0.5rem;
}


/* Summary Items */


.postponed-indicator {
    font-size: 0.75rem;
    color: #e74c3c;
    text-transform: uppercase;
    display: inline-block;
}

/* Win/Draw styling */


/* Goals styling */


.team {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  margin-right: 10px;
  margin-bottom: 5px;
}


/* Percentage bars */


.winner-badge {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}


/* Bar segments */


/* No predictions message */


/* Responsive adjustments */
@media (max-width: 576px) {
  

  

  
  
  
  
  
}


.row {
    display: flex;
    flex-direction: row;
}

.column {
    display: flex;
    flex-direction: column;
}


.justify-content-between {
    justify-content: space-between;
}


.inline-block {display: inline-block;}
.animate-spin {animation: spin 1s linear infinite;}


    
    

    

            
    

        
        

@keyframes spin {
    
    from {
    
    transform: rotate(0deg);
    
    }
    
    to {
    
    transform: rotate(360deg);
    
    }
    
    }


/* FETURED FIXTURES */

.league-logo {
    height: 14px;
}


.match-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    border-radius: 8px;
    padding: 1rem;
    gap: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    box-shadow: var(--shadowButton);
  flex: 1 1 300px;
  border: 2px solid var(--lightGrey);
}

.h2h__timName {
    font-family: "Red Hat Display";
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
}

.h2h__timNameLive {
    font-family: "Red Hat Display";
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    width:100%;
    text-align: center;
}


.match-card.premium {
    border: 1px solid var(--lightBlue);
    box-shadow: var(--shadow-blue);
}


.badge-time {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

a:hover {
    text-decoration: none;
}


.team {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


.score {
    font-weight: 700;
    font-size: 18px;
}


.padding-025 {
    padding: 0.25rem;
}

/* Live Matches Horizontal Scroll - ensuring the CSS is complete and correct */


.live-matches-scroll {
    display: flex;
    overflow-x: auto;
    flex-wrap: wrap;
    gap: 15px;
    padding: 0 2px 6px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    white-space: nowrap; /* Prevent wrapping */
    scroll-snap-type: x mandatory; /* Improve scroll behavior */
}

.match-card-live {
    flex: 1 1 320px; /* Don't shrink cards, keep them fixed width */
    min-width: 320px; /* Ensure minimum width for consistency */
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    border-radius: 8px;
    padding: 15px;
    gap: 1rem;
    text-decoration: none;
    box-shadow: var(--shadow-blue);
  border: 1px solid var(--lightGrey);
    transition: transform 0.2s, box-shadow 0.2s;
}

.h2h__timLive {
    display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--titleText);
  line-height: 1.25;
  flex: 1;
  overflow: hidden;
  font-family: 'Red Hat Display';
}


.match-card-live.premium {
    bborder: 1px solid var(--lightBlue);
    box-shadow: var(--shadow-blue);
}

.teams-score {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}


    

    .matchTime {
        font-size: 0.75rem;
    }

/* Responsive styles */

    
    
    
    

    .live-matches-scroll {
    flex-wrap: nowrap;
}

::-webkit-scrollbar { display: none; }
    
  


.date-header {
    padding: 10px 15px;
    margin-bottom: 15px;
    background-color: rgba(255, 255, 255, 0.05);
    border-left: 4px solid var(--blueLight);
    font-size: 18px;
    border-radius: 0 4px 4px 0;
}


/* Fix any potential overflow issues */


/* Other leagues section specific styles */


/* Additional styles for fixture-leagueTime container */


/* Make sure live match cards stand out more */


/* Optional hover effect */


.fixtures-section-title {
    color: var(--bodyText);
    margin: 0;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

      
  .view-more {
    color: var(--primaryAlt);
    text-decoration: none;
    font-size: 0.875rem;
    display: flex;
flex-direction: row;
align-items: center;
gap: 0.25rem;
white-space: nowrap;
}


.nav-chip-sport.active .football-icon {
    background-image: url('/static/img/icons/football-active.svg');
}


.tennis-icon {
    background-image: url('/static/img/icons/tennis.svg');
}


/*************** PROGNOZE - FEATURED FIXTURES ****************************/

/* Base Styles for Fixtures Container */
.badges-container {
    display: flex;
    gap: 0.5rem;
  }
  
  .prediction-badge {
      background-color: #CEEDDF;
    color: #398461;
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    font-weight: 500;
  }
  
  .prediction-badge.hidden {
    display: none;
  }
  
  /* Sports Navigation Styles */
  
  
  
  
  
  
  
  
  
  
  
  
  .nav-chip-sport.active {
      background-color: var(--lightBlue);
    color: var(--blue);
    font-weight: 500;
  }
  
  
  
  .nav-chip.active {
      background-color: var(--blue);
      border-color: var(--blue);
      color: var(--white);
  }
  
  .nav-chip-sport.disabled {
      opacity: 0.2;
      cursor: not-allowed;
  }
  
  /* Fixture Navigation Styles */
  
  
  /* Dynamic Content Styles */
  .fixtures-content {
      position: relative;
      min-height: 200px;
  }
  
  /* Loading Indicator */
  .loading-indicator {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.7);
      z-index: 1000;
      justify-content: center;
      align-items: center;
  }
  
  .loading-indicator.visible {
      display: flex;
  }
  
  
  
  @keyframes spin {
      to { transform: rotate(360deg); }
  }
  
  /* Responsive Styles */
  @media (max-width: 420px) {
      
      
      
      
      
      
      ::-webkit-scrollbar { 
          display: none;
          -webkit-appearance: none; 
          scrollbar-width: none;
          -ms-overflow-style: none;
      }
  
      .live-matches-scroll::-webkit-scrollbar {
          display: none;
          -webkit-appearance: none; 
          scrollbar-width: none;
          -ms-overflow-style: none;
      }
  
      .live-matches-scroll::-webkit-scrollbar-thumb {
      background-color: transparent;
      background: transparent;
      -webkit-appearance: none; 
  }
  
  .live-matches-scroll {
    scrollbar-width: none;
  }
  
  
  
  }
  
  
  /* Prediction chips styling */
  .prediction-chips {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
    margin-top: 0.5rem;
  }
  
  .prediction-chip {
    font-size: 0.875rem;
    padding: 4px 12px;
    border-radius: 16px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  min-width: 2rem;
    font-family: "Red Hat Display";
  }
  
  /* Match outcome chips */
  .prediction-chip.outcome-1,
  .prediction-chip.outcome-1x {
    background-color: var(--lightGrey);
    color: var(--bodyText);
  
  }
  
  .prediction-chip.outcome-x {
      background-color: var(--lightGrey);
      color: var(--bodyText);
  
  }
  
  .prediction-chip.outcome-2,
  .prediction-chip.outcome-x2 {
      background-color: var(--lightGrey);
      color: var(--bodyText);
  
  }
  
  /* Over/Under chips */
  .prediction-chip.ou-over {
      background-color: var(--lightGrey);
      color: var(--bodyText);
  flex-shrink: 0;
  }
  
  .prediction-chip.ou-under {
      background-color: var(--lightGrey);
      color: var(--bodyText);
      flex-shrink: 0;
  }
  
  /* Both Teams to Score chips */
  .prediction-chip.bts-gg {
      background-color: var(--lightGrey);
      color: var(--bodyText);
      flex-shrink: 0;
  }
  
  .prediction-chip.bts-ng {
      background-color: var(--lightGrey);
      color: var(--bodyText);
      flex-shrink: 0;
  }
  
  /* Prediction results styling */
  .prediction-chip.prediction-won {
    border: 1px solid hsl(130, 42%, 70%);
    background-color: hsla(130, 52%, 90%, 0.4);
  }
  
  .prediction-chip.prediction-missed {
      border: 1px solid var(--Grey);
    background-color: var(--white);
    color: var(--Grey);
  }

  @media screen and (max-width: 1023px) {
    .open-chat {
        display: none !important;
    }
}

.mobile-nav-bottom,
.mobile-menu-overlay,
.mobile-menu-panel {
    display: none;
}


.single-analysis-content :is(h1, h2, h3, h4, h5, h6) + :is(p, ul, ol) {
  margin-top: 0;
}

/* Vavada banners */


@media (max-width: 767px) {
  
  
  
  
}


/******** POSLEDNJE-AKTIVNOSTI PAGE (extracted from its inline block,
   CSS-PLAN Step 4e; migrates with the Wave-2 page sections) *********/
.topPA {
    line-height: 40px;
    position: relative;
    width: 94%;
}

/******** RESET-PASSWORD PAGE (extracted from its inline block, CSS-PLAN
   Step 4e). Scoped under .reset-form on purpose: the block redefined the
   generic .form-group/.form-control/.auth-action-btn names page-wide,
   which also leaked into the hidden auth modal; the page-visible form
   keeps its exact look and the modal reverts to login-style-3. *********/

.reset-form {
    max-width: 400px;
    margin: 0 auto;
}
.reset-form .form-group {
    margin-bottom: 20px;
}
.reset-form .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}
.reset-form .form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.reset-form .password-requirements {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
}
.reset-form .password-requirements.valid {
    color: #2b8a3e;
}
.reset-form .password-requirements.invalid {
    color: #e03131;
}
.reset-form .auth-action-btn {
    background-color: #046DF6;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    width: 100%;
}
.reset-form .auth-action-btn:hover {
    background-color: #035ad5;
}


/* ── layer 2: components.css ── */
/* Shared component layer
   Keep page CSS focused on page-only layout; reusable UI belongs here. */

:root {
  --component-motion-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --component-motion-short: 150ms;
  --component-motion-medium: 200ms;
  --component-radius-default: 8px;
  --component-radius-card: 12px;
  --component-border: rgba(150, 150, 150, 0.5);
}

/* Settled-tip outcome chip (emitted by render_bet_card on every surface, and by
   the home page's tip cards — COMP Step 1 merged home-new.css's identical
   `.in-tip-chip` into this rule).
   `flex-shrink: 0` came from the home copy: the chip sits in flex rows and must
   never be squashed below its own nowrap label. Verified inert at merge time —
   0 of 31 rendered chips changed width when forced to 0. */
.bet-status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--kl-sp-4);
  font: 700 var(--kl-fs-11) var(--kl-font-ui);
  border-radius: var(--kl-r-pill);
  padding: var(--kl-sp-4) var(--kl-sp-10);
  white-space: nowrap;
  flex-shrink: 0;
}

.bet-status-chip.is-won  { color: var(--kl-green, #177A4E); background: var(--kl-green-tint, #EBF4EF); }
.bet-status-chip.is-lost { color: var(--kl-red, #C0453C); background: var(--kl-red-tint, #F9EEED); }
.bet-status-chip.is-void { color: var(--kl-text-2, #6E757E); background: var(--kl-surface-3, #F4F5F7); }

/* State utilities */
.is-hidden,
[hidden].is-hidden {
  display: none !important;
}

.is-visible {
  display: block !important;
}


.is-disabled,
[aria-disabled="true"] {
  opacity: 0.38;
  pointer-events: none;
}


.is-faded {
  opacity: 0;
}

.is-opaque {
  opacity: 1;
}

body.has-modal-open {
  overflow: hidden;
}

.copy-tooltip,
.copy-tooltip[hidden] {
  display: none !important;
}

.copy-tooltip.show {
  display: block !important;
}

/* Shared article/news headers and chip navigation */
.section-title {
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #666;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 15px;
}

.section-title h1,
.section-title h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--titleText, #333);
  display: inline-block;
  position: relative;
  padding: 0;
  margin: 0;
}

.category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  justify-content: flex-start;
}

.category-nav a {
  color: var(--bodyText);
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  transition: background-color var(--component-motion-medium) var(--component-motion-easing),
    color var(--component-motion-medium) var(--component-motion-easing),
    opacity var(--component-motion-medium) var(--component-motion-easing);
  text-align: center;
  background: var(--lightGrey);
  border-radius: 0.25rem;
  white-space: nowrap;
}

.category-nav a:hover,
.category-nav a.active {
  background-color: var(--lightBlue);
}

.category-nav a.active {
  color: var(--blue);
}

.news-subcategory {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Listing pages use a single H1 (section landings, subcategory archives,
   tag pages) sized to match the old h4 look. */
.news-subcategory h1,
.titlehead h1 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.news-subcategory .category-intro {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.95rem;
  color: var(--bodyText, #555);
  line-height: 1.5;
}

.subcategory-chips {
  display: flex;
  overflow-x: auto;
  gap: 0.5rem;
}

.subcategory-chips .chip:first-child {
  margin-left: 0;
}

/* Social/share controls used by news, analyses, and tip details */
.share-news {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.analiza-social {
  display: flex;
  gap: 15px;
}

.share-btn {
  display: flex;
  align-items: center;
  gap: 6px;
}

.share-btn button {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--bodyText, #333);
  padding: 6px 10px;
  border-radius: 4px;
  transition: background-color var(--component-motion-medium) var(--component-motion-easing),
    opacity var(--component-motion-medium) var(--component-motion-easing);
  font-size: 14px;
}

.share-btn button:hover {
  background-color: rgba(240, 240, 240, 0.1);
}

.like-btn.active {
  color: #e91e63;
}

.like-btn.active .feather[data-feather="heart"] {
  fill: #e91e63;
  color: #e91e63;
}

.like-count-container {
  display: flex;
  align-items: center;
  color: #777;
}

.like-count {
  font-weight: 600;
  margin-left: 5px;
  font-size: 14px;
}

/* Available to screen readers and to the document outline, never painted.
   Absolute positioning also keeps it out of flex/grid flow, so it can label a
   list container without taking a row or a cell. */
.kl-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* Shared article/detail content primitives */
.single-analysis {
  background-color: #fff;
  border-radius: var(--component-radius-default);
  padding: 0;
  margin-bottom: 30px;
}

.analysis-header {
  margin-bottom: 20px;
}

.analysis-meta {
  display: none;
}

.analysis-location,
.analysis-date,
.analysis-author {
  display: flex;
  align-items: center;
}

.analysis-location a {
  color: var(--darkGrey, #6c757d);
  text-decoration: none;
}

.analysis-location a:hover {
  text-decoration: underline;
}

.analysis-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.tag-badge {
  background-color: var(--lightGrey, #f0f0f0);
  color: var(--bodyText, #333);
  font-size: 0.875rem;
  padding: 4px 12px;
  border-radius: 16px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 2rem;
  font-family: "Red Hat Display", sans-serif;
  text-decoration: none;
}

.tag-badge:hover {
  background-color: #e0e0e0;
  color: var(--bodyText, #333);
}

.related-analyses {
  border-top: 1px solid #eee;
  padding-top: 20px;
  margin-top: 20px;
}

.related-analyses h2 {
  margin-bottom: 20px;
  font-size: 22px;
  color: var(--titleText, #333);
  font-weight: 600;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.related-item {
  background-color: #f9f9f9;
  border-radius: var(--component-radius-default);
  overflow: hidden;
  transition: transform 150ms var(--component-motion-easing),
    box-shadow 150ms var(--component-motion-easing);
}

.related-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.related-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.related-img {
  height: 150px;
}

.related-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.news-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.analize-card:hover .news-img,
.novosti-card:hover .news-img {
  transform: scale(1.05);
}

.news-img-placeholder {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 14px;
}

.news-meta {
  font-size: 12px;
  color: #888;
  margin-bottom: 10px;
}

.news-excerpt {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 0 10px;
  flex-wrap: wrap;
  gap: 8px;
}

.page-link,
.page-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 14px;
}

.page-link {
  background-color: #f5f5f5;
  color: #555;
  text-decoration: none;
  transition: background-color 0.2s;
}

.page-link:hover {
  background-color: #e0e0e0;
}

.page-current {
  background-color: var(--c-main, #0e77a9);
  color: #fff;
  font-weight: 500;
}

.page-dots {
  color: #888;
  padding: 0 5px;
}

.no-content,
.error-message {
  text-align: center;
  padding: 40px 20px;
  color: #666;
  background-color: #f9f9f9;
  border-radius: var(--component-radius-default);
  margin: 20px 0;
}

.feather {
  vertical-align: middle;
}

.breadcrumb {
  display: flex;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  background-color: #f8f9fa;
  border-radius: 0.25rem;
  color: #666;
  font-size: 14px;
}

.breadcrumb-item {
  white-space: nowrap;
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: 0.25rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  padding-right: 0.25rem;
  color: var(--darkGrey);
  content: "/";
}

.breadcrumb-item a {
  color: var(--darkGrey);
  text-decoration: none;
}

.breadcrumb-item a:hover,
.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: var(--darkGrey);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline;
}

.breadcrumbs .current {
  color: #333;
}

.item-info img {
  width: 32px !important;
  padding: 0 !important;
  border-radius: 50%;
}

/* Shared horizontal chips */
.chips-container {
  flex-grow: 1;
  margin-right: 20px;
  overflow: hidden;
}

.chips-container h1 {
  margin-bottom: 0;
  color: var(--titleText);
}


/* Shared tip cards used on homepage, tip listings, and related tip modules */
.bet-cards {
  width: 100%;
}

.bet-card {
  border-radius: var(--component-radius-default);
  background-color: var(--white, #fff);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--statGrey, #F1F3F7);
  display: flex;
  width: 100%;
  flex-direction: column;
  overflow: hidden;
  align-items: stretch;
  justify-content: center;
  margin-bottom: 12px;
}

.bet-card:first-child {
  margin-top: 0;
}

.bet-card:last-child {
  margin-bottom: 0;
}

/* Whole-card click target: a stretched overlay link (the card body used to
   wrap the article in an <a>, but the nested odds <a> made that invalid HTML
   and the browser split them, leaving the card unclickable). The article is
   already position:relative, so this covers it; interactive children sit above
   it via z-index. */
.bet-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  font-size: 0;
}

.bet-card .bet-details .bet-odds {
  position: relative;
  z-index: 2;
}

.bet-card-header {
  background-color: var(--boxGrey, #F1F3F7);
  display: flex;
  flex-direction: row;
  padding: 8px 12px;
  align-items: center;
  gap: 40px 100px;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.bet-league {
  align-self: stretch;
  display: flex;
  min-width: 240px;
  margin-top: auto;
  margin-bottom: auto;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--bodyText);
  font-weight: 500;
  line-height: 1.4;
  justify-content: start;
  flex-wrap: wrap;
}

.league-icon {
  object-fit: contain;
  object-position: center;
  height: 16px;
  border-radius: 50%;
  align-self: stretch;
  margin-top: auto;
  margin-bottom: auto;
  flex-shrink: 0;
  overflow: hidden;
}

/* International competitions (country = "World") show the competition's own
   crest here instead of the globe flag — see includes/league-badge.php. A flag
   sits happily inside the circular mask; a tall crest gets its top and bottom
   shaved by it, so the mask comes off. Lives beside the component it modifies
   rather than in a page sheet, because .league-icon renders on pages that load
   different sheets (/tipovi, tip pages, naslovna). */
.league-icon.is-crest { border-radius: 0; background: transparent; }

.league-title,
.match-time {
  align-self: stretch;
  margin-top: auto;
  margin-bottom: auto;
}

.match-time {
  font-weight: 500;
  line-height: 1;
  color: var(--darkGrey);
}

.bet-card-content {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 12px 12px;
}


.teams-tip-home {
  color: var(--titleText);
  font-size: 1rem;
  font-family: Red Hat Display, -apple-system, Roboto, Helvetica, sans-serif;
  font-weight: 600;
  line-height: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  flex: 1;
  flex-shrink: 1;
  flex-basis: 0%;
  margin: 0;
  gap: 0.5rem;
}


.bet-details {
  align-self: stretch;
  display: flex;
  margin-top: auto;
  margin-bottom: auto;
  align-items: start;
  gap: 8px;
  font-size: 14px;
  color: var(--titleText);
  font-weight: 400;
  line-height: 1;
  justify-content: start;
}

.odds-separator {
  color: #3c3c3c;
}


.user-avatar {
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
  width: 20px;
  border-radius: 50%;
  align-self: stretch;
  margin-top: auto;
  margin-bottom: auto;
  flex-shrink: 0;
}

/* Fixture/bookmaker shared primitives */
.bookmaker-logo {
  object-fit: contain;
  object-position: center;
}

.bookmaker-card-media .bookmaker-logo {
  max-width: 80%;
  max-height: 60px;
}

.match-card-nizovi .bookmaker-logo,
.stat-card .bookmaker-logo {
  height: 24px;
  max-width: 40px;
  border-radius: 2px;
}


.trend-up {
  color: var(--success, #54C273);
}

.trend-down {
  color: var(--error, #D23D3D);
}

.is-collapsed {
  display: none !important;
}

.is-expanded {
  display: block !important;
}

@media (max-width: 768px) {
  .section-title {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .category-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 5px;
    width: 100%;
  }

  .analysis-meta {
    display: flex;
  }

  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .news-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }

  .share-btn span {
    display: none;
  }

  .share-btn button {
    padding: 8px;
  }
}

@media (max-width: 576px) {
  .related-grid,
  .news-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991px) {
  .bet-cards,
  .bet-card,
  .bet-card-header,
  .bet-card-content,
  .bet-league {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .bet-card-header {
    width: unset;
    gap: 0;
  }

  .league-name {
    flex: 1 1 0;
  }

  .bet-card-content {
    flex-direction: column;
  }

  .bet-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: unset;
  }
}

/* ===========================================================
   Redesigned tip bet-card (shared partial includes/bet-card.php)
   =========================================================== */
.bet-card-header {
  background-color: transparent;
  gap: 8px;
  padding: 12px 12px 0;
}

.bet-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bodyText);
  font-size: 12px;
  font-weight: 500;
}

/* Mirrors .in-tip-cta (home-new.css) — one CTA-chip look across tip surfaces
   (owner 2026-08-17). */
.bet-card-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--kl-sp-4);
  padding: 5px 11px;
  border: 1px solid var(--kl-border-strong);
  border-radius: var(--kl-r-6);
  font: 600 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-ink);
  white-space: nowrap;
  flex-shrink: 0;
}

.bet-card-teamline {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.bet-card .bet-league {
  min-width: 0;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--bodyText);
}

.bet-card .teams-tip-home {
  font-size: 16px;
  line-height: 150%;
  flex: 1;
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bet-card-excerpt {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: #5f5f5f;
}
/* Mobile: clip the excerpt to ~100 chars (2 lines at the card's mobile width). */
@media (max-width: 1023px) {
  .bet-card-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Mirrors .in-tip-foot (home-new.css) — one tip-footer look across surfaces
   (owner 2026-08-17). Card-scoped so it wins over the base .bet-details. */
.bet-card .bet-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kl-sp-12);
  padding: 11px var(--kl-sp-16);
  margin: 0;
  border-top: 1px solid var(--kl-divider);
  border-radius: var(--kl-r-12);
  background: var(--kl-surface-2);
}

.bet-prognoza {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bet-prognoza-label {
  font-size: 12px;
  line-height: 150%;
  color: #5f5f5f;
}

.bet-prognoza-pick {
  font-size: 14px;
  line-height: 150%;
  font-weight: 700;
  color: var(--titleText);
}

.bet-odds {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--titleText);
  flex-shrink: 0;
  background: #fff;
  border-radius: 6px;
  padding-top: 4px;
  overflow: hidden;
}

.bet-odds-value {
  font-size: 14px;
  line-height: 140%;
  font-weight: 700;
  color: var(--titleText);
}

/* Settlement-status accent. Main analysis: left border only (no gradient). */
.analiza_tip.is-won { border-left: 4px solid var(--success, #54C273); }
.analiza_tip.is-lost { border-left: 4px solid #C25454; }
.analiza_tip.is-void { border-left: 4px solid #E0922A; }

/* Bet-card (tips list) AND member contributions: accent lives on the
   .bet-details strip only — left border + soft status gradient. The card /
   contribution body stays clean (no whole-card border). */
.match-page-member-tip .bet-details {
  border-radius: 6px;
}
/* Settled .bet-card rows (tipovi list): the strip stays neutral — the status
   chip in the card header is the only outcome signal (owner 2026-08-03).
   Member contributions keep the full accented strip. */

.match-page-member-tip.is-won .bet-details {
  border-left: 4px solid var(--success, #54C273);
  background-color: rgba(84, 194, 115, 0.05);
  background-image: linear-gradient(90deg, rgba(84, 194, 115, 0.15) 0%, rgba(84, 194, 115, 0) 25%);
}
.match-page-member-tip.is-lost .bet-details {
  border-left: 4px solid #C25454;
  background-color: rgba(194, 84, 84, 0.05);
  background-image: linear-gradient(90deg, rgba(194, 84, 84, 0.15) 0%, rgba(194, 84, 84, 0) 25%);
}
.match-page-member-tip.is-void .bet-details {
  border-left: 4px solid #E0922A;
  background-color: rgba(224, 146, 42, 0.05);
  background-image: linear-gradient(90deg, rgba(224, 146, 42, 0.15) 0%, rgba(224, 146, 42, 0) 25%);
}

/* Base bet-details strip styling also applies inside member contributions. */
.match-page-member-tip .bet-details {
  background: var(--white, #fff);
  padding: 12px 16px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Own contributions (the tipster viewing their own pick on a match page)
   should match the .bet-card visual exactly — grey strip background. The
   .is-own-contribution class is set in match-page-additions.php for the
   current user's row. */
.match-page-member-tip.is-own-contribution .bet-details {
  background: var(--boxGrey, #f5f6f7);
}


/* ============================================================
   Tipster badges
   Rendered by render_tipster_badge_chip() (includes/badges.php).
   Default chip is the inline "sm" form used next to an avatar /
   tipster name; .tipster-badge--lg is the larger profile-header
   variant. Per-level styling can be layered via the
   .tipster-badge--{slug} hooks if design wants level-specific
   colors later.
   ============================================================ */
.tipster-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 4px;
  border-radius: 999px;
  background: var(--lightGrey, #F3F4F6);
  color: var(--bodyText, #333);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
}

.tipster-badge__icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: inline-block;
  flex-shrink: 0;
}

.tipster-badge__name {
  letter-spacing: 0.1px;
}

/* Icon-only variant — bare image dropped inline next to a tipster's name.
   No chip, no padding, no background. Width/height come from inline
   style on each render so the same class works at 16 / 20 / 24 / 28
   without per-size modifiers.
   The avatar-shaped overrides are flagged !important on purpose: the badge
   sits inside containers that apply blanket "img -> 40×40 circle, cover"
   rules to style the *avatar* alongside it (.match-page-member-tip
   .analiza_TipsterDetails img, .tipster-link img, etc.), and those
   selectors out-specificity ours. The intent here is "treat this img as
   chrome, never as an avatar" — that's a textbook utility-class use case
   for !important. */
.tipster-badge-icon {
  display: inline-block !important;
  vertical-align: middle !important;
  object-fit: contain !important;
  margin-left: 4px;
  border-radius: 0 !important;
  flex: none !important;
}


/* ════════════════════════════════════════════════════════════════════
   SEO footer (extracted from includes/footer.php's inline block,
   CSS-PLAN Step 4c — parked here until the Step 8 global.css merge).
   The pulse keyframes are renamed kl-footer-pulse: the inline block's
   `pulse` collided with match-analysis.css's live-dot keyframes and,
   being last in the document, silently won page-wide; each animation
   now keeps its own definition. GPWA seal margin + the iOS navbar
   shim moved from inline styles below. ═══════════════════════════ */
.gpwa-seal-img { margin-right: 15px; }
#ios-navbar-extension { position: fixed; bottom: -100px; left: 0; right: 0; height: 100px; background: #fff; z-index: 9999; }

/* Enhanced SEO Footer Styles */

.seo-footer-enhancement {
background-size: 100% 100%;
background-position: 0px 0px;
background-image: radial-gradient(142% 95% at 49% 0%, #012B61 0%, #1a1a1a 100%);
    color: white;
    margin-top: 0;
}


.footer {
    max-width: 1280px;
    margin: 0 auto;
}

strong {font-weight: 600;}

.seo-footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.seo-footer-enhancement .seo-footer-container:first-child {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    padding: 50px 20px 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.seo-footer-links {
    display: flex;
  justify-content: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.seo-footer-links-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    padding: 30px;
    max-width:1280px;
    width: 100%;
}

.seo-footer-column h2 {
    color: var(--white);
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 15px;
    border-bottom: 1px solid #fbbf24;
    padding-bottom: 4px;
    display: inline-block;
}

.seo-footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.seo-footer-column li {
    margin-bottom: 8px;
}

.seo-footer-column a {
    color: #e5e7eb;
    text-decoration: none;
    font-size: 0.9em;
    transition: all 0.3s ease;
    display: block;
    padding: 3px 0;
}

.seo-footer-column a:hover, .footer__menu a:hover, .footer__partneri a:hover {
    color: #fbbf24;
    padding-left: 5px;
    transform: translateX(5px);
}

/* SEO Description Section */
.seo-footer-description {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.seo-description-content h2 {
    color: var(--white);
    font-size: 1.25rem;
    margin-bottom: 20px;
    font-weight: 600;
}

.seo-description-content p {
    line-height: 1.6;
    margin-bottom: 15px;
    color: #e5e7eb;
    text-align: justify;
    font-size: 0.875rem;
}


.highlight-item {
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #fbbf24;
}

.highlight-item strong {
    display: block;
    color: #fbbf24;
    margin-bottom: 5px;
    font-size: 1rem;
    font-weight: 600;
}

.highlight-item span {
    color: #d1d5db;
    font-size: 0.875em;
    line-height: 1.4;
}

/* Social Media Section */
.social-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
    margin-top: 12px;
}

/* Current Topics Section */
.seo-topics-section {
    padding: 30px 0;

}

.seo-topics-section h3 {
    color: #fbbf24;
    font-size: 1.2em;
    margin-bottom: 20px;
    text-align: center;
}

.topics-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 15px;
}

.topic-tag {
    background: rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
    padding: 8px 16px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 0.9em;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 500;
}

.topic-tag:hover {
    background: #fbbf24;
    color: #1e3a8a;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(251, 191, 36, 0.3);
}

.topic-tag.hot {
    background: linear-gradient(45deg, #ef4444, #dc2626);
    color: white;
    border-color: #ef4444;
    animation: kl-footer-pulse 2s infinite;
}

.topic-tag.hot:hover {
    background: linear-gradient(45deg, #dc2626, #b91c1c);
    transform: translateY(-2px) scale(1.05);
}

@keyframes kl-footer-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    50% { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); }
}


/* Responsive Design */
@media (max-width: 768px) {
    .seo-footer-enhancement .seo-footer-container:first-child {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 30px 15px 25px;
    }
    
    .seo-footer-column h2 {
        font-size: 1em;
    }
    
    .seo-footer-column a {
        font-size: 0.85em;
    }
    
    .seo-description-content h2 {
        font-size: 1.25rem;
    }
    
    .seo-description-content p {
        text-align: left;
        font-size: 0.875rem;
    }
    
    
    
    .topics-tags {
        gap: 8px;
    }
    
    .topic-tag {
        font-size: 0.8em;
        padding: 5px 10px;
    }

    .seo-footer-links-container {
        padding: 1.5rem 1rem 1rem;
        gap: 1rem;
    }

    .p-footer {
        text-align:center;
    }

    .footer__copy {
  justify-content: center;
}

    .seo-footer-column {
  flex: 1 0 40%;
}

.footer__legal {
    align-items:center;
    margin: .5rem 0 2rem;
}

.footer__partneri {
justify-content: center;}


.footer__menu {
    justify-content: center;
}
.seo-footer-enhancement {
   background: linear-gradient(180deg,#012B61 10%,#041c2c 80%, #1a1a1a 100%);
}
}

@media (max-width: 480px) {
    .seo-footer-enhancement .seo-footer-container:first-child {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 25px 15px 20px;
    }
    
    
    
    .highlight-item {
        padding: 12px;
    }
}


/* ════════════════════════════════════════════════════════════════════
   Tipster hover box (extracted from includes/user_box.php's inline
   block, CSS-PLAN Step 4d). The fragment is AJAX-injected on hover from
   includes/footer.php, so its styles must live on an always-loaded
   sheet. Legacy hex values kept verbatim — extraction, not restyle. ══ */
.user_box{border:1px solid #ccc;width:300px;padding:8px;display:inline-block;box-shadow:0 0 1px 0 #ddd;background:#fff;position:relative}.user_box img{width:100px;float:left;border:1px solid #eee}.user_box_info{margin:0 10px;float:left;display:block;width:165px}.user_box_info a{display:block;font-size:14px;font-weight:600;text-decoration:none;line-height:20px}.user_box_info span{font-size:12px;color:#999}.user_box_stats{float:left;text-align:center;margin:8px 0 0 10px;width:185px}.user_box_profit{position:relative;font-size:12px;padding:4px 5px;float:left;border:3px solid #e2e5e6;text-align:center;border-top:15px solid #e2e5e6;margin-right:5px;width:40px;color:#676767}.user_box_profit span{position:absolute;top:-12px;left:10px;color:#ababab;font-size:9px;text-transform:uppercase;text-shadow:0 0 1px #fff}.user_box_stm{text-align:left;font-size:12px;color:#b5b5b5;line-height:20px}.user_box_icon{-ms-transform:rotate(44deg);-webkit-transform:rotate(44deg);transform:rotate(44deg);width:10px;height:10px;background-color:#fff;border-right:1px solid #c1c1c1;border-top:1px solid #c1c1c1;position:absolute;right:-7px;top:31px}

/* ── Mobile rules migrated from responsive-11.css (CSS-PLAN Step 6): cross-page
   tip/analysis shells (#analiza also on index.php, .tip-details also on
   dodaj-tip.php) — components.css is the always-loaded home. Gate converted
   max-device-width → max-width per owner decision 2026-07-20. ── */
@media (max-width: 1024px) {
    /* ANALIZE NEW ANALIZE NEW ANALIZE NEW ANALIZE NEW */
    
    #analiza {
        display: flex;
      flex-direction: column;
    }
    
    .tipster {
        padding: 1rem .5rem;
    }
    
    .tip-details {
        background-color: #f5f6f7;
    
    }
    
}

/* ── Mobile rules migrated from responsive-11.css (CSS-PLAN Step 6): the
   .dnevni/.premium responsive tables, .o-kom, ul.tab, .tablehed — cross-page
   components whose only base owner is style-15.css (components.css loads
   right after it, so end-of-file here wins the same contests responsive-11
   won from last place). The .premium/.m-thed/.tbold sub-block is DORMANT-
   UNCERTAIN (markup only in includes/dnevni-premium.php + remote-consumed
   html.php — audit Appendix D §6): parked, do not delete without owner.
   Gate converted max-device-width → max-width per owner decision 2026-07-20. ── */
@media (max-width: 1024px) {
    .o-kom {
        margin: 10px -6px -7px -7px;
    }
    
    ul.tab {
        float: none;
        position: relative;
        top: -7px;
    }
    
    ul.tab li {
        float: left;
        width: 33%;
    }
    
    .tablehed {
        display: none;
    }
    
    .dnevni table,
    .premium table {
        width: 100%;
    }
    
    .dnevni i {
        font-size: 15px;
        margin-top: 1px;
    }
    
    .dnevni i div {
        top: 4px;
    }
    
    .dnevni td, .premium td {
        padding: 6px;
        border: 1px solid #dcdcdc;
    }
    
    .m-thed {
        background: #263238;
        padding: 10px;
        color: #fafafa;
        font-family: tpd-meni;
        margin-bottom: 5px;
        display: block;
    }
    
    .dnevni table,
    .dnevni thead,
    .dnevni tbody,
    .dnevni th,
    .dnevni td,
    .dnevni tr {
        display: block;
    }
    
    .dnevni thead tr {
        display: none;
    }
    
    .dnevni tr {
        border: 1px solid #dcdcdc;
        margin-bottom: 5px;
        position: relative;
    }
    
    .dnevni td {
        border: none;
        border-bottom: 1px solid #dcdcdc;
        position: relative;
        padding-left: 22%;
        width: auto !important;
    }
    
    .dnevni td:before {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }
    
    .dnevni td:nth-of-type(4):before {
        content: "Pick:";
    }
    
    .dnevni td:nth-of-type(5):before {
        content: "@";
        position: initial;
        padding-right: 5px;
    }
    
    .dnevni td:nth-of-type(7):before {
        content: "Tipster:";
    }
    
    .dnevni td:nth-child(1) {
        position: absolute;
        padding-left: 5px;
        border: 0;
    }
    
    .dnevni td:nth-child(2) {
        position: absolute;
        right: 5px;
        top: 56px;
        color: #ccc;
        border: 0;
    }
    
    .dnevni td:nth-child(3) {
        display: flex;
        padding-left: 30px;
        background: rgba(85, 85, 85, 0.05);
    }
    
    .dnevni td:nth-child(4) {
        float: left;
        border: 0;
    }
    
    .dnevni td:nth-child(5) {
        position: initial;
    }
    
    .dnevni td:nth-child(6) {
        position: absolute;
        right: 5px;
        border: 0;
        margin-top: -57px;
    }
    
    .dnevni td:nth-child(8) {
        border: 0;
        position: absolute;
        right: 5px;
        margin-top: -57px;
        z-index: 999;
    }
    
    .pt-res td:nth-child(2) {
        top: 0;
        right: 30px;
    }
    
    .pt-res td:nth-child(7) {
        top: 27px;
        position: absolute;
        border: 0;
        right: 0;
    }
    
    .pt-res td:nth-of-type(7):before {
        content: none;
    }
    
    .dnevni a,
    .premium a {
        width: auto !important;
        display: block !important;
    }
    
    .premium table,
    .premium thead,
    .premium tbody,
    .premium th,
    .premium td,
    .premium tr {
        display: block;
    }
    
    .premium thead tr {
        display: none;
    }
    
    .premium tr {
        border: 1px solid #496794;
        margin-bottom: 10px;
        position: relative;
    }
    
    .premium td {
        border: none;
        border-bottom: 1px solid #496794;
        position: relative;
        padding-left: 22%;
        width: auto !important;
    }
    
    .premium td:before {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }
    
    .premium td:nth-of-type(5):before {
        content: "Tipster:";
    }
    
    .premium td:nth-child(1) {
        position: absolute;
        padding-left: 5px;
        border: 0;
    }
    
    .premium td:nth-child(2) {
        position: absolute;
        right: 5px;
        color: #ccc;
        border: 0;
        z-index: 999;
    }
    
    .premium td:nth-child(3) {
        padding-left: 25px;
        background: #203254;
    }
    
    .premium td:nth-child(4) {
        border: 0;
        position: absolute;
        top: 3px;
        left: 1px;
        padding-left: 5px;
    }
    
    .premium td:nth-child(6) {
        position: absolute;
        right: 5px;
        border: 0;
        top: 20px;
    }
    
    .tbold {
        display: none !important;
    }
    
}

/* ── Mobile rules migrated from responsive-11.css (CSS-PLAN Step 6): shared
   widgets/cards (comment forms, tip cards, fixtures scrollers, titlehead).
   The #pick-item/.pick__* sub-block is DORMANT-UNCERTAIN (markup only in
   includes/fetch.php, possibly remote-consumed — audit Appendix D §6):
   parked, do not delete without owner sign-off. .live-matches-container's
   !important fought fixtures.css, deleted in Step 2 — left verbatim, dies
   in a later consolidation. Gate converted max-device-width → max-width per
   owner decision 2026-07-20. ── */
@media (max-width: 1024px) {
    .m-komentari {
       
    }
    
    #pick-item {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: .75rem;
        border-radius: .5rem;
        box-shadow: var(--shadowCard);
        margin: .5rem 0;
        padding: .875rem;
        background: var(--white);
    }
    
    #pick-item i {
        font-size: 1.25rem;
    }
    
    .pick__sport-icon {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .pick__details {
        display: flex;
        flex-direction: column;
        flex: 1;
        align-items: unset;
        gap: unset;
    }
    
    .pick__match {
        display: flex;
        flex-direction: row;
        margin-bottom: 1rem;
        align-items: unset;
        flex: unset;
        gap: unset;
    }
    
    .pick__match-details {
        display: flex;
        flex-direction: column;
        flex: 1;
        align-items: unset;
        }
    
    .pick__match-details-event {
            display: flex;
            align-items: center;
            font-size: 1rem;
            margin-bottom: .5rem;
            font-weight: 500;
            flex-wrap: wrap;
            line-height: 1;
            gap: 0.25rem;
        }
    
    .pick__match-details-event a {
            line-height: 1.4;
      margin-top: -1px;
        }
    
    .pick__match-details-time {
            font-size: .875rem;
        }
    
    .pick__selection {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: .5rem;
        margin-bottom: .5rem;
    }
    
    .pick__selection-details {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: .25rem;
        flex: 1;
        font-size: 0.875rem;
    }
    
    .pick__tipster {
        display: flex;
        flex-direction: row;
        font-size: 0.875rem;
        justify-content: unset;
        width: unset;
    }
    
    .pick__tipster-details {
        flex: 1;
    }
    
    .verified_tag {
        margin-left: 4px;
        width: 1rem;
    }
    
    .titlehead {
        display: block;
    }
    
    .titlehead h4 {
        margin: 0 0 .25rem .25rem;
        font-size: 1.25rem;
        font-weight: 600;
    }
    
    .titlehead p {
        margin: 0 0 2rem .25rem;
        font-size: 1rem;
        font-weight: 500;
    }
    
    .ostavi_komentar {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        margin-bottom: 1rem;
        background: var(--fieldGrey);
        border-radius: 4px;
        padding-left: .5rem;
        height: 3rem;
    }
    
    .ostavi_komentar img {
        width: 2rem;
      height: 2rem;
      border-radius: 50%;
    }
    
    .napisi_komentar {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex:1;
    }
    
    #inputField {
        background: var(--fieldGrey);
        border: 0;
        color: var(--bodyText);
        padding: 0 .5rem;
        height: 2rem;
        width: 100%;
        font-size: .875rem;
        outline: 0;
    }
    
    .fixtures_teamImg {
        height: 24px;
     }
    
    .match-header {
        /* Flex container */
        display: flex;
        align-items: center;
        background: var(--lightBlue);
        padding: 0.5rem;
        color: var(--titleText);
        gap: 0.5rem;
      }
    
    .match-time {
        flex-shrink: 0;      
      font-size: 0.75rem;
      }
    
    .bet-league {
        min-width: unset;
        width: unset;
      }
    
    .teams {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;      
        min-width: 0;        
        gap: 0.25rem;
        font-weight: 600;
        font-size: 1rem;
        font-family: "Red Hat Display", serif;
        text-transform: uppercase;
        overflow: hidden;    
      }
    
    .teams-tip-home {
        font-weight:600;
    }
    
    .fixture-card {
        min-width: 260px;
    }
    
    .live-matches-container {
        background: unset !important;
        padding: 0;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap:15px;
        scrollbar-width: thin;
    }
    
    .live-matches-scroll {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap:15px;
        scrollbar-width: thin;
    }
    
    .match-card {
        min-width: 260px;
    }
    
    .bet-card-content {
        padding: 0.75rem;
           align-items: flex-start;
      }
    
    .league-name {
        flex: 1 1 0px;     
        min-width: 0;        
        font-size: 0.75rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-word;
      }
    
    .fixtures-scroll {
        display: flex;
        flex-direction: row;
        flex-wrap: unset;
        scrollbar-width: none;
      }
    
    .fixture-card {
            max-width: unset;
        }
    
    .empty-state p {
            font-size: .875rem;
            }
    
    .featured-title {
            font-size: 1.25rem;
            line-height: 1.4;
        }
    
    
    
    .top-fixtures-widget {
            scrollbar-width: none;
          }
    
}

/* ── Global/shell mobile layer migrated from responsive-11.css (CSS-PLAN
   Step 6 finale): legacy :root palette (mobile values genuinely differ from
   style-15's — e.g. --bodyText/#3c3c3c — and won by load order; preserved
   verbatim), scrollbar hiding, bare element resets (nav/aside/footer/h3),
   header/menu plumbing and the bottom navigation + hamburger panel.
   The .i-menu/.show_more_main !importants stay: they fight style-15's own
   !important and kl-zid.css/poruke.css respectively (audit Appendix D §9).
   The third one, .chat-open, is gone — it fought chat.php's inline width, and
   that block became css/kl-chat.css in INLINE-STYLE Step 4.
   Gate converted max-device-width → max-width per owner decision
   2026-07-20; the trailing width queries kept their original narrower gates. ── */
@media (max-width: 1024px) {
    :root {
        --blue: #316cb4;
        --white: #ffffff;
        --bodyText: #3c3c3c;
        --success: #57b46e;
        --lightGrey: #F5F6F7;
        --fieldGrey: #F2F5F9;
        --mediumGrey: #B9C4D2;
        --darkGrey: #7C848E;
        --lightBlue: #EFF4FB;
        --primary: #1756D4;
        --primaryAlt: #0769DE;
        --shadowButton: 0 5px 10px #1a31500d;
        --shadowButtonSmall: 0px 2px 2px rgba(39, 39, 39, 0.1);
        --shadowCard: 0px 3px 6px rgba(39, 39, 39, 0.1);
        --shadowCardDarker: 0px 3px 6px rgba(39, 39, 39, 0.2);
      }

      ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
        color: #8FA5BD;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
       color: #8FA5BD;
       opacity: 0.9;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
       color: #8FA5BD;
       opacity: 0.9;
    }
    :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #8FA5BD;
    }
    ::-ms-input-placeholder { /* Microsoft Edge */
        color: #8FA5BD;
    }

    ::placeholder { /* Most modern browsers support this now. */
        color: #8FA5BD;
    }


    /* Hide horizontal scrollbars on mobile */
    * {
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }

    *::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

    nav ul li:nth-child(7) {
        display: block;
    }

    h3 {
        font-size: 1.25rem;
    }

    .container {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .content-section {
        padding:0;
    }

    .container-main {
        flex-direction: column;
        padding: 0 12px;
    }

    .logo {
        opacity: 0.98;
    }

    .logo img {
        width: 160px;
      margin-top: 10px;
    }

    nav {
        display: none;
    }

    ul a {
        color: #555555;
        text-transform: uppercase;
    }

    .i-menu {
        display: inline-block !important;
        position: absolute;
        left: 8px;
        color: var(--white);
    }

    aside {
        display: none;
    }

    /* Legacy-shell companion to the bare hide above, same 0,0,1 via :where().
       The bare rule stays for the kl-main pages -- Bet Centar's .kl-liga-rail
       relies on it and declares no mobile display rule. (CSS-REST Step 8) */
    :where(.container-main:not(.kl-main)) aside {
        display: none;
    }

    .pretraga_korisnika,
    .fa-eject {
        display: none;
    }
    .top80 {
        display: none;
    }
    .submit {
        padding: 10px;
    }
    .fa-comment {
        position: relative;
    }
    .fa-comment-o {
        position: relative;
    }

    /*.m-komentari {
        display: flex;
      flex-direction: column;
      gap: .5rem;
      margin-bottom: 1rem;
    }*/

    .poruka {
        line-height: 20px;
    }

    .show_more_main {
        margin-bottom: 10px;
        width: 80% !important;
    }
    .open-chat {
        right: 1rem;
        bottom: 3.5rem;
        z-index: 100;
        position: fixed;
        top: calc(env(safe-area-inset-bottom) - 53);
    }
    /* `.chat-open { width: 100% !important }` stood here. It existed only to beat
       chat.php's inline block, which was injected into the body and so outranked this
       file by source order. That block is now css/kl-chat.css (INLINE-STYLE Step 4),
       which carries its own `@media (max-width: 1024px) { .chat-open { width: 100% } }`
       at the same specificity, later in the cascade — so the width is unchanged at every
       breakpoint and no !important is needed for it any more. */
    .online_users {
        padding: 0 15px 15px 15px;
    }
    .dnevni_ft {
        display: none;
    }
    .show_ft {
        display: block;
        background: #3b83c0;
        padding: 15px 0;
        width: 100%;
        color: white;
        border: 0;
        text-align: center;
    }

    /* NOVO NOVO NOVO */

    .container {
        padding: 0;
    }

    .reklama-2 {
        padding: 0;
    }

    footer {
        background: #1a1a1a;
        padding: 0.5rem 1rem 2rem;
        margin-top: 0;
    }

    /* Legacy-shell sidebar, mobile sizing. Scoped in CSS-FINAL Step 4 for the
       same reason as `aside p` above: bare, it reached the redesigned rails too.
       Measured before scoping: of the .kl-main asides it touched, .kl-nv-rail is
       display:none at this width, .kl-kd-offer sets its own 12px row-gap, and
       .news-article-rail is display:block so row-gap is inert — and `width:
       unset` computes the same as the initial `auto` it falls back to, because
       nothing else sets a width on those elements. So this is a no-op for them,
       which the after-measurement confirmed.
       :where() again, to keep the selector at 0,0,1. */
    :where(.container-main:not(.kl-main)) aside {
        width: unset;
        row-gap: 1rem;
    }

    /*
    .dodaj-tip span {
        background: var(--mediumBlue);
        padding: .5rem 1rem;
        color: var(--bodyText);
        border:0;
        border-radius: 4px;
        cursor: pointer;
        text-align: center;
        flex: 1;
        min-width: 20%;
    }
    */

    /***** ANALIZA KOMENTARI *********/

    .user-name {
        align-self: stretch;
        display: flex;
        align-items: center;
      }

          /* Removed - now handled by .categories-wrapper styles */

    .header {
        padding: 0 12px;
    }

    /* Mobile Bottom Navigation */
    .mobile-nav-bottom {
        display: none;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        padding: 8px 0;
        z-index: 100;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    }

    .mobile-nav-bottom .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        padding: 4px;
        color: #6c757d;
        text-decoration: none;
        border: 0;
        background: transparent;
        cursor: pointer;
    }

    .mobile-nav-bottom .nav-item span {
        font-size: 11px;
        margin-top: 4px;
        font-weight: 500;
    }

    .mobile-nav-bottom .nav-item.active {
        color: var(--primary);
    }

    /* Inline SVGs emitted by inline_nav_icon() (header.php). fill/stroke point
       at currentColor so they inherit the .nav-item's color rule above. */
    .mobile-nav-bottom .nav-bottom-icon {
        width: 24px;
        height: 24px;
        display: block;
    }

    .mobile-nav-bottom .nav-item:active,
    .mobile-nav-bottom .nav-item:focus {
        color: var(--primary);
    }

    /* Hamburger menu state */
    .mobile-nav-bottom .nav-item.mobile-menu-trigger {
        color: #6c757d;
    }

    .mobile-nav-bottom .nav-item.mobile-menu-trigger.active {
        color: var(--primary);
    }

    /* Hamburger Menu Overlay for Mobile */
    .mobile-menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 60px;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1998;
    }

    .mobile-menu-overlay.active {
        display: block;
    }

    .mobile-menu-panel {
        position: fixed;
        bottom: 60px;
        left: 0;
        right: 0;
        height: 0;
        background: linear-gradient(to top, rgba(255, 255, 255, 1) 10%, rgba(250, 250, 250, 0.9) 100%);
        backdrop-filter: blur(12px);
        border-top: 1px solid #eee;
        transition: height 0.3s ease-in-out;
        z-index: 1999;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* When active, set auto height with max-height constraint */
    .mobile-menu-panel.active {
        height: auto;
        max-height: 70vh; 
        overflow-y: auto; 
    }

    /* For older browsers that don't support modern CSS */
    @supports not (max-height: 70vh) {
        .mobile-menu-panel.active {
            max-height: 400px; 
        }
    }
    .mobile-menu-content {
        padding: 12px 16px;
        overflow-y: auto;
        flex: 1;
    }

    .mobile-menu-content ul {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
    }

    .mobile-menu-content li {
        float: none;
    }

    .mobile-menu-content a {
        display: block;
        padding: 12px 4px;
        color: #333;
        text-decoration: none;
        font-size: 16px;
        text-align: right;
    }
}

@media (max-width: 1023px) {
    .mobile-nav-bottom {
        display: flex;
    }
    
    /* Hide existing hamburger menu from desktop */
    .i-menu {
        display: none !important;
    }
    
    /* Adjust chat button position */
    .open-chat {
        bottom: 80px;
    }
}

@media (max-width: 480px) {
    .mobile-nav-bottom .nav-item span {
        font-size: 10px;
    }
    
    .mobile-nav-bottom .nav-item {
        padding: 2px;
    }
}


/* ── layer 3: kl-shell.css ── */
/* ==========================================================================
   Redesign 2026 — global shell (app bar, desktop nav, bottom nav, sheets).
   Loaded only on pages that set $KL_SHELL. All values come from
   css/design-tokens.css. Mobile-first; desktop at 1024px.
   ========================================================================== */

/* Neutralize legacy chrome on migrated pages: style-15's .container-main is a
   flex row (content + aside) with its own margins, and responsive-11.css (which
   loads last) re-adds side padding on mobile — the doubled selector outranks
   both regardless of load order. */
.container-main.kl-main {
  display: block;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  overflow: visible;
}

/* Owner decision 2026-08-02: the whole site canvas is white. The grey
   "card on canvas" desktop background is gone — every page sheet that used to
   override it back to white (home-new, kl-fixtures, kl-pages, kl-news,
   korisnik, utakmica-new, kl-dodaj-tip) is now simply agreeing with global. */
body:has(.kl-appbar) {
  background: var(--kl-surface);
}
/* Mobile shell pages are full-bleed white in the design (every mobile
   reference screen has bg #FFFFFF) — the grey page bg is a desktop-only
   "card on canvas" device. On mobile it just showed as an empty grey band
   between short content and the footer, so keep mobile white and drop the
   big decorative gap above the footer. */
@media (max-width: 1023px) {
  body:has(.kl-appbar) { background: var(--kl-surface); }
  body:has(.kl-appbar) .seo-footer-enhancement { margin-top: 0; }
}

/* --- App bar (original brand gradient per owner decision) ------------------ */
.kl-appbar {
  background: var(--kl-header-bg);
  color: var(--kl-header-text);
  position: sticky;
  top: 0;
  z-index: 60;
}

.kl-appbar-inner {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--kl-sp-16);
  padding: var(--kl-sp-12) var(--kl-sp-20);
}

.kl-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}

/* Original logo at its legacy display size (160px mobile / 180px desktop) */
.kl-logo img { width: 160px; height: auto; display: block; opacity: 0.9; }

.kl-nav-desktop { display: none; }

.kl-appbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--kl-sp-14);
  position: relative;
}

.kl-iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--kl-header-text);
  padding: 0;
  cursor: pointer;
}

/* Owner 2026-08-02: app-bar icons were too small to read on the gradient.
   Overrides the inline width/height attributes on the shell's SVGs. */
.kl-iconbtn svg { width: 23px; height: 23px; }

/* Auth buttons sit on the gradient — invert for contrast */
.kl-appbar .kl-btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.65);
}

.kl-appbar .kl-btn-primary {
  background: #fff;
  color: var(--kl-primary-legacy);
}

/* Narrow screens: keep logo + both auth buttons on one row */
@media (max-width: 430px) {
  .kl-appbar-inner { padding: var(--kl-sp-12) var(--kl-sp-12); gap: var(--kl-sp-8); }
  /* Tight gaps + side padding so "Prijava" can keep its outlined-button look
     (owner 2026-08-02 — borderless, it read as a link). */
  .kl-appbar .kl-btn { padding: var(--kl-sp-8) var(--kl-sp-10); font-size: var(--kl-fs-12); }
  .kl-appbar-actions { gap: var(--kl-sp-6); }
  /* The logo carries the tagline here, so the action row has ~152px to spend:
     shrink the tap targets but keep the enlarged glyphs inside them. */
  .kl-iconbtn { width: 30px; height: 30px; }
  .kl-iconbtn svg { width: 22px; height: 22px; }
  .kl-avatarbtn img { width: 28px; height: 28px; }

  /* Owner 2026-08-02 — 360px overflow. On the naslovna the logo lockup carries
     the tagline H1, which made the block 190px wide and pushed the action row
     off the bar (logged out it needed 408px in a 360px viewport). Condense the
     lockup instead of dropping anything: nothing leaves the bar, search stays
     one tap away, and the H1 stays visible for mobile-first indexing.
     The two rules below also stop the row from ever overflowing again — the
     logo may compress, the actions may not. */
  .kl-logo { min-width: 0; }
  .kl-logo img { width: 132px; }
  .kl-appbar-actions { flex-shrink: 0; }
  /* The tagline's own size is set in home-new.css, which owns that component
     and loads after this sheet. */
}

/* Below 375px the action row simply has no room left (owner 2026-08-02): drop
   the search icon, which is the one action duplicated elsewhere — the Više sheet
   lists "Pretraga" as its first item. */
@media (max-width: 374px) {
  .kl-iconbtn--search { display: none; }
}

.kl-badge {
  position: absolute;
  top: -2px;
  right: -5px;
  background: var(--kl-red);
  color: #fff;
  font: 700 var(--kl-fs-10) var(--kl-font-ui);
  line-height: 1;
  border-radius: var(--kl-r-pill);
  padding: 2px 4px;
  min-width: 10px;
  text-align: center;
}

.kl-avatarbtn {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
}

.kl-avatarbtn img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--kl-surface-4);
  object-fit: cover;
}

/* ==========================================================================
   Reusable message composer — chat / messages / wall comment / anywhere.
   Markup (render via includes/kl-composer.php → kl_composer()):
     <div class="kl-composer">
       <textarea class="kl-composer-input" rows="1" …></textarea>
       <button class="kl-composer-send" disabled …><svg/></button>
     </div>
   Behaviour in js/kl-composer.js: textarea auto-grows with each row up to a
   max (then scrolls) while the send button stays pinned to the bottom; the
   send button is disabled until non-whitespace text is entered.
   ========================================================================== */
.kl-composer {
  display: flex;
  align-items: flex-end;
  gap: var(--kl-sp-8);
  background: var(--chat-surface-2);
  border-radius: var(--kl-r-14);
  padding: 6px 6px 6px 12px;
}
.kl-composer-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  outline: none;
  resize: none;
  font: 400 14px var(--kl-font-ui);
  line-height: 20px;
  color: var(--kl-ink);
  padding: 8px 0;
  max-height: 120px;
  overflow-y: auto;
}
.kl-composer-input::placeholder { color: var(--kl-text-4); }
/* Toast for the wall "Podijeli" copy-link fallback (footer.php handler). */
.kl-share-toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%) translateY(8px);
  z-index: 2000;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  border-radius: 20px;
  background: var(--kl-ink);
  color: #fff;
  font: 600 var(--kl-fs-13) var(--kl-font-ui);
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.kl-share-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
/* iOS Safari zooms the whole page in when a focused input is under 16px. The
   composer is 14px, which triggered the zoom on the wall (Zid korisnika) and in
   chat/messages. Hold it at 16px on phones only; desktop keeps the tighter size. */
@media (max-width: 767px) {
  .kl-composer-input { font-size: 16px; }
}
.kl-composer-send {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--kl-r-10);
  background: var(--chat-primary);
  color: var(--kl-on-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--kl-dur-short) var(--kl-ease), filter var(--kl-dur-short) var(--kl-ease);
}
.kl-composer-send:hover:not(:disabled) { filter: brightness(0.94); }
.kl-composer-send:disabled { background: var(--kl-border-strong); cursor: not-allowed; }
.kl-composer-send svg { width: 18px; height: 18px; display: block; }

/* --- Buttons (shared shell controls) -------------------------------------- */
.kl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kl-sp-6);
  font: 700 var(--kl-fs-13) var(--kl-font-display);
  border-radius: var(--kl-r-10);
  padding: var(--kl-sp-10) var(--kl-sp-16);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: filter var(--kl-dur-short) var(--kl-ease);
}

.kl-btn:hover { filter: brightness(0.96); }

.kl-btn-primary { background: var(--kl-blue); color: #fff; }
.kl-btn-ghost   { background: transparent; color: var(--kl-ink); border: 1px solid var(--kl-border-strong); }
.kl-btn-outline { background: var(--kl-surface); color: var(--kl-ink); border: 1px solid var(--kl-border); }

/* --- Notifications panel --------------------------------------------------- */
/* Content container inside the notifications drawer (.kl-notif-sheet provides
   the chrome + scroll). */
.kl-notif-panel {
  width: 100%;
  background: transparent;
}
/* Keep the title + "Označi pročitano" pinned while the list scrolls. */
.kl-notif-panel .nothed {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--kl-surface);
}

.kl-notif-loading {
  padding: var(--kl-sp-16);
  font: 400 var(--kl-fs-13) var(--kl-font-ui);
  color: var(--kl-text-2);
  text-align: center;
}

/* --- Notification panel contents (includes/notifikacije.php) --------------
   The 2026 "Notifikacije" screen. Legacy login-style-3.css owns these class
   names and loads after the shell sheet, so these rules are scoped under
   .kl-notif-panel (higher specificity) to win.
   ------------------------------------------------------------------------- */
.kl-notif-panel .nothed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kl-sp-8);
  padding: var(--kl-sp-14) var(--kl-sp-16);
  border-bottom: 1px solid var(--kl-divider);
}
.kl-notif-panel .nothed-title {
  display: inline-flex;
  align-items: center;
  gap: var(--kl-sp-8);
  font-family: var(--kl-font-display);
  font-weight: 800;
  font-size: var(--kl-fs-19);
  color: var(--kl-ink);
}
.kl-notif-panel .kl-notif-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 1px var(--kl-sp-6);
  border-radius: var(--kl-r-pill);
  background: var(--kl-red);
  color: var(--kl-on-dark);
  font-family: var(--kl-font-ui);
  font-weight: 800;
  font-size: var(--kl-fs-10);
}
.kl-notif-panel .nothed-close {
  display: inline-flex;
  align-items: center;
  font-family: var(--kl-font-ui);
  font-weight: 600;
  font-size: var(--kl-fs-12);
  color: var(--kl-blue);
  cursor: pointer;
  white-space: nowrap;
}

/* Row: avatar + (message over timestamp). No trailing chevron per the design. */
.kl-notif-panel .notifikacija {
  display: flex;
  align-items: flex-start;
  gap: var(--kl-sp-12);
  padding: var(--kl-sp-12) var(--kl-sp-16);
  border-bottom: 1px solid var(--kl-divider);
  position: relative;
}
.kl-notif-panel a:last-of-type .notifikacija { border-bottom: 0; }
.kl-notif-panel .notifikacija img {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--kl-surface-4);
}
/* System/promo rows use a rounded square instead of a circle. */
.kl-notif-panel .notifikacija.is-system img { border-radius: var(--kl-r-12); }

.kl-notif-panel .notification-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.kl-notif-panel .notification-content > span {
  font-family: var(--kl-font-ui);
  font-weight: 400;
  font-size: var(--kl-fs-13);
  line-height: var(--kl-lh-ui);
  color: var(--kl-text-2);
}
.kl-notif-panel .notification-content > span b {
  font-weight: 700;
  color: var(--kl-ink);
}
.kl-notif-panel .notifikacija.is-system .notification-content > span b { color: var(--kl-blue); }

.kl-notif-panel .notification-meta,
.kl-notif-panel .notification-meta time {
  font-family: var(--kl-font-ui);
  font-weight: 500;
  font-size: var(--kl-fs-11);
  color: var(--kl-text-4);
}

/* Unread: pale tint, ink message, and a leading dot in the left gutter. */
.kl-notif-panel .notifikacija.is-unread { background: var(--kl-blue-tint); }
.kl-notif-panel .notifikacija.is-unread .notification-content > span { color: var(--kl-ink); }
.kl-notif-panel .notifikacija.is-unread::before {
  content: '';
  position: absolute;
  left: var(--kl-sp-6);
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kl-blue);
}

.kl-notif-panel .no-notifications {
  padding: var(--kl-sp-24) var(--kl-sp-16);
  text-align: center;
  font-size: var(--kl-fs-13);
  color: var(--kl-text-3);
}
.kl-notif-panel .notfut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--kl-sp-14) var(--kl-sp-16);
  border-top: 1px solid var(--kl-divider);
  font-family: var(--kl-font-display);
  font-weight: 700;
  font-size: var(--kl-fs-13);
  color: var(--kl-blue);
}
.kl-notif-panel .notfut a { color: inherit; text-decoration: none; }

/* Full-page variant of the notifications screen (poslednje-aktivnosti, design
   12c as a page): shares .kl-notif-panel row styling, drops the drawer chrome. */
.kl-notif-feed { width: 100%; max-width: 640px; margin: 0 auto; }
.kl-notif-feed .nothed {
  position: static;
  /* Side gutter matches the rows below (sp-16) so the title lines up with the
     avatars instead of sitting 4px further in. */
  padding: var(--kl-sp-16) var(--kl-sp-16) var(--kl-sp-12);
  border-bottom: 0;
}
.kl-notif-feed .nothed-title { margin: 0; }
.kl-notif-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kl-sp-8);
  padding: var(--kl-sp-16);
  border-top: 1px solid var(--kl-divider);
}
.kl-notif-more .show_more {
  display: inline-flex;
  align-items: center;
  gap: var(--kl-sp-6);
  font: 700 var(--kl-fs-13) var(--kl-font-display);
  color: var(--kl-blue);
  cursor: pointer;
}
.kl-notif-more .loding { color: var(--kl-text-3); font-size: var(--kl-fs-13); }

/* --- Bottom navigation (mobile) ------------------------------------------- */
.kl-nav-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--kl-surface);
  border-top: 1px solid var(--kl-divider);
  padding: var(--kl-sp-10) var(--kl-sp-8) calc(var(--kl-sp-14) + env(safe-area-inset-bottom, 0px)) var(--kl-sp-8);
}

/* While a text field is focused (software keyboard up), hide the fixed bottom nav
   so it doesn't ride above the iOS keyboard. Toggled by js/kl-shell.js. */
body.kl-kb-open .kl-nav-bottom {
  display: none;
}

.kl-nav-bottom-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kl-sp-4);
  font: 600 var(--kl-fs-10) var(--kl-font-ui);
  color: var(--kl-text-4);
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.kl-nav-bottom-item.is-active {
  color: var(--kl-primary-legacy); /* original active tint */
  font-weight: 700;
}

/* Original icons emitted by inline_nav_icon() inherit currentColor */
.kl-nav-bottom-item .nav-bottom-icon {
  width: 22px;
  height: 22px;
}

/* The footer already clears the fixed bottom nav on its own, so this only needs
   to be a small breathing gap before the footer — not the old 76px, which read
   as a big empty band under short content. (Full-height pages like the chat/
   nova views set their own height and are unaffected.) */
.container-main.kl-main { padding-bottom: var(--kl-sp-24); }

/* --- Bottom sheets --------------------------------------------------------- */
/* display:flex below overrides the UA [hidden] rule — restate it explicitly,
   otherwise the closed overlay is an invisible layer eating every tap/scroll. */
.kl-sheet-overlay[hidden] { display: none; }

.kl-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(20, 23, 28, 0.45);
  opacity: 0;
  transition: opacity var(--kl-dur-medium) var(--kl-ease);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.kl-sheet-overlay.is-open { opacity: 1; }

.kl-sheet {
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--kl-surface);
  border-radius: 22px 22px 0 0;
  box-shadow: var(--kl-shadow-sheet);
  transform: translateY(24px);
  transition: transform var(--kl-dur-medium) var(--kl-ease);
  padding-bottom: calc(var(--kl-sp-8) + env(safe-area-inset-bottom, 0px));
}

.kl-sheet-overlay.is-open .kl-sheet { transform: translateY(0); }

.kl-sheet-grabber {
  width: 38px;
  height: 4px;
  border-radius: var(--kl-r-pill);
  background: var(--kl-border-strong);
  margin: var(--kl-sp-10) auto var(--kl-sp-4) auto;
}

.kl-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--kl-sp-6) var(--kl-sp-20) var(--kl-sp-12) var(--kl-sp-20);
}

.kl-sheet-title { font: 800 var(--kl-fs-17) var(--kl-font-display); color: var(--kl-ink); }

.kl-sheet-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--kl-surface-3);
  color: var(--kl-text-2);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.kl-sheet-group-label {
  font: 700 var(--kl-fs-10) var(--kl-font-ui);
  color: var(--kl-text-4);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: var(--kl-sp-4) var(--kl-sp-20) var(--kl-sp-8) var(--kl-sp-20);
}

.kl-sheet-group {
  display: flex;
  flex-direction: column;
  padding: 0 var(--kl-sp-12);
}

.kl-sheet-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: var(--kl-sp-12);
  border-radius: var(--kl-r-12);
  text-decoration: none;
  transition: background var(--kl-dur-short) var(--kl-ease);
}

.kl-sheet-item:hover { background: var(--kl-surface-2); }

.kl-sheet-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--kl-r-10);
  background: var(--kl-surface-3);
  color: var(--kl-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kl-sheet-icon.is-accent {
  background: #EEF3FC;
  color: var(--kl-blue);
}

.kl-sheet-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.kl-sheet-text strong {
  font: 700 var(--kl-fs-14) var(--kl-font-display);
  color: var(--kl-ink);
}

.kl-sheet-text small {
  font: 400 var(--kl-fs-11) var(--kl-font-ui);
  color: var(--kl-text-4);
}

.kl-sheet-chevron { color: var(--kl-text-disabled); font-size: var(--kl-fs-15); }

.kl-sheet-divider { height: 1px; background: var(--kl-divider); margin: var(--kl-sp-10) var(--kl-sp-20); }

.kl-sheet-footer {
  display: flex;
  gap: var(--kl-sp-12);
  padding: var(--kl-sp-4) var(--kl-sp-20) var(--kl-sp-16) var(--kl-sp-20);
}

.kl-sheet-footer .kl-btn { flex: 1; }

/* --- Nalog sheet ----------------------------------------------------------- */
.kl-account-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: var(--kl-sp-10) var(--kl-sp-20) var(--kl-sp-16) var(--kl-sp-20);
}

.kl-account-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--kl-surface-4);
  object-fit: cover;
  flex-shrink: 0;
}

.kl-account-id { flex: 1; min-width: 0; }

.kl-account-name {
  font: 800 var(--kl-fs-16) var(--kl-font-display);
  color: var(--kl-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kl-account-email {
  font: 400 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kl-account-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 0 var(--kl-sp-20);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-14);
  overflow: hidden;
}

.kl-account-stat {
  padding: var(--kl-sp-12) 0;
  text-align: center;
}

.kl-account-stat + .kl-account-stat { border-left: 1px solid var(--kl-divider); }

.kl-account-stat strong {
  display: block;
  font: 800 var(--kl-fs-16) var(--kl-font-display);
  color: var(--kl-ink);
}

.kl-account-stat strong.is-pos { color: var(--kl-green); }
.kl-account-stat strong.is-neg { color: var(--kl-red); }

.kl-account-stat small {
  font: 600 var(--kl-fs-10) var(--kl-font-ui);
  color: var(--kl-text-4);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
  display: block;
}

.kl-account-cta { margin: var(--kl-sp-16) var(--kl-sp-20) var(--kl-sp-6) var(--kl-sp-20); display: flex; }

.kl-account-logout {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: var(--kl-sp-14) var(--kl-sp-24) var(--kl-sp-20) var(--kl-sp-24);
  font: 700 var(--kl-fs-14) var(--kl-font-display);
  color: var(--kl-red);
  text-decoration: none;
}

/* --- Desktop --------------------------------------------------------------- */
@media (min-width: 1024px) {
  .kl-appbar-inner { padding: 0 var(--kl-sp-40); height: 64px; gap: 36px; }
  .kl-logo img { width: 180px; }

  .kl-nav-desktop {
    display: flex;
    align-items: center;
    gap: 26px;
    flex: 1;
    height: 100%;
  }

  .kl-nav-link {
    font: 600 var(--kl-fs-13) var(--kl-font-ui);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    height: 64px;
    border-bottom: 2px solid transparent;
    transition: color var(--kl-dur-short) var(--kl-ease);
  }

  .kl-nav-link:hover { color: #fff; }

  /* "Više" is an anchored dropdown on desktop (only items missing from the
     main menu); the trigger is a button dressed as a nav link. */
  .kl-nav-more-wrap { position: relative; display: flex; align-items: center; height: 100%; }

  button.kl-nav-more {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    gap: var(--kl-sp-4);
  }

  .kl-nav-more-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    padding: var(--kl-sp-8);
    background: var(--kl-surface);
    border: 1px solid var(--kl-border);
    border-radius: var(--kl-r-12);
    box-shadow: var(--kl-shadow-card);
    display: flex;
    flex-direction: column;
    z-index: 90;
  }
  .kl-nav-more-menu[hidden] { display: none; }

  .kl-nav-more-item {
    padding: var(--kl-sp-10) var(--kl-sp-12);
    border-radius: var(--kl-r-8);
    font: 600 var(--kl-fs-13) var(--kl-font-ui);
    color: var(--kl-ink);
    text-decoration: none;
  }
  .kl-nav-more-item:hover { background: var(--kl-surface-2); }

  .kl-nav-link.is-active {
    color: #fff;
    font-weight: 700;
    border-bottom-color: #fff;
  }

  .kl-nav-bottom { display: none; }
  .container-main.kl-main { padding-bottom: var(--kl-sp-40); }

  /* Sheets become centered dialogs on desktop */
  .kl-sheet-overlay { align-items: center; padding: var(--kl-sp-24); }
  .kl-sheet { border-radius: var(--kl-r-20); max-height: 80vh; }
}

/* Account + notifications menus: bottom drawer on mobile (base .kl-sheet),
   appbar-anchored dropdown on desktop. Double-class beats the generic desktop
   sheet rule.

   Anchoring: .kl-appbar-inner is content-box, max-width 1360px, 40px side
   padding — so its content right edge sits 40px inside a 1440px-wide band
   centred in the viewport. --kl-appbar-gutter reproduces that offset, keeping
   both dropdowns flush with the avatar/bell instead of drifting to the viewport
   edge on screens wider than 1440px. */
@media (min-width: 1024px) {
  .kl-sheet-overlay.kl-account-overlay,
  .kl-sheet-overlay.kl-notif-overlay {
    --kl-appbar-gutter: calc(max(0px, 100% - 1440px) / 2 + var(--kl-sp-40));
    background: transparent;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 60px var(--kl-appbar-gutter) 0 0;
  }
  .kl-account-overlay .kl-account-sheet,
  .kl-notif-overlay .kl-notif-sheet {
    max-height: min(80vh, 560px);
    border-radius: var(--kl-r-16);
    box-shadow: var(--kl-shadow-card);
    transform: translateY(-8px);
  }
  .kl-account-overlay.is-open .kl-account-sheet,
  .kl-notif-overlay.is-open .kl-notif-sheet { transform: translateY(0); }
  .kl-account-overlay .kl-sheet-grabber,
  .kl-notif-overlay .kl-sheet-grabber { display: none; }

  .kl-account-overlay .kl-account-sheet {
    width: 320px;
    max-width: 320px;
    padding-bottom: var(--kl-sp-10);
  }

  /* Notifications: a dropdown, not a centred modal. The panel scrolls inside
     the sheet so the sticky .nothed header stays put. */
  .kl-notif-overlay .kl-notif-sheet {
    width: 400px;
    max-width: 400px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .kl-notif-overlay .kl-notif-panel { overflow-y: auto; }
}

/* --- Shared bet-card token tuning (original card structure, kl pages) ------ */
.kl-betcards .bet-card {
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-16);
  box-shadow: none;
}

.kl-betcards .bet-card:hover { box-shadow: var(--kl-shadow-sm); }

.kl-betcards .bet-card-header,
.kl-betcards .bet-card-meta,
.kl-betcards .bet-league { font-family: var(--kl-font-ui); }

.kl-betcards .bet-card-teamline { font-family: var(--kl-font-display); color: var(--kl-ink); }

.kl-betcards .bet-card-excerpt { color: var(--kl-text-2); }

.kl-betcards .bet-details {
  border-top: 1px solid var(--kl-divider);
  background: var(--kl-surface-2);
}

.kl-betcards .bet-odds-value { font-family: var(--kl-font-display); color: var(--kl-ink); }


/* ── layer 4: aside.css ── */
/*
 * Sidebar/Aside Component Styles for Kladionica.eu
 * Contains styling for the sidebar elements, user profile, cards, and interactive elements
 */

/* User Profile Card */
.user-profile-card {
    background-color: #203049;
    background-color: var(--white);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--lightGrey);
    overflow: hidden;
    padding: 1.25rem;
width: 100%;
  box-sizing: border-box;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.profile-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary);
    border: 2px solid var(--blueText);
}

.profile-info .profile-name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--white);
    color: var(--titleText);
}

.user-card-stat-item {
    color: var(--lightBlue);
    color: var(--bodyText);
    gap:0.5rem;
  display: flex;
}

.profile-stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}


.monthly-progress-section {
    background-color: var(--blueDark);
    background-color: var(--lightGrey);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.progress-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--lightBlue);
    color: var(--titleText);
}

.progress-count {
    font-size: 0.75rem;
    color: var(--lightBlue);
    color: var(--darkGrey);
}

.user-card-progress-bar-container {
    height: 8px;
    background-color: #4e657c;
    background-color: var(--statGrey);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-bar {
    height: 100%;
    transition: width 0.6s ease, background-color 0.6s ease;
}

.user-progress-text {
    font-size: 0.75rem;
    color: var(--blueText);
    color: var(--darkGrey);
    text-align: center;
}

.add-tip-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--white);
    background-color: var(--primary);
    border-radius: 6px;
    padding: 0.75rem;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.add-tip-button:hover {
    background-color: var(--primaryAlt);
    text-decoration: none;
    color: var(--white);
}

/* Sidebar Cards */


.card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--lightGrey);
}

.card-header i {
    color: var(--primary);
}

.card-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--titleText);
}

.card-content {
    padding: 0.75rem 0;
}

.card-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--lightGrey);
    text-align: center;
}

.view-all-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--primaryAlt);
    text-decoration: none;
    border: 1px solid var(--primaryAlt);
  border-radius: 4px;
  padding:4px 8px;
}

.view-all-link:hover {
    background-color: var(--lightGrey);
    text-decoration: none;
}

/* News Items */
.news-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.news-item:hover {
    background-color: var(--lightGrey);
    text-decoration: none;
}

.news-image {
    width: 60px;
    height: 40px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--lightGrey);
}


.aside-news-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--titleText);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
}

/* Sidebar Ad */
.sidebar-ad {
    border-radius: 8px;
    overflow: hidden;
}

.sidebar-ad img {
    width: 100%;
    display: block;
}

/* Bookmaker Items */


/* Prizes Container */


.prize-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.medal {
    width: 40px;
    height: 40px;
}

.medal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.prize-item.gold .prize-value {
    color: #FFD700;
}

.prize-item.silver .prize-value {
    color: #C0C0C0;
}

.prize-item.bronze .prize-value {
    color: #CD7F32;
}


/* Tipsters List */


.tipster-info {
    flex: 1;
    min-width: 0;
}

.tipster-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.tipster-link:hover {
    text-decoration: none;
}

.tipster-link img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.tipster-details {
    flex: 1;
    min-width: 0;
}

.tipster-details h4 {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--titleText);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tipster-stats {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--darkGrey);
    flex-wrap: wrap;
}

.profit.positive {
    color: var(--success);
}

.profit.negative {
    color: var(--error);
}

.sep {
    opacity: 0.7;
}

.follow-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--lightGrey);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.follow-btn i {
    color: var(--primary);
}

.follow-btn:hover {
    background-color: var(--lightBlue);
}

.follow-btn.following {
    background-color: var(--primary);
}

.follow-btn.following i {
    color: var(--white);
}

/* No Data Message */


/* Search Container */
.search-container {
    margin-bottom: 1.5rem;
}


/* Activities List */


/* Notification Popup */


/* Responsive Adjustments */
@media (max-width: 768px) {
    

    

    .news-item {
        padding: 0.75rem 1rem;
    }

    

    

    
}

/* Today matches widget */
.today-matches-widget-wrapper {
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
}

.match-card-upcoming:last-child {
    border-bottom: 0;
}

.match-card-upcoming {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    gap: 0.25rem;
    padding: 0.75rem 0;
    transition:
        transform var(--motion-duration-medium) var(--motion-easing-standard),
        box-shadow var(--motion-duration-medium) var(--motion-easing-standard);
    text-decoration: none;
    border-bottom: 2px solid var(--lightGrey);
}

.today-widget-timovi {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.widget-rezultat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--bodyText);
    font-weight: bold;
    font-family: "Red Hat Display", serif;
    font-optical-sizing: auto;
    font-size: 0.875rem;
    gap: 0.25rem;
}

.widget-teamImg,
.today-matches-widget-wrapper .h2h__tim img.widget-teamImg {
    height: 20px !important;
    width: 20px !important;
    max-height: 20px !important;
    max-width: 20px !important;
    object-fit: contain;
    flex: 0 0 20px;
}

.widget-timName {
    font-family: "Red Hat Display";
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    font-size: 0.875rem;
}


/* ════════════════════════════════════════════════════════════════════
   Today's-matches aside widget (extracted from includes/
   today-matches-widget.php's inline block, CSS-PLAN Step 4d). Fully
   wrapper-scoped; previously only emitted when matches existed. ═════ */

.today-matches-widget-wrapper {
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
}
.today-matches-widget-wrapper .match-card-upcoming {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--lightGrey);
    color: var(--titleText);
    text-decoration: none;
}
.today-matches-widget-wrapper .match-card-upcoming:last-child {
    border-bottom: 0;
}
.today-matches-widget-wrapper .fixture-leagueTime,
.today-matches-widget-wrapper .match-league,
.today-matches-widget-wrapper .badge-time,
.today-matches-widget-wrapper .badges-container {
    display: flex;
    align-items: center;
}
.today-matches-widget-wrapper .fixture-leagueTime {
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--darkGrey);
}
.today-matches-widget-wrapper .match-league {
    min-width: 0;
    gap: 0.4rem;
}
.today-matches-widget-wrapper .league-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.today-matches-widget-wrapper .badge-time {
    flex-shrink: 0;
    gap: 0.35rem;
}
.today-matches-widget-wrapper .h2h__timovi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}
.today-matches-widget-wrapper .today-widget-timovi {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 0.25rem;
}
.today-matches-widget-wrapper .h2h__tim {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    line-height: 1.2;
}
.today-matches-widget-wrapper .widget-teamImg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    object-fit: contain;
    flex: 0 0 20px;
}
.today-matches-widget-wrapper .widget-timName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
}
.today-matches-widget-wrapper .widget-rezultat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    color: var(--bodyText);
    font-size: 0.875rem;
    font-weight: 700;
}
.today-matches-widget-wrapper .prediction-chips {
    display: flex;
    gap: 0.4rem;
    flex-wrap: nowrap;
    overflow: hidden;
}
.today-matches-widget-wrapper .prediction-chip {
    flex: 1;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    background: var(--lightGrey);
    color: var(--bodyText);
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.today-widget-error { color: #e74c3c; padding: 10px; text-align: center; }


/* ── layer 5: login-style-3.css ── */
/* Base login styles */
.logedin {
    position: relative;
}

.logedin a {
    color: var(--bodyText);
}

/* Modern User Toolbar Styles */
.toolbar-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0;
  position: relative;
}

/* Notification & Message Icons */
.toolbar-notifications,
.toolbar-messages {
  position: relative;
}


/* Badge counter for notifications and messages */
.nwen {
  position: absolute;
  background: rgba(242, 41, 35, 0.92);
  font-size: 0.7rem;
  width: 1.25rem;
  height: 1.25rem;
  text-align: center;
  border-radius: 50%;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -0.5rem;
  right: -0.5rem;
  border: 2px solid var(--white);
  color: var(--white);
}

/* User part of the toolbar */
.toolbar-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  position: relative;
}

.toolbar-user img {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--white-80);
  object-fit: cover;
  transition: border-color 0.2s ease;
}

.toolbar-user:hover img {
  border-color: var(--white);
}

.toolbar-user .ph-caret-down {
  color: var(--white-80);
  font-size: 1rem;
  transition: transform 0.2s ease;
}

.toolbar-user:hover .ph-caret-down {
  transform: rotate(180deg);
  color: var(--white);
}

/* Dropdown Menu */
.user-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 250px;
  background: var(--white);
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 1010;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s ease;
}

.user-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--lightGrey);
}

.user-dropdown-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.user-dropdown-header img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: none;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.user-name {
  font-weight: 500;
  color: var(--titleText);
  font-size: 0.95rem;
}

.user-email {
  color: var(--darkGrey);
  font-size: 0.8rem;
}

.user-dropdown-items {
  padding: 0.5rem 0;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--bodyText);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.dropdown-item:hover {
  background-color: var(--lightGrey);
  text-decoration: none;
}

.dropdown-item i {
  font-size: 1.15rem;
  color: var(--darkGrey);
}

.admin-badge {
  background-color: var(--primary);
  color: var(--white);
  font-size: 0.75rem;
  padding: 0.125rem 0.375rem;
  border-radius: 0.75rem;
  margin-left: 0.5rem;
}

/* Modern Login/Register Buttons */
/* DO NOT DELETE — .modern-btn is LIVE, and this is the only place that styles it.
   includes/header.php (~L330) emits <button class="modern-btn login-btn"> and
   <button class="modern-btn signup-btn"> in its logged-out branch, so this rule
   paints the Prijava and Registracija buttons on every legacy-shell page — that
   is /analize, /utakmice, all seven /sp-2026* routes and the rest of the pages
   that do not set $KL_SHELL. Redesigned pages use the kl app-bar and
   .kl-notice-btn instead, which is why it can look unused if you only check
   those.
   Why this warning exists: CSS-FINAL Step 1 deleted two dead .modern-btn copies
   from css/notifikacija.css. Those were dead only because that sheet loads on two
   app-bar pages that never emit the class. Reading "we deleted .modern-btn as
   dead" and finishing the job here would strip login and signup from every
   logged-out legacy page. Verify against the rendered HTML logged out before
   touching this. Audit: CSS-AUDIT-FINAL.md §7.1. */
.modern-btn {
  padding: 0.5rem 1.25rem;
  border-radius: 0.375rem;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.login-btn {
  background-color: transparent;
  color: var(--white);
  border: 1px solid var(--white-80);
}

.login-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--white);
}

.signup-btn {
  background-color: var(--lightBlue);
  color: var(--primaryAlt);
  margin-left: 0.75rem;
}

.signup-btn:hover {
  background-color: var(--lightBlue);
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Modern Login & Registration Styles */

/* Main container styles */
.auth-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.auth-container.active {
  opacity: 1;
  visibility: visible;
}

.auth-modal {
  width: 420px;
  max-width: 90%;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.auth-container.active .auth-modal {
  transform: translateY(0);
}

.auth-header {
  padding: 1.25rem;
  border-bottom: 1px solid var(--lightGrey);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* A <p>, not a heading: modal labels must stay out of the page outline. */
.auth-title {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--titleText);
  margin: 0;
}

.close-auth {
  background: none;
  border: none;
  color: var(--darkGrey);
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  padding: 0.25rem;
}

.close-auth:hover {
  color: var(--titleText);
}

.auth-body {
  padding: 1.5rem;
}

.auth-form {
  display: flex;
  flex-direction: column;
    gap: 1rem;
}

/* Google Sign-In button slot inside the login/registration modals.
   The button itself is Google's own rendered widget (an iframe) — we only give
   it a place to sit and a divider beneath it. Nothing here styles the widget;
   its look is configured in renderButton() in includes/footer.php. Lives in
   global.css rather than a page sheet because the auth modals render on every
   page via includes/header.php. */
.kl-gsi {
  display: flex;
  justify-content: center;
  min-height: 44px;
  margin-bottom: var(--kl-sp-14);
}

.kl-gsi-or {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-12);
  margin-bottom: var(--kl-sp-16);
  font-family: var(--kl-font-ui);
  font-size: var(--kl-fs-12);
  color: var(--kl-text-3);
}
.kl-gsi-or::before,
.kl-gsi-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--kl-border);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--titleText);
}

.form-control {
  padding: 0.75rem 1rem;
  border: 1px solid var(--mediumGrey);
  border-radius: 0.375rem;
  font-size: 1rem;
  color: var(--bodyText);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(23, 86, 212, 0.15);
  outline: none;
}

.form-control::placeholder {
  color: var(--mediumGrey);
}

.auth-footer {
  padding: 1rem 1.5rem;
  background-color: var(--lightGrey);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-action-btn {
  padding: 0.75rem 1rem;
  background-color: var(--primary);
  color: var(--white);
  border: none;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.auth-action-btn:hover {
  background-color: var(--primaryAlt);
}

.auth-action-btn:active {
  transform: translateY(1px);
}


.auth-switch {
  font-size: 0.875rem;
  color: var(--bodyText);
  text-align: center;
}

.auth-switch-link {
  color: var(--primary);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

.auth-switch-link:hover {
  text-decoration: underline;
}

/* Forgot password link */
.forgot-password {
  font-size: 0.875rem;
  color: var(--primary);
  text-decoration: none;
  align-self: flex-end;
  margin-top: -0.75rem;
}

.forgot-password:hover {
  text-decoration: underline;
}

/* reCAPTCHA container */
.recaptcha-container {
  display: flex;
  justify-content: center;
  margin: 0.5rem 0;
}

/* Error message */
.auth-error {
  color: var(--error);
  font-size: 0.875rem;
  padding: 0.5rem;
  background-color: rgba(210, 61, 61, 0.1);
  border-radius: 0.375rem;
  margin-bottom: 1rem;
  display: none;
}

.auth-error.show {
  display: block;
}

/* Responsive Styles */
@media (max-width: 767px) {
  
  .toolbar-container {
    padding: 0;
  }
  
  .user-dropdown {
    right: -50px;
  }
  
  
  .modern-btn {
    padding: 0.4rem 1rem;
    font-size: 0.875rem;
  }
  
  
  
  .nik {
    display: none; /* Hide username in header, it's now in dropdown */
  }

  /* Every auth dialog is a bottom drawer on mobile — login, registracija AND
     "Resetuj lozinku", which used to stay a centred box (owner 2026-08-02). */
  .auth-container {
    align-items: flex-end;
    padding-top: env(safe-area-inset-top);
  }

  .auth-container .auth-modal {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: calc(100dvh - env(safe-area-inset-top));
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }

  .auth-container.active .auth-modal {
    transform: translateY(0);
  }

  .auth-container .auth-header {
    position: sticky;
    top: 0;
    background: var(--white);
    z-index: 2;
  }
  
  .auth-body {
    padding: 1rem;
  }
  
  .auth-footer {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .toolbar-container {
    gap: 1rem;
  }
  
  .user-dropdown {
    right: -70px;
    width: 240px;
  }
 
}

/* Password requirements styling */
.password-requirements {
    font-size: 0.75rem;
    color: var(--darkGrey);
    margin-top: -0.25rem;
}

.password-requirements.valid {
    color: #2b8a3e;
}

.password-requirements.invalid {
    color: var(--error);
}

/* Mobile button icon display */
@media (max-width: 767px) {
    .modern-btn span {
        display: none;
    }
    
    .d-mobile {
        display: inline-block !important;
    }
    
    .notifikacije, .user-dropdown {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100%;
        max-height: 80vh;
        border-radius: 12px 12px 0 0;
    }
}

/* Hide mobile icons on desktop */
.d-mobile {
    display: none;
}

/* Transition for dropdown elements */
.user-dropdown, .notifikacije {
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

/* Notification panel content styling */
.notifikacija {
    display: flex;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--lightGrey);
    transition: background-color 0.2s ease;
    align-items: flex-start;
    gap: 0.75rem;
}

.notifikacija:hover {
    background-color: var(--lightGrey);
}

.notifikacija img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
}

.nothed {
    padding: 0.75rem 1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--lightGrey);
    color: var(--titleText);
    background-color: var(--lightGrey);
}

/* Stats section in user dropdown */
.stat-item {
    color: #6c757d;
    font-size: 0.75rem;
  }

  .stats_user {
    display: flex; gap: 0.5rem;
    }
  
  .stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  .stat-item svg {
    color: #6c757d;
  }
  
  .monthly-progress {
    margin-top: 0.5rem;
  }
  
  .progress-bar-container {
    height: 0.5rem;
    background-color: #e9ecef;
    border-radius: 0.25rem;
    overflow: hidden;
  }
  
  .progress-bar {
    height: 100%;
    transition: width 0.5s ease;
  }
  
  .progress-text {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
  }
  
  /* Better styling for user info in dropdown header */
  .user-info {
    display: flex;
    flex-direction: column;
  }
  
  .user-name {
    font-weight: 600;
    color: #212529;
  }
  
  .user-email {
    font-size: 0.75rem;
    color: #6c757d;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* Proper feather icon alignment */
  .user-dropdown-items .dropdown-item svg,
  .user-dropdown-stats .stat-item svg {
    min-width: 1rem;
  }
  
  /* Dropdown animation */
  .user-dropdown {
    transform-origin: top right;
  }

  .user-dropdown-stats {
    padding: 1rem;
    border-bottom: 1px solid var(--lightGrey);
  }
  
  /* Responsive styles for mobile */
  @media (max-width: 767px) {
    .user-dropdown {
      position: fixed;
      top: auto;
      bottom: calc(60px + env(safe-area-inset-bottom));
      left: 0;
      right: 0;
      width: 100%;
      transform-origin: bottom center;
      border-radius: 0.75rem 0.75rem 0 0;
      max-height: 85vh;
      overflow-y: auto;
    }
    
    .user-dropdown-header {
      padding: 1.25rem 1rem;
    }
    
 
    
    .progress-bar-container {
      height: 0.625rem;
    }
    
    .progress-text {
      font-size: 0.8125rem;
      margin-top: 0.375rem;
    }
  }
  
  /* Enhanced transitions for smooth animation */
  .user-dropdown {
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
  }
  
  .user-dropdown.active {
    transition: opacity 0.25s ease, visibility 0s, transform 0.25s ease;
  }
  
  /* Progress bar color transitions */
  .progress-bar {
    transition: width 0.5s ease, background-color 0.5s ease;
  }
  
  /* Further polish for mobile view */
  @media (max-width: 480px) {
    .toolbar-container {
      gap: 0.75rem;
    }
    
    .user-dropdown-header img {
      width: 3rem;
      height: 3rem;
    }
    
    .user-name {
      font-size: 1rem;
    }
    
    .user-email {
      font-size: 0.75rem;
    }
  }

  /* Mobile backdrop for dropdown menus */

  
  /* Adjust z-index for dropdown on mobile */
  @media (max-width: 767px) {
    .user-dropdown.active {
      z-index: 1201;
    }
    
    /* Add subtle sheet-like shadow */
    .user-dropdown {
      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    }
    
    /* Handle pull indicator for mobile dropdowns */
    .user-dropdown:before {
      content: '';
      position: absolute;
      top: 0.625rem;
      left: 50%;
      transform: translateX(-50%);
      width: 3.5rem;
      height: 0.25rem;
      background-color: #dee2e6;
      border-radius: 1rem;
    }
    
    /* Add some top space for the pull indicator */
    .user-dropdown-header {
      padding-top: 1.5rem;
    }
  }
  
  /* Prevent body scrolling when dropdown is open on mobile */
  
  
  /* Hide caret icon on mobile as it's redundant */
  @media (max-width: 767px) {
    .toolbar-user i[data-feather="chevron-down"] {
      display: none;
    }
  }

/* Notification Panel Styles */
.notifikacije {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 320px;
    max-height: 450px;
    overflow-y: auto;
    background: var(--white);
    border-radius: 0.75rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1010;
    display: none;
    border: 1px solid var(--lightGrey);
  }
  
  /* Notification Panel Header */
  .nothed {
    padding: 0.75rem 1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--lightGrey);
    color: var(--titleText);
    background-color: var(--lightGrey);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .nothed-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .nothed-close {
    cursor: pointer;
    color: var(--darkGrey);
    transition: color 0.2s ease;
  }
  
.nothed-close:hover {
    color: var(--titleText);
  }

.userhed-close {
  cursor: pointer;
  color: var(--darkGrey);
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.userhed-close:hover {
  color: var(--titleText);
}
  
  /* No notifications state */
  .no-notifications {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    color: var(--darkGrey);
    text-align: center;
    gap: 0.5rem;
  }
  
  .no-notifications i {
    opacity: 0.5;
  }
  
  .no-notifications p {
    margin: 0;
    font-size: 0.9rem;
  }
  
  /* Individual Notification Item */
  .notifikacija {
    display: flex;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--lightGrey);
    transition: all 0.2s ease;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
  }
  
  .notifikacija img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--lightGrey);
  }
  
  .notification-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .notifikacija span {
    font-size: 0.875rem;
    color: var(--bodyText);
    line-height: 1.4;
  }
  
  .notification-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .notifikacija time {
    font-size: 0.75rem;
    color: var(--darkGrey);
  }
  
  /* Notification Panel Footer */
  .notfut {
    padding: 0.75rem 1.25rem;
    text-align: center;
    font-size: 0.875rem;
    background-color: var(--lightGrey);
    border-top: 1px solid var(--lightGrey);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }
  
  .notfut a {
    color: var(--primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
  }
  
  .notfut a:hover {
    text-decoration: underline;
  }
  
  /* Add cursor pointer to the notification bell icon */
  .toolbar-notifications {
    cursor: pointer;
  }
  
  /* Loading animation */
  .animate-spin {
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  /* Mobile-specific styles */
  @media (max-width: 767px) {
    .notifikacije {
      position: fixed;
      top: auto;
      bottom: calc(60px + env(safe-area-inset-bottom));
      left: 0;
      right: 0;
      width: 100%;
      max-height: 80vh;
      border-radius: 1rem 1rem 0 0;
      z-index: 1200;
      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    }
    
    .notifikacije:before {
      content: '';
      position: absolute;
      top: 0.625rem;
      left: 50%;
      transform: translateX(-50%);
      width: 3.5rem;
      height: 0.25rem;
      background-color: #dee2e6;
      border-radius: 1rem;
    }
    
    .nothed {
      padding-top: 1.5rem;
    }
  }

/* ── Archive note (IA-2026): shown on frozen /analize archive pages ─────────── */
.kl-archive-note {
  margin: var(--kl-sp-16) 0;
  padding: var(--kl-sp-10) var(--kl-sp-14);
  border: 1px solid var(--kl-border);
  border-left: 3px solid var(--kl-red);
  border-radius: var(--kl-r-8);
  background: var(--kl-surface-2);
  font: 500 var(--kl-fs-13) var(--kl-font-ui);
  color: var(--kl-text-2);
}
.kl-archive-note a { color: var(--kl-red); font-weight: 700; text-decoration: none; }

/* ── Shared redesign components (CSS-NEW Step 7) ────────────────────────────
   Defined here because more than one page sheet had its own identical copy.
   Page sheets still load after global and still win their ties, so a page that
   wants a different value keeps overriding locally — see .kl-tipovi
   .kl-page-title's line-height and .kl-nizovi .kl-page-lead's size. */

/* Page head. The bare selector keeps this weaker than every page sheet's
   scoped `.kl-<page> .kl-page-title`, so those pages are unaffected. */
.kl-page-title {
  font: 800 21px var(--kl-font-display);
  color: var(--kl-ink);
  /* 1.25, not 1.2: every page sheet that declared its own copy used 1.25
     (kl-tipovi, kl-kladionice, kl-zid), and owner decision D2 set /pretraga to
     the same. Global was the outlier; the three copies are gone as of
     CSS-REST Step 6. /nizovi and /utakmice pick up 1.25 here. */
  line-height: 1.25;
  margin: 0;
}

.kl-page-lead {
  font: 400 var(--kl-fs-13) var(--kl-font-ui);
  color: var(--kl-text-3);
  line-height: 1.5;
  margin: var(--kl-sp-6) 0 0 0;
  max-width: 640px;
}

/* Filter chip (CSS-NEW Step 10). One pill, three former copies: /tipovi's
   sport and date filters (.kl-chip), the tip page's odds-market row
   (.tdn-chip) and both period toggles on the tip and match pages, which were
   outlined pills until the owner picked this filled treatment (2026-08-13). */
.kl-chip {
  flex: 0 0 auto;
  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-6) var(--kl-sp-12);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.kl-chip.is-active {
  font-weight: 700;
  color: var(--kl-on-dark);
  background: var(--kl-blue);
}

.kl-chip-spacer { flex: 1; }

/* Bookmaker bonus row + its CTA pill (COMP Step 2). One component, formerly
   `.in-bonus*` in home-new.css and `.kl-nv-bonus*` in kl-news.css — identical
   apart from box-sizing and an inherited font that painted nothing.
   The logo treatment is NOT shared: the news rail plates its logos on navy
   while the home card does not. That difference is preserved as a scoped
   override in kl-news.css and is an open question for the owner, not drift
   this step decided. */
.kl-bonus-row {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-12);
  padding: 9px 0;
  text-decoration: none;
}
.kl-bonus-row + .kl-bonus-row { border-top: 1px solid var(--kl-divider); }
.kl-bonus-row:hover { background: var(--kl-surface-2); }
.kl-bonus-row img {
  width: 34px;
  height: 34px;
  border-radius: var(--kl-r-8);
  object-fit: contain;
  flex-shrink: 0;
}
.kl-bonus-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kl-bonus-text strong { font: 700 var(--kl-fs-13) var(--kl-font-display); color: var(--kl-ink); }
.kl-bonus-text small { font: 400 var(--kl-fs-11) var(--kl-font-ui); color: var(--kl-text-4); }
.kl-bonus-cta {
  flex-shrink: 0;
  padding: 5px 12px;
  border: 1px solid var(--kl-border-strong);
  border-radius: var(--kl-r-pill);
  font: 700 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-ink);
  white-space: nowrap;
}

/* Titled header bar at the top of a content card (COMP Step 3). Formerly
   `.in-card-head` in home-new.css and `.kl-nv-rcard-head` in kl-news.css.
   Only the bar and its heading are shared — the trailing link and the sponsor
   tag differ per surface and stay in their own sheets. This rule sets no colour
   or font of its own on purpose: every visible string in the bar lives in a
   child that already declares both. */
.kl-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kl-sp-10);
  padding: var(--kl-sp-14) var(--kl-sp-16);
  border-bottom: 1px solid var(--kl-divider);
}
.kl-card-head h2 { margin: 0; font: 700 var(--kl-fs-14) var(--kl-font-display); color: var(--kl-ink); }

/* Advanced-stat explainer beside a stat label. 15px is already small for a
   pointer target, so the two former copies converge on the larger one. */
.kl-stat-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--kl-border);
  color: var(--kl-text-2);
  font-size: var(--kl-fs-10);
  font-style: normal;
  font-weight: 700;
  cursor: help;
  position: relative;
}

.kl-stat-info:hover::after,
.kl-stat-info:focus::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  width: 220px;
  padding: var(--kl-sp-8) var(--kl-sp-10);
  border-radius: var(--kl-r-6);
  background: var(--kl-ink);
  color: var(--kl-on-dark);
  font: 400 var(--kl-fs-12) var(--kl-font-ui);
  line-height: 1.4;
  text-align: left;
  white-space: normal;
}

/* League-group accordion head (CSS-NEW Step 9). The same collapsible group
   renders on /bet-centar and /bet-centar/liga via includes/kl-fixtures-render.php
   and on /nizovi via nizovi.php, which used to coin its own kl-nizovi-* synonyms
   for these seven parts. One term per component; the two pages' wrappers, heads
   and bodies still differ (the listing animates its height, /nizovi toggles
   display) and keep their own rules in their own sheets. */
.kl-league-name {
  font: 700 var(--kl-fs-13) var(--kl-font-display);
  color: var(--kl-ink);
  margin: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kl-league-country {
  font: 500 var(--kl-fs-11) var(--kl-font-ui);
  color: var(--kl-text-4);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}
.kl-league-count {
  font: 700 var(--kl-fs-11) var(--kl-font-display);
  color: var(--kl-text-disabled);
  white-space: nowrap;
  flex-shrink: 0;
}
.kl-league-toggle {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--kl-text-4);
}
.kl-league-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform var(--kl-dur-short) var(--kl-ease);
}
.kl-league-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.kl-league-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* "novo!" badge on a tip card. Emitted by the SHARED renderers
   (includes/bet-card.php, includes/html.php), so every page that renders a tip
   card gets it — previously only /tipovi and /nizovi styled it, and the same
   badge sat unstyled on the league pages and the home page. */
.novo { margin: 0px 0.25rem; color: red; font-size: 11px; cursor: pointer; }

@media (min-width: 1024px) {
  .kl-page-title { font-size: 28px; }
}

/* ============================================================================
   1xBet numbered-circle lineup pitch (design 3d). Shared by the tip/analiza
   page (tip-details) and the bet-centar match page (utakmica-new): 1xBet gives
   us a formation but no player photos, so each player is a shirt-number circle
   placed by line + position. Tokens in design-tokens.css §Match pitch.
   ========================================================================== */
/* Lineup tier note — the honesty line under "Očekivani sastavi" / "Posljednji
   poznati sastav". Shared by the match page and the tip page because the lineup
   block itself is shared (includes/bc-lineups.php); the two page-local copies it
   replaces (.ut-lu-xb-note, .tdn-lu-xb-note) said the same thing twice. */
.kl-lu-note { margin: 2px 0 10px; font: 400 13px var(--kl-font-ui); line-height: 1.45; color: var(--kl-text-2); }

.kl-luc-forms { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; font: 500 12px var(--kl-font-ui); color: var(--kl-text-2); }
.kl-luc-forms b { font-weight: 800; color: var(--kl-ink); }
.kl-luc-sep { color: var(--kl-text-2); }
/* min-width: 0, plus an EXPLICIT width: 100% on the pitch — the pitch must
   always resolve to the field's real width; left at its own ~370px
   max-content width a 5-player defensive line pushes past a narrower field
   and .kl-luc-field's overflow:hidden clips it there instead of the line
   actually fitting (owner report 2026-08-25, live: Valencia-Real Betis 5-4-1).
   Desktop lays the pitch out LEFT TO RIGHT (home half on the left, like the
   confirmed photo pitch); the vertical stack is the mobile layout in the
   max-width:768px MQ below. */
.kl-luc-pitch { position: relative; display: flex; flex-direction: row; gap: 8px; padding: 12px 16px; background: var(--kl-pitch); border: 1px solid var(--kl-border); border-radius: 16px; min-width: 0; width: 100%; min-height: 360px; }
.kl-luc-pitch::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 50%; width: 1px; background: var(--kl-pitch-line); }
.kl-luc-pitch::after { content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; border: 1px solid var(--kl-pitch-line); border-radius: 50%; transform: translate(-50%, -50%); }
.kl-luc-line { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-around; gap: 6px; padding: 8px 0; flex: 1 1 0; min-width: 0; }
.kl-luc-p { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 62px; min-width: 0; }
.kl-luc-circle { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; box-sizing: border-box; font: 700 11px var(--kl-font-display); font-variant-numeric: tabular-nums; }
.kl-luc-circle.is-home { background: var(--kl-navy); color: var(--kl-pitch-num); border: 2px solid #fff; }
.kl-luc-circle.is-away { background: #fff; color: var(--kl-ink); border: 2px solid var(--kl-navy-text); }
.kl-luc-name { max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font: 500 9.5px var(--kl-font-ui); color: var(--kl-text); }
/* Framed expected pitch — the confirmed lineups' container around the light
   numbered pitch. Desktop mirrors the photo pitch: both team headers share the
   top edge and the pitch runs left to right beneath them. Mobile stacks: home
   header, vertical pitch, away header (MQ below). Scoped to .kl-luc-field
   (two classes) so these hold against the page sheets' plain .lineups-team
   rules and their mobile MQs at BOTH widths. */
.kl-luc-field { display: flex; flex-wrap: wrap; flex-direction: row; align-items: stretch; gap: 0; border: 1px solid var(--kl-border); border-radius: 12px; overflow: hidden; }
.kl-luc-field .lineups-team { border: 0; border-radius: 0; }
.kl-luc-field .lineups-team--home { order: 1; flex: 1 1 50%; border-bottom: 1px solid var(--kl-border); }
.kl-luc-field .lineups-team--away { order: 2; flex: 1 1 50%; border-bottom: 1px solid var(--kl-border); flex-direction: row-reverse; text-align: right; }
.kl-luc-field .lineups-team--away .lineups-team__formation { margin-left: 0; margin-right: auto; }
.kl-luc-field .kl-luc-pitch { order: 3; flex: 1 1 100%; border: 0; border-radius: 0; }
/* A side with no XI: its "sastav još nije poznat" line grows to roughly the
   missing half's width instead of squeezing into one player-sized column. */
.kl-luc-line.kl-luc-empty { flex-grow: 4; justify-content: center; }
.kl-luc-empty span { max-width: 200px; font: 500 12px var(--kl-font-ui); color: var(--kl-text-2); text-align: center; white-space: normal; }

@media (max-width: 768px) {
  .kl-luc-field { flex-direction: column; }
  .kl-luc-field .lineups-team--home { flex: 1 1 auto; border-bottom: 1px solid var(--kl-border); }
  .kl-luc-field .lineups-team--away { order: 3; flex: 1 1 auto; border-top: 1px solid var(--kl-border); border-bottom: 0; flex-direction: row; text-align: left; }
  .kl-luc-field .lineups-team--away .lineups-team__formation { margin-left: auto; margin-right: 0; }
  .kl-luc-field .kl-luc-pitch { order: 2; flex: 0 0 auto; }
  .kl-luc-pitch { flex-direction: column; gap: 14px; padding: 16px 10px; min-height: 0; }
  .kl-luc-pitch::before { top: 50%; bottom: auto; left: 10px; right: 10px; width: auto; height: 1px; }
  .kl-luc-line { flex-direction: row; justify-content: space-around; padding: 0 8px; flex: 0 0 auto; }
  .kl-luc-line.kl-luc-empty { flex-grow: 0; }
}