/* ═══════════════════════════════════════════════════════════════════
   PicaMovies · multipage.css  (v3 — full fix)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shared keyframes ─────────────────────────────────────────────── */
@keyframes spin       { to { transform: rotate(360deg); } }
@keyframes pageFadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes popIn      { from { opacity:0; transform:scale(.88) translateY(18px); } to { opacity:1; transform:scale(1) translateY(0); } }

/* ── Page entry animation ─────────────────────────────────────────── */
.main-content { animation: pageFadeIn .35s ease forwards; }

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR EXTRAS  (injected by app-additions.js _injectSidebarItems)
   ══════════════════════════════════════════════════════════════════ */
.nav-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,.05);
    margin: .4rem 1.2rem;
}
.nav-section-label {
    padding: .65rem 1.5rem .25rem;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(136,146,176,.5);
    user-select: none;
}

/* ══════════════════════════════════════════════════════════════════
   HERO  — fixes for missing bg-blur when perf-mode is active
   ══════════════════════════════════════════════════════════════════ */

/* Guarantee the hero always has a rich dark gradient even with no image */
.hero-slider {
    background: linear-gradient(135deg, #0d1020 0%, #070a12 60%, #0a0d1a 100%);
}

/* When perf-mode strips the blur, inject a gradient that still looks cinematic */
.perf-mode .hero-bg-blur {
    filter: none !important;
    background-color: transparent !important;
    background-image: linear-gradient(135deg, rgba(0,210,245,.06) 0%, rgba(7,10,18,1) 70%) !important;
    transform: none !important;
}

/* Strengthen the overlay so hero content is always legible */
.hero-slide .hero-overlay {
    background:
        linear-gradient(to right,  rgba(7,10,18,.7)  0%, rgba(7,10,18,.15) 55%, rgba(7,10,18,.55) 100%),
        linear-gradient(to top,    rgba(7,10,18,.95)  0%, transparent        55%);
}

/* ══════════════════════════════════════════════════════════════════
   CATEGORY GRID  (movies, series, action …)
   ══════════════════════════════════════════════════════════════════ */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: 1.1rem;
    padding-bottom: 1rem;
}
.cat-grid .movie-card { min-width: unset; width: 100%; }

