:root {
    --rt-bg: #f4f7fb;
    --rt-surface: #ffffff;
    --rt-text: #111827;
    --rt-muted: #667085;
    --rt-border: #e5e7eb;
    --rt-blue: #2563eb;
    --rt-green: #16a34a;
    --rt-indigo: #4f46e5;
    --rt-sidebar: #0b1628;
    --rt-sidebar-soft: #13233b;
}

/* Main page */
body {
    background:
        radial-gradient(circle at top right, rgba(37,99,235,.06), transparent 32%),
        radial-gradient(circle at bottom left, rgba(34,197,94,.05), transparent 28%),
        var(--rt-bg) !important;
    color: var(--rt-text);
}

/* Top header */
header,
.top-bar,
.page-header,
.header-wrap {
    background: rgba(255,255,255,.96) !important;
    border-bottom: 1px solid var(--rt-border) !important;
    box-shadow: 0 5px 22px rgba(15,23,42,.05) !important;
}

/* Logo area */
.logo,
.logo-wrap,
.site-logo {
    font-weight: 800 !important;
}

/* Search */
input[type="search"],
.search-input,
.search-field {
    border: 1px solid #d7dee8 !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    transition: .16s ease !important;
}

input[type="search"]:focus,
.search-input:focus,
.search-field:focus {
    background: #fff !important;
    border-color: var(--rt-blue) !important;
    box-shadow: 0 0 0 4px rgba(37,99,235,.10) !important;
    outline: none !important;
}

/* Sidebar */
.sidebar,
.sidebar-wrap,
.left-sidebar,
aside {
    background: linear-gradient(
        180deg,
        var(--rt-sidebar) 0%,
        var(--rt-sidebar-soft) 100%
    ) !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
    box-shadow: 10px 0 35px rgba(15,23,42,.08) !important;
}

/* Sidebar links */
.sidebar a,
.sidebar-wrap a,
.left-sidebar a,
aside a {
    color: #dbe5f1 !important;
    border-radius: 10px !important;
    margin: 3px 8px !important;
    transition:
        background .16s ease,
        color .16s ease,
        transform .16s ease !important;
}

.sidebar a:hover,
.sidebar-wrap a:hover,
.left-sidebar a:hover,
aside a:hover {
    background: rgba(255,255,255,.08) !important;
    color: #ffffff !important;
    transform: translateX(2px);
}

/* Active menu */
.sidebar .active,
.sidebar-wrap .active,
.left-sidebar .active,
aside .active {
    background: linear-gradient(
        135deg,
        rgba(37,99,235,.88),
        rgba(79,70,229,.88)
    ) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(37,99,235,.20) !important;
}

/* Sidebar icons */
.sidebar svg,
.sidebar i,
.sidebar-wrap svg,
.sidebar-wrap i,
.left-sidebar svg,
.left-sidebar i,
aside svg,
aside i {
    color: #9fb3c8 !important;
}

/* Main content */
.page-main-wrap,
.main-content,
.content-wrap,
main {
    background: transparent !important;
}

/* Section titles */
h1,
h2,
h3,
.section-title {
    color: #111827 !important;
    letter-spacing: -.02em;
}

/* Video/media cards */
.media-item,
.media-card,
.video-card,
.thumbnail-card,
.card {
    border: 1px solid var(--rt-border) !important;
    border-radius: 16px !important;
    background: var(--rt-surface) !important;
    box-shadow: 0 8px 24px rgba(15,23,42,.06) !important;
    overflow: hidden !important;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease !important;
}

.media-item:hover,
.media-card:hover,
.video-card:hover,
.thumbnail-card:hover,
.card:hover {
    transform: translateY(-3px) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 16px 38px rgba(15,23,42,.10) !important;
}

/* Thumbnails */
.media-item img,
.media-card img,
.video-card img,
.thumbnail-card img {
    border-radius: 14px !important;
}

/* Metadata */
.media-item small,
.media-card small,
.video-card small,
.thumbnail-card small,
.meta,
.metadata {
    color: var(--rt-muted) !important;
}

/* Links */
a {
    transition: color .15s ease;
}

.page-main-wrap a:hover,
.main-content a:hover {
    color: var(--rt-blue);
}

/* Buttons */
button,
.button,
.btn {
    border-radius: 10px !important;
    transition:
        transform .16s ease,
        filter .16s ease !important;
}

button:hover,
.button:hover,
.btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

/* View all */
.view-all,
a[href*="view"],
a[href*="latest"] {
    font-weight: 700;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #eef2f7;
}

::-webkit-scrollbar-thumb {
    background: #c3cfdd;
    border-radius: 999px;
    border: 2px solid #eef2f7;
}

