/* =========================================================
 * Template 1 — adaptador do layout original (Zax) ao sistema.
 *
 * NÃO edite css/style.css (CSS original do template). Toda a
 * camada de integração (login modal, notícias, countdown,
 * galeria, páginas internas, placeholders de mídia) vive aqui.
 * ========================================================= */

@import url('css/style.css');

/* ---------------------------------------------------------
 * Tokens do template (extraídos do CSS original):
 *   fundo escuro  #0d0a09 / #1d1512   borda  #4d3930 / #3e2d26
 *   texto claro   #f2f3f6             muted  #b1a38c
 *   dourado       #e8a34f / #f2c27f
 *   fontes: Merriweather (títulos) / Roboto (corpo)
 * --------------------------------------------------------- */

/* IMPORTANTE: NÃO sobrescrever `background` do body aqui.
 * O css/style.css original aplica o fundo da HOME no próprio body em
 * camadas (bg_home.jpg no topo + bg_footer.jpg embaixo). Um atalho
 * `background:` neste ponto (carregado DEPOIS do @import) zeraria o
 * background-image e deixaria a home com fundo chapado — era esse o
 * "visual quebrado". A cor/ fonte também já vêm do style.css.
 * Fundo de segurança só na cor, sem tocar na imagem: */
html {
    background-color: #100c0b;
}

/* ============================ HEADER ===================== */

/* Área direita do header: idiomas + botão entrar/painel. */
header .zaxHeaderActions {
    display: flex;
    align-items: center;
    gap: 14px;
}

header .zaxLangs {
    display: flex;
    gap: 6px;
}

header .zaxLangs a {
    color: #b1a38c;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 4px 6px;
    border: 1px solid transparent;
}

header .zaxLangs a:hover,
header .zaxLangs a.active {
    color: #f2c27f;
    border-color: rgba(232, 163, 79, .35);
}

/* Bandeiras de idioma (ícones) — todos os idiomas do sistema. */
header .zaxLangs a.zaxLangFlag {
    padding: 2px;
    border: 1px solid transparent;
    border-radius: 3px;
    line-height: 0;
    opacity: .6;
    transition: opacity .15s ease, border-color .15s ease;
}
header .zaxLangs a.zaxLangFlag img {
    display: block;
    width: 22px;
    height: auto;
    border-radius: 2px;
}
header .zaxLangs a.zaxLangFlag:hover { opacity: 1; }
header .zaxLangs a.zaxLangFlag.active {
    opacity: 1;
    border-color: rgba(232, 163, 79, .6);
}

/* Header em páginas internas: fixo ao topo com fundo sólido. */
.zaxInternal header {
    position: relative;
    background: #120d0b url(img/bg_footer.jpg) top center no-repeat;
    background-size: cover;
    border-bottom: 1px solid #3e2d26;
}

/* ====================== LOGIN (MODAL) ==================== */

.zaxModal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(5, 3, 2, .86);
    padding: 20px;
}

.zaxModal.open { display: flex; }

