/* Space Gate Nova+ — catalog reference header
   Keeps the original catalog filtering behavior while applying the same
   compact button language used by the channel guide. */
:root {
    --nova-catalog-header-h: calc(174px + var(--safe-top, 0px));
    --nova-catalog-page-pad: clamp(18px, 3.1vw, 54px);
    --nova-catalog-control-h: 38px;
    --nova-catalog-chip-h: 35px;
    --nova-catalog-line: rgba(132, 145, 176, .20);
    --nova-catalog-active-border: linear-gradient(100deg, #f04ad8 0%, #9b4dff 48%, #14d7ff 100%);
}

.nova-catalog-page {
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: calc(var(--nova-catalog-header-h) + 15px) var(--nova-catalog-page-pad)
        calc(var(--bottom-nav-h, 78px) + var(--safe-bottom, 0px) + 26px) !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    background:
        radial-gradient(circle at 50% -14%, rgba(92, 49, 190, .075), transparent 32%),
        #000 !important;
}

.nova-catalog-fixed-header {
    position: fixed !important;
    z-index: 925 !important;
    inset: 0 0 auto !important;
    width: 100% !important;
    height: var(--nova-catalog-header-h) !important;
    margin: 0 !important;
    padding: var(--safe-top, 0px) var(--nova-catalog-page-pad) 8px !important;
    display: grid !important;
    grid-template-rows: 72px 54px 44px !important;
    grid-template-areas:
        "hero"
        "controls"
        "genres" !important;
    align-content: start !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background:
        radial-gradient(ellipse 43% 116% at 50% -12%, rgba(102, 51, 215, .20), transparent 62%),
        radial-gradient(ellipse 27% 100% at 9% 8%, rgba(27, 109, 239, .08), transparent 66%),
        linear-gradient(180deg, rgba(3, 5, 12, .998) 0%, rgba(2, 4, 9, .996) 78%, rgba(0, 0, 0, .996) 100%) !important;
    border-bottom: 1px solid rgba(145, 156, 186, .14) !important;
    box-shadow: 0 15px 38px rgba(0, 0, 0, .52) !important;
    backdrop-filter: blur(20px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.08) !important;
    transform: none !important;
    contain: none !important;
}

.nova-catalog-fixed-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    opacity: .44;
    background:
        radial-gradient(circle at 22% 24%, rgba(255, 255, 255, .24) 0 1px, transparent 2px),
        radial-gradient(circle at 39% 47%, rgba(133, 69, 255, .22) 0 1px, transparent 2px),
        radial-gradient(circle at 61% 18%, rgba(255, 255, 255, .20) 0 1px, transparent 2px),
        radial-gradient(circle at 79% 38%, rgba(70, 143, 255, .21) 0 1px, transparent 2px);
    background-size: 260px 170px, 190px 132px, 300px 190px, 220px 150px;
}

/* Header identity row ----------------------------------------------------- */
.nova-catalog-hero-row {
    grid-area: hero;
    min-width: 0;
    height: 72px;
    display: grid;
    grid-template-columns: minmax(110px, 1fr) minmax(250px, 1.25fr) minmax(310px, 1fr);
    grid-template-areas: "back title cluster";
    align-items: center;
    gap: clamp(12px, 2vw, 28px);
    direction: ltr;
}

.nova-catalog-back {
    grid-area: back;
    justify-self: start;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--nova-catalog-line);
    border-radius: 50%;
    background: rgba(4, 7, 14, .82);
    color: rgba(255, 255, 255, .90);
    cursor: pointer;
}

.nova-catalog-heading-copy {
    grid-area: title;
    min-width: 0;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 5px;
    direction: rtl;
    text-align: center;
}

