/* =========================================
   ADAMIAUTO | FORMULARIO DE CITA PREVIA
   Appointment Hour Booking
   ========================================= */

/* VARIABLES Y CONTENEDOR */
#fbuilder {
    --adamiauto-blue: #0a8eea;
    --adamiauto-blue-hover: #0874c1;
    --adamiauto-dark: #20252b;
    --adamiauto-text: #353b42;
    --adamiauto-muted: #737b84;
    --adamiauto-border: #dfe3e8;
    --adamiauto-bg: #ffffff;
    --adamiauto-light: #f6f7f9;

    max-width: 100%;
    margin: 0 auto;
    padding: 30px;
    background: var(--adamiauto-bg);
    border: 1px solid #e8eaed;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(20, 30, 40, 0.07);
    color: var(--adamiauto-text);
    font-family: inherit;
    box-sizing: border-box;
}

#fbuilder *,
#fbuilder *::before,
#fbuilder *::after {
    box-sizing: border-box;
}

/* TÍTULO Y DESCRIPCIÓN */
#fbuilder .fform h1 {
    margin: 0 0 12px;
    color: var(--adamiauto-dark);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.5px;
}

#fbuilder .fform > span {
    display: block;
    margin-bottom: 28px;
    color: var(--adamiauto-muted);
    font-size: 15px;
    line-height: 1.7;
}

#fbuilder .slots {
	margin:9px;
}

#fbuilder .ui-datepicker {
        margin: 0 auto !important;
    display: block !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}
#fbuilder .ui-datepicker-header{
	    background-color: #003b99!important;
}

#fbuilder .ui-datepicker th {
    text-transform: uppercase;
    padding: 5px 0;
    color: #040303 !important;
    text-align: center;
    text-shadow: none!important;
    filter: dropshadow(color=#fff, offx=1, offy=0);
}
/* ETIQUETAS DE LOS CAMPOS */
#fbuilder label {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--adamiauto-dark);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

#fbuilder label .r {
    color: var(--adamiauto-blue);
    font-weight: 800;
}


/* CAMPOS DE TEXTO, EMAIL, TELÉFONO, ETC. */
#fbuilder input[type="text"],
#fbuilder input[type="email"],
#fbuilder input[type="tel"],
#fbuilder input[type="number"],
#fbuilder input[type="date"],
#fbuilder input[type="password"],
#fbuilder textarea,
#fbuilder select {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--adamiauto-border);
    border-radius: 7px;
    background-color: #ffffff;
    color: var(--adamiauto-dark);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    box-shadow: none;
    transition: border-color 0.2s ease,
                box-shadow 0.2s ease,
                background-color 0.2s ease;
}

/* PLACEHOLDER */
#fbuilder input::placeholder,
#fbuilder textarea::placeholder {
    color: #9aa1a9;
    opacity: 1;
}

/* EFECTO AL SELECCIONAR UN CAMPO */
#fbuilder input[type="text"]:focus,
#fbuilder input[type="email"]:focus,
#fbuilder input[type="tel"]:focus,
#fbuilder input[type="number"]:focus,
#fbuilder input[type="date"]:focus,
#fbuilder input[type="password"]:focus,
#fbuilder textarea:focus,
#fbuilder select:focus {
    outline: none;
    border-color: var(--adamiauto-blue);
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.10);
}

/* ÁREA DE TEXTO */
#fbuilder textarea {
    min-height: 120px;
    resize: vertical;
}

/* LISTAS DESPLEGABLES */
#fbuilder select {
    cursor: pointer;
}

/* SEPARACIÓN ENTRE CAMPOS */
#fbuilder .fields,
#fbuilder .field {
    margin-bottom: 7px;
}

/* SECCIONES DEL FORMULARIO */
#fbuilder .section_breaks {
    margin: 30px 0 20px;
}

#fbuilder .section_breaks .section_break {
    padding: 0 0 12px;
    border: 0;
    border-bottom: 2px solid var(--adamiauto-blue);
    border-radius: 0;
}

#fbuilder .section_breaks label {
    margin-bottom: 8px;
    color: var(--adamiauto-dark);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.4;
}

#fbuilder .section_breaks span {
    display: block;
    margin-top: 5px;
    color: var(--adamiauto-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* TEXTO DE INSTRUCCIONES */
#fbuilder .comment_area label {
    color: var(--adamiauto-dark);
    font-size: 16px;
    font-weight: 700;
}

