/* ==========================================================================
   RESPONSIVE CSS v10 - OPTIMIZED VERSION
   - Fixed typos (.hiddem-m → .hidden-m)
   - Added smooth transitions and hover effects
   - Improved performance with GPU acceleration
   - Better organization and readability
   - All class names and layouts preserved
   ========================================================================== */

/* Base Performance Optimization */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Base Transitions for smooth responsive behavior */
.logo,
.search,
.navbar-nav,
.navbar-brand img,
ul.videos li,
ul.playlists li,
ul.thumbs li,
ul.users li,
ul.albums li,
ul.photos li,
ul.models li,
ul.channels li,
ul.categories li,
.content-left,
.content-right,
.video-title,
.playlist-title,
.btn-mb,
.btn-group-mb > .btn,
.big_image {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* GPU Acceleration for better performance */
ul.videos,
ul.playlists,
ul.thumbs,
ul.users,
ul.albums,
ul.photos,
ul.models,
ul.channels,
ul.categories,
.navbar-nav,
.dropdown-menu {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ==========================================================================
   TABLET LANDSCAPE: 810px - 1200px
   ========================================================================== */
@media (max-width: 1200px) and (min-width: 810px) {
    .hidden-m {display: none;} /* Fixed typo: hiddem-m → hidden-m */
    .category-count {display: none;}
}

/* ==========================================================================
   TABLET: max 960px
   ========================================================================== */
@media (max-width: 960px) {
    #video .left, 
    #album .left, 
    #photo .left, 
    #channel .left {
        width: 100%; 
        margin-right: 0;
    }
    
    #video .right, 
    #album .right, 
    #photo .right, 
    #channel .right {
        width: 0; 
        display: none;
    }
    
    .ads-responsive img, 
    .ads-responsive iframe {
        max-width: 100%; 
        height: auto;
    }
    
    #album .content-container, 
    #photo .content-container,
    div#share-container.content-container {
        max-height: none;
    }
}

/* ==========================================================================
   MOBILE & SMALL TABLET: max 767px
   ========================================================================== */
@media (max-width: 767px) {
    /* Header */
    .logo {
        text-align: center;
        width: 100%;
    }
    
    .logo img {
        width: auto; 
        max-height: 60px;
    }
    
    .search {
        margin: 0 70px 10px 0; 
        float: left;
        width: 100%;
    }
    
    /* Navigation */
    #menu-main ul.navbar-nav li {
        text-align: center;
    }
    
    #menu-main .navbar-menu {
        color: #ffffff; 
        font-weight: bold; 
        padding: 7px 5px; 
        border: 0;
    }
    
    #menu-main .navbar-menu:hover {
        background: none;
        opacity: 0.8;
    }
    
    .navbar-nav .open .dropdown-menu {
        background-color: #0000006e;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    
    /* Grid layouts */
    ul.videos li {width: 48%; margin: 0 0 0 5px;}
    ul.playlists li {width: 48%; margin: 0 0 0 6px;}
    ul.thumbs li {width: 48%; margin: 5px 0 5px 6px;}
    ul.users li {width: 32.2%; margin: 5px 5px 5px 6px;}
    ul.users-profile li {width: 32.5%; margin: 5px 6px 5px 6px;}
    ul.albums li {width: 48%; margin: 5px 2px 5px 6px;}
    ul.photos li {width: 32%; margin: 5px 2px 5px 4px;}
    ul.models li {width: 48%; margin: 5px 4px 5px 6px;}
    ul.channels li {width: 47.5%; margin: 5px 4px 5px 6px;}
    ul.categories li {width: 30.7%; margin: 0 6px 0 6px;}
    ul.links li {width: 33%;}
    
    .content-left {margin-left: 0;}
    
    /* Video/Playlist titles */
    .video-title, 
    .playlist-title {
        width: 100%; 
        font-weight: bold; 
        text-align: center; 
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .video-rating {
        position: absolute; 
        bottom: 45px; 
        right: 10px;
    }
    
    .navbar-brand img {max-height: 40px;}
    
    .btn-float {
        float: none; 
        margin: 0 0 10px 10px;
    }
    
    .padding-mobile {padding-top: 10px;}
    
    /* Video layout */
    #video .left {
        width: 100%; 
        margin-right: 0;
    }
    
    #video .right {
        width: 0; 
        display: none;
    }
    
    /* Button sizes */
    .btn-mb,
    .btn-group-mb > .btn {
        padding: 2px 4px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
    }
    
    .btn-mb:active,
    .btn-group-mb > .btn:active {
        transform: scale(0.95);
    }
    
    /* Hide elements on mobile */
    #rating {
        height: 30px; 
        padding-top: 0; 
        padding-bottom: 0; 
        display: none;
    }
    
    .content-container {text-align: center;}
    
    .progress {height: 7px;}
}

