/* ==================================================
 * CRP PREMIUM FRAMEWORK – GOOGLE REVIEWS
 * Middelman Interieurbouw
 * Plugin: Rich Showcase for Google Reviews
 * Scope: .mi-google-reviews
 * Version: 1.0.0
 * ================================================== */

.mi-google-reviews {
  --mi-gr-dark: var(--mi-dark, #544728);
  --mi-gr-light: var(--mi-light, #E9D8B7);
  --mi-gr-card: #f5eddd;
  --mi-gr-muted: rgba(84, 71, 40, .62);
  --mi-gr-line: rgba(84, 71, 40, .14);
  --mi-gr-star: #caaa68;

  width: 100%;
}

/* Plugin reset / typography ----------------------------------- */

.mi-google-reviews .wp-gr,
.mi-google-reviews .wp-gr *,
.mi-google-reviews .wp-gr *::before,
.mi-google-reviews .wp-gr *::after {
  box-sizing: border-box;
}

.mi-google-reviews .wp-gr {
  width: 100% !important;
  max-width: none !important;
  font-family: var(--mi-body-font, 'Inter', Arial, sans-serif) !important;
  color: var(--mi-gr-dark) !important;
}

.mi-google-reviews .wp-gr a {
  text-decoration: none !important;
}

/* Overall layout ---------------------------------------------- */

.mi-google-reviews .grw-row {
  display: grid !important;
  grid-template-columns: minmax(210px, .72fr) minmax(0, 3.28fr) !important;
  align-items: stretch !important;
  gap: clamp(34px, 4vw, 68px) !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Business / rating block ------------------------------------- */

.mi-google-reviews .grw-header,
.mi-google-reviews .grw-header-inner,
.mi-google-reviews .wp-google-place {
  width: 100% !important;
  max-width: none !important;
}

.mi-google-reviews .grw-header {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 12px 0 !important;
}

.mi-google-reviews .grw-header-inner {
  margin: 0 !important;
  padding: 0 !important;
}

.mi-google-reviews .wp-google-place {
  display: grid !important;
  grid-template-columns: 62px 1fr !important;
  align-items: start !important;
  gap: 20px !important;
}

.mi-google-reviews .wp-google-left {
  width: 62px !important;
  min-width: 62px !important;
}

.mi-google-reviews .wp-google-left img {
  display: block !important;
  width: 62px !important;
  height: 62px !important;
  margin: 0 !important;
  object-fit: cover !important;
  border: 2px solid rgba(233, 216, 183, .35) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .10) !important;
}

.mi-google-reviews .wp-google-right {
  width: auto !important;
  min-width: 0 !important;
}

.mi-google-reviews .grw-header .wp-google-name,
.mi-google-reviews .grw-header .wp-google-name a {
  display: block !important;
  margin: 0 0 10px !important;
  color: var(--mi-gr-light) !important;
  font-family: var(--mi-heading-font, 'Cormorant Garamond', Georgia, serif) !important;
  font-size: clamp(1.45rem, 1.7vw, 1.9rem) !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
  letter-spacing: -.015em !important;
}

.mi-google-reviews .grw-header .rpi-stars,
.mi-google-reviews .grw-header .wp-google-rating {
  color: var(--mi-gr-light) !important;
}

.mi-google-reviews .grw-header .rpi-stars {
  margin: 0 0 9px !important;
}

.mi-google-reviews .rpi-stars,
.mi-google-reviews .wp-star {
  --star-color: var(--mi-gr-star) !important;
}

.mi-google-reviews .rpi-stars::before,
.mi-google-reviews .rpi-stars::after {
  color: var(--mi-gr-star) !important;
}

.mi-google-reviews .wp-star path,
.mi-google-reviews .grw-review .rpi-stars svg path {
  fill: var(--mi-gr-star) !important;
}

.mi-google-reviews .wp-google-based,
.mi-google-reviews .wp-google-powered {
  color: rgba(233, 216, 183, .64) !important;
  font-size: .86rem !important;
  line-height: 1.5 !important;
}

.mi-google-reviews .wp-google-powered {
  margin-top: 5px !important;
  opacity: .76 !important;
}

.mi-google-reviews .wp-google-wr {
  margin-top: 18px !important;
}

.mi-google-reviews .wp-google-wr a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 12px 18px !important;
  border: 1px solid var(--mi-gr-light) !important;
  border-radius: 6px !important;
  background: var(--mi-gr-light) !important;
  color: var(--mi-gr-dark) !important;
  font-family: var(--mi-body-font, 'Inter', Arial, sans-serif) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  transition: transform .2s ease, opacity .2s ease !important;
}

.mi-google-reviews .wp-google-wr a:hover {
  transform: translateY(-2px) !important;
  opacity: .9 !important;
}

.mi-google-reviews .wp-google-wr svg {
  width: 16px !important;
  height: 16px !important;
}

/* Slider / cards ---------------------------------------------- */

.mi-google-reviews .grw-content,
.mi-google-reviews .grw-content-inner {
  min-width: 0 !important;
  width: 100% !important;
}

.mi-google-reviews .grw-content-inner {
  position: relative !important;
  padding: 0 34px 28px !important;
}

.mi-google-reviews .grw-reviews {
  align-items: stretch !important;
  gap: 22px !important;
}

.mi-google-reviews .grw-review {
  height: auto !important;
  min-height: 100% !important;
}

.mi-google-reviews .grw-review-inner {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 330px !important;
  padding: 28px 28px 24px !important;
  overflow: hidden !important;
  border: 1px solid var(--mi-gr-line) !important;
  border-radius: 22px !important;
  background: var(--mi-gr-card) !important;
  color: var(--mi-gr-dark) !important;
  box-shadow: 0 16px 44px rgba(43, 30, 20, .08) !important;
  transition: transform .22s ease, box-shadow .22s ease !important;
}

.mi-google-reviews .grw-review-inner:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 22px 54px rgba(43, 30, 20, .12) !important;
}

