@font-face { font-family: 'Arial Fallback'; src: local(Arial Narrow); size-adjust: 110%; ascent-override: 100%; descent-override: 25%; line-gap-override:0%; }


@font-face { font-display: swap;  font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400; src: url('/fonts/roboto-condensed-v31-latin_latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* roboto-condensed-300 - latin_latin-ext */
@font-face { font-display: swap;  font-family: 'Roboto Condensed'; font-style: normal; font-weight: 300; src: url('/fonts/roboto-condensed-v31-latin_latin-ext-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
@font-face { font-display: swap; font-family: 'Raleway'; font-style: normal; font-weight: 900; src: url('/fonts/raleway-v37-latin_latin-ext-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }


* { box-sizing: border-box; margin: 0; padding: 0;  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.tvgrid { user-select: none; -webkit-user-select: none; }



body { background-color: #f8fafc; color: #1e293b; padding: 0; margin: 0; padding: 0; background-color: #ffffff; /* Bijela pozadina */ background-image: repeating-linear-gradient( 35deg, transparent, transparent 40px, rgba(0, 0, 0, 0.02) 40px,rgba(0, 0, 0, 0.02) 45px  ); }
html {  scrollbar-gutter: stable; }

.container {max-width:1240px; margin:0 auto;background:#fff; min-height:600px; padding-bottom:30px}
.headercontainer { position: relative; max-width: 1240px; margin: 0 auto }

/* ==========================================
1. VARIJABLE I GLOBALNE POSTAVKE
========================================== */
:root { --header-bg-top: #1c1b22; --header-bg-nav: #061122; --text-color: #a0aec0; --active-orange: #ff6b00; --border-color: #e0e0e0; }

/* ==========================================
2. HEADER & ZAGLAVLJE
========================================== */
.site-header {border-bottom:1px solid #222; background-color: var(--header-bg-top); color: #fff; width: 100%; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.header-top { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; min-height: 52px; box-sizing: border-box; max-width: 1250px; margin: 0 auto }
.site-logo { display: flex; align-items: center; }
.site-logo img { display: block; height: 76px; width: 126px; margin:-11px 0 -15px   }

/* Akcijski gumbi u zaglavlju (User & Search) */
.header-actions { display: flex; align-items: center; gap: 8px; min-width: 72px; min-height: 36px; flex-shrink: 0; }
.icon-btn { background: transparent; border: none; color: #fff; cursor: pointer; padding: 6px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color 0.2s; box-sizing: border-box; /* Ensures padding doesn't expand width */ flex-shrink: 0; }
.icon-btn:hover { background-color: rgba(255, 255, 255, 0.1); }

/* Korisnički padajući izbornik */
.user-dropdown-container { position: relative; }
.user-menu-list { font-family:'Roboto Condensed',sans-serif;display: none; position: absolute; top: calc(100% + 8px); right: 0; background-color: #fff; border: 1px solid #f6f6f6; border-radius: 4px; list-style: none; margin: 0; padding: 6px 0; min-width: 180px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); z-index: 100; }
.user-dropdown-container.is-open .user-menu-list { display: block; }
.user-menu-list a { display: block; padding: 12px 16px; color: #333; text-decoration: none; font-size: 15px; }
.user-menu-list a:hover { color:red }
.user-menu-list { list-style: none;  margin: 0; min-width: 180px; }

    .user-menu-list li a { display: flex; align-items: center; gap: 10px; /* Razmak između ikone i teksta */ padding: 12px 16px; color: #333; text-decoration: none; font-size: 14px; transition: background 0.15s ease; }

        .user-menu-list li a:hover { background-color: #f0f4f8; color: #0066cc; }

        .user-menu-list li a svg { color: #64748b; /* Diskretna siva boja ikona */ flex-shrink: 0; }

        .user-menu-list li a:hover svg { color: #0066cc; /* Isticanje ikone na hover */ }

    /* Opcionalno: linija iznad odjave za vizualno odvajanje */
    .user-menu-list li.menu-divider { border-top: 1px solid #eee; margin-top: 4px; padding-top: 4px; }


/* Pretraga u prekrivnom sloju (Overlay) */
.search-overlay-form { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--header-bg-top); align-items: center; /* Ensures vertical alignment across engines */ padding: 0 12px; box-sizing: border-box; z-index: 10; }
    .search-overlay-form input { font-family: 'Roboto Condensed', sans-serif; margin-left: 10px; flex: 1; background: transparent; border: none; outline: none; color: #fff; font-size: 18px; letter-spacing:-1px; padding: 8px 8px 8px 0; text-transform: uppercase; font-weight: bold; line-height: normal; /* Fixes baseline discrepancy in Chromium */ }
.search-overlay-form.is-active { display: flex; }
.search-overlay-form button { background: transparent; border: none; color: #fff; cursor: pointer; padding: 6px; display: flex; align-items: center; }
.close-search { font-size: 24px; line-height: 1; margin-left: 8px; color: var(--text-color); align-self: center; /* Ensures it sits precisely in the middle */ }

@media (max-width:360px) {
    .search-overlay-form input { font-size: 16px }
}
/* ==========================================
   3. NAVIGACIJA (BEZ FLEX-A, UZ LIJEVI RUB)
   ========================================== */
.main-nav { -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); display: flex; overflow-x: auto; /* Omogućuje horizontalni scroll */ white-space: nowrap; /* Sprečava prelazak linkova u novi red */ -webkit-overflow-scrolling: touch; /* Glatko skrolanje na iOS uređajima */ scrollbar-width: none; justify-content: flex-start; }
.main-nav::-webkit-scrollbar { display: none; }

/* Pojedinačni linkovi ili stavke unutar navigacije */
.main-nav a { flex-shrink: 0; /* Sprečava stezanje linkova kada ponestane prostora */ }

.main-nav ul { list-style: none; margin: 0; padding: 0;}
.main-nav li { display: inline-block; position: relative; margin:0 15px 0 0 }
    .main-nav a { transition: 0.5s ease-in-out;font-family: 'Raleway', sans-serif; font-weight: 900 !important; color: #ccc !important; text-transform: lowercase; letter-spacing: 0px !important; display: block; padding: 14px 0px; color: var(--text-color); text-decoration: none; font-size: 16px; font-weight: 700; }
.main-nav a:hover {color:#fff !important}
/* Poravnavanje prve stavke uz sam lijevi rub */
.main-nav li:first-child a { margin-left: 20px; }
.main-nav li.active a { color: #fff; font-weight: bold; }
.main-nav li.active::after { content: ""; position: absolute; bottom: 5px; left: 0px; right: 0px; height: 2px; background-color: var(--active-orange); }


span.bullet {width:10px; height:10px; background:#fff; border-radius:50%;display:inline-block}

@media (min-width: 900px) {
    .main-nav { position: absolute;  top: 10px; border-top: 0; left: 50%; transform: translateX(-50%);letter-spacing:1px }
    .main-nav a  {letter-spacing:1px}
    .main-nav li { margin: 0 35px 0 0 }
    .main-nav ul { white-space: nowrap; max-width: 1250px; margin: 0 auto }
        .main-nav a {font-size:17px}
}
@media (max-width: 600px) {
    .main-nav a {font-size:17px}
}


    /* tvgrid */
    :root { --slot-width: 120px; /* Širina jednog 30-minutnog intervala */ --total-slots: 48; /* Ukupno slotova u danu (48 * 30 min = 24h) */ }
    .tv-guide-container { width: 100%; max-width: 1250px; margin: 40px auto; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 4px; position: relative; overflow: clip; }

    .mobile-header-title { padding: 24px 20px 12px; font-size: 20px; font-weight: 800; color: #0f172a; text-transform: uppercase; letter-spacing: -0.3px; }
    .mobile-categories { display: flex; gap: 10px; padding: 8px 20px 20px; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
        .mobile-categories::-webkit-scrollbar { display: none; }

    .category-chip { background-color: #f1f5f9; color: #475569; border-radius: 3px; padding: 8px 16px; font-size: 13px; font-weight: 600; text-decoration: none; border: 1px solid #e2e8f0; transition: all 0.15s ease; }
        .category-chip.active, .category-chip:hover { background-color: #0f172a; color: #ffffff; border-color: #0f172a; }

    .sticky-header-wrapper { position: sticky; top: 0; z-index: 30; background-color: #ffffff; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02); }

    .tv-sub-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 14px 20px; gap: 16px; border-bottom: 1px solid #e2e8f0; }
    .tv-time-filters { display: flex; align-items: center; gap: 4px; font-size: 13px; flex-wrap: wrap; color: #64748b; }
        .tv-time-filters span.title-label { font-weight: 700; color: #0f172a; margin-right: 6px; }
        .tv-time-filters a { color: #334155; text-decoration: none; padding: 5px 10px; border-radius: 2px; font-size: 13px; font-weight: 500; display: inline-block; transition: background-color 0.15s ease, color 0.15s ease; }
            .tv-time-filters a:hover { color: #0f172a; background-color: #f1f5f9; }
            .tv-time-filters a.active { color: #0f172a; background-color: #e2e8f0; font-weight: 700; }

    .tv-time-divider { color: #cbd5e1; user-select: none; margin: 0 2px; }

    .tv-search-box { display: flex; align-items: center; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 2px; padding: 4px 8px; }
        .tv-search-box input { border: none; outline: none; padding: 4px 6px; font-size: 13px; width: 180px; color: #0f172a; }
        .tv-search-box button { background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 2px; color: #64748b; }

    .search-icon-svg { width: 15px; height: 15px; fill: currentColor; }

    .timeline-header-scroll { overflow-x: auto; white-space: nowrap; background-color: #0a192f; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; }
        .timeline-header-scroll.grabbing { cursor: grabbing !important; }
        .timeline-header-scroll::-webkit-scrollbar { display: none; }

    .timeline-header { display: flex; height: 40px; background-color: #0a192f; width: calc(var(--slot-width) * var(--total-slots)); pointer-events: none; }

    .time-slot { width: var(--slot-width); flex-shrink: 0; font-size: 12px; color: #ffffff; line-height: 40px; padding-left: 10px; border-right: 1px dashed rgba(255, 255, 255, 0.2); }

    .tv-grid-widget { display: grid; grid-template-columns: 120px 1fr; background-color: #ffffff; position: relative; }

    .sticky-channels-column { position: relative; z-index: 20; background-color: #ffffff; }

    /* Kartica kanala sa stalnim finim borderom i shift-free pseudo-elementom za hover */
    .channel-logo-slot { height: 85px; width: 120px; display: flex; align-items: center; justify-content: center; border: 1px solid #e2e8f0; /* Stalni lagani border oko svakog kanala */ margin-top: -1px; /* Spriječava duplo debljanje graničnih linija između elemenata */ padding: 8px; background-color: #ffffff; position: relative; z-index: 2; text-decoration: none; }
        .channel-logo-slot:first-child { margin-top: 0; }

        /* Apsolutno pozicionirana linija za hover – ne pomiče elemente ni za 1px */
        .channel-logo-slot::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 3px; background-color: transparent; transition: background-color 0.15s ease; z-index: 5; }
        .channel-logo-slot.row-hovered::after { background-color: #ef4444; /* Crveni desni rub bez ikakvog shiftanja */ }
    .channel-logo-img { width: 68px; height: 34px; object-fit: contain; display: block; -webkit-user-drag: none; user-drag: none; }

    .timeline-scroll-area { overflow-x: auto; -webkit-overflow-scrolling: touch; background-color: #ffffff; cursor: grab; position: relative; }
        .timeline-scroll-area.grabbing { cursor: grabbing !important; }

    .past-time-overlay { position: absolute; top: 0; left: 0; width: 380px; height: 100%; background-color: rgba(241, 245, 249, 0.4); pointer-events: none; z-index: 1; }

    .current-time-line { position: absolute; top: 0; bottom: 0; left: 380px; width: 2px; background-color: #ef4444; z-index: 10; pointer-events: none; }
        .current-time-line::before { content: "SADA"; position: absolute; top: 4px; left: -16px; background: #ef4444; color: #ffffff; font-size: 8px; font-weight: 800; padding: 2px 4px; border-radius: 2px; letter-spacing: 0.5px; }

    .grid-row { position: relative; height: 85px; border-bottom: 1px solid #e2e8f0; width: calc(var(--slot-width) * var(--total-slots)); z-index: 2; }

    .grid-card { position: absolute; top: 5px; bottom: 5px; background-color: #ffffff; border: 1px solid #cbd5e1; border-radius: 2px; padding: 6px 8px; display: flex; flex-direction: column; justify-content: flex-start; text-decoration: none; overflow: hidden; -webkit-user-drag: none; user-drag: none; z-index: 3; cursor: pointer; transition: border-color 0.15s, opacity 0.15s; }
        .grid-card.past { background-color: #f8fafc; border-color: #e2e8f0; opacity: 0.75; }
        .grid-card.current { background: linear-gradient( to right, #f1f5f9 0%, #f1f5f9 var(--past-progress, 50%), #ffffff var(--past-progress, 50%), #ffffff 100% ); border-color: #cbd5e1; border-left: 3px solid #0f172a; }
        .grid-card:hover { border-color: #0f172a; opacity: 1; z-index: 5; }
        .grid-card.selected { background: #cc0000 !important; border-color: #cc0000 !important; color: #ffffff !important; z-index: 15 !important; opacity: 1 !important; }
            .grid-card.selected .grid-card-title,
            .grid-card.selected .grid-card-time,
            .grid-card.selected .grid-card-desc { color: #ffffff !important; }
            .grid-card.selected .category-badge { background-color: rgba(255, 255, 255, 0.25); color: #ffffff; }
    .grid-card-title { font-size: 12px;  color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; text-transform: uppercase; text-decoration: none; display: block; pointer-events: none; }
    .grid-card-desc { font-size: 10px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; pointer-events: none; }

    .card-meta-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; pointer-events: none; }

    .grid-card-time { font-size: 10px; color: #64748b; }

    .category-badge { background-color: #1e293b; color: #ffffff; font-size: 8px; font-weight: 700; padding: 1px 4px; border-radius: 2px; text-transform: uppercase; line-height: 1; }
        .category-badge.drama { background-color: #6b21a8; }
        .category-badge.show { background-color: #b91c1c; }
        .category-badge.movie { background-color: #047857; }
        .category-badge.series { background-color: #d97706; }


    .tv-detail-popover { position: fixed; width: 180px; height: 280px; background: #ffffff; border: 1px solid #0f172a; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28); border-radius: 2px; z-index: 99999; display: none; top: 0; left: 0; flex-direction: column; overflow: hidden; }
        .tv-detail-popover.visible { display: flex; }
    .popover-header-bar { height: 32px; background-color: #0f172a; display: flex; justify-content: space-between; align-items: center; padding: 0 6px; flex-shrink: 0; }

    .btn-reminder { background-color: #0284c7; color: #ffffff; border: none; font-size: 9px; font-weight: 700; padding: 3px 6px; border-radius: 2px; cursor: pointer; display: flex; align-items: center; gap: 3px; text-transform: uppercase; }
    .btn-close-popover { background: #ffffff; color: #0f172a; border: none; width: 22px; height: 22px; cursor: pointer; border-radius: 2px; display: flex; align-items: center; justify-content: center; padding: 0; transition: background-color 0.15s ease; }
        .btn-close-popover:hover { background-color: #e2e8f0; }

    .close-icon-svg { width: 12px; height: 12px; fill: currentColor; display: block; }

    .popover-media-link { display: block; position: relative; width: 100%; height: 95px; background-color: #0f172a; overflow: hidden; flex-shrink: 0; text-decoration: none; }
        .popover-media-link img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s ease, transform 0.2s ease; -webkit-user-drag: none; user-drag: none; }

    .popover-media-overlay { position: absolute; bottom: 6px; left: 6px; background: rgba(15, 23, 42, 0.85); color: #ffffff; padding: 2px 4px; border-radius: 2px; font-size: 10px; font-weight: bold; line-height: 1.2; border: 1px solid rgba(255, 255, 255, 0.2); pointer-events: none; }
        .popover-media-overlay small { display: block; font-size: 8px; color: #94a3b8; font-weight: normal; }
    .popover-body { padding: 8px; flex-grow: 1; overflow-y: auto; }
    .popover-title-link { font-size: 12px; font-weight: 800; color: #0f172a; margin-bottom: 4px; line-height: 1.2; text-transform: uppercase; text-decoration: none; display: block; }
    .popover-description { font-size: 10px; line-height: 1.35; color: #334155; }
    .popover-loading { font-size: 10px; color: #64748b; font-style: italic; }




    /* Footer prilagođen našoj tamno plavoj paleti (#061122) */
    .site-footer {  position:relative;background-color: #1c1b22; color: var(--text-color, #a0aec0); border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 20px 16px; font-size: 13px; line-height: 1.6; }

    .footer-container { position: relative; max-width: 1250px; margin: 0 auto; }

    /* Copyright tekst */
    .footer-copy { margin: 0 0 8px 0; color: var(--text-color, #a0aec0); font-size: 13px; }

    /* Linkovi s uspravnim separatorima */
    .footer-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-bottom: 8px; }
        .footer-links a { color: #e2e8f0; text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; }
            .footer-links a:hover { color: var(--active-orange, #ff6b00); }
        .footer-links .sep { color: #475569; user-select: none; }

    /* Link za prebacivanje na desktop verziju */
    .footer-desktop-toggle a { color: #94a3b8; text-decoration: none; font-size: 12px; }
        .footer-desktop-toggle a:hover { color: #fff; text-decoration: underline; }

    /* Back to top gumb sa desne strane */
    .back-to-top { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: #fff; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: background-color 0.2s, color 0.2s; }
        .back-to-top:hover { background-color: rgba(255, 255, 255, 0.1); color: var(--active-orange, #ff6b00); }




    /* Zatamnjena pozadina s paddingom od 10px sa svih strana */
    .login-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; z-index: 1050; padding: 10px; /* Osigurava 10px razmaka od rubova ekrana sa svih strana */ box-sizing: border-box; }

    /* Modal kutija koja se prilagođava s razmakom svuda */
    .login-modal-box { background: #000; width: 100%; max-width: 400px; margin: auto; /* Automatski centrira i osigurava ravmjeran razmak */ padding: 20px 16px; border-radius: 3px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); position: relative; font-family: system-ui, -apple-system, sans-serif; max-height: calc(100vh - 20px); /* Sprečava da prelazi visinu ekrana s uračunatim marginama */ overflow-y: auto; /* Omogućava skrolanje ako zatreba */ box-sizing: border-box; }
    /* Gumb za zatvaranje */
    .login-close-btn { position: absolute; top: 20px; right: 15px; background: transparent; border: none; font-size: 34px; color: #6c757d; cursor: pointer; line-height: 1; }
        .login-close-btn:hover { color: #fff; }

    /* Naslov */
    .login-title { font-family: 'Raleway',sans-serif; text-transform: lowercase; text-align: left; font-size: 27px; font-weight: 900; color: #e0e0e0; margin: 0 0 50px }

    /* Društveni gumbi (Google / Facebook) */
    .social-login-container { display: flex; flex-direction: column; gap: 10px; margin-bottom: 15px; }
    .btn-social { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 14px; background-color: #000; border: 1px solid #474457; border-radius: 5px; color: #e0e0e0; font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color 0.2s, border-color 0.2s; }
        .btn-social:hover { background-color: #111; border-color: #5b576f; }

    /* Separator "ili e-mailom" */
    .login-divider { display: flex; align-items: center; text-align: center; color: #fff; font-size: 13px; margin: 5px 0 15px; }
        .login-divider::before,
        .login-divider::after { content: ''; flex: 1; border-bottom: 1px solid #5b576f; margin-top: 2px }
        .login-divider span { padding: 5px 10px; }

    .form-group .form-label { font-size: 13px }
    /* Polja za unos */
    .login-input { font-weight: bold; border-radius: 0px; background: #000; color: #fff; width: 100%; padding: 7px 10px; border: 1px solid #474457; font-size: 15px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
        .login-input:focus { border-color: #e51a24; box-shadow: 0 0 0 3px rgba(229, 26, 36, 0.12); }

    /* Kontrola za "Zapamti me" s preciznim razmakom gore i dolje */
    .form-check.mb-4 { margin-top: 10px; margin-bottom: 14px !important; padding-top: 2px; padding-bottom: 2px; }
    .form-check-input { cursor: pointer; }
    .form-check-label { color: #fff; font-size: 13px; cursor: pointer; }

    /* Glavni crveni gumb za prijavu */
    .btn-submit-red { width: 100%; padding: 12px; background-color: #e51a24; border: none; border-radius: 2px; color: #ffffff; font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color 0.2s; }
        .btn-submit-red:hover { background-color: #c8131c; }

    /* Donji link za registraciju */
    .register-prompt { text-align: center; margin-top: 15px; font-size: 13px; color: #495057; }
        .register-prompt a { color: #e51a24; text-decoration: none; font-weight: 600; }
            .register-prompt a:hover { text-decoration: underline; }

    /* Uvjeti korištenja i linija */
    .login-footer-divider { border: none; border-top: 1px solid #5b576f; margin: 18px 0 12px 0; }

.login-terms { text-align: center; font-size: 11px; color: #adb5bd; line-height: 1.3; }
.login-terms a { color: #6c757d; text-decoration: underline; }
.login-terms a:hover { color: #212529; }

    

.responsive-thumb { width: 100%; /* Širina se prilagođava roditeljskom elementu / ekranu mobitela */ height: auto; /* Automatska visina prema omjeru */ aspect-ratio: 16 / 9; /* Ovdje upiši stvarni omjer slike, npr. 16/9, 4/3 ili točne dimenzije */ object-fit: cover; /* Osigurava da se slika lijepo smjesti bez deformiranja (radi crop) */ }

    .articles-grid { line-height: 1.4em; letter-spacing: 0px; padding: 20px; display: grid; grid-template-columns: repeat(2, 1fr); /* Osnovno: 2 stupca iste širine */ gap: 25px 15px; /* Razmak između članaka */ }
        .articles-grid img { border-radius: 1px }
    /*
.clanak-preview-card .clanak-title {margin-bottom:10px;line-height:1em; margin-top:5px;font-size: 20px; font-family: 'Roboto Condensed', sans-serif !important; font-weight: 700 }
.preview-big .clanak-title { margin-bottom:0;padding: 0 20px 10px; font-size: 27px; line-height: 1em; font-weight: 900 }
.clanak-preview-card a { text-decoration: none; color: #222  ; }
*/
    .clanak-preview-card { position: relative; overflow: hidden; }
    .clanak-image-wrapper { position: relative; overflow: hidden; }
        .clanak-image-wrapper img.responsive-thumb { width: 100%; height: 100%; display: block; transition: transform 0.7s ease-out; }
    .clanak-preview-card:hover .clanak-image-wrapper img.responsive-thumb { transform: scale(1.15); }
    .clanak-preview-card .clanak-content { padding: 20px 20px 0 20px }
        .clanak-preview-card .clanak-content p { margin: 0; padding: 0 0 4px 0; font-family: 'Roboto Condensed','Arial Fallback',sans-serif; font-size: 22px; font-weight: 100 }
    /* Stilovi i padding sada idu direktno na naslov */
    .clanak-title { margin: 0; letter-spacing: -1px; padding: 10px 0px; font-size: 23px; z-index: 3; font-family: 'Roboto Condensed','Arial Fallback', sans-serif; line-height: 1em !important; font-weight: 500; }
    .clanak-link { color: #000; text-decoration: none; }

        /* Pseudo-element i dalje osigurava da je cijela kartica klikabilna */
        .clanak-link::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }



    .container-desktop-top { padding-bottom:30px; max-width: 1250px; margin: 0px 20px auto; /* Centriranje kontejnera na ekranu */ display: grid; /* 
      Definiramo 3 stupca:
      - 1fr (uzima pola preostalog prostora)
      - 1fr (uzima drugu polovinu preostalog prostora)
      - 300px (fiksna desna kolona)
      - definiramo template zone
    */ grid-template-columns: 1.1fr 0.9fr 300px; gap: 30px; grid-template-areas: "left middle right"; }
        /* Povezujemo klase s definiranim zonama */
        .container-desktop-top .col-left { grid-area: left; }
        .container-desktop-top .col-middle { grid-area: middle; }
        .container-desktop-top .col-right { grid-area: right; }

    .container-2columns { max-width: 1250px; margin: 35px 20px auto; display: grid; /* 
      Definiramo 2 stupca:
      - 1fr (uzima pola preostalog prostora)
      - 300px (fiksna desna kolona)
      - definiramo template zone
    */ grid-template-columns: 1fr 300px; gap: 50px; }
    /* Povezujemo klase s definiranim zonama */

    /* Opcionalno: prilagodba za manje ekrane (mobiteli / tableti) da se sve složi jedno ispod drugog */
    @media (max-width: 900px) {
        .container-2columns { margin: 35px 0 0 0; grid-template-columns: 1fr; }
            .container-2columns .ad-container-300x600 { height: 250px; min-height: 250px; min-height: 250px }
        .clanak-preview-card .clanak-content p { font-size: 20px; font-weight: 100 }
        .preview-big .clanak-title { font-size: 30px; }
    }

    /* Fiksni kontejner za oglas 300x600 koji drži prostor i sprječava CLS */
    .ad-container-300x600 { margin: 0 auto; width: 300px; min-width: 300px; min-height: 300px;display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom:40px }
    /* Tekst oznake oglasa (opcionalno) */
    .ad-placeholder-text { font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; }



    .preview-big p { margin: 0; padding: 10px 20px; font-weight: 300; font-size: 24px; line-height: 1.1em }



    h1.site-category-header, h2.site-category-header { border-top: 1px solid #f0f0f0; padding-top: 45px; color: #1c1b22; margin: 30px 20px 0px; letter-spacing: -1px; font-family: 'Raleway', sans-serif; text-transform: lowercase; font-size: 40px; font-weight: 900 }
    h1.site-category-header a, h2.site-category-header a { text-decoration: none; color: #000 }

    /* Link unutar h2 koji čini cijelu traku klikabilnom */
    .site-category-header a { display: flex; align-items: center; justify-content: space-between; text-decoration: none; color: inherit; width: 100%; }

    /* Spremnik za SVG strelicu */
    .site-category-header .category-caret { margin-left: auto; display: flex; align-items: center; color: #000; transition: transform 0.2s ease; }

        /* Veličina SVG-a  */
        .site-category-header .category-caret svg { width: 30px; height: 30px; }

    /* Efekt laganog pomaka strelice na hover cijelog naslova */
    .site-category-header a:hover .category-caret { transform: translateX(3px); }


    .articlebig-title { padding: 60px 20px 0px }
        .articlebig-title h1 { letter-spacing: -1px; margin: 0; font-family: 'Roboto Condensed','Arial Fallback', sans-serif; font-size: 48px; font-weight: 500; line-height: 1.1em }
        .articlebig-title p { margin-top: 10px; font-size: 24px; font-weight: 300; font-family: 'Roboto Condensed','Arial Fallback', sans-serif }
    .articlebig-top .article { font-family: Arial, Helvetica, sans-serif }

    /* Prilagodba za manje ekrane (mobiteli / tableti) da se sve složi jedno ispod drugog */
    @media (max-width: 900px) {
        .container-desktop-top { margin: 0; grid-template-columns: 1fr; grid-template-areas:
                "left"
                "right"
                "middle"; }
        .ad-container-300x600 { height: 250px; min-height: 250px; }
        .articlebig p { font-size: 18px !important; }
        .articlebig-title h1 { font-size: 31px; }
        .articlebig-title p { font-size: 20px; }
        .articlebig p { font-size: 21px }
        .articlebig-title { padding: 35px 20px 0 }
    }


@media (min-width: 700px) {
    .preview-big .clanak-title { font-size: 36px; font-weight: 500; }
}

    @media (min-width: 900px) {
        .articles-grid { padding: 0; }
        .clanak-preview-card .clanak-title { font-size: 21px; }
        .preview-big .clanak-title { font-size: 45px; font-weight: 500; }
    }



    @media (max-width:760px) {
        
        .container-desktop-top .col-middle { margin: 0 }
    }



    .articletext-2columns { align-items: start; /* Ključno: omogućuje da se stupci ponašaju nezavisno po visini */ color: #000; line-height: 1.7em; font-size: 1.05em; margin: 0px 20px auto; /* Centriranje kontejnera na ekranu */ display: grid; /* 
      Definiramo 3 stupca:
      - 1fr (uzima pola preostalog prostora)
      - 1fr (uzima drugu polovinu preostalog prostora)
      - 300px (fiksna desna kolona)
      - definiramo template zone
    */ grid-template-columns: 170px 1fr; gap: 30px; grid-template-areas: "left2 right2"; }
        /* Povezujemo klase s definiranim zonama */
        .articletext-2columns .col-left { grid-area: left2; }
        .articletext-2columns .col-right { grid-area: right2; }
        .articletext-2columns .article p { margin: 30px 0 }
        .articletext-2columns .article a { text-decoration: none; color: red; text-decoration: underline }

        .articletext-2columns .article iframe[src*="youtube.com"] { width: calc(100% + 50px) !important; height: 350px !important; margin-left: -25px !important; margin-right: -25px !important; display: block; border: none; }
        .articletext-2columns .article img { width: calc(100% + 50px) !important; margin-left: -25px !important; margin-right: -25px !important; max-width: none !important; height: auto !important; display: block; }

@media (min-width:1200px) {
    .articletext-2columns .col-left { position: sticky; top: -20px; align-self: start; }
}
    .articlesrelated { margin-top: 30px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .articlesrelatedheader { margin-left: -20px; margin-top: 32px; font-family: 'Raleway', sans-serif; font-size: 18px; color: #b0b0b0; letter-spacing: -1px; font-weight: 900; margin-bottom: -10px }


    @media (max-width:700px) {
        .articletext-2columns { font-size: 1.15em }
    }

    @media (max-width:1199px) {
        .articlesrelatedheader { margin-left: 0; margin-top: 0 }
    }

    @media (min-width:900px) {
        .articletext-2columns .article iframe[src*="youtube.com"] { width: 100% !important; height: 350px !important; margin-left: 0 !important; margin-right: 0 !important; display: block; border: none; }
        .articletext-2columns .article img { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; height: auto !important; display: block; }
    }

    @media(min-width:1200px) {
        .articlesrelated { grid-template-columns: 1fr; margin-left: -20px; margin-right: 20px }
    }

    @media (max-width: 1199px) {
        .articletext-2columns { margin: 0 25px; grid-template-columns: 1fr; grid-template-areas: "right2" "left2"; }
    }

    .container-2columns > .col-right { display: grid; grid-template-rows: 1fr 1fr; /* Dijeli raspoloživu visinu na dva jednaka dijela (50% - 50%) */ height: 100%; /* Prati visinu lijevog stupca članka */ }

    /* Svaki kontejner unutar desnog stupca */
    .da-lots-wrapper { position: relative; display: flex; justify-content: center; align-items: flex-start; /* Ili center, ovisno kako želiš centrirati oglas unutar tog dijela */ }

    /* Ako želiš da se unutar svog dijela oglas još i zalijepi pri skrolanju */
    @media (min-width: 901px) {
        .da-lots-wrapper .ad-container-300x600 { position: sticky; top: 20px; }
    }


    .single-line-text { white-space: nowrap; /* Sprečava prelazak teksta u novi red */ overflow: hidden; /* Sakriva tekst koji izlazi izvan okvira kontejnera */ text-overflow: ellipsis; /* Automatski dodaje tri točke (...) na kraj skraćenog teksta */ }
    .multi-line-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* Broj linija na koji želiš ograničiti tekst */ overflow: hidden; text-overflow: ellipsis; }


    .film-card-wrapper { display: flex; width: 100%; flex-direction: column; }
    .film-card { margin: 0; color: #fff !important; font-family: 'Roboto Condensed','Arial Fallback'; position: relative; width: 100%; height: 250px; border-radius: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; background-image: var(--bg-image); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; background-color: #1a1a1a; }
        .film-card:hover { background-size: 110%; /* Povećava sliku za 10% na hover */ }
        .film-card-top:hover {background-size:cover}
        .film-card .film-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: var(--bg-image); background-size: cover; /* Zadržava savršeni cover efekt */ background-position: 50% 10%; background-repeat: no-repeat; transition: transform 0.7s ease-out; /* Glatka animacija transformacije */ z-index: 0; }
        /* Na hover miša, slika se glatko zumira, a ostaje pokrivena i centrirana */
     .film-card:hover .film-bg { transform: scale(1.15); /* Povećava sliku za 10% */ }
    /* Gradijent preko zasebnog diva */
    .film-gradient { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(28, 27, 34, 1) 0%,rgba(28, 27, 34, 0.7) 50%, rgba(28, 27, 34, 0.1) 70%, rgba(28, 27, 34, 1) 100%); z-index: 1; pointer-events: none; }



    /* Pozicioniranje naslova na dno */
    .film-card h3 { z-index: 3; margin: 0 0 4px; padding: 15px 15px 0px; line-height: 1em }

        /* Link unutar naslova */
        .film-card h3 a { font-size: 23px; letter-spacing: -1px; font-family: 'Roboto Condensed', sans-serif !important; line-height: 1.04em; font-weight: 500; color: #ffffff; text-decoration: none; }

            /* TRIK: Pseudo-element se stavlja NA a element, ali se širi 100% prema .film-card */
            .film-card h3 a::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }

    .film-card .film-type-year-genres { z-index: 1; padding: 0 15px; margin-top: -3px; text-transform: uppercase; letter-spacing: 3px; font-size: 12px; font-weight: 300; }
    .film-card .film-originaltitle { z-index: 1; padding: 1px 15px 2px; text-transform: uppercase; font-size: 12px; opacity: .6 }

    .film-card .button-followcontent { border: 1px solid #444 !important; border-radius: 3px; padding: 10px 5px; font-weight: bold; font-size: 11px; z-index: 10; margin: 10px 15px 15px; width: 70px; background: #2a2a2a; color: #d0d0d0 }
        .film-card .button-followcontent:hover { background: red; cursor: pointer }
    .movie-grid-container { display: grid; gap: 1px; /* Razmak između kartica */ grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

    .film-card-top .button-followcontent { margin: 20px 20px 20px }
    .film-card-top .film-type-year-genres { padding: 0 20px }
    .film-card-top .film-originaltitle { padding: 2px 20px 2px }

    span.bullet { display: inline-block; width: 8px; height: 8px; background-color: #d0d0d0; /* Boja kružića */ border-radius: 50%; /* Pretvara kvadrat u savršeni krug */ margin: 0; /* Razmak lijevo i desno od kružića */ vertical-align: middle; /* Poravnava krug po sredini teksta */ }
    button span.bullet { margin: 0 2px 1px 0 }

    @media (min-width:700px) {
        .filmindex-movies-container .movie-grid-container { grid-template-columns: repeat(4, minmax(170px, 1fr)) }
    }

    @media (max-width:1058px) {
        .frontpage-movies-container .movie-grid-container .film-card-wrapper:nth-child(5) { display: none }
    }

    @media (max-width:900px) {
        .frontpage-movies-container .movie-grid-container .film-card-wrapper:nth-child(4) { display: none }
        .articles-grid { margin-bottom: -40px }
        
    }

    @media (max-width:731px) {
        .frontpage-movies-container .movie-grid-container .film-card-wrapper:nth-child(4) { display: none }
        .movie-grid-container { margin: 0 -20px }
    }

    @media (max-width:526px) {
        .frontpage-movies-container .movie-grid-container .film-card-wrapper:nth-child(4) { display: flex }
        .movie-grid-container { margin: 0 -20px }
    }

@media (min-width: 526px) and (max-width: 731px) {
    .movie-grid-container { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
}



    @media (max-width:355px) {
        .frontpage-movies-container .movie-grid-container .film-card-wrapper:nth-child(5) { display: flex }
        .movie-grid-container { margin: 0 -20px }
    }

    .actors-small { z-index: 2; padding: 0 15px 5px; /* margin-top: -30px; */ top: 11px; font-size: 10px; font-weight: 300; /* font-family: arial; */ text-transform: uppercase }
        .actors-small span { display: inline-block; padding-right: 3px }

    .custom-star { z-index: 1; width: 16px; height: 16px; color: #fff; /* Boja zvjezdice */ display: inline-block; }


    .film-body { padding: 20px 20px }

    .film-card-top { height: 600px; }
        .film-card-top h1 { z-index: 1; font-size: 45px; font-weight: 400; padding: 0 18px; line-height: 1.1em; margin-bottom: 12px }

    @media (max-width:768px) {
        .film-card-top h1 { font-size: 32px; text-shadow: 1px 0px 10px #000 }
        .film-sadrzaj { font-size: 20px; line-height: 1.5em !important }
        .comment-text { font-size: 18px !important; line-height: 1.3em !important }
        .film-sazetak { font-size: 26px !important; line-height: 1.4em !important }
        .comment-text-input {font-size:18px !important; line-height:1.3em !important}
    }

    .film-card-top:hover .film-bg { transform: scale(1) }

    .person-card-list { margin: 0 -15px 0 0px; display: flex; flex-wrap: wrap; /* Na desktopu idu slobodno u novi red kad ponestane mjesta */ gap: 20px; padding: 0px }
    .person-card-preview { position: relative }
        .person-card-preview .person-image { }

    /* Na ekranima manjim od 768px (mobitel) vraćamo horizontalno skrolanje */
    @media (max-width: 768px) {
        .site-category-header-magazin { display: none }
        .film-card-top { height: 300px }
        .person-card-list { flex-wrap: nowrap; /* Sprječava prelazak u novi red na mobitelu */ overflow-x: auto; /* Omogućuje horizontalno prevlačenje */ white-space: nowrap; /* Sakrivanje scrollbara */ scrollbar-width: none; -ms-overflow-style: none; }
            .person-card-list::-webkit-scrollbar { display: none; }
        .person-card-preview { margin-left: 5px; white-space: normal; flex: 0 0 auto; /* Sprečava stiskanje kartica na mobitelu */ }
    }

    .person-card-image-wrapper { overflow: hidden; width: 100%; margin-bottom: 5px; background: #e0e0e0; color: #000; width: 75px !important; /* Fiksna širina */ height: 75px !important; /* Fiksna visina - mora biti identična širini! */ border-radius: 50% !important; /* Čini element savršenim krugom */ overflow: hidden !important; /* Skriva višak slike izvan kruga */ display: flex; justify-content: center; flex-shrink: 0; aspect-ratio: 1 / 1; /* Dodatno osigurava omjer 1:1 */ }
        .person-card-image-wrapper img,
        .person-card-image-wrapper svg { aspect-ratio: 1 / 1.25; display: block; height: auto; object-fit: cover; transition: transform 0.7s ease; /* Glatka animacija zumiranja */ }

        .person-card-image-wrapper img { width: 100% }
    .person-card-preview:hover .person-card-image-wrapper img,
    .person-card-preview:hover .person-card-image-wrapper svg { transform: scale(1.1); /* Povećanje za 10% */ }
    .person-image { width: 100%; height: 100%; object-fit: cover; /* Popunjava krug bez izobličenja */ display: block; }

    .person-name a::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
    .person-name a { text-decoration: none; color: #000 }
    /* Stilovi za SVG placeholder (ako nema slike) */
    .person-image-placeholder { width: 30px; /* Veličina ikone unutar kruga */ height: 30px; color: #888; /* Boja ikone */ }

    /* Poravnanje imena ispod kruga */
    .person-card-preview { display: flex; flex-direction: column; align-items: center; text-align: center; width: 65px; /* Opcionalno: fiksna širina kartice da se ime ne širi previše */ }

    .person-name { font-size: 14px; font-family: 'Roboto Condensed','Arial Fallback',sans-serif; line-height: 1.2; }

    .film-sazetak { line-height: 1.5em; padding: 30px 0 0; font-family: 'Roboto Condensed',sans-serif; font-size: 28px }
    .film-sadrzaj { font-family: Arial, sans-serif; line-height: 1.7em }
        .film-sadrzaj p { margin-bottom: 15px }

    @media (max-width:500px) {
        .film-sazetak { font-size: 1.4em }
    }

    .film-embed-src .yt-thumb-container { max-width: 100% !important }



    .film-aggregate-rating { z-index: 1; padding: 10px 20px 10px 60px; width: 100% }
        .film-aggregate-rating .rating-value { font-size: 24px; font-weight: 600; position: absolute; margin-top: -41px; margin-left: -64px; width: 50px; text-align: right }
        .film-aggregate-rating .rating-count { font-size: 10px; position: absolute; margin-left: -45px; margin-top: -13px; text-align: right; width: 40px }
            .film-aggregate-rating .rating-count svg { width: 10px; height: 10px; fill: white }
    table.ratingbreakdown { width: 100%; max-width: 200px; border-collapse: collapse; }
        table.ratingbreakdown td { text-align: center; padding: 0 1px; width: 10%; vertical-align: bottom; }
    /* Fiksna visina u kojoj se iscrtavaju stupci */
    .bar-area { height: 20px; display: flex; align-items: flex-end; justify-content: center; }
    /* Stupac grafa */
    .bar { background: rgba(255,255,255,0.4); width: 100%; }
    /* Oznaka (broj) ispod stupca */
    .bar-label { color: #a0a0a0; font-size: 10px; margin-top: 4px; text-align: center; }
    .film-card .button-followcontent { position: absolute; top: 0; border: 0 !important }
    .film-card-top .film-aggregate-rating { padding: 11px 20px 20px 65px }
    .film-card .button-followcontent { display: none }
    .film-card-top .button-followcontent { display: none; position: static; margin: 15px 20px }

    .film-nadnaslov { font-family: Arial; font-size: 17px; font-weight: bold; margin-top: 60px }

    /* Glavni spremnik */
    .rating-container { position: relative; max-width: 360px; z-index: 1; display: none; align-items: center; gap: 5px; border-radius: 4px; padding: 5px 5px 3px 16px; }

        /* Gumb za minus */
        .rating-container .clear-btn { background: none; fill: #fff; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; opacity: 0.8; transition: opacity 0.2s; }

            .rating-container .clear-btn:hover { opacity: 1; }
            .rating-container .clear-btn svg { width: 100%; height: 100%; fill: #fff; pointer-events: none; }

        /* Stil zvjezdica */
        .rating-container .stars { display: flex; gap: 0px; }

        .rating-container .star { display: block; width: 21px; height: 21px; cursor: pointer; }

            /* Osigurava maksimalnu oštrinu (rješava "čupavost") */
            .rating-container .star svg { width: 100%; height: 100%; fill: transparent; stroke: #fff; stroke-width: 1.5px; stroke-linejoin: round; shape-rendering: geometricPrecision; /* Ključno za uglađene rubove */ pointer-events: none; transition: stroke 0.1s, fill 0.1s; }
            /* Stil za hover i aktivno stanje */
            .rating-container .star:hover svg,
            .rating-container .star.active svg { stroke: #ffc140; fill: #ffc140; }

    /* Stil oznake "Moja ocjena" */
    .rating-label { text-align: center; background-color: #b93700; color: #fff; font-size: 13px; padding: 1px 3px; border-radius: 2px; margin-left: 5px; letter-spacing: 0.3px; }



    /* film schedule*/
    .film-schedule-container { margin-bottom: 40px; font-family: 'Roboto Condensed','Arial Fallback',sans-serif; font-weight: 300; background-color: #ffffff; display: flex; flex-direction: column; gap: 0px; }
        .film-schedule-container .film-schedule-header { font-size: 11px; font-weight: 300; text-transform: uppercase; color: #666; letter-spacing: 2px; padding: 10px 18px 4px }
        .film-schedule-container .film-schedule-item { font-size:16px; display: flex; align-items: center; justify-content: space-between; background-color: #fcfcfc; border-top: 1px solid #eef0f2; padding: 5px 5px; border-radius: 0px; transition: background-color 0.2s, border-color 0.2s; }
         .film-schedule-container .film-schedule-item:hover { background-color: #f4f6f8; }
        .film-schedule-container .film-schedule-left { display: flex; align-items: center; gap: 6px }
.film-schedule-item .film-schedule-center { flex: 1; /* Zauzima sav preostali slobodni prostor */ display: flex; justify-content: center; /* Centrira sadržaj horizontalno */ align-items: center; /* Centrira sadržaj vertikalno */ text-align: center; padding: 0 10px; /* Odmak od lijeve i desne strane */ /* Opcionalno za tekst */color: #333; white-space: nowrap; /* Ako želiš da tekst ostane u jednom redu */ overflow: hidden; /* Sprječava probijanje ako je tekst dug */ text-overflow: ellipsis; /* Stavlja tri točke (...) ako ne stane cijeli tekst */ }
        .film-schedule-container .film-schedule-channel-badge { filter: grayscale(); display: inline-flex; align-items: center; justify-content: center; background: #ffffff; border: 1px solid #e0e0e0; border-radius: 3px; overflow: hidden; flex-shrink: 0; text-decoration: none; transition: opacity 0.2s; }
            .film-schedule-container .film-schedule-channel-badge:hover { opacity: 0.85; filter: none }
            .film-schedule-container .film-schedule-channel-badge img { display: block; max-width: 100%; height: auto; }
            .film-schedule-container .film-schedule-channel-badge a:hover img { display: block; max-width: 90%; height: auto; }
        .film-schedule-container .film-schedule-time {color: #000; letter-spacing: -1px }
        .film-schedule-container .film-schedule-action-btn { display: inline-flex; align-items: center; font-family: 'Roboto Condensed',sans-serif; white-space: nowrap; background-color: #d0d0d0; color: #ffffff; font-size: 13px; padding: 7px 1px; border: none; border-radius: 2px; cursor: pointer; transition: background-color 0.2s; }
            .film-schedule-container .film-schedule-action-btn:hover { background-color: #0066aa; }
        .film-schedule-container .film-schedule-all-link { margin-top: 1px; display: flex; align-items: center; justify-content: space-between; padding: 8px 18px; background-color: #f6f6f6; text-decoration: none; color: #006699; font-weight: 500; font-size: 14px; }
            .film-schedule-container .film-schedule-all-link:hover { }
        .film-schedule-container .film-schedule-total-badge { display: flex; align-items: center; gap: 8px; }
        .film-schedule-container .film-schedule-badge-number { background-color: #6b7280; color: #ffffff; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 2px; min-width: 22px; text-align: center; }
        .film-schedule-container .film-schedule-badge-arrow { color: #006699; font-weight: bold; font-size: 14px; }

    @media (max-width:990px) {
        .film-schedule-container .film-schedule-action-btn { font-size: 0px }
        
    }
    
    @media (max-width:399px){
        .film-schedule-container .film-schedule-channel-badge { width: 54px }
        .film-schedule-container .film-schedule-item {font-size:14px !important}
    }
    @media (min-width: 400px) and (max-width: 500px) {
        .film-schedule-container .film-schedule-channel-badge { width: 60px }
    }
    @media (min-width:390px){
        .film-schedule-item {font-size:17px !important}
    }

    .film-card-top .film-gradient { background: linear-gradient(to top, rgba(28, 27, 34, 1) 0%,rgba(28, 27, 34, 0.7) 30%, rgba(28, 27, 34, 0.1) 80%, rgba(28, 27, 34, 0.1) 100%) }
    .layout-2columns-rightfixed { display: flex; gap: 30px; max-width: 1250px; margin: 0 auto; }
        .layout-2columns-rightfixed .content-main { flex: 1; min-width: 0; }
        .layout-2columns-rightfixed .content-sidebar { width: 320px; flex-shrink: 0; }

    /* Sakrivanje desne kolone na ekranima užim od 700px */
    @media (max-width: 770px) {
        .layout-2columns-rightfixed .content-sidebar { display: none !important; }
    }



    /* Komentari */
    .fb-comments-container { width: 100%; font-family: Arial, sans-serif; background-color: #ffffff; margin: 75px 0 }
    .comments-title { font-weight: bold; color: #050505; margin-bottom: 30px; font-family: 'Raleway', sans-serif; font-size: 30px; text-transform: lowercase; letter-spacing: -1px; }
    .top-main-input-wrapper { display: flex; align-items: flex-start;  padding-bottom: 16px; border-bottom: 1px solid #e4e6eb; }
    .comments-list { display: flex; flex-direction: column; gap: 16px; }
    .comment-thread { display: flex; padding-bottom: 15px; border-bottom: 1px solid #f0f0f0; flex-direction: column; position: relative; }
    .comment-item { display: flex; align-items: flex-start; position: relative; }
    .nested-replies-container .comment-item { margin-left: 65px; margin-top: 12px; }
    .nested-replies-container .reply-trigger-btn { display: none; }
    .comment-avatar { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; margin-right: 5px; flex-shrink: 0; }
    .nested-replies-container .comment-avatar,
    .thread-reply-input .comment-avatar { margin-top: 5px; width: 25px; height: 25px; }
    .comment-content-wrapper { width: 100%; display: flex; flex-direction: column; max-width: calc(100% - 60px); }
    .nested-replies-container .comment-content-wrapper { max-width: calc(100% - 46px); width: 100% }
    .comment-bubble { padding: 5px; border-radius: 18px; display: inline-block; }
    .comment-header { display: flex; align-items: baseline; gap: 6px; margin-bottom: 7px }
    .comment-author { font-size: 14px; margin-bottom: 4px; font-weight: 600; color: #050505; cursor: pointer; }
        .comment-author a { color: #000; text-decoration: none }
    .comment-relatedcontent { margin-top:-10px; display: flex; align-items: center; gap: 6px; /* Razmak između ikone i teksta */ font-size: 22px; color: #666; margin-bottom: 4px; line-height: 1em; font-family: 'Roboto Condensed',sans-serif }
        .comment-relatedcontent a { line-height: 1em; margin-top: 2px; margin-bottom: 4px; transition: background-color 0.2s; text-decoration: none; color: #fff; letter-spacing: 0px; font-size: 17px; padding: 4px 10px; background: #3f3d4e; border-radius: 11px; }
            .comment-relatedcontent a:hover { background: #545168 }

    .comment-author:hover { text-decoration: underline; }
    .comment-time { font-size: 11px; color: #65676b; }
    .comment-text { font-size: 16px; color: #050505; margin-top: 4px; word-break: break-word; line-height: 1.5; }
    .comment-actions { display: flex; align-items: center; gap: 6px; margin-left: 4px; }
    .icon-action-btn { background: none; border: none; cursor: pointer; color: #999; display: flex; align-items: center; justify-content: center; padding: 5px; border-radius: 50%; transition: background-color 0.2s, color 0.2s; }
        .icon-action-btn svg { pointer-events: none; width: 16px; height: 16px }
        .icon-action-btn:hover, .icon-action-btn.active { background-color: rgba(0, 0, 0, 0.05); color: #3e99ff }
    .action-divider { width: 1px; height: 12px; background-color: #ced0d4; margin: 0 2px; }
    .action-btn { background: none; border: none; font-size: 12px; font-weight: 600; color: #b0b0b0; cursor: pointer; padding: 0; }
        .action-btn:hover { text-decoration: underline; }
    .dot-separator { font-size: 12px; color: #65676b; }
    .comment-menu-container { position: relative; margin-left: auto; }
    .menu-dots-btn { background: none; border: none; cursor: pointer; color: #65676b; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0.3; transition: background-color 0.2s, opacity 0.2s; }
        .menu-dots-btn svg { pointer-events: none; }
    .comment-item:hover .menu-dots-btn { opacity: 1; }
    .menu-dots-btn:hover { background-color: rgba(0, 0, 0, 0.05); color: #050505; }
    .dropdown-menu { display: none; position: absolute; right: 0; top: 32px; background-color: #ffffff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border-radius: 8px;  z-index: 10; width: 130px; }
        .dropdown-menu.show { display: block; }
    .dropdown-item { display: block; width: 100%; background: none; padding:10px; border: none; text-align: left; font-size: 13px; font-weight: 500; color: #050505; border-radius: 4px; cursor: pointer; }
        .dropdown-item:hover { background-color: #f2f2f2; }
    .thread-reply-input { display: flex; align-items: flex-start; margin-top: 12px; margin-left: 65px; }
    .comment-input-box { display: flex; align-items: center; flex: 1; padding: 6px 5px 6px 7px; font-size: 16px; background: #fafafa; border: 1px solid #f3f3f3; border-radius: 8px }
    .comment-text-input { border: none; background: transparent; outline: none; font-size: 16px; width: 100%; resize: none; line-height: 1.6em; padding: 0; font-family: Helvetica, Arial, sans-serif; color: #050505; overflow-y: hidden; }
        .comment-text-input::placeholder { color: #65676b; }
    .send-btn { background: none; border: none; cursor: pointer; color: #0084ff; display: flex; align-items: center; justify-content: center; padding: 4px; margin-left: 6px; border-radius: 50%; transition: background-color 0.2s; height: 24px; flex-shrink: 0; }
        .send-btn svg { pointer-events: none; }
        .send-btn:hover { background-color: rgba(0, 132, 255, 0.1); }
    .replies-toggle-wrapper { margin: 4px 0 4px 58px }
    #load-more-btn,.load-more, .load-more a { text-decoration:none; color:#000; border: 0; background: #fff; padding: 10px; font-size: 20px; text-transform: lowercase; font-family: 'Roboto Condensed', sans-serif; cursor: pointer; }

    .comments-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid #f0f0f0; padding: 10px 0 20px; }

    .comments-title { margin: 0; font-size: 25px; font-weight: 500; }

    /* Custom Dropdown Stilovi */
    .custom-dropdown { position: relative; user-select: none; }

    .dropdown-toggle-btn { font-family: 'Raleway',sans-serif; background: transparent; border: 0px solid #f0f0f0; border-radius: 4px; /* padding: 6px 12px; */ font-size: 14px; color: #c0c0c0; cursor: pointer; display: flex; align-items: center; text-transform: LOWERCASE; gap: 6px; background-color: #fff; font-size: 19px; }

        .dropdown-toggle-btn:hover { border-color: #999; }

    .dropdown-options-menu { position: absolute; right: 0; top: 100%; padding: 4px; margin-top: 7px; background: #fff; border-radius: 9px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); display: none; z-index: 10; min-width: 160px; }

    .custom-dropdown.open .dropdown-options-menu { display: block; }

    .dropdown-option { width: 100%; text-align: left; background: none; border: none; padding: 8px 12px; font-size: 14px; color: #333; cursor: pointer; }

        .dropdown-option:hover { background-color: #f5f5f5; }

        .dropdown-option.active { font-weight: bold; color: #000; /* Prilagodi boju po želji */ }



    /* Profile */
    .profile-container { max-width: 1250px; margin: 0 auto; background: #fff; min-height: 100vh; font-family: Arial, sans-serif; }
    .profile-header { background: linear-gradient(135deg, #1c1b22 0%, #2b3441 100%); color: white; padding: 20px 20px 0 20px; }
    .header-actions { display: flex; justify-content: space-between; align-items: center; }
    .icon-btn { background: transparent; border: none; color: white; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; opacity: 0.9; border-radius: 50%; transition: background 0.2s, opacity 0.2s; }
        .icon-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.15); }

    /* Profilni dio */
    .profile-info { text-align: center; margin-top: 10px; }
    .avatar-wrapper { position: relative; display: inline-block; }
    .profile-avatar { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255, 255, 255, 0.4); box-shadow: 0 8px 16px rgba(0,0,0,0.15); }

    /* Stil za link / gumb za upload s hover efektom */
    .avatar-upload-badge { position: absolute; bottom: -2px; right: -2px; background: #ff3b30; color: white; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid white; box-shadow: 0 2px 6px rgba(0,0,0,0.2); text-decoration: none; cursor: pointer; transition: all 0.25s ease; }

        .avatar-upload-badge:hover { background: #e03228; transform: scale(1.15); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); }

    .profile-name { font-size: 20px; font-weight: 700; margin: 12px 0 4px 0; letter-spacing: -0.3px; }

    .profile-bio { font-size: 13px; opacity: 0.9; margin: 0 0 25px 0; font-weight: 400; }

    /* Tabovi */
    .profile-tabs { display: flex; justify-content: space-around; position: relative; }

    .tab-item { color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: 14px; font-weight: 600; padding-bottom: 12px; position: relative; transition: color 0.2s; }

        .tab-item:hover { color: white; }

        .tab-item.active { color: white; }

            .tab-item.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: white; border-radius: 3px 3px 0 0; }

    /* Donji dio sa sadržajem (kartice) */
    .profile-container { max-width: 1250px; margin: 0 auto; background: #fff; min-height: 100vh; font-family: Arial, sans-serif; }
    .profile-header { background: linear-gradient(135deg, #1c1b22 0%, #2b3441 100%); color: white; padding: 20px 20px 0 20px; }
    .header-actions { display: flex; justify-content: flex-end; align-items: center; }
    .icon-btn { background: transparent; border: none; color: white; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; opacity: 0.9; border-radius: 50%; transition: background 0.2s, opacity 0.2s; }
        .icon-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.15); }

    /* Profilni dio */
    .profile-info { text-align: center; margin-top: 10px; }
    .avatar-wrapper { position: relative; display: inline-block; }
    .profile-avatar { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255, 255, 255, 0.4); box-shadow: 0 8px 16px rgba(0,0,0,0.15); }

    /* Stil za link / gumb za upload s hover efektom */
    .avatar-upload-badge { position: absolute; bottom: -2px; right: -2px; background: #ff3b30; color: white; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid white; box-shadow: 0 2px 6px rgba(0,0,0,0.2); text-decoration: none; cursor: pointer; transition: all 0.25s ease; }
    .avatar-upload-badge:hover { background: #e03228; transform: scale(1.15); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); }
    .profile-name { font-size: 30px; font-family: 'Roboto Condensed', sans-serif; font-weight: 500; margin: 6px 0 0px 0; letter-spacing: -0.3px; }
    .profile-bio { font-size: 15px; opacity: 0.9; margin: 12px 0 45px 0; font-weight: 300; font-family: 'Roboto Condensed'; }

    /* Kontejner za akcije centriran ispod opisa */
    .profile-actions { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; margin-bottom: 35px; }

    /* Osnovni gumb Prati */
    .follow-btn { display: inline-flex; align-items: center; gap: 6px; background-color: #e50914; /* Tvoja primarna crvena ili naglašena boja */ color: #ffffff; border: none; border-radius: 20px; padding: 8px 18px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; }
    .follow-btn:hover { background-color: #b80710; }
    .follow-btn.following { background-color: rgba(255, 255, 255, 0.15); color: #ffffff; }

    /* Gumb s tri točke */
    .profile-more-dropdown { position: relative; }
    .more-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.08); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.15); cursor: pointer; transition: background-color 0.2s ease; }
    .more-btn:hover { background-color: rgba(255, 255, 255, 0.18); }

    /* Dropdown izbornik */
    .profile-dropdown-menu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px; background-color: #1e232a; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; padding: 6px 0; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); z-index: 100; min-width: 130px; list-style: none; }
    .profile-dropdown-menu.show { display: block; }

    /* Dropdown stavke */
    .profile-dropdown-item {text-decoration:none; display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 14px; background: none; border: none; color: #e0e0e0; font-size: 13px; cursor: pointer; text-align: left; transition: background-color 0.15s ease; }
    .profile-dropdown-item:hover { background-color: rgba(255, 255, 255, 0.08); }
    .profile-dropdown-item.danger-item { color: #ff5252; }
    .profile-dropdown-item.danger-item:hover { background-color: rgba(255, 82, 82, 0.12); }

    .profile-followers {margin-bottom:10px;font-family:'Roboto Condensed',sans-serif; font-size:12px; text-transform:uppercase; opacity:0.6}

/* Stil za Uredi profil gumb (diskretniji, tamniji) */
.edit-profile-btn { display: inline-flex; align-items: center; gap: 6px; background-color: rgba(255, 255, 255, 0.1); color: #ffffff; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px; padding: 8px 18px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease; }

    .edit-profile-btn:hover { background-color: rgba(255, 255, 255, 0.2); color: #ffffff; }



/* Tabovi */
.profile-tabs { display: flex; justify-content: space-around; position: relative; }
    .tab-item { color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: 14px; font-weight: 600; padding-bottom: 12px; position: relative; transition: color 0.2s; }
        .tab-item:hover { color: white; }
        .tab-item.active { color: white; }
            .tab-item.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: white; border-radius: 3px 3px 0 0; }

    /* Donji dio sa sadržajem (kartice) */
    .profile-content { padding: 15px 20px; font-family:Arial; font-size:12px }


    .yt-thumb-container { position: relative; width: 100%; max-width: 500px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background-color: #000; margin: 12px 0; cursor: pointer; }
    .yt-thumbnail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.2s ease-in-out; }
    .yt-thumb-container:hover .yt-thumbnail { opacity: 0.85; }
    .yt-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; background-color: rgba(23, 23, 23, 0.85); border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); z-index: 2; /* Osigurava da je gumb uvijek iznad slike */ }
    .yt-thumb-container:hover .yt-play-btn { background-color: #ff0000; transform: translate(-50%, -50%) scale(1.05); }

    /* Iframe savršeno nasljeđuje dimenzije spremnika */
    .yt-thumb-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
    .comment-text { white-space: pre-line; word-break: break-word; width: 100%; flex: 1 1 100%; min-width: 0; /* Ključno: sprječava Flexbox da stisne element ispod njegove željene širine */ }
    .post-image-container { width: 100%; max-width: 500px; max-height: 500px; margin: 12px 0; overflow: hidden; border-radius: 8px; background-color: #f1f1f1; display: flex; justify-content: center; }
    .post-embedded-image { width: 100%; /* Forsira sliku da popuni širinu */ max-width: 100%; /* Sprječava da ide preko granica */ height: auto; /* Čuva izvorni omjer stranica */ object-fit: contain; border-radius: 8px; display: block; min-width: 0; /* KLJUČNO: Dozvoljava fleksibilnom elementu da se smanjuje */ }

    .avatar-initials { font-family:'Roboto Condensed',Arial !important; text-decoration: none; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 14px; font-family: inherit; user-select: none; flex-shrink: 0; }
    .reply-item .avatar-initials { width: 25px; height: 25px; font-size: 10px }
    .related-reply-icon {margin-top:-3px; flex-shrink: 0 }


    .member-avatar-link { text-decoration: none }
    .custom-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 9999; }
    .custom-modal-content { font-family: Arial, sans-serif; background: #fff; width: 90%; max-width: 400px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); overflow: hidden; animation: modalScaleIn 0.2s ease-in-out; }

    @keyframes modalScaleIn {
        from { transform: scale(0.9); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }

    .custom-modal-header { background: #f8f9fa; font-family: 'Roboto Condensed',sans-serif; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #dee2e6; }
        .custom-modal-header h3 { margin: 0; font-size: 18px; color: #333; }
    .custom-modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #6c757d; }
    .custom-modal-body { padding: 20px; font-size: 15px; color: #495057; }
    .custom-modal-footer { padding: 10px 20px 20px; display: flex; justify-content: flex-end; }
    .btn-primary-modal { background-color: #fff; color: #000; border: 1px solid #e0e0e0; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 14px; }
        .btn-primary-modal:hover { background-color: red; color: #fff; border: 1px solid red }

    /* Spremnik koji drži stare i nove brojeve i skriva ono što je izvan okvira */
    .rating-count-anim { display: inline-block; position: relative; overflow: hidden; vertical-align: middle; /* Prilagodi visinu fontu koji koristiš */ height: 1.2em; }

    /* Stil za sam broj unutar animacije */
    .rating-count-anim { display: inline-block; position: relative; overflow: hidden; vertical-align: middle; height: 1.2em; line-height: 1.2em; }

    .rating-num-slider { display: inline-block; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateY(0); }

    .rating-num-old,
    .rating-num-new { display: block; height: 1.2em; line-height: 1.2em; }

    /* Kontejner za oči */
    .eyes-wrapper { margin-right: 2px; display: flex; gap: 0px; }
    .eye { width: 8px; height: 8px; background-color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; animation: blink 30s infinite; will-change: transform; }

    .pupil { width: 2px; height: 2px; background-color: #c0c0c0; border-radius: 50%; position: absolute; top: 3px; left: 3px; animation: look-around 50s infinite ease-in-out; will-change: transform; }
    .film-schedule-action-btn:hover .pupil { background-color: #000 }
    /* Animacija treptanja */
    @keyframes blink {
        0%, 9%, 11%, 100% { transform: scaleY(1); }
        10% { transform: scaleY(0); }
    }

    /* Animacija pomicanja zjenica */
    /*@keyframes look-around {
        0%, 100% { transform: translate(0, 0); }
        15% { transform: translate(2px, -1px); }
        30% { transform: translate(-1px, 1px); }
        50% { transform: translate(0, 0); }
        75% { transform: translate(-1.5px, -1px); }
        85% { transform: translate(1px, 1px); }
    }*/

/* Glavni kontejner */
.movies-header-section { padding: 25px 15px 15px; background-color: #fff;  font-family:'Roboto Condensed',sans-serif}
@media (max-width:768px){
    .movies-header-section {margin-top:5px}

}

.title-date-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 10px; position: relative; /* Važno za pozicioniranje otvorenog izbornika */ }

.section-title { font-family: Raleway,sans-serif; font-size: 32px; letter-spacing: -1px }


/* --- HORIZONTALNI SCROLL GRUPA KANALA --- */
/*.channel-groups-scroll-container { width: 100%; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.channel-groups-scroll-container::-webkit-scrollbar { display: none; }
.channel-groups-list { display: inline-flex; gap: 8px; padding-bottom: 4px; }
.channel-group-pill { display: inline-block; background-color: #2c2c2c; color: #cccccc; padding: 6px 14px; border-radius: 20px; font-size: 14px; text-decoration: none; transition: all 0.2s; flex-shrink: 0; border: 1px solid transparent; }
.channel-group-pill:hover { background-color: #383838; color: #ffffff; }
.channel-group-pill.active { background-color: #ff6600; color: #ffffff }*/

/* --- BIJELA POZADINA ZA NASLOV I KANALE --- */
.movies-header-section { padding: 35px 20px 10px; background-color: #ffffff; }
.title-row { margin:10px 0 25px; }
.section-title { line-height: 0.8;  font-size: 45px; font-weight: bold; color: #111111; /* Tamni tekst na bijeloj podlozi */ margin-bottom: 20px; text-transform: lowercase; }
.section-title strong {color:#d0d0d0; font-size:29px; display:block}
/* Horizontalni scroll grupa kanala (prilagođeno za svijetlu temu) */
.channel-groups-scroll-container { opacity: 0; visibility: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); width: 100%; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.channel-groups-scroll-container.loaded { opacity: 1; visibility: visible; }
.channel-groups-scroll-container::-webkit-scrollbar { display: none; }
.channel-groups-list { font-family:'Roboto Condensed',sans-serif; display: inline-flex; gap: 8px; padding-bottom: 4px; }
.channel-group-pill { display: inline-block; background-color: #f2f2f2; /* Svijetlo siva pozadina gumba */ color: #444444; padding: 6px 14px; border-radius: 3px; font-size: 14px; text-decoration: none; transition: all 0.2s; flex-shrink: 0; }
.channel-group-pill:hover { background-color: #e4e4e4; color: #111111; }
.channel-group-pill.active { background-color: #ff6600; /* Narančasti naglasak */ color: #ffffff; border-color: #ff6600;  }

@media (min-width:768px){
    .channel-groups-scroll-container { -webkit-mask-image: none; mask-image: none}
}


/* Horizontalni scroll grupa kanala (prilagođeno za svijetlu temu) */
.genres-scroll-container { font-family: 'Roboto Condensed', sans-serif; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); width: 100%; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Dodano za desktop drag-to-scroll */ cursor: grab; user-select: none; }
.genres-scroll-container:active { cursor: grabbing; /* Mijenja ikonu u stisnutu ruku dok se vuče */ }
.genres-scroll-container::-webkit-scrollbar { display: none; }
.genres-list { display: inline-flex; gap: 8px; padding-bottom: 4px; }
.genres-pill { display: inline-block;color: #444444; padding: 6px 3px;  font-size: 14px; text-decoration: none; transition: all 0.2s; flex-shrink: 0; }
.genres-pill:hover { color: #111111; }
.genres-pill.active { border-bottom:2px solid;border-color: #ff6600; font-weight: bold; }


/* --- TAMNA TRAKA S DATUMIMA I FADE EFEKTOM --- */
.dates-section-wrapper {  width: 100%;margin-bottom:40px; text-align:center }

/* Kontejner s omogućenim skrolom */
.dates-scroll-container { /* Početno skriveno i prozirno */ opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out; /* Glatki fade-in efekt u trajanju od 0.3s */ width: 100%; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 5px 15px; display: inline-block; /* Omogućava da text-align: center centrira kontejner ako ima mjesta */ max-width: 100%; /* Fade efekt na rubovima */ -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); }
.dates-scroll-container.loaded { opacity: 1; visibility: visible; }
.dates-scroll-container::-webkit-scrollbar { display: none; }
.dates-list { display: inline-flex; gap: 1px; min-width: max-content; }


/* Pojedinačni datum unutar tamne trake */
.date-item { border-radius:3px; font-family:'Roboto Condensed', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 55px; padding: 8px 10px; text-decoration: none; color: #888888; transition: all 0.2s }
.date-item .day-name { font-size: 15px; text-transform: uppercase; margin-bottom: 2px; }
.date-item .day-number { font-size: 12px; color: #cccccc; }
.date-item:hover { color: #000; background:#f0f0f0 }
.date-item.active { background-color: #2c2c2c; color: #fff; }
.date-item.active .day-name,
.date-item.active .day-number { color: #ffffff; }

/* filmografija*/
.image-credits { margin-top: 6px; font-size: 11px; color: #888888; line-height: 1.3; text-align: center; font-family: 'Roboto Condensed'; font-size: 10px; }
.image-credits a { color: #aaaaaa; text-decoration: underline; }
.image-credits a:hover { color: #ffffff; }
.credit-item { display: block; }
.actor-title { text-align: center; font-family: 'Roboto Condensed', sans-serif; font-size: 35px; margin-top: 10px; color: #fff }
.filmografija-title { text-align: center; font-family: 'Roboto Condensed', sans-serif; font-size: 11px; letter-spacing: -1px; line-height: 0.9em; margin-top: 10px; color: #b0b0b0; margin: 0; text-transform: uppercase; font-weight: 300; letter-spacing: 4px; }
.person-photo { width: 150px; height: 150px; background-size: cover; border-radius: 50%; margin: 0 auto }
.filmografija-movies-container .film-card {max-width:500px; height:220px}
/*.filmografija-movies-container .film-card { height: 180px; --bg-image: none !important; background-color: #fff; color: #000 !important; padding: 20px 0; border-bottom: 1px solid #e0e0e0; }
.filmografija-movies-container .film-gradient {display:none}
.filmografija-movies-container h3 a {color:#000 !important}

.filmografija-movies-container .multi-line-text { -webkit-line-clamp: 1 !important } */ /*}*/
.filmografija-movies-container .flex-container { display: flex; gap: 10px; max-width:600px; margin:0 auto }
.filmografija-movies-container .left-column { background: #333; flex: 0 0 50px; flex: 0 0 60px; /* Fiksna širina u kojoj se nalazi rotirani tekst */ display: flex; align-items: center; /* Vertikalno centriranje */ justify-content: center; /* Horizontalno centriranje */ }

.filmografija-movies-container .right-column { margin-bottom:1px;flex: 1; /* Zauzima sav preostali slobodni prostor */ min-width: 0; /* Važno! Sprječava da dugački tekst/tablice potrgaju flex layout */ }
.filmografija-movies-container .rotated-text { transform: rotate(-90deg); white-space: nowrap; color:#fff; font-family:'Roboto Condensed',sans-serif; font-size:20px }
.filmografija-movies-container .grid-ad-item {
    display: flex;
    justify-content: center;  /* Centrira element po horizontalnoj osi (vodoravno) */
    align-items: center;      /* Centrira element po vertikalnoj osi (okomito) */
    width: 100%;              /* Osigurava da zauzima punu širinu (preko 2 kolone) */
    padding: 0 0 40px;
    margin: 0 auto;
}
.filmografija-movies-container .film-aggregate-rating .rating-count svg { fill: #777 }
.nocontent {padding:5px 20px 20px; font-family: 'Roboto Condensed', sans-serif; font-size:15px; font-weight:300}

.grid-ad-item { display: flex; justify-content: center; /* Centrira element po horizontalnoj osi (vodoravno) */ align-items: center; /* Centrira element po vertikalnoj osi (okomito) */ width: 100%; /* Osigurava da zauzima punu širinu (preko 2 kolone) */ padding: 0 0 40px; margin: 0px auto 0; }

/* Ograničavamo visinu teksta */
.comment-text.is-truncated { display: -webkit-box; -webkit-line-clamp: 8; /* Broj vidljivih redova prije rezanja */ -webkit-box-orient: vertical; overflow: hidden; position: relative; }

/* Stil za gumb Prikaži više / Sakrij */
.toggle-read-more { background: none; border: none; color: #007bff; /* prilagodi svojoj primarnoj boji */ font-weight: 600; font-size: 0.85rem; cursor: pointer; padding: 4px 0 0 0; margin-top: 4px; display: inline-block; }
.toggle-read-more:hover { text-decoration: underline; }

/* --- Stilovi za sažimanje komentara --- */
.comment-text.is-truncated { display: -webkit-box; -webkit-line-clamp: 16; /* Broj vidljivih redova prije rezanja */ -webkit-box-orient: vertical; overflow: hidden; position: relative; }

.toggle-read-more { background: none; border: none; color: #b0b0b8; font-weight: bold; font-size: 0.8rem; cursor: pointer; padding: 4px 0 0 0; margin: 5px 0px 15px; display: inline-block; }
.toggle-read-more:hover { text-decoration: underline; }

/* --- Stilovi za Zacrnjene Spoilere --- */
.spoiler-text {  cursor: pointer; user-select: none; /* Onemogućuje odabir teksta dok je sakriven */ filter:blur(3px) }

/* Kada se mišem prođe iznad (suptilan nagovještaj da se može kliknuti) */
.spoiler-text:hover {  }

/* Stanje nakon klika (otkriveni spoiler) */
.spoiler-text.is-revealed { filter: blur(0); background-color: rgba(0, 0, 0, 0.06); /* Lagana siva pozadina da se uoči što je bio spoiler */ color: inherit; padding:4px; /* Prikazuje stvarni tekst */ user-select: auto; }

/* Styling za crvenu točku ispred teksta kad dugme ima klasu .following */
.follow-btn.following { display: inline-flex; align-items: center; gap: 6px; /* Razmak između točke i teksta */ }

/* 1. KAD NEMA KLASU .following -> Dodaj + SVG ikonu */
.follow-btn:not(.following)::before { content: ""; display: inline-block; width: 16px; height: 16px; background-color: currentColor; /* Uzima boju teksta gumba */ /* Ugrađeni čisti SVG plusić */ mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E") no-repeat center / contain; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E") no-repeat center / contain; flex-shrink: 0; }

/* 2. KAD IMA KLASU .following -> Dodaj crvenu točku */
.follow-btn.following::before { content: ""; display: inline-block; width: 8px; height: 8px; background-color: #e74c3c; /* Crvena boja */ border-radius: 50%; /* Savršeni krug */ flex-shrink: 0; }

/* Glavni kontejner na bijeloj pozadini */
.profile-nav-container {font-family:Arial; background-color: #ffffff; padding: 16px 0px 0 0; border-bottom: 1px solid #eaedf0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

/* --- Breadcrumb / Back link --- */
.back-link {font-family:Arial; display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; /* 14px */ font-weight: 500; color: #6c757d; text-decoration: none; margin-bottom: 16px; transition: color 0.15s ease-in-out; }
.back-link:hover { color: #1a1a1a; }
.back-icon { width: 16px; height: 16px; }

/* --- Tabovi --- */
.profile-tabs {  font-family:'Roboto Condensed', Arial; display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.tab-item { margin: 0; padding: 0; }
.tab-link { display: inline-block; padding: 10px 4px 14px 4px; font-size: 0.9rem; /* ~15px */ font-weight: 500; color: #6c757d; text-decoration: none; position: relative; transition: color 0.15s ease-in-out; }
.tab-link:hover { color: #1a1a1a; }

/* Aktivni tab - tekst i linija na dnu */
.tab-item.active .tab-link { color: #fd000a; /* Možeš promijeniti u svoju primarnu boju */ font-weight: 600; }
    .tab-item.active .tab-link::after { content: ""; position: absolute; bottom: -1px; /* Sijeda točno na donju granicu kontejnera */ left: 0; width: 100%; height: 2px; background-color: #fd000a; /* Primarna boja za donji border */ border-radius: 2px 2px 0 0; }

.member-row-item {font-family:Arial; font-size:12px; font-weight:bold}
.member-row-item a {font-weight:bold; color:#000}
.btn.btn-sm.btn-outline-danger { background-color: transparent; border:0; padding: 8px;  border-radius: 50%; cursor: pointer; transition: all 0.2s ease-in-out; }
.btn.btn-sm.btn-outline-danger:hover { color:#000 }

.profile-tabs .tab-link { display: inline-flex; align-items: center; gap: 8px; /* Razmak između ikone i teksta */ }

    .profile-tabs .tab-link svg { flex-shrink: 0; }

/* ==========================================
   5. LISTA KANALA MOBILE
   ========================================== */
.channel-card { font-family:Arial, sans-serif; position: relative; display: flex; align-items: flex-start; gap: 8px; padding: 18px 6px; border-bottom: 1px solid #f0f3f6; background: #fff }

/* H2 Naslov / Logo s obrubom i zaobljenim kutovima */
.channel-header { margin: 0; padding: 0; font-size: 0; line-height: 0; flex-shrink: 0; width: 68px; height: 34px; /* Dodano: lagani obrub i zaobljenje */ border: 1px solid #e2e8f0; border-radius: 3px; overflow: hidden; /* Osigurava da slika prati zaobljeni kut kontejnera */ box-sizing: border-box; }
.channel-header img { width: 100%; height: 100%; object-fit: contain; }

/* Stretched link preko cijele kartice */
.main-link::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }

/* Raspored emisija */
.channel-schedule { flex: 1; min-width: 0; }

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

/* Popis emisija unutar kartice */
.schedule-list li { font-family:"Roboto Condensed",Arial; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 18px; font-weight:300; line-height: 1.3; color: #333; }

.schedule-list time { margin-right: 2px; }

/* Centrirana i veća strelica */
.card-arrow { align-self: center; line-height: 1; color: #888;  user-select: none; }

li.current-show {font-weight:bold}


/* ==========================================
   TV CARD partial
   ========================================== */

/* Glavni kontejner kartice - relativan položaj za pseudo-element linka i strelicu */
.tv-card {
    position: relative;
    background-color: #ffffff;
    color: #222222;
    padding: 20px 40px 20px 16px;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    border-bottom: 1px solid #eaeaea;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
/* LIJEVA KOLONA: Vrijeme i tag */
.tv-card-left { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 45px; flex-shrink: 0; position: relative; z-index: 2; }

.tv-time { font-family: "Roboto Condensed", Arial, sans-serif; font-size: 1.25rem; color: #111111; line-height: 1; }

.tv-badge { text-align:center; font-family: "Roboto Condensed", Arial, sans-serif; display: inline-block; background-color: #316d94; color: #ffffff; font-size: 0.65rem;  padding: 2px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; }
.tv-badge.FILM {background:red; width:45px}
/* DESNA KOLONA */
.tv-card-right { flex-grow: 1; min-width: 0; }

/* 1. Desno zaglavlje (ili h2) mora biti relativno sidro */
.tv-right-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 4px }

.tv-title { font-family: "Roboto Condensed", Arial, sans-serif; font-size: 1.3rem; font-weight: 400; margin: 0; line-height: 1; }

/* 2. Link u h2 */
.tv-card-link { color: #000000; text-decoration: none; }

.tv-card-link:hover { color: #000; text-decoration: none; }

/* 3. Pseudo-element koji precizno pokriva cijelu karticu (.tv-card) od ruba do ruba */
    .tv-card-link::after {  content: ""; position: absolute; top: 0; /* Poništava gornji padding kartice (.tv-card) */ bottom: 0; /* Poništava donji padding kartice */ left: 0; /* Poništava lijevi padding kartice */ right: 0; /* Poništava desni padding kartice */ z-index: 3; }

.tv-actions { isolation: isolate; /* Stvara novi stacking context za unutrašnjost i sprječava miješanje sa z-indexima vani */ position: relative; z-index: 10; }

/* Oznaka dobna desno u gornjem redu */
.tv-age-rating-right {margin-top:-1px; margin-right:-27px; font-family: "Roboto Condensed", Arial, sans-serif; font-size: 0.7rem;  color: #555555; background-color: #f0f0f0; padding: 5px 6px; border-radius: 50%; flex-shrink: 0; position: relative; z-index: 2; }
    .tv-age-rating-right.rating-7 { background-color: #188038; padding: 5px 9px; color: #fff }
    .tv-age-rating-right.rating-12 { background-color: #188038; color: #fff }
    .tv-age-rating-right.rating-15 { background-color: #e37400; color: #fff }
    .tv-age-rating-right.rating-18 { background-color: #fd000a; color: #fff }

/* Podnaslov / Metapodaci */
.tv-subtitle { font-family: "Roboto Condensed", Arial, sans-serif; font-weight: 400; font-size: 0.9rem; color: #666666; margin-bottom: 10px; line-height: 1; position: relative; z-index: 2; }

.tv-genres { display: inline-block; margin-top: 4px; font-family: "Roboto Condensed", Arial, sans-serif; color: #00897b; font-weight: 300; font-size: 0.75rem; letter-spacing: 2px; }

/* Središnji dio: Slika i gumbi lijevo, glumci desno */
.tv-content-row { display: flex; gap: 12px; align-items: flex-start; position: relative; z-index: 2; }

/* Lijevi dio unutar sadržaja (Slika + Gumbi) */
.tv-media-col { flex-shrink: 0; width: 110px; }

.tv-image-wrapper { margin:2px 0;width: 100%; border-radius: 4px; overflow: hidden; background-color: #e0e0e0; }

    .tv-image-wrapper img { width: 100%; height: auto; display: block; }

/* Akcijski gumbi ispod slike s višim z-indexom da ostanu klikabilni */
.tv-actions { position: relative; z-index: 4; display: flex; flex-direction: column; gap: 6px; }

.tv-btn { background-color: #f8f8f8; color: #333333; border: 1px solid #dcdcdc; padding: 4px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }

.tv-btn-dot { width: 6px; height: 6px; background-color: #666666; border-radius: 50%; display: inline-block; }

/* Informacije o glumcima desno */
.tv-info-col { flex-grow: 1; font-family:"Roboto Condensed", Arial; font-weight:300 }

.tv-cast { font-size: 0.8rem; color: #444444; line-height: 1.3; margin: 0; }

/* APSOLUTNO POZICIONIRANA STRELICA (uz desni rub, vertikalno po sredini) */
.tv-arrow-absolute { position: absolute; right: 12px; top: 110px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; color: #888888; pointer-events: none; z-index: 2; }

.tv-arrow-icon { width: 20px; height: 20px; }

.tv-episode-row { display: flex; align-items: flex-start; gap: 8px;}

/* Badge ostaje fiksne širine da se ne stišće */
.tv-episode-pill { margin-top:12px; display:inline-block; flex-shrink: 0; background: #24506c; color: #fff; font-family: "Roboto Condensed", Arial; font-size: 12px; padding: 3px; border-radius: 3px }

/* Kontejner opisa zauzima ostatak prostora */
.tv-summary-box { flex-grow: 1; position: relative; }

/* Skraćivanje teksta na 8 redova */
.tv-summary-text { margin-top: 10px !important; font-size: 16px; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin: 0; line-height: 1.4; }

.tv-summary-text.expanded { -webkit-line-clamp: unset; overflow: visible; }

/* Gumb za više/manje */
.tv-toggle-desc { display: none; background: none; border: none; color: #316d94; padding: 2px 0 0 0; font-size: 0.75rem; font-weight: 600; cursor: pointer; margin-top: 2px; }


.tv-summary-box.has-clamping .tv-toggle-desc { display: inline-block; }


/* Breadcrumb kontejner */
.breadcrumb { padding: 40px 20px 0px 22px; font-size: 0.82rem; font-family: inherit; }

/* Lista u jednom retku */
    .breadcrumb ol { font-family: "Roboto Condensed"; font-size: 12px; font-weight: 300; display: flex; flex-wrap: wrap; align-items: center; list-style: none; padding: 0; margin: 0; }

.breadcrumb li { display: flex; align-items: center; color: #888; text-transform:lowercase }

/* Razdjelnik između elemenata (kosina /) */
.breadcrumb li:not(:last-child)::after { content: "/"; margin: 0 8px; color: #ccc; font-size: 0.75rem; }

/* Linkovi */
.breadcrumb a { color: #666; text-decoration: none; transition: color 0.2s ease; }

.breadcrumb a:hover { color: #e65100; /* MojTV narančasta na hover */ text-decoration: underline; }

/* Zadnji (aktivni) element */
.breadcrumb [aria-current="page"] { color: #111; font-weight: 600; }


.frontpage-movies-container {padding:20px 20px 30px  !important}


/* --- GLAVNI STILOVI FOOTERA --- */
.site-footer { background-color: #1c1b22; color: #b0b0b0; font-family: Arial, sans-serif; padding-top: 45px; margin-bottom: 0; border-top: 3px solid #e53935; width: 100%; }

/* Glavni kontejner */
.footer-container { max-width: 1250px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: nowrap; gap: 30px; padding: 0 20px 30px 20px; }

/* --- LIJEVA SEKCIJA (Brend) --- */
.footer-brand-col { flex: 1.2; min-width: 250px; display: flex; flex-direction: column; align-items:flex-start; text-align: left; }

.footer-logo img { height: 64px; width: auto; margin-bottom: 5px; display: block; margin-top:-10px }

.footer-slogan { font-size: 13px; color: #999999; line-height: 1.5; margin-bottom: 5px; }

    .footer-slogan strong { color: #dddddd; }

.footer-domains { font-family: 'Raleway', sans-serif; font-size: 13px; }

    .footer-domains a { color: #ffffff; text-decoration: none; transition: color 0.2s ease; }

        .footer-domains a:hover { color: #e53935; }

    .footer-domains .separator { color: #555555; margin: 0 6px; }

/* --- OMOTAČ ZA SREDINU I DESNO (Kategorije i Informacije) --- */
.footer-links-group { display: flex; justify-content: space-around; flex: 1.5; flex-wrap: wrap; gap: 30px; }

.footer-col { min-width: 140px; }

    .footer-col h4 { font-family: 'Raleway', sans-serif; color: #ffffff; font-size: 15px; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 0; margin-bottom: 15px; }

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

    .footer-simple-list li { margin-bottom: 8px; }

    .footer-simple-list a { font-family: Arial, sans-serif; font-size: 13px; color: #b0b0b0; text-decoration: none; transition: color 0.2s ease; }

        .footer-simple-list a:hover { color: #ffffff; }

/* --- DONJA TRAKA --- */
.footer-bottom { background-color: #151515; border-top: 1px solid #2a2a2a; padding: 35px 20px; margin: 0; width: 100%; font-size: 13px; color: #777777; font-family: 'Raleway', sans-serif; }

.footer-bottom-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }

.footer-bottom-links a { color: #999999; text-decoration: none; transition: color 0.2s ease; }

    .footer-bottom-links a:hover { color: #ffffff; }

/* --- MOBILNI PRIKAZ (< 850px): Sve ide vertikalno jedno ispod drugog --- */
@media (max-width: 850px) {
    .footer-container { flex-direction: column; align-items: center; text-align: center; gap: 40px; /* Razmak između logotipa i kategorija/info */ padding-bottom: 30px; }

    .footer-brand-col { width: 100%; max-width: 100%; }

    /* Kategorije i Informacije dolaze ISPOD logotipa */
    .footer-links-group { width: 100%; display: flex; flex-direction: row; /* Mogu ići u dvije kolone jedna pored druge... */ justify-content: center; gap: 25px; text-align: left; /* ...ali tekst unutar njih ostaje uredno poravnat */ }

    .footer-bottom-container { flex-direction: column; text-align: center; gap: 10px; }
}


/* kontakt */
.contact-container { max-width: 700px; margin: 25px auto; background: #ffffff; padding: 30px 40px; font-family: Arial; }
.contact-title { font-family: 'Raleway', sans-serif; font-size: 50px; color: #1e1e1e; margin-top: 0; padding: 40px 20px 0; text-transform: lowercase; color: #e0e0e0; display: inline-block; padding-bottom: 5px; }
.contact-subtitle { font-size: 14px; color: #666; margin-bottom: 30px; }
.form-group { margin-bottom: 20px; }
    .form-group label { display: block; font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 14px; margin-bottom: 8px; color: #222; }
.form-control { width: 100%; padding: 8px 15px; font-family: Arial, sans-serif; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; transition: border-color 0.2s ease; background-color: #fff; }
    .form-control:focus { outline: none; border-color: #e53935; }
textarea.form-control { resize: vertical; min-height: 120px; }
.btn-submit { background-color: #e53935; color: #ffffff; font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 15px; text-transform: uppercase; border: none; padding: 14px 28px; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease; width: 100%; }
    .btn-submit:hover { background-color: #c62828; }
.alert-message { padding: 12px 15px; margin-bottom: 20px; border-radius: 4px; font-size: 14px; }
.alert-success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

.info-tabs { display: flex; list-style: none; padding: 0 20px; gap: 25px; margin: 0; border-bottom: 1px solid #e0e0e0; /* Tanka siva linija koja ide preko cijele širine */ font-family: 'Raleway', sans-serif; }


    .info-tabs li a { display: block; padding: 12px 0; text-decoration: none; color: #333; /* Boja neaktivnih linkova */ font-size: 15px; position: relative; transition: color 0.2s ease; color: #a0a0a0; text-transform: lowercase; }

        .info-tabs li a:hover { color: #e53935; /* Crvena boja na hover */ }

        /* Stil za aktivni tab sa slike */
        .info-tabs li a.active { color: #000; /* Ili željena tamna boja aktivnog teksta */ font-weight: 700; }

            .info-tabs li a.active::after { content: ''; position: absolute; bottom: -1px; /* Preklapa s donjom sivom linijom */ left: 0; width: 100%; height: 3px; /* Debljina crvene linije */ background-color: #e53935; /* Prepoznatljiva crvena boja */ }

@media (max-width: 480px) {
    .info-tabs { display: flex; overflow-x: auto; /* Omogućuje horizontalno skrolanje */ white-space: nowrap; /* Sprječava prelamanje teksta u novi red */ -webkit-overflow-scrolling: touch; /* Glatko skrolanje na iOS-u */ gap: 25px; /* Razmak između tabova */ /* Sakrivanje scrollbara za ljepši izgled (opcionalno) */ scrollbar-width: none; /* Firefox */ }

    .info-tabs::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ }

    .info-tabs li { flex-shrink: 0; /* Sprječava stezanje stavki */ }

    .info-tabs li a { font-size: 14px; /* Blago smanjenje fonta za štednju prostora */ padding: 10px 0; }
}

/* uvjeti koristenja*/
/* --- CENTRIRANI KONTEJNER --- */
.legal-container { max-width: 900px; margin: 40px auto; padding: 0 20px; }

/* --- GLAVni SADRŽAJ (UVJETI / PRIVATNOST) --- */
.uvjeti-koristenja-wrapper,
.politika-privatnosti-wrapper { line-height:1.5em; background: #ffffff; padding: 40px 20px; max-width: 700px; margin: 0 auto;  }

    .uvjeti-koristenja-wrapper h1,
    .politika-privatnosti-wrapper h1 { font-size: 28px; text-transform: uppercase; border-bottom: 2px solid #e53935; padding-bottom: 15px; margin-top: 0; margin-bottom: 30px; }

    .uvjeti-koristenja-wrapper section,
    .politika-privatnosti-wrapper section { margin-bottom: 35px; }

    .uvjeti-koristenja-wrapper h2,
    .politika-privatnosti-wrapper h2 { font-size: 20px; margin-bottom: 15px; color: #222222; }

    .uvjeti-koristenja-wrapper p,
    .politika-privatnosti-wrapper p { font-size: 15px; color: #444444; margin-bottom: 15px; }

    .uvjeti-koristenja-wrapper ul,
    .politika-privatnosti-wrapper ul { padding-left: 20px; margin-bottom: 15px; }

    .uvjeti-koristenja-wrapper li,
    .politika-privatnosti-wrapper li { font-size: 15px; color: #444444; margin-bottom: 10px; }
    /* Razmak i stil za glavne stavke (crne točke) */
    .uvjeti-koristenja-wrapper #pravila-komentiranja > ul > li,
    .politika-privatnosti-wrapper #pravila-komentiranja > ul > li { font-weight: bold; margin-bottom: 20px; /* Povećava razmak između glavnih cjelina */ }

    /* Vraćanje normalne debljine i dodavanje razmaka za podstavke (sive točkice) */
    .uvjeti-koristenja-wrapper #pravila-komentiranja ul ul li,
    .politika-privatnosti-wrapper #pravila-komentiranja ul ul li { font-weight: normal; margin-bottom: 10px; /* Povećava razmak između pojedinačnih redaka unutar podtočaka */ }

.post-warning { padding: 20px; font-size: 11px; background: #fafafa; color: #a0a0a0; margin-bottom:25px }
.post-warning .rules-link { display: inline-flex; align-items: center;  gap: 6px;  text-decoration: underline; color:red }

.post-warning .rules-link:hover { text-decoration: underline; }


ul.keyword-pills { list-style: none; padding: 0; margin: 20px 0; display: flex; flex-wrap: wrap; gap: 8px; /* Razmak između pilula */ }
ul.keyword-pills li { display: inline-block; margin: 0; }
ul.keyword-pills li a { display: inline-block; padding: 1px 10px; background-color: #f1f3f5; color: #a0a0a0 !important; font-size: 12px; font-weight: 500; border-radius: 50px; text-decoration: none !important; transition: background-color 0.2s ease, color 0.2s ease; }
ul.keyword-pills li a:hover { background-color: #e0e0e0; color:#000 !important }
ul.keyword-pills li a::before { content: "#"; margin-right: 3px; color:red }

.search-results-dropdown { overflow:hidden; position: absolute; top: 100%; left: 0; right: 0; background: #1c1b22; color:#fff; max-height: 400px; overflow-y: auto; z-index: 1100; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }

/* Ako želiš da rezultati prate širinu forme ili ekrana na mobitelu */
@media (max-width: 768px) {
    .search-results-dropdown { left:0; right: 0; }
}

.search-category-header {color:#fff; font-family:'Roboto Condensed'; text-transform:uppercase; padding:20px 23px 5px; color:#777; font-size:12px}
.search-results-dropdown a { width: 100%; display: block; text-decoration: none }



/* Glavni kontejner stavke (Flexbox) */
.search-item, .kanal-search-item { display: flex; gap: 12px; padding: 8px 20px; cursor: pointer; border-bottom: 1px solid #222; background: #1c1b22; transition: background 0.2s; }
.search-item-white {background:#fff;border-bottom:1px solid #f0f0f0}
/* Hover efekat */
.search-item:hover { background: #111; }
.search-item-white:hover { background: #f0f0f0 !important }

.search-item-position { flex-shrink: 0; font-family: 'Roboto Condensed'; font-size: 20px; color: #000; width: 30px; text-align: right }
/* Stil za lijevi dio (slika) */
.search-item-image { flex-shrink: 0; width: 100px; height: 50px; background: #333; }
.search-item-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }

/* Stil za desni dio (tekst) */
.search-item-content { font-family: 'Roboto Condensed'; display: flex; flex-direction: column; overflow: hidden; }

.search-item-content .title {  color: #fff; font-weight: bold; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-item-white .title {color:#000;}
.search-item-content .original-title { text-transform: uppercase; font-size: 12px; color: #aaa; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-item-content .meta { font-weight: 300; letter-spacing: 2px; color: #00b5ad; font-size: 11px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-item-content .actors { font-weight: 300; color: #888; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.kanal-search-item { font-family:'Roboto Condensed'; display: flex; align-items: center; gap: 12px;padding: 8px 20px; cursor: pointer; text-decoration: none;  color: #fff; transition: background 0.2s; }
.kanal-search-item:hover { background: #111; /* Hover efekt */ }

/* Fiksiranje dimenzija za logo kanala da se ne rasteže */
.kanal-search-item img { flex-shrink: 0; width: 68px; height: 34px; object-fit: contain; background:#fff; border-radius:3px }

/* toplista ocjene*/
.mojtv-ranking-container { max-width: 950px; margin: 0 auto; font-family: Arial, sans-serif; max-width:700px; margin:0 auto }

/* Gornja traka */
.ranking-header-bar { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid #e0e0e0; }
#filmTypeContainer a { text-decoration: none; font-size: 1.1rem; color: #888; font-family:'Roboto Condensed'; text-transform:uppercase }
#filmTypeContainer a.active { color: #111; }
.separator { color: #ccc; margin: 0 6px; }
.ranking-filters { display: flex; gap: 15px; font-size: 0.85rem; color: #555; }
.ranking-filters select { padding: 3px 6px; border: 1px solid #ccc; background: #fff; }

/* Lista i redovi */
.mojtv-ranking-list { overflow: hidden }

.mojtv-ranking-item { display: flex; align-items: center; padding: 10px 15px; border-bottom: 1px solid #e0e0e0; }
.mojtv-ranking-item:last-child { border-bottom: none; }

/* Pozadine */
.row-dark { background-color: #2b2b2b !important; color: #fff; }
.row-light { background-color: #f2f2f2 !important; color: #333; }
.row-white { background-color: #ffffff !important; color: #333; }

/* Redni broj */
.item-number { width: 45px; flex-shrink: 0; font-size: 1.7rem; font-weight: bold; text-align: right; padding-right: 15px; }
.text-warning { color: #f0ad4e !important; }
.text-muted { color: #888; }

/* Sredina - Nazivi */
.item-content { flex-grow: 1; padding-right: 15px; min-width: 0; /* Sprječava ispadanje teksta iz flex kontejnera */ }

.item-title { margin: 0 0 3px 0; font-size: 0.95rem; font-weight: bold; }
    .item-title a { text-decoration: none; color: #0056b3; }
.row-dark .item-title a { color: #ffffff; }
.search-item-white .item-title a {color:#000; text-decoration:none}

.item-subtitle { font-size: 0.78rem; color: #666; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-dark .item-subtitle { color: #ccc; }

.item-genres { font-size: 0.7rem; font-weight: bold; color: #d9534f; /* Crvena boja žanrova */ text-transform: uppercase; }

/* Slika i ocjena desno */
.item-thumb-box { position: relative; width: 105px; height: 62px; flex-shrink: 0; }
.item-thumb-box img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; border: 1px solid #aaa; }

.no-thumb { width: 100%; height: 100%; background: #ddd; color: #555; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; }

.rating-badge { position: absolute; bottom: 2px; right: 2px; background: rgba(255, 255, 255, 0.95); color: #111; font-size: 0.7rem; font-weight: bold; padding: 1px 4px; border-radius: 2px; border: 1px solid #aaa; }

.ranking-empty { text-align: center; padding: 20px; color: #666; }



/* Kontejner tabova: centriran sadržaj i tamna pozadina */
.mojtv-tabs { display: flex; justify-content: center; /* Centrira tabove vodoravno */ gap: 40px; /* Povećava razmak između tabova (možeš prilagoditi po želji) */  padding: 0 20px;font-family: Arial, sans-serif; width: 100%; }

/* Pojedinačni tab (link) */
.mojtv-tabs .tab-item { font-family: 'Roboto Condensed'; display: flex; align-items: center; gap: 8px; padding: 15px 10px; /* Malo prostora okolo za ljepši izgled */ text-decoration: none; color: #ffffff; /* Bijeli linkovi */ font-size: 0.95rem; font-weight: 600; position: relative; opacity: 0.7; /* Neaktivni su blago zatamnjeni */ transition: opacity 0.2s ease, color 0.2s ease; }

    /* Hover efekat */
    .tab-item:hover { opacity: 1; color: #ffffff; }

/* Ikone unutar taba */
.tab-icon { width: 20px; height: 20px; fill: currentColor; }

/* --- AKTIVNO STANJE --- */
.tab-item.active { opacity: 1 }

    /* Bijela linija ispod aktivnog taba */
    .tab-item.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: #ffffff; /* Bijela linija */ border-radius: 2px 2px 0 0; }