/*
 * Copyright (c) 2025 TechDivision GmbH
 * All rights reserved
 *
 * This product includes proprietary software developed at TechDivision GmbH, Germany
 * For more information see https://www.techdivision.com/
 *
 * To obtain a valid license for using this software please contact us at
 * license@techdivision.com
 */

/* general */
[id*="yotpo_product_reviews_reviews"] {
  width: 100%;
}

.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;
}

.yotpo-review-border-smooth {
  height: 4px !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(--font-size-3xl);
      font-weight: var(--font-weight-bold) !important;
    }
  }

  /* summary */

  .yotpo-header-container {
    .yotpo-layout-header-wrapper {
      align-items: flex-start !important;
      justify-content: left !important;
      margin-bottom: 1.5rem;

      .yotpo-new-review-btn-wrapper {
        position: absolute;
        width: 0;
        height: 0;
        opacity: 0;
        padding: 0;
        margin: 0;
      }
    }

    .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) !important;
    }

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

    .yotpo-custom-questions-range-question-title {
      margin-bottom: 1rem;
    }

    .yotpo-star-distribution-bar {
      margin-right: 0 !important;
    }

    .yotpo-progress-bar {
      margin-right: 0;
      border-radius: unset;
      background: var(--color-neutral-100) !important;
      height: 4px;
      width: 100% !important;

      .yotpo-progress-bar-score {
        border-radius: unset;
        height: 4px;
      }
    }

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

    .yotpo-bottom-line-question-wrapper-horizontal {
      width: 100% !important;
    }

    .yotpo-bottom-line-question-wrapper-vertical,
    .yotpo-bottom-line-question-wrapper-horizontal {
      border: 0 none !important;
      width: 100%;
      padding-left: 0;
      padding-right: 0;
      padding-inline-end: 0;

      .yotpo-progress-bar {
        width: 100% !important;

        .yotpo-progress-bar-score {
          background: var(--color-neutral-100) !important;
          height: 4px;
        }
      }

      .yotpo-progress-bar-value {
        &::before {
          position: absolute;
          top: 1rem;
          left: 0;
          font-size: var(--font-size-sm);
          line-height: 22px;
          color: var(--text-color);
        }

        &::after {
          position: absolute;
          top: 1rem;
          right: 0;
          font-size: var(--font-size-sm);
          line-height: 22px;
          color: var(--text-color);
        }

        .yotpo-progress-bar-value-label {
          display: none !important;
        }
      }

      .yotpo-progress-bar-value-point {
        background: var(--color-neutral-900);
        bottom: 4px;
        border-radius: unset;
        width: 50px;
        height: 4px;
      }
    }

    .yotpo-star-distribution-bar {
      flex-grow: 1;
    }
  }

  @media screen and (max-width: 989px) {
    .yotpo-header-container {
      .yotpo-layout-header-wrapper {
        flex-direction: column !important;
      }
    }
  }

  /* reviews */

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

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

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

  .yotpo-filters-container {
    margin: 10px 0;

    .yotpo-smart-topics .yotpo-smart-topics-headline {
      font-weight: var(--font-weight-bold) !important;
    }

    .yotpo-smart-topic-filter.smart-topic-wrapper {
      text-transform: capitalize;
      font-size: var(--font-size--sm);
      border: none;
      border-radius: 1.5rem;
      transition: background-color 0.2s ease-in-out;
      background: var(--color-neutral-100);
      padding: 0.625rem 1rem;
      margin-top: 5px;

      &:hover {
        background: var(--color-neutral-200);
        color: var(--color-black);
      }

      &[aria-checked="true"] {
        font-weight: var(--font-weight-bold);
        background: var(--color-neutral-100);
        color: var(--color-black);
      }
    }

    .yotpo-smart-topics-see-more-label {
      color: var(--color-brand-violet);
      text-decoration: none;
    }

    span.yotpo-selected-value__value {
      display: none !important;
    }

    span.yotpo-selected-value__label--textual + span {
      display: none;
    }
  }

  .yotpo-clear-filters-container .yotpo-clear-filters-container-pills {
    justify-content: unset !important;

    .yotop-clear-filters {
      color: var(--color-base-accent);
      font-weight: var(--font-weight-bold);
      text-decoration: none;
    }
  }

  .yotpo-horizontal-pagination > a.yotpo-reviews-pagination-item {
    padding-top: 0.5625rem;
  }

  .yotpo-horizontal-pagination .yotpo-pagination-number-container .yotpo-pagination-number {
    &:hover {
      text-decoration: none !important;
    }
  }

  .yotpo-review-media-modal-body {
    .yotpo-reviewer-image {
      display: none;
    }

    .yotpo-content-date.yotpo-modal-body-review-date {
      padding-top: 4px;
    }

    .yotpo-modal-body-right-side-center {
      .yotpo-star-rating.yotpo-modal-body-review-score {
        order: 1;
      }

      .yotpo-review-title.yotpo-modal-body-review-title {
        order: 2;
      }

      .yotpo-thumbnail-container.yotpo-modal-body-review-media-container {
        order: 4;
      }

      .yotpo-modal-body-review-content {
        order: 3;
      }
    }
  }

  /* one review */

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

    .yotpo-reviewer-name {
      margin: 10px 0;
      font-size: var(--font-size-sm);
    }

    .yotpo-star-rating {
      height: 1.25rem;
    }

    .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: 0.625rem !important;

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

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

    .yotpo-review-votes-wrapper {
      order: 100;
      font-size: var(--font-size-sm);
    }

    .yotpo-distribution-row {
      justify-content: space-between;
    }

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

    .yotpo-review-right-panel {
      margin-top: 0 !important;
    }

    .yotpo-review-votes-icons-container {
      align-items: baseline;
    }
  }

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

  .yotpo-related-product-container {
    max-width: 100% !important;
  }

  .yotpo-related-product-container.yotpo-review-related-product {
    order: 1 !important;
    margin-top: 0 !important;

    .yotpo-related-product-label,
    .yotpo-related-product-name-link {
      color: var(--color-neutral-500) !important;
      font-size: var(--font-size-sm) !important;
    }
  }

  .yotpo-review-votes-wrapper {
    place-content: flex-start !important;
  }
}

