/* ===========================================================
   Hoteles Ferré – Estilos principales (sitio estático)
   =========================================================== */

/* --------- Colores / utilidades --------- */
:root{
  --gold:#f2b90c;
  --gold-200:#ffc72c;
  --gold-300:#c5a47e;
  --dark:#1a1a1a;
  --dark-2:#221f14;
  --dark-3:#332e1f;
  --border:#4a3b1d;
  --light-gold:#cbbc90;
}

.gold-text{ color:var(--gold); }
.gold-bg{ background-color:var(--gold); }
.gold-border{ border-color:var(--gold); }
.dark-bg{ background-color:var(--dark); }
.light-gold-text{ color:var(--light-gold); }
.header-border{ border-color:var(--border); }
.button-text-dark{ color:var(--dark); }
.text-button-text-dark{ color:var(--dark); }
.hover\:gold-text:hover{ color:var(--gold); }
.hover\:bg-yellow-400:hover{ background-color:var(--gold-200); }
.bg-yellow-500{ background-color:var(--gold); }

/* --------- Tipografía --------- */
body, .font-sans, .font-serif,
h1,h2,h3,h4,h5,h6,p,a,span:not(.material-icons-outlined),
div,button,input,select,textarea{
  font-family:'Bai Jamjuree',sans-serif !important;
}
.material-icons-outlined{ font-family:'Material Icons Outlined' !important; }
html,body{ scroll-behavior:smooth; }

/* Inputs fecha */
input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(0.8) sepia(0.5) saturate(5) hue-rotate(10deg);
}
input[type="date"]{ color-scheme:dark; }

/* Selects */
select option{
  background-color:var(--dark-3);
  color:#fff;
}

/* --------- HEADER con scroll (estado original) --------- */
#main-header{
  padding-top:1rem; padding-bottom:1rem;
  transition:all .3s ease;
}
#main-header.header-scrolled{
  padding-top:.5rem; padding-bottom:.5rem;
  background-color: rgba(26,26,26,.8);
  backdrop-filter: blur(8px);
  border-color: var(--border);
  box-shadow:0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
}
/* Al scrollear, el logo (img del header) baja a 4rem (h-16) */
#main-header.header-scrolled img{ height:4rem; } /* h-16 */

/* --------- HERO secciones con degradado --------- */
.hero-miraflores,
.hero-boulevard,
.hero-machupicchu,
.hero-ankara,
.hero-sanmarino{
  background-size:cover;
  background-position:center;
  position:relative;
}
.hero-miraflores::before,
.hero-boulevard::before,
.hero-machupicchu::before,
.hero-ankara::before,
.hero-sanmarino::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(26,26,26,.85) 0%, rgba(26,26,26,.2) 60%, transparent 100%);
  z-index:1;
}
/* Imagenes (ajusta nombres a los reales en /img/) */
.hero-miraflores { background-image:url('/img/Malecón-Miraflores-1.jpg'); }
.hero-boulevard  { background-image:url('/img/aguasca.png'); }
.hero-machupicchu{ background-image:url('/img/Mapi\ Hero.png'); }   /* antes: “Mapi Hero.png” */
.hero-ankara     { background-image:url('/img/Ankara\ Hero.png'); } /* antes: “Ankara Hero.png” */
.hero-sanmarino  { background-image:url('/img/san_marino/paisaje_portada.png'); }

/* --------- HABITACIONES (desktop) --------- */
.room-item-desktop{
  transition: all .4s cubic-bezier(.25,.8,.25,1);
}
.room-item-desktop:hover{
  transform:translateX(10px);
  background-color: rgba(197,164,126,.05);
}
.room-item-wrapper.active .room-item-desktop{
  border-color:var(--gold);
  background-color: rgba(197,164,126,.1);
  transform:translateX(10px);
}
.room-item-desktop h3{ transition: color .3s ease; }
.room-item-wrapper.active .room-item-desktop h3{ color:var(--gold); }

/* Imagen principal derecha (desktop) */
#room-image{ transition: opacity .5s ease, transform .5s ease; }
#room-image-container.group:hover #room-image{ transform:scale(1.05); }

