/* =========================================================
   ABABIOTV GUIDE
   CLEAN PRODUCTION UI
========================================================= */

:root {

    --page-bg:
        #eef3f8;

    --surface:
        #ffffff;

    --surface-soft:
        #f8fafc;

    --text:
        #0f172a;

    --text-soft:
        #64748b;

    --muted:
        #94a3b8;

    --border:
        #e2e8f0;

    --border-strong:
        #cbd5e1;

    --primary:
        #4f46e5;

    --primary-dark:
        #4338ca;

    --primary-soft:
        #eef2ff;

    --blue:
        #2563eb;

    --cyan:
        #0891b2;

    --green:
        #059669;

    --orange:
        #ea580c;

    --red:
        #dc2626;

    --pink:
        #db2777;

    --shadow-sm:
        0 6px 18px
        rgba(15, 23, 42, 0.06);

    --shadow-md:
        0 14px 38px
        rgba(15, 23, 42, 0.08);

    --radius:
        16px;

    --radius-lg:
        22px;

}


/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    min-width: 320px;

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:

        radial-gradient(
            circle at top left,
            rgba(79, 70, 229, 0.10),
            transparent 35%
        ),

        radial-gradient(
            circle at top right,
            rgba(8, 145, 178, 0.08),
            transparent 28%
        ),

        var(--page-bg);

    color:
        var(--text);

}


button,
input,
select {

    font:
        inherit;

}


button,
a,
select {

    -webkit-tap-highlight-color:
        transparent;

}


img {

    max-width:
        100%;

}


[hidden] {

    display:
        none !important;

}


/* =========================================================
   PAGE SHELL
========================================================= */

.guide-shell {

    width:
        min(
            1180px,
            calc(100% - 32px)
        );

    margin:
        0 auto;

    padding:
        30px 0 50px;

}


/* =========================================================
   HERO
========================================================= */

.guide-header {

    position:
        relative;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        24px;

    margin-bottom:
        16px;

    padding:
        28px;

    overflow:
        hidden;

    background:

        linear-gradient(
            135deg,
            #172554 0%,
            #312e81 52%,
            #0f766e 100%
        );

    border-radius:
        24px;

    box-shadow:
        var(--shadow-md);

    color:
        #ffffff;

}


.guide-header::after {

    content:
        "";

    position:
        absolute;

    right:
        -50px;

    top:
        -70px;

    width:
        210px;

    height:
        210px;

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

}


.guide-header-copy {

    position:
        relative;

    z-index:
        1;

    max-width:
        720px;

}


.guide-eyebrow {

    display:
        inline-block;

    margin-bottom:
        8px;

    color:
        #c7d2fe;

    font-size:
        0.72rem;

    font-weight:
        900;

    letter-spacing:
        0.14em;

}


.guide-header h1 {

    margin:
        0 0 8px;

    font-size:
        clamp(
            1.8rem,
            4vw,
            2.65rem
        );

    line-height:
        1.1;

}


.guide-header p {

    max-width:
        650px;

    margin:
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );

    font-size:
        0.94rem;

    line-height:
        1.55;

}


.guide-header-badge {

    position:
        relative;

    z-index:
        1;

    flex:
        0 0 auto;

    padding:
        8px 12px;

    background:
        rgba(
            255,
            255,
            255,
            0.11
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.18
        );

    border-radius:
        999px;

    color:
        #ffffff;

    font-size:
        0.72rem;

    font-weight:
        800;

    white-space:
        nowrap;

}


/* =========================================================
   STATUS
========================================================= */

.guide-status {

    margin-bottom:
        16px;

    padding:
        11px 14px;

    background:
        rgba(
            255,
            255,
            255,
            0.90
        );

    border:
        1px solid
        #dbe4ef;

    border-left:
        4px solid
        var(--green);

    border-radius:
        12px;

    box-shadow:
        var(--shadow-sm);

    color:
        #334155;

    font-size:
        0.8rem;

    font-weight:
        750;

}


/* =========================================================
   SHARED PANELS
========================================================= */

.guide-controls,
.guide-filter-panel,
.tv-guide-section {

    background:
        rgba(
            255,
            255,
            255,
            0.94
        );

    border:
        1px solid
        var(--border);

    border-radius:
        20px;

    box-shadow:
        var(--shadow-sm);

}


/* =========================================================
   COUNTRY + SEARCH
========================================================= */

.guide-controls {

    margin-bottom:
        20px;

    padding:
        16px;

}


.guide-controls-top {

    display:
        grid;

    grid-template-columns:
        minmax(
            220px,
            0.38fr
        )
        minmax(
            0,
            1fr
        );

    gap:
        12px;

    align-items:
        start;

}


/* COUNTRY */

.tv-guide-country {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    min-height:
        48px;

    padding:
        6px 7px 6px 11px;

    background:
        var(--surface-soft);

    border:
        1px solid
        var(--border);

    border-radius:
        13px;

}


.tv-guide-country-label {

    flex:
        0 0 auto;

    color:
        #334155;

    font-size:
        0.76rem;

    font-weight:
        850;

}


.tv-guide-country-select {

    width:
        100%;

    min-width:
        0;

    padding:
        9px 30px 9px 9px;

    background:
        #ffffff;

    border:
        1px solid
        var(--border-strong);

    border-radius:
        9px;

    color:
        var(--text);

    font-size:
        0.78rem;

    font-weight:
        700;

    cursor:
        pointer;

}


.tv-guide-country-select:focus {

    outline:
        none;

    border-color:
        #818cf8;

    box-shadow:
        0 0 0 3px
        rgba(
            99,
            102,
            241,
            0.10
        );

}


/* SEARCH */

.tv-guide-search {

    min-width:
        0;

}


.tv-guide-search-box {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    min-height:
        48px;

    background:
        var(--surface-soft);

    border:
        1px solid
        var(--border);

    border-radius:
        13px;

    transition:
        0.2s ease;

}


.tv-guide-search-box:focus-within {

    background:
        #ffffff;

    border-color:
        #818cf8;

    box-shadow:
        0 0 0 4px
        rgba(
            99,
            102,
            241,
            0.10
        );

}


.tv-guide-search-icon {

    flex:
        0 0 auto;

    padding-left:
        13px;

}


#tvGuideSearchInput {

    width:
        100%;

    padding:
        12px 42px 12px 9px;

    background:
        transparent;

    border:
        0;

    outline:
        0;

    color:
        var(--text);

    font-size:
        0.85rem;

}


#tvGuideSearchInput::placeholder {

    color:
        var(--muted);

}


.tv-guide-search-clear {

    position:
        absolute;

    right:
        8px;

    top:
        50%;

    transform:
        translateY(-50%);

    width:
        29px;

    height:
        29px;

    background:
        #e2e8f0;

    border:
        0;

    border-radius:
        50%;

    color:
        #475569;

    font-size:
        0.7rem;

    font-weight:
        900;

    cursor:
        pointer;

}


.tv-guide-search-status {

    min-height:
        17px;

    margin-top:
        5px;

    color:
        var(--text-soft);

    font-size:
        0.73rem;

}


/* =========================================================
   SEARCH RESULTS
========================================================= */

.tv-guide-search-results {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                240px,
                1fr
            )
        );

    gap:
        10px;

    margin-top:
        12px;

}


