@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

    @font-face {
  font-family: 'Montserrat-Bold';
  src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
       
       .uslovi-box {
            background-color: rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            padding: 1rem;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .uslovi-title {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            font-weight: 600;
            font-size: 1rem;
            color: #fff;
            margin-bottom: 0.5rem;
        }
        .uslovi-title svg {
            flex-shrink: 0;
            width: 18px;
            height: 18px;
        }
        .uslovi-text {
            font-size: 0.9rem;
            color: #e0e0e0;
            margin-bottom: 0;
            white-space: pre-wrap;
            line-height: 1.5;
            padding-left: 28px; /* Poravnanje sa tekstom naslova */
        }
        
        /* NOVI STIL ZA OBAVEŠTENJE O DEAKTIVACIJI */
        .deaktivirano-box {
            background-color: rgba(255, 204, 0, 0.1); /* Blaga žuta pozadina */
            border-radius: 8px;
            padding: 1rem;
            border: 1px solid rgba(255, 204, 0, 0.3);
        }
        .deaktivirano-title {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            font-weight: 600;
            font-size: 1rem;
            color: #ffcc00; /* Jarka žuta boja za naslov */
            margin-bottom: 0.5rem;
        }
        .deaktivirano-title svg {
            flex-shrink: 0;
            width: 18px;
            height: 18px;
        }
        .deaktivirano-text {
            font-size: 0.9rem;
            color: #e0e0e0;
            margin-bottom: 0;
            white-space: pre-wrap;
            line-height: 1.5;
            padding-left: 28px;
        }
        
@keyframes animateDateFilter {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes scrollLogos {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-5 * (150px + 2rem))); }
}

:root {
    --card-bg: #ffffff;
    --card-placeholder-bg: #E0E0E0;
    --text-color: #333333;
    --text-light: #666666;
    --accent-color: #212529;
    --star-color: #FFC107;
    --rating-text-color: #ffffff;
    --footer-icon-color: #ffffff;
            --font-family: 'Montserrat', sans-serif; /* <<< IZMENJENO: Postavljen Montserrat kao glavni font */
    --border-radius-large: 16px;
    --border-radius-medium: 12px;
    --border-radius-small: 8px;
    --border-radius-pill: 50px;
    --shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    --shadow-light: 0 3px 10px rgba(0, 0, 0, 0.12);
    --main-padding-mobile: 1.5rem;
    --main-padding-desktop: 2rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: var(--font-family);
    color: #ffffff; /* Postavljamo osnovnu boju teksta na belu */
    line-height: 1.6;
    padding-bottom: 90px; /* Povećan padding zbog futera */
    overflow-x: hidden;
    min-height: 100vh;
    background: #000000 !important;
}

.contact-main {
    padding: 1.5rem var(--main-padding-mobile);
    position: relative;
    z-index: 1;
    max-width: 1024px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .contact-main {
        padding: 2.5rem var(--main-padding-desktop);
    }
}

/* Koristimo postojeći stil za naslove sekcija */
.contact-title {
    font-size: 2.5rem;
    font-weight: bolder;
    margin-bottom: 2rem;
    position: relative;
    color: transparent;
    font-family: 'Montserrat-Bold', sans-serif;
    letter-spacing: -1px;
    text-align: left;
}

.contact-title::before, .contact-title::after {
    content: 'Kontakt'; /* Postavljamo tekst ovde */
    position: absolute;
    top: 0;
    left: 0;
    -webkit-background-clip: text;
    background-clip: text;
    font-weight: bolder;
    font-family: 'Montserrat-Bold', sans-serif;
    letter-spacing: -1px;
}

.contact-title::before {
    color: rgba(255, 255, 255, 0.5);
    transform: translate(1px, 1px);
    filter: blur(3px);
    z-index: -1;
}

.contact-title::after {
    background-image: linear-gradient(180deg, #FEE9F2 0%, #FFFFFF 100%);
    -webkit-text-fill-color: transparent;
}


/* Kontejner koji obuhvata detalje i mapu */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

@media (min-width: 992px) {
    .contact-wrapper {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        align-items: flex-start;
    }
}

/* Lista sa kontakt detaljima */
.contact-details {
    display: grid;
    gap: 1.5rem;
}

/* Pojedinačni kontakt item (telefon, email, itd.) */
.contact-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1rem;
    border-radius: var(--border-radius-medium);
    transition: background-color 0.3s ease;
}

