/* =========================================
   YITH – People & Rooms Focus + Button Style
   Booking buttons YITH (FINAL)
   ========================================= */

/* ===============================
   BACKDROP (DESKTOP ONLY)
   =============================== */

#ra-focus-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.22);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:9998;
}

/* Enable blur ONLY on desktop */
@media (min-width:768px){
  body.ra-focus-open #ra-focus-backdrop{
    opacity:1;
    pointer-events:auto;
  }

  /* Bring People & Rooms above blur (desktop) */
  body.ra-focus-open .yith-wcbk-form-section-persons-wrapper,
  body.ra-focus-open .yith-wcbk-people-selector,
  body.ra-focus-open .yith-wcbk-people-selector__fields-container{
    position:relative;
    z-index:9999;
  }
}

/* ===============================
   ROOMS BUTTON
   =============================== */

.ra-rooms-toggle{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  padding:12px 18px !important;
  border-radius:999px !important;
  border:1px solid rgba(0,180,216,0.45) !important;
  background:#ffffff !important;
  color:#0b63b7 !important;
  font-weight:900 !important;
  font-size:13px !important;
  letter-spacing:.02em !important;
  cursor:pointer !important;
  transition:all .15s ease !important;
}

.ra-rooms-toggle:hover{
  background:rgba(0,180,216,0.10) !important;
  border-color:#00b4d8 !important;
  color:#0b63b7 !important;
}

.ra-rooms-toggle.is-open{
  background:linear-gradient(135deg,#0b63b7,#00b4d8) !important;
  color:#ffffff !important;
  border-color:transparent !important;
}

/* ===============================
   ROOMS CONTAINER
   =============================== */

.ra-rooms-container{
  display:none;
  margin-top:10px;
}

.ra-rooms-container.is-open{
  display:block;
}

/* ===============================
   MOBILE: NO BLUR + INLINE OPEN (PUSH DOWN)
   =============================== */

@media (max-width:767px){
  /* absolutely no blur / overlay layer */
  #ra-focus-backdrop{display:none !important;}
  body.ra-focus-open{overflow:auto !important;}

  /* IMPORTANT:
     YITH sometimes positions the opened container as overlay.
     Force it to be inline so it pushes content down (services). */
  .yith-wcbk-people-selector--opened .yith-wcbk-people-selector__fields-container{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    z-index:auto !important;
    margin-top:12px !important;
    width:100% !important;
    max-width:100% !important;
    box-shadow:0 14px 26px rgba(15,23,42,0.10) !important;
  }
}