/* ===== MOBILE SIMPLE - REGRAS BÁSICAS ===== */

/* Prevenir scroll horizontal */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

img, video {
    max-width: 100%;
    height: auto;
}

/* ===== CORREÇÕES MOBILE - APENAS PARA ECRÃS PEQUENOS ===== */

@media (max-width: 768px) {
    /* Prevenir scroll horizontal no mobile */
    html, body {
        overflow-x: hidden;
        width: 100%;
    }
    
    /* Prevenir scroll da página quando modal está aberto */
    body.modal-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }
    
    /* Esconder hero e menu quando modal está aberto */
    body.modal-open .header,
    body.modal-open .navbar,
    body.modal-open .nav-container,
    body.modal-open .hero,
    body.modal-open .hero-container,
    body.modal-open .hero-content,
    body.modal-open .hero-buttons {
        display: none !important;
    }
    
    /* Esconder menu hamburguer quando modal está aberto - REGRAS FORTES */
    body.modal-open .nav-toggle,
    body.modal-open #nav-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
    }
    
    body.modal-open .nav-menu,
    body.modal-open #nav-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
    }
    
    .container {
        max-width: 100%;
        padding: 0 1rem;
        margin: 0 auto;
    }
    
    /* Flexbox responsivo */
    .row, .nav-container, .hero-buttons, .footer-content {
        display: flex;
        flex-wrap: wrap;
    }
    
    /* Grids responsivos - apenas quando necessário */
    .precos-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
    }
    
    /* Marcas com flexbox para melhor centralização */
    .marcas-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    
    /* Grids específicos para mobile */
    .blog-grid, .faq-grid, .info-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Centralizar botões nos info-cards em mobile */
    .info-card button {
        margin: 0 auto;
        display: block;
        width: fit-content;
    }
    
    /* Centralizar especificamente o botão Check Availability em mobile */
    .info-card .btn-whatsapp-small {
        margin: 0 auto !important;
        display: block !important;
        width: fit-content;
        text-align: center;
    }
    
    /* Tabs responsivas */
    .tabs, .tabs-internas {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .tab-link, .tab-interna-link {
        flex: 1;
        min-width: 120px;
        text-align: center;
    }
    
    /* Hamburger menu - apenas para mobile */
    @media (max-width: 768px) {
        .nav-menu {
            flex-direction: column;
            background: white;
            position: absolute;
            top: 100%;
            right: 0;
            width: 100%;
            display: none;
        }
    }

    @media (max-width: 768px) {
        .nav-menu.active {
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
            pointer-events: auto !important;
            position: absolute !important;
            z-index: 10001 !important;
        }
    }

    .nav-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: relative !important;
        z-index: 10002 !important;
    }
    
    /* Hero responsivo - manter layout original */
    .hero {
        /* Remover forçar altura e centralização */
    }
    
    /* Prevenir overflow apenas quando necessário */
    .hero-container, .hero-content {
        max-width: 100%;
    }
    
    /* Tabelas responsivas */
    .dryclean-table {
        overflow-x: auto;
        max-width: 100%;
    }
    
    /* Modais responsivos */
    .modal {
        overflow: hidden !important;
        position: fixed !important;
    }
    
    .modal-content {
        max-height: 90vh;
        overflow-y: auto;
        overflow-x: hidden;
        position: relative;
    }
    
    .modal-body {
        max-height: calc(90vh - 120px);
        overflow-y: auto;
        overflow-x: hidden;
        position: relative;
    }
}

@media (max-width: 480px) {
    /* Ajustes para ecrãs muito pequenos */
    .precos-grid, .steps-grid, .servicos-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .marcas-grid {
        gap: 0.75rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 1rem;
    }
    
    .hero-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
    
    /* Esconder hero e menu quando modal está aberto em ecrãs pequenos */
    body.modal-open .header,
    body.modal-open .navbar,
    body.modal-open .nav-container,
    body.modal-open .hero,
    body.modal-open .hero-container,
    body.modal-open .hero-content,
    body.modal-open .hero-buttons {
        display: none !important;
    }
    
    /* Esconder menu hamburguer quando modal está aberto em ecrãs pequenos - REGRAS FORTES */
    body.modal-open .nav-toggle,
    body.modal-open #nav-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
    }
    
    body.modal-open .nav-menu,
    body.modal-open #nav-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
    }
    
    /* Esconder logo quando modal está aberto em ecrãs pequenos */
    body.modal-open .nav-logo {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        z-index: -1 !important;
    }
    
    /* Modais em ecrãs muito pequenos */
    .modal {
        overflow: hidden !important;
    }
    
    .modal-content {
        max-height: 95vh;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    .modal-body {
        max-height: calc(95vh - 100px);
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
}