/* =============================== */
/* MOBILE SEARCH MODAL STYLES      */
/* =============================== */

.mobile-search-modal {
  display: flex;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  background: rgba(30,36,48,0.18);
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
  overscroll-behavior: contain;
  overflow-anchor: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s cubic-bezier(.4,0,.2,1);
}
.mobile-search-modal[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}
.mobile-search-modal[aria-hidden="true"] {
  opacity: 0;
  pointer-events: none;
}

.mobile-search-modal-content {
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  width: 100vw;
  max-width: 100vw;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: contain;
  overflow-anchor: none;
  transform: translateY(40px);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(.4,0,.2,1), opacity 0.32s cubic-bezier(.4,0,.2,1);
  box-sizing: border-box;
}
.mobile-search-modal[aria-hidden="false"] .mobile-search-modal-content {
  transform: translateY(0);
  opacity: 1;
}
.mobile-search-modal[aria-hidden="true"] .mobile-search-modal-content {
  transform: translateY(40px);
  opacity: 0;
}

.mobile-search-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 6px 16px;
  border-bottom: 1px solid #e5e1d8;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 11;
  flex-shrink: 0;
}

.mobile-search-modal-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  overflow-anchor: none;
  padding-bottom: 16px;
  min-height: 0;
}
.mobile-search-modal-title {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #1e2430;
  text-align: center;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: bold;
}
.mobile-search-modal-close {
  background: none;
  border: none;
  font-size: 26px;
  color: #1e2430;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
}
.mobile-search-modal-calendar {
  padding: 10px 16px 0 16px;
}
.mobile-calendar-mount {
  min-height: 120px;
}
.mobile-calendar-mount .daterangepicker,
.mobile-calendar-mount .daterangepicker.calendar-hotel-look,
.daterangepicker.is-mobile-embedded,
.daterangepicker.calendar-hotel-look.is-mobile-embedded {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border: 1px solid #d5cec1;
  box-shadow: none;
  z-index: 1 !important;
}
.mobile-calendar-mount .calendar-placeholder {
  display: none;
}
.calendar-placeholder {
  background: #f8f7f4;
  border-radius: 8px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b8b1a6;
  font-size: 13px;
  font-family: 'Poppins', sans-serif;
}
.mobile-search-modal-guests {
  padding: 10px 16px 0 16px;
}
.mobile-search-modal-guests .guests-panel-labels {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-search-modal-guests .guests-panel-title {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #1e2430;
}
.mobile-search-modal-guests .guests-panel-sub {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  color: #6f7580;
}
.guests-label {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  color: #1e2430;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: 1px;
}
.guests-inputs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.guest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ece7dd;
  padding: 10px 0;
  background: #fff;
}
.guest-row:last-child {
  border-bottom: none;
}
.guest-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.guest-btn {
  width: 22px;
  height: 22px;
  border: 1px solid #d0c8b9;
  background: #fff;
  color: #1f2a3b;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
}
.guest-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.mobile-children-ages {
  padding-top: 10px;
}
.mobile-children-ages .child-age-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.mobile-children-ages .child-age-label {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #303846;
}
.mobile-children-ages .child-age-select {
  width: 126px;
  min-width: 126px;
  border: 1px solid #d2cabd;
  background: #fff;
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
  color: #1e2430;
}
.mobile-guests-validation-msg {
  margin-top: 10px;
}
.mobile-search-modal-promo {
  padding: 10px 16px 80px 16px;
}
.promo-collapse-btn {
  width: 100%;
  background: none;
  border: none;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #1e2430;
  text-align: left;
  letter-spacing: 1px;
  padding: 7px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: color 0.18s;
}
.promo-collapse-btn:active {
  color: #6f7580;
}

.mobile-promo-content {
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s cubic-bezier(.4,0,.2,1), padding 0.28s cubic-bezier(.4,0,.2,1);
}
.mobile-promo-content[aria-hidden="false"] {
  padding: 10px 0;
  max-height: 200px;
  transition: max-height 0.32s cubic-bezier(.4,0,.2,1), padding 0.32s cubic-bezier(.4,0,.2,1);
}