.nova-catalog-heading-copy h1 {
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: clamp(1.48rem, 2.25vw, 2.12rem);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -.035em;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: linear-gradient(95deg, #f0e9ff 7%, #c465ff 49%, #65bfff 93%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nova-catalog-heading-copy p {
    max-width: min(540px, 100%);
    margin: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, .46);
    font-size: clamp(.69rem, .92vw, .84rem);
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.nova-catalog-header-cluster {
    grid-area: cluster;
    justify-self: end;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    direction: ltr;
}

.nova-catalog-brand {
    flex: 0 0 auto;
    width: clamp(150px, 12.2vw, 198px);
    height: 54px;
    padding: 0;
    display: grid;
    place-items: center end;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.nova-catalog-brand img {
    width: 100%;
    height: 51px;
    display: block;
    object-fit: contain;
    object-position: right center;
}

.nova-catalog-actions {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    direction: ltr;
}

.nova-catalog-icon,
.nova-catalog-back,
.nova-catalog-brand {
    font: inherit;
    color: #f7f8fb;
}

.nova-catalog-icon {
    position: relative;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: rgba(255, 255, 255, .88);
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, transform .16s ease, color .16s ease;
}

.nova-catalog-icon:hover,
.nova-catalog-icon.active,
.nova-catalog-back:hover {
    color: #fff;
    border-color: rgba(105, 153, 255, .28);
    background: rgba(117, 68, 235, .12);
}

.nova-catalog-icon:active,
.nova-catalog-back:active { transform: scale(.96); }
.nova-catalog-mobile-search-toggle { display: none; }

.nova-catalog-notification i {
    position: absolute;
    top: 5px;
    right: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c331ff;
    box-shadow: 0 0 0 3px rgba(195, 49, 255, .14);
}

/* Search and old catalog filters ---------------------------------------- */
.nova-catalog-controls-row {
    grid-area: controls;
    min-width: 0;
    height: 54px;
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    align-items: center;
    gap: 12px;
    direction: ltr;
}

.nova-catalog-search {
    min-width: 0;
    width: 100%;
    height: 43px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(157, 168, 197, .29) !important;
    border-radius: 10px !important;
    background: linear-gradient(90deg, rgba(17, 22, 37, .86), rgba(7, 10, 18, .94)) !important;
    color: rgba(255, 255, 255, .65) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
    box-sizing: border-box;
    direction: ltr;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.nova-catalog-search:focus-within {
    border-color: rgba(78, 166, 255, .72) !important;
    background: rgba(9, 13, 23, .99) !important;
    box-shadow: 0 0 0 3px rgba(105, 72, 255, .10) !important;
}

.nova-catalog-search input {
    min-width: 0;
    flex: 1;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #fff !important;
    direction: rtl;
    text-align: right;
    font-size: .86rem;
}

.nova-catalog-search input::placeholder { color: rgba(255, 255, 255, .39); }

.nova-catalog-search > button {
    width: 27px;
    height: 27px;
    min-width: 27px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 7px;
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .72);
}

.nova-catalog-filter-strip {
    min-width: 0;
    max-width: 100%;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    direction: rtl;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
}

.nova-catalog-filter-strip::-webkit-scrollbar { display: none; }

.nova-catalog-select-card,
.nova-catalog-reset-filter {
    position: relative;
    flex: 0 0 auto;
    height: var(--nova-catalog-control-h);
    min-height: var(--nova-catalog-control-h);
    border: 1px solid var(--nova-catalog-line) !important;
    border-radius: 8px !important;
    background: rgba(4, 7, 13, .92) !important;
    color: rgba(255, 255, 255, .72) !important;
    box-sizing: border-box;
}

.nova-catalog-select-card {
    min-width: 118px;
    max-width: 178px;
    padding: 0 10px;
    display: grid;
    grid-template-columns: 18px auto minmax(38px, auto) 14px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    direction: rtl;
}

.nova-catalog-select-card > span {
    color: rgba(255, 255, 255, .42);
    font-size: .66rem;
    font-weight: 650;
    white-space: nowrap;
}

.nova-catalog-select-card > strong {
    min-width: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, .82);
    font-size: .73rem;
    font-weight: 760;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.nova-catalog-select-card > svg:first-child { color: rgba(255, 255, 255, .60); }
.nova-catalog-select-card > svg:nth-last-child(2) { color: rgba(255, 255, 255, .45); }

.nova-catalog-select-card select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.nova-catalog-select-card:hover,
.nova-catalog-select-card:focus-within {
    color: #fff !important;
    border-color: rgba(119, 70, 239, .48) !important;
}

.nova-catalog-select-card.active {
    color: #fff !important;
    border-color: transparent !important;
    background:
        linear-gradient(rgba(5, 8, 16, .99), rgba(5, 8, 16, .99)) padding-box,
        var(--nova-catalog-active-border) border-box !important;
    box-shadow: 0 0 0 1px rgba(155, 77, 255, .08), 0 6px 18px rgba(45, 111, 219, .10) !important;
}

.nova-catalog-select-card.active > strong,
.nova-catalog-select-card.active > svg { color: #fff; }

.nova-catalog-reset-filter {
    width: var(--nova-catalog-control-h);
    min-width: var(--nova-catalog-control-h);
    padding: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.nova-catalog-reset-filter:hover {
    color: #fff !important;
    border-color: rgba(240, 74, 216, .55) !important;
    background: rgba(130, 45, 165, .16) !important;
}

/* Genre chips — identical scale and active border language to channels. */
.nova-catalog-genre-row {
    grid-area: genres;
    min-width: 0;
    height: 44px;
    display: block;
    overflow: hidden;
}

.nova-catalog-fixed-header .nova-category-strip {
    min-width: 0;
    width: 100%;
    height: 44px;
    margin: 0 !important;
    padding: 3px 0 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background: transparent !important;
    border: 0 !important;
    direction: rtl !important;
    scrollbar-width: none !important;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
}

.nova-catalog-fixed-header .nova-category-strip::-webkit-scrollbar { display: none !important; }

.nova-catalog-fixed-header .nova-category-strip button,
.nova-catalog-fixed-header .nova-category-strip .nova-category-chip {
    flex: 0 0 auto !important;
    height: var(--nova-catalog-chip-h) !important;
    min-height: var(--nova-catalog-chip-h) !important;
    min-width: 70px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--nova-catalog-line) !important;
    border-radius: 8px !important;
    background: rgba(4, 7, 13, .92) !important;
    color: rgba(255, 255, 255, .69) !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    scroll-snap-align: start;
    cursor: pointer;
}

.nova-catalog-fixed-header .nova-category-strip button:hover {
    color: #fff !important;
    border-color: rgba(119, 70, 239, .48) !important;
}

.nova-catalog-fixed-header .nova-category-strip button.active,
.nova-catalog-fixed-header .nova-category-strip .nova-category-chip.active,
.nova-catalog-fixed-header .nova-category-strip button.is-active,
.nova-catalog-fixed-header .nova-category-strip .nova-category-chip.is-active {
    color: #fff !important;
    border-color: transparent !important;
    background:
        linear-gradient(rgba(5, 8, 16, .99), rgba(5, 8, 16, .99)) padding-box,
        var(--nova-catalog-active-border) border-box !important;
    box-shadow: 0 0 0 1px rgba(155, 77, 255, .08), 0 6px 18px rgba(45, 111, 219, .10) !important;
}

/* Medium desktop / tablet window ---------------------------------------- */
@media (max-width: 1240px) and (min-width: 1001px) {
    :root { --nova-catalog-page-pad: 22px; }
    .nova-catalog-hero-row {
        grid-template-columns: 72px minmax(220px, 1fr) minmax(270px, auto);
        gap: 12px;
    }
    .nova-catalog-brand { width: 158px; }
    .nova-catalog-controls-row { grid-template-columns: minmax(240px, 1fr) minmax(0, auto); gap: 9px; }
    .nova-catalog-select-card { min-width: 105px; max-width: 145px; padding-inline: 8px; }
    .nova-catalog-select-card > span { display: none; }
    .nova-catalog-select-card { grid-template-columns: 18px minmax(42px, auto) 14px; }
}

/* Android and narrow windows: reference portrait layout.
   Search remains hidden until the header search icon is pressed. */
@media (max-width: 1000px) {
    :root {
        --nova-catalog-header-h: calc(156px + var(--safe-top, 0px));
        --nova-catalog-page-pad: 11px;
        --nova-catalog-control-h: 35px;
        --nova-catalog-chip-h: 31px;
    }

    .nova-catalog-page.mobile-search-open {
        --nova-catalog-header-h: calc(207px + var(--safe-top, 0px));
    }

    .nova-catalog-fixed-header {
        padding: var(--safe-top, 0px) 11px 6px !important;
        grid-template-rows: 68px 44px 40px !important;
        grid-template-areas:
            "hero"
            "controls"
            "genres" !important;
        transition: height .18s ease, grid-template-rows .18s ease;
    }

    .nova-catalog-page.mobile-search-open .nova-catalog-fixed-header {
        grid-template-rows: 68px 95px 40px !important;
    }

    .nova-catalog-hero-row {
        height: 68px;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "cluster title";
        gap: 8px;
        direction: ltr;
    }

    .nova-catalog-heading-copy {
        justify-self: end;
        justify-items: end;
        text-align: right;
    }

    .nova-catalog-heading-copy h1 {
        font-size: clamp(1.38rem, 6.2vw, 1.92rem);
        background: none;
        -webkit-text-fill-color: #f5f3fa;
        color: #f5f3fa;
    }

    .nova-catalog-heading-copy p,
    .nova-catalog-brand,
    .nova-catalog-back { display: none; }

    .nova-catalog-header-cluster {
        justify-self: start;
        gap: 0;
    }

    .nova-catalog-actions {
        justify-content: flex-start;
        gap: 2px;
    }

    .nova-catalog-mobile-search-toggle { display: grid; }

    .nova-catalog-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 8px;
    }

    .nova-catalog-controls-row {
        height: 44px;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 44px;
        grid-template-areas: "filters";
        align-items: center;
        gap: 0;
        overflow: hidden;
        transition: height .18s ease, grid-template-rows .18s ease;
    }

    .nova-catalog-controls-row.mobile-open {
        height: 95px;
        grid-template-rows: 49px 42px;
        grid-template-areas:
            "search"
            "filters";
        gap: 4px;
    }

    .nova-catalog-search {
        grid-area: search;
        height: 46px;
        padding-inline: 12px;
        display: none;
        opacity: 0;
        transform: translateY(-4px);
        pointer-events: none;
        border-radius: 9px !important;
    }

    .nova-catalog-controls-row.mobile-open .nova-catalog-search {
        display: flex;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        animation: nova-catalog-search-in .18s ease-out both;
    }

    .nova-catalog-search input { font-size: .78rem; }

    .nova-catalog-filter-strip {
        grid-area: filters;
        width: 100%;
        height: 42px;
        gap: 7px;
    }

    .nova-catalog-select-card {
        min-width: 88px;
        max-width: 132px;
        padding: 0 8px;
        grid-template-columns: 16px minmax(38px, auto) 13px;
        gap: 5px;
        border-radius: 7px !important;
    }

    .nova-catalog-select-card > span { display: none; }
    .nova-catalog-select-card > strong { font-size: .68rem; }
    .nova-catalog-select-card > svg:first-child { width: 15px; height: 15px; }
    .nova-catalog-reset-filter { border-radius: 7px !important; }

    .nova-catalog-genre-row { height: 40px; }

    .nova-catalog-fixed-header .nova-category-strip {
        height: 40px;
        gap: 7px !important;
        padding: 3px 0 6px !important;
    }

    .nova-catalog-fixed-header .nova-category-strip button,
    .nova-catalog-fixed-header .nova-category-strip .nova-category-chip {
        min-width: 57px !important;
        padding: 0 13px !important;
        border-radius: 7px !important;
        font-size: .69rem !important;
    }
}

/* Android landscape follows the reference: back at left, title centered,
   official channel-header logo at right, with the same compact filters. */
@media (max-width: 1000px) and (orientation: landscape) {
    :root { --nova-catalog-header-h: calc(158px + var(--safe-top, 0px)); }
    .nova-catalog-page.mobile-search-open { --nova-catalog-header-h: calc(209px + var(--safe-top, 0px)); }

    .nova-catalog-fixed-header {
        padding-inline: 17px !important;
        grid-template-rows: 66px 48px 40px !important;
    }

    .nova-catalog-page.mobile-search-open .nova-catalog-fixed-header {
        grid-template-rows: 66px 99px 40px !important;
    }

    .nova-catalog-hero-row {
        height: 66px;
        grid-template-columns: 48px minmax(0, 1fr) minmax(170px, 220px);
        grid-template-areas: "back title cluster";
        gap: 12px;
    }

    .nova-catalog-back { display: grid; width: 44px; height: 44px; min-width: 44px; }
    .nova-catalog-heading-copy { justify-self: center; justify-items: center; text-align: center; }
    .nova-catalog-heading-copy h1 {
        font-size: clamp(1.35rem, 3.7vw, 2rem);
        background: linear-gradient(95deg, #f0e9ff 7%, #c465ff 48%, #65bfff 92%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .nova-catalog-heading-copy p { display: block; font-size: .68rem; }

    .nova-catalog-header-cluster { justify-self: end; gap: 4px; }
    .nova-catalog-brand { display: grid; width: 146px; height: 48px; }
    .nova-catalog-brand img { height: 46px; }
    .nova-catalog-notification,
    .nova-catalog-menu { display: none !important; }

    .nova-catalog-controls-row { height: 48px; grid-template-rows: 48px; }
    .nova-catalog-controls-row.mobile-open { height: 99px; grid-template-rows: 49px 46px; }
    .nova-catalog-search { height: 45px; }
    .nova-catalog-filter-strip { height: 46px; }
}

@media (max-width: 420px) {
    :root { --nova-catalog-page-pad: 9px; }
    .nova-catalog-fixed-header { padding-inline: 9px !important; }
    .nova-catalog-heading-copy h1 { font-size: 1.42rem; }
    .nova-catalog-icon { width: 44px; height: 44px; min-width: 44px; }
    .nova-catalog-select-card { min-width: 82px; max-width: 118px; padding-inline: 7px; }
    .nova-catalog-select-card > strong { font-size: .65rem; }
}

@media (max-width: 360px) {
    .nova-catalog-notification { display: none !important; }
    .nova-catalog-heading-copy h1 { font-size: 1.30rem; }
    .nova-catalog-select-card { min-width: 78px; }
}

@keyframes nova-catalog-search-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .nova-catalog-fixed-header,
    .nova-catalog-controls-row,
    .nova-catalog-search,
    .nova-catalog-icon { transition: none !important; animation: none !important; }
}


/* Loading state stays below the fixed catalog header and never paints a panel behind the indicator. */
.nova-catalog-motion-loading {
    min-height: calc(100dvh - var(--nova-catalog-header-h) - var(--bottom-nav-h, 78px));
    padding-top: 12px;
    box-sizing: border-box;
    background: transparent !important;
}

.nova-catalog-motion-loading .nova-progressive-loader,
.nova-catalog-motion-loading .nova-progressive-loader::before {
    background: transparent !important;
}