/* Wrapper pago */
.umres-booking-shell .umres-payment-wrapper,
.umres-booking-widget .umres-payment-wrapper,
#umres-booking .umres-payment-wrapper{
  max-width: 980px;
  margin: 14px auto 0;
  background: #eef2f7;
  border-radius: 16px;
  padding: 18px;
}

/* Caja resumen/total (si existe) */
.umres-booking-shell .umres-payment-summary,
.umres-booking-widget .umres-payment-summary,
#umres-booking .umres-payment-summary{
  background: #fff;
  border: 1px solid #d7dce7;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}

/* Lista de métodos */
.umres-booking-shell .umres-payment-methods,
.umres-booking-widget .umres-payment-methods,
#umres-booking .umres-payment-methods{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

/* Método (tarjeta/radio) */
.umres-booking-shell .umres-payment-method,
.umres-booking-widget .umres-payment-method,
#umres-booking .umres-payment-method{
  border: 1px solid #d7dce7;
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.umres-booking-shell .umres-payment-method:hover,
.umres-booking-widget .umres-payment-method:hover,
#umres-booking .umres-payment-method:hover{
  transform: translateY(-1px);
  border-color: rgba(47,86,255,.35);
  box-shadow: 0 18px 32px rgba(15,23,42,.10);
}

/* Seleccionado */
.umres-booking-shell .umres-payment-method.is-selected,
.umres-booking-shell .umres-payment-method.umres-selected,
.umres-booking-widget .umres-payment-method.is-selected,
.umres-booking-widget .umres-payment-method.umres-selected,
#umres-booking .umres-payment-method.is-selected,
#umres-booking .umres-payment-method.umres-selected{
  border-color: #2f56ff;
  outline: 3px solid rgba(47,86,255,.18);
}

/* Botón pagar (si existe) */
.umres-booking-shell .umres-pay-btn,
.umres-booking-widget .umres-pay-btn,
#umres-booking .umres-pay-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 0;
  background: #2f56ff;
  color: #fff;
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 18px 32px rgba(47,86,255,.20);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.umres-booking-shell .umres-pay-btn:hover,
.umres-booking-widget .umres-pay-btn:hover,
#umres-booking .umres-pay-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 22px 40px rgba(47,86,255,.24);
}

.umres-booking-shell .umres-pay-btn:disabled,
.umres-booking-widget .umres-pay-btn:disabled,
#umres-booking .umres-pay-btn:disabled{
  opacity: .6;
  cursor: not-allowed;
  box-shadow: none;
}

@media (max-width: 900px){
  .umres-booking-shell .umres-payment-methods,
  .umres-booking-widget .umres-payment-methods,
  #umres-booking .umres-payment-methods{
    grid-template-columns: 1fr;
  }
}
/* ==========================================================
   BOTONES FOOTER (Volver / Continuar al Pago / Pagar)
   Look consistente con el diseño
   ========================================================== */

/* Contenedor de botones */
.umres-booking-shell .umres-form-footer,
.umres-booking-widget .umres-form-footer,
#umres-booking .umres-form-footer{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

/* Base común */
.umres-booking-shell .umres-button,
.umres-booking-widget .umres-button,
#umres-booking .umres-button{
  appearance: none;
  border-radius: 10px;
  font-weight: 800;
  font-size: 14px;
  padding: 10px 16px;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Volver (ghost) */
.umres-booking-shell .umres-button-ghost,
.umres-booking-widget .umres-button-ghost,
#umres-booking .umres-button-ghost{
  background: #f1f5f9;
  color: #334155;
  border-color: rgba(15,23,42,.12);
}

/* Hover Volver */
.umres-booking-shell .umres-button-ghost:hover,
.umres-booking-widget .umres-button-ghost:hover,
#umres-booking .umres-button-ghost:hover{
  background: #e2e8f0;
  border-color: rgba(15,23,42,.18);
}

/* Botón principal (Confirmar / Continuar / Pagar) */
.umres-booking-shell .umres-button-primary,
.umres-booking-widget .umres-button-primary,
#umres-booking .umres-button-primary{
  background: #6d28d9; /* violeta similar a tu diseño */
  color: #fff;
  box-shadow: 0 10px 22px rgba(109,40,217,.35);
}

/* Hover primario */
.umres-booking-shell .umres-button-primary:hover,
.umres-booking-widget .umres-button-primary:hover,
#umres-booking .umres-button-primary:hover{
  background: #5b21b6;
  box-shadow: 0 14px 28px rgba(109,40,217,.45);
  transform: translateY(-1px);
}

