Cart: Park Recap Minimal

.c-cart {
  background-color: #fff;
  position: relative;
  @include shadow(small);

  @include max-screen(bp(tablet-p)) {
    // margin-top: remify(-64px);
    margin-left: remify(-16px);
    margin-right: remify(-16px);
  }

  @include min-screen(bp(tablet-p)) {
    @include shadow(small);
    border: 1px solid primary(sky,20);
    border-radius: remify(16px);
    overflow: hidden;
    margin-bottom: remify(16px);
  }

  &.has-offline-payment {
    animation: flash 2s forwards cubic-bezier(0.25, 1, 0.5, 1);
    animation-iteration-count: 1
  }
}

@keyframes flash {
  0% {
    box-shadow: 0 0 12px 0 primary(sun,60);
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

.c-cart__input-toggle {
  display: none;
}

.c-cart__minimal {
  // padding: remify(16px) remify(24px);
  padding: remify(16px);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

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

  .c-cart__minimal-cta {
    width: 100%;
    flex-grow: 1;
    padding-top: remify(8px);

    .c-button {width: 100%;}
  }

  .u-chkbx-toggle:checked ~ & .c-cart__toggle--open,
  .u-chkbx-toggle:checked ~ & .c-cart__minimal-cta {
    display: none;
  }

}

.c-cart__toggle,
.c-form .c-cart__toggle {
  color: primary(night, 100);
  @include font-scale(level-1);
  font-weight: fw(regular);
  text-decoration: underline;

  svg {
    vertical-align: middle;
  }

  .c-cart__minimal & { 
    margin-top: remify(12px);
  }

  .c-cart__footer & {
    margin-bottom: 0;
    min-width: remify(80px);
    @include min-screen(bp(tablet-p)) {
      display: none;
    }
  }
}


.c-cart__expanded.u-chkbx-toggleReceiver {
  display: none;
  position: relative;
  z-index: 1;

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

.c-cart__title {
  @include font-scale(level-3);
  font-weight: fw(bold);
  color: primary(night,100);
  // padding: remify(16px) remify(24px);
  padding: remify(16px);
  display: flex;
  justify-content: space-between;
}

.c-cart__class-label {
  position: absolute;
  top:  remify(16px);
  right:  remify(16px);
}

.c-cart__routes {
  // padding: remify(16px) remify(24px);
  padding: remify(16px);

  & > .c-route {
    margin-bottom: remify(16px);
    
  }
  
  & > .c-route:not(:last-child) {
    padding-bottom: remify(32px);
    margin-bottom: remify(32px);
    border-bottom: 1px solid primary(sky, 20);
  }

  .c-airport-info__name,
  .c-icon-list__text {
    display: none;
  }

  @include max-screen(bp(tablet-p)) {
    .c-route__flight-company,
    .c-icon-list {
      display: none;
    }
  }
  .c-airport-info__code,
  .c-airport-info__time {
    font-size: remify(16px);
  }
  .c-flight-stops__toggle label {
    color: primary(night, 100);
    background-color: #fff;

  }
}

.c-cart__addons {
  // padding: remify(16px) remify(24px);
  padding: remify(16px);
  background-color: primary(sky, 20);
  color: primary(night, 100);
  @include font-scale(level-1);
  
  .c-cart__addon {
    display: flex;
    justify-content: space-between;
    margin-bottom: remify(8px);
  }

  .c-cart__addons-disclaimer {
    color: primary(night, 80);
  }
}

.c-cart__total {
  // padding: remify(16px) remify(24px);
  padding: remify(16px);
  display: none;

  @include min-screen(bp(tablet-p)) {
    display: flex;
    justify-content: space-between;
  }

  .c-cart__digit {
    text-align: right;
  }

}

.c-cart__price {
  @include font-scale(level-4);
  font-weight: fw(bold);
  color: secondary(text, 80);

  .btn-open-bill {
    border: 0;
    background: none;

    svg * {
      fill: primary(night, 40);
    }

  }
}

.c-cart__passengers {
  @include font-scale(level-1);
  color: secondary(text, 100);
}
.c-cart__netprice {
  @include font-scale(level-0);
  color: primary(night, 80);
}

.c-cart__footer {
  // padding: remify(16px) remify(24px);
  padding: remify(16px);
  display: flex;
  align-items: center;
  justify-content: space-between;

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

  button {  
    margin-top: 0;

    @include max-screen(bp(tablet-p)) {
      transform: scale(75%);
      transform-origin: center right;
    }
    
    @include min-screen(bp(tablet-p)) {
      width: 100%;
      // margin: remify(16px) remify(24px);
    }
    
  }

}

/*------------------------------------*\
  additional code for .c-form wrapper
\*------------------------------------*/
.c-form .c-cart {
 .c-button--submit { margin-top: 0; }
}


/*------------------------------------*\
  Cart PARKING  modifier
\*------------------------------------*/

.c-cart--parkings {

  // .c-cart__title { display: none; }
  // .u-chkbx-toggle:checked ~ .c-cart__title  { display: none; }
  .u-chkbx-toggle:checked ~ .c-cart__minimal  { display: none; }

  .c-cart__minimal {
    justify-content: flex-end;

    .c-cart__minimal-pass {
      margin-left: 0;
      flex-grow: 1;
    }

    .c-cart__minimal-price {
      text-align: right;
      .c-cart__netprice { margin-right: 0; }

    }


    .c-cart__logo {
      width: auto;
      max-width: 100%;
      margin-left: remify(16px);
      display: flex;
      justify-content: flex-end;
      img {
        max-width: remify(36px);
        display: inline-block;
        margin-left: remify(8px);
      }
    }
  }

  .c-cart__product {
    border-bottom: 1px solid  primary(night,10);
  }

  .c-cart__park,
  .c-cart__park-modify,
  .c-cart__park-recap  {
    display: flex;
    justify-content: space-between;
    padding: 0 remify(16px) remify(16px);
    @include font-scale(level-1);

    @include min-screen(bp(tablet-p)) { 
      @include font-scale(level-2);
    }

    svg {
      fill: currentColor;
      vertical-align: bottom;
    }
  }

  .c-cart__park-recap.has-warning {
    padding-top: remify(16px);   
    background-color: primary(sun,10);
    display: none;


    & > * {
      min-width: remify(80px);
    }

    .recap-label {
      display: block;
    }
    
    .red {
      font-weight: fw(bold);
      color: status(negative);
    }
  }

  &.has-offline-payment .c-cart__park-recap {
    display: none;
  }
  &.has-offline-payment .c-cart__park-recap.has-warning {
    display: flex;
  }

  .c-cart__entrance,
  .c-cart__exit {
    flex-grow: 1;

    svg {
      vertical-align: middle;
    }
  }

  .c-cart__entrance {
    margin-right: remify(16px);
    background-image: url('../images/svgs/caret.svg');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;
  }
  

  .c-cart__logo {
    max-width: remify(68px);
  }

  .c-cart__park-modify,
  .c-cart__park-recap {
    @include font-scale(level-1);
    align-items: center;

    .c-button--icon-square { 
      margin-left: remify(8px); 
    }
  }

  .c-cart__park-recap {
    @include font-scale(level-1);
    color: secondary(text, 100);
    align-items: flex-start;
    
    .barred { text-decoration: line-through; color: primary(night, 60);}
    .final { @include font-scale(level-2); }

    a { color: primary(night, 100); font-weight: fw(bold); }
  }

  .c-cart__additional {
      background-color: primary(sky, 20);

      .c-cart__additional-title {
        display: flex;
        justify-content: space-between;
        @include font-scale(level-3);
        font-weight: fw(bold);
        color: primary(night,100);
        // padding: remify(16px) remify(24px);
        padding: remify(16px);
      }

      small {
        @include font-scale(level-1);
        color: secondary(text, 100);
      }
  }

  .c-cart__total {
      display: flex;
  }
  
  .c-cart__features,
  .c-cart__digit {
    align-self: center;
    flex-basis: 50%;
  }

  .c-cart__features {
    @include font-scale(level-1, bold);
    color: secondary(text, 100);
  }

  .c-cart__digit {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .c-cart__price {
    @include font-scale(level-3);
    font-weight: fw(bold);
    color: secondary(text, 100);
  }

  .c-cart__netprice {
    @include font-scale(level-1);
    font-weight: fw(regular);
    color: primary(night, 60);
    text-decoration: line-through;
    margin-right: remify(8px);
  }

  .c-button--modal{ display: none;}
  &.has-offline-payment .c-cart__footer {
    .c-button { display: none; }
    .c-button--modal{ display: inline-block;}
  }
}


/*------------------------------------*\
  Cart PARK RECAP  modifier
\*------------------------------------*/

.c-cart--parking-recap {

  &.c-cart {
    background-color: #fff;
    position: relative;
    @include shadow(small);
    margin-left: 0;
    margin-right: 0;
    border: 1px solid primary(sky,20);
    border-radius: remify(16px);
    overflow: hidden;
    margin-bottom: remify(32px);
  }

  .c-cart__title {
    display: flex;
  }
  
  .c-cart__expanded {
    display: block !important;  
  }
}

/*------------------------------------*
  Cart PARK RECAP MINIMAL  modifier
*------------------------------------*/
.c-cart--parking-recap-minimal {

  &.c-cart {
    box-shadow: none;
    border: none;
    border-radius: 0;
  }
  
  .c-cart__park {
    padding: 0;
  }

  .c-cart__product {
    border-bottom: 0;
  }

}

.c-cart__vouchers {
  padding: 0 remify(16px) remify(16px);
  position: relative;

  .c-cart__park-recap {
    padding: 0 0 remify(8px);

    .final {
      @include font-scale(level-1-5);
    }
  }

}

.c-cart__vouchers-total {
  @include font-scale(level-1-5, bold);
  position: absolute;
  right: remify(16px);
  top: 0;
}

.c-cart__vouchers {

  .c-collapsible__button {
    @include font-scale(level-1);
    color: primary(night, 100);
    font-weight: fw(semibold);
    cursor: pointer;
  }

  .o-collapsible__content {
    margin-top: remify(16px);
  }
}

.c-cart__voucher-info {
  @include font-scale(level-2);
  color: secondary(text, 100);

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