/* ============================================================
   Advanced Reviews Widget – reviews-widget.css
   ============================================================ */

/* ---------- Widget root */
.arw-reviews-widget {
	--arw-accent:  #FF5733;
	--arw-label:   #6C63FF;
	--arw-star:    #F5A623;
	--arw-card-bg: #ffffff;
	--arw-columns: 2;
	--arw-gap:     16px;
	--arw-radius:  16px;
	--arw-shadow:  0 2px 12px rgba(0,0,0,0.08);
	--arw-text:    #1a1a2e;
	--arw-subtext: #6b7280;
	--arw-cat-bg:  #f4f5f7;
	--arw-border:  #e5e7eb;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--arw-text);
	box-sizing: border-box;
}
.arw-reviews-widget *, .arw-reviews-widget *::before, .arw-reviews-widget *::after { box-sizing: border-box; }

/* ---------- Header */
.arw-header          { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.arw-section-bar     { display:inline-block; width:4px; height:28px; background:var(--arw-accent); border-radius:4px; flex-shrink:0; }
.arw-section-title   { font-size:1.6rem; font-weight:700; margin:0; line-height:1.2; color:var(--arw-text); }

/* ---------- Overall */
.arw-overall         { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.arw-global-score    { font-size:3.8rem; font-weight:800; color:var(--arw-label); line-height:1; }
.arw-overall-meta    { display:flex; flex-direction:column; gap:2px; }
.arw-review-label    { font-size:1.05rem; font-weight:700; color:var(--arw-label); }
.arw-total-reviews   { font-size:0.875rem; color:var(--arw-subtext); }

/* ---------- Categories */
.arw-categories  { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.arw-cat-box     { background:var(--arw-cat-bg); border-radius:10px; padding:12px 16px; min-width:120px; flex:1 1 120px; max-width:200px; }
.arw-cat-label   { display:block; font-size:0.8rem; font-weight:600; color:var(--arw-text); margin-bottom:4px; }
.arw-cat-score   { display:block; font-size:0.95rem; font-weight:700; color:var(--arw-subtext); }

/* ---------- Track */
.arw-reviews-track-wrapper { position:relative; margin-bottom:24px; }
/* overflow:hidden only on mobile (carousel needs it); desktop lets shadows bleed out */
@media (min-width:768px) {
	.arw-reviews-track-wrapper { overflow:visible; padding:8px 4px; margin-left:-4px; margin-right:-4px; }
}
@media (max-width:767px) {
	.arw-reviews-track-wrapper { overflow:hidden; }
}
.arw-reviews-track {
	display:grid;
	grid-template-columns:repeat(var(--arw-columns),1fr);
	gap:var(--arw-gap);
}
/* On desktop the wrap is transparent; card fills it */
.arw-review-card-wrap { display:contents; }
@media (min-width: 768px) {
	.arw-review-card-wrap { display:contents; }
}

/* ---------- Card */
.arw-review-card {
	background:var(--arw-card-bg);
	border-radius:var(--arw-radius);
	box-shadow:var(--arw-shadow);
	padding:20px;
	display:flex;
	flex-direction:column;
	gap:14px;
	border:1px solid var(--arw-border);
	transition:box-shadow .2s,transform .2s;
}
.arw-review-card:hover { box-shadow:0 6px 24px rgba(0,0,0,.13); transform:translateY(-2px); }

/* header */
.arw-card-header   { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.arw-stars         { display:flex; align-items:center; gap:2px; }
.arw-star          { font-size:1rem; color:#d1d5db; line-height:1; }
.arw-star.filled   { color:var(--arw-star); }
.arw-star-count    { font-size:.875rem; font-weight:700; color:var(--arw-text); margin-left:4px; }
.arw-score-badge   { display:flex; align-items:center; gap:6px; background:var(--arw-label); color:#fff; border-radius:8px; padding:4px 10px; flex-shrink:0; }
.arw-badge-label   { font-size:.78rem; font-weight:600; }
.arw-badge-score   { font-size:.9rem; font-weight:800; }

/* reviewer */
.arw-reviewer-row   { display:flex; align-items:center; gap:12px; }
.arw-avatar         { width:44px; height:44px; border-radius:50%; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:#E74C3C; }
.arw-avatar img     { width:100%; height:100%; object-fit:cover; display:block; }
.arw-avatar-initials { font-size:1.1rem; font-weight:700; color:#fff; text-transform:uppercase; }
.arw-reviewer-info  { display:flex; flex-direction:column; gap:2px; min-width:0; }
.arw-reviewer-name  { font-size:.9rem; font-weight:700; color:var(--arw-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.arw-reviewer-sep   { font-weight:400; color:var(--arw-subtext); }
.arw-review-meta    { font-size:.78rem; color:var(--arw-subtext); }
.arw-verified       { color:#10b981; font-weight:500; }

/* text */
.arw-review-text          { font-size:.875rem; line-height:1.65; color:var(--arw-text); margin:0; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.arw-review-text--full    { display:block; -webkit-line-clamp:unset; overflow:visible; }

/* gallery */
.arw-gallery            { display:flex; gap:8px; flex-wrap:wrap; }
.arw-gallery-thumb      { width:80px; height:60px; border-radius:8px; overflow:hidden; flex-shrink:0; }
.arw-gallery-thumb img  { width:100%; height:100%; object-fit:cover; display:block; }
.arw-gallery--full .arw-gallery-thumb { width:130px; height:96px; border-radius:10px; }

/* ---------- See-all button */
.arw-see-all-wrapper { text-align:center; }
.arw-see-all-btn {
	display:inline-block;
	width:auto;
	min-width:200px;
	padding:14px 32px;
	border:2px solid #FF5733;
	border-radius:12px;
	background:#FF5733;
	color:#ffffff;
	font-size:.95rem;
	font-weight:600;
	cursor:pointer;
	transition:background .18s,border-color .18s,color .18s,opacity .18s;
	font-family:inherit;
	letter-spacing:.01em;
}
.arw-see-all-btn:hover {
	background:#e04a28;
	border-color:#e04a28;
	color:#ffffff;
}

/* ---------- Carousel dots */
.arw-carousel-dots { display:none; justify-content:center; gap:8px; margin-top:16px; }
.arw-dot           { width:8px; height:8px; border-radius:50%; background:var(--arw-border); cursor:pointer; transition:background .2s,transform .2s; }
.arw-dot.active    { background:var(--arw-label); transform:scale(1.3); }

/* ============================================================
   POPUP  — lives in <body>, not inside Elementor wrappers
   ============================================================ */
.arw-popup {
	/* CSS vars inherit from the #popup-id rule injected inline */
	--arw-popup-overlay: rgba(0,0,0,.65);
	--arw-popup-bg:      #f8f9fb;
	--arw-popup-title:   #1a1a2e;

	/* Layout */
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;          /* JS sets display:flex on open */
	align-items: stretch;
	justify-content: flex-end;
	pointer-events: none;   /* overlay & panel re-enable below */
}

/* Visible state */
.arw-popup--open { pointer-events: auto; }

/* Overlay */
.arw-popup-overlay {
	position: fixed;
	inset: 0;
	background: var(--arw-popup-overlay);
	pointer-events: auto;
	cursor: pointer;
	animation: arwFadeIn .25s ease both;
}
.arw-popup--closing .arw-popup-overlay { animation: arwFadeOut .26s ease forwards; }

/* Panel */
.arw-popup-panel {
	position: relative;
	z-index: 1;
	width: min(600px, 100vw);
	max-height: 100vh;
	background: var(--arw-popup-bg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	pointer-events: auto;
	box-shadow: -4px 0 40px rgba(0,0,0,.2);
	animation: arwSlideInRight .32s cubic-bezier(.4,0,.2,1) both;
}
.arw-popup--closing .arw-popup-panel { animation: arwSlideOutRight .26s cubic-bezier(.4,0,.2,1) forwards; }

/* Header */
.arw-popup-header {
	padding: 20px 24px 16px;
	border-bottom: 1px solid #e5e7eb;
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
	background: var(--arw-popup-bg);
}
.arw-popup-title   { font-size:1.3rem; font-weight:800; margin:0; line-height:1.2; color:var(--arw-popup-title,#1a1a2e); }
.arw-popup-overall { display:flex; align-items:center; gap:8px; }
.arw-popup-score   { font-size:2rem; font-weight:800; color:var(--arw-label); line-height:1; }
.arw-popup-meta    { display:flex; flex-direction:column; }

.arw-popup-close {
	width:36px; height:36px;
	border-radius:50%;
	border:2px solid #e5e7eb;
	background:#fff;
	display:flex; align-items:center; justify-content:center;
	cursor:pointer;
	color:var(--arw-text,#1a1a2e);
	flex-shrink:0;
	transition:background .15s,border-color .15s,color .15s,transform .15s;
	padding:0;
}
.arw-popup-close:hover { background:#fee2e2; border-color:#f87171; color:#dc2626; transform:scale(1.08); }

/* Scrollable body */
.arw-popup-body {
	flex:1;
	overflow-y: auto;
	padding: 20px 24px 40px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}
.arw-popup-body::-webkit-scrollbar       { width:5px; }
.arw-popup-body::-webkit-scrollbar-track { background:transparent; }
.arw-popup-body::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:3px; }

/* Full cards in popup — no hover lift */
.arw-review-card--full { transform:none !important; transition:box-shadow .2s; }
.arw-review-card--full .arw-reviewer-name { white-space:normal; }

/* ---------- Animations */
@keyframes arwFadeIn        { from{opacity:0}    to{opacity:1} }
@keyframes arwFadeOut       { from{opacity:1}    to{opacity:0} }
@keyframes arwSlideInRight  { from{transform:translateX(60px);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes arwSlideOutRight { from{transform:translateX(0);opacity:1}    to{transform:translateX(60px);opacity:0} }
@keyframes arwSlideInUp     { from{transform:translateY(60px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes arwSlideOutUp    { from{transform:translateY(0);opacity:1}    to{transform:translateY(60px);opacity:0} }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 767px) {

	/* Carousel */
	.arw-reviews-track         { display:flex; flex-wrap:nowrap; transition:transform .35s cubic-bezier(.4,0,.2,1); will-change:transform; }
	/* Both the wrap and the card inside need carousel sizing */
	.arw-review-card-wrap      { min-width:calc(100vw - 48px); max-width:calc(100vw - 48px); flex-shrink:0; display:block; }
	.arw-review-card-wrap .arw-review-card { width:100%; min-width:unset; max-width:unset; }
	.arw-review-card           { min-width:unset; max-width:unset; }
	.arw-carousel-dots         { display:flex; }
	.arw-cat-box               { flex:1 1 calc(50% - 10px); max-width:calc(50% - 5px); }
	.arw-section-title         { font-size:1.3rem; }
	.arw-global-score          { font-size:3rem; }

	/* Hide cards that are desktop-only on mobile */
	.arw-review-card-wrap.arw-desktop-only { display:none; }

	/* Popup → bottom sheet */
	.arw-popup         { align-items:flex-end; justify-content:stretch; }
	.arw-popup-panel   {
		width:100%;
		max-height:92dvh;
		max-height:92vh;
		border-radius:20px 20px 0 0;
		animation:arwSlideInUp .32s cubic-bezier(.4,0,.2,1) both;
		box-shadow:0 -4px 32px rgba(0,0,0,.18);
	}
	.arw-popup--closing .arw-popup-panel { animation:arwSlideOutUp .26s cubic-bezier(.4,0,.2,1) forwards; }

	/* Drag handle indicator */
	.arw-popup-panel::before {
		content:'';
		display:block;
		width:40px;
		height:4px;
		background:#d1d5db;
		border-radius:2px;
		margin:10px auto 0;
		flex-shrink:0;
	}

	.arw-popup-header { grid-template-columns:1fr auto; padding:14px 18px 14px; }
	.arw-popup-overall { display:none; }
	.arw-popup-body    { padding:16px 18px 32px; }
}

@media (min-width:768px) and (max-width:1023px) {
	.arw-reviews-track { grid-template-columns:repeat(min(var(--arw-columns),2),1fr); }
}

/* Hide cards that are mobile-only on desktop */
@media (min-width:768px) {
	.arw-review-card-wrap.arw-mobile-only { display:none; }
}