/**
 * Foxtel SBB Remote Control Focus Styles
 * Add to UScreen Snippets > Common pages (CSS)
 */

/* Build marker. foxtel-rcu.js reads this and shows a warning on screen if the
   stylesheet and the script are from different deploys. The two are separate
   <link> and <script> tags, so it is easy to update one and forget the other,
   and the result is a page that is half fixed with no obvious cause. */
:root { --rcu-build: "2026-09-10-x"; }

/* Focus ring on all interactive elements (SBB only) */
.foxtel-sbb a:focus,
.foxtel-sbb button:focus,
.foxtel-sbb [tabindex="0"]:focus,
.foxtel-sbb input:focus,
.foxtel-sbb select:focus,
.foxtel-sbb textarea:focus,
.foxtel-sbb video:focus,
.foxtel-sbb video-player:focus,
.foxtel-sbb ds-button:focus,
.foxtel-sbb ds-input:focus,
.foxtel-sbb ds-select:focus,
.foxtel-sbb ds-select-option:focus,
.foxtel-sbb [onclick]:focus {
    outline: 8px solid #FF9500 !important;
    outline-offset: 6px;
    border-radius: 8px;
    z-index: 9999;
    position: relative;
    /* Dark ring so the orange still reads on a pale poster.
       A large blurred drop shadow was here too. Blur is repainted on every
       focus change and this hardware cannot afford it, which is most of why
       moving around felt heavy. A hard ring costs almost nothing. */
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.55) !important;
}

/* Keyboard-only focus ring, set top box only. Unscoped it put an 8px orange
   outline on the ordinary website for every keyboard user. */
.foxtel-sbb a:focus-visible,
.foxtel-sbb button:focus-visible,
.foxtel-sbb [tabindex="0"]:focus-visible,
.foxtel-sbb input:focus-visible,
.foxtel-sbb select:focus-visible,
.foxtel-sbb textarea:focus-visible,
.foxtel-sbb ds-button:focus-visible,
.foxtel-sbb ds-input:focus-visible {
    outline: 8px solid #FF9500;
    outline-offset: 6px;
}

/* Item 5. The selected card lifts out of the row.
   The rail is clipped by an .overflow-hidden ancestor. Making that visible
   would let off-screen slides spill sideways, so instead we pad the grid and
   let the card grow into the padding. */
/* Room for the lift. A loaded rail is <ds-swiper> inside a div.overflow-hidden,
   so the card must grow into padding rather than out of the clip box. */
/* Horizontal room as well as vertical. scale() grows from the centre, so the
   leftmost card's edge moves outside the rail and the .overflow-hidden
   ancestor clips it. sizeSlidesToRail subtracts this padding when it measures. */
.foxtel-sbb ds-swiper {
    padding-left: 20px !important;
    padding-right: 20px !important;
}
.foxtel-sbb .category-carousel__grid,
.foxtel-sbb ds-swiper,
.foxtel-sbb ds-swiper::part(wrapper) {
    /* Enough for a 9% lift on a 300px card, and no more. Every extra pixel
       here is multiplied by the number of rails and makes the page taller. */
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}
.foxtel-sbb .category-group > .overflow-hidden {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
.foxtel-sbb swiper-slide:focus-within,
.foxtel-sbb .category-carousel__slide:focus-within,
.foxtel-sbb .tiled-gallery-item:focus-within,
.foxtel-sbb .pricing-card:focus-within,
.foxtel-sbb .social-feed-item:focus-within {
    transform: scale(1.06);
    transition: transform 0.12s ease-out;
    z-index: 60;
    position: relative;
    /* Solid backing. The lifted card overlaps its neighbours, and without this
       their titles show through underneath it. */
    background: var(--section-background-color, #fff);
    border-radius: 8px;
}

/* The safe area lives with the side menu rule further down. It is written as
   ".foxtel-sbb body", which is correct now that the class goes on <html> at
   parse time. It was previously written that way while the class was on <body>,
   where it could never match, so no box ever got the 5% Foxtel ask for. */

/* --- SBB Virtual Keyboard --- */
#sbb-kbd-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 99999;
    align-items: flex-end;
    justify-content: center;
}
#sbb-kbd-overlay.sbb-kbd-visible {
    display: flex;
}
#sbb-kbd-container {
    width: 90vw;
    max-width: 720px;
    margin-bottom: 5vh;
    padding: 16px 12px;
    background: #1a1a1a;
    border-radius: 12px;
    border: 1px solid #333;
}
#sbb-kbd-preview {
    width: 100%;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: #111;
    border: 2px solid #444;
    border-radius: 8px;
    color: #fff;
    font-size: 26px;
    font-family: monospace;
    min-height: 48px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#sbb-kbd-preview .sbb-kbd-cursor {
    color: #FFB800;
    animation: sbb-kbd-blink 1s step-end infinite;
}
#sbb-kbd-label {
    color: #999;
    font-size: 14px;
    margin-bottom: 4px;
    padding-left: 4px;
}
@keyframes sbb-kbd-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.sbb-kbd-row {
    display: flex;
    justify-content: center;
    margin: 3px 0;
}
.sbb-kbd-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 48px;
    margin: 2px;
    padding: 0 8px;
    background: #333;
    color: #fff;
    font-size: 20px;
    font-family: sans-serif;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    border: 2px solid transparent;
}
.sbb-kbd-key.sbb-kbd-highlight {
    border-color: #FFB800;
    background: #4a4a00;
    color: #FFB800;
}
.sbb-kbd-key.sbb-kbd-wide {
    min-width: 88px;
    font-size: 16px;
}
.sbb-kbd-key.sbb-kbd-space {
    flex: 1;
    max-width: 320px;
    font-size: 16px;
}
.sbb-kbd-key.sbb-kbd-done {
    min-width: 100px;
    font-size: 16px;
    background: #1a4a00;
    color: #7fff00;
}
.sbb-kbd-key.sbb-kbd-done.sbb-kbd-highlight {
    background: #2a6a00;
    border-color: #FFB800;
    color: #FFB800;
}
.sbb-kbd-key.sbb-kbd-shift-on {
    background: #4a4a00;
    color: #FFB800;
}

