/**
 * Multi-Location Google Reviews — Front-end Styles
 *
 * All styles are scoped under .mlgr-reviews to avoid theme conflicts.
 * CSS custom properties let themes override the design system:
 *
 *   .mlgr-reviews {
 *     --mlgr-primary:    #1a73e8;
 *     --mlgr-star:       #fbbc04;
 *     --mlgr-card-bg:    #fff;
 *     --mlgr-text:       #3c4043;
 *     --mlgr-gap:        16px;
 *     --mlgr-radius:     8px;
 *   }
 */

/* ==========================================================================
   Design tokens (CSS custom properties)
   ========================================================================== */

.mlgr-reviews {
	/* Brand */
	--mlgr-primary:          #1a73e8;
	--mlgr-primary-hover:    #1557b0;
	--mlgr-star:             #fbbc04;

	/* Typography */
	--mlgr-font:             inherit;
	--mlgr-font-size:        15px;
	--mlgr-font-size-sm:     13px;
	--mlgr-text:             #3c4043;
	--mlgr-text-secondary:   #70757a;
	--mlgr-line-height:      1.55;

	/* Cards */
	--mlgr-card-bg:          #ffffff;
	--mlgr-card-border:      #e8eaed;
	--mlgr-card-shadow:      0 1px 4px rgba(0, 0, 0, .10);
	--mlgr-card-shadow-hover:0 4px 12px rgba(0, 0, 0, .15);
	--mlgr-radius:           10px;
	--mlgr-padding:          20px;

	/* Layout */
	--mlgr-gap:              20px;
	--mlgr-max-width:        100%;
	--mlgr-grid-cols:        2;

	/* Avatars */
	--mlgr-avatar-size:      42px;
	--mlgr-avatar-bg:        #4285f4;
	--mlgr-avatar-color:     #fff;

	/* Slider */
	--mlgr-slider-radius:    10px;
	--mlgr-nav-size:         36px;
	--mlgr-nav-bg:           #fff;
	--mlgr-nav-color:        #3c4043;
	--mlgr-nav-border:       #e8eaed;
}

/* ==========================================================================
   Base wrapper
   ========================================================================== */

.mlgr-reviews {
	font-family:  var(--mlgr-font);
	font-size:    var(--mlgr-font-size);
	color:        var(--mlgr-text);
	line-height:  var(--mlgr-line-height);
	max-width:    var(--mlgr-max-width);
	box-sizing:   border-box;
}

.mlgr-reviews *,
.mlgr-reviews *::before,
.mlgr-reviews *::after {
	box-sizing: inherit;
}

/* ==========================================================================
   Header (rating summary)
   ========================================================================== */

.mlgr-header {
	display:       flex;
	flex-wrap:     wrap;
	align-items:   flex-start;
	gap:           12px 20px;
	margin-bottom: var(--mlgr-gap);
	padding-bottom:var(--mlgr-gap);
	border-bottom: 1px solid var(--mlgr-card-border);
}

.mlgr-header__name {
	font-size:    1.15em;
	font-weight:  700;
	margin:       0 0 2px;
	color:        var(--mlgr-text);
}

.mlgr-header__address {
	font-size:  var(--mlgr-font-size-sm);
	color:      var(--mlgr-text-secondary);
	margin:     0;
}

.mlgr-header__info {
	flex: 1 1 200px;
}

.mlgr-header__rating {
	display:     flex;
	align-items: center;
	gap:         8px;
	flex-wrap:   wrap;
}

.mlgr-header__score {
	font-size:   2em;
	font-weight: 800;
	line-height: 1;
	color:       var(--mlgr-text);
}

.mlgr-header__stars {
	font-size: 1.4em;
}

.mlgr-header__count {
	font-size: var(--mlgr-font-size-sm);
	color:     var(--mlgr-text-secondary);
}

.mlgr-header__cta {
	display:         inline-flex;
	align-items:     center;
	gap:             5px;
	color:           var(--mlgr-primary);
	font-size:       var(--mlgr-font-size-sm);
	font-weight:     500;
	text-decoration: none;
	white-space:     nowrap;
	margin-left:     auto;
	padding:         6px 14px;
	border:          1px solid var(--mlgr-primary);
	border-radius:   20px;
	transition:      background .15s, color .15s;
}

