/* ==========================================================
   PASO 3 (DATOS) — CSS LIMPIO
   ========================================================== */

/* Wrapper del paso de datos */
.umres-booking-shell .umres-data-wrapper,
.umres-booking-widget .umres-data-wrapper,
#umres-booking .umres-data-wrapper{
  max-width: 980px;
  margin: 14px auto 0;
  background: #eef2f7;
  border-radius: 16px;
  padding: 18px;
}

/* =========================
   FORMULARIO (grid + campos)
   ========================= */

/* Grid del formulario (si existe .umres-form-grid) */
.umres-booking-shell .umres-form-grid,
.umres-booking-widget .umres-form-grid,
#umres-booking .umres-form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

/* Contenedor real dinámico de campos */
.umres-booking-shell .umres-dynamic-fields,
.umres-booking-widget .umres-dynamic-fields,
#umres-booking .umres-dynamic-fields{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

/* Cada fila/campo */
.umres-booking-shell .umres-form-field,
.umres-booking-widget .umres-form-field,
#umres-booking .umres-form-field,
.umres-booking-shell .umres-field-row,
.umres-booking-widget .umres-field-row,
#umres-booking .umres-field-row{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Labels */
.umres-booking-shell .umres-form-field label,
.umres-booking-widget .umres-form-field label,
#umres-booking .umres-form-field label,
.umres-booking-shell .umres-field-row label,
.umres-booking-widget .umres-field-row label,
#umres-booking .umres-field-row label{
  font-weight: 900;
  font-size: 12px;
  color: #334155;
}

/* Inputs / selects / textarea */
.umres-booking-shell .umres-form-field input,
.umres-booking-shell .umres-form-field select,
.umres-booking-shell .umres-form-field textarea,
.umres-booking-widget .umres-form-field input,
.umres-booking-widget .umres-form-field select,
.umres-booking-widget .umres-form-field textarea,
#umres-booking .umres-form-field input,
#umres-booking .umres-form-field select,
#umres-booking .umres-form-field textarea,
.umres-booking-shell .umres-field-row input,
.umres-booking-shell .umres-field-row select,
.umres-booking-shell .umres-field-row textarea,
.umres-booking-widget .umres-field-row input,
.umres-booking-widget .umres-field-row select,
.umres-booking-widget .umres-field-row textarea,
#umres-booking .umres-field-row input,
#umres-booking .umres-field-row select,
#umres-booking .umres-field-row textarea{
  border: 1px solid #d7dce7;
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 14px;
  outline: none;
}

/* Focus */
.umres-booking-shell .umres-form-field input:focus,
.umres-booking-shell .umres-form-field select:focus,
.umres-booking-shell .umres-form-field textarea:focus,
.umres-booking-widget .umres-form-field input:focus,
.umres-booking-widget .umres-form-field select:focus,
.umres-booking-widget .umres-form-field textarea:focus,
#umres-booking .umres-form-field input:focus,
#umres-booking .umres-form-field select:focus,
#umres-booking .umres-form-field textarea:focus,
.umres-booking-shell .umres-field-row input:focus,
.umres-booking-shell .umres-field-row select:focus,
.umres-booking-shell .umres-field-row textarea:focus,
.umres-booking-widget .umres-field-row input:focus,
.umres-booking-widget .umres-field-row select:focus,
.umres-booking-widget .umres-field-row textarea:focus,
#umres-booking .umres-field-row input:focus,
#umres-booking .umres-field-row select:focus,
#umres-booking .umres-field-row textarea:focus{
  border-color: #2f56ff;
  box-shadow: 0 0 0 3px rgba(47,86,255,.18);
}

/* Campos ancho completo */
.umres-booking-shell .umres-form-field.is-full,
.umres-booking-widget .umres-form-field.is-full,
#umres-booking .umres-form-field.is-full{
  grid-column: 1 / -1;
}
.umres-booking-shell .umres-field-row textarea,
.umres-booking-shell .umres-field-row .umres-checkbox,
.umres-booking-widget .umres-field-row textarea,
.umres-booking-widget .umres-field-row .umres-checkbox,
#umres-booking .umres-field-row textarea,
#umres-booking .umres-field-row .umres-checkbox{
  grid-column: 1 / -1;
}

/* Responsive */
@media (max-width: 900px){
  .umres-booking-shell .umres-form-grid,
  .umres-booking-widget .umres-form-grid,
  #umres-booking .umres-form-grid,
  .umres-booking-shell .umres-dynamic-fields,
  .umres-booking-widget .umres-dynamic-fields,
  #umres-booking .umres-dynamic-fields{
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   RESUMEN (como tu ejemplo: limpio y centrado)
   ========================================== */

/* Tarjeta del resumen */
.umres-booking-shell .umres-summary-card,
.umres-booking-widget .umres-summary-card,
#umres-booking .umres-summary-card{
  max-width: 620px;
  margin: 0 auto 18px auto;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Título centrado dentro */
.umres-booking-shell .umres-summary-card-title,
.umres-booking-widget .umres-summary-card-title,
#umres-booking .umres-summary-card-title{
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  color: #0f172a;
  margin: 0 0 12px 0;
}

