/**
 * Meesho Reviews Tab - Default Styles
 *
 * All CSS custom properties are scoped to .mm-meesho-reviews-tab
 * (never :root) so they cannot conflict with the active theme's
 * own variables or override any global page styles.
 *
 * CSS containment (contain: layout style) is set on the root element
 * to prevent this widget from affecting layout of parent/sibling elements.
 */

/* ============================================================
   Root container — all plugin CSS variables live here ONLY
   ============================================================ */
.mm-meesho-reviews-tab {
	/* Layout containment: prevents this widget from influencing
	   layout calculations outside of its own subtree. */
	contain: layout style;

	/* Container dimensions */
	--mm-reviews-max-width: 800px;
	--mm-reviews-bg: transparent;
	--mm-reviews-padding: 0;
	--mm-reviews-border-radius: 0;

	/* Summary Section */
	--mm-summary-gap: 16px;
	--mm-summary-padding-bottom: 16px;
	--mm-summary-border-bottom: 1px solid #E2E8F0;

	/* Average Rating */
	--mm-avg-rating-font-size: 48px;
	--mm-avg-rating-font-weight: 700;
	--mm-avg-rating-color: #1E293B;

	/* Stars */
	--mm-stars-color: #F59E0B;
	--mm-stars-font-size: 20px;
	--mm-stars-letter-spacing: 2px;

	/* Review Count */
	--mm-review-count-color: #64748B;
	--mm-review-count-font-size: 14px;

	/* Rating Breakdown */
	--mm-breakdown-min-width: 250px;

	/* Rating Bar */
	--mm-bar-row-gap: 8px;
	--mm-bar-row-margin-bottom: 6px;
	--mm-bar-height: 10px;
	--mm-bar-bg: #E2E8F0;
	--mm-bar-border-radius: 5px;
	--mm-bar-fill-transition: width 0.3s ease;

	/* Star Labels */
	--mm-star-label-width: 16px;
	--mm-star-label-font-size: 13px;
	--mm-star-label-font-weight: 600;

	/* Percentage */
	--mm-pct-width: 32px;
	--mm-pct-font-size: 12px;
	--mm-pct-color: #64748B;

	/* Reviews List */
	--mm-list-min-width: 300px;
	--mm-review-item-border-bottom: 1px solid #E2E8F0;
	--mm-review-item-padding: 16px 0;

	/* Reviewer Avatar */
	--mm-avatar-size: 36px;
	--mm-avatar-bg: #E2E8F0;
	--mm-avatar-border-radius: 50%;
	--mm-avatar-font-weight: 600;
	--mm-avatar-color: #64748B;

	/* Reviewer Name */
	--mm-reviewer-name-font-weight: 600;
	--mm-reviewer-name-font-size: 14px;

	/* Review Text */
	--mm-review-text-margin: 8px 0 0;
	--mm-review-text-font-size: 14px;
	--mm-review-text-color: #334155;
	--mm-review-text-line-height: 1.6;

	/* Review Image */
	--mm-review-img-max-width: 120px;
	--mm-review-img-max-height: 120px;
	--mm-review-img-border-radius: 8px;
	--mm-review-img-margin-top: 8px;
	--mm-review-img-object-fit: cover;

	/* Date */
	--mm-date-color: #94A3B8;
	--mm-date-font-size: 12px;
	--mm-date-margin-left: auto;

	/* Disclaimer */
	--mm-disclaimer-bg: #F8FAFC;
	--mm-disclaimer-padding: 12px;
	--mm-disclaimer-border-radius: 8px;
	--mm-disclaimer-font-size: 12px;
	--mm-disclaimer-color: #64748B;
	--mm-disclaimer-margin-top: 20px;

	/* Star Colors for Bars */
	--mm-star-5-color: #10B981;
	--mm-star-4-color: #34D399;
	--mm-star-3-color: #F59E0B;
	--mm-star-2-color: #F97316;
	--mm-star-1-color: #EF4444;

	/* Typography — use inherit so we don't override the theme font */
	--mm-font-family: inherit;

	/* Apply container styles */
	max-width: var(--mm-reviews-max-width);
	background: var(--mm-reviews-bg);
	padding: var(--mm-reviews-padding);
	border-radius: var(--mm-reviews-border-radius);
	font-family: var(--mm-font-family);

	/* Reset box model to prevent theme inheritance from leaking IN */
	box-sizing: border-box;
}

/* Ensure all children use border-box sizing */
.mm-meesho-reviews-tab *,
.mm-meesho-reviews-tab *::before,
.mm-meesho-reviews-tab *::after {
	box-sizing: border-box;
}

/* ============================================================
   Summary Section
   ============================================================ */
.mm-meesho-reviews-tab .mm-reviews-summary {
	display: flex;
	align-items: center;
	gap: var(--mm-summary-gap);
	margin-bottom: 20px;
	padding-bottom: var(--mm-summary-padding-bottom);
	border-bottom: var(--mm-summary-border-bottom);
}

.mm-meesho-reviews-tab .mm-avg-rating {
	font-size: var(--mm-avg-rating-font-size);
	font-weight: var(--mm-avg-rating-font-weight);
	color: var(--mm-avg-rating-color);
	line-height: 1;
}