/* --- CSS Fullscreen --- */
/* Bypasses the Fullscreen API which requires user gesture and fails
   in setTimeout on SBB Chromium 105. Works everywhere. */
video.rcu-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    background: #000 !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
}
body.rcu-fullscreen-active {
    overflow: hidden !important;
}
/* Hide page chrome when CSS fullscreen is active */
body.rcu-fullscreen-active header,
body.rcu-fullscreen-active footer,
body.rcu-fullscreen-active nav,
body.rcu-fullscreen-active .header,
body.rcu-fullscreen-active .footer {
    visibility: hidden !important;
}

/* Hide the site footer on the set top box only.
   This was unscoped and hid the footer for every website visitor. */
.foxtel-sbb footer {
    display: none !important;
}

/* Hide Share, Add to Calendar buttons on video pages. Set top box only. */
.foxtel-sbb ds-button[data-area="share-button"],
.foxtel-sbb ds-button[data-area="calendar-button"],
.foxtel-sbb [data-action*="share-button"],
.foxtel-sbb ds-button:has(ds-icon[name="share"]),
.foxtel-sbb ds-button:has(ds-icon[name="calendar-plus"]),
.foxtel-sbb #program_buttons_add_to_calendars {
    display: none !important;
}

/* --- TV readability: larger fonts for seniors --- */

/* Item 6. Video title under each card.
   .line-clamp-2 alone lost to uScreen's own rule, which computes to 13px.
   .card-title carries the size, so target both together for specificity. */
.foxtel-sbb .card-title,
.foxtel-sbb .card-title.line-clamp-2 {
    font-size: 26px !important;
    line-height: 1.3 !important;
    margin-top: 10px !important;
}

/* Hide "See All" links — confusing for elderly users */
.foxtel-sbb .category-see-all,
.foxtel-sbb a[href*="see_all"],
.foxtel-sbb a[href*="see-all"],
.foxtel-sbb a[class*="see-all"],
.foxtel-sbb a[class*="seeAll"] {
    display: none !important;
}

/* Category / section headings */
.foxtel-sbb .category-title {
    font-size: 1.4em !important;
}

/* Nav bar links. Excludes the side menu, which is a <nav> and sizes itself. */
.foxtel-sbb header a,
.foxtel-sbb nav:not(#rcu-side-menu) a {
    font-size: 1.2em !important;
}

/* Filters button */
.foxtel-sbb .toggle-filters,
.foxtel-sbb #catalog_filter_button {
    font-size: 1.3em !important;
}

/* Search input */
.foxtel-sbb ds-input,
.foxtel-sbb input[type="search"],
.foxtel-sbb input[type="text"] {
    font-size: 1.2em !important;
}

/* Video page action buttons (Add to Calendar, Favorites, Share) */
.foxtel-sbb [class*="program-action"] button,
.foxtel-sbb [class*="program-action"] a,
.foxtel-sbb [class*="video-action"] button,
.foxtel-sbb [class*="video-action"] a {
    font-size: 1.2em !important;
}

