/* G-Rev Frontend Styles */

/* ──────────────────────────────────────────────────────────
   Base widget reset & CSS variable fallbacks
────────────────────────────────────────────────────────── */
.gr-widget {
	--gr-font-family:   inherit;
	--gr-font-weight-h: 700;
	--gr-font-weight-t: 400;
	--gr-font-size-h:   2rem;
	--gr-font-size-t:   0.95rem;
	--gr-color-text:    #333333;
	--gr-color-bg:      #ffffff;
	--gr-color-primary: #F4B400;
	--gr-border-width:  1px;
	--gr-border-color:  #e0e0e0;
	--gr-border-radius: 12px;
	--gr-box-shadow:    0 4px 20px rgba(0, 0, 0, 0.08);

	font-family: var(--gr-font-family);
	font-size:   var(--gr-font-size-t);
	color:       var(--gr-color-text);
	box-sizing:  border-box;
}

.gr-widget *,
.gr-widget *::before,
.gr-widget *::after {
	box-sizing: inherit;
}

/* ──────────────────────────────────────────────────────────
   Shared: Stars
────────────────────────────────────────────────────────── */
.gr-stars {
	display:     inline-flex;
	align-items: center;
	gap:         1px;
	line-height: 1;
}

.gr-star {
	font-size:   1.1em;
	line-height: 1;
}

