/* Contenedor de servicios */
.umres-booking-shell .umres-service-grid,
.umres-booking-widget .umres-service-grid,
#umres-booking .umres-service-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  max-width: 760px;
  margin: 18px auto 6px;
}

/* Tarjeta de servicio (usa la clase real que genere tu JS) */
.umres-booking-shell .umres-service-card,
.umres-booking-widget .umres-service-card,
#umres-booking .umres-service-card{
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  padding: 16px 16px 14px;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.umres-booking-shell .umres-service-card:hover,
.umres-booking-widget .umres-service-card:hover,
#umres-booking .umres-service-card:hover{
  transform: translateY(-1px);
  border-color: rgba(47,86,255,.35);
  box-shadow: 0 18px 32px rgba(15,23,42,.10);
}

.umres-booking-shell .umres-service-card.is-selected,
.umres-booking-shell .umres-service-card.umres-selected,
.umres-booking-widget .umres-service-card.is-selected,
.umres-booking-widget .umres-service-card.umres-selected,
#umres-booking .umres-service-card.is-selected,
#umres-booking .umres-service-card.umres-selected{
  border-color: #2f56ff;
  box-shadow: 0 18px 32px rgba(47,86,255,.14);
  background: linear-gradient(180deg, rgba(47,86,255,.06), rgba(47,86,255,.02));
}

@media (max-width: 820px){
  .umres-booking-shell .umres-service-grid,
  .umres-booking-widget .umres-service-grid,
  #umres-booking .umres-service-grid{
    grid-template-columns: 1fr;
  }
}
/* ==========================================================
   PASO 1 — SERVICIOS (los botones reales son .umres-service-pill)
   Fondo f0f0f0 + borde azul
   ========================================================== */

/* Grid (lo dejas igual o ajusta si quieres) */
.umres-booking-shell .umres-service-grid,
.umres-booking-widget .umres-service-grid,
#umres-booking .umres-service-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  max-width: 760px;
  margin: 18px auto 6px;
}

/* Tarjeta/“cuadrado” del servicio */
.umres-booking-shell .umres-service-pill,
.umres-booking-widget .umres-service-pill,
#umres-booking .umres-service-pill{
  width: 100%;
  text-align: center;

  background: #f0f0f0;        /* ✅ fondo pedido */
  border: 1px solid #2f56ff;  /* ✅ borde azul */
  border-radius: 14px;
  padding: 16px 16px 14px;

  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

/* Hover */
.umres-booking-shell .umres-service-pill:hover,
.umres-booking-widget .umres-service-pill:hover,
#umres-booking .umres-service-pill:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(47,86,255,.18);
}

/* Seleccionado (activo) */
.umres-booking-shell .umres-service-pill.umres-service-pill-active,
.umres-booking-widget .umres-service-pill.umres-service-pill-active,
#umres-booking .umres-service-pill.umres-service-pill-active{
  background: rgba(47,86,255,.10);      /* más marcado */
  border-color: #2f56ff;
  box-shadow: 0 14px 28px rgba(47,86,255,.22);
}

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