/* Importar estilos del cargador de rafagas */
@import "../../../components/common_availability_rafagas";
/* Importar estilos de los filtros */
@import "../../../components/travel/travel_availability_filters";
/* Importar estilos de la cortinilla paso SCR */
@import "../../../components/common_availability_scr_transition";

/* TEMPORALMENTE SE METEN AQUI LAS DISTINTAS VERSIONES DEL RESUMEN DE BUSQUEDA, HASTA QUE SE UNIFIQUEN */
/* Importar estilos del resumen de busqueda comunes */
@import "../../../components/common_availability_top_data";
/* Importar estilos del resumen de busqueda superior para hotel */
@import "../../../components/hotels_availability_top_data";


/* Botonera movil para abrir distintos elementos ocultos en las dispos (filtros, ordenacion, mapa...) */

/*estilos comunes para botonera de dispo hoteles y dispo paquetes vacacionales */
.mobile_navigation_map_filter_order,
.mobile_navigation_filter_order {
  overflow:hidden;
  background:#fff;
  border-top: 1px solid $brand-grey-medium;
  border-bottom: 2px solid $brand-grey-medium;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.12);
  margin: 0 -30px;
  li{
    text-align: center;
    border-right:1px solid $brand-grey-medium;
    flex: 1 0 auto;
    float: none;
    &:last-child{
      border-right:none;
    }
    a{
      font-size:12px;
      border-radius: 0;
      padding: 10px 0;
      text-transform: uppercase;
      &:focus, &:hover {
        background: transparent;
      }
    }
    &.dst-filter-highlighted {
      a:after {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: $brand-primary;
        margin-left: 5px;
      }
    }
  }
  > li + li {
    margin-left: 0;
  }
}
/* Fin Botonera movil para abrir distintos elementos ocultos */

/* barra superior de herramientas de dispo en tablet */


/* num. de alojamientos, vuelos, paquetes... encontrados*/
.num_lodging, .num_journeys, .num_packages {
  &, &  h3 {
    font-size: 16px;
    line-height: 50px;
    margin: 0;
  }
}
/* Mobile */
@media (max-width:$screen-xs-max) {
  .num_lodging, .num_journeys, .num_packages {
    &, &  h3 {
      font-size: $font-size-base;
      line-height: 20px;
      padding-bottom: 10px;
      margin: 0;
    }
  }
}

/* Botones filtrar y ver mapa */
.cont_btn_mix {
  /*border-bottom: 1px solid #e0e0e0;*/
  overflow: hidden;
  padding-bottom: 25px;
  .msavailability-layout & {
    justify-content: space-between;
    align-items: center;
  }
  .btn_mix_filtros {
    border: 1px solid $brand-brown-medium;
    text-align: center;
    color: $brand-grey-alt;
    font-size: 18px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    &:hover{
      border-color: #000;
      color: #000;
    }
    &.pull-right, a {
      border: 0;
      color: $interactive-color;
      &:hover{
        color: $interactive-color-hover;
      }
    }
    &.dst-filter-highlighted {
      &:after {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: $brand-primary;
        margin-left: 5px;
      }
    }
  }
  > div{
    @media (max-width:$screen-xs-max) {
      width:100%;
    }
  }
  .view_map{
    display: block;
    background: none;
    color: $interactive-color;
    padding:10px;
    font-size: 18px;
    line-height: 1;
    border: 0;
    svg{
      width:18px;
      height:18px;
      vertical-align: middle;
      &, & * {
        fill: $interactive-color;
      }
    }
    &, &:hover, &:focus {
      text-decoration: none;
    }
  }
  .filtrar{
    width: 100%;
    padding: 10px;
  }
  svg{
    margin-right:5px;
  }
  .icon-anyfill-graph-location {
    width:14px ;
    height:14px;
  }
  .icon-monochrome-listado {
    width:12px ;
    height:10px;
  }
}

/* Fin botón filtrar y botón ver mapa */

/* Menú ordenación */
.availability_sort_container {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
  @media (max-width: $screen-xs-max){
    display: block;
    margin-bottom:0;
  }
  .msavailability-layout & {
    display: none;
    @media (max-width: $screen-xs-max){
      display: none;
    }
  }
}

