/*
Theme Name: Astra Child
Theme URI: https://mahdiabedi.com
Description: Child theme for Astra
Author: Mahdi Abedi
Template: astra
Version: 1.0
*/

/* Your custom CSS starts below */

.universal-player {
    position: relative;
}

/* Dark overlay */
.resume-popup {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
    align-items: center;
    justify-content: center;
    z-index: 50;
}

/* Center box */
.resume-box {
    background: #111;
    padding: 25px 30px;
    border-radius: 8px;
    text-align: center;
    color: #fff;
    max-width: 300px;
    width: 90%;
}

.resume-box p {
    margin-bottom: 20px;
    font-size: 16px;
}

/* Buttons layout */
.resume-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* Buttons */
.resume-actions button {
    padding: 8px 14px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-weight: 600;
}

.btn-resume {
    background: #e50914;
    color: #fff;
}

.btn-restart {
    background: #333;
    color: #fff;
}

.continue-watching {
    padding:40px 20px;
}

.progress-bar {
    height:4px;
    background:#333;
    margin-top:5px;
    border-radius:2px;
    overflow:hidden;
}

.progress-fill {
    height:100%;
    background:#e50914;
}

/* Remove sidebar on watch pages */
body.watch-room-page .ast-container,
body.single-episode .ast-container {
    max-width: 100% !important;
    padding: 0 !important;
}

body.watch-room-page .ast-sidebar-c {
    display: none !important;
}

/* Make main content full width */
body.watch-room-page #primary,
body.single-episode #primary {
    width: 100% !important;
    margin: 0 !important;
}

/* Make header sticky only if needed */
body.watch-room-page .ast-header-break-point {
    position: relative !important;
}

/* Ensure player fits screen */
.watch-room .player-wrapper,
.universal-player .player-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* Video full width, responsive */
.watch-room video,
.universal-player video {
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
}

@media (max-width: 768px) {
    /* Make buttons bigger on mobile */
    .watch-room button,
    .player-nav {
        padding: 10px 15px;
        font-size: 16px;
        width: 100%;
        margin-bottom: 8px;
    }

    /* Fix player height on mobile */
    .player-wrapper video {
        max-height: 50vh;
    }

    /* Invite box full width */
    .invite-box {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .invite-box input {
        width: 100%;
    }

    .invite-box button {
        width: 100%;
    }
}