/* Active */
.umres-booking-shell .umres-button:active,
.umres-booking-widget .umres-button:active,
#umres-booking .umres-button:active{
  transform: translateY(0);
  box-shadow: none;
}

/* Deshabilitado (por ejemplo si no acepta políticas) */
.umres-booking-shell .umres-button:disabled,
.umres-booking-widget .umres-button:disabled,
#umres-booking .umres-button:disabled{
  opacity: .6;
  cursor: not-allowed;
  box-shadow: none;
}

/* Responsive: en móvil centrados */
@media (max-width: 600px){
  .umres-booking-shell .umres-form-footer,
  .umres-booking-widget .umres-form-footer,
  #umres-booking .umres-form-footer{
    justify-content: center;
  }
}
/* ==================================================
   PASO 4 (PAGO) — RESUMEN CENTRADO + TOTALES
   ================================================== */

/* 1️⃣ Centrar el resumen SOLO en el paso pago */
.umres-booking-shell 
.umres-step-panel[data-step="4"] 
.umres-summary-card,
.umres-booking-widget 
.umres-step-panel[data-step="4"] 
.umres-summary-card,
#umres-booking 
.umres-step-panel[data-step="4"] 
.umres-summary-card{
  margin: 0 auto 20px auto !important;
  display: block !important;
  text-align: left;
}

/* 2️⃣ Contenedor del bloque de pago centrado */
.umres-booking-shell 
.umres-step-panel[data-step="4"] 
.umres-pay-box,
.umres-booking-widget 
.umres-step-panel[data-step="4"] 
.umres-pay-box,
#umres-booking 
.umres-step-panel[data-step="4"] 
.umres-pay-box{
  max-width: 420px;
  margin: 0 auto;
}

/* 3️⃣ Fila Medio de pago */
.umres-pay-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

/* Label: "Medio Transbank" */
.umres-pay-label{
  font-size: 14px;        /* ⬆ más grande */
  font-weight: 600;
  color: #334155;
}

/* Valor: "Transbank" */
.umres-pay-value{
  font-size: 15px;        /* ⬆ más protagonista */
  font-weight: 700;
  color: #0f172a;
}

/* 4️⃣ TOTAL */
.umres-booking-shell 
.umres-step-panel[data-step="4"] 
.umres-pay-row:last-child,
.umres-booking-widget 
.umres-step-panel[data-step="4"] 
.umres-pay-row:last-child,
#umres-booking 
.umres-step-panel[data-step="4"] 
.umres-pay-row:last-child{
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}

/* Texto TOTAL */
.umres-booking-shell .umres-pay-row:last-child .umres-pay-label,
.umres-booking-widget .umres-pay-row:last-child .umres-pay-label,
#umres-booking .umres-pay-row:last-child .umres-pay-label{
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

/* Monto TOTAL */
.umres-booking-shell .umres-pay-row:last-child .umres-pay-value,
.umres-booking-widget .umres-pay-row:last-child .umres-pay-value,
#umres-booking .umres-pay-row:last-child .umres-pay-value{
  font-size: 17px;        /* ⭐ protagonista */
  font-weight: 800;
  color: #2f56ff;
}
/* ==================================================
   PASO 4 (PAGO) — AJUSTES: ESPACIADO + BOTONES DERECHA
   ================================================== */

/* Dar aire entre resumen y bloque de pago (bajar Medio/Total) */
.umres-booking-shell .umres-step-panel[data-step="4"] .umres-pay-box,
.umres-booking-widget .umres-step-panel[data-step="4"] .umres-pay-box,
#umres-booking .umres-step-panel[data-step="4"] .umres-pay-box{
  margin-top: 18px;              /* 🔽 baja el pago para que respire */
}

/* Medio y Total más juntos */
.umres-booking-shell .umres-step-panel[data-step="4"] .umres-pay-row,
.umres-booking-widget .umres-step-panel[data-step="4"] .umres-pay-row,
#umres-booking .umres-step-panel[data-step="4"] .umres-pay-row{
  margin-top: 6px;               /* antes 12 */
  gap: 10px;
}

/* Reducir separación del "Total" (la línea divisoria estaba dando mucho aire) */
.umres-booking-shell .umres-step-panel[data-step="4"] .umres-pay-row:last-child,
.umres-booking-widget .umres-step-panel[data-step="4"] .umres-pay-row:last-child,
#umres-booking .umres-step-panel[data-step="4"] .umres-pay-row:last-child{
  margin-top: 4px;               /* 🔼 más pegado a Medio */
  padding-top: 8px;
  border-top: 1px solid #e2e8f0;
}

