/* --- Core Variables and Setup --- */
:root {
    --color-primary: #7f80cf;
    --color-primary-hover: #9a9be3;
    --color-success: #3fb950;
    --color-danger: #f85149;
    --color-text-primary: #e6edf3;
    --color-text-secondary: #c9d1d9;
    --color-text-subtle: #8b949e;
    --bg-main: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --border-color-primary: #30363d;
    --border-color-secondary: #484f58;
    --font-family-sans: "TASA Explorer", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body {
    background-color: var(--bg-main);
    font-family: var(--font-family-sans);
    color: var(--color-text-primary);
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }

/* --- Layout & Structure --- */
header.p-0 { background-color: var(--bg-secondary); border-bottom: 1px solid var(--border-color-primary); }
main { margin-top: 3rem; min-height: 80vh; }
footer.main-footer {
    border-top: 1px solid var(--border-color-primary);
    color: var(--color-text-secondary);
    margin-top: 3rem;
    padding: 2.5rem 0;
    background-color: var(--bg-secondary);
}

/* --- Header & Navigation --- */
.navbar-brand { font-weight: 600; }
.nav-link { font-weight: 500; color: var(--color-text-secondary); }
.nav-link:hover, .nav-link:focus, .nav-link.active { color: var(--color-primary); }
header .form-control {
    background-color: var(--bg-main);
    color: var(--color-text-primary);
    border-color: var(--border-color-primary);
}
header .btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); }
.navbar-toggler { border: none; box-shadow: none !important; }
.navbar-toggler .mdi { font-size: 1.5rem; color: var(--color-text-primary); }
#searchBarCollapse { background-color: var(--bg-secondary); border-bottom: 1px solid var(--border-color-primary); }

/* --- Movie Card --- */
.movie-item a { text-decoration: none; }
.movie-item .poster-container {
    position: relative; overflow: hidden; margin-bottom: 0.75rem;
    background-color: var(--bg-secondary); border: 1px solid var(--border-color-primary);
    aspect-ratio: 4/3; transition: transform 0.2s ease-in-out; border-radius: 8px;
}
.movie-item img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}
.movie-item:hover .poster-container { transform: translateY(-5px); }
.movie-item h6 {
    font-size: 0.9rem; font-weight: 500; color: var(--color-text-primary);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    text-overflow: ellipsis; overflow: hidden;
    transition: color 0.2s;
}
.movie-item a:hover h6 { color: var(--color-primary); }

/* --- Skeleton Loader --- */
.skeleton-card .poster-placeholder, .skeleton-card .title-placeholder {
    background-color: var(--bg-secondary);
    background-image: linear-gradient(90deg, var(--bg-secondary) 0, var(--bg-tertiary) 50%, var(--bg-secondary) 100%);
    background-size: 200% 100%; animation: 1.5s ease-in-out infinite shimmer;
}
.skeleton-card .poster-placeholder { width: 100%; border-radius: 8px; aspect-ratio: 4/3; }
.skeleton-card .title-placeholder { height: 1rem; width: 80%; margin-top: 1rem; border-radius: 4px; }
.skeleton-card .title-placeholder.short { width: 60%; margin-top: 0.5rem; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* --- Buttons & Forms --- */
.btn { transition: 0.2s ease-in-out; }
.btn-outline-primary { color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline-primary:hover { background-color: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn-player { background-color: var(--bg-tertiary); border: 1px solid var(--border-color-primary); color: var(--color-text-secondary); font-weight: 500; }
.btn-player.active, .btn-player:hover { background-color: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 700; }
.btn-download { background-color: var(--color-success); border-color: var(--color-success); color: #fff; font-weight: 500; }

/* --- Pagination & Tabs --- */
.page-item .page-link { background-color: var(--bg-secondary); border: 1px solid var(--border-color-primary); color: var(--color-primary); margin: 0 2px; border-radius: 6px; }
.page-item.active .page-link { background-color: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 700; }
.nav-tabs { border-bottom-color: var(--border-color-primary); }
.nav-tabs .nav-link { color: var(--color-text-subtle); }
.nav-tabs .nav-link.active, .nav-tabs .nav-link:hover { background-color: var(--bg-secondary); color: var(--color-text-primary); border-color: var(--border-color-primary); }
.tab-content { padding: 1rem; background-color: var(--bg-secondary); border: 1px solid var(--border-color-primary); border-top: none; border-radius: 0 0 6px 6px; }

/* --- Single Page Specifics --- */
#video-player-wrapper { position: relative; }
#video-player-placeholder, .ratio iframe { border-radius: 6px; }
#video-player-placeholder { background-color: #000; }
.player-loader { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index: 10; }
#movie-poster { border: 1px solid var(--border-color-primary); border-radius: 12px; }
.directory-link {
    display: inline-block; padding: 4px 12px; margin: 2px 4px 2px 0; background-color: var(--bg-tertiary);
    color: var(--color-text-secondary); border: 1px solid var(--border-color-primary);
    border-radius: 20px; font-size: 0.875rem; transition: all 0.2s;
}
.directory-link:hover { background-color: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.video-cover-image-container {
    max-width: 100%; /* Ensure it doesn't overflow its parent */
    display: flex;
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically if its aspect ratio allows */
    overflow: hidden; /* Hide anything that goes outside */
    background-color: var(--bg-secondary); /* A subtle background */
    border-radius: 8px;
    height: auto; /* Allow height to adjust naturally */
}

.video-cover-image-container img {
    display: block; /* Remove extra space below image */
    max-width: 100%; /* Ensure image itself doesn't exceed its container */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure the whole image is visible within the container */
}

/* Adjustments for mobile if needed - the `sizes` attribute in JS handles most of this */
@media (max-width: 767px) {
    .video-cover-image-container {
        max-height: 400px; /* Cap height on smaller screens if desired */
    }
}

/* --- Share Buttons --- */
.share-btn { display: inline-flex; align-items: center; padding: 0.4rem 1rem; border-radius: 6px; color: #fff; font-size: 0.9rem; transition: transform 0.2s; }
.share-btn:hover { transform: translateY(-2px); color: #fff; }
.share-btn i { margin-right: 0.5rem; }
.share-btn.facebook { background-color: #1877f2; }
.share-btn.twitter { background-color: #1DA1F2; }
.share-btn.whatsapp { background-color: #25D366; }
.share-btn.reddit { background-color: #FF4500; }
.share-btn.telegram { background-color: #0088cc; }

/* --- Ad Styles --- */
.popup-ad-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 1050; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; }
.popup-ad-overlay.is-visible { opacity: 1; visibility: visible; }
.popup-ad-content { position: relative; background-color: var(--bg-secondary); padding: 10px; border-radius: 5px; max-width: 90%; }
.popup-ad-content img, .popup-ad-content iframe { max-width: 100%; height: auto; display: block; }
.popup-ad-close { position: absolute; top: -15px; right: -15px; width: 30px; height: 30px; background-color: #fff; color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; }
.floating-footer-ads { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1040; background-color: rgba(13, 17, 23, 0.9); backdrop-filter: blur(5px); padding: 10px; display: none; justify-content: center; align-items: center; }
.floating-footer-ads.is-visible { display: flex; }
.footer-ad-close { position: absolute; top: 5px; right: 10px; width: 25px; height: 25px; background-color: #fff; color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ad-under-player img, .ad-under-player iframe { max-width: 100%; height: auto; }