/* Itinerario */
.itinerary-container {
  .economy-message {
    margin: 0 0 5px;
    padding-left: 15px;
    font-size: $font-size-base;
    color: $brand-copy-light;
    strong {
      color: $brand-green;
    }
  }
}
.transport-top-summary {
  margin-bottom: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  background: #fff;
}

.fixed-itinerary {
  position:fixed;
  top: 0;
  z-index: 150;
  padding-top: 20px;
  width: 100%;
}
.fixed-itinerary + .itinerary-filler {
  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    height: 319px;
  }
  @media (min-width: $screen-md-min) {
    height: 203px;
  }
}
.itinerary-service-options {
  padding:0;
  transition: width 0.3s;
  .recomendada {
    color: $colorRecomendada;
    border: 1px solid rgba($colorRecomendada, 0.5) !important;
    background: $brand-grey-light;
  }
  .SValentin {
    color: $colorSValentin;
    border: 1px solid rgba($colorSValentin, 0.5) !important;
    background: $brand-grey-light;
  }
  .noGastosGestion {
    color: $colorNoGastosGestion;
    border: 1px solid rgba($colorNoGastosGestion, 0.5) !important;
    background: $brand-grey-light;
  }
  .tarExclusiva {
    color: $colorTarExclusiva;
    border: 1px solid rgba($colorTarExclusiva, 0.5) !important;
    background: $brand-grey-light;
  }
  .BFriday {
    color: $colorBFriday;
    border: 1px solid rgba($colorBFriday, 0.5) !important;
    background: $brand-grey-light;
  }
  .vueloExclusivo {
    color: $colorVueloExclusivo;
    border: 1px solid rgba($colorVueloExclusivo, 0.5) !important;
    background: $brand-grey-light;
  }
}

.itinerary_frame {
  border: 1px dashed $gray-border;
  padding: 10px;
  margin-bottom: 0;
  min-height: 88px;
  position: relative;
  font-size: $font-size-base;
  line-height: 21px;
  background: $brand-grey-light;
  font-weight: $roboto-light;
  @media (max-width: $grid-float-breakpoint-max ) {
    margin-bottom: 5px;
  }
  &.empty_frame {
    border: 1px dashed $brand-green;
    position: relative;
    border-radius: $border-radius-large;
    min-height: 81px;
    padding:12px 10px;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.2);
    p {
      text-align: center;
      font-size: 16px;
      color: $brand-green;
      margin-bottom:6px;
      .emptyelement {
        display: inline-block;
        margin-top:1em;
      }
    }
    .empty_frame_arrow {
      &, &:after {
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
      }
    }
    .empty_frame_arrow {
      left: 50%;
      margin-left: -7px;
      border-width: 7px;
      border-bottom-width: 0;
      border-top-color: $brand-green;
      bottom: -7px;
      &:after {
        bottom: 1px;
        margin-left: -7px;
        border-width: 7px;
        border-bottom-width: 0;
        border-top-color: $brand-grey-light;
        content: "";
      }
    }
  }
  strong {
    text-transform: uppercase;
  }
  .origindestinydate {
    margin-bottom: 3px;
    color: $brand-copy-light;
    svg {
      vertical-align: middle;
      &, & * {
        fill: $brand-copy-light;
      }
      &.icon-anyfill-prod-flight {
        width: 18px;
        height: 18px;
      }
      &.icon-anyfill-prod-train {
        width: 18px;
        height: 18px;
      }
    }
  }
  .origindestinydetails {
    div {
      display: inline-block;
    }
  }
  .split_trips{
    svg{
      fill:$brand-red;
      width:20px;
      height:20px;
      vertical-align:sub;
    }
  }
}

/*rtl:ignore*/
[dir='rtl'] .itinerary_frame .origindestinydate svg.icon-anyfill-prod-flight {
  transform: rotateY(180deg);
}
.itinerary-service-options > .col-lg-6:nth-last-child(2) .itinerary_frame .origindestinydate svg.icon-anyfill-prod-flight {
  transform: rotateY(180deg);
}
/*rtl:ignore*/
[dir='rtl'] .itinerary-service-options > .col-lg-6:nth-last-child(2) .itinerary_frame .origindestinydate svg.icon-anyfill-prod-flight {
  transform: rotateY(0deg);
}
.close_option {
  background: none;
  border:none;
  position: absolute;
  top:5px;
  right: 5px;
  svg {
    width: 8px;
    height: 8px;
    &, & * {
      fill: $brand-copy-light;
    }
  }
}
.availableservices {
  margin-bottom: 0;
  @media (min-width: $screen-md-min) {
    min-height: 0;
  }
  .label {
    font-weight: $roboto-light;
    font-size: 11px;
    display: inline-block;
    &.recomendada {
      display:none; /* ocultar temporalmente la etiqueta de compañia recomendada en la primera carga */
    }
  }
  .servicios {
    display: inline-block;
    ul li {
      margin-left: 10px;
    }
    svg, svg * {
      vertical-align: middle;
      fill: #b3b0ad;
    }
  }
}