.contact-item:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Ikonica */
.contact-icon {
    flex-shrink: 0;
    background-color: rgba(255, 255, 255, 0.1);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-icon svg {
    width: 24px;
    height: 24px;
    fill: #e0e0e0;
}

/* Tekstualni deo (naslov i vrednost) */
.contact-text h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.2rem 0;
    font-family: 'Montserrat-Bold', sans-serif;
}

.contact-text p {
    font-size: 0.9rem;
    color: #e0e0e0;
    margin: 0;
    line-height: 1.5;
}

/* Kontejner za mapu */
.map-container {
    height: 400px; /* Fiksna visina za mobilni */
    border-radius: var(--border-radius-large);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.map-container iframe {
    filter: invert(90%) grayscale(80%); /* Stil za tamnu temu mape */
}


@media (min-width: 992px) {
    .map-container {
        height: 100%; /* Da zauzme celu visinu grida na desktopu */
        min-height: 450px;
    }
}

/* ============================================= */
/* === SVI STILOVI ISKLJUČIVO ZA KONTAKT FORMU === */
/* ============================================= */

/* Kontejner (omot) cele forme.
   Daje mu pozadinu sa providnošću, zaobljene ivice i unutrašnji razmak (padding). */
.contact-form-section {
    background-color: rgba(255, 255, 255, 0.08); /* Polu-providna bela pozadina */
    border: 1px solid rgba(255, 255, 255, 0.2);  /* Svetla ivica sa providnošću */
    padding: 2rem;                              /* Unutrašnji razmak sa svih strana */
    border-radius: 16px; /* Ista vrednost kao var(--border-radius-large) za uniformnost */
}

/* Naslov iznad forme ("Pošaljite nam poruku").
   Definiše veličinu fonta, debljinu, boju i razmak ispod naslova. */
.form-title {
    font-family: 'Montserrat-Bold', sans-serif; /* Korišćenje debljeg fonta */
    font-size: 1.75rem;                         /* Veličina fonta */
    font-weight: 700;                           /* Debljina fonta */
    color: #ffffff;                             /* Bela boja teksta */
    margin-bottom: 1.5rem;                      /* Razmak ispod naslova */
    letter-spacing: -0.5px;                     /* Blago smanjen razmak između slova */
}

/* Grupa koja sadrži labelu (ako postoji) i input polje.
   Služi da napravi vertikalni razmak između polja. */
#kontakt-forma .form-group {
    margin-bottom: 1rem; /* Razmak ispod svakog input polja */
}

/* Stilovi koji se odnose na SVA input polja (tekst, email, telefon) i textarea.
   Ovo je osnovni izgled polja. */
#kontakt-forma input[type="text"],
#kontakt-forma input[type="email"],
#kontakt-forma input[type="tel"],
#kontakt-forma textarea {
    width: 100%;                                /* Polja zauzimaju 100% širine roditelja */
    background-color: rgba(0, 0, 0, 0.2);       /* Tamna, polu-providna pozadina */
    border: 1px solid rgba(255, 255, 255, 0.2);  /* Svetla ivica */
    color: #ffffff;                             /* Bela boja teksta koji se unosi */
    padding: 0.85rem 1rem;                      /* Unutrašnji razmak za komfor */
    border-radius: 12px;                        /* Zaobljene ivice, kao var(--border-radius-medium) */
    font-family: 'Montserrat', sans-serif;      /* Osnovni font definisan na početku */
    font-size: 0.95rem;                         /* Veličina fonta unutar polja */
    transition: all 0.3s ease;                  /* Glatka tranzicija za sve promene (fokus, hover...) */
}

/* Stil za placeholder tekst (npr. "Ime i prezime"). */
#kontakt-forma input::placeholder,
#kontakt-forma textarea::placeholder {
    color: #a0a0a0;                             /* Svetlo siva boja za placeholder */
}

/* Stil koji se primenjuje kada korisnik KLIKNE na polje (stanje fokusa).
   Ovo je važno za korisničko iskustvo. */
