/* variables */
.kk-review-hero {
  --kk_hero_primary_color: var(--button_bg_color, #3dd86d);
  --kk_hero_primary_color_hover: var(--button_bg_color_hover, #009c42);

  --kk_hero_text_color: inherit;
  --kk_hero_bg_color: var(--section_bg_color, #f1f5f8);

  --kk_hero_border_radius: var(--button_border_radius, 4px);

  --kk_hero_logo_width: 160px;
  --kk_hero_logo_height: 80px;

  --kk_hero_name_color: var(--kk_hero_text_color);
  --kk_hero_name_font_size: 1.8rem;

  --kk_hero_star_color: var(--stars_color);

  --kk_hero_bonus_color: var(--kk_hero_text_color);
  --kk_hero_bonus_font_size: 2rem;

  --kk_hero_terms_color: var(--kk_hero_text_color);
  --kk_hero_terms_font_size: 0.85rem;

  --kk_hero_verified_color: var(--kk_hero_terms_color);

  --kk_hero_box_bg_color: #fff;

  --kk_hero_bonus_code_color: var(--kk_hero_text_color);
  --kk_hero_bonus_code_font_size: 1.2rem;
  --kk_hero_bonus_code_border_color: #2d3748;

  --kk_hero_button_font_size: var(--hero_button_font_size);
  --kk_hero_button_color: var(--button_text_color);
  --kk_hero_button_bg_color: var(--kk_hero_primary_color);
  --kk_hero_button_color_hover: var(--button_text_color);
  --kk_hero_button_bg_color_hover: var(--kk_hero_primary_color_hover);
}

.kk-review-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
  padding: 1rem;
  line-height: 1.5;
  background-color: var(--kk_hero_bg_color);
}

.kk-review-hero--brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.kk-review-hero--logo {
  display: block;
  width: var(--kk_hero_logo_width);
  height: var(--kk_hero_logo_height);
  margin-bottom: 1rem;
  margin-right: 0;
  border-radius: var(--kk_hero_border_radius);
}

.kk-review-hero--brand > span {
  display: block;
  width: 100%;
  text-align: center;
}

.kk-review-hero--name {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--kk_hero_name_font_size);
  font-weight: 700;
  line-height: 1;
  color: var(--kk_hero_name_color);
}

.kk-review-hero--rating {
  display: block;
  color: var(--kk_hero_star_color);
}

.kk-review-hero--rating svg {
  fill: currentColor;
}

.kk-review-hero--bonus {
  display: block;
  width: 100%;
  margin-top: 2rem;
  margin-bottom: 1rem;
  text-align: center;
  font-size: var(--kk_hero_bonus_font_size);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--kk_hero_bonus_color);
}

.kk-review-hero--verified {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kk_hero_verified_color);
}

.kk-review-hero--verified svg {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.25rem;
  color: var(--kk_hero_primary_color);
}

.kk-review-hero--terms {
  width: 100%;
  font-size: var(--kk_hero_terms_font_size);
}

span.kk-review-hero--terms {
  color: var(--kk_hero_terms_color);
}

.kk-review-hero--terms__sm {
  display: block;
  margin-top: 1rem;
  text-align: center;
}

.kk-review-hero--terms__lg {
  display: none;
  padding: 0 0 0 1.45rem;
}

.kk-review-hero--box {
  padding: 1rem;
  background-color: var(--kk_hero_box_bg_color);
}

.kk-review-hero--bonus-code {
  position: relative;
  display: block;
  margin-bottom: 1rem;
}

.kk-review-hero--bonus-code--label {
  position: absolute;
  top: -0.5rem;
  left: 1rem;
  display: block;
  padding: 0 0.5rem;
  background-color: var(--kk_hero_box_bg_color);
  font-size: 1rem;
  line-height: 1;
}

.kk-review-hero--bonus-code--code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem 0.5rem;
  font-size: var(--kk_hero_bonus_code_font_size);
  font-weight: 700;
  line-height: 1;
  color: var(--kk_hero_bonus_code_color);
  border: 1px solid var(--kk_hero_bonus_code_border_color);
  border-radius: var(--kk_hero_border_radius);
}

.kk-review-hero--bonus-code--code button {
  padding: 0 0.75rem;
  background-color: transparent;
  color: inherit;
  border: 0 none;
}

.kk-review-hero--bonus-code--code button svg {
  width: 1.2rem;
  height: 1.2rem;
}

.kk-review-hero--bonus-code--link {
  display: block;
  text-align: center;
  padding: 0.75rem 1.5rem;
  background-color: var(--kk_hero_bg_color);
  border: 1px solid var(--kk_hero_bonus_code_border_color);
  border-radius: var(--kk_hero_border_radius);
}

.kk-review-hero--bonus-code--link a {
  display: block;
  text-decoration: none;
}

ul.kk-review-hero--pros {
  list-style-type: none;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  margin-left: 0;
  padding-left: 0;
}

.kk-review-hero--pros li:before {
  content: '✓';
  margin-right: 0.5rem;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--kk_hero_primary_color);
}

.kk-review-hero--button {
  display: block;
  width: 100%;
  padding: 0.5rem 2.5rem;
  text-align: center;
  text-decoration: none;
  font-size: var(--kk_hero_button_font_size);
  color: var(--kk_hero_button_color);
  background: var(--kk_hero_button_bg_color);
  border-radius: var(--kk_hero_border_radius);
  transition: background 0.3s;
}

.kk-review-hero--button:focus,
.kk-review-hero--button:hover {
  color: var(--kk_hero_button_color_hover);
  background: var(--kk_hero_button_bg_color_hover);
}

@media (min-width: 992px) {

  .kk-review-hero {
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
    padding: 2rem;
  }

  .kk-review-hero--brand {
    justify-content: start;
  }

  .kk-review-hero--logo {
    margin-bottom: 0;
    margin-right: 2rem;
  }

  .kk-review-hero--brand > span {
    width: auto;
    text-align: left;
  }

  .kk-review-hero--bonus {
    --kk_hero_bonus_font_size: 4.2rem;
    text-align: left;
    line-height: 1;
    letter-spacing: -2px;
  }

  .kk-review-hero--verified {
    justify-content: start;
  }

  .kk-review-hero--terms__sm {
    display: none;
  }

  .kk-review-hero--terms__lg {
    display: block;
  }

  .kk-review-hero--box {
    padding: 2rem;
  }

  .kk-review-hero--bonus-code--code {
    --kk_hero_bonus_code_font_size: 2rem;
    padding: 0.5rem 1.5rem;
  }

  .kk-review-hero--bonus-code--code button svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .kk-review-hero--bonus-code--link {
    text-align: left;
  }

  .kk-review-hero--bonus-code--link a {
    display: inline-block;
    padding-left: 0.5rem;
  }
}