/* --------- HABITACIONES (acordeón móvil) --------- */
.room-item-mobile .room-item-header{
  cursor:pointer; user-select:none;
  border-top:1px solid rgba(242,185,12,.15);
  border-bottom:1px solid rgba(242,185,12,.15);
}
.room-item-mobile .room-item-header h3{ transition: color .3s ease; }
.room-item-wrapper.active .room-item-mobile .room-item-header h3{ color:var(--gold); }

.room-item-mobile .room-details-content{
  display:none;
  overflow:hidden;
  max-height:0;
  transition:max-height .45s ease;
  background: rgba(197,164,126,.06);
  border-radius:.5rem;
}
.room-item-mobile .room-details-content img{
  width:100%; height:auto; object-fit:cover; display:block;
}

/* Botón reservar (móvil) */
.room-item-mobile .reserve-btn{
  display:inline-block;
  background:var(--gold);
  color:var(--dark);
  font-weight:700;
  padding:.5rem 1.5rem;
  border-radius:.375rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  transition: background-color .2s ease, transform .15s ease;
}
.room-item-mobile .reserve-btn:hover{
  background:var(--gold-200);
  transform:translateY(-1px);
}

/* --------- MODAL / Lightbox --------- */
#image-modal{ transition:opacity .3s ease; }
.modal-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background-color:rgba(0,0,0,.5); color:#fff;
  border-radius:50%; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: background-color .3s ease; z-index:110;
}
.modal-nav:hover{ background-color:rgba(0,0,0,.8); }
.modal-nav.left-4{ left:1rem; } .modal-nav.right-4{ right:1rem; }
.modal-nav span{ font-size:2.5rem; }

/* --------- Galería --------- */
.gallery-item{
  overflow:hidden;
  border-radius:1rem; /* ~ rounded-2xl */
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari fix */
}
.gallery-item img{
  width:100%; height:100%;
  object-fit:cover;
  transition: transform .5s ease-in-out;
  display:block;
}
.gallery-item:hover img{ transform: scale(1.10); }

/* --------- Swiper (si se usa) --------- */
#sedes-slider .swiper-container{
  width:100%; padding-top:50px; padding-bottom:50px;
}
#sedes-slider .swiper-slide{
  background-position:center; background-size:cover;
  width:440px; height:660px; border-radius:.75rem; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  transition: transform .4s ease, opacity .4s ease;
}
#sedes-slider .swiper-slide-shadow-left,
#sedes-slider .swiper-slide-shadow-right{ background-image:none; }
#sedes-slider .swiper-button-next,
#sedes-slider .swiper-button-prev{
  color:var(--gold); background-color:rgba(0,0,0,.5);
  border-radius:9999px; width:44px; height:44px;
  transition: background-color .3s, opacity .3s;
  top:50%; transform:translateY(-50%); opacity:.7; z-index:10;
}
#sedes-slider .swiper-button-next:hover,
#sedes-slider .swiper-button-prev:hover{
  background-color: rgba(242,185,12,.8); color:var(--dark); opacity:1;
}
#sedes-slider .swiper-button-next::after,
#sedes-slider .swiper-button-prev::after{ font-size:22px; font-weight:900; }
#sedes-slider .swiper-button-prev{ left:1rem; }
#sedes-slider .swiper-button-next{ right:1rem; }

/* --- Slider responsivo --- */
@media (max-width:767px){
  #sedes-slider .swiper-slide{
    width:75vw;          /* 75% del ancho pantalla */
    height:112.5vw;      /* proporción 3:2 */
  }
}

/* --------- Booking Sticky --------- */
.booking-form-sticky{
  position:fixed; width:100%; z-index:40; animation: slideDown .3s ease-in-out;
}
@keyframes slideDown{ from{ transform:translateY(-100%);} to{ transform:translateY(0);} }

/* Menú móvil fondo */
#mobile-menu{
  background-color: rgba(26,26,26,.9);
  backdrop-filter: blur(10px);
}

/* Icono rotación submenu móvil */
.rotate-180{ transform:rotate(180deg); }

