/* Tema JM Fibra compartilhado pelo painel, pela vitrine e pelos portais SVA. */
:root {
    --jmf-purple: #3273dc;
    --jmf-purple-dark: #363636;
    --jmf-orange: #209cee;
    --jmf-ink: #363636;
    --jmf-soft: #f5f5f5;
}
body { background: #fff; color: var(--jmf-ink); }
a { color: #3273dc; }
h1, h2, h3 { color: #363636; }
.jmf-company-logo { display: block; width: 100px; height: 76px; object-fit: contain; }
.jmf-login .jmf-company-logo { width: 170px; height: 126px; margin: 0 auto 20px; }
header.sva-isp-header, .catalog-header { background: #fff; border-bottom: 1px solid #dbdbdb; }

nav.sva-main-menu {
    background: #0a0a0a !important;
    border-bottom: 0;
}
nav.sva-main-menu > a,
nav.sva-main-menu > details > summary { color: #fff !important; }
nav.sva-main-menu > a:hover,
nav.sva-main-menu > details > summary:hover,
nav.sva-main-menu > details[open] > summary { background: #181818 !important; }
nav.sva-main-menu .sva-menu-dropdown { background: #fff; }
nav.sva-main-menu .sva-menu-dropdown a { color: #4a4a4a; }
nav.sva-main-menu .sva-menu-dropdown a:hover,
nav.sva-main-menu .sva-menu-dropdown a:focus-visible { background: #f5f5f5; color: #0a0a0a; }

button, .button {
    background: #209cee;
    color: #fff;
    border-radius: 4px;
}
button.secondary, .button.secondary { background: #ffdd57; color: #363636; }
button.danger, .button.danger { background: #ff3860; color: #fff; }
button:focus-visible, a:focus-visible, summary:focus-visible {
    outline: 2px solid #3273dc;
    outline-offset: 2px;
}
input, select, textarea { accent-color: #3273dc; }
input:focus, select:focus, textarea:focus { border-color: #3273dc; }
thead, .sva-programming-table th,
.sva-programming-dialog .sva-programming-table th {
    background: #0a0a0a;
    color: #fff;
}
thead th { color: #fff; }
tbody tr:nth-child(even) { background: #f5f5f5; }
.notice { background: #fff9dd; border-left: 4px solid #ffdd57; color: #594600; }
.catalog-artwork h3, .catalog-sales-card .catalog-provider { color: #fff; }

/* O painel usa a largura, os campos e as divisões da Empresa. */
body:has(.sva-main-menu) > main {
    max-width: none;
    width: 100%;
    margin-inline: auto;
    padding-inline: 16px;
    color: #363636;
}
body:has(.sva-main-menu) main article {
    background: #fff;
    border-color: #dbdbdb;
    border-radius: 4px;
    box-shadow: none;
    padding: 16px;
}
body:has(.sva-main-menu) main :is(h1, h2, h3) { font-weight: 600; }
body:has(.sva-main-menu) main label { font-size: 0.875rem; font-weight: 600; }
body:has(.sva-main-menu) main :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea) {
    background-color: #fff;
    color: #363636;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 1rem;
    font-weight: 400;
}
body:has(.sva-main-menu) main :is(input:not([type=checkbox]):not([type=radio]), select) { min-height: 36px; }
body:has(.sva-main-menu) main :is(input, select, textarea):focus { border-color: #3273dc; }
body:has(.sva-main-menu) main :is(button, .button) { padding: 6px 12px; min-height: 36px; }
body:has(.sva-main-menu) main table :is(th, td) { padding: 5px 8px; }
@media (max-width: 650px) {
    body:has(.sva-main-menu) > main { padding-inline: 10px; }
    .catalog-header { gap: 16px; flex-wrap: wrap; }
}
@media (min-width: 900px) {
    body:has(.sva-main-menu) main form:not(.inline-form) > label:has(> :is(input:not([type=checkbox]):not([type=radio]), select, textarea):last-child):not(:has(> :is(button, small, span, a))) {
        display: grid;
        grid-template-columns: minmax(160px, 16%) minmax(0, 1fr);
        align-items: center;
        gap: 24px;
        text-align: right;
    }
}

/* Listagens e formulários do painel seguem as medidas da Empresa. */
body:has(.sva-main-menu) main > article {
    border: 0;
    border-radius: 0;
    padding: 0;
}
body:has(.sva-main-menu) main > article > :is(h1, h2):first-child {
    margin: 30px 0 32px;
    font-size: 15px;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
}
body:has(.sva-main-menu) main article table :is(th, td) {
    border-bottom: 0;
    padding: 2px 4px;
    line-height: 20px;
}
body:has(.sva-main-menu) main article table thead th {
    text-transform: uppercase;
}
body:has(.sva-main-menu) main .sva-list-icon {
    display: inline-grid;
    place-items: center;
    width: 32px;
    min-height: 32px;
    padding: 0;
    background: transparent;
    color: #18c95b;
    font-size: 27px;
    line-height: 1;
    text-decoration: none;
}
body:has(.sva-main-menu) main button.sva-list-icon {
    color: #ff3860;
}
@media (min-width: 900px) {
    body:has(.sva-main-menu) main article form:not(.inline-form) .fields {
        display: block;
        max-width: 83.333%;
    }
    body:has(.sva-main-menu) main article form:not(.inline-form) .fields > label:has(> :is(input:not([type=checkbox]):not([type=radio]), select, textarea)) {
        display: grid;
        grid-template-columns: minmax(120px, 16.5%) minmax(0, 1fr);
        align-items: start;
        column-gap: 24px;
        text-align: right;
        font-size: 12px;
    }
    body:has(.sva-main-menu) main article form:not(.inline-form) .fields > label > :is(input, select, textarea, small) {
        grid-column: 2;
        text-align: left;
    }
}

/* Logo horizontal e acessos ao final da vitrine. */
.catalog-header:has(img[src="/streamingbrasil-logo.png"]) {
    width: 100%;
    max-width: none;
    justify-content: center;
    padding: 20px;
}
.catalog-header .catalog-brand:has(img[src="/streamingbrasil-logo.png"]) {
    display: block;
    width: min(100%, 1400px);
}
.catalog-header img[src="/streamingbrasil-logo.png"].jmf-company-logo {
    width: 100%;
    height: auto;
    max-height: 170px;
    object-fit: contain;
}
.streaming-public-footer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 32px 20px;
}
.jmf-login .brand img[src="/streamingbrasil-logo.png"].jmf-company-logo {
    width: min(100%, 480px) !important;
    max-height: 200px;
}
.jmf-panel-info img[src="/streamingbrasil-logo.png"] {
    width: 280px;
    max-width: min(280px, 30vw) !important;
    max-height: 110px !important;
}

/* Marcas parceiras nas laterais do cabeçalho público. */
.catalog-header:has(.streaming-partner-logo) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 4fr) minmax(0, 1fr);
    align-items: center;
    gap: 20px;
}
.catalog-header .streaming-partner-logo {
    display: block;
    width: 100%;
    height: 170px;
    overflow: hidden;
    position: relative;
}
.catalog-header .streaming-partner-logo img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
@media (max-width: 650px) {
    .catalog-header:has(.streaming-partner-logo) {
        gap: 8px;
        padding: 12px 8px;
    }
    .catalog-header .streaming-partner-logo {
        height: 80px;
    }
    .catalog-header:has(.streaming-partner-logo) img.jmf-company-logo {
        max-height: 80px;
    }
}


.playhub-slideshow { margin: 24px 0 40px; }
.playhub-marquee { overflow: hidden; margin: 8px 0; }
.playhub-marquee-track {
    display: flex;
    width: max-content;
    animation: playhub-marquee-scroll 100s linear infinite;
}
.playhub-marquee-right .playhub-marquee-track { animation-direction: reverse; }
.playhub-marquee-group { display: flex; gap: 4px; padding-right: 4px; flex-shrink: 0; }
.playhub-marquee-group img { width: 160px; height: 160px; flex: 0 0 160px; object-fit: contain; }
@keyframes playhub-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (max-width: 650px) {
    .playhub-marquee-group img { width: 120px; height: 120px; flex-basis: 120px; }
}
@media (prefers-reduced-motion: reduce) {
    .playhub-marquee-track { animation: none; }
}

.playhub-app { margin: 0; flex: 0 0 160px; text-align: center; }
.playhub-app img { display: block; }
.playhub-app figcaption { font-weight: 700; margin: -8px 0 0; padding: 0; font-size: 13px; line-height: 18px; color: #363636; }
@media (max-width: 650px) {
    .playhub-app { flex-basis: 120px; }
}