@charset "utf-8";
/* CSS Document */

/* ==========================================
   1. FONTOVI I GLOBALNA PODEŠAVANJA
   ========================================== */
@import url('https://googleapis.com');

/* ==========================================
   GLOBALNA PODEŠAVANJA & TEKST (PT Sans)
   ========================================== */
body {
    font-family: "PT Sans", sans-serif;
    font-weight: 400; /* Regular tekst */
    font-size: 16px;
    line-height: 1.6;
    color: #333333;
    background-color: white;
}

body {
  margin: 0;
  min-height: 100vh; /* Dynamic viewport height */
  display: flex;       /* Optional: helpful for centering content */
  flex-direction: column;
}

strong, b, .bold-tekst {
    font-weight: 700; /* Bold tekst */
}

/* NASLOVI (Playfair Display) */

h1 {
    font-family: "Playfair Display", serif;
    font-weight: 400;
    font-size: 60px;
    line-height: 1.2em;
    color: black;
}


hr {
    border-top: 1px solid #000;
    width: 100%;
    margin: 0px 0px 20px 0px;
    opacity: .25;
} 

@media only screen and (max-width: 768px) {
    h1 {
    margin-left: 0px;
    }
    hr {
    margin: 0px 0px 20px 0px;
    }    
 } 

p {
    font-size: 18px; 
    line-height: 1.5; 
    font-family:'Montserrat', sans-serif; 
    font-weight: 100; 
    color: black; 
} 

span {
    font-style: italic;
    font-weight: 600;
    color: gray;
} 

/* ==========================================
   NAVIGACIJA (Roboto Condensed)
   ========================================== */
/* Navigacija fiksirana na vrhu */
.navbar {
    background-color: rgba(33, 37, 41, 0.95) !important;
    padding: 15px 0;
    }

.navbar ul {
   display: flex;         /* Ređa stavke horizontalno */
   list-style: none;      /* Uklanja tačkice */
   padding: 0;
   gap: 15px;             /* DEFINIŠE RAZMAK IZMEĐU LI STAVKI */
}

@media (max-width: 1300px) {
.nav-link {
   padding-left: 10px !important;
   padding-right: 10px !important;
   font-size: 14px;
   letter-spacing: normal;
    }
}

/* Ciljamo sve linkove Bootstrap navigaciji */
.navbar-nav .nav-link {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 400; /* Regular za obične linkove */
    letter-spacing: 1.5px;
}

/* Aktivni link (stranica na kojoj se korisnik trenutno nalazi) */
.navbar-nav .nav-link.active {
    font-weight: 500; /* Medium za POČETNA */
    color: white;
}

/* Link preko kojeg korisnik pređe mišem */
.navbar-nav .nav-link:hover {
    font-weight: 500; /* Medium pri prelasku mišem */
    color: white;
}
/* Kontejner za ikonicu i badge da bi na mobilnom stajali zajedno */

/* Wrapperu dajemo fiksnu širinu ikonice da ga ništa ne rasteže */
.cart-wrapper {
    position: relative;
    display: inline-block;
    width: 24px;   /* Širina ikonice korpe */
    height: 24px;  /* Visina ikonice korpe */
    vertical-align: middle;
    line-height: 1;
}

#cart-badge {
    color: #fff !important;
    font-size: 9px !important;
    font-weight: bold;
    /* Savršen krug */
    width: 16px;
    height: 16px;
    line-height: 16px; 
    text-align: center;
    border-radius: 50%;
    /* APSOLUTNO POZICIONIRANJE NA IVICU WRAPPERA */
    position: absolute;
    top: -8px;    /* Ide iznad gornje ivice */
    right: -10px; /* Ide desno van ivice */
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Boja badge-a za korpu da ne odskače previše crvenom, možeš probati zlatnu */
#cart-badge {
    background-color: red;
    color: #fff;
}

/* Button SAZNAJ VIŠE i DETALJNIJE */

.button {
  font-family: "Roboto Condensed", sans-serif!important;
  display: inline-block;
  padding: 0.3rem 1.25rem;
  color: #fff;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.0625rem;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border-left: 3px solid lightgray;
  border-right: none;
  border-top: none;
  border-bottom: none;
}
.button:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: gray;
  z-index: -2;
}
.button:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: lightgray;
  transition: all 0.3s;
  z-index: -1;
}
.button:hover {
  color: gray;
}
.button:hover:before {
  width: 100%;
}

@media only screen and (max-width: 768px) {
    .button {
    font-size: .7rem;
    letter-spacing: normal;

    }    
}

