/*
 * style.css
 * Prilagođeni stilovi za LUBIS ENTERIJERI (SVETLA TEMA + ZLATNA/CRVENA)
 */

/* =====================
   Paleta Boja i Varijable (SVETLA TEMA: ZLATNA/CRVENA)
   ===================== */
:root {
  /* PRIMARNA BOJA (AKCENT, Zlatna iz logoa) */
  --primary-color: #E4B93F;
  /* SEKUNDARNA BOJA (CRVENA/AKCENT iz logoa - za hover/sekundarni akcenat) */
  --secondary-color: #E2402A;

  /* POZADINSKE BOJE */
  --light-bg-color: #ffffff;
  /* Bela za body i glavne sekcije */
  --dark-bg-color: #f8f4f0;
  /* Svetla bež/krem za kontrasne sekcije (npr. portfolio) */

  /* TEKSTUALNE BOJE */
  --dark-text-color: #333333;
  /* Tamni tekst (za upotrebu na SVETLIM površinama) */
  --light-text-color: #ffffff;
  /* Svetli tekst (za upotrebu na TAMNIM akcentima) */
  --light-border-color: #858080dc;
  --header-font: 'Lora', serif;
}

/* =====================
   Globalni Stilovi
   ===================== */
body {
  font-family: Arial, sans-serif;
  /* Tekst je taman */
  color: var(--dark-text-color);
  /* Pozadina je svetla/bela */
  background-color: var(--light-bg-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--header-font);
  font-weight: 700;
  /* Naslovi su zlatno-žuti */
  color: var(--primary-color);
}

.section-title {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 10px;
}

.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  /* Linija ispod naslova je zlatna */
  background: var(--primary-color);
  margin: 10px auto 0;
}

/* =====================
   Navigacija i Header
   ===================== */
