/*
 * =========================================================
 * RJIT_RESERVAS - INTEGRACIÓN FRONTEND DIVI
 * Centro Veterinario El Valle
 * =========================================================
 *
 * - Componentes RJIT integrados dentro del formulario.
 * - Los controles visibles NO usan clases internas de Divi,
 *   evitando el error "Presentación inválida".
 * - Apariencia visual igualada con los campos reales de Divi.
 * - Horarios mediante display:flex, tres por fila.
 * - Estado seleccionado azul con check blanco.
 * - Iconos integrados sin solapamientos.
 */

:root {
    --rjit-primary: #0b67d1;
    --rjit-primary-dark: #084f9f;
    --rjit-primary-soft: #eef6ff;
    --rjit-border-soft: #d5ebf8;
    --rjit-text: #123d70;
    --rjit-muted: #66758a;
    --rjit-input-text: #586a82;
}

/*
 * =========================================================
 * CAMPOS TÉCNICOS REALES DE DIVI
 * =========================================================
 *
 * Estos campos existen en el formulario y son los que Divi envía:
 * - rjit_reservas_actividad
 * - rjit_reservas_dia
 * - rjit_reservas_hora
 * - rjit_reservas_token
 *
 * Se ocultan visualmente, pero no se eliminan del DOM.
 */

.rjit-hidden-field {
    display: none !important;
}

/*
 * =========================================================
 * COMPONENTES VISIBLES GENERADOS POR RJIT
 * =========================================================
 *
 * Mismo desplazamiento lateral que aplican los campos Divi.
 */

.rjit-picker-generated {
    box-sizing: border-box !important;
    clear: both !important;
    width: 100% !important;
    padding: 0 0 0 3% !important;
}

/*
 * =========================================================
 * TÍTULO "SELECCIONA TU CITA"
 * =========================================================
 */

.rjit-picker-title-field {
    display: block !important;
    float: none !important;
    clear: both !important;

    width: 100% !important;
    margin: 4px 0 20px !important;

    text-align: left !important;
}

.rjit-picker-title {
    display: flex;
    align-items: center;
    gap: 11px;

    width: 100%;
    margin: 0 !important;
    padding: 0 !important;

    color: var(--rjit-text);
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    text-align: left !important;
}

/*
 * Huella personalizada del título.
 */
.rjit-picker-title::before {
    content: "";
    display: inline-block;
    flex: 0 0 25px;

    width: 25px;
    height: 25px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.5 0 19 19' fill='%230b67d1'%3E%3Cpath d='M4.086 7.9a1.91 1.91 0 0 1-.763 2.52c-.81.285-1.782-.384-2.17-1.492a1.91 1.91 0 0 1 .762-2.521c.81-.285 1.782.384 2.171 1.492zm6.521 7.878a2.683 2.683 0 0 1-1.903-.788.996.996 0 0 0-1.408 0 2.692 2.692 0 0 1-3.807-3.807 6.377 6.377 0 0 1 9.022 0 2.692 2.692 0 0 1-1.904 4.595zM7.73 6.057c.127 1.337-.563 2.496-1.54 2.588-.977.092-1.872-.917-1.998-2.254-.127-1.336.563-2.495 1.54-2.587.977-.093 1.871.916 1.998 2.253zm.54 0c-.127 1.337.563 2.496 1.54 2.588.977.092 1.871-.917 1.998-2.254.127-1.336-.563-2.495-1.54-2.587-.977-.093-1.872.916-1.998 2.253zm3.644 1.842a1.91 1.91 0 0 0 .763 2.522c.81.284 1.782-.385 2.17-1.493a1.91 1.91 0 0 0-.762-2.521c-.81-.285-1.782.384-2.171 1.492z'/%3E%3C/svg%3E");
}

/*
 * Línea decorativa inferior.
 */
.rjit-picker-title-field::after {
    content: "";
    display: block;

    width: 34px;
    height: 2px;

    margin-top: 11px;
    background: var(--rjit-primary);
    border-radius: 4px;
}

/*
 * =========================================================
 * TIPO DE RESERVA Y DÍA
 * =========================================================
 *
 * Estos controles son visibles, pero no son campos nativos de Divi.
 * Se estilizan manualmente para que tengan el mismo aspecto.
 */

.rjit-picker-field {
    display: block !important;
    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 0 19px !important;

    text-align: left !important;
}

