/* =====================================
   BASE WIDGET & THUMBNAIL
   ===================================== */
.mtrxf-video-wrapper { position: relative; overflow: hidden; cursor: pointer; transition: all 0.3s ease; width: 100%; display: block; }
.mtrxf-video-thumbnail, .mtrxf-video-iframe-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; margin: 0; padding: 0; }
.mtrxf-thumb-img, .mtrxf-video-iframe-wrapper iframe { width: 100%; height: 100%; object-fit: cover; border: none; transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
/* Lightbox ke andar video screen height se bahar na jaye uski calculation */
.mtrxf-lightbox-overlay .mtrxf-video-iframe-wrapper {
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    max-height: calc(100vh - 120px);
    max-width: calc((100vh - 120px) * (16 / 9));
}
.mtrxf-lightbox-overlay .is-small-mode + .mtrxf-iframe-parent-wrapper .mtrxf-video-iframe-wrapper{
    max-width: 100%;
}
/* Play Button Styling */
.mtrxf-play-button, .mtrxf-play-image { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s ease; z-index: 2; }
.mtrxf-play-button-icon { width: 80px; height: 80px; background-color: rgba(0, 0, 0, 0.45); border: 2px solid #FFFFFF; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; }
.mtrxf-play-button-icon i { color: #FFFFFF; font-size: 19px; }
.mtrxf-play-button i { color: #FFFFFF; font-size: 24px; transition: all 0.3s ease; margin-left: 4px; }
.mtrxf-play-button img { width: 100%; height: 100%; object-fit: contain; }

/* Duration Badge */
.mtrxf-video-duration { position: absolute; background-color: rgba(0, 0, 0, 0.85); color: #fff; font-size: 12px; font-family: sans-serif; padding: 4px 8px; border-radius: 4px; z-index: 3; pointer-events: none; line-height: 1; display: inline-flex; align-items: center; gap: 5px; }
.mtrxf-video-duration svg { width: 1em; height: 1em; fill: currentColor; }

/* Hover Effects */
.mtrxf-video-wrapper:hover .mtrxf-hover-zoom-in .mtrxf-thumb-img { transform: scale(1.1); }
.mtrxf-video-wrapper:hover .mtrxf-hover-zoom-out .mtrxf-thumb-img { transform: scale(0.9); }
.mtrxf-video-wrapper:hover .mtrxf-hover-fade .mtrxf-thumb-img { opacity: 0.7; }
.mtrxf-video-wrapper:hover .mtrxf-hover-rotate .mtrxf-thumb-img { transform: rotate(5deg); }

/* Skeleton Loader Animation */
@keyframes mtrxf-shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } }
.mtrxf-video-thumbnail, .mtrxf-playlist-thumb { background: #16161a; background-image: linear-gradient(to right, #16161a 0%, #2a2a32 20%, #16161a 40%, #16161a 100%); background-repeat: no-repeat; background-size: 2000px 100%; animation: mtrxf-shimmer 2s infinite linear forwards; }
.mtrxf-thumb-img { background: transparent; position: relative; z-index: 1; }

/* =====================================
   Descriptiom Area Styling
   ===================================== */
.mtrxf-video-desc-bottom { color: #16161a; font-family: sans-serif; font-size: 14px; padding: 15px; }
.mtrxf-desc-title { font-weight: bold; margin-bottom: 8px; font-size: 16px; color: #000; }
/* =====================================
   TOOLBAR & UI ELEMENTS
   ===================================== */
.mtrxf-player-toolbar { display: flex; justify-content: space-between; align-items: center; background: #16161a; padding: 6px; color: #fff; font-family: sans-serif; font-size: 13px; user-select: none;  }
.mtrxf-toolbar-modes { display: flex; gap: 8px; align-items: center; }/* Update: Button ab Column layout me hai taaki text icon ke neeche aaye */
.mtrxf-toolbar-btn { 
    background: #232329; 
    border: 1px solid #3f3f46; 
    color: #a1a1aa; 
    padding: 4px 4px; /* Padding thodi badhayi taaki text fit aaye */
    font-size: 14px; /* Icon ka size thoda bada kiya */
    border-radius: 4px; 
    cursor: pointer; 
    display: inline-flex; 
    flex-direction: column; /* NAYA: Items ko upar-neeche stack karega */
    align-items: center; 
    justify-content: center; 
    height: auto;
    min-width: 40px;
    gap: 4px;
    transition: all 0.2s ease; 
}
.mtrxf-toolbar-btn:hover, .mtrxf-toolbar-btn.active, .mtrxf-toolbar-btn:focus{ 
    background: #dab875; 
    color: #000; 
    border-color: #dab875; 
}

/* NAYA: Chhote Text ki Styling */
.mtrxf-btn-label {
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1;
}
.mtrxf-toolbar-btn:hover, .mtrxf-toolbar-btn.active { background: #dab875; color: #000; border-color: #dab875; }
.mtrxf-toolbar-right { display: flex; align-items: center; }
.mtrxf-toolbar-close { font-size: 24px; color: #fff; cursor: pointer; line-height: 1; transition: color 0.2s; padding: 0 4px; }
.mtrxf-toolbar-close:hover { color: #ff4d4d; }

/* Dock Controls */
.mtrxf-lightbox-overlay.dock-left{ padding: 20px 20px 20px 80px; }
.mtrxf-lightbox-overlay.dock-right{ padding: 20px 80px 20px 20px; }
.mtrxf-lightbox-overlay.dock-top{ padding: 80px 20px 20px 20px; }
.mtrxf-lightbox-overlay.dock-bottom{ padding:20px 20px 80px 20px; }

@media (max-width:767px){
    .mtrxf-lightbox-overlay.dock-left{ padding: 0px 00px 00px 80px; }
    .mtrxf-lightbox-overlay.dock-right{ padding: 0px 80px 0px ; }
    .mtrxf-lightbox-overlay.dock-top{ padding: 80px 0px 0px 0px; }
    .mtrxf-lightbox-overlay.dock-bottom{ padding:0px 0px 80px 0px; }
}

.mtrxf-dock-controls { display: flex; gap: 4px; align-items: center; border-right: 1px solid #3f3f46; padding-right: 10px; margin-right: 10px;  }
/* Update: Dock buttons ko bhi mobile nav (column) style me kiya */
.mtrxf-dock-btn { 
    background: transparent; 
    border: 1px solid transparent; 
    color: #a1a1aa; 
    padding: 4px; 
    display: inline-flex; 
    flex-direction: column; /* Text ko icon ke neeche layega */
    align-items: center; 
    justify-content: center; 
    border-radius: 4px; 
    cursor: pointer; 
    font-size: 13px; 
    min-width: 36px; /* Width adjust ki */
    height: auto; 
    gap: 4px; 
    transition: all 0.2s ease; 
}
.mtrxf-dock-btn:hover, .mtrxf-dock-btn.active { background: #3f3f46; color: #fff; }

/* Screen Docked Modes */
.mtrxf-player-toolbar.screen-docked { position: fixed; z-index: 100001; border-radius:6px; }
.dock-top .mtrxf-player-toolbar.screen-docked { top: 5px; left: 5px; right: 5px; width: calc(100% - 10px); border-bottom: 1px solid #232329; flex-direction: row; }
.dock-bottom .mtrxf-player-toolbar.screen-docked{ bottom: 5px; left: 5px; right: 5px; width: calc(100% - 10px); border-top: 1px solid #232329; flex-direction: row; }
.dock-left .mtrxf-player-toolbar.screen-docked { top: 5px; left: 5px; height: calc(100% - 10px); border-right: 1px solid #232329; flex-direction: column; padding: 12px 10px; width: auto; }
.dock-right .mtrxf-player-toolbar.screen-docked { top: 5px; right: 5px; height: calc(100% - 10px); border-left: 1px solid #232329; flex-direction: column; padding: 12px 10px; width: auto; }

.dock-left .mtrxf-player-toolbar.screen-docked .mtrxf-toolbar-modes,
.dock-right .mtrxf-player-toolbar.screen-docked .mtrxf-toolbar-modes { flex-direction: column; width: 100%; align-items: stretch; }
.dock-left .mtrxf-player-toolbar.screen-docked .mtrxf-toolbar-btn,
.dock-right .mtrxf-player-toolbar.screen-docked .mtrxf-toolbar-btn { justify-content: center; }
.dock-left .mtrxf-player-toolbar.screen-docked .mtrxf-toolbar-right,
.dock-right .mtrxf-player-toolbar.screen-docked .mtrxf-toolbar-right { flex-direction: column; margin-top: auto; padding-top: 15px; }
.dock-left .mtrxf-player-toolbar.screen-docked .mtrxf-dock-controls,
.dock-right .mtrxf-player-toolbar.screen-docked .mtrxf-dock-controls { flex-direction: column; border-right: none; border-bottom: 1px solid #3f3f46; padding-right: 0; padding-bottom: 10px; margin-right: 0; margin-bottom: 10px; }

/* Video Docked Mode (Small View) */
.mtrxf-player-toolbar.video-docked { position: relative; width: 100%; border-bottom: 1px solid #232329; border-radius: 6px 6px 0 0; }
.mtrxf-player-toolbar.is-small-mode { cursor: move; }
.mtrxf-player-toolbar.is-small-mode .mtrxf-dock-controls { display: none; }

/* =====================================
   LOADING INDICATORS & SPINNERS
   ===================================== */
.mtrxf-loader-container, .mtrxf-autoplay-loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 100; pointer-events: none; }
.mtrxf-autoplay-wrapper { position: relative; background: #000; overflow: hidden; }
.mtrxf-video-wrapper.mtrxf-has-autoplay { overflow: visible; }
.mtrxf-loader-container { width: 48px; height: 48px; }
.mtrxf-spinner { width: 44px; height: 44px;  border: 5px solid rgba(255, 255, 255, 0.22); border-top-color: #ffffff; border-radius: 50%; animation: mtrxf-peertube-spin 0.8s linear infinite; }
.mtrxf-autoplay-loader .mtrxf-spinner { width: 28px; height: 28px; border-width: 3px; }
.mtrxf-loading-text { display: none; color: #fff; }

@keyframes mtrxf-peertube-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* =====================================
   Timestamp & Timeline Markers
   ===================================== */

.mtrxf-timestamp { color: #222222; text-decoration: none; font-weight: 600; background: #eadda1; padding: 2px 6px; border-radius: 4px; display: inline-block; margin: 2px 2px; cursor: pointer; transition: all 0.2s ease; }
.mtrxf-timestamp:hover { background: #dab875; color: #000; }

.mtrxf-timeline-markers { position: absolute; left: 8px; right: 8px; bottom: 36px; height: 12px; pointer-events: none; z-index: 50; opacity: 0; transition: opacity 0.2s ease; }
.mtrxf-timeline-markers.mtrxf-controls-visible { opacity: 1; }
.mtrxf-timeline-marker { position: absolute; top: 50%; width: 7px; height: 7px; padding: 0; margin: 0; transform: translate(-50%, -50%); border: none; border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.6); cursor: pointer; pointer-events: auto; z-index: 51; }
.mtrxf-timeline-marker:hover { width: 11px; height: 11px; background: #ff0000; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 2px 8px rgba(0, 0, 0, 0.7); }
.mtrxf-timeline-marker span { display: block; width: 100%; height: 100%; border-radius: 50%; }

/* =====================================
   LIGHTBOX OVERLAY & PLAYER LAYOUT
   ===================================== */
.mtrxf-lightbox-overlay { background: #fff;  overflow-x: hidden; overflow-y: auto; }
.mtrxf-lightbox-layout { display: flex; width: 95%; max-width: 1400px; gap: 20px; transition: all 0.4s ease; align-items: flex-start; }
.mtrxf-lightbox-player-area { flex: 1; display: flex; flex-direction: column; min-width: 0; align-self: stretch !important; }
.mtrxf-player-container { display: flex; flex-direction: column; position: relative; }

/* Transparent Gap logic for Normal Mode with description */
.mtrxf-player-container.desc-visible:not(.is-small-mode-container) { background: transparent; box-shadow: none; gap: 20px; }
.mtrxf-player-container.desc-visible:not(.is-small-mode-container) > .mtrxf-player-toolbar { background: #16161a; border-radius: 6px 6px 0 0; }
/* 1. Video design fix */
.mtrxf-player-container.desc-visible:not(.is-small-mode-container) .mtrxf-video-iframe-wrapper { 
    background: #000; 
    border-radius: 0 0 6px 6px; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); 
}

/* NAYA CODE: Extreme Strictness ke sath Parent wrapper ko sticky banana.
   Dono layout structure (.mtrxf-lightbox-layout aur .is-screen-mode-layout) ko directly target kiya. */
.mtrxf-lightbox-layout .mtrxf-player-container > .mtrxf-iframe-parent-wrapper,
.mtrxf-lightbox-layout.is-screen-mode-layout .mtrxf-player-container > .mtrxf-iframe-parent-wrapper {
    position: sticky !important;
    top: -20px !important; 
    z-index: 40 !important;
    background: #fafafa !important; /* Safety ke liye dark background taaki scroll hone par white flash na aaye */
    align-self: flex-start !important;
}

/* 2. Text (Description) ko video ke peeche (under) se scroll karane ke liye */
.mtrxf-player-container.desc-visible:not(.is-small-mode-container) > .mtrxf-video-desc-bottom { 
    background: #ffffff; 
    border-radius: 6px; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); 
    height: auto; 
    max-height: none; 
    margin: 0; 
    overflow-y: visible; 
    
    /* NAYA CODE: Text hamesha video ke peeche rahega */
    position: relative;
    z-index: 10; 
}


/* =====================================
   SMALL MODE STYLING
   ===================================== */
.mtrxf-player-container.is-small-mode-container { display: flex; flex-direction: column; background: #ffffff; box-shadow: 0 20px 50px rgba(0,0,0,0.5); border-radius: 6px; height: auto; max-height: none; overflow: visible; }

/* NAYA: Fix for Sticky Wrapper in Small Mode */
.mtrxf-player-container.is-small-mode-container .mtrxf-sticky-left-wrapper { position: relative !important; width: 100% !important; top: auto !important; bottom: auto !important; background: transparent !important; padding: 0 !important; z-index: 1; }
.mtrxf-player-container.is-small-mode-container .mtrxf-iframe-parent-wrapper { width: 100% !important; background: transparent !important; padding: 0 !important; }
.mtrxf-player-container.is-small-mode-container .mtrxf-video-iframe-wrapper { width: 100% !important; height: auto; max-height: none; flex: none; min-height: 0; aspect-ratio: 16 / 9; margin: 0 !important; border-radius: 0 0 6px 6px !important; box-shadow: none !important; }

.mtrxf-player-container.is-small-mode-container .mtrxf-video-desc-bottom { width: 100%; height: auto; max-height: 150px; border-radius: 0 0 6px 6px; margin-top: 0; position: relative; }

/* Small Mode Playlist & Timestamps Layout */
.mtrxf-player-container.is-small-mode-container .mtrxf-small-mode-sidebar,
.mtrxf-player-container.is-small-mode-container .mtrxf-lightbox-playlist-area { 
    position: absolute !important; 
    top: 44px !important; 
    right: 0 !important; 
    margin-right: 0 !important; 
    width: 240px !important; 
    height: calc(100% - 44px) !important; 
    max-height: 100% !important; 
    background: rgba(22, 22, 26, 0.95) !important; 
    padding: 10px !important; 
    border-radius: 0 0 6px 0 !important; 
    box-shadow: -5px 0 15px rgba(0,0,0,0.5) !important; 
    z-index: 10 !important; 
    overflow-y: auto !important; 
    left: auto !important; 
    bottom: auto !important; 
    align-self: auto !important; 
}
.mtrxf-player-container.is-small-mode-container .mtrxf-small-mode-sidebar::-webkit-scrollbar,
.mtrxf-player-container.is-small-mode-container .mtrxf-lightbox-playlist-area::-webkit-scrollbar { width: 4px; }

.mtrxf-player-container.is-small-mode-container .mtrxf-playlist-thumb { width: 75px; height: 42px; }
.mtrxf-player-container.is-small-mode-container .mtrxf-playlist-title { font-size: 11px; line-height: 1.3; }
.mtrxf-player-container.is-small-mode-container .mtrxf-playlist-item { padding: 6px; gap: 8px; }

/* Headers fix for small mode */
.mtrxf-player-container.is-small-mode-container .mtrxf-playlist-header,
.mtrxf-player-container.is-small-mode-container .mtrxf-chapters-header { 
    font-size: 13px; 
    margin: -10px -10px 8px -10px !important; 
    padding: 10px 10px 8px 10px !important; 
    top: -10px !important; 
}

/* Small Mode Thumbnail Message */
.mtrxf-video-thumbnail.is-playing-small::after { content: "This is Playing"; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); color: #dab875; display: flex; justify-content: center; align-items: center; font-size: 18px; font-weight: bold; font-family: sans-serif; z-index: 10; backdrop-filter: blur(3px); pointer-events: none; }
.mtrxf-video-thumbnail.is-playing-small .mtrxf-play-button { display: none; }
/* =====================================
   PLAYLIST STYLING (NORMAL)
   ===================================== */
.mtrxf-lightbox-playlist-area { background: #16161a; display: flex; flex-direction: column; gap: 12px; border-radius:6px; padding: 15px; width: 380px; }
/* NAYA STICKY CODE START */
.mtrxf-playlist-header,
.mtrxf-chapters-header { /* NAYA: Dono ko ek jaisa sticky banaya */
    position: sticky; 
    top: -20px; /* Scroll karne par upar ruk jayega */
    background: #16161a; 
    z-index: 20; 
    /* Parent ki padding ko cover karne ke liye negative margin */
    margin: -15px -15px 10px -15px; 
    padding: 15px 15px 10px 15px; 
    border-radius: 6px 6px 0 0;
    
    color: #fff; 
    font-size: 16px; 
    font-weight: 600; 
    border-bottom: 1px solid #232329; 
    font-family: sans-serif; 
}
/* NAYA STICKY CODE END */
.mtrxf-playlist-item { display: flex; gap: 12px; cursor: pointer; padding: 10px; border-radius: 6px; transition: all 0.3s ease; background: #232329; border: 1px solid transparent; }
.mtrxf-playlist-item:hover { background: #2a2a32; border-color: #dab875; }
.mtrxf-playlist-item.active { background: #dab875; color: #000; }
.mtrxf-playlist-item.active .mtrxf-playlist-title { color: #000; }
.mtrxf-playlist-thumb { width: 130px; height: 73px; border-radius: 4px; overflow: hidden; flex-shrink: 0; position: relative; }
.mtrxf-playlist-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mtrxf-playlist-info { display: flex; flex-direction: column; justify-content: center; }
.mtrxf-playlist-title { font-size: 14px; font-family: sans-serif; font-weight: 600; color: #fff; line-height: 1.4; }

/* =====================================
   RESPONSIVE ADJUSTMENTS & DOCK SHIFTS
   ===================================== */

@media (max-width: 992px) {
    .mtrxf-lightbox-layout { flex-direction: column; margin: 10px auto; width: 90%;}
    .mtrxf-lightbox-playlist-area { width: 100%; max-height: 350px; }
}

@media (max-width: 768px) {
    .mtrxf-dock-controls { display: none; }
    .mtrxf-player-toolbar { padding: 8px 10px; overflow-x: auto; flex-wrap: nowrap; }
    .mtrxf-player-toolbar::-webkit-scrollbar { display: none; }
    .mtrxf-video-desc-bottom a, .mtrxf-playlist-header a { width: 100%; justify-content: center;  font-size: 13px; padding: 10px 15px; }
    .mtrxf-toolbar-modes { gap: 6px; }
    .mtrxf-hide-mobile{display: none !important;}
}

@media (max-width: 767px) {
    .mtrxf-lightbox-overlay > .mtrxf-player-container.is-screen-mode-container,
    .mtrxf-player-container.is-screen-mode-container > .mtrxf-video-iframe-wrapper,
    .mtrxf-lightbox-layout.is-screen-mode-layout .mtrxf-lightbox-player-area > .mtrxf-video-iframe-wrapper,
    .mtrxf-lightbox-layout.is-screen-mode-layout.is-playlist-hidden .mtrxf-lightbox-player-area > .mtrxf-video-iframe-wrapper {
        width: min(100%, calc((100dvh - 80px) * 16 / 9));
    }
    .mtrxf-lightbox-overlay .mtrxf-video-iframe-wrapper{
        max-height: calc(100vh - 80px);
        max-width: calc((100vh - 80px) * (16 / 9));
    }
}

/* TIMESTAMPS */
.mtrxf-timestamp-item{margin-bottom: 12px; cursor: pointer; font-size: 14px; display: flex; align-items: flex-start; gap: 10px; font-family: sans-serif; transition: all 0.2s;}
.mtrxf-timestamp-time{color: #dab875; font-weight: bold; flex-shrink: 0; background: #232329; padding: 2px 6px; border-radius: 4px;}
.mtrxf-timestamp-label{line-height: 1.4; color: #a1a1aa;}
/* =====================================
   UNIFIED INLINE PLAYER SHELL
   Keep the media stage at the configured ratio and let the same widget
   container expand below it for description content.
   ===================================== */
.mtrxf-video-wrapper.mtrxf-inline-expanded {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
    cursor: default;
}
.mtrxf-video-wrapper.mtrxf-inline-expanded > .mtrxf-video-stage {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    min-width: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
    border-radius: inherit;
}
.mtrxf-video-wrapper.mtrxf-inline-expanded .mtrxf-video-stage > .mtrxf-video-thumbnail,
.mtrxf-video-wrapper.mtrxf-inline-expanded .mtrxf-video-stage > .mtrxf-video-iframe-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.mtrxf-video-wrapper.mtrxf-inline-expanded .mtrxf-video-stage > .mtrxf-video-iframe-wrapper {
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    margin: 0;
}
.mtrxf-video-wrapper.mtrxf-inline-expanded .mtrxf-inline-description {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    clear: both;
    box-sizing: border-box;
}
.mtrxf-video-wrapper.mtrxf-inline-expanded .mtrxf-video-desc-bottom {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}
.mtrxf-video-wrapper.mtrxf-inline-expanded .mtrxf-inline-info-btn {
    z-index: 20;
}
/* Sidebar in Small Mode */
.mtrxf-small-mode-sidebar {
    position: absolute !important;
    top: 44px !important;
    right: 0 !important;
    margin-right: 0 !important;
    width: 240px !important;
    height: calc(100% - 44px) !important;
    max-height: 100% !important;
    background: rgba(22, 22, 26, 0.95) !important;
    padding: 10px !important;
    border-radius: 0 0 6px 0 !important;
    box-shadow: -5px 0 15px rgba(0,0,0,0.5) !important;
    z-index: 10 !important;
    overflow-y: auto !important;
    left: auto !important;
    bottom: auto !important;
}

/* Lightbox media frame: one predictable 16:9 sizing rule across player modes. */
.mtrxf-lightbox-overlay .mtrxf-player-container > .mtrxf-video-iframe-wrapper {
    position: relative;
    flex: 0 0 auto;
    width: min(100%, calc((100dvh - 120px) * 16 / 9));
    height: auto !important;
    aspect-ratio: 16 / 9;
    max-width: 100%;
    max-height: none;
    min-width: 0;
    overflow: hidden;
    background: #000;
}
.mtrxf-lightbox-overlay .mtrxf-player-container > .mtrxf-video-iframe-wrapper > iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    border: 0;
}
/* =====================================
   TOOLBAR DROPDOWN SMART POSITIONS
   ===================================== */
.mtrxf-toolbar-action-menu { 
    position: absolute; 
}

/* 1. Jab Toolbar Bottom mein ho (Dropdown UPAR khulega) */
.dock-bottom .mtrxf-toolbar-action-menu {
    bottom: calc(100% + 10px) !important; 
    left: 0 !important; 
    top: auto !important; 
    right: auto !important;
}

/* 2. Jab Toolbar Top mein ho (Dropdown NEECHE khulega) */
.dock-top .mtrxf-toolbar-action-menu {
    top: calc(100% + 10px) !important; 
    left: 0 !important; 
    bottom: auto !important; 
    right: auto !important;
}

/* 3. Jab Toolbar Left mein ho (Dropdown RIGHT mein khulega) */
.dock-left .mtrxf-toolbar-action-menu {
    top: 0 !important; 
    left: calc(100% + 10px) !important; 
    bottom: auto !important; 
    right: auto !important;
}

/* 4. Jab Toolbar Right mein ho (Dropdown LEFT mein khulega) */
.dock-right .mtrxf-toolbar-action-menu {
    top: 0 !important; 
    right: calc(100% + 10px) !important; 
    bottom: auto !important; 
    left: auto !important;
}

/* 5. Jab Small Mode (Picture-in-Picture) ho (Dropdown NEECHE khulega) */
.mtrxf-player-toolbar.video-docked .mtrxf-toolbar-action-menu {
    top: calc(100% + 10px) !important; 
    left: 0 !important; 
    bottom: auto !important; 
    right: auto !important;
}


/* =====================================
   STICKY SCROLL MODE
   ===================================== */
/* 1. Parent Wrapper: Ye hamesha 100% rahega aur text ko peeche chupayega */
.mtrxf-iframe-parent-wrapper {
    width: 100% !important;
    background: #ffffff; /* Solid background text ko hide karega */
    z-index: 40;
    transition: all 0.3s ease;
}

.is-scrolled-sticky .mtrxf-iframe-parent-wrapper {
    position: sticky !important;
    top: -20px !important; /* Top se thoda gap adjust karne ke liye */
    z-index: 50;
    padding-top: 10px;    /* Shrink hone par upar aur neeche thoda breathing space */
    padding-bottom: 10px; 
    background-color: #f1f1f1;
}

/* 2. Inner Video Wrapper: Shrink sirf ye hoga */
.mtrxf-iframe-parent-wrapper .mtrxf-video-iframe-wrapper {
    transition: all 0.3s ease;
    width: 100%;
    margin: 0 auto;
}
/* Normal layout mein (jab playlist wagera visible ho) toh 85% shrink hoga */
.is-scrolled-sticky .mtrxf-iframe-parent-wrapper .mtrxf-video-iframe-wrapper {
    width: 85% !important; 
    margin: 0 auto !important; 
}
.is-small-mode-container.is-scrolled-sticky .mtrxf-iframe-parent-wrapper .mtrxf-video-iframe-wrapper{
    width: 100% !important; 
}

/* NAYA: Jab Wide Mode (Theatre Mode) on ho, toh aur chhota (65%) ho jayega taaki description padhi ja sake */
.is-screen-mode-layout .is-scrolled-sticky .mtrxf-iframe-parent-wrapper .mtrxf-video-iframe-wrapper {
    width: 60% !important; 
}

/* Title jab video ke sath shrink ho toh center me text ko adjust karne ke liye */
.is-scrolled-sticky .mtrxf-iframe-parent-wrapper .mtrxf-desc-title {
    width: 85% !important; /* Normal mode me video ke barabar */
    margin: 10px auto 0 auto !important;
    text-align: center;
}
.is-screen-mode-layout .is-scrolled-sticky .mtrxf-iframe-parent-wrapper .mtrxf-desc-title {
    width: 60% !important; /* Wide mode me video ke barabar */
}
/* =====================================
   SMART STICKY SIDEBARS (Playlist & Chapters)
   ===================================== */
/* NAYA: '>' arrow lagane se ab ye Sticky CSS Small mode me disturb nahi karega */
/* Playlist aur Chapters ko fix rakhne ka naya smart logic (Bina internal scroll ke) */
.mtrxf-lightbox-layout > .mtrxf-lightbox-playlist-area,
.mtrxf-lightbox-layout > .mtrxf-timestamp-sidebar {
    position: sticky !important;
    align-self: flex-start !important; 
    top: 20px !important; /* Agar playlist chhoti h, toh top se sticky hogi */
    bottom: auto !important;
    margin-bottom: 20px !important;
    /* Height restriction hata diya, taaki internal scroll na aaye */
    max-height: none !important; 
    overflow-y: visible !important; 
}

/* Jab playlist lambi ho (tall sidebar), tab wo bottom se sticky hogi taaki last item par aakar ruk jaye */
.mtrxf-lightbox-layout > .mtrxf-lightbox-playlist-area.is-tall-sidebar,
.mtrxf-lightbox-layout > .mtrxf-timestamp-sidebar.is-tall-sidebar {
    top: auto !important;
    bottom: 20px !important; /* Last item par aakar scroll yahan lock ho jayega */
    align-self: flex-end !important; /* Bottom se align karne ke liye zaroori */
}

@media (max-width: 767px) {
    .mtrxf-lightbox-overlay .mtrxf-player-container > .mtrxf-video-iframe-wrapper {
        width: 100%;
        max-width: 100%;
    }
    .is-scrolled-sticky .mtrxf-iframe-parent-wrapper{
        width: 105% !important;
        margin-left: -2.5% !important;
    }
    .is-scrolled-sticky .mtrxf-iframe-parent-wrapper .mtrxf-video-iframe-wrapper, .is-screen-mode-layout .is-scrolled-sticky .mtrxf-iframe-parent-wrapper .mtrxf-desc-title, .is-scrolled-sticky .mtrxf-iframe-parent-wrapper .mtrxf-desc-title{
        width: 100% !important;
    }
    .mtrxf-timestamp{width: auto !important;}
    .is-screen-mode-layout .is-scrolled-sticky .mtrxf-iframe-parent-wrapper .mtrxf-video-iframe-wrapper {
        width: 95% !important; 
    }
    .is-screen-mode-layout.mtrxf-lightbox-layout{margin-top: 0;}
}

/* =====================================
   BUTTON WIDGET STYLING
   ===================================== */
.mtrxf-custom-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative !important;
    width: auto !important;
    height: auto !important;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    box-sizing: border-box;
}

.mtrxf-custom-button.mtrxf-video-thumbnail {
    /* JS ke animation aur gradient background ko hatane ke liye */
    animation: none !important;
    background-image: none !important;
}

.mtrxf-custom-button .mtrxf-btn-icon {
    display: flex;
    align-items: center;
}

.mtrxf-custom-button svg {
    height: 1em;
    width: 1em;
    fill: currentColor;
}
@media (max-width: 558px) {
    .mtrxf-player-toolbar{padding: 4px 4px;}
}