#kontakt-forma input:focus,
#kontakt-forma textarea:focus {
    background-color: rgba(0, 0, 0, 0.4);       /* Pozadina postaje malo tamnija */
    border-color: rgba(255, 255, 255, 0.5);      /* Ivica postaje svetlija i uočljivija */
    box-shadow: none;                           /* Uklanja podrazumevani plavi "outline" */
    outline: none;                              /* Uklanja podrazumevani "outline" i u drugim browserima */
}

/* Specifična pravila samo za polje za poruku (textarea). */
#kontakt-forma textarea {
    resize: vertical;                           /* Dozvoljava korisniku da menja visinu polja, ali ne i širinu */
    min-height: 120px;                          /* Minimalna početna visina */
}

.menu-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 2rem;
  text-align: center;
  background-image: linear-gradient(180deg, #FEE9F2 0%, #FFFFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-family: 'Montserrat-Bold', sans-serif;
  letter-spacing: -1px;
}



/* Stil za dugme za slanje poruke.
   Koristi isti vizuelni identitet kao i druga glavna dugmad u dizajnu. */
#kontakt-forma .submit-btn {
    width: 100%;                                /* Zauzima punu širinu */
    padding: 0.85rem;                           /* Unutrašnji razmak */
    border: none;                               /* Bez ivice */
    border-radius: 50px; /* Vrednost kao var(--border-radius-pill) za oblik pilule */
    color: #ffffff;                             /* Bela boja teksta */
    font-size: 1rem;                            /* Veličina fonta */
    font-weight: 700;                           /* Debeo font */
    text-transform: uppercase;                  /* Sva slova velika */
    cursor: pointer;                            /* Pokazuje "prst" kursor pri prelasku */
     transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: linear-gradient(-45deg,  #eacea5, #755a3c, #eacea5);
    background-size: 400% 400%;
    animation: animateDateFilter 18s ease infinite;
    margin-top: 1rem;                           /* Razmak iznad dugmeta */
}

/* Stil za dugme kada se pređe mišem preko njega (hover). */
#kontakt-forma .submit-btn:hover {
    transform: translateY(-2px);                /* Blago podiže dugme */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);      /* Dodaje suptilnu senku */
}

/* Pravilo za desktop prikaz kako bi forma i info blok bili iste visine. */
@media (min-width: 992px) {
    .full-height-col {
        height: 100%;
    }
}

/* ======================================================= */
/* === STILOVI ZA SEARCH MODAL - FINALNA VERZIJA === */
/* ======================================================= */

/* IZMENJENO: Pravila za pozicioniranje i animaciju za centrirani prikaz */
#searchModal .modal-dialog.modal-command-palette {
    max-width: 640px;
    margin-left: auto; /* Obrisana fiksna margina sa vrha */
    margin-right: auto;
    width: calc(100% - 2rem);
    transform: scale(0.95); /* Promenjena animacija u scale */
    opacity: 0;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

#searchModal.show .modal-dialog.modal-command-palette {
    transform: scale(1);
    opacity: 1;
}

/* Glavni kontejner modala */
#searchModal .modal-content {
    position: relative;
    background-color: #18181B; 
    border: 1px solid #333;
    border-radius: var(--border-radius-large, 16px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    color: #E4E4E7;
}

/* Stil za 'X' dugme */
#searchModal .btn-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    width: 20px;
    height: 20px;
    filter: grayscale(1) invert(1) brightness(0.7);
    opacity: 0.7;
    transition: all 0.2s ease;
}

#searchModal .btn-close:hover {
    opacity: 1;
    filter: grayscale(1) invert(1) brightness(1);
    transform: scale(1.1);
}

#searchModal .modal-body {
    padding: 0;
}

/* Polje za pretragu */
#searchModal .search-wrapper {
    position: relative;
    padding: 12px;
}

#searchModal .search-icon {
    position: absolute;
    top: 50%;
    left: 24px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    fill: #71717A;
}

#searchModal #search-input {
    width: 100%;
    background-color: transparent;
    border: none;
    color: #F4F4F5;
    padding: 12px 50px;
    font-size: 1.25rem;
    font-family: 'Montserrat', sans-serif;
}

#searchModal #search-input:focus {
    box-shadow: none;
    outline: none;
}

#searchModal #search-input::placeholder {
    color: #71717A;
}

/* Kontejner sa rezultatima */
#searchModal .search-results-wrapper {
    max-height: 400px;
    overflow-y: auto;
    padding-bottom: 12px;
}