.custom-navbar-bg {
  /* Koristimo bež boju kao akcenat za navigaciju */
  background-color: var(--dark-bg-color) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.nav-link {
  /* Tekst linkova je taman na svetloj pozadini */
  color: var(--dark-text-color) !important;
  text-transform: uppercase;
  font-weight: 500;
  margin-left: 15px;
  transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
  color: var(--primary-color) !important;
}

/* =====================
   Hero Sekcija (Banner)
   ===================== */
.hero-section {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../slike/kuinja_moderna1.jpg') no-repeat center center;
  background-size: cover;
  background-position: center;
  height: 80vh;
}

.hero-section h1 {
  /* Tekst naslova u Hero sekciji je beo radi kontrasta na slici */
  color: var(--light-text-color);
  font-size: 4.5rem;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-section p {
  color: var(--light-text-color);
  /* Tekst u hero sekciji je svetao */
}

/* =====================
   Dugmad
   ===================== */
.custom-btn-primary,
.btn-cta {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  /* Tekst na zlatnom dugmetu je taman */
  color: var(--dark-text-color);
  padding: 20px;
  border-radius: 5px;
  text-transform: uppercase;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.custom-btn-primary:hover,
.btn-cta:hover {
  /* Hover efekat koristi CRVENU boju iz logoa */
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--light-text-color);
  /* Svetli tekst na crvenoj pozadini */
}

.custom-btn-secondary {
  background-color: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  padding: 8px 25px;
  border-radius: 0;
  text-transform: uppercase;
}

.custom-btn-secondary:hover {
  background-color: var(--primary-color);
  color: var(--dark-text-color);
}

/* =====================
   KOREKCIJA: Tekst u sekciji "Ko smo mi?" na index.html
   ===================== */
section.py-5 .container .text-muted {
  /* Vraćamo text-muted na taman tekst na svetloj pozadini */
  color: var(--dark-text-color) !important;
}

section.py-5 .container p {
  /* Sav ostali tekst je taman na svetloj pozadini */
  color: var(--dark-text-color);
}

section.py-5 {
  background-color: var(--light-bg-color) !important;
}


/* =====================
   Galerija/Slike efekti (i Portfolio sekcija na index.html)
   ===================== */

/* Ovu sekciju koja je imala bg-light vraćamo na svetlo bež/krem */
section.py-5.bg-light {
  background-color: var(--dark-bg-color) !important;
  color: var(--dark-text-color);
  /* Tekst je taman */
}

section.py-5.bg-light p.lead {
  color: var(--dark-text-col or) !important;
}

/* =====================
   Galerija/Slike efekti (NOVO - KORISTIMO CONTAIN PROTIV DEFORMACIJE)
   ===================== */

         /* Novi kontejner koji drži pozadinsku sliku */
         .gallery-image-wrapper {
           /* FIKSNA VISINA kontejnera - ovo nam je 200px */
           height: 200px !important;
           width: 100%;
    
           /* KRITIČNO: Centriranje i skaliranje pozadinske slike */
           background-position: center center !important;
           background-repeat: no-repeat !important;
           background-size: cover !important;
           /* Ovo garantuje da nema razvlačenja */
    
           cursor: pointer;
           transition: transform 0.3s ease, box-shadow 0.3s ease;
           overflow: hidden;
         }


         /* Pošto više nema IMG taga, ove stilove moramo prebaciti na wrapper */
         .hover-zoom:hover {
           transform: translateY(-5px);
           box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
         }
    
         /* Osiguravamo da je sam Swiper-slide kontejner visok 200px */
         .image-swiper .swiper-slide {
           height: 200px !important;
           display: flex;
           align-items: center;
           justify-content: center;
         }

/* Osiguravamo da je sam Swiper-slide kontejner visok 200px */
.image-swiper .swiper-slide {
  height: 200px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}




/* =======================================================
   STILOVI ZA SWIPER NAVIGACIJU (ČISTI KRUGOVI)
   ======================================================= */

/* Swiper navigation buttons (Krugovi sa zlatnim akcentom) */
.swiper-button-next,
.swiper-button-prev {
  /* ... (Korigovano za tamnu ikonu na svetloj pozadini) ... */
  z-index: 1000 !important;
  cursor: pointer;
  width: 45px !important;
  height: 45px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background-color: rgba(228, 185, 63, 0.8) !important;
  /* Zlatna sa providnošću */
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: transparent !important;
  /* Isključujemo boju ikona */
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background-color: var(--secondary-color) !important;
  /* Crvena na hover */
}

/* 2. POTPUNA ELIMINACIJA Swiper/Bootstrap ikona */
.swiper-button-next:after,
.swiper-button-prev:after,
.swiper-button-next::before,
.swiper-button-prev::before {
  content: "" !important;
  display: none !important;
}

/* =======================================================
   KONTROLA SEKCIJE SA SWIPEROM (Galerija)
   ======================================================= */
.swiper-category-wrapper {
  /* KRITIČNO: Postavlja koordinatni sistem za dugmad koja su apsolutno pozicionirana */
  position: relative;

  /* Dodaje vertikalni razmak između kategorija */
  margin-bottom: 3rem;

  /* Osigurava da je kontejner širok */
  width: 100%;

  /* Opciono: Daje malo paddinga na desktopu/tabletu */
  padding-top: 20px;
  padding-bottom: 20px;
}

/* ... (Ostatak Swiper positioning ostaje isti) ... */


/* =======================================================
   KOREKCIJA: GALERIJA I VIDEO SEKCIJA (galerija.html)
   ======================================================= */
/* Sada su sve sekcije defaultno svetle. Ako treba da budu tamne, 
   potrebno je dodati custom klasu */
/* Pretpostavljamo da su obe sekcije (video i slike) svetle */
.video-section,
.gallery-section {
  background-color: var(--light-bg-color);
  color: var(--dark-text-color);
}

.swiper-slide {
  color: var(--dark-text-color);
}


/* =====================
   Stilovi za Usluge (Accordion)
   ===================== */
.services-list-section {
  background-color: var(--light-bg-color);
  color: var(--dark-text-color);
}

/* KLJUČNO: Sav tekst unutar svetle services-list-section mora biti taman! */
.services-list-section * {
  color: var(--dark-text-color);
}

.services-list-section h2,
.services-list-section h3,
.services-list-section h4 {
  color: var(--primary-color);
}
.image-swiper .swiper-slide {
  height: 200px !important;
  display: flex;
  align-items: center;
  /* Osigurava centriranje slike vertikalno */
  justify-content: center;
}


/* ----------------------------------------------------------------
   KOREKCIJA: CONTACT PAGE STYLES (kontakt.html)
---------------------------------------------------------------- */

/* Cela sekcija forme i informacija je svetla */
section.py-5 {
  background-color: var(--light-bg-color) !important;
}


/* Sav tekst i linkovi su tamni na svetloj pozadini */
section.py-5 .container,
section.py-5 .container p,
section.py-5 .container a {
  color: var(--dark-text-color) !important;
}

.form-control {
  /* Tekst unutar polja je taman, pozadina bela */
  color: var(--dark-text-color) !important;
  background-color: var(--light-bg-color) !important;
  border: 1px solid var(--light-border-color) !important;
}

.form-label {
  /* Label-e moraju biti tamne */
  color: var(--dark-text-color) !important;
}

.col-lg-5 .text-secondary {
  /* Podnaslovi su tamni */
  color: var(--dark-text-color) !important;
}


/* =======================================================
   Lightbox (Pop-up za slike na index.html) - FINALNI FIKS ZA CENTRIRANJE
   ======================================================= */
.lightbox {
  display: none;
  position: fixed;
  z-index: 999999 !important;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9) !important;

  /* KLJUČNO: Koristimo Flexbox za centralно позиционирање садржаја */
 
  flex-direction: column !important;
  /* Vertikalni tok */
  justify-content: center !important;
  /* Centriraj vertikalno */
  align-items: center !important;
  /* Centriraj horizontalno */
  overflow-y: auto !important;
  /* Дозволи скроловање ако је потребно */
  padding: 20px !important;
}

.lightbox-content {
  /* Centriranje same slike */
  display: block !important;
  margin: 0 auto !important;
  /* Horizontalno centriranje */

  width: auto !important;
  max-width: 90% !important;
  /* Širina slike */
  max-height: 90vh !important;
  /* Visina slike */
  object-fit: contain !important;
  padding: 0 !important;
}

.lightbox-caption {
  margin: 15px auto !important;
  display: block !important;
  width: 90% !important;
  max-width: 700px !important;
  text-align: center !important;
  color: #ccc !important;
  padding: 10px 0 !important;
}

/* Stilovi za navigacione dugmiće (PREV/NEXT) */
.lightbox-prev,
.lightbox-next {
  cursor: pointer !important;
  position: absolute !important;
  top: 50% !important;
  padding: 16px !important;
  margin-top: -22px !important;
  color: white !important;
  font-size: 30px !important;
  user-select: none !important;
  z-index: 100000 !important;
}

.lightbox-prev {
  left: 20px !important;
}

.lightbox-next {
  right: 20px !important;
}

.lightbox-close {
  display: none;
  position: absolute !important;
  top: 20px !important;
  right: 35px !important;
  color: #fff !important;
  font-size: 40px !important;
  cursor: pointer !important;
  z-index: 100000 !important;
}


/* =====================
   Footer
   ===================== */
.custom-footer-bg {
  /* Footer je taman da zadrži profesionalan izgled */
  background-color: #303030;
  color: var(--light-text-color);
}

.custom-footer-bg a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: var(--light-text-color);
}

