/* ==================================================
   MotoPress Booking – SKIN GLOBAL (Datepicker + Cards resultados)
================================================== */

/* ================= VARIABLES ================= */
:root{
  --mphb-box-bg: #e6eaef;
  --mphb-box-border: #bfc7d1;
  --mphb-shadow: 0 14px 30px rgba(0,0,0,.18);

  --mphb-field-bg: #ffffff;
  --mphb-field-border: #d0d7e2;
  --mphb-text: #111827;
  --mphb-muted: #6b7280;

  --mphb-primary: #52b4cc;
  --mphb-primary-hover: #3aa7c2;

  --mphb-radius: 14px;
  --mphb-field-radius: 6px;

  --mphb-icon-size: 18px;
  --mphb-icon-left: 14px;
  --mphb-pad-left: 46px;

  /* Cards resultados */
  --mphb-card-border: #d0d7e2;
  --mphb-card-pad: 18px;
  --mphb-card-gap: 22px;
}

/* ==================================================
   1) BOOKING FORM (DATE PICKER) – TU BLOQUE ORIGINAL
================================================== */

/* CONTENEDOR */
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class{
  background-color: var(--mphb-box-bg) !important;
  border: 1px solid var(--mphb-box-border) !important;
  border-radius: var(--mphb-radius) !important;
  padding: 30px !important;
  box-shadow: var(--mphb-shadow) !important;
}

.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class .elementor-widget-container,
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class .mphb-booking-form{
  background: transparent !important;
}

/* TEXTO SUPERIOR */
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-required-fields-tip{
  display: block !important;
  margin-bottom: 16px !important;
  font-size: 13px !important;
  color: var(--mphb-muted) !important;
}

/* LAYOUT */
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-booking-form{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 16px;
  row-gap: 16px;
}

.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-check-in-date-wrapper,
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-check-out-date-wrapper,
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-reserve-btn-wrapper,
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-required-fields-tip,
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-errors-wrapper{
  grid-column: 1 / -1;
}

@media (max-width: 520px){
  .mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
  .mphb-booking-form{
    grid-template-columns: 1fr !important;
  }
}

/* LABELS */
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-booking-form label{
  display: block !important;
  margin-bottom: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
}

.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-booking-form abbr{
  color: var(--mphb-muted);
  text-decoration: none;
  margin-left: 4px;
}

/* CAMPOS (input + select) */
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-booking-form input[type="text"],
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-booking-form select{
  width: 100% !important;
  height: 52px !important;
  background-color: var(--mphb-field-bg) !important;
  border: 1px solid var(--mphb-field-border) !important;
  border-radius: var(--mphb-field-radius) !important;
  font-size: 15px !important;
  color: var(--mphb-text) !important;
  line-height: 52px !important;
  padding: 0 44px 0 var(--mphb-pad-left) !important;
  box-shadow: none !important;
  outline: none !important;
}

.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-booking-form input[type="text"]:focus,
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-booking-form select:focus{
  border-color: rgba(82,180,204,.9) !important;
  box-shadow: 0 0 0 3px rgba(82,180,204,.18) !important;
}