.tv-guide-search-result {

    min-width:
        0;

    padding:
        13px;

    background:
        #ffffff;

    border:
        1px solid
        var(--border);

    border-radius:
        12px;

}


.tv-guide-search-result-top {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        8px;

    margin-bottom:
        6px;

}


.tv-guide-search-result-channel {

    min-width:
        0;

    overflow:
        hidden;

    color:
        var(--primary);

    font-size:
        0.71rem;

    font-weight:
        850;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

}


.tv-guide-search-result-state {

    flex:
        0 0 auto;

    padding:
        3px 7px;

    background:
        #f1f5f9;

    border-radius:
        999px;

    color:
        #64748b;

    font-size:
        0.61rem;

    font-weight:
        850;

}


.tv-guide-search-result-state.now {

    background:
        #fee2e2;

    color:
        #b91c1c;

}


.tv-guide-search-result-title {

    margin:
        0 0 5px;

    font-size:
        0.88rem;

    font-weight:
        800;

}


.tv-guide-search-result-time {

    margin-bottom:
        7px;

    color:
        var(--text-soft);

    font-size:
        0.73rem;

}


.tv-guide-search-result-description {

    display:
        -webkit-box;

    margin-bottom:
        10px;

    overflow:
        hidden;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;

    color:
        var(--text-soft);

    font-size:
        0.75rem;

    line-height:
        1.45;

}


.tv-guide-search-result-watch {

    display:
        inline-flex;

    justify-content:
        center;

    padding:
        7px 10px;

    background:
        var(--text);

    border-radius:
        8px;

    color:
        #ffffff;

    text-decoration:
        none;

    font-size:
        0.7rem;

    font-weight:
        850;

}


.tv-guide-search-result-watch:hover {

    background:
        var(--primary);

}

/* =========================================================
   FEATURED
   PREMIUM CINEMA / GLOW STYLE
========================================================= */

.tv-guide-featured {
    position: relative;

    margin-bottom: 24px;
    padding: 24px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(99, 102, 241, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 90%,
            rgba(14, 165, 233, 0.08),
            transparent 30%
        ),
        #f8fafc;

    border: 1px solid #e2e8f0;
    border-radius: 24px;

    box-shadow:
        0 18px 45px
        rgba(15, 23, 42, 0.07);
}


/* =========================================================
   HEADER
========================================================= */

.tv-guide-featured-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 18px;
    margin-bottom: 20px;
}


.tv-guide-featured-label {
    display: inline-flex;
    align-items: center;

    margin-bottom: 7px;

    padding: 5px 10px;

    background:
        linear-gradient(
            135deg,
            #ede9fe,
            #dbeafe
        );

    border: 1px solid #ddd6fe;
    border-radius: 999px;

    color: #5b21b6;

    font-size: 0.67rem;
    font-weight: 900;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.tv-guide-featured-header h2 {
    margin: 0;

    color: #0f172a;

    font-size:
        clamp(
            1.35rem,
            3vw,
            1.85rem
        );

    font-weight: 900;
    line-height: 1.15;

    letter-spacing: -0.025em;
}


.tv-guide-featured-header p {
    max-width: 640px;

    margin: 7px 0 0;

    color: #64748b;

    font-size: 0.82rem;
    line-height: 1.55;
}


.tv-guide-featured-count {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 7px 11px;

    background:
        rgba(
            255,
            255,
            255,
            0.85
        );

    border: 1px solid #e2e8f0;
    border-radius: 999px;

    color: #475569;

    font-size: 0.68rem;
    font-weight: 850;

    box-shadow:
        0 5px 15px
        rgba(15, 23, 42, 0.06);

    white-space: nowrap;
}


/* =========================================================
   GRID
========================================================= */

.tv-guide-featured-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 15px;
}


/* =========================================================
   PREMIUM GLOW CARD
========================================================= */

.tv-guide-featured-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 330px;

    isolation: isolate;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #1e2454 0%,
            #342a78 42%,
            #172554 100%
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    border-radius: 22px;

    box-shadow:
        0 18px 38px
        rgba(30, 41, 59, 0.18),
        0 5px 15px
        rgba(79, 70, 229, 0.12);

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease;
}


/* =========================================================
   LARGE SOFT GLOW
========================================================= */

.tv-guide-featured-card::before {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    top: -75px;
    right: -60px;

    z-index: -1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(167, 139, 250, 0.75) 0%,
            rgba(99, 102, 241, 0.32) 40%,
            transparent 72%
        );

    filter: blur(6px);

    opacity: 0.9;

    pointer-events: none;
}


/* SECOND SOFT GLOW */

.tv-guide-featured-card::after {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    left: -80px;
    bottom: -100px;

    z-index: -1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(56, 189, 248, 0.38),
            transparent 70%
        );

    filter: blur(8px);

    pointer-events: none;
}


/* =========================================================
   DIFFERENT CINEMA GRADIENTS
========================================================= */

.tv-guide-featured-card:nth-child(4n + 2) {
    background:
        linear-gradient(
            145deg,
            #123b52 0%,
            #075985 45%,
            #172554 100%
        );
}


.tv-guide-featured-card:nth-child(4n + 2)::before {
    background:
        radial-gradient(
            circle,
            rgba(34, 211, 238, 0.65),
            rgba(14, 165, 233, 0.28) 42%,
            transparent 72%
        );
}


.tv-guide-featured-card:nth-child(4n + 3) {
    background:
        linear-gradient(
            145deg,
            #34213f 0%,
            #6d285e 45%,
            #3b2858 100%
        );
}


.tv-guide-featured-card:nth-child(4n + 3)::before {
    background:
        radial-gradient(
            circle,
            rgba(244, 114, 182, 0.55),
            rgba(168, 85, 247, 0.25) 44%,
            transparent 72%
        );
}


.tv-guide-featured-card:nth-child(4n + 4) {
    background:
        linear-gradient(
            145deg,
            #253b37 0%,
            #146c5d 46%,
            #164e63 100%
        );
}


.tv-guide-featured-card:nth-child(4n + 4)::before {
    background:
        radial-gradient(
            circle,
            rgba(52, 211, 153, 0.58),
            rgba(20, 184, 166, 0.26) 45%,
            transparent 72%
        );
}


/* =========================================================
   HOVER
========================================================= */

.tv-guide-featured-card:hover {
    transform:
        translateY(-6px)
        scale(1.015);

    box-shadow:
        0 28px 55px
        rgba(30, 41, 59, 0.24),
        0 10px 28px
        rgba(99, 102, 241, 0.18);
}


/* =========================================================
   CARD TOP
========================================================= */

.tv-guide-featured-card-top {
    display: flex;
    align-items: center;

    gap: 11px;

    padding:
        16px
        15px
        10px;

    border: 0;

    background: transparent;
}


/* =========================================================
   LOGO
========================================================= */

.tv-guide-featured-logo {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        rgba(
            255,
            255,
            255,
            0.92
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.65
        );

    border-radius: 16px;

    color: #4338ca;

    font-size: 0.88rem;
    font-weight: 900;

    box-shadow:
        0 10px 24px
        rgba(0, 0, 0, 0.18),
        inset
        0 1px 0
        rgba(255, 255, 255, 0.9);

    backdrop-filter: blur(10px);
}


