/* ==========================================================================
   widgets-real.css — the REAL Cloutly widget DNA, ported by hand from the product.

   Source of truth (read at cloutly-frontend origin/master, 2026-09-04):
     src/pages/Widget/v2/kit/kit.css        every rule below is transcribed from it
     src/pages/Widget/v2/kit/index.js       Shell, StarRow, Avatar, SourceMark, AggregateHeader,
                                            BrandingPill, ReviewCard (the DOM these rules dress)
     src/pages/Widget/v2/kit/tokens.js      accent resolution, contrastOn, avatar gradients
     src/pages/Widget/v2/renderers/CarouselV2.js, Masonry.js, Badge.js, Toast.js
     public/add-widget-v2.js                floating geometry: fixed, bottom 16px, side 16px

   Deliberate deviations, all recorded in docs/pipeline/review-widgets/port-notes.md:
   - the renderers are React; this is their rendered markup written out by hand as static HTML.
   - kit.css sizes the widget off the iframe viewport (@media). Embedded here inline, the widget's
     box is the panel it sits in, so the same three breakpoints are container queries instead.
   - buttons that would do something in the product (carousel arrows, the badge pill, the toast
     close) are spans here: nothing on this page is clickable, so the selectors drop `button.`.
   Everything else — class names, px, colours, radii, shadows, wording — is the product's.
   ========================================================================== */

