*{box-sizing:border-box; outline: none !important; -webkit-tap-highlight-color: transparent !important;}
:root{--bar-height:56px}
*{box-sizing:border-box; outline: none !important; -webkit-tap-highlight-color: transparent !important;}
body,html{height:100%;margin:0;font-family:Inter,Segoe UI,Helvetica,Arial; -webkit-tap-highlight-color: transparent !important;}

.top-bar, .bottom-bar{height:var(--bar-height);position:fixed;background:rgba(11, 18, 32, 0.7) !important;backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color:#fff;display:flex;align-items:center;padding:0 16px;z-index:9000;border-top:0;border-bottom:0}
/* On desktop keep bars to the right of the sidebar */
@media (min-width:801px){
    .top-bar, .bottom-bar{left:240px;right:0;width:calc(100% - 240px)}
}
/* On small screens bars span full width */
@media (max-width:800px){
    .top-bar, .bottom-bar{left:0;right:0;width:100%}
}
.top-bar{top:0;border-bottom:1px solid rgba(255,255,255,0.03)}
.bottom-bar{bottom:0;border-top:1px solid rgba(255,255,255,0.03)}
.top-bar h1, .top-bar .title, #currentTitle{font-size:18px;margin:0;font-weight:600}

/* Container interno della top bar: titolo a sinistra, pulsanti/azioni a destra */
.top-bar-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; }
.top-bar-inner .left { display: flex; align-items: center; gap: 12px; }
.top-bar-inner .right { display: flex; align-items: center; gap: 8px; }

