/* ============================= */
/* HEADINGS */
/* ============================= */
h1,
h2 {
    color: #222;
}

/* ============================= */
/* LIST STRUCTURE */
/* ============================= */
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    margin-bottom: 1em;
    padding: 12px;
    padding-bottom: 40px;
    /* Space for bottom badges */
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

    display: flex;
    align-items: stretch;
    gap: 16px;

    position: relative;
}

/* ============================= */
/* BBFC / PEGI RATING BADGE (BOTTOM LEFT) */
/* ============================= */
.rating-badge {
    font-family: 'Futura Bold', 'Montserrat Extra Bold', 'Arial Bold', 'Helvetica Bold';
    position: absolute;
    bottom: 8px;
    left: 0;
    transform: translateX(12px);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.75em;
    border: 1px solid #000;
    color: #fff;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
}

.rating-green {
    background-color: #0ac700;
}

.rating-yellow {
    background-color: #fbad00;
}

.rating-orange {
    background-color: #ff7d13;
}

.rating-pink {
    background-color: #fb4f93;
}

.rating-red {
    background-color: #dc0a0a;
}

.rating-none {
    visibility: hidden;
}

/* ============================= */
/* BOTTOM RIGHT INFO BADGES (NEW / HD / S / SL / AD) */
/* ============================= */
.bottom-badges {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    z-index: 10;
    height: auto;
}

.info-badge {
    font-family: 'Futura Bold', 'Montserrat Extra Bold', 'Arial Bold', 'Helvetica Bold';
    font-size: 0.75em;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    line-height: normal;
    box-sizing: border-box;
}

/* Black box (S / AD / SL) */
.info-badge.black {
    background-color: #000;
    color: #fff;
}

/* White box (HD) */
.info-badge.white {
    background-color: #fff;
    color: #000;
}

.info-badge.dolby {
    background-color: #ffec80;
    color: #000;
}

body.dark-mode .info-badge.dolby {
    background-color: #ffec80;
    color: #000;
}

body.dark-mode .info-badge.white {
    background-color: #eee;
    color: #000;
}

/* NEW badge (orange) */
.info-badge.new {
    background-color: #ff7d13 !important;
    ;
    color: #fff !important;
}

/* ============================= */
/* PROGRAMME IMAGE (16:9) */
/* ============================= */
.programme-img {
    width: 240px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background-color: #000;
}

/* LOGO FALLBACK */
.programme-img.logo-fallback {
    object-fit: contain;
    padding: 0;
    background-color: #fff;
    width: 240px;
    aspect-ratio: 16 / 9;
    transform: scale(0.5);
    transform-origin: center;
}

body.dark-mode .programme-img.logo-fallback {
    background-color: #111;
}

/* ============================= */
/* PROGRAMME TEXT */
/* ============================= */
.programme-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.title {
    font-weight: bold;
    margin-bottom: 6px;
}

.synopsis {
    font-style: italic;
    color: #555;
}

/* ============================= */
/* CHANNEL HEADER LOGO */
/* ============================= */
.logo-container {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    background: linear-gradient(to right,
            rgba(217, 217, 217, 0) 0%,
            /* transparent grey */
            rgba(217, 217, 217, 1) 20%,
            /* solid grey */
            rgba(217, 217, 217, 1) 80%,
            /* solid grey */
            rgba(217, 217, 217, 0) 100%
            /* transparent grey */
        );
}

.logo-container img.logo {
    max-width: 300px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ============================= */
/* LOADING TEXT */
/* ============================= */
#loading {
    font-weight: bold;
    color: #0073e6;
    margin-bottom: 1em;
    text-align: center;
}

/* ============================= */
/* SCHEDULE WRAPPER */
/* ============================= */
#schedule {
    text-align: left;
    width: 45%;
    margin: 0 auto;
}

body.dark-mode #schedule {
    background-color: #111;
}

/* ============================= */
/* PAST EVENTS */
/* ============================= */
.past {
    background-color: #e8dcc0;
}

