/* ===============================================
   Mobile-First Responsive CSS
   Android, iOS, Tablets, HD, Full HD
   =============================================== */

/* Mobile Header Menu */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: block !important;
    }

    .header-container {
        position: relative;
    }

    .nav-links {
        position: fixed;
        top: 72px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 72px);
        background: var(--anthracite);
        flex-direction: column;
        align-items: flex-start !important;
        padding: 2rem;
        gap: 0 !important;
        transition: left 0.3s ease;
        z-index: 999;
        overflow-y: auto;
    }

    .nav-links.mobile-active {
        left: 0;
    }

    .nav-link {
        width: 100%;
        font-size: 1.125rem;
        padding: 1rem 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        display: block;
    }

    .nav-link.hide-mobile {
        display: block !important;
    }

    .btn-primary,
    .btn-outline {
        width: 100%;
        justify-content: center;
        margin-top: 1rem;
    }
}

/* Banner Carousel Mobile */
@media (max-width: 768px) {
    /* Fix para hero não ficar atrás do header sticky */
    main {
        padding-top: 0 !important;
        margin-top: 72px !important;
    }

    .banner-carousel {
        margin-top: -72px !important;
        position: relative !important;
    }

    .banner-carousel .slides-container {
        height: auto !important;
    }

    /* Altura do banner maior para mobile - adiciona altura do header */
    .banner-carousel .slide > div {
        height: auto !important;
        min-height: 100vh !important;
        position: relative !important;
        display: flex !important;
        align-items: flex-end !important;
        padding-top: 0 !important;
    }

    .banner-carousel .slide > div > img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        z-index: 1 !important;
    }

    .banner-carousel .slide > div > div[style*="background: linear-gradient"] {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
    }

    .banner-carousel .container {
        padding: 1rem !important;
        position: relative !important;
        z-index: 2 !important;
    }

    /* Overlay - garantir que o conteúdo apareça */
    .banner-carousel [style*="position: absolute"][style*="bottom: 0"] {
        position: relative !important;
        width: 100% !important;
        padding: 2rem 0 !important;
        background: transparent !important;
        z-index: 2 !important;
        min-height: auto !important;
    }

    /* Adicionar background escuro apenas embaixo do conteúdo */
    .banner-carousel .slide > div::after {
        content: '' !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 60% !important;
        background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0.4) 60%, transparent 100%) !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }

    /* Content wrapper mobile */
    .banner-carousel [style*="display: flex"][style*="justify-content: space-between"][style*="align-items: flex-end"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
        padding-bottom: 2rem !important;
        padding-top: 1rem !important;
    }

    /* Date and badge row */
    .banner-carousel [style*="display: flex"][style*="align-items: center"][style*="gap: 2rem"] {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        margin-bottom: 1rem !important;
    }

    /* Date box smaller but visible */
    .banner-carousel [style*="min-width: 80px"] {
        min-width: 55px !important;
        padding: 0.625rem !important;
        flex-shrink: 0 !important;
    }

    .banner-carousel [style*="min-width: 80px"] div:first-child {
        font-size: 1.5rem !important;
        line-height: 1 !important;
    }

    .banner-carousel [style*="min-width: 80px"] div:nth-child(2) {
        font-size: 0.75rem !important;
        line-height: 1 !important;
    }

    /* Event type badge */
    .banner-carousel [style*="background: rgba(255,215,0,0.2)"] {
        font-size: 0.75rem !important;
        padding: 0.5rem 0.75rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Title */
    .banner-carousel h2 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.5rem !important;
    }

    /* Location and description */
    .banner-carousel p {
        font-size: 0.8125rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.5rem !important;
    }

    /* Hide long description on mobile */
    .banner-carousel p[style*="max-width: 600px"] {
        display: none !important;
    }

    /* Price section mobile - stack it */
    .banner-carousel [style*="text-align: right"] {
        text-align: left !important;
        width: 100% !important;
    }

    .banner-carousel [style*="text-align: right"] > div[style*="font-size: 2rem"] {
        font-size: 1.375rem !important;
    }

    .banner-carousel [style*="text-align: right"] > div[style*="font-size: 0.875rem"] {
        font-size: 0.75rem !important;
    }

    /* Vagas disponíveis */
    .banner-carousel [style*="margin-bottom: 1.5rem"] {
        margin-bottom: 0.75rem !important;
        font-size: 0.8125rem !important;
    }

    /* Button */
    .banner-carousel .btn {
        font-size: 0.875rem !important;
        padding: 0.75rem 1.25rem !important;
        width: 100% !important;
        justify-content: center !important;
        margin-top: 0.25rem !important;
    }

    /* Left content area */
    .banner-carousel [style*="flex: 1"] {
        margin-bottom: 0.5rem !important;
    }

    /* Navigation arrows smaller and repositioned */
    .banner-carousel button[onclick*="changeSlide"] {
        width: 40px !important;
        height: 40px !important;
        font-size: 0.875rem !important;
        top: 40% !important;
    }

    /* Dots navigation */
    .banner-carousel [style*="position: absolute"][style*="display: flex"][style*="gap: 0.5rem"] {
        bottom: 0.75rem !important;
    }
}

