/* 
 * Estilos personalizados para la barra de búsqueda
 * Reemplaza el borde naranja con un estilo más acorde a los colores personalizados
 */

/* Estilo para la barra de búsqueda principal */
.search-style-1 form {
    position: relative;
    border: none !important;
    box-shadow: none !important;
}

.search-style-1 input {
    font-size: 14px;
    height: 45px;
    color: #253D4E;
    border-radius: 30px;
    padding: 0 20px;
    border: 1px solid #f1f1f1 !important;
    background-color: #f1f1f1;
    transition: all 0.3s ease;
    width: 100%;
}

.search-style-1 input:focus {
    border: 1px solid var(--accent-color, #4361ee) !important;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(67, 97, 238, 0.1);
}

/* Estilo para la barra de búsqueda móvil */
.mobile-search input {
    border: 1px solid #f1f1f1 !important;
    border-radius: 30px;
    padding: 0 20px;
    background-color: #f1f1f1;
    transition: all 0.3s ease;
}

.mobile-search input:focus {
    border: 1px solid var(--accent-color, #4361ee) !important;
    background-color: #fff;
}

.mobile-search button {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background-color: transparent;
    color: var(--accent-color, #4361ee);
}

/* Gradiente de colores en el borde de la barra de búsqueda */
.search-style-1 form::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 32px;
    background: linear-gradient(45deg, 
        var(--accent-color, #4361ee), 
        #6c5ce7, 
        #e84393, 
        #fd79a8, 
        #fdcb6e, 
        #00cec9, 
        #0984e3, 
        var(--accent-color, #4361ee)
    );
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.search-style-1 form:hover::before,
.search-style-1 form:focus-within::before {
    opacity: 1;
}

/* Estilo para el contenedor de la barra de búsqueda */
.search-style-1 {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
}