/* ==========================================================================
   DESKTOP HIDE: max 1474px
   ========================================================================== */
@media (max-width: 1474px) {
    .no-text {display: none;}
}

/* ==========================================================================
   SMALL MOBILE LANDSCAPE: max 588px
   ========================================================================== */
@media (max-width: 588px) {
    header .nav-top ul {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   MOBILE: max 481px
   ========================================================================== */
@media (max-width: 481px) {
    /* Header navigation */
    header .nav-top .container {text-align: center;}
    
    header .nav-top ul {
        float: none; 
        width: 100%; 
        text-align: center;
    }
    
    header .nav-top ul li {
        float: none;
        display: inline-block;
        *display: inline; /* IE7 fix */
        zoom: 1; /* hasLayout IE7 trigger */
    }
    
    header .logo {width: 100%;}
    header .search {width: 100%;}
    header #menu-main {z-index: 100;}
    
    /* Grid adjustments */
    ul.models li {width: 48%; margin: 5px 4px 5px 6px;}
    ul.albums li {width: 100%; margin: 0px 0px 0px 0px;}
    ul.photos li {width: 100%; margin: 0px 0px 0px 0px;}
    ul.categories li {width: 45%; margin: 0 6px 0 6px;}
    ul.channels li {width: 47%; margin: 5px 4px 5px 6px;}
    ul.users li {width: 47%; margin: 5px 3px 5px 6px;}
    ul.links li {width: 49%;}
    
    #rating {display: none;}
    
    /* Channel thumb */
    img.channel-thumb {
        float: none; 
        margin: 0 auto; 
        width: 100%;
    }
    
    .content-left, 
    .content-right {
        width: 100%; 
        float: none;
    }
}

/* ==========================================================================
   VERY SMALL MOBILE: max 321px
   ========================================================================== */
@media (max-width: 321px) {
    ul.videos li {width: 96%; margin: 5px 0 0 6px;}
    ul.playlists li {width: 96%; margin: 5px 4px 5px 6px;}
    ul.thumbs li {width: 18%; margin: 5px 6px 5px 6px;}
    ul.users li {width: 47%; margin: 5px 3px 5px 6px;}
    ul.albums li {width: 97%; margin: 5px 2px 5px 6px;}
    ul.photos li {width: 98%; margin: 5px 4px 5px 4px;}
    ul.models li {width: 98%; margin: 5px 4px 5px 6px;}
    ul.categories li {width: 96%; margin: 0 6px 0 6px;}
    ul.channels li {width: 97%; margin: 5px 4px 5px 4px;}
    ul.links li {width: 49%;}
    
    #rating {display: none;}
    
    img.channel-thumb {
        float: none; 
        margin: 0 auto; 
        width: 100%;
    }
    
    .content-left, 
    .content-right {
        width: 100%; 
        float: none;
    }
}

/* ==========================================================================
   TABLET PORTRAIT: min 768px
   ========================================================================== */
@media (min-width: 768px) {
    .container {width: 758px;}
    
    .big_image {height: 419px;}
    
    .navbar-nav > li > a {
        padding-left: 5px;
        padding-right: 5px;
        font-size: 9px;
    }
    
    .navbar-nav > li > a:hover {
        transform: translateY(-1px);
        opacity: 0.8;
    }
    
    .dropdown:hover .dropdown-menu {
        display: block;
        animation: fadeInDown 0.3s ease;
    }
    
    #rating {display: none;}
    
    /* Grid layouts */
    ul.videos li {width: 23%; margin: 0 8px 0 6px;}
    ul.playlists li {width: 23%; margin: 0 8px 0 6px;}
    ul.videos-profile li {width: 47%; margin: 0 6px 0 6px;}
    ul.thumbs li {width: 21%; margin: 5px 2px 5px 6px;}
    ul.users li {width: 15%; margin: 5px 5px 5px 6px;}
    ul.users-profile li {width: 22%; margin: 5px 6px 5px 6px;}
    ul.albums li {width: 32.2%; margin: 5px 2px 5px 4px;}
    ul.albums-profile li {width: 218px; margin: 5px 6px 5px 6px;}
    ul.photos li {width: 32%; margin: 5px 2px 5px 6px;}
    ul.models li {width: 172px; height: 270px; margin: 5px 4px 5px 6px;}
    ul.channels li {width: 32%; margin: 5px 4px 5px 4px;}
    ul.categories li {width: 31.8%; margin: 0 6px 0 4px;}
    ul.links li {width: 33%;}
    
    .video-title {width: 75%;}
    
    /* Definition list */
    .dl-horizontal dt {
        width: 120px;
        text-align: left;
    }
    
    .dl-horizontal dd {
        margin-left: 130px;
    }
    
    /* Button sizes */
    .btn-mb,
    .btn-group-mb > .btn {
        padding: 10px 16px;
        font-size: 15px;
        line-height: 1.3333333;
        border-radius: 6px;
    }
    
    .btn-mb:hover,
    .btn-group-mb > .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
}

/* ==========================================================================
   SMALL DESKTOP: min 800px
   ========================================================================== */
@media (min-width: 800px) {
    .container {width: 790px;}
    
    .navbar-nav > li > a {
        padding-left: 5px;
        padding-right: 5px;
        font-size: 9px;
    }
    
    .big_image {height: 437px;}
    
    #rating {display: none;}
    
    ul.videos li {width: 23.3%; margin: 0 6px 0 6px;}
    ul.playlists li {width: 23%; margin: 0 6px 0 6px;}
    ul.videos-profile li {margin: 0 6px 0 6px;}
    ul.thumbs li {width: 21%; margin: 5px 2px 5px 6px;}
    ul.users li {width: 15%; margin: 5px 5px 5px 6px;}
    ul.users-profile li {margin: 5px 4px 5px 6px;}
    ul.albums li {width: 32%; margin: 5px 2px 5px 4px;}
    ul.albums-profile li {width: 164px; margin: 5px 3px 5px 6px;}
    ul.photos li {width: 20%; margin: 5px 6px 5px 6px;}
    ul.models li {width: 182px; height: 290px; margin: 5px 2px 5px 6px;}
    ul.channels li {width: 32.2%; margin: 5px 4px 5px 4px;}
    ul.categories li {width: 31.9%; margin: 0 6px 0 4px;}
    ul.links li {width: 20%;}
}

/* ==========================================================================
   MEDIUM DESKTOP: min 890px
   ========================================================================== */
@media (min-width: 890px) {
    .container {width: 880px;}
    
    .big_image {height: 305px;}
    
    .navbar-nav > li > a {
        padding-left: 5px;
        padding-right: 5px;
        font-size: 10px;
    }
    
    #rating {display: none;}
    
    ul.videos li {width: 23%; margin: 0 10px 0 6px;}
    ul.playlists li {width: 23%; margin: 0 10px 0 6px;}
    ul.thumbs li {width: 19%; margin: 5px 6px 5px 6px;}
    ul.users li {width: 15%; margin: 5px 5px 5px 6px;}
    ul.albums li {width: 32.5%; margin: 5px 2px 5px 4px;}
    ul.albums-profile li {width: 164px; margin: 5px 3px 5px 6px;}
    ul.photos li {width: 20%; margin: 5px 6px 5px 6px;}
    ul.models li {width: 182px; height: 290px; margin: 5px 2px 5px 6px;}
    ul.channels li {width: 24%; margin: 5px 4px 5px 6px;}
    ul.categories li {width: 23%; margin: 0 6px 0 4px;}
    ul.links li {width: 20%;}
}

/* ==========================================================================
   DESKTOP: min 992px
   ========================================================================== */
@media (min-width: 992px) {
    .container {width: 100%;}
    
    .big_image {height: 368px;}
    
    .navbar-nav > li > a {
        padding-left: 5px; 
        padding-right: 5px;
        font-size: 13px;
    }
    
    ul.videos li {width: 23%; margin: 0 8px 0 6px;}
    ul.playlists li {width: 23%; margin: 0 8px 0 6px;}
    ul.videos-profile li {width: 31%; margin: 0 10px 0 6px;}
    ul.thumbs li {width: 19%; margin: 5px 3px 5px 6px;}
    ul.related li {width: 23%; margin: 0 8px 0 6px;}
    ul.users li {width: 15%; margin: 5px 8px 5px 6px;}
    ul.users-profile li {margin: 5px 4px 5px 6px;}
    ul.albums li {width: 32.5%; margin: 5px 2px 5px 4px;}
    ul.albums-profile li {width: 164px; margin: 5px 3px 5px 6px;}
    ul.photos li {width: 20%; margin: 5px 6px 5px 6px;}
    ul.photos-profile li {width: 23.2%; margin: 5px 6px 5px 6px;}
    ul.models li {width: 182px; height: 290px; margin: 5px 2px 5px 6px;}
    ul.channels li {width: 19.3%; margin: 5px 4px 5px 4px;}
    ul.categories li {width: 23.4%; margin: 0 6px 0 6px;}
    ul.links li {width: 20%;}
    
    #rating {display: none;}
    
    .ads-square {width: 360px; height: 410px;}
}

/* ==========================================================================
   LARGE DESKTOP: min 1024px
   ========================================================================== */
@media (min-width: 1024px) {
    .container {width: 100%;}
    
    .big_image {height: 370px;}
    
    .navbar-nav > li > a {
        padding-left: 8px; 
        padding-right: 8px;
    }
    
    ul.videos li {width: 23.6%; margin: 0 6px 0 6px;}
    ul.playlists li {width: 18.6%; margin: 0 6px 0 6px;}
    ul.related li {width: 18.6%; margin: 0 6px 0 6px;}
    ul.thumbs li {width: 19%; margin: 5px 3px 5px 6px;}
    ul.users li {width: 12%; margin: 5px 3px 5px 6px;}
    ul.albums li {width: 24%; margin: 5px 2px 5px 4px;}
    ul.photos li {width: 20%; margin: 5px 6px 5px 6px;}
    ul.photos-profile li {width: 23.4%; margin: 5px 6px 5px 6px;}
    ul.models li {width: 184px; height: 300px; margin: 5px 3px 5px 6px;}
    ul.channels li {width: 24%; margin: 5px 4px 5px 4px;}
    ul.categories li {width: 23.6%; margin: 0 6px 0 4px;}
    ul.links li {width: 20%;}
    
    .btn-mb,
    .btn-group-mb > .btn {
        padding: 10px 16px;
        font-size: 12px;
    }
    
    #rating {display: none;}
    
    #album.row div#share-container.content-container {
        max-height: 120px !important; 
        overflow: none;
    }
    
    #video.row div#share-container.content-container {
        max-height: 220px !important; 
        overflow: none;
    }
    
    .ads-square {width: 480px; height: 520px;}
}