.mi-google-reviews .grw-review-inner > .rpi-row12-center {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 0 18px !important;
}

.mi-google-reviews .grw-img-wrap {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
}

.mi-google-reviews .grw-img {
  display: block !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

.mi-google-reviews .grw-review .rpi-row12-center > .rpi-col6 {
  width: 100% !important;
  min-width: 0 !important;
}

.mi-google-reviews .grw-review .wp-google-name,
.mi-google-reviews .grw-review .wp-google-name a {
  display: block !important;
  overflow: hidden !important;
  margin: 0 0 3px !important;
  color: var(--mi-gr-dark) !important;
  font-family: var(--mi-body-font, 'Inter', Arial, sans-serif) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.mi-google-reviews .grw-review .wp-google-time {
  color: var(--mi-gr-muted) !important;
  font-size: .78rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

.mi-google-reviews .grw-review > .grw-review-inner > .rpi-stars,
.mi-google-reviews .grw-review-inner > .rpi-stars {
  display: block !important;
  margin: 0 0 20px !important;
}

.mi-google-reviews .grw-review-inner > .rpi-col4 {
  flex: 1 1 auto !important;
  width: 100% !important;
}

.mi-google-reviews .wp-google-feedback {
  height: auto !important;
  max-height: 145px !important;
  margin: 0 !important;
  padding: 0 7px 0 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  color: var(--mi-gr-dark) !important;
  scrollbar-color: rgba(84, 71, 40, .26) transparent !important;
  scrollbar-width: thin !important;
}

.mi-google-reviews .wp-google-feedback::-webkit-scrollbar {
  width: 4px !important;
}

.mi-google-reviews .wp-google-feedback::-webkit-scrollbar-track {
  background: transparent !important;
}

.mi-google-reviews .wp-google-feedback::-webkit-scrollbar-thumb {
  border-radius: 10px !important;
  background: rgba(84, 71, 40, .24) !important;
}

.mi-google-reviews .wp-google-text {
  color: var(--mi-gr-dark) !important;
  font-family: var(--mi-body-font, 'Inter', Arial, sans-serif) !important;
  font-size: .96rem !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
}

.mi-google-reviews .wp-more-toggle {
  color: var(--mi-gr-dark) !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
}

/* Small Google mark in each review */
.mi-google-reviews .grw-review-inner > svg {
  position: absolute !important;
  top: 22px !important;
  right: 22px !important;
  width: 17px !important;
  height: 17px !important;
  opacity: .72 !important;
}

/* Slider controls --------------------------------------------- */

.mi-google-reviews .grw-prev,
.mi-google-reviews .grw-next {
  z-index: 5 !important;
  width: 46px !important;
  height: 46px !important;
  border: 1px solid rgba(233, 216, 183, .32) !important;
  border-radius: 50% !important;
  background-color: var(--mi-gr-dark) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.13) !important;
  transition: transform .2s ease, background-color .2s ease !important;
}

.mi-google-reviews .grw-prev:hover,
.mi-google-reviews .grw-next:hover {
  transform: scale(1.06) !important;
  background-color: #463b22 !important;
}

.mi-google-reviews .grw-prev::before,
.mi-google-reviews .grw-next::before {
  border-color: var(--mi-gr-light) !important;
}

.mi-google-reviews .grw-btns svg path,
.mi-google-reviews .grw-prev svg path,
.mi-google-reviews .grw-next svg path {
  fill: var(--mi-gr-light) !important;
}

.mi-google-reviews .rpi-dots-wrap {
  margin-top: 22px !important;
}

.mi-google-reviews .rpi-dots,
.mi-google-reviews .grw-dots {
  justify-content: center !important;
}

.mi-google-reviews .rpi-dot,
.mi-google-reviews .grw-dot {
  width: 7px !important;
  height: 7px !important;
  margin: 0 5px !important;
  border-radius: 50% !important;
  background: rgba(233, 216, 183, .32) !important;
}

.mi-google-reviews .rpi-dot.active,
.mi-google-reviews .grw-dot.active {
  background: var(--mi-gr-light) !important;
}

/* Responsive -------------------------------------------------- */

@media (max-width: 1180px) {
  .mi-google-reviews .grw-row {
    grid-template-columns: 220px minmax(0, 1fr) !important;
    gap: 38px !important;
  }

  .mi-google-reviews .grw-review-inner {
    padding: 25px 24px 22px !important;
  }
}

@media (max-width: 980px) {
  .mi-google-reviews .grw-row {
    display: block !important;
  }

  .mi-google-reviews .grw-header {
    margin-bottom: 38px !important;
  }

  .mi-google-reviews .wp-google-place {
    max-width: 480px !important;
  }

  .mi-google-reviews .grw-content-inner {
    padding-right: 30px !important;
    padding-left: 30px !important;
  }
}

@media (max-width: 767px) {
  .mi-google-reviews .wp-google-place {
    grid-template-columns: 52px 1fr !important;
    gap: 16px !important;
  }

  .mi-google-reviews .wp-google-left,
  .mi-google-reviews .wp-google-left img {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
  }

  .mi-google-reviews .grw-header .wp-google-name,
  .mi-google-reviews .grw-header .wp-google-name a {
    font-size: 1.45rem !important;
  }

  .mi-google-reviews .grw-content-inner {
    padding-right: 24px !important;
    padding-bottom: 24px !important;
    padding-left: 24px !important;
  }

  .mi-google-reviews .grw-review-inner {
    min-height: 310px !important;
    padding: 24px 22px 21px !important;
    border-radius: 18px !important;
  }

  .mi-google-reviews .wp-google-feedback {
    max-height: 165px !important;
  }

  .mi-google-reviews .grw-prev,
  .mi-google-reviews .grw-next {
    width: 42px !important;
    height: 42px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mi-google-reviews .grw-review-inner,
  .mi-google-reviews .wp-google-wr a,
  .mi-google-reviews .grw-prev,
  .mi-google-reviews .grw-next {
    transition: none !important;
  }
}
