#headerMenu {
    flex-direction: row-reverse !important;
}

.main-tabs {
    justify-content: right;
}

#mobile-menu-overlay {
    display: none;
}

#modal-mobile-title {
    font-size: 14px;
    font-weight: bold;
    color: #b63031;
    text-align: center;
    text-decoration: none;
    direction: rtl !important;
    padding: 4px 8px 0 8px;
}

#modal-mobile-title-hr {
    border: 0;
    border-top: 2px solid #db9a9b;
    margin: 6px 0;
}


@media (max-width: 700px) {
    #mobile-menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 101;
    }

    #headerMenu {
       flex-direction: column !important;
       position: absolute !important;
    }
    #header_top {
        position: relative;
    }
}

.login-modal-content {
    min-width: 300px;
}

#login-main {
    min-width: 290px;
}
.main-tabs > li:last-of-type {
    margin-right: 7px;
}
.main-tabs > li:first-of-type {
    margin-right: 0px;
}

@media (max-width: 700px) {
    #headerMenu {
        flex-direction: column !important;
        position: absolute !important;
    }
    .categories_list a {
        font-size: 11px;
        font-weight: bold;
        text-decoration: none;
        margin: 7px 0px;

    }
    .category {
      padding: 0; 
    }
    #header_top {
        position: relative;
        width: 100%;
    }

    #header_top #header_top_center {
        width: 100% !important;
        max-width: 100% !important;
    }

    #header_main {
        width: 100%;
        margin: 0px auto;
        overflow: hidden;
        /*height: 154px !important;*/
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        padding: 0;
    }
    #langs, #logo, #girl {
        display: none;
    }
    #header_main h1 {
        display: none;
    }
    .panel-title {
        color: inherit;
        margin-top: 0;
        margin-bottom: 0;
        font-size: 12px;
        color: inherit;
    }

    #categories {
        width: 285px;
        margin: auto !important;
        padding: 30px 0px 20px;
        float: none;
        padding-top: 0;
        overflow: hidden;
        /*display: none;*/
    }

    #category_content {
        float: left;
        height: 0;
        width: 0 !important;
        overflow: hidden;
        padding: 5px !important;
    }
    #content {
        margin: 0px auto;
        overflow-x: hidden;
        width: 100%;
        max-width: 412px;
    }

    #content-all-width {
        width: 100%;
    }

    body {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden;
        /*background-size: 0 0;*/
    }

    html {
        direction: ltr !important;
        max-width: 100% !important;
        overflow-x: hidden;
    }

    .modal-backdrop,
    .modal-backdrop.in {
        opacity: 0.7 !important;
    }

    .modal-dialog.no-ltr {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 95% !important;
    }

    .modal-header.no-ltr .close {
        display: block !important;
        float: none !important;
        text-align: right !important;
        margin: 0 0 4px 0 !important;
    }

    /* The popup has three fixed stream elements: #videoLive, #videoVod and #videoPreview.
       There is no longer a shared "#video" id (it used to be swapped onto whichever player was
       active), so both full players must be listed explicitly here.
       BUG FIX ("VOD player not exactly on same place as preview player" - narrow screens only):
       #videoLive/#videoVod used to get an extra margin-top/margin-bottom:30px that #videoPreview
       never had. The JS handoff (captureFullPlayerBox()/applyFullPlayerGeometry() in
       Categories.cshtml) positions the full player by copying #videoPreview's OWN on-screen
       top/left/width/height via position:absolute, so that stray 30px margin shifted the
       revealed full player down and away from the preview it is supposed to sit exactly on top
       of - visible only on narrow screens (this media query), and only for Widevine/PlayReady
       (#videoVod/#videoLive); FairPlay has no separate preview stage. Removed so all three
       elements share the exact same box. */
    #myModalPlayer #videoLive,
    #myModalPlayer #videoVod {
        direction: ltr !important;
    }

    /* BUG FIX ("VOD shifted right / overflows past the popup's right edge" - narrow screens):
       width:100% here used to resolve against the modal-body's PADDING-BOX (which includes its
       15px left/right padding), while JS (captureFullPlayerBox()/applyFullPlayerGeometry() in
       Categories.cshtml) positions "left" at the preview's own natural CONTENT-BOX position
       (already offset in by that same 15px padding). Combining a content-edge left with a
       padding-box width pushed the right edge ~15px past the popup's actual right edge - visible
       as the VOD/LIVE player being shifted right compared to the preview.
       JS already computes and applies the EXACT pixel width/height for all three elements
       (applyFixedPopupSize() for the preview, applyFullPlayerGeometry() for the active full
       player), so this CSS override is not needed and was the actual cause of the overflow.
       Keep only height fixed (harmless/consistent); let width follow the JS-computed pixel value. */
    #myModalPlayer #videoLive,
    #myModalPlayer #videoVod,
    #myModalPlayer #videoPreview {
        max-height: 240px !important;
        height: 240px !important;
        object-fit: contain !important;
    }

    .modal-content.no-ltr,
    .modal-body.no-ltr,
    .modal-header.no-ltr,
    #player-title,
    #bottom-title {
        direction: rtl !important;
        text-align: center !important;
    }

    #player-title {
        margin-top: 40px !important;
    }

    #bottom-title {
        margin-bottom: 25px !important;
    }

    #slogan {
        float: none;
        color: white;
        font-size: 21px;
        font-weight: bold;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 160px;
        line-height: 32px;
        margin-top: 0;
        width: 100%;
    }

    #content_seo {
        display: none !important;
    }

    #content_seo h2 {
        margin-top: 0 !important;
    }

    #footer {
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    #footer_container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px !important;
        text-align: center !important;
        direction: ltr !important;
    }

    #footer_table {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    #footer_table td,
    #footer_table a,
    #footer_table tr {
        text-align: center !important;
        display: block !important;
        width: 100% !important;
    }

    .footer_logo {
        display: none !important;
    }

    #designer {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    #footer_table td:has(> a[href="/ThankYouHE"]) {
        display: none !important;
    }

    #user-package-tb {
        width: 100% !important;
        table-layout: fixed !important;
        word-break: break-word !important;
        box-sizing: border-box !important;
    }

    /* screenshot 2: table columns - dates centered, name right-aligned for RTL */
    #user-package-tb > tbody > tr > td:nth-child(1) {
        text-align: right !important;
        width: 50% !important;
    }

    #user-package-tb > tbody > tr > td:nth-child(2),
    #user-package-tb > tbody > tr > td:nth-child(3) {
        text-align: center !important;
        width: 25% !important;
    }

    #user-package-tb td {
        padding: 8px 4px !important;
        font-size: 12px !important;
        word-break: break-word !important;
    }

    #package_continue-btn {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* screenshot 1: form labels and inputs centered */
    .get-confirm-filed-data {
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    .get-confirm-filed-data-inline {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin-top: 14px !important;
    }

    .get-confirm-filed-data-inline label {
        text-align: center !important;
        width: 100% !important;
        margin-bottom: 4px !important;
    }

    .get-confirm-filed-data-inline input {
        margin-right: 0 !important;
        text-align: center !important;
        width: 90% !important;
    }

    /* Phone: center the number inside the full-width input */
    #user-phone {
        text-align: center !important;
        width: 100% !important;
    }

    div.intl-tel-input {
        display: block !important;
        width: 90% !important;
    }

    #getconfirm-codes-form-content {
        height: auto !important;
        text-align: center !important;
    }

    /* FTP tab: prevent wide database content from expanding the mobile viewport */
    #collapse8,
    #collapse8 .panel-body,
    #ftp {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #collapse8 pre,
    #collapse8 code,
    #ftp pre,
    #ftp code {
        white-space: pre-wrap !important;
        word-break: break-all !important;
        overflow-x: hidden !important;
        font-size: 11px !important;
        max-width: 100% !important;
    }

    #collapse8 img,
    #ftp img {
        max-width: 100% !important;
        height: auto !important;
    }

    #collapse8 table,
    #ftp table {
        max-width: 100% !important;
        table-layout: fixed !important;
        word-break: break-word !important;
    }

    #collapse8 td, #collapse8 th,
    #ftp td, #ftp th {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Diploma tab native selects are select2 backing elements — keep them hidden */
    #ddlCourses,
    #ddlSpeciality,
    #ddlCourseYears,
    #ddlSpecialityYears {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 6px !important;
        display: none !important;
    }

    #collapse11 .table-button,
    #collapse11 .right-table-button {
        width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
        margin: 6px 0 !important;
    }

    #collapse11 input[type="text"] {
        width: 80px !important;
    }

    /* screenshot 5: GetPC - constrain images to screen width */
    #left-PC,
    #right-PC {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    #passport-image-data img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .allowed-pc-item {
        width: 100% !important;
    }

    /* topPosts popup fixes */
    .top_post_red_header {
        font-size: 14px !important;
        margin-top: 0 !important;
    }

    #player-title * {
        color: #616161 !important;
    }

    #player-title .red_header_text,
    #player-title .red_header_text2 {
        color: #BE1416 !important;
    }

    /* Task 1: red_header_text font size on mobile */
    .red_header_text,
    .red_header_text2 {
        font-size: 14px !important;
    }

    /* Task 2: text-modal popup (FullMoviesList) — match home page popup */
    #text-modal {
        padding-top: 30px !important;
    }

    #text-modal-content {
        width: 90% !important;
    }

    .text-modal-title {
        font-size: 22px !important;
    }

    #text-modal-second-title {
        margin-top: 35px;
        margin-left: 0px;
        direction: rtl;
    }

    body.modal-open {
        position: static !important;
        overflow: hidden;
    }

    #text-modal-text {
        font-size: 13px !important;
        text-align: right !important;
        direction: rtl !important;
        width: 100% !important;
        padding: 0 12px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    /* Task 2: make links inside popup readable */
    #text-modal-text a,
    #text-modal-text a:visited,
    #text-modal-text a:hover {
        color: #b63031 !important;
        text-decoration: underline !important;
        word-break: break-all !important;
        display: inline-block !important;
        max-width: 100% !important;
    }

    /* Task 2: limit modal content width inside popup so text doesn't overflow */
    #text-modal-content {
        max-width: 95vw !important;
        overflow: hidden !important;
    }

    /* Task 2: ensure top_post_content inside myModalPlayer doesn't overflow */
    #player-title .top_post_content {
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        max-width: 100% !important;
        padding: 0 8px !important;
    }

    #player-title .top_post_content a,
    #player-title .top_post_content a:visited,
    #player-title .top_post_content a:hover {
        color: #b63031 !important;
        text-decoration: underline !important;
        word-break: break-all !important;
        display: inline-block !important;
        max-width: 100% !important;
    }

    .FullMoviesList .panel-body {
        padding: 5px;
    }
    }
}