/* general */
.yotpo-widget-instance {
  &, * {
    --primary-font-family: inherit;
    --secondary-font-family: inherit;
  }
}

.yotpo-sr-bottom-line-right-panel:before {
  content: '|';
  padding-right: 0.6rem;
}

.yotpo-base-layout {
  width: 100% !important;
}

/* reviews widget */
.yotpo-reviews-main-widget {
  /* headline */

  .yotpo-head {
    display: block !important;
    text-align: left;
    margin-bottom: 10px !important;

    .yotpo-headline {
      font-size: var(--3xl-font-size);
      font-weight: var(--font-weight-bold) !important;
    }
  }

  /* summary */

  .yotpo-header-container {
    .yotpo-layout-header-wrapper {
      justify-content: left !important;

      .yotpo-new-review-btn-wrapper {
        margin-left: 50px;
      }
    }

    .yotpo-bottom-line {
      display: block;
      margin: 0 !important;
    }

    .yotpo-vertical-border {
      display: none;
    }

    .yotpo-star-distribution {
      padding: 0;
      padding-inline: 0;
      border-right: 0 none !important;
    }

    .yotpo-bottom-line-score {
      font-weight: var(--font-weight-bold);
    }

    .yotpo-summary-section {
      margin: 15px 0 30px;
    }

    .yotpo-progress-bar {
      width: 260px !important;
      margin-right: 0;
    }

    .yotpo-star-distribution {
      .yotpo-star-distribution-value {
        text-align: right;
        min-width: 3rem;
      }
    }

    .yotpo-bottom-line-question-wrapper-vertical {
      border: 0 none !important;
    }
  }

  /* reviews */

  .yotpo-search-filter {
    width: 190px !important;

    .yotpo-search-input {
      padding-inline-end: 5px;
    }

    .yotpo-icon-button {
      --background: transparent !important;
    }
  }

  /* one review */

  .yotpo-review {
    &,
    span {
      font-size: var(--sm-font-size);
    }

    .yotpo-reviewer-name {
      margin: 10px 0;
    }

    .yotpo-star-rating .star-container {
      margin-right: 4px !important;

      .yotpo-star-rating-icon {
        width: 12px;
        height: auto;
        aspect-ratio: 1 / 1;
      }
    }

    .yotpo-reviewer-details-verified {
      .yotpo-reviewer-verified-buyer-text {
        color: var(--color-base-accent);
        font-weight: var(--font-weight-bold);
        margin: 0 0.5rem 0 0;
        margin-inline-start: 0 !important;
      }

      .yotpo-verified-icon {
        order: 2;

        circle {
          fill: var(--color-base-accent);
        }
      }
    }

    .yotpo-review-rating-title {
      display: block !important;
      margin-bottom: 7px !important;

      .yotpo-review-title {
        margin: 0 !important;
        font-size: var(--base-font-size) !important;
        font-weight: var(--font-weight-bold) !important;
      }
    }

    .yotpo-date-format {
      color: var(--color-base-textSubdued) !important;
    }

    .yotpo-review-votes-wrapper {
      order: 100;
    }

    .yotpo-review-details {
      justify-content: flex-end
    }

    .yotpo-review-right-panel {
      min-width: 100px !important;
    }
  }

  .yotpo-reviews-pagination-container:empty {
    display: none;
  }
}

/* Below XS */
@media screen and (max-width: 376px) {
  .yotpo-review-details {
    justify-content: flex-start
  }
}

/* XS + SM */
@media screen and (max-width: 1023px) {
  .yotpo-review {
    .yotpo-review-right-panel {
      order: 2 !important;
    }
  }
}

@media screen and (max-width: 767px) {
  .yotpo-review-left-panel {
    flex-basis: 70%;
  }

  .yotpo-review-right-panel {
    flex-basis: 30%;
  }

  .yotpo-review-center-panel {
    flex-basis: 100% !important;
    order: 100 !important;
    padding: 0 !important;
    margin-top: 20px;
  }
}

/* Reward points */

.shopify-app-block[id*="rewards_product_points"] > div {
  display: inline-block;
  min-width: 32rem;
  max-width: 100%;
  height: 4rem;
  background: var(--color-neutral-100);
  margin: 0;

  * {
    visibility: hidden;
  }

  .yotpo-product-points-widget {
    display: inline-block;
  }

  a,
  button {
    color: inherit !important;
  }

  #PopupOpener-reward-points-info {
    display: inline-block;
  }

  &[data-yotpo-element-really-loaded="true"] {
    background: none;
    height: auto;

    * {
      visibility: visible;
    }
  }
}