/* ==========================================
   3. STRANICA: INDEX
   ========================================== */
        body.index-stranica { 
            background-image: url("../img/brick.webp"); 
            background-repeat: no-repeat; 
            background-attachment: fixed; 
            background-position: center center; 
            background-size: cover; 
            min-height: 100vh; 
            background-color: #000; 
            margin: 0; 
            position: relative; 
        }
        .crni-prelaz { 
            position: fixed; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            background-color: #000; 
            opacity: 0; 
            z-index: 1; 
            pointer-events: none; 
            animation: postepenoZatamni 2.5s ease-in-out 10s forwards; 
        }
        .zuma-kontejner { 
            position: relative; 
            z-index: 2; 
            width: 100%; 
            height: 100vh; 
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
            align-items: center; 
            overflow: hidden; 
        }
        .animirana-slika { 
            width: auto; 
            max-height: 70vh; 
            transform-origin: center center; 
            animation: skupiIrotiraj 8s ease-in-out forwards, fadeOutLogo 2.5s ease-in-out 10s forwards; 
        }
        .strelica-link { 
            margin-top: 30px; 
            text-decoration: none; 
            display: inline-block; 
        }
        .blinking-strelica { 
            width: auto; 
            opacity: 0; 
            animation: pojaviSeIblinkaj 1.5s ease-in-out 8s infinite alternate forwards, pretvoriUBelo 2.5s ease-in-out 10s forwards; 
        }
        }
        .intro-footer { 
            position: fixed; 
            bottom: 15px; 
            width: 100%; 
            text-align: center; 
            z-index: 2; 
            color: rgba(255, 255, 255, 0.4); 
            font-size: 12px; 
            font-family: "Roboto Condensed", sans-serif!important; 
            font-weight: 100;
            letter-spacing: 1px; 
        }
        @keyframes skupiIrotiraj { 
            0% { 
                transform: scale(5) rotate(0deg); 
            } 
            100% { 
                transform: scale(1) rotate(360deg); 
            } 
        }
        @keyframes postepenoZatamni { 
            0% { 
                opacity: 0; 
            } 
            100% { 
                opacity: 1; 
            } 
        }
        @keyframes fadeOutLogo { 
            0% { opacity: 1; 
            } 
            100% { 
                opacity: 0; 
                visibility: hidden; 
            } 
        }
        @keyframes pojaviSeIblinkaj {
            0% { 
                opacity: 0; 
            } 
            100% { 
                opacity: 1; 
            } 
        }
        @keyframes pretvoriUBelo { 
            0% { 
                filter: brightness(1) invert(0); 
            } 
            100% { 
                filter: brightness(0) invert(1); 
            } 
        }


/* ==========================================
   4. STRANICA: HOME
   ========================================== */

/* ==========================================
   5. STRANICA: PRIČA
   ========================================== */
body.prica-stranica, html {
  background-color: #ffffff;
} 
.prica-stranica h1 {
        margin-block-start: .5rem;
        margin-block-end: 1rem;
        margin-left: 40px;
        font-family: "Playfair Display", sans-serif;
        font-weight: 300;
        font-size: 62px;
        line-height: 1.2em;
        color: #000000;
    }
@media only screen and (max-width: 768px) {
    .prica-stranica h1 {
        margin-left: 0px;
    }
    
    .prica-stranica p {
        font-size: 16px;
    }

}
    .row-container {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin: 0;
        padding: 0;
      }

    .text-block {
        flex: 0 0 50%; /* Fiksno 50% širine na desktopu */
        background-color: #fff;
        min-width: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centrira sadržaj vertikalno */
}

      .carousel-container {
        flex: 2;
        /* Allows the carousel to take up proportionally more space than the text */
        min-width: 400px;
        /* Optional: set a minimum width for the carousel */
        /* Ensures the carousel can stretch to full width within its flex container */
        width: 100%;
      }

      /* Make images inside the carousel responsive */
      .carousel-slide img {
        display: block;
        width: 100%;
        height: auto;
        /* Maintain aspect ratio */
      }

@media (max-width: 768px) {
    .carousel-item img  {
        height: auto!important;
    } 
    
    .row-container {
        flex-direction: column;
    }

    .text-block,
    .carousel-container {
        min-width: 100%;
        padding: 15px;
    }
          
    .modal-content  {
        width: 100%!important;
    } 
          
    .modal-header {
        border-bottom: none;
    }          

    p {
        width: 100% !important;
        text-align: left;    
    }

    h1 {
        font-size: 36px!important;
    }
          
    #myImg  {
        margin-top: 30px;
        margin-bottom: 20px;
        width: 100%;
    }          
}

    .carousel-container {
        flex: 1;
        overflow: hidden;
        position: relative;
    }
      
    .carousel-item img {
        height: 575px;
        object-fit: cover;
    }  
      
