* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    overscroll-behavior: none;
}

body.tv-app {
    margin: 0;
    color: #fff;
    background-color: #05070b;
    font-family: Arial, sans-serif;
    cursor: default;
}

body.tv-app,
body.tv-app button,
body.tv-app input,
body.tv-app select {
    -webkit-tap-highlight-color: transparent;
}

body.tv-app button,
body.tv-app [onclick],
body.tv-app [tabindex] {
    outline: none;
}

body.tv-app ::-webkit-scrollbar {
    width: 0;
    height: 0;
}

body.tv-app .header {
    height: 12vh;
    background: linear-gradient(90deg, rgba(2, 8, 18, 0.96), rgba(8, 17, 31, 0.78));
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

body.tv-app .main_text {
    margin-top: 4.5vh;
    margin-left: 5vw;
    font-size: 3.1vh;
    letter-spacing: 0;
}

body.tv-app .main_logo {
    height: 8.5vh;
    margin-top: 1.7vh;
    margin-right: 4.5vw;
}

body.tv-app .sections-container {
    height: 88vh;
    gap: 2.5vw;
    padding: 7vh 5vw 8vh;
    align-items: center;
    scroll-padding: 5vw;
}

body.tv-app .section {
    width: 23vw;
    min-width: 23vw;
    height: 56vh;
    padding: 4vh 2vw;
    justify-content: center;
    background: rgba(10, 18, 30, 0.76);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.36);
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, opacity 140ms ease;
}

body.tv-app .section img {
    width: 11vw;
    max-height: 18vh;
    object-fit: contain;
}