#fbuilder .comment_area span {
    color: var(--adamiauto-muted);
    font-size: 14px;
    line-height: 1.7;
}

/* CASILLAS DE VERIFICACIÓN Y OPCIONES */
#fbuilder input[type="checkbox"],
#fbuilder input[type="radio"] {
    accent-color: var(--adamiauto-blue);
    cursor: pointer;
}

#fbuilder input[type="checkbox"] + label,
#fbuilder input[type="radio"] + label {
    margin-left: 5px;
    font-weight: 400;
    cursor: pointer;
}

/* CALENDARIO: FECHA SELECCIONADA Y ELEMENTOS ACTIVOS */
#fbuilder .ui-datepicker td a.ui-state-active,
#fbuilder .ui-datepicker td a.ui-state-highlight {
    border-color: var(--adamiauto-blue);
    background: var(--adamiauto-blue);
    color: #ffffff;
}

#fbuilder .ui-datepicker .ui-datepicker-header {
    border: 0;
    border-radius: 6px;
    background: var(--adamiauto-dark);
    color: #ffffff;
}

#fbuilder .ui-datepicker .ui-state-hover {
    border-color: var(--adamiauto-blue);
}

/* OCULTAR FORMATO DE FECHA Y MÁSCARA TELEFÓNICA */
#fbuilder .dformat,
#fbuilder .uh_phone .l {
    display: none;
}

/* BOTÓN PRINCIPAL: SOLICITAR CITA */
#fbuilder .pbSubmit {
    display: inline-block;
    min-height: 50px;
    padding: 15px 30px;
    border: 2px solid var(--adamiauto-blue);
    border-radius: 6px;
    background: var(--adamiauto-blue);
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(227, 6, 19, 0.16);
    transition: background 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease,
                transform 0.2s ease;
}

#fbuilder .pbSubmit:hover {
    border-color: var(--adamiauto-blue-hover);
    background: var(--adamiauto-blue-hover);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(227, 6, 19, 0.22);
    transform: translateY(-1px);
}

#fbuilder .pbSubmit:focus-visible {
    outline: 3px solid rgba(227, 6, 19, 0.3);
    outline-offset: 3px;
}

/* BOTONES SIGUIENTE Y ANTERIOR */
#fbuilder .pbNext,
#fbuilder .pbPrevious {
    min-height: 44px;
    padding: 12px 22px;
    border: 1px solid var(--adamiauto-border);
    border-radius: 6px;
    background: var(--adamiauto-light);
    color: var(--adamiauto-dark);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

#fbuilder .pbNext:hover,
#fbuilder .pbPrevious:hover {
    border-color: var(--adamiauto-blue);
    background: var(--adamiauto-blue);
    color: #ffffff;
}

/* MENSAJES DE ERROR */
#fbuilder .error,
#fbuilder .uh_error {
    color: #c62828;
    font-size: 13px;
    font-weight: 600;
}

/* MENSAJES DE VALIDACIÓN */
#fbuilder input:invalid:focus,
#fbuilder select:invalid:focus,
#fbuilder textarea:invalid:focus {
    border-color: #c62828;
}

/* ENLACES Y AVISOS */
#fbuilder a {
    color: var(--adamiauto-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

#fbuilder a:hover {
    color: var(--adamiauto-blue-hover);
}

/* DISEÑO RESPONSIVE PARA MÓVILES */
@media (max-width: 600px) {
    #fbuilder {
        padding: 20px 16px;
        border-radius: 10px;
    }

    #fbuilder .fform h1 {
        font-size: 25px;
    }

    #fbuilder .fform > span {
        margin-bottom: 22px;
        font-size: 14px;
    }

    #fbuilder .section_breaks label {
        font-size: 18px;
    }

    #fbuilder input[type="text"],
    #fbuilder input[type="email"],
    #fbuilder input[type="tel"],
    #fbuilder input[type="number"],
    #fbuilder input[type="date"],
    #fbuilder input[type="password"],
    #fbuilder textarea,
    #fbuilder select {
        min-height: 46px;
        font-size: 16px;
    }

    #fbuilder .pbSubmit {
        display: block;
        width: 100%;
        padding: 15px 18px;
    }

    #fbuilder .pbNext,
    #fbuilder .pbPrevious {
        margin-bottom: 8px;
    }
}