@media (min-width: 992px) and (max-width: 1200px) {
    .custom-class {
        /* podešavanja za laptop */
    }
        h1 {
        font-size: 36px!important;
    }
    
    p {
        font-size: 14px;
    }
    
    .content {
        margin-top: -50px;
    }
}
      
    .img-thumbnail {
        border: none;
    } 

    /* Blink strelica */
    .blink { animation: blink 1s infinite; padding-top: 30px; }
    @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }




/* ==========================================
   6. STRANICA: NAŠA VINA
   ========================================== */

    /* Osnovni reset i visina */
    html, body {
        min-height: 100vh;
        margin: 0;
        background-color: white;
    }

    body.vina-stranica {
    }

    .bg {
        background-image: url("../img/nasa-vina.webp");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed; /* Pozadina stoji dok se skroluje */
    }

    /* Overlay preko cele strane */
    .overlay {
        min-height: 100vh;
        width: 100%;
        background-image: url("assets/img/overlay-2.png");
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centriranje po vertikali */
    }

    .content-box {
        width: 50%;
        float: right;
        padding: 40px;
        margin-top: 100px; /* Razmak od navbara */
    }

    .vina-stranica h1 {
        font-family: "Playfair Display", serif;
        font-weight: 300;
        font-size: 60px;
        line-height: 1.2em;
        color: #ffffff;
    }

    .vina-stranica p {
        font-size: 18px;
        line-height: 1.5;
        font-family: 'PT Sans', sans-serif;
        font-weight: 300;
        color: #ffffff;
    }

    @media only screen and (max-width: 768px) {
    .content-box {
        width: 100%;
        padding-top: 330px;
    }
        h1 { font-size: 36px !important; }
        
        p {
            text-align: left;
            font-size: 16px;
        }

        .bg {
            background-image: url("assets/img/nasa-vina-small.jpg")!important;
        }
        
        br { display: none; } /* Uklanja suvišne razmake na mobilnom */
    }

        a {
            text-decoration: none;
        }
        
/* Stilovi za mobilnu sekciju */
.wines-hero-mobile {
    padding-top: 76px; /* Razmak koji sprečava da fiksni navbar prekrije sliku */
}

.wines-mobile-img-wrapper {
    position: relative;
    width: 100%;
}


/* ==========================================================================
   1. DESKTOP STIL (Visina 900px, slika fiksna, tekst skroluje)
   ========================================================================== */
body.sva-vina-stranica {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-image: url(../img/loza.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

h1 {
  font-size: 60px;   
}

.stranica-kontejner {
  display: flex;
  flex-direction: row; /* Tekst levo, slika desno */
  width: 100%;
  max-width: 1200px;
  height: 900px; /* KONSTANTA NA DESKTOPU */
  background-color: transparent;
  overflow: hidden; 
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
}

/* Leva strana - Vaš kod koji je lepo radio */
.tekstualni-deo {
  flex: 1;
  padding: 0px 40px; 
  display: flex;
  flex-direction: column;
  height: 100%; /* Zauzima svih 800px visine unutrašnjosti */
  box-sizing: border-box;
  
  /* KLJUČNI DODATAK: Sprečava da slika na desnoj strani uništi skrol na levoj strani */
  min-height: 0; 
}

.tekstualni-deo h2 {
  font-family: "PT Sans", sans-serif;
  font-style: italic;    
  font-size: 24px;
  margin-bottom: 20px;
  flex-shrink: 0; 
}

/* Vaš ključni deo za pasus koji je lepo radio */
.glavni-tekst {
  font-size: 16px;
  line-height: 1.5; 
  color: #333;
  
  overflow-y: auto; /* Skrol se pojavljuje samo ako tekst pređe visinu */
  flex-grow: 1; /* Tekst zauzima sav preostali prostor do dna */
  padding-right: 15px; 
}


/* Vaš ključni deo za pasus koji je lepo radio */
/* Tekst */
.opis-vina {
    font-family: "PT Sans", sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 1px;
    padding-top: 8px;
}  

@media only screen and (max-width: 768px) {
    .opis-vina {
    font-family: "PT Sans", sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;

    }    
}

/* Desna strana - Slika (Izjednačena visina) */
.slika-deo {
  flex: 1;
  height: 100%; /* Eksterno drži sliku u punoj visini od 800px */
}

.slika-deo img {
  width: 100%;
  height: 100%; /* Interno rasteže samu sliku na 800px */
  object-fit: cover; /* Slika se ne deformiše i popunjava prostor */
}

.btn-list {
    /* Dimenzije kvadrata */
    width: 34px;
    height: 34px;
    
    /* Blago zaobljene ivice */
    border-radius: none; 
    
    /* Centriranje strelice (SVG) */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Izgled (prilagodi svojim bojama) */
    background-color: darkslategray;
    color: #000;
    
    /* Ponašanje */
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s;
}

.btn-list svg {
    fill: white;
}

/* DUGME 'DODAJ U KORPU' */
.button {
  font-family: "Roboto Condensed", sans-serif!important;
  display: inline-block;
  padding: 0.3rem 1.25rem;
  color: white;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.0625rem;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border-left: 3px solid #5a796f;
  border-right: none;
  border-top: none;
  border-bottom: none;
}
.button:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: darkslategray;
  z-index: -2;
}
.button:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: lightgray;
  transition: all 0.3s;
  z-index: -1;
}
.button:hover {
  color: darkslategray;
}
.button:hover:before {
  width: 100%;
}


