/*
  Retro-arcade skin for the Judge.me review widget.

  Judge.me ships a generated stylesheet whose colour/typography rules are
  merchant-setting driven and land at equal or higher specificity than theme
  CSS, so appearance overrides here are forced rather than relying on order.
*/

.jdgm-widget.jdgm-widget {
  width: 100%;
  margin: 0 auto var(--space-xxl);
  padding: var(--space-xl);
  border: 1px solid var(--mx-surface-panel-border);
  border-radius: var(--mx-radius-panel);
  background: var(--mx-surface-panel);
  box-shadow: var(--mx-shadow-panel);
  backdrop-filter: blur(10px);
  color: var(--mx-color-text) !important;
  font-family: var(--mx-font-ui) !important;
  font-size: 1rem;
  line-height: 1.6;

  @media (max-width: 640px) {
    margin-bottom: var(--space-xl);
    padding: var(--mx-gap-md);
  }

  /* Judge.me colours nearly every text node individually. */
  .jdgm-rev-widg__body,
  .jdgm-rev__content,
  .jdgm-rev__header,
  p,
  b,
  strong,
  em,
  h2,
  h3,
  label,
  li {
    /* color: inherit !important; */
    font-family: inherit !important;
  }

  .jdgm-star,
  .jdgm-icon,
  [class^='jdgm-icon-'],
  [class*=' jdgm-icon-'] {
    font-family: JudgemeIcons, sans-serif !important;
  }

  a {
    color: var(--mx-color-cyan) !important;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  .jdgm-rev-widg__title,
  .jdgm-rev-widg__summary-text,
  .jdgm-rev-widg__summary-stars,
  .jdgm-rev__author,
  .jdgm-rev__title,
  .jdgm-rev__body,
  .jdgm-rev__timestamp,
  .jdgm-rev__location,
  .jdgm-rev__buyer-badge,
  .jdgm-rev__prod-link,
  .jdgm-rev__actions,
  .jdgm-rev__votes,
  .jdgm-histogram__frequency,
  .jdgm-histogram__percentage {
    color: var(--mx-color-text) !important;
  }

  /* Judge.me draws light hairlines between rows. */
  .jdgm-divider-top,
  .jdgm-divider-bottom {
    border-color: var(--mx-border-cyan-faint) !important;
  }

  .jdgm-star {
    color: var(--mx-color-yellow) !important;
    text-shadow: var(--mx-text-glow-cyan);
  }

  .jdgm-star.jdgm--off {
    color: var(--mx-color-muted) !important;
    opacity: var(--mx-opacity-disabled);
    text-shadow: none;
  }

  /* Header + summary */
  .jdgm-rev-widg__header {
    display: grid;
    gap: var(--mx-gap-sm);
    padding-bottom: var(--mx-gap-lg);
    border-bottom: 1px solid var(--mx-border-cyan-faint);
  }

  .jdgm-rev-widg__title.jdgm-rev-widg__title {
    margin: 0;
    color: var(--mx-color-white) !important;
    font-family: var(--mx-font-display) !important;
    font-size: clamp(2rem, 4vw, 2.75rem) !important;
    line-height: 1 !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .jdgm-rev-widg__summary-average {
    color: var(--mx-color-cyan) !important;
    font-size: 1.5rem;
    font-weight: 700;
  }

  .jdgm-rev-widg__summary-text {
    color: var(--mx-color-yellow) !important;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* Rating histogram */
  .jdgm-histogram {
    max-width: 420px;
  }

  .jdgm-histogram__row {
    align-items: center;

    &:hover {
      background: var(--mx-surface-glass) !important;
    }
  }

  .jdgm-histogram__bar {
    overflow: hidden;
    border: 1px solid var(--mx-border-cyan-faint);
    border-radius: var(--mx-radius-pill);
    background: var(--mx-surface-input) !important;
  }

  .jdgm-histogram__bar-content {
    background: linear-gradient(
      135deg,
      var(--mx-color-yellow) 0%,
      var(--mx-color-orange) 100%
    ) !important;
  }

  .jdgm-histogram__frequency,
  .jdgm-histogram__percentage {
    color: var(--mx-color-muted) !important;
    font-size: 0.8rem;
  }

  /* Actions */
  .jdgm-write-rev-link.jdgm-write-rev-link,
  .jdgm-btn.jdgm-btn,
  .jdgm-paginate__page,
  .jdgm-revs-tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: max(var(--mx-button-height), var(--mx-touch-target-min));
    min-width: var(--mx-touch-target-min);
    padding: 0.85rem 1.2rem;
    border: 1px solid var(--mx-border-cyan-mid) !important;
    border-radius: var(--mx-radius-pill);
    background: var(--mx-surface-button-secondary) !important;
    color: var(--mx-color-cyan) !important;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    transition:
      transform var(--mx-motion-fast) var(--mx-ease-emphasis),
      box-shadow var(--mx-motion-fast) var(--mx-ease-standard);

    &:hover {
      transform: translateY(-2px);
      box-shadow: var(--mx-shadow-button);
      text-decoration: none;
    }

    &:focus-visible {
      outline: 2px solid var(--mx-color-cyan);
      outline-offset: 2px;
    }
  }

  .jdgm-write-rev-link.jdgm-write-rev-link {
    border: 0 !important;
    background: linear-gradient(
      135deg,
      var(--mx-color-yellow) 0%,
      var(--mx-color-orange) 100%
    ) !important;
    color: #1a0824 !important;
  }

  .jdgm-rev-widg__sort-wrapper,
  .jdgm-rev-widg__filter-wrapper {
    display: none !important;
  }

  .jdgm-paginate__page--active,
  .jdgm-revs-tab-btn--active {
    border-color: var(--mx-color-yellow);
    color: var(--mx-color-yellow) !important;
  }

  /* Sorting */
  .jdgm-sort-dropdown,
  .jdgm-sort-dropdown-arrow {
    border: 1px solid var(--mx-border-cyan-soft);
    border-radius: var(--mx-radius-pill);
    background: var(--mx-surface-input) !important;
    color: var(--mx-color-white) !important;
  }

  .jdgm-sort-dropdown-menu {
    border: 1px solid var(--mx-border-cyan-soft);
    background: var(--mx-bg-mid) !important;

    .jdgm-sort-dropdown-item {
      color: var(--mx-color-text) !important;

      &:hover {
        background: var(--mx-surface-glass) !important;
      }
    }
  }

  /* Review form */
  .jdgm-form-wrapper {
    margin-top: var(--mx-gap-lg);
    padding: var(--mx-gap-lg);
    border: 1px solid var(--mx-border-cyan-faint);
    border-radius: var(--mx-radius-media);
    background: var(--mx-surface-glass);
  }

  .jdgm-form {
    label,
    .jdgm-form__title {
      color: var(--mx-color-yellow) !important;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    input[type='text'],
    input[type='email'],
    textarea,
    select {
      width: 100%;
      min-height: var(--mx-input-height);
      padding: 0.8rem 1rem;
      border: 1px solid var(--mx-border-cyan-soft);
      border-radius: 0;
      background: var(--mx-surface-input) !important;
      color: var(--mx-color-white) !important;
      font-family: var(--mx-font-ui);
      font-size: max(16px, 1rem);

      &::placeholder {
        color: var(--mx-color-muted);
        opacity: 0.7;
      }

      &:focus-visible {
        outline: 2px solid var(--mx-color-cyan);
        outline-offset: 2px;
      }
    }
  }

  /* Individual reviews */
  .jdgm-rev-widg__reviews {
    display: grid;
    gap: var(--mx-gap-md);
    margin-top: var(--mx-gap-lg);
  }

  .jdgm-rev {
    padding: var(--mx-gap-md);
    border: 1px solid var(--mx-border-cyan-faint) !important;
    border-radius: var(--mx-radius-media);
    background: var(--mx-surface-glass);

    .jdgm-rev__timestamp,
    .jdgm-rev__location,
    .jdgm-rev__prod-link {
      color: var(--mx-color-muted) !important;
      font-size: 0.75rem;
      letter-spacing: 0.06em;
    }

    .jdgm-rev__author {
      color: var(--mx-color-white) !important;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .jdgm-rev__buyer-badge {
      color: var(--mx-color-cyan) !important;
      font-size: 0.7rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .jdgm-rev__title {
      display: block;
      margin-top: var(--mx-gap-xs);
      color: var(--mx-color-yellow) !important;
      font-size: 1.05rem;
      font-weight: 700;
    }

    .jdgm-rev__body {
      color: var(--mx-color-text) !important;
      font-size: 0.95rem;
      line-height: 1.7;
    }

    .jdgm-rev__pic-img {
      border: 1px solid var(--mx-border-cyan-faint);
      border-radius: 0;
    }

    .jdgm-rev__reply {
      margin-top: var(--mx-gap-sm);
      padding: var(--mx-gap-sm);
      border-left: 2px solid var(--mx-color-pink);
      background: var(--mx-surface-input);
    }

    .jdgm-rev__actions,
    .jdgm-rev__votes {
      color: var(--mx-color-muted) !important;
      font-size: 0.75rem;
    }
  }

  /* Pagination + footer */
  .jdgm-paginate {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mx-gap-xs);
    justify-content: center;
    margin-top: var(--mx-gap-lg);
  }

  .jdgm-branding-footer,
  .jdgm-rev-widg__powered-by {
    color: var(--mx-color-muted) !important;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    opacity: var(--mx-opacity-disabled);
  }

  /* Empty state */
  .jdgm-rev-widg--no-reviews .jdgm-rev-widg__body {
    color: var(--mx-color-muted) !important;
    text-align: center;
  }
}

/* Judge.me's current review widget uses jm-* component classes. */
.jm-cluster {
  color: var(--mx-color-text) !important;
  font-family: var(--mx-font-ui) !important;
  font-size: 1rem;
  line-height: 1.6;

  :is(p, span, small, strong, b, h2, h3, label, time):not(
    .jm-star-rating__font-icon
  ) {
    color: var(--mx-color-text) !important;
    font-family: inherit !important;
  }

  .jm-star-rating__font-icon {
    color: var(--mx-color-yellow) !important;
    text-shadow: var(--mx-text-glow-cyan);
  }

  :is(
    .jm-header,
    .jm-reviews-header,
    .jm-review-widget__header,
    [class^='jm-header'],
    [class*=' jm-header']
  ) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mx-gap-md);
    margin-bottom: var(--space-xl);
    padding: var(--mx-gap-lg);
    border: 1px solid var(--mx-border-yellow-soft) !important;
    border-left: 4px solid var(--mx-color-cyan) !important;
    border-radius: var(--mx-radius-media);
    background: var(--mx-surface-input) !important;
    box-shadow: inset 0 1px 0 var(--mx-border-cyan-faint);
  }

  :is(
    .jm-header__title,
    .jm-reviews-header__title,
    .jm-review-widget__title,
    [class^='jm-header'] h2,
    [class*=' jm-header'] h2
  ) {
    margin: 0;
    color: var(--mx-color-white) !important;
    font-family: var(--mx-font-display) !important;
    font-size: clamp(1.75rem, 3vw, 2.4rem) !important;
    line-height: 1 !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  @media (max-width: 640px) {
    :is(
      .jm-header,
      .jm-reviews-header,
      .jm-review-widget__header,
      [class^='jm-header'],
      [class*=' jm-header']
    ) {
      align-items: stretch;
      padding: var(--mx-gap-md);
    }

    .jm-button--primary,
    .jm-write-review-button {
      width: 100%;
    }
  }

  .jm-button,
  button,
  [role='button'] {
    min-height: max(var(--mx-button-height), var(--mx-touch-target-min));
    min-width: var(--mx-touch-target-min);
    padding: 0.85rem 1.2rem;
    border: 1px solid var(--mx-border-cyan-mid) !important;
    border-radius: var(--mx-radius-pill) !important;
    background: var(--mx-surface-button-secondary) !important;
    color: var(--mx-color-cyan) !important;
    font: 700 0.8rem/1 var(--mx-font-ui) !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition:
      transform var(--mx-motion-fast) var(--mx-ease-emphasis),
      box-shadow var(--mx-motion-fast) var(--mx-ease-standard);

    &:hover {
      transform: translateY(-2px);
      box-shadow: var(--mx-shadow-button);
    }

    &:focus-visible {
      outline: 2px solid var(--mx-color-cyan);
      outline-offset: 2px;
    }
  }

  .jm-button--primary,
  .jm-write-review-button {
    border: 0 !important;
    background: linear-gradient(
      135deg,
      var(--mx-color-yellow) 0%,
      var(--mx-color-orange) 100%
    ) !important;
    color: #1a0824 !important;
  }

  .jm-review-content__expand-button.jm-review-content__expand-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--mx-touch-target-min);
    margin-top: var(--mx-gap-sm);
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--mx-border-cyan-mid) !important;
    border-radius: var(--mx-radius-pill) !important;
    background: var(--mx-surface-button-secondary) !important;
    color: var(--mx-color-cyan) !important;
    font: 700 0.75rem/1 var(--mx-font-ui) !important;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition:
      transform var(--mx-motion-fast) var(--mx-ease-emphasis),
      box-shadow var(--mx-motion-fast) var(--mx-ease-standard);

    &:hover {
      transform: translateY(-2px);
      box-shadow: var(--mx-shadow-button);
      text-decoration: none;
    }

    &:focus-visible {
      outline: 2px solid var(--mx-color-cyan);
      outline-offset: 2px;
    }
  }

  .jm-review,
  .jm-review-card {
    padding: var(--mx-gap-md);
    border: 1px solid var(--mx-border-cyan-faint) !important;
    border-radius: var(--mx-radius-media);
    background: var(--mx-surface-glass) !important;
  }

  .jm-review__author,
  .jm-review__title {
    color: var(--mx-color-white) !important;
    font-weight: 700;
  }

  .jm-review__body,
  .jm-review__content {
    color: var(--mx-color-text) !important;
    line-height: 1.7;
  }

  .jm-review__date,
  .jm-review__metadata,
  .jm-review__location {
    color: var(--mx-color-muted) !important;
    font-size: 0.75rem;
  }

  [class^='jm-filter'],
  [class*=' jm-filter'],
  [class^='jm-sort'],
  [class*=' jm-sort'] {
    display: none !important;
  }

  .jm-review,
  .jm-review-card,
  [class^='jm-review-media'],
  [class*=' jm-review-media'],
  [class^='jm-media'],
  [class*=' jm-media'] {
    border: unset !important;
    border-radius: var(--jm-widget-border-radius) !important;
    padding: unset !important;
  }

  .jm-review img,
  .jm-review video,
  .jm-review-card img,
  .jm-review-card video,
  [class^='jm-review-media'] img,
  [class^='jm-review-media'] video,
  [class*=' jm-review-media'] img,
  [class*=' jm-review-media'] video,
  [class^='jm-media'] img,
  [class^='jm-media'] video,
  [class*=' jm-media'] img,
  [class*=' jm-media'] video {
    border: unset !important;
    border-radius: var(--jm-widget-border-radius) !important;
    padding: unset !important;
  }
}

