/* ==========================================================================
   Bethesda Spa - Skin del widget de reservas (Easy Appointments)
   Creado 2026-09-02.

   POR QUE ESTE ARCHIVO EXISTE
   Easy Appointments pinta su formulario desde el plugin y carga su propio
   Bootstrap. No pasa por Elementor, asi que no hay ningun panel donde cambiar
   estos valores: CSS es la unica via. Todo lo demas del sitio si vive en los
   ajustes de Elementor y NO debe tocarse desde aqui.

   Lo que traia de fabrica y desentonaba:
     azul #337AB7, gris #94A3B8, dia elegido en azul lavanda,
     tipografias Source Serif 4 y -apple-system, radios de 4px y 8px,
     tinta #201E1D.

   Todo se apunta dentro de .ea-bootstrap.ea-bootstrap para no salpicar al resto del sitio.
   ========================================================================== */

/* --- Fichas del propio plugin -------------------------------------------
   Easy Appointments define sus tokens en el contenedor y luego los consume en
   todas sus reglas. Redefinirlos aqui es mucho mejor que pelear selector a
   selector: el widget entero pasa a la marca de una sola vez.
   Valores de fabrica que se sustituyen:
     --ea-sans   -apple-system, ...        --ea-accent      #2563eb (azul)
     --ea-serif  "Source Serif 4", ...     --ea-accent-tint #eff6ff
     --ea-text   #201e1d                   --ea-surface     #f8f8f7
   -------------------------------------------------------------------------- */

/* El plugin declara estos tokens en ".ea-new-ui, .ea-bootstrap.ea-new-ui"
   (dos clases) y su hoja carga despues de esta, asi que con dos clases se
   empata y se pierde. Con la tercera clase se gana sin usar !important. */
.ea-bootstrap.ea-bootstrap.ea-new-ui,
.ea-bootstrap.ea-bootstrap.ea-bootstrap{
  --ea-sans:Karla, sans-serif;
  --ea-serif:"Cormorant Garamond", serif;
  --ea-accent:#5C7B4E;
  --ea-accent-hover:#4A6640;
  --ea-accent-deep:#4A6640;
  --ea-accent-ink:#4A6640;
  --ea-accent-tint:#FFFFFF;
  --ea-text:#3B463D;
  --ea-surface:#FFFFFF;
  --ea-paper:#FFFFFF;

  --bxb-green:#5C7B4E;
  --bxb-green-dark:#4A6640;
  --bxb-terracotta:#C1703A;
  --bxb-terracotta-dark:#A95D2C;
  --bxb-ink:#3B463D;
  --bxb-body:#5F6B62;
  --bxb-muted:#667168;
  --bxb-border:#C9D6B8;
  --bxb-outline:#C3CBC2;
  --bxb-rule:#EDEEE9;
  --bxb-surface:#FFFFFF;

  font-family:Karla, sans-serif;
  color:var(--bxb-body);
}

/* El plugin pone "font-family: var(--ea-serif)" en el contenedor raiz, asi que
   el cuerpo del formulario heredaba serif. Aqui vuelve a Karla. */
.ea-bootstrap.ea-bootstrap.ea-new-ui{
  font-family:Karla, sans-serif;
}

/* La clase extra sube la especificidad por encima de la del propio plugin,
   que ya pinta radio y relleno en este mismo contenedor. */
.ea-bootstrap.ea-bootstrap.ea-new-ui-container{
  background:var(--bxb-surface);
  border-radius:22px;
  box-shadow:0 6px 18px rgba(59,70,61,.07);
  padding:32px 28px;
}

/* --- Tipografia ---------------------------------------------------------- */

.ea-bootstrap.ea-bootstrap.ea-new-ui .ea-booking-title{
  font-family:"Cormorant Garamond", serif;
  font-weight:400;
  font-size:32px;
  line-height:1.2;
  color:var(--bxb-green);
  margin:0 0 24px;
}

.ea-bootstrap.ea-bootstrap.ea-new-ui h3{
  font-family:"Cormorant Garamond", serif;
  font-weight:600;
  font-size:22px;
  line-height:1.3;
  color:var(--bxb-ink);
}