.custom-footer-bg a:hover {
  color: var(--primary-color) !important;
}

/* =======================================================
   FIKS: OSIGURAVANJE DA FOOTER NE PREKLAPA SADRŽAJ
   ======================================================= */

/* Dajemo razmak MAIN kontejneru na dnu */
main {
  padding-bottom: 50px;
  /* Dodajte malo prostora ispod glavnog sadržaja */
}

/* Osiguravamo da nema agresivnog pozicioniranja u hero sekciji */
.hero-section {
  position: relative;
  /* Sprečava da se deca "izgube" */
}

/* Osiguravamo da footer ima standardno pozicioniranje */
footer {
  position: relative;
  z-index: 10;
  /* Osigurava da je iznad bilo kakvih 'isplivalih' elemenata */
}

/* =======================================================
   OBAVEZNI FIKS ZA CENTRIRANJE SLIKA U MODALU (galerija.html)
   Dodati na kraj style.css
   ======================================================= */

/* 1. Ciljamo Modal Body (roditelj Swipera) */
.modal-body {
  /* Uklanjamo paddinge i postavljamo crnu pozadinu za kontras */
  padding: 0 !important;
  background-color: rgba(0, 0, 0, 0.9) !important;
}

/* 2. Ciljamo pojedinačni Swiper Slide (kontejner slike) */
.modal-swiper .swiper-slide {
  /* Koristimo Flexbox za centralno pozicioniranje sadržaja (slike) */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  /* Vertikalno centriranje */
  align-items: center !important;
  /* Horizontalno centriranje */
  width: 100% !important;
  height: 100% !important;
}

