/*
 * OnlineChamp – Google Reviews widget
 * All visual values are exposed as design tokens on .oc-google-reviews.
 * Override in your theme CSS to customise colours, sizing, or spacing.
 */

.oc-google-reviews {
	/* ── Design tokens ─────────────────────────────────────────── */

	/* Layout */
	--oc-gr-gap:              0.6rem;
	--oc-gr-body-gap:         0.2rem;
	--oc-gr-body-row-gap:     .4rem;
	--oc-gr-direction: 			row;
	--oc-gr-align-items: 		center;
	--oc-gr-justify-content: 	flex-start;

	/* Logo */
	--oc-gr-logo-size:        4rem;

	/* Rating number */
	--oc-gr-rating-font-size:   2rem;
	--oc-gr-rating-font-weight: 700;
	--oc-gr-rating-line-height: 1;

	/* Stars */
	--oc-gr-star-size:          2rem;
	--oc-gr-star-gap:           0.2rem;
	--oc-gr-star-color:         currentColor;
	--oc-gr-star-empty-color:   rgba(0, 0, 0, 0.2);

	/* Review count */
	--oc-gr-count-font-size:       1.2rem;
	--oc-gr-count-font-weight:     400;
	--oc-gr-count-hover-decoration: underline;

	/* Colours – dark mode (default) */
	--oc-gr-color:              var(--text-primary, #000);

	/* ── Base styles ───────────────────────────────────────────── */
	display:         inline-flex;
	justify-content: var(--oc-gr-justify-content);
	align-items:     var(--oc-gr-align-items);
	flex-direction:  var(--oc-gr-direction);
	gap:             var(--oc-gr-gap);
	color:           var(--oc-gr-color);
	text-decoration: none;
	cursor:          pointer;
}

/* ── Google "G" logo ─────────────────────────────────────────── */

.oc-google-reviews__logo {
	flex-shrink: 0;
	width:       var(--oc-gr-logo-size);
	height:      var(--oc-gr-logo-size);
	fill:        currentColor;
}

/* ── Body (rating + stars + count stacked vertically) ───────── */

.oc-google-reviews__body {
	display:        flex;
	flex-direction: column;
	gap:            var(--oc-gr-body-gap);
	line-height:    1;
}

.oc-google-reviews__body-row {
	display:        flex;
	align-items: var(--oc-gr-body-row-align-items, flex-end);
	flex-direction: var(--oc-gr-body-row-direction, row);
	gap: var(--oc-gr-body-row-gap);
}

/* ── Rating number ───────────────────────────────────────────── */

.oc-google-reviews__rating {
	font-size:   var(--oc-gr-rating-font-size);
	font-weight: var(--oc-gr-rating-font-weight);
	line-height: var(--oc-gr-rating-line-height);
}

/* ── Stars row ───────────────────────────────────────────────── */

.oc-google-reviews__stars {
	display:     inline-flex;
	align-items: center;
	gap:         var(--oc-gr-star-gap);
}

/* Individual star wrapper */
.oc-google-reviews__star {
	position: relative;
	display:  inline-block;
	width:    var(--oc-gr-star-size);
	height:   var(--oc-gr-star-size);
	flex-shrink: 0;
}

/* Background SVG (always rendered at the empty colour) */
.oc-google-reviews__star-bg {
	display: block;
	width:   100%;
	height:  100%;
	fill:    var(--oc-gr-star-empty-color);
}

/* Clipping wrapper that reveals the filled SVG */
.oc-google-reviews__star-clip {
	position: absolute;
	top:      0;
	left:     0;
	overflow: hidden;
	height:   100%;
}

.oc-google-reviews__star--full  .oc-google-reviews__star-clip { width: 100%; }
.oc-google-reviews__star--half  .oc-google-reviews__star-clip { width: 50%;  }
.oc-google-reviews__star--empty .oc-google-reviews__star-clip { width: 0;    }

/* Filled SVG (on top, clipped) */
.oc-google-reviews__star-fg {
	display:   block;
	width:     var(--oc-gr-star-size);
	min-width: var(--oc-gr-star-size);
	height:    var(--oc-gr-star-size);
	fill:      var(--oc-gr-star-color);
}

/* ── Review count ────────────────────────────────────────────── */

.oc-google-reviews__count {
	font-size:       var(--oc-gr-count-font-size);
	font-weight:     var(--oc-gr-count-font-weight);
	text-decoration: none;
	white-space: nowrap;
}

/* Underline only the count text when the whole widget is hovered */
.oc-google-reviews:hover .oc-google-reviews__count {
	text-decoration: var(--oc-gr-count-hover-decoration);
}

/* ── Size modifiers ──────────────────────────────────────────── */

.oc-google-reviews--compact {
	--oc-gr-gap:                0.4rem;
	--oc-gr-body-gap:           0.05rem;
	--oc-gr-logo-size:          2rem;
	--oc-gr-rating-font-size:   1.1rem;
	--oc-gr-rating-font-weight: 600;
	--oc-gr-star-size:          1.4rem;
	--oc-gr-star-gap:           0.15rem;
	--oc-gr-count-font-size:    0.8rem;
}

.oc-google-reviews--large {
	--oc-gr-gap:                .4rem;
	--oc-gr-body-gap:           0.4rem;
	--oc-gr-logo-size:          5.6rem;
	--oc-gr-rating-font-size:   3rem;
	--oc-gr-rating-font-weight: 700;
	--oc-gr-star-size:          2.6rem;
	--oc-gr-star-gap:           0.3rem;
	--oc-gr-count-font-size:    1.4rem;
}

/* ── Light modifier ──────────────────────────────────────────── */

.oc-google-reviews--light {
	--oc-gr-color:            var(--text-inverse, #fff);
	--oc-gr-star-empty-color: rgba(255, 255, 255, 0.3);
}

/* ── Admin error (visible to admins only) ────────────────────── */

.oc-google-reviews__error {
	color:       #b00;
	font-size:   0.875rem;
}