/* ==========================================================================
   XL DESKTOP: min 1150px
   ========================================================================== */
@media (min-width: 1150px) {
    .container {width: 100%;}
    
    .big_image {height: 453px;}
    
    .navbar-nav > li > a {
        padding-left: 10px; 
        padding-right: 10px;
    }
    
    ul.videos li {width: 23.6%; margin: 0 6px 0 6px;}
    ul.playlists li {width: 15.5%; margin: 0 6px 0 6px;}
    ul.thumbs li {width: 18%; margin: 5px 6px 5px 6px;}
    ul.related li {width: 15.5%; margin: 0 6px 0 6px;}
    ul.users li {width: 12%; margin: 5px 3px 5px 6px;}
    ul.albums li {width: 24.3%; margin: 5px 2px 5px 4px;}
    ul.photos li {width: 20%; margin: 5px 6px 5px 4px;}
    ul.photos-profile li {width: 23.4%; margin: 5px 6px 5px 6px;}
    ul.models li {width: 184px; height: 300px; margin: 5px 3px 5px 6px;}
    ul.channels li {width: 18.3%; margin: 5px 4px 5px 4px;}
    ul.categories li {width: 23.8%; margin: 0 6px 0 4px;}
    ul.links li {width: 20%;}
    
    .btn-mb,
    .btn-group-mb > .btn {
        padding: 10px 16px;
        font-size: 12px;
    }
    
    .ads-square {width: 480px; height: 468px;}
    
    #rating {display: none;}
}