/* Top right clock */
.top-clock { color: #cbd5e1; font-weight:600; font-size:14px; padding:4px 8px; }
.top-clock::before { content: "\23F0"; margin-right:6px; color:#ffd700; }

/* Bottom bar layout: left content + right actions (guida) */
.bottom-bar-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.bottom-bar-inner .left { display: flex; align-items: center; gap: 12px; }
.bottom-bar-inner .right { display: flex; align-items: center; gap: 8px; }
.bottom-bar .status-label, #statusLabel{font-size:14px;opacity:0.95;color:#cbd5e1}
#watchingTitle {
    color: #ffd700; /* Giallo Oro anche nel menu normale */
    font-weight: 700;
    margin-left: 5px;
    font-size: 16px; /* Leggermente più grande del testo "Stai guardando" */
}

/* Top bar EPG: label + current event */
.top-epg { display:flex; align-items:center; gap:8px; }
.top-epg .epg-label { color: #cbd5e1; font-weight:600; font-size:15px; }
.top-current-event { color: #ffd700; font-weight:700; font-size:16px; margin-left:4px; }

/* bottom bar EPG styles (used for Evento in corso display) */
.bottom-epg { display:flex; align-items:center; gap:8px; }
.bottom-epg .epg-label { color: #cbd5e1; font-weight:600; font-size:15px; }
.bottom-current-event { color: #ffd700; font-weight:700; font-size:16px; margin-left:4px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:48ch; }

/* Right-side channel name (shown in fullscreen instead of Guida TV) */
.bottom-right-channel { display: none; color: #ffffff; font-weight:700; font-size:16px; }
/* When in fullscreen (class applied), show the right channel name and hide the guide button */
body.inpage-fullscreen-active .bottom-bar .right .bottom-right-channel { display: inline-block !important; }
body.inpage-fullscreen-active .bottom-bar .right .guide-btn { display: none !important; }
/* Larger font for right-side channel name in fullscreen */
body.inpage-fullscreen-active .bottom-bar .right .bottom-right-channel { font-size: 22px !important; font-weight: 800 !important; color: #ffffff !important; margin-left: 12px; }

/* Ensure left flex column can shrink to enable ellipsis */
.bottom-bar-inner .left { flex: 1 1 auto; min-width: 0; }

/* Ensure main content isn't hidden behind the bars */
.main{padding-top:var(--bar-height);padding-bottom:var(--bar-height)}
input:focus, button:focus, li:focus { outline: none !important; border-color: rgba(255,255,255,0.2) !important; box-shadow: none !important; }
.app{display:flex;height:100vh;overflow:hidden;position:relative}

/* Video Background Fullscreen */
#initialPlyr {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1; /* Sopra al background ma sotto al menu */
    background: #000;
}

.player-area {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 0;
    background: #000;
}

#playerArea {
    width: 100% !important;
    height: 100% !important;
}

#videoPlayer, #iframeWrap, #playerIframe, .plyr, .plyr__video-wrapper, .plyr video {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    object-fit: contain;
    z-index: 0;
}

.sidebar{width:240px;background:rgba(15, 23, 36, 0.9);color:#fff;display:flex;flex-direction:column;padding:12px;z-index:10050; position: relative;}
.brand{
    font-family: 'Pacifico', cursive;
    font-weight: 400;
    font-size: 32px;
    padding: 2px 2px;
    line-height: 1;
    /* Fallback for browsers that don't support text background-clip */
    color: #ffd700;
    text-shadow: 0 6px 16px rgba(0,0,0,0.45);
    letter-spacing: 0.6px;
}

/* Apply gradient text only on browsers that support background-clip:text (WebKit/Blink) */
@supports (-webkit-background-clip: text) or (background-clip: text) {
    .brand{
        background: linear-gradient(90deg, #ffd700 0%, #ffb347 60%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent; /* needed for some WebKit builds */
        color: transparent;
    }
}

/* Brand inside sidebar (centered in menu) */
.sidebar .brand {
    display: block;
    text-align: center;
    margin: 10px 0;
}

/* On small screens keep sidebar brand visible; top bar brand removed */
@media (max-width: 800px) {
    .sidebar .brand { display: block; }
}
.category-container{margin:4px 0 0 0;padding:2px;position:relative}

/* Divisore tra categorie e lista canali */
.sidebar-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    margin: 15px 10px;
    border: none;
}

.custom-select {
    width: 100%;
    height: 30px; /* uniform height with search */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px; /* remove vertical padding so height is exact */
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    gap: 8px;
}

.custom-select:focus {
    border-color: #ffce00;
    background: rgba(255, 255, 255, 0.15);
}

.custom-select .selected-category {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1a2233;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    margin-top: 4px;
    padding: 0;
    list-style: none;
    z-index: 10100;
    max-height: 300px;
    overflow-y: auto;
}

.category-options li {
    padding: 10px 12px;
    color: #cbd5e1;
    cursor: pointer;
    font-size: 14px;
}

.category-options li:hover, .category-options li.focused {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Barra info visibile sopra il video in fullscreen */
body.inpage-fullscreen-active .bottom-bar {
    display: none;
    z-index: 10050;
    pointer-events: none;
    left: 0;
    right: 0;
    width: 100%;
    height: 120px; /* Più alta */
    background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 70%, transparent 100%);
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    padding: 0 50px;
}

body.inpage-fullscreen-active.show-info-bar .bottom-bar {
    display: flex !important;
}

body.inpage-fullscreen-active .bottom-bar-inner {
    max-width: 100%;
    width: 100%;
    padding: 0;
}

/* Small square fullscreen toggle for mobile, placed next to Guida TV */
.fullscreen-toggle {
    width: 38px;
    height: 38px;
    display: inline-flex !important; /* FORZATO visibility */
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    font-size: 18px;
    cursor: pointer;
    z-index: 9999;
}
.fullscreen-toggle:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,206,0,0.5); border-color:#ffce00 }

/* Hide manual fullscreen toggle on Fire TV devices (large TV UAs) */
body.is-firetv .fullscreen-toggle { display: none !important; }
/* Hide zapping buttons on Fire TV/large screens (defensive) */
body.is-firetv .zap-btn { display: none !important; }


@media (max-width:800px){
    .guide-btn { margin-right: 6px; }
}

body.inpage-fullscreen-active .status-label {
    font-size: 32px; /* Più grande di prima */
    color: rgba(255,255,255,0.85);
    font-weight: 500;
}

body.inpage-fullscreen-active #watchingTitle {
    font-size: 40px; /* Ridimensionato: meno enorme ma comunque leggibile */
    color: #ffd700; /* Giallo Oro */
    font-weight: 900;
    margin-left: 20px;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.7);
    text-transform: none; /* Rispettiamo maiuscole/minuscole */
}

/* Nome canale nel menu (stai guardando) più grande e con colori corretti */
.header-info #currentTitle {
    font-size: 24px; /* Leggermente più grande */
    color: #ffd700; /* Giallo Oro come richiesto */
    text-transform: none; /* Rispettiamo maiuscole/minuscole */
}

#search{
    height: 30px; /* uniform height with category selector */
    margin:8px 0;
    padding:0 12px; /* remove vertical padding so height is exact */
    width:100%;
    border-radius:6px;
    border:1px solid rgba(255,255,255,0.25);
    background:rgba(255,255,255,0.1);
    color:#fff;
    font-weight:500;
    font-size:14px;
    line-height:44px; /* vertically center text */
    box-sizing: border-box;
    display:block;
}
#search::placeholder{color:rgba(255,255,255,0.7)}
#search:focus{background:rgba(255,255,255,0.15);border-color:#ffce00 !important}

