/* ============================================================ StreamHub — Premium Dark Streaming UI All colors driven by CSS variables set by PHP/admin ============================================================ */ /* ── Google Font loaded dynamically via PHP in ── */ :root { --primary: #e50914; --primary-dim: rgba(229,9,20,.18); --primary-glow: rgba(229,9,20,.45); --secondary: #ffffff; --bg: #0a0a0f; --bg2: #111118; --bg3: #1a1a24; --bg4: #22222e; --card-bg: #16161f; --border: rgba(255,255,255,.07); --border2: rgba(255,255,255,.13); --text: #e8e8f0; --text-muted: #888898; --text-dim: #555565; --radius: 10px; --radius-sm: 6px; --radius-lg: 16px; --shadow: 0 8px 32px rgba(0,0,0,.55); --shadow-card: 0 4px 20px rgba(0,0,0,.45); --transition: .22s cubic-bezier(.4,0,.2,1); --nav-h: 64px; --font: 'Outfit', 'Segoe UI', sans-serif; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button { cursor: pointer; font-family: var(--font); } /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg2); } ::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary); } /* ============================================================ NAVIGATION ============================================================ */ .navbar { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); background: linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,0) 100%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.04); z-index: 1000; transition: background var(--transition), box-shadow var(--transition); } .navbar.scrolled { background: rgba(10,10,15,.97); box-shadow: 0 2px 24px rgba(0,0,0,.6); } .nav-inner { max-width: 1400px; margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: center; gap: 32px; } .nav-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .nav-logo img { height: 34px; width: auto; object-fit: contain; } .nav-logo-text { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: var(--primary); text-transform: uppercase; white-space: nowrap; } .nav-links { display: flex; align-items: center; gap: 4px; flex: 1; } .nav-links a { padding: 6px 14px; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 500; color: var(--text-muted); transition: color var(--transition), background var(--transition); white-space: nowrap; } .nav-links a:hover, .nav-links a.active { color: var(--secondary); background: rgba(255,255,255,.06); } /* Search */ .nav-search { position: relative; flex: 0 1 320px; } .nav-search input { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: 24px; padding: 8px 16px 8px 40px; color: var(--text); font-family: var(--font); font-size: .875rem; outline: none; transition: border-color var(--transition), background var(--transition); } .nav-search input:focus { border-color: var(--primary); background: var(--bg4); } .nav-search input::placeholder { color: var(--text-dim); } .nav-search .search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-dim); font-size: .85rem; pointer-events: none; } .search-dropdown { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--bg3); border: 1px solid var(--border2); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); z-index: 200; display: none; } .search-dropdown.active { display: block; } .search-result-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; transition: background var(--transition); } .search-result-item:hover { background: var(--bg4); } .search-result-item img { width: 40px; height: 56px; object-fit: cover; border-radius: 4px; flex-shrink: 0; } .search-result-info { flex: 1; min-width: 0; } .search-result-title { font-size: .875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-result-meta { font-size: .75rem; color: var(--text-muted); } .search-no-results { padding: 20px; text-align: center; color: var(--text-muted); font-size: .875rem; } /* Nav Auth */ .nav-auth { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .btn-signin { padding: 7px 16px; border-radius: var(--radius-sm); font-size: .875rem; font-weight: 500; color: var(--text-muted); border: 1px solid var(--border2); background: transparent; transition: all var(--transition); } .btn-signin:hover { color: var(--secondary); border-color: rgba(255,255,255,.3); } .btn-join { padding: 7px 18px; border-radius: var(--radius-sm); font-size: .875rem; font-weight: 600; color: #fff; background: var(--primary); border: none; transition: all var(--transition); } .btn-join:hover { background: #c50812; transform: translateY(-1px); box-shadow: 0 4px 14px var(--primary-glow); } /* User dropdown */ .nav-user { position: relative; } .nav-user-btn { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--bg3); border: 1px solid var(--border); font-size: .875rem; font-weight: 500; color: var(--text); transition: all var(--transition); } .nav-user-btn:hover { border-color: var(--border2); background: var(--bg4); } .nav-user-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; color: #fff; } .nav-user-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 180px; background: var(--bg3); border: 1px solid var(--border2); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: none; } .nav-user.open .nav-user-dropdown { display: block; } .nav-user-dropdown a { display: block; padding: 10px 16px; font-size: .875rem; color: var(--text-muted); transition: all var(--transition); } .nav-user-dropdown a:hover { background: var(--bg4); color: var(--text); } .nav-user-dropdown .divider { height: 1px; background: var(--border); margin: 4px 0; } /* Hamburger */ .nav-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px; margin-left: auto; } .nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: all var(--transition); } .nav-mobile { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; background: rgba(10,10,15,.98); border-bottom: 1px solid var(--border); padding: 16px 24px 24px; z-index: 999; flex-direction: column; gap: 4px; } .nav-mobile.open { display: flex; } .nav-mobile a { padding: 11px 16px; border-radius: var(--radius-sm); font-size: .95rem; font-weight: 500; color: var(--text-muted); transition: all var(--transition); } .nav-mobile a:hover { color: var(--text); background: var(--bg3); } .nav-mobile .mobile-search { margin-bottom: 8px; } .nav-mobile .mobile-search input { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 16px; color: var(--text); font-family: var(--font); font-size: .9rem; outline: none; } /* ============================================================ HERO — Half-width split layout Left = content, Right = poster/backdrop image ============================================================ */ .hero-section { background: var(--bg); overflow: hidden; } .hero-slider { position: relative; max-width: 1400px; margin: 0 auto; padding: 0 24px; min-height: 520px; max-height: 620px; display: flex; align-items: stretch; } /* Each slide is a flex row: left content | right image */ .hero-slide { display: none; width: 100%; min-height: 520px; max-height: 620px; align-items: center; gap: 0; } .hero-slide.active { display: flex; } /* Left: text content */ .hero-content { flex: 0 0 50%; max-width: 50%; padding: 80px 48px 100px 0; z-index: 2; position: relative; } /* Right: image */ .hero-image { flex: 0 0 50%; max-width: 50%; position: relative; overflow: hidden; border-radius: var(--radius-lg) 0 0 var(--radius-lg); margin: 24px 0 24px 0; min-height: 440px; } .hero-image-bg { position: absolute; inset: 0; background-size: cover; background-position: center top; transform: scale(1.04); transition: transform 8s ease; } .hero-slide.active .hero-image-bg { transform: scale(1); } /* Fade left edge of image into background */ .hero-image-fade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, transparent 30%); } .hero-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--primary); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; margin-bottom: 14px; } .hero-title { font-size: clamp(1.9rem, 4.5vw, 3.4rem); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; margin-bottom: 12px; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.4); } .hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; font-size: .875rem; color: var(--text-muted); } .hero-meta .rating { display: flex; align-items: center; gap: 4px; color: #f5c518; font-weight: 700; font-size: .9rem; } .hero-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-dim); } .hero-genres { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; } .hero-genre-tag { padding: 3px 10px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 4px; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); } .hero-desc { font-size: .9rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 28px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } .btn-play { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; border-radius: var(--radius-sm); font-size: .95rem; font-weight: 700; color: #fff; background: var(--primary); border: none; transition: all var(--transition); box-shadow: 0 4px 20px var(--primary-glow); } .btn-play:hover { background: #c50812; transform: translateY(-2px); box-shadow: 0 8px 28px var(--primary-glow); } .btn-play svg { width: 16px; height: 16px; } .btn-info { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 600; color: var(--text); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); transition: all var(--transition); } .btn-info:hover { background: rgba(255,255,255,.2); transform: translateY(-1px); } /* Hero nav dots — sit above trending bar on left side */ .hero-dots { position: absolute; bottom: 60px; left: 0; display: flex; gap: 8px; } .hero-dot { width: 24px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.25); cursor: pointer; transition: all var(--transition); border: none; padding: 0; } .hero-dot.active { background: var(--primary); width: 40px; } /* Trending ticker overlay */ .hero-trending-bar { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(90deg, var(--bg) 0%, rgba(10,10,15,.9) 60%, transparent 100%); border-top: 1px solid var(--border); padding: 0 24px 0 0; display: flex; align-items: center; height: 52px; gap: 20px; overflow: hidden; /* constrained to left (content) half */ max-width: 50%; width: 50%; } .trending-label { display: flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); white-space: nowrap; flex-shrink: 0; } .trending-items { display: flex; gap: 24px; overflow: hidden; flex: 1; } .trending-item { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: .82rem; color: var(--text-muted); transition: color var(--transition); } .trending-item:hover { color: var(--text); } .trending-item .num { font-weight: 800; font-size: .7rem; color: var(--primary); min-width: 16px; } .trending-item img { width: 28px; height: 28px; border-radius: 4px; object-fit: cover; } /* ============================================================ LAYOUT ============================================================ */ .page-body { margin-top: var(--nav-h); min-height: 60vh; } .container { max-width: 1400px; margin: 0 auto; padding: 0 24px; } .content-layout { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; } @media (max-width: 1100px) { .content-layout { grid-template-columns: 1fr; } .sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } } @media (max-width: 640px) { .sidebar { grid-template-columns: 1fr; } } /* ============================================================ SECTION HEADERS ============================================================ */ .section { padding: 52px 0 20px; } .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 16px; } .section-title { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); } .section-title::before { content: ''; display: block; width: 4px; height: 20px; background: var(--primary); border-radius: 2px; flex-shrink: 0; } .section-link { font-size: .82rem; font-weight: 600; color: var(--primary); opacity: .8; transition: opacity var(--transition); white-space: nowrap; } .section-link:hover { opacity: 1; } /* ============================================================ MOVIE CARDS ============================================================ */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; } .cards-grid-wide { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .movie-card { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--card-bg); box-shadow: var(--shadow-card); transition: transform var(--transition), box-shadow var(--transition); cursor: pointer; } .movie-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 16px 40px rgba(0,0,0,.65); z-index: 2; } .card-poster { position: relative; aspect-ratio: 2/3; overflow: hidden; } .card-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .movie-card:hover .card-poster img { transform: scale(1.07); } .card-quality { position: absolute; top: 8px; left: 8px; padding: 2px 7px; background: var(--primary); color: #fff; font-size: .65rem; font-weight: 700; letter-spacing: .05em; border-radius: 3px; text-transform: uppercase; } .card-new { position: absolute; top: 8px; right: 8px; padding: 2px 7px; background: #16a34a; color: #fff; font-size: .65rem; font-weight: 700; border-radius: 3px; text-transform: uppercase; } .card-type { position: absolute; top: 8px; right: 8px; padding: 2px 7px; background: rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.2); color: var(--text-muted); font-size: .65rem; font-weight: 600; border-radius: 3px; text-transform: uppercase; } .card-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,15,.97) 0%, rgba(10,10,15,.3) 55%, transparent 100%); opacity: 0; transition: opacity var(--transition); display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; gap: 8px; } .movie-card:hover .card-overlay { opacity: 1; } .card-play-btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--primary); border: none; color: #fff; font-size: 1.1rem; align-self: center; margin-bottom: 6px; transition: transform var(--transition); } .movie-card:hover .card-play-btn { transform: scale(1.1); } .card-overlay-title { font-size: .8rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } .card-info { padding: 10px 12px 12px; } .card-title { font-size: .85rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; transition: color var(--transition); } .movie-card:hover .card-title { color: var(--primary); } .card-meta { display: flex; align-items: center; justify-content: space-between; font-size: .72rem; color: var(--text-dim); } .card-rating { display: flex; align-items: center; gap: 3px; color: #f5c518; font-weight: 600; } .card-lang { background: var(--bg3); padding: 1px 6px; border-radius: 3px; font-size: .65rem; letter-spacing: .04em; } /* ============================================================ TABS (section filter) ============================================================ */ .tabs-bar { display: flex; align-items: center; gap: 4px; margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabs-bar::-webkit-scrollbar { display: none; } .tab-btn { padding: 7px 16px; border-radius: 24px; font-size: .82rem; font-weight: 600; color: var(--text-muted); background: var(--bg3); border: 1px solid transparent; transition: all var(--transition); white-space: nowrap; flex-shrink: 0; } .tab-btn.active, .tab-btn:hover { color: #fff; background: var(--primary); border-color: var(--primary); } /* ============================================================ SIDEBAR WIDGETS ============================================================ */ .widget { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 24px; } .widget-title { padding: 14px 16px; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; } .widget-title::before { content: ''; display: block; width: 3px; height: 14px; background: var(--primary); border-radius: 2px; } /* Rank list */ .rank-list { padding: 8px 0; } .rank-item { display: flex; align-items: center; gap: 12px; padding: 8px 16px; transition: background var(--transition); } .rank-item:hover { background: var(--bg3); } .rank-num { font-size: .75rem; font-weight: 800; color: var(--text-dim); min-width: 18px; text-align: center; } .rank-num.top3 { color: var(--primary); } .rank-item img { width: 42px; height: 58px; object-fit: cover; border-radius: 4px; flex-shrink: 0; } .rank-info { flex: 1; min-width: 0; } .rank-title { font-size: .82rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; } .rank-meta { font-size: .72rem; color: var(--text-dim); display: flex; gap: 8px; } .rank-rating { color: #f5c518; } /* Genre cloud */ .genre-cloud { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px 16px; } .genre-tag { padding: 5px 12px; background: var(--bg3); border: 1px solid var(--border); border-radius: 24px; font-size: .75rem; font-weight: 500; color: var(--text-muted); transition: all var(--transition); } .genre-tag:hover { background: var(--primary-dim); border-color: var(--primary); color: var(--primary); } /* Language pills */ .lang-pills { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px 16px; } .lang-pill { padding: 5px 12px; background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); transition: all var(--transition); } .lang-pill:hover { background: var(--bg4); border-color: var(--border2); color: var(--text); } /* ============================================================ MOVIES / BROWSE PAGE ============================================================ */ /* page-header moved below */ .page-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: 6px; } .page-subtitle { font-size: .875rem; color: var(--text-muted); } /* Alphabet filter */ .alpha-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 18px; padding: 14px 0 0; } .alpha-btn { padding: 5px 0; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font-size: .75rem; font-weight: 700; transition: all var(--transition); min-width: 32px; text-align: center; text-decoration: none; line-height: 1.8; letter-spacing: .02em; } .alpha-btn:hover { background: var(--bg4); border-color: var(--border2); color: var(--text); } .alpha-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 2px 8px var(--primary-glow); } /* Filter bar */ .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 20px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 24px; } .filter-label { font-size: .8rem; font-weight: 600; color: var(--text-muted); margin-right: 4px; white-space: nowrap; } .filter-select { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font); font-size: .82rem; padding: 7px 28px 7px 10px; outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; transition: border-color var(--transition); } .filter-select:focus { border-color: var(--primary); } .filter-divider { width: 1px; height: 24px; background: var(--border); } .btn-filter { padding: 7px 18px; background: var(--primary); border: none; border-radius: var(--radius-sm); color: #fff; font-size: .82rem; font-weight: 700; transition: all var(--transition); } .btn-filter:hover { background: #c50812; } /* Sort pills */ .sort-bar { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; } .sort-btn { padding: 6px 14px; background: var(--bg3); border: 1px solid var(--border); border-radius: 24px; font-size: .8rem; font-weight: 600; color: var(--text-muted); transition: all var(--transition); } .sort-btn.active, .sort-btn:hover { background: var(--primary-dim); border-color: var(--primary); color: var(--primary); } .results-count { font-size: .82rem; color: var(--text-dim); margin-bottom: 20px; } /* ============================================================ PAGINATION ============================================================ */ .pagination { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 40px 0 20px; flex-wrap: wrap; } .page-btn { width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--bg2); border: 1px solid var(--border); color: var(--text-muted); font-size: .82rem; font-weight: 600; display: flex; align-items: center; justify-content: center; transition: all var(--transition); } .page-btn:hover { border-color: var(--border2); color: var(--text); } .page-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; } .page-btn.prev-next { width: auto; padding: 0 14px; gap: 6px; } .page-btn.disabled { opacity: .35; pointer-events: none; } /* ============================================================ MOVIE DETAIL PAGE ============================================================ */ .detail-backdrop { position: fixed; top: 0; left: 0; right: 0; height: 100vh; background-size: cover; background-position: center top; opacity: .08; pointer-events: none; z-index: 0; filter: blur(2px); } .detail-wrap { position: relative; z-index: 1; padding-top: calc(var(--nav-h) + 36px); } .detail-hero { display: grid; grid-template-columns: 240px 1fr; gap: 36px; margin-bottom: 36px; align-items: start; } @media (max-width: 700px) { .detail-hero { grid-template-columns: 1fr; } .detail-poster { max-width: 200px; } } .detail-poster { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.7); flex-shrink: 0; } .detail-poster img { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; } .detail-score-badge { position: absolute; bottom: 12px; right: 12px; background: rgba(10,10,15,.9); border: 2px solid var(--primary); border-radius: 8px; padding: 6px 10px; text-align: center; } .detail-score-num { font-size: 1.3rem; font-weight: 800; color: var(--primary); line-height: 1; } .detail-score-label { font-size: .6rem; font-weight: 700; letter-spacing: .06em; color: var(--text-muted); text-transform: uppercase; } .detail-info { padding-top: 4px; } .detail-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text-dim); margin-bottom: 12px; } .detail-breadcrumb a { color: var(--text-dim); transition: color var(--transition); } .detail-breadcrumb a:hover { color: var(--primary); } .detail-breadcrumb span { color: var(--text-dim); } .detail-title { font-size: clamp(1.5rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--text); margin-bottom: 10px; } .detail-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 14px; font-size: .875rem; color: var(--text-muted); } .detail-meta-item { display: flex; align-items: center; gap: 5px; } .detail-meta-item svg { opacity: .6; } .detail-rating-star { color: #f5c518; font-weight: 700; } .detail-genres-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; } .detail-genre-chip { padding: 4px 12px; background: var(--bg3); border: 1px solid var(--border); border-radius: 24px; font-size: .75rem; font-weight: 600; color: var(--text-muted); transition: all var(--transition); } .detail-genre-chip:hover { background: var(--primary-dim); border-color: var(--primary); color: var(--primary); } .detail-desc { font-size: .9rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 24px; max-width: 620px; } .detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; } .btn-watchlist { display: inline-flex; align-items: center; gap: 7px; padding: 10px 20px; background: var(--bg3); border: 1px solid var(--border2); border-radius: var(--radius-sm); font-size: .875rem; font-weight: 600; color: var(--text-muted); transition: all var(--transition); } .btn-watchlist:hover { background: var(--bg4); color: var(--text); } .btn-share { display: inline-flex; align-items: center; gap: 7px; padding: 10px 20px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .875rem; font-weight: 600; color: var(--text-dim); transition: all var(--transition); } .btn-share:hover { border-color: var(--border2); color: var(--text-muted); } .detail-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; max-width: 440px; } .stat-box { background: var(--bg2); padding: 14px 12px; text-align: center; } .stat-val { font-size: 1.1rem; font-weight: 800; color: var(--text); line-height: 1.2; } .stat-label { font-size: .65rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); margin-top: 2px; } /* ── Player Area ── */ .player-section { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 24px; } .server-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 16px; background: var(--bg3); border-bottom: 1px solid var(--border); } .server-tabs-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin-right: 6px; } .server-btn { padding: 6px 14px; background: var(--bg4); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .78rem; font-weight: 600; color: var(--text-muted); transition: all var(--transition); cursor: pointer; display: flex; align-items: center; gap: 6px; } .server-btn:hover { border-color: var(--border2); color: var(--text); } .server-btn.active { background: var(--primary-dim); border-color: var(--primary); color: var(--primary); } .quality-badge { padding: 1px 5px; background: rgba(229,9,20,.25); border-radius: 3px; font-size: .6rem; font-weight: 700; color: var(--primary); } .server-btn.active .quality-badge { background: var(--primary); color: #fff; } .player-wrap { position: relative; aspect-ratio: 16/9; background: #000; } .player-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } .player-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: radial-gradient(ellipse at center, #16161f 0%, #0a0a0f 100%); cursor: pointer; } .player-placeholder:hover .play-circle { transform: scale(1.08); } .player-thumb { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .25; } .play-circle { position: relative; width: 72px; height: 72px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 12px var(--primary-dim), 0 8px 32px var(--primary-glow); transition: transform var(--transition); } .play-circle svg { width: 26px; height: 26px; margin-left: 4px; } .player-placeholder-text { position: relative; font-size: .875rem; font-weight: 600; color: var(--text-muted); } .player-meta-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--border); font-size: .8rem; color: var(--text-muted); flex-wrap: wrap; gap: 8px; } .player-meta-bar strong { color: var(--text); } .btn-report { display: flex; align-items: center; gap: 5px; padding: 5px 12px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .75rem; font-weight: 600; color: var(--text-dim); cursor: pointer; transition: all var(--transition); } .btn-report:hover { border-color: var(--primary); color: var(--primary); } /* Content tabs (Info / Download / Comments) */ .content-tabs { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .content-tab-nav { display: flex; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; } .content-tab-nav::-webkit-scrollbar { display: none; } .content-tab-btn { padding: 14px 20px; font-size: .85rem; font-weight: 600; color: var(--text-muted); background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: all var(--transition); cursor: pointer; } .content-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); } .content-tab-btn:hover:not(.active) { color: var(--text); } /* ── Homepage section tab panels ── */ .tab-panel { display: none; } .tab-panel.active { display: block; } /* ── Movie/Series detail content tab panels ── */ .content-tab-panel { display: none !important; padding: 20px; } .content-tab-panel.active { display: block !important; } /* Info table */ .info-table { width: 100%; border-collapse: collapse; } .info-table tr { border-bottom: 1px solid var(--border); } .info-table tr:last-child { border-bottom: none; } .info-table th { width: 140px; padding: 11px 14px 11px 0; text-align: left; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); vertical-align: top; } .info-table td { padding: 11px 0; font-size: .875rem; color: var(--text-muted); vertical-align: top; } .info-table a { color: var(--primary); } /* Download table */ .dl-table { width: 100%; border-collapse: collapse; } .dl-table th { text-align: left; padding: 8px 10px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); border-bottom: 1px solid var(--border); } .dl-table td { padding: 12px 10px; font-size: .82rem; color: var(--text-muted); border-bottom: 1px solid var(--border); } .dl-table tr:last-child td { border-bottom: none; } .btn-dl { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--primary); border: none; border-radius: var(--radius-sm); color: #fff; font-size: .78rem; font-weight: 700; transition: all var(--transition); } .btn-dl:hover { background: #c50812; transform: translateY(-1px); } .no-downloads { text-align: center; padding: 32px; color: var(--text-dim); font-size: .875rem; } /* ============================================================ SERIES / EPISODES ============================================================ */ .season-accordion { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; } .season-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--bg3); cursor: pointer; transition: background var(--transition); } .season-header:hover { background: var(--bg4); } .season-name { font-size: .9rem; font-weight: 700; } .season-ep-count { font-size: .78rem; color: var(--text-dim); } .season-chevron { transition: transform var(--transition); color: var(--text-dim); } .season-accordion.open .season-chevron { transform: rotate(180deg); } .season-episodes { display: none; } .season-accordion.open .season-episodes { display: block; } .episode-row { display: grid; grid-template-columns: 120px 1fr auto; gap: 14px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--border); transition: background var(--transition); cursor: pointer; } .episode-row:hover { background: var(--bg3); } .episode-thumb { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 16/9; } .episode-thumb img { width: 100%; height: 100%; object-fit: cover; } .episode-thumb-placeholder { width: 100%; height: 100%; background: var(--bg4); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--text-dim); } .episode-info { min-width: 0; } .ep-num { font-size: .72rem; font-weight: 700; color: var(--text-dim); margin-bottom: 3px; } .ep-title { font-size: .85rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ep-desc { font-size: .75rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; } .ep-duration { font-size: .75rem; color: var(--text-dim); white-space: nowrap; } .btn-ep-play { padding: 7px 14px; background: var(--primary); border: none; border-radius: var(--radius-sm); color: #fff; font-size: .75rem; font-weight: 700; flex-shrink: 0; transition: all var(--transition); } .btn-ep-play:hover { background: #c50812; } /* ============================================================ REPORT MODAL ============================================================ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75); backdrop-filter: blur(8px); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--transition); } .modal-overlay.open { opacity: 1; pointer-events: auto; } .modal { background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--radius-lg); padding: 28px; width: 90%; max-width: 460px; box-shadow: var(--shadow); transform: translateY(20px); transition: transform var(--transition); } .modal-overlay.open .modal { transform: translateY(0); } .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .modal-title { font-size: 1.05rem; font-weight: 700; } .modal-close { width: 30px; height: 30px; border-radius: 50%; background: var(--bg3); border: none; color: var(--text-muted); font-size: 1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition); } .modal-close:hover { background: var(--bg4); color: var(--text); } .form-group { margin-bottom: 16px; } .form-label { display: block; font-size: .78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; letter-spacing: .03em; } .form-control { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; color: var(--text); font-family: var(--font); font-size: .875rem; outline: none; transition: border-color var(--transition); } .form-control:focus { border-color: var(--primary); } .form-control option { background: var(--bg3); } textarea.form-control { resize: vertical; min-height: 90px; } .btn-submit { width: 100%; padding: 11px; background: var(--primary); border: none; border-radius: var(--radius-sm); color: #fff; font-family: var(--font); font-size: .9rem; font-weight: 700; cursor: pointer; transition: all var(--transition); margin-top: 8px; } .btn-submit:hover { background: #c50812; } .alert-success { display: none; padding: 12px 16px; background: rgba(22,163,74,.15); border: 1px solid rgba(22,163,74,.3); border-radius: var(--radius-sm); color: #4ade80; font-size: .875rem; text-align: center; margin-top: 12px; } /* ============================================================ SHARE TOAST ============================================================ */ .toast { position: fixed; bottom: 24px; right: 24px; background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--radius); padding: 12px 18px; font-size: .875rem; color: var(--text); box-shadow: var(--shadow); transform: translateY(20px); opacity: 0; transition: all var(--transition); z-index: 3000; pointer-events: none; } .toast.show { transform: translateY(0); opacity: 1; } /* ============================================================ RELATED / SECTION CARDS (horizontal scroll) ============================================================ */ .cards-scroll { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; } .cards-scroll::-webkit-scrollbar { display: none; } .cards-scroll .movie-card { flex: 0 0 160px; } /* ============================================================ AUTH PAGES ============================================================ */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(ellipse at 50% 0%, rgba(229,9,20,.08) 0%, transparent 70%); } .auth-box { width: 100%; max-width: 420px; background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--radius-lg); padding: 40px 36px; box-shadow: var(--shadow); } .auth-logo { text-align: center; margin-bottom: 28px; } .auth-logo-text { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--primary); } .auth-title { font-size: 1.3rem; font-weight: 700; text-align: center; margin-bottom: 6px; } .auth-sub { font-size: .85rem; color: var(--text-muted); text-align: center; margin-bottom: 28px; } .auth-alt-link { text-align: center; margin-top: 20px; font-size: .85rem; color: var(--text-muted); } .auth-alt-link a { color: var(--primary); font-weight: 600; } .form-error { padding: 10px 14px; background: rgba(229,9,20,.12); border: 1px solid rgba(229,9,20,.3); border-radius: var(--radius-sm); color: #f87171; font-size: .82rem; margin-bottom: 16px; } /* ============================================================ FOOTER ============================================================ */ .footer { margin-top: 64px; border-top: 1px solid var(--border); background: var(--bg2); } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; max-width: 1400px; margin: 0 auto; padding: 52px 24px 40px; } @media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; gap: 24px; } } .footer-brand { } .footer-logo { margin-bottom: 12px; } .footer-logo img { height: 28px; width: auto; } .footer-logo-text { font-size: 1.2rem; font-weight: 800; color: var(--primary); letter-spacing: -.02em; } .footer-tagline { font-size: .82rem; color: var(--text-dim); line-height: 1.6; max-width: 220px; } .footer-col-title { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px; } .footer-links { display: flex; flex-direction: column; gap: 9px; } .footer-links a { font-size: .82rem; color: var(--text-muted); transition: color var(--transition); } .footer-links a:hover { color: var(--primary); } .footer-bottom { border-top: 1px solid var(--border); max-width: 1400px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .78rem; color: var(--text-dim); } .footer-disclaimer { max-width: 620px; line-height: 1.5; } .footer-bottom-links { display: flex; gap: 14px; } .footer-bottom-links a { color: var(--text-dim); transition: color var(--transition); } .footer-bottom-links a:hover { color: var(--text-muted); } /* ============================================================ AD SLOTS ============================================================ */ .ad-slot { width: 100%; text-align: center; min-height: 50px; border-radius: var(--radius); overflow: hidden; margin: 16px 0; } .ad-slot-header { margin-bottom: 0; border-radius: 0; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1100px) { .nav-search { flex: 0 1 220px; } } @media (max-width: 860px) { .nav-links { display: none; } .nav-search { display: none; } .nav-hamburger { display: flex; } .detail-stats { grid-template-columns: repeat(2,1fr); } .episode-row { grid-template-columns: 90px 1fr; } .episode-row .btn-ep-play { display: none; } /* Hero: stack vertically on tablet */ .hero-slider { min-height: auto; max-height: none; flex-direction: column; padding: 0 16px; } .hero-slide { flex-direction: column; min-height: auto; max-height: none; } .hero-content { flex: none; max-width: 100%; padding: 32px 0 16px; } .hero-image { flex: none; max-width: 100%; width: 100%; min-height: 260px; border-radius: var(--radius-lg); margin: 0 0 16px; } .hero-trending-bar { max-width: 100%; width: 100%; } .hero-dots { bottom: auto; top: 12px; left: 0; } } @media (max-width: 640px) { .container { padding: 0 16px; } .cards-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .hero-content { padding: 24px 0 12px; } .hero-desc { display: none; } .hero-trending-bar { display: none; } .filter-bar { flex-direction: column; align-items: stretch; } .footer-top { padding: 32px 16px 24px; } .detail-stats { grid-template-columns: repeat(4,1fr); } .stat-val { font-size: .9rem; } } /* ============================================================ UTILITIES ============================================================ */ .hidden { display: none !important; } .text-primary { color: var(--primary) !important; } .text-muted { color: var(--text-muted) !important; } .text-center { text-align: center; } .mt-0 { margin-top: 0; } .section-empty { text-align: center; padding: 60px 20px; color: var(--text-dim); font-size: .9rem; } .section-empty svg { opacity: .25; margin-bottom: 14px; } /* Lazy load blur-in */ img.lazy { opacity: 0; transition: opacity .4s ease; } img.lazy.loaded { opacity: 1; } /* Skeleton loading */ .skeleton { background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================================ ADMIN-INJECTED CUSTOM CSS PLACEHOLDER (appended by PHP from custom_css setting) ============================================================ */ /* ── Active filter states in sidebar ── */ .genre-tag.genre-active { background: var(--primary-dim); border-color: var(--primary); color: var(--primary); } .lang-pill.lang-active { background: var(--primary); border-color: var(--primary); color: #fff; } /* ── Page header with clear button ── */ .page-header { padding: 36px 0 20px; border-bottom: 1px solid var(--border); margin-bottom: 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* ── Clear filters button ── */ .clear-filters-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: var(--bg3); border: 1px solid var(--border2); border-radius: var(--radius-sm); font-size: .8rem; font-weight: 600; color: var(--text-muted); text-decoration: none; transition: all var(--transition); white-space: nowrap; } .clear-filters-btn:hover { background: var(--bg4); color: var(--text); border-color: var(--primary); } /* ============================================================ NEW FEATURES — Watchlist, Reviews, Progress, Account ============================================================ */ /* ── Watchlist button active state ── */ .btn-watchlist.in-watchlist { background: var(--primary-dim); border-color: var(--primary); color: var(--primary); } .btn-watchlist.in-watchlist:hover { background: rgba(229,9,20,.28); } .btn-watchlist:disabled { opacity: .6; cursor: not-allowed; } /* ── Watch progress bar on cards ── */ .watch-progress-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.15); } .watch-progress-fill { height: 100%; background: var(--primary); border-radius: 0 2px 2px 0; transition: width .3s ease; } /* ── Star rating input ── */ .star-rating-input { display: flex; align-items: center; gap: 3px; margin-bottom: 12px; flex-wrap: wrap; } .star-btn { background: none; border: none; font-size: 1.3rem; color: var(--text-dim); cursor: pointer; padding: 2px; transition: color var(--transition), transform var(--transition); line-height: 1; } .star-btn.active { color: #f5c518; } .star-btn:hover { transform: scale(1.15); } .star-rating-label { font-size: .82rem; color: var(--text-muted); margin-left: 6px; white-space: nowrap; } /* ── Review form ── */ .review-form-wrap { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 24px; } .review-form-title { font-size: .95rem; font-weight: 700; margin-bottom: 14px; color: var(--text); } .review-textarea { width: 100%; background: var(--bg4); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; color: var(--text); font-family: var(--font); font-size: .875rem; resize: vertical; min-height: 80px; outline: none; transition: border-color var(--transition); } .review-textarea:focus { border-color: var(--primary); } /* ── Reviews summary ── */ .reviews-summary { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 12px 16px; background: var(--bg3); border-radius: var(--radius-sm); border: 1px solid var(--border); } .reviews-avg { font-size: 1.3rem; font-weight: 800; color: #f5c518; } .reviews-count { font-size: .82rem; color: var(--text-muted); } /* ── Review list items ── */ .reviews-list { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; } .review-item { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; } .review-item-header { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; } .review-author { font-weight: 700; font-size: .875rem; color: var(--text); } .review-rating { font-size: .82rem; color: #f5c518; font-weight: 600; } .review-time { font-size: .75rem; color: var(--text-dim); margin-left: auto; } .review-item-text { font-size: .875rem; color: var(--text-muted); line-height: 1.6; margin: 0; } /* ── My Account page ── */ .account-header { display: flex; align-items: center; gap: 24px; padding: 32px 0 28px; border-bottom: 1px solid var(--border); margin-bottom: 0; flex-wrap: wrap; } .account-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800; color: #fff; flex-shrink: 0; } .account-info { flex: 1; min-width: 0; } .account-name { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 4px; } .account-meta { font-size: .875rem; color: var(--text-muted); } .account-stats { display: flex; gap: 24px; flex-shrink: 0; } .account-stat { text-align: center; } .account-stat-val { display: block; font-size: 1.6rem; font-weight: 800; color: var(--text); line-height: 1; } .account-stat-label { font-size: .72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; } /* ── Review cards (My Account reviews tab) ── */ .review-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .review-card-header { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; } .review-movie-title { font-weight: 700; color: var(--primary); font-size: .9rem; } .review-stars { display: flex; gap: 1px; align-items: center; } .review-stars .star { font-size: .8rem; color: var(--text-dim); } .review-stars .star.filled { color: #f5c518; } .review-score { font-size: .78rem; color: var(--text-muted); margin-left: 6px; } .review-status { margin-left: auto; } .review-date { font-size: .75rem; color: var(--text-dim); } .review-text { font-size: .85rem; color: var(--text-muted); line-height: 1.6; margin: 0; } /* ── Admin alert (reuse in frontend) ── */ .admin-alert-success { padding: 12px 16px; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.25); color: #4ade80; border-radius: var(--radius-sm); font-size: .875rem; margin-bottom: 12px; } /* ── Resume banner ── */ #resumeBanner { font-family: var(--font); } @media (max-width: 640px) { .account-header { flex-direction: column; align-items: flex-start; gap: 16px; } .account-stats { gap: 16px; } .star-btn { font-size: 1.1rem; } } /* ============================================================ ROYAL FIXED-WIDTH THEME OVERRIDE — ChatGPT Warm ivory/light + charcoal/dark royal styling for all public pages. ============================================================ */ :root{--royal-gold:var(--primary,#c68a2c);--royal-gold-2:var(--primary-dark,#9f6819);--royal-text:#2c251f;--royal-muted:#7d7063;--royal-bg:#fbf7ef;--royal-card:#fffdf8;--royal-border:#ead9bc;--royal-shadow:0 12px 35px rgba(88,57,19,.08);--shell-width:1180px;--poster-radius:9px} body.theme-light,body:not(.theme-dark){--bg:#fbf7ef;--bg2:#fffaf1;--bg3:#f4ead9;--card:#fffdf8;--card2:#fff9ef;--text:#2c251f;--text-muted:#7d7063;--border:#ead9bc;background:radial-gradient(circle at 12% 0%,rgba(198,138,44,.1),transparent 30%),linear-gradient(180deg,#fffaf1 0%,#fbf7ef 45%,#f3e7d2 100%)!important;color:var(--text);font-family:var(--font,'Inter',sans-serif)} body.theme-dark{--bg:#12100c;--bg2:#19150f;--bg3:#241d14;--card:#1d1811;--card2:#17130e;--text:#f6ead4;--text-muted:#b7a58a;--border:#3d2c16;--royal-bg:#12100c;--royal-card:#1d1811;--royal-border:#3d2c16;background:radial-gradient(circle at 14% 0%,rgba(211,158,74,.16),transparent 30%),linear-gradient(180deg,#070706 0%,#14100b 50%,#090806 100%)!important;color:var(--text);font-family:var(--font,'Inter',sans-serif)} body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 80% 8%,rgba(198,138,44,.08),transparent 34%);z-index:-1}a{color:inherit}.page-body,.detail-wrap{max-width:var(--shell-width);margin:0 auto;background:rgba(255,253,248,.74);border-left:1px solid var(--border);border-right:1px solid var(--border);box-shadow:var(--royal-shadow)}body.theme-dark .page-body,body.theme-dark .detail-wrap{background:rgba(18,16,12,.88);box-shadow:0 18px 60px rgba(0,0,0,.45)}.container{max-width:var(--shell-width)!important;padding-left:16px!important;padding-right:16px!important;margin:0 auto!important} .navbar{position:sticky;top:10px;z-index:1000;background:rgba(255,253,248,.92)!important;backdrop-filter:blur(18px);max-width:var(--shell-width);margin:12px auto 0;border:1px solid var(--border)!important;border-radius:12px 12px 0 0;box-shadow:0 12px 38px rgba(92,60,16,.08);height:66px!important}.nav-inner{max-width:none!important;height:66px!important;padding:0 18px!important}.nav-logo-text,.footer-logo-text{font-family:Georgia,'Times New Roman',serif!important;font-size:26px!important;font-weight:700!important;letter-spacing:.2px;color:var(--text)!important;display:flex;align-items:center;gap:9px}.nav-logo-text:before,.footer-logo-text:before{content:'♛';font-size:30px;color:var(--royal-gold);line-height:1}.nav-logo img{max-height:42px!important}.nav-links{gap:26px!important}.nav-links a{font-size:12px!important;text-transform:uppercase;letter-spacing:.05em;color:var(--text)!important;font-weight:700!important;opacity:.82;padding:24px 0 19px!important;border-bottom:2px solid transparent}.nav-links a:hover,.nav-links a.active{color:var(--royal-gold)!important;opacity:1;border-bottom-color:var(--royal-gold)}.nav-search{height:38px!important;border-radius:8px!important;background:rgba(255,255,255,.78)!important;border:1px solid var(--border)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8);min-width:260px}.nav-search input{font-size:13px!important;color:var(--text)!important}.search-icon{color:var(--royal-gold)!important}.btn-signin,.btn-join,.nav-user-btn{border-radius:999px!important;border:1px solid var(--border)!important;background:var(--card)!important;color:var(--text)!important}.btn-join,.btn-signin:hover{background:linear-gradient(135deg,var(--royal-gold),#e3b96c)!important;color:#fff!important;border-color:var(--royal-gold)!important}body.theme-dark .navbar{background:rgba(20,17,12,.92)!important}body.theme-dark .nav-search{background:rgba(255,255,255,.06)!important} .hero-section{padding:10px 0 0!important}.hero-slider{height:390px!important;border-radius:8px!important;border:1px solid var(--border)!important;overflow:hidden;background:#120f0b!important;box-shadow:var(--royal-shadow)}.hero-slide{border-radius:8px!important}.hero-image-bg{opacity:1!important}.hero-image-fade{background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.55) 42%,rgba(0,0,0,.06) 100%)!important}.hero-content{max-width:520px!important;padding:60px 58px!important;z-index:3}.hero-badge{background:linear-gradient(135deg,var(--royal-gold),#d7a14d)!important;color:#fff!important;border-radius:4px!important;font-size:10px!important;letter-spacing:.08em;text-transform:uppercase;font-weight:800;padding:5px 10px!important;box-shadow:0 8px 22px rgba(198,138,44,.28)}.hero-title{font-family:Georgia,'Times New Roman',serif!important;text-transform:uppercase;letter-spacing:.07em;font-size:56px!important;line-height:.95!important;color:#f7ead3!important;text-shadow:0 4px 28px rgba(0,0,0,.5)}.hero-meta,.hero-desc{color:rgba(255,250,240,.78)!important}.hero-desc{font-size:14px!important;line-height:1.65!important}.hero-genre-tag,.detail-genre-chip{border:1px solid rgba(198,138,44,.45)!important;background:rgba(198,138,44,.08)!important;color:var(--royal-gold)!important;border-radius:6px!important}.hero-dots{bottom:22px!important;left:50%!important;transform:translateX(-50%)}.hero-dot{width:9px!important;height:9px!important;border-radius:50%!important;border:0!important;background:rgba(255,255,255,.55)!important}.hero-dot.active{width:28px!important;border-radius:999px!important;background:var(--royal-gold)!important}.hero-trending-bar{display:none!important} .btn-play,.hero-watch-btn,.btn-submit,.btn-dl,.server-btn.active,.tab-btn.active,.content-tab-btn.active,.sort-btn.active,.page-btn.active,.filter-submit{background:linear-gradient(135deg,#d8a247,var(--royal-gold-2))!important;color:#fff!important;border-color:#d8a247!important;box-shadow:0 8px 22px rgba(198,138,44,.22)!important}.btn-info,.hero-info-btn,.btn-watchlist,.btn-share,.btn-filter,.clear-filters-btn{background:rgba(255,255,255,.06)!important;border:1px solid var(--border)!important;color:var(--text)!important;border-radius:7px!important} .content-layout{display:grid!important;grid-template-columns:minmax(0,1fr) 230px!important;gap:16px!important;align-items:start!important}.content-layout>main{min-width:0}.sidebar{position:static!important;background:transparent!important;padding:0!important;border:0!important}.widget{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:8px!important;padding:15px!important;margin-bottom:14px!important;box-shadow:0 8px 26px rgba(98,63,20,.05)}.widget-title{font-family:Georgia,'Times New Roman',serif!important;text-transform:uppercase!important;color:var(--text)!important;font-size:16px!important;letter-spacing:.02em;margin-bottom:12px!important}.widget-title:after{content:"";display:block;width:30px;height:2px;background:var(--royal-gold);margin-top:7px}.rank-item{display:grid!important;grid-template-columns:46px 1fr!important;gap:10px!important;border-bottom:1px solid var(--border)!important;padding:8px 0!important}.rank-num{display:none!important}.rank-item img{width:46px!important;height:62px!important;border-radius:5px!important;object-fit:cover}.rank-title{font-weight:700!important;color:var(--text)!important;font-size:12px!important}.rank-meta{font-size:11px!important;color:var(--text-muted)!important}.rank-rating{color:var(--royal-gold)!important}.genre-cloud,.lang-pills{display:flex;flex-direction:column;gap:0!important}.genre-tag,.lang-pill{display:flex!important;justify-content:space-between;align-items:center;border:0!important;border-bottom:1px solid var(--border)!important;background:transparent!important;border-radius:0!important;color:var(--text-muted)!important;padding:7px 0!important;font-size:12px!important}.genre-tag:hover,.lang-pill:hover,.genre-active,.lang-active{color:var(--royal-gold)!important;background:transparent!important} .section{padding:22px 0!important;margin-bottom:0!important}.section-header{margin-bottom:16px!important}.section-title,.page-title,.detail-title{font-family:Georgia,'Times New Roman',serif!important;color:var(--text)!important;font-weight:700!important}.section-title{font-size:18px!important;display:flex;align-items:center;gap:8px}.section-title:before{content:'♛';color:var(--royal-gold);font-size:18px}.section-link{color:var(--royal-gold)!important;font-weight:700!important}.tabs-bar,.filter-bar,.sort-bar,.alpha-bar{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:8px!important;padding:10px!important;margin-bottom:16px!important;box-shadow:none!important}.alpha-bar{display:none!important}.tab-btn,.sort-btn{border:0!important;background:transparent!important;color:var(--text)!important;border-radius:0!important;border-bottom:2px solid transparent!important;padding:10px 14px!important;font-weight:700!important}.tab-btn.active,.sort-btn.active{background:transparent!important;color:var(--royal-gold)!important;border-bottom-color:var(--royal-gold)!important;box-shadow:none!important}.filter-label,.results-count,.page-subtitle{color:var(--text-muted)!important}.filter-select,.form-control,.field-control{height:38px;background:var(--card)!important;border:1px solid var(--border)!important;border-radius:6px!important;color:var(--text)!important} .cards-grid,.cards-grid-wide{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:16px!important}.movie-card{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:7px!important;overflow:hidden!important;box-shadow:0 10px 24px rgba(84,52,12,.06)!important;transition:.22s ease}.movie-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(84,52,12,.14)!important;border-color:rgba(198,138,44,.55)!important}.card-poster{border-radius:0!important;background:#14110d!important;aspect-ratio:.72!important}.card-poster img{width:100%!important;height:100%!important;object-fit:cover!important}.card-quality,.card-new,.quality-badge,.badge{border-radius:4px!important;background:linear-gradient(135deg,#d8a247,var(--royal-gold-2))!important;color:#fff!important;border:1px solid rgba(255,255,255,.3)!important;font-size:10px!important;font-weight:800!important}.card-info{padding:10px!important;background:var(--card)!important}.card-title{font-size:13px!important;color:var(--text)!important;font-weight:800!important;line-height:1.25}.card-meta{margin-top:6px!important;color:var(--text-muted)!important}.card-rating{color:var(--royal-gold)!important}.card-lang{color:var(--text-muted)!important}.card-overlay{background:linear-gradient(180deg,transparent,rgba(0,0,0,.78))!important}.card-play-btn,.play-circle{background:rgba(255,255,255,.12)!important;color:var(--royal-gold)!important;border:1px solid var(--royal-gold)!important}.page-header{padding:30px 0 10px!important;border:0!important}.page-title{font-size:38px!important}.pagination{margin:28px 0!important}.page-btn{border:1px solid var(--border)!important;background:var(--card)!important;color:var(--text)!important;border-radius:6px!important}.page-btn.active{color:#fff!important}.section-empty{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:8px!important;color:var(--text-muted)!important} .detail-backdrop{height:330px!important;opacity:.35!important;filter:saturate(.75)!important}.detail-wrap{margin-top:-300px!important;padding-top:28px!important}.detail-hero{background:linear-gradient(90deg,rgba(255,253,248,.92),rgba(255,253,248,.72),rgba(255,253,248,.28))!important;border:0!important;border-radius:0!important;padding:20px 0 24px!important;box-shadow:none!important}.detail-poster{width:270px!important;max-width:270px!important;border-radius:8px!important;border:1px solid var(--border)!important;box-shadow:0 20px 46px rgba(52,34,10,.18)!important}.detail-poster img{border-radius:8px!important}.detail-title{font-size:44px!important;letter-spacing:-.02em}.detail-breadcrumb{color:var(--text-muted)!important}.detail-breadcrumb a{color:var(--text-muted)!important}.detail-meta-row{gap:16px!important}.detail-meta-item{background:transparent!important;border:0!important;color:var(--text-muted)!important;padding:0!important}.detail-desc{color:var(--text)!important;line-height:1.75!important;max-width:720px!important}.detail-actions{gap:14px!important}.detail-stats{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:8px!important;box-shadow:var(--royal-shadow);grid-template-columns:repeat(4,1fr)!important}.stat-box{border-right:1px solid var(--border)!important}.stat-val{font-family:Georgia,'Times New Roman',serif!important;color:var(--text)!important}.stat-label{color:var(--text-muted)!important;text-transform:uppercase;letter-spacing:.05em}.player-section,.content-tabs,.season-block{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:8px!important;overflow:hidden!important;box-shadow:var(--royal-shadow)!important}.server-tabs,.content-tab-nav,.season-header{background:var(--card)!important;border-bottom:1px solid var(--border)!important}.server-btn,.content-tab-btn{background:transparent!important;border:0!important;border-right:1px solid var(--border)!important;color:var(--text-muted)!important;border-radius:0!important;padding:14px 22px!important}.server-btn.active,.content-tab-btn.active{color:#fff!important}.player-wrap{background:#17130f!important;border-radius:0!important}.player-placeholder{min-height:330px!important}.player-meta-bar{background:var(--card)!important;border-top:1px solid var(--border)!important;color:var(--text-muted)!important}.info-table td,.dl-table td{border-color:var(--border)!important;color:var(--text)!important}.episode-row{border-top:1px solid var(--border)!important;background:var(--card)!important}.episode-row:hover,.episode-row.active{background:linear-gradient(90deg,rgba(198,138,44,.16),transparent)!important}.episode-thumb,.ep-thumb{border-radius:6px!important}.episode-title,.ep-title{color:var(--text)!important}.episode-meta,.ep-size{color:var(--text-muted)!important}.footer{max-width:var(--shell-width)!important;margin:0 auto 18px!important;border:1px solid var(--border)!important;border-top:0!important;border-radius:0 0 12px 12px!important;background:rgba(255,253,248,.86)!important;box-shadow:var(--royal-shadow);padding:28px 28px 12px!important}.footer-top{grid-template-columns:1.4fr 1fr 1fr 1fr!important;gap:35px!important}.footer-col-title{color:var(--text)!important;text-transform:uppercase!important}.footer-links a,.footer-tagline,.footer-disclaimer,.footer-bottom-links a{color:var(--text-muted)!important}.footer-links a:hover,.footer-bottom-links a:hover{color:var(--royal-gold)!important}.footer-bottom{border-top:1px solid var(--border)!important}body.theme-dark .detail-hero{background:linear-gradient(90deg,rgba(18,16,12,.94),rgba(18,16,12,.76),rgba(18,16,12,.28))!important}body.theme-dark .footer{background:rgba(20,17,12,.92)!important}body.theme-dark .filter-select,body.theme-dark .form-control{background:#1d1811!important}body.theme-dark .hero-slider{box-shadow:0 18px 58px rgba(0,0,0,.45)} @media (max-width:1024px){.content-layout{grid-template-columns:1fr!important}.sidebar{display:block}.cards-grid,.cards-grid-wide{grid-template-columns:repeat(4,minmax(0,1fr))!important}.nav-search{min-width:200px}.detail-hero{display:grid!important;grid-template-columns:220px 1fr!important}.detail-poster{width:220px!important}} @media (max-width:760px){.navbar{top:0;margin:0;border-radius:0!important}.page-body,.detail-wrap,.footer{border-left:0!important;border-right:0!important}.cards-grid,.cards-grid-wide{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}.hero-slider{height:430px!important}.hero-content{padding:44px 24px!important}.hero-title{font-size:40px!important}.nav-links,.nav-search,.nav-auth{display:none!important}.detail-wrap{margin-top:-260px!important}.detail-hero{grid-template-columns:1fr!important}.detail-poster{width:180px!important}.content-layout{gap:12px!important}.footer-top{grid-template-columns:1fr 1fr!important}.sidebar{display:none!important}} /* ============================================================ ROYAL FINAL DETAIL + RELATED SLIDER + PROTOTYPE FOOTER FIX Added for fixed-width warm ivory/gold prototype alignment ============================================================ */ .detail-wrap{ max-width:var(--shell-width,1180px)!important; margin-left:auto!important; margin-right:auto!important; overflow:hidden!important; } .detail-wrap .container{ max-width:none!important; width:100%!important; padding-left:20px!important; padding-right:20px!important; } .detail-wrap .content-layout{ display:grid!important; grid-template-columns:minmax(0,1fr) 260px!important; gap:18px!important; align-items:start!important; } .detail-wrap main{ min-width:0!important; overflow:hidden!important; } .detail-hero{ display:grid!important; grid-template-columns:240px minmax(0,1fr)!important; gap:28px!important; align-items:start!important; min-width:0!important; } .detail-info{ min-width:0!important; overflow:hidden!important; } .detail-title{ overflow-wrap:anywhere!important; } .detail-desc{ max-width:100%!important; } .detail-poster{ width:240px!important; max-width:240px!important; min-width:0!important; } .detail-poster img{ width:100%!important; height:auto!important; object-fit:cover!important; } .detail-actions{ display:flex!important; flex-wrap:wrap!important; } .detail-stats{ width:100%!important; max-width:520px!important; overflow:hidden!important; } .player-section, .content-tabs, .related-section{ max-width:100%!important; overflow:hidden!important; } .player-wrap{ width:100%!important; max-width:100%!important; } .player-wrap iframe{ width:100%!important; max-width:100%!important; } .related-section{ border-top:1px solid var(--border)!important; margin-top:22px!important; padding-top:24px!important; } .related-header{ display:flex!important; justify-content:space-between!important; align-items:center!important; } .related-nav{ display:flex!important; gap:8px!important; } .related-arrow{ width:34px!important; height:34px!important; border-radius:50%!important; border:1px solid var(--border)!important; background:var(--card)!important; color:var(--royal-gold,#c68a2c)!important; font-size:22px!important; line-height:1!important; cursor:pointer!important; box-shadow:0 8px 18px rgba(84,52,12,.08)!important; } .related-arrow:hover{ background:linear-gradient(135deg,#d8a247,var(--royal-gold-2,#b97717))!important; color:#fff!important; } .related-slider-shell{ position:relative!important; max-width:100%!important; overflow:hidden!important; } .related-slider{ display:flex!important; gap:14px!important; overflow-x:auto!important; overflow-y:hidden!important; scroll-snap-type:x mandatory!important; scroll-behavior:smooth!important; padding:2px 2px 12px!important; scrollbar-width:none!important; } .related-slider::-webkit-scrollbar{display:none!important;} .related-slider .movie-card{ flex:0 0 154px!important; width:154px!important; min-width:154px!important; max-width:154px!important; scroll-snap-align:start!important; } .related-slider .card-poster{ aspect-ratio:.68!important; } .related-slider .card-title{ font-size:12px!important; } .related-slider .card-info{ min-height:74px!important; } .footer-prototype{ max-width:var(--shell-width,1180px)!important; margin:0 auto 18px!important; border:1px solid var(--border)!important; border-top:0!important; border-radius:0 0 14px 14px!important; background:rgba(255,253,248,.92)!important; padding:28px 24px 12px!important; box-shadow:0 18px 55px rgba(84,52,12,.09)!important; } .footer-prototype-grid{ display:grid!important; grid-template-columns:1.45fr .8fr .8fr .9fr 1.15fr!important; gap:28px!important; align-items:start!important; } .footer-logo{ display:flex!important; align-items:center!important; gap:9px!important; margin-bottom:10px!important; } .footer-logo-crown{ color:var(--royal-gold,#c68a2c)!important; font-size:28px!important; line-height:1!important; } .footer-logo-text{ font-family:Georgia,'Times New Roman',serif!important; font-size:28px!important; font-weight:800!important; color:var(--text)!important; line-height:1!important; } .footer-tagline, .footer-newsletter p{ color:var(--text-muted)!important; line-height:1.6!important; font-size:13px!important; } .footer-socials{ display:flex!important; gap:10px!important; margin-top:16px!important; } .footer-socials a{ width:30px!important; height:30px!important; border-radius:50%!important; border:1px solid var(--border)!important; background:rgba(198,138,44,.09)!important; color:var(--royal-gold,#c68a2c)!important; display:flex!important; align-items:center!important; justify-content:center!important; text-decoration:none!important; font-weight:800!important; } .footer-socials a:hover{ background:var(--royal-gold,#c68a2c)!important; color:#fff!important; } .footer-prototype .footer-col-title{ font-size:12px!important; letter-spacing:.08em!important; text-transform:uppercase!important; color:var(--text)!important; margin-bottom:13px!important; font-weight:800!important; } .footer-prototype .footer-links{ display:flex!important; flex-direction:column!important; gap:8px!important; } .footer-prototype .footer-links a{ color:var(--text-muted)!important; text-decoration:none!important; font-size:13px!important; } .footer-prototype .footer-links a:hover{color:var(--royal-gold,#c68a2c)!important;} .footer-newsletter-form{ display:flex!important; flex-direction:column!important; gap:10px!important; } .footer-newsletter-form input{ height:38px!important; border:1px solid var(--border)!important; border-radius:6px!important; background:var(--card)!important; color:var(--text)!important; padding:0 12px!important; } .footer-newsletter-form button{ height:38px!important; border:0!important; border-radius:6px!important; background:linear-gradient(135deg,#d8a247,var(--royal-gold-2,#b97717))!important; color:#fff!important; font-weight:800!important; text-transform:uppercase!important; cursor:pointer!important; } .footer-prototype-bottom{ margin-top:24px!important; padding-top:14px!important; border-top:1px solid var(--border)!important; display:flex!important; justify-content:space-between!important; gap:16px!important; color:var(--text-muted)!important; font-size:12px!important; } .footer-made-with{ color:var(--text-muted)!important; } body.theme-dark .footer-prototype{ background:rgba(20,17,12,.94)!important; } body.theme-dark .footer-newsletter-form input{ background:#1d1811!important; } @media (max-width:1024px){ .detail-wrap .content-layout{grid-template-columns:1fr!important;} .detail-wrap .sidebar{display:block!important;} .detail-hero{grid-template-columns:210px minmax(0,1fr)!important;} .detail-poster{width:210px!important;max-width:210px!important;} .footer-prototype-grid{grid-template-columns:1fr 1fr!important;} } @media (max-width:760px){ .detail-hero{grid-template-columns:1fr!important;} .detail-poster{width:190px!important;max-width:190px!important;} .detail-wrap .container{padding-left:12px!important;padding-right:12px!important;} .detail-stats{grid-template-columns:repeat(2,1fr)!important;} .related-slider .movie-card{flex-basis:142px!important;width:142px!important;min-width:142px!important;} .footer-prototype-grid{grid-template-columns:1fr!important;} .footer-prototype-bottom{flex-direction:column!important;text-align:center!important;} } /* ============================================================ ROYAL DETAIL LAYOUT V3 — stable movie/series detail fix Fixes clipped detail hero, sidebar sizing, and 6-card related slider. ============================================================ */ body.theme-light, body:not(.theme-dark){ overflow-x:hidden!important; } .detail-backdrop{ height:360px!important; min-height:360px!important; opacity:.28!important; filter:saturate(.85) contrast(.96)!important; background-position:center top!important; } .detail-wrap{ max-width:var(--shell-width,1180px)!important; margin:-285px auto 0!important; padding-top:92px!important; overflow:visible!important; border-left:1px solid var(--border)!important; border-right:1px solid var(--border)!important; background:rgba(255,253,248,.82)!important; } body.theme-dark .detail-wrap{ background:rgba(18,16,12,.90)!important; } .detail-wrap .container{ width:100%!important; max-width:none!important; padding:0 18px 0!important; overflow:visible!important; } .detail-wrap .content-layout{ display:grid!important; grid-template-columns:minmax(0, 1fr) 250px!important; gap:18px!important; align-items:start!important; width:100%!important; } .detail-wrap .content-layout > main{ width:100%!important; min-width:0!important; overflow:visible!important; } .detail-wrap .sidebar{ width:250px!important; min-width:250px!important; max-width:250px!important; padding:0!important; align-self:start!important; position:relative!important; z-index:2!important; } .detail-wrap .sidebar .widget{ width:100%!important; box-sizing:border-box!important; } .detail-wrap .rank-list{ overflow:hidden!important; } .detail-wrap .rank-item{ grid-template-columns:48px minmax(0,1fr)!important; } .detail-wrap .rank-info{ min-width:0!important; } .detail-wrap .rank-title{ white-space:normal!important; line-height:1.3!important; } .detail-hero{ display:grid!important; grid-template-columns:220px minmax(0,1fr)!important; gap:30px!important; align-items:start!important; padding:0 0 30px!important; margin:0!important; background:transparent!important; border:0!important; box-shadow:none!important; min-width:0!important; } .detail-poster{ width:220px!important; max-width:220px!important; min-width:220px!important; aspect-ratio:2/3!important; border-radius:8px!important; overflow:hidden!important; background:var(--bg3)!important; } .detail-poster img{ display:block!important; width:100%!important; height:100%!important; object-fit:cover!important; } .detail-info{ min-width:0!important; padding-top:2px!important; } .detail-breadcrumb{ margin-bottom:12px!important; white-space:normal!important; } .detail-title{ font-family:Georgia,'Times New Roman',serif!important; font-size:42px!important; line-height:1.12!important; margin:0 0 12px!important; color:var(--text)!important; overflow-wrap:break-word!important; } .detail-meta-row, .detail-genres-row, .detail-actions{ display:flex!important; flex-wrap:wrap!important; gap:10px!important; } .detail-desc{ width:100%!important; max-width:720px!important; margin:16px 0 22px!important; line-height:1.72!important; color:var(--text)!important; } .detail-actions{ margin-bottom:22px!important; } .detail-stats{ width:100%!important; max-width:590px!important; display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; clear:both!important; } .player-section, .content-tabs, .related-section{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; clear:both!important; } .player-section{ margin-top:0!important; } .player-wrap, .player-placeholder, .player-wrap iframe{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; } .player-placeholder{ min-height:390px!important; } /* Related movies: keep inside main column and show 6 cards per viewport */ .related-section{ padding:24px 0 26px!important; margin:26px 0 0!important; border-top:1px solid var(--border)!important; overflow:hidden!important; } .related-section .section-title{ font-family:Georgia,'Times New Roman',serif!important; font-size:28px!important; text-transform:none!important; letter-spacing:0!important; } .related-slider-shell{ width:100%!important; max-width:100%!important; overflow:hidden!important; position:relative!important; } .related-slider{ --related-gap:14px; display:flex!important; flex-wrap:nowrap!important; gap:var(--related-gap)!important; overflow-x:auto!important; overflow-y:hidden!important; scroll-behavior:smooth!important; scroll-snap-type:x mandatory!important; padding:4px 1px 14px!important; scrollbar-width:none!important; -ms-overflow-style:none!important; } .related-slider::-webkit-scrollbar{display:none!important;} .related-slider .movie-card{ flex:0 0 calc((100% - (var(--related-gap) * 5)) / 6)!important; width:calc((100% - (var(--related-gap) * 5)) / 6)!important; min-width:calc((100% - (var(--related-gap) * 5)) / 6)!important; max-width:calc((100% - (var(--related-gap) * 5)) / 6)!important; scroll-snap-align:start!important; margin:0!important; box-sizing:border-box!important; } .related-slider .card-poster, .related-slider .movie-poster{ aspect-ratio:2/3!important; width:100%!important; } .related-slider .card-info{ padding:10px!important; min-height:74px!important; } .related-slider .card-title{ font-size:12px!important; line-height:1.28!important; } .related-arrow{ display:inline-flex!important; align-items:center!important; justify-content:center!important; user-select:none!important; } .related-arrow.is-disabled{ opacity:.35!important; pointer-events:none!important; } @media (max-width:1180px){ .detail-wrap{margin-left:12px!important;margin-right:12px!important;} } @media (max-width:1024px){ .detail-backdrop{height:320px!important;} .detail-wrap{margin-top:-250px!important;padding-top:82px!important;} .detail-wrap .content-layout{grid-template-columns:1fr!important;} .detail-wrap .sidebar{width:100%!important;max-width:100%!important;min-width:0!important;} .detail-hero{grid-template-columns:200px minmax(0,1fr)!important;gap:24px!important;} .detail-poster{width:200px!important;max-width:200px!important;min-width:200px!important;} .related-slider .movie-card{flex-basis:calc((100% - (var(--related-gap) * 3)) / 4)!important;width:calc((100% - (var(--related-gap) * 3)) / 4)!important;min-width:calc((100% - (var(--related-gap) * 3)) / 4)!important;max-width:calc((100% - (var(--related-gap) * 3)) / 4)!important;} } @media (max-width:760px){ .detail-backdrop{height:260px!important;} .detail-wrap{margin:0!important;padding-top:24px!important;border-left:0!important;border-right:0!important;} .detail-hero{grid-template-columns:1fr!important;gap:18px!important;} .detail-poster{width:190px!important;max-width:190px!important;min-width:0!important;} .detail-title{font-size:34px!important;} .detail-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .player-placeholder{min-height:250px!important;} .related-slider .movie-card{flex-basis:148px!important;width:148px!important;min-width:148px!important;max-width:148px!important;} } /* ============================================================ ROYAL DETAIL HERO FINAL FIX V4 Scope: movie detail + series detail only. Fixes hero sitting under sticky nav and replaces the detached fixed background with an in-card backdrop like the prototype. ============================================================ */ body.theme-light, body:not(.theme-dark), body.theme-dark{ overflow-x:hidden!important; } /* Do not use the old full-screen/fixed backdrop on detail pages */ .detail-backdrop{ display:none!important; } /* Detail page shell starts BELOW navbar; no negative pull-up */ .detail-wrap{ position:relative!important; z-index:1!important; max-width:var(--shell-width,1180px)!important; width:calc(100% - 32px)!important; margin:0 auto 0!important; padding:0!important; overflow:visible!important; border-left:1px solid var(--border)!important; border-right:1px solid var(--border)!important; background:rgba(255,253,248,.88)!important; box-shadow:0 18px 50px rgba(88,57,19,.08)!important; } body.theme-dark .detail-wrap{ background:rgba(18,16,12,.93)!important; box-shadow:0 24px 70px rgba(0,0,0,.38)!important; } .detail-wrap .container{ width:100%!important; max-width:none!important; padding:0!important; margin:0!important; overflow:visible!important; } .detail-wrap .content-layout{ display:grid!important; grid-template-columns:minmax(0,1fr) 270px!important; gap:18px!important; align-items:start!important; width:100%!important; padding:0 18px 28px!important; box-sizing:border-box!important; } .detail-wrap .content-layout > main{ min-width:0!important; width:100%!important; overflow:visible!important; } .detail-wrap .sidebar{ width:270px!important; min-width:270px!important; max-width:270px!important; padding:0!important; margin-top:18px!important; align-self:start!important; position:relative!important; z-index:3!important; } .detail-wrap .sidebar .widget{ width:100%!important; box-sizing:border-box!important; border-radius:10px!important; } /* Prototype-style hero: poster + info on top of local backdrop image */ .detail-hero{ position:relative!important; isolation:isolate!important; display:grid!important; grid-template-columns:230px minmax(0,1fr)!important; gap:32px!important; align-items:center!important; min-height:380px!important; width:100%!important; margin:0 0 28px!important; padding:36px 38px!important; overflow:hidden!important; border:0!important; border-bottom:1px solid var(--border)!important; border-radius:0!important; box-shadow:none!important; background: linear-gradient(90deg, rgba(255,253,248,.98) 0%, rgba(255,253,248,.94) 34%, rgba(255,253,248,.68) 62%, rgba(255,253,248,.28) 100%), var(--detail-bg)!important; background-size:cover!important; background-position:center center!important; } body.theme-dark .detail-hero{ background: linear-gradient(90deg, rgba(18,16,12,.96) 0%, rgba(18,16,12,.90) 38%, rgba(18,16,12,.62) 68%, rgba(18,16,12,.30) 100%), var(--detail-bg)!important; background-size:cover!important; background-position:center center!important; } .detail-hero::after{ content:''!important; position:absolute!important; inset:0!important; z-index:-1!important; background:radial-gradient(circle at 68% 18%,rgba(198,138,44,.16),transparent 30%)!important; pointer-events:none!important; } .detail-hero > *{ position:relative!important; z-index:1!important; } .detail-poster{ width:230px!important; min-width:230px!important; max-width:230px!important; aspect-ratio:2/3!important; border-radius:10px!important; overflow:hidden!important; border:1px solid rgba(198,138,44,.28)!important; box-shadow:0 22px 48px rgba(52,34,10,.20)!important; background:var(--bg3)!important; } .detail-poster img{ display:block!important; width:100%!important; height:100%!important; object-fit:cover!important; } .detail-info{ min-width:0!important; max-width:760px!important; padding:0!important; overflow:visible!important; } .detail-breadcrumb{ display:flex!important; flex-wrap:wrap!important; gap:8px!important; margin:0 0 14px!important; color:var(--text-muted)!important; font-size:12px!important; } .detail-title{ font-family:Georgia,'Times New Roman',serif!important; font-size:42px!important; line-height:1.1!important; margin:0 0 14px!important; color:var(--text)!important; letter-spacing:-.02em!important; overflow-wrap:break-word!important; } .detail-meta-row, .detail-genres-row, .detail-actions{ display:flex!important; flex-wrap:wrap!important; gap:10px!important; align-items:center!important; } .detail-desc{ width:100%!important; max-width:700px!important; margin:16px 0 22px!important; line-height:1.72!important; color:var(--text)!important; font-size:15px!important; } .detail-actions{margin-bottom:22px!important;} .detail-stats{ width:100%!important; max-width:610px!important; display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; clear:both!important; background:rgba(255,253,248,.84)!important; border:1px solid var(--border)!important; border-radius:8px!important; overflow:hidden!important; } body.theme-dark .detail-stats{background:rgba(18,16,12,.78)!important;} /* Player/content sections should start cleanly below hero */ .player-section, .content-tabs, .related-section{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; clear:both!important; } .player-section{margin-top:0!important;} .player-wrap, .player-placeholder, .player-wrap iframe{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; } @media (max-width:1024px){ .detail-wrap{width:calc(100% - 20px)!important;} .detail-wrap .content-layout{grid-template-columns:1fr!important;padding:0 14px 24px!important;} .detail-wrap .sidebar{width:100%!important;min-width:0!important;max-width:100%!important;margin-top:0!important;} .detail-hero{grid-template-columns:200px minmax(0,1fr)!important;gap:24px!important;padding:30px 26px!important;min-height:340px!important;} .detail-poster{width:200px!important;min-width:200px!important;max-width:200px!important;} } @media (max-width:760px){ .detail-wrap{width:100%!important;border-left:0!important;border-right:0!important;} .detail-hero{grid-template-columns:1fr!important;align-items:start!important;gap:18px!important;padding:24px 18px!important;min-height:0!important;} .detail-poster{width:190px!important;min-width:0!important;max-width:190px!important;} .detail-title{font-size:34px!important;} .detail-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;} } /* ============================================================ MOVIE DETAIL PAGE — PROTOTYPE MATCH FINAL V5 Scope: movie detail page only. Series detail remains unchanged. Matches warm ivory/gold reference: clean poster + info hero, right sidebar aligned, stats card below hero, player below. ============================================================ */ .detail-wrap.movie-detail-page{ max-width:var(--shell-width,1180px)!important; width:calc(100% - 32px)!important; margin:0 auto!important; padding:0!important; background:rgba(255,253,248,.96)!important; border-left:1px solid var(--border)!important; border-right:1px solid var(--border)!important; box-shadow:0 18px 50px rgba(88,57,19,.08)!important; } body.theme-dark .detail-wrap.movie-detail-page{ background:rgba(18,16,12,.95)!important; } .detail-wrap.movie-detail-page .content-layout{ display:grid!important; grid-template-columns:minmax(0,1fr) 270px!important; gap:28px!important; align-items:start!important; padding:18px 18px 28px!important; } .detail-wrap.movie-detail-page main{ min-width:0!important; } .detail-wrap.movie-detail-page .sidebar{ width:270px!important; min-width:270px!important; max-width:270px!important; margin:0!important; padding:0!important; align-self:start!important; } .detail-wrap.movie-detail-page .sidebar .widget{ background:rgba(255,253,248,.92)!important; border:1px solid var(--border)!important; border-radius:10px!important; box-shadow:0 12px 34px rgba(88,57,19,.08)!important; padding:18px!important; } body.theme-dark .detail-wrap.movie-detail-page .sidebar .widget{ background:rgba(24,20,14,.92)!important; } /* clean hero: no huge backdrop card; image remains available in player/background areas */ .detail-wrap.movie-detail-page .detail-hero{ display:grid!important; grid-template-columns:270px minmax(0,1fr)!important; gap:32px!important; align-items:start!important; min-height:0!important; width:100%!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; box-shadow:none!important; background:transparent!important; overflow:visible!important; } .detail-wrap.movie-detail-page .detail-hero::after{ display:none!important; } .detail-wrap.movie-detail-page .detail-poster{ width:270px!important; min-width:270px!important; max-width:270px!important; aspect-ratio:2/3!important; border-radius:8px!important; border:1px solid var(--border)!important; box-shadow:0 16px 36px rgba(52,34,10,.12)!important; overflow:hidden!important; } .detail-wrap.movie-detail-page .detail-poster img{ width:100%!important; height:100%!important; object-fit:cover!important; } .detail-wrap.movie-detail-page .detail-info{ max-width:100%!important; padding:28px 0 0!important; min-width:0!important; } .detail-wrap.movie-detail-page .detail-breadcrumb{ margin:0 0 18px!important; font-size:12px!important; color:var(--text-muted)!important; } .detail-wrap.movie-detail-page .detail-breadcrumb a{ color:var(--text-muted)!important; } .detail-wrap.movie-detail-page .detail-title{ font-family:Georgia,'Times New Roman',serif!important; font-size:42px!important; line-height:1.08!important; font-weight:700!important; color:var(--text)!important; margin:0 0 18px!important; letter-spacing:-.025em!important; } .detail-wrap.movie-detail-page .detail-meta-row{ gap:14px!important; margin-bottom:18px!important; color:var(--text-muted)!important; } .detail-wrap.movie-detail-page .detail-meta-item{ background:transparent!important; border:0!important; padding:0!important; color:var(--text-muted)!important; font-size:14px!important; } .detail-wrap.movie-detail-page .detail-rating-star{ background:rgba(198,138,44,.09)!important; color:var(--royal-gold,var(--primary))!important; border:1px solid rgba(198,138,44,.25)!important; padding:5px 10px!important; border-radius:5px!important; } .detail-wrap.movie-detail-page .detail-genres-row{ margin-bottom:20px!important; gap:10px!important; } .detail-wrap.movie-detail-page .detail-genre-chip{ background:rgba(198,138,44,.04)!important; color:var(--royal-gold,var(--primary))!important; border:1px solid rgba(198,138,44,.36)!important; border-radius:5px!important; padding:6px 14px!important; font-size:13px!important; font-weight:700!important; } .detail-wrap.movie-detail-page .detail-desc{ max-width:680px!important; margin:0 0 32px!important; color:var(--text)!important; font-size:15px!important; line-height:1.75!important; } .detail-wrap.movie-detail-page .detail-actions{ gap:16px!important; margin:0!important; } .detail-wrap.movie-detail-page .btn-play, .detail-wrap.movie-detail-page .btn-watchlist, .detail-wrap.movie-detail-page .btn-share{ min-height:46px!important; border-radius:6px!important; padding:12px 26px!important; font-size:14px!important; font-weight:800!important; } .detail-wrap.movie-detail-page .btn-play{ background:linear-gradient(135deg,#dca64c,#b77718)!important; color:#fff!important; border:0!important; } .detail-wrap.movie-detail-page .btn-watchlist, .detail-wrap.movie-detail-page .btn-share{ background:rgba(255,253,248,.65)!important; color:var(--text)!important; border:1px solid var(--border)!important; } body.theme-dark .detail-wrap.movie-detail-page .btn-watchlist, body.theme-dark .detail-wrap.movie-detail-page .btn-share{ background:rgba(24,20,14,.72)!important; } /* stats row below poster/info, full main width like reference */ .detail-wrap.movie-detail-page .movie-detail-stats-panel{ width:100%!important; max-width:100%!important; margin:22px 0 22px!important; display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; background:rgba(255,253,248,.92)!important; border:1px solid var(--border)!important; border-radius:8px!important; box-shadow:0 10px 26px rgba(88,57,19,.07)!important; overflow:hidden!important; } body.theme-dark .detail-wrap.movie-detail-page .movie-detail-stats-panel{ background:rgba(24,20,14,.86)!important; } .detail-wrap.movie-detail-page .movie-detail-stats-panel .stat-box{ display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; min-height:78px!important; border-right:1px solid var(--border)!important; padding:14px 10px!important; text-align:center!important; } .detail-wrap.movie-detail-page .movie-detail-stats-panel .stat-box:last-child{border-right:0!important;} .detail-wrap.movie-detail-page .movie-detail-stats-panel .stat-icon{ color:var(--royal-gold,var(--primary))!important; font-size:22px!important; line-height:1!important; margin-bottom:4px!important; } .detail-wrap.movie-detail-page .movie-detail-stats-panel .stat-val{ font-family:Georgia,'Times New Roman',serif!important; font-size:22px!important; color:var(--text)!important; font-weight:700!important; line-height:1.1!important; } .detail-wrap.movie-detail-page .movie-detail-stats-panel .stat-label{ color:var(--text-muted)!important; font-size:11px!important; text-transform:none!important; letter-spacing:0!important; margin-top:2px!important; } /* player/content alignment under stats */ .detail-wrap.movie-detail-page .player-section, .detail-wrap.movie-detail-page .content-tabs, .detail-wrap.movie-detail-page .related-section{ width:100%!important; max-width:100%!important; margin-left:0!important; margin-right:0!important; } .detail-wrap.movie-detail-page .player-section, .detail-wrap.movie-detail-page .content-tabs{ border-radius:8px!important; background:var(--card)!important; border:1px solid var(--border)!important; box-shadow:0 10px 26px rgba(88,57,19,.07)!important; overflow:hidden!important; } .detail-wrap.movie-detail-page .server-tabs, .detail-wrap.movie-detail-page .content-tab-nav{ min-height:52px!important; background:var(--card)!important; border-bottom:1px solid var(--border)!important; } .detail-wrap.movie-detail-page .server-btn.active, .detail-wrap.movie-detail-page .content-tab-btn.active{ background:linear-gradient(135deg,#dca64c,#b77718)!important; color:#fff!important; } .detail-wrap.movie-detail-page .player-placeholder{ min-height:360px!important; } @media (max-width:1024px){ .detail-wrap.movie-detail-page .content-layout{grid-template-columns:1fr!important;gap:22px!important;} .detail-wrap.movie-detail-page .sidebar{width:100%!important;min-width:0!important;max-width:100%!important;} .detail-wrap.movie-detail-page .detail-hero{grid-template-columns:220px minmax(0,1fr)!important;gap:24px!important;} .detail-wrap.movie-detail-page .detail-poster{width:220px!important;min-width:220px!important;max-width:220px!important;} } @media (max-width:760px){ .detail-wrap.movie-detail-page{width:100%!important;} .detail-wrap.movie-detail-page .content-layout{padding:14px!important;} .detail-wrap.movie-detail-page .detail-hero{grid-template-columns:1fr!important;} .detail-wrap.movie-detail-page .detail-poster{width:190px!important;min-width:0!important;max-width:190px!important;} .detail-wrap.movie-detail-page .detail-info{padding-top:0!important;} .detail-wrap.movie-detail-page .detail-title{font-size:34px!important;} .detail-wrap.movie-detail-page .movie-detail-stats-panel{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .detail-wrap.movie-detail-page .movie-detail-stats-panel .stat-box:nth-child(2){border-right:0!important;} .detail-wrap.movie-detail-page .player-placeholder{min-height:250px!important;} }