/**
 * CSS Responsivo - Mobile e Tablet
 * Criado por Draco 2025 - www.dnsprotect.com.br
 * 
 * Estilos responsivos para celulares e tablets
 */

/* ============================================
   CONFIGURAÇÕES GLOBAIS RESPONSIVAS
   ============================================ */

/* Tablet (768px - 1024px) */
@media screen and (max-width: 1024px) {
    html {
        font-size: 58% !important;
    }
    
    .container {
        padding: 0 2rem !important;
    }
    
    h1 {
        font-size: 4.2rem !important;
    }
    
    h2 {
        font-size: 3rem !important;
    }
    
    h3 {
        font-size: 2rem !important;
    }
}

/* Mobile (até 767px) */
@media screen and (max-width: 767px) {
    html {
        font-size: 55% !important;
    }
    
    .container {
        padding: 0 1.5rem !important;
        max-width: 100% !important;
    }
    
    h1 {
        font-size: 3rem !important;
        line-height: 1.2 !important;
    }
    
    h2 {
        font-size: 2.4rem !important;
        line-height: 1.3 !important;
    }
    
    h3 {
        font-size: 1.8rem !important;
    }
    
    h4 {
        font-size: 1.5rem !important;
    }
    
    h5 {
        font-size: 1.3rem !important;
    }
}

/* ============================================
   MENU DE NAVEGAÇÃO RESPONSIVO
   ============================================ */

@media screen and (max-width: 1024px) {
    .menu nav ul#mainMenu {
        flex-wrap: wrap !important;
    }
    
    .menu nav ul#mainMenu li {
        margin: 0.5rem !important;
    }
}

@media screen and (max-width: 767px) {
    .menu {
        padding: 1rem 0 !important;
    }
    
    .menu nav ul#mainMenu {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background: rgba(13, 6, 4, 0.98) !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 9999 !important;
        padding: 2rem !important;
    }
    
    .menu nav ul#mainMenu.active,
    .menu nav ul#mainMenu.showMobileMenu {
        display: flex !important;
    }
    
    .menu nav ul#mainMenu li {
        width: 100% !important;
        margin: 1rem 0 !important;
        text-align: center !important;
    }
    
    .menu nav ul#mainMenu li a {
        font-size: 1.8rem !important;
        padding: 1.5rem 2rem !important;
        display: block !important;
        width: 100% !important;
    }
    
    #toggleMenu {
        display: block !important;
        position: fixed !important;
        top: 2rem !important;
        right: 2rem !important;
        z-index: 10000 !important;
        background: rgba(212, 175, 55, 0.2) !important;
        border: 2px solid #d4af37 !important;
        padding: 1rem !important;
        border-radius: 8px !important;
        color: #d4af37 !important;
        font-size: 2rem !important;
        cursor: pointer !important;
    }
    
    #closeMobileMenu {
        display: block !important;
        position: absolute !important;
        top: 2rem !important;
        right: 2rem !important;
        font-size: 3rem !important;
        color: #d4af37 !important;
        cursor: pointer !important;
        z-index: 10001 !important;
    }
    
    #closeMobileMenu:hover {
        color: #fff !important;
    }
}

/* ============================================
   HEADER E BANNER RESPONSIVO
   ============================================ */

