/* --- Opći stilovi za cijelu stranicu --- */

/* Osnovni reset i visina za html i body */
html, body {
    height: 100%; /* Osigurava da html i body zauzimaju cijelu visinu */
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Sprječava horizontalni scroll */
    font-family: 'Arial', sans-serif; /* Primarni font stranice */
}

body {
    display: flex;
    flex-direction: column; /* Elementi se slažu vertikalno */
    background-color: #fff; /* Osnovna bijela pozadina stranice */
    color: #333; /* Standardni tamni tekst */
}

/* Wrapper za sav sadržaj (između nav i footer) */
.content-wrapper {
    flex: 1; /* Omogućava da ovaj dio zauzme sav raspoloživi prostor */
}

/* Fontovi */
.audiowide-font {
  font-family: 'Audiowide', cursive;
}

/* --- Stilovi za Navigaciju --- */
.navbar {
  background-color: #181818 !important; /* Tamna pozadina za navbar */
  box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Manja sjena za navbar */
}
.navbar-brand.audiowide-font {
  color: #ffffff; /* Bijela boja brenda u navbaru */
}
.navbar-nav .nav-link {
    color: #e0e0e0 !important; /* Svjetliji tekst linkova u navbaru */
    margin-left: 15px; /* Razmak između linkova */
    transition: color 0.3s ease; /* Glatka promjena boje pri hoveru */
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #ffffff !important; /* Bijela boja pri hoveru i za aktivni link */
}
.navbar-toggler {
    border-color: #ffffff; /* Bijeli gumb za navigaciju */
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* --- Stilovi za Hero Sekciju (na index.php) --- */
.hero-section {
    color: #333; /* Standardni tamni tekst */
    padding: 60px 30px;
    border-radius: 8px;
    margin-bottom: 50px;
}
.hero-section h1, .hero-section p, .hero-section .lead {
    color: #333; /* Tamni tekst unutar hero sekcije */
}
.hero-section .btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}
.hero-section .btn-outline-secondary {
    border-color: #333; /* Tamniji border */
    color: #333; /* Tamniji tekst */
}
.hero-section .btn-outline-secondary:hover {
    background-color: rgba(0,0,0,0.05); /* Blagi hover efekt */
    border-color: #007bff;
    color: #007bff;
}


/* --- Stilovi za Sekciju Usluga (na index.php i ostalim stranicama) --- */
/* Stilovi za cijelu sekciju ako je potrebna specifična pozadina, inače ostaje bijelo */
#usluge {
    padding: 50px 0; /* Razmak iznad i ispod sekcije */
    color: #333; /* Svijetliji tekst u sekciji usluga */
}
#usluge h2 {
    color: #333; /* Naslov sekcije usluga tamni */
    margin-bottom: 30px;
}

/* Stilovi za kartice (na svim stranicama koje ih koriste) */
.card {
   
    border: 1px solid #e0e0e0; /* Svjetliji obrub */
    box-shadow: 0 3px 10px rgba(0,0,0,0.1); /* Manja sjena */
    min-height: 370px; /* Osiguravanje iste visine kartica */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 20px; /* Prostor ispod sadržaja kartice */
    border-radius: 8px; /* Dodajemo zaobljenje uglova card-a */
    overflow: hidden; /* Osigurava da se sve unutar card-a uklopi */
}

/* Stilovi za card-body općenito */
.card-body {
    background-color: #ffffff; /* BIJELA POZADINA za card-body na svim stranicama */
    color: #333; /* Standardni tamni tekst unutar card-body */
    padding: 25px; /* Malo više paddinga */
}
.card-title {
    color: #333; /* TAMNI naslov kartice */
    font-size: 1.3rem;
    margin-bottom: 15px;
}
.card-text, .list-unstyled li small {
    color: #333; /* TAMNI tekst unutar kartice */
}
.btn-outline-primary {
    margin-top: auto; /* Gumb na dnu kartice */
    border-color: #007bff;
    color: #007bff;
    transition: background-color 0.3s ease, color 0.3s ease; /* Glatki prijelaz */
}
.btn-outline-primary:hover {
    background-color: #007bff;
    color: #ffffff;
}

