/* Estilos para la definición de los calendarios de la página de paquete de viaje */
/* Sirven para las dos tipologías: screencalendar y formcalendar */
/* Se contempla un caso excepcional cuando los precios se muestran con monedas largas: .long-currency-calendar */
/* FMC 20/II/2018 */
// #flyplushotel .continente_boton_submit button[type=submit] {}
@import "../../sass/web/packages/packages_modal_custom";

.modal-box-container {
  @media (max-width: $grid-float-breakpoint-max) {
    background-color: #fff;
    overflow: scroll;
  }
  .modal-box {
    .container-close {
      @media (max-width: $grid-float-breakpoint-max) {
        position: fixed;
        width: 100%;
        background-color: #fff;
      }
      .close {
        padding: 15px;
        @media (max-width: $grid-float-breakpoint-max) {
          float: left;
        }
      }
    }
  }
}

/* A esconder cosas */
.more-info,
.flight-and-hotel,
.auto-complete-origin-and-occupation,
.only-occupation
{
  //display: none;
}

/* Texto de entrada */
.calendar-title {
  font-size: 20px;
  @include medium-weight;
  color: $brand-grey-dark;
  text-align: center;
  @media (min-width: $grid-float-breakpoint) {
    font-size: 22px;
    text-align: left;
  }
}
.calendar-title-claim {
  font-size: $font-size-h3;
  font-weight: $roboto-light;
  color: $brand-grey-dark;
  text-align: center;
  margin-bottom: 30px;
}
/* Contenedor de calendarios */
.calendars_container {
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  .bootstrap-datetimepicker-widget {
    .dropdown-menu:before,
    .dropdown-menu:after {
      display: none;
    }
  }
}

