/* =============================================
   Fiverr client reviews — home section (#reviews) + /reviews page.
   Same card structure as corecodify.com's ClientReviews (avatar initial, name, flag + country,
   stars, date, text with "Read more", service/duration, summary with bars + sub-ratings,
   Fiverr badge and profile link), restyled for usamify's dark green/black theme.
   Motion: reveals come from js/motion.js; hovers here are pointer-only, off with reduced motion.
   ============================================= */

.reviews { position:relative; overflow-x:clip; }
.reviews::before { content:""; position:absolute; width:420px; height:420px; border-radius:50%; background:var(--color-green); filter:blur(150px); opacity:.11; left:-210px; top:12%; pointer-events:none; z-index:0; }
.reviews::after { content:""; position:absolute; width:360px; height:360px; border-radius:50%; background:var(--color-green); filter:blur(150px); opacity:.07; right:-180px; bottom:8%; pointer-events:none; z-index:0; }
.reviews .container { position:relative; z-index:1; }

.reviews__header { display:flex; align-items:flex-end; justify-content:space-between; gap:20px 32px; margin-bottom:40px; flex-wrap:wrap; }
.reviews__intro { min-width:0; flex:1 1 420px; }
.reviews__title { font-size:clamp(40px, 5vw, 64px); font-weight:600; line-height:1.15; letter-spacing:-.01em; margin-bottom:12px; }
.reviews__lead { font-size:18px; line-height:1.5; color:var(--color-gray-400); max-width:561px; }
.reviews__all { flex:0 0 auto; gap:10px; }
.reviews__all svg { transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.reviews__more { display:flex; justify-content:center; margin-top:40px; }
/* Home: "See all reviews" stays in the header on desktop; after the cards below ~768px */
.reviews__more--mobile { display:none; }
@media (max-width:767.98px) {
  .reviews__all--header { display:none !important; }
  .reviews__more--mobile { display:flex; margin-top:32px; }
  .reviews__more--mobile .reviews__all { width:100%; justify-content:center; }
}

/* ── Summary ── */
.review-summary {
  display:grid; gap:28px; margin-bottom:32px; padding:32px;
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-card);
  background:linear-gradient(160deg, rgb(var(--accent-rgb) / .10), rgb(var(--accent-rgb) / 0) 55%), rgba(255,255,255,.02);
}
.review-summary__rating { display:flex; align-items:center; gap:14px; margin-bottom:6px; flex-wrap:wrap; }
.review-summary__number { font-family:var(--font-display); font-size:64px; font-weight:600; line-height:.95; letter-spacing:-.03em; color:#fff; }
.review-summary__count { font-size:18px; font-weight:600; margin-bottom:14px; }
.review-verified { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; font-size:14px; color:var(--color-gray-400); }
.review-wordmark {
  display:inline-flex; align-items:center; gap:6px; padding:4px 11px 4px 4px; border-radius:999px;
  background:#fff; color:#0b0d0e; font-weight:700; font-size:13px; letter-spacing:.01em; line-height:1;
}
.review-wordmark svg { display:block; }
.review-wordmark__dot { color:#1dbf73; margin-left:-5px; }
.review-fiverr-link, .review-more {
  display:inline-flex; align-items:center; gap:6px; padding:0; border:0; background:none; cursor:pointer;
  font-family:var(--font-family); font-size:16px; font-weight:600; color:#6ed28b;
  transition:color .25s ease;
}
.review-fiverr-link:hover, .review-more:hover { color:#9cf2b5; }
.review-fiverr-link svg { transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.review-fiverr-link:focus-visible, .review-more:focus-visible, .reviews__all:focus-visible { outline:2px solid var(--color-green); outline-offset:3px; border-radius:6px; }

.review-bars, .review-subratings { list-style:none; margin:0; padding:0; }
.review-bars li, .review-subratings li { display:grid; align-items:center; gap:12px; margin-bottom:9px; font-size:14px; color:var(--color-gray-400); }
.review-bars li { grid-template-columns:62px minmax(0,1fr) 30px; }
.review-bar__count { text-align:right; font-variant-numeric:tabular-nums; color:#fff; }
.review-bar__track { display:block; height:8px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.review-bar__fill { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#f5b400,var(--color-gold)); transform-origin:left center; transition:transform 1.2s cubic-bezier(.16,1,.3,1) .25s; }
html.js-motion .review-summary:not(.rv-in) .review-bar__fill { transform:scaleX(0); }
.review-subratings { margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.07); }
.review-subratings li { grid-template-columns:minmax(0,1fr) auto; }
.review-subrating__value { display:inline-flex; align-items:center; gap:8px; font-weight:600; color:#fff; }

/* ── Stars (partial fill via clip-path, e.g. 4.7) ── */
.review-stars { display:inline-flex; gap:2px; line-height:0; flex:0 0 auto; }
.review-star { position:relative; width:16px; height:16px; flex:0 0 auto; }
.review-star svg { position:absolute; inset:0; width:100%; height:100%; display:block; }
.review-star__base { fill:rgba(255,255,255,.16); }
.review-star__fill { fill:var(--color-gold); }
.review-stars--lg .review-star { width:22px; height:22px; }

/* ── Cards ── */
.review-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; }
.review-card {
  position:relative; display:flex; flex-direction:column; gap:14px; min-width:0; padding:24px;
  border:1px solid #1a1a1a; border-radius:24px;
  background:linear-gradient(180deg,transparent,rgba(157,228,178,.09)), linear-gradient(90deg,rgba(72,72,72,.2),rgba(72,72,72,.2)), var(--color-bg);
  box-shadow:0 9px 9.5px rgba(0,0,0,.06), 0 35px 17.5px rgba(0,0,0,.05);
  transition:translate .45s cubic-bezier(.2,.8,.2,1), border-color .45s ease;
}
.review-card::after {
  content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 1px rgb(var(--accent-rgb) / .38), 0 22px 50px -18px rgb(var(--accent-rgb) / .38);
  opacity:0; transition:opacity .45s ease;
}
.review-card__head { display:flex; align-items:center; gap:12px; min-width:0; }
.review-avatar {
  flex:0 0 auto; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  color:#fff; font-weight:700; font-size:18px; line-height:1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 6px 16px rgba(0,0,0,.35);
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.review-identity { min-width:0; }
.review-name { font-size:16px; font-weight:600; line-height:1.25; color:#fff; margin:0; }
.review-country { margin-top:3px; font-size:14px; color:var(--color-gray-400); }
.review-flag { margin-right:6px; }
.review-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.review-score { display:inline-flex; align-items:center; gap:8px; }
.review-score__num { font-size:14px; font-weight:600; color:#fff; }
.review-date { font-size:14px; color:var(--color-gray-400); }
.review-copy { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.review-text { font-size:15px; line-height:1.6; color:var(--color-gray-300); overflow-wrap:anywhere; }
.review-text__ellipsis { display:none; }
.review-translation { font-size:14px; line-height:1.55; color:var(--color-gray-400); padding-left:12px; border-left:2px solid rgb(var(--accent-rgb) / .45); }
.review-more { display:none; font-size:15px; }
/* collapsed preview only when js/reviews.js is running (no-JS visitors get the full text) */
html.js-reviews .review-card.is-long .review-more { display:inline-flex; }
html.js-reviews .review-card.is-long:not(.is-open) .review-text__rest { display:none; }
html.js-reviews .review-card.is-long:not(.is-open) .review-text__ellipsis { display:inline; }
.review-foot { margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.07); display:flex; flex-wrap:wrap; gap:8px; }
.review-chip {
  display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:4px 12px; border-radius:999px;
  border:.6px solid rgba(255,255,255,.22); background:rgba(255,255,255,.03);
  font-size:13px; line-height:1.2; color:#e5e7eb;
}
.review-chip--time { color:var(--color-gray-400); }
.review-chip--time svg { color:#6ed28b; flex:0 0 auto; }

/* ── /reviews page ── */
.reviews-page { position:relative; min-height:100vh; background-color:#000; background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size:22px 22px; overflow-x:hidden; }
.reviews-page .reviews { padding-top:clamp(40px, 5vw, 64px); }
.reviews-page__title { font-size:clamp(36px, 4.4vw, 56px); font-weight:600; line-height:1.1; letter-spacing:-.02em; margin-bottom:12px; }
.reviews-page__note { margin-top:40px; text-align:center; color:var(--color-gray-400); font-size:15px; }
.reviews-page__note .review-fiverr-link { font-size:15px; }

@media (min-width:768px) {
  .review-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:900px) {
  .review-summary { grid-template-columns:minmax(240px,300px) minmax(0,1fr); gap:56px; align-items:start; padding:36px 40px; }
}
@media (min-width:1100px) {
  .review-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
}
@media (max-width:768px) {
  .reviews__title { font-size:clamp(32px, 8vw, 48px); }
  .reviews__lead { font-size:16px; }
  .reviews__header { margin-bottom:28px; }
  .review-summary { padding:24px 20px; border-radius:24px; }
  .review-summary__number { font-size:52px; }
  .review-card { padding:20px; border-radius:20px; }
}
@media (max-width:420px) {
  .reviews__all { width:100%; }
  .review-bars li { grid-template-columns:54px minmax(0,1fr) 26px; gap:10px; }
}
@media (max-width:370px) {
  .review-subratings li { grid-template-columns:minmax(0,1fr); gap:4px; }
}

/* ── Hover / focus (real pointers only) ── */
@media (hover:hover) and (pointer:fine) {
  .review-card:hover { translate:0 -6px; border-color:#22332a; }
  .review-card:hover::after { opacity:1; }
  .review-card:hover .review-avatar { transform:scale(1.08) rotate(-4deg); }
  .reviews__all:hover svg, .review-fiverr-link:hover svg { transform:translate(3px,-3px); }
}
.review-card:focus-within::after { opacity:1; }

@media (prefers-reduced-motion: reduce) {
  .review-card, .review-card::after, .review-avatar, .review-bar__fill, .reviews__all svg, .review-fiverr-link svg { transition:none !important; }
  .review-card:hover, .review-card:hover .review-avatar, .reviews__all:hover svg, .review-fiverr-link:hover svg { translate:none !important; transform:none !important; }
}

/* screen-reader-only text (also in upgrade.css, which the home page doesn't load) */
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }