/* Judge.me reviews widget override */
.ps .apps {
  --summary-stars-align-items: center;
}

.eg .apps {
  --summary-stars-align-items: flex-end;
}

.sc .apps {
  --summary-stars-align-items: center;
}

.apps {
  .jdgm-rev-widg {
    padding: 0;
  }

  .jdgm-rev-widg__title {
    font: var(--font-heading-2);
    letter-spacing: var(--letter-spacing-heading);
    text-align: center;

    @media screen and (min-width: 1024px) {
      text-align: left;
    }
  }

  .jdgm-rev__timestamp,
  .jdgm-rev__location {
    color: var(--color-body);
    font: var(--font-paragraph);
  }

  .jdgm-rev__author {
    font: var(--font-paragraph-bold);
  }

  .jdgm-rev__title {
    font: var(--font-heading-5);
    letter-spacing: var(--letter-spacing-heading);
  }

  .jdgm-rev-widg__header {
    text-align: left;
  }

  .jdgm-rev-widg__summary-stars {
    display: flex;
    align-items: var(--summary-stars-align-items);
  }

  .jdgm-rev-widg__summary-average {
    margin-left: var(--spacing-unit-xs);
    font: var(--font-heading-1);
    letter-spacing: var(--letter-spacing-heading);
  }

  .jdgm-rev-widg__summary .jdgm-star {
    font-size: 2.8rem;
  }

  .jdgm-form__reviewer-name-format-container {
    display: flex;
    align-items: center;

    .jdgm-form__inline-label {
      margin-right: var(--spacing-unit-xxs);
      margin-bottom: 0 !important;
    }
  }

  .jdgm-notification__title:before {
    text-align: center;
  }

  .jdgm-rev-widg__summary-inner,
  .jdgm-histogram {
    @media screen and (max-width: 1024px) {
      text-align: center;
    }
  }

  .jdgm-rev-widg__summary-stars {
    @media screen and (max-width: 1024px) {
      justify-content: center;
    }
  }

  .jdgm-widget-actions-wrapper {
    @media screen and (max-width: 1024px) {
      align-items: center;
    }
  }

  /* Tabs */
  .jdgm-subtab {
    padding-bottom: 0;
  }

  .jdgm-subtab__name {
    padding: var(--spacing-unit-xs) 0;
    font: var(--font-button-text);
    letter-spacing: var(--letter-spacing-button-text);
    text-decoration: none;
    text-transform: uppercase;

    & + & {
      position: relative;
      margin-left: calc(var(--spacing-unit-s) * 2);

      &:before {
        position: absolute;
        top: 50%;
        left: calc(var(--spacing-unit-s) * -1);
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background-color: var(--color-brand-01);
        width: 0.3rem;
        height: 0.3rem;
        content: "";
      }
    }
  }

  .jdgm-subtab__name.jdgm--active {
    border-bottom: 4px solid var(--color-brand-01);
    background-color: transparent;
  }

  /* Answer */
  .jdgm-ans,
  .jdgm-rev__reply {
    background-color: var(--color-grays-02);
  }

  /* labels */
  .jdgm-form .jdgm-form__fieldset > label,
  .jdgm-form .jdgm-form__fieldset label[for] {
    display: block;
    text-align: left;
  }

  /* inputs */
  .jdgm-form input[type="text"],
  .jdgm-form input[type="email"],
  .jdgm-form input[type="url"],
  .jdgm-form textarea,
  .jdgm-widget .jdgm-media-fieldset__input,
  .jdgm-row-search .jdgm-review-search:not([type="submit"]) {
    box-sizing: border-box;
    border: var(--border-width-form-input) solid var(--color-form-input-borders);
    border-radius: var(--border-radius-form-input);
    background: var(--color-utility-01);
    padding: calc(var(--spacing-unit-s) - 0.2rem) var(--spacing-unit-s); /* [1] */
    width: 100%;
    color: var(--color-form-inputs);
    line-height: 1;

    &:focus {
      border-color: var(--color-form-input-borders-focus);
    }
  }

  /* buttons container */

  .jdgm-widget:not(.jdgm-review-widget--small, .jdgm-review-widget--medium)
    :not(.jdgm-revs-tab__content-header)
    > .jdgm-widget-actions-wrapper,
  .jdgm-form__fieldset-actions,
  .jdgm-widget-actions-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-unit-xs);
  }

  /* buttons */
  .jdgm-widget .jdgm-write-rev-link,
  .jdgm-btn--solid,
  input[type="submit"].jdgm-btn--solid,
  .jdgm-widget:not(.jdgm-review-widget--small, .jdgm-review-widget--medium)
    .jdgm-ask-question-btn,
  .jdgm-widget:not(.jdgm-review-widget--small)
    .jdgm-form__fieldset-actions
    .jdgm-cancel-question,
  .jdgm-widget:not(.jdgm-review-widget--small)
    .jdgm-form__fieldset-actions
    .jdgm-cancel-rev,
  .jdgm-ask-question-btn.jdgm-ask-question-btn,
  .jdgm-review-widget--small .jdgm-form__fieldset-actions .jdgm-cancel-rev,
  .jdgm-review-widget--small
    .jdgm-form__fieldset-actions
    .jdgm-cancel-question {
    transition: background-color var(--transition-speed),
      color var(--transition-speed), border-color var(--transition-speed);
    cursor: pointer;
    margin: 0;
    border: 1px solid var(--button-primary-border-color);
    border-radius: var(--button-border-radius);
    background-color: var(--color-brand-01);
    padding: var(--spacing-unit-s) var(--spacing-unit-m);
    min-width: 17.6rem;
    overflow: visible;
    color: var(--color-utility-01);
    font-weight: 700;
    font-size: var(--font-size-button-text);
    line-height: 1;
    font-family: var(--font-button-text);
    letter-spacing: var(--letter-spacing-button-text);
    user-select: none;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    &:hover:not(p) {
      border-color: var(--button-primary-border-color-hover);
      background-color: var(--button-primary-background-color-hover);
      color: var(--button-primary-font-color-hover);
      text-decoration: none;
    }

    &:focus-visible {
      outline-color: var(--color-brand-01);
    }
  }

  .jdgm-widget:not(.jdgm-review-widget--small, .jdgm-review-widget--medium)
    .jdgm-ask-question-btn,
  .jdgm-widget:not(.jdgm-review-widget--small)
    .jdgm-form__fieldset-actions
    .jdgm-cancel-question,
  .jdgm-widget:not(.jdgm-review-widget--small)
    .jdgm-form__fieldset-actions
    .jdgm-cancel-rev,
  .jdgm-ask-question-btn.jdgm-ask-question-btn,
  .jdgm-review-widget--small .jdgm-form__fieldset-actions .jdgm-cancel-rev,
  .jdgm-review-widget--small
    .jdgm-form__fieldset-actions
    .jdgm-cancel-question {
    border-color: var(--button-secondary-border-color);
    background-color: var(--color-utility-01);
    min-width: auto;
    color: var(--color-brand-01);

    &:hover:not(p) {
      opacity: 1;
      border-color: var(--color-brand-01);
      background-color: var(--color-utility-01);
      color: var(--color-brand-01);
    }

    &:focus-visible {
      outline-color: var(--color-brand-01);
    }

    .preferred-store-button & {
      justify-content: space-between;
      cursor: default;
    }
  }

  .jdgm-rev__pic-img.jdgm-rev__pic-img {
    border-radius: var(--border-radius-branded);
  }
}