/* 3. Ciljamo samu sliku (koja je unutar Swiper Wrapper-a) */
.modal-swiper-wrapper img {
  /* Ograničavamo veličinu i osiguravamo centriranje */
  max-height: 85vh !important;
  /* Maksimalna visina */
  max-width: 90% !important;
  /* Maksimalna širina */
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  /* Osigurava da se cela slika vidi */
  margin: 0 auto !important;
  /* Dodatno osigurava centriranje */
}

/* 4. Stil za natpis/caption (ako postoji) */
.swiper-slide-caption {
  color: #ffffff !important;
  padding: 10px 20px !important;
  text-align: center !important;
}

/* 5. Navigacione strelice unutar Modala (moraju biti svetle na tamnoj pozadini) */
.modal-swiper .swiper-button-next,
.modal-swiper .swiper-button-prev {
  color: #ffffff !important;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.7));
  /* Sjena da se bolje vide */
  background-color: transparent !important;
  /* Uklanjamo boju pozadine strelica */
}

.modal-swiper .swiper-button-next:hover,
.modal-swiper .swiper-button-prev:hover {
  color: var(--primary-color) !important;
  /* Akcenat boja na hover */
}

/* =======================================================
   FINALNE KOREKCIJE ZA MOBILNI PRIKAZ (FINAL VERSION)
   ======================================================= */

@media (max-width: 767px) {

  /* 1. KOREKCIJA HERO SEKCIJE (Smanjivanje naslova) */
  .hero-section {
    /* Održavamo minimalnu visinu i padding */
    height: auto !important;
    min-height: 60vh;
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }

  .hero-section h1 {
    /* KLJUČNO: Značajno smanjujemo H1 naslov na mobilnom */
    font-size: 2rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
  }

  .hero-section .lead {
    font-size: 1rem !important;
    margin-bottom: 3rem !important;
  }

  /* 2. KOREKCIJA PREKLAPANJA DUGMETA */

  /* UKLANJAMO SVU AGRESIVNU MARGINU/POZICIONIRANJE SA DUGMETA */
  .hero-section .custom-btn-primary {
    /* Uklanjamo bilo kakav z-index i position: relative koji bi mogli smetati */
    z-index: auto !important;
    position: static !important;
    margin-bottom: 0 !important;
  }

  /* KOREKCIJA PREKLAPANJA SEKCIJA */
  /* Osiguravamo da prva sekcija (Ko smo mi?) počinje nakon hero sekcije, bez preklapanja */
  main section:nth-child(2) {
    margin-top: 0 !important;
    padding-top: 3rem !important;
    /* Standardni razmak od vrha */
  }

  /* Smanjujemo ostale naslove */
  .section-title {
    font-size: 2rem;
  }

  /* Smanjujemo veličinu navigacionih dugmadi na manjim ekranima */
  .swiper-button-next,
  .swiper-button-prev {
    width: 35px !important;
    height: 35px !important;
  }

  /* KOREKCIJA ZA NAVIGACIJU (MENU) PREKLAPANJE */
  /* Ako se nav menu preklapa, osiguravamo da ima visok z-index */
  .navbar {
    z-index: 1050;
    /* Standardni Bootstrap z-index za navigaciju */
  }

    /* Osiguravamo minimalnu širinu slličice na mobilnom, ako je potrebno */
    .col-md-4 .hover-zoom {
      min-width: 250px;
      margin-left: auto;
      margin-right: auto;
    }
}

/* ... (Media queries ostaju isti) ... */