.jm-review-widget__header.jm-review-widget__header {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mx-gap-md);
  margin-bottom: var(--space-xl) !important;
  padding: var(--mx-gap-lg) !important;
  border: 1px solid var(--mx-border-yellow-soft) !important;
  border-left: 4px solid var(--mx-color-cyan) !important;
  border-radius: var(--mx-radius-media) !important;
  background: var(--mx-surface-input) !important;
  box-shadow: inset 0 1px 0 var(--mx-border-cyan-faint);
}

.jm-review-widget__header :is(h1, h2, h3) {
  margin: 0 !important;
  color: var(--mx-color-white) !important;
  font-family: var(--mx-font-display) !important;
  font-size: clamp(1.75rem, 3vw, 2.4rem) !important;
  line-height: 1 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.jm-review-widget__body.jm-review-widget__body {
  position: relative;
  padding-top: var(--mx-gap-lg) !important;
  border-top: 1px solid var(--mx-border-cyan-faint);
}

.jm-review-widget__body
  :is(
    [class^='jm-text'],
    [class*=' jm-text'],
    [class^='jm-empty'],
    [class*=' jm-empty'],
    [class*='empty-state'],
    [class*='no-items'],
    [class*='no-results']
  ),
.jm-review-widget__body
  :is(
    [class^='jm-empty'],
    [class*=' jm-empty'],
    [class*='empty-state'],
    [class*='no-items'],
    [class*='no-results']
  )
  * {
  color: var(--mx-color-text) !important;
}

.jm-review-widget__body .jm-text.jm-text,
.jm-text,
.jm-review-widget__body .jm-text.jm-no-reviews-state__text {
  color: var(--mx-color-text) !important;
}

.jm-review-widget__body .jm-no-reviews-state,
.jm-review-widget__body .jm-no-reviews-state * {
  color: var(--mx-color-text) !important;
  -webkit-text-fill-color: var(--mx-color-text) !important;
}

.jm-review-widget__header:has(> [class*=' jm-no-reviews-state']) {
  margin-bottom: 0 !important;
}

.jm-review-widget__body:has([class*=' jdgm-empty-state']) {
  display: none !important;
}

@media (max-width: 640px) {
  .jm-review-widget__header.jm-review-widget__header {
    align-items: stretch;
    padding: var(--mx-gap-md) !important;
  }

  .jm-review-widget__header .jm-button--primary,
  .jm-review-widget__header .jm-write-review-button {
    width: 100%;
  }
}