/* BASE DEL HEADER DE RESERVAS: header, menú lateral, calendario, WhatsApp y scroll, igual que en los otros sitios.
   Va en su propio archivo para no tocar el style.css del sitio */

:root{
    --white: #fff;
    --black: #000;

    --grey-50: #f6f6f4;
    --grey-100: #f0f0f0;
    --grey-200: #e1ddd6;
    --grey-300: #ccc;
    --grey-400: #b9b9b9;
    --grey-500: #a5a5a5;
    --grey-600: #6d6e70;
    --grey-700: #606060;
    --grey-800: #3d3d3d;
    --grey-900: #2c2c2c;
    --grey-950: #1a1a1a;

    --gold: #326a6e;
}

/* HEADER
   ----------------------------- */

header.header{
   /*position: sticky;*/
   top: 0;
   left: 0;
   width: 100%;
   z-index: 9999;
   user-select: none;
   transition: all 0.3s ease;
   border-bottom: 1px solid transparent;
   background: var(--white);
   padding: 20px 0;
}
header.header .c-wrap{
    max-width: 1180px;
    padding: 0 50px;
    margin: 0 auto;
}


header.header figure.logo{
   position: relative;
   z-index: 1;
}
header.header figure.logo img{
   width: 190px;
   height: auto;
   display: block;
   transition: all 0.6s cubic-bezier(.25,1,.33,1);
}
header.header .box{
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 80px;
}


header.header .form-wrap{
   position: relative;
   z-index: 1;
   width: 100%;
}
header.header .form-wrap form{
   display: flex;
   align-items: center;
   gap: 40px;
   width: 100%;
}
header.header .form-wrap .field-group{
   width: 100%;
}
header.header .form-wrap select.c-select,
header.header .form-wrap input.c-input{
   padding: 8px 0;
   border: 0;
   width: 100%;
   font-size: 15px;
   color: var(--black);
   border-bottom: 1px solid var(--grey-400);
   font-family: 'Muller Regular';
}
header.header .form-wrap select.c-select option{
   padding: 10px;
}
header.header .form-wrap [type="submit"]{
   cursor: pointer;
   background: var(--gold);
   display: inline-block;
   color: var(--white);
   text-transform: uppercase;
   letter-spacing: 1px;
   width: 100%;
   transition: background 0.15s ease;
   white-space: nowrap;

   max-width: 200px;

    font-weight: bold;
    border-radius: 0px;
    display: block;
    text-align: center;
    padding: 12px 10px;
    border: 0;
    font-family: 'Muller',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
header.header .form-wrap [type="submit"]:hover{
   opacity: 0.9;
}
header.header .form-wrap label{
   display: block;
   text-transform: uppercase;
   font-size: 13px;
   color: var(--grey-700);
   font-family: 'Muller Regular';
   line-height: 1;
}
header.header .form-wrap select.c-select{
   cursor: pointer;
   background: none;
   outline: none;
   border-radius: 0;
   -webkit-appearance: none;
   appearance: none;
   padding: 8px;
}


.flatpickr-innerContainer{
   margin-top: 10px;
}

.nights-tooltip{
   position: fixed;
   transform: translate(-50%, -100%);
   background: var(--grey-800);
   color: var(--white);
   font-size: 12px;
   padding: 4px 10px;
   border-radius: 4px;
   white-space: nowrap;
   pointer-events: none;
   opacity: 0;
   z-index: 100000001;
   transition: opacity 0.15s ease;
}
.nights-tooltip.is--visible{
   opacity: 1;
}

/* MOBILE MENU
   ----------------------------- */

.burger-menu-wrap{
   position: relative;
   z-index: 1;
}
.burger-menu{
   border: 1px solid var(--grey-700);
   padding: 8px;

   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap: 4px;

   width: 38px;
   height: 38px;

}

.burger-menu span{
   display: block;
   width: 100%;
   height: 1px;
   background: var(--grey-700);
   transition: transform 0.3s cubic-bezier(.25,1,.33,1);
   transform: translateY(0px);
}

.burger-menu:hover span:first-child{
   transform: translateY(-2px);
}


.burger-menu:hover span:last-child{
   transform: translateY(2px);
}



.menu-shadow{
   position: fixed;
   top: 0;
   left: 0;
   width: 110vw;
   height: 110vh;
   background: var(--black);
   z-index: 999998;
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.3s cubic-bezier(.25,1,.33,1);
}
body.menu-open .menu-shadow{
   opacity: 0.7;
   pointer-events: initial;
}
.main-menu-wrapper{
    margin-bottom: 30px;
}
.main-menu-wrap {
   user-select: none;
   position: fixed;
   top: 0;
   right: 0;
   transform: translateX(110%);
   width: 350px;
   height: 100vh;
   background: var(--grey-50);
   box-shadow: -5px 0 20px rgba(0,0,0,0.1);
   transition: transform 0.6s cubic-bezier(.25,1,.33,1);
   z-index: 999999;
   display: flex;
   flex-direction: column;
}
.main-menu-wrap .btn-close-menu{
   position: absolute;
   top: 30px;
   right: 30px;
}
.main-menu-wrap .btn-close-menu svg{
   width: 20px;
}

.main-menu-wrap.active {
   transform: translateX(0%);
}

.main-menu-wrap .menu-wrap {
   flex: 1;
   overflow-y: auto;
   padding: 80px 40px 50px 40px;
}

.main-menu {
   list-style: none;
   margin: 0;
   padding: 0;
}

.main-menu li {
   margin-bottom: 20px;
   text-transform: uppercase;
}

.main-menu a {
   text-decoration: none;
   color: var(--grey-700);
   font-size: 16px;
   transition: color 0.3s;
    font-family: 'Muller Regular';
}

.main-menu a:hover {
   color: var(--gold);
}


.sub-menu{
   margin-top: 7px;
}
.sub-menu li{
   margin-bottom: 0;
   padding: 0;
}
.sub-menu li a{
   display: inline-block;
   padding: 3px 5px 3px 12px;
   font-size: 14px;
}
.main-menu .sub-menu {
   display: none;
}

.main-menu .menu-item-has-children.open > .sub-menu {
   display: block;
}

/* DATEPICKER
   ----------------------------- */

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--white) !important;
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  box-shadow: -10px 0 0 var(--gold) !important;
}