.tv-guide-featured-logo img {
    width: 100%;
    height: 100%;

    box-sizing: border-box;

    padding: 6px;

    object-fit: contain;
}


/* =========================================================
   CHANNEL
========================================================= */

.tv-guide-featured-channel-info {
    min-width: 0;
    flex: 1;
}


.tv-guide-featured-channel {
    overflow: hidden;

    color:
        rgba(
            255,
            255,
            255,
            0.86
        );

    font-size: 0.75rem;
    font-weight: 800;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* =========================================================
   STATUS BADGE
========================================================= */

.tv-guide-featured-status {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin-bottom: 5px;
    padding: 4px 8px;

    background:
        rgba(
            255,
            255,
            255,
            0.12
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.18
        );

    border-radius: 999px;

    color: #ffffff;

    font-size: 0.58rem;
    font-weight: 900;

    letter-spacing: 0.06em;
    text-transform: uppercase;

    box-shadow:
        inset
        0 1px 0
        rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(8px);
}


/* LIVE */

.tv-guide-featured-card.is-live
.tv-guide-featured-status {
    background:
        rgba(
            239,
            68,
            68,
            0.82
        );

    border-color:
        rgba(
            254,
            202,
            202,
            0.42
        );

    color: #ffffff;

    box-shadow:
        0 5px 16px
        rgba(
            239,
            68,
            68,
            0.32
        );
}


/* UPCOMING */

.tv-guide-featured-card.is-upcoming
.tv-guide-featured-status {
    background:
        rgba(
            255,
            255,
            255,
            0.14
        );

    color: #ffffff;
}


/* =========================================================
   BODY
========================================================= */

.tv-guide-featured-body {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding:
        12px
        16px
        14px;
}


/* =========================================================
   CATEGORY
========================================================= */

.tv-guide-featured-category {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin-bottom: 11px;
    padding: 5px 8px;

    background:
        rgba(
            255,
            255,
            255,
            0.12
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.15
        );

    border-radius: 999px;

    color:
        rgba(
            255,
            255,
            255,
            0.88
        );

    font-size: 0.59rem;
    font-weight: 850;

    letter-spacing: 0.04em;
    text-transform: uppercase;

    backdrop-filter: blur(8px);
}


/*
   Remove old nth-child category colors.
*/

.tv-guide-featured-card:nth-child(4n + 2)
.tv-guide-featured-category,

.tv-guide-featured-card:nth-child(4n + 3)
.tv-guide-featured-category,

.tv-guide-featured-card:nth-child(4n + 4)
.tv-guide-featured-category {
    background:
        rgba(
            255,
            255,
            255,
            0.12
        );

    color:
        rgba(
            255,
            255,
            255,
            0.90
        );
}


/* =========================================================
   PROGRAMME TITLE
========================================================= */

.tv-guide-featured-title {
    display: -webkit-box;

    margin:
        0
        0
        9px;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    color: #ffffff;

    font-size: 1.04rem;
    font-weight: 900;

    line-height: 1.3;

    letter-spacing: -0.015em;

    text-shadow:
        0 2px 8px
        rgba(0, 0, 0, 0.18);
}


/* =========================================================
   TIME
========================================================= */

.tv-guide-featured-time {
    margin-bottom: 10px;

    color:
        rgba(
            224,
            231,
            255,
            0.92
        );

    font-size: 0.71rem;
    font-weight: 800;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.tv-guide-featured-description {
    display: -webkit-box;

    margin: 0;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    color:
        rgba(
            226,
            232,
            240,
            0.75
        );

    font-size: 0.72rem;
    line-height: 1.55;
}


/* =========================================================
   ACTION AREA
========================================================= */

.tv-guide-featured-actions {
    display: grid;

    grid-template-columns:
        0.9fr
        1.1fr;

    gap: 8px;

    padding:
        12px
        15px
        15px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(0, 0, 0, 0.10)
        );

    border: 0;
}


/* =========================================================
   BUTTONS
========================================================= */

.tv-guide-featured-schedule,
.tv-guide-featured-watch {
    min-width: 0;
    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        8px
        10px;

    border-radius: 11px;

    font-size: 0.67rem;
    font-weight: 850;

    text-align: center;
    text-decoration: none;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}


/* SCHEDULE */

.tv-guide-featured-schedule {
    background:
        rgba(
            255,
            255,
            255,
            0.10
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.18
        );

    color: #ffffff;

    backdrop-filter: blur(8px);
}


.tv-guide-featured-schedule:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.18
        );

    transform:
        translateY(-1px);
}


/* WATCH */

.tv-guide-featured-watch {
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f3f4ff 100%
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.8
        );

    color: #312e81;

    box-shadow:
        0 8px 18px
        rgba(
            0,
            0,
            0,
            0.16
        );
}


.tv-guide-featured-watch:hover {
    transform:
        translateY(-2px);

    background: #ffffff;

    box-shadow:
        0 12px 24px
        rgba(
            0,
            0,
            0,
            0.22
        );
}


