/* ==========================================================================
   Kinofilm Video Listing - Kompletni CSS kod
   Verzija: 3.0 (Flexbox rješenje)
   ========================================================================== */

/* --------------------------------------
   1. GLAVNI LAYOUT STRANICE
   -------------------------------------- */

.blog-wrap.is-sidebar-left .grid-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 35px;
    flex-direction: row;
}
.blog-wrap.is-sidebar-left .blog-content {
    flex-grow: 1; width: 1%; order: 2;
}
.blog-wrap.is-sidebar-left .blog-sidebar {
    width: 300px; flex-shrink: 0; order: 1;
}

/* --------------------------------------
   2. HEADER SADRŽAJA I KONTROLE
   -------------------------------------- */
.kv-archive-header { margin-bottom: 30px; }
.kv-controls {
    display: flex; justify-content: space-between; align-items: center; background: #f5f5f5;
    padding: 10px 15px; border-radius: 5px; margin-top: 20px; flex-wrap: wrap; gap: 15px;
}
.kv-sort-form select {
    padding: 8px 12px; border-radius: 4px; border: 1px solid #ddd; background-color: #fff; font-size: 14px;
}
.kv-view-switcher { display: flex; }
.kv-view-switcher a.kv-view-btn {
    padding: 8px 12px; text-decoration: none; border: 1px solid #ddd; margin-left: -1px;
    background-color: #fff; color: #555; transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.kv-view-switcher a.kv-view-btn:first-child { border-radius: 4px 0 0 4px; }
.kv-view-switcher a.kv-view-btn:last-child { border-radius: 0 4px 4px 0; }
.kv-view-switcher a.kv-view-btn.active {
    background-color: #0073aa; color: #fff; border-color: #0073aa; z-index: 1; position: relative;
}

/* --------------------------------------
   3. PRIKAZ LISTE VIDEA - FLEXBOX IMPLEMENTACIJA
   -------------------------------------- */
.blog-content .kv-video-listing {
    display: flex;
    flex-wrap: wrap; /* Ključno za prelamanje u redove */
    gap: 25px; /* Razmak između elemenata */
    margin: 0;
    padding: 0;
    list-style: none;
}

/* === KLJUČNI POPRAVAK: Resetiranje itema === */
.blog-content .kv-video-listing .kv-video-item {
    margin: 0 !important;
    padding: 0 !important;
    width: auto;
    float: none !important;
    clear: none !important;
    border: none !important;
}

/* 3.1. GRID Prikaz s Flexboxom */
.blog-content .kv-video-listing.grid .kv-video-item {
    width: calc(33.333% - (2 * 25px / 3)); /* Izračun širine za 3 stupca, uzimajući u obzir 'gap' */
    display: flex;
    flex-direction: column;
}
.blog-content .kv-video-listing.grid .kv-video-item .kv-video-link {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 3.2. LIST Prikaz s Flexboxom */
.blog-content .kv-video-listing.list {
    flex-direction: column; /* Slaže iteme jedan ispod drugog */
    gap: 15px;
}
.blog-content .kv-video-listing.list .kv-video-item {
    width: 100%;
}
.blog-content .kv-video-listing.list .kv-video-item .kv-video-link {
    display: flex; 
    flex-direction: row;
    align-items: center;
    gap: 20px;
}
.blog-content .kv-video-listing.list .kv-thumbnail {
    flex-basis: 180px;
    flex-shrink: 0;
}
.blog-content .kv-video-listing.list .kv-video-title {
    margin: 0; padding: 0;
}

/* --------------------------------------
   4. STIL POJEDINAČNOG VIDEA (Zajednički stilovi)
   -------------------------------------- */
.kv-video-item .kv-video-link {
    text-decoration: none; color: inherit; background: #fff;
    border-radius: 4px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.kv-video-item .kv-video-link:hover {
    box-shadow: 0 6px 15px rgba(0,0,0,0.12);
    transform: translateY(-4px);
}
.kv-thumbnail img {
    width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover;
}
.kv-video-title {
    font-size: 16px; font-weight: bold; color: #333; padding: 15px;
    flex-grow: 1;
}

/* --------------------------------------
   5. STILOVI ZA SIDEBAR WIDGETE
   -------------------------------------- */
.kv-widget .widget-title {
    font-size: 18px; border-bottom: 2px solid #eee; padding-bottom: 10px; margin-bottom: 15px;
}
.kv-category-filter { list-style: none; margin: 0; padding: 0; }
.kv-category-filter li a { display: block; padding: 9px 12px; text-decoration: none; border-radius: 4px; transition: background-color 0.2s, color 0.2s; }
.kv-category-filter li a:hover { background-color: #f0f0f0; }
.kv-category-filter li.active a { background-color: #0073aa; color: #fff; font-weight: bold; }
.kv-most-viewed { list-style: none; padding: 0; margin: 0; }
.kv-most-viewed li { padding: 8px 0; border-bottom: 1px dotted #e0e0e0; }
.kv-most-viewed li:last-child { border-bottom: none; }
.kv-most-viewed li a { text-decoration: none; color: #444; }
.kv-most-viewed li a:hover { text-decoration: underline; }

/* --------------------------------------
   6. STILOVI ZA PAGINACIJU
   -------------------------------------- */
.kv-pagination { margin-top: 40px; clear: both; text-align: center; }
.kv-pagination .page-numbers { padding: 8px 14px; margin: 0 3px; border: 1px solid #ddd; text-decoration: none; background: #fff; color: #555; border-radius: 4px; }
.kv-pagination .page-numbers.current, .kv-pagination .page-numbers:hover { background: #0073aa; color: #fff; border-color: #0073aa; }

/* --------------------------------------
   7. RESPONZIVNOST
   -------------------------------------- */
@media (max-width: 992px) {
    .blog-wrap.is-sidebar-left .grid-container { flex-direction: column; }
    .blog-wrap.is-sidebar-left .blog-sidebar, .blog-wrap.is-sidebar-left .blog-content { width: 100%; order: initial; }
    .blog-content .kv-video-listing.grid .kv-video-item {
        width: calc(50% - (25px / 2));
    }
}
@media (max-width: 767px) {
    .blog-content .kv-video-listing.grid .kv-video-item {
        width: 100%;
    }
    .blog-content .kv-video-listing.list .kv-video-item .kv-video-link { flex-direction: column; align-items: flex-start; gap: 0; }
    .blog-content .kv-video-listing.list .kv-thumbnail { flex-basis: auto; width: 100%; }
    .blog-content .kv-video-listing.list .kv-video-title { padding: 15px; }
}

/* ==========================================================================
   8. FACETED SEARCH (Checkbox Filteri)
   ========================================================================== */

.kv-faceted-search-form .kv-filter-options {
    margin-bottom: 20px;
    padding-left: 20px;
}

.widget.kv-widget {
    background: #efefef!important;
    padding: 10px;
    border-radius: 10px;
}

.kv-filter-item {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.kv-filter-item input[type="checkbox"] {
    margin-right: 10px;
    /* Možda će trebati još stilova da se uskladi s temom */
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.kv-filter-item label {
    cursor: pointer;
    font-size: 15px;
    color: #444;
    transition: color 0.2s;
}

.kv-filter-item label:hover {
    color: #000;
}

.kv-filter-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.kv-filter-submit {
    width: 100%;
    padding: 10px 15px;
    background-color: #0073aa; /* Prilagodi boju temi */
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s;
}

.kv-filter-submit:hover {
    background-color: #005a87; /* Tamnija nijansa za hover */
}

.kv-filter-clear {
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #777;
    text-decoration: underline;
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
}

.kv-filter-clear:hover {
    color: #d9534f; /* Crvenkasta boja za brisanje */
}

/* Uklanjanje starih stilova za filter - ako ih niste već obrisali */
.kv-category-filter { display: none; }