/* Signature Section Mobile */
@media (max-width: 768px) {
    .signature-script {
        font-size: 3rem !important;
    }

    .section h2 {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
    }

    .section img[alt="Amparo Ride"] {
        height: 70px !important;
    }

    .signature-text p {
        font-size: 1.5rem !important;
    }

    /* Icons smaller */
    .fas.fa-mountain,
    .fas.fa-bicycle,
    .fas.fa-hiking {
        font-size: 1rem !important;
    }
}

/* Event Cards Mobile */
@media (max-width: 768px) {
    .event-card-compact {
        margin-bottom: 1rem;
    }

    .event-card-compact-title {
        font-size: 1.125rem !important;
    }

    .event-card-compact-price {
        font-size: 1.25rem !important;
    }
}

/* Benefits Section Mobile */
@media (max-width: 768px) {
    .benefit-card {
        text-align: center;
        padding: 1.5rem 1rem !important;
    }

    .benefit-icon {
        font-size: 2rem !important;
    }

    .benefit-title {
        font-size: 1.25rem !important;
    }
}

/* CTA Section Mobile */
@media (max-width: 768px) {
    .section .btn {
        width: 100%;
        margin-bottom: 0.75rem;
    }

    .section > div > div {
        flex-direction: column !important;
    }
}

/* Event Detail Page Mobile */
@media (max-width: 768px) {
    .event-header {
        padding: 2rem 1rem !important;
    }

    .event-header h1 {
        font-size: 1.75rem !important;
    }

    .event-info-grid {
        grid-template-columns: 1fr !important;
    }

    .price-card {
        position: relative !important;
        top: 0 !important;
    }
}

/* Smaller phones */
@media (max-width: 480px) {
    .signature-script {
        font-size: 2.5rem !important;
    }

    .section h2 {
        font-size: 1.25rem !important;
    }

    .section img[alt="Amparo Ride"] {
        height: 60px !important;
    }

    .signature-text p {
        font-size: 1.25rem !important;
        gap: 1rem !important;
    }

    /* Carousel smaller on tiny phones */
    .banner-carousel .slide > a > div {
        min-height: 450px !important;
    }

    .banner-carousel h2 {
        font-size: 1.25rem !important;
    }

    .banner-carousel p {
        font-size: 0.8125rem !important;
    }

    .banner-carousel .btn {
        font-size: 0.8125rem !important;
        padding: 0.625rem 1rem !important;
    }

    /* Navigation arrows even smaller */
    .banner-carousel button[onclick*="changeSlide"] {
        width: 35px !important;
        height: 35px !important;
        font-size: 0.75rem !important;
    }
}

/* Tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .events-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .benefits-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* HD Screens */
@media (min-width: 1025px) and (max-width: 1440px) {
    .container {
        max-width: 1200px;
    }
}

/* Full HD Screens */
@media (min-width: 1441px) {
    .container {
        max-width: 1400px;
    }

    .banner-carousel .slide > a > div {
        height: 500px !important;
    }
}

/* ===============================================
   Páginas de Autenticação - Login/Cadastro
   =============================================== */
