/*========================================
= FUNDO DARK
=========================================*/
body {
    background: #0b0b0d;
    color: #d4d4dc;
}

/*========================================
= HEADER
=========================================*/
.header-images img {
    filter: drop-shadow(0 0 8px #9d4edd55);
    transition: 0.3s;
}

header a img:hover {
    filter: drop-shadow(0 0 14px #c77dffaa);
    transform: scale(1.05);
}

/* Botão Dark Mode */
#themeToggle {
    border-color: #c77dff;
    background: rgba(40,0,70,0.4);
    color: #c77dff;
}

#themeToggle:hover {
    background: rgba(100,0,160,0.35);
}

/*========================================
= NAV BAR
=========================================*/
nav ul {
    background: #141418;
    border: 2px solid #9d4edd;
    box-shadow: 0 0 10px #9d4edd55, inset 0 0 12px #9d4edd33;
}

nav li a {
    color: #c77dff;
    text-shadow: 0 0 4px #9d4edd;
}

nav li a:hover {
    background: #9d4edd;
    color: #0b0b0d;
    text-shadow: none;
    box-shadow: 0 0 12px #c77dff;
}

/*========================================
= BLOCOS (Blog, Chat, Contador)
=========================================*/
.blog-area,
.chat-box,
.lontra-wrapper {
    background: #141418ee;
    border: 2px solid #9d4edd;
    border-radius: 12px;
    box-shadow: 0 0 10px #9d4edd55, inset 0 0 12px #9d4edd33;
}

/*========================================
= IFRAMES
=========================================*/
.blog-area iframe,
.chat-box iframe {
    border: 2px solid #9d4edd;
    box-shadow: inset 0 0 8px #9d4edd33;
}

/*========================================
= BOTÕES LATERAIS
=========================================*/
.side-area img {
    filter: drop-shadow(0 0 6px #c77dff55);
}

.side-area img:hover {
    filter: drop-shadow(0 0 12px #c77dff);
    transform: scale(1.05);
}

/*========================================
= CONTADOR
=========================================*/
.contador-titulo,
.texto-contador {
    background: #0b0b0d;
    color: #c77dff;
    border: 2px solid #9d4edd;
    text-shadow: 0 0 6px #9d4edd;
}

.numero-placa {
    color: #c77dff;
}

#lontra-btn {
    filter: drop-shadow(0 0 8px #9d4edd);
    transition: 0.2s ease;
}

#lontra-btn:hover {
    transform: scale(1.07);
    filter: drop-shadow(0 0 14px #c77dff);
}

/*========================================
= INSTAGRAM BOX
=========================================*/
.social-box {
    background: #141418;
    border: 2px solid #9d4edd;
    box-shadow: 0 0 10px #9d4edd55, inset 0 0 6px #9d4edd33;
}

.social-box a.insta {
    color: #c77dff;
    text-shadow: 0 0 6px #9d4edd;
}

.social-box a.insta:hover {
    background: #9d4edd;
    color: #0b0b0d;
}


/*========================================
= POPUP
=========================================*/
.night-popup {
    position: fixed;
    inset: 0; 
    background: rgba(0,0,0,0.85);
    display: none; 
    align-items: center;
    justify-content: center;
    z-index: 999999;
    opacity: 1;
    pointer-events: none;
}

/* Quando deve aparecer */
.night-popup.show {
    display: flex !important;
    pointer-events: auto;
    transition: opacity 0.4s ease;
}

/* Fade-out */
.night-popup.fade-out {
    opacity: 0;
}

.night-popup img {
    max-width: 30%;
    max-height: 30%;
    image-rendering: pixelated;
    border: 4px solid #fff;
    border-radius: 8px;
    box-shadow: 0 0 20px #c77dff;
    animation: popupAnim 0.4s ease-out;
}

/* Animação de entrada */
@keyframes popupAnim {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}