:root {
  /* COLORS FROM DATABASE */
  --dp-text-color: #800caa;
  --dp-circle-inner-color: #5C007D;
  --dp-rating-text-color: #800caa;
  --dp-circle-border-color: #fbf6fd;
  --dp-button-bg: #fbf6fd;
  --dp-button-text: #800caa;
  --dp-review-bg: #fbf7ff;
  --dp-review-border: #800caa;
  --dp-main-bg: #00000000;

  /* POSITION CONTROLS (DESKTOP) – EDIT THESE TO MOVE THINGS AROUND */
  /* Move the whole pill/box inside the iframe */
  --dp-holder-offset-x: 0px;   /* + moves right, - moves left */
  --dp-holder-offset-y: 0px;   /* + moves down, - moves up  */

  /* Move the circle block */
  --dp-left-offset-x: 0px;
  --dp-left-offset-y: 0px;

  /* Move the center text block */
  --dp-center-offset-x: 10px;
  --dp-center-offset-y: 0px;

  /* Move the right side (CTA + brand) */
  --dp-right-offset-x: -20px;
  --dp-right-offset-y: 0px;

  /* POSITION CONTROLS (MOBILE) – used under 600px width */
  --dp-holder-mobile-offset-x: 0px;
  --dp-holder-mobile-offset-y: 0px;
  --dp-left-mobile-offset-x: 0px;
  --dp-left-mobile-offset-y: 0px;
  --dp-center-mobile-offset-x: 0px;
  --dp-center-mobile-offset-y: 0px;
  --dp-right-mobile-offset-x: 0px;
  --dp-right-mobile-offset-y: 0px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--dp-main-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* whole iframe is one clickable link */
.dp-widget-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* main pill */
.dp-holder {
  margin: 0;
  padding: 14px 24px;
  width: 100%;
  max-width: 950px;
  border-radius: 20px;
  border: 2px solid var(--dp-review-border);
  background-color: var(--dp-review-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  /* Move the entire box inside the iframe (desktop) */
  transform: translate(var(--dp-holder-offset-x), var(--dp-holder-offset-y));
}

/* left circle */
.dp-left {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;

  /* Move the left section (desktop) */
  transform: translate(var(--dp-left-offset-x), var(--dp-left-offset-y));
}

.dp-circle {
  height: 68px;
  width: 68px;
  border-radius: 50%;
  border: 3px solid var(--dp-circle-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dp-circle-percent {
  font-size: 24px;
  font-weight: 700;
  color: var(--dp-text-color);
}

/* center text */
.dp-center {
  flex: 1 1 auto;
  min-width: 0;

  /* Move the center section (desktop) */
  transform: translate(var(--dp-center-offset-x), var(--dp-center-offset-y));
}

.dp-consumer-rating {
  font-size: 18px;
  font-weight: 700;
  color: var(--dp-text-color);
  margin-bottom: 2px;
}

.dp-score {
  font-size: 18px;
  font-weight: 700;
  color: var(--dp-text-color);
  margin-bottom: 4px;
}

.dp-subline {
  font-size: 13px;
  color: var(--dp-rating-text-color);
  line-height: 1.3;
}

/* right CTA */
.dp-right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;

  /* Move the right section (desktop) */
  transform: translate(var(--dp-right-offset-x), var(--dp-right-offset-y));
}

.dp-cta {
  padding: 6px 18px;
  border-radius: 20px;
  background-color: var(--dp-button-bg);
  color: var(--dp-button-text);
  font-size: 16px;
  font-weight: 700;
}

/* brand (text only now) */
.dp-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--dp-text-color);
}

.dp-brand-text {
  white-space: nowrap;
}

/* Mobile layout */
@media (max-width: 600px) {
  .dp-holder {
    padding: 12px 16px;
    gap: 12px;

    /* Use mobile offsets instead */
    transform: translate(
      var(--dp-holder-mobile-offset-x),
      var(--dp-holder-mobile-offset-y)
    );
  }

  .dp-left {
    transform: translate(
      var(--dp-left-mobile-offset-x),
      var(--dp-left-mobile-offset-y)
    );
  }

  .dp-center {
    transform: translate(
      var(--dp-center-mobile-offset-x),
      var(--dp-center-mobile-offset-y)
    );
  }

  .dp-right {
    transform: translate(
      var(--dp-right-mobile-offset-x),
      var(--dp-right-mobile-offset-y)
    );
  }

  .dp-circle {
    height: 56px;
    width: 56px;
  }

  .dp-circle-percent {
    font-size: 20px;
  }

  .dp-consumer-rating,
  .dp-score {
    font-size: 16px;
  }

  .dp-subline {
    font-size: 11px;
  }

  .dp-cta {
    font-size: 13px;
    padding: 4px 12px;
  }
}