.ea-bootstrap.ea-bootstrap.ea-new-ui label,
.ea-bootstrap.ea-bootstrap.ea-new-ui .ea-label,
.ea-bootstrap.ea-bootstrap.ea-new-ui .control-label{
  font-family:Karla, sans-serif;
  font-size:13.5px;
  font-weight:600;
  color:var(--bxb-ink);
  letter-spacing:.01em;
}

.ea-bootstrap.ea-bootstrap.ea-new-ui small,
.ea-bootstrap.ea-bootstrap.ea-new-ui .text-muted,
.ea-bootstrap.ea-bootstrap.ea-new-ui .ea-service-description{
  font-family:Karla, sans-serif;
  font-size:13.5px;
  line-height:1.6;
  color:var(--bxb-body);
}

/* --- Campos -------------------------------------------------------------- */

.ea-bootstrap.ea-bootstrap.ea-new-ui select,
.ea-bootstrap.ea-bootstrap.ea-new-ui input[type="text"],
.ea-bootstrap.ea-bootstrap.ea-new-ui input[type="email"],
.ea-bootstrap.ea-bootstrap.ea-new-ui input[type="tel"],
.ea-bootstrap.ea-bootstrap.ea-new-ui input[type="number"],
.ea-bootstrap.ea-bootstrap.ea-new-ui textarea,
.ea-bootstrap.ea-bootstrap.ea-new-ui .form-control{
  font-family:Karla, sans-serif;
  font-size:15px;
  color:var(--bxb-ink);
  background:var(--bxb-surface);
  border:1px solid var(--bxb-border);
  border-radius:10px;
  box-shadow:none;
  /* 44px de alto minimo: objetivo tactil comodo en movil. */
  min-height:46px;
  padding:11px 14px;
  transition:border-color .2s ease, box-shadow .2s ease;
}

.ea-bootstrap.ea-bootstrap.ea-new-ui textarea,
.ea-bootstrap.ea-bootstrap textarea.form-control{ min-height:96px; }

.ea-bootstrap.ea-bootstrap.ea-new-ui select:focus,
.ea-bootstrap.ea-bootstrap.ea-new-ui input:focus,
.ea-bootstrap.ea-bootstrap.ea-new-ui textarea:focus,
.ea-bootstrap.ea-bootstrap.ea-new-ui .form-control:focus{
  outline:none;
  border-color:var(--bxb-green);
  box-shadow:0 0 0 3px rgba(92,123,78,.14);
}

.ea-bootstrap.ea-bootstrap.ea-new-ui .ea-field-group.disabled,
.ea-bootstrap.ea-bootstrap.ea-new-ui .step.disabled{ opacity:.5; }

/* --- Botones ------------------------------------------------------------- */

.ea-bootstrap.ea-bootstrap.ea-new-ui .btn,
.ea-bootstrap.ea-bootstrap.ea-new-ui .ea-btn{
  font-family:Karla, sans-serif;
  font-size:15px;
  font-weight:600;
  line-height:1;
  border-radius:999px;
  padding:16px 32px;
  border:1px solid transparent;
  box-shadow:none;
  transition:background-color .25s ease, color .25s ease,
             transform .25s ease, box-shadow .25s ease;
}

/* Verde, no terracota: segun el diseno la terracota es para la accion
   principal generica y el verde para "Book now". Este boton es Book now. */
.ea-bootstrap.ea-bootstrap.ea-new-ui .btn-primary,
.ea-bootstrap.ea-bootstrap.ea-new-ui .ea-btn.ea-submit,
.ea-bootstrap.ea-bootstrap.ea-new-ui .booking-button{
  background:var(--bxb-green);
  border-color:var(--bxb-green);
  color:#fff;
}

.ea-bootstrap.ea-bootstrap.ea-new-ui .btn-primary:hover,
.ea-bootstrap.ea-bootstrap.ea-new-ui .ea-btn.ea-submit:not(.is-disabled):hover,
.ea-bootstrap.ea-bootstrap.ea-new-ui .booking-button:not(.is-disabled):hover{
  background:var(--bxb-green-dark);
  border-color:var(--bxb-green-dark);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 22px -10px rgba(92,123,78,.55);
}