/* ==========================================================================
   XXL DESKTOP: min 1200px
   ========================================================================== */
@media (min-width: 1200px) {
    .container {width: 100%;}
    .container-item {width: 1190px !important;}
    
    .navbar-nav > li > a {
        padding-left: 15px; 
        padding-right: 15px;
    }
    
    ul.videos li {width: 18%; margin: 0 12px 0 6px;}
    ul.playlists li {width: 15.1%; margin: 0 12px 0 6px;}
    ul.videos-profile li {width: 24%; margin: 0 2px 0 6px;}
    ul.related li {width: 16%; margin: 0 3px 0 3px;}
    ul.thumbs li {width: 19%; margin: 5px 3px 5px 6px;}
    ul.users li {width: 11.5%; margin: 5px 4px 5px 6px;}
    ul.users-profile li {margin: 5px 2px 5px 6px;}
    ul.albums li {width: 20%; margin: 0px 0px 0px 0px;}
    ul.albums-profile li {width: 200px; margin: 5px 3px 5px 6px;}
    ul.photos li {width: 20%; margin: 0px 0px 0px 0px;}
    ul.photos-profile li {width: 23.4%; margin: 5px 6px 5px 6px;}
    ul.models li {width: 184px; height: 300px; margin: 5px 3px 5px 6px;}
    ul.channels li {width: 19.3%; margin: 5px 4px 5px 4px;}
    ul.categories li {width: 18.9%; margin: 0 6px 0 4px;}
    ul.links li {width: 20%;}
    
    .btn-group-mb > .btn {
        padding: 10px 16px;
        font-size: 12px;
    }
    
    #rating {display: none;}
    
    .navigation li a {
        font-weight: bold;
    }
    
    .navigation li a:hover {
        transform: translateX(5px);
    }
    
    .ads-square {width: 480px; height: 368px;}
}