/* ---------- shell: theme + accent scope (kit.css .cwv2) ---------- */
.cwv2 {
  --cw-star: #ffb021;
  --cw-ink: #0b0e1a;
  --cw-body: #4a5065;
  --cw-muted: #8a90a5;
  --cw-line: #e7e9f2;
  --cw-card-bg: #ffffff;
  --cw-surface: #ffffff;
  --cw-chip-bg: #ffffff;
  --cw-radius: 16px;
  --cw-shadow-sm: 0 1px 2px rgba(11, 14, 26, .05);
  --cw-shadow-md: 0 6px 24px -8px rgba(11, 14, 26, .12);
  --cw-shadow-lg: 0 18px 50px -12px rgba(11, 14, 26, .22);
  --cw-font: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cw-brand-soft: color-mix(in srgb, var(--cw-brand, #003dff) 10%, var(--cw-card-bg));
  --cw-brand-edge: color-mix(in srgb, var(--cw-on-brand, #fff) 16%, transparent);
  --cw-on-brand-faint: color-mix(in srgb, var(--cw-on-brand, #fff) 38%, transparent);
  font-family: var(--cw-font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--cw-ink);
  background: var(--cw-surface);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.cwv2 *, .cwv2 *::before, .cwv2 *::after { box-sizing: inherit; margin: 0; padding: 0; }
.cwv2 [hidden] { display: none !important; }
.cwv2[data-cw-theme="dark"] {
  --cw-ink: #e9ebf5;
  --cw-body: #c6cbe0;
  --cw-muted: #9aa1bc;
  --cw-line: #252b45;
  --cw-card-bg: #151a2e;
  --cw-surface: #0d1020;
  --cw-chip-bg: #151a2e;
  --cw-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --cw-shadow-md: 0 6px 24px -8px rgba(0, 0, 0, .5);
  --cw-shadow-lg: 0 18px 50px -12px rgba(0, 0, 0, .6);
}
.cwv2.cw2-page { padding: 40px 32px; }
.cwv2.cw2-page--tight { padding: 24px 0; }
/* the Shell passes background:transparent;padding:8 for badge and toast (Badge.js, Toast.js) */
.cwv2.cw2-float-host { background: transparent; padding: 8px; }

/* ---------- review card ---------- */
.cw2-card {
  background: var(--cw-card-bg);
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-radius);
  padding: 22px;
  box-shadow: var(--cw-shadow-sm);
}
.cw2-card--feature {
  background: var(--cw-brand, #003dff);
  border-color: var(--cw-brand, #003dff);
  color: var(--cw-on-brand, #fff);
}
.cw2-card--feature .cw2-text { color: var(--cw-on-brand, #fff); opacity: .95; font-size: 16px; font-weight: 500; }
.cw2-card--feature .cw2-name { color: var(--cw-on-brand, #fff); }
.cw2-card--feature .cw2-meta { color: var(--cw-on-brand, #fff); opacity: .65; }
.cw2-head { display: flex; align-items: center; gap: 12px; }
.cw2-name { font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; display: flex; align-items: center; gap: 5px; min-width: 0; }
.cw2-meta { font-size: 12.5px; color: var(--cw-muted); }
.cw2-text { font-size: 14.5px; color: var(--cw-body); line-height: 1.6; }
.cw2-text--clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
/* the compact variant, which the renderers switch to when the box the customer gives them is short */
.cwv2--compact .cw2-card { padding: 14px; }
.cwv2--compact .cw2-text--clamp { -webkit-line-clamp: 3; }
.cwv2--compact .cw2-navrow { margin-top: 8px; gap: 12px; }
.cwv2--compact .cw2-arrow { width: 30px; height: 30px; }
.cwv2--compact .cw2-brand { margin-top: 4px; }
.cwv2--compact .cw2-stars--row { margin: 6px 0 5px; }

/* ---------- avatar: initials on a deterministic gradient (tokens.js gradientIndex) ---------- */
.cw2-ava {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .02em; overflow: hidden;
}
.cw2-ava--sm { width: 34px; height: 34px; font-size: 13px; }
.cw2-ava--g1 { background: linear-gradient(135deg, #6a5ae0, #9087e5); }
.cw2-ava--g2 { background: linear-gradient(135deg, #ff7a59, #ffb199); }
.cw2-ava--g3 { background: linear-gradient(135deg, #00b67a, #5ad8a6); }
.cw2-ava--g4 { background: linear-gradient(135deg, #003dff, #5c7cff); }
.cw2-ava--g5 { background: linear-gradient(135deg, #ff416a, #ff8fa8); }
.cw2-ava--g6 { background: linear-gradient(135deg, #12b5cb, #67d5e4); }
.cw2-ava--g7 { background: linear-gradient(135deg, #b26af7, #d8b4fe); }

/* ---------- stars: five outlines with a percentage-width overlay of filled ones ---------- */
.cw2-stars { position: relative; display: inline-flex; line-height: 0; vertical-align: middle; }
.cw2-stars--row { margin: 10px 0 8px; }
.cw2-stars svg { width: 16px; height: 16px; flex: none; }
.cw2-stars--sm svg { width: 13px; height: 13px; }
.cw2-stars .cw2-stars-fill { position: absolute; inset: 0; display: inline-flex; overflow: hidden; }

/* ---------- source mark ---------- */
.cw2-src { margin-left: auto; flex: none; width: 22px; height: 22px; }
.cw2-src--sm { width: 15px; height: 15px; margin-left: 0; }

/* ---------- aggregate header ---------- */
.cw2-agg { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 30px; flex-wrap: wrap; }
.cw2-agg-big { font-size: 40px; font-weight: 800; letter-spacing: -.04em; }
.cw2-agg-col { display: flex; flex-direction: column; gap: 4px; }
.cw2-agg-cnt { font-size: 13px; color: var(--cw-muted); font-weight: 600; }
.cw2-agg-divider { width: 1px; height: 40px; background: var(--cw-line); }
.cw2-srcchips { display: flex; gap: 8px; flex-wrap: wrap; }
.cw2-srcchips .cw2-sc {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--cw-line); background: var(--cw-chip-bg); border-radius: 99px; padding: 6px 12px;
}
.cw2-srcchips .cw2-sc svg { width: 15px; height: 15px; }
.cw2-srcchips .cw2-sc small { color: var(--cw-muted); font-weight: 600; }

/* ---------- branding pill ("Collect reviews with Cloutly"; Growth removes it) ---------- */
.cw2-brand { display: flex; justify-content: center; margin-top: 26px; }
.cw2-brand span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--cw-muted);
  padding: 6px 12px; border-radius: 99px;
}

/* ---------- masonry ---------- */
.cw2-masonry { columns: 3; column-gap: 16px; max-width: 960px; margin: 0 auto; }
.cw2-masonry > * { break-inside: avoid; margin-bottom: 16px; }

/* ---------- carousel ---------- */
.cw2-carousel { max-width: 980px; margin: 0 auto; position: relative; }
.cw2-viewport { overflow: hidden; padding: 8px 4px; margin: 0 -4px; }
.cw2-slides { display: flex; gap: 16px; }
.cw2-slide { flex: none; width: calc((100% - 32px) / 3); }
.cw2-slide .cw2-card { height: 100%; display: flex; flex-direction: column; }
.cw2-navrow { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; }
.cw2-arrow {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--cw-line); background: var(--cw-chip-bg);
  display: grid; place-items: center; box-shadow: var(--cw-shadow-sm); color: var(--cw-ink);
}
.cw2-arrow svg { width: 15px; height: 15px; fill: currentColor; }
.cw2-dots { display: flex; gap: 6px; }
.cw2-dots i { width: 6px; height: 6px; border-radius: 99px; background: #d4d8e6; }
.cwv2[data-cw-theme="dark"] .cw2-dots i { background: #333b5c; }
.cw2-dots i.cw2-act { width: 20px; background: var(--cw-brand, #003dff); }

/* ---------- avatars: the one-line trust strip that goes under a CTA button ---------- */
.cw2-avatars { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.cw2-stack { display: flex; }
.cw2-stack .cw2-ava { width: 44px; height: 44px; border: 3px solid var(--cw-card-bg); margin-left: -12px; font-size: 14px; box-shadow: var(--cw-shadow-sm); }
.cw2-stack .cw2-ava:first-child { margin-left: 0; }
.cw2-stack .cw2-plus {
  width: 44px; height: 44px; border-radius: 50%; margin-left: -12px;
  border: 3px solid var(--cw-card-bg); background: var(--cw-ink); color: var(--cw-card-bg);
  display: grid; place-items: center; font-size: 11.5px; font-weight: 800;
}
.cw2-avatars .cw2-atxt { display: flex; flex-direction: column; gap: 3px; }
.cw2-avatars .cw2-l1 { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; }
.cw2-avatars .cw2-l2 { font-size: 13px; color: var(--cw-muted); font-weight: 500; }

/* ---------- badge: the floating corner pill ---------- */
.cw2-badge {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--cw-card-bg); border: 1px solid var(--cw-line); border-radius: 99px;
  padding: 8px 16px 8px 10px; box-shadow: var(--cw-shadow-md); max-height: 58px;
}
/* an explicitly chosen widget accent paints the pill itself; unset keeps the theme surface */
.cw2-badge--accent { background: var(--cw-brand, #003dff); border-color: var(--cw-brand-edge); color: var(--cw-on-brand, #fff); }
.cw2-badge .cw2-bsrcs { display: flex; }
.cw2-badge .cw2-bsrcs span {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--cw-card-bg); border: 1.5px solid var(--cw-line);
  display: grid; place-items: center; margin-left: -8px;
}
.cw2-badge .cw2-bsrcs span:first-child { margin-left: 0; }
.cw2-badge .cw2-bsrcs svg { width: 14px; height: 14px; }
.cw2-badge .cw2-btxt { text-align: left; line-height: 1.25; }
.cw2-badge .cw2-bnum { font-weight: 800; font-size: 15px; letter-spacing: -.02em; }
.cw2-badge .cw2-brow { display: flex; align-items: center; gap: 6px; }
.cw2-badge .cw2-bsub { font-size: 11.5px; color: var(--cw-muted); font-weight: 600; display: block; }
.cw2-badge--accent .cw2-bsub { color: var(--cw-on-brand, #fff); opacity: .78; }
/* the empty stars read --cw-line inline, so the accent pill rescopes it to an on-brand tint */
.cw2-badge--accent .cw2-stars { --cw-line: var(--cw-on-brand-faint); }

/* ---------- toast ---------- */
.cw2-toast {
  position: relative; width: 100%; max-width: 384px;
  background: var(--cw-card-bg); border: 1px solid var(--cw-line); border-radius: 16px;
  box-shadow: var(--cw-shadow-lg); padding: 14px 16px 18px;
  display: flex; gap: 12px; align-items: flex-start;
}
.cw2-toast .cw2-tbody { flex: 1; min-width: 0; }
.cw2-toast .cw2-tline { font-size: 13.5px; line-height: 1.45; }
.cw2-toast .cw2-tline b { font-weight: 700; }
.cw2-toast .cw2-tline svg { width: 13px; height: 13px; vertical-align: -2px; margin-left: 2px; }
.cw2-toast .cw2-tsub { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.cw2-toast .cw2-tsub .cw2-meta { font-size: 11.5px; }
.cw2-toast .cw2-tclose {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; color: var(--cw-muted); font-size: 14px; line-height: 1;
}
.cw2-toast .cw2-tprog {
  position: absolute; left: 16px; right: 16px; bottom: 8px; height: 2.5px;
  border-radius: 2px; background: var(--cw-line); overflow: hidden;
}
.cw2-toast .cw2-tprog i { display: block; height: 100%; width: 100%; background: var(--cw-brand, #003dff); transform-origin: left; }

/* the product's entrance animations, with a still state for captures and reduced motion */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-motion) .cw2-toast { animation: cw2toastin .5s cubic-bezier(.21, 1.02, .73, 1); }
  html:not(.no-motion) .cw2-toast .cw2-tprog i { animation: cw2tprog linear both; }
}
@keyframes cw2toastin { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes cw2tprog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- the three kit.css breakpoints, keyed to the widget's own box ---------- */
/* kit.css does this off the iframe viewport (@media 900 / 600); inline, the box is the container. */
@container widget (max-width: 900px) {
  .cw2-masonry { columns: 2; }
  .cw2-slide { width: calc((100% - 16px) / 2); }
}
@container widget (max-width: 600px) {
  .cw2-masonry { columns: 1; }
  .cw2-slide { width: 100%; }
  .cwv2.cw2-page { padding: 24px 14px; }
}