/*ocultar contenido cuando carga la pagina*/
/* =====================
   1) Tipografías y base
===================== */
/*@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:wght@600;700&display=swap*/



.principal-fechas {
  margin-top: 100px !important;
}

.mt-75 {
  margin-top: 75%;
}



:root{
  --brand-beige:#d3b485;
  --brand-brown:#3f2318;
  --card-border:#e6ebf2;
  --text-dark:#1f2937;
  --text-muted:#666;
  --ring:#e7e9ee;
  --ink:#222;
  --muted:#6b7280;
}
body{background:#d7d7cf;color:#1f2937;}
.buscador-habitaciones-container{max-width:1200px;margin:0 auto;padding:20px;}

/* =========================
   2) STEP 1: barra encabezado
========================= */
.form-busqueda-hotel{
  max-width:900px;width:70%;margin:0px auto 26px;
  padding:12px 14px;background:#fff;border-radius:12px;
  box-shadow:0 14px 30px rgba(0,0,0,.12);gap:16px;display:flex;align-items:center;
  border:1px solid var(--ring);
}

.form-busqueda-hotel>h3{display:none!important;}

.step-header{display:flex;align-items:center;gap:10px;margin:0 0 10px;}
.form-busqueda-hotel .step-header.step-1{gap:12px;margin-right:6px!important;}
.step-header h3{
  margin:0;font-family:"EB Garamond",serif;font-weight:700;font-size:24px;color:#2a2a2a;line-height:1;
}
.step-header .step-badge{
  width:36px;height:36px;border-radius:999px;background:#2b2b2b;color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:18px;box-shadow:0 6px 14px rgba(0,0,0,.15);
}

/* Píldoras de fechas */
#rango-fechas{position:absolute!important;opacity:0!important;width:0!important;height:0!important;pointer-events:none!important;}
.campo-fechas{flex:1 1 auto;}
.date-range-ui{display:flex;align-items:center;gap:12px;width:100%;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;min-height:auto!important;}
.date-pill{background:transparent!important;border:0!important;min-width:auto!important;height:auto!important;padding:0!important;font-size:16px!important;line-height:1!important;color:#111827!important;}
.date-sep{margin:0 14px!important;font-weight:600!important;color:#2a2a2a!important;}

/* Botón buscar */
#buscar-btn{
  flex:0 0 auto;height:40px;padding:0 16px;border:0;border-radius:10px;
  font-weight:700;font-size:14px;line-height:1;color:#fff;background:var(--brand-beige);
  cursor:pointer;transition:background .2s;box-shadow:0 6px 14px rgba(211,180,133,.35);
}
#buscar-btn:hover:enabled{background:#b79769;}
#buscar-btn:disabled{background:#9e9a94;cursor:not-allowed;}

/* =========================
   3) Layout 2 columnas
========================= */

.contenedor_habitaciones{opacity: 0;visibility: hidden;}


.layout-apply.is-active{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(340px,1fr);gap:28px;align-items:start;}
@media (max-width:900px){.layout-apply.is-active{grid-template-columns:1fr;}}
.step-header.step-2{max-width:1200px;margin:0 auto 12px;}

/* =========================
   4) Cards de habitaciones
========================= */
.cards-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch;}
@media (max-width:900px){.cards-grid{grid-template-columns:1fr;}}

.room-card{
  background:#fff;border:1px solid #ddd6c9;border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.16);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .12s ease,box-shadow .25s ease;
}
.room-card:hover{transform:translateY(-2px);box-shadow:0 24px 54px rgba(0,0,0,.22);}

.room-media{padding:14px 14px 0;border-radius:14px;overflow:hidden;position:relative;}
.room-media .bh-card-gallery{width:100%;aspect-ratio:4/3;border-radius:10px;background:#f3f3f3;}
.room-media .bh-g-viewport{width:100%;height:100%;overflow:hidden;border-radius:8px;}
.room-media .bh-g-track{display:flex;height:100%;}
.room-media .bh-g-slide{flex:0 0 100%;height:100%;}
.room-media img{width:100%!important;height:100%!important;object-fit:cover;display:block;border-radius:10px;}

.room-media .bh-g-prev,
.room-media .bh-g-next{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:999px;background:#fff;
  border:1px solid rgba(0,0,0,.15);box-shadow:0 8px 18px rgba(0,0,0,.18);
  display:flex;align-items:center;justify-content:center;z-index:3;cursor:pointer;
  font-size:20px;line-height:1;font-weight:700;color:#1f1f1f;
}
.room-media .bh-g-prev{left:30px;}
.room-media .bh-g-next{right:30px;}
.room-media .bh-g-prev::before,
.room-media .bh-g-next::before{content:none!important;}

.room-body{padding:10px 14px 14px;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;gap:10px;}
.room-title{font-family:"EB Garamond",serif;font-size:22px;font-weight:700;color:#222;margin:8px 0 4px!important;}
.room-desc{font-size:13.5px;line-height:1.45;color:#333;margin:0 0 6px!important;}
.room-price{display:flex;align-items:baseline;gap:8px;margin-top:6px!important;}
.price-cop{font-weight:800;font-size:18px;color:#111;}
.price-cop .cur{font-size:12px;margin-left:4px;opacity:.9;}
.price-dates{margin-left:auto;font-size:12px;color:#666;}

.room-actions{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.room-actions .btn-outline,
.room-actions .btn-solid{
  min-height:44px;border-radius:999px;padding:0 16px;
  font-size:14px;font-weight:700;letter-spacing:.2px;white-space:nowrap;
}
.room-actions .btn-outline{background:#fff;color:#111!important;border:1px solid #111!important;}
.room-actions .btn-outline:hover{background:#111;color:#fff!important;}
.room-actions .btn-solid{background:#1f1f1f!important;border:1px solid #1f1f1f!important;color:#fff!important;}
.room-actions .btn-solid:hover{filter:brightness(1.08);}

/* =========================
   5) Panel derecho Apply Here
========================= */

.col-apply{
  position:sticky;top:24px;z-index:1;background:#fff;border:1px solid var(--card-border);
  border-radius:16px;padding:16px 18px 18px;box-shadow:0 18px 42px rgba(0,0,0,.22);
}
/*
@media (min-width: 1024px) {
.col-apply {
   
    position: fixed;
    z-index: 333;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 16px 18px 18px;
    right: 10%;
    top: 32%;
    width: 27%;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .22);
}
}
*/

@media (max-width:900px){.col-apply{position:static;}}

.apply-head{display:flex;align-items:center;gap:12px;margin:0 0 10px;}
.apply-head .step-badge{
  width:36px;height:36px;border-radius:999px;background:var(--brand-beige);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:16px;box-shadow:0 10px 22px rgba(211,180,133,.45);
}
.apply-head h3{margin:0;font-family:"EB Garamond",serif;font-weight:700;font-size:24px;color:#2a2a2a;line-height:1;}

.apply-row-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px;}
.apply-row-head .label-inline{font-weight:600;color:#2a2a2a;font-size:14px;}

.stepper{display:inline-flex;align-items:center;gap:10px;transform:translateY(-2px);}
.stepper .sbtn{
  width:22px;height:22px;border-radius:999px;border:1px solid #d8dde7!important;
  background:#fff!important;color:#1f1f1f!important;display:grid;place-items:center;
  line-height:1;font-weight:700;padding:0;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.08);
}
.stepper #adults-count{min-width:12px;text-align:center;font-weight:700;}

.apply-fields{display:flex;flex-direction:column;margin:6px 0 12px;}
.apply-fields :is(input,select){
  min-height:23px;padding:8px 10px;border-radius:10px;border:1px solid #e6e9ef;background:#f3f5f8;font-size:14px;
}
.apply-fields :is(input,select)::placeholder{color:#8b93a3;}
.apply-fields :is(input,select):focus{background:#fff;border-color:#c9ced7;}

.apply-vertical .btn-siguiente,
.apply-card .btn-siguiente{
  width:100%;height:56px;border-radius:16px;background:#d3b485;color:#fff;
  font-weight:700;font-size:17px;border:none;box-shadow:0 10px 22px rgba(211,180,133,.35);
text-align:center;
}
.apply-vertical .btn-siguiente:hover{background:#b69768;}
.apply-card .btn-ghost,
.apply-vertical .btn-ghost{
  height:56px;border-radius:16px;background:transparent;border:1px solid var(--brand-beige);
  color:var(--brand-beige);box-shadow:0 10px 22px rgba(211,180,133,.25);
}
.apply-card .btn-ghost:hover,
.apply-vertical .btn-ghost:hover{background:rgba(211,180,133,.10);}
.apply-card .btn-ghost:active,
.apply-vertical .btn-ghost:active{transform:translateY(1px);}

/* =========================
   6) Limpieza del builder
========================= */
.e-con,.elementor-section,.elementor-container,.elementor-widget{background:transparent!important;background-image:none!important;}
#contenedor-habitaciones img{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;border-radius:0!important;}

/* =========================
   7) Apply Card (multi-step)
========================= */
.apply-card .apply-fields input,
.apply-card .apply-fields select,
.apply-card .apply-fields textarea{
  width:100%;display:block;border:1px solid #e6e6e6;background:#eef1f4;
  border-radius:12px;padding:14px 16px;font-size:16px;line-height:3.2;color:#2b2b2b;
  outline:none;transition:box-shadow .15s,border-color .15s,background .15s;appearance:none;
}
.apply-card .apply-fields input::placeholder,
.apply-card .apply-fields textarea::placeholder{color:#8b929a;}
.apply-card .apply-fields select:invalid{color:#8b929a;}
.apply-card .apply-fields input:focus,
.apply-card .apply-fields select:focus,
.apply-card .apply-fields textarea:focus{border-color:#d9c09a;box-shadow:0 0 0 3px rgba(217,192,154,.25);background:#f3f6f8;}
.apply-card .apply-fields .error{border-color:#ff6b6b!important;box-shadow:0 0 0 3px rgba(255,107,107,.2);}
.apply-card .apply-fields>*+*{margin-top:14px;}

.apply-card .botones-inline{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:520px){.apply-card .botones-inline{grid-template-columns:1fr;}}

/* Checkboxes (compactos, redondos) */
.apply-card .checkbox-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin:6px 0 8px;}
.apply-card .checkbox-group .checkbox-title{grid-column:1/-1;font-weight:700;color:#2b2b2b;margin-bottom:4px;}
.apply-card .chk{display:flex;align-items:center;gap:8px;font-size:15px;color:#2b2b2b;}
.apply-card .chk input[type="checkbox"]{
  appearance:none;width:16px;height:16px;border-radius:50%;border:2px solid #d7b98c;background:#fff;
  position:relative;cursor:pointer;outline:none;transition:all .15s;
}
.apply-card .chk input[type="checkbox"]:hover{border-color:#caa874;}
.apply-card .chk input[type="checkbox"]:checked{background:#d7b98c;border-color:#d7b98c;box-shadow:0 0 0 2px rgba(215,185,140,.18);}
.apply-card .chk input[type="checkbox"]:checked::after{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 6l4 4L15 1' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px 8px no-repeat;
}

/* Modo compacto para inputs/selects */
.apply-card.compact .apply-fields input,
.apply-card.compact .apply-fields select{
  height:56px;background:#f3f3f3;border:0;border-radius:16px;padding:0 16px;
  font-size:16px;color:#2b2b2b;box-shadow:inset 0 1px 0 rgba(0,0,0,.03);
}
.apply-card.compact .apply-fields input::placeholder{color:#8a8a8a;}
.apply-card.compact .apply-fields select{
  padding-right:42px;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:20px 20px;
}
.apply-card.compact .apply-fields>*+*{margin-top:12px;}
.apply-card.compact .btn-siguiente,
.apply-card.compact .btn-ghost{height:56px;border-radius:16px;}

/* Ajuste global checkbox si algún builder lo pisa */
input[type="checkbox"]{height:22px!important;}

/* =========================
   Responsive pack
========================= */
/* ≤1024px */
@media (max-width:1024px){
  .buscador-habitaciones-container{padding:16px;}
  .layout-apply.is-active{grid-template-columns:1fr;}
  .col-apply{margin-top:16px;}
}
/* ≤768px */
@media (max-width:768px){
  .form-busqueda-hotel{
    display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;
    grid-column-gap:12px;grid-row-gap:10px;align-items:center;
  }
  

  .form-busqueda-hotel .step-header.step-1{grid-column:1/-1;}
  .form-busqueda-hotel .campo-fechas{grid-column:1/-1;}
  #buscar-btn{grid-column:2/3;grid-row:2/3;height:44px;}
  .date-sep{margin:0 10px!important;}
  .room-media .bh-g-prev,.room-media .bh-g-next{width:34px;height:34px;font-size:18px;}
  .apply-head h3{font-size:22px;}
  .apply-card .checkbox-group{grid-template-columns:1fr;}
}
/* ≤480px */
@media (max-width:480px){
	.campo-fechas {
    justify-self: anchor-center;
}

@media (max-width: 1199px){
  	.form-busqueda-hotel { width: 66% !important;}
  }

  .buscador-habitaciones-container{padding:12px 10px;}
  .form-busqueda-hotel{grid-template-columns:1fr;gap:10px;padding:10px 12px;border-radius:10px;}
  #buscar-btn{grid-column:1/-1;width:100%;height:42px;}
  .date-range-ui{gap:8px;}
  .date-pill{font-size:15px!important;}
  .cards-grid{gap:16px;}
  .col-apply{padding:14px;border-radius:14px;}
  .apply-head .step-badge{width:32px;height:32px;font-size:15px;}
  .apply-head h3{font-size:20px;}
  .apply-row-head .label-inline{font-size:13px;}
  .stepper .sbtn{width:20px;height:20px;}
  .apply-fields :is(input,select){font-size:15px!important;padding:10px 12px!important;}
  .apply-vertical .btn-siguiente,.apply-card .btn-siguiente{height:50px;border-radius:14px;font-size:16px;}
  .room-media .bh-g-prev,.room-media .bh-g-next{width:30px;height:30px;font-size:16px;}
}
/* ≤360px */
@media (max-width:360px){
  .apply-card.compact .apply-fields input,.apply-card.compact .apply-fields select{height:50px;border-radius:14px;}
  .apply-card .checkbox-group{gap:8px;}
}

/* =========================
   Lightbox de habitaciones
========================= */
.room-lightbox{position:fixed;inset:0;z-index:9999;display:none;background:rgba(0,0,0,.92);}
.room-lightbox.is-open{display:block;}
.room-lightbox__stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:48px 72px;}
.room-lightbox__img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.35);}

/* Close (X) */
.room-lightbox__close{
  position:absolute;top:16px;right:16px;width:46px;height:46px;border-radius:999px;
  background:transparent;border:2px solid var(--brand-beige);color:var(--brand-beige);
  display:grid;place-items:center;font-size:22px;cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.25);transition:background .15s,color .15s,transform .06s;
}
.room-lightbox__close:hover{background:var(--brand-beige);color:#fff;}
.room-lightbox__close:active{transform:translateY(1px);}
.room-lightbox__close:focus{outline:none;box-shadow:0 0 0 3px rgba(211,180,133,.35);}

/* Arrows */
.room-lightbox__arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:56px;height:56px;border-radius:999px;background:var(--brand-beige);border:0;color:#fff;
  display:grid;place-items:center;font-size:28px;font-weight:700;
  box-shadow:0 14px 28px rgba(0,0,0,.35);cursor:pointer;user-select:none;
  transition:transform .06s,filter .15s,background .15s;
}
.room-lightbox__arrow--prev{left:16px;}
.room-lightbox__arrow--next{right:16px;}
.room-lightbox__arrow:hover{filter:brightness(.95);}
.room-lightbox__arrow:active{transform:translateY(1px);}
.room-lightbox__arrow:focus{outline:none;box-shadow:0 0 0 3px rgba(211,180,133,.35);}
.room-lightbox__arrow:hover,
.room-lightbox__arrow:focus{color:#d3b485;background:#fff;}

.room-lightbox__counter{
  position:absolute;left:50%;transform:translateX(-50%);bottom:18px;
  color:#fff;font-weight:700;font-size:14px;background:rgba(0,0,0,.45);
  padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.15);
}

/* Móvil */
@media (max-width:520px){
  .room-lightbox__stage{padding:56px 48px;}
  .room-lightbox__arrow{width:46px;height:46px;font-size:24px;}
  .room-lightbox__close{width:42px;height:42px;font-size:20px;}
}

/* Estado AJAX */
#bh-mensaje-estado{ text-align:center; font-size:30px; font-family:"EB Garamond",serif; }


div#reserva-mensaje-estado {
    text-align: center;
}


.btn-group {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 15px;
}

.btn-volver,
.btn-siguiente {
  flex: 1;
  background-color: #d5b992;
  border: none;
  color: #fff;
  font-weight: bold;
  padding: 12px 0;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  text-align: center;
}

.btn-volver:hover,
.btn-siguiente:hover {
  background-color: #c4a87d;
  transform: scale(1.02);
}

.btn-volver {
  background-color: #d5b992; /* mismo color que BOOK NOW */
}

.contenido-reservas {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}

/* Estado oculto */
.oculto {
  opacity: 0;
  visibility: hidden;
}

/* ---- Ajuste estable de espacio superior ---- */
.principal-fechas {
  margin-top: 6rem !important; /* o prueba 5rem si queda muy abajo */
  transition: margin-top 0.3s ease;
}

.layout-apply.is-active .principal-fechas {
  margin-top: 2rem !important;
}

/* Header: mantén z-index más bajo que el layout de habitaciones */
#brx-header, header.brx-header, header.sticky-on-scroll {
  position: relative !important;
  z-index: 1 !important;
}

/* Contenedor principal de habitaciones y formulario */
.layout-apply.is-active {
  position: relative;
  z-index: 5; /* eleva las habitaciones y el formulario por encima del header */
}

/* === DESKTOP / DEFAULT === */
.layout-apply {
  display: flex;
  flex-wrap: nowrap;
  gap: 2rem;
}

.layout-apply .contenedor_habitaciones {
  flex: 2;
}

.layout-apply .formulario_reserva {
  flex: 1;
}

/* === MOBILE: formulario debajo === */
@media (max-width: 768px) {
  .layout-apply {
    flex-direction: column;
  }

  /* habitaciones primero */
  .layout-apply .contenedor_habitaciones {
    order: 1;
  }

  /* formulario al final */
  .layout-apply .formulario_reserva {
    order: 2;
    width: 100%;
    margin-top: 2rem;
  }
}


/* =========================================
   ✅ NUEVA VERSIÓN ESTABLE DEL LAYOUT
   ========================================= */
.layout-apply.is-active {
  display: flex;
  flex-wrap: nowrap;
  gap: 28px;
  align-items: flex-start;
}

/* columnas desktop */
.layout-apply.is-active .col-habitaciones {
  flex: 2;
}

.layout-apply.is-active .col-apply {
  flex: 1;
  position: sticky;
  top: 24px;
}

/* =========================================
   ✅ MOBILE: formulario debajo de habitaciones
   ========================================= */
@media (max-width: 900px) {
  .layout-apply.is-active {
    flex-direction: column;
  }

  .layout-apply.is-active .col-habitaciones {
    order: 1;
  }

  .layout-apply.is-active .col-apply {
    order: 2;
    position: static; /* quita el sticky */
    width: 100%;
    margin-top: 24px;
  }
}
/* =========================================
   CORRECCIÓN: Formulario de búsqueda (Step 1)
   ========================================= */
.form-busqueda-hotel {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

/* Asegura que el bloque de texto y el input no se rompan */
.form-busqueda-hotel .step-header {
  flex-shrink: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Campo de fecha */
.form-busqueda-hotel input[type="text"],
.form-busqueda-hotel input[type="date"] {
  min-width: 220px;
  height: 44px;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 15px;
}

/* Campo de búsqueda */
.form-busqueda-hotel .search-field,
.form-busqueda-hotel input[type="search"] {
  min-width: 180px;
  height: 44px;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 15px;
}

/* Alineación vertical para pantallas pequeñas */
@media (max-width: 768px) {
  .form-busqueda-hotel {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .form-busqueda-hotel input,
  .form-busqueda-hotel select {
    width: 100%;
  }
}
/* --- Contenedor principal --- */
.layout-apply.is-active {
  display: flex;
  flex-wrap: nowrap;
  gap: 28px;
  align-items: flex-start;
  position: relative; /* 🔑 Necesario para el z-index interno */
  z-index: 0;
}

/* --- Columna de habitaciones --- */
.layout-apply.is-active .col-habitaciones {
  flex: 2;
  z-index: 1;
}

/* --- Columna derecha (formulario) --- */
.layout-apply.is-active .col-apply {
  flex: 1;
  position: sticky;
  top: 24px;
  background: #fff;
  border-radius: 16px;
  padding: 16px 18px 18px;
  box-shadow: 0 18px 42px rgba(0,0,0,0.22);
  z-index: 2; /* 🔑 Eleva el formulario sobre las habitaciones */
}

/* --- MOBILE: el formulario baja debajo --- */
@media (max-width: 900px) {
  .layout-apply.is-active {
    flex-direction: column;
  }

  .layout-apply.is-active .col-habitaciones {
    order: 1;
  }

  .layout-apply.is-active .col-apply {
    order: 2;
    position: static;
    width: 100%;
    margin-top: 24px;
    z-index: 1; /* reset del sticky */
  }
}