/* reviews.css — star-color overrides for OUR rendered review cards + the
 * per-card expand modal + the "See All" reviews overlay.
 * The card markup reuses the real svelte-j9szs8 / svelte-1ih6d3u classes, so
 * the original bundle CSS styles the card body / developer response / modal
 * chrome. This file only fixes the star fill semantics and adds the overlay
 * positioning the dead (JS-stripped) Svelte runtime no longer provides. */

/* ---- review stars: colors are set via inline fill on each <svg> in
 * reviews-module.js (filled = orange, empty = light grey, partial = orange
 * clipped over grey). Inline beats the bundle's `.star svg { fill }` reliably.
 * The .stars / .star / .partial-star LAYOUT still comes from the bundle CSS. */

/* carousel cards: pointer + hover like the real ones */
.ps-review.container.svelte-j9szs8 { cursor: pointer; }

/* ---- per-card expand modal (we use a plain <dialog>, not showModal) ---- */
dialog.ps-modal-open {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .45);
  border: 0;
  padding: 0;
  margin: 0;
  z-index: 100000;
  animation: ps-fade .2s ease;
}
dialog.ps-modal-open .content-modal-container.svelte-1ih6d3u {
  max-width: 691px;
  width: calc(100vw - 50px);
  animation: ps-pop .22s cubic-bezier(.2, .8, .2, 1);
}
@keyframes ps-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ps-pop { from { opacity: 0; transform: scale(.97) translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  dialog.ps-modal-open, dialog.ps-modal-open .content-modal-container.svelte-1ih6d3u { animation: none; }
}

/* ---- "See All" reviews overlay ---- */
.ps-seeall-overlay {
  position: fixed; inset: 0; z-index: 100001;
  background: rgba(0, 0, 0, .5);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .25s ease;
  padding: 40px 20px;
}
.ps-seeall-overlay.ps-open { opacity: 1; }
.ps-seeall-sheet {
  background: var(--pageBG, #fff);
  color: var(--systemPrimary, #000);
  border-radius: 14px;
  width: 100%; max-width: 980px;
  max-height: 90vh; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  transform: translateY(16px) scale(.99);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.ps-seeall-overlay.ps-open .ps-seeall-sheet { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ps-seeall-overlay, .ps-seeall-sheet { transition: none; }
  .ps-seeall-sheet { transform: none; }
}
.ps-seeall-header {
  position: sticky; top: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--systemGray6, rgba(0, 0, 0, .08));
  background: var(--pageBG, #fff);
  z-index: 2;
}
.ps-seeall-header h2 {
  font: var(--title-2-emphasized, 600 22px/1.2 "SF Pro", -apple-system, sans-serif);
  margin: 0; flex: 0 0 auto;
}
.ps-seeall-summary {
  display: flex; align-items: center; gap: 8px; flex: 1 1 auto;
  color: var(--systemSecondary, #6b6b6b);
  font: var(--body, 400 15px/1.4 "SF Pro", sans-serif);
}
.ps-seeall-avg { font-weight: 700; font-size: 17px; color: var(--systemPrimary, #000); }
.ps-seeall-count { font-size: 13px; }
.ps-seeall-close {
  flex: 0 0 auto; width: 30px; height: 30px;
  border: 0; background: transparent; cursor: pointer;
  fill: var(--systemSecondary, #6b6b6b); padding: 5px; border-radius: 8px;
}
.ps-seeall-close:hover { background: var(--systemGray6, rgba(0, 0, 0, .06)); }
.ps-seeall-list {
  list-style: none; margin: 0; padding: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.ps-seeall-item {
  padding: 22px 28px;
  border-bottom: 1px solid var(--systemGray6, rgba(0, 0, 0, .08));
}
.ps-seeall-item:last-child { border-bottom: 0; }
/* in the see-all list, cards are full-width, not clickable */
.ps-seeall-item .ps-review.container.svelte-j9szs8 { cursor: default; }
.ps-seeall-item .truncate-wrapper.svelte-1b6lxg0 { -webkit-line-clamp: unset !important; max-height: none !important; }
.ps-seeall-item .content.svelte-1b6lxg0 { -webkit-line-clamp: unset !important; }