#searchModal .results-separator {
    border: none;
    height: 1px;
    background-color: #27272A;
    margin: 0;
}

/* Lista bendova */
#searchModal #all-bands-list {
    list-style: none;
    padding: 12px;
    margin: 0;
}

#searchModal #all-bands-list li a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 12px 16px;
    border-radius: var(--border-radius-medium, 12px);
    cursor: pointer;
    transition: background-color 0.2s ease;
    color: #E4E4E7;
    text-decoration: none;
}

#searchModal #all-bands-list li a:hover,
#searchModal #all-bands-list li a.active {
    background-color: #eacea5aa;
    color: #ffffff;
}

#searchModal #all-bands-list .band-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #9CA3AF;
}

#searchModal #all-bands-list li a:hover .band-icon {
    color: #ffffff;
}

#searchModal #all-bands-list span {
    font-size: 1rem;
    font-weight: 500;
}

/* Poruka kada nema rezultata */
#searchModal #no-results-message {
    text-align: center;
    padding: 3rem 1rem;
    color: #71717A;
    font-size: 1rem;
}
#searchModal #no-results-message p { margin: 0; }
#searchModal #search-term-display { font-style: italic; font-weight: bold; }


a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

[data-event-card] { cursor: pointer; }
.event-card.large { transition: transform 0.2s ease-in-out; border-radius: 30px !important;}
.band-name{
    margin-bottom: .3rem;
}
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem var(--main-padding-mobile);
    top: 0;
    z-index: 1000;
    color: #ffffff;
}

.logo img { height: 50px; }
        
