/* Styles definition here
/* Estilos para el contenedor principal del formulario */
/* Estilos para el contenedor principal del formulario */
#fbuilder {
    /* Fondo del formulario */
    background-color: #ecf0ff; /* Color de fondo del formulario (gris claro) [14, 15] */
    /* background-image: url('URL_DE_SU_IMAGEN_DE_FONDO.jpg'); */ /* Opcional: imagen de fondo [15, 16] */
    /* background-repeat: no-repeat; */ /* Controla si la imagen de fondo se repite [17] */
    /* background-size: cover; */ /* Ajusta la imagen para cubrir el área del elemento */

    /* Dimensiones del formulario */
    width: 100%; /* Ancho del formulario (por ejemplo, 80% del contenedor padre) [18] */
    /* max-width: 700px; */ /* Opcional: ancho máximo */
    height: auto; /* Altura del formulario (ajuste automático según el contenido) [18] */
    /* min-height: 500px; */ /* Opcional: altura mínima */

    /* Espaciado y bordes del formulario */
    padding: 10px; /* Espacio interno entre el contenido y el borde del formulario [18, 19] */
    margin: 10px auto; /* Centra el formulario y añade margen externo [18, 20] */
    border: 1px solid #ccc; /* Borde del formulario [17, 21] */
    border-radius: 8px; /* Bordes redondeados [22, 23] */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para profundidad [24, 25] */
}

/* Estilos para los títulos y descripciones del formulario */
#fbuilder h1,
#fbuilder h2,
#fbuilder h3 {
    font-family: 'Montserrat', sans-serif; /* Familia de la fuente [26, 27] */
    color: #333333; /* Color de la fuente (gris oscuro) [15, 28] */
    font-size: 28px; /* Tamaño de la fuente [27, 29] */
    text-align: center; /* Alineación del texto [15] */
    margin-bottom: 5px; /* Margen inferior */
}

/* Estilos para las etiquetas de los campos (labels) */
#fbuilder label {
/*    display: none !important;   ' !important ' asegura que estos estilos anulen otros */ 
	font-family: 'Open Sans', sans-serif; /* Familia de la fuente [26, 27] xxxxxxxxx*/
    color: #555555; /* Color de la fuente (gris medio) [15, 28] */
    font-size: 16px; /* Tamaño de la fuente [27, 29] */
    font-weight: bold; /* Grosor de la fuente [27] */
    margin-bottom: 5px; /* Margen inferior */
    display: block; /* Asegura que la etiqueta esté en su propia línea */
}

/* Estilos para los campos de entrada de texto, número, correo electrónico, etc. */
#fbuilder input[type="text"] ,
#fbuilder input[type="number"],
#fbuilder input[type="email"],
#fbuilder input[type="password"],
#fbuilder input[type="tel"],
#fbuilder textarea,
#fbuilder select {
/* xxxxxxxxxxxxxxxxxxxxxxx  */
 
    place-content: 
	padding: 1px 1px !important; /* Reduce el padding superior/inferior (6px) para hacerlos más delgados */
    height: auto !important;     /* Permite que la altura se ajuste al contenido y al padding */
    line-height: normal !important; /* Ayuda a controlar la altura de la línea de texto dentro del campo */

	
    font-family: 'Open Sans', sans-serif; /* Familia de la fuente [26, 27] */
    color: #333333; /* Color de la fuente [15, 28] */
    font-size: 16px; /* Tamaño de la fuente [27, 29] */
    width: calc(100% - 22px); /* Ancho del campo (ajustado por padding y borde) */
 /*   padding: 10px;  Relleno interno del campo [18, 19] */
    margin-bottom: 15px; /* Margen inferior [18, 20] xxxxxxx*/
    border: 1px solid #cccccc; /* Borde del campo [17, 21] */
    border-radius: 8px; /* Bordes redondeados [22, 23] */
    box-sizing: border-box; /* Asegura que el padding y el borde se incluyan en el ancho */