.zaxModalBox {
    width: 100%;
    max-width: 420px;
    background: #171008;
    background: linear-gradient(180deg, #1d1512 0%, #120d0b 100%);
    border: 1px solid #4d3930;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .7);
    padding: 34px 32px;
    position: relative;
    text-align: center;
}

.zaxModalBox .zaxModalClose {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: 0;
    color: #b1a38c;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.zaxModalBox .zaxModalClose:hover { color: #f2c27f; }

.zaxModalBox h3 {
    font: 700 20px merriweather, serif;
    color: #e8a34f;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 18px;
}

.zaxModalBox .zaxField {
    display: flex;
    flex-direction: column;
    text-align: left;
    margin: 0 0 14px;
}

.zaxModalBox .zaxField label {
    color: #b1a38c;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 6px;
}

.zaxModalBox .zaxField input {
    background: #1d1512;
    border: 1px solid #4d3930;
    height: 46px;
    line-height: 46px;
    padding: 0 14px;
    color: #f2f3f6;
    font-size: 15px;
    letter-spacing: 1px;
}

.zaxModalBox .zaxField input:focus { border-color: #e8a34f; }

.zaxModalBox .zaxError {
    background: rgba(140, 30, 30, .25);
    border: 1px solid rgba(200, 70, 70, .5);
    color: #ffb9b9;
    font-size: 13px;
    padding: 10px 12px;
    margin-bottom: 14px;
    text-align: left;
}

.zaxModalBox .zaxModalLinks {
    margin-top: 16px;
    font-size: 12px;
    color: #b1a38c;
}

.zaxModalBox .zaxModalLinks a {
    color: #f2c27f;
    text-decoration: none;
}

.zaxModalBox .zaxModalLinks a:hover { text-decoration: underline; }

.zaxModalBox .socialLoginMini { margin-top: 14px; }

.zaxModalBox .socialLoginMiniTitle {
    color: #b1a38c;
    font-size: 12px;
    margin-bottom: 8px;
}

.zaxModalBox a.socialOAuthBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 4px;
    border-radius: 999px;
    background: #1d1512;
    border: 1px solid #4d3930;
    text-decoration: none;
}

.zaxModalBox a.socialOAuthBtn:hover { border-color: #e8a34f; }

.zaxModalBox a.socialOAuthBtn .gIcon svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* ======================= SEÇÕES HOME ===================== */

/* Notícias (seção nova com a estética do template). */
.zaxNews {
    background: #0d0a09 url(img/bg_section4.jpg) top center no-repeat;
    background-size: cover;
    padding: 90px 0;
    text-align: center;
}

.zaxNewsGrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-top: 46px;
    text-align: left;
}

.zaxNewsCard {
    width: calc(33.333% - 16px);
    min-width: 260px;
    max-width: 380px;
    background: rgba(19, 13, 10, .92);
    border: 1px solid #3e2d26;
    display: flex;
    flex-direction: column;
    transition: border-color .15s ease, transform .15s ease;
}

.zaxNewsCard:hover {
    border-color: rgba(232, 163, 79, .55);
    transform: translateY(-3px);
}

.zaxNewsCard .zaxNewsImg {
    display: block;
    height: 170px;
    overflow: hidden;
}

.zaxNewsCard .zaxNewsImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.zaxNewsCard .zaxNewsBody {
    padding: 20px 22px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.zaxNewsCard .zaxNewsTitle {
    font: 700 16px merriweather, serif;
    color: #e8a34f;
    text-decoration: none;
    line-height: 22px;
    display: block;
    margin-bottom: 10px;
}

.zaxNewsCard .zaxNewsTitle:hover { color: #f2c27f; }

.zaxNewsCard .zaxNewsText {
    color: #cfc4b2;
    font-size: 13px;
    line-height: 20px;
    flex: 1;
}

.zaxNewsCard .zaxNewsMeta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    font-size: 12px;
    color: #b1a38c;
}

.zaxNewsCard .zaxNewsMeta a {
    color: #f2c27f;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
}

.zaxNewsCard .zaxNewsMeta a:hover { text-decoration: underline; }

.zaxNewsEmpty {
    color: #b1a38c;
    margin-top: 40px;
    font-size: 14px;
}

/* Countdown (markup do sistema, vestido com o tema). */
.zaxCountdown {
    padding: 40px 0 0;
}

.zaxCountdown .siteCountdownBox {
    display: table;
    margin: 0 auto;
    padding: 26px 40px;
    background: rgba(19, 13, 10, .85);
    border: 1px solid #3e2d26;
    text-align: center;
}

.zaxCountdown .siteCountdownTitle {
    font: 700 20px merriweather, serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 6px;
}

/* Ranking dentro dos "benefits" originais (Quem Somos). */
.zaxRankList {
    margin-top: 10px;
}

.zaxRankList div {
    display: flex;
    justify-content: space-between;
    padding: 7px 4px;
    border-bottom: 1px solid rgba(77, 57, 48, .55);
    color: #cfc4b2;
    font-size: 13px;
}

.zaxRankList div:last-child { border-bottom: 0; }

.zaxRankList div span { color: #e8a34f; }

/* Mídia (streams + vídeos) — placeholders quando não há itens. */
.zaxMediaEmpty {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(177, 163, 140, .55);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 1px dashed rgba(77, 57, 48, .8);
    width: 100%;
    height: 100%;
}

.streamers .streamers-content ul li iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #000;
}

.streamers .zaxMediaTitle {
    display: block;
    text-align: center;
    color: #b1a38c;
    font-size: 12px;
    padding-top: 6px;
    white-space: normal;
}

/* Galeria (fotos e vídeos do painel admin). */
.zaxGallery {
    background: #0d0a09 url(img/bg_section5.jpg) bottom center no-repeat;
    background-size: cover;
    padding: 90px 0;
    text-align: center;
}

.zaxGallery .galHomeGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 46px;
}

.zaxGallery .galHomeItem {
    position: relative;
    border: 1px solid #3e2d26;
    overflow: hidden;
    background: #0b0c10;
    aspect-ratio: 16 / 10;
    cursor: pointer;
}

.zaxGallery .galHomeItem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}

.zaxGallery .galHomeItem:hover img { transform: scale(1.06); }

.zaxGallery .galHomePlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #f2c27f;
    font-size: 34px;
    background: rgba(0, 0, 0, .35);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}