.ea-bootstrap.ea-bootstrap.ea-new-ui .btn-default,
.ea-bootstrap.ea-bootstrap.ea-new-ui .ea-btn.ea-cancel{
  background:transparent;
  border:1.5px solid var(--bxb-outline);
  color:var(--bxb-ink);
}

.ea-bootstrap.ea-bootstrap.ea-new-ui .btn-default:hover,
.ea-bootstrap.ea-bootstrap.ea-new-ui .ea-btn.ea-cancel:hover{
  border-color:var(--bxb-green);
  color:var(--bxb-green);
  transform:translateY(-2px);
}

/* Deshabilitado: dentro de paleta, no el gris azulado del plugin. */
.ea-bootstrap.ea-bootstrap.ea-new-ui .is-disabled,
.ea-bootstrap.ea-bootstrap.ea-new-ui .btn[disabled],
.ea-bootstrap.ea-bootstrap.ea-new-ui .ea-btn[disabled]{
  background:var(--bxb-outline);
  border-color:var(--bxb-outline);
  color:#fff;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* --- Calendario ---------------------------------------------------------- */

.ea-bootstrap.ea-bootstrap.ea-new-ui .ui-datepicker{
  font-family:Karla, sans-serif;
  font-size:14px;
  border:1px solid var(--bxb-border);
  border-radius:16px;
  background:var(--bxb-surface);
  padding:12px;
  width:100%;
  max-width:100%;
}

.ea-bootstrap.ea-bootstrap.ea-new-ui .ui-datepicker .ui-datepicker-title{
  font-family:"Cormorant Garamond", serif;
  font-size:19px;
  font-weight:600;
  color:var(--bxb-ink);
}

.ea-bootstrap.ea-bootstrap.ea-new-ui .ui-datepicker th{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--bxb-muted);
}

.ea-bootstrap.ea-bootstrap.ea-new-ui .ui-datepicker td a,
.ea-bootstrap.ea-bootstrap.ea-new-ui .ui-datepicker td span{
  border:0;
  border-radius:10px;
  padding:9px 0;
  text-align:center;
  color:var(--bxb-ink);
  background:transparent;
}

.ea-bootstrap.ea-bootstrap.ea-new-ui .ui-datepicker td a:hover{
  background:var(--bxb-rule);
  color:var(--bxb-green-dark);
}

/* El dia elegido venia en azul lavanda del tema de jQuery UI. */
.ea-bootstrap.ea-bootstrap.ea-new-ui .ui-datepicker td.ui-datepicker-current-day a,
.ea-bootstrap.ea-bootstrap.ea-new-ui .ui-datepicker td a.ui-state-active,
.ea-bootstrap.ea-bootstrap.ea-new-ui .ui-datepicker td a.ui-state-highlight{
  background:var(--bxb-green);
  color:#fff;
}

.ea-bootstrap.ea-bootstrap.ea-new-ui .ui-datepicker td.ui-state-disabled span{
  color:var(--bxb-muted);
  opacity:.45;
}

.ea-bootstrap.ea-bootstrap.ea-new-ui .ui-datepicker .ui-datepicker-prev,
.ea-bootstrap.ea-bootstrap.ea-new-ui .ui-datepicker .ui-datepicker-next{
  cursor:pointer;
  color:var(--bxb-terracotta);
}

/* --- Horas --------------------------------------------------------------- */

.ea-bootstrap.ea-bootstrap.ea-new-ui .time a,
.ea-bootstrap.ea-bootstrap.ea-new-ui .time .ea-slot{
  font-family:Karla, sans-serif;
  font-size:14px;
  font-weight:600;
  color:var(--bxb-ink);
  background:var(--bxb-surface);
  border:1px solid var(--bxb-border);
  border-radius:999px;
  padding:11px 18px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:border-color .2s ease, color .2s ease, background-color .2s ease;
}

