/* ============================================================================
   Resume4Pro — Customer Reviews component styles
   ----------------------------------------------------------------------------
   Every selector is scoped under .r4p-rev, and every custom property lives on
   .r4p-rev itself (never :root), so this file is safe to include next to an
   existing project's stylesheet without leaking resets or overriding/being
   overridden by generically-named rules elsewhere on the page.

   Elements that toggle visibility (the active-filter bar, the "show more"
   button, the empty-state message, the write-a-review form) are hidden via
   a dedicated class + !important, not the bare `hidden` attribute — this
   guards against a host page's own generic CSS (e.g. `div { display: block }`)
   accidentally overriding the default hidden state.

   The component's original @import for Inter/Sora is not here. The product
   page links Inter itself and loads Sora globally, and an @import blocks
   rendering until it resolves, so importing them a second time would cost
   a round trip to buy nothing.
   ============================================================================ */

.r4p-rev,
.r4p-rev *,
.r4p-rev *::before,
.r4p-rev *::after { box-sizing: border-box; }

.r4p-rev h2, .r4p-rev h3, .r4p-rev p, .r4p-rev ul, .r4p-rev li,
.r4p-rev button, .r4p-rev input, .r4p-rev textarea, .r4p-rev form { margin: 0; padding: 0; }
.r4p-rev ul { list-style: none; }
.r4p-rev button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.r4p-rev input, .r4p-rev textarea { font: inherit; }
.r4p-rev svg { display: block; }
.r4p-rev a { color: inherit; }

.r4p-rev {
  /* ---- design tokens, scoped to this component only ---- */
  --r4p-rev-navy:    #0B1240;
  --r4p-rev-blue:    #2B4DFF;
  --r4p-rev-blue-2:  #007BFC;
  --r4p-rev-white:   #FFFFFF;
  --r4p-rev-surface: #F3F5FB;
  --r4p-rev-muted:   #8A93B8;
  --r4p-rev-border:  #E3E7F5;
  --r4p-rev-ink:     #1B2140;
  --r4p-rev-gold:    #f5a623;

  --r4p-rev-font-display: 'Sora', system-ui, sans-serif;
  --r4p-rev-font-body: 'Inter', system-ui, sans-serif;

  --r4p-rev-radius-sm: 10px;
  --r4p-rev-radius-md: 16px;
  --r4p-rev-radius-lg: 24px;
  --r4p-rev-radius-pill: 999px;
  --r4p-rev-shadow-card: 0 1px 2px rgba(11,18,64,0.04), 0 12px 32px -16px rgba(11,18,64,0.14);

  display: block;
  font-family: var(--r4p-rev-font-body);
  color: var(--r4p-rev-ink);
  background: var(--r4p-rev-surface);
  padding-block: clamp(3rem, 6vw, 5rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.r4p-rev-container { max-width: 1200px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2rem); }

.r4p-rev-head { max-width: 640px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.r4p-rev-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--r4p-rev-font-body); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--r4p-rev-blue);
}
.r4p-rev-eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--r4p-rev-blue-2); border-radius: 2px; display: inline-block; }
.r4p-rev-title {
  font-family: var(--r4p-rev-font-display); color: var(--r4p-rev-navy);
  font-size: clamp(1.75rem, 3vw, 2.5rem); margin-top: 0.6rem; line-height: 1.15; letter-spacing: -0.01em;
}

.r4p-rev-panel { max-width: 900px; margin-inline: auto; }

/* --- rating summary + clickable breakdown bars --- */
.r4p-rev-summary {
  display: flex; flex-direction: column; gap: 1.6rem;
  background: var(--r4p-rev-white); border: 1px solid var(--r4p-rev-border); border-radius: var(--r4p-rev-radius-lg);
  padding: 1.75rem clamp(1.25rem, 4vw, 2.25rem); box-shadow: var(--r4p-rev-shadow-card); margin-bottom: 1.5rem;
}
@media (min-width: 680px) { .r4p-rev-summary { flex-direction: row; align-items: center; gap: clamp(2rem, 5vw, 3rem); } }
.r4p-rev-score { flex-shrink: 0; text-align: center; }
@media (min-width: 680px) { .r4p-rev-score { text-align: left; padding-right: clamp(1.5rem, 4vw, 2.5rem); border-right: 1px solid var(--r4p-rev-border); } }
.r4p-rev-number { font-family: var(--r4p-rev-font-display); font-size: 3rem; font-weight: 800; color: var(--r4p-rev-navy); line-height: 1; }
.r4p-rev-stars-visual { position: relative; display: inline-block; width: 108px; height: 20px; margin-top: 0.5rem; }
.r4p-rev-stars-track, .r4p-rev-stars-fill { display: flex; gap: 2px; }
.r4p-rev-stars-track svg { width: 20px; height: 20px; color: var(--r4p-rev-border); flex-shrink: 0; }
.r4p-rev-stars-fill { position: absolute; top: 0; left: 0; width: 0; overflow: hidden; }
.r4p-rev-stars-fill svg { width: 20px; height: 20px; color: var(--r4p-rev-gold); flex-shrink: 0; }
.r4p-rev-count { color: var(--r4p-rev-muted); font-size: 0.85rem; margin-top: 0.6rem; }