.txt_sort{
  border-bottom:1px solid $colorBordes;
  padding:10px 15px;
  text-align: center;
  text-transform: uppercase;
  font-weight:$roboto-light;
  font-size: $font-size-small;
  margin-bottom: 0;
  vertical-align: bottom;
  flex-grow: 0;
  svg {
    display: none;
  }
  @media (max-width: $screen-xs-max){
    display: block;
    box-shadow:0 2px 7px rgba(0, 0, 0, 0.1);
    text-transform: none;
    font-size:18px;
    text-align: center;
    width: 100%;
    border-bottom:0;
    border-top:0;
    float: none;
    position: fixed;
    top: 0;
    left:0;
    z-index:11;
    background:#FFF;
    svg{
      display: inline-block;
      width:37px;
      height:37px;
      position: absolute;
      top:5px;
      left:12px;
      padding:10px;
      &, & * {
        fill: $brand-secondary;
      }
    }
    //Animacion de la capa
    will-change: transform;
    transition: transform $transition-time ease-out;
    transform: translate3d(-100%, 0, 0);
    &::-webkit-scrollbar {
      display: none;
    }
    &.open{
      transform: translate3d(0, 0, 0);
      -webkit-overflow-scrolling: touch;
    }
  }
}
/*rtl:ignore*/
[dir='rtl'] .txt_sort svg{
  transform: rotate(-180deg);
}
ul.availability_sort{
  overflow:hidden;
  border-top-left-radius: $border-radius-large;
  border-top-right-radius: $border-radius-large;
  border:1px solid $colorBordes;
  background:#e3e3e3;
  margin-bottom: 0;
  display: flex;
  vertical-align: bottom;
  flex-grow: 1;
  -webkit-overflow-scrolling: touch;
  @media (max-width: $screen-xs-max) {
    border:0;
    border-radius:0;
    position:fixed;
    top:47px;
    left:0;
    width:100%;
    overflow:hidden;
    background:#FFF;
    z-index:300;
    height:100vh;
    min-height:100vh;
    display: block;
    /**
       * iPhone 5
       * You can also target devices with aspect ratio.
       */
    @media screen and (device-aspect-ratio: 40/71) {
      height: 570px;
    }
    //Animacion de la capa
    will-change: transform;
    transition: transform $transition-time ease-out;
    transform: translate3d(-100%, 0, 0);

    &::-webkit-scrollbar {
      display: none;
    }

    &.open{
      transform: translate3d(0, 0, 0);
    }
  }
  li{
    text-align: center;
    background: $brand-grey-light;
    border-right:1px solid $colorBordes;
    color: $brand-copy-light;
    flex-grow: 1;
    &:last-child{
      border-right:none;
    }
    @media (max-width: $screen-xs-max) {
      width:100%;
      text-align: left;
      border-bottom: 1px solid #827e7a;
      background: none;
      border-right: 0;
    }
    a{
      background: #FFFFFF;
      display:block;
      font-size:$font-size-base;
      color: $brand-copy-light;
      padding:7px;
      border-top:3px solid $colorBordes;
      text-decoration:none;
      font-weight:$roboto-regular;
      width: 100%;
      &:hover {
        background: $menu-hover-bg;
        color: $brand-grey-dark;
        text-decoration:none;
        @include medium-weight;
      }
      &:active, &.selected{
        background:$brand-brown;
        color: #FFF!important;
        border-top:3px solid #6c635a;
        text-decoration:none;
        @include medium-weight;
      }
      @media (max-width: $screen-xs-max) {
        display:block;
        font-size:$font-size-small;
        font-weight: $roboto-regular;
        padding:18px 25px;
        color:#827e7a;
        border-top:0;
        text-transform: uppercase;
        &:hover {
          background: none;
        }
        &:active, &.selected{
          background: none;
          border:none;
          font-weight: $roboto-bold;
          color: #827e7a!important;
        }
        &.selected:after{
          content: '';
          width: 14px;
          height: 14px;
          float: right;
          background-image: url('/headers/ilusion/'+ $assets-folder +'/dist/svg/icon-ownfill-graph-check-027a02.svg'), none;
          background-repeat: no-repeat;
          background-position: 0 0;
          background-size: 100%;
        }
      }
      @media (min-width: $screen-sm) and (max-width: $screen-md-max) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width:100% ;
      }
    }
  }
}