.ea-bootstrap.ea-bootstrap.ea-new-ui .time a:hover{
  border-color:var(--bxb-green);
  color:var(--bxb-green);
}

.ea-bootstrap.ea-bootstrap.ea-new-ui .time a.active,
.ea-bootstrap.ea-bootstrap.ea-new-ui .time a.selected{
  background:var(--bxb-green);
  border-color:var(--bxb-green);
  color:#fff;
}

/* --- Barra de resumen ---------------------------------------------------- */

.ea-bootstrap.ea-bootstrap.ea-new-ui .ea-booking-summary-bar{
  border-top:1px solid var(--bxb-rule);
  padding-top:20px;
  margin-top:24px;
}

.ea-bootstrap.ea-bootstrap.ea-new-ui .ea-summary-text{
  font-family:Karla, sans-serif;
  font-size:14px;
  color:var(--bxb-body);
}

/* --- Movil --------------------------------------------------------------- */

@media (max-width:767px){
  .ea-bootstrap.ea-bootstrap{ padding:24px 18px; border-radius:16px; }
  .ea-bootstrap.ea-bootstrap.ea-new-ui .ea-booking-title{ font-size:26px; }

  /* Bootstrap deja las columnas al 50% y aprieta los campos. */
  .ea-bootstrap.ea-bootstrap.ea-new-ui .col-md-6,
  .ea-bootstrap.ea-bootstrap.ea-new-ui .col-sm-4,
  .ea-bootstrap.ea-bootstrap.ea-new-ui .col-sm-8,
  .ea-bootstrap.ea-bootstrap.ea-new-ui .ea-filters-grid{
    width:100%;
    float:none;
    display:block;
  }

  .ea-bootstrap.ea-bootstrap.ea-new-ui .control-label,
  .ea-bootstrap.ea-bootstrap.ea-new-ui .ea-label{
    text-align:left;
    margin-bottom:6px;
  }

  .ea-bootstrap.ea-bootstrap.ea-new-ui .btn,
  .ea-bootstrap.ea-bootstrap.ea-new-ui .ea-btn{ width:100%; }

  .ea-bootstrap.ea-bootstrap.ea-new-ui .ea-new-ui-actions .btn + .btn,
  .ea-bootstrap.ea-bootstrap.ea-new-ui .ea-actions-group .btn + .btn{ margin-top:10px; }
}

/* --- Menos movimiento ---------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .ea-bootstrap.ea-bootstrap.ea-new-ui .btn,
  .ea-bootstrap.ea-bootstrap.ea-new-ui .ea-btn,
  .ea-bootstrap.ea-bootstrap.ea-new-ui .time a,
  .ea-bootstrap.ea-bootstrap select,
  .ea-bootstrap.ea-bootstrap input,
  .ea-bootstrap.ea-bootstrap textarea{ transition:none !important; }

  .ea-bootstrap.ea-bootstrap.ea-new-ui .btn:hover,
  .ea-bootstrap.ea-bootstrap.ea-new-ui .ea-btn:hover{ transform:none !important; }
}


/* ==========================================================================
   REMATES

   1) El plugin anida un .ea-bootstrap dentro de otro. Sin esto, la tarjeta
      (fondo, radio, sombra y relleno) se pintaba dos veces, una dentro de
      la otra. El contenedor interior se deja plano.

   2) Algunos elementos los pinta el Bootstrap propio del plugin con la misma
      especificidad que las reglas de arriba. Como su hoja carga despues,
      ganaba el empate. Aqui se apuntan con la clase concreta.
   ========================================================================== */

.ea-bootstrap .ea-bootstrap.ea-new-ui-container{
  background:transparent;
  border-radius:0;
  box-shadow:none;
  padding:0;
}

.ea-bootstrap.ea-bootstrap.ea-new-ui label.control-label,
.ea-bootstrap.ea-bootstrap.ea-new-ui label.ea-label,
.ea-bootstrap.ea-bootstrap.ea-new-ui .ea-label{
  color:var(--bxb-ink);
  font-family:Karla, sans-serif;
  font-size:13.5px;
  font-weight:600;
}

