/* ==========================================================================
   SIDEBAR E MODAL (PC / DESKTOP) - VERSÃO FINAL COM VARIÁVEIS
   Arquivo: /assets/css/pc/sidebar.css
   ========================================================================== */

@media (min-width: 1025px) {

    /* --- 1. BARRA LATERAL (FIXA NA ESQUERDA) --- */
    .site-sidebar {
        position: fixed;
        left: 0;
        top: 90px; /* Ajuste conforme altura do seu header */
        bottom: 0;
        
        width: 100%;
        max-width: 185px; /* Largura fixa */
        height: 100vh;
        
        background-color: var(--cor-quase-preto, #1C1C1C); 
        
        box-shadow: 0px 32px 34px 0px rgba(0, 0, 0, 0.14), 
                    0px 2px 4px 0px rgba(0, 0, 0, 0.16), 
                    0px 12px 24px 0px rgba(0, 0, 0, 0.02);
        
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 2000;
        transition: top 0.3s ease;
        
        padding-top: 40px;
        padding-bottom: 20px;
        border-right: none; 
    }

    body.scrolled-header .site-sidebar { top: 70px; }

    .sidebar-menu { 
        display: flex; 
        flex-direction: column; 
        width: 100%; 
        gap: 15px; 
        padding: 0 15px; 
        box-sizing: border-box;
    }

    /* --- BOTÕES DO MENU --- */
    .sidebar-btn {
        background: transparent; 
        border: none; 
        cursor: pointer; 
        width: 100%; 
        padding: 20px 10px;
        border-radius: 12px;
        
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center;
        gap: 12px; 
        
        color: #9E9E9E; /* Cinza inativo */
        transition: all 0.3s ease;
        position: relative;
    }

    .sidebar-btn:hover, 
    .sidebar-btn.active-btn { 
        background-color: rgba(255, 255, 255, 0.05); 
        color: var(--cor-branco, #ffffff); 
        transform: translateY(-2px);
    }
    
    /* Indicador Lateral Ativo (Padrão Azul) */
    .sidebar-btn.active-btn::before {
        content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
        height: 50%; width: 4px; 
        background: var(--cor-principal, #0067ab); 
        border-radius: 0 4px 4px 0; 
        box-shadow: 0 0 10px var(--cor-principal, #0067ab);
    }

    /* --- OVERRIDE: BOTÃO SERVIÇOS VERDE (Sidebar) --- */
    #btn-servicos.active-btn::before {
        background: #28a745; 
        box-shadow: 0 0 10px #28a745;
    }

    /* Container do Ícone */
    .sidebar-btn .icon-box {
        width: 60px; height: 60px; 
        display: flex; align-items: center; justify-content: center; 
        transition: transform 0.3s ease; 
        background: rgba(255,255,255,0.03); 
        border-radius: 12px;
        overflow: hidden; 
    }
    .sidebar-btn:hover .icon-box { transform: scale(1.1); background: rgba(255,255,255,0.08); }

    /* Imagem do Ícone */
    .sidebar-btn .icon-box img {
        width: 65%; height: 65%; object-fit: contain; 
        filter: grayscale(100%) brightness(1.5); opacity: 0.8; transition: all 0.3s;
    }
    .sidebar-btn:hover .icon-box img, .sidebar-btn.active-btn .icon-box img { 
        filter: grayscale(0%) brightness(1); opacity: 1; 
    }

    /* ESTILO DO ÍCONE GENÉRICO (FALLBACK) */
    .fallback-icon {
        width: 100%; height: 100%;
        display: flex; align-items: center; justify-content: center;
        font-size: 24px;
        color: rgba(255,255,255,0.5);
    }
    
    /* Hover Padrão (Azul) */
    .sidebar-btn:hover .fallback-icon, 
    .sidebar-btn.active-btn .fallback-icon {
        color: var(--cor-principal, #0067ab);
        text-shadow: 0 0 10px var(--cor-principal, #0067ab);
    }

    /* --- OVERRIDE: BOTÃO SERVIÇOS VERDE (Ícone e Texto) --- */
    #btn-servicos:hover .fallback-icon, 
    #btn-servicos.active-btn .fallback-icon {
        color: #28a745; 
        text-shadow: 0 0 10px #28a745;
    }

    .sidebar-btn span { font-size: 13px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; }


    /* =========================================
       2. GAVETA DE PRODUTOS (DRAWER)
       ========================================= */
    .product-drawer {
        position: fixed; 
        top: 90px; 
        bottom: 0; 
        left: 185px; /* Começa depois da sidebar */
        width: calc(100% - 185px); 
        
        background: var(--cor-fundo-site, #f4f6f8); 
        z-index: 1900;
        
        transform: translateX(-105%); 
        transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.4s ease;
        padding: 50px 80px; 
        display: flex; 
        flex-direction: column; 
        opacity: 0;
        box-shadow: inset 10px 0 20px rgba(0,0,0,0.02);
    }
    
    body.scrolled-header .product-drawer { top: 70px; }
    
    .product-drawer.active { transform: translateX(0); opacity: 1; }

    /* Botão Fechar Gaveta */
    .close-btn-circle {
        position: absolute; top: 50px; right: 80px; width: 45px; height: 45px;
        background: var(--cor-branco, #fff); 
        color: var(--cor-preto, #000); 
        border: 1px solid rgba(0,0,0,0.1); 
        border-radius: 50%; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center;
        transition: 0.3s; z-index: 10; box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }
    .close-btn-circle:hover { 
        background: var(--cor-preto, #000); 
        color: var(--cor-branco, #fff); 
        transform: rotate(90deg) scale(1.1); 
    }

    .drawer-scroll-content { flex: 1; overflow-y: auto; padding-right: 20px; padding-bottom: 50px; scrollbar-width: thin; }
    
    /* =========================================
       GRID DE PRODUTOS
       ========================================= */
    .drawer-grid { 
        display: grid; 
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); 
        gap: 40px; 
        padding-bottom: 20px;
    }
    
    .drawer-item { 
        background: var(--cor-branco, #ffffff); 
        border-radius: 20px; 
        padding: 30px 25px; 
        display: flex; flex-direction: column; align-items: center; text-align: center; 
        cursor: pointer; 
        transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1); 
        border: 1px solid transparent; 
        box-shadow: 0 10px 40px rgba(0,0,0,0.04); 
        position: relative; overflow: hidden; height: 100%; 
    }

    .drawer-item:hover { 
        transform: translateY(-10px); 
        box-shadow: 0 20px 50px rgba(0, 103, 171, 0.15); 
        border-color: rgba(0, 103, 171, 0.1);
    }

    .drawer-item img { 
        width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; 
        margin-bottom: 25px; transition: transform 0.4s ease; background-color: transparent; 
    }
    
    .drawer-item:hover img { transform: scale(1.08); filter: blur(2px); opacity: 0.8; }

    .drawer-item::after {
        content: 'VER DETALHES';
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -20%) scale(0.9);
        background: rgba(0, 103, 171, 0.95); 
        color: white; padding: 10px 20px; border-radius: 30px; font-size: 11px; font-weight: 800;
        text-transform: uppercase; letter-spacing: 0.5px; opacity: 0;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1); pointer-events: none;
    }

    .drawer-item:hover::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    
    .drawer-item span { 
        font-size: 15px; color: #444; font-weight: 700; line-height: 1.5; 
        transition: color 0.3s; margin-top: auto; padding: 0 10px;
    }
    .drawer-item:hover span { color: var(--cor-principal, #0067ab); }
    
    body.drawer-open::after { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 1800; pointer-events: none; backdrop-filter: blur(5px); animation: fadeInOverlay 0.5s ease forwards; }
    @keyframes fadeInOverlay { from { opacity: 0; } to { opacity: 1; } }


   /* ==========================================================================
   3. HEADER PROMOCIONAL
   ========================================================================== */
    .drawer-promo-header {
        display: flex; flex-direction: row; justify-content: space-between; align-items: center;
        background: var(--cor-branco, #ffffff); 
        border-radius: 24px; padding: 40px 50px; margin-bottom: 50px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.03);
        position: relative; overflow: hidden; transition: all 0.4s ease;
    }

    .drawer-promo-header:hover {
        box-shadow: 0 30px 60px rgba(0,0,0,0.08); border-color: rgba(0, 103, 171, 0.1);
    }

    .promo-text-col { flex: 1; z-index: 2; padding-right: 40px; animation: fadeInUp 0.6s ease-out; }

    .promo-text-col h2.drawer-main-title { 
        margin-bottom: 18px; font-size: 38px; line-height: 1.1; 
        color: #1a1a1a; font-weight: 800; letter-spacing: -1px;
    }

    .promo-text-col p { 
        font-size: 16px; color: #555; margin-bottom: 30px; max-width: 420px; line-height: 1.6;
    }

    /* BOTÃO DOWNLOAD AZUL */
    .btn-banner-download {
        display: inline-flex; align-items: center; gap: 12px; padding: 14px 32px;
        background-color: #f8f9fa; color: var(--cor-principal, #0067ab); 
        border: 1px solid rgba(0, 103, 171, 0.2); border-radius: 12px; 
        font-size: 14px; font-weight: 800; text-transform: uppercase; text-decoration: none; 
        transition: all 0.3s; box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    }

    .btn-banner-download:hover { 
        background-color: var(--cor-principal, #0067ab); color: white; 
        transform: translateY(-4px) scale(1.02); box-shadow: 0 10px 20px rgba(0, 103, 171, 0.25);
        border-color: var(--cor-principal, #0067ab);
    }

    .btn-banner-download i { font-size: 16px; transition: transform 0.3s; }
    .btn-banner-download:hover i { transform: translateY(2px); }

    .promo-img-col { 
        flex: 1.1; display: flex; justify-content: flex-end; align-items: center; 
        position: relative; height: 240px; 
    }

    .promo-img-col img { 
        max-height: 100%; width: auto; object-fit: contain; 
        filter: drop-shadow(0 15px 30px rgba(0,0,0,0.1)); 
        transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); z-index: 1;
    }

    .drawer-promo-header:hover .promo-img-col img { transform: scale(1.05) rotate(-1deg); }

    .header-nav-arrow {
        width: 44px; height: 44px; background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.5);
        color: #333; font-size: 14px; box-shadow: 0 8px 16px rgba(0,0,0,0.08);
    }


    /* ======================================================
       4. ESTILO ESPECIAL: GAVETA SERVIÇOS (HERO) - VERDE
       ====================================================== */
    #panel-servicos .drawer-promo-header {
        min-height: 500px; padding: 60px 80px; 
        background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
        margin-top: 20px; align-items: center;
    }
    #panel-servicos .promo-text-col { flex: 1; padding-right: 40px; }
    #panel-servicos .drawer-main-title { font-size: 48px; font-weight: 900; margin-bottom: 25px; letter-spacing: -1.5px; }
    #panel-servicos .promo-text-col p { font-size: 18px; line-height: 1.6; max-width: 550px; margin-bottom: 35px; color: #555; }
    
    /* BOTÃO SERVIÇOS AGORA VERDE */
    #panel-servicos .btn-banner-download {
        padding: 18px 40px; font-size: 15px; border-radius: 8px;
        background-color: #28a745; 
        color: white; 
        box-shadow: 0 10px 25px rgba(40, 167, 69, 0.25);
        border: none;
    }
    #panel-servicos .btn-banner-download:hover { 
        background-color: #218838; 
        transform: translateY(-3px); 
        box-shadow: 0 15px 35px rgba(40, 167, 69, 0.35); 
    }
    
    #panel-servicos .promo-img-col { height: 400px; flex: 1.3; }
    #panel-servicos .promo-img-col img { max-height: 100%; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.15)); }


    /* ==========================================================================
    5. MODAL DE PRODUTO (PC / DESKTOP)
    ========================================================================== */
    .modal-overlay {
        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.85); z-index: 9999;
        display: flex; align-items: center; justify-content: center;
        opacity: 0; visibility: hidden; transition: all 0.4s ease;
        padding: 20px; backdrop-filter: blur(5px);
    }
    .modal-overlay.active { opacity: 1; visibility: visible; }

    #product-modal .modal-content {
        background: var(--cor-branco, #fff); border-radius: 16px; overflow: hidden; position: relative;
        box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5);
        width: 100%; max-width: 1280px; height: 720px; max-height: 95vh; 
        display: flex; flex-direction: column;
        transform: scale(0.98); transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    }
    #product-modal.active .modal-content { transform: scale(1); }

    #product-modal .modal-body { display: flex; flex-direction: row; height: 100%; width: 100%; }

    #product-modal .modal-close {
        position: absolute; top: 25px; right: 25px; background: #f5f5f5;
        border: none; border-radius: 50%; width: 40px; height: 40px;
        font-size: 20px; cursor: pointer; color: #333; z-index: 50;
        display: flex; align-items: center; justify-content: center; transition: 0.3s;
    }
    #product-modal .modal-close:hover { background: #ff4d4d; color: white; transform: rotate(90deg); }

    #product-modal .modal-gallery-area {
        flex: 1.8; background: #fff; padding: 40px; 
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        position: relative; border-right: 1px solid #f0f0f0;
    }

    #product-modal .main-img-box {
        position: relative; display: flex; align-items: center; justify-content: center;
        width: 100%; height: 100%; overflow: visible; 
    }
    #product-modal .main-img-box img { width: 100%; height: 100%; object-fit: contain; display: block; }

    #product-modal .nav-arrow {
        position: absolute; top: 50%; transform: translateY(-50%);
        background: rgba(255,255,255,0.9); border: 1px solid #eee;
        color: #333; font-size: 18px; width: 50px; height: 50px;
        border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
        transition: 0.2s; box-shadow: 0 4px 10px rgba(0,0,0,0.1); z-index: 10;
    }
    #product-modal .nav-arrow:hover { background: var(--cor-principal, #0067ab); color: white; border-color: var(--cor-principal, #0067ab); }
    #product-modal .nav-arrow.prev { left: -10px; } 
    #product-modal .nav-arrow.next { right: -10px; } 

    #product-modal .thumbs-row {
        position: absolute; bottom: 20px; display: flex; gap: 10px; height: 50px; 
        justify-content: center; z-index: 10; padding: 5px 10px;
        background: rgba(255,255,255,0.8); border-radius: 30px; backdrop-filter: blur(4px);
    }
    #product-modal .thumb-img {
        width: 60px; height: 40px; object-fit: contain; border-radius: 4px;
        cursor: pointer; opacity: 0.5; border: 1px solid #ddd; background: #fff; transition: all 0.2s;
    }
    #product-modal .thumb-img.active, #product-modal .thumb-img:hover { opacity: 1; border-color: var(--cor-principal, #0067ab); transform: scale(1.1); }

    #product-modal .modal-info {
        flex: 1; padding: 60px 40px; display: flex; flex-direction: column;
        background: #f9f9f9; overflow-y: hidden;
    }
    #product-modal .modal-info h3 { 
        font-size: 32px; color: var(--cor-preto, #000); margin-top: 0; margin-bottom: 25px; 
        line-height: 1.1; font-weight: 800; letter-spacing: -0.5px;
    }
    #product-modal .modal-desc {
        font-size: 15px; color: #666; line-height: 1.8;
        overflow-y: auto; flex-grow: 1; margin-bottom: 30px; padding-right: 10px;
        scrollbar-width: thin; scrollbar-color: #ccc transparent;
    }

    #product-modal .btn-whatsapp-modal {
        background: #25D366; color: white; padding: 18px; text-align: center; border-radius: 8px;
        font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px;
        display: flex; align-items: center; justify-content: center; gap: 10px;
        transition: all 0.3s; text-decoration: none; box-shadow: 0 8px 20px rgba(37,211,102,0.2);
        margin-top: auto; flex-shrink: 0;
    }
    #product-modal .btn-whatsapp-modal:hover { background: #1ebc59; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(37,211,102,0.3); }


    /* =========================================
       6. MODAL GATE (DOWNLOADS/SIDEBAR)
       ========================================= */
    #modal-gate.modal-container {
        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.85); backdrop-filter: blur(5px);
        z-index: 99999; display: flex; align-items: center; justify-content: center;
        opacity: 0; visibility: hidden; transition: 0.3s;
    }
    #modal-gate[style*="display: flex"] { opacity: 1; visibility: visible; } /* Hack de visibilidade */

    /* Conteúdo do Formulário */
    .modal-content.form-content {
        max-width: 480px; padding: 40px; text-align: center; 
        background: var(--cor-branco, #fff); border-radius: 16px;
        position: relative; box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    }

    /* Botão Fechar Custom */
    .fechar-modal-btn-2 {
        position: absolute; top: 15px; right: 15px;
        width: 36px; height: 36px; border: none; background: #f0f0f0; border-radius: 50%;
        cursor: pointer; display: flex; align-items: center; justify-content: center;
    }
    .fechar-modal-btn-2::before, .fechar-modal-btn-2::after {
        content: ''; position: absolute; width: 18px; height: 2px; background: #555;
        transform: rotate(45deg);
    }
    .fechar-modal-btn-2::after { transform: rotate(-45deg); }
    .fechar-modal-btn-2:hover { background: #e0e0e0; }

    .form-header h3 { font-size: 24px; color: var(--cor-principal, #0067ab); margin-bottom: 10px; font-weight: 800; }
    .form-header p { font-size: 14px; color: #666; margin-bottom: 25px; line-height: 1.5; }

    /* Inputs do Gate */
    #modal-gate .form-group { margin-bottom: 15px; }
    #modal-gate input[type="text"], 
    #modal-gate input[type="email"] {
        width: 100%; padding: 14px 15px; margin-bottom: 0;
        border: 1px solid #ddd; border-radius: 8px;
        font-size: 15px; background: #f9f9f9; box-sizing: border-box;
    }
    #modal-gate input:focus { border-color: var(--cor-principal, #0067ab); background: #fff; outline: none; }

    /* Checkbox Gate */
    .checkbox-wrapper {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        margin-bottom: 25px; font-size: 13px; color: #666;
    }
    .checkbox-wrapper a { color: var(--cor-principal, #0067ab); text-decoration: none; font-weight: 700; }

    /* Botão Enviar Gate */
    .btn-enviar-form {
        width: 100%; padding: 16px; background: var(--cor-principal, #0067ab);
        color: #fff; border: none; border-radius: 8px;
        font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
        cursor: pointer; transition: 0.3s; box-shadow: 0 5px 15px rgba(0, 103, 171, 0.2);
    }
    .btn-enviar-form:hover { background: #00558a; transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0, 103, 171, 0.3); }
}