/* Virtual keyboard: larger keys for TV */
.foxtel-sbb .sbb-kbd-key {
    min-width: 64px !important;
    height: 60px !important;
    font-size: 26px !important;
}
.foxtel-sbb .sbb-kbd-key.sbb-kbd-wide {
    min-width: 108px !important;
    font-size: 22px !important;
}
.foxtel-sbb .sbb-kbd-key.sbb-kbd-done {
    min-width: 120px !important;
    font-size: 22px !important;
}
.foxtel-sbb #sbb-kbd-preview {
    font-size: 32px !important;
    min-height: 56px !important;
}
.foxtel-sbb #sbb-kbd-label {
    font-size: 20px !important;
}

/* Item 3, part two. Belt and braces on the card width.
   The rail is a flex row and each slide is flex: 0 0 auto with a width that
   comes from uScreen's own stylesheet. Setting Swiper's slidesPerView in
   foxtel-rcu.js covers the case where Swiper owns the width; this covers the
   case where the stylesheet does. The safe area takes 5% each side, so the
   rail is about 90vw wide and three cards plus two 18px gaps must fit it. */
/* Carousel slides only. Favourites and Search lay the very same
   <swiper-slide> elements out in a CSS grid, and forcing a width there pushes
   each item out of its column so they overlap. */
.foxtel-sbb ds-swiper swiper-slide,
.foxtel-sbb ds-swiper .category-carousel__slide {
    /* Content box is the screen less the 132px menu and the 5vw right safe
       area, so 95vw - 132px. Three cards and two 18px gaps must fit inside it.
       The earlier 90vw ignored the menu and pushed the third card off screen. */
    width: calc((95vw - 132px - 36px) / 3) !important;
    max-width: none !important;
    flex: 0 0 auto !important;
}

/* Item 3. Bigger posters, three to a row.
   Swiper sets the slide width itself, so the real work is in foxtel-rcu.js.
   These rules only make the image fill whatever width Swiper gives it.
   The old rules targeted .swiper-slide, which does not exist on the page. */
.foxtel-sbb ds-swiper swiper-slide img,
.foxtel-sbb ds-swiper swiper-slide picture,
.foxtel-sbb .category-carousel__slide img,
.foxtel-sbb .category-carousel__slide picture {
    width: 100% !important;
    height: auto !important;
}

/* --- Paused indicator --- */
/* Pause holds the picture in fullscreen. This marks the state so a paused
   video is not mistaken for a frozen one. */
#sbb-paused-indicator {
    display: none;
    position: fixed;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.82);
    color: #FFB800;
    padding: 14px 34px;
    border-radius: 10px;
    font-family: sans-serif;
    font-size: 34px;
    letter-spacing: 2px;
    z-index: 100000;
    pointer-events: none;
}

/* --- Redundant Home header --- */
/* The logo links to the home page and the "Home" nav link goes to the same
   place. Two controls, one destination. Keep the text label: it is clearer
   than an icon for a senior audience. */
.foxtel-sbb .header-logo {
    display: none !important;
}

/* --- Sign out on the set top box --- */
/* Kept visible by owner decision, 1 Sep 2026. The avatar menu holds only this
   item, so hiding it left the menu empty and the OK key appeared to do
   nothing. Give the link room to be read and selected from a couch. */
.foxtel-sbb .navigation-dropdown-link,
.foxtel-sbb a[href$="/sign_out"] {
    font-size: 1.2em !important;
    padding: 12px 16px !important;
    display: block !important;
}

/* --- Account menu opened by remote --- */
/* The theme reveals this menu on :hover only, and a remote cannot hover.
   Its own .navigation-item-opened class sets display:none, so it cannot be
   used either. We drive our own class from the OK key instead. */