.ea-bootstrap.ea-bootstrap.ea-new-ui select.filter,
.ea-bootstrap.ea-bootstrap.ea-new-ui select.custom-field,
.ea-bootstrap.ea-bootstrap.ea-new-ui textarea.custom-field,
.ea-bootstrap.ea-bootstrap.ea-new-ui input.custom-field,
.ea-bootstrap.ea-bootstrap.ea-new-ui option{
  color:var(--bxb-ink);
  font-family:Karla, sans-serif;
}

.ea-bootstrap.ea-bootstrap.ea-new-ui .step h3,
.ea-bootstrap.ea-bootstrap.ea-new-ui .ea_hide_show h3{
  color:var(--bxb-ink);
  font-family:"Cormorant Garamond", serif;
  font-weight:600;
  font-size:22px;
}

.ea-bootstrap.ea-bootstrap.ea-new-ui .step small,
.ea-bootstrap.ea-bootstrap.ea-new-ui .mt-3.text-muted{
  color:var(--bxb-body);
  font-family:Karla, sans-serif;
}

.ea-bootstrap.ea-bootstrap.ea-new-ui .ui-icon{ color:var(--bxb-muted); }


/* --- EMPATES CONCRETOS ---------------------------------------------------
   Estas reglas del plugin tienen exactamente la misma especificidad que las
   de arriba, y como su hoja carga despues, ganaban el empate:
     .ea-new-ui .step.final .form-group label   (0,4,1)
     .ea-new-ui .ea-field-group label           (0,3,1)
     .ea-new-ui #booking-overview .ea-label     (1,2,0)
   Se replican aqui con una clase mas para desempatar.
   ------------------------------------------------------------------------ */

.ea-bootstrap.ea-bootstrap.ea-new-ui .step.final .form-group label,
.ea-bootstrap.ea-bootstrap.ea-new-ui .ea-field-group label,
.ea-bootstrap.ea-bootstrap.ea-new-ui .ea-times-header,
.ea-bootstrap.ea-bootstrap.ea-new-ui #booking-overview .ea-label{
  font-family:Karla, sans-serif;
  font-size:13.5px;
  font-weight:600;
  color:var(--bxb-ink);
}

.ea-bootstrap.ea-bootstrap.ea-new-ui .ea-summary-text{
  font-family:Karla, sans-serif;
  font-size:14px;
  font-weight:400;
  color:var(--bxb-body);
}

.ea-bootstrap.ea-bootstrap.ea-new-ui .step.final h3,
.ea-bootstrap.ea-bootstrap.ea-new-ui .step .block h3{
  font-family:"Cormorant Garamond", serif;
  font-weight:600;
  font-size:22px;
  color:var(--bxb-ink);
}


/* --- ULTIMOS RESTOS ------------------------------------------------------ */

.ea-bootstrap.ea-bootstrap.ea-new-ui .form-control.custom-field,
.ea-bootstrap.ea-bootstrap.ea-new-ui select.filter.form-control,
.ea-bootstrap.ea-bootstrap.ea-new-ui textarea.form-control.custom-field{
  border-color:var(--bxb-border);
}

.ea-bootstrap.ea-bootstrap.ea-new-ui.ea-new-ui-container h3,
.ea-bootstrap.ea-bootstrap.ea-new-ui #booking-overview-title,
.ea-bootstrap.ea-bootstrap.ea-new-ui .ea_hide_show > h3{
  font-family:"Cormorant Garamond", serif;
  font-weight:600;
  font-size:22px;
  color:var(--bxb-ink);
  border-color:var(--bxb-rule);
}


/* --- CALENDARIO: CELDAS --------------------------------------------------
   Los dias son <a> en inline-flex. Con padding lateral 0 se encogian al
   ancho del numero (5px de ancho por 34 de alto). Necesitan ocupar la celda.
   ------------------------------------------------------------------------ */

.ea-bootstrap.ea-bootstrap.ea-new-ui .ui-datepicker td a,
.ea-bootstrap.ea-bootstrap.ea-new-ui .ui-datepicker td span{
  display:flex;
  width:100%;
  min-height:38px;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:10px;
}

