/* --- UNIFICIRANI STIL ZA SVE STRANICE --- */

:root {
    --primary: #FF6B35;
    --secondary: #004E89;
    --light-bg: #F7F9FC;
    --white: #ffffff;
    --wa-green: #25d366;
}

/* 1. RESET I OSNOVE */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
html, body { overflow-x: hidden; width: 100%; max-width: 100%; background: var(--light-bg); -webkit-font-smoothing: antialiased; }

/* 2. NAVIGACIJA */
nav { 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 0 8%; background: var(--white); position: sticky; top: 0; z-index: 9999; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); height: 80px; width: 100%;
}
.logo { font-size: 1.6rem; font-weight: 800; color: var(--secondary); text-decoration: none; z-index: 10002; }
.logo span { color: var(--primary); }
#menu-check { display: none; }
.hamb-icon { display: none; width: 35px; height: 30px; cursor: pointer; position: relative; z-index: 10002; }
.hamb-icon span { display: block; width: 100%; height: 4px; background: var(--primary); margin: 6px 0; transition: 0.3s; border-radius: 2px; }
.nav-links { display: flex; list-style: none; gap: 30px; align-items: center; }
.nav-links li a { text-decoration: none; color: #444; font-weight: 600; transition: 0.3s; }
.nav-links li a:hover, .nav-links li a.active { color: var(--primary); }

/* 3. ZAJEDNIČKI HERO STILOVI (Index, O meni, O autu, Kontakt) */
.hero, .about-hero, .car-hero, .contact-hero { 
    padding: 60px 8%; display: flex; align-items: center; justify-content: center; 
    gap: 50px; background: var(--white); flex-wrap: wrap; min-height: 85vh; width: 100%;
}
.hero-content, .about-content, .car-content, .contact-content { flex: 1; min-width: 250px; max-width: 600px; text-align: left; }
.hero-content h1, .about-content h1, .car-content h1, .contact-content h1 { font-size: 2.5rem; color: var(--secondary); line-height: 1.2; margin-bottom: 20px; }
.hero-content h1 span, .about-content h1 span, .car-content h1 span, .contact-content h1 span { color: var(--primary); }
.hero-content h2, .about-content h2, .car-content h2, .contact-content h2 { font-size: 1.5rem; color: var(--secondary); line-height: 1.2; margin-bottom: 20px; }
.hero-content h2 span, .about-content h2 span, .car-content h2 span, .contact-content h2 span { color: var(--primary); }
.hero-content p, .about-content p, .car-content p, .contact-content p { font-size: 1.1rem; color: #555; margin-bottom: 30px; line-height: 1.8; }

.hero-image, .about-image, .car-image, .contact-image { flex: 1; min-width: 300px; display: flex; justify-content: center; }
.hero-image img, .about-image img, .car-image img, .contact-image iframe {
    width: 100%; max-width: 450px; border-radius: 30px;
    box-shadow: 20px 20px 0 var(--primary); border: 5px solid #fff;
}

/* 4. SPECIFIČNI DIJELOVI (Uključujući Services fiks) */
.services { padding: 80px 8%; text-align: center; width: 100%; }
.services h2 { font-size: 1.5rem; color: var(--secondary); margin-bottom: 50px; width: 100%; text-align: center; }
.services h2 span { color: var(--primary); }

.spec-list { list-style: none; margin-top: 20px; }
.spec-list li { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; font-size: 1.1rem; color: #444; }
.spec-list svg { width: 28px; height: 28px; fill: var(--primary); flex-shrink: 0; }

.contact-box { background: var(--light-bg); padding: 30px; border-radius: 30px; border: 1px solid #eee; }
.contact-link { display: flex; align-items: center; gap: 20px; text-decoration: none; color: #333; margin-bottom: 25px; transition: 0.3s; }
.contact-link svg { width: 32px; height: 32px; fill: var(--primary); flex-shrink: 0; }
.contact-link div strong { display: block; font-size: 1.2rem; color: var(--secondary); }

.grid-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 25px; width: 100%; max-width: 1200px; margin: 0 auto; }
.info-card { background: var(--white); padding: 40px 25px; border-radius: 25px; box-shadow: 0 15px 35px rgba(0,0,0,0.05); width: 280px; text-align: center; transition: 0.3s; }
.info-card:hover { transform: translateY(-10px); }
.info-card svg { width: 45px; height: 45px; fill: var(--primary); margin-bottom: 20px; }
.info-card h3 { color: var(--secondary); margin-bottom: 15px; font-size: 1.2rem; }
.info-card p { color: #666; font-size: 0.95rem; line-height: 1.5; }

.btn { background: var(--primary); color: #fff; padding: 18px 40px; border-radius: 50px; text-decoration: none; font-weight: bold; display: inline-block; transition: 0.4s; text-transform: uppercase; }

/* 5. WHATSAPP & FOOTER */
.wa-container { 
    position: fixed; 
    bottom: 30px; 
    right: 30px; /* Na desktopu je desno */
    display: flex; 
    align-items: center; 
    z-index: 9998; 
    text-decoration: none; 
}

.wa-balloon { 
    background: rgba(255, 107, 53, 0.5); /* Vraćeno na 50% */
    color: var(--secondary); 
    padding: 10px 20px; 
    border-radius: 15px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
    margin-right: 15px; 
    font-weight: 700; 
    font-size: 0.9rem; 
    position: relative; 
    backdrop-filter: blur(5px);
    white-space: nowrap;
    animation: fadeInOut 4s infinite; 
}

.wa-balloon::after { 
    content: ''; 
    position: absolute; 
    right: -8px; 
    top: 50%; 
    transform: translateY(-50%); 
    border-top: 8px solid transparent; 
    border-bottom: 8px solid transparent; 
    border-left: 8px solid rgba(255, 107, 53, 0.5); 
}

.wa-float { 
    background: var(--wa-green); 
    width: 60px; height: 60px; 
    border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4); 
    animation: wa-jump 3s infinite ease-in-out; 
}

.wa-float svg { width: 32px; height: 32px; fill: white; }

footer { padding: 50px 8%; background: var(--secondary); color: white; text-align: center; }


@keyframes wa-jump { 
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
    40% {transform: translateY(-15px);} 
    60% {transform: translateY(-7px);} 
}

@keyframes fadeInOut { 
    0%, 100% { opacity: 0.9; transform: scale(1); } 
    50% { opacity: 1; transform: scale(1.05); } 
}


/* 6. UNIFICIRANA MOBILNA LOGIKA */
@media (max-width: 950px) {
    .hamb-icon { display: block; }
    .nav-links { position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; background: var(--white); flex-direction: column; justify-content: center; transition: 0.4s ease-in-out; z-index: 10001; }
    #menu-check:checked ~ .nav-links { right: 0; }
    #menu-check:checked ~ .hamb-icon span:nth-child(1) { transform: rotate(45deg) translate(7px, 7px); }
    #menu-check:checked ~ .hamb-icon span:nth-child(2) { opacity: 0; }
    #menu-check:checked ~ .hamb-icon span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }

    .hero, .about-hero, .car-hero, .contact-hero, .services { flex-direction: column !important; text-align: center !important; padding: 40px 20px !important; width: 100% !important; min-height: auto !important; }
    .hero-content, .about-content, .car-content, .contact-content { width: 100% !important; min-width: 0 !important; text-align: center !important; padding: 0 !important; }
    .hero-content h1, .about-content h1, .car-content h1, .contact-content h1 { font-size: 2.2rem !important; }
    .services h2 { font-size: 1.5rem !important; margin-bottom: 30px !important; }
    
    .hero-image, .about-image, .car-image, .contact-image { width: 100% !important; min-width: 0 !important; margin-bottom: 20px !important; }
    
    .contact-content { order: 1 !important; }
    .contact-image { order: 2 !important; margin-top: 30px !important; }
    .contact-link { flex-direction: column !important; }

    .hero-image img, .about-image img, .car-image img, .contact-image iframe { width: 85% !important; max-width: 290px !important; box-shadow: 10px 10px 0 var(--primary) !important; border-radius: 20px !important; }
    
    .grid-cards { gap: 15px !important; }
    .info-card { width: 100% !important; }
    
        /* Mobilni popravak za WhatsApp - Centriranje */
    .wa-container {
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 20px !important;
        width: auto !important;
    }
    
    .wa-balloon {
        font-size: 0.8rem !important; /* Malo smanjen font za mobitel */
        padding: 8px 15px !important;
        margin-right: 10px !important;
    }
    
    .wa-float {
        width: 50px !important; /* Malo manji gumb na mobitelu */
        height: 50px !important;
    }
}

/* za FAQ sekciju da mi sva pitanja složi u jedan red */
@media (max-width: 768px) {
    .faq-container { grid-template-columns: 1fr !important; }
}

.hero-image img {
    width: 100%;         /* Slika će se širiti koliko god je širok njezin kontejner */
    max-width: 750px;    /* Ali neće ići preko svoje stvarne širine da ne postane mutna */
    height: auto;        /* OVO POPRAVLJA RASTEZANJE - održava originalni omjer */
    display: block;
    margin: 0 auto;      /* Centriranje slike */
}

.about-image img {
    width: 100%;         /* Slika će se širiti koliko god je širok njezin kontejner */
    max-width: 750px;    /* Ali neće ići preko svoje stvarne širine da ne postane mutna */
    height: auto;        /* OVO POPRAVLJA RASTEZANJE - održava originalni omjer */
    display: block;
    margin: 0 auto;      /* Centriranje slike */
}

.car-image img {
    width: 100%;         /* Slika će se širiti koliko god je širok njezin kontejner */
    max-width: 750px;    /* Ali neće ići preko svoje stvarne širine da ne postane mutna */
    height: auto;        /* OVO POPRAVLJA RASTEZANJE - održava originalni omjer */
    display: block;
    margin: 0 auto;      /* Centriranje slike */
}
/* STIL ZA INDEX - 2 STUPCA DESKTOP, 1 STUPAC MOBITEL */
    .faq-wrapper {
        column-count: 2;
        column-gap: 30px;
        width: 100%;
    }

    .faq-item {
        margin-bottom: 15px;
        border: 1px solid #eee;
        border-radius: 5px;
        background: #f9f9f9;
        break-inside: avoid; /* Sprečava da se pitanje presiječe između stupaca */
        display: block; 
        width: 100%;
    }

    .faq-summary {
        padding: 15px;
        font-weight: bold;
        cursor: pointer;
        color: #d32f2f;
        outline: none;
        display: list-item; /* Vraća strelicu */
    }

    .faq-summary::marker { color: #d32f2f; }
    .faq-summary::-webkit-details-marker { color: #d32f2f; }

    .faq-answer {
        padding: 15px;
        color: #555;
        line-height: 1.6;
        background: #fff;
        margin: 0;
        border-top: 1px solid #eee;
    }

    /* OVO RJEŠAVA MOBITEL - vraća u jedan stupac */
    @media (max-width: 850px) {
        .faq-wrapper {
            column-count: 1;
        }
    }