/*
 Theme Name:    Electro Child
 Theme URI:     https://themeforest.net/item/electro-electronics-store-woocommerce-theme/15720624
 Description:   This is the child theme of Electro
 Author:        MadrasThemes
 Author URI:    https://madrasthemes.com/
 Template:      electro
 Version:       3.2.3
 License:       GNU General Public License v2 or later
 License URI:   http://www.gnu.org/licenses/gpl-2.0.html
 Tags:          light, dark, two-columns, right-sidebar, responsive-layout
 Text Domain:   electro-child
*/

/* 
   === Estilos para el botón de filtro "En stock" en YITH === 
   Este estilo afecta el botón de filtro de productos "En stock" del plugin YITH.
   Ajusta el tamaño de fuente, color del texto y aplica negrita.
*/
a.yith-wcan-instock-button {
  font-size: 18px; /* Tamaño de fuente */
  color: #82C342; /* Color de texto (verde) */
  font-weight: bold; /* Texto en negrita */
  /* Puedes agregar otros estilos personalizados si lo deseas */
}

/* 
   === Estilos generales para campos de formulario en la edición de cuenta === 
   Estos estilos se aplican a los campos de entrada (texto, email, y contraseña)
   y a las etiquetas en el formulario de edición de cuenta de WooCommerce.
   Mejoran la apariencia visual de los campos con fondo, borde y padding.
*/
.woocommerce-EditAccountForm input[type="text"],
.woocommerce-EditAccountForm input[type="email"],
.woocommerce-EditAccountForm input[type="password"],
.woocommerce-EditAccountForm label {
    display: block;
    width: 100%; /* Hace que los campos ocupen todo el ancho disponible */
    background-color: #f5f5f5; /* Color de fondo gris claro */
    border: 1px solid #ddd; /* Borde suave alrededor del campo */
    padding: 10px; /* Espaciado interno */
    margin-bottom: 10px; /* Espaciado entre los campos */
    border-radius: 5px; /* Bordes redondeados */
    font-size: 14px; /* Tamaño de la fuente */
    color: #333; /* Color del texto */
}

/* 
   === Estilos específicos para las etiquetas en los formularios === 
   Ajusta las etiquetas en el formulario de edición de cuenta.
   Hace el texto de las etiquetas más grande y en negrita.
*/
.woocommerce-EditAccountForm label {
    font-weight: bold; /* Hace que las etiquetas sean en negrita */
    color: #333; /* Color del texto de la etiqueta */
    margin-top: 15px; /* Espaciado superior para separar de otros elementos */
    font-size: 16px; /* Tamaño de la fuente de las etiquetas */
}

/* 
   === Estilos para agrupar campos como Domicilio en una misma fila === 
   Este estilo organiza campos específicos en filas horizontales.
   Usa flexbox para alinear los elementos y permite envolverlos si no caben.
*/
.woocommerce-EditAccountForm .form-row-wide {
    display: flex; /* Activa flexbox para organizar los campos en fila */
    flex-wrap: wrap; /* Permite que los elementos se ajusten en varias filas si es necesario */
    gap: 10px; /* Espaciado entre los campos */
}

.woocommerce-EditAccountForm .form-row-first,
.woocommerce-EditAccountForm .form-row-last,
.woocommerce-EditAccountForm .form-row-wide .form-row {
    flex: 1; /* Hace que cada campo ocupe el mismo espacio disponible */
    min-width: 150px; /* Establece un ancho mínimo para cada campo */
}

/* 
   === Estilos para el botón "Guardar cambios" en el formulario de edición de cuenta === 
   Define el estilo del botón "Guardar cambios" con colores, padding y bordes.
   También cambia el color de fondo cuando el usuario pasa el cursor por encima.
*/
.woocommerce-EditAccountForm .woocommerce-Button {
    display: inline-block;
    margin-top: 20px; /* Espaciado superior para separar del resto del formulario */
    padding: 10px 20px; /* Padding interno del botón */
    background-color: #007cba; /* Color de fondo del botón */
    color: #fff; /* Color del texto del botón (blanco) */
    border: none; /* Sin borde adicional */
    border-radius: 5px; /* Bordes redondeados para un estilo moderno */
    text-align: center;
    font-weight: bold; /* Texto en negrita */
}

/* 
   === Efecto hover para el botón "Guardar cambios" === 
   Cambia el color de fondo cuando el usuario pasa el cursor sobre el botón.
*/
.woocommerce-EditAccountForm .woocommerce-Button:hover {
    background-color: #005a8b; /* Color de fondo en hover (azul más oscuro) */
}