@media screen and (max-width: 1024px) {
    header .banner {
        padding: 4rem 2rem !important;
    }
    
    .btn-banner {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    
    .btn-banner .btn {
        width: 100% !important;
        max-width: 300px !important;
    }
}

@media screen and (max-width: 767px) {
    header .banner {
        padding: 3rem 1.5rem !important;
        text-align: center !important;
    }
    
    header .banner p {
        font-size: 1.4rem !important;
        margin-bottom: 2rem !important;
    }
    
    .btn-banner {
        width: 100% !important;
    }
    
    .btn-banner .btn {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1.5rem 2rem !important;
        font-size: 1.4rem !important;
    }
}

/* ============================================
   TABELAS DE RANKING RESPONSIVAS
   ============================================ */

@media screen and (max-width: 1024px) {
    table.ranking-table,
    table[border="0"][cellpadding="2"][cellspacing="0"],
    table[border="0"] {
        font-size: 1.2rem !important;
    }
    
    table.ranking-table td,
    table[border="0"][cellpadding="2"][cellspacing="0"] td,
    table[border="0"] td {
        padding: 10px 6px !important;
        font-size: 1.2rem !important;
    }
    
    table.ranking-table thead th,
    table[border="0"][cellpadding="2"][cellspacing="0"] thead th,
    table[border="0"] thead th {
        padding: 10px 6px !important;
        font-size: 1.1rem !important;
    }
}

@media screen and (max-width: 767px) {
    /* Tabelas em scroll horizontal em mobile */
    .page-content .framecontent {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    iframe.frame2 {
        width: 100% !important;
        min-width: 600px !important;
    }
    
    table.ranking-table,
    table[border="0"][cellpadding="2"][cellspacing="0"],
    table[border="0"] {
        min-width: 600px !important;
        font-size: 1.1rem !important;
        border-radius: 8px !important;
        margin: 10px 0 !important;
    }
    
    table.ranking-table td,
    table[border="0"][cellpadding="2"][cellspacing="0"] td,
    table[border="0"] td {
        padding: 8px 4px !important;
        font-size: 1rem !important;
    }
    
    table.ranking-table thead th,
    table[border="0"][cellpadding="2"][cellspacing="0"] thead th,
    table[border="0"] thead th {
        padding: 8px 4px !important;
        font-size: 0.9rem !important;
        white-space: nowrap !important;
    }
    
    table.ranking-table td.class-icon img,
    table[border="0"][cellpadding="2"][cellspacing="0"] td img,
    table[border="0"] td img {
        width: 18px !important;
        height: 16px !important;
    }
}

/* ============================================
   PÁGINA DE RANKINGS RESPONSIVA
   ============================================ */

@media screen and (max-width: 767px) {
    .page-content .framecontent {
        padding: 1rem !important;
    }
    
    .page-content .framecontent .btn2 {
        display: block !important;
        width: 100% !important;
        margin: 0.5rem 0 !important;
        padding: 1rem !important;
        font-size: 1.2rem !important;
        text-align: center !important;
    }
    
    iframe.frame2 {
        height: 500px !important;
        border-radius: 8px !important;
    }
}

/* ============================================
   FORMULÁRIOS AUTH RESPONSIVOS
   ============================================ */

@media screen and (max-width: 1024px) {
    .auth-nav {
        flex-wrap: wrap !important;
        padding: 1rem !important;
    }
    
    .auth-nav a {
        padding: 0.8rem 1.2rem !important;
        font-size: 1.1rem !important;
        margin: 0.3rem !important;
    }
}

@media screen and (max-width: 767px) {
    /* Navegação Auth */
    .auth-nav {
        flex-direction: column !important;
        padding: 1rem !important;
    }
    
    .auth-nav a {
        width: 100% !important;
        margin: 0.5rem 0 !important;
        padding: 1rem !important;
        font-size: 1.2rem !important;
        text-align: center !important;
    }
    
    /* Formulários */
    .auth-container,
    .container-auth,
    form {
        padding: 2rem 1.5rem !important;
        margin: 1rem auto !important;
        max-width: 100% !important;
    }
    
    .auth-container form,
    form {
        width: 100% !important;
    }
    
    .auth-container input[type="text"],
    .auth-container input[type="email"],
    .auth-container input[type="password"],
    input[type="text"],
    input[type="email"],
    input[type="password"] {
        width: 100% !important;
        padding: 1.2rem !important;
        font-size: 1.4rem !important;
        margin-bottom: 1.5rem !important;
        box-sizing: border-box !important;
    }
    
    .auth-container button,
    .auth-container .btn,
    button[type="submit"],
    .btn-submit {
        width: 100% !important;
        padding: 1.5rem !important;
        font-size: 1.4rem !important;
        margin-top: 1rem !important;
    }
    
    .auth-container .message,
    .message {
        padding: 1.5rem !important;
        font-size: 1.3rem !important;
        margin-bottom: 1.5rem !important;
        line-height: 1.5 !important;
    }
    
    /* Botão Voltar ao Site */
    .btn-voltar,
    a[href*="index.php"].btn-voltar {
        width: 100% !important;
        padding: 1rem !important;
        font-size: 1.2rem !important;
        margin-bottom: 1.5rem !important;
        text-align: center !important;
        display: block !important;
    }
    
    /* Container principal Auth */
    body {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Títulos */
    h1, h2, h3 {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
        margin: 1rem 0 !important;
    }
}

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

@media screen and (max-width: 767px) {
    footer .container {
        flex-direction: column !important;
        text-align: center !important;
        padding: 2rem 1.5rem !important;
    }
    
    footer .social-links {
        justify-content: center !important;
        margin: 1.5rem 0 !important;
    }
    
    footer .social-links a {
        margin: 0 0.8rem !important;
        font-size: 2rem !important;
    }
    
    footer .copy {
        flex-direction: column !important;
        text-align: center !important;
        gap: 1rem !important;
    }
    
    footer .copy p {
        font-size: 1.2rem !important;
        margin: 0.5rem 0 !important;
    }
}

/* ============================================
   CONTEÚDO GERAL RESPONSIVO
   ============================================ */

@media screen and (max-width: 1024px) {
    .page-content {
        padding: 2rem 1rem !important;
    }
    
    .page-content .content {
        flex-direction: column !important;
    }
    
    .page-content .content-area {
        width: 100% !important;
        margin-bottom: 2rem !important;
    }
}

@media screen and (max-width: 767px) {
    .page-content {
        padding: 1.5rem 1rem !important;
    }
    
    .page-content .content {
        padding: 1rem !important;
    }
    
    .page-content .content-area {
        padding: 1rem !important;
    }
    
    /* Cards e boxes */
    .card,
    .box {
        width: 100% !important;
        margin-bottom: 1.5rem !important;
        padding: 1.5rem !important;
    }
    
    /* Imagens responsivas */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Botões */
    .btn {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1.2rem 2rem !important;
        font-size: 1.3rem !important;
    }
}

/* ============================================
   UTILITÁRIOS RESPONSIVOS
   ============================================ */

@media screen and (max-width: 767px) {
    /* Esconder elementos desnecessários em mobile */
    .desktop-only {
        display: none !important;
    }
    
    /* Mostrar elementos apenas em mobile */
    .mobile-only {
        display: block !important;
    }
    
    /* Espaçamentos reduzidos */
    .mb-mobile {
        margin-bottom: 1rem !important;
    }
    
    .mt-mobile {
        margin-top: 1rem !important;
    }
    
    /* Texto menor em mobile */
    .text-mobile {
        font-size: 1.2rem !important;
    }
    
    /* Botão voltar ao topo */
    .to-top {
        width: 4rem !important;
        height: 4rem !important;
        bottom: 2rem !important;
        right: 2rem !important;
        font-size: 1.5rem !important;
    }
}

/* Tablet específico */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .tablet-only {
        display: block !important;
    }
    
    .mobile-only {
        display: none !important;
    }
}

/* Desktop - esconder mobile */
@media screen and (min-width: 1025px) {
    .mobile-only {
        display: none !important;
    }
    
    #toggleMenu {
        display: none !important;
    }
    
    .desktop-only {
        display: block !important;
    }
}

/* ============================================
   MELHORIAS ESPECÍFICAS POR PÁGINA
   ============================================ */

/* Página de Download */
@media screen and (max-width: 767px) {
    .download-section {
        padding: 1.5rem !important;
    }
    
    .download-button {
        width: 100% !important;
        padding: 1.5rem !important;
        font-size: 1.4rem !important;
    }
}

/* Página de Informações */
@media screen and (max-width: 767px) {
    .info-section {
        padding: 1.5rem !important;
    }
    
    .info-box {
        margin-bottom: 1.5rem !important;
        padding: 1.5rem !important;
    }
}

/* Página de Guias */
@media screen and (max-width: 767px) {
    .guide-content {
        padding: 1rem !important;
    }
    
    .guide-nav {
        flex-direction: column !important;
    }
    
    .guide-nav a {
        width: 100% !important;
        margin: 0.5rem 0 !important;
    }
}

/* Página de Doações */
@media screen and (max-width: 767px) {
    .donate-section {
        padding: 1.5rem !important;
    }
    
    .donate-options {
        flex-direction: column !important;
    }
    
    .donate-option {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }
}

/* ============================================
   ORIENTAÇÃO LANDSCAPE (Mobile)
   ============================================ */

@media screen and (max-width: 767px) and (orientation: landscape) {
    header .banner {
        padding: 2rem 1.5rem !important;
    }
    
    .btn-banner {
        flex-direction: row !important;
        gap: 1rem !important;
    }
    
    .btn-banner .btn {
        width: 48% !important;
    }
    
    iframe.frame2 {
        height: 400px !important;
    }
}

/* ============================================
   MELHORIAS DE TOUCH (Mobile)
   ============================================ */

@media screen and (max-width: 767px) {
    /* Áreas de toque maiores */
    a, button, .btn {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Remover hover em touch */
    *:hover {
        transition: none !important;
    }
    
    /* Scroll suave */
    * {
        -webkit-overflow-scrolling: touch !important;
    }
}