.language-selector {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.language-toggle {
    background: none; border: none; cursor: pointer;
    padding: 0.5rem; display: flex;
}
.language-toggle svg { width: 24px; height: 24px; fill: #ffffff; }

.language-dropdown {
    display: none; position: absolute; top: 120%; right: 0;
    background-color: rgba(20, 20, 20, 0.8);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-radius: var(--border-radius-medium);
    list-style: none; padding: 0.5rem 0; margin: 0; min-width: 120px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); z-index: 1100;
}
.language-dropdown.active { display: block; }
.language-dropdown li a { display: block; padding: 0.75rem 1.2rem; color: #f0f0f0; font-size: 0.95rem; }
        
main {
    padding: 1.5rem var(--main-padding-mobile);
    position: relative;
    z-index: 1;
}

main > section:not(:last-child) { margin-bottom: 2.5rem; }


.section-title {
    font-size: 2.5rem;
    font-weight: bolder;
    margin-bottom: 1.2rem;
    position: relative;
    color: transparent;
    font-family:'Montserrat-Bold', sans-serif;
    letter-spacing: -1px;
}
.section-title::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    -webkit-background-clip: text;
    background-clip: text;
        font-weight: bolder;
    font-family:'Montserrat-Bold', sans-serif;
    letter-spacing: -1px;
    color: #fff !important;

}


.uskoroTitle::before, .uskoroTitle::after {
    font-size: 2.2rem !important;
}



.section-title::before {
    color: rgba(255, 255, 255, 0.5); /* Malo posvetljeno za crnu pozadinu */
    transform: translate(1px, 1px);
    z-index: -1;
}
.section-title::after {
    background-image: linear-gradient(180deg, #FEE9F2 0%, #FFFFFF 100%);
    -webkit-text-fill-color: transparent;
}


.partners-section .section-title { text-align: center; }

.date-filter-container {
    margin: 0 calc(-1 * var(--main-padding-mobile)) 1.5rem;
    overflow-x: auto; padding: 0.5rem 0;
    -ms-overflow-style: none; scrollbar-width: none;
}
.date-filter-container::-webkit-scrollbar { display: none; }
.date-chips { display: flex; gap: 0.75rem; padding: 0 var(--main-padding-mobile); }

.date-chip {
 background: rgba(255, 255, 255, 0.25);      
      -webkit-backdrop-filter: blur(15px); 
      backdrop-filter: blur(6px);    padding: 0.6rem 1rem; border-radius: var(--border-radius-pill);
    font-size: 0.9rem; font-weight: 500; cursor: pointer;
    white-space: nowrap; transition: all 0.3s ease; border: 1px solid transparent;
}
.date-chip:hover {  background: rgba(255, 255, 255, 0.45);      
 }
.date-chip.active {
    color: #fff;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: linear-gradient(-45deg,  #eacea5, #755d43, #eacea5);
    background-size: 400% 400%;
    animation: animateDateFilter 18s ease infinite;
        font-family:'Montserrat-Bold', sans-serif;

}















.event-card.large {
    border-radius: var(--border-radius-large);
    overflow: hidden;
    background-color: transparent;
    box-shadow: var(--shadow), inset 0px -2px 2px -2px rgba(0, 0, 0, 0.7);
    position: relative;
    isolation: isolate;
}


.card-image-containerNow{
     height: 500px !important;

}
    @media (max-width: 768px) {
        .card-image-containerNow {
  height: 380px !important;

}
    }
.card-info-content {
    padding: 1rem 1.2rem;
    border-bottom-left-radius: var(--border-radius-large);
    border-bottom-right-radius: var(--border-radius-large);
    position: relative;
    z-index: 1;
}
.event-card.large {
    background-color: transparent;
    border-radius: var(--border-radius-large);
    overflow: hidden;
    box-shadow: var(--shadow), inset 0px -2px 2px -2px rgba(0, 0, 0, 0.7);
    position: relative;
    isolation: isolate;
}

.card-info {
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.card-image-container img {
    width: 100%; height: 100%; object-fit: cover;
    display: block; position: relative; z-index: 1;
    transition: opacity 0.4s ease-in-out;
}
.event-time-indicator, .rating {
    position: absolute; top: 1rem;
    background-color: rgba(0, 0, 0, 0.6); color: white;
    padding: 0.3rem 0.6rem; border-radius: var(--border-radius-small);
    font-size: 0.9rem; z-index: 2; display: inline-flex; align-items: center;
}
.event-time-indicator { left: 1rem; } .rating { right: 1rem; }
.rating svg { fill: var(--star-color); }


.card-info {
    position: absolute; bottom: 0; left: 0; right: 0;
    color: white; z-index: 2;margin-bottom: -15px !important;margin-right: -10px !important;

}

.now-section #event-band-name{
    font-size: 1.85rem !important;
}


article{
    border-radius: var(--border-radius-large);
}

.card-info::before {
    content: ''; 
    position: absolute; 
    top: 0;  
    bottom: 0; 
    left: 0; 
    right: 0;
    background-color: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); 
    z-index: -1;
}
.card-info-content { padding: 1rem 1.2rem;     border-bottom-left-radius: var(--border-radius-large);
    border-bottom-right-radius: var(--border-radius-large); }
.card-info .band-name { font-size: 1.7rem;font-family:'Montserrat-Bold', sans-serif; letter-spacing: -1px;
} 
.card-info .date { color: #ccc; font-size: 0.75rem; margin-bottom: 15px !important;}

.more-section .horizontal-scroll-container {
    display: flex; gap: 1rem; overflow-x: auto;
    margin: 0 calc(-1 * var(--main-padding-mobile));
    padding: 0.2rem var(--main-padding-mobile) 1rem;
    -ms-overflow-style: none; scrollbar-width: none;
}
.more-section .horizontal-scroll-container::-webkit-scrollbar { display: none; }
.more-section .event-card.large { min-width: 260px; box-shadow: none; }
.more-section .card-image-container { height: 250px; }
.more-section .card-info .band-name { font-size: 1.4rem; }
.more-section .card-info .date { font-size: 0.7rem; }

.logos-slider {
    width: 100%; overflow: hidden; position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.logos-track {
    display: flex;
    justify-content: space-around !important;
    width: calc(10 * (150px + 5rem));
    animation: scrollLogos 30s linear infinite;
}
.logo-item { flex-shrink: 0; width: 150px; margin: 0 1rem; }

.soon-list { display: grid; gap: 1rem; }
.soon-item {
    display: flex; align-items: center; gap: 1rem;
background-color: rgb(0, 0, 0, 0.7);
     backdrop-filter: blur(30px);
       padding:0.4rem;
    border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;

    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    color: var(--text-color); /* Vraćamo tamnu boju teksta za ovaj element */
}


.partneri-item img{
    height: 90px;
    width: auto;
   
}



.soon-item-image-wrapper {
    width: 80px; height: 80px; border-radius: 17px; 
    overflow: hidden; flex-shrink: 0;
}
.soon-item-info .date { font-size: 0.8rem; color: #fff; }
.soon-item-info .band-name { font-size: 1.225rem; font-weight: bold !important; color: #fff;     font-family: 'Montserrat-Bold', sans-serif;    letter-spacing: -1px;
}

.date-info span, 
.time-info span{
    font-size: 12px !important;
}
 
.main-nav { display: none; }
.logo-item img{
        height: 60px;
    }
    
@media (max-width: 768px) {
    .app-footer{
        display: flex !important;
    }
}

@media (min-width: 768px) {
    main { 
        max-width: 1024px;
        margin: 0 auto;
    }
    .main-nav {
        display: flex;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .nav-links { display: flex;}

    .nav-links li{
        padding: 0 30px;
    }

    .nav-links a {
        font-size: 1rem;
        font-weight: 500;
        color: #f0f0f0;
        white-space: nowrap;
    }
    .more-section .horizontal-scroll-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        overflow-x: visible; gap: 1.5rem; margin: 0; padding: 0.2rem 0;
    }
    .more-section .event-card.large { box-shadow: var(--shadow); }
}

/* --- STILOVI ZA BOOTSTRAP MODAL --- */
#event-modal .modal-dialog {
    max-width: 500px;
}
@media (min-width: 992px) {
    #event-modal .modal-dialog {
        max-width: 800px;
    }
}

#event-modal .modal-content {
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    color: #f0f0f0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-large);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

#event-modal .modal-body {
    padding: 0;
}

#event-modal .modal-image-column {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 200px;
    border-top-left-radius: var(--border-radius-large);
    border-top-right-radius: var(--border-radius-large);
}