.itineraryprice_opt1 {
  @media (min-width: $screen-md-min) {
    padding-top:0;
  }
  .pricefigure {
    text-align: right;
    .price {
      @include medium-weight;
      font-size: 24px;
      .symbol {
        font-size: 15px;
      }
    }
    .pricedetail {
      display: inline-block;
      margin-left: 5px;
      cursor:pointer;
    }
  }
  .secondline {
    text-align: right;
    font-size: 12px;
    font-weight: $roboto-light;
    line-height: 1;
    color:$brand-copy-light;
    margin-bottom: 5px;
  }
}
.itineraryprice {
  @media (min-width: $screen-md-min) {
    padding-top:0;
  }
  @media (min-width: $grid-float-breakpoint) and (max-width: 1199px) {
    display: inline-block;
    vertical-align: middle;
    margin: 10px 0;
    .pricefigure {
      float: right;
    }
    .secondline {
      display: inline-block;
      float: right;
      width: 100%;
    }
    .itineraryprice_block {
      float: right;
    }
  }
  .link_block-price {
    .farekeep-button {
      font-size: $font-size-base;
    }
    .icon {
      width: 18px;
      height: 18px;
      vertical-align: sub;
      * {
        fill: $brand-secondary;
      }
    }
  }
  .itineraryprice_block {
    .pricefigure {
      text-align: center;
      font-size: 24px;
      @include medium-weight;
      .price {
        .symbol {
          font-size: 0.85em;
          &.eur, .usd, .gbp  {
            font-size: 20px;
          }
        }
      }
      .icon {
        vertical-align: middle;
      }
      .icon-flights-info {
        vertical-align: middle;
      }
    }
    .secondline {
      text-align: right;
      font-size: 12px;
      font-weight: $roboto-light;
      line-height: 1;
      color:$brand-copy-light;
      margin-bottom: 5px;
      @media (min-width: $screen-lg-min) {
        display: flex;
        justify-content: center;
      }
      @media (max-width: $grid-float-breakpoint-max) {
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
      }
    }
  }
  //Bloque de precio trayectos seleccionados
  .pricefigure {
    text-align: right;
    font-size: 24px;
    @include medium-weight;
    .price {
      .symbol {
        font-size: 0.85em;
        &.eur, .usd, .gbp  {
          font-size: 20px;
        }
      }
    }
    .icon {
      vertical-align: middle;
    }
    .icon-flights-info {
      vertical-align: middle;
    }
  }
  .itineraryprice-amount .secondline {
    text-align: end;
    font-size: 12px;
    font-weight: $roboto-light;
    line-height: 1;
    color:$brand-copy-light;
    margin-bottom: 5px;
    @media (min-width: $screen-lg-min) {
      display: flex;
      justify-content: flex-end;
    }
    @media (max-width: $grid-float-breakpoint-max) {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 10px;
    }
  }
}
.btn_booking_down {
  padding-top: 10px;
  padding-bottom: 26px;
  border-bottom:2px solid #e3e3e3;
  overflow: hidden;
  .link_block-price {
    .farekeep-button {
      font-size: $font-size-base;
    }
    .icon {
      width: 18px;
      height: 18px;
      vertical-align: middle;
      * {
        fill: $brand-secondary;
      }
    }
  }
}
.itineraryprice.itineraryprice_old_block {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .itineraryprice-amount {
    margin-right: 30px;
  }
}


.button_booking_content {
  text-align: center;
  @media (min-width: $screen-lg-min) {
    display: block;
  }
  @media (min-width: $grid-float-breakpoint) and (max-width: 1199px) {
    margin-top: 5px;
  }
  @media (max-width: $grid-float-breakpoint-max) {
    display: flex;
    justify-content: center;
  }
}

/* Fin Itinerario */