Form: Form flights

.c-form {
  grid-column: main;
  
  button {
    
    &.c-multiselect__button {
      margin-left: initial;
      margin-right: initial;
      display: flex;
      height: 100%;
    }
  }

  .c-button--submit,
  .c-button--confirm {
    margin-top: remify(48px);

    &.u-mt-space-0 {
      margin-top: 0;
    }

  }

  .c-button--above {
    margin-top: 0;
  }

  .centered-link {
    display: block;
    text-align: center;
    margin-top: remify(16px);
  }

  input:disabled,
  textarea:disabled,
  button.js-toggleFlightsPax {
    color: secondary(text, 100);
  }
}

.c-form__samerow {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;

  .page-routes-guide & {
    flex-direction: column;

    @include min-screen(bp(tablet-p)) {
      flex-direction: row;
    }
  }

  &>label,
  &>label+.c-field__note {
    width: 100%;

    @include min-screen(bp(tablet)) {
      width: 49%;
      max-height: remify(120px);
    }
  }

  &>label.is-negative {
    @include min-screen(bp(tablet)) {
      margin-bottom: remify(64px);
    }
  }

  &>label.is-negative+.c-field__note {
    @include min-screen(bp(tablet)) {
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }

  &>label~label.is-negative+.c-field__note {
    @include min-screen(bp(tablet)) {
      right: 0;
      left: initial;
    }
  }
}

.c-form__note {
  color: secondary(page, 100);
  text-align: center;
  font-size: remify(14px);
  margin: remify(16px) 0 remify(40px);

  &.is-negative {
    width: 100%;
    text-align: left;
    display: block;
    background-color: status(negative);
    font-size: remify(12px);
    padding: remify(8px) remify(16px);
    margin-top: remify(4px);
    border-radius: remify(4px);

    @include min-screen(bp(tablet-p)) {
      display: none;
      ;
    }
  }
}

/*------------------------------------*\
  Modifier .c-form--tight
\*------------------------------------*/

.c-form--tight {
  // main & {
  width: 100%;
  max-width: remify(670px);
  grid-column: main;
  margin: 0px auto; // }

  button {
    display: block;
    margin: remify(48px) auto 0;
  }

  p {
    color: primary(night, 100);
    margin-bottom: remify(24px);
  }

  .c-detective p {
    color: secondary(page, 100) !important;
  }
}

/*------------------------------------*\
  Modifier .c-form--sticker
\*------------------------------------*/

.c-form--sticker {
  width: 100%;
  max-width: remify(660px);
  grid-column: main;
  margin: 0 auto;

  .c-form__fields {
    margin-top: remify(72px);
  }

  .c-form-image {
    display: none;
  }

  button:not(.c-dialog__close) {
    display: block;
    margin: remify(72px) auto 0;
  }

  .c-field__note {
    width: auto;
    margin-left: 0;
  }

  .c-form__alone {
    position: relative;
    margin-top: remify(16px);
  }

  h3 {
    font-size: 125%;
    font-weight: fw(regular);
    color: primary(night, 100); // margin-top: remify(72px);
    margin-bottom: remify(16px);

    @include min-screen(bp(tablet)) {
      font-size: 150%;
    }
  }

  p {
    color: primary(night, 100);
    margin-bottom: remify(24px);
  }
}

.c-form--stk-abs {
  position: relative;
  margin-bottom: remify(40px);

  .c-form__image {
    display: none;

    @include min-screen(bp(tablet-p)) {
      display: block;
      position: absolute;
      left: remify(-150px);
      top: 50%;
      transform: translateY(-50%);
    }
  }
}

/*------------------------------------*\
  Modifier .c-form--outstanding
\*------------------------------------*/

.c-form--outstanding {
  width: 100%;
  max-width: remify(900px);
  margin: 0 auto;
  position: relative;

  @include min-screen(bp(tablet)) {
    padding: remify(64px) remify(115px) remify(40px);
    @include shadow(medium);
    margin-top: remify(100px);
    border-radius: remify(8px);
    background-color: #fff;
  }

  .c-canvas--content-template & {
    background-color: primary(sky, 10);
    box-shadow: none;
    padding: remify(16px) remify(24px) remify(24px);
  }

}

/*------------------------------------*\
  Modifier .c-form--menu
\*------------------------------------*/

.c-form--menu {
  border-bottom: remify(1px) solid primary(sky, 20);
  padding-bottom: remify(24px);
  margin-bottom: remify(24px);

  .c-button--submit,
  .c-button--confirm {
    margin-top: remify(24px);
  }
}

/*------------------------------------*\
  Modifier .c-form--parkings, .c-form--mbl
\*------------------------------------*/

.c-form--parkings,
.c-form--mbl,
.c-form--flights {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  @include min-screen(bp(tablet)) {
    align-items: center;
    justify-content: initial;
  }

  .c-estimate & {

    @include min-screen(bp(tablet-p)) {
      background: transparent;
      padding: 0;
    }

    @include min-screen(bp(tablet-l)) {
      background-color: #fff;
      border-radius: remify(4px);
      padding: remify(12px) remify(16px);
      @include shadow(medium);
    }

  }

  .c-dialog--parking-form & {
    background-color: transparent;
  }

  label {

    @include min-screen(bp(tablet-p)) {
      margin-bottom: 0;
      box-shadow: none;
    }

    .c-dialog--parking-form & {
      margin-bottom: remify(16px);
    }

  }

  .c-form__el {
    flex-grow: 1;

    @include min-screen(bp(tablet)) {
      padding-right: remify(16px);
    }

  }

  .c-form__el--cal,
  .c-form__el--sel,
  .c-form__el--pair {
    flex-basis: 100%;
  }

  .c-form__el--cal {

    @include min-screen(bp(phone-p)) {
      flex-basis: 60%;
      padding-right: remify(16px);
    }

    @include min-screen(bp(tablet-p)) {
      flex-basis: 16%;
    }

    .c-dialog--parking-form & {
      @include min-screen(bp(phone-p)) {
        flex-basis: 60%;
        padding-right: remify(16px);
      }
    }

  }

  .c-form__el--23 {
    flex-grow: 3;
  }

  .c-form__el--13 {
    flex-grow: 1;
  }
  

  .c-form__el--sel {
    @include min-screen(bp(phone-p)) {
      flex-basis: 40%;
    }

    @include min-screen(bp(tablet-p)) {
      flex-basis: 12%;
    }

    .c-dialog--parking-form & {
      flex-basis: 40%;
    }
  }

  .c-form__el--icon {
    // display: none;
    
    @include min-screen(bp(tablet-p)) {
      display: block;
      flex-basis: 1%;
      flex-grow: 0;
      padding-top: remify(8px);
    }
    
    .c-estimate &,
    .c-dialog--parking-form & {
      display: none;
      @include min-screen(bp(tablet-p)) {
        display: none;
      }
    }

    .switch-round-trip {
      align-items: center;
      justify-content: center;
      background-color: primary(night,100);
      color: #fff;
      border-radius: remify(12px);
      width: remify(42px);
      height: remify(42px);
      display: flex;
      align-items: center;
      justify-content: center;

      svg {
        fill: #fff;
      }

      .o-spotlight & {
        background-color: primary(night,40);
      }
      .o-spotlight.is-active & {
        background-color: primary(sky,100);
      }
    }

  }

  .c-form__el--cta {
    padding-right: 0;
    flex: 1 1 100%;

    @include min-screen(bp(tablet-p)) {
      flex: 0 1 auto;
    }

    .c-estimate & {
      @include min-screen(bp(tablet-p)) {
        flex: 0 1 auto;
      }
    }
  }

  .c-form__el--desktop {
    display: none;

    @include min-screen(bp(tablet-p)) {
      display: block;
    }
  }

  .c-form__el--mobile {
    display: block;

    @include min-screen(bp(tablet-p)) {
      display: none;
    }
  }

  .c-button--disabled,
  .c-button--submit,
  .c-button--adding {
    margin: 0 auto;
    display: block;
    max-width: remify(375px);
    width: 100%;
    padding-left: remify(16px);
    padding-right: remify(16px);
    min-height: remify(44px);
    margin-top: remify(6px);
  }

  .c-button--qty button {
    width: remify(44px);

    @include min-screen(bp(tablet-p)) {
      margin: 0;
    }

  }

  .c-button--qty.c-button--adding,
  .c-button--qty.c-button--adding button {
    background-color: #fff;
  }
  
}

.c-form--parkings-conventions {
  padding: remify(16px);
  text-align: left;
  color: #fff;
  @include font-scale(level-1-5);

  a {
    font-weight: bold;
    text-decoration: underline;
    color: #fff;
  }
}

/*------------------------------------*\
  MBL modifier
\*------------------------------------*/

.c-form--mbl {
  
   @include max-screen( bp(tablet-p)) {
      padding-top: remify(24px);
    }

  .c-main--area-meeting & {
    
    max-width: remify(890px);
    margin: 0 auto;

    @include min-screen( bp(tablet-p)) {
      min-width: remify(800px);
    }


    @media all and (-ms-high-contrast: none),
    (-ms-high-contrast: active) {
      /* IE10+ CSS styles */
      position: relative;
      @include centerer-horizontal;
    }


    select {
      
    }
  }

  &+.form-support-text {
    text-align: center;
    color: primary(night, 100);
    margin-bottom: remify(72px);
    margin-top: remify(16px);

    @supports (display: grid) {
      grid-column: main;
      margin-top: 0;
    }
  }
}



/*------------------------------------*\
  Flights modifier
\*------------------------------------*/

.c-form--flights {
  display: block;
  text-align: left;

  @include min-screen(bp(tablet)) {
    display: flex;
    align-items: initial;
  }

  background-color: transparent;

  .c-tablist--forms & {
    input[type=checkbox] + label, 
    input[type=radio] + label,
    label {
      color: #fff;
    }
    label input {
      background-color: #fff;
      border-color: primary(night, 20);
      padding-left: remify(16px);
    }

    .switch-round-trip {
      background-color: primary(sky,120);
    }
  }

  .is-active & {
    background-color: primary(night, 100);

    input[type=checkbox] + label, 
    input[type=radio] + label,
    label {
      color: #fff;
    }

    label input {
      background-color: #fff;
      border-color: primary(night, 20);
      padding-left: remify(16px);
    }

    .c-icon {
      fill: #fff;
    }

    &:after {
      content: "";
      width: 200vw;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      background-color: primary(night, 100);
      z-index: -1;
      transform: translateX(-50%);
    }

    .c-field__note {
      color: #fff;
    }
  }

  .js-close-overlay {
    height: 24px;
    border: none;
    background: transparent;
    position: absolute;
    top: -30px;
    right: 0;
    display: none;
    padding: 0;

    svg * {
      fill: #fff;
    }
  }

  .wrapper {
    @include min-screen(bp(tablet)) {
      flex: 1 0 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    @include min-screen( $bp-form-flights ) {
      flex: 2;
    }
  }

  .wrapper--extended {
    width: 100%;
    flex: auto;
    padding-top: remify(16px);
    
    @include min-screen(bp(tablet-l)) {
      padding-top: 0;
    }

    label {
      display: inline-block;

      @include min-screen(bp(tablet)) {
       display: inline-block;
      }
    }

    label select.is-inline {
      @include max-screen(bp(tablet)) {
       display: block;
       margin-left: 0;
       margin-top: remify(16px);
       margin-right: remify(8px);
      }
    }
  }

  .wrapper--alone {
    flex: 1 1 100%;

    @include min-screen( $bp-form-flights ) {
      flex: 0 1 auto;
      justify-content: flex-end;
    }
  }

  .wrapper--localities {
    .c-form__el--pair:last-child {
      @include max-screen( $bp-form-flights ) {
        padding-right: 0;
      }
    }
  }

  .wrapper--dates {
    @media (min-width: bp(tablet)) and (max-width: $bp-form-flights) {
      // background-color: purple;
      max-width: 80%;
    }
  }

  .wrapper--pax {
    @media (min-width: bp(tablet)) and (max-width: $bp-form-flights) {
      // background-color: purple;
      max-width: 20%;

      & .c-form__el {
        // padding-left: remify(16px);
      }
    }
  }

  label {
    margin-bottom: remify(16px);
    border: none;

    &:focus-within {
      border: none;
    }

    @include min-screen( $bp-form-flights ) {
      margin-bottom: 0;
      box-shadow: none;
      padding: remify(16px) 0;
    }
  }

  .has-border {
    position: relative;
    padding-right: 0;

    @include min-screen( $bp-form-flights ) {
      padding-right: remify(16px);
    }

    &:after {
      content: '';
      position: absolute;
      border-right: remify(1px) solid #ccc;
      z-index: 1;
      width: remify(1px);
      height: 60%;
      right: remify(10px);
      top: 50%;
      transform: translateY(-50%);
      display: none;

      @include min-screen( $bp-form-flights ) {
        display: block;
      }
    }
  }

  .has-border-before {
    position: relative;
    padding-right: 0;

    @include min-screen( $bp-form-flights ) {
      padding-right: remify(16px);
    }

    &:before {
      content: '';
      position: absolute;
      border-left: remify(1px) solid #ccc;
      z-index: 1;
      width: remify(1px);
      height: 60%;
      left: remify(-8px);
      top: 50%;
      transform: translateY(-50%);
      display: none;

      @include min-screen( $bp-form-flights ) {
        display: block;
      }
    }
  }

  .c-form__el--pair {
    @include min-screen(bp(tablet)) {
      flex-basis: 50%;
    }

    @include min-screen( $bp-form-flights ) {
      flex-basis: 16%;
    }
  }

  .js-round-desktop {
    flex-grow: 1;
  }

  .c-form__el--icon {
    display: none;

    @include min-screen( $bp-form-flights ) {
      display: block;
    }

    button {
      background: none;
      border: 0;
    }
  }

  .c-form__el--pax {
    position: relative;
    padding-right: 0;

    @include min-screen( $bp-form-flights ) {
      padding-right: remify(16px);
      max-width: remify(130px);
    }
    
  }

  .c-form__el--cta {
    padding-right: 0;
    flex: 1 0 100%;
    
    margin-top: remify(16px);
    margin-bottom: remify(16px);

    @include min-screen( $bp-form-flights ) {
      padding-top: remify(8px);
      flex: 0 1 auto;
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  .c-form__el--toggleFlightsPax {
    border: 1px solid primary(night, 20);
    background-color: #fff;
    margin-left: 0;
    width: 100%;
    text-align: left;
    border-radius: remify(12px);
    padding: remify(12px) remify(16px) remify(12px) remify(16px);
    margin-top: remify(4px);
    font-size: remify(16px);

    .c-icon { 
      vertical-align: bottom;
    }

    .is-active & {
      background-color: #fff;
      padding-left: remify(16px);

      .c-icon {
        fill: primary(night, 120);
      }
    }

    .c-tablist--forms & {
      .c-icon {
        fill: primary(night, 120);
      }
    }

  }

  .js-flightsPaxCnt {
    display: none;
    width: 100%;
    background-color: #fff;
    padding: remify(16px);
    @include shadow(high);
    border-radius: 0 0 remify(12px) remify(12px);
    margin-bottom: remify(16px);
    margin-top: -1rem;
    right: 0;
    // max-width: remify(450px);
    // transform: translateX(25%);
    position: relative;

    @media (min-width: bp(tablet)) and (max-width: $bp-form-flights) {
      position: absolute;
      z-index: 999;
      min-width: remify(400px);
    
    }

    @include min-screen( $bp-form-flights ) {
      z-index: $zIndex-autocomplete;
      position: absolute;
      top: calc(100%);
      margin-top: 0;
      border-radius: remify(12px);
      transform: translateX(25%);
      width: remify(450px);
      max-width: initial;
    }

    &.is-visible {
      display: block;
    }

    .pax-type {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: remify(16px);

      &:last-of-type {
        margin-bottom: remify(24px);
      }

      label {
        font-size: 75%;
        line-height: 1.5;
        font-weight: fw(regular);
        text-transform: initial;
        padding: 0;
        margin: 0;
        box-shadow: none;
        color: secondary(text, 100);

        @include min-screen(bp(phone-p)) {
          font-size: 100%;
        }
      }

      .c-button--qty {
        width: auto;
      }
    }
  }

  // .foot {
  //   padding: remify(8px) remify(16px);
  //   flex: 1 0 100%;
  //   align-self: flex-end;
  //   margin-top: remify(-14px);
  //   margin-bottom: remify(16px);
  //   border-radius: remify(4px);

  //   @include min-screen(bp(phone-p)) {
  //     display: flex;
  //     align-items: center;
  //     min-height: remify(42px);
  //   }

  //   @include min-screen( $bp-form-flights ) {
  //     margin-top: 0;
  //     margin-bottom: 0;
  //     border-radius: 0;
  //   }

  //   input[type="checkbox"]+label,
  //   input[type="radio"]+label {
  //     margin-bottom: 0;
  //   }

  //   input[type="radio"]+label {
  //     margin-right: remify(16px);
  //   }
  // }

  // .foot--first {
  //   & div:first-child {
  //     margin-bottom: remify(16px);

  //     @include min-screen(bp(phone-p)) {
  //       margin-right: remify(60px);
  //       margin-bottom: initial;
  //     }

  //   }

  //   @include min-screen( $bp-form-flights ) {
  //     margin-left: remify(-16px);
  //   }
  // }

  // .foot--last {
  //   display: none;

  //   @include min-screen( $bp-form-flights ) {
  //     margin-right: remify(-16px);
  //     display: block;
  //     min-height: remify(42px);
  //   }
  // }
}

/*------------------------------------*\
  Flights edit modifier
\*------------------------------------*/

.c-form--flights.c-form--flights-edit {
  
  // Hides the form fields on mobile viewports except the button
  @include max-screen(bp(tablet)) {
    padding: remify(16px) remify(32px);
    .wrapper {
      display: none;
    }
    .wrapper--alone {
      display: block;
      .c-form__el--pax {
        display: none;
      }
    }
  }
  @include max-screen(bp(tablet-l)) {
    padding-left: 16px;
    padding-right: 16px;
  }

  // .foot {
  //   display: none;
  // }

  // .foot--block {
  //   display: flex;
  // }

  // .foot--block.foot--first {
  //   display: flex;
  // }

  // .foot--block.foot--last {
  //   display: none;

  //   @include min-screen( $bp-form-flights ) {
  //     display: flex;
  //   }
  // }

  .js-flight-btn-confirm-modifies {
    display: none;
    margin-top: remify(56px);
    @include min-screen(bp(tablet-p)) {
      margin-top: 0;
    }
  }

  // .foot--desktop {
  //   display: none;

  //   @include min-screen(bp(tablet-p)) {
  //     display: flex;
  //   }
  // }

  // .foot--mobile {
  //   display: flex;

  //   @include min-screen(bp(tablet-p)) {
  //     display: none;
  //   }
  // }
}

.c-form--flights {
  .c-form__el--flights {
    flex-basis: 100%;
  }

  // .foot--desktop {
  //   display: none;

  //   @include min-screen(bp(tablet-p)) {
  //     display: flex;
  //   }
  // }

  // .foot--mobile {
  //   display: flex;

  //   @include min-screen(bp(tablet-p)) {
  //     display: none;
  //   }
  // }
}

// Shows the form fields on mobile viewports when the button is pressed
.c-form--flights.c-form--flights-edit.o-spotlight__element--overlay {
  @include max-screen(bp(tablet)) {
    .wrapper {
      display: block;
    }

    .wrapper--alone .c-form__el--pax {
      display: block;
    }
  }
}


/*------------------------------------*\
  Desktop only modifier
\*------------------------------------*/

.c-form--desktop-only {
  @include max-screen(bp(tablet-l)) {
    display: none;
  }
}

/*------------------------------------*\
  Parkings form modifier
\*------------------------------------*/

.c-form--parkings {

}

/*------------------------------------*\
  MyBLQ Login into customer care reclaim modifier
\*------------------------------------*/

.c-form--myblqLogin {
  max-width: remify(400px);
  margin-left: auto;
  margin-right: auto;
}

/*------------------------------------*\
  wrapped with background
\*------------------------------------*/

.c-form--wrapped {
    background-color: #d3e0eb;
    border-radius: remify(24px);
    padding: remify(16px);
}
/*------------------------------------*\
  Search results only modifier
\*------------------------------------*/

.c-form--search-results {
  width: 100%;
  max-width: remify(670px);
  margin: 0 auto;

  .c-form--search-flight {
    a {
    color: secondary(text,100); 
    @include min-screen(bp(tablet)) { 
      font-weight: fw(bold); 
    }
    }
    font-size: remify(16px);

    @include min-screen(bp(tablet)) {
      font-size: remify(12px);
      text-align: right;
      position: relative;
      top: remify(-40px);
    }
  }
}