/* Hoy y el dia elegido se distinguen: hoy solo con contorno. */
.ea-bootstrap.ea-bootstrap.ea-new-ui .ui-datepicker td a.ui-state-highlight{
  background:transparent;
  color:var(--bxb-green);
  box-shadow:inset 0 0 0 1px var(--bxb-outline);
}

.ea-bootstrap.ea-bootstrap.ea-new-ui .ui-datepicker td.ui-datepicker-current-day a,
.ea-bootstrap.ea-bootstrap.ea-new-ui .ui-datepicker td a.ui-state-active{
  background:var(--bxb-green);
  color:#fff;
  box-shadow:none;
}

/* --- "Usar mi ubicacion actual" bajo el campo de direccion --------------
   Lo pinta assets/bethesda-booking-geo.js. El boton adjunta un enlace de
   Google Maps con el GPS del cliente; el campo sigue editable a mano. */
.bx-geo{ margin-top:10px; }
.bx-geo-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font:600 13.5px/1 Karla, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color:#4A6640;
  background:#fff;
  border:1.5px solid #4A6640;
  border-radius:999px;
  padding:9px 16px;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.bx-geo-btn:hover:not(:disabled){
  background:#4A6640;
  color:#fff;
  box-shadow:0 8px 18px -10px rgba(74,102,64,.6);
}
.bx-geo-btn:disabled{ opacity:.55; cursor:default; }
.bx-geo-btn:focus-visible{ outline:2px solid #C1703A; outline-offset:2px; }
.bx-geo-msg{
  margin:7px 0 0;
  font:400 12.5px/1.45 Karla, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color:#5F6B62;
}
.bx-geo-msg.is-ok{ color:#4A6640; }
.bx-geo-msg.is-err{ color:#B03A1A; }

/* --- Resumen de la reserva (#booking-overview) -------------------------
   El plugin alineaba los valores a la derecha y ponia white-space:nowrap en
   TODAS las celdas, con la columna de etiquetas de ancho variable: cada fila
   arrancaba en un punto distinto y el bloque se leia desordenado. Aqui se fija
   en dos columnas limpias, valores alineados a la izquierda y la descripcion
   del servicio en tono discreto. */
.ea-bootstrap.ea-bootstrap.ea-new-ui #booking-overview{
  background:#F6F7F3;
  border:1px solid var(--bxb-rule);
  border-radius:10px;
  padding:14px 18px;
  margin:14px 0 20px;
}
.ea-bootstrap.ea-bootstrap.ea-new-ui #booking-overview #ea-overview-message{
  display:block;
  margin:0 0 12px;
  font-size:12.5px;
  color:var(--bxb-muted);
}
.ea-bootstrap.ea-bootstrap.ea-new-ui #booking-overview table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.ea-bootstrap.ea-bootstrap.ea-new-ui #booking-overview td{
  padding:9px 0;
  border:0;
  border-bottom:1px solid var(--bxb-rule);
  vertical-align:top;
  font-family:Karla, sans-serif;
  font-size:14px;
  line-height:1.5;
  text-align:left !important;
  white-space:normal !important;
  width:auto !important;
}
.ea-bootstrap.ea-bootstrap.ea-new-ui #booking-overview tr:last-child td{
  border-bottom:0;
}
.ea-bootstrap.ea-bootstrap.ea-new-ui #booking-overview td.ea-label{
  width:128px !important;
  padding-right:16px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--bxb-muted);
}
.ea-bootstrap.ea-bootstrap.ea-new-ui #booking-overview td.value{
  font-weight:500;
  color:var(--bxb-ink);
  word-break:break-word;
}
.ea-bootstrap.ea-bootstrap.ea-new-ui #booking-overview tr.row-price td.value{
  font-weight:700;
}
/* La descripcion del servicio es texto generico que se repite en cada
   reserva; no aporta nada en el resumen. */
.ea-bootstrap.ea-bootstrap.ea-new-ui #booking-overview tr.row-service-description{
  display:none;
}