/* ==========================================================================
   FULL HD: min 1280px
   ========================================================================== */
@media (min-width: 1280px) {
    .container {width: 89%;}
    .container-item {width: 1200px !important;}
    
    .btn-group-mb > .btn {
        padding: 10px 16px;
        font-size: 12px;
    }
    
    .navbar-nav > li > a {
        padding-left: 13px; 
        padding-right: 13px;
    }
    
    #rating {display: none;}
    
    ul.videos li {width: 18%; margin: 0 14px 0 6px;}
    ul.playlists li {width: 16%; margin: 0 3px 0 4px;}
    ul.related li {width: 16%; margin: 0 3px 0 3px;}
    ul.videos-profile li {width: 24%; margin: 0 2px 0 6px;}
    ul.thumbs li {width: 15%; margin: 5px 3px 5px 6px;}
    ul.users li {width: 11.5%; margin: 5px 6px 5px 6px;}
    ul.users-profile li {margin: 5px 2px 5px 6px;}
    ul.albums li {width: 16.6%; margin: 0px 0px 0px 0px;}
    ul.albums-profile li {width: 220px; margin: 5px 3px 5px 6px;}
    ul.photos li {width: 20%; margin: 0px 0px 0px 0px;}
    ul.photos-profile li {width: 23.6%; margin: 5px 6px 5px 6px;}
    ul.models li {width: 193px; height: 300px; margin: 5px 10px 5px 6px;}
    ul.channels li {width: 19.3%; margin: 5px 4px 5px 4px;}
    ul.categories li {width: 19%; margin: 0 6px 0 4px;}
    
    .ads-square {width: 500px; height: 494px;}
    ul.links li {width: 14%;}
}

