:root{
        --bg:#0b0c0e;
        --card:#0f1113;
        --muted:#bfc6cc;
        --accent1: linear-gradient(45deg,#6dd3ff,#7b6bff);
        --accent2: linear-gradient(45deg,#28a745,#34ce57);
    }
    body {
        background: var(--bg);
        color: #fff;
        font-family: "Cairo", Tahoma, sans-serif;
        -webkit-font-smoothing:antialiased;
        -moz-osx-font-smoothing:grayscale;
    }

    /* HERO */
    .movie-hero {
        position: relative;
        background:
            linear-gradient(180deg, rgba(0,0,0,0.75) 10%, rgba(0,0,0,0.9) 90%),
            url('<?= e($movie['backdrop_url'] ?: "assets/images/movie-bg.jpg") ?>');
        background-size: cover;
        background-position: center;
        padding: 80px 0 50px;
    }
    .movie-hero .card {
        background: rgba(15,15,15,0.6);
        border: none;
        backdrop-filter: blur(4px);
    }
    .movie-poster {
        border-radius: 12px;
        max-width: 320px;
        box-shadow: 0 18px 40px rgba(0,0,0,0.6);
        transition: transform .35s ease, box-shadow .35s ease;
    }
    .movie-poster:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 26px 60px rgba(0,0,0,0.7); }
    .rating-badge {
        background: linear-gradient(45deg,#ffd700,#ffb100);
        color: #111;
        padding: 6px 14px;
        border-radius: 20px;
        font-weight: 700;
        box-shadow: 0 6px 18px rgba(255,185,0,0.12);
    }
    h1.movie-title {
        font-size: 1.9rem;
        margin-bottom: 0.2rem;
    }
    .meta-list p { color: var(--muted); margin-bottom: .35rem; }

    /* buttons */
    .btn-watch {
        border-radius: 999px;
        padding: .6rem 1.25rem;
        font-weight: 700;
        background: linear-gradient(45deg,#28a745,#34ce57);
        border: none;
    }
    .btn-download {
        border-radius: 999px;
        padding: .6rem 1.25rem;
        font-weight: 700;
        background: linear-gradient(45deg,#007bff,#3399ff);
        border: none;
    }
    .btn-watch:hover, .btn-download:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }

    /* share buttons */
    .share-buttons .btn {
        width: 40px; height: 40px; padding: 0; border-radius: 50%;
        display:inline-flex; align-items:center; justify-content:center;
    }
    .share-buttons .btn:hover { transform: scale(1.12); }

    /* suggested cards */
    .movie-card {
        background: var(--card);
        border-radius: 12px;
        overflow: hidden;
        position: relative;
        height: 100%;
        transition: transform .35s ease, box-shadow .35s ease;
    }
    .movie-card:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(0,0,0,0.6); }
    .movie-card img { width: 100%; height: 100%; object-fit: cover; display:block; }

    .movie-overlay {
        position:absolute; inset:0;
        background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.6));
        opacity:0; transition:opacity .25s ease;
        display:flex; align-items:center; justify-content:center;
    }
    .movie-card:hover .movie-overlay { opacity:1; }
    .play-icon { font-size:42px; color:#fff; animation:pulse 1.6s infinite; }
    @keyframes pulse { 0%{transform:scale(1)}50%{transform:scale(1.15);opacity:.85}100%{transform:scale(1)} }

    .movie-title-small {
        position:absolute; left:0; right:0; bottom:0; text-align:center;
        padding:.45rem .4rem; background:rgba(0,0,0,0.6); color:#fff; font-weight:600; font-size:.95rem;
    }
    .movie-rating, .movie-year {
        position:absolute; top:10px; padding:4px 8px; border-radius:8px; font-weight:700; font-size:.85rem;
    }
    .movie-rating { right:10px; background:linear-gradient(45deg,#ffd700,#ffb100); color:#111; }
    .movie-year { left:10px; background:rgba(0,0,0,0.55); color:#fff; }

    /* responsive fixes */
    @media (max-width: 767px) {
        .movie-poster { max-width: 220px; margin: 0 auto; display:block; }
        h1.movie-title { font-size: 1.4rem; text-align:center; }
    }