/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 1000px
) {

    .tv-guide-featured-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 700px
) {

    .tv-guide-featured {
        padding: 16px;

        border-radius: 19px;
    }


    .tv-guide-featured-header {
        align-items: flex-start;

        gap: 10px;
        margin-bottom: 15px;
    }


    .tv-guide-featured-header h2 {
        font-size: 1.18rem;
    }


    .tv-guide-featured-header p {
        font-size: 0.72rem;
    }


    .tv-guide-featured-count {
        padding: 5px 8px;

        font-size: 0.61rem;
    }


    /* HORIZONTAL MOVIE CAROUSEL */

    .tv-guide-featured-grid {
        display: flex;

        gap: 12px;

        overflow-x: auto;
        overflow-y: hidden;

        margin-right: -16px;

        padding:
            3px
            16px
            12px
            2px;

        scroll-snap-type:
            x mandatory;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }


    .tv-guide-featured-grid::-webkit-scrollbar {
        display: none;
    }


    .tv-guide-featured-card {
        flex:
            0 0
            min(
                79vw,
                290px
            );

        min-height: 325px;

        scroll-snap-align: start;
    }


    .tv-guide-featured-card:hover {
        transform: none;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (
    max-width: 430px
) {

    .tv-guide-featured {
        padding: 13px;
    }


    .tv-guide-featured-header p {
        display: none;
    }


    .tv-guide-featured-label {
        padding: 4px 8px;

        font-size: 0.61rem;
    }


    .tv-guide-featured-header h2 {
        font-size: 1.08rem;
    }


    .tv-guide-featured-grid {
        margin-right: -13px;

        padding-right: 13px;
    }


    .tv-guide-featured-card {
        flex-basis:
            min(
                83vw,
                275px
            );

        min-height: 315px;

        border-radius: 19px;
    }


    .tv-guide-featured-logo {
        width: 47px;
        height: 47px;

        flex-basis: 47px;

        border-radius: 14px;
    }


    .tv-guide-featured-title {
        font-size: 0.96rem;
    }


    .tv-guide-featured-description {
        -webkit-line-clamp: 2;
    }


    .tv-guide-featured-actions {
        padding:
            10px
            13px
            13px;
    }


    .tv-guide-featured-schedule,
    .tv-guide-featured-watch {
        min-height: 36px;

        font-size: 0.64rem;
    }

}


/* =========================================================
   FILTER PANEL
========================================================= */

.guide-filter-panel {

    margin-bottom:
        20px;

    padding:
        17px;

}


.guide-filter-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        16px;

    margin-bottom:
        9px;

}


.guide-filter-kicker {

    display:
        inline-block;

    margin-bottom:
        3px;

    color:
        var(--cyan);

    font-size:
        0.66rem;

    font-weight:
        900;

    letter-spacing:
        0.09em;

}


.guide-filter-heading h2 {

    margin:
        0;

    font-size:
        1.05rem;

}


.guide-filter-heading p {

    margin:
        0;

    color:
        var(--text-soft);

    font-size:
        0.75rem;

}


/* =========================================================
   ALL FILTER ROWS
========================================================= */

.tv-guide-category-filter,
.tv-guide-time-filter,
.tv-guide-channel-filter {

    display:
        flex;

    align-items:
        center;

    width:
        100%;

    overflow-x:
        auto;

    overflow-y:
        hidden;

    scrollbar-width:
        thin;

    -webkit-overflow-scrolling:
        touch;

}


.tv-guide-category-filter {

    gap:
        7px;

    margin:
        9px 0 6px;

    padding-bottom:
        5px;

}


.tv-guide-time-filter {

    gap:
        7px;

    margin:
        3px 0 6px;

    padding-bottom:
        5px;

}


.tv-guide-channel-filter {

    gap:
        6px;

    margin:
        3px 0 0;

    padding-bottom:
        4px;

}


/* BUTTON BASE */

.tv-guide-category-btn,
.tv-guide-time-btn,
.tv-guide-channel-filter-btn {

    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    background:
        #ffffff;

    border:
        1px solid
        #dbe2ea;

    color:
        #374151;

    font-weight:
        750;

    white-space:
        nowrap;

    cursor:
        pointer;

}


/* CATEGORY */

.tv-guide-category-btn {

    padding:
        8px 11px;

    border-radius:
        999px;

    font-size:
        0.77rem;

}


.tv-guide-category-btn.active {

    background:
        var(--primary);

    border-color:
        var(--primary);

    color:
        #ffffff;

}


/* TIME */

.tv-guide-time-btn {

    padding:
        8px 11px;

    border-radius:
        10px;

    font-size:
        0.76rem;

}


.tv-guide-time-btn.active {

    background:
        #0f766e;

    border-color:
        #0f766e;

    color:
        #ffffff;

}


/* CHANNEL */

.tv-guide-channel-filter-btn {

    padding:
        7px 9px;

    border-radius:
        999px;

    font-size:
        0.7rem;

}


.tv-guide-channel-filter-btn.active {

    background:
        #1d4ed8;

    border-color:
        #1d4ed8;

    color:
        #ffffff;

}


/* COUNTS */

.tv-guide-category-btn small,
.tv-guide-time-btn small {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        21px;

    height:
        20px;

    padding:
        0 6px;

    background:
        #eef2f7;

    border-radius:
        999px;

    color:
        #64748b;

    font-size:
        0.61rem;

    font-weight:
        850;

}


.tv-guide-category-btn.active small,
.tv-guide-time-btn.active small {

    background:
        rgba(
            255,
            255,
            255,
            0.17
        );

    color:
        #ffffff;

}


.tv-guide-time-icon {

    line-height:
        1;

}


/* CHANNEL LOGO */

.tv-guide-channel-filter-logo {

    width:
        19px;

    height:
        19px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:
        #f8fafc;

    border-radius:
        50%;

    color:
        var(--primary);

    font-size:
        0.61rem;

    font-weight:
        900;

}


.tv-guide-channel-filter-logo img {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

}


/* =========================================================
   MAIN GUIDE
========================================================= */

.tv-guide-section {

    width:
        100%;

    margin:
        0;

    padding:
        21px;

}


.tv-guide-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        16px;

    margin-bottom:
        16px;

}


.tv-guide-label {

    display:
        inline-block;

    margin-bottom:
        4px;

    color:
        var(--primary);

    font-size:
        0.68rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;

}


.tv-guide-header h2 {

    margin:
        0 0 4px;

    font-size:
        clamp(
            1.3rem,
            3vw,
            1.75rem
        );

}


.tv-guide-header p {

    margin:
        0;

    color:
        var(--text-soft);

    font-size:
        0.82rem;

    line-height:
        1.45;

}


.tv-guide-count {

    flex:
        0 0 auto;

    padding:
        6px 9px;

    background:
        #f1f5f9;

    border-radius:
        999px;

    color:
        #475569;

    font-size:
        0.69rem;

    font-weight:
        800;

    white-space:
        nowrap;

}


/* =========================================================
   GUIDE GRID
========================================================= */

.tv-guide-grid {

    display:
        grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(
                250px,
                1fr
            )
        );

    gap:
        13px;

}


/* =========================================================
   GUIDE CARD
========================================================= */

.tv-guide-card {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    overflow:
        hidden;

    background:
        #ffffff;

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

    box-shadow:
        0 4px 13px
        rgba(
            15,
            23,
            42,
            0.04
        );

    transition:
        0.18s ease;

}


.tv-guide-card:hover {

    transform:
        translateY(-2px);

    border-color:
        #c7d2fe;

    box-shadow:
        0 11px 24px
        rgba(
            15,
            23,
            42,
            0.08
        );

}


/* =========================================================
   CHANNEL HEADER
========================================================= */

.tv-guide-channel-header {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        13px;

    background:

        linear-gradient(
            180deg,
            #ffffff,
            #fbfdff
        );

    border-bottom:
        1px solid
        #f1f5f9;

}


.tv-guide-channel-logo {

    width:
        41px;

    height:
        41px;

    flex:
        0 0 41px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:
        #f8fafc;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    color:
        var(--primary);

    font-weight:
        900;

}


.tv-guide-channel-logo img {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

}


.tv-guide-channel-info {

    min-width:
        0;

}


.tv-guide-channel-name {

    margin:
        0;

    overflow:
        hidden;

    color:
        var(--text);

    font-size:
        0.88rem;

    font-weight:
        850;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

}


.tv-guide-status {

    margin-top:
        3px;

    color:
        var(--text-soft);

    font-size:
        0.68rem;

}


/* =========================================================
   PROGRAMMES
========================================================= */

.tv-guide-programmes {

    display:
        flex;

    flex:
        1;

    flex-direction:
        column;

    gap:
        11px;

    padding:
        13px;

}


.tv-guide-programme + .tv-guide-programme {

    padding-top:
        11px;

    border-top:
        1px solid
        #f1f5f9;

}


.tv-guide-programme-label {

    display:
        inline-flex;

    margin-bottom:
        4px;

    font-size:
        0.63rem;

    font-weight:
        900;

}


.tv-guide-programme-label.now {

    color:
        var(--red);

}


.tv-guide-programme-label.next {

    color:
        var(--primary);

}


.tv-guide-programme-title {

    margin:
        0 0 4px;

    font-size:
        0.84rem;

    font-weight:
        800;

    line-height:
        1.38;

}


.tv-guide-programme-time {

    color:
        var(--text-soft);

    font-size:
        0.69rem;

}


/* =========================================================
   CARD BUTTONS
========================================================= */

.tv-guide-actions {

    padding:
        0 13px 13px;

}