.mm-meesho-reviews-tab .mm-reviews-meta {
	flex: 1;
}

.mm-meesho-reviews-tab .mm-stars {
	color: var(--mm-stars-color);
	font-size: var(--mm-stars-font-size);
	letter-spacing: var(--mm-stars-letter-spacing);
	line-height: 1;
}

.mm-meesho-reviews-tab .mm-review-count {
	color: var(--mm-review-count-color);
	font-size: var(--mm-review-count-font-size);
	margin-top: 4px;
}

/* ============================================================
   Content Layout
   ============================================================ */
.mm-meesho-reviews-tab .mm-reviews-content {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

/* ============================================================
   Rating Breakdown
   ============================================================ */
.mm-meesho-reviews-tab .mm-rating-breakdown {
	flex: 1;
	min-width: var(--mm-breakdown-min-width);
}

.mm-meesho-reviews-tab .mm-rating-bar-row {
	display: flex;
	align-items: center;
	gap: var(--mm-bar-row-gap);
	margin-bottom: var(--mm-bar-row-margin-bottom);
}

.mm-meesho-reviews-tab .mm-star-label {
	width: var(--mm-star-label-width);
	font-size: var(--mm-star-label-font-size);
	font-weight: var(--mm-star-label-font-weight);
	flex-shrink: 0;
}

.mm-meesho-reviews-tab .mm-rating-bar {
	flex: 1;
	height: var(--mm-bar-height);
	background: var(--mm-bar-bg);
	border-radius: var(--mm-bar-border-radius);
	overflow: hidden;
}

.mm-meesho-reviews-tab .mm-rating-bar-fill {
	height: 100%;
	border-radius: var(--mm-bar-border-radius);
	transition: var(--mm-bar-fill-transition);
}

.mm-meesho-reviews-tab .mm-rating-pct {
	width: var(--mm-pct-width);
	font-size: var(--mm-pct-font-size);
	color: var(--mm-pct-color);
	text-align: right;
	flex-shrink: 0;
}

/* ============================================================
   Reviews List
   ============================================================ */
.mm-meesho-reviews-tab .mm-reviews-list {
	flex: 2;
	min-width: var(--mm-list-min-width);
}

.mm-meesho-reviews-tab .mm-review-item {
	border-bottom: var(--mm-review-item-border-bottom);
	padding: var(--mm-review-item-padding);
}

.mm-meesho-reviews-tab .mm-review-item:last-child {
	border-bottom: none;
}

.mm-meesho-reviews-tab .mm-review-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.mm-meesho-reviews-tab .mm-reviewer-avatar {
	width: var(--mm-avatar-size);
	height: var(--mm-avatar-size);
	background: var(--mm-avatar-bg);
	border-radius: var(--mm-avatar-border-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--mm-avatar-font-weight);
	color: var(--mm-avatar-color);
	font-size: 14px;
	flex-shrink: 0;
}

.mm-meesho-reviews-tab .mm-reviewer-info {
	flex: 1;
	min-width: 0;
}

.mm-meesho-reviews-tab .mm-reviewer-name {
	font-weight: var(--mm-reviewer-name-font-weight);
	font-size: var(--mm-reviewer-name-font-size);
}

.mm-meesho-reviews-tab .mm-review-stars {
	color: var(--mm-stars-color);
	font-size: 14px;
	line-height: 1;
}

.mm-meesho-reviews-tab .mm-review-date {
	margin-left: var(--mm-date-margin-left);
	color: var(--mm-date-color);
	font-size: var(--mm-date-font-size);
	white-space: nowrap;
	flex-shrink: 0;
}

.mm-meesho-reviews-tab .mm-review-text {
	margin: var(--mm-review-text-margin);
	font-size: var(--mm-review-text-font-size);
	color: var(--mm-review-text-color);
	line-height: var(--mm-review-text-line-height);
}

.mm-meesho-reviews-tab .mm-review-image {
	max-width: var(--mm-review-img-max-width);
	max-height: var(--mm-review-img-max-height);
	border-radius: var(--mm-review-img-border-radius);
	margin-top: var(--mm-review-img-margin-top);
	object-fit: var(--mm-review-img-object-fit);
	display: block;
}

.mm-meesho-reviews-tab .mm-no-reviews {
	color: #64748B;
	font-style: italic;
}

/* ============================================================
   Disclaimer
   ============================================================ */
.mm-meesho-reviews-tab .mm-reviews-disclaimer {
	margin-top: var(--mm-disclaimer-margin-top);
	padding: var(--mm-disclaimer-padding);
	background: var(--mm-disclaimer-bg);
	border-radius: var(--mm-disclaimer-border-radius);
	font-size: var(--mm-disclaimer-font-size);
	color: var(--mm-disclaimer-color);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 600px) {
	.mm-meesho-reviews-tab .mm-reviews-content {
		flex-direction: column;
	}
	.mm-meesho-reviews-tab .mm-reviews-summary {
		flex-wrap: wrap;
	}
}