#event-modal .modal-info-column {
    padding: 1.5rem;
}

#event-modal .btn-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    opacity: 0.9;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    transition: transform 0.2s ease, background-color 0.2s ease;
}
#event-modal .btn-close:hover {
    background-color: rgba(0, 0, 0, 0.7);
    transform: scale(1.1);
    opacity: 1;
}

#event-modal .modal-rating-on-image {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background-color: rgba(0, 0, 0, 0.6);
    color: var(--rating-text-color);
    padding: 0.4rem 0.8rem;
    border-radius: var(--border-radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
}
#event-modal .modal-rating-on-image svg {
    width: 16px;
    height: 16px;
    fill: var(--star-color);
}

.modal-event-details{
    display: flex;
    gap: 1.5rem;
}

.modal-event-details div{
    margin-bottom: 0 !important;
}
#event-modal .modal-band-name {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: #ffffff;
}

#event-modal .modal-event-details p {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    color: #dcdcdc;
    margin-bottom: 0.5rem;
}

#event-modal .modal-event-details svg {
    width: 20px;
    height: 20px;
    fill: #dcdcdc;
}

#event-modal .form-control {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-medium);
    font-family: var(--font-family);
}
#event-modal .form-control::placeholder {
    color: #a0a0a0;
}
#event-modal .form-control:focus {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: none;
    color: #ffffff;
}

#event-modal .modal-reserve-btn {
    width: 100%;
    padding: 0.85rem;
    border: none;
    border-radius: var(--border-radius-pill);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: linear-gradient(-45deg,  #eacea5, #755a3c, #eacea5);
    background-size: 400% 400%;
    animation: animateDateFilter 18s ease infinite;
}
#event-modal .modal-reserve-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

@media (min-width: 992px) {
    #event-modal .modal-image-column {
        min-height: auto;
        border-top-left-radius: var(--border-radius-large);
        border-bottom-left-radius: var(--border-radius-large);
        border-top-right-radius: 0;
    }
    #event-modal .modal-info-column {
        padding: 2.5rem;
    }
}

/* --- ANIMACIJA ZA OTVARANJE I ZATVARANJE MODALA --- */
.modal.fade .modal-dialog {
    transform: scale(0.95) translateY(15px);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.modal.fade.show .modal-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* --- STILOVI ZA NAPOMENU --- */
.add-note-toggle {
    color: #dcdcdc;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s ease;
}
.add-note-toggle:hover {
    color: #ffffff;
}
.add-note-toggle svg {
    transition: transform 0.3s ease-out;
}
.add-note-toggle[aria-expanded="true"] svg {
    transform: rotate(45deg);
}
.modal-reservation-form .mb-2 + .modal-reserve-btn,
.modal-reservation-form .collapse + .modal-reserve-btn {
    margin-top: 1.5rem !important; 
}

#jeziciIcon {
    height: 30px;
}