/* ==========================================================================
   2. MOBILNI STIL (Prilagođeno: Slika 800px, bez unutrašnjeg skrola, tekst odmah ispod)
   ========================================================================== */
@media (max-width: 768px) {
  .stranica-kontejner {
    margin-top: 110px;      /* Pomera sliku tačno ispod linije menija */
    flex-direction: column; /* Slika ide prva, tekst ispod nje */
    height: auto; 
    overflow: visible; 
  }

  .slika-deo {
    order: 1;               /* Slika je na vrhu */
    width: 100%; 
    height: auto;           /* Resetuje visinu od 700px koja je pravila prazan prostor */
    margin-bottom: 20px; 
    display: flex;
    justify-content: center;
  }

  .slika-deo img {
    width: auto;            /* Slika ne prepunjava širinu ekrana drastično */
    max-width: 90%;        /* Prilagođava se širini ekrana telefona */
    height: auto;           /* Zadržava prirodne proporcije flaše */
    object-fit: contain; 
  }

  .tekstualni-deo {
    order: 2;               /* Tekst se pozicionira odmah ispod slike */
    height: auto; 
    padding: 0 20px 20px 20px; 
  }

  .glavni-tekst {
    overflow-y: visible !important; 
    padding-right: 0; 
  }
    
    h1 {
font-size: 48px;        
    }    
}

/* ==========================================
   4. STRANICA: SVA VINA STRANICA
   ========================================== */
body.sva-vina-stranica {
    
}
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 1px;
}
p {
    font-size: 18px; 
    line-height: 1.5; 
    font-family:'PT Sans', sans-serif; 
    font-weight: 100; 
    color: black; 
} 


/* ==========================================
   4. STRANICA: VINA DETALJNO
   ========================================== */
body.vina-detaljno, html {
  background-color: #ffffff;
} 

.vina-detaljno h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 1px;
}

.vina-detaljno p {
    font-size: 18px; 
    line-height: 1.2; 
    font-family:'PT Sans', sans-serif; 
    font-weight: 100; 
    color: black; 
} 

.vina-detaljno hr {
    border-top: 1px solid #000;
    width: 100%;
    margin: 0px 0px 20px 0px;
    opacity: .25;
} 



/* ==========================================
   7. STRANICA: NAGRADE
   ========================================== */

/* ==========================================
   8. STRANICA: WEB SHOP
   ========================================== */

/* ==========================================
   9. STRANICA: TASTING ROOM
   ========================================== */

/* ==========================================
   10. STRANICA: KONTAKT
   ========================================== */

/*  AGE GATE */

.age-gate-box { 
    background-color: #ffffff; /* Dodat # */
    padding: 40px; 
    border-radius: 8px; 
    text-align: center; 
    max-width: 450px; 
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5); 
    font-family: sans-serif; 
} 
.age-gate-title { 
    color: #4a0e17; 
    margin-bottom: 15px; 
} 
.age-gate-text { 
    color: #333333; 
    margin-bottom: 25px; 
    font-size: 16px; 
} 
.age-gate-buttons { 
    display: flex; 
    gap: 15px; /* Dodat razmak između dugmića */
} 
.btn-accept, .btn-reject {
    padding: 10px 20px; /* Dodat unutrašnji razmak za dugmiće */
    border: none; 
    border-radius: 4px; 
    font-size: 16px; 
    cursor: pointer; 
    font-weight: bold; 
    transition: 0.3s; 
}
.btn-accept { 
    background-color: #4a0e17; 
    color: white; 
} 
.btn-accept:hover { 
    background-color: #6b1422; 
} 
.btn-reject { 
    background-color: #dcdcd; 
    color: #333; 
} 
.btn-reject:hover { 
    background-color: #cdcdcd; 
}