/* =========================================
   COMPACT CUBES - PREMIUM MAIN CSS
   Pokriva apsolutno sve sekcije i šablone
========================================= */

:root {
    --bg: #FFFFFF;
    --text: #000000;
    --text-light: #666666;
    --border: #000000; 
    --font-main: 'Inter', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-main);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

::selection { background-color: var(--text); color: var(--bg); }

/* =========================================
   GLOBALNI UI ELEMENTI
========================================= */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 20px;
    padding: 16px 24px; background-color: var(--bg); color: var(--text);
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
    text-decoration: none; border: 1px solid var(--border); transition: all 0.3s ease;
    cursor: pointer; width: fit-content; border-radius: 0;
}
.btn:hover { background-color: var(--text); color: var(--bg); }
.btn-solid { background-color: var(--text); color: var(--bg); }
.btn-solid:hover { background-color: var(--bg); color: var(--text); }
.btn-outline-white { background-color: transparent; color: var(--bg); border-color: var(--bg); }
.btn-outline-white:hover { background-color: var(--bg); color: var(--text); }

.tag { 
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; 
    padding: 8px 14px; border: 1px solid var(--border); display: inline-flex; align-items: center;
    transition: all 0.3s ease; background: transparent; color: var(--text);
}
.tag-white { border-color: var(--bg); color: var(--bg); }

@keyframes drawLine { 0% { width: 0; } 100% { width: 150px; } }
.anim-line { height: 1px; background-color: var(--text); width: 0; animation: drawLine 1.5s ease-out forwards; margin-bottom: 40px; }

/* Fluidna Tipografija */
h1 { font-size: clamp(40px, 6vw, 90px); font-weight: 400; line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase; margin-bottom: 30px; }
h2 { font-size: clamp(28px, 4vw, 60px); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; text-transform: uppercase; }
h3 { font-size: clamp(20px, 2.5vw, 40px); font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; text-transform: uppercase; }
p { font-size: 15px; color: var(--text-light); line-height: 1.6; }

/* =========================================
   HEADER & NAVIGATION
========================================= */
header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: var(--bg); height: 70px;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--border); padding: 0 4vw;
}
.logo { font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; color: var(--text); display: flex; align-items: center; }
.logo strong { font-weight: 800; }
.logo span { font-weight: 300; }
.nav-links { display: flex; gap: 40px; }
.nav-links a { font-size: 11px; font-weight: 500; color: var(--text); text-decoration: none; text-transform: uppercase; letter-spacing: 0.1em; transition: opacity 0.3s; }
.nav-links a:hover { opacity: 0.5; }