/* fin menú ordenación */

/* Botón ver más resultados */
.hotel_availability_widget, .packages_availability_widget {
  .showMore {
    margin: 25px 0 0 0;
  }
}
/* fin Botón ver más resultados */

/* hoteles no encontrados*/
.results_not_founds_message {
  font-size:14px;
  background-image: url("/headers/ilusion/"+ $assets-folder +"/dist/svg/icon-ownfill-ui-search-beb8b3.svg"), none;
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: 160px 160px;
  min-height: 150px;
  margin:50px 0 0 30px;
  /* tablet portrait */
  @media (min-width: $screen-sm) and (max-width: 1023px) {
    margin:10% 0;
    min-height:651px;
  }
  /* tablet landscape */
  @media (min-width: 1024px) and (max-width: $screen-md-max) {
    margin:9% 0;
  }
  @media (max-width:$screen-xs-max) {
    margin: 15% 0;
  }
  strong{
    font-size: 18px
  }
  ul.filter_delete {
    li{
      padding:0!important;
      a {
      font-size: 14px;
      color: $brand-secondary;
      display: block;
      font-weight: $roboto-light;
        svg {
          width: 10px;
          height: 10px;
          &, & * {
            fill: $brand-grey-dark;
          }
        }
      }
    }
  }
}
/*rtl:ignore*/
[dir='rtl'] ul.filter_delete svg{
  transform: rotate(-180deg);
}
.position-relative{
  position: relative;
}
/* Tooltip Forfait filter */

.filtertooltip {
  display: block;
  width: 300px;
  top: 50px;
  left: 0;
  z-index: 110;
  &.filter_ski{
    &.bottom {
      left:50%;
      top:45px;
      .tooltip-arrow {
        left: 15% !important;
      }
    }
    &.right{
      top:-11px;
      left:255px;
      .tooltip-arrow{
        top:25%;
        left:-9px!important;
        &:after{
          border-right-color: #FFF;
        }
      }
    }
  }

  .tooltip-inner {
    padding-left: 26px;
    padding-right: 40px;
    position: relative;
    .tooltipfilters_close {
      background: transparent;
      border: 0;
      position: absolute;
      top: 14px;
      right: 14px;
      svg {
        width: 10px;
        height: 10px;
        vertical-align: middle;
        &, & * {
          fill: $brand-brown;
        }
      }
    }
    p {
      margin-bottom: 0;
      text-align: left;
      &.titletooltip {
        margin-bottom: 15px;
      }
    }
  }
}


/*rtl:ignore*/
[dir='rtl'] .tooltip.right{
  margin-right:10px;
  margin-left:0;
}
/*rtl:ignore*/
[dir='rtl'] .tooltip.right .tooltip-arrow{
  right: -9px!important;
  border-left-width: 10px;
  border-right-width: 0;
  border-left-color: #999999;
}
/*rtl:ignore*/
[dir='rtl'] .tooltip.right .tooltip-arrow:after{
  right: 1px;
  border-right-width: 0;
  border-left-color: #fff;
  border-left-width:inherit;
}
.detail_information_reservation {
  @media (min-width: $grid-float-breakpoint) {
    padding-right: 10px;
  }
}
/* estilos extras para card de dispo de hoteles y SH */
.txt_extras {
  border-radius:15px;
  font-size:$font-size-base;
  display:inline-block;
  padding:2px 10px;
  margin-bottom:8px;
  background:$brand-primary-light;
  .icon{
    width: 16px;
    height: 16px;
    vertical-align:middle;
    float: left;
    margin-top: 2px;
    margin-right: 5px;
    &, & * {
      fill: $brand-primary;
    }
  }
  .txt_extras-service {
    display: block;
    margin-left: 22px;
  }
}
.extra-rate-services {
  .icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 5px;
    &, & * {
      fill: $brand-primary;
    }
    &.icon-anyfill-graph-occupancyadult, &.icon-anyfill-graph-occupancychild, &.icon-anyfill-graph-occupancybaby {
      width: 18px;
      height: 18px;
      vertical-align: middle;
      margin-right: 5px;
      &, & * {
        fill: $brand-primary;
      }
    }
  }
}
.see-all {
  margin-top: 20px;
}
.scrollBlock {
  position:fixed;
  left: 0;
  right: 0;
}