.tv-guide-watch,
.tv-guide-schedule-btn {

    width:
        100%;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        9px;

    font-size:
        0.74rem;

    font-weight:
        850;

    cursor:
        pointer;

}


.tv-guide-schedule-btn {

    margin-bottom:
        6px;

    padding:
        8px 11px;

    background:
        #f8fafc;

    border:
        1px solid
        #dbe2ea;

    color:
        #374151;

}


.tv-guide-schedule-btn:hover {

    background:
        var(--primary-soft);

    color:
        var(--primary-dark);

}


.tv-guide-watch {

    padding:
        9px 12px;

    background:

        linear-gradient(
            135deg,
            #111827,
            #334155
        );

    border:
        0;

    color:
        #ffffff;

    text-decoration:
        none;

}


.tv-guide-watch:hover {

    background:

        linear-gradient(
            135deg,
            var(--primary),
            #6366f1
        );

}


/* =========================================================
   EXPANDED SCHEDULE
========================================================= */

.tv-guide-full-schedule {

    padding:
        0 13px 13px;

    background:
        #fafcff;

    border-top:
        1px solid
        #f1f5f9;

}


.tv-guide-schedule-row {

    display:
        grid;

    grid-template-columns:
        65px
        minmax(
            0,
            1fr
        );

    gap:
        9px;

    align-items:
        center;

    padding:
        9px 0;

    border-bottom:
        1px solid
        #e5e7eb;

}


.tv-guide-schedule-row:last-child {

    border-bottom:
        0;

}


.tv-guide-schedule-time {

    color:
        var(--text-soft);

    font-size:
        0.69rem;

}


.tv-guide-schedule-title {

    font-size:
        0.76rem;

    line-height:
        1.4;

}


.tv-guide-schedule-now {

    display:
        inline-block;

    margin-top:
        3px;

    color:
        var(--red);

    font-size:
        0.6rem;

    font-weight:
        900;

}


/* =========================================================
   EMPTY STATE
========================================================= */

.tv-guide-empty,
.tv-guide-search-empty {

    grid-column:
        1 / -1;

    padding:
        28px 16px;

    background:
        var(--surface-soft);

    border:
        1px dashed
        var(--border-strong);

    border-radius:
        13px;

    color:
        var(--text-soft);

    text-align:
        center;

}