.flatpickr-day.week.selected {
  box-shadow: -5px 0 0 var(--gold), 5px 0 0 var(--gold) !important;
}

/* RESPONSIVE
   ----------------------------- */

@media (max-width: 1200px) {
   header.header figure.logo img{
      width: 140px;
   }
   header.header .form-wrap select.c-select,
   header.header .form-wrap input.c-input{
      font-size: 14px;
   }
   header.header .box{
      gap: 30px;
   }
   header.header .form-wrap form{
      gap: 30px;
   }
   header.header .form-wrap [type="submit"]{
      padding: 12px 30px;
   }
    header.header .c-wrap{
        padding: 0 30px;
    }
   header.header{
      padding: 15px 0;
   }
}

@media (max-width: 999px) {
   header.header{
      padding: 0;
   }
   header.header .form-wrap{
      display: none;
   }
   header.header figure.logo img{
      width: 90px;
      min-width: 90px;
   }
   header.header .box{
      padding: 15px 0;
   }
}
@media (max-width: 980px) {

    header.header .c-wrap{
        max-width: 90%;
        padding: 0;
    }
}
@media (max-width: 690px) {

   header.header figure.logo img{
      width: 90px;
      min-width: 90px;
   }
   .main-menu-wrap{
      width: 100%;
   }

   header.header .box{
      padding: 12px 0;
   }
   header.header .box:after{
      left: -20px;
      width: calc(100% + 40px);
   }
   .burger-menu{
      padding: 8px;
      width: 38px;
      height: 38px;
   }


}

/* HEADER EN PANTALLAS AL 125%
   -----------------------------
   Windows al 125% agranda todo. Divi va en px, así que a esa escala se achican al 80% el header de reservas,
   el bloque del formulario y el menú, para que queden del mismo tamaño que al 100%. El menú es fixed con 100vh: el alto se divide por el factor para que cubra la pantalla.
*/
@media (min-resolution: 1.25dppx) and (max-resolution: 1.25dppx){
   .reserva-header-wrap,
   header.header.reserva-bloque{ zoom: 0.8; }
   .main-menu-wrap{ zoom: 0.8; height: calc(100vh / 0.8); }
}

/* WHATSAPP FLOTANTE
   ----------------------------- */
:root{
   --whatsapp: #35d451;
   --whatsapp-dark: #2bab41;
}
.floating-whatsapp {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 3.625rem;
    height: 3.625rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease, transform 0.3s ease;

    background: var(--whatsapp);
    background-image: linear-gradient(var(--whatsapp), var(--whatsapp-dark));
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
}
.floating-whatsapp img {
    width: 2.625rem;
    height: 2.625rem;
}
@media (max-width: 1200px) {
   .floating-whatsapp{
      width: 3.125rem;
      height: 3.125rem;
   }
   .floating-whatsapp img{
      width: 2.3125rem;
      height: 2.3125rem;
   }
}
@media (max-width: 999px) {
   .floating-whatsapp{
      right: 0.625rem;
      bottom: 4.0625rem;
      width: 2.625rem;
      height: 2.625rem;
   }
   .floating-whatsapp img{
      width: 1.875rem;
      height: 1.875rem;
   }
}

/* SCROLL ESTILIZADO (como en los otros sitios), con el tono medio del sitio
----------------------------- */
:root {
   --sb-accent: #326a6e;
   --sb-background: #000;
   --sb-radius: 10px;
   --sb-width: 8px;
}
@-moz-document url-prefix() {
   html {
      scrollbar-width: thin;
      scrollbar-color: var(--sb-accent) var(--sb-background);
   }
}
html::-webkit-scrollbar {
   width: var(--sb-width);
   height: var(--sb-width);
}
html::-webkit-scrollbar-track {
   background: var(--sb-background);
}
html::-webkit-scrollbar-thumb {
   background-color: var(--sb-accent);
   border-radius: var(--sb-radius);
}
html::-webkit-scrollbar-button {
   display: none !important;
   width: 0 !important;
   height: 0 !important;
}