/* ==========================================================================
   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 {
    color: rgba(255,255,255, 0.80);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    margin: 0;
    max-width: 200px;
}

@media (max-width: 480px) {
    .home-logo-title {
        font-size: 11px;
        max-width: 180px;
    }
}


.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
}

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 {
    font-family: arimo;
    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;
}

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);
}


    

    
    
    


.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: #5f5f5f;
   }

.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;
}


.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) */
.bet-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 700 11px Inter, sans-serif;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

.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;
}

/* 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 h3 {
  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;
}

.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;
}

.bet-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--boxGrey, #F1F3F7);
  color: #5f5f5f;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 8px 6px 12px;
  border-radius: 32px;
  white-space: nowrap;
}

.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;
  }
}

.bet-card .bet-details {
  background: var(--boxGrey, #f5f6f7);
  padding: 12px 16px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.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/.chat-open !importants stay: they fight
   style-15's own !important, kl-zid.css/poruke.css, and chat.php's inline
   width respectively (audit Appendix D §9) — they die with those in Steps
   7-8. 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;
    }

    .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;
    }
    .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;
    }

    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); }
.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);
}

.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 */
.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;
}

.auth-title {
  font-size: 1.25rem;
  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;
}

.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; }