.sidebar-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 12px 0;
    width: 100%;
}

#channelList{list-style:none;padding:0;margin:0;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}
#channelList::-webkit-scrollbar{width:0;height:0;display:none}
#channelList li{display:flex;align-items:center;padding:8px;border-radius:6px;cursor:pointer;color:#e6eef8;border-bottom:1px solid rgba(255,255,255,0.03)}
#channelList li:hover{background:rgba(255,255,255,0.03)}

/* make the thin separator under channel items yellow when hovered/focused/selected */
#channelList li:hover,
#channelList li:focus,
#channelList li.selected {
    border-bottom: 1px solid #ffce00 !important;
}

/* When guide button is focused, hide the yellow bottom line and left indicator on channel list */
body.guide-focused #channelList li.selected,
body.guide-focused #channelList li:focus,
body.guide-focused #channelList li:hover {
    border-bottom: 1px solid rgba(255,255,255,0.03) !important;
    box-shadow: none !important;
}
.ch-logo{
    width:48px;
    height:32px;
    object-fit:contain;
    margin-right:10px;
    background:rgba(255,255,255,0.03);
    border-radius:4px;
    padding:2px;
    transition: opacity 0.3s ease;
}
.ch-logo.loading {
    opacity: 0;
}
.ch-logo.loaded {
    opacity: 1;
}
.ch-name{font-size:13px;flex:1}
.ch-index{width:24px;text-align:center;color:#9aa8b8;margin-right:6px}
#channelList li.selected{background:rgba(255,255,255,0.06);outline:2px solid rgba(255,255,255,0.04)}
.ch-logo:focus{outline:2px solid rgba(255,255,255,0.08)}
.main{flex:1;background:transparent;color:#fff;display:flex;flex-direction:column;position:relative;z-index:10;overflow:hidden;}
.player-header{padding:12px 16px;border-top:1px solid rgba(255,255,255,0.03);display:flex;align-items:center;gap:16px;background:#0b1220;flex-shrink:0;}
.header-info{display:flex;flex-direction:column;gap:4px}
/* #currentTitle rimosso da qui perché gestito sotto in .header-info #currentTitle */
.status-label{font-size:13px;opacity:0.7;color:#3b82f6}
.player-area{position:relative;width:100%;flex:1;z-index:0;padding:0;background:#000;overflow:hidden;}
#playerArea{position:relative;width:100%;height:100%;max-width:none;background:#000;margin:0;aspect-ratio:none}
/* Keep video/iframe sized above the bottom bar so controls are not covered.
   Allow percentage sizes (e.g. 90%) and center the element when smaller than container. */
#videoPlayer, #iframeWrap, #playerIframe{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:var(--bar-height);
    background:#000;
    display:block;
    object-fit:contain;
    /* allow author to set width/height in % and still keep centered */
    max-width:100%;
    width:100%;
    height:100%;
    margin-left:auto;
    margin-right:auto;
}

/* If the element is given an explicit percentage size (e.g. width:90% or height:90%),
   keep it centered within the available area */
#videoPlayer[style*="width:"] , #iframeWrap[style*="width:"] , #playerIframe[style*="width:"] ,
#videoPlayer[style*="height:"] , #iframeWrap[style*="height:"] , #playerIframe[style*="height:"] {
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    transform: none;
}

/* Stili specifici per Video.js per occupare tutto lo spazio */
.video-js {
    width: 100% !important;
    height: 100% !important;
}
.vjs-tech {
    object-fit: contain; /* o fill se preferisci che riempia sempre */
}

/* Stili specifici per Plyr per occupare tutto lo spazio */
.player-area .plyr {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
}
.player-area .plyr__video-wrapper {
    height: 100% !important;
}
.player-area .plyr video {
    object-fit: contain; /* o fill se vuoi che riempia l'area */
}

/* In-page fullscreen fallback styles */
#playerArea.inpage-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    z-index: 9999 !important;
}

/* In in-page fullscreen the player should fill the viewport (bars may remain);
   restore full-bleed sizing so controls aren't clipped */
#playerArea.inpage-fullscreen #videoPlayer, 
#playerArea.inpage-fullscreen #iframeWrap, 
#playerArea.inpage-fullscreen #playerIframe {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    object-fit: contain;
    z-index: 99999;
}

/* Casi specifici TGR in inpage-fullscreen se presente */
#playerArea.inpage-fullscreen #videoPlayer,
#playerArea.inpage-fullscreen #iframeWrap,
#playerArea.inpage-fullscreen #playerIframe {
    object-fit: contain;
}

