// Los iconos como fuente se pueden quitar de viajes cuando se migre toda la parte antigua a maquetacion con svg

//Iconos de Destinia (como fuente)
@font-face {
  font-family: 'iconos_illusion';
  src:url('/headers/ilusion/fonts/iconos_illusion_v01.eot');
  src:url('/headers/ilusion/fonts/iconos_illusion_v01.eot?#iefix') format('embedded-opentype'),
  url('/headers/ilusion/fonts/iconos_illusion_v01.woff') format('woff'),
  url('/headers/ilusion/fonts/iconos_illusion_v01.ttf') format('truetype'),
  url('/headers/ilusion/fonts/iconos_illusion_v01.svg#iconos_viajes') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="viajes"], [class*=" icon-"] {
  font-family: 'iconos_illusion';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}
@media speech {
  [class^="viajes"], [class*=" icon-"] {
    speak: none;
  }
}


@import '../../../components/travel/_legacy_content_wrapper.scss';

@import '../../../components/travel/breadcrumb/packageservices/_breadcrumb.scss';

@import '../../../components/travel/services_summary/_service_hotel.scss';
@import '../../../components/travel/services_summary/_packageservices_category.scss';
@import '../../../components/travel/services_summary/_packageservices_lighttransport.scss';
@import '../../../components/travel/services_summary/_packageservices_additionalservices.scss';
@import '../../../components/travel/services_summary/_packageservices_activities.scss';
@import '../../../components/travel/mswaitpagewidget/_mswaitpagewidget.scss';
@import '../../../components/travel_package_review';

//CSS de la disponibilidad de hoteles nueva
@import "../hotels_availability";
@import "../room_selection";

//CSS de la disponibilidad de vuelos
@import '../../../../sass/web/availability/_flights.scss';

//Personalización para viaje de clases en SCSS ajeno
@import '../../../../sass/web/availability/travel/packageservices_custom.scss';

@import '../../../components/travel/services_summary/_itinerary.scss';
@import '../../../components/travel/services_summary/_itinerary_packageservices.scss';

@import '../../../../sass/web/availability/_hotel_category_selection.scss';

@media (max-width: 767px) {
  #btnArriba {
    &.showBtnArriba {
      display: none;
    }
  }
}
.msavailability-layout {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  &__element {
    &--review {
      order: 1;
      flex: 1 0 100%;
      padding: 0 15px;
      .extra-buttons {
        margin-top: 20px;
        .customer-helpbox + .btn-primary {
          margin-top: 15px;
        }
        @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md-max) {
          flex: 1 0 100%;
          display: flex;
          gap: 15px;
          align-items: flex-start;
          .customer-helpbox + .btn-primary {
            margin-top: 0;
          }
        }
        > .btn-primary {
          width: 100%;
        }

        .lateral-review-finish-reservation-button {
          @media (max-width: $screen-md-max) {
            display: none;
          }
          .finish_reservation_button {
            width: 100%;
            margin-bottom: 15px;
            border-radius: 10px;
            &:after {
              display: none;
            }
          }
        }
      }
      .customer-helpbox {
        display: block;
        .customer-helpbox-button {
          position: relative;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          width: 100%;
          z-index: 1;
          border: 1px solid $interactive-color;
          background: #fff;
          color: $interactive-color;
          font-size: 14px;
          font-weight: $roboto-regular !important;
          min-height: 40px;
          justify-content: center;
          span {
            padding-left: 34px;
            line-height: 1;
            &:before {
              width: 23px;
              height: 23px;
              background-size:100%;
            }
          }
        }
        .customer-helpbox-box {
          .customer-helpbox-tittle {
            background: #fff;
            color: $brand-grey-dark;
            min-height: 50px;
            font-size: 16px;
            font-weight: $roboto-regular !important;
            border-bottom: 1px solid $colorBordes;
            display: flex;
            align-items: center;
            justify-content: center;
            @media (min-width: $grid-float-breakpoint) {
              border: 1px solid $interactive-color;
              color: $interactive-color;
              min-height: 40px;
              font-size: 14px;
              border-top-left-radius: 6px;
              border-top-right-radius: 6px;
            }
            span:not(.close-customer-helpbox) {
              padding-left: 34px;
              &:before {
                width: 23px;
                height: 23px;
                background-size:100%;
              }
            }
            .close-customer-helpbox:before {
              background: none;
              display: none;
            }
            @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
              .close-customer-helpbox:before {
                background: none;
                display: none;
              }
            }
            .close-customer-helpbox {
              flex: 0 0 auto;
              margin-left: auto;
              svg {
                &, & * {
                  fill: $brand-grey-dark;
                }
              }
            }
          }
          @media (min-width: $grid-float-breakpoint) {
            position: relative;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            z-index: 1;
          }
        }
      }
    }
    &--selectedservices {
      order: 2;
      flex: 1 0 100%;
    }
    &--availability {
      order: 3;
      flex: 1 0 100%;
      padding: 0 15px;
    }
    @media (min-width: $screen-lg-min) {
      &--review {
        order: 3;
        flex: 1 0 100%;
        max-width: 320px;
        margin-left: 0;
      }
      &--selectedservices {
        order: 1;
        flex: 1 0 100%;
      }
      &--availability {
        order: 2;
        flex: 1 1 auto;
        max-width: 880px;
      }
    }
  }
  &.msavailability-layout--2steps {
    @media (min-width: $screen-lg-min) {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      .msavailability-layout__element {
        &--selectedservices {
          grid-column: 1 / 4;
          grid-row: 3;
        }
        &--review {
          grid-column: 4;
          grid-row: 3 / 5;
          padding-top: 12px;
        }
        &--availability {
          grid-column: 1 / 4;
          grid-row: 4;
        }
      }
    }
  }
}
.hotel_availability_widget {
  .destinia_av_web_hotels_modules_loader {
    background-color: #fff;
  }
  .cont_hotels {
    .dynamic-filters-container {
      display: none;
    }
    .dst-wgt-filters-horizontal{
      @media (max-width: $screen-xs-min) {
        display: none;
      }
    }
  }
}
/* hotel card tweaks */
.selected_hotel, .searched_hotel, .hotel_card {
  margin-bottom: 15px;
}
.msavailability-layout__element--availability .room_selection ul.amenities_icons_hotels li {
  @media (min-width: $screen-sm-min) {
    width: auto;
  }
}

.msavailability-layout__element--availability .widget-transportavailability_horizontal_filter_manager {
  @media (max-width: $screen-xs-min) {
    display: none;
  }
}

.msavailability-layout__element--availability .visible-view-group {
  display: none;
}

.ul.amenities_icons_hotels li svg * {
  fill: $brand-copy-light;
}
.hotel_card .button_availability.btn-cta {
  border-radius: 8px;
  &:after {
    display: none;
  }
}
ul.amenities_icons_hotels li svg, ul.amenities_icons_hotels li svg * {
  fill: $brand-brown-medium;
}
@media (min-width: $screen-sm-min) {
  .hotel_card .general_hotel_information .detail_information_hotel:after {
    border-right: 1px solid #d0cbc9;
  }
}

.msavailability-layout__element--availability .finish_reservation_container {
  @media (min-width: $screen-sm-min) {
    text-align: right;
  }
  @media (min-width: $screen-lg-min) {
    display: none;
  }
}