#tide-product {
  @import './components/mixins';
  @import './components/placeholders';
  @import './components/base';
  @import './components/loader';
  @import './components/decrement-increment';
  @import './components/form';
  @import './components/button';
  @import './components/cta';
  @import './components/qsm';
  @import './components/dropdown';
  @import './components/date-range-picker';

  @extend %reset;
  @include body;
  @extend %scrollbar-thin;

  max-width: 1690px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  padding: 0 15px;

  @include media-md {
    padding: 0 30px;
  }

  @include media-lg {
    padding: 0 45px;
  }

  .booking-product {
    background: var(--tide-booking-component-background);
    border-radius: var(--tide-booking-component-radius);
    border: var(--tide-booking-component-border);
    width: 100%;

    // &__container{
    //   max-width: 169rem;
    //   margin: 0 auto;
    //   display: flex;
    //   justify-content: center;
    //   padding: 0 .9375rem;

    //   @include media-md {
    //     padding: 0 1.875rem;
    //   }

    //   @include media-lg {
    //     padding: 0 2.8125rem;
    //   }
    // }

    &__header {
      @include column;
      justify-content: space-between;
      background: var(--tide-booking-component-header-background);
      color: var(--tide-booking-component-header-color);
      border-radius: var(--tide-booking-component-header-border-radius);
      padding: 20px 30px;
      gap: 20px;

      @include media-sm {
        @include row;
        justify-content: space-between;
        flex-direction: row;
        gap: 10px;
      }
    }

    &__hotel {
      @include column;
      gap: 0px;

      .rating {
        .icon {
          fill: var(--tide-booking-component-header-star-rating);
        }
      }
    }

    &__title {
      @include heading;
      @include h1;
      color: var(--tide-booking-component-header-title);
    }

    &__price {
      @include column;
      gap: 10px;

      .pricing {
        @include column;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        gap: 20px;

        @include media-md {
          justify-content: flex-end !important;
          align-items: flex-end !important;
        }

        &__price {
          @include heading;
          color: var(--tide-booking-component-header-price-color);
          font-family: var(--tide-booking-component-header-price-font-family);
          font-size: var(--tide-booking-component-header-price-font-size--mobile);
          font-weight: var(--tide-booking-component-header-price-font-weight);

          @include media-md {
            font-size: var(--tide-booking-component-header-price-font-size--desktop);
          }
        }

        &__header {
          @include row;
          justify-content: flex-start;
          flex-shrink: 0;
          white-space: nowrap;

          @include media-md {
            justify-content: flex-end;
          }

          * {
            line-height: 1;
          }
        }

        &__footer {
          text-transform: uppercase;
          font-size: 12px;
        }
      }

      .package-icons {
        justify-content: flex-end;

        @include media-md {
          width: auto;
          margin-left: auto !important;
        }

        svg {
          fill: var(--tide-booking-component-header-icon-color);
        }
      }

      .package-icons {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }

      .package-icons__icon {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }

      .package-icons__icon + .package-icons__icon:before {
        content: '+';
        color: var(--tide-booking-component-header-icon-color);
        display: inline;
        margin: 0 10px;
        transition: color 0.2s ease-out;
      }
    }

    &__body {
      @include column;
      justify-content: space-between;
      padding: 20px 30px;
      gap: 30px;

      // @include media-lg {
      //     display: grid;
      //     grid-template-columns: repeat(2, 1fr);
      //     gap: 2rem;
      // }

      .booking-product__room {
        &__header,
        &__body,
        &__group-header,
        &__footer {
          background-color: transparent;
          padding: 0;
        }

        &__actions {
          position: relative;
          right: 0;
          display: flex;
          flex-direction: column;
          gap: 10px;

          @include media-sm {
            display: flex;
            flex-direction: row;
            gap: 60px;
          }

          .decrement-increment {
            &:last-child {
              @include media-sm {
                grid-template-columns: 105px auto;
              }
            }
          }
        }

        &-children {
          margin-top: 20px;
          display: flex;
          flex-direction: column;
          gap: 10px;

          &-ages {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(110px, 125px));
            gap: 10px;
          }
        }

        &__body {
          max-height: inherit;
        }

        &__header {
          border: none;
          border-radius: 0;
          box-shadow: none;
          display: flex;
          flex-direction: column;
          gap: 0px;

          margin-top: 20px;
        }

        &__heading {
          font-family: var(--tide-booking-font-body);
          @include h4;
          font-weight: 400;
          margin-bottom: 0px;
        }
      }

      .form__group {
        &--datepicker {
          @include column;
          align-items: center;
          gap: 10px;
          margin-bottom: 5px;
          position: relative;

          @include media-sm {
            flex-direction: row;
          }

          .form__group-input {
            width: 100%;

            @include media-sm {
              width: 50%;
            }
          }

          .qsm__panel {
            display: flex;
            background-color: var(--tide-booking-datepicker-container-background);
            z-index: 98;
            visibility: hidden;
            opacity: 0;
            transition: all 0.3s ease-in-out;

            &--active {
              visibility: visible;
              pointer-events: all;
              opacity: 1;

              @include media-sm {
                width: auto;
              }
            }
          }
        }

        .form__label {
          margin-bottom: 0;
          opacity: 0.7;
          left: 20px;
          line-height: 1.35;
        }
      }
    }

    &__dates {
      margin-top: 0rem;

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

      &-title {
        @include row;
        @include heading;
        @include h2;
        align-items: center;
        margin-bottom: 10px;

        svg {
          width: 20px;
          height: 20px;
          padding-right: 15px;
          fill: var(--tide-booking-black);
        }
      }
    }

    &__rooms {
      margin-top: 0rem;

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

      &-title {
        @include row;
        @include heading;
        @include h2;
        align-items: center;
        margin-bottom: 10px;

        svg {
          width: 20px;
          height: 20px;
          padding-right: 15px;
          fill: var(--tide-booking-black);
        }
      }

      &__container {
        display: flex;
        flex-direction: column;
        gap: 20px;

        @include media-xs {
          justify-content: space-between;
          flex-direction: row;
          gap: 20px;
        }
      }

      &__wrapper {
        width: 100%;
      }

      &__header {
        border: none;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        gap: 0px;
        margin-bottom: 0px;
      }

      &__heading {
        @include h3;
        font-family: var(--tide-booking-font-body);
        font-weight: 500;
        margin-bottom: 0rem;
        color: var(--tide-booking-black);
      }

      &-body {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      &__footer {
        display: flex;
        justify-content: flex-start;

        @include media-xs {
          justify-content: flex-end;
        }
      }
    }

    &__footer {
      @include column;
      gap: 10px;
      padding: 20px 30px;
      border-top: 1px solid #dbdad4;

      &-total {
        @include row;
        justify-content: space-between;
        min-height: 27px;
      }

      &-actions {
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
      }

      &-label {
        @include heading;
        font-size: 24px;
      }

      &-price {
        @include heading;
        font-size: var(--tide-booking-component-header-price-font-size--mobile);
        color: var(--tide-booking-gray-dark);

        @include media-md {
          font-size: var(--tide-booking-component-header-price-font-size--desktop);
        }
      }

      &-cta {
        @include row;
        justify-content: space-between;
        gap: 1rem;

        .cta {
          width: 100% !important;
          margin-left: 0 !important;
        }
      }
    }
  }
}