/* ICONO CALENDARIO (FECHAS) */
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class{
  --mphb-cal-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 2v2M17 2v2' stroke='%2352b4cc' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M3.5 9h17' stroke='%2352b4cc' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M6 5h12a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z' stroke='%2352b4cc' stroke-width='2'/%3E%3C/svg%3E");
  --mphb-user-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4Z' stroke='%2352b4cc' stroke-width='2'/%3E%3Cpath d='M4 20a8 8 0 0 1 16 0' stroke='%2352b4cc' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --mphb-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%238a97a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
input.mphb-datepick,
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
input.mphb_datepicker,
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
input[id^="mphb_check_in_date"],
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
input[id^="mphb_check_out_date"]{
  background-image: var(--mphb-cal-icon) !important;
  background-repeat: no-repeat !important;
  background-position: var(--mphb-icon-left) center !important;
  background-size: var(--mphb-icon-size) var(--mphb-icon-size) !important;
}

/* SELECT: USUARIO + FLECHA */
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-capacity-wrapper select{
  background-image: var(--mphb-user-icon), var(--mphb-arrow-icon) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: var(--mphb-icon-left) center, right 14px center !important;
  background-size: var(--mphb-icon-size) var(--mphb-icon-size), 18px 18px !important;
}

.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class select{
  appearance: none !important;
  -webkit-text-fill-color: var(--mphb-text) !important;
  color: var(--mphb-text) !important;
}

/* BOTÓN */
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-reserve-btn{
  width: 100% !important;
  height: 56px !important;
  border-radius: 6px !important;
  background: var(--mphb-primary) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border: 0 !important;
  box-shadow: 0 10px 22px rgba(82,180,204,.35) !important;
}

.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-reserve-btn:hover{
  background: var(--mphb-primary-hover) !important;
}

/* ERRORES */
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-errors-wrapper{
  font-size: 13px !important;
  color: #b91c1c !important;
}



/* =========================================================
   BOOKING GALLERY — CSS FINAL (HERO + STRIP) — AJUSTADO
   - Sin border-radius en imágenes
   - Gap 1px
   - HERO padding 0
   Clases en Dynamic Field:
   - HERO  -> booking-hero (Image Gallery Grid)
   - STRIP -> booking-strip (Image Gallery Slider)
========================================================= */

/* ---------- Variables base (DESKTOP) ---------- */
:root{
  --booking-gap: 1px;          /* ✅ gap entre imágenes (HERO) y slides (STRIP) */
  --hero-strip-gap: 1px;       /* ✅ separación entre HERO y STRIP */
  --booking-radius: 0px;       /* ✅ sin redondeo */

  --hero-pad-t: 0px;           /* ✅ HERO sin padding */
  --hero-pad-x: 0px;
  --hero-pad-b: 0px;

  --strip-pad-y: 10px;
  --strip-pad-x: 25px;

  --strip-slide-w: 210px;
  --strip-img-h: 140px;

  --strip-slide-w-m: 180px;
  --strip-img-h-m: 120px;
}

/* ---------- MOBILE overrides ---------- */
@media (max-width: 768px){
  :root{
    --booking-gap: 1px;        /* ✅ también 1px en mobile */
    --hero-strip-gap: 1px;
    --booking-radius: 0px;

    --hero-pad-t: 0px;         /* ✅ HERO sin padding */
    --hero-pad-x: 0px;
    --hero-pad-b: 0px;

    --strip-pad-y: 10px;
    --strip-pad-x: 16px;
  }
}

/* =========================================================
   HERO (JetEngine Image Gallery GRID)
========================================================= */

.booking-hero,
.booking-hero *{
  box-sizing: border-box !important;
}

/* anti shrink-to-fit: forzar 100% */
.booking-hero,
.booking-hero .elementor-widget-container,
.booking-hero .jet-listing,
.booking-hero .jet-listing-dynamic-field,
.booking-hero .jet-listing-dynamic-field__inline-wrap,
.booking-hero .jet-listing-dynamic-field__content{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* por si JetEngine mete display-inline */
.booking-hero .jet-listing-dynamic-field.display-inline{
  display: block !important;
}

/* GRID — Desktop por defecto */
.booking-hero .jet-engine-gallery-grid{
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr !important; /* grande + 3 cols */
  grid-template-rows: 1fr 1fr !important;            /* 2 filas */
  gap: var(--booking-gap) !important;                /* ✅ 1px */

  width: 100% !important;
  max-width: 100% !important;
  justify-items: stretch !important;
  align-items: stretch !important;

  padding: 0 !important;                             /* ✅ HERO padding 0 */
  margin: 0 0 var(--hero-strip-gap) 0 !important;    /* ✅ 1px */
}

/* Item base */
.booking-hero .jet-engine-gallery-grid__item{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 0 !important;                       /* ✅ sin radius */

  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;

  float: none !important;
  flex: none !important;
  display: block !important;

  justify-self: stretch !important;
  align-self: stretch !important;

  aspect-ratio: 16 / 9 !important;
}

/* 1ra imagen grande: ocupa 2 filas */
.booking-hero .jet-engine-gallery-grid__item:nth-child(1){
  grid-column: 1 / 2 !important;
  grid-row: 1 / 3 !important;
}

/* Desktop: mostrar 7 (1 + 6) */
.booking-hero .jet-engine-gallery-grid__item:nth-child(n+8){
  display: none !important;
}

/* Wrap y IMG al 100% */
.booking-hero .jet-engine-gallery-grid__item-wrap{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

.booking-hero img.jet-engine-gallery-grid__item-img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  max-width: none !important;
  border-radius: 0 !important;                       /* ✅ sin radius */
}

/* Mobile HERO: derecha pasa a 2x2 (oculta 6 y 7) */
@media (max-width: 768px){
  .booking-hero .jet-engine-gallery-grid{
    grid-template-columns: 2fr 1fr 1fr !important; /* grande + 2 cols */
    grid-template-rows: 1fr 1fr !important;
  }

  /* Mobile: mostrar 5 (1 + 4) */
  .booking-hero .jet-engine-gallery-grid__item:nth-child(n+6){
    display: none !important;
  }
}

/* =========================================================
   STRIP (JetEngine Image Gallery SLIDER / Swiper)
========================================================= */

.booking-strip,
.booking-strip *{
  box-sizing: border-box !important;
  box-shadow: none !important;
}

/* wrapper del strip */
.booking-strip{
  padding: var(--strip-pad-y) var(--strip-pad-x) !important;
  margin: 0 !important;
}

/* instancia slider ocupa todo */
.booking-strip :is(.swiper, .jet-engine-gallery-slider, .jet-engine-gallery-slider__instance){
  width: 100% !important;
}

/* wrapper: gap consistente */
.booking-strip .swiper-wrapper{
  align-items: stretch !important;
  gap: var(--booking-gap) !important;                /* ✅ 1px */
}

/* slides */
.booking-strip :is(.swiper-slide, .jet-engine-gallery-slider__slide){
  width: var(--strip-slide-w) !important;
  flex: 0 0 var(--strip-slide-w) !important;

  border-radius: 0 !important;                       /* ✅ sin radius */
  overflow: hidden !important;

  background: transparent !important;
  border: 0 !important;
}

/* imágenes del strip */
.booking-strip img{
  width: 100% !important;
  height: var(--strip-img-h) !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;                       /* ✅ sin radius (no inherit) */
}

/* icono + off */
.booking-strip .jet-engine-lightbox-icon{
  display: none !important;
}

/* flechas (las dejo como estaban) */
.booking-strip :is(.swiper-button-prev, .swiper-button-next){
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.12) !important;

  top: 50% !important;
  transform: translateY(-50%) !important;
}

.booking-strip :is(.swiper-button-prev:after, .swiper-button-next:after){
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #111 !important;
}

/* sin puntitos */
.booking-strip .swiper-pagination{
  display: none !important;
}

/* Mobile STRIP */
@media (max-width: 768px){
  .booking-strip :is(.swiper-slide, .jet-engine-gallery-slider__slide){
    width: var(--strip-slide-w-m) !important;
    flex-basis: var(--strip-slide-w-m) !important;
  }
  .booking-strip img{
    height: var(--strip-img-h-m) !important;
  }
}


/*  CABANIA SINGLE  */

/* ================================
   MotoPress: Banner de precio (como la imagen)
   Fondo: #52B4CC
   Oculta "Precio desde:"
================================== */

p.mphb-regular-price{
  /* reset del <p> */
  margin: 0 !important;

  /* look del “badge” */
  background: #52B4CC;
  color: #fff;
  padding: 14px 18px;
  border-radius: 4px;

  /* centrado y en una sola línea */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

/* Ocultar el strong "Precio desde:" */
p.mphb-regular-price > strong{
  display: none !important;
}

/* Precio (incluye $ y monto) */
p.mphb-regular-price .mphb-price{
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
}

/* Separación entre $ y el número */
p.mphb-regular-price .mphb-currency{
  margin-right: 4px;
  font-weight: 700;
}

/* “por noche” estilo más chico */
p.mphb-regular-price .mphb-price-period{
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  opacity: .95;
}

/* Mobile: un toque más compacto */
@media (max-width: 480px){
  p.mphb-regular-price{
    padding: 12px 14px;
  }
  p.mphb-regular-price .mphb-price{ font-size: 20px; }
  p.mphb-regular-price .mphb-price-period{ font-size: 15px; }
}

/* ----*/

/* =====================================================
   Contenedor (banner) + botón centrado, estético
   Fondo del banner: #52B4CC
   (Ajustá el selector del contenedor si tu HTML es otro)
===================================================== */

/* Banner (por si lo estás usando como contenedor del botón también) */
.mphb-regular-price{
  background: #52B4CC;
  padding: 18px 18px;              /* + aire arriba/abajo */
  border-radius: 4px;
}

/* Si el botón está dentro del mismo bloque/contendor, lo centramos */
.mphb-regular-price,
.mphb-regular-price + .mphb-book-button,
.mphb-booking-form{
  text-align: center;               /* fallback si el botón es inline-block */
}

/* Botón MotoPress (reserva) */
.mphb-book-button,
.mphb-book-button .button,
.mphb-booking-form .mphb-book-button,
.mphb-booking-form input[type="submit"],
.mphb-booking-form button[type="submit"]{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  margin: 12px auto 0 !important;   /* centrado + separación desde el banner */
  padding: 14px 26px !important;    /* más alto y “premium” */
  border-radius: 6px !important;

  background: #52B4CC !important;   /* fondo solicitado */
  color: #fff !important;

  border: 0 !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  text-decoration: none !important;
}

/* Hover */
.mphb-book-button:hover,
.mphb-book-button .button:hover,
.mphb-booking-form input[type="submit"]:hover,
.mphb-booking-form button[type="submit"]:hover{
  filter: brightness(0.95);
}

.button.mphb-book-button{
  font-weight: 700;
}

.mphb-to-book-btn-wrapper form{
  text-align: center;
  padding-top: 30px
}

/* Mobile: un poco más compacto */
@media (max-width: 480px){
  .mphb-book-button,
  .mphb-book-button .button,
  .mphb-booking-form input[type="submit"],
  .mphb-booking-form button[type="submit"]{
    width: auto;
    padding: 13px 22px !important;
  }
}


/* =========================================================
   FIX LIGHTBOX MOBILE (no se puede cerrar / overflow ancho)
   Pegalo AL FINAL de todo tu CSS
========================================================= */
@media (max-width: 768px){

  /* 1) Que el overlay SIEMPRE entre en pantalla */
  .dialog-lightbox-widget,
  .elementor-lightbox,
  .mfp-wrap,
  .pswp,
  .fancybox__container,
  .lg-outer{
    max-width: 100vw !important;
    width: 100vw !important;
  }

  /* 2) Contenedor interno del lightbox (Elementor dialog) */
  .dialog-lightbox-widget .dialog-lightbox-message,
  .dialog-lightbox-widget .dialog-message{
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
  }

  /* 3) La imagen/video dentro del lightbox NO puede superar el viewport */
  .dialog-lightbox-widget img,
  .dialog-lightbox-widget video,
  .elementor-lightbox img,
  .elementor-lightbox video{
    max-width: 100vw !important;
    max-height: calc(100vh - 70px) !important; /* deja lugar para la X */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* 4) La X siempre visible dentro del viewport (Elementor) */
  .dialog-close-button,
  .dialog-close-button.dialog-lightbox-close-button{
    position: fixed !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    z-index: 999999 !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
  }

  /* 5) Si otra capa “tapa” la X, esto lo arregla */
  .dialog-lightbox-widget{
    z-index: 999998 !important;
  }

  /* 6) Otros close típicos (por si no usa el dialog de Elementor) */
  .mfp-close,
  .pswp__button--close,
  .fancybox__button--close,
  .lg-close{
    position: fixed !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    z-index: 999999 !important;
  }

  /* 7) Evita “scroll raro” cuando está abierto */
  html.dialog-lightbox-open,
  body.dialog-lightbox-open{
    overflow: hidden !important;
    width: 100% !important;
  }
}


/* =========================================================
   FIX FINAL 2 — RESULTADO DE DISPONIBILIDAD / PRECIO / CTA
   - Evita que el bloque quede en una sola columna
   - Centra nuevamente precio y botón confirmar reserva
   - Solo afecta al formulario dentro del booking box
========================================================= */

/* Hacer que el bloque de resultado ocupe todo el ancho del grid */
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-booking-form > .mphb-rooms-quantity-wrapper,
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-booking-form > .mphb-available-room-info,
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-booking-form > .mphb-reserve-room-section,
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-booking-form > .mphb-rooms-reservation-message-wrapper,
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-booking-form > .mphb-room-type-title,
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-booking-form > .mphb-to-book-btn-wrapper,
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-booking-form > p.mphb-regular-price{
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}

/* Si MotoPress agrupa precio + botón dentro de un wrapper extra */
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-reserve-room-section,
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-rooms-reservation-message-wrapper,
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-to-book-btn-wrapper,
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-to-book-btn-wrapper form{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  text-align: center !important;
}

/* Textos de disponibilidad a ancho completo */
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-rooms-quantity-wrapper,
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-available-room-info,
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-room-type-title{
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Precio dentro del formulario: centrado y sin romperse */
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
p.mphb-regular-price,
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-regular-price{
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 14px 18px !important;
  white-space: nowrap !important;
}

/* Botón confirmar: wrapper completo + botón centrado */
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-to-book-btn-wrapper{
  grid-column: 1 / -1 !important;
  justify-self: stretch !important;
}

.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-to-book-btn-wrapper form{
  display: block !important;
  padding-top: 12px !important;
}

.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-book-button,
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-book-button .button,
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-booking-form .mphb-book-button,
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-booking-form input[type="submit"],
.mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
.mphb-booking-form button[type="submit"]{
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Seguridad extra mobile */
@media (max-width: 480px){
  .mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
  p.mphb-regular-price,
  .mphb_sc_booking_form-wrapper.is-style-default.mphbs-fluid-button.booking-class
  .mphb-regular-price{
    padding: 12px 14px !important;
  }
}