/* El textarea "Massage & length for each guest" (#group_massages) es solo el
   portador de datos del selector por persona: nunca se muestra. Lo oculta
   tambien bethesda-booking-groups.js; esto es el respaldo por si el JS falla. */
.ea-bootstrap.ea-bootstrap.ea-new-ui .form-group:has(#group_massages){
  display:none !important;
}

/* --- Aviso informativo sobre reservas de grupo ------------------------
   Widget text-editor de Elementor con la clase .bx-book-note, justo encima
   del formulario. No vive dentro de .ea-bootstrap, por eso no lleva prefijo. */
.elementor-element.bx-book-note{
  margin:4px 0 24px;
  padding:16px 20px;
  background:#F6F7F3;
  border:1px solid #E1E4DC;
  border-left:3px solid #C1703A;
  border-radius:10px;
}
.elementor-element.bx-book-note .elementor-widget-container{
  padding:0;
  background:none;
  border:0;
}
.elementor-element.bx-book-note p{
  margin:0 0 8px;
  font:600 14px/1.5 Karla, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color:#3B463D;
}
.elementor-element.bx-book-note ul{ margin:0; padding-left:20px; }
.elementor-element.bx-book-note li{
  margin:5px 0;
  font:400 13px/1.55 Karla, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color:#5F6B62;
}
.elementor-element.bx-book-note strong{ color:#3B463D; font-weight:600; }

/* --- Selector de masaje por persona (grupos) -------------------------
   Lo pinta assets/bethesda-booking-groups.js encima del textarea
   #group_massages cuando "How many people?" es 2-4. */
.ea-bootstrap.ea-bootstrap.ea-new-ui .bx-guests{
  grid-column:1 / -1;
  width:100%;
  box-sizing:border-box;
  margin:2px 0 14px;
  padding:14px 16px;
  background:#F6F7F3;
  border:1px solid var(--bxb-rule);
  border-radius:10px;
}
.ea-bootstrap.ea-bootstrap.ea-new-ui .bx-guests-intro{
  margin:0 0 10px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--bxb-muted);
}
.ea-bootstrap.ea-bootstrap.ea-new-ui .bx-guests-rows{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ea-bootstrap.ea-bootstrap.ea-new-ui .bx-guests-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.ea-bootstrap.ea-bootstrap.ea-new-ui .bx-g-tag{
  flex:0 0 auto;
  min-width:56px;
  font-size:12px;
  font-weight:600;
  color:var(--bxb-ink);
}
.ea-bootstrap.ea-bootstrap.ea-new-ui .bx-g-type{ flex:1 1 150px; min-width:138px; }
.ea-bootstrap.ea-bootstrap.ea-new-ui .bx-g-len{ flex:0 0 100px; }
.ea-bootstrap.ea-bootstrap.ea-new-ui .bx-guests-row select{
  height:40px;
  padding:6px 10px;
  border:1px solid rgba(32,30,29,0.14);
  border-radius:8px;
  font-size:13.5px;
  font-family:Karla, sans-serif;
  color:var(--bxb-ink);
  background-color:#fff;
  box-sizing:border-box;
}

/* Permitir interaccion con campos de Easy Appointments incluso si el grupo esta deshabilitado visualmente */
.ea-bootstrap .ea-field-group.disabled{
  pointer-events: auto !important;
}

.ea-bootstrap .ea-field-group.disabled select,
.ea-bootstrap .ea-field-group.disabled input,
.ea-bootstrap .ea-field-group.disabled textarea{
  pointer-events: auto !important;
}

/* Elementor overlay fix */
.elementor-field-group .elementor-select-wrapper{
  pointer-events: auto;
}

.elementor-field-group .elementor-select-wrapper select{
  pointer-events: auto;
}


/* --- Movil: 16px en los campos (auditoria 2026-09-15) --------------------
   Safari en iPhone hace zoom automatico al enfocar un campo que mide menos de
   16px. Tras ese zoom la pagina queda desplazada y la cabecera se sale de
   pantalla. Se mantienen los 15px en escritorio, donde no aplica. */
@media (max-width:767px){
  .ea-bootstrap.ea-bootstrap.ea-new-ui select,
  .ea-bootstrap.ea-bootstrap.ea-new-ui input[type="text"],
  .ea-bootstrap.ea-bootstrap.ea-new-ui input[type="email"],
  .ea-bootstrap.ea-bootstrap.ea-new-ui input[type="tel"],
  .ea-bootstrap.ea-bootstrap.ea-new-ui input[type="number"],
  .ea-bootstrap.ea-bootstrap.ea-new-ui textarea,
  .ea-bootstrap.ea-bootstrap.ea-new-ui .form-control,
  .ea-bootstrap .bx-guests select,
  /* EA pisa lo anterior con .ea-new-ui .step.final .form-control (14.5px) y su
     hoja carga despues de esta, asi que aqui hace falta una clase mas. */
  .ea-bootstrap.ea-bootstrap.ea-new-ui .step.final .form-control,
  .ea-bootstrap.ea-bootstrap.ea-new-ui .step.final select,
  .ea-bootstrap.ea-bootstrap.ea-new-ui .step.final textarea{
    font-size:16px;
  }
}


/* ==========================================================================
   AUDITORIA MOVIL - REMATES (2026-09-16)
   Las clases bx-* las pone assets/bethesda-booking-ui.js.
   ========================================================================== */

/* --- 1) Ayuda bajo "Service" mientras esta deshabilitado -----------------
   EA le pone al grupo opacity:.5 en linea, y con eso la ayuda tambien quedaba
   gris. Aqui el grupo se deja entero y se atenua solo el desplegable. */
.ea-bootstrap.ea-bootstrap.ea-new-ui .ea-field-group.bx-has-hint{
  opacity:1 !important;
}
.ea-bootstrap.ea-bootstrap.ea-new-ui .ea-field-group.bx-has-hint > select{
  opacity:.5;
}
.ea-bootstrap.ea-bootstrap.ea-new-ui .bx-field-hint{
  margin:7px 2px 0;
  font:600 13px/1.4 Karla, sans-serif;
  color:#A95D2C;
}
.ea-bootstrap.ea-bootstrap.ea-new-ui .bx-field-hint[hidden]{ display:none; }

/* --- 2) Worker con una sola opcion ---------------------------------------
   Se oculta el clon visible. El <select> original sigue en el formulario y
   su valor se envia igual. La fila del resumen tambien sobra. */
.ea-bootstrap .bx-hidden-single{ display:none !important; }
.ea-bootstrap.bx-single-worker #booking-overview tr.row-worker,
.ea-bootstrap.bx-single-worker .ea-overview-table tr.row-worker{ display:none; }

/* --- 3) Horarios a 44px de alto ------------------------------------------
   Los horarios viven dentro de la tabla del calendario, asi que la regla de
   las celdas de dia (.ui-datepicker td a, min-height:38px y padding:0) les
   ganaba a la de .time a. Esta suma una clase mas. */
.ea-bootstrap.ea-bootstrap.ea-new-ui .ui-datepicker td a.time-value,
.ea-bootstrap.ea-bootstrap.ea-new-ui .ui-datepicker td a.time-disabled{
  display:flex;
  align-items:center;
  justify-content:center;
  height:auto;
  min-height:44px;
  max-height:none;
  padding:0 6px;
  line-height:1.2;
  text-align:center;
}

/* --- 4) Burbuja de WhatsApp fuera de los botones del formulario ----------
   En movil la burbuja fija (abajo a la derecha) tapaba "Book appointment".
   Mientras coinciden, se desvanece; si el chat esta abierto no se toca. */
html.bx-booking-ui .qlwapp__container{
  /* "top" es la transicion propia del plugin para las posiciones centradas. */
  transition:opacity .2s ease, visibility .2s ease, top .3s ease;
}
html.bx-wa-tucked .qlwapp__container:not(.qlwapp__container--open):not(.qlwapp__container--opening){
  opacity:0;
  visibility:hidden;
}
html.bx-wa-tucked .qlwapp__container:not(.qlwapp__container--open):not(.qlwapp__container--opening) *{
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  html.bx-booking-ui .qlwapp__container{ transition:none; }
}