/* =========================================
   HERO SEKCIJE
========================================= */
.hero, .tech-hero, .product-hero { 
    margin-top: 70px; min-height: calc(100vh - 70px); 
    display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); 
}
.hero-text { padding: 8vw 4vw; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; border-right: 1px solid var(--border); }
.hero-tag-wrap { margin-bottom: 30px; }
.hero-text p { max-width: 500px; margin-bottom: 40px; }
.hero-img-container { padding: 2vw; background: #F5F5F5; display: flex; align-items: center; justify-content: center; }
.hero-img { width: 100%; height: 100%; background-position: center; background-size: cover; filter: grayscale(20%); }

/* =========================================
   ZAJEDNIČKI GRID I TEKSTUALNI BLOKOVI
========================================= */
.concept { display: grid; grid-template-columns: 1fr 3fr; border-bottom: 1px solid var(--border); }
.section-index { padding: 4vw; border-right: 1px solid var(--border); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.concept-content { padding: 8vw 4vw; }
.concept-content h2 { margin-bottom: 30px; max-width: 1000px; }

.dual-grid { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
.dual-col { padding: 8vw 4vw; display: flex; flex-direction: column; justify-content: flex-start; border-right: 1px solid var(--border); }
.dual-col:last-child { border-right: none; }
.dual-col h3 { margin: 30px 0 20px; }

.image-break { padding: 2vw; background: #F5F5F5; border-bottom: 1px solid var(--border); height: 60vh; }
.image-break-inner { width: 100%; height: 100%; background-position: center; background-size: cover; filter: grayscale(100%); }

/* CTA i Manifest Blokovi */
.dark-statement, .dark-cta, .cta-section { 
    padding: 12vw 4vw; text-align: center; 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    border-bottom: 1px solid var(--border); 
}
.dark-statement, .dark-cta { background: var(--text); color: var(--bg); }
.dark-statement h2, .dark-cta h2, .cta-section h2 { margin-bottom: 40px; max-width: 1000px; }
.dark-statement p { max-width: 600px; margin: 0 auto; color: #A0A0A0; }

/* =========================================
   USLUGE & TEHNOLOGIJA (Tabele i Liste)
========================================= */
.services-table { width: 100%; border-bottom: 1px solid var(--border); }
.service-row { display: grid; grid-template-columns: 150px 1.5fr 1fr; border-top: 1px solid var(--border); transition: background 0.3s ease; }
.service-row:first-child { border-top: none; }
.service-row:hover { background-color: #F9F9F9; }

.s-num { padding: 4vw; border-right: 1px solid var(--border); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
.s-content { padding: 4vw; border-right: 1px solid var(--border); }
.s-content h3 { margin-bottom: 20px; }
.s-features { padding: 4vw; display: flex; flex-direction: column; justify-content: center; }
.s-features ul { list-style: none; margin: 0; padding: 0; }
.s-features li { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }

.spec-bar { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--border); }
.spec-box { padding: 3vw 4vw; border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; }
.spec-box:last-child { border-right: none; }
.spec-box span { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-light); margin-bottom: 10px; }
.spec-box strong { font-size: clamp(16px, 2vw, 24px); font-weight: 600; text-transform: uppercase; }

.tech-feature { display: grid; grid-template-columns: 1.2fr 1fr; border-bottom: 1px solid var(--border); }
.tf-img { padding: 2vw; border-right: 1px solid var(--border); background: #F5F5F5; }
.tf-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); min-height: 40vh; }
.tf-content { padding: 6vw 4vw; display: flex; flex-direction: column; justify-content: center; }
.tf-content h2 { margin-bottom: 30px; }

.tech { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--border); }
.tech-item { padding: 6vw 4vw; border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.tech-item:last-child { border-right: none; }
.tech-icon { font-size: 32px; margin-bottom: 30px; font-weight: 300; color: var(--text); }
.tech-item h3 { font-size: 14px; margin-bottom: 15px; }

/* =========================================
   CASE STUDY (Izvedeni objekti na Front Page)
========================================= */
.case-study { display: grid; grid-template-columns: 1.5fr 1fr; border-bottom: 1px solid var(--border); }
.cs-img { padding: 2vw; border-right: 1px solid var(--border); background: #F5F5F5; }
.cs-img-inner { width: 100%; height: 100%; min-height: 60vh; background-position: center; background-size: cover; filter: grayscale(30%); }
.cs-content { padding: 8vw 4vw; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.cs-content h2 { margin-top: 20px; margin-bottom: 40px; }
.cs-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 40px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 20px 0; width: 100%; }
.metric { text-align: left; }
.metric span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-light); margin-bottom: 5px; }
.metric strong { font-size: 14px; font-weight: 600; text-transform: uppercase; color: var(--text); }

/* =========================================
   KATALOG MODELA & PRODUKTI
========================================= */
.page-header { margin-top: 70px; padding: 8vw 4vw 4vw; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; align-items: flex-start; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.filters .tag { cursor: pointer; }
.filters .tag:hover { background: #f0f0f0; }
.filters .tag.active { background: var(--text); color: var(--bg); }

.models-grid { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
.model-card { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; }
.model-card:nth-child(2n) { border-right: none; }
.model-card:nth-last-child(-n+2) { border-bottom: none; }

.m-img { width: 100%; aspect-ratio: 16/10; border-bottom: 1px solid var(--border); overflow: hidden; background: #eee; }
.m-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: 0.5s ease; }
.model-card:hover .m-img img { filter: grayscale(0%); transform: scale(1.03); }
.m-info { padding: 4vw; display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; }
.m-title-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }
.m-specs-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 30px; }
.m-spec { padding: 15px 0; border-right: 1px solid var(--border); text-align: center; }
.m-spec:last-child { border-right: none; }
.m-spec-val { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.m-spec-lbl { display: block; font-size: 10px; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.1em; }

/* Single Product */
.ph-gallery { border-right: 1px solid var(--border); }
.ph-main-img { width: 100%; aspect-ratio: 16/10; border-bottom: 1px solid var(--border); background: #f0f0f0; }
.ph-thumbnails { display: grid; grid-template-columns: 1fr 1fr; }
.ph-thumb { aspect-ratio: 4/3; border-right: 1px solid var(--border); background: #f0f0f0; }
.ph-thumb:last-child { border-right: none; }
.ph-thumb img, .ph-main-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(20%); }
.ph-info { padding: 4vw; display: flex; flex-direction: column; }
.p-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 40px; padding: 20px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.p-spec-item span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-light); margin-bottom: 5px; }
.p-spec-item strong { font-size: 14px; font-weight: 600; text-transform: uppercase; }

.floorplan { display: grid; grid-template-columns: 1fr 2fr; border-bottom: 1px solid var(--border); }
.fp-info { padding: 4vw; border-right: 1px solid var(--border); }
.fp-img { padding: 2vw; background: #F5F5F5; display: flex; align-items: center; justify-content: center; }
.fp-img img { width: 100%; max-width: 800px; object-fit: contain; mix-blend-mode: multiply; }

/* =========================================
   AI ADVISOR (Front Page & Configurator)
========================================= */
/* Zajedničke Config komponente */
.ai-advisor { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); background: #FDFDFD; }
.ai-info { padding: 8vw 4vw; border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.ai-info h2 { margin-bottom: 30px; }
.ai-info p { margin-bottom: 40px; max-width: 400px; }
.ai-form { padding: 8vw 4vw; width: 100%; }

.form-row { margin-bottom: 40px; width: 100%; }
.form-label { display: flex; justify-content: space-between; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 15px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Kutije sa opcijama */
.opt-box { border: 1px solid var(--border); padding: 16px; text-align: center; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: all 0.2s; color: var(--text-light); display: flex; flex-direction: column; justify-content: space-between; }
.opt-box:hover { color: var(--text); border-color: var(--text); }
.opt-box.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.opt-title { font-size: 13px; font-weight: 600; text-transform: uppercase; margin-bottom: 10px; }
.opt-desc { font-size: 11px; color: var(--text-light); line-height: 1.5; margin-bottom: 20px; text-transform: none; letter-spacing: normal; }
.opt-price { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; border-top: 1px solid rgba(0,0,0,0.1); padding-top: 15px; margin-top: auto; }
.opt-box.active .opt-desc, .opt-box.active .opt-price { color: #A0A0A0; border-color: rgba(255,255,255,0.2); }

/* Slider & Cena */
.slider-wrap { display: flex; align-items: center; gap: 20px; padding: 20px 0; }
input[type="range"] { flex: 1; -webkit-appearance: none; height: 1px; background: var(--border); outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 24px; background: var(--text); cursor: pointer; border-radius: 0; }
.val-display { font-size: 16px; font-weight: 600; width: 60px; text-align: right; }
.price-output { margin-top: 60px; padding-top: 30px; border-top: 2px solid var(--text); display: flex; justify-content: space-between; align-items: flex-end; }
.price-output h3 { font-size: 48px; font-weight: 400; line-height: 1; letter-spacing: -0.02em; margin-bottom: 0; }

/* Sticky Customizer Layout (Zasebna Stranica) */
.customizer-layout { margin-top: 70px; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
.vis-col { position: sticky; top: 70px; height: calc(100vh - 70px); border-right: 1px solid var(--border); display: flex; flex-direction: column; background: #FDFDFD; }
.vis-header { padding: 2vw 4vw; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.vis-img { flex-grow: 1; width: 100%; background-color: #eee; background-position: center; background-size: cover; filter: grayscale(100%); border-bottom: 1px solid var(--border); transition: background-image 0.5s ease-in-out; }
.vis-summary { padding: 3vw 4vw; display: flex; justify-content: space-between; align-items: flex-end; background: var(--bg); }
.vis-summary-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-light); margin-bottom: 10px; display: block; }
.vis-price { font-size: clamp(32px, 4vw, 48px); font-weight: 400; line-height: 1; letter-spacing: -0.02em; }
.form-col { padding: 4vw; background: var(--bg); }
.form-intro { margin-bottom: 60px; }
.config-step { margin-bottom: 50px; padding-bottom: 50px; border-bottom: 1px solid var(--border); }
.config-step:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.step-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 25px; }
.step-title { font-size: 16px; font-weight: 600; text-transform: uppercase; }

/* =========================================
   FAQ SEKCIJA
========================================= */
.faq { display: grid; grid-template-columns: 1fr 3fr; border-bottom: 1px solid var(--border); }
.faq-title { padding: 6vw 4vw; border-right: 1px solid var(--border); }
.faq-list { padding: 6vw 4vw; }
.faq-item { border-bottom: 1px solid var(--border); padding: 25px 0; }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-q { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; }
.faq-a { padding-top: 15px; display: none; font-size: 14px; color: var(--text-light); line-height: 1.6; max-width: 700px; }
.faq-item.active .faq-a { display: block; }

/* =========================================
   KONTAKT STRANICA & CF7
========================================= */
.contact-page { margin-top: 70px; min-height: calc(100vh - 70px); display: grid; grid-template-columns: 1fr 1.5fr; border-bottom: 1px solid var(--border); }
.contact-info { padding: 8vw 4vw; border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.contact-form-wrap { padding: 8vw 4vw; background: var(--bg); }
.cc-form .wpcf7-form-control { width: 100%; padding: 15px 0; background: transparent; border: none; border-bottom: 1px solid var(--border); font-family: var(--font-main); font-size: 14px; outline: none; border-radius: 0; color: var(--text); margin-bottom: 20px; }
.cc-form textarea { resize: vertical; min-height: 120px; }
.cc-form .wpcf7-submit { display: inline-block; width: auto; padding: 16px 32px; background-color: var(--text); color: var(--bg); text-transform: uppercase; font-weight: 600; cursor: pointer; border: 1px solid var(--text); }

/* =========================================
   FOOTER
========================================= */
footer { background: var(--bg); border-top: 1px solid var(--border); }
.f-top { display: grid; grid-template-columns: 1fr 1fr 1fr 1.5fr; border-bottom: 1px solid var(--border); }
.f-col { padding: 4vw; border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.f-col:last-child { border-right: none; }
.f-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--text-light); margin-bottom: 30px; }
.f-links-wrap a { display: block; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text); text-decoration: none; margin-bottom: 15px; }
.f-links-wrap a:hover { text-decoration: underline; }
.f-address { margin-top: 25px; font-size: 12px; color: var(--text-light); line-height: 1.6; }
.f-address strong { color: var(--text); font-weight: 600; text-transform: uppercase; font-size: 10px; display: block; margin-bottom: 5px; }
.f-social { display: flex; gap: 15px; margin-bottom: 30px; }
.f-social a { color: var(--text); font-size: 22px; transition: opacity 0.3s; }
.f-bottom { display: flex; justify-content: space-between; align-items: center; padding: 2vw 4vw; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
.f-logo-sleek { font-size: 20px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); }
.f-logo-sleek strong { font-weight: 800; }
.f-logo-sleek span { font-weight: 300; }

/* =========================================
   RESPONSIVE PRELOM (Max-width: 1024px)
========================================= */
@media (max-width: 1024px) {
    header .nav-links { display: none; }
    
    /* Rušenje gridova na 1 kolonu */
    .hero, .concept, .tech-hero, .spec-bar, .tech-feature, .models-grid, 
    .product-hero, .floorplan, .customizer-layout, .service-row, .dual-grid, 
    .faq, .contact-page, .case-study, .tech, .ai-advisor { 
        grid-template-columns: 1fr; 
    }
    
    /* Fiksiranje paddinga na mobilnom za lepše disanje */
    .hero-text, .concept-content, .dual-col, .tf-content, .s-content, 
    .ph-info, .fp-info, .ai-info, .form-col, .faq-list, .contact-info, 
    .contact-form-wrap, .page-header, .f-col, .ai-form, .cs-content {
        padding: 60px 5vw; 
    }
    
    /* Brisanje desnih bordera, dodavanje donjih */
    .hero-text, .section-index, .tf-img, .spec-box, .ph-gallery, .fp-info, 
    .vis-col, .s-num, .s-content, .dual-col:first-child, .faq-title, 
    .contact-info, .cs-img, .ai-info, .tech-item { 
        border-right: none; border-bottom: 1px solid var(--border); 
    }
    
    /* Slike ograničene visine na telefonu */
    .hero-img-container, .cs-img-inner, .image-break, .vis-img, .tf-img img { height: 40vh; min-height: unset; }
    .hero-img-container, .cs-img { padding: 15px; }

    /* Konfigurator Un-sticky */
    .vis-col { position: relative; top: 0; height: auto; }
    .vis-summary { flex-direction: column; align-items: flex-start; gap: 20px; }
    .vis-summary .btn { width: 100%; justify-content: center; }

    /* Katalog Model Card Fixes */
    .model-card { border-right: none; border-bottom: 1px solid var(--border); }
    .model-card:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
    .model-card:last-child { border-bottom: none; }

    /* Footer Fixes */
    .f-top { grid-template-columns: 1fr 1fr; }
    .f-col:nth-child(2) { border-right: none; }
    .f-col:nth-child(1), .f-col:nth-child(2) { border-bottom: 1px solid var(--border); }
}

@media (max-width: 600px) {
    .f-top { grid-template-columns: 1fr; }
    .f-col, .m-spec, .p-spec-item, .metric { border-right: none; border-bottom: 1px solid var(--border); }
    .m-spec, .p-spec-item, .metric { padding: 15px 0; text-align: left; }
    .m-specs-grid, .p-specs, .cs-metrics { grid-template-columns: 1fr; gap: 0; border-bottom: none; border-top: 2px solid var(--text); }
    
    /* Configurator Mobile Stack */
    .options-grid { grid-template-columns: 1fr; }
    .opt-box { padding: 12px; }
    .price-output h3 { font-size: 36px; }
    
    .f-bottom { flex-direction: column; gap: 20px; text-align: center; justify-content: center; }
}
/* =========================================
   NASLOV KOLEKCIJE (FRONT PAGE)
========================================= */
.models-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 4vw; 
    border-bottom: 1px solid var(--border); 
}
.models-header h2 { 
    margin-bottom: 0; /* Ubija globalnu marginu da bi centriranje radilo */
}

@media (max-width: 1024px) {
    .models-header { 
        padding: 60px 5vw; 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 20px; 
    }
}
/* =========================================
   POPRAVKA NASLOVA U KONFIGURATORU
========================================= */
.form-intro h1 {
    font-size: clamp(32px, 3.5vw, 56px) !important;
    line-height: 1 !important;
    margin-bottom: 20px !important;
}

@media (max-width: 1024px) {
    .form-intro h1 {
        font-size: 8vw !important;
    }
}
/* =========================================
   HAMBURGER & MOBILE MENU OVERLAY
========================================= */

/* Desktop sakrivanje hamburgera */
.hamburger {
    display: none; background: none; border: none; cursor: pointer;
    width: 30px; height: 20px; position: relative; z-index: 1001;
}
.hamburger span {
    display: block; width: 100%; height: 2px; background-color: var(--text);
    position: absolute; transition: all 0.4s ease;
}
.hamburger span:nth-child(1) { top: 4px; }
.hamburger span:nth-child(2) { bottom: 4px; }

/* Animacija u X i promena boje u belu jer je pozadina crna */
.hamburger.active span:nth-child(1) { transform: translateY(5px) rotate(45deg); background-color: var(--bg); }
.hamburger.active span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); background-color: var(--bg); }

/* Crni Overlay Meni */
.mobile-menu {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--text); color: var(--bg); z-index: 1000;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
}
.mobile-menu.active { opacity: 1; pointer-events: all; }

/* Linkovi u mobilnom meniju */
.mobile-nav-links { display: flex; flex-direction: column; text-align: center; gap: 30px; }
.mobile-nav-links a {
    font-size: 24px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--bg); text-decoration: none; transition: opacity 0.3s;
}
.mobile-nav-links a:hover { opacity: 0.5; }

.mobile-cta {
    margin-top: 30px; padding: 15px 30px; border: 1px solid var(--bg);
    font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.15em !important;
}
.mobile-cta:hover { background-color: var(--bg); color: var(--text) !important; }

/* Aktivacija na mobilnom ekranu (Sve ispod 1024px) */
@media (max-width: 1024px) {
    .nav-cta .desktop-cta { display: none; } /* Sakrij desktop dugme konfiguratora */
    .hamburger { display: block; } /* Prikaži hamburger */
}
/* =========================================
   FOOTER NEWSLETTER FIX & WHATSAPP
========================================= */

/* Neutrališe WP globalne stilove za input */
.nl-form input { 
    flex: 1; border: none !important; padding: 15px !important; 
    outline: none !important; font-family: var(--font-main); font-size: 12px; 
    margin: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    background: transparent;
}
.nl-form button { 
    background: var(--text); color: var(--bg); border: none !important; 
    padding: 0 20px !important; cursor: pointer; transition: background 0.3s;
    margin: 0 !important; border-radius: 0 !important;
}
.nl-form button:hover {
    background: var(--text-light);
}

/* WhatsApp dugme hover efekat */
.wa-btn:hover {
    background-color: #25D366 !important;
    color: #ffffff !important;
}
/* =========================================
   POPRAVKA TEKSTA OKO CENE (AI ADVISOR)
========================================= */
.price-output span {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-light);
    margin-bottom: 5px; /* Blago ga odiže od donje ivice da bude u ravni sa cenom */
}

/* Osigurava da se na mobilnom cena i tekst lepo poravnaju */
@media (max-width: 600px) {
    .price-output {
        align-items: center !important;
    }
}
/* =========================================
   CF7 NEWSLETTER FIX
========================================= */
.nl-form { 
    display: flex; border: 1px solid var(--border); margin-top: 20px; width: 100%; 
}
/* Tera CF7 span da se ponaša kao flex kontejner i zauzme prostor */
.nl-form .wpcf7-form-control-wrap { 
    flex: 1; display: flex; 
}
.nl-form input { 
    flex: 1; width: 100%; border: none !important; padding: 15px !important; 
    outline: none !important; background: transparent; font-family: var(--font-main); 
    font-size: 12px; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; 
}
.nl-form button { 
    background: var(--text); color: var(--bg); border: none !important; 
    padding: 0 20px !important; cursor: pointer; transition: background 0.3s; 
    margin: 0 !important; border-radius: 0 !important; 
}
.nl-form button:hover { 
    background: var(--text-light); 
}

/* Stilizacija za CF7 poruke (npr. "Hvala na prijavi") da budu brutalistički čiste */
.f-col .wpcf7 form .wpcf7-response-output {
    margin: 15px 0 0 0 !important;
    padding: 10px !important;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    color: var(--text) !important;
}
.f-col .wpcf7-not-valid-tip {
    font-size: 9px; text-transform: uppercase; margin-top: 5px; color: red;
}