.past .title,
.past .synopsis {
    opacity: 0.7;
}

body.dark-mode .past {
    background-color: transparent;
    color: #fff
}

body.dark-mode .past .title,
body.dark-mode .past .synopsis {
    opacity: 0.7;
}

/* ============================= */
/* NOW / NEXT HIGHLIGHT */
/* ============================= */
.on-now {
    border-top: 5px solid orange;
    border-bottom: 5px solid orange;
    border-left: 5px solid orange;
    border-right: 5px solid orange;
    background-color: rgb(251, 251, 148);
}

.on-now .title .synopsis {
    font-weight: bold;
}

.on-next {
    border-top: 5px solid goldenrod;
    border-bottom: 5px solid goldenrod;
    border-left: 5px solid goldenrod;
    border-right: 5px solid goldenrod;
    background-color: rgb(251, 251, 178);
    /* slightly deeper */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

body.dark-mode .on-now {
    border-top: 5px solid orange;
    border-bottom: 5px solid orange;
    border-left: 5px solid orange;
    border-right: 5px solid orange;
    background-color: #5b458f;
}

body.dark-mode .on-next {
    border-top: 5px solid goldenrod;
    border-bottom: 5px solid goldenrod;
    border-left: 5px solid goldenrod;
    border-right: 5px solid goldenrod;
    background-color: #4b2d92;
}

/* ============================= */
/* CHANNEL LIST BUTTON */
/* ============================= */
#channel-list {
    margin: 10px 0;
    float: left;
}

/* Clear float */
#channel-info,
#schedule {
    clear: both;
    background-color: #ffd95c;
}

/* ============================= */
/* MOBILE RESPONSIVE */
/* ============================= */
@media (max-width: 952px) {

    h2 {
        font-size: 25px;
    }

    #schedule {
        width: 70%;
        margin: 0 auto;
    }

    li {
        flex-direction: column;
        align-items: center;
        text-align: left;
        padding-bottom: 50px;
        /* Extra space for stacked badges */
    }

    .programme-img {
        width: 100%;
        max-width: 420px;
        aspect-ratio: 16 / 9;
    }

    .programme-text {
        width: 100%;
        margin-top: 10px;
    }

    .logo-container img.logo {
        max-width: 200px;
    }

    .rating-badge {
        bottom: 6px;
        left: 0;
        transform: translateX(12px);
        font-size: 0.65em;
        padding: 2px 5px;
    }

    .bottom-badges {
        bottom: 6px;
        right: 6px;
    }

    .info-badge {
        font-size: 0.65em;
        padding: 2px 5px;
        min-height: 20px;
    }
}

/* ============================= */
/* HEADINGS */
/* ============================= */
h1,
h2 {
    color: #222;
}

/* ============================= */
/* LIST STRUCTURE */
/* ============================= */
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    margin-bottom: 1em;
    padding: 12px;
    padding-bottom: 40px;
    /* Space for bottom badges */
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

    display: flex;
    align-items: stretch;
    gap: 16px;

    position: relative;
}

/* ============================= */
/* BBFC / PEGI RATING BADGE (BOTTOM LEFT) */
/* ============================= */
.rating-badge {
    font-family: 'Futura Bold', 'Montserrat Extra Bold', 'Arial Bold', 'Helvetica Bold';
    position: absolute;
    bottom: 8px;
    left: 0;
    transform: translateX(12px);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.75em;
    border: 1px solid #000;
    color: #fff;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
}

.rating-green {
    background-color: #0ac700;
}

.rating-yellow {
    background-color: #fbad00;
}

.rating-orange {
    background-color: #ff7d13;
}

.rating-pink {
    background-color: #fb4f93;
}

.rating-red {
    background-color: #dc0a0a;
}

.rating-none {
    visibility: hidden;
}

/* ============================= */
/* BOTTOM RIGHT INFO BADGES (NEW / HD / S / SL / AD) */
/* ============================= */
.bottom-badges {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    z-index: 10;
    height: auto;
}