.gr-star--full  { color: var(--gr-color-primary); }
.gr-star--empty { color: #ddd; }

.gr-star--partial {
	position: relative;
	color:    #ddd;
}

.gr-star--partial::before {
	content:    '★';
	position:   absolute;
	left:       0;
	top:        0;
	color:      var(--gr-color-primary);
	overflow:   hidden;
	width:      var(--gr-partial, 50%);
}

/* ──────────────────────────────────────────────────────────
   Shared: Google G icon
────────────────────────────────────────────────────────── */
.gr-google-g {
	width:  20px;
	height: 20px;
	flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────
   Shared: Avatar
────────────────────────────────────────────────────────── */
.gr-avatar {
	display:       block;
	width:         44px;
	height:        44px;
	border-radius: 50%;
	object-fit:    cover;
	flex-shrink:   0;
}

.gr-avatar--initials {
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-weight:     700;
	font-size:       18px;
	color:           #fff;
}

/* ──────────────────────────────────────────────────────────
   Shared: Error state
────────────────────────────────────────────────────────── */
.gr-error {
	padding:       12px 18px;
	background:    #fff8f8;
	border:        1px solid #ffd6d6;
	border-radius: 8px;
	color:         #c0392b;
	font-size:     14px;
}

/* ──────────────────────────────────────────────────────────
   Shared: Footer link
────────────────────────────────────────────────────────── */
.gr-reviews__more-link {
	display:     inline-flex;
	align-items: center;
	gap:         6px;
	font-size:   13px;
	font-weight: 500;
	color:       #4285F4;
	text-decoration: none;
	transition:  opacity 0.2s;
}

.gr-reviews__more-link:hover { opacity: 0.75; }

.gr-reviews__more-link .gr-google-g { width: 16px; height: 16px; }

.gr-reviews__more-link--subtle {
	color: #888;
	margin-left: 14px;
}

.gr-reviews__cta-btn {
	display:          inline-flex;
	align-items:      center;
	gap:              7px;
	padding:          10px 20px;
	background:       var(--gr-color-primary);
	color:            #fff;
	font-weight:      600;
	font-size:        14px;
	border-radius:    var(--gr-border-radius);
	text-decoration:  none;
	transition:       opacity 0.2s, transform 0.15s;
}

.gr-reviews__cta-btn:hover {
	opacity:   0.9;
	transform: translateY(-1px);
	color:     #fff;
}

.gr-reviews__cta-btn .gr-google-g { width: 18px; height: 18px; filter: brightness(0) invert(1); }

/* ──────────────────────────────────────────────────────────
   RATING WIDGET ▸ Style 1: Vertical Floating Card
────────────────────────────────────────────────────────── */
.gr-rating-s1 {
	display:    inline-block;
	max-width:  160px;
}

.gr-rating-s1__inner {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	gap:             10px;
	padding:         22px 20px;
	background:      var(--gr-color-bg);
	border:          var(--gr-border-width) solid var(--gr-border-color);
	border-radius:   var(--gr-border-radius);
	box-shadow:      var(--gr-box-shadow);
	text-decoration: none;
	color:           inherit;
	transition:      transform 0.2s, box-shadow 0.2s;
}

.gr-rating-s1__inner:hover {
	transform:  translateY(-3px);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.gr-rating-s1__logo-wrap {
	display:     flex;
	flex-direction: column;
	align-items: center;
	gap:         4px;
}

.gr-rating-s1__g { width: 32px; height: 32px; }

.gr-rating-s1__google-text {
	font-size:   11px;
	font-weight: 600;
	color:       #888;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.gr-rating-s1__score {
	font-size:   var(--gr-font-size-h);
	font-weight: var(--gr-font-weight-h);
	color:       var(--gr-color-text);
	line-height: 1;
}

.gr-rating-s1__stars { font-size: 1.3em; }

.gr-rating-s1__count {
	font-size:  12px;
	color:      #888;
	text-align: center;
	line-height: 1.4;
}

/* ──────────────────────────────────────────────────────────
   RATING WIDGET ▸ Style 2: Horizontal Compact Badge
────────────────────────────────────────────────────────── */
.gr-rating-s2 {
	display: inline-block;
}

.gr-rating-s2__inner {
	display:         inline-flex;
	align-items:     center;
	gap:             14px;
	padding:         12px 18px;
	background:      var(--gr-color-bg);
	border:          var(--gr-border-width) solid var(--gr-border-color);
	border-radius:   var(--gr-border-radius);
	box-shadow:      var(--gr-box-shadow);
	text-decoration: none;
	color:           inherit;
	transition:      transform 0.2s;
}

.gr-rating-s2__inner:hover { transform: translateY(-2px); }

.gr-rating-s2__logo .gr-google-g { width: 28px; height: 28px; }

.gr-rating-s2__divider {
	width:      1px;
	height:     36px;
	background: var(--gr-border-color);
}

.gr-rating-s2__top {
	display:     flex;
	align-items: center;
	gap:         8px;
}

.gr-rating-s2__score {
	font-size:   1.6em;
	font-weight: var(--gr-font-weight-h);
	line-height: 1;
}

.gr-rating-s2__count {
	font-size: 12px;
	color:     #888;
	margin-top: 3px;
}

/* ──────────────────────────────────────────────────────────
   RATING WIDGET ▸ Style 3: Minimalist Inline
────────────────────────────────────────────────────────── */
.gr-rating-s3 {
	display: inline-block;
}

.gr-rating-s3__inner {
	display:         inline-flex;
	align-items:     center;
	gap:             8px;
	text-decoration: none;
	color:           inherit;
	transition:      opacity 0.2s;
}

.gr-rating-s3__inner:hover { opacity: 0.7; }

.gr-rating-s3__score {
	font-weight: var(--gr-font-weight-h);
	font-size:   1.05em;
}

.gr-rating-s3__sep { color: #ccc; }

.gr-rating-s3__count,
.gr-rating-s3__google {
	font-size: 0.9em;
	color:     #666;
}

.gr-rating-s3__g { width: 14px; height: 14px; }

/* ──────────────────────────────────────────────────────────
   RATING WIDGET ▸ Style 4: Modern Wide Banner
────────────────────────────────────────────────────────── */
.gr-rating-s4 {
	display: block;
}

.gr-rating-s4__inner {
	display:         flex;
	align-items:     center;
	gap:             20px;
	padding:         16px 24px;
	background:      var(--gr-color-bg);
	border:          var(--gr-border-width) solid var(--gr-border-color);
	border-radius:   var(--gr-border-radius);
	box-shadow:      var(--gr-box-shadow);
	flex-wrap:       wrap;
}

.gr-rating-s4__brand {
	display:     flex;
	align-items: center;
	gap:         8px;
}

.gr-rating-s4__g { width: 26px; height: 26px; }

.gr-rating-s4__google {
	font-size:   15px;
	font-weight: 700;
	color:       #555;
}

.gr-rating-s4__label {
	font-size: 12px;
	color:     #999;
}

.gr-rating-s4__divider {
	width:      1px;
	height:     40px;
	background: var(--gr-border-color);
	flex-shrink: 0;
}

.gr-rating-s4__score-wrap {
	display:     flex;
	align-items: center;
	gap:         8px;
}

.gr-rating-s4__score {
	font-size:   1.8em;
	font-weight: var(--gr-font-weight-h);
	line-height: 1;
}

.gr-rating-s4__count {
	font-size: 13px;
	color:     #666;
	white-space: nowrap;
}

.gr-rating-s4__cta {
	display:          inline-flex;
	align-items:      center;
	gap:              6px;
	margin-left:      auto;
	padding:          9px 18px;
	background:       var(--gr-color-primary);
	color:            #fff;
	font-weight:      600;
	font-size:        13px;
	border-radius:    calc(var(--gr-border-radius) - 4px);
	text-decoration:  none;
	transition:       opacity 0.2s, transform 0.15s;
	white-space:      nowrap;
}

.gr-rating-s4__cta:hover {
	opacity:   0.9;
	transform: translateY(-1px);
	color:     #fff;
}

/* ──────────────────────────────────────────────────────────
   Shared: Review Card base
────────────────────────────────────────────────────────── */
.gr-review-card {
	background:    var(--gr-color-bg);
	border:        var(--gr-border-width) solid var(--gr-border-color);
	border-radius: var(--gr-border-radius);
	box-shadow:    var(--gr-box-shadow);
	padding:       20px;
}

.gr-review-card__header {
	display:       flex;
	align-items:   flex-start;
	gap:           10px;
	margin-bottom: 10px;
}

.gr-review-card__author-info {
	flex: 1;
	min-width: 0;
}

.gr-review-card__name {
	display:         block;
	font-weight:     600;
	font-size:       0.95em;
	color:           var(--gr-color-text);
	text-decoration: none;
	white-space:     nowrap;
	overflow:        hidden;
	text-overflow:   ellipsis;
}

.gr-review-card__name:hover { text-decoration: underline; }

.gr-review-card__time {
	display:   block;
	font-size: 0.8em;
	color:     #999;
	margin-top: 1px;
}

.gr-review-card__stars { margin-bottom: 10px; }

.gr-review-card__text {
	font-size:   0.9em;
	line-height: 1.6;
	color:       var(--gr-color-text);
	margin:      0;
}

.gr-review-card__g {
	width:      20px;
	height:     20px;
	flex-shrink: 0;
	margin-left: auto;
}

.gr-review-card__g--lg { width: 26px; height: 26px; }

/* ──────────────────────────────────────────────────────────
   REVIEWS WIDGET ▸ Style 1: Modern Slider
────────────────────────────────────────────────────────── */
.gr-reviews-s1 {}

.gr-slider {
	position: relative;
}

.gr-slider__viewport {
	overflow: hidden;
	border-radius: var(--gr-border-radius);
}

.gr-slider__track {
	display:    flex;
	gap:        20px;
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
}

.gr-slider__slide {
	flex:       0 0 calc(100% - 0px);
	max-width:  calc(100% - 0px);
	min-width:  0;
}

.gr-slider__nav {
	position:        absolute;
	top:             50%;
	transform:       translateY(-50%);
	width:           38px;
	height:          38px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      #fff;
	border:          1px solid var(--gr-border-color);
	border-radius:   50%;
	box-shadow:      0 2px 8px rgba(0, 0, 0, 0.1);
	cursor:          pointer;
	color:           var(--gr-color-text);
	z-index:         2;
	transition:      background 0.2s, box-shadow 0.2s;
}

.gr-slider__nav:hover {
	background:  var(--gr-color-primary);
	border-color: var(--gr-color-primary);
	color:       #fff;
	box-shadow:  0 4px 12px rgba(0, 0, 0, 0.15);
}

.gr-slider__prev { left:  -14px; }
.gr-slider__next { right: -14px; }

.gr-slider__dots {
	display:         flex;
	justify-content: center;
	gap:             7px;
	margin-top:      16px;
}

.gr-slider__dot {
	width:            8px;
	height:           8px;
	border-radius:    50%;
	background:       var(--gr-border-color);
	border:           none;
	cursor:           pointer;
	padding:          0;
	transition:       background 0.2s, transform 0.2s;
}

.gr-slider__dot--active {
	background: var(--gr-color-primary);
	transform:  scale(1.3);
}

.gr-reviews-s1__footer {
	text-align: center;
	margin-top: 16px;
}

/* ──────────────────────────────────────────────────────────
   REVIEWS WIDGET ▸ Style 2: Masonry Grid
────────────────────────────────────────────────────────── */
.gr-masonry {
	column-count: 3;
	column-gap:   20px;
}

.gr-masonry__item {
	break-inside:  avoid;
	margin-bottom: 20px;
}

.gr-masonry__item .gr-review-card__footer {
	display:     flex;
	align-items: center;
	gap:         8px;
	margin-top:  14px;
	padding-top: 12px;
	border-top:  1px solid var(--gr-border-color);
}

.gr-masonry__item .gr-review-card__footer .gr-review-card__name {
	flex: 1;
}

.gr-masonry__item .gr-review-card__stars {
	display:     flex;
	align-items: center;
	gap:         8px;
	margin-bottom: 10px;
}

.gr-reviews-s2__footer {
	margin-top: 8px;
}

/* ──────────────────────────────────────────────────────────
   REVIEWS WIDGET ▸ Style 3: Clean List View
────────────────────────────────────────────────────────── */
.gr-list {
	display:        flex;
	flex-direction: column;
	gap:            12px;
}

.gr-list__row {
	display:     flex;
	align-items: flex-start;
	gap:         14px;
	padding:     16px 18px;
}

.gr-list__avatar { flex-shrink: 0; }
.gr-list__avatar .gr-avatar { width: 40px; height: 40px; font-size: 16px; }

.gr-list__body { flex: 1; min-width: 0; }

.gr-list__meta {
	display:     flex;
	align-items: center;
	gap:         10px;
	flex-wrap:   wrap;
	margin-bottom: 6px;
}

.gr-list__meta .gr-review-card__name {
	white-space: nowrap;
}

.gr-list__meta .gr-stars { font-size: 0.85em; }

.gr-list__meta .gr-review-card__time { display: inline; }

.gr-list__badge {
	flex-shrink: 0;
	display:     flex;
	align-items: center;
}

.gr-reviews-s3__footer { margin-top: 14px; }

/* ──────────────────────────────────────────────────────────
   REVIEWS WIDGET ▸ Style 4: Testimonial Cards with G Watermark
────────────────────────────────────────────────────────── */
.gr-testimonials {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap:                   20px;
}

.gr-review-card--testimonial {
	position:   relative;
	overflow:   hidden;
	padding:    28px 24px 22px;
	transition: transform 0.2s, box-shadow 0.2s;
}

.gr-review-card--testimonial:hover {
	transform:  translateY(-4px);
	box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
}

.gr-review-card__watermark {
	position:     absolute;
	top:          -10px;
	right:        10px;
	font-size:    120px;
	font-weight:  900;
	color:        #4285F4;
	opacity:      0.05;
	line-height:  1;
	pointer-events: none;
	font-family:  'Roboto', 'Google Sans', sans-serif;
	user-select:  none;
}

.gr-review-card__quote {
	position:    relative;
	font-size:   0.95em;
	line-height: 1.65;
	color:       var(--gr-color-text);
	margin:      0 0 14px;
	padding:     0;
	font-style:  italic;
}

.gr-review-card__quote-open,
.gr-review-card__quote-close {
	font-size:   1.4em;
	color:       var(--gr-color-primary);
	line-height: 0;
	vertical-align: -0.3em;
}

.gr-review-card__quote-open { margin-right: 2px; }
.gr-review-card__quote-close { margin-left: 2px; }

.gr-review-card--testimonial .gr-review-card__stars {
	margin-bottom: 14px;
}

.gr-review-card__author {
	display:       flex;
	align-items:   center;
	gap:           10px;
	margin-top:    auto;
	padding-top:   14px;
	border-top:    1px solid var(--gr-border-color);
}

.gr-review-card__author .gr-review-card__name { white-space: nowrap; }

.gr-review-card__author .gr-review-card__g { margin-left: auto; }

.gr-reviews-s4__footer {
	display:         flex;
	align-items:     center;
	margin-top:      22px;
}

/* ──────────────────────────────────────────────────────────
   Responsive
────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.gr-masonry { column-count: 2; }
	.gr-testimonials { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

@media (max-width: 600px) {
	.gr-masonry { column-count: 1; }
	.gr-testimonials { grid-template-columns: 1fr; }

	.gr-rating-s4__inner { flex-direction: column; align-items: flex-start; }
	.gr-rating-s4__divider { width: 100%; height: 1px; }
	.gr-rating-s4__cta { margin-left: 0; width: 100%; justify-content: center; }

	.gr-slider__prev { left:  4px; }
	.gr-slider__next { right: 4px; }

	.gr-list__row { flex-wrap: wrap; }
	.gr-list__badge { display: none; }
}