::-webkit-scrollbar-thumb:hover {
    background: #9fb0c4;
}

/* Responsive */
@media (max-width: 760px) {
    .sidebar,
    .sidebar-wrap,
    .left-sidebar,
    aside {
        box-shadow: none !important;
    }

    .media-item,
    .media-card,
    .video-card,
    .thumbnail-card,
    .card {
        border-radius: 12px !important;
    }
}

/* Duplicate upload skipped */
.rachamim-duplicate-skipped {
    background: #fff8e6 !important;
    border: 1px solid #f0b429 !important;
    border-radius: 10px !important;
}

.rachamim-duplicate-skipped .qq-upload-file {
    color: #8a5a00 !important;
    font-weight: 700 !important;
}

.rachamim-duplicate-skipped .qq-upload-status-text {
    color: #b26a00 !important;
    font-weight: 800 !important;
}

.rachamim-duplicate-skipped .qq-upload-failed-text {
    display: none !important;
}

/* ============================================================
   Rachamim Tube - Hebrew RTL Sidebar
   Active only when <html class="rachamim-rtl">
   ============================================================ */

/* Hebrew page direction */
html.rachamim-rtl {
    direction: rtl;
}

/* Move the main MediaCMS sidebar from left to right */
html.rachamim-rtl .page-sidebar {
    left: auto !important;
    right: 0 !important;
    transform: translate(var(--sidebar-width), 0) !important;
}

/* Visible sidebar returns to its normal position */
html.rachamim-rtl body.visible-sidebar .page-sidebar {
    transform: translate(0, 0) !important;
}

/* Sidebar itself uses RTL */
html.rachamim-rtl .page-sidebar,
html.rachamim-rtl .page-sidebar-inner,
html.rachamim-rtl .page-sidebar .nav-menu {
    direction: rtl !important;
    text-align: right !important;
}

/* Navigation rows */
html.rachamim-rtl .page-sidebar .nav-menu .menu-item {
    direction: rtl !important;
    text-align: right !important;
}

/* Reverse menu content so icons appear on the right */
html.rachamim-rtl .page-sidebar .nav-menu .menu-item > a,
html.rachamim-rtl .page-sidebar .nav-menu .menu-item > button {
    direction: rtl !important;
    text-align: right !important;
}

/* Footer */
html.rachamim-rtl .page-sidebar-bottom {
    float: right !important;
    direction: rtl !important;
    text-align: right !important;
}

html.rachamim-rtl .page-sidebar.fixed-bottom .page-sidebar-bottom {
    left: auto !important;
    right: 0 !important;
}

/* Theme switcher */
html.rachamim-rtl .sidebar-theme-switcher {
    float: right !important;
    direction: rtl !important;
}

/*
 * Desktop layout:
 * MediaCMS normally reserves the sidebar on the LEFT using padding-left.
 * Hebrew mode reserves the same space on the RIGHT.
 */
