/* ==================================================
   MotoPress Booking – Skin GLOBAL FINAL
   Aplica a TODOS los accommodation (mphb)
================================================== */

/* ================= 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;
}

/* ================= CONTENEDOR ================= */
/* IMPORTANTE: sin espacio entre clases */
.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;
}

/* Evitar fondos blancos internos (Elementor / theme) */
.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;
}

/* Full width */
.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;
}

/* Mobile */
@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 ================= */
/* ⚠️ CLAVE: usamos background-color, NO background */
.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;
}

/* Focus */
.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_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-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
.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;
}

/* Asegurar texto visible en select */
.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;
}

/*  MARGIN BOTON Y TAMANO TIPO LIGTH BOX   */

.elementor-slideshow__title{
  display: none;
}

.elementor-slideshow__description{
  font-size: 1.2rem!important;
  width: 40%;
  
}

.elementor-slideshow__footer.elementor-lightbox-prevent-close{
  display: flex;
  justify-content:  center;
  margin-top:  10px!important;
}

.swiper-zoom-container{
  margin-bottom:  40px!important;
}















/* =========================================================
   BOOKING GALLERY — CSS FINAL (HERO + STRIP)
   Clases en Dynamic Field:
   - HERO  -> booking-hero (Image Gallery Grid)
   - STRIP -> booking-strip (Image Gallery Slider)
========================================================= */

/* ---------- Variables base (DESKTOP) ---------- */
:root{
  --booking-gap: 12px;          /* gap entre imágenes (HERO) y entre slides (STRIP) */
  --hero-strip-gap: 12px;       /* separación entre bloque HERO y bloque STRIP */
  --booking-radius: 14px;

  --hero-pad-t: 20px;
  --hero-pad-x: 25px;
  --hero-pad-b: 10px;

  --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: 6px;
    --hero-strip-gap: 6px;
    --booking-radius: 6px;

    --hero-pad-t: 16px;
    --hero-pad-x: 16px;
    --hero-pad-b: 8px;

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

/* =========================================================
   HERO (JetEngine Image Gallery GRID)
   Desktop: 1 grande (izq) + derecha 3x2 = 7 imgs (todo 16:9)
   Mobile : 1 grande (izq) + derecha 2x2 = 5 imgs (todo 16:9)
========================================================= */

.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;

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

  padding: var(--hero-pad-t) var(--hero-pad-x) var(--hero-pad-b) var(--hero-pad-x) !important;
  margin: 0 0 var(--hero-strip-gap) 0 !important;
}

/* Item base */
.booking-hero .jet-engine-gallery-grid__item{
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--booking-radius) !important;

  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 (y sigue 16:9) */
.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: var(--booking-radius) !important;
}

/* Mobile HERO: derecha pasa a 2x2 (oculta 6 y 7) y grande más dominante */
@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;
}

/* 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: var(--booking-radius) !important;
  overflow: hidden !important;

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

/* imagenes del strip */
.booking-strip img{
  width: 100% !important;
  height: var(--strip-img-h) !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: inherit !important;
}

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

/* flechas */
.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;
  }
}