.tv-guide-container {font-family:"Roboto Condensed",Arial,sans-serif; -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; width: 100%; margin: 0 auto; position: relative; overflow: clip; margin-bottom:40px }

.mobile-header-title { padding: 24px 20px 0px; font-size: 28px; padding-bottom: 0px; font-weight: 800; color: #0f172a; text-transform: uppercase; letter-spacing: -0.3px; }

.tv-guide-container .sticky-header-wrapper { position: sticky; top: 0; z-index: 30; border: 0 !important; box-shadow: none !important; }
#tvGuideApp {border:0 !important}
.mobile-header-title + .sticky-header-wrapper,
.mobile-header-title ~ .sticky-header-wrapper .tv-channel-groups-bar { border-top: none; }

.tv-sub-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 20px 20px; gap: 16px; border-top: none !important; }

.tv-time-filters { display: flex; align-items: center; gap: 4px; font-size: 14px; 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: 14px; 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 }

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

.tv-search-container { position: relative; }
.tv-search-input {font-family:"Roboto Condensed"; padding: 6px 12px; font-size: 13px; border: 1px solid #cbd5e1; border-radius: 3px; outline: none; width: 200px; transition: border-color 0.15s ease; }
.tv-search-input:focus { border-color: #0f172a; }

.ajax-search-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 4px); width: 280px; background: #ffffff; border: 1px solid #0f172a; border-radius: 2px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); z-index: 100; max-height: 250px; overflow-y: auto; }
.ajax-search-dropdown.active { display: block; }
.search-result-item { padding: 8px 12px; border-bottom: 1px solid #f1f5f9; cursor: pointer; text-decoration: none; display: block; }

.search-result-item:hover { background-color: #f8fafc; }
.search-result-title { font-size: 12px; font-weight: 700; color: #0f172a; text-transform: uppercase; }
.search-result-sub { font-size: 10px; color: #64748b; margin-top: 2px; }

.timeline-header-scroll { overflow-x: auto; white-space: nowrap; background-color: #1c1b22; -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; background-color: #1c1b22; height: 40px; width: calc(var(--slot-width) * var(--total-slots)); pointer-events: none; }
.time-slot { width: var(--slot-width); flex-shrink: 0; font-size: 14px;  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; }

.channel-logo-slot {background:none; border-top:0; min-height: 80px; height: 80px; /* Usklađeno s fleksibilnim redovima */ width: 120px; display: flex; align-items: center; justify-content: center; border-right: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; border-left: 4px solid transparent; margin-top: 0; padding: 8px; position: relative; z-index: 2; text-decoration: none; transition: border-left-color 0.15s ease; }
.channel-logo-slot.hidden-by-group { display: none; }
.channel-logo-slot:hover {border-left-color:red !important}
.channel-logo-slot:hover img {filter:none}

.channel-logo-img { width: 68px; height: 34px; object-fit: contain; display: block; filter:grayscale() }

.timeline-scroll-area { overflow-x: auto; -webkit-overflow-scrolling: touch; 
                        background: repeating-linear-gradient( to bottom, #f0f0f0 0px, #f0f0f0 80px, #fbfcfd 80px, #fbfcfd 160px );
                        cursor: grab; position: relative; }
.sticky-channels-column { background: repeating-linear-gradient( to bottom, #fff 0px, #fafafa 80px, #ffffff 80px, #fffffff 160px ); }
.timeline-scroll-area.grabbing { cursor: grabbing !important; }
 
.past-time-overlay { position: absolute; top: 0; left: 0; width: 0px; height: 100%; background-color: rgba(0, 0, 0, 0.05); pointer-events: none; z-index: 1; }

.current-time-line { display:none;position: absolute; top: 0; bottom: 0; left: 0px; 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 { overflow:hidden; position: relative; min-height: 80px; height:80px; border-bottom: 1px solid #e2e8f0; width: calc(var(--slot-width) * var(--total-slots)); z-index: 2; display: flex; align-items: stretch; }
.grid-card { overflow:hidden; position: absolute; top: 0; bottom: 0; background-color: transparent; border: none; border-left: 1px solid #e2e8f0; border-radius: 0; padding: 6px 8px; display: flex; flex-direction: column; justify-content: flex-start; /* Vraća sadržaj na vrh da nema rupe */ text-decoration: none; overflow: hidden; z-index: 3; cursor: pointer; transition: background-color 0.15s ease; }
.grid-card:hover { background-color: #ef4444 !important; z-index: 5; }

        .grid-card:hover .grid-card-time,
        .grid-card:hover .grid-card-title,
        .grid-card:hover .grid-card-desc,
        .grid-card:hover .show-category,
        .grid-card.active-popup .grid-card-time,
        .grid-card.active-popup .grid-card-title,
        .grid-card.active-popup .grid-card-desc,
        .grid-card.active-popup .show-category { color: #ffffff !important; }

    .grid-card.active-popup { background-color: #ef4444 !important; z-index: 10; }

.card-meta-header { display: flex; align-items: center; justify-content: left; margin-bottom: 2px; /* Smanjen razmak */ pointer-events: none; gap: 6px; }

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

/* 1. Definiramo da je grid-card kontejner čiju širinu pratimo */
.grid-card { container-type: inline-size; }

/* 2. Ako je div uži od 50px, sakrij sav tekst unutar njega */
@container (max-width: 25px) {
    .grid-card * { display: none !important; }
}


.show-category, .badge-kategorija { font-size: 8px;  text-transform: uppercase; padding: 1px 4px; border-radius: 2px; color: #ffffff; letter-spacing: 0.3px; pointer-events: none; white-space: nowrap; }

.badge-informativni, .badge-vijesti { background-color: #dc2626; }
.badge-film { background-color: red; }
.badge-serija { background-color: #316d94; }

.grid-card-title { white-space: normal !important; font-size: 13px;  color: #0f172a; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1; text-transform: uppercase; text-decoration: none; pointer-events: none; word-break: break-word; margin-bottom: 2px; /* Mali razmak između naslova i opisa umjesto rupe */ }

.grid-card-desc { font-size: 11px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0; /* Uklonjen auto razmak koji je stvarao rupu */ pointer-events: none; }

.show-popup-card {font-size:14px; display: none; position: absolute; width: 350px; min-height: 50px; background: #ffffff; border: 1px solid #e0e0e0; border-radius: 2px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); z-index: 1000000; overflow: hidden; animation: fadeInPopup 0.15s ease-out; }

.show-popup-card.active { display: block; }
.tv-summary-text {font-size:14px;}
@keyframes fadeInPopup {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.popup-top-bar { background-color: #0a192f; display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; }

.popup-reminder-btn { background-color: #0066cc; color: #ffffff; border: none; border-radius: 2px; font-size: 10px; font-weight: 800; padding: 4px 8px; cursor: pointer; letter-spacing: 0.3px; }

    .popup-reminder-btn:hover { background-color: #0052a3; }

.popup-close-btn { background: none; border: none; color: #ffffff; font-size: 16px; cursor: pointer; padding: 0 4px; line-height: 1; }

.popup-img-container { position: relative; width: 100%; height: 90px; background: #000; }

.popup-header-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.popup-time-badge { position: absolute; bottom: 8px; left: 8px; background-color: #0a192f; color: #ffffff; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 2px; }

.popup-body { padding: 10px; }

.popup-title { font-size: 13px; font-weight: 800; color: #0f172a; margin-bottom: 4px; text-transform: uppercase; line-height: 1.2; }

.popup-desc { font-size: 11px; color: #64748b; line-height: 1.3; }