/**
 * Unit ratings component styling.
 *
 * These rules are copied from the theme's ratings styling in
 * _3.92-o-2021-hero-image-gallery.scss (originally scoped under
 * .o-2021-hero-image-gallery) and re-scoped to this component's own
 * `.unit-ratings-block` wrapper, so the component no longer depends on the
 * hero-gallery organism class. The original theme SCSS is left untouched.
 *
 * Note: the star markup's base styling (.m-star-rating) lives in the theme's
 * molecule layer (not the hero-gallery organism), so it still applies here.
 */
.unit-ratings-block {
  background-color: #fff;
  box-shadow: 0 8px 20px 0 rgba(41, 41, 42, 0.08);

  .m-container {
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
  }

  .ratings-mobile-wrapper {
    display: flex;
    padding: 0;
    gap: 20px;

    @media (min-width: 992px) {
      gap: 40px;
    }

    @media (min-width: 1200px) {
      gap: 80px;
    }

    .m-ratings {
      gap: 15.6px;
      justify-content: center;

      img {
        max-height: 22px;
      }
    }

    .m-google-rating {
      img {
        margin-top: 2px;
      }

      a {
        display: flex;
        gap: 10px;

        &:hover {
          text-decoration: none;
          cursor: pointer;
        }
      }

      .a-review-text {
        font-size: 16px;
        line-height: 24px;
        color: #1a1a1a;

        .a-text {
          font-weight: 300;
          margin-right: 0;
          font-size: 16px;
        }

        .a-value {
          font-weight: 300;
          margin-left: 10px;
          font-family: "ITC Avant Garde Gothic W05 Bol", helvetica, arial, sans-serif;
        }
      }

      .m-google-star-rating {
        --percent: calc(var(--rating) / 5 * 100%);

        .a-google-filled::after {
          content: "★★★★★";
          background: linear-gradient(90deg, #bba15a var(--percent), #b5b5b5 var(--percent));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-size: 19px;
          letter-spacing: 3px;
        }

        @media (min-width: 576px) {
          .a-google-filled::after {
            letter-spacing: 2px;
          }
        }
      }
    }

    .top-brands-group,
    .bottom-brand-group {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      flex-direction: column;

      .m-ratings,
      .trustpilot-widget {
        display: flex;
        align-items: center;
        white-space: nowrap;
      }
    }

    @media (min-width: 768px) and (max-width: 991px) {
      .top-brands-group {
        width: 100%;
        justify-content: center;
        gap: 35px;
        flex-direction: row;
      }

      .bottom-brand-group {
        width: 100%;
        justify-content: center;
      }
    }

    .top-brands-group {
      @media (min-width: 992px) {
        gap: 40px;
        flex-direction: row;
      }

      @media (min-width: 1200px) {
        gap: 80px;
      }
    }
  }
}