/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 1000px
) {

    .tv-guide-featured-grid {

        grid-template-columns:

            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 700px
) {

    .guide-shell {

        width:
            calc(
                100% - 18px
            );

        padding:
            12px 0 28px;

    }


    /* HERO */

    .guide-header {

        align-items:
            flex-start;

        gap:
            10px;

        padding:
            19px 16px;

        border-radius:
            18px;

    }


    .guide-header h1 {

        font-size:
            1.6rem;

    }


    .guide-header p {

        font-size:
            0.79rem;

    }


    .guide-header-badge {

        padding:
            5px 7px;

        font-size:
            0.61rem;

    }


    /* CONTROLS STAY SIDE-BY-SIDE */

    .guide-controls {

        padding:
            11px;

    }


    .guide-controls-top {

        grid-template-columns:
            minmax(
                120px,
                0.38fr
            )
            minmax(
                0,
                1fr
            );

        gap:
            7px;

    }


    .tv-guide-country {

        min-width:
            0;

        min-height:
            43px;

        padding:
            4px;

    }


    .tv-guide-country-label {

        display:
            none;

    }


    .tv-guide-country-select {

        min-width:
            0;

        padding:
            8px 22px 8px 7px;

        font-size:
            0.69rem;

    }


    .tv-guide-search-box {

        min-height:
            43px;

    }


    #tvGuideSearchInput {

        padding:
            9px 36px 9px 6px;

        font-size:
            0.74rem;

    }


    .tv-guide-search-icon {

        padding-left:
            8px;

        font-size:
            0.75rem;

    }


    /* SEARCH RESULTS */

    .tv-guide-search-results {

        grid-template-columns:

            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            7px;

    }


    /* FEATURED BECOMES HORIZONTAL */

    .tv-guide-featured {

        margin-bottom:
            13px;

        padding:
            15px 12px;

        border-radius:
            17px;

    }


    .tv-guide-featured-header {

        align-items:
            flex-start;

        gap:
            8px;

        margin-bottom:
            12px;

    }


    .tv-guide-featured-header h2 {

        font-size:
            1.16rem;

    }


    .tv-guide-featured-header p {

        max-width:
            275px;

        font-size:
            0.72rem;

    }


    .tv-guide-featured-count {

        padding:
            5px 7px;

        font-size:
            0.59rem;

    }


    .tv-guide-featured-grid {

        display:
            flex;

        gap:
            9px;

        overflow-x:
            auto;

        overflow-y:
            hidden;

        padding-bottom:
            6px;

        scroll-snap-type:
            x proximity;

        -webkit-overflow-scrolling:
            touch;

    }


    .tv-guide-featured-card {

        flex:
            0 0
            min(
                77vw,
                265px
            );

        min-height:
            245px;

        scroll-snap-align:
            start;

    }


    .tv-guide-featured-card:hover {

        transform:
            none;

    }


    /* FILTERS */

    .guide-filter-panel {

        margin-bottom:
            13px;

        padding:
            12px;

    }


    .guide-filter-heading {

        align-items:
            flex-start;

        margin-bottom:
            6px;

    }


    .guide-filter-heading h2 {

        font-size:
            0.92rem;

    }


    .guide-filter-heading p {

        max-width:
            170px;

        font-size:
            0.65rem;

        text-align:
            right;

    }


    .tv-guide-category-btn {

        padding:
            7px 9px;

        font-size:
            0.7rem;

    }


    .tv-guide-time-btn {

        padding:
            7px 9px;

        font-size:
            0.69rem;

    }


    .tv-guide-channel-filter-btn {

        padding:
            6px 8px;

        font-size:
            0.65rem;

    }


    /* MAIN GUIDE */

    .tv-guide-section {

        padding:
            13px;

        border-radius:
            16px;

    }


    .tv-guide-header {

        align-items:
            flex-start;

        gap:
            8px;

        margin-bottom:
            12px;

    }


    .tv-guide-header h2 {

        font-size:
            1.14rem;

    }


    .tv-guide-header p {

        max-width:
            275px;

        font-size:
            0.7rem;

    }


    .tv-guide-count {

        padding:
            5px 7px;

        font-size:
            0.6rem;

    }


    /* KEEP TWO GUIDE CARDS PER ROW */

    .tv-guide-grid {

        grid-template-columns:

            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            7px;

    }


    .tv-guide-card {

        border-radius:
            11px;

    }


    .tv-guide-channel-header {

        gap:
            6px;

        padding:
            9px;

    }


    .tv-guide-channel-logo {

        width:
            32px;

        height:
            32px;

        flex-basis:
            32px;

        border-radius:
            8px;

    }


    .tv-guide-channel-name {

        font-size:
            0.74rem;

    }


    .tv-guide-status {

        font-size:
            0.59rem;

    }


    .tv-guide-programmes {

        gap:
            8px;

        padding:
            9px;

    }


    .tv-guide-programme-title {

        font-size:
            0.7rem;

    }


    .tv-guide-programme-time {

        font-size:
            0.6rem;

    }


    .tv-guide-actions {

        padding:
            0 9px 9px;

    }


    .tv-guide-watch,
    .tv-guide-schedule-btn {

        font-size:
            0.64rem;

    }


    .tv-guide-watch {

        padding:
            8px 5px;

    }


    .tv-guide-schedule-btn {

        padding:
            7px 5px;

    }


    .tv-guide-full-schedule {

        padding:
            0 8px 9px;

    }


    .tv-guide-schedule-row {

        grid-template-columns:
            49px
            minmax(
                0,
                1fr
            );

        gap:
            5px;

    }


    .tv-guide-schedule-time {

        font-size:
            0.59rem;

    }


    .tv-guide-schedule-title {

        font-size:
            0.64rem;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (
    max-width: 400px
) {

    .guide-shell {

        width:
            calc(
                100% - 12px
            );

    }


    .guide-header {

        padding:
            16px 13px;

    }


    .guide-header-badge {

        display:
            none;

    }


    .guide-controls-top {

        grid-template-columns:
            105px
            minmax(
                0,
                1fr
            );

    }


    .tv-guide-featured-header p {

        display:
            none;

    }


    .tv-guide-featured-card {

        flex-basis:
            84vw;

    }


    .guide-filter-heading p {

        display:
            none;

    }

}

/* =========================================================
   SEO INTRO
========================================================= */

.guide-seo-intro {

    margin:
        -4px 0 16px;

    padding:
        0 4px;

}


.guide-seo-intro p {

    max-width:
        880px;

    margin:
        0;

    color:
        #64748b;

    font-size:
        0.82rem;

    line-height:
        1.6;

}


@media (
    max-width: 700px
) {

    .guide-seo-intro {

        margin:
            0 3px 12px;

    }


    .guide-seo-intro p {

        font-size:
            0.72rem;

        line-height:
            1.5;

    }

}


/* =========================================================
   ABABIOTV MAIN NAVIGATION
========================================================= */

.tv-main-nav {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    margin-bottom:
        16px;

    padding:
        11px 14px;

    background:
        rgba(
            255,
            255,
            255,
            0.94
        );

    border:
        1px solid
        var(--border);

    border-radius:
        16px;

    box-shadow:
        var(--shadow-sm);

}


/* =========================================================
   BRAND
========================================================= */

.tv-main-nav-brand {

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    white-space:
        nowrap;

}


.tv-main-nav-logo {

    color:
        var(--primary);

    font-size:
        0.88rem;

    font-weight:
        900;

    text-decoration:
        none;

}


.tv-main-nav-logo:hover {

    color:
        var(--primary-dark);

}


.tv-main-nav-divider {

    color:
        #cbd5e1;

}


.tv-main-nav-product {

    color:
        #475569;

    font-size:
        0.78rem;

    font-weight:
        800;

}


/* =========================================================
   LINKS
========================================================= */

.tv-main-nav-links {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        6px;

    min-width:
        0;

    overflow-x:
        auto;

    overflow-y:
        hidden;

    padding-bottom:
        2px;

    scrollbar-width:
        thin;

    -webkit-overflow-scrolling:
        touch;

}


.tv-main-nav-link {

    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        34px;

    padding:
        7px 10px;

    border:
        1px solid
        transparent;

    border-radius:
        9px;

    color:
        #475569;

    font-size:
        0.72rem;

    font-weight:
        750;

    text-decoration:
        none;

    white-space:
        nowrap;

    transition:
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease;

}


.tv-main-nav-link:hover {

    background:
        #f8fafc;

    border-color:
        #e2e8f0;

    color:
        var(--primary-dark);

}


.tv-main-nav-link.active {

    background:
        var(--primary-soft);

    border-color:
        #dcdcff;

    color:
        var(--primary-dark);

}


/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 900px
) {

    .tv-main-nav {

        gap:
            10px;

    }


    .tv-main-nav-product {

        display:
            none;

    }


    .tv-main-nav-divider {

        display:
            none;

    }


    .tv-main-nav-link {

        padding:
            7px 9px;

        font-size:
            0.69rem;

    }

}


/* =========================================================
   MOBILE
   DO NOT STACK NAVIGATION
========================================================= */

@media (
    max-width: 700px
) {

    .tv-main-nav {

        display:
            grid;

        grid-template-columns:
            auto
            minmax(
                0,
                1fr
            );

        gap:
            8px;

        margin-bottom:
            10px;

        padding:
            8px;

        border-radius:
            13px;

    }


    .tv-main-nav-brand {

        padding-left:
            3px;

    }


    .tv-main-nav-logo {

        font-size:
            0.76rem;

    }


    .tv-main-nav-links {

        justify-content:
            flex-start;

        gap:
            5px;

        padding-bottom:
            3px;

    }


    .tv-main-nav-link {

        min-height:
            31px;

        padding:
            6px 8px;

        border-radius:
            8px;

        font-size:
            0.64rem;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (
    max-width: 410px
) {

    .tv-main-nav {

        grid-template-columns:
            82px
            minmax(
                0,
                1fr
            );

    }


    .tv-main-nav-logo {

        font-size:
            0.7rem;

    }


    .tv-main-nav-link {

        padding:
            6px 7px;

        font-size:
            0.61rem;

    }

}


/* =========================================================
   GUIDE BREADCRUMBS
========================================================= */

.guide-breadcrumbs {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin:
        0 4px 12px;

    overflow-x:
        auto;

    color:
        #64748b;

    font-size:
        0.75rem;

    white-space:
        nowrap;

    scrollbar-width:
        none;

}


.guide-breadcrumbs::-webkit-scrollbar {

    display:
        none;

}


.guide-breadcrumbs a {

    color:
        #4f46e5;

    font-weight:
        700;

    text-decoration:
        none;

}


.guide-breadcrumbs a:hover {

    color:
        #4338ca;

    text-decoration:
        underline;

}


.guide-breadcrumbs span[aria-hidden="true"] {

    color:
        #cbd5e1;

    font-size:
        0.9rem;

}


.guide-breadcrumbs span[aria-current="page"] {

    color:
        #475569;

    font-weight:
        700;

}


/* =========================================================
   MOBILE BREADCRUMBS
========================================================= */

@media (
    max-width: 700px
) {

    .guide-breadcrumbs {

        gap:
            5px;

        margin:
            0 3px 9px;

        font-size:
            0.67rem;

    }


    .guide-breadcrumbs span[aria-hidden="true"] {

        font-size:
            0.78rem;

    }

}

/* =========================================================
   ABOUT TV GUIDE
========================================================= */

.guide-about {

    margin-top:
        20px;

    padding:
        24px;

    background:
        rgba(
            255,
            255,
            255,
            0.94
        );

    border:
        1px solid
        var(--border);

    border-radius:
        20px;

    box-shadow:
        var(--shadow-sm);

}


.guide-about-header {

    max-width:
        760px;

    margin-bottom:
        20px;

}


.guide-about-label {

    display:
        inline-block;

    margin-bottom:
        5px;

    color:
        var(--cyan);

    font-size:
        0.68rem;

    font-weight:
        900;

    letter-spacing:
        0.09em;

}


.guide-about-header h2 {

    margin:
        0 0 7px;

    color:
        var(--text);

    font-size:
        clamp(
            1.25rem,
            3vw,
            1.65rem
        );

}


.guide-about-header p {

    margin:
        0;

    color:
        var(--text-soft);

    font-size:
        0.84rem;

    line-height:
        1.6;

}


/* =========================================================
   ABOUT CARDS
========================================================= */

.guide-about-grid {

    display:
        grid;

    grid-template-columns:

        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap:
        12px;

}


.guide-about-card {

    padding:
        16px;

    background:
        var(--surface-soft);

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

}


.guide-about-icon {

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        10px;

    background:
        var(--primary-soft);

    border-radius:
        10px;

    font-size:
        1rem;

}


.guide-about-card:nth-child(2)
.guide-about-icon {

    background:
        #fff7ed;

}


.guide-about-card:nth-child(3)
.guide-about-icon {

    background:
        #ecfeff;

}


.guide-about-card:nth-child(4)
.guide-about-icon {

    background:
        #ecfdf5;

}


.guide-about-card h3 {

    margin:
        0 0 6px;

    color:
        var(--text);

    font-size:
        0.88rem;

    font-weight:
        850;

}


.guide-about-card p {

    margin:
        0;

    color:
        var(--text-soft);

    font-size:
        0.75rem;

    line-height:
        1.55;

}


/* =========================================================
   ABOUT TABLET
========================================================= */

@media (
    max-width: 900px
) {

    .guide-about-grid {

        grid-template-columns:

            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }

}


/* =========================================================
   ABOUT MOBILE
========================================================= */

@media (
    max-width: 600px
) {

    .guide-about {

        margin-top:
            13px;

        padding:
            15px;

        border-radius:
            16px;

    }


    .guide-about-header {

        margin-bottom:
            13px;

    }


    .guide-about-header h2 {

        font-size:
            1.12rem;

    }


    .guide-about-header p {

        font-size:
            0.74rem;

    }


    /*
       Keep useful information compact on mobile.
       Two columns instead of four large vertical cards.
    */

    .guide-about-grid {

        grid-template-columns:

            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            7px;

    }


    .guide-about-card {

        padding:
            11px;

        border-radius:
            11px;

    }


    .guide-about-icon {

        width:
            31px;

        height:
            31px;

        margin-bottom:
            7px;

        font-size:
            0.82rem;

    }


    .guide-about-card h3 {

        font-size:
            0.74rem;

    }


    .guide-about-card p {

        font-size:
            0.65rem;

        line-height:
            1.45;

    }

}

/* =========================================================
   TV GUIDE FAQ
========================================================= */

.guide-faq {

    margin-top:
        20px;

    padding:
        24px;

    background:
        rgba(
            255,
            255,
            255,
            0.94
        );

    border:
        1px solid
        var(--border);

    border-radius:
        20px;

    box-shadow:
        var(--shadow-sm);

}


.guide-faq-header {

    max-width:
        760px;

    margin-bottom:
        18px;

}


.guide-faq-label {

    display:
        inline-block;

    margin-bottom:
        5px;

    color:
        var(--primary);

    font-size:
        0.68rem;

    font-weight:
        900;

    letter-spacing:
        0.09em;

}


.guide-faq-header h2 {

    margin:
        0 0 7px;

    color:
        var(--text);

    font-size:
        clamp(
            1.25rem,
            3vw,
            1.65rem
        );

}


.guide-faq-header p {

    margin:
        0;

    color:
        var(--text-soft);

    font-size:
        0.84rem;

    line-height:
        1.6;

}


/* =========================================================
   FAQ LIST
========================================================= */

.guide-faq-list {

    display:
        grid;

    gap:
        9px;

}


.guide-faq-item {

    overflow:
        hidden;

    background:
        var(--surface-soft);

    border:
        1px solid
        var(--border);

    border-radius:
        12px;

}


.guide-faq-item summary {

    position:
        relative;

    padding:
        14px 42px 14px 15px;

    color:
        var(--text);

    font-size:
        0.82rem;

    font-weight:
        800;

    line-height:
        1.4;

    cursor:
        pointer;

    list-style:
        none;

}


.guide-faq-item summary::-webkit-details-marker {

    display:
        none;

}


.guide-faq-item summary::after {

    content:
        "+";

    position:
        absolute;

    right:
        15px;

    top:
        50%;

    transform:
        translateY(-50%);

    width:
        24px;

    height:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--primary-soft);

    border-radius:
        50%;

    color:
        var(--primary);

    font-size:
        1rem;

    font-weight:
        800;

}


.guide-faq-item[open]
summary::after {

    content:
        "−";

    background:
        var(--primary);

    color:
        #ffffff;

}


.guide-faq-item[open]
summary {

    color:
        var(--primary-dark);

}


.guide-faq-answer {

    padding:
        0 15px 15px;

}


.guide-faq-answer p {

    margin:
        0;

    color:
        var(--text-soft);

    font-size:
        0.77rem;

    line-height:
        1.6;

}


/* =========================================================
   FAQ MOBILE
========================================================= */

@media (
    max-width: 600px
) {

    .guide-faq {

        margin-top:
            13px;

        padding:
            15px;

        border-radius:
            16px;

    }


    .guide-faq-header {

        margin-bottom:
            13px;

    }


    .guide-faq-header h2 {

        font-size:
            1.1rem;

    }


    .guide-faq-header p {

        font-size:
            0.72rem;

    }


    .guide-faq-list {

        gap:
            7px;

    }


    .guide-faq-item summary {

        padding:
            12px 38px 12px 12px;

        font-size:
            0.73rem;

    }


    .guide-faq-item summary::after {

        right:
            11px;

        width:
            22px;

        height:
            22px;

        font-size:
            0.9rem;

    }


    .guide-faq-answer {

        padding:
            0 12px 12px;

    }


    .guide-faq-answer p {

        font-size:
            0.68rem;

        line-height:
            1.5;

    }

}


/* =========================================================
   GLOBAL SEARCH
========================================================= */

.global-channel-search {

    margin-top: 18px;

    padding: 20px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8faff 100%
        );

    border:
        1px solid
        var(--border);

    border-radius:
        18px;

    box-shadow:
        var(--shadow-sm);

    overflow:
        hidden;
}


/* =========================================================
   HEADER
========================================================= */

.global-channel-search-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        16px;

    margin-bottom:
        14px;
}


