/* ==========================================================================
   MODULE: HEADER - HOME SPEED V2 (CLONE ESTRUTURAL + OTIMIZAÇÕES)
   Sem alteração de cores, fundos ou fontes originais do site.
   ========================================================================== */

/* 1. Ajuste de Largura da Área de Busca (+20%) no Desktop */
html body .cyber-search-area {
    max-width: 850px !important;
    overflow: visible !important;
}

html body .cyber-search-container,
html body .cyber-search-form {
    overflow: visible !important;
}

/* 2. Cantos Arredondados do Campo de Busca (16px) e Efeito Neon de Hover / Focus */
html body .cyber-search-area input.search-field {
    border-radius: 50px !important;
    height: 52px !important;
    font-size: 16px !important;
    padding-right: 42px !important; /* Espaço para a lupa da direita */
    transition: all 0.25s ease !important;
    border: 1px solid rgba(0, 229, 255, 0.15) !important;
}

html body .cyber-search-area input.search-field:hover,
html body .cyber-search-area input.search-field:focus {
    border-color: #00E5FF !important;
    box-shadow: 0 0 1px rgba(0, 229, 255, 0.2), 0 0 12px rgba(0, 229, 255, 0.6), 0 0 24px rgba(0, 229, 255, 0.25) !important;
    outline: none !important;
}

/* Estilo do Placeholder Nativo */
html body .cyber-search-area input.search-field::placeholder {
    color: #475569 !important;
    opacity: 1 !important;
}

/* 3. Lupa de Busca (Posicionamento e Ajuste) */
.cyber-search-icon {
    position: absolute !important;
    right: 22px !important;
    width: 22px !important;
    height: 22px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    display: flex !important;
    align-items: center !important;
    z-index: 10 !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s ease !important;
}

.cyber-search-input-real:focus ~ .cyber-search-icon {
    opacity: 1 !important;
}

/* 4. Redução Proporcional das Ações da Direita no Desktop (Para acomodar a busca ampliada) */
@media (min-width: 1024px) {
    /* Ajuste do espaçamento do container de ações */
    html body .cyber-actions-area {
        gap: 12px !important; /* Reduzido proporcionalmente */
    }

    /* Ajuste de tamanho dos botões de ação (pills) */
    html body .cyber-actions-area a.cyber-action-link {
        padding: 0 10px !important; /* Reduzido de 15px para 10px */
        height: 38px !important; /* Reduzido de 42px para 38px */
        gap: 6px !important;
    }

    /* Ajuste de tamanho da fonte das ações */
    html body .cyber-actions-area a.cyber-action-link .action-label {
        font-size: 11px !important; /* Reduzido de 13px para 11px */
    }

    /* Redução de 20% dos ícones SVG internos */
    html body .cyber-actions-area a.cyber-action-link svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Ajuste proporcional do badge do carrinho */
    html body .cyber-actions-area a.cyber-action-link.cart-link .action-icon .cart-badge {
        width: 15px !important;
        height: 15px !important;
        font-size: 8.5px !important;
        top: -6px !important;
        right: -8px !important;
    }
}

/* 5. Ajustes Responsivos para o Campo de Busca no Mobile */
@media (max-width: 1023px) {
    html body .cyber-search-area {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
        margin: 8px 0 0 0 !important; /* Espaçamento vertical ajustado */
    }

    html body .cyber-search-container input.search-field {
        border-radius: 50px !important;
        padding-left: 36px !important; /* Espaço para a lupa da esquerda */
        padding-right: 45px !important;
    }

    /* Garante que a lupa da direita (nativa) apareça */
    html body .cyber-search-icon {
        display: flex !important;
        right: 15px !important;
    }
}




/* FIX PARA O HEADER MOBILE (LIBERAR QUEBRA DE LINHA E TRAZER BUSCA/ACOES DE VOLTA) */
@media (max-width: 1023px) {
    html body .cyber-header-top {
        flex-wrap: wrap !important;
    }
}


/* === NATIVE BROWSER FIXES === */
/* Esconde a lupa que os temas costumam injetar no background-image */
html body .cyber-search-container input.search-field {
    background-image: none !important;
}

/* Remove o ícone de "X" nativo do navegador (WebKit/Safari/Chrome) para evitar botão X duplicado */
html body .cyber-search-container input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none !important;
}


/* Hides native WebKit cancel button robustly (simple selector) */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance:none !important;
  display:none !important;
}

/* Hides native IE/Edge cancel button */
input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Garante que qualquer botão extra do tema na área de busca não sobreponha a lupa */
html body .cyber-search-container .search-reset,
html body .cyber-search-container .wd-search-close {
    right: 40px !important; /* Move o X do tema um pouco para a esquerda da lupa */
}