/* Product reviews (photos) — front-end styles */

.wco-review-photos { margin: 12px 0; }
.wco-review-photos label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 13px; }
.wco-review-photo-hint { display: block; color: #6b7280; font-size: 12px; margin-top: 4px; }

.wco-review-photo-previews { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wco-review-photo-preview-thumb {
	width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid #e5e7eb;
}

.wco-review-verified-badge {
	display: inline-block; margin: 6px 0; padding: 3px 10px; border-radius: 12px;
	background: #dcfce7; color: #166534; font-size: 11px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .02em;
}

.wco-review-photos-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.wco-review-photo-link { display: block; }
.wco-review-photo-link img {
	width: 108px; height: 108px; object-fit: cover; border-radius: 8px; border: 1px solid #e5e7eb; cursor: zoom-in;
	transition: opacity .15s;
}
.wco-review-photo-link img:hover { opacity: .85; }

/* ── Lightbox: full-screen photo viewer with the review's own verified tag
   pinned to the top, the review text pinned to the bottom (truncated with a
   "Read more" toggle for long text), and prev/next arrows when a review has
   more than one photo - all driven off data attributes on the photo grid's
   wrapper (.wco-review-photos-grid) rather than a second query. ────────── */
.wco-review-lightbox-overlay {
	position: fixed; inset: 0; background: rgba(0,0,0,.9); display: flex; align-items: center; justify-content: center;
	z-index: 100000; opacity: 0; visibility: hidden; transition: opacity .2s;
}
.wco-review-lightbox-overlay.wco-review-lightbox-open { opacity: 1; visibility: visible; }
.wco-review-lightbox-img { max-width: 92vw; max-height: 78vh; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }

.wco-review-lightbox-top {
	position: absolute; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr;
	align-items: center; padding: 14px 16px; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.wco-review-lightbox-verified {
	justify-self: start; display: inline-flex; align-items: center; gap: 6px; background: #eef2ff;
	color: var(--wco-reviews-accent); padding: 6px 12px; border-radius: 20px; font-size: 12.5px; font-weight: 700;
}
.wco-review-lightbox-counter { justify-self: center; font-size: 12.5px; font-weight: 600; color: #6b7280; }
.wco-review-lightbox-close {
	justify-self: end; background: #fff; color: #374151; border: 1px solid #e5e7eb; width: 34px; height: 34px;
	border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer;
}
.wco-review-lightbox-close:hover { background: #f5f6f8; }

.wco-review-lightbox-nav {
	position: absolute; top: 50%; transform: translateY(-50%); background: #fff; color: #374151;
	border: 1px solid #e5e7eb; width: 40px; height: 40px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer;
}
.wco-review-lightbox-nav:hover { background: #f5f6f8; }
.wco-review-lightbox-nav:disabled { opacity: .35; cursor: not-allowed; }
.wco-review-lightbox-nav:disabled:hover { background: #fff; }
.wco-review-lightbox-prev { left: 14px; }
.wco-review-lightbox-next { right: 14px; }

.wco-review-lightbox-bottom {
	position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 22px 18px;
	background: #fff; box-shadow: 0 -1px 0 rgba(0,0,0,.06); text-align: center;
}
.wco-review-lightbox-text { color: #1f2937; font-size: 14px; line-height: 1.5; margin: 0 auto; max-width: 640px; }
.wco-review-lightbox-text.is-clamped {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wco-review-lightbox-readmore {
	background: none; border: none; color: var(--wco-reviews-accent); font-size: 13px; font-weight: 700; cursor: pointer;
	margin-top: 6px; padding: 0;
}
.wco-review-lightbox-readmore:hover { text-decoration: underline; }

/* ── Product-summary rating row - this is WooCommerce's own default markup
   near the title/price (a .woocommerce-product-rating wrapping .star-rating
   + .woocommerce-review-link), not part of this plugin's own tab template,
   so it ships completely unstyled by default. Reskin it into a small chip
   using the same accent color as everything else on this page. ─────────── */
.woocommerce-product-rating { display: flex; align-items: center; gap: 8px; margin: 8px 0 14px; }
.woocommerce-product-rating .star-rating { font-size: 14px; }
.woocommerce-product-rating .star-rating::before { color: #d1d5db; }
.woocommerce-product-rating .star-rating span::before { color: var(--wco-reviews-accent, #4f46e5); }
.woocommerce-review-link {
	font-size: 13px; font-weight: 400; color: #6b7280; text-decoration: none; white-space: nowrap;
}
.woocommerce-review-link:hover { color: var(--wco-reviews-accent, #4f46e5); text-decoration: underline; }

/* ── Outer wrapper - unenclosed (no border/radius/padding of its own), just
   real breathing room below the form so it doesn't run into whatever follows
   it on the page. The individual pieces inside (summary card, review cards)
   keep their own rounded borders. */
.wco-reviews-wrap {
	--wco-reviews-accent: #4f46e5; /* overridden inline per-page via the accent-color setting/theme var */
	margin-bottom: 32px; box-sizing: border-box;
}

/* The "Reviews (N)" tab label itself (WooCommerce's native product-data-tabs
   navigation, not this plugin's content below it) - wherever the theme
   (Blocksy) actually paints its active-tab fill from (varies by breakpoint/
   version - a thin ::before underline on desktop, something else on mobile),
   clipping the CONTAINER itself to a rounded shape via overflow:hidden
   rounds it regardless of the exact source, rather than chasing one
   specific pseudo-element/rule. */
li.reviews_tab.active,
.woocommerce-tabs ul.tabs li.reviews_tab.active {
	border-radius: 10px !important;
	overflow: hidden !important;
}

/* Large empty gap sometimes appears above the tab nav on mobile (theme/
   WooCommerce tab-wrapper spacing, not content this plugin renders) -
   collapse the most common top margins/padding defensively. */
.woocommerce-tabs { margin-top: 0 !important; }
.woocommerce-tabs ul.tabs { margin-top: 0 !important; padding-top: 0 !important; }

/* ── Rating summary card ─────────────────────────────────────────────── */
.wco-reviews-summary {
	border: 1px solid #eef0f4; border-radius: 12px; padding: 20px 22px; margin: 0 0 18px;
	background: #fff;
}
.wco-reviews-summary-label { font-size: 15px; font-weight: 700; color: #374151; margin-bottom: 12px; }
.wco-reviews-summary-row { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.wco-reviews-score-box {
	flex-shrink: 0; width: 62px; height: 62px; border-radius: 10px; background: #111827; color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800;
}
.wco-reviews-stars-static { color: #d1d5db; font-size: 19px; letter-spacing: 2px; }
.wco-reviews-stars-static .is-filled { color: var(--wco-reviews-accent); }
.wco-reviews-based-on { font-size: 15px; color: #64748b; margin-top: 3px; }

.wco-reviews-bars { display: flex; flex-direction: column; gap: 7px; }
.wco-reviews-bar-row {
	display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none;
	padding: 3px 0; cursor: pointer; font: inherit; text-align: left;
}
.wco-reviews-bar-stars { flex: 0 0 38px; font-size: 14.5px; color: #6b7280; font-weight: 600; }
.wco-reviews-bar-track { flex: 1 1 auto; height: 9px; border-radius: 4px; background: #eef0f4; overflow: hidden; }
.wco-reviews-bar-fill { display: block; height: 100%; background: var(--wco-reviews-accent); border-radius: 4px; }
.wco-reviews-bar-count { flex: 0 0 36px; text-align: right; font-size: 14.5px; color: #6b7280; }
.wco-reviews-bar-row:hover .wco-reviews-bar-stars,
.wco-reviews-bar-row:hover .wco-reviews-bar-count { color: #111827; }

/* ── Filter pills + dropdowns row ─────────────────────────────────────── */
.wco-reviews-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.wco-reviews-filters-pills,
.wco-reviews-filters-dropdowns { display: flex; gap: 10px; flex-wrap: wrap; }
.wco-reviews-filter {
	padding: 9px 16px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; color: #374151;
	font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
	text-align: left;
}
.wco-reviews-filter:hover { border-color: #9ca3af; }
.wco-reviews-filter.is-active { background: var(--wco-reviews-accent); border-color: var(--wco-reviews-accent); color: #fff; }

/* Custom dropdown (button trigger + our own styled menu) - replaces a plain
   native <select>, since browsers don't let CSS style a native option list
   consistently (especially on mobile, where it's rendered by the OS, not
   the page). Reused for both the star-rating filter and the sort control. */
.wco-dropdown { position: relative; }
.wco-dropdown-trigger {
	display: flex; align-items: center; justify-content: flex-start; gap: 6px; width: 100%;
	padding: 9px 14px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; color: #374151;
	font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; text-align: left;
}
.wco-dropdown-trigger:hover { border-color: #9ca3af; }
.wco-dropdown-static-label { color: #6b7280; font-weight: 500; }
.wco-dropdown-chevron { margin-left: auto; }
.wco-dropdown.is-open .wco-dropdown-trigger { border-color: var(--wco-reviews-accent); }
.wco-dropdown-chevron {
	width: 8px; height: 8px; flex-shrink: 0; border-right: 2px solid #6b7280; border-bottom: 2px solid #6b7280;
	transform: rotate(45deg) translateY(-2px); transition: transform .15s;
}
.wco-dropdown.is-open .wco-dropdown-chevron { transform: rotate(225deg) translateY(-1px); border-color: var(--wco-reviews-accent); }
.wco-dropdown-menu {
	position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; z-index: 20;
	background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 8px 24px rgba(16,24,40,.12);
	list-style: none; margin: 0; padding: 6px; max-height: 260px; overflow-y: auto;
}
.wco-dropdown-menu li {
	padding: 9px 12px; border-radius: 6px; font-size: 13px; color: #374151; cursor: pointer; white-space: nowrap;
}
.wco-dropdown-menu li:hover { background: #f5f6f8; }
.wco-dropdown-menu li.is-selected { background: var(--wco-reviews-accent); color: #fff; font-weight: 600; }

/* Mobile: "With images" / "Verified" pills share one row 50/50, and the
   star-filter / sort dropdowns share their own row 50/50 below it. */
@media (max-width: 600px) {
	.wco-reviews-filters-pills .wco-reviews-filter,
	.wco-reviews-filters-dropdowns .wco-dropdown { flex: 1 1 calc(50% - 5px); }
	.wco-reviews-filters-dropdowns .wco-dropdown-trigger { width: 100%; }
	.wco-reviews-filters-dropdowns .wco-dropdown-menu { left: 0; right: 0; min-width: 0; }
}

/* ── Review card grid ─────────────────────────────────────────────────── */
.wco-reviews-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px;
}
@media (max-width: 900px) { .wco-reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .wco-reviews-grid { grid-template-columns: 1fr; } }

.wco-review-card {
	border: 1px solid #eef0f4; border-radius: 10px; padding: 16px 18px; background: #fafbfc;
}
.wco-review-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.wco-review-avatar { font-size: 16px; }
.wco-review-author { font-size: 15.5px; color: #111827; }
.wco-review-card-verified {
	display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
	border-radius: 50%; background: var(--wco-reviews-accent); color: #fff; font-size: 11px; flex-shrink: 0;
}
.wco-review-stars { display: flex; align-items: center; gap: 1px; color: #d1d5db; font-size: 15px; margin-bottom: 6px; }
.wco-review-stars .is-filled { color: var(--wco-reviews-accent); }
.wco-review-date { margin-left: 8px; font-size: 14px; color: #94a3b8; font-style: italic; }
.wco-review-text { font-size: 15.5px; color: #374151; line-height: 1.55; }
.wco-review-card .wco-review-photos-grid { margin-top: 10px; margin-bottom: 0; }

.wco-reviews-empty { color: #64748b; font-size: 13px; padding: 20px 0; text-align: center; }

.wco-reviews-load-more-wrap { text-align: center; margin: 4px 0 8px; }
.wco-reviews-load-more {
	padding: 10px 24px; border-radius: 8px; border: none; background: var(--wco-reviews-accent); color: #fff;
	font-size: 13px; font-weight: 700; cursor: pointer;
}
.wco-reviews-load-more:hover { filter: brightness(.92); }
.wco-reviews-load-more:disabled { opacity: .6; cursor: wait; }

/* ── Review form ──────────────────────────────────────────────────────── */
#review_form_wrapper { margin-top: 22px; padding-top: 4px; }
.wco-reviews-must-purchase {
	font-size: 13.5px; color: #64748b; background: #f9fafb; border: 1px solid #eef0f4;
	border-radius: 10px; padding: 14px 18px;
}