.zaxGallery .galHomeCap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, .85));
    color: #f2f3f6;
    font-size: 11px;
    font-weight: bold;
    padding: 16px 8px 6px;
    text-align: left;
}

/* Lightbox da galeria (mesmo comportamento do default). */
.galLightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(5, 3, 2, .9);
    padding: 20px;
}

.galLightbox.open { display: flex; }

.galLightbox .galClose {
    position: absolute;
    top: 16px;
    right: 24px;
    color: #f2c27f;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    font-weight: bold;
}

.galLightbox img {
    max-width: 90vw;
    max-height: 86vh;
    border: 1px solid #4d3930;
}

.galLightbox iframe {
    width: 80vw;
    height: 45vw;
    max-height: 86vh;
    border: 0;
    background: #000;
}

/* Doações: CTA no lugar dos formulários de pagamento originais. */
.donations .zaxDonateCta {
    margin-top: 30px;
}

/* ===================== PÁGINAS INTERNAS ================== */

/* O miolo das páginas (article > .page) entra nesta casca. */
.zaxPage {
    background: #0d0a09 url(img/bg_raid.jpg) top center no-repeat;
    background-size: 100% auto;
    min-height: 60vh;
    padding: 60px 0 90px;
}

.zaxPage .wrapper { max-width: 1100px; }

.zaxPage article {
    background: rgba(15, 10, 8, .93);
    border: 1px solid #3e2d26;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
    padding: 40px 44px;
}

