#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 .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: bold;
              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: bold;
        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;
          gap: 1rem;
      }
  
      &-label {
          @include heading;
          font-size: 24px;
      }
  
      &-price {
          @include heading;
          font-size: 24px;
          color: var(--tide-booking-gray-dark);
      }
  
      &-cta {
          @include row;
          justify-content: space-between;
          gap: 1rem;
  
          .cta {
              width: 100% !important;
              margin-left: 0 !important;
          }
      }
  }
  }
}