/* Visual publico inspirado em apps modernos de cinema/POS: escuro, compacto e orientado a acao. */
:root {
    --cine-bg: #050507;
    --cine-panel: rgba(28, 27, 35, .88);
    --cine-panel-strong: rgba(37, 34, 48, .94);
    --cine-line: rgba(255,255,255,.12);
    --cine-line-strong: rgba(255,255,255,.24);
    --cine-action: #7c4dff;
    --cine-action-2: #5f37c9;
    --cine-good: #34d399;
    --cine-warn: #f6d365;
}

body {
    background:
        linear-gradient(115deg, rgba(18, 34, 28, .38) 0%, transparent 32%),
        linear-gradient(70deg, transparent 48%, rgba(71, 43, 111, .32) 100%),
        var(--cine-bg) !important;
    color: #f6f7fb;
}

.pl-nav {
    background: rgba(7, 7, 10, .88) !important;
    border-bottom: 1px solid var(--cine-line);
    box-shadow: 0 16px 40px rgba(0,0,0,.34);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.pl-nav-in {
    min-height: 62px;
    padding-top: 9px;
    padding-bottom: 9px;
}

.pl-links {
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    padding: 4px;
}

.pl-links a {
    border-radius: 999px;
    letter-spacing: 0;
    text-transform: none;
    font-size: 13.5px;
    padding: 8px 15px;
}

.pl-links a.on {
    background: rgba(255,255,255,.12);
}

.pl-links a.on::after {
    display: none;
}

.pl-search form,
.pl-city > summary,
.pl-btn {
    border-radius: 999px;
}

.pl-search form,
.pl-city > summary {
    background: rgba(255,255,255,.055);
    border-color: rgba(255,255,255,.14);
}

.pl-btn.solid,
.pl-btn.cta,
.pl-nav .pl-btn.cta,
.pl-pill.on,
.date-pill.on,
.grp-tag,
.time-chip:hover,
.btn-cine,
.co-btn.primary,
.co-step.done .dot,
.co-step.active .dot,
.co-line.done {
    background: linear-gradient(180deg, var(--cine-action) 0%, var(--cine-action-2) 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.pl-btn.solid:hover,
.pl-btn.cta:hover,
.btn-cine:hover,
.co-btn.primary:hover {
    filter: brightness(1.06);
}

.home-banners {
    background: transparent !important;
    padding-top: 18px !important;
}

.pub-banner,
.hero {
    border-radius: 8px !important;
    border: 1px solid var(--cine-line);
    box-shadow: 0 24px 80px rgba(0,0,0,.42);
}

.hero {
    height: min(480px, 56vw) !important;
    margin: 18px auto 0;
    max-width: 1200px;
}

.hero .bg {
    filter: brightness(.5) saturate(1.08) !important;
}

.hero::after,
.pub-banner::after {
    background:
        linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.42) 47%, rgba(0,0,0,.08) 100%),
        linear-gradient(180deg, transparent 42%, rgba(5,5,7,.96) 100%) !important;
}

.hero .chip {
    background: rgba(124,77,255,.86) !important;
    border: 1px solid rgba(255,255,255,.22);
}

.hero h1,
.pub-banner h1,
.page-head h1,
.fd-info h1,
.sess-tabs-title {
    letter-spacing: 0 !important;
}

.grid {
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)) !important;
    gap: 22px 16px !important;
}

.poster,
.fd-poster-box,
.cine-card,
.cine,
.sess-cine,
.co-card,
.co-summary,
.bomb-card,
.empty,
.noses,
.date-pill,
.time-chip {
    border-radius: 8px !important;
}

.poster,
.cine-card,
.cine,
.sess-cine,
.co-card,
.co-summary,
.bomb-card {
    background: var(--cine-panel) !important;
    border-color: var(--cine-line) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

.card:hover .poster,
.cine-card:hover,
.cine:hover,
.sess-cine:hover,
.bomb-card:hover {
    border-color: var(--cine-line-strong) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.poster .sess {
    background: linear-gradient(180deg, transparent 0%, rgba(8,8,12,.95) 72%) !important;
}

.ctitle,
.cine .nm,
.cine-info h3,
.fd-cred b,
.co-summary .hd b {
    color: #fff !important;
}

.cgen,
.cine .lc,
.cine-info .end,
.cine-info .horario,
.fd-syn,
.fd-meta,
.co-sum-item,
.muted {
    color: rgba(239,242,248,.68) !important;
}

.pl-tabs2 {
    border-bottom-color: rgba(255,255,255,.1) !important;
}

.pl-tabs2 a.on::after {
    background: var(--cine-action) !important;
}

.pl-pill,
.time-chip,
.date-pill,
.co-btn {
    border-color: rgba(255,255,255,.2) !important;
}

.fd-hero {
    background: transparent !important;
}

.fd-hero .bg {
    filter: blur(24px) brightness(.28) saturate(1.15) !important;
}

.fd-hero::after {
    background:
        linear-gradient(90deg, rgba(5,5,7,.92) 0%, rgba(5,5,7,.62) 46%, rgba(5,5,7,.88) 100%),
        linear-gradient(180deg, transparent 26%, var(--cine-bg) 100%) !important;
}

.fd-hero .in {
    padding-top: 46px !important;
    padding-bottom: 42px !important;
}

.fd-poster-box {
    box-shadow: 0 26px 70px rgba(0,0,0,.62) !important;
}

.date-row {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    padding: 8px !important;
}

.date-pill {
    background: rgba(255,255,255,.05) !important;
}

.sess-cine {
    padding: 18px !important;
}

.time-chip {
    background: rgba(255,255,255,.04) !important;
}

.co-nav {
    background: rgba(5,5,7,.9) !important;
}

.co-card,
.co-summary {
    background: rgba(26,25,34,.9) !important;
    border-color: rgba(255,255,255,.12) !important;
}

.co-sessbar {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.12);
    color: #fff !important;
}

.co-bottombar,
.pl-appbar {
    background: rgba(7,7,10,.94) !important;
    border-color: rgba(255,255,255,.13) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.pl-appbar {
    max-width: 520px;
    margin: 0 auto;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
}

.pl-appbar a.on {
    color: #fff !important;
    background: rgba(124,77,255,.18);
}

.pl-appbar a.on i {
    color: var(--cine-action);
}

.bomb-img,
.bomb-ph {
    border-radius: 6px !important;
}

@media (max-width: 900px) {
    body { padding-bottom: 86px !important; }
    .pl-nav-in { min-height: 58px; }
    .pl-appbar { padding: 7px 6px calc(7px + env(safe-area-inset-bottom)) !important; }
}

@media (max-width: 640px) {
    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px 12px !important;
    }
    .hero {
        height: 330px !important;
        border-radius: 0 !important;
        margin-top: 0;
        border-left: 0;
        border-right: 0;
    }
    .hero .in {
        padding-left: 18px;
        padding-right: 18px;
    }
    .hero h1 { font-size: 32px !important; }
    .page-head { padding-top: 22px !important; }
    .fd-hero .in {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
    .co-nav-right { display: none !important; }
    .co-steps { padding-top: 18px !important; }
    .co-step span { display: none; }
}