/* =========================================================
   UMRES - BASE + STEPPER
   Inspirado en referencia Notarioexpress (centrado + limpio)
   Scope seguro: .umres-booking-shell / .umres-booking-widget / #umres-booking
   ========================================================= */

:where(.umres-booking-shell, .umres-booking-widget, #umres-booking){
  --umres-primary: #2f56ff;     /* azul stepper activo */
  --umres-accent:  #e11d48;     /* rojo botón principal */
  --umres-text:    #0f172a;
  --umres-muted:   #64748b;
  --umres-border:  #e5e7eb;
  --umres-bg:      #ffffff;
  --umres-soft:    #f5f7fb;
  --umres-card:    #ffffff;
  --umres-shadow:  0 18px 40px rgba(15,23,42,.08);

  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color: var(--umres-text);
}

:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) *{
  box-sizing: border-box;
}

:where(.umres-booking-shell, .umres-booking-widget, #umres-booking){
  width: 100%;
  padding: 18px 14px 40px;
}

:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .umres-container,
:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .umres-booking-widget{
  max-width: 1100px;
  margin: 0 auto;
}

/* Si tu plugin renderiza un “card” principal, lo hacemos bonito */
:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .umres-card,
:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .umres-step-panels{
  background: var(--umres-card);
  border: 1px solid var(--umres-border);
  border-radius: 14px;
  box-shadow: var(--umres-shadow);
}

:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) h1,
:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) h2{
  text-align: center;
  margin: 18px 0 6px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) p{
  text-align: center;
  color: var(--umres-muted);
  margin: 0 0 18px;
}

/* =========================
   STEPPER (4 pasos)
   ========================= */

/* Soporta tus dos posibles estructuras:
   - .umres-step-indicators (nuestra)
   - ul/ol con .umres-steps (fallback)
*/
:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .umres-step-indicators,
:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .umres-steps{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
  max-width: 820px;
  margin: 10px auto 18px;
  padding: 10px 8px 0;
  list-style: none;
}

:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .umres-step-progress-bar{
  position: absolute;
  left: 8%;
  right: 8%;
  top: 18px;
  height: 3px;
  background: #e6eaf5;
  border-radius: 999px;
  z-index: 0;
  overflow: hidden;
}

:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .umres-step-progress-fill{
  height: 100%;
  width: 0%;
  background: var(--umres-primary);
  transition: width .25s ease;
}

:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .umres-step-indicator,
:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .umres-steps > li{
  text-align: center;
  position: relative;
  z-index: 1;
  color: #94a3b8;
  font-weight: 700;
  font-size: 13px;
  padding-bottom: 8px;
}

/* “círculo” del paso: soporta:
   - .umres-step-number
   - .umres-step-icon
   - .step-circle (fallback)
*/
:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .umres-step-number,
:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .umres-step-icon,
:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .step-circle{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  background: #ffffff;
  border: 2px solid #e6eaf5;
  color: #9aa6bf;
  font-weight: 900;
}

/* etiqueta */
:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .umres-step-label,
:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .step-label{
  display: block;
  line-height: 1.15;
}

/* Activo */
:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .umres-step-indicator-active,
:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .is-active{
  color: var(--umres-primary);
}

:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .umres-step-indicator-active .umres-step-number,
:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .is-active .step-circle{
  border-color: var(--umres-primary);
  color: var(--umres-primary);
  box-shadow: 0 10px 25px rgba(47,86,255,.18);
}

/* Completado (check) */
:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .umres-step-indicator-done,
:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .is-done{
  color: var(--umres-primary);
}

:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .umres-step-indicator-done .umres-step-number,
:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .is-done .step-circle{
  background: var(--umres-primary);
  border-color: var(--umres-primary);
  color: #fff;
}

/* Panels */
:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .umres-step-panels{
  max-width: 980px;
  margin: 0 auto;
  overflow: hidden;
}

:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .umres-step-panel{
  padding: 22px 22px 26px;
}

@media (max-width: 820px){
  :where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .umres-step-indicators,
  :where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .umres-steps{
    grid-template-columns: repeat(2, minmax(0,1fr));
    row-gap: 18px;
  }

  :where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .umres-step-progress-bar{
    display: none;
  }
}


/* ====== WIZARD: mostrar SOLO el paso activo ====== */
:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .umres-step-panel{
  display: none;
}

:where(.umres-booking-shell, .umres-booking-widget, #umres-booking) .umres-step-panel.umres-step-panel-active{
  display: block;
}

/* Stepper - label del paso 1 (Servicio) */
.umres-booking-widget .umres-step-indicator[data-step="1"] .umres-step-label,
.umres-booking-widget .umres-step-indicator[data-step="1"] .umres-step-title,
.umres-booking-widget .umres-step-indicator[data-step="1"] .umres-step-text,
.umres-booking-widget .umres-step-indicator[data-step="1"] span,
.umres-booking-widget .umres-step-indicator[data-step="1"] label {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 600;
}
/* Stepper — tipografía corporativa: Fecha & hora */
.umres-booking-widget 
.umres-step-indicator[data-step="2"] 
.umres-step-label {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600;
  letter-spacing: 0.2px;
}
/* Stepper — tipografía corporativa: Tus datos */
.umres-booking-widget 
.umres-step-indicator[data-step="3"] 
.umres-step-label {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Stepper — tipografía corporativa: Pago */
.umres-booking-widget 
.umres-step-indicator[data-step="4"] 
.umres-step-label {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600;
  letter-spacing: 0.2px;
}