/* ============================================================
   PusztaPlay — Movie Browser (Pop-Art / Képregény stílus)
   ============================================================ */

/* ─── Container ────────────────────────────────────── */
.pp-movie-browser { max-width: 1400px; margin: 0 auto; padding: 20px; }

/* ─── Filter Bar ───────────────────────────────────── */
.pp-mb-filterbar {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    padding: 14px; margin-bottom: 20px;
    background: #1a1a1a; border: 2px solid #ffcc00; border-radius: 8px;
}
.pp-mb-input, .pp-mb-select {
    padding: 10px 14px; border: 2px solid #333; border-radius: 6px;
    background: #0a0a0a; color: #f8f4ec; font-size: 14px;
    font-family: 'Bangers', system-ui; outline: none;
}
.pp-mb-input:focus, .pp-mb-select:focus { border-color: #ffcc00; }
.pp-mb-input { flex: 1; min-width: 200px; }
.pp-mb-select { min-width: 140px; cursor: pointer; }

/* ─── Grid (finom szürke panel a kártyák mögött) ───── */
.pp-mb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ─── Kártya — liquid glass ────────────────────────── */
.pp-mb-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        rgba(8, 10, 16, 0.42) 0%,
        rgba(8, 10, 16, 0.18) 100%
    );
    backdrop-filter: blur(26px) saturate(130%);
    -webkit-backdrop-filter: blur(26px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom-color: rgba(255, 255, 255, 0.04);
    border-right-color: rgba(255, 255, 255, 0.07);
    box-shadow:
        0 20px 40px -15px rgba(0, 0, 0, 0.25),
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -10px 20px -5px rgba(255, 255, 255, 0.06);
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
/* Folyékony fénycsepp/tükröződés a felületen */
.pp-mb-card::before {
    content: '';
    position: absolute;
    top: -40%;
    left: -20%;
    width: 140%;
    height: 100%;
    background: radial-gradient(
        circle at 30% 30%,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(255, 255, 255, 0.03) 40%,
        transparent 70%
    );
    transform: rotate(-15deg);
    pointer-events: none;
    z-index: 1;
}
.pp-mb-card:hover, .pp-mb-card:focus-within {
    transform: scale(1.04);
    border-color: rgba(255, 204, 0, 0.85);
    box-shadow:
        0 24px 46px -18px rgba(0, 0, 0, 0.45),
        0 0 22px rgba(255, 204, 0, 0.35),
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -10px 20px -5px rgba(255, 255, 255, 0.06);
}
.pp-mb-card-inner { display: block; text-decoration: none; color: inherit; }

/* ─── Poster ───────────────────────────────────────── */
.pp-mb-poster {
    width: 100%; padding-bottom: 150%; position: relative;
    background-size: cover; background-position: center;
    background-color: #0a0a0a; border-bottom: 3px solid #ffcc00;
}
.pp-mb-no-poster {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    font-size: 40px; opacity: 0.5;
}

/* ─── Badge-k a borítón (bal felső saroktól, egymás alá) ── */
.pp-mb-badges {
    position: absolute; top: 0; left: 0;
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 4px; padding: 6px;
    pointer-events: none;
}
.pp-mb-badges .pp-mb-tmdb-link { pointer-events: auto; }

/* ─── Info (4 sor magas, középre igazított cím) ────── */
.pp-mb-info {
    height: 96px; display: flex; align-items: center; justify-content: center;
    padding: 6px 10px; text-align: center;
}
.pp-mb-title {
    font-family: 'Bangers', system-ui; font-size: 14px; color: #ffcc00;
    margin: 0; line-height: 1.2; letter-spacing: 1px;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis; word-break: break-word;
}
.pp-mb-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-mb-year, .pp-mb-genre-tag, .pp-mb-rating {
    font-family: system-ui; font-size: 10px; padding: 2px 6px; border-radius: 4px;
    background: rgba(10,10,10,0.85); border: 1px solid #ffcc00; color: #ffcc00;
}
.pp-mb-genre-tag { background: rgba(0,40,50,0.85); border-color: #00FFFF; color: #00FFFF; }
.pp-mb-rating { background: rgba(40,30,0,0.85); border-color: #4caf50; color: #4caf50; }

/* ─── Loader ───────────────────────────────────────── */
.pp-mb-loader { text-align: center; padding: 40px; color: #ffcc00; font-family: 'Bangers', system-ui; font-size: 20px; }

/* ─── Mode Buttons ───────────────────────────────── */
.pp-mb-mode-btns { display: flex; gap: 4px; }
.pp-mb-mode-btn {
    padding: 6px 14px; background: #1a1a1a; color: #888;
    border: 2px solid #333; border-radius: 6px; font-family: 'Bangers', system-ui;
    font-size: 14px; cursor: pointer;
}
.pp-mb-mode-btn.active { background: #ffcc00; color: #0a0a0a; border-color: #ffcc00; }
.pp-mb-pagination { text-align: center; padding: 24px 0; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.pp-mb-pg-btn {
    padding: 8px 14px; background: #1a1a1a; color: #f8f4ec;
    border: 2px solid #333; border-radius: 6px; font-family: 'Bangers', system-ui;
    font-size: 14px; cursor: pointer; min-width: 40px; text-align: center;
    transition: background 0.15s, border-color 0.15s;
}
.pp-mb-pg-btn:hover { background: #333; border-color: #ffcc00; }
.pp-mb-pg-btn.active { background: #ffcc00; color: #0a0a0a; border-color: #ffcc00; font-weight: 700; }
.pp-mb-pg-btn:disabled { opacity: 0.3; cursor: default; }

/* ─── Empty ────────────────────────────────────────── */
.pp-mb-empty { text-align: center; padding: 60px; color: #888; }
.pp-mb-empty h3 { font-size: 48px; margin: 0; }
.pp-mb-empty p { font-family: 'Bangers', system-ui; font-size: 20px; margin: 10px 0; }

/* ─── Responsive ───────────────────────────────────── */
@media (max-width: 600px) {
    .pp-mb-grid {
        grid-template-columns: repeat(2, 1fr); gap: 8px;
        padding: 10px; border-radius: 14px;
    }
    .pp-mb-card {
        border-radius: 10px;
        backdrop-filter: blur(16px) saturate(130%);
        -webkit-backdrop-filter: blur(16px) saturate(130%);
    }
    .pp-mb-filterbar { flex-direction: column; }
    .pp-mb-input, .pp-mb-select { width: 100%; }
}

.pp-mb-tmdb-link {
    display: inline-block; padding: 2px 8px;
    background: rgba(13,59,74,0.9); color: #80deea; border: 1px solid #000;
    border-radius: 4px; font-size: 11px; text-decoration: none;
    cursor: pointer;
}
.pp-mb-tmdb-link:hover { background: #123b52; color: #bff3ff; }
/* Kártya-hovernél fekete szöveg + cián ragyogás */
.pp-mb-card:hover .pp-mb-tmdb-link,
.pp-mb-card:focus-within .pp-mb-tmdb-link {
    color: #0a0a0a !important;
    background: #80deea;
    border-color: #000;
    text-shadow: 0 0 8px rgba(0,212,255,0.95), 0 0 16px rgba(0,212,255,0.6);
}