/* 1. OSNOVNI RESET I GLOBALNI STILOVI */
* {
    box-sizing: border-box; /* Osigurava da padding ne širi elemente */
}

/* Tipografija iz tvog starog CSS-a */
h1 { color: #2c3e50; border-bottom: 3px solid #3498db; padding-bottom: 0px; }
h2 { color: #34495e; margin: 0px; font-size: 1.3em; }
.subsection { margin-left: 20px; color: #555; }
.subsubsection { margin-left: 40px; color: #666; font-size: 0.95em; }

/* 2. GLAVNI LAYOUT (Sjedinjeni duplikati) */
.prikaz-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'PT Sans', sans-serif;
    overflow: hidden; /* Sprečava horizontalni skrol */
}

.prikaz-grid {
    display: flex;
    width: 100%;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: nowrap; /* Drži sve u jednom redu dok ima mesta[cite: 2] */
}

/* Breadcrumbs[cite: 2] */
.prikaz-breadcrumbs {
    padding: 0 0 10px 15px;
    font-size: 16px;
    color: #555;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

/* 3. DEFINICIJA KOLONA (Fluidno vs Fiksno) */

/* KOLONA 1: Skuplja se do 250px, ne raste preko 330px[cite: 2] */
.col-prikaz-korica { 
    flex: 0 1 320px; 
    max-width: 330px; 
    min-width: 250px; 
}

/* KOLONA 2: Potpuno fluidna, prva se sužava[cite: 2] */
.col-opis { 
    flex: 1 1 auto; 
    min-width: 0; /* Omogućava sužavanje bez guranja ostalih kolona[cite: 2] */
    word-wrap: break-word;
}

/* KOLONA 3: Fiksna širina[cite: 2] */
.col-cena { 
    flex: 0 0 220px; 
}

/* KOLONA 4: Fiksna širina[cite: 2] */
.col-korpa { 
    flex: 0 0 200px; 
}

/* Osiguranje za sliku[cite: 2] */
.col-prikaz-korica img, 
.book-cover-box img {
    width: 100% !important;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* 4. MODULI (Slike, Download, Forum, Ocene)[cite: 2] */

/* Kontejner za sliku korice */
.book-cover-box {
    text-align: center;
    background: #fff;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

.book-cover-box img:hover {
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

.zoom-link {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    color: #777;
    text-decoration: none;
}

/* Download blokovi[cite: 2] */
.download-section {
    margin-top: 20px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}

.download-header {
    background: #f8f8f8;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: bold;
    color: #555;
    border-bottom: 1px solid #e0e0e0;
    text-align: center;
}

.download-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.download-list li { border-bottom: 1px solid #f0f0f0; }
.download-list li:last-child { border-bottom: none; }

.download-list a {
    display: block;
    padding: 8px 12px;
    font-size: 14px;
    color: #DB2B30;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s;
}

.download-list a:hover { background: #fff9f9; }

/* Forum stilovi[cite: 2] */
.forum-sekcija { margin-top: 40px; }
.forum-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #510a22;
    padding-bottom: 10px;
    margin-bottom: 25px;
}
.forum-title { font-size: 20px; font-weight: bold; color: #333; }
.forum-link-van { font-size: 14px; color: #510a22; text-decoration: none; font-weight: bold; }
.forum-input-card { background: #fdfdfd; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; margin-bottom: 30px; }
.forum-textarea { width: 100%; border: 1px solid #ccc; border-radius: 5px; padding: 12px; font-size: 15px; resize: vertical; }
.forum-bubble { display: flex; gap: 15px; margin-bottom: 20px; }
.forum-user-info { flex: 0 0 120px; text-align: right; font-size: 13px; color: #666; }
.forum-user-name { display: block; color: #aa0000; font-weight: bold; font-size: 14px; }
.forum-text-card { flex: 1; background: #fff; border: 1px solid #eee; border-radius: 0 12px 12px 12px; padding: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.03); }
.forum-date { font-size: 11px; color: #999; margin-bottom: 8px; display: block; }

/* Ocene[cite: 2] */
.ocene-kontejner { margin-top: 30px; }
.ocena-header { font-size: 20px; color: #333; border-bottom: 2px solid #DB2B30; padding-bottom: 8px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
.review-card { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 15px; margin-bottom: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.review-meta { font-size: 13px; color: #777; margin-bottom: 10px; }
.review-author { color: #DB2B30; font-weight: bold; text-decoration: none; }
.review-text { font-style: italic; color: #444; line-height: 1.5; }
.upis-ocene-box { background: #f9f9f9; border: 1px solid #ddd; border-radius: 8px; padding: 20px; margin: 20px 0; }
.btn-ocena { background: #DB2B30; color: #fff; border: none; padding: 8px 20px; border-radius: 4px; cursor: pointer; font-weight: bold; }

/* 5. RESPONSIVENESS[cite: 2] */

/* Sakrivanje korpe na srednjim ekranima */
@media (max-width: 1100px) {
    .col-korpa { display: none; }
}

/* Prelazak u vertikalni prikaz na mobilnim uređajima */
@media (max-width: 768px) {
    .prikaz-grid { flex-direction: column; }
    .col-prikaz-korica, .col-opis, .col-cena { 
        max-width: 100%; 
        flex: 1 1 100%; 
    }
}

/* Donja sekcija (forum i ocene)[cite: 2] */
.prikaz-bottom-section {
    max-width: 1000px;
    margin: 40px auto;
}