/* ==========================================================
   KickUp — reviews.css
   Customer reviews box, sign-in modal and write-a-review modal.
   Uses the site's own colour tokens, so day / night mode just works.
   Loaded by the product pages only.
   ========================================================== */

/* ---------- the reviews section ---------- */
.reviews .block__head { align-items:center; }
.rv-bar {
  margin:-4px 0 16px; padding:11px 14px; border-radius:14px;
  background:var(--sk-chip); font-size:13.5px; color:var(--text-soft); line-height:1.5;
}
.rv-bar b { color:var(--color-black); font-weight:700; }
.rv-link {
  display:inline; padding:0; border:0; background:none; cursor:pointer;
  font:inherit; font-weight:700; color:var(--color-red); text-decoration:underline; text-underline-offset:3px;
}
.rv-link:hover { color:var(--color-red-deep); }

.rv-summary {
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:22px;
  margin-bottom:16px; padding:18px; border-radius:20px; background:var(--sk-card); border:1px solid var(--line);
}
.rv-sum__score { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:96px; }
.rv-sum__big { display:flex; align-items:baseline; gap:4px; }
.rv-sum__big b { font-family:var(--font-heading); font-style:italic; font-weight:900; font-size:52px; line-height:1; color:var(--color-black); }
.rv-sum__big span { font-size:14px; color:var(--mute); }
.rv-sum__score small { font-size:12.5px; color:var(--mute); }
.rv-sum__bars { display:flex; flex-direction:column; gap:6px; min-width:0; }
.rv-bar-row { display:grid; grid-template-columns:30px 1fr 24px; align-items:center; gap:9px; font-size:12px; color:var(--mute); }
.rv-bar-c { text-align:right; }
.rv-bar-track { height:7px; border-radius:99px; background:var(--sk-chip); overflow:hidden; }
.rv-bar-fill { display:block; height:100%; border-radius:99px; background:#F5A623; }

.rv-list { display:grid; grid-template-columns:1fr; gap:12px; }
.rv-empty {
  grid-column:1 / -1; padding:26px 18px; border-radius:20px; text-align:center;
  background:var(--sk-card); border:1px dashed var(--line); font-size:14px; line-height:1.6; color:var(--mute);
}

.rv-card {
  display:flex; flex-direction:column; gap:12px; padding:18px; border-radius:20px;
  background:var(--sk-card); border:1px solid var(--line); box-shadow:var(--sk-shadow-s);
}
.rv-card__head { display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.rv-card__av {
  flex:0 0 auto; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--color-red); color:#fff; font-weight:800; font-size:14px; letter-spacing:.5px;
}
.rv-card__who { display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.rv-card__who b { font-size:14.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rv-card__who span { font-size:12px; color:var(--mute); }
.stars .rv-on { color:#F5A623; }
.stars .rv-off { color:var(--line); }
.rv-card .stars svg { width:15px; height:15px; }
.rv-card__text { font-size:14.5px; line-height:1.65; color:var(--text-soft); white-space:pre-line; overflow-wrap:anywhere; }

@media (min-width:900px) {
  .rv-list { grid-template-columns:1fr 1fr; gap:16px; }
}

/* ---------- modals (re-use the shop's .modal shell) ---------- */
html.rv-lock { overflow:hidden; }
.rv-modal .modal__card {
  text-align:left; max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); overflow-y:auto; position:relative;
}
.rv-modal .modal__title { text-align:center; }
.rv-modal .modal__text { text-align:center; }
.rv-modal .form { grid-template-columns:1fr; margin-top:16px; }
.rv-x {
  position:absolute; top:12px; right:12px; width:36px; height:36px; border:0; border-radius:50%;
  background:var(--sk-chip); color:var(--color-black); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.rv-x:hover { background:var(--line); }
.rv-x svg { width:16px; height:16px; }

.rv-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; margin-top:16px; border-radius:99px; background:var(--sk-chip); }
.rv-tabs button {
  min-height:40px; border:0; border-radius:99px; background:transparent; cursor:pointer;
  font-family:var(--font-heading); font-style:italic; font-weight:800; font-size:17px; letter-spacing:.4px; text-transform:uppercase;
  color:var(--mute);
}
.rv-tabs button[aria-selected="true"] { background:var(--color-red); color:#fff; }

.rv-err { min-height:18px; margin-top:12px; font-size:13px; font-weight:700; color:var(--sk-err); text-align:center; line-height:1.45; }
.rv-status { min-height:18px; margin-top:8px; font-size:12.5px; color:var(--mute); text-align:center; }
.rv-switch { display:block; margin:14px auto 0; font-size:13px; }

.rv-modal .b.is-busy { opacity:.7; cursor:progress; }
.rv-modal .b.is-busy::after {
  content:""; width:16px; height:16px; margin-left:8px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:rv-spin .7s linear infinite;
}
@keyframes rv-spin { to { transform:rotate(360deg); } }

/* ---------- star picker ---------- */
.rv-fs { border:0; padding:0; margin:0; min-width:0; }
.rv-fs legend { padding:0; margin-bottom:7px; font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--mute); }
.rv-stars { display:flex; gap:4px; }
.rv-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.rv-star { cursor:pointer; padding:3px; color:var(--line); line-height:0; }
.rv-star svg { width:34px; height:34px; display:block; }
.rv-star.is-on { color:#F5A623; }
.rv-sr:focus-visible + .rv-star { outline:2px solid var(--color-red); outline-offset:2px; border-radius:8px; }
@media (hover:hover) {
  .rv-stars:hover .rv-star { color:#F5A623; }
  .rv-stars .rv-star:hover ~ .rv-star { color:var(--line); }
}

.rv-count { align-self:flex-end; font-size:12px; color:var(--mute); }

@media (prefers-reduced-motion:reduce) {
  .rv-modal .b.is-busy::after { animation:none; }
}

/* Google sign-in button icon */
.rv-g { width:20px; height:20px; flex:none; margin-right:10px; }
#authSubmit { display:inline-flex; align-items:center; justify-content:center; }