/*
 * mobile-single.css
 * Layout and styling for the mobile video detail page matching xtoks.com reference layout.
 */

@media (max-width: 767px) {
    html, body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
    }

    .mobile-single-page {
        width: 100%;
        min-height: 100vh;
        background-color: #181818;
        color: #fff;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        padding-bottom: 60px;
        box-sizing: border-box;
    }

    /* ---------------------------------------------------------------
     # Mobile Header Bar
    ----------------------------------------------------------------*/
    .mobile-header-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        background-color: #111111;
        border-bottom: 1px solid #222222;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .mobile-header-logo img {
        height: 32px;
        width: auto;
        display: block;
    }

    .mobile-header-logo span {
        font-weight: 700;
        font-size: 20px;
        color: #fe2c55;
        text-decoration: none;
    }

    .mobile-header-icons {
        display: flex;
        align-items: center;
        gap: 16px;
        color: #ffffff;
        font-size: 18px;
    }

    .mobile-header-icons i {
        cursor: pointer;
    }

    /* ---------------------------------------------------------------
     # Video Container & Player Area
    ----------------------------------------------------------------*/
    .mobile-video-block {
        width: 100%;
        background-color: #181818;
        border-bottom: 8px solid #0f0f0f;
    }

    .mobile-player-container {
        position: relative;
        width: 100%;
        background-color: #000000;
        display: flex;
        justify-content: center;
        align-items: center;
        max-height: 70vh;
    }

    .mobile-player-container video {
        width: 100%;
        max-height: 70vh;
        object-fit: contain;
        display: block;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -khtml-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }

    /* Mute button on top right of video */
    .mobile-player-container .mute-btn {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
    }

    /* ---------------------------------------------------------------
     # Category Tags Row (.v-cats)
    ----------------------------------------------------------------*/
    .v-cats {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 14px 6px 14px;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }

    .v-cats::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    .v-cats a {
        display: inline-block;
        background-color: #262626;
        color: #ffffff;
        font-size: 12px;
        font-weight: 500;
        padding: 6px 14px;
        border-radius: 16px;
        text-decoration: none;
        transition: background-color 0.2s, color 0.2s;
        flex-shrink: 0;
    }

    .v-cats a:hover, .v-cats a:active {
        background-color: #fe2c55;
        color: #ffffff;
    }

    /* ---------------------------------------------------------------
     # Video Info Section (.video-infos)
    ----------------------------------------------------------------*/
    .video-infos {
        padding: 10px 14px;
    }

    .title-views {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .title-views h1 {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.35;
        color: #ffffff;
        margin: 0;
        word-break: break-word;
    }

    .title-views .views {
        font-size: 13px;
        color: #aaaaaa;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .title-views .views i {
        color: #888888;
    }

    /* ---------------------------------------------------------------
     # Action Buttons Row (.video-actions)
    ----------------------------------------------------------------*/
    .video-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 14px 14px 14px;
        border-bottom: 1px solid #282828;
    }

    .video-rate-container {
        display: flex;
        align-items: center;
        gap: 12px;
        background-color: #242424;
        padding: 6px 14px;
        border-radius: 20px;
    }

    .rate-btn {
        background: none;
        border: none;
        color: #cccccc;
        font-size: 15px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 4px;
        transition: color 0.2s;
    }

    .rate-btn:active, .rate-btn.active {
        color: #fe2c55;
    }

    .rating-likes-bar {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 70px;
    }

    .rating-counts {
        font-size: 11px;
        color: #aaaaaa;
        margin-bottom: 3px;
    }

    .rating-bar {
        width: 100%;
        height: 4px;
        background-color: #444444;
        border-radius: 2px;
        overflow: hidden;
    }

    .rating-bar-meter {
        height: 100%;
        background-color: #fe2c55;
        width: 100%;
        transition: width 0.3s ease;
    }

    .share-action-btn {
        background-color: #242424;
        border: none;
        color: #ffffff;
        font-size: 13px;
        font-weight: 500;
        padding: 8px 16px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
    }

    .share-action-btn:active {
        background-color: #333333;
    }

    /* ---------------------------------------------------------------
     # Share Popup Section (.video-share)
    ----------------------------------------------------------------*/
    .video-share-popup {
        display: none;
        padding: 14px;
        background-color: #1f1f1f;
        border-bottom: 1px solid #282828;
    }

    .video-share-popup.active {
        display: block;
    }

    .video-share-popup .share-title {
        font-size: 13px;
        font-weight: 600;
        color: #cccccc;
        margin-bottom: 10px;
    }

    .share-icons-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .share-icon-link {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background-color: #2c2c2c;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-size: 16px;
        transition: background-color 0.2s;
    }

    .share-icon-link.facebook { background-color: #3b5998; }
    .share-icon-link.twitter  { background-color: #1da1f2; }
    .share-icon-link.whatsapp { background-color: #25d366; }
    .share-icon-link.copy-link{ background-color: #fe2c55; }

    /* ---------------------------------------------------------------
     # Video Description (.video-description)
    ----------------------------------------------------------------*/
    .video-description {
        padding: 12px 14px;
        font-size: 13px;
        line-height: 1.5;
        color: #dddddd;
    }

    .video-description .desc-content {
        max-height: 60px;
        overflow: hidden;
        position: relative;
        transition: max-height 0.3s ease;
    }

    .video-description.expanded .desc-content {
        max-height: 2000px;
    }

    .read-more-btn {
        background: none;
        border: none;
        color: #fe2c55;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 0 0 0;
        cursor: pointer;
    }

    /* ---------------------------------------------------------------
     # Section Divider Header for Related Videos
    ----------------------------------------------------------------*/
    .related-section-header {
        padding: 16px 14px 8px 14px;
        font-size: 15px;
        font-weight: 700;
        color: #ffffff;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-top: 6px solid #0d0d0d;
    }

    /* ---------------------------------------------------------------
     # Loading Spinner
    ----------------------------------------------------------------*/
    .mobile-infinite-spinner {
        text-align: center;
        padding: 24px 0;
    }

    .mobile-infinite-spinner .spinner-ring {
        display: inline-block;
        width: 28px;
        height: 28px;
        border: 3px solid rgba(255, 255, 255, 0.15);
        border-top-color: #fe2c55;
        border-radius: 50%;
        animation: spin 0.75s linear infinite;
    }

    /* Footer */
    .mobile-footer {
        padding: 24px 14px;
        text-align: center;
        font-size: 12px;
        color: #666666;
        border-top: 1px solid #222222;
        margin-top: 20px;
    }
}

/* Hide desktop action sidebar & share popups on mobile viewports */
@media (max-width: 900px) {
    .desktop-video-title,
    .desktop-actions-sidebar,
    .desktop-action-btn,
    .desktop-video-progress-container,
    .desktop-swiper-nav,
    .desktop-share-modal,
    .share-action-btn,
    .video-share-popup {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}