/* Responsive Styles for Mobile, Tablet, TV */

/* Desktop: Hide visible-xs, Show hidden-xs */
.visible-xs {
    display: none !important;
}

/* Mobile First Approach */
@media (max-width: 767px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .col-md-3, .col-md-4, .col-md-6, .col-md-8, .col-md-12 {
        width: 100% !important;
        margin-bottom: 15px;
        padding-left: 0;
        padding-right: 0;
    }
    
    .row {
        margin-left: 0;
        margin-right: 0;
    }
    
    .general-box .head {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    .general-box .head a {
        display: inline-block;
        white-space: nowrap;
    }
    
    .video-list-item {
        margin-bottom: 15px;
    }
    
    .video-list-item .content .d-flex {
        flex-direction: row;
        align-items: flex-start;
    }
    
    .video-list-item .content .img {
        width: 120px !important;
        height: 160px !important;
        margin-right: 12px !important;
        margin-bottom: 0 !important;
        flex-shrink: 0;
    }
    
    .video-list-item .content .img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
    }
    
    .video-list-item .content .details {
        flex: 1 !important;
        min-width: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }
    
    .video-list-item .title {
        font-size: 13px;
        padding: 8px 10px;
    }
    
    .video-list-item .content {
        padding: 10px;
    }
    
    .video-list-item .content .video-name {
        font-size: 13px;
        margin-bottom: 5px;
        line-height: 1.3;
    }
    
    .video-list-item .content .translate {
        font-size: 11px;
        margin-bottom: 3px;
        opacity: 0.8;
    }
    
    .video-list-item .content .tanslator {
        font-size: 11px;
        margin-bottom: 3px;
        line-height: 1.4;
    }
    
    .video-list-item .content .profile-link {
        font-size: 11px;
        margin-top: 5px;
        display: inline-block;
        word-break: break-all;
    }
    
    .video-list-item .content .time {
        font-size: 10px;
        margin-top: 5px;
        opacity: 0.7;
    }
    
    .video-list-item .content .interaction {
        margin-top: 8px;
        width: 100%;
        flex-shrink: 0;
        min-height: auto;
        max-height: none;
        overflow: visible;
    }
    
    .video-list-item .content .interaction a {
        font-size: 10px;
        padding: 4px 8px;
    }
    
    #player-area {
        min-height: 250px !important;
        padding-bottom: 56.25% !important;
    }
    
    #player-area iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
    }
    
    .alts-list {
        flex-direction: column;
    }
    
    .alts-list button {
        width: 100%;
        margin-bottom: 8px;
    }
    
    header .navbar {
        padding: 10px 0;
    }
    
    .mobile-menu {
        display: block !important;
        z-index: 9999;
    }
    
    .mobile-menu-toggle {
        cursor: pointer;
    }
    
    .mobile-sidebar {
        transform: translateX(-100%);
    }
    
    .mobile-sidebar-overlay {
        opacity: 0;
    }
    
    .hidden-xs {
        display: none !important;
    }
    
    .visible-xs {
        display: block !important;
    }
    
    .sidebar {
        margin-top: 20px;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        max-width: 750px;
    }
    
    .col-md-3 {
        width: 50%;
    }
    
    .col-md-4 {
        width: 50%;
    }
    
    .col-md-6 {
        width: 50%;
    }
    
    .col-md-8 {
        width: 66.666%;
    }
    
    #player-area {
        min-height: 400px !important;
        padding-bottom: 56.25% !important;
    }
    
    #player-area iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
    }
    
    .video-list-item .content .d-flex {
        flex-wrap: wrap;
    }
}

/* TV / Large Screens */
@media (min-width: 1920px) {
    .container {
        max-width: 1600px;
    }
    
    #player-area {
        min-height: 720px !important;
        padding-bottom: 56.25% !important;
    }
    
    #player-area iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
    }
    
    .general-box .body {
        font-size: 1.1em;
    }
    
    .video-list-item {
        padding: 15px;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    button, a, .clickable {
        min-height: 44px;
        min-width: 44px;
    }
    
    input, select, textarea {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* Landscape Mobile */
@media (max-width: 767px) and (orientation: landscape) {
    #player-area {
        min-height: 300px !important;
        padding-bottom: 56.25% !important;
    }
    
    #player-area iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
    }
    
    .mobile-menu {
        padding: 5px 0;
    }
}

/* Print Styles */
@media print {
    .mobile-menu,
    header,
    .sidebar,
    .alts-list,
    button {
        display: none !important;
    }
    
    .content-body {
        margin: 0;
        padding: 0;
    }
}