/* ── Page title bar ───────────────────────────────────────────────── */
.page-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--glass-border, rgba(0,210,245,.2));
}
.page-title-bar h1 { font-size: 2.25rem; font-weight: 800; color: var(--text-high, #EEF2FF); }
.page-title-bar .page-count {
    color: var(--text-med, #8892B0); font-size: .9rem;
    background: rgba(255,255,255,.05); padding: .4rem 1rem; border-radius: 20px;
}

/* ── Cat hero header ──────────────────────────────────────────────── */
.cat-page-header {
    position: relative; min-height: 300px; border-radius: 20px;
    overflow: hidden; margin-bottom: 3rem;
    display: flex; align-items: flex-end; padding: 2.5rem;
}
.cat-page-header .cat-bg {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    filter: brightness(.3) saturate(1.2); z-index: 0;
}
.cat-page-header .cat-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(7,10,18,1) 0%, rgba(7,10,18,.4) 60%, transparent 100%);
}
.cat-page-header .cat-header-content { position: relative; z-index: 2; }
.cat-page-header .cat-title  { font-size: 2.8rem; font-weight: 800; color: var(--text-high, #EEF2FF); margin-bottom: .6rem; line-height: 1.1; }
.cat-page-header .cat-desc   { font-size: 1rem; color: var(--text-med, #8892B0); line-height: 1.6; max-width: 560px; }

/* ── Breadcrumb ───────────────────────────────────────────────────── */
.breadcrumb { display:flex; align-items:center; gap:.5rem; margin-bottom:1.5rem; font-size:.84rem; color:var(--text-med,#8892B0); flex-wrap:wrap; }
.breadcrumb a { color:var(--accent-cyan,#00D2F5); text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; opacity:.8; }
.breadcrumb .separator { color:rgba(255,255,255,.2); }
.breadcrumb .current   { color:var(--text-high,#EEF2FF); font-weight:600; }

/* ══════════════════════════════════════════════════════════════════
   SEARCH PAGE
   ══════════════════════════════════════════════════════════════════ */

/*
 * The content-area search input (.search-panel-input-wrap) is redundant
 * on desktop because the top nav already has a full-width search bar.
 * Hide it on desktop; keep it on mobile where the nav bar is smaller.
 */
@media (min-width: 768px) {
    .search-panel-input-wrap { display: none !important; }
}

.search-filter-bar {
    display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap;
    margin-bottom: 1.5rem; padding: 1rem;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.06); border-radius: 12px;
}
.search-filter-group  { display:flex; flex-direction:column; gap:.3rem; }
.filter-label         { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-med,#8892B0); }
.filter-select {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px; color: var(--text-high,#EEF2FF);
    font-size: .85rem; padding: .5rem .75rem; cursor: pointer; transition: border-color .2s;
}
.filter-select:focus  { outline:none; border-color:var(--accent-cyan,#00D2F5); }
.filter-select option { background:#161B2E; }
.filter-clear-btn {
    background: rgba(229,57,53,.1); border: 1px solid rgba(229,57,53,.25);
    color: var(--accent-red,#E53935); border-radius: 8px;
    padding: .5rem 1rem; font-size: .82rem; font-weight: 700;
    cursor: pointer; transition: background .2s; align-self: flex-end;
}
.filter-clear-btn:hover { background: rgba(229,57,53,.2); }
.search-results-header { padding:.5rem 0 1rem; font-size:.82rem; color:var(--text-med,#8892B0); font-weight:600; }
.search-results-grid   { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:1rem; }

/* ══════════════════════════════════════════════════════════════════
   VIDEO PLAYER  — professional cinema look
   ══════════════════════════════════════════════════════════════════ */
.video-player-overlay {
    position: fixed; inset: 0; background: #000; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
}

/* Loading */
.player-loading {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1rem; background: #000; z-index: 5;
}
.player-spinner {
    width: 48px; height: 48px;
    border: 3px solid rgba(255,255,255,.1);
    border-top-color: var(--accent-cyan,#00D2F5);
    border-radius: 50%; animation: spin .85s linear infinite;
}
.player-loading-text { color: rgba(255,255,255,.5); font-size: .9rem; font-weight: 500; }

/* Error */
.player-error {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1rem;
    color: rgba(255,255,255,.6); background: #000; z-index: 5;
    text-align: center; padding: 2rem;
}
.player-error svg { color: var(--accent-red,#E53935); opacity: .7; }
.player-error p   { font-size: 1rem; font-weight: 500; max-width: 320px; }

/* Video */
.video-element {
    width:100%; height:100%; object-fit:contain; display:block;
    position:absolute; inset:0; transition:opacity .3s;
}

/* Top bar */
.player-topbar {
    position: absolute; top:0; left:0; right:0; z-index:10;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(to bottom, rgba(0,0,0,.85) 0%, transparent 100%);
    transition: opacity .4s ease;
}
.player-back-btn {
    display: flex; align-items: center; gap: .5rem;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(8px); border-radius: 10px;
    color: #fff; padding: .5rem .875rem; cursor: pointer;
    font-size: .85rem; font-weight: 600; transition: background .2s;
}
.player-back-btn:hover { background: rgba(255,255,255,.2); }
.player-title-text {
    color: rgba(255,255,255,.9); font-weight: 700; font-size: .95rem;
    flex: 1; text-align: center; padding: 0 1rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Controls */
.player-controls {
    position: absolute; bottom:0; left:0; right:0; z-index:10;
    padding: 0 1.25rem 1.25rem;
    background: linear-gradient(to top, rgba(0,0,0,.88) 0%, transparent 100%);
    transition: opacity .4s ease;
}

/* Progress */
.player-progress-wrap { display:flex; align-items:center; gap:.75rem; margin-bottom:.85rem; }
.player-progress-bar {
    flex:1; height:4px; background:rgba(255,255,255,.2);
    border-radius:2px; cursor:pointer; position:relative; transition:height .2s;
}
.player-progress-bar:hover { height:6px; }
.player-progress-fill {
    height:100%; background:var(--accent-cyan,#00D2F5); border-radius:2px;
    position:absolute; left:0; top:0; pointer-events:none; transition:width .1s linear;
}
.player-progress-thumb {
    width:14px; height:14px; border-radius:50%; background:#fff;
    position:absolute; top:50%; transform:translate(-50%,-50%);
    pointer-events:none; opacity:0; transition:opacity .2s;
    box-shadow:0 0 6px rgba(0,0,0,.5);
}
.player-progress-bar:hover .player-progress-thumb { opacity:1; }
.player-time-current, .player-time-total {
    font-size:.78rem; font-weight:600; color:rgba(255,255,255,.8);
    white-space:nowrap; min-width:38px; font-variant-numeric:tabular-nums;
}
.player-time-total { opacity:.6; }

/* Button row */
.player-btn-row  { display:flex; align-items:center; justify-content:space-between; }
.player-btn-left, .player-btn-right { display:flex; align-items:center; gap:.25rem; }
.player-btn {
    display:flex; align-items:center; justify-content:center;
    background:none; border:none; color:rgba(255,255,255,.85);
    width:44px; height:44px; border-radius:50%; cursor:pointer;
    transition:background .2s, color .2s, transform .15s;
}
.player-btn:hover  { background:rgba(255,255,255,.12); color:#fff; transform:scale(1.1); }
.player-btn:active { transform:scale(.95); }
.player-btn-play {
    width:52px; height:52px;
    background:rgba(0,210,245,.15);
    border:1.5px solid rgba(0,210,245,.4);
}
.player-btn-play:hover {
    background:var(--accent-cyan,#00D2F5);
    color:var(--bg-deep,#070A12);
    border-color:transparent;
}

/* Volume */
.player-volume-wrap    { display:flex; align-items:center; gap:.25rem; }
.player-volume-slider  {
    -webkit-appearance:none; width:70px; height:4px;
    background:rgba(255,255,255,.25); border-radius:2px; outline:none; cursor:pointer;
}
.player-volume-slider::-webkit-slider-thumb {
    -webkit-appearance:none; width:12px; height:12px;
    border-radius:50%; background:#fff; cursor:pointer;
}

/* Quality menu */
.quality-menu {
    position:absolute; bottom:110%; right:0;
    background:rgba(10,14,28,.97); border:1px solid rgba(0,210,245,.2);
    backdrop-filter:blur(16px); border-radius:12px; padding:.5rem;
    display:flex; flex-direction:column; gap:.25rem; min-width:110px;
    z-index:20; box-shadow:0 8px 32px rgba(0,0,0,.6);
}
.quality-option {
    display:flex; align-items:center; justify-content:space-between; gap:.5rem;
    background:none; border:none; color:var(--text-med,#8892B0);
    padding:.5rem .75rem; border-radius:8px; cursor:pointer;
    font-size:.85rem; font-weight:500; transition:background .15s, color .15s; text-align:left;
}
.quality-option:hover  { background:rgba(255,255,255,.06); color:var(--text-high,#EEF2FF); }
.quality-option.active { background:rgba(0,210,245,.12); color:var(--accent-cyan,#00D2F5); font-weight:700; }

/* ══════════════════════════════════════════════════════════════════
   WELCOME POPUP
   ══════════════════════════════════════════════════════════════════ */
#welcome-popup { backdrop-filter:blur(6px); }
#welcome-popup > div { animation: popIn .35s cubic-bezier(.34,1.56,.64,1) both; }

/* ══════════════════════════════════════════════════════════════════
   PREMIUM / AUTH MODAL
   ══════════════════════════════════════════════════════════════════ */
.p-modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.82);
    z-index:9998; align-items:center; justify-content:center;
    backdrop-filter:blur(4px);
}
.p-modal-overlay.active { display:flex !important; }
.p-modal-card {
    background:var(--bg-elevated,#161B2E);
    border:1px solid var(--glass-border,rgba(0,210,245,.2));
    border-radius:20px; padding:2rem; width:min(90vw,420px);
    position:relative; text-align:center;
    box-shadow:0 24px 64px rgba(0,0,0,.7);
    animation: popIn .3s cubic-bezier(.34,1.56,.64,1) both;
}
.p-modal-close {
    position:absolute; top:1rem; right:1rem;
    background:rgba(255,255,255,.08); border:none; color:var(--text-med,#8892B0);
    width:32px; height:32px; border-radius:50%; cursor:pointer;
    font-size:1rem; display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.p-modal-close:hover { background:rgba(255,255,255,.15); color:#fff; }
.p-modal-icon { font-size:2.5rem; margin-bottom:.75rem; }
.p-modal-card h2 { font-size:1.35rem; font-weight:800; margin-bottom:.5rem; color:var(--text-high,#EEF2FF); }
.p-modal-card p  { font-size:.9rem; color:var(--text-med,#8892B0); line-height:1.6; margin-bottom:1.25rem; }
.p-input {
    width:100%; padding:.75rem 1rem; margin-bottom:.5rem;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
    border-radius:10px; color:var(--text-high,#EEF2FF); font-size:.9rem; transition:border-color .2s;
}
.p-input:focus { outline:none; border-color:var(--accent-cyan,#00D2F5); }
.p-price-tag  { font-size:1.4rem; font-weight:800; color:var(--accent-cyan,#00D2F5); margin:1rem 0 .5rem; }
.p-price-tag span { font-size:.8rem; color:var(--text-med,#8892B0); font-weight:500; }
.p-features   { list-style:none; padding:0; margin:.75rem 0 1.25rem; display:flex; flex-direction:column; gap:.4rem; }
.p-features li { font-size:.875rem; color:var(--text-high,#EEF2FF); text-align:left; }

/* ══════════════════════════════════════════════════════════════════
   MOBILE CAT TABS
   ══════════════════════════════════════════════════════════════════ */
.mobile-cat-tabs {
    display:flex; gap:.5rem; overflow-x:auto;
    padding:.6rem 1rem;
    background:rgba(7,10,18,.9);
    border-bottom:1px solid rgba(255,255,255,.05);
    scrollbar-width:none; -ms-overflow-style:none;
    position:sticky; top:70px; z-index:85;
}
.mobile-cat-tabs::-webkit-scrollbar { display:none; }
.mobile-cat-tab {
    flex-shrink:0; white-space:nowrap;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
    color:var(--text-med,#8892B0); border-radius:20px;
    padding:.4rem 1rem; font-size:.8rem; font-weight:600; cursor:pointer;
    transition:background .2s, color .2s, border-color .2s;
}
.mobile-cat-tab:hover,
.mobile-cat-tab.active {
    background:rgba(0,210,245,.12);
    color:var(--accent-cyan,#00D2F5);
    border-color:rgba(0,210,245,.3);
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .cat-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.85rem; }
    .cat-page-header { min-height:220px; border-radius:14px; padding:1.5rem; }
    .cat-page-header .cat-title { font-size:2rem; }
    .cat-page-header .cat-desc  { display:none; }
    .page-title-bar h1 { font-size:1.6rem; }
    .player-volume-slider { width:50px; }
    .app-dl-link { display:none; }
}
@media (max-width: 600px) {
    .cat-grid { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:.6rem; }
    .cat-page-header { min-height:170px; }
    .cat-page-header .cat-title { font-size:1.5rem; }
    .search-filter-bar { flex-direction:column; align-items:stretch; }
    .player-volume-wrap { display:none; }
    .player-topbar  { padding:.75rem; }
    .player-controls{ padding:0 .75rem .75rem; }
}
@media (min-width: 1400px) {
    .cat-grid { grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
}