/* Lista: sin recuadros, sin espacios grandes */
.umres-booking-shell .umres-summary-card ul,
.umres-booking-widget .umres-summary-card ul,
#umres-booking .umres-summary-card ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0; /* 🔑 sin “aire” entre filas */
}

/* Cada fila: icono + texto (una línea visual, como el ejemplo) */
.umres-booking-shell .umres-summary-item,
.umres-booking-widget .umres-summary-item,
#umres-booking .umres-summary-item{
  display: flex !important;
  align-items: center !important;
  padding: 7px 0 !important; /* 🔑 compacto */
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* Separación icono -> texto */
.umres-booking-shell .umres-summary-value,
.umres-booking-widget .umres-summary-value,
#umres-booking .umres-summary-value{
  margin: 0 !important;
  padding-left: 14px !important; /* 🔑 como tu ejemplo */
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #334155 !important;
  line-height: 1.25 !important;
}

/* Ocultar labels (Servicio/Fecha/etc.) */
.umres-booking-shell .umres-summary-label,
.umres-booking-widget .umres-summary-label,
#umres-booking .umres-summary-label{
  display: none !important;
}

/* =========================
   FIX ICONOS GIGANTES (real)
   ========================= */

/* Contenedor de icono (si existe como wrapper) */
.umres-booking-shell .umres-summary-ico,
.umres-booking-widget .umres-summary-ico,
#umres-booking .umres-summary-ico{
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #2f56ff !important;
  overflow: hidden !important;
}

/* Si el icono es SVG dentro del wrapper */
.umres-booking-shell .umres-summary-ico svg,
.umres-booking-widget .umres-summary-ico svg,
#umres-booking .umres-summary-ico svg{
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  display: block !important;
}

/* Si la clase umres-summary-ico está aplicada DIRECTO al SVG */
.umres-booking-shell svg.umres-summary-ico,
.umres-booking-widget svg.umres-summary-ico,
#umres-booking svg.umres-summary-ico{
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  display: block !important;
  color: #2f56ff !important;
}

/* Si el icono es IMG (muy común) */
.umres-booking-shell img.umres-summary-ico,
.umres-booking-widget img.umres-summary-ico,
#umres-booking img.umres-summary-ico{
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  display: block !important;
  object-fit: contain !important;
}

/* Blindaje final contra CSS global tipo svg{width:100%} */
.umres-booking-shell .umres-summary-card svg,
.umres-booking-widget .umres-summary-card svg,
#umres-booking .umres-summary-card svg,
.umres-booking-shell .umres-summary-card img,
.umres-booking-widget .umres-summary-card img,
#umres-booking .umres-summary-card img{
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
}

/* Móvil */
@media (max-width: 640px){
  .umres-booking-shell .umres-summary-card,
  .umres-booking-widget .umres-summary-card,
  #umres-booking .umres-summary-card{
    max-width: 92%;
    padding: 14px 14px;
  }
}

.umres-booking-widget .umres-summary-card{
  display: inline-block !important;
  width: auto !important;
  max-width: 620px !important;
  padding: 16px 24px !important;
  margin: 0 auto 18px auto !important;
}
.umres-booking-widget .umres-summary-card[data-umres-summary-step="3"]{
  left: 50%;
  transform: translateX(-50%);
  position: relative;
}
/* ==========================================================
   RESUMEN — ITEMS HORIZONTALES, CARD VERTICAL
   ========================================================== */

/* Tarjeta centrada y compacta (la tuya ya funciona, la dejamos) */
.umres-booking-widget .umres-summary-card{
  max-width: 420px;
  margin: 0 auto 20px;
  padding: 16px 18px;
}

/* Título centrado */
.umres-booking-widget .umres-summary-card-title{
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 14px;
}

/* 👇 CLAVE: lista HORIZONTAL */
.umres-booking-widget .umres-summary-card ul{
  display: grid;
  grid-template-columns: repeat(2, auto); /* 2 columnas */
  gap: 10px 24px;                         /* vertical | horizontal */
  justify-content: center;                /* centra el contenido */
  padding: 0;
  margin: 0;
}

/* Cada item: icono + texto en línea */
.umres-booking-widget .umres-summary-item{
  display: flex;
  align-items: center;
  padding: 0;
  background: none;
  border: 0;
}

/* Icono */
.umres-booking-widget .umres-summary-ico{
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2f56ff;
}

/* Texto */
.umres-booking-widget .umres-summary-value{
  margin-left: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  white-space: nowrap;
}

