/* ============================================
   DRAMA PAGE SPECIFIC STYLES
   ============================================ */

:root {
    --black: #000000;
    --noir: #0a0608;
    --charcoal: #14101a;
    --slate: #1c1624;
    --steel: #2d2438;
    --silver: #9a8fa8;
    --pearl: #f0eaf5;
    --white: #ffffff;
    --ruby: #e31b54;
    --crimson: #c41040;
    --gold: #f5a623;
    --amber: #ffb347;
    --burgundy: #6b1c3a;
    --royal-purple: #4a1259;
    --deep-violet: #2d1b4e;
    --font-body: 'Vazirmatn', 'Tajawal', 'Cairo', sans-serif;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Theme: Ocean Blue */
[data-theme="ocean"] { --ruby: #0ea5e9; --crimson: #0284c7; --gold: #38bdf8; --amber: #7dd3fc; --burgundy: #0c4a6e; --royal-purple: #075985; --deep-violet: #0c4a6e; }
/* Theme: Emerald Green */
[data-theme="emerald"] { --ruby: #10b981; --crimson: #059669; --gold: #34d399; --amber: #6ee7b7; --burgundy: #064e3b; --royal-purple: #047857; --deep-violet: #064e3b; }
/* Theme: Purple Night */
[data-theme="purple"] { --ruby: #a855f7; --crimson: #9333ea; --gold: #c084fc; --amber: #d8b4fe; --burgundy: #4c1d95; --royal-purple: #6b21a8; --deep-violet: #4c1d95; }
/* Theme: Sunset Orange */
[data-theme="sunset"] { --ruby: #f97316; --crimson: #ea580c; --gold: #fb923c; --amber: #fdba74; --burgundy: #7c2d12; --royal-purple: #9a3412; --deep-violet: #7c2d12; }
/* Theme: Rose Pink */
[data-theme="rose"] { --ruby: #ec4899; --crimson: #db2777; --gold: #f472b6; --amber: #f9a8d4; --burgundy: #831843; --royal-purple: #9d174d; --deep-violet: #831843; }
/* Theme: Red */
[data-theme="red"] { --ruby: #ef4444; --crimson: #dc2626; --gold: #f87171; --amber: #fca5a5; --burgundy: #7f1d1d; --royal-purple: #991b1b; --deep-violet: #7f1d1d; }
/* Theme: Dark Red */
[data-theme="darkred"] { --ruby: #b91c1c; --crimson: #991b1b; --gold: #dc2626; --amber: #ef4444; --burgundy: #450a0a; --royal-purple: #7f1d1d; --deep-violet: #450a0a; }
/* Theme: Yellow */
[data-theme="yellow"] { --ruby: #eab308; --crimson: #ca8a04; --gold: #facc15; --amber: #fde047; --burgundy: #713f12; --royal-purple: #854d0e; --deep-violet: #713f12; }
/* Theme: Dark Yellow */
[data-theme="darkyellow"] { --ruby: #a16207; --crimson: #854d0e; --gold: #ca8a04; --amber: #eab308; --burgundy: #422006; --royal-purple: #713f12; --deep-violet: #422006; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--noir); color: var(--pearl); line-height: 1.6; min-height: 100vh; }
a { text-decoration: none; color: inherit; }

/* Background Layer */
.bg-layer { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, var(--noir) 0%, #0f0810 50%, var(--noir) 100%); }
.bg-layer::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 100% 100% at 50% 0%, var(--royal-purple) 0%, transparent 50%), radial-gradient(ellipse 80% 60% at 100% 100%, var(--burgundy) 0%, transparent 50%); opacity: 0.35; }

/* Page Cover - Full Cover Under Menu */
.page-cover {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 160px 48px 80px;
    margin-top: -120px; /* Pull up fully under the fixed header */
    background: var(--noir);
    overflow: hidden;
}
.page-cover__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.page-cover__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,6,8,0.3) 0%, rgba(10,6,8,0.6) 50%, rgba(10,6,8,0.95) 100%); z-index: 1; }
.page-cover::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, var(--ruby) 0%, transparent 60%); opacity: 0.15; mix-blend-mode: overlay; z-index: 2; }
.page-cover__content { position: relative; z-index: 3; text-align: center; max-width: 800px; width: 100%; }
.page-cover__icon { font-size: 4rem; background: linear-gradient(135deg, var(--ruby), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 20px; display: block; }
.page-cover__title { font-size: 3rem; font-weight: 700; color: var(--white); margin-bottom: 15px; }
.page-cover__title span { background: linear-gradient(135deg, var(--ruby), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.page-cover__subtitle { font-size: 1.1rem; color: var(--silver); max-width: 500px; margin: 0 auto; }

@media (max-width: 1024px) { .page-cover { padding: 120px 24px 60px; } }
@media (max-width: 768px) { .page-cover { padding: 100px 20px 50px; min-height: 350px; } .page-cover__icon { font-size: 3rem; } .page-cover__title { font-size: 2rem; } }
@media (max-width: 576px) { .page-cover { padding: 100px 16px 40px; } }

/* Filter Tabs */
.filter-section { padding: 0 40px 40px; }
.filter-tabs { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; }
.filter-tab { padding: 12px 28px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 50px; color: var(--silver); font-size: 0.95rem; cursor: pointer; transition: all 0.3s ease; }
.filter-tab:hover { background: rgba(255,255,255,0.08); color: var(--pearl); }
.filter-tab.active { background: linear-gradient(135deg, var(--ruby), var(--crimson)); color: white; border-color: transparent; }

/* Drama Grid */
.drama-section { padding: 0 48px 60px; }
.drama-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; max-width: 1600px; margin: 0 auto; }
@media (max-width: 1400px) { .drama-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1200px) { .drama-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) { .drama-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .drama-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }

/* Drama Card */
.drama-card { position: relative; border-radius: 20px; overflow: hidden; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); transition: all 0.5s var(--ease-out-expo); cursor: pointer; }
.drama-card::before { content: ''; position: absolute; inset: 0; border-radius: 20px; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent 50%, rgba(255,255,255,0.04)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; transition: all 0.6s ease; z-index: 10; }
.drama-card:hover::before { background: linear-gradient(135deg, var(--ruby) 0%, var(--gold) 50%, var(--amber) 100%); }
.drama-card::after { content: ''; position: absolute; inset: -2px; border-radius: 22px; background: linear-gradient(135deg, var(--ruby), var(--gold)); opacity: 0; z-index: -1; filter: blur(20px); transition: opacity 0.5s ease; }
.drama-card:hover::after { opacity: 0.25; }
.drama-card:hover { transform: translateY(-12px) scale(1.02); box-shadow: 0 32px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(227, 27, 84, 0.15); }
.drama-card__poster { position: relative; aspect-ratio: 2/3; overflow: hidden; }
.drama-card__poster img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); transition: transform 0.7s var(--ease-out-expo), filter 0.5s ease; }
.drama-card:hover .drama-card__poster img { transform: scale(1); filter: brightness(0.85); }
/* Shimmer Effect */
.drama-card__poster::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); transform: skewX(-20deg); z-index: 2; transition: left 0.8s ease; }
.drama-card:hover .drama-card__poster::before { left: 150%; }
.drama-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.3) 50%, transparent 100%); opacity: 0; transition: opacity 0.4s ease; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; }
.drama-card:hover .drama-card__overlay { opacity: 1; }
.drama-card__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); width: 60px; height: 60px; background: linear-gradient(135deg, var(--ruby), var(--gold)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; opacity: 0; transition: all 0.4s ease; }
.drama-card:hover .drama-card__play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.drama-card__stats { display: flex; gap: 12px; margin-bottom: 12px; }
.drama-card__stat { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--silver); background: rgba(0,0,0,0.5); padding: 4px 10px; border-radius: 20px; }
.drama-card__stat i { color: var(--gold); }
.drama-card__rating { position: absolute; top: 12px; right: 12px; background: linear-gradient(135deg, rgba(245, 166, 35, 0.9), rgba(255, 179, 71, 0.9)); padding: 6px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; color: #000; display: flex; align-items: center; gap: 4px; }
.drama-card__rating i { font-size: 0.75rem; }
.drama-card__status { position: absolute; top: 12px; left: 12px; padding: 6px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
.drama-card__status--ongoing { background: linear-gradient(135deg, var(--ruby), var(--crimson)); color: white; }
.drama-card__status--completed { background: linear-gradient(135deg, #10b981, #059669); color: white; }
.drama-card__info { padding: 16px; }
.drama-card__title { font-size: 1rem; font-weight: 600; color: var(--pearl); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drama-card__meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--silver); gap: 8px; }
.drama-card__seasons { display: flex; align-items: center; gap: 4px; color: var(--gold); }
.drama-card__episodes { display: flex; align-items: center; gap: 4px; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 8px; padding: 40px; flex-wrap: wrap; }
.pagination a, .pagination span { padding: 12px 18px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; color: var(--silver); font-size: 0.9rem; transition: all 0.3s ease; }
.pagination a:hover { background: rgba(255,255,255,0.1); color: var(--pearl); }
.pagination .currentpage { background: linear-gradient(135deg, var(--ruby), var(--gold)); color: white; border-color: transparent; }
.pagination .nextbutton, .pagination .lastbutton { background: var(--charcoal); }
.pagination .nextbutton:hover, .pagination .lastbutton:hover { background: var(--ruby); color: white; }

/* Mobile */
@media (max-width: 1024px) {
    .drama-section, .filter-section { padding-left: 20px; padding-right: 20px; }
    .drama-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
}
@media (max-width: 768px) {
    .page-cover { padding: 120px 20px 50px; min-height: 350px; }
    .page-cover__icon { font-size: 3rem; }
    .page-cover__title { font-size: 2rem; }
    .drama-section, .filter-section { padding-left: 20px; padding-right: 20px; }
    .drama-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
}