.r4p-rev-bars { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; width: 100%; }
.r4p-rev-bar-row {
  width: 100%; display: grid; grid-template-columns: 34px 1fr 30px; align-items: center; gap: 0.75rem;
  padding: 0.35rem 0.5rem; border-radius: 8px; text-align: left; transition: background 0.15s ease;
}
.r4p-rev-bar-row:hover { background: var(--r4p-rev-surface); }
.r4p-rev-bar-row.is-active { background: rgba(43,77,255,0.09); }
.r4p-rev-bar-label { display: flex; align-items: center; gap: 0.2rem; font-size: 0.85rem; font-weight: 700; color: var(--r4p-rev-navy); }
.r4p-rev-bar-label svg { width: 13px; height: 13px; color: var(--r4p-rev-gold); }
.r4p-rev-bar-track { height: 8px; background: var(--r4p-rev-surface); border-radius: 999px; overflow: hidden; }
.r4p-rev-bar-row.is-active .r4p-rev-bar-track { background: var(--r4p-rev-border); }
.r4p-rev-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--r4p-rev-blue), var(--r4p-rev-blue-2)); border-radius: 999px; }
.r4p-rev-bar-count { font-size: 0.82rem; color: var(--r4p-rev-muted); font-weight: 600; text-align: right; }

/* --- active filter indicator: OFF by default, ALWAYS, regardless of host
   page CSS. Only .is-visible (added by JS, only after a bar is clicked)
   turns it on. --- */
.r4p-rev-filterbar {
  display: none !important;
  align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: rgba(43,77,255,0.08); border: 1px solid rgba(43,77,255,0.25); border-radius: var(--r4p-rev-radius-sm);
  padding: 0.7rem 1.1rem; margin-bottom: 1.25rem; font-size: 0.88rem; font-weight: 600; color: var(--r4p-rev-navy);
}
.r4p-rev-filterbar.is-visible { display: flex !important; }
.r4p-rev-filterbar-clear { color: var(--r4p-rev-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* --- unified review feed: comments-first, but nothing hidden --- */
.r4p-rev-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.25rem; }
.r4p-rev-card { background: var(--r4p-rev-white); border: 1px solid var(--r4p-rev-border); border-radius: var(--r4p-rev-radius-md); padding: 1.25rem 1.4rem; box-shadow: var(--r4p-rev-shadow-card); }
.r4p-rev-card-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.7rem; }
.r4p-rev-avatar { width: 40px; height: 40px; border-radius: 50%; color: var(--r4p-rev-white); font-weight: 700; font-size: 0.82rem; display: grid; place-items: center; flex-shrink: 0; }
.r4p-rev-who { display: flex; flex-direction: column; line-height: 1.3; }
.r4p-rev-name { font-weight: 700; font-size: 0.92rem; color: var(--r4p-rev-navy); }
.r4p-rev-date { font-size: 0.76rem; color: var(--r4p-rev-muted); }
.r4p-rev-stars { display: inline-flex; gap: 2px; margin-bottom: 0.55rem; }
.r4p-rev-stars svg { width: 15px; height: 15px; }
.r4p-rev-stars svg.is-on { color: var(--r4p-rev-gold); }
.r4p-rev-stars svg.is-off { color: var(--r4p-rev-border); }
.r4p-rev-comment { font-size: 0.9rem; color: var(--r4p-rev-ink); line-height: 1.65; }
.r4p-rev-comment--rating-only { color: var(--r4p-rev-muted); font-style: italic; }