@media screen and (min-width: 768px) {
    html.rachamim-rtl body.visible-sidebar .page-main-wrap {
        padding-left: 0 !important;
        padding-right: var(--sidebar-width) !important;
    }

    /*
     * Media pages intentionally disable the normal sidebar padding
     * in the original MediaCMS layout. Preserve that behaviour.
     */
    html.rachamim-rtl body.visible-sidebar #page-media .page-main-wrap,
    html.rachamim-rtl body.visible-sidebar #page-media-video .page-main-wrap,
    html.rachamim-rtl body.visible-sidebar #page-media-audio .page-main-wrap,
    html.rachamim-rtl body.visible-sidebar #page-media-image .page-main-wrap,
    html.rachamim-rtl body.visible-sidebar #page-media-pdf .page-main-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Smooth sidebar/content movement */
html.rachamim-rtl body.sliding-sidebar .page-main-wrap {
    transition-property: padding-right !important;
    transition-duration: 0.2s;
}

/*
 * User forms have their own sidebar spacing rule in MediaCMS.
 * Mirror it for Hebrew.
 */
@media screen and (min-width: 1220px) {
    html.rachamim-rtl body.visible-sidebar .user-action-form-wrap {
        padding-right: 0 !important;
        padding-left: var(--sidebar-width) !important;
    }

    html.rachamim-rtl body.sliding-sidebar .user-action-form-wrap {
        transition-property: padding-left !important;
    }
}

/* Keep URLs / technical LTR content readable */
html.rachamim-rtl .page-sidebar a[href^="http"],
html.rachamim-rtl .page-sidebar a[href^="https"] {
    unicode-bidi: plaintext;
}


/* ============================================================
   Rachamim Tube - RTL Header compatibility fix
   Keep Hebrew sidebar on the right without breaking the header
   ============================================================ */

/*
 * Do NOT mirror the main header.
 * Keep the original MediaCMS header layout in LTR mode.
 */
html.rachamim-rtl header,
html.rachamim-rtl .page-header,
html.rachamim-rtl .page-header-inner,
html.rachamim-rtl .header-left,
html.rachamim-rtl .header-right,
html.rachamim-rtl .header-content {
    direction: ltr !important;
}

/*
 * Header must stay above the RTL sidebar so account/avatar
 * menus are never hidden behind the sidebar.
 */
html.rachamim-rtl header,
html.rachamim-rtl .page-header {
    position: relative;
    z-index: 20000 !important;
}

/*
 * Account/avatar dropdowns must always appear above sidebar.
 */
html.rachamim-rtl .page-header .dropdown,
html.rachamim-rtl .page-header .dropdown-menu,
html.rachamim-rtl header .dropdown,
html.rachamim-rtl header .dropdown-menu,
html.rachamim-rtl .user-menu,
html.rachamim-rtl .user-menu-dropdown {
    z-index: 30000 !important;
}

/*
 * Restore logo/brand dimensions.
 * RTL must not squeeze the MediaCMS logo container.
 */
html.rachamim-rtl .page-header .logo,
html.rachamim-rtl .page-header .site-logo,
html.rachamim-rtl .page-header .brand,
html.rachamim-rtl header .logo,
html.rachamim-rtl header .site-logo {
    flex-shrink: 0 !important;
    width: auto !important;
    max-width: none !important;
}

/*
 * Do not shrink logo images/SVGs in Hebrew mode.
 */
html.rachamim-rtl .page-header .logo img,
html.rachamim-rtl .page-header .logo svg,
html.rachamim-rtl .page-header .site-logo img,
html.rachamim-rtl .page-header .site-logo svg,
html.rachamim-rtl header .logo img,
html.rachamim-rtl header .logo svg {
    width: auto !important;
    max-width: none !important;
    flex-shrink: 0 !important;
}

/*
 * Sidebar remains RTL and on the right.
 * Explicitly isolate its direction from the header.
 */
html.rachamim-rtl .page-sidebar,
html.rachamim-rtl .page-sidebar-inner,
html.rachamim-rtl .page-sidebar .nav-menu {
    direction: rtl !important;
}

/*
 * Prevent the sidebar from covering header dropdowns.
 */
html.rachamim-rtl .page-sidebar {
    z-index: 9999 !important;
}


/* ============================================================
   Rachamim Tube - Hebrew RTL Header Position Swap
   Hebrew only:
   HeaderLeft  -> right
   HeaderRight -> left
   Search      -> center
   ============================================================ */

html.rachamim-rtl .page-header {
    direction: ltr !important;
}

/* Hamburger + logo -> RIGHT */
html.rachamim-rtl .page-header .page-header-left {
    left: auto !important;
    right: 0 !important;
}

/* Upload + avatar -> LEFT */
html.rachamim-rtl .page-header .page-header-right {
    right: auto !important;
    left: 0 !important;
}

/*
 * Keep the internal order of the left header group unchanged,
 * so the logo is not resized or distorted.
 */
html.rachamim-rtl .page-header .page-header-left,
html.rachamim-rtl .page-header .page-header-left > div {
    direction: ltr !important;
}

/*
 * Keep Upload + Avatar in their original internal order.
 * Only the complete group changes side.
 */
html.rachamim-rtl .page-header .page-header-right,
html.rachamim-rtl .page-header .page-header-right > div {
    direction: ltr !important;
}

/* Keep header popups above the RTL sidebar */
html.rachamim-rtl .page-header {
    z-index: 20000 !important;
}

html.rachamim-rtl .page-header .popup,
html.rachamim-rtl .page-header .popup-content,
html.rachamim-rtl .page-header .dropdown-menu {
    z-index: 30000 !important;
}


/* ============================================================
   Rachamim Tube - Hebrew RTL Header Spacing Mirror
   Exact mirror of the original MediaCMS header spacing
   ============================================================ */

/*
 * Original English:
 * .page-header-left { left:0; padding-right:104px; }
 *
 * Hebrew mirror:
 * move it to the right and mirror the reserved padding.
 */
html.rachamim-rtl .page-header-left {
    left: auto !important;
    right: 0 !important;

    padding-right: 0 !important;
    padding-left: 104px !important;
}

/*
 * Original children use:
 * padding-left:16px;
 * padding-right:16px;
 *
 * Keep exactly the same visual spacing.
 */
@media screen and (min-width: 710px) {
    html.rachamim-rtl .page-header-left > * > * {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/*
 * Original English:
 * .page-header-right { right:0; padding-right:header-padding; }
 *
 * Hebrew mirror:
 * group moves to the left and outer padding moves to the left.
 */
html.rachamim-rtl .page-header-right {
    right: auto !important;
    left: 0 !important;

    padding-right: 0 !important;
    padding-left: 16px !important;
}

/*
 * Original right-header children have padding on their right.
 * Mirror that padding to their left.
 */
html.rachamim-rtl .page-header-right > * > * {
    padding-right: 0 !important;
    padding-left: 6px !important;
}

/*
 * Avatar already has its own fixed width in MediaCMS.
 * Do not add extra padding around it.
 */
html.rachamim-rtl .page-header-right .user-thumb {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/*
 * Mirror account popup positioning because the whole account
 * group now lives on the left side of the header.
 */
html.rachamim-rtl .page-header-right .popup {
    right: auto !important;
    left: 8px !important;
}

/* Mobile equivalent of the original header padding */
@media screen and (max-width: 709px) {
    html.rachamim-rtl .page-header-right {
        padding-right: 0 !important;
        padding-left: 8px !important;
    }
}


/* ============================================================
   Rachamim Tube - Media removal popup mouse click fix
   Ensure popup and its action buttons receive pointer events
   above any surrounding overlay/layer.
   ============================================================ */

.media-author-actions {
    position: relative !important;
    z-index: 10000 !important;
}

.media-author-actions .popup {
    z-index: 50000 !important;
    pointer-events: auto !important;
}

.media-author-actions .popup * {
    pointer-events: auto !important;
}

.media-author-actions .popup-message-bottom {
    position: relative !important;
    z-index: 50001 !important;
    pointer-events: auto !important;
}

.media-author-actions .popup-message-bottom button {
    position: relative !important;
    z-index: 50002 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.media-author-actions .popup-message-bottom button.proceed-comment-removal,
.media-author-actions .popup-message-bottom button.cancel-comment-removal {
    pointer-events: auto !important;
    cursor: pointer !important;
}


/* ============================================================
   Rachamim Tube - RTL floating Admin / Lock buttons
   Hebrew only: move floating controls from right to left
   ============================================================ */

html.rachamim-rtl #mediacms-pin-logout {
    right: auto !important;
    left: 22px !important;
}

@media (max-width: 640px) {
    html.rachamim-rtl #mediacms-pin-logout {
        right: auto !important;
        left: 14px !important;
    }
}


/* Rachamim Tube - RTL Admin floating button */
html.rachamim-rtl #rachamim-admin-button {
    right: auto !important;
    left: 22px !important;
}

@media (max-width: 640px) {
    html.rachamim-rtl #rachamim-admin-button {
        right: auto !important;
        left: 14px !important;
    }
}


/* ============================================================
   Rachamim Tube - Hebrew RTL video seekbar fix
   Keep video player controls/timeline LTR so seeking direction
   matches mouse movement.
   ============================================================ */

html.rachamim-rtl .video-js,
html.rachamim-rtl .video-js .vjs-control-bar,
html.rachamim-rtl .video-js .vjs-progress-control,
html.rachamim-rtl .video-js .vjs-progress-holder,
html.rachamim-rtl .video-js .vjs-play-progress,
html.rachamim-rtl .video-js .vjs-load-progress,
html.rachamim-rtl .video-js .vjs-slider {
    direction: ltr !important;
}

/* ============================================================
   Rachamim Tube - Hebrew Contact form RTL
   ============================================================ */

html.rachamim-rtl .rachamim-contact-he {
    direction: rtl !important;
    text-align: right !important;
}

html.rachamim-rtl .rachamim-contact-he h1,
html.rachamim-rtl .rachamim-contact-he label,
html.rachamim-rtl .rachamim-contact-he .control-label {
    direction: rtl !important;
    text-align: right !important;
}

html.rachamim-rtl .rachamim-contact-he input,
html.rachamim-rtl .rachamim-contact-he textarea {
    direction: rtl !important;
    text-align: right !important;
}

html.rachamim-rtl .rachamim-contact-he .form-actions,
html.rachamim-rtl .rachamim-contact-he .buttonHolder {
    text-align: right !important;
}


/* ============================================================
   Rachamim Tube - Managed Branding Logo Safety
   Prevent uploaded branding images from stretching or overflowing.
   ============================================================ */

.site-logo img,
.logo img,
.sidebar-logo img,
.header-logo img,
img.site-logo,
img.logo {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 220px !important;
    max-height: 64px !important;
    object-fit: contain !important;
    object-position: center !important;
}

@media (max-width: 640px) {
    .site-logo img,
    .logo img,
    .sidebar-logo img,
    .header-logo img,
    img.site-logo,
    img.logo {
        max-width: 170px !important;
        max-height: 54px !important;
    }
}