Product: Parking POP

$park-item-bp: bp(tablet);

.c-product {
  background-color: secondary(soft,100);
  border: 1px solid primary(night,20);
  position: relative;
  border-radius: remify(16px);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 0s;
  margin-bottom: remify(16px);
  padding: 0;
  // overflow: hidden;

  @include min-screen($park-item-bp) {
    display: flex;
    justify-content: space-between;
  }

  .remove-product {
    font-size: remify(14px);
    margin-top: remify(8px);
    @include min-screen($park-item-bp) {
      font-size: remify(16px);
      margin-left: auto;
      margin-right: auto;
    }
  }

  .c-button--icon-square {
    display: inline-block;
    color: #fff;
    background-color: primary(sky, 120);

    &.is-pale { 
      background-color: primary(night, 80);
    }
  }

  .c-folding & {
    box-shadow: none;
  }


  .c-parkings__item &:hover {
    @include shadow(higher);
  }

  .c-main-reservationList & {
    margin-bottom: remify(16px);

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

.c-product__fold {
  background-color: primary(sky, 10);
  padding: remify(16px);
  border-radius: remify(16px) remify(16px) 0 0;
}

/* general respondive behaviour */

.c-product__info { flex: 1 0 30%; }
.c-product__schedule { flex: 4 1 50%; }
.c-product__fare { flex: 0 1 20%; }

.c-product__type, 
.c-product__features,
.c-product__schedule,
.c-product__price,
.c-product__fare {
  padding: remify(16px);

  @include min-screen(bp(tablet)) {
    padding: remify(24px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

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

.c-product__info {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  align-items: stretch;

  @include min-screen($park-item-bp) {
    flex-wrap: nowrap;
  }

  @include min-screen($park-item-bp) {
    width: auto;
    flex-grow: 1;
    justify-content: flex-start;
  }

}

.c-product__type {
  align-items: center;
  padding: remify(24px) 0 remify(24px) remify(24px);
  
  img { 
    display: block; 
    margin-bottom: 0;
    width: remify(80px);
    margin-bottom: remify(8px);

    @include min-screen($park-item-bp) {
      min-width: remify(80px);
      width: remify(110px) !important; // to avoid conflict with carousel
    }
    
  }
}

.c-product__park-infos {
  display: flex;
  flex-direction: column;
  gap: remify(8px);
  align-items: center;

  a, .c-button--as-link {
    @include font-scale(level-1-5);
  }

  .c-button--as-link {
    color: primary(sky, 120);
  }

}

/* schedule */

.c-product__schedule {
  display: flex;
  flex-direction: column;
  padding: remify(16px);
  border-top: 1px solid primary(night, 20);

  @include min-screen($park-item-bp) {
    padding: remify(24px);
    border-top: none;
    border-left: 1px solid primary(night, 20);
  }

  // .c-product__qrcode {
  //   text-align: right;
  //   align-items: center;

  //   @include min-screen($park-item-bp) {
  //     text-align: left;
  //   }

  //   .c-tooltip button {
  //     padding: 0;
  //     @include font-scale(level-3);
  //     color: primary(night, 100);      
  //   }
  // }

}

/* further */
.c-product__further {
  display: flex;
  flex-direction: column;
  gap: remify(12px);
  align-items: flex-start;

  @include min-screen($park-item-bp) {
    gap: remify(16px);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-top: remify(24px);
  }
}

.c-product__further-item {
  display: flex;
  align-items: center;
  gap: remify(4px);
  color: primary(night, 100);

  & *,
  button {
    color: currentColor;
    // fill: currentColor;
    @include font-scale(level-2);
  }

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

  &.reverse {
    flex-direction: row-reverse;
  }

}

/* utils */
.c-product__utils {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: remify(16px);

  .c-product__print {
    display: inline-block;
    @include min-screen($park-item-bp) { 
      display: none;
    }
  }
}


.c-product__fare,
.c-product__utils {
  
  .c-product__print .c-button {
    display: inline-block;
    text-decoration: none;
    position: relative;
    width: auto;
    height: remify(28px);
    border-radius: remify(6px);
    padding: 0 remify(8px);
    transition: .3s;
    font-size: remify(12px);

    svg {
      vertical-align: text-top;
      display: inline-block;
      margin-right: remify(4px);
  
      * {
        fill: currentColor;
      }

    }
  }

}


/* fare */
.c-product__fare {
  text-align: center;
  border-top: 1px solid primary(night, 20);
  border-radius: 0 0 remify(16px) remify(16px);

  @include min-screen($park-item-bp) {
    display: flex;
    border-top: none;
    border-left: 1px solid primary(night, 20);
    border-radius: 0 remify(16px) remify(16px) 0;
    width: 16%;
    flex-basis: remify(260px);
    flex-direction: column;
    justify-content: space-between;
  }

  & > div:only-child {
    margin-top: auto;
    margin-bottom: auto;
  }

  .is-disabled &{
    background-color: primary(night, 10);
  }

  .has-offer & {
     background-color: primary(night, 100);
     color: #fff;

     .c-product__price span.barred {
        color: #fff;
     }
  }

  .c-rounded-label {
    margin: 0 0 remify(8px);
    background-color: primary(night, 20);
    color: primary(night, 120);
     @include font-scale(level-1);
  }

  .c-product__price {
    margin: 0 auto remify(16px);
    padding: 0;
    @include font-scale(level-1);

    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: center;

    @include min-screen($park-item-bp) {
      flex-direction: column;
      padding: 0 remify(24px);
    }

    .barred {
      display: block;
      text-decoration: line-through;
      color: primary(night, 60);
    }

    .discount-text {
      text-align: left;
    }
    .tellmemore {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    
    @include min-screen($park-item-bp) {
      .c-product__price-value { text-align: center; }
      .discount-text { text-align: center; }
      .tellmemore { justify-content: center; }
    }
  }


  .c-product__button {
    margin: 0 auto;
    text-align: center;
  }
  
  .c-button--submit {
    
    padding: remify(12px) remify(24px);
    font-size: remify(16px);
    width: 100%;
    @include min-screen($park-item-bp) {
      width: auto;
    }
  }

  .c-product__receipt {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    width: 100%;
    margin-bottom: remify(16px);

    @include min-screen($park-item-bp) {
      flex-direction: column;
      flex-grow: 2;
      padding: 0 remify(24px);
    }
  }

  .c-product__print {
    display: none;
    margin: remify(8px) 0 remify(8px) auto; 
    @include min-screen($park-item-bp) {
      display: inline-block;
      text-align: center;
      margin: remify(8px) auto; 
    }
  }
  
  a.go-to-detail {
    @include font-scale(level-1-5);
    color: primary(night, 80);
  }

  .c-product__telepass {
    text-align: right;
    @include min-screen($park-item-bp) {
      text-align: center;
      margin: remify(8px) auto; 
    }

    button {
      width: remify(120px);
    }
    span {
        display: block;
    }
  }



}

.c-product__pay-online {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  width: 100%;
  padding: remify(12px);
  background: primary(night, 100);
  color: white;

  .c-product:not(.c-product--carousel) & {
    @include min-screen($park-item-bp) {
      width: 16%;
      min-width: remify(170px);
      flex-flow: column;
      border-radius: remify(20px);
      margin: 0 remify(8px);
      padding: remify(12px) remify(12px) remify(24px);
    }
  }

  &.c-product__pay-online--out {
    color: primary(night, 80);
  }

  .c-product__offer-number,
  .c-product__value-text {
    font-size: remify(12px);
    text-transform: uppercase;

    @include min-screen($park-item-bp) {
      font-size: remify(12px);
      margin-bottom: remify(16px);
    }
    .c-product--carousel & {
      margin-bottom: 0;
    }
  }
  & .c-product__value-full {
    font-size: remify(16px);
    text-decoration: line-through;
    color: primary(sky, 40);
  }

  .c-product__price {
    margin: auto;
  }

  .c-product__offer-number {
    background: primary(night, 80);
    display: inline-block;
    border-radius: remify(20px);
    display: none;
    @include min-screen($park-item-bp) {
      display: block;
      font-size: remify(10px);
      padding: remify(2px) remify(8px);

      .c-product--carousel & {
        display: none;
      }
    }

    &.is-hidden {
      visibility: hidden;
      &::before {
        content: "\00a0"; //insert empty char for spacing reasons
      }
    }
  }

  .c-button {
    padding: 0.75rem 1.7rem;
    max-width: remify(130px);
    font-size: remify(14px);
  }

  &.c-product__pay-online--out {
    background: transparent;
    color: primary(night, 80);
    .c-product__offer-number {
      background: primary(night, 20);
    }

    .c-button {
      cursor: not-allowed;
    }
  }
}



.c-product__price {
  small {
    font-weight: fw(bold);
    margin-top: remify(16px);
  }

  .c-product--compact & {
    flex-grow: initial;
  }
}

.c-product__value {
  font-size: remify(32px);
  margin-bottom: remify(8px);
  line-height: remify(48px);
  white-space: nowrap;
}

.c-product__type {
  text-align: center;
  align-items: center;
}

.c-product__features {
  flex: 1;

  @include min-screen($park-item-bp) {
    flex-grow: 1;
    min-width: remify(200px);
  }

  ul {
    li {
      font-size: remify(12px);
    }

    svg {
      position: relative;
      // top: remify(6px);
      margin-right: remify(8px);
    }

    .c-icon-list__item span {
      display: inline-block;
      vertical-align: text-top;
    }
  }
}

.c-product__time {
  display: flex;
}

/*------------------------------------*\
  Vip Lounge Modifier
\*------------------------------------*/

.c-product--vip-lounge-recap {
  border-top: remify(4px) solid secondary(page, 100);
  // overflow: hidden;

  @include min-screen($park-item-bp) {
    display: flex;
    border-left: remify(4px) solid secondary(page, 100);
    border-top: none;
  }

  .c-product__info {
    border-left: none;
    border-top: none;
  }

  .c-product__type {
    text-align: left;
    display: flex;
    align-items: initial;
    flex-direction: column;

    .c-button--as-link {
      margin-left: 0;
    }
  }

  .c-product__remove {
    @include min-screen($park-item-bp) {
      display: none;
    }
  }

  .c-product__more {
    @include min-screen($park-item-bp) {
      display: block;
    }
  }

  .c-folding & {
    .c-product__schedule {
      @include min-screen($park-item-bp) {
        // flex-basis: remify(192px);
        flex-basis: 24rem;
        min-width: 24rem;
      }
    }
    img {
      width: remify(100px);
    }
  }
}

/*------------------------------------*\
  Recap Modifier
\*------------------------------------*/

.c-product--recap {
  position: relative;

  .c-product__features {
    @include min-screen(remify(1080px)) {
      margin-right: 0;
    }
  }

  .c-product__info {
    @include min-screen($park-item-bp) {
      width: auto;
      flex-grow: 1;
    }
  }

  .c-product--compact,
  .c-product__telepass {
    &.mobile {
      display: flex;
      flex-direction: column;
      flex-basis: 30%;
      padding: remify(16px) remify(16px) 0 0;

      @include min-screen(bp(phone-p)) {
        flex-basis: initial;
      }

      @include min-screen(remify(1080px)) {
        display: none;
      }
    }

    &.desktop {
      display: none;
      @include min-screen(remify(1080px)) {
        display: flex;
        flex-direction: column;
      }
    }
  }

  .c-product__time {
    flex-wrap: wrap;
    margin-bottom: remify(8px);

    &--mobile {
      margin-bottom: 0;
    }
  }

  .c-product__labels {
    
    display: flex;
    justify-content: flex-start;
    width: 100%;
    flex-wrap: wrap;

     @include min-screen($park-item-bp) {
      padding: 0 0 remify(16px) 0;
    }

    .c-rounded-label {
      margin: 0 remify(8px) remify(8px) 0;
    }
  }


  .c-product__details {
    padding: remify(16px) 0;
    @include font-scale(level-1);

    @include min-screen($park-item-bp) {
      padding: remify(8px) 0 0 0;
    }

    small {
      display: block;
      margin-bottom: remify(12px);
    }
  }

  .c-product__passengers {
    
    @include font-scale(level-1);

    @include min-screen($park-item-bp) {
      padding-bottom: remify(16px);
    }
  }
}


/*------------------------------------*\
  Carousel modifier
\*------------------------------------*/

.c-product--carousel {
  box-shadow: none;
  border-radius: remify(24px);
  display: block;


  &:hover {
    @include shadow(high);
  }
  

  .c-carousel--equalH & {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .c-product__info,
  &.c-product--p-express .c-product__info {
    .c-carousel--equalH & {
      flex: 1;
    }
    @include min-screen($park-item-bp) {
      width: 100%;
      align-items: initial;
    }
  }

  .c-product__url {
    text-align: center;
    padding: remify(16px);
    border-top: 1px solid primary(night,20);
  }

  .rates-discover {
    display: block;
  }
}

/*------------------------------------*\
  Pop modifier
\*------------------------------------*/

.c-product--pop {

  .o-products--waterfall & {
    margin-bottom: remify(16px);
  }

  .js-productPop & {
    margin-bottom: 0;
  }

  .c-product__type,
  .c-product__features,
  .c-product__fare {
    @include min-screen(bp(tablet-p)) {
      padding: remify(16px);
    }
  }

  .c-product__type img {
    width: remify(80px);

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

  .c-product__info {
    // flex-wrap: wrap;
    @include min-screen($park-item-bp) {
      width: auto;
      flex-grow: 1;
    }
  }

  .c-product__fare {
    @include min-screen($park-item-bp) {
      //width: 20%;
      flex-basis: remify(225px);
    }
  }

  .c-product__static-map {
    display: none;
    padding: 0 remify(24px);

    img {
      border-radius: remify(4px);
    }

    @include min-screen(bp(tablet)) {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }

  .c-product__features {

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

    .active-at {
      text-align: center;

      @include min-screen(bp(tablet)) {
        text-align: left;
      }

      strong {
        display: block;
        font-size: 75%;
        line-height: 1.5;
        margin-bottom: remify(8px);
      }

      img {
        width: remify(50px);
        margin-bottom: remify(8px);
        vertical-align: top;
        margin-right: remify(4px);
      }
    }
  }

  .c-product__focus {
    // flex: 1 0 100%;
    margin-top: remify(24px);
    padding: 0 0 remify(16px) remify(16px);


    @include min-screen(bp(tablet)) {
      margin-top: 0;
      // margin-left: auto;
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-right: remify(16px);
    }

    ul {
      margin-top: remify(8px);
    }

    img {
      display: none;
      margin-left: auto;
      margin-right: auto;
      border-radius: remify(4px);
      width: remify(130px);

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

    @include min-screen(bp(tablet-p)) {
      // flex: 1 1 remify(20px);
    }
  }

  .c-product__price {
    padding: 0;
    margin: 0;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    flex-direction: column;

    @include min-screen($park-item-bp) {
      display: flex;
      align-items: initial;
      justify-content: center;
    }

    a.discover,
    .master-label {
      margin-top: remify(12px);
      @include min-screen($park-item-bp) {
        margin-top: remify(24px);
      }
    }

    .js-discoverToggle-label {
      color: primary(sky, 120);
      text-transform: initial;
      font-size: 100%;

      &.close .icon-arrow {
        display: inline-block;
        transform: rotate(180deg);
      }
    }

    .fare-text {
      > * {
        display: block;
      }
    }

    .fare-text + .c-button {
      margin-top: remify(16px);
    }
  }
}

/*------------------------------------*
  CSS to address #1612 ticket
*------------------------------------*/
.c-content-expo__item .c-product--pop,
.c-content-expo__item .js-productPop {
  $park-item-bp: remify(1220px);

  @include max-screen($park-item-bp) {
    display: block;
  }

  .c-product__focus img {
    @include max-screen(remify(950px)) {
      display: none;
    }
  }
  
  .c-product__fare {
    @include max-screen($park-item-bp) {
      width: 100%;
      text-align: center;
      border-top: 1px solid primary(night, 20);
      border-radius: 0 0 remify(16px) remify(16px);
    }
  }

  .c-product__fold {
    display: none;

    @include max-screen(remify(950px)) {
      display: block;
      border: 1px solid primary(night, 20);
    }
  }

}

.c-content-expo__item .js-productPop:has(.c-product__fold) .c-product{
  @include max-screen(remify(950px)) {
    border-radius: 0 0 remify(16px) remify(16px);
    border-top: none;
  }
}
/*------------------------------------*
  end CSS to address #1612 ticket
*------------------------------------*/

.close {
  display: none;
}

.c-product__pop-info {
  display: none;
  margin-bottom: remify(16px);
}

.chkPopInfo:checked ~ .c-product__pop-info {
  display: block;
}

/*------------------------------------*\
  js-productPop
\*------------------------------------*/

.js-productPop {
  margin-bottom: remify(16px);
}

/*------------------------------------*\
  Modifier telepass
\*------------------------------------*/

.c-product--payed.telepass {

  .c-product__discover {
    flex: 1 0 100%;
    margin-top: remify(8px);
  }

  .c-product__fare {
    background: none;
    display: flex;
    flex-direction: initial;
    flex-wrap: wrap;
    // position: relative;

    .cta {
      flex: 1 0 100%;
      text-align: center;
      margin-bottom: remify(24px);
      z-index: $z-Index-cta-product;

      @include min-screen($park-item-bp) {
        margin-top: remify(24px);
        margin-bottom: 0;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: remify(-34px);
      }
    }
  }

  .c-product__price.c-product__price--desktop {
    display: none;
    @include min-screen($park-item-bp) {
      display: block;
      margin: 0 auto;
    }
  }

  .c-product__price--mobile {
    flex-basis: 33%;

    @include min-screen(bp(phone-p)) {
      flex-basis: initial;
    }
  }

  .cta {
    width: 100%;
  }
}

/*------------------------------------*\
  Modifier telepass checkout
\*------------------------------------*/

.c-product--checkout.telepass {
  .c-product__fare {
    flex-direction: column;
    //width: 20%;
  }

  .c-tooltip {
    margin-bottom: remify(16px);
  }

  .c-product__info {
    @include min-screen(bp(phone-l)) {
      width: auto;
      flex-grow: 1;
    }
  }
}

/*------------------------------------*\
  Modifier P-Express banner
\*------------------------------------*/

.c-product__pay-with {
  display: flex;
  flex-flow: column;
  align-self: flex-start;
  text-align: center;
  width: 100%;
  margin: remify(28px) 0 remify(8px);

  @include min-screen(bp(phone-p)) {
    width: auto;
    margin: 0;
  }

  p {
    font-size: remify(12px);
    margin-bottom: remify(4px);
    text-transform: uppercase;

    @include min-screen($park-item-bp) {
      font-size: remify(14px);
    }
  }
}

.c-product--p-express {
  @include max-screen($park-item-bp) {
    display: flex;
    flex-direction: column;
    .c-product__pay-online {
      order: 3;
    }
    .c-product__fare {
      order: 2;
    }
  }

  @include min-screen($park-item-bp) {
    .c-product__info {
      width: auto;
      flex-grow: 1;
    }
    &.c-product--pop .c-product__info {
      width: auto;
      flex-grow: 1;
    }
    //.c-product__fare  {width: 20%;}
  }
}

/*------------------------------------*\
  Modifier P-Express banner
\*------------------------------------*/
.c-product__reminderwrapper {
  // width: 100%;
  flex-grow: 1;
  @include min-screen(bp(tablet-p)) {
    margin: 0 auto;
    text-align: center;
    position: sticky;
    top: 48px;
    bottom: -100px;
    z-index: 600;
    max-width: remify(920px);
  }
}

.c-product__reminder {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: remify(16px);
  border-radius: remify(8px);
  background: primary(night, 100);
  color: white;
  margin: auto;
  position: relative;
  top: remify(-48px);

  &--bottom {
    top: remify(24px);
  }

  @include min-screen(bp(tablet)) {
    flex-direction: row;
    padding: remify(8px);
  }

  img {
    max-width: remify(48px);
  }

  & .c-button__shift-up {
    top: 0;
  }

  .c-reminder__sticker {
    padding-left: remify(16px);
  }
  .c-reminder__message {
    text-align: center;

    @include min-screen(bp(tablet)) {
      text-align: left;
      padding-left: remify(16px);
      padding-right: remify(48px);
    }
  }
  .c-reminder__sale-message {
    display: block;
    font-size: 16px;
  }
  .c-reminder__sale-details {
    font-size: 12px;
    text-transform: uppercase;
    color: primary(night, 20);
  }
  .c-reminder__price {
    text-align: center;
    margin-bottom: 1rem;

    @include min-screen(bp(tablet)) {
      text-align: right;
      padding-right: remify(24px);
      margin-bottom: 0;
    }
  }
  .c-reminder__sale-price {
    font-size: 24px;
  }
  .c-reminder__old-price {
    font-size: 14px;
    color: primary(night, 20);

    .is-strike {
      text-decoration: line-through;
    }
  }
}

/*------------------------------------*
  Stacked modifier
*------------------------------------*/
.c-product--stacked {

  @include min-screen($park-item-bp) {
    display: block;
  }

  .c-product__type img {
    width: remify(80px);
    margin-bottom: remify(8px);
  }

  .c-product__info {
    align-items: flex-start;
  }

  .c-product__features {
    padding: remify(16px);
  }

  .c-product__fare {
    border-radius: 0 0 remify(16px) remify(16px);
    width: 100%;
    border-top: 1px solid primary(night,20);
    border-left: none;
    padding: remify(16px);
  }

  .c-product__button {
    margin: 0;
  }

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

  .c-product__detail-link {
    margin-top: auto;
    padding-top: remify(16px);
  }

}

/*------------------------------------*
  Park esaurito
*------------------------------------*/
.c-product.is-disabled {

  .c-product__button > .c-button {
    display: block;
    margin-inline: auto;
  }

}