.mlgr-header__cta:hover,
.mlgr-header__cta:focus-visible {
	background: var(--mlgr-primary);
	color:      #fff;
	outline:    none;
}

/* ==========================================================================
   Stars
   ========================================================================== */

.mlgr-stars {
	display:      inline-block;
	color:        var(--mlgr-star);
	letter-spacing: 1px;
	font-style:   normal;
	white-space:  nowrap;
}

/* ==========================================================================
   Review card (shared between list, grid, slider)
   ========================================================================== */

.mlgr-review-card {
	background:    var(--mlgr-card-bg);
	border:        1px solid var(--mlgr-card-border);
	border-radius: var(--mlgr-radius);
	box-shadow:    var(--mlgr-card-shadow);
	padding:       var(--mlgr-padding);
	display:       flex;
	flex-direction:column;
	gap:           12px;
	transition:    box-shadow .2s ease, transform .2s ease;
}

.mlgr-review-card:hover {
	box-shadow: var(--mlgr-card-shadow-hover);
	transform:  translateY(-2px);
}

/* Author row */
.mlgr-author {
	display:     flex;
	align-items: flex-start;
	gap:         12px;
}

.mlgr-author__photo-wrap {
	flex-shrink: 0;
}

.mlgr-author-photo {
	width:         var(--mlgr-avatar-size);
	height:        var(--mlgr-avatar-size);
	border-radius: 50%;
	object-fit:    cover;
	display:       block;
}

.mlgr-author-avatar {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           var(--mlgr-avatar-size);
	height:          var(--mlgr-avatar-size);
	border-radius:   50%;
	background:      var(--mlgr-avatar-bg);
	color:           var(--mlgr-avatar-color);
	font-size:       calc(var(--mlgr-avatar-size) * .42);
	font-weight:     700;
	line-height:     1;
	user-select:     none;
}

.mlgr-author__meta {
	flex: 1 1 0;
	min-width: 0;
}