/* Hide UI when active */
body.inpage-fullscreen-active .top-bar,
body.inpage-fullscreen-active .bottom-bar,
body.inpage-fullscreen-active .sidebar,
body.inpage-fullscreen-active #menuToggle {
    display: none !important;
}

/* Reset main padding when bars are hidden */
body.inpage-fullscreen-active .main {
    padding: 0 !important;
}

@media(max-width:800px){
    .sidebar{width:260px} 
    .ch-name{display:block; font-size: 14px;} 
    .brand{font-size:18px}
}

/* Mobile portrait: show only the current event and the Guida TV button in the bottom bar */
@media (max-width:600px) and (orientation: portrait) {
    /* hide the top clock */
    .top-clock { display: none !important; }

    /* hide all left-side items except the current event text */
    .bottom-bar-inner .left > * { display: none !important; }
    .bottom-current-event { display: block !important; }

    /* hide all right-side actions except the guide button */
    .bottom-bar-inner .right > * { display: none !important; }
    .bottom-bar-inner .right .guide-btn { display: inline-flex !important; }

    /* Show zapping buttons only on portrait mobile next to guide (small spacing) */
    .bottom-bar-inner .right .zap-btn { display: inline-flex !important; margin-right: 6px; }

    /* compact layout */
    .bottom-bar-inner { justify-content: space-between; align-items: center; }
}

/* Improve program card readability on small portrait screens */
@media (max-width:600px) and (orientation: portrait) {
    .modal-overlay.fullscreen .program-card {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        padding: 12px 16px !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
    }
    .modal-overlay.fullscreen .program-card .time {
        min-width: 56px !important;
        flex: 0 0 56px !important;
        text-align: left !important;
        margin-right: 12px !important;
    }
    .modal-overlay.fullscreen .program-card .title {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        flex: 1 1 auto !important;
        font-size: 16px !important;
        line-height: 1.2 !important;
    }
    .modal-overlay.fullscreen .programs-list { gap: 10px; padding-bottom: 80px; }
}