.info-badge {
    font-family: 'Futura Bold', 'Montserrat Extra Bold', 'Arial Bold', 'Helvetica Bold';
    font-size: 0.75em;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    line-height: normal;
    box-sizing: border-box;
}

/* Black box (S / AD / SL) */
.info-badge.black {
    background-color: #000;
    color: #fff;
}

/* White box (HD) */
.info-badge.white {
    background-color: #fff;
    color: #000;
}

.info-badge.fourK {
    background-color: #ff00bf;
    color: #fff;
}

body.dark-mode .info-badge.white {
    background-color: #eee;
    color: #000;
}

body.dark-mode .info-badge.fourK {
    background-color: #ff00bf;
    color: #fff;
}

/* NEW badge (orange) */
.info-badge.new {
    background-color: #ff7d13;
    color: #fff;
}

/* ============================= */
/* PROGRAMME IMAGE (16:9) */
/* ============================= */
.programme-img {
    width: 240px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background-color: #000;
}

/* LOGO FALLBACK */
.programme-img.logo-fallback {
    object-fit: contain;
    padding: 0;
    background-color: #fff;
    width: 240px;
    aspect-ratio: 16 / 9;
    transform: scale(0.5);
    transform-origin: center;
}

body.dark-mode .programme-img.logo-fallback {
    background-color: #111;
}

/* ============================= */
/* PROGRAMME TEXT */
/* ============================= */
.programme-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.title {
    font-weight: bold;
    margin-bottom: 6px;
}

.synopsis {
    font-style: italic;
    color: #555;
}

/* ============================= */
/* CHANNEL HEADER LOGO */
/* ============================= */
.logo-container {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 1) 20%,
            rgba(255, 255, 255, 1) 80%,
            rgba(255, 255, 255, 0) 100%);
}

.logo-container img.logo {
    max-width: 300px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ============================= */
/* LOADING TEXT */
/* ============================= */
#loading {
    font-weight: bold;
    color: #0073e6;
    margin-bottom: 1em;
    text-align: center;
}

/* ============================= */
/* SCHEDULE WRAPPER */
/* ============================= */
#schedule {
    text-align: left;
    width: 45%;
    margin: 0 auto;
}

body.dark-mode #schedule {
    background-color: #111;
}

/* ============================= */
/* NOW / NEXT HIGHLIGHT */
/* ============================= */
/* .on-now,
.on-next {
    border-left: 4px solid #1a81ff;
    border-right: 4px solid #1a81ff;
    background-color: #cce3ff;
}

body.dark-mode .on-now,
body.dark-mode .on-next {
    border-left: 4px solid #1a81ff;
    border-right: 4px solid #1a81ff;
    background-color: #003980;
} */

/* ============================= */
/* CHANNEL LIST BUTTON */
/* ============================= */
#channel-list {
    margin: 10px 0;
    float: left;
}

/* Clear float */
#channel-info,
#schedule {
    clear: both;
    background-color: #ffd95c;
}

/* ============================= */
/* MOBILE RESPONSIVE */
/* ============================= */
@media (max-width: 952px) {

    h2 {
        font-size: 25px;
    }

    #schedule {
        width: 70%;
        margin: 0 auto;
    }

    li {
        flex-direction: column;
        align-items: center;
        text-align: left;
        padding-bottom: 50px;
        /* Extra space for stacked badges */
    }

    .programme-img {
        width: 100%;
        max-width: 420px;
        aspect-ratio: 16 / 9;
    }

    .programme-text {
        width: 100%;
        margin-top: 10px;
    }

    .logo-container img.logo {
        max-width: 200px;
    }

    .rating-badge {
        bottom: 6px;
        left: 0;
        transform: translateX(12px);
        font-size: 0.65em;
        padding: 2px 5px;
    }

    .bottom-badges {
        bottom: 6px;
        right: 6px;
    }

    .info-badge {
        font-size: 0.65em;
        padding: 2px 5px;
        min-height: 20px;
    }
}

.dst-note {
    background: #eef6ff;
    border-left: 4px solid #0077ff;
    font-style: italic;
}