/**
 * #.# Styles
 *
 * CSS for both Frontend+Backend.
 */
@import "~slick-carousel/slick/slick.scss";
@import "~slick-carousel/slick/slick-theme.scss";

/**
 * Slick override
 */
.slick-dots {
  bottom: 25px;

  li {
    button {
      width: 40px;
      height: 40px;

      &:before {
        width: 40px;
        height: 40px;
        font-size: 26px;
        color: #FFF;
      }
    }

    &.slick-active {
      button {
        &:before {
          color: #FFF;
        }
      }
    }
  }
}

.wp-block-bokun-product-widget {
  padding: 2rem 0;
}

.embed-bokun-product-images-carousel {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
  -webkit-transition: opacity 1s ease;

  &.slick-initialized {
    visibility: visible;
    opacity: 1;
  }
  .embed-bokun-product-images-carousel__slide {

  }
}

.wp-block-bokun-product-widget__title {
  text-align: center;
  margin: 0 0 10px 0 !important;
  color: inherit;
  font-weight: bold;
  font-size: 45px;

  &.wp-block-bokun-product-widget__title--booking {
    margin: 0 0 15px 0 !important;
    font-size: 45px !important;
  }
}

.wp-block-bokun-product-widget__excerpt {
  text-align: center;
  margin: 0 0 10px 0 !important;
  color: inherit;
  font-weight: normal;
  font-size: 20px;
}

.wp-block-bokun-product-widget__duration {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 15px;

  > svg {
    width: 70px;
    height: 70px;
    padding-right: 15px;

    > .wp-block-bokun-product-widget__svg-path {
      fill: #CCC;
    }
  }
}

.wp-block-bokun-product-widget__content-row {
  @include make-row();
}

.wp-block-bokun-product-widget__content-row__column-left {
  @include make-col-ready();
  margin-bottom: 20px;

  @include media-breakpoint-up(lg) {
    @include make-col(7);
  }
}

.wp-block-bokun-product-widget__content-row__column-right {
  @include make-col-ready();
  margin-bottom: 20px;

  @include media-breakpoint-up(lg) {
    @include make-col(5);
  }
}

.wp-block-bokun-product-widget__bordered-content {
  border: #000 1px solid;
  padding: 15px;
  font-size: 20px;

  > h2, > h3, > h4, > h5, > h6 {
    font-size: 25px;
    margin: 0 0 15px 0 !important;
  }
}