.rcu-menu-open .navigation-dropdown {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.rcu-menu-open .navigation-dropdown-list {
    max-height: none !important;
}

/* --- Item 1: Fire TV style side menu --- */
/* The uScreen header is a web page header: small text, a Filters button and a
   search box. It is replaced by a rail down the left, as on the Fire TV app. */
.foxtel-sbb header,
.foxtel-sbb .header-navigation,
.foxtel-sbb .header--menu,
.foxtel-sbb .header-wrapper {
    display: none !important;
}

/* uScreen indents each row by about 3% of the screen. With the menu taking a
   further 104px, roughly 15% of the width was gone before any content. */
.foxtel-sbb .content-row {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* The Filters and Search bar is not part of <header>. It sits in its own
   turbo-frame, so hiding the header leaves it stranded at the top of the
   screen with nothing above it. Fire TV has no filter bar, and Search now
   lives in the rail, so it goes too. Remove this block to bring it back. */
.foxtel-sbb turbo-frame#catalog_filters,
.foxtel-sbb .ui-filters {
    display: none !important;
}

#rcu-side-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 104px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 40px 0;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.96);
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}

/* Push the page clear of the rail, and apply the 5% safe area Foxtel ask for.
   The class sits on <html>, applied while the head is parsed, so this is in
   force for the first paint. */
.foxtel-sbb body {
    margin: 5vh 5vw 5vh 0 !important;
    padding-left: 104px !important;
    box-sizing: border-box;
}

/* The real Seniors Channel mark. It is already a circle on a transparent
   background, so it needs no plate behind it. */
.rcu-menu-brand {
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
    flex: 0 0 auto;
}
.rcu-menu-brand img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Only used if the image host cannot be reached from the box. */
.rcu-menu-brand.rcu-brand-fallback {
    border-radius: 50%;
    background: #F5871F;
}
.rcu-menu-brand.rcu-brand-fallback svg {
    width: 34px;
    height: 34px;
    fill: #fff;
    margin-left: 4px;
}

.rcu-menu-item {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.05);
    text-decoration: none !important;
    flex: 0 0 auto;
    transition: transform 0.15s ease, background 0.15s ease;
}
.rcu-menu-item svg {
    width: 36px;
    height: 36px;
    fill: #2b2b2b;
}
/* The label is for screen readers and for the focused state only. A rail of
   icons with permanent captions gets cluttered at this width. */
.rcu-menu-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.rcu-menu-bottom {
    margin-top: auto;
}
.rcu-menu-active {
    background: rgba(245, 135, 31, 0.18);
}
.rcu-menu-active svg {
    fill: #C4610A;
}

/* Focused menu item. Deliberately quieter than a card: the rail is small and
   always on screen, so a solid orange fill was shouting. A thin ring and a
   soft tint are enough to say where you are. */
.foxtel-sbb #rcu-side-menu .rcu-menu-item:focus {
    outline: 4px solid #FF9500 !important;
    outline-offset: 2px;
    background: rgba(245, 135, 31, 0.16);
    transform: scale(1.04);
    box-shadow: none !important;
}
.foxtel-sbb #rcu-side-menu .rcu-menu-item:focus svg {
    fill: #C4610A;
}

/* Playback owns the whole screen. */
body.rcu-fullscreen-active #rcu-side-menu {
    display: none !important;
}
.foxtel-sbb body.rcu-fullscreen-active {
    margin: 0 !important;
    padding-left: 0 !important;
}

/* --- Grid pages: Favourites and Search --- */
/* These are not carousels. uScreen lays them out four or more across, which is
   a computer layout. Three across matches the rails and stays readable from a
   chair. */
.foxtel-sbb div[class*="grid-cols"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 56px !important;
}
/* The lift needs somewhere to grow here too. */
.foxtel-sbb div[class*="grid-cols"] {
    padding: 18px 0 !important;
}

/* --- The search page --- */
/* uScreen puts the search box inside the Filters bar, which we hide on every
   other screen. On the search page it has to be visible and large enough to
   read and aim at from a chair. The filter dropdowns beside it stay hidden. */
.rcu-search-page div.ui-filters,
.rcu-search-page turbo-frame#catalog_filters {
    display: block !important;
}
.rcu-search-page .ui-filters .main-filters {
    justify-content: flex-start !important;
    padding: 12px 0 !important;
}
.rcu-search-page #catalog_filter_search {
    width: 62vw !important;
    max-width: none !important;
}
.rcu-search-page #search {
    width: 100% !important;
    font-size: 32px !important;
    padding: 16px 20px !important;
    line-height: 1.3 !important;
    border-radius: 10px !important;
}
/* Nothing else from that bar belongs on a television. */
.rcu-search-page .ui-filters ds-select,
.rcu-search-page .ui-filters .toggle-filters,
.rcu-search-page .ui-filters #catalog_filter_button {
    display: none !important;
}

/* --- A full screen video is not a focus target --- */
/* The generic focus rule is more specific than the full screen rule, so a
   focused video was getting the 8px orange outline, its 6px offset and the
   rounded corners. The offset shows as a band down the edge of the screen and
   the radius rounds the picture. Playback should reach every edge. */
.foxtel-sbb video.rcu-fullscreen,
.foxtel-sbb video.rcu-fullscreen:focus,
.foxtel-sbb video.rcu-fullscreen:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
}
/* Anything behind the picture should be black, never page grey. */
body.rcu-fullscreen-active {
    background: #000 !important;
}
