:root{
    --bg:#f5f7fb;
    --panel:#ffffff;
    --text:#1f2937;
    --muted:#6b7280;
    --line:#e5e7eb;
    --brand:#111827;
    --accent:#ef2e2e;
    --accent-2:#c81e1e;
    --soft:#fff5f5;
    --shadow:0 12px 30px rgba(15,23,42,0.08);
    --radius:18px;
    --dark:linear-gradient(135deg,#071325 0%, #142844 100%);
}

*{box-sizing:border-box}
body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background:var(--bg);
    color:var(--text);
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{font:inherit}

.container{
    width:min(1180px, calc(100% - 32px));
    margin:0 auto;
}

.site-header{
    background:#fff;
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    z-index:10;
}
.header-wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 0;
    gap:16px;
}
.brand{
    font-size:24px;
    font-weight:700;
}
.sub-brand{
    color:var(--muted);
    font-size:13px;
    margin-top:4px;
}
.offers-link{
    color:#be123c;
    font-weight:700;
}
.nav{
    display:flex;
    align-items:center;
    gap:18px;
}
.nav a{
    color:var(--brand);
    font-weight:600;
}

.main-area{
    padding:28px 0 40px;
}

.hero{
    background:var(--dark);
    color:#fff;
    padding:26px;
    border-radius:24px;
    box-shadow:var(--shadow);
    margin-bottom:24px;
}
.hero h1{
    margin:0 0 10px;
    font-size:32px;
}
.hero p{
    margin:0;
    color:#e5e7eb;
}
.hero-status{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
}
.hero-badge{
    display:inline-flex;
    align-items:center;
    padding:9px 14px;
    border-radius:999px;
    background:#ffffff;
    color:#111827;
    font-weight:700;
    font-size:14px;
    line-height:1;
}
.hero-badge-soft{
    background:rgba(255,255,255,0.14);
    color:#ffffff;
    border:1px solid rgba(255,255,255,0.20);
}

.date-nav{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}
.date-pill{
    background:rgba(255,255,255,0.12);
    color:#fff;
    padding:10px 14px;
    border-radius:999px;
    font-size:14px;
}
.date-pill.active{
    background:#fff;
    color:#111827;
    font-weight:700;
}

.featured-section,.list-section{
    margin-bottom:32px;
}
.section-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:12px;
    margin-bottom:16px;
}
.section-head h2,.section-head h1{
    margin:0;
}
.section-head p{
    margin:0;
    color:var(--muted);
}

.featured-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:18px;
}
.featured-card{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    box-shadow:var(--shadow);
    min-height:360px;
}
.featured-poster{
    width:100%;
    height:360px;
    object-fit:cover;
}
.featured-overlay{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:18px;
    color:#fff;
    background:linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.15));
}
.featured-title{
    font-size:20px;
    font-weight:700;
    margin-bottom:8px;
}
.featured-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    font-size:13px;
}
.featured-meta span{
    background:rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.2);
    padding:6px 10px;
    border-radius:999px;
}

.filter-panel{
    background:#fff;
    border-radius:22px;
    box-shadow:var(--shadow);
    padding:20px;
    margin-bottom:28px;
}
.filter-row{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    align-items:end;
}
.filter-col{
    min-width:160px;
    flex:1;
}
.filter-search{
    flex:2;
    min-width:260px;
}
.filter-col label{
    display:block;
    font-size:14px;
    color:var(--muted);
    margin-bottom:8px;
}
.filter-col input,
.filter-col select{
    width:100%;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
}
.filter-actions-inline{
    flex:0 0 auto;
    min-width:auto;
}
.button-row{
    display:flex;
    gap:10px;
    align-items:center;
}
.active-filters{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    margin-top:16px;
}
.active-filters-label{
    color:var(--muted);
    font-size:14px;
    font-weight:700;
}
.active-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    color:#111827;
    font-size:13px;
    font-weight:600;
}
.active-tag .close{
    color:#6b7280;
    font-size:14px;
    line-height:1;
}

.chips{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    color:#374151;
    padding:9px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
}
.browse-languages-section{
    margin-top:8px;
    margin-bottom:32px;
    background:#fff;
    border-radius:22px;
    box-shadow:var(--shadow);
    padding:20px;
}

.movie-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
}
.movie-card{
    background:var(--panel);
    border-radius:22px;
    overflow:hidden;
    box-shadow:var(--shadow);
    border:1px solid #eef2f7;
}
.poster{
    width:100%;
    height:360px;
    object-fit:cover;
    background:#f3f4f6;
}
.movie-content{
    padding:16px;
}
.movie-content h2{
    margin:0 0 12px;
    font-size:20px;
    line-height:1.35;
}
.meta-line,
.badge-line{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:12px;
}
.meta-line span,
.badge{
    background:#f8fafc;
    border:1px solid #e5e7eb;
    color:#374151;
    padding:7px 10px;
    border-radius:999px;
    font-size:13px;
}
.badge{
    background:var(--soft);
    border-color:#fecaca;
    color:#991b1b;
}
.badge-soft{
    background:#f3f4f6;
    color:#334155;
    border-color:#e5e7eb;
}

.card-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
}
.btn{
    padding:11px 14px;
    border-radius:12px;
    font-weight:700;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid transparent;
    cursor:pointer;
}
.btn-primary{
    background:var(--accent);
    color:#fff;
}
.btn-primary:hover{
    background:var(--accent-2);
}
.btn-light{
    background:#f3f4f6;
    color:#111827;
    border-color:#e5e7eb;
}

.empty-box{
    background:#fff;
    padding:20px;
    border-radius:18px;
    border:1px solid #e5e7eb;
    box-shadow:var(--shadow);
}
.site-footer{
    padding:24px 0 32px;
    color:var(--muted);
}
.footer-wrap{
    display:flex;
    justify-content:space-between;
    gap:16px;
    border-top:1px solid var(--line);
    padding-top:20px;
}

@media (max-width: 1000px){
    .filter-row{
        flex-direction:column;
        align-items:stretch;
    }
    .filter-col,
    .filter-search,
    .filter-actions-inline{
        width:100%;
        min-width:0;
        flex:1 1 100%;
    }
    .filter-actions-inline label{
        display:none;
    }
}

@media (max-width: 640px){
    .hero h1{
        font-size:26px;
    }
    .poster{
        height:300px;
    }
    .header-wrap,
    .footer-wrap,
    .section-head{
        flex-direction:column;
        align-items:flex-start;
    }
    .button-row{
        flex-wrap:wrap;
    }
}
.modal{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.75);
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:9999;
}

.modal.open{
    display:flex !important;
}

.modal-content{
    position:relative;
    width:min(960px, 100%);
    background:#000;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 20px 40px rgba(0,0,0,.35);
}

.modal-close{
    position:absolute;
    top:10px;
    right:12px;
    width:36px;
    height:36px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    color:#fff;
    border:1px solid rgba(255,255,255,.2);
    cursor:pointer;
    z-index:2;
}

.video-wrap{
    position:relative;
    width:100%;
    padding-top:56.25%;
}

.video-wrap iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}