/* mobile.css - Pristup transformacije postojećih elemenata bez izmena base.html */

@media (max-width: 767px) { /* Ova prelomna tačka odgovara onoj u base.html */

    header {
    padding-bottom: 10px !important;
  }
  
    header .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
  }
  
    /* Glavni flex kontejner u headeru (.d-flex.align-items-start) */
    header .container > .d-flex.align-items-start {
        flex-direction: column !important;
    align-items: center !important;
  }
  
    /* Kontejner za logo i navigacione dugmad (.logo-nav-container) */
    .logo-nav-container {
    width: 100% !important;
        display: flex !important;
        flex-direction: row !important; /* REDOSLED PO HORIZONTALI */
        flex-wrap: wrap !important; /* OMOGUĆAVA PRELAMANJE */
        justify-content: space-between !important; /* RAZMAK IZMEĐU ELEMENATA U REDU */
        align-items: flex-start !important; 
        position: static !important;
        padding-top: 10px !important;
        padding-bottom: 2px !important; /* Smanjuje razmak na dnu kontejnera */
    }

    /* Logo link - ostaje pune širine na vrhu */
    .logo-nav-container > a:first-child {
    display: block !important;
        width: 100% !important;
        flex-basis: 100% !important;
        margin-bottom: 15px !important; /* Smanjeno sa 20px na 15px */
    text-align: center !important;
        line-height: 1;
  }
    .logo-nav-container > a:first-child img {
        display: inline-block !important;
    height: 60px !important;
        max-width: 200px !important;
        vertical-align: middle;
        width: auto !important; /* Eksplicitna širina za Core Web Vitals */
  }
  
    /* CILJAMO RODITELJSKE .dropdown KONTEJNERE */
    .logo-nav-container > .dropdown {
        position: relative !important; /* Promenjeno sa static na relative za padajući meni */
        left: auto !important;
        bottom: auto !important;
    margin: 0 !important;
        padding: 0 !important;
    text-align: center !important;
    display: block !important;
        background-color: transparent !important; 
        border: none !important;
        z-index: 100 !important; /* Povećan z-index */
        flex-basis: calc(50% - 5px) !important; /* Pola širine minus mali razmak */
        margin-bottom: 8px !important; /* Smanjeno sa 10px na 8px */
    }

    /* CILJAMO PRIMARNE NAVIGACIONE LINKOVE KOJI NISU DROPDOWN (a nisu ni logo ni dodaj oglas) */
    .logo-nav-container > a.nav-button-primary,
    .logo-nav-container > a.nav-button-messages,
    .logo-nav-container > a.nav-button-my-ads,
    .logo-nav-container > a.nav-button-login,
    .logo-nav-container > a.nav-button-register {
        flex-basis: calc(50% - 5px) !important;
        margin-bottom: 8px !important; /* Smanjeno sa 10px na 8px */
        /* Osnovni stilovi za ove linkove će doći iz zajedničkog bloka ispod */
  }
  
    /* SVA NAVIGACIONA DUGMAD/LINKOVI UNUTAR .logo-nav-container - JEDINSTVENI STIL */
    /* Ovo uključuje i dugmad unutar .dropdown i direktne linkove */
    .logo-nav-container .nav-button-primary,
    .logo-nav-container .nav-button-category,
    .logo-nav-container .nav-button-city,   
    .logo-nav-container .nav-button-messages,
    .logo-nav-container .nav-button-profile, 
    .logo-nav-container .nav-button-my-ads,
    .logo-nav-container .nav-button-add-ad,
    .logo-nav-container .nav-button-login,
    .logo-nav-container .nav-button-register {
        position: static !important; 
        left: auto !important;       
        bottom: auto !important;     
        width: 100% !important; /* Svi su 100% širine svog flex item roditelja */
    display: flex !important;
        align-items: center !important; 
        justify-content: center !important; 
        padding: 0 10px !important; 
        height: 40px !important; /* Smanjeno sa 42px na 40px */
        background-color: #c20a0d !important;
    color: white !important;
        border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 5px !important;
        text-decoration: none !important;
        font-size: 15px !important; 
        line-height: 1; 
        text-align: center; 
        z-index: auto !important;
        box-sizing: border-box !important; 
        transition: background-color 0.2s;
        margin: 0 !important; /* Uklanja default margine koje mogu smetati flex-basis-u */
        will-change: transform; /* Nagovještava browseru da će biti transformacija */
        transform: translateZ(0); /* Aktivira GPU rendering */
  }
  
    /* Posebno podešavanje za kontejner dugmeta "Dodaj oglas" ako postoji, ili za samo dugme */
    /* Prvo pokušavamo da ciljamo kontejner ako "Dodaj oglas" nije direktno dete .logo-nav-container */
     .logo-nav-container > div:has(> .nav-button-add-ad) {
        flex-basis: 100% !important;
        margin-top: 0px !important; /* Prilagodite ako je potrebno */
    margin-bottom: 8px !important; /* Smanjeno sa 10px na 8px */
  }
    /* Ako je "Dodaj oglas" direktno dete .logo-nav-container */
    .logo-nav-container > .nav-button-add-ad {
        flex-basis: 100% !important;
        margin-top: 0px !important; /* Prilagodite ako je potrebno */
        margin-bottom: 5px !important; 
        /* Specifični stilovi za boju su već u bloku iznad, ali mogu se ponoviti ako je potrebno */
    }
    /* Osiguravamo da samo dugme "Dodaj oglas" ima svoje boje */
    .logo-nav-container .nav-button-add-ad {
       background-color: #e9c730f8 !important;
       color: #d40000 !important;
       font-weight: 700 !important;
    }
     .logo-nav-container .nav-button-add-ad:hover {
       background-color: #fad856 !important;
  }

  
    /* Uklanjanje ::before elemenata */
    .logo-nav-container .nav-button-category::before,
    .logo-nav-container .nav-button-city::before,
    .logo-nav-container .nav-button-messages::before,
    .logo-nav-container .nav-button-profile::before,
    .logo-nav-container .nav-button-login::before,
    .logo-nav-container .nav-button-register::before,
    .logo-nav-container .nav-button-my-ads::before {
        display: none !important;
  }
  
    /* Hover efekat - primenjuje se na sve osim "Dodaj oglas" */
    .logo-nav-container .nav-button-primary:hover,
    .logo-nav-container .nav-button-category:hover,
    .logo-nav-container .nav-button-city:hover,
    .logo-nav-container .nav-button-messages:hover,
    .logo-nav-container .nav-button-profile:hover,
    .logo-nav-container .nav-button-my-ads:hover,
    /* .logo-nav-container .nav-button-add-ad:hover, <--- Izbačeno odavde */
    .logo-nav-container .nav-button-login:hover,
    .logo-nav-container .nav-button-register:hover {
        background-color: #a0070a !important;
        transition: background-color 0.2s ease !important; /* Optimizovana tranzicija */
    }
    
    /* Dropdown meniji na mobilnom */
    .logo-nav-container .dropdown .dropdown-menu {
        position: absolute !important; /* Promenjeno sa static na absolute */
        top: 100% !important; /* Postavlja meni ispod dugmeta */
        left: 0 !important;
        width: 100% !important;
        margin-top: 3px !important; /* Smanjeno sa 5px na 3px */
        background-color: #c20a0d !important; /* Crvena pozadina kao kod dugmadi */
        border: none !important;
        box-shadow: 0 3px 6px rgba(0,0,0,0.2) !important;
        padding: 0 !important;
        transform: none !important; 
        border-radius: 0 0 5px 5px !important;
        z-index: 1000 !important; /* Visok z-index da bude iznad ostalih elemenata */
  }
    .logo-nav-container .dropdown .dropdown-item {
        color: white !important;
        padding: 8px 15px !important; /* Smanjeno sa 10px na 8px */
        text-align: center !important;
        border-bottom: 1px solid rgba(255,255,255,0.15) !important;
        background-color: transparent !important;
    }
     .logo-nav-container .dropdown .dropdown-item:last-child {
        border-bottom: none;
  }
    .logo-nav-container .dropdown .dropdown-item:hover {
        background-color: #a0070a !important; /* Isti hover efekat kao kod dugmadi */
  }
     .logo-nav-container .dropdown .dropdown-divider {
        border-color: rgba(255,255,255,0.15) !important;
    }

    /* Osiguravanje da padajući meni bude širok kao dugme */
    .logo-nav-container > .dropdown .dropdown-menu {
        min-width: 100% !important; /* Minimalna širina jednaka širini dugmeta */
        left: 0 !important; /* Poravnanje sa levom ivicom dugmeta */
        right: 0 !important; /* Poravnanje sa desnom ivicom dugmeta */
    }

    /* Forma za pretragu */
    header .container > .d-flex.align-items-start > form.d-flex {
        width: 100% !important; /* Puna širina sada */
        /* max-width: 300px; */ /* Uklonjeno ograničenje */
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 3px !important; /* Smanjeno sa 5px na 3px */
        flex-direction: column !important;
    }
    header .container > .d-flex.align-items-start > form.d-flex input.form-control {
        margin-right: 0 !important;
        margin-bottom: 8px !important; /* Smanjeno sa 10px na 8px */
        height: 42px !important;
        font-size: 15px !important;
    }
    header .container > .d-flex.align-items-start > form.d-flex button.search-button {
    width: 100% !important;
        height: 42px !important;
        font-size: 15px !important;
  }

    main.container {
        margin-top: 10px !important;
        padding: 10px !important;
    }

    .col-lg-2-4 {
        flex: 0 0 50% !important; /* Svaka kartica zauzima 50% širine */
        max-width: 50% !important; /* Ograničava maksimalnu širinu na 50% */
        margin-bottom: 15px !important; /* Zadržavamo vertikalni razmak */
        padding-left: 5px !important;  /* Dodajemo levi padding za razmak */
        padding-right: 5px !important; /* Dodajemo desni padding za razmak */
        box-sizing: border-box !important; /* Osigurava da padding bude unutar definisane širine */
    }

    footer .col-md-4 {
    width: 100% !important;
        text-align: center;
        margin-bottom: 20px;
    }
    footer .list-unstyled {
        padding-left: 0;
    }

    .item-card-image { /* Ovo je kontejner koji drži sliku */
        height: 130px !important;
        position: relative !important;
        content-visibility: auto; /* Dodajte ovo */
        contain: layout paint; /* Dodajte ovo */
  }
  
    .item-card-image img { /* Ovo je sama slika unutar kontejnera */
        height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    aspect-ratio: 16/9; /* Pomaže browseru da rezerviše prostor pre učitavanja slike */
  }

    /* Unapređenje rasporeda unutar kartice oglasa */

    .item-card-content {
        display: flex !important;
        flex-direction: column !important; /* Ređa elemente vertikalno */
        flex-grow: 1 !important;           /* Omogućava da ovaj deo raste i popuni visinu kartice */
        padding: 8px !important;          /* Zadržavamo postojeći padding ili ga prilagodite */
        padding-top: 4px !important;
  }
  
    /* Naslov - ne menjamo ga sada, samo da je tu radi konteksta */
  .item-card-title {
    font-size: 14px !important;
        font-weight: 600 !important;
        margin-bottom: 2px !important; /* Originalno je bilo 2px */
        /* ... ostali stilovi za title ... */
    }

    /* Informacije o oglasu (Kategorija, Grad, Godište) */
  .item-card-info,
  .item-card-detail {
        font-size: 11.1px !important; /* Veličina fonta koju smo ranije podesili */
        margin-bottom: 0.3px !important; /* Originalno je bilo 1px ili 2px */
        line-height: 1.2 !important;
        /* ... ostali stilovi za info/detail ... */
    }

    /* Cena oglasa */
    .item-card-price {
        font-size: 15.5px !important; /* Veličina fonta koju smo ranije podesili */
        font-weight: 700 !important;
        color: #e40002 !important;
        margin-top: 2px !important;    /* Dodajemo marginu iznad cene */
        margin-bottom: 2px !important; /* Dodajemo marginu ispod cene, pre dugmeta */
        text-align: center !important;    /* Poravnanje cene ulevo, ako je potrebno */
        width: 100% !important;         /* Da zauzme punu širinu */
    }

    /* Dugme "Detalji" */
    .item-card-button {
        width: 100% !important;         /* Dugme zauzima celu širinu */
        padding: 8px 10px !important;   /* Povećavamo padding da dugme bude "punije" */
        font-size: 13px !important;     /* Malo veći font za dugme */
    text-align: center !important;
        margin-top: auto !important;    /* Ovo gura dugme na dno .item-card-content */
        /* Ostali stilovi za .item-card-button iz vašeg starog CSS-a se zadržavaju, npr: */
        background-color: #e40002 !important;
    color: white !important;
        text-decoration: none !important;
        border-radius: 4px !important; /* Originalno je bilo 4px */
        transition: background-color 0.2s !important;
        display: block !important; /* Osigurava da zauzme punu širinu i da margin-top:auto radi kako treba */
    }

    /* Uklanjamo flexbox stilove sa .item-card-footer ako postoji i ako je on držao cenu i dugme, */
    /* jer sada .item-card-content kontroliše raspored */
    .item-card-footer {
        display: block !important; /* Vraćamo na block da ne remeti novi raspored */
        padding-top: 0 !important;
        margin-top: 0 !important;
  }
  
    /* Postavljanje .nav-button-messages kao relativnog da bi notifikacija bila pozicionirana u odnosu na njega */
    .logo-nav-container .nav-button-messages {
        position: relative !important; 
    }

    /* Stilovi za samu notifikacionu ikonicu "!" */
    #poruke-notification {
        position: absolute !important;
        top: 3px !important;       /* Podesite za precizno vertikalno poravnanje unutar dugmeta */
        right: 3px !important;      /* Podesite za precizno horizontalno poravnanje unutar dugmeta */
        width: 18px !important;     /* Veličina kružića */
        height: 18px !important;
        background-color: #e40002 !important; /* Crvena pozadina kao na slici */
        color: white !important;             /* Beli uzvičnik */
        border-radius: 50% !important;       /* Da bude kružić */
        font-size: 12px !important;          /* Veličina uzvičnika */
        font-weight: bold !important;
        /* display: flex !important;  <--- UKLONITE ILI ZAKOMENTARIŠITE OVO */
        /* JavaScript će kontrolisati display, inicijalno može biti display: none; ako želite da je sakriven po defaultu */
        display: none; /* Inicijalno sakriven, JS će ga prikazati ako treba */
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important; 
        z-index: 10 !important;              /* Da bude iznad teksta dugmeta */
    }

    /* Informacije o oglasu - minimalna visina */
    .item-card-info,
    .item-card-detail {
        min-height: 14px !important; /* Visina jedne linije teksta */
    }
    
    /* Osiguravamo da cena i dugme budu na dnu */
    .item-card-price {
        margin-top: auto !important; /* Gura cenu prema dnu */
        padding-top: 5px !important;
    }

    /* NOVE IZMENE ZA PRIKAZ TABELA I KARTICA */
    
    /* Uklanjamo fiksnu visinu kartica */
    .card {
        height: auto !important; /* Umesto fiksne visine, neka se prilagodi sadržaju */
        min-height: unset !important; /* Uklanjamo minimalnu visinu ako postoji */
        margin-bottom: 10px !important; /* Dodajemo razmak između kartica */
    }
    
    /* Prilagođavamo sadržaj kartica */
    .card-body {
        padding: 10px !important; /* Smanjujemo padding da bude kompaktnije */
        flex-grow: 0 !important; /* Sprečavamo da se razvlači */
    }
    
    /* Samo postavljamo nazive gore, a vrednosti dole */
    .card table.table td {
        position: relative !important;
        padding-top: 18px !important; /* Prostor za naziv */
    }
    
    /* Stilizujemo nazive polja */
    .card table.table td strong {
        position: absolute !important;
        top: 3px !important;
        left: 5px !important;
        font-size: 10px !important;
        color: #666 !important;
        display: block !important;
        line-height: 1 !important;
    }
    
    /* Uklanjamo nepotreban prostor iz tabele */
    .card table.table {
        margin-bottom: 0 !important;
    }
    
    /* Poboljšavamo prikaz cene */
    .display-3 {
        margin: 0 !important;
        padding: 5px 0 !important;
        font-size: 2rem !important;
    }
    
    /* Uklanjamo višak prostora iz kartica */
    .card.mb-4 {
        margin-bottom: 10px !important;
    }
    
    /* Optimizacija za ikonske fontove ako se koriste */
    .fa, .fas, .far, .fab, [class^="icon-"], [class*=" icon-"] {
        font-display: swap !important; /* Poboljšava CLS i LCP */
    }

    /* DODATO IZ LOKALNE VERZIJE - POLJA ZA PRETRAGU PO DVA U REDU */
    /* Direktno rešenje za problem sa malim dugmićima u kategoriji */
    div[class="row"] {
        display: block !important;
    }
    
    div[class="col"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin-bottom: 10px !important;
    }
    
    /* Ciljamo sve dugmiće u kategoriji */
    div[class="col"] > button,
    div[class="col"] > select,
    div[class="col"] > div > button {
        width: 100% !important;
        display: block !important;
        text-align: left !important;
    }

    /* Najagresivniji pristup za filtere */
    form .col {
        float: left !important;
        width: 48% !important;
        margin: 0 1% 10px 1% !important;
        clear: none !important;
    }
    
    form .col:nth-child(2n+1) {
        clear: left !important;
    }
    
    form .col button,
    form .col select,
    form .col .dropdown-toggle {
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
    }
    
    /* Osigurava da dugme za pretragu bude preko celog reda */
    form .col:has(button[type="submit"]),
    form .col:has(.btn-primary) {
        width: 100% !important;
        clear: both !important;
    }
    
    /* Resetuje sve flex i grid svojstva */
    form .row {
        display: block !important;
        flex: none !important;
        grid: none !important;
    }
    
    /* Inline CSS direktno u elementima */
    form .col[style*="flex"] {
        flex: none !important;
    }

    /* Direktno ciljanje na formu za pretragu sa col-md-2 elementima */
    form[action="/search/"] .col-md-2 {
        width: 48% !important;
        float: left !important;
        margin: 0 1% 10px 1% !important;
        flex: none !important;
        max-width: 48% !important;
    }
    
    /* Polje za unos teksta */
    form[action="/search/"] input[type="text"] {
        width: 100% !important;
        float: none !important;
        clear: both !important;
        margin-bottom: 10px !important;
    }
    
    /* Dugme za pretragu */
    form[action="/search/"] button[type="submit"] {
        width: 100% !important;
        float: none !important;
        clear: both !important;
        margin-top: 0px !important;
    }
    
    /* Osigurava da sadržaj ne prelazi van okvira */
    form[action="/search/"]::after {
        content: "" !important;
        display: table !important;
        clear: both !important;
    }
} /* Kraj @media (max-width: 767px) */