/* assets/css/mobile.css
   Estilos Exclusivos para Dispositivos Móveis (App-Like Experience)
*/

@media (max-width: 1024px) {
    
    /* --- 1. HEADER & MENU HAMBÚRGUER --- */
    
    /* Header Fixo e Transparente (Glassmorphism) */
    .site-header-premium {
        position: fixed !important;
        top: 0; left: 0; width: 100%;
        background: rgba(15, 23, 42, 0.95) !important; /* Fundo Dark quase sólido */
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(255,255,255,0.05);
        z-index: 9000; /* Acima de tudo */
        height: 70px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Espaço para o conteúdo não subir atrás do header */
    body { padding-top: 70px; padding-bottom: 80px; /* Espaço pra Bottom Bar */ }

    /* Esconde elementos desktop */
    .desktop-only, .nav-premium, .header-actions { display: none !important; }

    /* Logo Ajustada */
    .img-logo-fix { height: 32px; width: auto; }

    /* Botão Hambúrguer Animado */
    .mobile-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 28px;
        height: 20px;
        cursor: pointer;
        z-index: 9002;
    }
    .mobile-toggle span {
        display: block;
        height: 2px;
        width: 100%;
        background: #fff;
        border-radius: 2px;
        transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Estado Aberto (X) */
    .menu-aberto .mobile-toggle span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); background: #10b981; }
    .menu-aberto .mobile-toggle span:nth-child(2) { opacity: 0; }
    .menu-aberto .mobile-toggle span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); background: #10b981; }

    /* O Menu Overlay (Slide Down) */
    .main-nav {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 70px; /* Logo abaixo do header */
        left: 0;
        width: 100%;
        height: calc(100vh - 70px);
        background: #111827;
        padding: 40px 20px;
        transform: translateY(-100%); /* Escondido pra cima */
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 8999;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
    }

    .site-header.menu-aberto .main-nav {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .main-nav ul {
        flex-direction: column;
        width: 100%;
        gap: 0;
    }

    .main-nav li {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        opacity: 0;
        transform: translateY(20px);
        transition: 0.3s;
    }
    
    /* Animação em cascata dos itens */
    .site-header.menu-aberto .main-nav li {
        opacity: 1;
        transform: translateY(0);
    }
    .site-header.menu-aberto .main-nav li:nth-child(1) { transition-delay: 0.1s; }
    .site-header.menu-aberto .main-nav li:nth-child(2) { transition-delay: 0.15s; }
    .site-header.menu-aberto .main-nav li:nth-child(3) { transition-delay: 0.2s; }
    .site-header.menu-aberto .main-nav li:nth-child(4) { transition-delay: 0.25s; }

    .main-nav a {
        display: block;
        padding: 20px 0;
        font-size: 18px;
        color: #e5e7eb;
        font-weight: 600;
    }
    
    /* Botões Extras no Menu */
    .menu-extras {
        margin-top: 40px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
        width: 100%;
        opacity: 0;
        transition: 0.3s 0.3s; /* Delay maior */
    }
    .site-header.menu-aberto .menu-extras { opacity: 1; }

    .btn-menu-action {
        width: 100%;
        padding: 16px;
        border-radius: 12px;
        font-weight: 700;
        text-align: center;
        display: flex; justify-content: center; align-items: center; gap: 10px;
        font-size: 15px;
    }
    .btn-menu-whatsapp { background: #059669; color: #fff !important; border: none; }
    .btn-menu-login { background: rgba(255,255,255,0.05); color: #fff !important; border: 1px solid rgba(255,255,255,0.1); }


    /* --- 2. BOTTOM NAVIGATION BAR (APP FEEL) --- */
    .app-bottom-nav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        bottom: 0; left: 0; width: 100%;
        height: 65px; /* Altura confortável para o polegar */
        background: #fff; /* Contraste com o header dark */
        box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
        border-top: 1px solid #f1f5f9;
        z-index: 9999;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom); /* Fix iPhone X+ */
    }

    .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        text-decoration: none;
        color: #64748b;
        font-size: 10px;
        font-weight: 500;
        gap: 4px;
        position: relative;
    }

    .nav-item .dashicons {
        font-size: 24px;
        width: 24px; height: 24px;
        transition: 0.2s;
    }

    .nav-item.active { color: #059669; font-weight: 700; }
    .nav-item.active .dashicons { transform: translateY(-2px); }

    /* Botão Central (WhatsApp Float - AJUSTADO) */
    .nav-item.center-highlight { position: relative; overflow: visible; }
    
    .zap-float-btn {
        width: 56px; height: 56px;
        background: #25D366; /* Verde Zap */
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        color: #fff;
        font-size: 28px;
        position: absolute;
        top: -15px; /* AJUSTADO: De -28px para -15px (mais baixo) */
        left: 50%; transform: translateX(-50%);
        box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
        border: 4px solid #fff; /* Borda branca para recorte */
        z-index: 10;
        transition: 0.2s;
    }
    .zap-float-btn:active { transform: translateX(-50%) scale(0.95); }
    .zap-float-btn .dashicons { font-size: 28px; width: 28px; height: 28px; }


    /* --- 3. REFINAMENTOS GERAIS DE UI MOBILE --- */
    
    /* Títulos Maiores */
    .hero-title-premium { font-size: 36px !important; }
    .vehicle-title { font-size: 26px !important; }
    
    /* Preço Gigante */
    .price-tag { font-size: 36px !important; }
    
    /* Botões mais altos (44px min) */
    .btn-hero-primary, .btn-hero-outline, 
    .btn-whatsapp-full, .btn-simular { 
        min-height: 50px; 
    }

    /* Cards de Veículos (Lista Limpa) */
    .veiculos-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
    .card-premium { 
        box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
        border: 1px solid #e5e7eb !important;
    }
}