/**/
}

/* Estilos para los campos de tipo checkbox y radio button (el texto de la opción) */
#fbuilder input[type="checkbox"] + label,
#fbuilder input[type="radio"] + label {
    font-family: 'Open Sans', sans-serif; /* Familia de la fuente [26, 27] */
    color: #444444; /* Color de la fuente [15, 28] */
    font-size: 15px; /* Tamaño de la fuente [27, 29] */
    font-weight: normal; /* Elimina la negrita heredada de las etiquetas */
    display: inline-block; /* Permite que el texto siga al checkbox/radio */
    margin-left: 5px;
    margin-right: 15px;
}

/* Estilos para los botones (por ejemplo, el botón de envío) */
#fbuilder .pbSubmit { /* La clase real del botón puede variar, inspeccione su formulario */
    background-color: #0073aa; /* Color de fondo del botón (azul de WordPress) [22] */
    color: #ffffff; /* Color de la fuente del botón (blanco) [22] */
    font-family: 'Arial', sans-serif; /* Familia de la fuente [26, 27] */
    font-size: 18px; /* Tamaño de la fuente [27, 29] */
    padding: 12px 25px; /* Relleno del botón [22] */
    border: none; /* Elimina el borde del botón [22] */
    border-radius: 5px; /* Bordes redondeados [22] */
    cursor: pointer; /* Cambia el cursor al pasar por encima */
    transition: background-color 0.3s ease; /* Transición suave para el color de fondo [30] */
}

/* Estilo al pasar el mouse por encima del botón */
#fbuilder .pbSubmit:hover {
    background-color: #005177; /* Color de fondo más oscuro al pasar el mouse [30] */
}

/* Estilos para mensajes de error o validación */
#fbuilder .field-error { /* Clase común para mensajes de error, puede variar */
    font-family: 'Verdana', sans-serif;
    color: #ff0000; /* Color rojo para errores */
    font-size: 13px;
    margin-top: -10px; /* Ajusta el margen superior para acercarlo al campo */
    margin-bottom: 10px;
}

/* Estilos para el calendario (fechas/horas disponibles/reservadas) - puede requerir selectores más específicos */
/* Tenga en cuenta que el plugin comercial permite cambiar estilos de las fechas según disponibilidad [31] */
#fbuilder .cp_ahb_calendar_container { /* Selector general para el contenedor del calendario */
    font-family: 'Roboto', sans-serif; /* Ejemplo de fuente para el calendario */
}

#fbuilder .cp_ahb_calendar_day { /* Selector para los días individuales en el calendario */
    color: #0000ff; /* Color del texto de los días */
}

#fbuilder .cp_ahb_calendar_day.booked { /* Selector para días completamente reservados */
    background-color: #ffdddd; /* Fondo para días reservados */
    color: #880000;
}

#fbuilder .cp_ahb_calendar_day.available { /* Selector para días con disponibilidad */
    background-color: #ddffdd; /* Fondo para días disponibles */
    color: #008800;
}

/* Para aplicar estilos a campos específicos si ha usado "Additional CSS Class" en la configuración del campo [12, 32] */
/* Por ejemplo, si a un campo le asignó la clase 'mi-campo-personalizado' */
.mi-campo-personalizado {
    border: 2px dashed purple !important;
    /* Otras propiedades */
}
/* ----------------------------------------------  */

/* 1. Ocultar las etiquetas existentes de los campos del formulario */
/* Esto asume que las etiquetas son elementos <label> asociados a los campos de entrada. */
/* Si no ve el cambio, es posible que deba inspeccionar el HTML de su formulario */
/* para encontrar un selector más específico para las etiquetas de sus campos de formulario. */
/* Por ejemplo, si sus campos están dentro de un div con la clase 'my-custom-form', podría ser: */
/* .my-custom-form label { display: none !important; } */
 /*
.cp_app_hour_booking label {
    display: none !important; ' !important ' asegura que estos estilos anulen otros */
}