/* ==========================================================================
   reviews.css — the /reviews page, the review cards, and the floating badge.
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------------- */
.rv-hero {
  text-align: center;
  padding-block: clamp(3.5rem, 7vw, 5.5rem) var(--space-8);
  background:
    radial-gradient(50% 60% at 50% 0%, rgba(91, 52, 240, 0.10), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, var(--color-bg-alt) 100%);
}
.rv-hero h1 { font-size: var(--fs-hero); margin-top: var(--space-3); }
.rv-hero .lead { margin-top: var(--space-5); }

/* The aggregate score. Only rendered when there ARE reviews. */
.rv-agg {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.rv-agg__score { display: flex; align-items: baseline; gap: 4px; }
.rv-agg__score strong { font-size: 3rem; font-weight: var(--fw-bold); color: var(--color-primary); line-height: 1; }
.rv-agg__score span   { color: var(--color-text-muted); font-size: var(--fs-small); }
.rv-agg__meta p { margin: 4px 0 0; font-size: var(--fs-small); color: var(--color-text-muted); }

/* ---- Stars ---------------------------------------------------------------- */
.rv-stars { display: inline-flex; gap: 2px; color: #d8dbe6; font-size: 1rem; line-height: 1; }
.rv-stars span.is-on { color: #f5a623; }
.rv-stars--lg { font-size: 1.35rem; }

/* ---- Filter chips --------------------------------------------------------- */
.rv-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.rv-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rv-chip span {
  font-size: 0.72rem;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}
.rv-chip:hover { border-color: var(--color-accent); color: var(--color-primary); }
.rv-chip.is-on { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.rv-chip.is-on span { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* ---- The grid — masonry-ish without JS ------------------------------------ */
.rv-grid {
  columns: 3 320px;
  column-gap: var(--space-5);
}
.rv-card {
  break-inside: avoid;            /* a card split across two columns is unreadable */
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.rv-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.rv-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-3); }
.rv-card__who { flex: 1; min-width: 0; }
.rv-card__who strong { display: block; font-size: 0.95rem; line-height: 1.3; }
.rv-card__who span   { display: block; font-size: 0.78rem; color: var(--color-text-muted); }

/* ---- Avatar ----------------------------------------------------------------
   A real photo if the reviewer gave us one, otherwise initials on a deterministic
   colour — the same person always gets the same colour, because an avatar that
   changed hue on every load would look exactly like what it would be: generated.
   We never synthesise a human face. */
.rv-avatar {
  width: 48px; height: 48px; flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-bg-alt);
}
.rv-avatar--initials {
  display: grid; place-items: center;
  font-weight: var(--fw-bold);
  font-size: 0.95rem;
  color: #fff;
  background: linear-gradient(135deg,
    hsl(var(--rv-hue, 250) 62% 52%),
    hsl(calc(var(--rv-hue, 250) + 28) 66% 42%));
  letter-spacing: 0.02em;
}

/* ---- Verified badge --------------------------------------------------------
   Rendered only when the reviewer matched a real customer in the billing system.
   It is a factual claim, so it must look like one — not like decoration. */
.rv-verified {
  display: inline-flex; align-items: center; gap: 4px;
  flex: none;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: #e6f6ee;
  color: #1f7a4d;
  font-size: 0.68rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.rv-verified svg { width: 11px; height: 11px; }

.rv-card__title { font-size: 1.05rem; margin: var(--space-3) 0 6px; }
.rv-card__body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-text);
  max-width: none;          /* the global p{max-width:65ch} would narrow it oddly */
}
.rv-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 0.76rem;
  color: var(--color-text-muted);
}
.rv-tag {
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.rv-tag:hover { background: var(--color-primary); color: #fff; }

@media (max-width: 700px) { .rv-grid { columns: 1; } }

/* ---- Empty state ----------------------------------------------------------- */
.rv-empty {
  max-width: 640px; margin: 0 auto; text-align: center;
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--color-border);
  background: var(--color-surface);
}
.rv-empty p { margin: var(--space-3) auto 0; color: var(--color-text-muted); }
.rv-empty__cta { display: flex; gap: 10px; justify-content: center; margin-top: var(--space-6); flex-wrap: wrap; }

/* ---- Submission form --------------------------------------------------------
   The layout rules (.rv-form-wrap, .rv-form, .rv-form__row) live in the "Review
   form" block at the foot of this file, together with the field styling. They
   used to be duplicated here; two definitions of the same selector is how a later
   change gets silently overridden. One home each. */

/* Star rating input. Rendered 5→1 in the DOM so the CSS sibling selector can
   light up the star hovered AND everything before it, which is the direction
   people expect. */
.rv-rate { display: inline-flex; flex-direction: row-reverse; gap: 4px; font-size: 1.9rem; line-height: 1; }
.rv-rate input { position: absolute; opacity: 0; width: 0; height: 0; }
.rv-rate label { color: #d8dbe6; cursor: pointer; transition: color 120ms ease, transform 120ms ease; }
.rv-rate label:hover,
.rv-rate label:hover ~ label,
.rv-rate input:checked ~ label { color: #f5a623; }
.rv-rate label:hover { transform: scale(1.12); }
.rv-rate input:focus-visible + label { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }

/* ==========================================================================
   The floating badge.
   Slides in bottom-left, shows one real review, slides out, rotates.
   Desktop only, dismissible, and it never renders if there are no reviews.
   ========================================================================== */
.rv-badge {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 900;                 /* under the consent banner, which must win */
  width: 320px;
  max-width: calc(100vw - 48px);
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--color-border);
  box-shadow: 0 18px 48px rgba(26, 15, 112, 0.18);

  /* Off-screen and inert until shown. visibility (not just opacity) so it cannot
     be tabbed into while hidden. */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-24px) translateY(8px) scale(0.97);
  transition:
    opacity 460ms var(--ease-out),
    transform 460ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 460ms;
}
.rv-badge.is-in {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* Motion is a preference. Fade only. */
.rv-badge--reduce { transition: opacity 300ms ease, visibility 0s linear 300ms; transform: none; }
.rv-badge--reduce.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv-badge { transition: opacity 300ms ease, visibility 0s linear 300ms; transform: none; }
  .rv-badge.is-in { transform: none; }
}

.rv-badge__close {
  position: absolute; top: 8px; right: 10px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 0; background: transparent;
  color: var(--color-text-muted);
  font-size: 1.15rem; line-height: 1;
  cursor: pointer; border-radius: 6px;
}
.rv-badge__close:hover { background: var(--color-bg-alt); color: var(--color-text); }

.rv-badge__head { display: flex; align-items: center; gap: 10px; padding-right: 20px; }
.rv-badge__avatar {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%; object-fit: cover;
}
.rv-badge__avatar--initials {
  display: grid; place-items: center;
  font-size: 0.82rem; font-weight: var(--fw-bold); color: #fff;
  background: linear-gradient(135deg,
    hsl(var(--rv-hue, 250) 62% 52%),
    hsl(calc(var(--rv-hue, 250) + 28) 66% 42%));
}
.rv-badge__who { flex: 1; min-width: 0; }
.rv-badge__who strong { display: block; font-size: 0.88rem; line-height: 1.25; }
.rv-badge__who span   { display: block; font-size: 0.72rem; color: var(--color-text-muted); }

.rv-badge__verified {
  flex: none;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #e6f6ee;
  color: #1f7a4d;
}
.rv-badge__verified svg { width: 11px; height: 11px; }

.rv-badge__stars { margin-top: 8px; font-size: 0.85rem; }
.rv-badge__quote {
  margin: 8px 0 10px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--color-text);
  max-width: none;
}
.rv-badge__link {
  font-size: 0.76rem;
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  text-decoration: none;
}
.rv-badge__link:hover { color: var(--color-primary); }

/* Never on mobile: a floating card over a 360px screen covers the content the
   visitor actually came for. The JS also guards this — belt and braces, because a
   CSS-only guard still fetches the feed. */
@media (max-width: 899px) { .rv-badge { display: none !important; } }

/* ==========================================================================
   Review form.

   The form previously used .afield / .arow / .hint / .dash-sub — which live in
   moyamoda/admin.css and are NOT loaded on any public page. So every input on
   /reviews rendered with browser defaults: no border radius, no padding, no
   focus ring, wrong font. Namespaced properly here.
   ========================================================================== */

.rv-form-wrap {
  max-width: 720px;
  /* Vertical margin so the card is never flush against the band edges / the reviews
     grid above it, and horizontal margin so it never touches the viewport on small
     screens even inside a narrow container. */
  margin: clamp(1.5rem, 4vw, var(--space-8)) auto;
  padding: clamp(1.5rem, 5vw, var(--space-8));
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 640px) {
  /* Give the card a little air from the screen edges on phones. */
  .rv-form-wrap { margin-inline: var(--space-2); }
}
.rv-form-wrap > h2 { font-size: var(--fs-h3); }
.rv-form-wrap > p  { color: var(--color-text-muted); font-size: var(--fs-small); margin-top: var(--space-2); }

.rv-form { margin-top: var(--space-6); }

.rv-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 640px) { .rv-form__row { grid-template-columns: 1fr; } }