body.tv-app .section h3 {
    max-width: 100%;
    color: #fff;
    font-size: 3.2vh;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

body.tv-app .section p {
    max-width: 100%;
    color: rgba(255, 255, 255, 0.72);
    font-size: 2.1vh;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

body.tv-app .section:focus,
body.tv-app .section:focus-visible {
    transform: scale(1.07);
    background: rgba(15, 30, 48, 0.94);
    border-color: #29d3ff;
    box-shadow: 0 0 0 0.42vh #29d3ff, 0 22px 64px rgba(0, 0, 0, 0.48);
}

body.tv-app .settings_view {
    width: 90vw;
    height: 80vh;
    margin: 4vh 5vw;
    padding: 3vh 3vw;
    background: rgba(8, 15, 26, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
}

body.tv-app .settings_buttons {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.2vw;
    padding: 2vh 0;
}

body.tv-app .button,
body.tv-app .popup-button,
body.tv-app .popup-button2,
body.tv-app .keypad button,
body.tv-app .start_button,
body.tv-app .install_button {
    min-height: 8vh;
    padding: 1.8vh 2.4vw;
    color: #06101a;
    background: #fff;
    border: 0;
    border-radius: 8px;
    font-size: 2.5vh;
    font-weight: 700;
}

body.tv-app .button:focus,
body.tv-app .popup-button:focus,
body.tv-app .popup-button2:focus,
body.tv-app .keypad button:focus,
body.tv-app .start_button:focus,
body.tv-app .install_button:focus,
body.tv-app .back_button:focus,
body.tv-app .back_button_close:focus,
body.tv-app .search_button:focus,
body.tv-app .close_overlay_button:focus,
body.tv-app #closeEpisodesButton:focus {
    box-shadow: 0 0 0 0.42vh #29d3ff;
    transform: scale(1.04);
}

body.tv-app .lock-screen {
    position: fixed;
    inset: 12vh 30vw auto;
    padding: 4vh 4vw;
    background: rgba(6, 12, 22, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    z-index: 90;
}

body.tv-app .keypad {
    gap: 1.6vh;
}

body.tv-app .top-half {
    position: relative;
    z-index: 1;
    height: 43vh;
    overflow: hidden;
}

body.tv-app .bottom-half {
    position: relative;
    z-index: 20;
    height: 57vh;
    padding-top: 3vh;
    background: linear-gradient(180deg, rgba(5, 7, 11, 0.98), #05070b 18%);
    overflow-x: hidden;
    overflow-y: auto;
    scroll-padding-top: 3vh;
}

body.tv-app .category {
    min-height: 40vh;
    max-height: none;
    padding-top: 0.8vh;
    padding-bottom: 3vh;
}

body.tv-app .category_text {
    margin: 0 0 0.8vh 5vw;
    color: #fff;
    font-size: 2.4vh;
    line-height: 1.15;
}

body.tv-app .movie_portrait_container,
body.tv-app .movie_portrait_mega_container,
body.tv-app .movie_landscape_container,
body.tv-app .movie_landscape_mega_container {
    height: 40vh;
    padding-top: 2.2vh;
    padding-bottom: 3vh;
    padding-left: 5vw;
    padding-right: 5vw;
    overflow-y: hidden;
    scroll-padding: 5vw;
}

body.tv-app .movie_portrait,
body.tv-app .movie_portrait_mega {
    height: 31.5vh;
    margin-right: 1.1vw;
}

body.tv-app .main_movie_div {
    border-radius: 8px;
}

body.tv-app .main_movie_div img,
body.tv-app .movie_search_div,
body.tv-app .episode,
body.tv-app #tv_guide_li,
body.tv-app .categories_text {
    transition: transform 130ms ease, opacity 130ms ease, box-shadow 130ms ease, border-color 130ms ease;
}

body.tv-app .main_movie_div img {
    opacity: 0.66;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

body.tv-app .main_movie_div img:focus,
body.tv-app .main_movie_div img:focus-visible {
    opacity: 1;
    transform: scale(1.08);
    outline: none;
    border-color: #29d3ff;
    box-shadow: 0 0 0 0.4vh #29d3ff, 0 18px 44px rgba(0, 0, 0, 0.55);
    z-index: 5;
}

body.tv-app .movie_details {
    max-width: 52vw;
    padding-left: 5vw;
    height: 39vh;
    overflow: hidden;
}

body.tv-app .movie_title {
    color: #fff;
    font-size: 4.7vh;
    line-height: 1.05;
    font-weight: 800;
    overflow-wrap: anywhere;
}

body.tv-app .description_text {
    max-width: 48vw;
    font-size: 2.2vh;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

body.tv-app .sub_text,
body.tv-app .sub_text2 {
    font-size: 2.2vh;
    line-height: 1.25;
}

body.tv-app .top-half .sideContainer,
body.tv-app .top-half .imgBkg,
body.tv-app .top-half #trailer-player {
    max-height: 43vh;
}

body.tv-app .top-half .overlay,
body.tv-app .top-half .overlay_side {
    height: 43vh;
    max-height: 43vh;
    pointer-events: none;
}

body.tv-app .searchScreen,
body.tv-app .popup,
body.tv-app .mini_popup,
body.tv-app .overlay_player {
    background: rgba(3, 7, 13, 0.88);
    backdrop-filter: blur(8px);
}

body.tv-app .popup-content,
body.tv-app .mini_popup-content {
    background: rgba(8, 15, 26, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
}

body.tv-app .popupTitle,
body.tv-app .mini_popupTitle,
body.tv-app .searchTitle {
    color: #fff;
    line-height: 1.12;
}

body.tv-app .search_form {
    min-height: 14vh;
}

body.tv-app #searchInput,
body.tv-app .searchInput {
    min-height: 8vh;
    border: 0;
    border-radius: 8px;
    padding: 0 1.6vw;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    font-size: 3vh;
}

body.tv-app #searchInput:focus,
body.tv-app .searchInput:focus {
    box-shadow: 0 0 0 0.42vh #29d3ff;
}

body.tv-app .movie_search_div:focus,
body.tv-app .movie_search_div:focus-visible {
    transform: scale(1.06);
    box-shadow: 0 0 0 0.42vh #29d3ff;
}

body.tv-app #top_menu {
    height: 12vh;
    background: linear-gradient(90deg, rgba(2, 8, 18, 0.96), rgba(8, 17, 31, 0.72));
}

body.tv-app .categories_container {
    height: 8vh;
    margin-top: 11vh;
    padding-left: 2vw;
    padding-right: 2vw;
    gap: 1vw;
    align-items: center;
}

body.tv-app .categories_text {
    min-height: 5.8vh;
    padding: 1.2vh 1.7vw;
    margin: 1vh 1vw 1vh 0;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    font-size: 2.2vh;
}

body.tv-app .categories_text:focus,
body.tv-app .categories_text:focus-visible {
    background: #fff;
    color: #06101a;
    box-shadow: 0 0 0 0.36vh #29d3ff;
}

body.tv-app #player_content {
    margin-top: 20vh;
    margin-left: 3vw;
    width: 42vw;
    height: 38vh;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

body.tv-app .live_tv_content {
    height: 39vh;
    padding-left: 2.5vw;
    padding-right: 2.5vw;
}

body.tv-app #tv_guide_li {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

body.tv-app #tv_guide_li:focus,
body.tv-app #tv_guide_li:focus-visible {
    outline: none;
    transform: translateX(0.5vw);
    border-color: #29d3ff;
    box-shadow: 0 0 0 0.32vh #29d3ff;
}

body.tv-app .nowText,
body.tv-app .nextText,
body.tv-app .nowSubText,
body.tv-app .nextSubText,
body.tv-app .episodeTitle,
body.tv-app .episodeDescription {
    overflow: hidden;
    text-overflow: ellipsis;
}

body.tv-app .episode:focus,
body.tv-app .episode:focus-visible,
body.tv-app .play-button:focus,
body.tv-app .play-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.38vh #29d3ff;
    transform: scale(1.02);
}

body.tv-app .tv-help {
    position: fixed;
    right: 3vw;
    bottom: 2vh;
    z-index: 120;
    padding: 1vh 1.2vw;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(0, 0, 0, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 1.6vh;
    pointer-events: none;
}

body.tv-app .link_content,
body.tv-app .install_content {
    min-height: 100vh;
    padding: 10vh 8vw;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.38)), url('../img/main_background.php');
    background-position: center;
    background-size: cover;
}

body.tv-app .link_content .app_icon,
body.tv-app .install_content .app_icon {
    height: 13vh;
}

body.tv-app .link_content .main_text,
body.tv-app .install_content .main_text {
    padding-top: 18vh;
    margin: 0;
    color: #fff;
    font-size: 7vh;
    line-height: 1;
}

body.tv-app .link_content .sub_text,
body.tv-app .install_content .sub_text {
    color: rgba(255, 255, 255, 0.72);
    font-size: 3vh;
}

body.tv-app .start_button,
body.tv-app .install_button {
    position: static;
    display: inline-flex;
    width: auto;
    min-width: 16vw;
    align-items: center;
    justify-content: center;
    margin-top: 4vh;
    text-decoration: none;
}

body.tv-app .code_container {
    max-width: 48vw;
    margin-top: 4vh;
    padding: 3vh 3vw;
    text-align: left;
    background: rgba(5, 10, 18, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
}

body.tv-app .code_text {
    color: #fff;
    font-size: 8vh;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0;
}

@media (max-aspect-ratio: 4 / 3) {
    body.tv-app .section {
        width: 36vw;
        min-width: 36vw;
    }

    body.tv-app .movie_details {
        max-width: 70vw;
    }
}