.global-channel-search-label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    margin-bottom:
        5px;

    color:
        var(--primary);

    font-size:
        0.68rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.global-channel-search-header h2 {

    margin:
        0 0 5px;

    color:
        var(--text);

    font-size:
        clamp(
            1rem,
            2vw,
            1.18rem
        );

    line-height:
        1.25;
}


.global-channel-search-header p {

    max-width:
        700px;

    margin:
        0;

    color:
        var(--text-soft);

    font-size:
        0.78rem;

    line-height:
        1.55;
}


/* =========================================================
   SEARCH INPUT
========================================================= */

.global-channel-search-box {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    box-sizing:
        border-box;

    padding:
        0 12px;

    background:
        #ffffff;

    border:
        1px solid
        #dbe2ea;

    border-radius:
        12px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.global-channel-search-box:focus-within {

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(
            79,
            70,
            229,
            0.10
        );
}


.global-channel-search-icon {

    flex:
        0 0 auto;

    font-size:
        0.9rem;
}


#globalChannelSearchInput {

    width:
        100%;

    min-width:
        0;

    padding:
        12px 0;

    background:
        transparent;

    border:
        0;

    outline:
        0;

    color:
        var(--text);

    font-size:
        0.82rem;
}


#globalChannelSearchInput::placeholder {

    color:
        #94a3b8;
}


