/* ===============================================
   MOBILE FIXES - Correções Específicas
   Apenas ajustes para mobile sem afetar desktop
   =============================================== */

/* Viewport Fix - Previne zoom indesejado */
@viewport {
    width: device-width;
    zoom: 1.0;
}

/* ===============================================
   FIX 1: Área do Participante - Header empilhado
   =============================================== */
@media (max-width: 768px) {
    /* Header com botões */
    div[style*="max-width: 900px"] > div[style*="background: var(--white)"] > div[style*="justify-content: space-between"] {
        flex-wrap: wrap !important;
    }

    /* Botões do header side by side no mobile */
    div[style*="max-width: 900px"] > div[style*="background: var(--white)"] > div > div[style*="display: flex; gap: 0.5rem"] {
        width: 100%;
        margin-top: 1rem;
    }
}

/* ===============================================
   FIX 2: Event Cards na Minha Área - Melhor layout
   =============================================== */
@media (max-width: 768px) {
    /* Card de evento - remover min-width da coluna data */
    .event-card > div > div:first-child {
        min-width: auto !important;
        width: 100% !important;
    }

    /* Info e horário em coluna */
    .event-card span[style*="color: #6F7287"] {
        display: block !important;
        margin-bottom: 0.5rem !important;
    }
}

/* ===============================================
   FIX 3: Página de Evento - Grid para coluna
   =============================================== */
@media (max-width: 768px) {
    /* Main grid do evento */
    div[style*="display: grid"][style*="grid-template-columns: 2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Price card não sticky */
    div[style*="position: sticky"][style*="top: 2rem"] {
        position: relative !important;
        top: 0 !important;
        order: -1 !important; /* Move para o topo */
    }
}

/* ===============================================
   FIX 4: Checkout - Resumo primeiro no mobile
   =============================================== */
@media (max-width: 768px) {
    /* Grid principal do checkout */
    .inscricao-container > div[style*="display: grid"] {
        display: flex !important;
        flex-direction: column-reverse !important; /* Inverte ordem */
    }
}

/* ===============================================
   FIX 5: Pagamento - QR Code responsivo
   =============================================== */
@media (max-width: 768px) {
    /* Container do QR Code */
    div[style*="text-align: center"] > div > canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Código PIX - quebra de linha */
    div[style*="font-family: monospace"][style*="word-break: break-all"] {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
        padding: 1rem !important;
    }
}

/* ===============================================
   FIX 6: Login/Cadastro - Cards full width
   =============================================== */
@media (max-width: 768px) {
    /* Container de login/cadastro */
    div[style*="display: flex"][style*="align-items: center"][style*="min-height: 60vh"] {
        padding: 2rem 1rem !important;
    }

    /* Card de login */
    div[style*="display: flex"] > div[style*="max-width: 500px"],
    div[style*="display: flex"] > div[style*="max-width: 600px"] {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ===============================================
   FIX 7: Footer - Seções em coluna
   =============================================== */
@media (max-width: 768px) {
    .footer-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 2.5rem !important;
    }

    .footer-section {
        text-align: left !important;
    }
}

/* ===============================================
   FIX 8: Termos - Texto justificado remove no mobile
   =============================================== */
@media (max-width: 768px) {
    .termos-section p {
        text-align: left !important;
    }
}

/* ===============================================
   FIX 9: Tabelas - Scroll horizontal smooth
   =============================================== */
@media (max-width: 768px) {
    .table-responsive,
    div:has(> table) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
    }

    /* Mínimo width para tabelas */
    table {
        min-width: 600px !important;
    }

    /* Primeira coluna sticky */
    table th:first-child,
    table td:first-child {
        position: sticky !important;
        left: 0 !important;
        background: white !important;
        z-index: 1 !important;
        box-shadow: 2px 0 4px rgba(0,0,0,0.1) !important;
    }
}

/* ===============================================
   FIX 10: Botões - Touch friendly
   =============================================== */
@media (max-width: 768px) {
    .btn,
    button,
    a.btn {
        min-height: 44px !important; /* Apple Guidelines */
        touch-action: manipulation !important;
    }

    /* Botões pequenos também precisam ser touch-friendly */
    .btn-sm {
        min-height: 36px !important;
    }
}

/* ===============================================
   FIX 11: Inputs - Prevent zoom on iOS
   =============================================== */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important; /* Previne zoom no iOS */
    }
}

/* ===============================================
   FIX 12: Imagens - Sempre responsivas
   =============================================== */
@media (max-width: 768px) {
    img:not([style*="object-fit: cover"]) {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ===============================================
   FIX 13: Modal/Overlay - Full screen no mobile
   =============================================== */
@media (max-width: 768px) {
    div[style*="position: fixed"][style*="z-index"] {
        padding: 0 !important;
    }

    /* Conteúdo do modal */
    div[style*="position: fixed"] > div[style*="background"] {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
}

/* ===============================================
   FIX 14: Overflow - Nunca horizontal
   =============================================== */
@media (max-width: 768px) {
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Força box-sizing em tudo */
    *,
    *::before,
    *::after {
        box-sizing: border-box !important;
    }
}

/* ===============================================
   FIX 15: Spacing - Mais compacto no mobile
   =============================================== */
@media (max-width: 768px) {
    .section,
    section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}