/* Hamburger (top-right) */
#menuToggle{display:none;position:fixed;top:5px;right:12px;z-index:100100;background:rgba(15, 23, 36, 0.8);border:1px solid rgba(255,255,255,0.2);border-radius:6px;color:#fff;font-size:24px;padding:6px 12px;cursor:pointer}

@media(max-width:800px){
	#menuToggle{display:block}
	/* mobile: hide sidebar by default, will be shown when .sidebar.show */
	.sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .25s ease;z-index:100050;width:260px;background: rgba(15, 23, 36, 0.7) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);}
	.sidebar.show{transform:translateX(0)}
	.app{padding-left:0}
	.main{margin-left:0}
    
    /* Ensure top-bar doesn't cover toggle on mobile */
    .top-bar { padding-right: 70px; }
}

/* EPG STYLES */
.guide-btn {
    background: #3b82f6;
    color: white !important;
    border: 2px solid transparent;
    padding: 6px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin-right: 12px;
    transition: background 0.15s, box-shadow 0.15s;
    display: inline-flex;
    align-items: center;
}
.guide-btn:hover { background: #2563eb; }

/* Focus styling per rendere evidente quando il pulsante Guida TV è selezionato */
.guide-btn:focus,
.guide-btn.focused,
.guide-btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(255,206,0,0.28) !important, 0 6px 14px rgba(0,0,0,0.35) !important;
    /* keep border transparent to avoid layout shift */
    border-color: transparent !important;
    transform: none !important;
    background: linear-gradient(180deg, #3b82f6, #2563eb) !important;
}

.guide-btn:active { transform: none; }

/* Zapping buttons (prev/next) - hidden by default */
.zap-btn {
    display: none;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
}

/* removed bottom current program styles (now displayed only in top bar) */

.modal-overlay { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.8); 
    z-index: 20000; 
    justify-content: center; 
    align-items: center; 
}
.modal-overlay.active { display: flex; }
.modal-popup { 
    background: #1e293b; 
    color: white; 
    border-radius: 40px; 
    width: 90%; 
    max-width: 900px; 
    height: 80vh; 
    padding: 30px; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.5); 
    overflow-y: auto; 
    scrollbar-width: none; 
    outline: none; 
    position: relative;
    z-index: 20001;
}
.modal-popup::-webkit-scrollbar { display: none; }
.modal-header { font-size: 1.4em; font-weight: bold; margin-bottom: 20px; border-bottom: 2px solid #3b82f6; padding-bottom: 15px; display: flex; justify-content: space-between; align-items: center; }
.modal-close { background: none; border: none; font-size: 2em; color: #94a3b8; cursor: pointer; line-height: 1; }
.modal-close:hover { color: white; }

.programs-list { display: flex; flex-direction: column; gap: 8px; }

/* Fullscreen modal variant */
.modal-overlay.fullscreen { align-items: stretch; justify-content: stretch; }
.modal-overlay.fullscreen .modal-popup {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    border-radius: 0;
    padding: 20px 24px;
    box-shadow: none;
    overflow: auto;
}
.modal-overlay.fullscreen .modal-popup { position: relative; -webkit-overflow-scrolling: touch; padding-top: 64px; }
.modal-overlay.fullscreen .modal-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: linear-gradient(180deg, rgba(30,41,59,0.95), rgba(30,41,59,0.85));
    z-index: 120000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.modal-overlay.fullscreen .modal-close { font-size: 1.6em; }
.modal-overlay.fullscreen .programs-list { gap: 6px; padding-bottom: 60px; }
.program-card { background: rgba(255,255,255,0.05); padding: 15px 25px; border-radius: 20px; cursor: pointer; display: flex; align-items: center; transition: transform 0.2s, background 0.2s; border: none !important; outline: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.program-card.selected, .program-card:hover { background: rgba(255,255,255,0.15); transform: scale(1.01); }
.program-card.in-corso { background: rgba(255, 206, 0, 0.10); border: 1px solid rgba(255, 206, 0, 0.28) !important; }
.program-card .time { font-weight: bold; min-width: 70px; color: #94a3b8; }
.program-card.in-corso .time { color: #ffce00; }
.program-card .title { margin-left: 15px; font-size: 1.1em; color: #f1f5f9; }
.in-corso-badge { margin-left: 12px; color: #4ade80; font-weight: bold; font-size: 0.75em; background: rgba(74, 222, 128, 0.1); padding: 3px 10px; border-radius: 12px; }

/* EPG STYLES */
.guide-btn {
    background: #3b82f6;
    color: white !important;
    border: 2px solid transparent;
    padding: 6px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin-left: 20px;
    transition: background 0.15s, box-shadow 0.15s;
    display: inline-flex;
    align-items: center;
}
.guide-btn:hover { background: #2563eb; }

/* Ensure focus state is visible even if other global rules reset outlines */
.guide-btn:focus,
.guide-btn.focused,
.guide-btn:focus-visible {
    outline: none !important;
    /* Solid yellow highlight (opaque) */
    box-shadow: 0 0 0 2px #ffce00 !important;
    border-color: #ffce00 !important;
    transform: none !important;
}

.current-program-info {
    margin-left: 15px;
    color: #4ade80;
    font-weight: 500;
    font-style: italic;
    font-size: 15px;
}

.modal-overlay { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.8); 
    z-index: 99999; 
    justify-content: center; 
    align-items: center; 
}
.modal-overlay.active { display: flex !important; }
.modal-popup { 
    background: #1e293b; 
    color: white; 
    border-radius: 40px; 
    width: 90%; 
    max-width: 900px; 
    height: 80vh; 
    padding: 30px; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.5); 
    overflow-y: auto; 
    scrollbar-width: none; 
    outline: none; 
}
.modal-popup::-webkit-scrollbar { display: none; }
.modal-header { font-size: 1.4em; font-weight: bold; margin-bottom: 20px; border-bottom: 2px solid #3b82f6; padding-bottom: 15px; display: flex; justify-content: space-between; align-items: center; }
.modal-close { background: none; border: none; font-size: 2em; color: #94a3b8; cursor: pointer; line-height: 1; }
.modal-close:hover { color: white; }

.programs-list { display: flex; flex-direction: column; gap: 8px; }
.program-card { background: rgba(255,255,255,0.05); padding: 15px 25px; border-radius: 20px; cursor: pointer; display: flex; align-items: center; transition: transform 0.2s, background 0.2s; border: none !important; outline: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.program-card.selected, .program-card:hover { background: rgba(255,255,255,0.15); transform: scale(1.01); }
.program-card.in-corso { background: rgba(255, 206, 0, 0.10); border: 1px solid rgba(255, 206, 0, 0.28) !important; }
.program-card .time { font-weight: bold; min-width: 70px; color: #94a3b8; }
.program-card.in-corso .time { color: #ffce00; }
.program-card .title { margin-left: 15px; font-size: 1.1em; color: #f1f5f9; }
.in-corso-badge { display: none; }

/* Modal mobile tweaks placed at end to ensure overrides */
@media (max-width:600px) and (orientation: portrait) {
    .modal-overlay.fullscreen .modal-header {
        padding-top: calc(env(safe-area-inset-top, 12px) + 8px);
        padding-bottom: 8px;
        padding-left: 14px;
        padding-right: 56px; /* room for close button */
    }
    .modal-overlay.fullscreen .modal-close {
        position: absolute;
        right: 12px;
        top: calc(env(safe-area-inset-top, 12px) + 6px);
        font-size: 1.4em;
        z-index: 140000;
        background: none;
    }
    /* hide the hamburger/menu toggle while modal is open */
    body.modal-open #menuToggle { display: none !important; }
}

/* Ensure Guida TV never appears in the bottom bar while in fullscreen (defensive override) */
body.inpage-fullscreen-active .bottom-bar-inner .right .guide-btn { display: none !important; }
body.inpage-fullscreen-active .bottom-bar .right .guide-btn { display: none !important; }