/* ===================================================================
   FABRIKA POZIVNICA - PROIZOD-STYLE.CSS
   =================================================================== */

/* Fullscreen prikaz bez glavnog skrola */
body.page-proizvod {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

main.product-container {
    flex-grow: 1; 
    display: flex;
    width: 100%;
    min-height: 0; 
}

body.page-proizvod footer {
    display: none;
}


/* --- Leva kolona: Stilovi za slajder --- */
.column-left-image.slider-container {
    flex-basis: 55%;
    position: relative;
    overflow: hidden; 
    background-color: #f9f9f9;
    cursor: grab;
}
.column-left-image.slider-container.grabbing {
    cursor: grabbing;
}

.slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    
    /* VRAĆENO: Slika je statična i pokriva prostor */
    background-size: cover;
    background-position: center;
    
    z-index: 1;
    opacity: 1; 
    
    /* Koristimo hardversku akceleraciju za glatkoću */
    transform: translateX(0) translateZ(0);
    transition: transform 0.7s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.slide.active { 
    transform: translateX(0) translateZ(0);
    z-index: 2; 
    /* UKLONJENA 'animation' linija */
}
.slide.prev {
    transform: translateX(-100%) translateZ(0); 
    z-index: 1;
}
.slide.next {
    transform: translateX(100%) translateZ(0);
    z-index: 1;
}


.slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    background-color: rgba(255, 255, 255, 0.8); color: #333;
    border: none;
    /* Kockaste strelice */
    border-radius: 0; 
    width: 50px; height: 50px;
    font-size: 20px; cursor: pointer; transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); display: flex;
    align-items: center; justify-content: center;
}
.slider-arrow:hover { background-color: white; transform: translateY(-50%) scale(1.1); }
.slider-arrow.prev { left: 20px; }
.slider-arrow.next { right: 20px; }

.slider-indicators {
    position: absolute; bottom: 25px; left: 50%;
    transform: translateX(-50%); z-index: 3;
    display: flex; gap: 12px;
}
.indicator-dot {
    width: 10px; height: 10px; 
    /* Kockasti indikatori */
    border-radius: 0;
    background-color: rgba(255, 255, 255, 0.6); cursor: pointer;
    transition: all 0.4s ease; border: 1px solid rgba(0,0,0,0.1);
}
.indicator-dot.active { background-color: white; transform: scale(1.2); }


/* ===================================================================
   DESNA KOLONA - SADRŽAJ
   =================================================================== */
.column-right-content {
    flex-basis: 45%;
    display: flex;
    justify-content: flex-start; 
    align-items: flex-start;
    overflow-y: auto; 
    padding-left: clamp(1.5rem, 6vw, 4rem);
    padding-right: clamp(1.5rem, 6vw, 4rem);
    padding-top: calc(var(--nav-height) + 2rem);
    padding-bottom: 3rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.column-right-content::-webkit-scrollbar {
    display: none;
}

.content-wrapper {
    width: 100%;
    max-width: 480px;
    padding: 0; 
    text-align: left;
}

/* Stilovi za naslov */
.product-title-wrapper { margin-bottom: 2rem; }
.main-title {
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 2rem + 3.5vw, 4.5rem);
    font-weight: 700; line-height: 1.1; color: var(--color-text);
}
.subtitle {
    font-family: var(--font-body);
    font-size: clamp(1rem, 0.8rem + 1vw, 1.2rem);
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-top: 0.5rem;
}

/* Stilovi za accordion sa opisom */
.product-details-accordion { 
    border-top: 1px solid var(--color-border); 
    margin-bottom: 2.5rem;
}
.detail-item { 
    border-bottom: 1px solid var(--color-border); 
    padding: 1.25rem 0; 
}
.detail-item summary {
    font-family: var(--font-special);
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.1rem);
    font-weight: 700; cursor: pointer; list-style: none; position: relative;
    padding-right: 2rem;
}
.detail-item summary::-webkit-details-marker { display: none; }
.detail-item summary::after {
    content: '+'; position: absolute; right: 5px; top: 50%;
    transform: translateY(-50%); font-size: 1.5rem; font-weight: 400;
    color: var(--color-text-light); transition: transform 0.3s ease;
}
.detail-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.detail-item p, .detail-item ul { 
    padding-top: 1rem; color: var(--color-text-light); line-height: 1.8; 
}
.detail-item ul { list-style: none; padding-left: 0; }
.detail-item li { padding-bottom: 0.5rem; }


/* Forma za naručivanje - SPECIFIČNI STILOVI */
/* Globalni stilovi (.form-group, label, input...) su premešteni u style.css */

.price-calculator {
    font-family: var(--font-special); font-size: 1.6rem; font-weight: 700;
    margin-bottom: 2rem; text-align: left; color: var(--color-text);
}
.order-form .order-button { 
    width: 100%; 
    margin-top: 1rem; 
    padding: 16px; 
    font-size: 13px; 
}

/* Stilovi za greške su premešteni u style.css */


/* ===================================================================
   ANIMACIJE
   =================================================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Klasa koja pokreće animaciju */
.animated {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0; /* Početno stanje je nevidljivo */
}

/* Postavljanje animacija na elemente sa malim zakašnjenjem (delay) */
.product-title-wrapper {
    animation-delay: 0.2s;
}
.product-details-accordion .detail-item:nth-child(1) {
    animation-delay: 0.4s;
}
.product-details-accordion .detail-item:nth-child(2) {
    animation-delay: 0.5s;
}
.order-form .form-group:nth-of-type(1) {
    animation-delay: 0.6s;
}
.price-calculator {
    animation-delay: 0.7s;
}
.order-form .form-group:nth-of-type(2) {
    animation-delay: 0.8s;
}
.form-row {
    animation-delay: 0.9s;
}
.order-button {
    animation-delay: 1.0s;
}
/* Primenjujemo animaciju na sve elemente koje smo targetirali */
.product-title-wrapper,
.detail-item,
.order-form .form-group,
.price-calculator,
.form-row,
.order-button {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}


/* ===== RESPONZIVNI DIZAJN za proizvod stranicu ===== */
@media (max-width: 900px) {
    body.page-proizvod { height: auto; display: block; overflow: auto; }
    main.product-container { flex-direction: column; height: auto; }
    
    .column-left-image.slider-container { 
        flex-basis: auto; height: 65vh; min-height: 450px; 
    }
    .column-right-content { 
        height: auto; 
        overflow-y: visible; 
        padding: 0;
        margin-top: 1.5rem;
    }
    .content-wrapper { 
        padding: 0 1.5rem 2rem; 
    }
}

@media (max-width: 500px) {
    /* .form-row pravilo je premešteno u style.css */
    .slider-arrow { width: 40px; height: 40px; font-size: 16px; }
}