.yotpo-reviews-pagination-container {
  .yotpo-vertical-pagination {
    display: inline-block;
    transition: background-color 0.2s ease-in-out;
    background: none !important;

    .yotpo-reviews-pagination-item {
      width: unset !important;
      height: unset !important;
      padding: 0.625rem 1rem !important; /** even if he have that */
      padding-top: unset !important; /** yes, we need that */
      line-height: 1.25rem !important;
      font-size: var(--font-size-base) !important;
      display: inline-block;
      white-space: nowrap;
      color: var(--color-black) !important;
      text-decoration: none !important;
      border-radius: 1.5rem !important;
      border: 2px solid var(--primary-color);
      font-weight: var(--font-weight-bold);
    }
  }
}

.yotpo-modal-body-review-title {
  font-weight: var(--font-weight-bold) !important;
}

.yotpo-modal-body-review-content {
  flex: unset !important;
}

.yotpo-icon-button {
  background-color: rgb(255 255 255 / 50%) !important;

  .yotpo-icon-button__icon svg path {
    fill: rgb(23 23 23 / 100%) !important;
  }
}

/* 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-left-panel {
      order: 1 !important;
    }

    .yotpo-review-center-panel {
      order: 2 !important;
      flex-basis: 50% !important;
    }

    .yotpo-review-right-panel {
      order: 3 !important;
    }
  }

  .yotpo-reviews-main-widget {
    .yotpo-header-container {
      .yotpo-bottom-line-question-wrapper-horizontal {
        margin: unset !important;
        flex-direction: unset;
        justify-content: unset;
        width: 50% !important;
      }
    }
  }

  .yotpo-custom-questions-range-question-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media screen and (max-width: 767px) {
  body .yotpo-display-s .yotpo-review {
    display: grid;
  }

  .yotpo-review-left-panel {
    flex-basis: 70%;
    min-width: 0 !important;
  }

  .yotpo-progress-bar {
    width: 200px;
  }

  .yotpo-review-right-panel {
    flex-basis: 30%;
    min-width: 0 !important;
    grid-column: 2;
    grid-row: 1;
  }

  .yotpo-review-center-panel {
    grid-column: span 2;
    grid-row: 2;
    padding: 0 !important;
    margin-top: 20px;
  }

  .yotpo-custom-questions-range-question-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  .yotpo-review-content {
    margin-top: 0 !important;
    font-size: var(--font-size-sm);
  }
}

/* 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;
    }
  }
}