/* --- Ostali Stilovi --- */
.border-bottom {
    border-bottom: 1px solid #dee2e6 !important; /* Standardni Bootstrap separator */
}
.list-unstyled li small {
    font-size: 0.9rem; /* Manji font za checklistu */
}


/* --- Stilovi za Slider --- */
#furnitureCarousel {
    border: 1px solid #e0e0e0;
}

/* Fiksna visina za desktop */
.custom-carousel-img {
    height: 600px;
    object-fit: cover; /* Ovo sprečava rastezanje slike, reže je da stane u okvir */
    object-position: center;
}

/* Prilagodba visine za mobitele */
@media (max-width: 768px) {
    .custom-carousel-img {
        height: 350px; /* Nešto niže na mobitelu da ne zauzme cijeli ekran */
    }
}

/* Stil za natpis preko slike */
.carousel-caption {
    background: rgba(0, 0, 0, 0.5); /* Poluprozirna crna pozadina za čitljivost teksta */
    border-radius: 10px;
    padding: 15px;
}

/* Efekt blijeđenja (Fade) umjesto klizanja (opcionalno, izgleda modernije) */
.carousel-fade .carousel-item {
    transition-duration: 0.8s;
}

/* Stiliziranje indikatora (točkica) */
.carousel-indicators [button] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
}



/* Stil za sliku na vrhu kartica */
.custom-card-img {
    height: 250px; /* Fiksna visina za sve slike u karticama */
    object-fit: cover; /* Reže sliku tako da ispuni prostor bez rastezanja */
    object-position: center; /* Fokusira se na sredinu slike */
    transition: transform 0.5s ease; /* Lagani zoom efekt pri hoveru */
}

/* Hover efekt na karticu - lagano povećanje slike */
.card:hover .custom-card-img {
    transform: scale(1.05);
}

/* Osigurava da slika ne "pobjegne" izvan zaobljenih rubova kartice */
.card {
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

/* Dodatna sjena pri hoveru na karticu */
.card:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
}

/* Prilagodba glavne slike za mobitele */
@media (max-width: 768px) {
    .hero-sub-img {
        height: 250px !important; /* Manja visina na mobitelu za bolji pregled */
    }
    
    .custom-card-img {
        height: 200px; /* Manja visina slika u karticama na mobitelu */
    }
}


/* Forsiranje bijele boje teksta unutar overlay kartica */
.dark-overlay-card .card-title,
.dark-overlay-card .card-text,
.dark-overlay-card .card-details-list,
.dark-overlay-card ul li,
.dark-overlay-card ul li small {
    color: #ffffff !important; /* !important osigurava da nadvlada opći body color: #333 */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Dodaje laganu sjenu ispod slova za još bolju čitljivost */
}

/* Stil za karticu i overlay (ponovljeno radi kompletnosti) */
.dark-overlay-card {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    border-radius: 15px !important;
}

.dark-overlay-card .custom-card-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Tamni sloj preko slike */
.dark-overlay-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradijent: prozirno crna na vrhu, jača crna na dnu */
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 100%);
    z-index: 1;
}

.dark-overlay-card .card-img-overlay {
    z-index: 2; /* Postavlja tekst iznad tamnog sloja */
}

/* Hover efekt - slika se poveća u pozadini */
.dark-overlay-card:hover .custom-card-img {
    transform: scale(1.1);
}

/* Dodatni stil za tekst i listu */
.card-details-list {
    margin-top: 10px;
}

.card-details-list li {
    font-weight: 300;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.dark-overlay-card .btn-primary {
    background-color: #007bff;
    border: none;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: bold;
}

/* Prilagodba za mobitele */
@media (max-width: 768px) {
    .dark-overlay-card {
        min-height: 350px;
    }
}

/* Stil za banner sliku na vrhu index stranice */
.top-intro-banner {
    max-height: 500px; /* Ograničavamo visinu da ne zauzme cijeli ekran */
    position: relative;
}

.banner-img-main {
    height: 500px; /* Fiksna visina za desktop */
    object-fit: cover; /* Ključno: slika se ne rasteže nego se prilagođava */
    object-position: center; /* Fokus na sredinu slike */
}

/* Prilagodba za mobitele */
@media (max-width: 768px) {
    .top-intro-banner, .banner-img-main {
        height: 250px; /* Smanjena visina za mobilne uređaje */
    }
}