/* ==========================================================================
   HD+: min 1366px
   ========================================================================== */
@media (min-width: 1366px) {
    .container {width: 89%;}
    .container-item {width: 80% !important;}
    
    .btn-group-mb > .btn {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .navbar-nav > li > a {
        padding-left: 15px; 
        padding-right: 15px;
    }
    
    #rating {display: none;}
    
    ul.videos li {width: 15.3%; margin: 0 6px 0 8px;}
    ul.playlists li {width: 15.6%; margin: 0 6px 0 6px;}
    ul.videos-profile li {margin: 0 2px 0 6px;}
    ul.related li {width: 16%; margin: 0 3px 0 3px;}
    ul.thumbs li {width: 19%; margin: 5px 3px 5px 6px;}
    ul.users li {width: 11.5%; margin: 5px 10px 5px 6px;}
    ul.users-profile li {margin: 5px 6px 5px 6px;}
    ul.albums li {width: 16.6%; margin: 0px 0px 0px 0px;}
    ul.albums-profile li {width: 224px; margin: 5px 3px 5px 6px;}
    ul.photos li {width: 20%; margin: 0px 0px 0px 0px;}
    ul.photos-profile li {width: 11.7%; margin: 5px 2px 5px 6px;}
    ul.models li {width: 190px; height: 300px; margin: 5px 8px 5px 6px;}
    ul.channels li {width: 19.3%; margin: 5px 4px 5px 4px;}
    ul.categories li {width: 19%; margin: 0 6px 0 4px;}
    
    .ads-square {width: 500px; height: 524px;}
    ul.links li {width: 14%;}
}

/* ==========================================================================
   WIDE HD: min 1430px
   ========================================================================== */
@media (min-width: 1430px) {
    .container {width: 89%;}
    .container-item {width: 80% !important;}
    
    .btn-mb, 
    .btn-group-mb > .btn {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .navbar-nav > li > a {
        padding-left: 15px; 
        padding-right: 15px;
    }
    
    #rating {display: none;}
    
    ul.videos li {width: 16.1%; margin: 0 3px 0 4px;}
    ul.playlists li {width: 16.1%; margin: 0 3px 0 4px;}
    ul.related li {width: 16%; margin: 0 3px 0 3px;}
    ul.thumbs li {width: 19%; margin: 5px 3px 5px 6px;}
    ul.users li {width: 11.5%; margin: 5px 7px 5px 6px;}
    ul.photos li {width: 20%; margin: 0px 0px 0px 0px;}
    ul.models li {width: 190px; height: 300px; margin: 5px 8px 5px 6px;}
    ul.channels li {width: 19.5%; margin: 5px 4px 5px 4px;}
    ul.links li {width: 14%;}
    ul.categories li {width: 15.6%; margin: 0 6px 0 6px;}
}

/* ==========================================================================
   ULTRA WIDE: min 1600px
   ========================================================================== */
@media (min-width: 1600px) {
    .container {width: 89%;}
    .container-item {width: 70% !important;}
    
    .btn-mb, 
    .btn-group-mb > .btn {
        padding: 10px 16px;
        font-size: 16px;
    }
    
    .navbar-nav > li > a {
        padding-left: 15px; 
        padding-right: 15px;
    }
    
    #rating {display: none;}
    
    ul.videos li {width: 15.9%; margin: 0 5px 0 5px;}
    ul.playlists li {width: 16%; margin: 0 3px 0 4px;}
    ul.related li {width: 16%; margin: 0 3px 0 3px;}
    ul.thumbs li {width: 19%; margin: 5px 3px 5px 6px;}
    ul.users li {width: 11.5%; margin: 5px 10px 5px 6px;}
    ul.photos li {width: 20%; margin: 0px 0px 0px 0px;}
    ul.models li {width: 190px; height: 300px; margin: 5px 8px 5px 6px;}
    ul.channels li {width: 18.5%; margin: 5px 4px 5px 4px;}
    ul.links li {width: 14%;}
    ul.categories li {width: 19%; margin: 0 6px 0 6px;}
}

/* ==========================================================================
   4K DISPLAY: min 1680px
   ========================================================================== */
@media (min-width: 1680px) {
    .btn-mb, 
    .btn-group-mb > .btn {
        padding: 10px 16px;
        font-size: 16px;
    }
    
    .navbar-nav > li > a {
        padding-left: 15px; 
        padding-right: 15px;
    }
    
    #rating {display: none;}
    
    .container {width: 1790px !important;}
    .container-item {width: 70% !important;}
    
    .big_image {height: 505px;}
    
    ul.videos li {width: 15.9%; margin: 0 5px 0 5px;}
    ul.playlists li {width: 13.5%; margin: 0 5px 0 5px;}
    ul.videos-profile li {width: 18.9%; margin: 0 7px 0 6px;}
    ul.related li {width: 16%; margin: 0 3px 0 3px;}
    ul.categories li {width: 19%; margin: 0 6px 0 6px;}
    ul.thumbs li {width: 19%; margin: 5px 3px 5px 6px;}
    ul.users li {width: 11.5%; margin: 5px 10px 5px 6px;}
    ul.users-profile li {margin: 5px 4px 5px 6px;}
    ul.albums li {width: 16.6%; margin: 0 0px;}
    ul.albums-profile li {width: 190px; margin: 5px 4px 5px 6px;}
    ul.photos li {width: 20%; margin: 0px 0px 0px 0px;}
    ul.photos-profile li {width: 11.7%; margin: 5px 2px 5px 6px;}
    ul.models li {width: 190px; height: 300px; margin: 5px 8px 5px 6px;}
    ul.channels li {width: 19.5%; margin: 5px 4px 5px 4px;}
    ul.links li {width: 14%;}
    
    .ads-square {width: 500px; height: 522px;}
}

/* ==========================================================================
   HOVER EFFECTS & ANIMATIONS - Modern enhancements
   ========================================================================== */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -10px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Card hover effects */
ul.videos li:hover,
ul.playlists li:hover,
ul.albums li:hover,
ul.photos li:hover,
ul.models li:hover,
ul.channels li:hover,
ul.categories li:hover {
    transform: translateY(-5px) translateZ(0);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Image zoom on hover */
ul.videos li img,
ul.playlists li img,
ul.albums li img,
ul.photos li img,
ul.models li img,
ul.channels li img {
    transition: transform 0.3s ease;
}

ul.videos li:hover img,
ul.playlists li:hover img,
ul.albums li:hover img,
ul.photos li:hover img,
ul.models li:hover img,
ul.channels li:hover img {
    transform: scale(1.05);
}

/* Link hover effects */
a {
    transition: color 0.3s ease, opacity 0.3s ease;
}

a:hover {
    opacity: 0.8;
}

/* Button hover effects */
.btn,
button {
    transition: all 0.3s ease;
}

.btn:hover,
button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn:active,
button:active {
    transform: translateY(0);
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Focus states for accessibility */
*:focus {
    outline: 2px solid rgba(66, 153, 225, 0.5);
    outline-offset: 2px;
}

button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid rgba(66, 153, 225, 0.5);
    outline-offset: 2px;
}

/* Loading state optimization */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* ==========================================================================
   END OF FILE
   ========================================================================== */