.zaxPage article .page { color: #dcd3c3; }

.zaxPage h1 {
    font: 700 24px merriweather, serif;
    color: #e8a34f;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    margin: 0 0 26px;
    padding-bottom: 18px;
    background: url(img/img_divider.png) bottom center no-repeat;
    background-size: 220px auto;
}

.zaxPage h2 {
    font: 700 18px merriweather, serif;
    color: #f2c27f;
    margin: 22px 0 12px;
}

.zaxPage p { line-height: 1.7; }

.zaxPage a { color: #f2c27f; }

.zaxPage a:hover { color: #e8a34f; }

.zaxPage hr {
    border: 0;
    border-top: 1px solid #3e2d26;
    margin: 26px 0;
}

.zaxPage .pddInner { font-size: 14px; line-height: 1.7; }

/* Botões do sistema (.default) com o visual do template. */
.zaxPage a.default,
.zaxPage button.default,
.zaxPage span.default,
.zaxPage input[type='submit'].default {
    display: inline-block;
    padding: 14px 30px;
    min-width: 140px;
    font: 12px merriweather, serif;
    color: #e8a34f;
    letter-spacing: .6px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 0 1px 2px #000000be;
    background: url(img/bt_normal.png) center repeat-x;
    background-size: cover;
    border: 1px solid rgba(232, 163, 79, .25);
    cursor: pointer;
    box-shadow: 0 3px 16px rgba(0, 0, 0, .3);
}

.zaxPage a.default:hover,
.zaxPage button.default:hover,
.zaxPage span.default:hover,
.zaxPage input[type='submit'].default:hover {
    background-image: url(img/bt_hover.png);
    color: #f2c27f;
}

.zaxPage .default.dbig { padding: 16px 44px; }

/* Formulários padrão do sistema. */
.zaxPage .formpadrao {
    display: block;
    margin: 0 auto 14px;
    max-width: 460px;
}

.zaxPage .formpadrao .desc {
    color: #b1a38c;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 6px;
}

.zaxPage .formpadrao .camp input,
.zaxPage .formpadrao .camp select,
.zaxPage .formpadrao textarea {
    width: 100%;
    background: #1d1512;
    border: 1px solid #4d3930;
    min-height: 44px;
    padding: 8px 14px;
    color: #f2f3f6;
    font-size: 15px;
    letter-spacing: .5px;
    box-sizing: border-box;
}

.zaxPage .formpadrao .camp input:focus,
.zaxPage .formpadrao .camp select:focus,
.zaxPage .formpadrao textarea:focus { border-color: #e8a34f; outline: none; }

.zaxPage .formpadrao .camp select option { background: #1d1512; }

/* Tabelas padrão do sistema. */
.zaxPage table.default {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    font-size: 13px;
}

.zaxPage table.default tr th {
    background: #1d1512;
    color: #e8a34f;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
    padding: 12px 10px;
    border: 1px solid #3e2d26;
}

.zaxPage table.default tr td {
    padding: 10px;
    border: 1px solid #3e2d26;
    color: #dcd3c3;
}

.zaxPage table.default tr.two td { background: rgba(29, 21, 18, .55); }

/* Mensagens. */
.zaxPage .errorBox,
.zaxPage .rmsg.error {
    background: rgba(140, 30, 30, .25);
    border: 1px solid rgba(200, 70, 70, .5);
    color: #ffb9b9;
    padding: 12px 14px;
    margin: 0 auto 16px;
    max-width: 460px;
    font-size: 13px;
}

.zaxPage .rmsg {
    background: rgba(46, 105, 50, .22);
    border: 1px solid rgba(90, 170, 96, .5);
    color: #bfe8c2;
    padding: 12px 14px;
    margin: 0 auto 16px;
    max-width: 640px;
    font-size: 13px;
}

.zaxPage .rmsg.warn {
    background: rgba(150, 110, 20, .22);
    border-color: rgba(220, 170, 60, .5);
    color: #f2dfa8;
}

/* Notícias listadas em páginas internas (pages/news.php). */
.zaxPage .news {
    display: flex;
    gap: 18px;
    background: rgba(29, 21, 18, .55);
    border: 1px solid #3e2d26;
    padding: 16px;
    margin-bottom: 16px;
    text-align: left;
}

.zaxPage .news .imgn {
    flex: 0 0 180px;
    display: block;
    overflow: hidden;
}

.zaxPage .news .imgn img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

.zaxPage .news .contentn { flex: 1; min-width: 0; }

.zaxPage .news .titlen {
    font: 700 16px merriweather, serif;
    color: #e8a34f;
    text-decoration: none;
    display: block;
    margin-bottom: 8px;
}

.zaxPage .news .titlen:hover { color: #f2c27f; }

.zaxPage .news .textn {
    color: #cfc4b2;
    font-size: 13px;
    line-height: 20px;
}

.zaxPage .news .finalinfo {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 12px;
    color: #b1a38c;
}

.zaxPage .shadownew { display: none; }

/* Blocos de mídia (streams/vídeos/galeria em páginas internas). */
.zaxPage .mediaHomeBlock { margin-top: 20px; }

.zaxPage .mediaGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 12px;
}

.zaxPage .mediaCard {
    background: rgba(29, 21, 18, .55);
    border: 1px solid #3e2d26;
    padding: 10px;
    text-align: center;
}

.zaxPage .mediaCard iframe {
    width: 100%;
    height: 190px;
    border: 0;
    display: block;
    background: #000;
}

.zaxPage .mediaCardTitle {
    color: #e8a34f;
    font-weight: bold;
    font-size: 13px;
    margin-top: 8px;
}

.zaxPage .galHomeGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.zaxPage .galHomeItem {
    position: relative;
    border: 1px solid #3e2d26;
    overflow: hidden;
    background: #0b0c10;
    aspect-ratio: 16 / 10;
    cursor: pointer;
}

.zaxPage .galHomeItem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.zaxPage .galHomePlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #f2c27f;
    font-size: 34px;
    background: rgba(0, 0, 0, .35);
}

.zaxPage .galHomeCap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, .85));
    color: #f2f3f6;
    font-size: 11px;
    font-weight: bold;
    padding: 16px 8px 6px;
}

/* Login social nas páginas internas. */
.zaxPage .socialLoginMini { margin-top: 14px; text-align: center; }

.zaxPage a.socialOAuthBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 4px;
    border-radius: 999px;
    background: #1d1512;
    border: 1px solid #4d3930;
    text-decoration: none;
}

.zaxPage a.socialOAuthBtn:hover { border-color: #e8a34f; }

.zaxPage a.socialOAuthBtn .gIcon svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Countdown em páginas internas. */
.zaxPage .siteCountdownBox {
    display: table;
    margin: 0 auto 20px;
    padding: 20px 34px;
    background: rgba(29, 21, 18, .55);
    border: 1px solid #3e2d26;
    text-align: center;
}

/* ======================== FOOTER ========================= */

footer .zaxFooterLinks a {
    color: #b1a38c;
    text-decoration: none;
    margin-right: 14px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

footer .zaxFooterLinks a:hover { color: #f2c27f; }

/* ====================== RESPONSIVO ======================= */

@media (max-width: 1024px) {
    .zaxNewsCard { width: calc(50% - 12px); }
    .zaxGallery .galHomeGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .zaxNewsCard { width: 100%; max-width: 420px; }
    .zaxGallery .galHomeGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zaxPage article { padding: 26px 18px; }
    .zaxPage .mediaGrid { grid-template-columns: 1fr; }
    .zaxPage .galHomeGrid { grid-template-columns: 1fr; }
    .zaxPage .news { flex-direction: column; }
    .zaxPage .news .imgn { flex: none; }
    header .zaxHeaderActions { flex-direction: column; gap: 8px; }
}