@import "variables";
@import "mixins";

.single-header {
  position: relative;
  .container {
    .row {
      &.single-header-info {
        flex-wrap: wrap;
        align-items: center;
        align-content: center;
        justify-content: center;
        @include bp("sm") {
          text-align: center;
        }
        h2 {
          margin: 0;
          @include bp("sm") {
            margin-bottom: (2rem * 1.6);
          }
        }
        .col-4 {
          text-align: right;
          margin: $space-sm 0;
          @include bp("sm") {
            text-align: center;
          }
        }
      }
      &.single-header-gal {
        .single-header-gal-col {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          grid-template-rows: repeat(2, 1fr);
          grid-column-gap: 4rem;
          grid-row-gap: 4rem;
          @include bp("md") {
            grid-column-gap: 2rem;
            grid-row-gap: 2rem;
          }
          @include bp("sm") {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(3, 1fr);
            grid-column-gap: 2rem;
            grid-row-gap: 2rem;
          }
          .gallery-img {
            position: relative;
            transition: $trans;
            &::after {
              content: "";
              transition: $trans;
            }
            &:hover {
              &::after {
                transition: $trans-h;
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                background: $popup-overlay;
                width: 100%;
                height: 100%;
                z-index: 0;
              }
            }
            &:nth-child(1) {
              grid-area: 1 / 1 / 3 / 3;
              padding-bottom: 80%;
              @include bp("sm") {
                grid-area: 1 / 1 / 3 / 3;
                padding-bottom: 100%;
              }
            }
            &:nth-child(2) {
              grid-area: 1 / 3 / 2 / 4;
              @include bp("sm") {
                grid-area: 3 / 1 / 4 / 2;
                padding-bottom: 50%;
              }
            }
            &:nth-child(3) {
              grid-area: 1 / 4 / 2 / 5;
              @include bp("sm") {
                grid-area: 3 / 2 / 4 / 3;
                padding-bottom: 50%;
              }
            }
            &:nth-child(4) {
              grid-area: 2 / 3 / 3 / 4;
              @include bp("sm") {
                display: none;
              }
            }
            &:nth-child(5) {
              grid-area: 2 / 4 / 3 / 5;
              @include bp("sm") {
                display: none;
              }
            }
            &:nth-child(n + 6) {
              display: none;
            }
            &.overlay {
              &::before {
                content: "";
                position: absolute;
                background: $popup-overlay;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
              }
            }
            #number-of-imgs {
              font-size: 3rem;
              color: #fff;
              z-index: 1;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
      }
    }
  }
}

#reservation-form {
  .wpbs-main-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 4rem;
    grid-row-gap: 0;
    align-items: flex-start;
    @include bp("md") {
      grid-template-columns: 1fr;
      grid-column-gap: 0;
      grid-row-gap: 0;
    }
    .facilities {
      grid-area: 1 / 1 / 2 / 3;
      @include bp("md") {
        grid-area: auto;
      }
      .facilities-wrap {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        .facility-item {
          flex: 1 0 calc(33.33333% - (0.5rem * 1.6));
          max-width: calc(33.33333% - (0.5rem * 1.6));
          margin-bottom: (1rem * 1.6);
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-content: center;
          justify-content: flex-start;
          align-items: center;
          @include bp("md") {
            flex: 1 0 50%;
            max-width: 50%;
          }
          @include bp("sm") {
            flex: 1 0 100%;
            max-width: 100%;
          }
          img {
            width: 2.4rem;
            height: 2.4rem;
            margin-right: (1rem * 1.6);
          }
        }
      }
    }
    .wpbs-container {
      grid-area: 2 / 1 / 3 / 3;
      @include bp("md") {
        grid-area: auto;
      }
    }
    .wpbs-form-container,
    .wpbs-payment-confirmation {
      position: sticky;
      top: 8rem;
      bottom: 8rem;
      right: 0;
      background: $gray100;
      grid-area: 1 / 3 / 3 / 4;
      padding: $space-sm !important;
      @include bp("md") {
        position: relative !important;
        grid-area: auto;
        top: 0 !important;
        right: auto;
      }
    }
  }
}

body {
  &.booking-mobile-active {
    @include bp("sm") {
      overflow: hidden;
    }
  }
}

#reservation-trigger {
  display: none;
  @include bp("sm") {
    display: block;
    position: fixed;
    bottom: 0;
    z-index: 10;
    width: 100%;
  }
}

.booking-mobile {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: $col-bg;
  z-index: 9999;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: (2rem * 1.6);
  &.booking-mobile-active {
    @include bp("sm") {
      display: block;
    }
    .close-btn {
      position: fixed;
      top: 0;
      right: 0;
      padding: (2rem * 1.6);
      z-index: 10;
      background: $col-bg;
      font-weight: $fw-bold;
      font-size: 1.8rem;
      cursor: pointer;
    }
  }
}

#main .booking #reservation-form .wpbs-main-wrapper {
  .wpbs-container,
  .wpbs-form-container,
  .wpbs-payment-confirmation {
    @include bp("sm") {
      display: none;
    }
  }
}
