:root {
    --bg-color: #0f0f0f;
    --primary: #d63384;
    --text-white: #ffffff;
    --text-gray: #aaaaaa;
    --like-color: #2ecc71;
    --dislike-color: #e74c3c;
    --report-color: #f39c12;
    --premium-color: #f1c40f;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-white);
    overflow-x: hidden;
    padding-bottom: 50px;
}

/* --- NAVBAR --- */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    padding: 10px 20px;
    background-color: #1a0b1a; 
    border-bottom: 1px solid #333;
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 60px;
    box-sizing: border-box;
}

.logo { font-size: 20px; font-weight: bold; color: var(--primary); text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.nav-icons { display: flex; align-items: center; gap: 15px; }
.icon-btn { background: none; border: none; cursor: pointer; color: white; padding: 5px; display: flex; align-items: center; justify-content: center; }
.icon-btn svg { width: 24px; height: 24px; fill: white; }
#premium-icon svg { fill: var(--premium-color); }

/* --- RGB ANIMATION --- */
@keyframes rgb-glow {
    0% { box-shadow: 0 0 5px #ff0000, 0 0 15px #ff0000; border: 1px solid #ff0000; }
    33% { box-shadow: 0 0 5px #00ff00, 0 0 15px #00ff00; border: 1px solid #00ff00; }
    66% { box-shadow: 0 0 5px #0000ff, 0 0 15px #0000ff; border: 1px solid #0000ff; }
    100% { box-shadow: 0 0 5px #ff0000, 0 0 15px #ff0000; border: 1px solid #ff0000; }
}

.premium-rgb {
    border-radius: 50%;
    animation: rgb-glow 2s linear infinite;
    background-color: rgba(255, 255, 255, 0.1); 
}

.premium-rgb svg {
    fill: white !important;
    filter: drop-shadow(0 0 2px black);
}

/* --- SLIDER --- */
.slider-wrapper {
    position: relative;
    width: 100%;
    height: 56.25vw;
    max-height: 500px;
    background-color: #000;
    overflow: hidden;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide {
    position: absolute;
    width: 100%; height: 100%; top: 0; left: 0;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 0; z-index: 0; border-radius: 0; cursor: pointer; overflow: hidden;
}
.slide img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.slide::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 5; transition: background 0.5s; }
.slide-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: rgba(0, 0, 0, 0.6); border: 2px solid var(--primary); border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 15; opacity: 0; transition: all 0.3s; }
.slide-play-btn svg { width: 24px; height: 24px; fill: white; margin-left: 4px; }

@media(min-width: 768px) {
    .slide { width: 65%; height: 90%; top: 50%; left: 50%; border-radius: 12px; transform: translate(-50%, -50%) scale(0.85); box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
    .slide.active { opacity: 1; transform: translate(-50%, -50%) scale(1); z-index: 10; box-shadow: 0 10px 40px rgba(0,0,0,0.8); }
    .slide.active::before { background: rgba(0, 0, 0, 0.1); }
    .slide.active .slide-play-btn { opacity: 1; }
    .slide.active:hover .slide-play-btn { background: var(--primary); transform: translate(-50%, -50%) scale(1.1); }
    .slide.prev { opacity: 1; transform: translate(-50%, -50%) scale(0.85); left: 12%; z-index: 5; display: block; }
    .slide.next { opacity: 1; transform: translate(-50%, -50%) scale(0.85); left: 88%; z-index: 5; display: block; }
}
@media(max-width: 767px) {
    .slide.active { opacity: 1; transform: scale(1); z-index: 10; }
    .slide.active::before { background: transparent; }
    .slide.prev, .slide.next { display: none; }
    .slide.active .slide-play-btn { opacity: 1; }
    .slider-wrapper { max-height: 240px; }
}

.prev-btn, .next-btn { cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); padding: 10px; color: white; font-weight: bold; background-color: rgba(0,0,0,0.5); border-radius: 50%; z-index: 20; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.1); }
.prev-btn { left: 20px; } .next-btn { right: 20px; }
.dots-container { text-align: center; padding: 10px 0; background: linear-gradient(to bottom, #000 0%, var(--bg-color) 100%); margin-top: -10px; z-index: 30; position: relative; }
.dot { cursor: pointer; height: 6px; width: 6px; margin: 0 4px; background-color: #555; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }
.dot.active { background-color: var(--primary); width: 20px; border-radius: 10px; }

/* --- PLAYER --- */
.player-wrapper { display: none; width: 100%; margin: 0; background: #000; }
.player-container { width: 100%; margin: 0 auto; background-color: black; aspect-ratio: 16/9; max-height: calc(100vh - 60px); position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; }
.player-container iframe { width: 100%; height: 100%; border: none; }
.btn-back { background: none; border: none; color: var(--text-white); font-size: 16px; cursor: pointer; margin: 10px 20px; padding: 5px 10px; display: flex; align-items: center; gap: 5px; }
.player-info { padding: 15px 20px; border-bottom: 1px solid #333; margin-bottom: 20px; }
.player-header { display: flex; justify-content: space-between; align-items: center; gap: 15px; flex-wrap: wrap; }
.header-left { display: flex; align-items: center; gap: 15px; }
.player-logo { width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--primary); object-fit: cover;}
.reaction-container { display: flex; align-items: center; gap: 15px; background: #222; padding: 8px 15px; border-radius: 30px; }
.btn-reaction { background: none; border: none; color: #ccc; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 14px; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; }
.btn-reaction svg { width: 22px; height: 22px; fill: currentColor; transition: fill 0.2s; }
.btn-reaction.liked { color: var(--like-color); }
.btn-reaction.liked svg { fill: var(--like-color); transform: scale(1.2); }
.btn-reaction.disliked { color: var(--dislike-color); }
.btn-reaction.disliked svg { fill: var(--dislike-color); transform: scale(1.2); }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1.2); } }
.btn-reaction.animating svg { animation: pop 0.3s forwards; }
.player-desc { color: #aaa; font-size: 14px; margin-top: 10px; line-height: 1.4; width: 100%; }

/* --- RECOMMENDATIONS --- */
.player-category-block { margin-bottom: 30px; }
.player-category-title { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 15px; text-transform: capitalize; padding-left: 20px; }

.channel-wrap-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 
    gap: 20px;
    padding: 0 20px;
}

.channel-wrap-container.circular-view {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
    gap: 15px;
    justify-items: center;
}

/* FIX: Prevent Overlap */
.channel-wrap-container .movie-item, 
.channel-wrap-container .channel-item {
    width: 100% !important;
}

@media(max-width: 600px) {
    .channel-wrap-container {
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px;
    }
    .channel-wrap-container.circular-view {
        grid-template-columns: repeat(3, 1fr); 
        gap: 10px;
    }
}

/* --- SECTIONS --- */
.view-container { width: 100%; padding: 0 20px; box-sizing: border-box; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; margin-bottom: 15px; }
.section-title { font-size: 20px; font-weight: 700; color: var(--text-white); text-transform: capitalize; }
.view-all-btn { font-size: 14px; color: var(--text-gray); cursor: pointer; }
.horizontal-scroll { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 15px; scrollbar-width: none; }
.horizontal-scroll::-webkit-scrollbar { display: none; }

/* --- ITEMS --- */
.channel-item { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; cursor: pointer; width: 90px; }
.icon-circle { width: 70px; height: 70px; border-radius: 50%; background-color: white; padding: 4px; display: flex; justify-content: center; align-items: center; border: 2px solid transparent; transition: 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
.channel-item:hover .icon-circle { border-color: var(--primary); transform: scale(1.05); }
.icon-circle img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.channel-name { margin-top: 8px; font-size: 13px; text-align: center; color: var(--text-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }

.movie-item { flex: 0 0 auto; display: flex; flex-direction: column; cursor: pointer; width: 170px; transition: transform 0.2s; }
.movie-item:hover { transform: scale(1.03); }
.movie-thumb { width: 100%; aspect-ratio: 16/9; border-radius: 8px; object-fit: cover; background-color: #222; }
.movie-title { margin-top: 8px; font-size: 14px; font-weight: 500; color: #fff; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media(min-width: 768px) {
    .movie-item { width: 240px; } 
    .channel-item { width: 100px; }
    .icon-circle { width: 80px; height: 80px; }
}
@media(min-width: 1400px) {
    .movie-item { width: 300px; }
}

/* --- GRID VIEW --- */
#grid-view { display: none; padding-top: 20px; }
.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 20px; }
.movie-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
@media(max-width: 600px) {
    .grid-container { grid-template-columns: repeat(3, 1fr); }
    .movie-grid { grid-template-columns: repeat(2, 1fr); }
}
.grid-container .channel-item, .movie-grid .movie-item { width: 100%; }

/* --- MODALS --- */
.modal { display: none; position: fixed; z-index: 3000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.85); backdrop-filter: blur(8px); }
.modal-content { background-color: #141414; margin: 10% auto; padding: 30px; border: 1px solid #333; width: 90%; max-width: 420px; border-radius: 16px; text-align: center; color: white; box-shadow: 0 10px 40px rgba(0,0,0,0.6); animation: modalFadeIn 0.3s; }
@keyframes modalFadeIn { from {opacity:0; transform:translateY(20px);} to {opacity:1; transform:translateY(0);} }

.report-select, .form-input, .payment-select { width: 100%; padding: 14px; margin: 10px 0; background: #1e1e1e; border: 1px solid #333; color: #ddd; border-radius: 8px; font-size: 15px; }
.modal-buttons { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.btn-submit { background-color: var(--primary); color: white; border: none; padding: 14px 20px; border-radius: 8px; cursor: pointer; flex: 1; font-weight: 600; }
.btn-cancel { background-color: #333; color: #ccc; border: none; padding: 14px 20px; border-radius: 8px; cursor: pointer; flex: 1; font-weight: 600; }

.price-tag { font-size: 22px; color: var(--premium-color); font-weight: bold; margin: 10px 0; }
.payment-info-box { background: rgba(241, 196, 15, 0.08); border: 1px solid rgba(241, 196, 15, 0.3); color: #ddd; padding: 12px; border-radius: 8px; margin: 12px 0; font-size: 14px; display: none; word-break: break-all; text-align: left;}

.error-message { color: #e74c3c; background: rgba(231, 76, 60, 0.1); padding: 10px; border-radius: 5px; font-size: 13px; margin: 8px 0; display: none; }
.success-message { color: #2ecc71; background: rgba(46, 204, 113, 0.1); padding: 10px; border-radius: 5px; font-size: 14px; margin: 10px 0; display: none; font-weight: bold; }

.status-icon { width: 60px; height: 60px; margin-bottom: 10px; }
.status-icon.active { fill: #2ecc71; }
.status-icon.pending { fill: var(--report-color); }
.premium-status { color: #2ecc71; margin-top: 10px; font-size: 16px; font-weight: bold; }
.pending-status { color: var(--report-color); margin-top: 10px; font-size: 16px; font-weight: bold; }

/* SEARCH OVERLAY */
.search-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-color); z-index: 2000; padding: 20px; box-sizing: border-box; overflow-y: auto; }
.search-header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 10px; }
.search-input-wrapper { flex: 1; display: flex; align-items: center; background: #222; border-radius: 20px; padding: 5px 15px; border: 1px solid #444; }
#search-input { flex: 1; background: none; border: none; color: white; font-size: 16px; padding: 8px; outline: none; }
#mic-btn { background: none; border: none; cursor: pointer; padding: 5px; }
#mic-btn svg { width: 20px; height: 20px; fill: var(--primary); }
.btn-close-search { background: none; border: none; color: white; font-size: 24px; cursor: pointer; }
.search-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 15px; }

/* ADS BANNER */
.ad-banner-container { width: 100%; display: flex; justify-content: center; align-items: center; margin: 20px 0; overflow: hidden; min-height: 50px; background: rgba(255,255,255,0.03); border-radius: 8px; padding: 10px 0;}

#loader { text-align: center; padding: 50px; color: var(--primary); }