/* ===========================
   CHECKBOX TÉRMINOS / PRIVACY
   =========================== */

.umres-booking-shell .umres-checkbox,
.umres-booking-widget .umres-checkbox,
#umres-booking .umres-checkbox{
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: #334155;
  line-height: 1.3;
}

/* Ocultar checkbox real */
.umres-booking-shell .umres-checkbox input,
.umres-booking-widget .umres-checkbox input,
#umres-booking .umres-checkbox input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Caja custom */
.umres-booking-shell .umres-checkbox span::before,
.umres-booking-widget .umres-checkbox span::before,
#umres-booking .umres-checkbox span::before{
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid #2f56ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  background: #fff;
  transition: all .2s ease;
  animation: umres-checkbox-pulse 1.8s infinite;
}

/* Check visible */
.umres-booking-shell .umres-checkbox input:checked + span::before,
.umres-booking-widget .umres-checkbox input:checked + span::before,
#umres-booking .umres-checkbox input:checked + span::before{
  background: #2f56ff;
  border-color: #2f56ff;
  animation: none;
}

/* Check icon */
.umres-booking-shell .umres-checkbox input:checked + span::after,
.umres-booking-widget .umres-checkbox input:checked + span::after,
#umres-booking .umres-checkbox input:checked + span::after{
  content: "✓";
  position: absolute;
  margin-left: 6px;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
}

/* Hover */
.umres-booking-shell .umres-checkbox:hover span::before,
.umres-booking-widget .umres-checkbox:hover span::before,
#umres-booking .umres-checkbox:hover span::before{
  box-shadow: 0 0 0 4px rgba(47,86,255,.15);
}

/* ===========================
   ANIMACIÓN PULSO
   =========================== */

@keyframes umres-checkbox-pulse{
  0%{
    box-shadow: 0 0 0 0 rgba(47,86,255,.45);
  }
  70%{
    box-shadow: 0 0 0 6px rgba(47,86,255,0);
  }
  100%{
    box-shadow: 0 0 0 0 rgba(47,86,255,0);
  }
}
/* ===========================
   AJUSTES CHECKBOX PRIVACY
   =========================== */

/* Más separación del formulario */
.umres-booking-shell .umres-field-row .umres-checkbox,
.umres-booking-widget .umres-field-row .umres-checkbox,
#umres-booking .umres-field-row .umres-checkbox{
  margin-top: 16px;   /* 🔽 baja el checkbox */
  padding-top: 6px;   /* aire visual */
}

/* Texto un poco más relajado */
.umres-checkbox span{
  font-size: 13px;
  line-height: 1.4;
}

/* Caja ligeramente más pequeña */
.umres-booking-shell .umres-checkbox span::before,
.umres-booking-widget .umres-checkbox span::before,
#umres-booking .umres-checkbox span::before{
  width: 16px;        /* antes 20 */
  height: 16px;       /* antes 20 */
  border-radius: 5px;
  margin-right: 10px;
  border-width: 2px;
}

/* Check centrado y proporcional */
.umres-booking-shell .umres-checkbox input:checked + span::after,
.umres-booking-widget .umres-checkbox input:checked + span::after,
#umres-booking .umres-checkbox input:checked + span::after{
  margin-left: 5px;
  font-size: 12px;
}

/* Pulso un poco más sutil */
@keyframes umres-checkbox-pulse{
  0%{
    box-shadow: 0 0 0 0 rgba(47,86,255,.35);
  }
  70%{
    box-shadow: 0 0 0 5px rgba(47,86,255,0);
  }
  100%{
    box-shadow: 0 0 0 0 rgba(47,86,255,0);
  }
}
/* ===========================
   ALINEACIÓN CHECKBOX + TEXTO
   =========================== */

/* Forzar alineación horizontal real */
.umres-booking-shell .umres-checkbox,
.umres-booking-widget .umres-checkbox,
#umres-booking .umres-checkbox{
  display: flex;
  align-items: center;  /* 🔑 CLAVE */
}

/* Contenedor del texto */
.umres-booking-shell .umres-checkbox span,
.umres-booking-widget .umres-checkbox span,
#umres-booking .umres-checkbox span{
  display: inline-flex;
  align-items: center;
  position: relative;
}

/* Caja checkbox perfectamente centrada */
.umres-booking-shell .umres-checkbox span::before,
.umres-booking-widget .umres-checkbox span::before,
#umres-booking .umres-checkbox span::before{
  flex-shrink: 0;
  align-self: center;   /* 🔑 evita desalineación vertical */
}

/* Check centrado verticalmente */
.umres-booking-shell .umres-checkbox input:checked + span::after,
.umres-booking-widget .umres-checkbox input:checked + span::after,
#umres-booking .umres-checkbox input:checked + span::after{
  top: 50%;
  transform: translateY(-50%);
}