/* ====================================================
   PhimViet - Main CSS
   Custom styles on top of Tailwind CSS
   ==================================================== */

/* ---------- Typography ---------- */
* { box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; }

/* ---------- Navbar ---------- */
#navbar {
    background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
}
#navbar.scrolled {
    background: rgba(10, 10, 10, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 4px 30px rgba(0,0,0,0.5);
}

/* ---------- Horizontal scrollable slider ---------- */
.hidden-scroll-slider {
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.hidden-scroll-slider::-webkit-scrollbar { display: none; }

/* ---------- Movie Card ---------- */
.movie-card-inner {
    transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1),
                box-shadow 0.25s ease;
    will-change: transform;
}
.movie-card:hover .movie-card-inner {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(232,0,45,0.15);
    z-index: 5;
}

/* ---------- Image loading shimmer ---------- */
.img-loading {
    background: linear-gradient(90deg,
        #1a1a1a 25%, #252525 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ---------- Hero slider fade transition ---------- */
.hero-fade-enter { opacity: 0; transform: scale(1.05); }
.hero-fade-active { transition: opacity 0.7s ease, transform 0.7s ease; }
.hero-fade-done   { opacity: 1; transform: scale(1); }

/* ---------- Video Player Page ---------- */
.episode-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(232,0,45,0.5) transparent;
}
.episode-list::-webkit-scrollbar { width: 3px; }
.episode-list::-webkit-scrollbar-thumb { background: rgba(232,0,45,0.4); border-radius: 99px; }

/* ---------- Search Dropdown ---------- */
#search-dropdown {
    animation: fadeInDown 0.18s ease;
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Gradient text ---------- */
.gradient-text {
    background: linear-gradient(135deg, #E8002D, #ff6b8e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---------- Responsive aspect-ratio for cards in grid ---------- */
.movie-card .aspect-\[2\/3\] {
    aspect-ratio: 2/3;
}

/* ---------- Admin table row hover ---------- */
tbody tr:hover td { background: rgba(255,255,255,0.02); }

/* ---------- Checkbox accent ---------- */
input[type="checkbox"] { accent-color: #E8002D; }