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

section.packages {
  > .plugin-container {
    margin: $space-lg auto calc(#{$space-lg} * 2);
    display: flex;
    flex-direction: column;
    @include bp("md") {
      display: block;
      margin: $space-md auto $space-lg;
    }
  }
  .vbclistheadt,
  .vbo-pkgdet-title {
    align-self: center;
    color: $col-sec;
    font-size: $fs-h1;
    @include underlined;
    @include bp("md") {
      font-size: $fs-h2;
      align-self: flex-start;
    }
  }
  .vbo-pkglist-container {
    margin-top: $space-lg;
    text-align: initial;
    @include bp("md") {
      text-align: center;
    }
  }
  .vbo-pkglist-pkg {
    background-color: $col-sec;
    border-radius: $border-radius;
    margin-bottom: $space-md;
    box-shadow: 0px 0px 0px 0px rgba(18, 38, 13, 0.15), 0px 9px 19px 0px rgba(18, 38, 13, 0.15), 0px 34px 34px 0px rgba(18, 38, 13, 0.13), 0px 77px 46px 0px rgba(18, 38, 13, 0.08),
      0px 137px 55px 0px rgba(18, 38, 13, 0.02), 0px 213px 60px 0px rgba(18, 38, 13, 0);
    border: none;
    align-items: center;
    @include bp("xl") {
      flex-wrap: wrap;
    }
    .vbo-pkglist-pkg-bone {
      width: auto;
      @include bp("xl") {
        flex-basis: 100%;
      }
      .vbo-pkglist-pkg-img {
        img {
          border-radius: $border-radius 0 0 $border-radius;
          object-fit: cover;
          aspect-ratio: 1/1;
          max-height: 320px;
          @include bp("xl") {
            border-radius: $border-radius $border-radius 0 0;
          }
        }
      }
    }
    .vbo-pkglist-pkg-btwo {
      padding: 0 $space-md;
      justify-content: center;
      border-right-width: 1px;
      margin: $space-xs 0;
      @include bp("md") {
        padding: 0 4rem;
        text-align: left;
        padding: 0 $space-xs;
      }
      .vbo-pkglist-pkg-name {
        h4 {
          color: $white;
          font-size: $fs-h3;
          margin-bottom: $space-xs;
          font-weight: $fw-bold;
          @include bp("md") {
            margin-bottom: 1rem;
          }
        }
      }
      .vbo-pkglist-pkg-shortdescr {
        color: $white;
      }
      .vbo-pkglist-pkg-dates-cont {
        margin-top: $space-md;
        @include bp("md") {
          margin-top: $space-xs;
        }
        .vbo-pkglist-pkg-dates,
        .vbo-pkgdet-dates {
          margin-top: 0;
          padding: 0.8rem 3.2rem;
          background: $col-bg;
          font-size: $fs-p;
          border-radius: 100px;
          color: $col-sec;
          .fa-clock:before {
            content: url(theme-url("/assets/icons/time.svg"));
            display: block;
            transform: translate(0px, 4px);
          }
        }
      }
    }
    .vbo-pkglist-pkg-bthree {
      border-left: none;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      padding: 0;
      @include bp("xl") {
        flex-basis: 30%;
      }
      @include bp("md") {
        flex-basis: 100%;
        text-align: left;
      }
      .vbo-pkglist-pkg-cost {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        margin-bottom: 1rem;
        .vbo-pkglist-pkg-price,
        .vbo-pkglist-pkg-priceper {
          color: $white;
        }
        .vbo-pkglist-pkg-price {
          font-size: $fs-h3;
          margin-right: 1rem;
          font-family: $font-family-headings;
        }
        .vbo-pkglist-pkg-priceper {
        }
      }
      .vbo-pkglist-pkg-details {
        order: 100;
        @include bp("xl") {
          width: calc(100% - 8rem);
          margin-bottom: $space-xs;
        }
        @include bp("md") {
          width: calc(100% - 4.8rem);
        }
      }
      .vbo-pkglist-pkg-details a {
        @include button;
        margin: $space-xs 0 0;
        @include bp("lg") {
          width: 100%;
        }
      }
      .vbo-pkglist-pkg-benefits {
        padding: 5px 3rem;
        margin: 0 auto;
        font-size: $fs-p;
        border: none;
        border-radius: 100px;
        background-color: #d2d4bc;
        text-align: center;
        width: max-content;
      }
    }
  }
  .vbo-pkgdet-container {
    margin: $space-md 0 $space-lg;
    @include bp("md") {
      margin: $space-xxs 0 $space-md;
    }
    .vbo-pkgdet-topwrap {
      .vbo-pkgdet-img {
        img {
          width: 100%;
          object-fit: cover;
          aspect-ratio: 16/9;
          border-radius: $border-radius;
          margin-bottom: $space-md;
          @include bp("md") {
            margin-bottom: 1rem;
          }
        }
      }
      .vbo-pkgdet-descrprice-block {
        border: none;
        background: transparent;
        .vbo-pkgdet-descr {
          padding: 0;
          border: none;
          text-align: left;
          background: transparent;
          line-height: 180%;
        }
        .vbo-pkgdet-cost {
          padding: 0;
          @include bp("md") {
            text-align: left;
          }
          .vbo-pkglist-pkg-price {
            display: flex;
            flex-direction: row-reverse;
            justify-content: center;
            font-family: $font-family-headings;
            font-size: $fs-h3;
            color: $col-sec;
            @include bp("md") {
              justify-content: flex-end;
            }
          }
        }
      }
      .vbo-pkgdet-condsdates-block {
        text-align: left;
      }
      .vbo-pkgdet-conds {
        padding: 0;
        border-radius: 0;
        border: none;
        line-height: 180%;
        margin-bottom: $space-md;
        max-width: 80%;
        @include bp("md") {
          max-width: 100%;
          margin-bottom: $space-xs;
        }
      }
      .vbo-pkgdet-dates {
        color: $col-sec;
        font-size: $fs-p;
        font-weight: 600;
        background: #d2d4bc;
        display: inline-flex;
        align-items: center;
        padding: 8px 3.2rem;
        justify-self: flex-start;
        span {
          font-size: $fs-p;
        }
      }
      .vbo-pkgdet-benefits {
        border: none;
        margin: $space-xxs 0;
        padding: 0;
        display: inline-flex;
        background: #d2d4bc;
        border-radius: $border-radius;
        padding: 8px 3.2rem;
        color: $col-sec;
        font-size: $fs-p;
        font-weight: 600;
      }
    }
    .vbo-pkgdet-roomswrap {
      margin-top: $space-lg;
      display: flex;
      flex-direction: column;
      @include bp("md") {
        margin-top: $space-md;
        display: block;
      }
      h3 {
        color: $col-sec;
        font-size: $fs-h2;
        line-height: $lh-h2;
        @include underlined;
        align-self: center;
      }
      .vbo-pkgdet-roomslist {
        margin-top: $space-md;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 3rem;
        grid-row-gap: 3rem;
        align-items: flex-start;
        @include bp("lg") {
          grid-template-columns: repeat(2, 1fr);
        }
        @include bp("sm") {
          grid-template-columns: repeat(1, 1fr);
        }
        .vbo-pkgdet-room-container {
          margin: 0;
          border: none;
          border-radius: $border-radius;
          background-color: $white;
          box-shadow: 0px 0px 0px 0px rgba(40, 48, 24, 0.1), 0px 9px 20px 0px rgba(40, 48, 24, 0.1), 0px 36px 36px 0px rgba(40, 48, 24, 0.09), 0px 80px 48px 0px rgba(40, 48, 24, 0.05),
            0px 142px 57px 0px rgba(40, 48, 24, 0.01), 0px 223px 62px 0px rgba(40, 48, 24, 0);
          .vbo-pkgdet-room-outer {
            display: flex;
            flex-direction: column;
            .vbo-pkgdet-room-img {
              width: 100%;
              float: none;
              img {
                aspect-ratio: 4/3;
                object-fit: cover;
                border-radius: 24px 24px 0 0;
              }
            }
            .vbo-pkgdet-room-det {
              float: none;
              width: 100%;
              padding: $space-xs;
              h4 {
                font-size: $fs-h3;
                color: $col-sec;
                margin-bottom: 1rem;
              }
            }
            .vbo-pkgdet-room-booknow {
              float: none;
              width: 100%;
              padding: 0 $space-xs $space-xs;
              button {
                width: 100%;
              }
            }
          }
          .vbo-pkgdet-room-inner {
            padding: $space-xs;
            .vbo-pkgdet-room-thumbs-cont {
              margin: 0;
              img {
                border-radius: 8px;
              }
            }
            .vbo-seldates-cont.vbo-pkgdet-room-form {
              padding: 0;
              margin: 0;
              h4 {
                color: $col-sec;
                border: none;
              }
              .vbdivsearch {
                padding: 0;
                box-shadow: none;
                margin: 0;
                form > .vb-search-inner > div {
                  padding: 0;
                  border: none;
                  width: 100%;
                  .input-group {
                    justify-content: flex-end;
                  }
                }
                .vbo-search-submit {
                  width: 100%;
                  margin: $space-xxs 0 0;
                  .btn {
                    width: 100%;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
