/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */


 /* Solo para pantallas de celular */
@media (max-width: 767px) {
  /* El contenedor que agrupa logo, buscador y carrito */
  .header-top .container .row {
    display: flex !important;
    flex-direction: row; /* O 'column' si quieres uno debajo de otro */
  }

  /* Selecciona el bloque del carrito (clase común en PS 1.7/8) */
  #_mobile_cart, .leo-blockcart {
    order: 1; /* Un número menor lo mueve a la izquierda, mayor a la derecha */
  }
      #header .header-nav .header-logo {
        width: 100%;       /* Asegura que el logo ocupe su fila */
        text-align: center; /* Lo centra visualmente */
        margin-bottom: 10px; /* Da espacio al buscador abajo */
    }
    #search_widget .search_widget {
        width: 100%;       /* El buscador también toma su fila */
        top: 0;            /* Resetea posiciones absolutas si las hay */
    }
}



@media (max-width: 767px) {
    #search_widget {
        display: block !important;
        width: 100% !important;
    }
    #search_widget form {
        display: flex !important;
    }

  #search_widget input[type="text"] {
        border: 1px solid #000000;
    }

    .float-xs-right.popup-title {
       display: none !important;
     }

     #cart-block {
        display: none !important;
     }
      /* Oculta el botón de buscar 
    }
  /*  #search_widget .search-widgets {
        display: none !important; /* Oculta la lupa flotante 
    }. 

    #search_widget button[type="submit"] {
        display: none !important; /* Oculta el botón de buscar 
    } */
}


/* Resaltar el borde del cuadro de búsqueda en el encabezado */
#search_widget form input[type="text"], 
.search-widget form input[type="text"],
#leo_search_block input[type="text"] {
    border: 1px solid #777777 !important; /* Grosor y color del borde (Ej: Rojo MotoMundo) */
    border-radius: 4px !important;       /* Esquinas ligeramente redondeadas */
    box-shadow: 0 0 5px rgba(255, 66, 66, 0.2) !important; /* Sutil resplandor suave */
}

/* Cambiar el comportamiento si el cliente hace clic adentro para escribir */
#search_widget form input[type="text"]:focus,
.search-widget form input[type="text"]:focus,
#leo_search_block input[type="text"]:focus {
    border-color: #333333 !important; /* El borde cambia a un tono oscuro al activarse */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15) !important;
}

/* Resaltar los campos del formulario de pago con tarjeta */
#checkout-payment-step input[type="text"],
#checkout-payment-step input[type="tel"],
#checkout-payment-step select,
.payment-form input[type="text"],
.payment-form input[type="tel"],
.payment-form select,
#payment-form input,
#payment-form select {
    border: 1px solid #777777 !important; /* Mismo borde resaltado (Rojo MotoMundo) */
    border-radius: 4px !important;
    background-color: #ffffff !important; /* Asegura fondo blanco para que contraste */
    box-shadow: 0 0 5px rgba(255, 66, 66, 0.2) !important;
}

/* Cambiar el comportamiento cuando el cliente hace clic o escribe en el campo de pago */
#checkout-payment-step input:focus,
#checkout-payment-step select:focus,
.payment-form input:focus,
.payment-form select:focus,
#payment-form input:focus,
#payment-form select:focus {
    border-color: #333333 !important; /* Cambia a tono oscuro al activarse */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15) !important;
}