/* ===== 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;
        top: 0 !important;
        left: 0 !important;
    }

    /* Garantir que o body retorne ao normal quando modal é fechado */
    body:not(.modal-open) {
        position: static !important;
        overflow: auto !important;
        width: auto !important;
        top: auto !important;
        left: auto !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;
    }

    /* Reorganizar header da seção marcas em mobile */
    .marcas-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
        margin-bottom: 2rem !important;
    }

    .marcas h3 {
        text-align: center !important;
        width: 100% !important;
        margin-bottom: 0 !important;
        order: 2 !important;
    }

    .google-review-widget {
        position: static !important;
        order: 1 !important;
        margin: 0 auto !important;
    }

    /* Restaurar margin-top original da seção marcas em mobile */
    .marcas {
        margin-top: -3rem !important;
    }

    /* 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;
    }

    /* Garantir que o menu hamburguer funcione quando ativo, mesmo com modais abertos */
    .nav-menu.active~.nav-toggle,
    .nav-toggle:has(+ .nav-menu.active) {
        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 */
    /* 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;
    }
}