/* --------- Utilidades Tailwind que podrían no generarse --------- */
.bg-\[\#221f14\]{ background-color:#221f14; }
.bg-\[\#332e1f\]{ background-color:#332e1f; }
.border-gold-border\/50{ border-color: rgba(242,185,12,.5); }
.border-gold-border\/40{ border-color: rgba(242,185,12,.4); }
.border-gold-border\/20{ border-color: rgba(242,185,12,.2); }

/* --------- Parche anti-ocultamiento (por si algún JS deja opacity 0) --------- */
#room-image,
.room-item-wrapper img,
.gallery-item img{
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
}
#room-image-container::before,
#room-image-container::after{ display:none !important; }

/* ===========================================================
   Estilos del Motor de Reservas (jQuery UI)
   =========================================================== */
.eGDS_Search{
  background: var(--dark-2);
  padding: 1rem 2.5rem;
  font-family:'Bai Jamjuree',sans-serif;
  font-size:15px;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end;
  gap:1.5rem;
}
.eGDS_Search > div:not(.childrenAges), .childrenAgeSector{ display:inline-block; margin:0; }
.calendar input, .promocode input{ max-width:104px; }
.eGDS_Search > div.childrenAges{ display:inline-block; }
.eGDS_Search > div > span, .childrenAgeSector label{
  display:block; line-height:1.5; color:var(--light-gold);
  font-size:12px; text-transform:uppercase; font-weight:500; margin-bottom:.25rem;
}
.eGDS_Search > div > input, input.DateFrom, input.DateTo{
  font-family:'Bai Jamjuree',sans-serif;
  padding:.65rem; color:#fff; font-size:14px;
  background-color:var(--dark-3);
  border:1px solid rgba(242,185,12,.5);
  border-radius:.375rem; height:40px;
}
.eGDS_Search > div > select, .childrenAgeSector > select{
  font-family:'Bai Jamjuree',sans-serif;
  padding:.65rem 2rem .65rem .75rem;
  color:#fff; font-size:14px; background-color:var(--dark-3);
  border:1px solid rgba(242,185,12,.5); border-radius:.375rem; height:40px;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23f2b90c' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:right .75rem center; background-size:1em;
}

/* jQuery UI Datepicker (tema oscuro dorado) */
.ui-widget.ui-widget-content{ background:var(--dark-2); border-color:var(--border); color:var(--light-gold); }
.ui-widget-header{ background:var(--dark-3); border-color:var(--border); color:var(--gold); }
.ui-state-default, .ui-widget-content .ui-state-default{
  background:var(--dark-3); border-color:var(--border); color:var(--light-gold); text-align:center;
}
.ui-state-hover, .ui-widget-content .ui-state-hover{
  background:var(--border); border-color:var(--gold); color:#fff;
}
.ui-state-active, .ui-widget-content .ui-state-active{
  background:var(--gold); border-color:var(--gold); color:var(--dark);
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight{
  background:var(--border); border-color:var(--gold); color:#fff;
}
.ui-datepicker-month, .ui-datepicker-year{
  background:var(--dark-3) !important; color:var(--light-gold) !important;
  border:1px solid var(--border) !important; border-radius:4px !important; padding:2px;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next{
  cursor:pointer; border:1px solid var(--border); background:var(--dark-3);
  text-indent:-9999px; overflow:hidden; width:28px; height:28px; top:.5rem; border-radius:4px;
}
.ui-datepicker .ui-datepicker-prev{ left:.5rem; }
.ui-datepicker .ui-datepicker-next{ right:.5rem; }
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover{
  background:var(--border); border-color:var(--gold);
}
.ui-datepicker .ui-icon{ background-image:none; }
.ui-datepicker .ui-datepicker-prev::after,
.ui-datepicker .ui-datepicker-next::after{
  font-family:'Material Icons Outlined'; font-weight:normal; font-size:1.5rem; color:var(--light-gold);
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-indent:0;
}
.ui-datepicker .ui-datepicker-prev::after{ content:'chevron_left'; }
.ui-datepicker .ui-datepicker-next::after{ content:'chevron_right'; }

/* Botón buscar */
.maxSearchBttn{
  position:relative; text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
  background-color:var(--gold); padding:0 1.25rem; color:var(--dark);
  border-radius:.375rem; height:40px; font-weight:700;
  transition: background-color .3s, color .3s;
}
.maxSearchBttn:hover{ background-color:var(--gold-200); color:var(--dark); }