.rjit-picker-label {
    display: block !important;

    width: 100%;
    margin: 0 0 8px !important;
    padding: 0 !important;

    color: var(--rjit-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left !important;
}

/*
 * Apariencia común de los dos campos RJIT.
 */
.rjit-activity,
.rjit-date {
    display: block !important;
    float: none !important;

    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: 51px !important;
    min-height: 51px !important;

    margin: 0 !important;

    border: 1px solid var(--rjit-border-soft) !important;
    border-radius: 5px !important;
    background-color: #ffffff !important;

    color: var(--rjit-input-text) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;

    transition:
            border-color 0.2s ease,
            box-shadow 0.2s ease;
}

.rjit-activity:focus,
.rjit-date:focus {
    border-color: var(--rjit-primary) !important;
    box-shadow: 0 0 0 1px rgba(11, 103, 209, 0.12) !important;
    outline: none !important;
}

/*
 * Tipo de reserva:
 * estetoscopio a la izquierda y flecha azul a la derecha.
 */
.rjit-activity {
    cursor: pointer;

    padding: 0 47px 0 54px !important;

    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    background-repeat: no-repeat, no-repeat !important;
    background-position:
            18px center,
            calc(100% - 18px) center !important;
    background-size:
            20px 20px,
            11px 7px !important;

    background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230b67d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3v6a5 5 0 0 0 10 0V3'/%3E%3Cpath d='M4 3h4'/%3E%3Cpath d='M14 3h4'/%3E%3Cpath d='M11 14v2a4 4 0 0 0 8 0v-1'/%3E%3Ccircle cx='19' cy='13' r='2'/%3E%3C/svg%3E"),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.25 7 7.25l6-6' stroke='%230b67d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.rjit-activity::-ms-expand {
    display: none;
}

/*
 * Día:
 * calendario azul a la izquierda, igual que el resto de campos.
 * El indicador nativo del navegador queda oculto visualmente para
 * evitar mostrar dos calendarios, pero continúa siendo interactivo.
 */
.rjit-date {
    padding: 0 46px 0 54px !important;

    background-repeat: no-repeat !important;
    background-position: 18px center !important;
    background-size: 20px 20px !important;

    background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230b67d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M8 2v4M16 2v4M3 10h18'/%3E%3Cpath d='M8 14h2v2H8zM14 14h2v2h-2z'/%3E%3C/svg%3E") !important;
}

/*
 * Oculta únicamente el dibujo del calendario nativo en navegadores
 * WebKit/Chromium. El área sigue funcionando para abrir el selector.
 */
.rjit-date::-webkit-calendar-picker-indicator {
    width: 21px;
    height: 21px;
    margin: 0;
    padding: 0;

    opacity: 0;
    cursor: pointer;
}

/*
 * Eliminación definitiva de las antiguas reglas con pseudoelementos,
 * que provocaban iconos superpuestos.
 */
.rjit-picker-activity-field::before,
.rjit-picker-activity-field::after,
.rjit-picker-date-field::before,
.rjit-picker-date-field::after {
    content: none !important;
    display: none !important;
    background-image: none !important;
}

/*
 * =========================================================
 * HORARIOS DISPONIBLES
 * =========================================================
 *
 * Display flex, con tres franjas por fila en escritorio.
 */

.rjit-picker-slots-field {
    display: block !important;
    float: none !important;
    clear: both !important;

    width: 100% !important;
    margin: 0 0 7px !important;

    text-align: left !important;
}

.rjit-slots-title {
    display: block;
    width: 100%;

    margin: 0 0 11px !important;
    padding: 0 !important;

    color: var(--rjit-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left !important;
}

.rjit-slots {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 10px !important;

    box-sizing: border-box !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;
}

/*
 * Tres botones por fila:
 * dos huecos de 10px repartidos entre tres elementos.
 */
.rjit-slot {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;

    box-sizing: border-box !important;

    flex: 0 0 calc((100% - 20px) / 3) !important;
    width: calc((100% - 20px) / 3) !important;
    min-width: 0 !important;
    max-width: calc((100% - 20px) / 3) !important;
    min-height: 45px !important;

    margin: 0 !important;
    padding: 10px 4px !important;

    border: 1px solid var(--rjit-primary) !important;
    border-radius: 5px !important;
    background: #ffffff !important;

    color: var(--rjit-primary) !important;
    font-family: inherit;
    font-size: 11.5px !important;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;

    cursor: pointer;
    transition:
            background-color 0.2s ease,
            border-color 0.2s ease,
            color 0.2s ease,
            box-shadow 0.2s ease;
}

/*
 * Icono reloj normal.
 */
.rjit-slot::before {
    content: "";
    display: inline-block;
    flex: 0 0 14px;

    width: 14px;
    height: 14px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%230b67d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6l4 2'/%3E%3C/svg%3E");
}

/*
 * Estado hover.
 */
.rjit-slot:hover,
.rjit-slot:focus {
    border-color: var(--rjit-primary) !important;
    background: var(--rjit-primary) !important;
    color: #ffffff !important;
    outline: none !important;
    box-shadow: 0 5px 14px rgba(11, 103, 209, 0.18);
}

.rjit-slot:hover::before,
.rjit-slot:focus::before {
    background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6l4 2'/%3E%3C/svg%3E");
}

/*
 * Estado seleccionado persistente.
 */
.rjit-slot.is-selected,
.rjit-slot[aria-pressed="true"] {
    border-color: var(--rjit-primary) !important;
    background: var(--rjit-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 14px rgba(11, 103, 209, 0.18);
}

/*
 * Check blanco cuando una franja está seleccionada.
 */
.rjit-slot.is-selected::before,
.rjit-slot[aria-pressed="true"]::before {
    background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.rjit-slot.is-selected:hover,
.rjit-slot.is-selected:focus,
.rjit-slot[aria-pressed="true"]:hover,
.rjit-slot[aria-pressed="true"]:focus {
    border-color: var(--rjit-primary-dark) !important;
    background: var(--rjit-primary-dark) !important;
    color: #ffffff !important;
}

.rjit-slot:disabled {
    opacity: 0.45;
    cursor: wait;
    box-shadow: none;
}

.rjit-slot.is-selected:disabled,
.rjit-slot[aria-pressed="true"]:disabled {
    opacity: 1;
    cursor: default;
    box-shadow: 0 5px 14px rgba(11, 103, 209, 0.18);
}

/*
 * =========================================================
 * MENSAJE DE DISPONIBILIDAD / SELECCIÓN
 * =========================================================
 */

.rjit-picker-feedback-field {
    display: block !important;
    float: none !important;
    clear: both !important;

    width: 100% !important;
    margin: 0 0 18px !important;

    text-align: left !important;
}

.rjit-feedback {
    display: none;
    width: 100%;
    margin: 12px 0 0 !important;
    padding: 0 !important;

    color: var(--rjit-primary-dark);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    text-align: left !important;
}

.rjit-feedback:not(:empty) {
    display: block;
    position: relative;

    min-height: 47px;
    padding: 13px 16px 13px 47px !important;

    border: 1px solid #d7e8fb;
    border-radius: 6px;
    background: var(--rjit-primary-soft);
}

.rjit-feedback:not(:empty)::before {
    content: "";
    position: absolute;

    left: 17px;
    top: 14px;

    width: 19px;
    height: 19px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%230b67d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 8h.01'/%3E%3C/svg%3E");
}

.rjit-empty,
.rjit-loading {
    display: inline-block;
    color: var(--rjit-muted);
    font-size: 13px;
    opacity: 1;
}

/*
 * =========================================================
 * ICONOS PARA CAMPOS NATIVOS DE DIVI
 * =========================================================
 *
 * Field ID configurados en Divi:
 * - rjit-field-name
 * - rjit-field-phone
 * - rjit-field-email
 * - rjit-field-pet
 * - rjit-field-message
 */

.et_pb_contact_form [data-original_id="rjit-field-name"],
.et_pb_contact_form [data-original_id="rjit-field-phone"],
.et_pb_contact_form [data-original_id="rjit-field-email"],
.et_pb_contact_form [data-original_id="rjit-field-pet"],
.et_pb_contact_form [data-original_id="rjit-field-message"] {
    background-repeat: no-repeat !important;
    background-size: 20px 20px !important;
    padding-left: 54px !important;
}

.et_pb_contact_form [data-original_id="rjit-field-name"],
.et_pb_contact_form [data-original_id="rjit-field-phone"],
.et_pb_contact_form [data-original_id="rjit-field-email"],
.et_pb_contact_form [data-original_id="rjit-field-pet"] {
    background-position: 18px center !important;
}

.et_pb_contact_form [data-original_id="rjit-field-message"] {
    background-position: 18px 20px !important;
}

/* Nombre: usuario. */
.et_pb_contact_form [data-original_id="rjit-field-name"] {
    background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230b67d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
}

/* Teléfono. */
.et_pb_contact_form [data-original_id="rjit-field-phone"] {
    background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230b67d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.79.62 2.65a2 2 0 0 1-.45 2.11L8 9.73a16 16 0 0 0 6 6l1.25-1.25a2 2 0 0 1 2.11-.45c.86.29 1.75.5 2.65.62A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") !important;
}

/* Email. */
.et_pb_contact_form [data-original_id="rjit-field-email"] {
    background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230b67d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22 6 12 13 2 6'/%3E%3C/svg%3E") !important;
}

/* Mascota: perro. */
.et_pb_contact_form [data-original_id="rjit-field-pet"] {
    background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1200' fill='%230b67d1'%3E%3Cpath d='M623.974 385.737 487.975 172.757c-7.962-15.269-4.359-33.709 8.98-42.339 15.255-8.012 32.482-4.267 41.057 8.98l135.999 214.263c7.961 15.269 4.363 33.716-8.98 42.34C649.815 403.335 631.172 398.361 623.974 385.737zM1194.913 425.51c21.876 39.658-32.348 72.172-57.736 85.962-22.238-1.718-43.406-4.068-63.509-7.057-20.101-2.993-37.849-5.773-53.245-8.34-17.962-3.422-34.641-6.842-50.037-10.265-1.741 8.555-4.094 17.535-7.057 26.943-3.009 9.408-6.646 19.245-10.905 29.509-87.46-18.921-190.461-70.103-238.64-148.829L878.009 225.36l29.51-106.49 62.867 76.981c43.37 12.192 103.54 13.048 121.887 57.735 15.888 26.768 14.601 83.536 32.074 105.207 9.408 9.408 19.674 17.962 30.793 25.66s24.377 21.385 39.773 41.057zM579.068 782.188c-38.868-.275-79.431-13.76-118.036-14.113-22.238-2.564-30.365 7.271-24.378 29.51l53.887 216.828c-.724 34.83-19.645 61.502-47.471 66.076-27.079 2.602-54.311-21.826-60.302-40.416l-69.283-271.998c-1.71-9.408-7.057-13.898-16.038-13.471s-14.754 4.918-17.321 13.471l-64.15 270.717c-8.458 25.404-28.958 42.031-53.886 42.338-36.8-.646-62.21-34.828-55.169-66.717l78.264-320.752 6.415-193.734c-67.836-17.21-153.56-63.618-187.319-128.302-9.523-20.909-2.621-41.189 15.396-51.32 21.296-9.732 45.384-.362 53.886 14.112 33.217 51.991 106.545 85.123 156.527 85.962h382.335c5.645 38.003-7.592 156.662-4.058 281.157zM672.728 442.19C737.493 526.412 830.828 579.191 930.613 600c-9.287 27.801-21.692 54.85-30.15 80.188-3.85 11.547-2.78 28.439 3.207 50.68 24.586 94.191 51.62 194.754 75.698 282.262 9.377 73.299-92.42 71.738-107.773 26.943l-55.169-210.414c-15.224-25.84-53.295-31.871-61.585 0l-50.037 209.131c-25.894 64.572-118.281 21.158-107.771-24.377l47.47-195.018c.856-6.844.428-13.688-1.282-20.527C644.046 680.043 647.838 558.472 672.728 442.19z'/%3E%3C/svg%3E") !important;
}

/* Mensaje. */
.et_pb_contact_form [data-original_id="rjit-field-message"] {
    background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230b67d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E") !important;
}

/*
 * =========================================================
 * BOTÓN ENVIAR DE DIVI
 * =========================================================
 */

.et_pb_contact_form_container .et_pb_contact_submit {
    border-color: var(--rjit-primary) !important;
    color: var(--rjit-primary) !important;

    transition:
            background-color 0.2s ease,
            color 0.2s ease,
            box-shadow 0.2s ease;
}

.et_pb_contact_form_container .et_pb_contact_submit:hover {
    border-color: var(--rjit-primary) !important;
    background: var(--rjit-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 14px rgba(11, 103, 209, 0.18);
}

/*
 * =========================================================
 * RESPONSIVE
 * =========================================================
 */

@media (max-width: 767px) {
    .rjit-picker-title-field {
        margin-top: 2px !important;
        margin-bottom: 16px !important;
    }

    .rjit-picker-title {
        font-size: 20px;
    }

    .rjit-picker-field,
    .rjit-picker-feedback-field {
        margin-bottom: 14px !important;
    }

    .rjit-slots {
        gap: 8px !important;
    }

    /*
     * Dos horas por fila en móvil.
     */
    .rjit-slot {
        flex: 0 0 calc((100% - 8px) / 2) !important;
        width: calc((100% - 8px) / 2) !important;
        min-width: 0 !important;
        max-width: calc((100% - 8px) / 2) !important;
        font-size: 11.5px !important;
    }
}

@media (max-width: 420px) {
    /*
     * Una hora por fila en pantallas especialmente estrechas.
     */
    .rjit-slot {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}