/* Botonera a la derecha */
.umres-booking-shell .umres-step-panel[data-step="4"] .umres-form-footer,
.umres-booking-widget .umres-step-panel[data-step="4"] .umres-form-footer,
#umres-booking .umres-step-panel[data-step="4"] .umres-form-footer{
  display: flex !important;
  justify-content: flex-end !important;  /* ✅ derecha */
  align-items: center !important;
  gap: 10px !important;
  margin-top: 16px !important;
  width: 100% !important;
}

/* Por si los botones vienen envueltos o con auto-margin */
.umres-booking-shell .umres-step-panel[data-step="4"] .umres-form-footer > *,
.umres-booking-widget .umres-step-panel[data-step="4"] .umres-form-footer > *,
#umres-booking .umres-step-panel[data-step="4"] .umres-form-footer > *{
  margin: 0 !important;
}
/* ==================================================
   PASO 4 (PAGO) — FIX REAL: filas compactas + botones derecha
   ================================================== */

/* Bloque pago: centrado pero con aire arriba */
.umres-booking-shell .umres-step-panel[data-step="4"] .umres-pay-box,
.umres-booking-widget .umres-step-panel[data-step="4"] .umres-pay-box,
#umres-booking .umres-step-panel[data-step="4"] .umres-pay-box{
  max-width: 520px !important;
  margin: 22px auto 0 !important;     /* 🔽 baja el bloque (respira) */
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;                 /* Medio/Total más juntos */
}

/* Cada fila: 2 columnas (label/valor) bien alineadas */
.umres-booking-shell .umres-step-panel[data-step="4"] .umres-pay-row,
.umres-booking-widget .umres-step-panel[data-step="4"] .umres-pay-row,
#umres-booking .umres-step-panel[data-step="4"] .umres-pay-row{
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  column-gap: 16px !important;
  margin: 0 !important;               /* 🔥 elimina espacios raros */
  padding: 0 !important;
}

/* Texto: un poco más grande */
.umres-booking-shell .umres-step-panel[data-step="4"] .umres-pay-label,
.umres-booking-widget .umres-step-panel[data-step="4"] .umres-pay-label,
#umres-booking .umres-step-panel[data-step="4"] .umres-pay-label{
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #334155 !important;
}

/* Valor (Transbank / $2.000) */
.umres-booking-shell .umres-step-panel[data-step="4"] .umres-pay-value,
.umres-booking-widget .umres-step-panel[data-step="4"] .umres-pay-value,
#umres-booking .umres-step-panel[data-step="4"] .umres-pay-value{
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  justify-self: end !important;
}

/* Total destacado */
.umres-booking-shell .umres-step-panel[data-step="4"] .umres-pay-row:last-child .umres-pay-value,
.umres-booking-widget .umres-step-panel[data-step="4"] .umres-pay-row:last-child .umres-pay-value,
#umres-booking .umres-step-panel[data-step="4"] .umres-pay-row:last-child .umres-pay-value{
  font-size: 17px !important;
  color: #2f56ff !important;
}

/* Botones: a la derecha real */
.umres-booking-shell .umres-step-panel[data-step="4"] .umres-form-footer,
.umres-booking-widget .umres-step-panel[data-step="4"] .umres-form-footer,
#umres-booking .umres-step-panel[data-step="4"] .umres-form-footer{
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important; /* ✅ derecha */
  gap: 10px !important;
  margin-top: 14px !important;
}
/* ==================================================
   PASO 4 (PAGO) — FORZAR LAYOUT (SIN FALLAR)
   ================================================== */

/* 1) Bajar el bloque de pago para que respire */
.umres-step-panel[data-step="4"] .umres-pay-box{
  margin-top: 22px !important;
}

/* 2) Medio y Total más juntos + bien alineados (label izq / valor der) */
.umres-step-panel[data-step="4"] .umres-pay-row{
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  column-gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Compactar el espacio entre filas */
.umres-step-panel[data-step="4"] .umres-pay-row + .umres-pay-row{
  margin-top: 6px !important;
}

/* 3) Botones a la derecha del todo */
.umres-step-panel[data-step="4"] .umres-form-footer{
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: 16px !important;
}

/* 4) Hacer textos un poco más grandes */
.umres-step-panel[data-step="4"] .umres-pay-label{
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #334155 !important;
}

.umres-step-panel[data-step="4"] .umres-pay-value{
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  justify-self: end !important;
}

/* Total destacado */
.umres-step-panel[data-step="4"] [data-umres-pay-amount]{
  font-size: 17px !important;
  font-weight: 900 !important;
  color: #2f56ff !important;
}