@media (max-width: 768px) {
    /* Login/Register cards */
    .card[style*="max-width: 500px"],
    .card[style*="max-width: 600px"] {
        max-width: 100% !important;
        margin: 1rem !important;
        padding: 1.5rem !important;
    }

    /* Formulários */
    form input,
    form select,
    form textarea {
        font-size: 16px !important; /* Previne zoom no iOS */
    }

    /* Grid de campos lado a lado */
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="display: grid"][style*="gap: 1rem"] {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Botões de formulário */
    form .btn,
    form button[type="submit"] {
        width: 100% !important;
        padding: 0.875rem !important;
    }
}

/* ===============================================
   Área do Participante
   =============================================== */
@media (max-width: 768px) {
    /* Container da área */
    div[style*="max-width: 900px"] {
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Header da área do participante */
    div[style*="display: flex"][style*="justify-content: space-between"][style*="align-items: center"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }

    /* Menu de navegação */
    div[style*="display: flex"][style*="gap: 0.5rem"][style*="border-top"] {
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
    }

    /* Botões do menu */
    .btn-outline.btn-sm {
        font-size: 0.75rem !important;
        padding: 0.5rem 0.75rem !important;
    }

    /* Event cards na área */
    .event-card {
        flex-direction: column !important;
    }

    .event-card > div[style*="display: flex"] {
        flex-direction: column !important;
    }

    /* Coluna de data do evento */
    .event-card > div > div[style*="min-width: 100px"] {
        min-width: 100% !important;
        padding: 1rem !important;
        border-right: none !important;
        border-bottom: 1px solid #DBDAE3 !important;
    }

    /* Info do evento */
    .event-card div[style*="display: flex"][style*="gap: 2rem"] {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    /* Badges de status */
    .event-card div[style*="display: flex"][style*="gap: 0.75rem"] {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    /* Filtros de eventos */
    div[style*="display: flex"][style*="gap: 0.5rem"][style*="margin-bottom"] button {
        font-size: 0.75rem !important;
        padding: 0.5rem 0.75rem !important;
    }
}

/* ===============================================
   Página de Checkout
   =============================================== */
@media (max-width: 768px) {
    /* Grid do checkout */
    div[style*="display: grid"][style*="grid-template-columns"][style*="gap: 2rem"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    /* Sidebar de resumo */
    div[style*="position: sticky"],
    div[style*="position: -webkit-sticky"] {
        position: relative !important;
        top: 0 !important;
        order: -1 !important; /* Move resumo para cima */
    }

    /* Quantidade de ingressos */
    div[style*="display: flex"][style*="align-items: center"][style*="gap: 1rem"] {
        flex-wrap: wrap !important;
    }

    /* Campos de tamanho de kit */
    div[style*="display: grid"][style*="grid-template-columns: repeat(3, 1fr)"],
    div[style*="display: grid"][style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===============================================
   Página de Pagamento
   =============================================== */
@media (max-width: 768px) {
    /* QR Code Container */
    div[style*="text-align: center"] canvas {
        max-width: 250px !important;
    }

    /* Código PIX copiável */
    div[style*="font-family: monospace"] {
        font-size: 0.75rem !important;
        word-break: break-all !important;
        padding: 0.75rem !important;
    }

    /* Upload de comprovante */
    input[type="file"] {
        font-size: 14px !important;
    }

    /* Instruções de pagamento */
    ol li, ul li {
        font-size: 0.875rem !important;
        line-height: 1.6 !important;
    }
}

/* ===============================================
   Página de Termos
   =============================================== */
@media (max-width: 768px) {
    .termos-container {
        padding: 1rem !important;
    }

    .termos-header h1 {
        font-size: 1.75rem !important;
    }

    .termos-content {
        padding: 1.5rem !important;
    }

    .termos-section h2 {
        font-size: 1.25rem !important;
    }

    .termos-section h3 {
        font-size: 1rem !important;
    }

    .termos-section p,
    .termos-section li {
        font-size: 0.875rem !important;
        text-align: left !important;
    }
}

/* ===============================================
   Página de Ingresso (Ticket)
   =============================================== */
@media (max-width: 768px) {
    /* Container do ticket */
    div[style*="max-width: 600px"] {
        max-width: 100% !important;
        padding: 1rem !important;
    }

    /* Card do ticket */
    .card[style*="border: 2px solid"] {
        margin: 0 !important;
    }

    /* QR Code */
    #qrcode {
        max-width: 200px !important;
        height: auto !important;
    }

    /* Ações (botões) */
    div[style*="display: flex"][style*="gap: 1rem"][style*="margin-top"] {
        flex-direction: column !important;
    }

    .btn-block {
        width: 100% !important;
    }

    /* Mapa */
    iframe[src*="google.com/maps"] {
        height: 250px !important;
    }
}

/* ===============================================
   Footer Responsivo
   =============================================== */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

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

    .footer-section > div {
        align-items: center !important;
    }

    .footer-bottom {
        text-align: center !important;
        padding: 1.5rem 1rem !important;
    }

    .footer-bottom p {
        font-size: 0.875rem !important;
    }
}

/* ===============================================
   Tabelas Responsivas (Geral)
   =============================================== */
@media (max-width: 768px) {
    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    th, td {
        padding: 0.75rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    th {
        position: sticky !important;
        left: 0 !important;
        background: var(--gray-50) !important;
        z-index: 1 !important;
    }
}

/* ===============================================
   Smaller Phones (< 480px)
   =============================================== */
@media (max-width: 480px) {
    /* Reduzir ainda mais padding em telas pequenas */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .card {
        padding: 1rem !important;
        margin: 0.5rem !important;
    }

    /* Títulos menores */
    h1 {
        font-size: 1.5rem !important;
    }

    h2 {
        font-size: 1.25rem !important;
    }

    h3 {
        font-size: 1.125rem !important;
    }

    /* Botões menores */
    .btn {
        font-size: 0.875rem !important;
        padding: 0.75rem 1rem !important;
    }

    .btn-sm {
        font-size: 0.75rem !important;
        padding: 0.5rem 0.75rem !important;
    }

    /* Stats menores */
    .stat-value {
        font-size: 1.5rem !important;
    }

    .stat-label {
        font-size: 0.75rem !important;
    }
}

/* ===============================================
   Páginas de Eventos (Lista e Detalhes)
   =============================================== */
@media (max-width: 768px) {
    /* Grid de eventos */
    .events-grid,
    div[style*="display: grid"][style*="grid-template-columns: repeat(2, 1fr)"],
    div[style*="display: grid"][style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
    }

    /* Event card */
    .event-card-compact {
        margin-bottom: 1rem !important;
    }

    /* Event header */
    .event-header {
        padding: 1.5rem 1rem !important;
    }

    .event-header h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    /* Event info grid */
    .event-info-grid,
    div[style*="display: grid"][style*="gap: 2rem"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    /* Price card sticky remove */
    .price-card,
    div[style*="position: sticky"][style*="top: 2rem"] {
        position: relative !important;
        top: 0 !important;
        margin-bottom: 1.5rem !important;
    }

    /* Parceiros section */
    .partners-grid,
    div[style*="display: grid"][style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    /* Botões de ação do evento */
    div[style*="display: flex"][style*="gap: 1rem"] .btn {
        flex: 1 !important;
        min-width: 0 !important;
    }
}

/* ===============================================
   Página 404 e Erros
   =============================================== */
@media (max-width: 768px) {
    div[style*="text-align: center"][style*="padding: 4rem"] {
        padding: 2rem 1rem !important;
    }

    div[style*="font-size: 8rem"] {
        font-size: 4rem !important;
    }

    div[style*="font-size: 2rem"] {
        font-size: 1.5rem !important;
    }
}

/* ===============================================
   Seção de Benefícios
   =============================================== */
@media (max-width: 768px) {
    .benefits-grid,
    div[style*="display: grid"][style*="gap: 2rem"] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .benefit-card {
        padding: 1.5rem !important;
        text-align: center !important;
    }

    .benefit-icon {
        font-size: 2.5rem !important;
        margin-bottom: 1rem !important;
    }

    .benefit-title {
        font-size: 1.125rem !important;
    }
}

/* ===============================================
   Newsletter e Formulários
   =============================================== */
@media (max-width: 768px) {
    /* Newsletter footer */
    .footer-section form {
        width: 100% !important;
    }

    .footer-section input[type="email"] {
        width: 100% !important;
        font-size: 16px !important;
    }

    .footer-section button[type="submit"] {
        width: 100% !important;
        padding: 0.875rem !important;
    }

    /* Social links */
    .footer-social {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    .social-link {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.125rem !important;
    }
}

/* ===============================================
   Modais e Popups (se houver)
   =============================================== */
@media (max-width: 768px) {
    .modal,
    div[style*="position: fixed"][style*="z-index: 999"] {
        padding: 1rem !important;
    }

    .modal-content,
    div[style*="max-width: 600px"][style*="background: white"] {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 1.5rem !important;
        border-radius: 8px !important;
    }
}

/* ===============================================
   Imagens Responsivas
   =============================================== */
@media (max-width: 768px) {
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Imagens de eventos */
    img[style*="width: 100%"],
    img[style*="height: 300px"] {
        height: auto !important;
        min-height: 200px !important;
        object-fit: cover !important;
    }

    /* Logos */
    img[alt*="logo"],
    img[alt*="Logo"] {
        max-height: 60px !important;
    }
}

/* ===============================================
   Badges e Tags
   =============================================== */
@media (max-width: 768px) {
    .badge,
    span[style*="padding: 0.25rem"],
    span[style*="font-size: 0.75rem"] {
        font-size: 0.7rem !important;
        padding: 0.375rem 0.625rem !important;
        white-space: nowrap !important;
    }

    /* Status badges */
    span[style*="background: #E6F4EA"],
    span[style*="background: #FFF8E1"],
    span[style*="background: #FFEBEE"] {
        font-size: 0.7rem !important;
        padding: 0.375rem 0.5rem !important;
    }
}

/* ===============================================
   Alertas e Notificações
   =============================================== */
@media (max-width: 768px) {
    .alert,
    div[class*="alert"] {
        padding: 0.875rem !important;
        font-size: 0.875rem !important;
        border-radius: 4px !important;
        margin: 0.5rem !important;
    }

    .alert-icon {
        font-size: 1rem !important;
    }

    .alert-content {
        font-size: 0.875rem !important;
    }
}

/* ===============================================
   Ajustes Gerais de Espaçamento
   =============================================== */
@media (max-width: 768px) {
    /* Seções */
    .section,
    section {
        padding: 2rem 1rem !important;
    }

    /* Margens */
    .mt-4, .my-4 {
        margin-top: 1rem !important;
    }

    .mb-4, .my-4 {
        margin-bottom: 1rem !important;
    }

    /* Padding */
    .p-4 {
        padding: 1rem !important;
    }

    /* Containers específicos */
    div[style*="padding: 4rem"],
    div[style*="padding: 3rem"] {
        padding: 1.5rem 1rem !important;
    }

    div[style*="padding: 2rem"] {
        padding: 1rem !important;
    }

    /* Max-width containers */
    div[style*="max-width: 1200px"],
    div[style*="max-width: 1000px"],
    div[style*="max-width: 800px"] {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ===============================================
   Typography Mobile
   =============================================== */
@media (max-width: 768px) {
    /* Headings responsivos */
    h1, .h1 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }

    h2, .h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    h3, .h3 {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
    }

    h4, .h4 {
        font-size: 1.125rem !important;
        line-height: 1.4 !important;
    }

    h5, .h5, h6, .h6 {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    /* Paragraphs */
    p {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
    }

    /* Links */
    a {
        word-break: break-word !important;
    }
}

/* ===============================================
   Prevent Horizontal Scroll
   =============================================== */
@media (max-width: 768px) {
    body {
        overflow-x: hidden !important;
    }

    .container,
    main,
    section,
    div {
        max-width: 100vw !important;
    }

    * {
        box-sizing: border-box !important;
    }

    /* Fix for elements that might overflow */
    pre,
    code {
        overflow-x: auto !important;
        word-wrap: break-word !important;
    }
}