.global-channel-search-clear {

    width:
        30px;

    height:
        30px;

    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    background:
        transparent;

    border:
        0;

    border-radius:
        50%;

    color:
        #64748b;

    cursor:
        pointer;
}


.global-channel-search-clear:hover {

    background:
        #f1f5f9;

    color:
        #111827;
}


/* =========================================================
   STATUS
========================================================= */

.global-channel-search-status {

    min-height:
        18px;

    margin-top:
        8px;

    color:
        var(--text-soft);

    font-size:
        0.7rem;

    font-weight:
        650;
}


/* =========================================================
   OUTER RESULTS WRAPPER

   Important:
   this now contains programme + channel sections.
========================================================= */

.global-channel-search-results {

    display:
        block;

    width:
        100%;

    min-width:
        0;

    margin-top:
        12px;
}


/* =========================================================
   RESULT SECTION
========================================================= */

.global-search-result-section {

    min-width:
        0;

    margin-top:
        18px;
}


.global-search-result-section:first-child {

    margin-top:
        0;
}


.global-search-result-heading {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        10px;

    padding-bottom:
        8px;

    border-bottom:
        1px solid
        var(--border);
}


.global-search-result-heading span {

    color:
        var(--text);

    font-size:
        0.76rem;

    font-weight:
        900;

    letter-spacing:
        0.04em;
}


.global-search-result-heading strong {

    flex:
        0 0 auto;

    min-width:
        28px;

    padding:
        4px 8px;

    text-align:
        center;

    background:
        #eef2ff;

    border-radius:
        999px;

    color:
        #4338ca;

    font-size:
        0.68rem;

    font-weight:
        900;
}


/* =========================================================
   PROGRAMME RESULTS
========================================================= */

.global-search-programmes {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        12px;
}


.global-search-programme-card {

    min-width:
        0;

    height:
        100%;

    box-sizing:
        border-box;
}


.global-search-programme-channel {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        6px;
}


.global-search-programme-channel img {

    width:
        24px;

    height:
        24px;

    flex:
        0 0 auto;

    object-fit:
        contain;

    border-radius:
        6px;

    background:
        #f8fafc;
}


.global-search-programme-channel > span:not(
    .global-search-country-badge
) {

    min-width:
        0;

    overflow:
        hidden;

    color:
        var(--text);

    font-size:
        0.72rem;

    font-weight:
        800;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.global-search-programme-category {

    display:
        inline-flex;

    width:
        fit-content;

    margin-bottom:
        8px;

    padding:
        4px 7px;

    background:
        #f1f5f9;

    border-radius:
        999px;

    color:
        #475569;

    font-size:
        0.66rem;

    font-weight:
        750;
}


/* =========================================================
   COUNTRY BADGE
========================================================= */

.global-search-country-badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        4px;

    max-width:
        100%;

    padding:
        4px 8px;

    border:
        1px solid
        #c7d2fe;

    border-radius:
        999px;

    background:
        #eef2ff;

    color:
        #4338ca;

    font-size:
        0.68rem;

    font-weight:
        750;

    line-height:
        1;

    white-space:
        nowrap;
}


/* =========================================================
   WORLDWIDE CHANNEL RESULTS
========================================================= */

.global-channel-search-results-inner {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                230px,
                1fr
            )
        );

    gap:
        10px;

    min-width:
        0;
}


.global-channel-card {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    box-sizing:
        border-box;

    padding:
        12px;

    background:
        #ffffff;

    border:
        1px solid
        var(--border);

    border-radius:
        12px;
}


.global-channel-logo {

    width:
        42px;

    height:
        42px;

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:
        var(--surface-soft);

    border-radius:
        10px;

    font-size:
        0.85rem;

    font-weight:
        900;
}


.global-channel-logo img {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;
}


.global-channel-info {

    min-width:
        0;

    flex:
        1;
}


.global-channel-name {

    margin:
        0 0 3px;

    overflow:
        hidden;

    color:
        var(--text);

    font-size:
        0.78rem;

    font-weight:
        800;

    line-height:
        1.35;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.global-channel-meta {

    overflow:
        hidden;

    color:
        var(--text-soft);

    font-size:
        0.64rem;

    line-height:
        1.35;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.global-channel-watch {

    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        32px;

    padding:
        7px 10px;

    background:
        var(--primary);

    border-radius:
        8px;

    color:
        #ffffff;

    font-size:
        0.65rem;

    font-weight:
        800;

    text-decoration:
        none;

    white-space:
        nowrap;
}


/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 1000px
) {

    .global-search-programmes {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .global-channel-search-results-inner {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 700px
) {

    .global-channel-search {

        margin-top:
            14px;

        padding:
            14px;

        border-radius:
            15px;
    }


    .global-channel-search-header {

        margin-bottom:
            11px;
    }


    .global-channel-search-header h2 {

        font-size:
            1rem;
    }


    .global-channel-search-header p {

        font-size:
            0.72rem;
    }


    #globalChannelSearchInput {

        padding:
            11px 0;

        font-size:
            0.76rem;
    }


    .global-search-result-heading {

        margin-bottom:
            8px;
    }



    /* =====================================================
       PROGRAMMES

       Keep two columns on normal phones.
    ===================================================== */

    .global-search-programmes {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            8px;
    }


    .global-search-programme-card {

        padding:
            10px;
    }


    .global-search-programme-channel {

        gap:
            5px;
    }


    .global-search-programme-channel img {

        width:
            21px;

        height:
            21px;
    }


    .global-search-country-badge {

        padding:
            3px 6px;

        font-size:
            0.6rem;
    }



    /* =====================================================
       WORLDWIDE CHANNELS

       Horizontal swipe rail on mobile.
    ===================================================== */

    .global-channel-search-results-inner {

        display:
            flex;

        gap:
            8px;

        overflow-x:
            auto;

        overflow-y:
            hidden;

        padding-bottom:
            8px;

        scroll-snap-type:
            x proximity;

        scrollbar-width:
            thin;

        -webkit-overflow-scrolling:
            touch;
    }


    .global-channel-card {

        flex:
            0 0
            min(
                78vw,
                270px
            );

        scroll-snap-align:
            start;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (
    max-width: 430px
) {

    .global-channel-search {

        padding:
            12px;
    }


    .global-channel-search-label {

        font-size:
            0.62rem;
    }


    .global-channel-search-header h2 {

        font-size:
            0.94rem;
    }


    .global-channel-search-header p {

        font-size:
            0.68rem;
    }


    .global-search-programmes {

        gap:
            7px;
    }


    .global-search-programme-card {

        padding:
            9px;
    }


    .global-search-country-badge {

        max-width:
            100%;

        overflow:
            hidden;

        text-overflow:
            ellipsis;
    }


    .global-channel-card {

        flex-basis:
            min(
                84vw,
                255px
            );
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (
    max-width: 350px
) {

    .global-search-programmes {

        grid-template-columns:
            1fr;
    }


    .global-channel-card {

        flex-basis:
            88vw;
    }

}