.mlgr-author__name {
	display:     block;
	font-weight: 600;
	font-size:   var(--mlgr-font-size);
	color:       var(--mlgr-text);
	overflow:    hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mlgr-review-date {
	display:   block;
	font-size: var(--mlgr-font-size-sm);
	color:     var(--mlgr-text-secondary);
	margin-top:2px;
}

/* Star rating row */
.mlgr-review-rating {
	line-height: 1;
}

/* Review text */
.mlgr-review-body {
	flex: 1 1 auto;
}

.mlgr-review-text {
	margin:    0;
	font-size: var(--mlgr-font-size);
	color:     var(--mlgr-text);
}

/* "Read more" button (injected by JS) */
.mlgr-read-more {
	display:    inline-block;
	margin-top: 6px;
	padding:    0;
	background: none;
	border:     none;
	color:      var(--mlgr-primary);
	font-size:  var(--mlgr-font-size-sm);
	font-weight:600;
	cursor:     pointer;
	text-decoration: underline;
}

.mlgr-read-more:hover {
	color: var(--mlgr-primary-hover);
}

.mlgr-read-more:focus-visible {
	outline:        2px solid var(--mlgr-primary);
	outline-offset: 2px;
	border-radius:  2px;
}

/* ==========================================================================
   List layout
   ========================================================================== */

.mlgr-layout--list .mlgr-reviews__list {
	display:        flex;
	flex-direction: column;
	gap:            var(--mlgr-gap);
}

/* ==========================================================================
   Grid layout
   ========================================================================== */

.mlgr-layout--grid .mlgr-reviews__list {
	display:               grid;
	grid-template-columns: repeat(var(--mlgr-grid-cols, 2), 1fr);
	gap:                   var(--mlgr-gap);
}

@media (max-width: 600px) {
	.mlgr-layout--grid .mlgr-reviews__list {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 900px) {
	.mlgr-layout--grid .mlgr-reviews__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   Slider layout
   ========================================================================== */

.mlgr-slider {
	position: relative;
}

/* Controls row (prev / counter / next) */
.mlgr-slider__controls {
	display:         flex;
	align-items:     center;
	justify-content: flex-end;
	gap:             8px;
	margin-bottom:   12px;
}

.mlgr-slider__counter {
	font-size:  var(--mlgr-font-size-sm);
	color:      var(--mlgr-text-secondary);
	min-width:  44px;
	text-align: center;
}

.mlgr-slider__prev,
.mlgr-slider__next {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           var(--mlgr-nav-size);
	height:          var(--mlgr-nav-size);
	border:          1px solid var(--mlgr-nav-border);
	border-radius:   50%;
	background:      var(--mlgr-nav-bg);
	color:           var(--mlgr-nav-color);
	cursor:          pointer;
	padding:         0;
	transition:      background .15s, border-color .15s, color .15s;
	flex-shrink:     0;
}

.mlgr-slider__prev:hover:not(:disabled),
.mlgr-slider__next:hover:not(:disabled) {
	background:    var(--mlgr-primary);
	border-color:  var(--mlgr-primary);
	color:         #fff;
}

.mlgr-slider__prev:focus-visible,
.mlgr-slider__next:focus-visible {
	outline:        2px solid var(--mlgr-primary);
	outline-offset: 2px;
}

.mlgr-slider__prev:disabled,
.mlgr-slider__next:disabled {
	opacity: .4;
	cursor:  not-allowed;
}

/* Scrollable track */
.mlgr-slider__track {
	display:             flex;
	overflow-x:          auto;
	scroll-snap-type:    x mandatory;
	scroll-behavior:     smooth;
	gap:                 var(--mlgr-gap);
	outline:             none;
	/* Hide scrollbar visually (keep functional) */
	scrollbar-width:     none;
	-ms-overflow-style:  none;
	border-radius:       var(--mlgr-slider-radius);
}

.mlgr-slider__track::-webkit-scrollbar {
	display: none;
}

.mlgr-slider__track:focus-visible {
	outline: 2px solid var(--mlgr-primary);
}

/* Individual slide */
.mlgr-slide {
	flex:              0 0 100%;
	scroll-snap-align: start;
	/* Allows touch swipe */
}

@media (min-width: 640px) {
	.mlgr-slide {
		flex-basis: calc(50% - var(--mlgr-gap) / 2);
		scroll-snap-align: start;
	}
}

/* ==========================================================================
   "Powered by Google" attribution (REQUIRED — Google Terms of Service)
   ========================================================================== */

.mlgr-attribution {
	margin-top:  var(--mlgr-gap);
	text-align:  right;
}

.mlgr-attribution__link {
	display:         inline-flex;
	align-items:     center;
	gap:             5px;
	font-size:       11px;
	color:           var(--mlgr-text-secondary);
	text-decoration: none;
	opacity:         .75;
	transition:      opacity .15s;
}

.mlgr-attribution__link:hover {
	opacity: 1;
}

.mlgr-google-icon {
	flex-shrink: 0;
}

/* ==========================================================================
   Empty / error states
   ========================================================================== */

.mlgr-no-reviews {
	color:       var(--mlgr-text-secondary);
	font-style:  italic;
	text-align:  center;
	padding:     24px 0;
}

/* ==========================================================================
   Accessibility — reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.mlgr-review-card {
		transition: none;
	}

	.mlgr-slider__track {
		scroll-behavior: auto;
	}
}

/* ==========================================================================
   Shadow Modifiers
   ========================================================================== */

.mlgr-reviews.mlgr-shadow--none .mlgr-review-card {
	box-shadow: none !important;
}

.mlgr-reviews.mlgr-shadow--none .mlgr-review-card:hover {
	box-shadow: none !important;
	transform: none !important;
}

.mlgr-reviews.mlgr-shadow--subtle .mlgr-review-card {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.mlgr-reviews.mlgr-shadow--subtle .mlgr-review-card:hover {
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	transform: translateY(-1px);
}

.mlgr-reviews.mlgr-shadow--elevated .mlgr-review-card {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.mlgr-reviews.mlgr-shadow--elevated .mlgr-review-card:hover {
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
	transform: translateY(-3px);
}