/* ===== IZMENE ZA FUTER ===== */

/* Osnovni stil za kontejner futera */
.app-footer {
    position: fixed;
    bottom: 1rem;
    left: 50%; /* Centriramo futer */
    transform: translateX(-50%); /* Precizno centriranje */
    width: calc(100% - 5rem); /* Širina futera sa marginama */
    max-width: 500px; /* Maksimalna širina da ne bude preširok na tabletima */
    display: none; /* Inicijalno sakriven, prikazuje ga @media query */
    justify-content: space-around;
    align-items: center;
    padding: 0.5rem 0;
    z-index: 1000;
    border-radius: 40px;
     background: rgba(255, 255, 255, 0.25);      
      -webkit-backdrop-filter: blur(15px); 
      backdrop-filter: blur(6px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

/* Osnovni stil za svaki link u futeru */
.app-footer a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 50%; /* Podrazumevano su svi krugovi */
    background-color: rgba(255, 255, 255, 0.3);
    transition: all 0.4s ease-in-out;
    gap: 8px; /* Razmak između ikonice i teksta */
    color: #fff; /* Bela boja teksta i ikonice */
}

/* Stil za sliku unutar linka */
.app-footer a img {
    height: 15px;
    flex-shrink: 0; /* Sprečava smanjivanje ikonice */
}

/* Podrazumevano sakrivamo tekstualni opis */
.app-footer a span {
    display: none;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Stilovi koji se primenjuju SAMO na aktivni link */
.app-footer a.active {
    background-color: rgba(255, 255, 255, 1); /* Potpuno bela pozadina */
    color: #000; /* Crna boja za tekst i ikonicu */
    border-radius: 30px; /* Menjamo u oblik pilule */
    padding: 7px 16px; /* Povećavamo padding horizontalno */
}

/* Kada je link aktivan, njegova ikonica postaje crna */
.app-footer a.active img {
    filter: invert(1);
}

/* Prikazujemo tekst unutar aktivnog linka */
.app-footer a.active span {
    display: inline;
}

/* Stilizovanje glavnog kontejnera */
.image-container {
  position: relative; /* Ključno da bi pozicionirali .text-overlay preko slike */
  width: 100%; /* Ili fiksna širina, npr. 350px */
  max-width: 400px; /* Opciono, postavi maksimalnu širinu */
  border-radius: 15px; /* Tvoje zaobljenje ivica */
  overflow: hidden; /* OVO JE NAJVAŽNIJI DEO! Osigurava da sve unutra (slika i blur) poštuje zaobljene ivice kontejnera. */
  font-family: Arial, sans-serif; /* Primer fonta */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Opciono, lepa senka */
}

/* Stilizovanje slike unutar kontejnera */
.image-container img {
  width: 100%; /* Slika će uvek popuniti širinu kontejnera */
  display: block; /* Uklanja mali prazan prostor ispod slike */
  margin: 0; /* Uklanja sve default margine */
  padding: 0; /* Uklanja sve default padding-e */
}

/* Stilizovanje overlay-a sa tekstom i blurom */
.image-container .text-overlay {
  position: absolute; /* Postavlja se u odnosu na .image-container */
  bottom: 0;
  left: 0;
  right: 0; /* Rasteže div od leve do desne ivice na dnu */

  /* Efekat zamućenja i pozadina */
  background-color: rgba(0, 0, 0, 0.4); /* Polu-providna crna pozadina kao osnova za blur */
  backdrop-filter: blur(8px); /* Sam efekat zamućenja pozadine. Možeš menjati vrednost u px. */
  -webkit-backdrop-filter: blur(8px); /* Podrška za Safari */

  /* Stilizovanje teksta */
  color: white;
  padding: 20px; /* Unutrašnji razmak za tekst, da ne bude zalepljen za ivice blura */
  margin: 0; /* Resetovanje margine */
}

/* Dodatno stilizovanje teksta unutar overlay-a (opciono) */
.image-container .text-overlay h3 {
  margin-top: 0;
  margin-bottom: 5px;
}

.image-container .text-overlay p {
  margin-bottom: 0;
  font-size: 0.9em;
}