.promo-panel {
  margin-top: 4px;
  padding-bottom: 4px;
}
.promo-input {
  width: 100%;
  border: 1px solid #d6d0c7;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 8px;
}
.promo-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.promo-cancel-btn,
.promo-apply-btn {
  flex: 1;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #d6d0c7;
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
  transition: all 0.18s;
}
.promo-cancel-btn {
  background: #f5f3f0;
  color: #1e2430;
}
.promo-cancel-btn:active {
  background: #e8e3db;
}
.promo-apply-btn {
  background: #d8be6f;
  color: #1e2430;
  border-color: #d8be6f;
}
.promo-apply-btn:active {
  background: #c7a94e;
}

/* Ajustar el contenedor del botón de búsqueda para que sea una caja fija al final de la ventana */
.mobile-search-btn-container {
  position: sticky;
  bottom: 0;
  width: 100%;
  background: #fff;
  border-top: 1px solid #d6d0c7;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  z-index: 12;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Ajustar el botón de búsqueda dentro del contenedor */
.mobile-search-btn {
  width: 100%;
  margin: 0 auto;
  background: #d8be6f;
  color: #1e2430;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 700;
  border: none;
  border-radius: 0px;
  padding: 14px 0;
  letter-spacing: 1.2px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(30,36,48,0.06);
  transition: background 0.18s;
}
.mobile-search-btn:active {
  background: #c7a94e;
}

.mobile-search-modal.is-keyboard-open .mobile-search-btn-container {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

.mobile-search-modal.is-keyboard-open .mobile-search-modal-body {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-search-modal .mobile-search-btn-container {
  transition: transform 0.22s ease, opacity 0.22s ease;
  overflow-anchor: none;
}

html.mobile-search-lock,
body.mobile-search-lock {
  overflow: hidden;
  overscroll-behavior: none;
  height: 100%;
}

/* Mover el texto "Buscar" al inicio del modal */
.mobile-search-modal-title {
  text-align: center;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: bold;
}

/* Mobile-only search header (new structure) */
.search-filters-mobile{
  display:none;
}

.mobile-date-trigger{
  width:100%;
  min-height:52px;
  border:1px solid #b8b1a6;
  background:transparent;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#1e2430;
  cursor:pointer;
}

.mobile-date-left{
  display:flex;
  align-items:center;
  gap:12px;
}

.mobile-date-left i{
  color:#9d988f;
  font-size:16px;
}

.mobile-date-value{
  font-family:'Poppins', sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.8px;
  text-transform:uppercase;
  color:#1e2430;
}

.mobile-date-trigger .fa-chevron-right{
  font-size:14px;
  color:#1e2430;
}

@media (max-width: 1400px){
  .page{
    width:100% !important;
    padding:18px 10px 186px;
  }

  .services-fixed-footer-inner{
    padding:10px 10px 12px;
  }

  .services-fixed-header{
    align-items:flex-start;
    gap:10px;
  }

  .services-fixed-title{
    font-size:17px;
  }

  .services-fixed-subtitle{
    max-width:440px;
    font-size:12px;
  }

  .services-fixed-grid{
    grid-auto-columns:max-content;
    gap:0;
  }

  .services-fixed-item{
    min-height:46px;
    padding:6px 12px;
  }

  .room-card{
    grid-template-columns:1fr;
    min-height:0;
    margin-top:12px;
  }

  .availability-empty-state{
    margin-top:12px;
    grid-template-columns:minmax(0, 56%) minmax(0, 44%);
  }

  .availability-empty-state::before{
    left:56%;
    background-size:cover;
    background-position:center center;
  }

  .availability-empty-state::after{
    top:0;
    right:44%;
    bottom:0;
    left:0;
    background:
      linear-gradient(90deg, rgba(250, 247, 241, 0.96) 0%, rgba(250, 247, 241, 0.92) 70%, rgba(250, 247, 241, 0.72) 88%, rgba(250, 247, 241, 0.54) 100%),
      radial-gradient(circle at 20% 20%, rgba(195, 161, 98, 0.2) 0, rgba(195, 161, 98, 0) 46%);
  }

  .availability-empty-state-inner{
    min-height:260px;
    padding:24px 16px;
    gap:11px;
  }

  .availability-empty-title{
    font-size:30px;
    line-height:1.16;
  }

  .availability-empty-copy{
    font-size:14px;
    line-height:1.55;
  }

  .availability-empty-cta{
    width:100%;
    justify-content:center;
    padding:12px 16px;
    letter-spacing:0.1em;
  }

  .room-image{
    padding:0;
  }

  .room-image img{
    height:280px;
  }

  .room-content{
    padding:14px 14px 16px;
  }

  .room-title{
    font-size:42px;
    line-height:1.12;
    margin-bottom:12px;
  }

  .small-note,
  .room-capacity,
  .details-link,
  .offer-title{
    letter-spacing:2px;
  }

  .room-meta-footer{
    margin-top:14px;
    padding-top:12px;
    gap:16px;
    flex-wrap:wrap;
  }

  .room-meta-text{
    font-size:14px;
  }

  .room-description{
    line-height:1.55;
  }

  .offer-section{
    margin-top:18px;
    padding-top:16px;
    flex-direction:column;
    gap:14px;
  }

  .offer-right{
    width:100%;
    align-items:flex-start;
    margin-top:0;
  }

  .reservation-btn,
  .reserve-btn,
  .next-btn{
    width:100%;
    height:44px;
  }

  .reservation-btn-cart-hint{
    width:100%;
    text-align:left;
  }

  .night-note{
    margin-top:8px;
    font-size:14px;
  }

  .gallery-modal{
    padding:12px;
  }

  .gallery-content{
    padding:14px;
  }

  .gallery-slide{
    height:62vh;
  }

  .gallery-nav{
    width:40px;
    height:40px;
  }

}

@media (max-width: 1100px){
  .search-filters-desktop{
    display:none !important;
  }

  .search-filters-mobile{
    display:block;
    margin-top:14px;
  }

  .availability-empty-state{
    grid-template-columns:1fr;
  }

  .availability-empty-state::before{
    left:0;
    -webkit-mask-image:none;
    mask-image:none;
    opacity:0.34;
  }

  .availability-empty-state::after{
    right:0;
    background:
      linear-gradient(180deg, rgba(250, 247, 241, 0.9) 0%, rgba(250, 247, 241, 0.82) 42%, rgba(250, 247, 241, 0.72) 100%),
      radial-gradient(circle at 18% 22%, rgba(195, 161, 98, 0.2) 0, rgba(195, 161, 98, 0) 46%);
  }

  .availability-empty-state-inner{
    grid-column:1 / -1;
    min-height:260px;
  }
}

@media (max-width: 640px){
  .page{
    padding-bottom:180px;
  }

  .services-fixed-header{
    margin-bottom:8px;
  }

  .services-fixed-eyebrow{
    font-size:9px;
    letter-spacing:1.4px;
  }

  .services-fixed-title{
    font-size:15px;
  }

  .services-carousel-controls{
    gap:6px;
  }

  .services-carousel-btn{
    width:30px;
    height:30px;
  }

  .services-fixed-grid{
    grid-auto-columns:max-content;
    gap:7px;
  }

  .services-fixed-item{
    min-height:42px;
    padding:5px 10px;
    gap:8px;
  }

  .services-fixed-item i{
    width:24px;
    min-width:24px;
    height:24px;
    font-size:12px;
  }

  .services-fixed-label{
    font-size:9px;
  }

  .room-title{
    font-size:34px;
  }

  .room-meta-footer{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }

  .room-meta-night-note{
    margin-left:0;
  }

  .room-meta-item i{
    font-size:12px;
  }

  .room-meta-text{
    font-size:13px;
  }

  .availability-empty-state-inner{
    min-height:250px;
    padding:20px 14px;
  }

  .availability-empty-title{
    font-size:46px;
    line-height:0.98;
    max-width:300px;
  }

  .availability-empty-copy{
    max-width:300px;
  }
}