.calendar_container {
  /* modal-calendar */
  /*  Caja fondo   */
  .modal-calendar {
    background-color: #fff;
    border-radius: 8px;
    padding: 10px 5px 5px 5px;
    @media (min-width: $grid-float-breakpoint) {
      padding: 15px 15px 15px 15px;
    }
    .calendars_container {
      background-color: #ffffff;
      border-radius: 8px;
      padding-top: 10px;
    }
    .calendar-title {
      color: $brand-grey-dark;
      margin-bottom: 30px;
      margin-top: 35px;
      text-align: center;
      font-size: $font-size-h3;
      font-weight: $roboto-light;
      text-transform: none;
    }
    .continente_boton_submit button[type=submit] {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }

  /* Carrusel */
  .calendars_carousel {

  }
  .months_carousel, .calendars_carousel {
    padding: 0;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 1;
    .owl-prev, .owl-next, .bt-prev, .bt-next {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      position: absolute;
      top: 0;
      display: block;
      border: 0;
      background: none;
      cursor: pointer;
      .btn-nav-text {
        display: none;
        font-size: 18px;
        font-weight: $roboto-light;
        color: $brand-grey-dark;
        padding: 0 10px;
        @media (min-width: $screen-md-min) {
          display: inline-block;
          vertical-align: middle;
        }
      }
      .btn-nav-icon {
        display: inline-block;
        vertical-align: middle;
        border-radius: 20px;
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
        border: solid 1px #dfdfdf;
        background-color: #fff;
        width: 30px;
        height: 30px;
        padding:6px 0;
        @media (min-width: $grid-float-breakpoint) {
          width: 40px;
          height: 40px;
          padding:10px 0;
        }
        svg {
          width: 14px;
          height: 14px;
          @media (min-width: $grid-float-breakpoint) {
            width: 18px;
            height: 18px;
          }
          &, & * {
            fill: $interactive-color;
          }
        }
      }
      &.disabled {
        cursor: default;
        .btn-nav-text {
          color: $brand-brown-medium;
        }
        .btn-nav-icon {
          svg {
            &, & * {
              fill: $brand-brown-medium;
            }
          }
        }
      }
    }
    .owl-prev, .bt-prev {
      left: 0;
    }
    .owl-next, .bt-next {
      right: 0;
    }
  }


  /* Calendario completo */
  .carousel_items {
    overflow: hidden;
    position: relative;
    display: flex;
    gap: 0;
    @media (min-width: $screen-sm-min) {
      gap: 0 20px;
    }
  }
  .carousel_item {
    position: relative;
    flex: 1 1;
    min-height: 1px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }

  /* Calendario mensual */
  .calendar_element {
    border-radius: $border-radius-large;
    width: 100%;
    padding: 0;
    .left-calendar, .right-calendar {
      &:empty {
        position: relative;
        &:before {
          content: "";
          display: block;
        }
        &:before {
          content:'';
          display: block;
          background-image: linear-gradient(45deg, rgba(#ededed, 1) 0, rgba(#ededed, 1) 49%, rgba(#ededed, 0) 50%, rgba(#ededed, 0) 100% );
          background-position: 0 0;
          background-size: 14.28% 16.66%;
          background-repeat: repeat;
          width: 100%;
          position: relative;
          top: 70px;
          margin: 0 auto;
          min-height: 294px;
        }
        &:after {
          content:'';
          display: block;
          background-image: linear-gradient( 90deg, rgba(#fff, 0), rgba(#fff, 0.5) 50%, rgba(#fff, 0) 100% );
          background-position: -100% 0;
          background-size: 50% 100%;
          background-repeat: no-repeat;
          animation: shinelazy 1s infinite;
          width: 100%;
          position: absolute;
          top: 70px;
          margin: 0 auto;
          min-height: 294px;
          z-index: 3;
        }
      }
      @media (min-width: $screen-md-min) {
        &:empty {
          &:before {
            width: 100%;
          }
          &:before, &:after  {
            min-height: 420px;
            top: 85px
          }
        }
      }
    }
    .ball-clip-rotate {
      > div {
        width: 28px;
        height: 28px;
        margin: 0;
        border: 2px solid $brand-grey-dark;
        border-bottom-color: transparent;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  /* Calendarios bootstrap datetimepicker */
  .travel-datetimepicker {
    .table-condensed {
      width: 100%;
      border-spacing: 0;
      margin: 0 auto;
      border-collapse: collapse;
      thead tr:first-child th {
        cursor: default;
        &:hover {
          background: transparent;
        }
      }
      th.picker-switch {
        text-align: center;
        text-transform: none;
        padding: 5px 0;
        font-size: 18px;
        @include medium-weight;
        color: $brand-grey-dark;
        @media (min-width: $grid-float-breakpoint) {
          font-size: 20px;
          padding: 10px 0;
        }
      }
      > thead > tr > .dow {
        padding: 6px 0;
        font-size: 16px;
        font-weight: $roboto-light;
        color: $brand-grey-dark;
        text-align: center;
        text-transform: capitalize;
        line-height: 1.3;
      }
      td.day {
        width: calc(14.2857%) !important;
        @media (min-width: 1024px) {
          width: calc(13.5714%) !important;
        }
        height: auto !important;
        padding: 0;
        background-color: #fff;
        border-radius: 0;
        line-height: 1 !important;
        vertical-align: top;
        transition: background-color 0.3s;
        &:not(.old):not(.new) {
          border: 1px solid $brand-grey-medium;
        }
        &.selectedDay {
          background-color: $interactive-color;
        }
        &.endDay {
          background-color: $interactive-color;
        }
        &.rangeDay {
          background-color: #f4f8fc;
        }
        > .container-cell {
          height: 44px !important;
          @media (min-width: 768px) and (min-height: 780px) {
            height: 55px !important;
          }
          width: auto;
          border: 1px solid #fff;
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items:center;
          padding: 4px 0;
          margin:0;
          line-height: normal;
          border-radius: 0;
          transition: border-color 0.3s;
        }
        &:hover,
        &:focus,
        &.selectedDay:not(.old):not(.new), &.endDay:not(.old):not(.new) {
          > .container-cell {
            border: 1px solid $interactive-color;
            background: transparent;
          }
        }
        &.rangeDay {
          > .container-cell {
            border: 1px solid #f4f8fc;
            background: transparent;
          }
        }
        small {
          text-align: center;
          font-size: 14px;
          line-height: 1;
          color: $brand-grey-dark;
          font-weight: $roboto-regular;
          display: block;
          width: 100%;
          padding: 0 8px;
          @media (min-width: $grid-float-breakpoint) {
            text-align: left;
          }
        }
        span.price {
          line-height: 1;
          font-weight: $roboto-regular;
          color: $interactive-color;
          text-align: center;
          display: block;
          width: 100%;
          height: auto;
          margin: 0;
          cursor: pointer;
          border-radius: 0;
          white-space: nowrap;
          font-size: 11px;
          margin-top: 6px;
          @media (min-width: $grid-float-breakpoint) {
            font-size: 14px;
            @media (min-height: 780px) {
              margin-top: 10px;
            }
          }
          &:hover {
            background: none;
          }
          span {
            font-size: 9px;
            display: inline;
            width: auto;
            height: auto;
            line-height: 1;
            margin: 0;
            cursor: default;
            border-radius: 0;
            @media (min-width: $grid-float-breakpoint) {
              font-size: 12px;
            }
          }
        }
        .icon-anyfill-graph-help, .icon-anyfill-ui-search {
          width: 16px;
          height: 16px;
          display: block;
          line-height: 1;
          &, & * {
            fill: $interactive-color;
          }
          margin-top: 2px;
          @media (min-width: $grid-float-breakpoint) {
            margin-top: 10px;
          }
        }
        span.best_price_tag {
          font-size: 12px;
          line-height: 1;
          display: block;
          position: absolute;
          top: 1px;
          left: 2px;
          width: 15px;
          height: 15px;
          margin: 0;
          &:hover {
            background: none;
          }
          .icon-anyfill-graph-success-circle-neg {
            width: 15px;
            height: 15px;
            &, & * {
              fill: #027A02;
            }
          }
        }
        &.selectedDay {
          small, span.price {
            color: #fff;
          }
          .icon-anyfill-graph-help, .icon-anyfill-ui-search {
            &, & * {
              fill: #fff;
            }
          }
        }
        &.endDay {
          small {
            color: #fff;
          }
          span.price {
            color: #9999cc;
          }
          .icon-anyfill-graph-help, .icon-anyfill-ui-search {
            &, & * {
              fill: #9999cc;
            }
          }
        }
        &.rangeDay {
          &.disabled {
            cursor: default;
            &:hover {
              cursor: default;
              span {
                cursor: default;
              }
            }
          }
          small {
            color: $brand-grey-dark;
          }
          span.price {
            color: $brand-brown-medium;
          }
          .icon-anyfill-graph-help, .icon-anyfill-ui-search {
            &, & * {
              fill: $brand-brown-medium;
            }
          }
        }

        &.old, &.new {
          background: #fff;
          opacity: 0.1;
          cursor: default;
          span {
            cursor: default;
          }
          &:hover, &:focus {
            .container-cell {
              border:1px solid #fff;
            }
          }
          .price, .icon-anyfill-ui-search {
            opacity: 0;
          }
        }
        &.disabled:not(.rangeDay):not(.endDay) {
          cursor: default;
          background: $brand-grey-light;
          color: $brand-brown-medium;
          > .container-cell {
            border: 1px solid $brand-grey-light;
          }
          small {
            color: $brand-brown-medium;
          }
          &:hover {
            background: $brand-grey-light !important;
            > .container-cell {
              border: 1px solid $brand-grey-light;
            }
            span {
              background: $brand-grey-light;
              color: $brand-brown-medium;
              cursor: default;
            }
          }
        }
      }
      td.today:before {
        display: none;
      }
    }
  }
  /* Nuevas cajas de formulario: BOC */

  // Reducimos padding lateral para que los botones de V+H no pasen a dos líneas
  #flyplushotel {
    .continente_boton_submit {
      button[type=submit] {
        padding: 8px 10px 7px !important;
      }
    }
  }

  button[type=submit].disabled {
    cursor: wait;
  }
  /* Animación para botones al ser lanzado el proceso: EOC */
  .package-modal-asset {
    background: #fff;
    border-radius: 8px;
    padding: 50px 25px 25px 25px;
    .rooms {
      padding-top: 20px;
      padding-bottom: 20px;
      &.hidden_form {
        padding: 0;
      }
      .rooms {
        padding: 0;
      }
    }
    .number_people {
      padding-bottom: 20px;
    }
  }
  .select_package_origin {
    font-size: 16px;
  }
  fieldset.occupancy-type .bootstrap-select>.btn, .occupancy-type select {
    padding: 9px 12px;
    border-radius: 6px;
  }
  fieldset.occupancy-type select {
    border-radius: 6px;
  }
  fieldset.occupancy-type .bootstrap-select {
    border-radius: 6px;
  }
  button[type=submit] {
    text-transform: inherit;
  }
  .modalFormButton {
    font-size: 18px;
    padding: 8px 40px 7px !important;
    display: inline-block;
    margin: 0 !important;
    width: 100%;
    font-weight: $roboto-regular;
  }
  .selected-price-summary {
      line-height: 1;
      margin-top: 15px;
      font-size: 18px;
    .cont-price {
      .price {
        font-size: 28px;
        @include medium-weight;
        @media (min-width: $grid-float-breakpoint) {
          font-size: 28px;
        }
        .symbol {
          font-size: 0.85em;
        }
      }
    }
  }
  .form-beside {
    legend,
    .legendlike {
      color: $brand-copy-light;
    }

    /* Medium devices (desktops, 992px and up) */
    @media (min-width: $screen-md-min) {
      width: 100%;
    }

    /* Large devices (large desktops, 1200px and up) */
    @media (min-width: $screen-lg-min) {

    }
    form {
      .formBesideMobileForm {
        .form-group {
          margin-bottom: 0;
        }
        .searchToggle__icon {
          width: 18px;
          height: 18px;
          &, & * {
            fill: $brand-grey-dark;
          }
        }
        .form-group select.form-control {
          background-size: 18px 18px;
          background-position: right 10px top 28px;
          &:focus-within {
            background-image: url(/headers/ilusion/sunrise/dist/svg/icon-ownfill-ui-chevron-up-46403c.svg);
          }
        }
        .form-group label:not(.sr-only)~.form-control.bootstrap-select .dropdown-toggle .caret {
          width: 18px;
          height: 18px;
          background-size: 18px 18px;
        }
        .bootstrap-select.btn-group .dropdown-menu {

        }
        .contact-travel-children {
          margin-top: 10px;
          color: #c1a655;
          font-size: 14px;
          line-height: 1.2;
        }
      }
      /* Small devices (tablets, 768px and up) */
      @media (min-width: $grid-float-breakpoint) {
        .formBesideMobileForm {
          .occupancy-layer-fieldset .searchDropdown {
            min-width: 100%;
            margin-top: 1px;
          }
          .modalFormButton {
            padding: 12px 40px 11px !important;
            margin-top: 1px !important;
          }
        }
      }
      @media (max-width: $grid-float-breakpoint-max) {
        .formBesideMobileForm {
          //display: none;
          height: auto;
          margin-bottom: 0;
        }
      }
      .form-group {
        label {
          text-transform: uppercase;
          top: 4px;
          color: $brand-grey-alt;
          @include medium-weight;
        }
        .form-control-static {
          font-size: 16px;
          height: 55px;
        }
      }
    }
    /* Cambiamos la caja contenedora y posicionamos en absoluto: EOC */

    /* Posicionamiento del botón de búsqueda: BOC */
    /* Small devices (tablets, 768px and up) */
    @media (min-width: $grid-float-breakpoint) {
      .button-container {
        margin-top: 125px;
      }
    }
    /* Posicionamiento del botón de búsqueda: EOC */

  }

  .form-beside, .form-below {
    .formOriginContainer {
      .select_package_origin, .form-group label:not(.sr-only)~.form-control.bootstrap-select.select_package_origin .dropdown-toggle, .location_input {
        border-radius: 10px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        color: $brand-grey-dark;
        &:focus {
          box-shadow: none;
        }
      }
      .location_input {
        &:focus {
          border-color: #222;
          box-shadow: none;
          z-index: 2;
        }
      }
      .select_package_origin.btn-group.open .dropdown-toggle {
        border: 1px solid $brand-grey-dark;
        box-shadow: none;
        z-index: 2;
        .caret {
          transform: rotate(180deg);
        }
      }
      .dropdown-menu, .autocomplete-widget .tt-menu {
        margin-top: 0;
        padding: 0;
        border: 1px solid $brand-grey-medium;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
        border-radius: 6px;
        li + li, .tt-suggestion + .tt-suggestion {
          border-top: 1px solid $brand-grey-medium;
        }
        li a, .tt-suggestion {
          font-size: 16px;
          font-weight: 300;
          color: $brand-grey-dark;
        }
        li a {
          padding: 8px 12px;
          &:hover, &:focus {
            background-color: $menu-hover-bg;
          }
        }
      }
    }
    .formOccupancyContainer {
      min-height: 0;
      .occupancy-type {
        margin-bottom: 0;
        .form-group {
          margin-top: -1px;
        }
        .searchToggle__btn {
          border-radius: 0;
          transition: border-color 0s;
          &:focus {
            box-shadow: none;
          }
          &[aria-expanded="true"] {
            box-shadow: none;
            border: 1px solid $brand-grey-dark;
            position: relative;
            z-index: 2;
            .searchToggle__icon {
              transform: rotate(180deg);
            }
          }
        }
      }
    }
    .formCalendarContainer {
      margin-bottom: 0;
      position: relative;
      &.formSingleCalendarContainer {
        padding-top: 15px;
        margin-top: 0;
        margin-bottom: 0;
      }
      .searchToggle__btn {
        border-radius: 10px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        &:focus {
          box-shadow: none;
        }
        &.datetimepicker-active {
          box-shadow: none;
          border: 1px solid $brand-grey-dark;
          position: relative;
          z-index: 2;
          .searchToggle__icon {
            transform: rotate(180deg);
          }
        }
      }
    }
  }
  .auto-complete-origin-and-occupation {
    .form-popup {
      .col-sm-4 {
        @media (min-width: $grid-float-breakpoint) {
          padding-right: 0;
        }
      }
      .continente_boton_submit {
        @media (min-width: $grid-float-breakpoint) {
          padding-right: 15px;
        }
        @media (max-width: $grid-float-breakpoint-max) {
          margin-top: 15px;
        }
      }
    }
  }
  .modal-calendar.form-above {
    .continente_boton_submit {
      @media (max-width: $grid-float-breakpoint-max) {
        margin-top: 15px;
      }
    }
  }

  .number_people {
    .children_age {
      select {
        width: auto;
      }
    }
  }
  .formButtomContainer {
    margin-top: 15px;
  }

  /* Nuevas cajas de formulario: EOC */
}

/* Modificamos buscador */
.modal-box-container {
  .modal-box {
    .multicriteriasearch {
      background: #fff;
      padding: 0;
      border: 0;
      .tab-pane {
        padding: 0;
      }
    }
  }
}

.month_text {
  text-align: center;
  color: #fff;
  font-size: 18px;
  margin-bottom: 15px;
}
.days_container {
  margin: 0 auto;
  padding: 0 3px 0 4px;
  width: 320px;
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
}
.header_days, .cell_days {
  width: 43px;
  flex: 0 0 auto;
  margin: 0 0 2px 0;
}
.header_days {
  font-size: 12px;
  font-weight: $roboto-bold;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 8px;
}
.cell_days {
  margin-bottom: 2px;
  height: 44px;
}
.link_day {
  display: block;
  height: 44px;
  background: rgba(241, 241, 241, 0.8);
  text-decoration: none;
  padding: 2px;
  position: relative;
  &:hover, &:focus {
    background-color: #fff;
    text-decoration: none;
  }
}
.empty_day {
}
.empty_day_text {
  display: block;
  position: absolute;
  bottom:2px;
  right: 2px;
  line-height: 1;
  .icon-anyfill-ui-search {
    width: 14px;
    height: 14px;
    &, & * {
      fill: #9b9b9b;
    }
  }
}
.best_price {}
.best_price_tag {
  position: absolute;
  top: 1px;
  left: 2px;
  width: 15px;
  height: 15px;
  .icon-anyfill-graph-success-circle-neg {
    width: 15px;
    height: 15px;
    &, & * {
      fill: #027A02;
    }
  }
}
.number_day {
  text-align: right;
  font-size: 12px;
  line-height: 1;
  color: $brand-grey-dark;
  font-weight: $roboto-light;
  display: block;
}
.price_day {
  font-size:12px;
  line-height: 1;
  font-weight: $roboto-bold;
  color: $brand-red;
  text-align: right;
  display: block;
  position: absolute;
  bottom: 2px;
  right: 2px;
}
.bestpricetooltip {
  /*display: block;*/
  width: 300px;
  max-width: none;
  box-shadow: 0 3px 30px 0 rgba(0, 0, 0, 0.18);
  border: solid 1px #b9afaa;
  @media (min-width: $grid-float-breakpoint) {
    width: 400px;
  }
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 110;
  .tooltip-inner {
    padding-left: 26px;
    padding-right: 40px;
    position: relative;
    .bestpricetooltip_close {
      background: transparent;
      border: 0;
      position: absolute;
      top: 14px;
      right: 14px;
      svg {
        width: 10px;
        height: 10px;
        vertical-align: middle;
        &, & * {
          fill: $brand-brown;
        }
      }
    }
    .texttooltip {
      margin-bottom: 0;
      text-align: left;
      line-height: 1.5;
      .icon-anyfill-graph-success-circle-neg {
        display: inline-block;
        width: 15px;
        height: 15px;
        vertical-align: middle;
        &, & * {
          fill: #027A02;
        }
      }
    }
  }
}

/* Modificaciones del calendario para monedas largas: BOC */
.long-currency-calendar {
  &.calendar_container {
    .travel-datetimepicker {
      .table-condensed {
        @media (min-width: $grid-float-breakpoint) {
          width: 100% !important;
        }
        td.day {
          @media (max-width: $grid-float-breakpoint-max) {
            small {
              font-weight: $roboto-regular;
              font-size: $font-size-small;
            }
            .container-cell {
              height: 43px !important;
            }
          }
          @media (min-width: $grid-float-breakpoint) {
            .container-cell {
              width: 100% !important;
            }
          }
          span{
            &.price {
              @media (max-width: $grid-float-breakpoint-max) {
                font-size: 10px;
                position: relative;
                word-wrap: break-word;
                white-space: normal;
                font-weight: $roboto-light;
                bottom: -5px;
                .symbol {
                  display: none;
                }
              }
              @media (min-width: $grid-float-breakpoint) {
                font-size: $font-size-small;
              }
            }
          }
        }
      }
    }
  }
}


.calendar_container .travel-datetimepicker .table-condensed td.day > .container-cell {

}




/* Modificaciones del calendario para monedas largas: EOC */

/* Small devices (tablets, 768px and up) */
@media (min-width: $grid-float-breakpoint) {

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: $screen-md-min) {

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: $screen-lg-min) {

}
@keyframes shinelazy {
  to {
    background-position: 150% 0;
  }
}

.calendars_container .searchToggle__icon {
  width: 18px;
  height: 18px;
  fill: $brand-grey-dark;
}