Table: Offline Payment Methods

.c-table_cnt {
  // padding: remify(16px);
  border-radius: remify(4px);
  grid-column: full;
  
  @include min-screen( bp(tablet) ) {
    grid-column: main;
  }

  &.c-table_cnt--noSlide {
    margin-bottom: remify(24px);
  }

  .c-canvas & {
    margin-top: remify(40px);
  }

}

.c-table {
  border: 1px solid primary(night, 20);

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

  .o-collapsible__content & {
    margin-bottom: remify(32px);
  }
  
}

.c-table caption {
  font-size: 200%;
  text-align: left;
  color: primary(night, 100);
  margin-bottom: remify(16px);
  
  @include max-screen( bp(tablet) ) {
    font-size: 125%;
    padding: 0 remify(16px);

    .c-table_cnt--noSlide & {
      padding: 0;
    }

  }

  &.medium {
    font-size: 125%;
  }

  .c-postcard & {
    @extend .u-visuallyhidden;
  }

  .c-canvas & {
    font-size: 100%;
  }

}

.c-table thead tr {
  background: #fff;
  text-transform: uppercase;
  color: primary(night, 100);
  text-align: left;

}

.c-table tbody tr {
  background: #fff;

  &:nth-child(even) {
    background-color: #fff;

    &.to-merge + tr {
      background-color: #fff;
    }

  }

  &:nth-child(odd) {
    background-color: #F3F5F7;

    &.to-merge + tr {
      background-color: #F3F5F7;
    }
    
    @include max-screen ( bp(tablet) ) {
      background-color: #fff;
    }

  }

  &.is-merged {
    td strong {
      border: none;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
      @include max-screen ( bp(tablet) ) {
        clip: initial;
        height: auto;
        margin: initial;
        overflow: initial;
        padding: 0;
        position: initial;
        width: initial;
      }
    }
  }


  @include max-screen ( bp(tablet) ) {
    border: 1px solid primary(night, 20);
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }

}

.c-table tbody td {

  &:nth-child(even) {
    @include max-screen ( bp(tablet) ) {
      background-color: #fff;
    }
  }

  &:nth-child(odd) {
    @include max-screen ( bp(tablet) ) {
      background-color: #F3F5F7;
    }
  }

  &:before {
    color: primary(night, 100);
  }

  @include max-screen ( bp(tablet) ) {
    font-size: 85%;
    line-height: 1.5;
    flex: 1;
  }

  img {
    margin-left: remify(8px);
    @include max-screen ( bp(tablet) ) {
      display: none;
    }
  }

  img + p,
  img + a {
    margin-left: remify(8px);
  }

  ul.bordered {
    li {
      display: block;
      padding: remify(8px) 0;
      border-bottom: remify(1px) solid #fff;

      &:first-child {
        padding-top: 0;
      }

      &:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }

    }
  }

}

.c-table th,
.c-table td {
  padding: remify(16px);
  vertical-align: top;
}

.c-table_cnt--parkings-price {
  margin-top: remify(80px);

  .c-main-reservationDetail & {
    margin-top: 0;

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

  .c-postcard & {
    margin-bottom: remify(24px);
  }

}

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

.c-table.c-table--flights {
  width: 100%;
  border-collapse: collapse;
  border: none;
  position: relative;
  table-layout: auto;

  .c-main--arrivals-departures & {
    @include max-screen(bp(phablet)) {
      width: 100vw;
      margin-left: remify(-16px);
    }
  }

  th {
    font-weight: fw(regular);
    font-size: 75%;
    height: remify(48px);

    // @include max-screen ( bp(tablet) ) {
    //   padding: remify(8px);
    // }
  }

  td {
    // @include max-screen ( bp(tablet) ) {
    //   padding: remify(8px);
    // }
  
  }

  small {
    display: block;
  }

  th, td {
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    vertical-align: middle;

    // @include min-screen ( bp(tablet-p) ) {
    //   white-space: initial;
    //   text-overflow: initial;
    //   overflow: initial;
    // }

  }

  thead tr {
    background-color: #F3F5F7;
    // height: remify(68px);
  }

  .c-billboard--arrivals & thead tr {
    background-color: primary(sun, 20);
  }

  tbody tr {
    display: table-row;
    flex-direction: initial;
    border: none;
    // height: remify(56px);
    
    &:nth-child(even) {
      background-color: #F9FBFC;
    }
  
    &:nth-child(odd) {
      background-color: #fff;
    }
     
  }

  .c-table__cell-to-clamp {
    width: remify(150px);
  }

  .c-table__cell-to-clamp .clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
  }

  tr.currentTime ~ tr:nth-child(odd), 
  tr.currentTime ~ * ~ tr:nth-child(odd) {
    background-color: #F3F5F7;
  }

  tr.currentTime ~ tr:nth-child(even), 
  tr.currentTime ~ * ~ tr:nth-child(even) {
    background-color: #fff;
  }

  tr.currentTime {
    position: relative;
    height: 0;

    td {
      position: absolute;
      width: 100%;
      border-top: remify(3px) solid primary(sky, 120);
      overflow: initial; // Fixes #324
    }

    p {
      position: absolute;
      z-index: 200;
      background-color: primary(sky, 120);
      right: 0;
      top: remify(-16px);
      color: #fff;
      padding: remify(2px) remify(8px);
      border-radius: remify(20px);
    }

    .now {
      padding: 0;
      height: 0;
    }

  }

  tbody td {
    // height: remify(80px);

    &:nth-child(odd),
    &:nth-child(even) {
      background-color: transparent;
    }

    img {
      display: inline-block;
      max-height: remify(27px);
      margin-left: 0;

      // @include max-screen ( bp(tablet) ) {
      //   max-width: remify(18px);
      // }
    }

  }

  .no-mobile {
    // @include max-screen ( bp(tablet) ) {
    //   display: none;
    // }
  }

  .situation {
    .c-billboard & {
      font-size: 80%;
    }
  }

  .is-positive {
    color: status(positive);
  }
  .is-negative {
    color: status(negative);
  }

}

/*------------------------------------*
  3 cols modifier
*------------------------------------*/
.c-table_cnt--3-cols {
  tr, th {
    width: calc(100% / 3);
  }
}

/*------------------------------------*
  4 cols modifier
*------------------------------------*/
.c-table_cnt--4-cols {
  tr, th {
    width: calc(100% / 4);
  }
}