.r4p-rev-empty {
  display: none !important;
  text-align: center; color: var(--r4p-rev-muted); font-size: 0.9rem; padding: 1.5rem 1rem;
}
.r4p-rev-empty.is-visible { display: block !important; }

/* --- buttons --- */
.r4p-rev-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-family: var(--r4p-rev-font-body); font-weight: 700; font-size: 0.95rem;
  padding: 0.85rem 1.6rem; border-radius: var(--r4p-rev-radius-pill);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.r4p-rev-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.r4p-rev-btn-primary { background: linear-gradient(135deg, var(--r4p-rev-blue), var(--r4p-rev-blue-2)); color: var(--r4p-rev-white); box-shadow: 0 10px 24px -8px rgba(43,77,255,0.55); }
.r4p-rev-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(43,77,255,0.6); }
.r4p-rev-btn-primary[disabled] { opacity: 0.6; transform: none; box-shadow: none; cursor: progress; }
.r4p-rev-btn-ghost { background: transparent; color: var(--r4p-rev-navy); border: 1.5px solid var(--r4p-rev-border); }
.r4p-rev-btn-ghost:hover { border-color: var(--r4p-rev-blue); color: var(--r4p-rev-blue); }
.r4p-rev-btn-block { width: 100%; }

/* "Show more reviews" starts OFF by default; it is turned on only when there is
   a next page to reveal. Same !important guard as the filter bar. Unlike the
   filter bar, the server can legitimately render it already visible, because it
   knows at render time whether the feed it just wrote is the whole set. */
.r4p-rev-btn-loadmore { display: none !important; }
.r4p-rev-btn-loadmore.is-visible { display: inline-flex !important; }

/* --- write a review (progressive disclosure) --- */
.r4p-rev-write-cta { text-align: center; margin-bottom: 1rem; }
.r4p-rev-form {
  display: none !important;
  background: var(--r4p-rev-white); border: 1px solid var(--r4p-rev-border); border-radius: var(--r4p-rev-radius-lg);
  padding: 1.9rem; box-shadow: var(--r4p-rev-shadow-card); margin-top: 1rem;
}
.r4p-rev-form.is-open { display: block !important; }
.r4p-rev-form-title { font-family: var(--r4p-rev-font-display); color: var(--r4p-rev-navy); font-size: 1.05rem; margin-bottom: 1rem; }
.r4p-rev-starpicker { display: flex; gap: 0.35rem; margin-bottom: 1.15rem; }
.r4p-rev-starpicker button { width: 32px; height: 32px; display: grid; place-items: center; }
.r4p-rev-starpicker svg { width: 24px; height: 24px; color: var(--r4p-rev-border); transition: color 0.15s ease, transform 0.15s ease; }
.r4p-rev-starpicker button.is-active svg, .r4p-rev-starpicker button:hover svg { color: var(--r4p-rev-gold); transform: scale(1.08); }
.r4p-rev-textarea {
  display: block; width: 100%; min-height: 110px; border: 1px solid var(--r4p-rev-border); border-radius: var(--r4p-rev-radius-sm);
  padding: 0.85rem 1rem; resize: vertical; font-size: 0.93rem; color: var(--r4p-rev-ink);
}
.r4p-rev-textarea::placeholder { color: var(--r4p-rev-muted); }
.r4p-rev-form .r4p-rev-btn { margin-top: 1.1rem; }
.r4p-rev-form-status { margin-top: 0.75rem; font-size: 0.85rem; font-weight: 600; color: var(--r4p-rev-blue); min-height: 1.2em; }

/* --- signed-out prompt, shown where the form would be --- */
.r4p-rev-gate {
  background: var(--r4p-rev-white); border: 1px dashed var(--r4p-rev-border); border-radius: var(--r4p-rev-radius-lg);
  padding: 1.9rem; text-align: center; margin-top: 1rem;
}
.r4p-rev-gate h3 { font-family: var(--r4p-rev-font-display); color: var(--r4p-rev-navy); font-size: 1.05rem; margin-bottom: 0.5rem; }
.r4p-rev-gate p { color: var(--r4p-rev-muted); font-size: 0.92rem; margin-bottom: 1.2rem; }

.r4p-rev-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.r4p-rev a:focus-visible,
.r4p-rev button:focus-visible,
.r4p-rev input:focus-visible,
.r4p-rev textarea:focus-visible {
  outline: 2.5px solid var(--r4p-rev-blue-2); outline-offset: 3px; border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .r4p-rev * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}