.rv-field { margin-bottom: var(--space-4); }
.rv-field label {
  display: block;
  font-weight: var(--fw-semibold);
  font-size: 0.88rem;
  margin-bottom: 6px;
  color: var(--color-text);
}

.rv-field input[type="text"],
.rv-field input[type="email"],
.rv-field select,
.rv-field textarea {
  width: 100%;
  padding: 0.75rem 0.95rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.rv-field textarea { resize: vertical; min-height: 130px; line-height: 1.6; }

/* A select needs its own arrow — appearance:none strips the native one. */
.rv-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2398a1b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px;
  padding-right: 2.4rem;
}

.rv-field input:focus,
.rv-field select:focus,
.rv-field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(91, 52, 240, 0.15);
}
.rv-field input::placeholder,
.rv-field textarea::placeholder { color: #a9b0c4; }

.rv-hint {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 5px;
  max-width: none;      /* the global p{max-width:65ch} narrows it oddly in a grid cell */
}
.rv-sub { color: var(--color-text-muted); font-size: var(--fs-small); }

.rv-form button[type="submit"] { margin-top: var(--space-2); }

/* Status line under the submit button. */
.rv-form .form-status {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  min-height: 1.2em;
}
.rv-form .form-status.is-error   { color: #d64545; }
.rv-form .form-status.is-success { color: #1f7a4d; }

/* The star input sits in its own field; give it room to breathe. */
.rv-field .rv-rate { margin-top: 2px; }

/* Comfortable touch targets on every control (>=44px) so the form is usable on a
   phone, and consistent field heights so rows line up on tablet/desktop. */
.rv-field input[type="text"],
.rv-field input[type="email"],
.rv-field select { min-height: 46px; }

/* ---- Reviewer photo (optional) ---- */
.rv-optional {
  font-weight: var(--fw-regular); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-text-muted); margin-left: 6px;
}
.rv-avatar-pick { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.rv-avatar-preview {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--color-border); flex: 0 0 auto;
}
.rv-avatar-field input[type="file"] {
  flex: 1 1 220px; min-width: 0; font-size: 0.9rem; color: var(--color-text-muted);
}
.rv-avatar-field input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 0.55rem 1rem; border: 1px solid var(--color-border);
  border-radius: var(--radius-pill); background: var(--color-bg-alt); color: var(--color-text);
  font: inherit; font-size: 0.85rem; font-weight: var(--fw-semibold); cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.rv-avatar-field input[type="file"]::file-selector-button:hover {
  border-color: var(--color-accent); background: #fff;
}
.rv-consent {
  display: flex; align-items: flex-start; gap: 9px; margin-top: var(--space-3);
  font-size: 0.82rem; color: var(--color-text-muted); line-height: 1.5; cursor: pointer;
}
.rv-consent input { margin-top: 2px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--color-accent); }

/* Tablet: keep the two-up rows but tighten the wrap so it never feels cramped. */
@media (min-width: 641px) and (max-width: 900px) {
  .rv-form__row { gap: var(--space-4); }
}