/**
 * Customer reviews — stars, rating summary, review cards, the write-a-review form, the product-page
 * section and the Reviews page. Markup: inc/reviews/render.php, template-reviews.php,
 * woocommerce/single-product/dxs-details.php.
 *
 * Text is dark on purpose (navy headings, --gray-800 body). Buttons/links set background, colour and
 * border together on :hover (the global button:hover default is a dark fill with white text).
 */

.dxs-rv,
.dxs-rvp,
.dxs-rv-cta,
.dxs-rv-write {
  --rv-star: #F59E0B;
  --rv-star-off: var(--gray-300, #CBD5E1);
  --rv-line: var(--pdp-border, var(--gray-200, #E2E8F0));
  --rv-surface: var(--pdp-surface, #fff);
  --rv-tint: color-mix(in srgb, var(--color-blue, #2F6FED) 8%, var(--rv-surface));
  --rv-star-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   1. STARS (display) — grey row with an amber overlay clipped to the rating
   ========================================================================== */
.dxs-stars {
  --rv: 0;
  --sz: 18px;
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: calc(var(--sz) * 5);
  height: var(--sz);
  vertical-align: middle;
  background: var(--rv-star-off, #CBD5E1);
  -webkit-mask: var(--rv-star-shape, none) 0 0 / var(--sz) var(--sz) repeat-x;
  mask: var(--rv-star-shape, none) 0 0 / var(--sz) var(--sz) repeat-x;
}

.dxs-stars::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--rv) / 5 * 100%);
  background: var(--rv-star, #F59E0B);
}

/* The mask lives on a wrapper-less element, so give it the shape even where the custom property is
   only defined on the review blocks (e.g. the star inside a hero). */
.dxs-stars { --rv-star-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E"); }

/* ==========================================================================
   2. NOTICES + EMPTY STATE
   ========================================================================== */
.dxs-rv-notice {
  margin: 0 0 20px;
  padding: 14px 18px;
  border: 1.5px solid;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

.dxs-rv-notice--success { border-color: #86efac; background: #f0fdf4; color: #14532d; }
.dxs-rv-notice--error { border-color: #fca5a5; background: #fef2f2; color: #7f1d1d; }

.dxs-rv-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: clamp(20px, 3vw, 30px);
  border: 1.5px dashed var(--gray-300, #CBD5E1);
  border-radius: 20px;
  background: var(--gray-50, #F8FAFC);
}

.dxs-rv-empty p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--gray-800, #1E293B); }
.dxs-rv-empty p strong { font-size: 17px; color: var(--color-navy, #0D1B3E); }

.dxs-rv-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  border-radius: 14px;
  background: var(--rv-tint);
  color: var(--color-navy, #0D1B3E);
}

.dxs-rv-empty__icon svg { width: 24px; height: 24px; }

.dxs-rv-empty--page { align-items: center; max-width: 640px; margin: 8px auto; text-align: center; }
.dxs-rv-empty--page h2 { margin: 0; font-size: 24px; font-weight: 800; color: var(--color-navy, #0D1B3E); }
.dxs-rv-empty--page .dxs-rv-btn { margin-top: 12px; }

/* ==========================================================================
   3. BUTTONS / LINKS
   ========================================================================== */
.dxs-rv .dxs-rv-btn,
.dxs-rvp .dxs-rv-btn,
.dxs-rv .dxs-rv-btn:visited,
.dxs-rvp .dxs-rv-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border: 1.5px solid var(--color-navy, #0D1B3E);
  border-radius: 12px;
  background: var(--color-navy, #0D1B3E);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast, .15s), border-color var(--transition-fast, .15s), transform var(--transition-fast, .15s);
}

.dxs-rv .dxs-rv-btn:hover,
.dxs-rv .dxs-rv-btn:focus-visible,
.dxs-rvp .dxs-rv-btn:hover,
.dxs-rvp .dxs-rv-btn:focus-visible {
  background: var(--color-blue, #2F6FED);
  border-color: var(--color-blue, #2F6FED);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.dxs-rv .dxs-rv-btn:focus-visible,
.dxs-rvp .dxs-rv-btn:focus-visible { outline: 2px solid var(--color-blue, #2F6FED); outline-offset: 3px; }

.dxs-rv .dxs-rv-link,
.dxs-rv .dxs-rv-link:visited {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-navy, #0D1B3E);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}

.dxs-rv .dxs-rv-link:hover,
.dxs-rv .dxs-rv-link:focus-visible { background: transparent; color: var(--color-blue, #2F6FED); }

/* ==========================================================================
   4. RATING SUMMARY
   ========================================================================== */
.dxs-rv-summary {
  padding: clamp(20px, 2.4vw, 28px);
  border: 1.5px solid var(--rv-line);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--rv-tint) 0, var(--rv-surface) 160px);
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(13,27,62,.08));
}

.dxs-rv-summary__score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rv-line);
}

.dxs-rv-summary__avg {
  font-size: clamp(40px, 3vw + 26px, 56px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--color-navy, #0D1B3E);
}

.dxs-rv-summary__count { flex: 1 0 100%; font-size: 14.5px; font-weight: 600; color: var(--gray-800, #1E293B); }

.dxs-rv-dist { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }

.dxs-rv-dist li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gray-900, #0F172A);
}

.dxs-rv-dist__label { white-space: nowrap; }
.dxs-rv-dist__label [aria-hidden] { color: #B45309; } /* the small glyph is text-sized: darker amber for contrast */

.dxs-rv-dist__bar { display: block; height: 9px; border-radius: 999px; background: var(--gray-200, #E2E8F0); overflow: hidden; }
.dxs-rv-dist__bar > span { display: block; height: 100%; border-radius: 999px; background: var(--rv-star); }
.dxs-rv-dist__n { text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   5. REVIEW CARDS
   ========================================================================== */
.dxs-rv-list { display: flex; flex-direction: column; gap: 14px; }

.dxs-review {
  display: flex;
  gap: 16px;
  padding: clamp(18px, 2.2vw, 24px);
  border: 1.5px solid var(--rv-line);
  border-radius: 20px;
  background: var(--rv-surface);
  scroll-margin-top: 130px;
}

.dxs-review__avatar {
  --hue: 215;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: hsl(var(--hue) 78% 91%);
  color: hsl(var(--hue) 60% 24%);
  font-size: 18px;
  font-weight: 800;
}

.dxs-review__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

.dxs-review__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.dxs-review__name { font-size: 16px; font-weight: 800; color: var(--color-navy, #0D1B3E); }
.dxs-review__date { font-size: 13.5px; font-weight: 600; color: var(--gray-700, #334155); }

.dxs-review__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-green, #22C55E) 16%, var(--rv-surface));
  font-size: 12px;
  font-weight: 800;
  color: color-mix(in srgb, var(--color-green, #22C55E) 45%, var(--color-navy, #0D1B3E));
}

.dxs-review__badge svg { width: 13px; height: 13px; }

.dxs-review__product,
.dxs-review__product:visited {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-navy, #0D1B3E);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dxs-review__product:hover,
.dxs-review__product:focus-visible { background: transparent; color: var(--color-blue, #2F6FED); }

.dxs-rv .dxs-review__text,
.dxs-rvp .dxs-review__text {
  margin: 0;
  max-width: 68ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--gray-900, #0F172A);
  overflow-wrap: anywhere;
}

.dxs-rv .dxs-review__reply,
.dxs-rvp .dxs-review__reply {
  align-self: stretch;
  margin-top: 4px;
  padding: 12px 16px;
  border-left: 4px solid var(--color-navy, #0D1B3E);
  border-radius: 0 12px 12px 0;
  background: var(--gray-50, #F8FAFC);
}

.dxs-review__reply strong { display: block; margin-bottom: 2px; font-size: 13.5px; font-weight: 800; color: var(--color-navy, #0D1B3E); }
.dxs-rv .dxs-review__reply p,
.dxs-rvp .dxs-review__reply p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--gray-900, #0F172A); }

/* ==========================================================================
   6. WRITE A REVIEW
   ========================================================================== */
.dxs-rv-cta,
.dxs-rv-write {
  margin-top: 18px;
  padding: clamp(20px, 2.6vw, 30px);
  border: 1.5px solid var(--rv-line);
  border-radius: 22px;
  background: var(--rv-surface);
}

.dxs-rv-cta h3,
.dxs-rv-write h3 { margin: 0 0 6px; font-size: 19px; font-weight: 800; color: var(--color-navy, #0D1B3E); }
.dxs-rv-cta p { margin: 0 0 14px; font-size: 15px; line-height: 1.65; color: var(--gray-900, #0F172A); }
.dxs-rv-cta--done { background: var(--gray-50, #F8FAFC); }
.dxs-rv-cta--done p { margin: 0; font-weight: 700; }

.dxs-rv-form { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; }

.dxs-rate { min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; } /* Storefront gives fieldsets a light-grey fill */
.dxs-rate legend { margin: 0 0 8px; padding: 0; font-size: 15px; font-weight: 800; color: var(--color-navy, #0D1B3E); }
.dxs-rv-req { color: #DC2626; }
.dxs-rv-opt { font-weight: 600; color: var(--gray-700, #334155); }

.dxs-rate__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }

/* DOM order is 5→1 and the row is reversed, so "checked ~ label" and "hover ~ label" fill the stars to the left. */
.dxs-rate__stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; }

.dxs-rate__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.dxs-rate__star {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 44px;
  margin: 0;
  cursor: pointer;
  border-radius: 10px;
}

.dxs-rate__star::before {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--rv-star-off, #CBD5E1);
  -webkit-mask: var(--rv-star-shape) center / contain no-repeat;
  mask: var(--rv-star-shape) center / contain no-repeat;
  transition: background var(--transition-fast, .15s), transform var(--transition-fast, .15s);
}

.dxs-rate__star:hover::before,
.dxs-rate__star:hover ~ .dxs-rate__star::before,
.dxs-rate__input:checked ~ .dxs-rate__star::before { background: var(--rv-star, #F59E0B); }

.dxs-rate__star:hover::before { transform: scale(1.12); }

.dxs-rate__input:focus-visible + .dxs-rate__star { outline: 2px solid var(--color-blue, #2F6FED); outline-offset: 1px; }

.dxs-rate__hint { min-width: 8ch; font-size: 15px; font-weight: 700; color: var(--gray-900, #0F172A); }

.dxs-rv-field { position: relative; display: flex; flex-direction: column; gap: 8px; }
.dxs-rv-field label { font-size: 15px; font-weight: 800; color: var(--color-navy, #0D1B3E); }

.dxs-rv-field textarea {
  width: 100%;
  min-height: 130px;
  padding: 14px 16px;
  border: 1.5px solid var(--gray-300, #CBD5E1);
  border-radius: 14px;
  background: var(--rv-surface);
  font-family: inherit;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--gray-900, #0F172A);
  resize: vertical;
}

.dxs-rv-field textarea::placeholder { color: var(--gray-700, #334155); opacity: 1; }
.dxs-rv-field textarea:focus { outline: none; border-color: var(--color-blue, #2F6FED); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-blue, #2F6FED) 20%, transparent); }

.dxs-rv-count { align-self: flex-end; font-size: 12.5px; font-weight: 600; color: var(--gray-700, #334155); }
.dxs-rv-form__note { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--gray-800, #1E293B); }
.dxs-rv-form .dxs-rv-btn { align-self: flex-start; }

/* ==========================================================================
   7. PRODUCT-PAGE SECTION LAYOUT
   ========================================================================== */
.dxs-rv .dxs-rv__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.dxs-rv .dxs-rv__more { margin: 16px 0 0; }
.dxs-rv .dxs-rv__grid--empty .dxs-rv-cta,
.dxs-rv .dxs-rv__grid--empty .dxs-rv-write { margin-top: 0; }

@media (min-width: 960px) {
  .dxs-rv .dxs-rv__grid { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.9fr); gap: clamp(28px, 4vw, 56px); }
  .dxs-rv .dxs-rv__left { position: sticky; top: calc(var(--dripex-nav-h, 87px) + var(--dripex-adminbar-h, 0px) + 78px); }
  .dxs-rv .dxs-rv__grid--empty { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}

/* ==========================================================================
   8. REVIEWS PAGE
   ========================================================================== */
.dxs-rvp .dxs-rvp-wrap { padding-top: 8px; padding-bottom: clamp(48px, 6vw, 88px); }

.dxs-rvp .dxs-rvp-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-bottom: clamp(24px, 3vw, 36px);
}

.dxs-rvp .dxs-rvp-filter { padding: clamp(18px, 2.2vw, 26px); border: 1.5px solid var(--rv-line); border-radius: 22px; background: var(--rv-surface); }
.dxs-rvp .dxs-rvp-filter__title { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-navy, #0D1B3E); }
.dxs-rvp .dxs-rvp-filter ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dxs-rvp .dxs-rvp-filter li { margin: 0; padding: 0; }

.dxs-rvp .dxs-rvp-chip,
.dxs-rvp .dxs-rvp-chip:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 16px;
  border: 1.5px solid var(--gray-300, #CBD5E1);
  border-radius: 999px;
  background: var(--rv-surface);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy, #0D1B3E);
  text-decoration: none;
  transition: background var(--transition-fast, .15s), border-color var(--transition-fast, .15s);
}

.dxs-rvp .dxs-rvp-chip span { padding: 1px 8px; border-radius: 999px; background: var(--gray-100, #F1F5F9); font-size: 12px; font-weight: 800; color: var(--gray-900, #0F172A); }

.dxs-rvp .dxs-rvp-chip:hover,
.dxs-rvp .dxs-rvp-chip:focus-visible {
  background: color-mix(in srgb, var(--color-blue, #2F6FED) 12%, var(--rv-surface));
  border-color: var(--color-blue, #2F6FED);
  color: var(--color-navy, #0D1B3E);
  text-decoration: none;
}

.dxs-rvp .dxs-rvp-chip.is-active { background: var(--color-navy, #0D1B3E); border-color: var(--color-navy, #0D1B3E); color: #fff; }
.dxs-rvp .dxs-rvp-chip.is-active span { background: rgba(255, 255, 255, .18); color: #fff; }

.dxs-rvp .dxs-rvp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.dxs-rvp .dxs-rv-none { margin: 0; padding: 24px; border: 1.5px dashed var(--gray-300, #CBD5E1); border-radius: 18px; font-size: 15px; color: var(--gray-900, #0F172A); }

.dxs-rvp .dxs-rvp-aside {
  padding: clamp(20px, 2.6vw, 28px);
  border: 1.5px solid var(--rv-line);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--rv-tint) 0, var(--rv-surface) 140px);
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(13,27,62,.08));
}

.dxs-rvp .dxs-rvp-aside h2 { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: var(--color-navy, #0D1B3E); }
.dxs-rvp .dxs-rvp-aside p { margin: 0 0 14px; font-size: 15px; line-height: 1.65; color: var(--gray-900, #0F172A); }
.dxs-rvp .dxs-rvp-aside .dxs-rvp-aside__note { margin: 14px 0 0; font-size: 13.5px; color: var(--gray-800, #1E293B); }

.dxs-rvp .dxs-rvp-todo { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 10px; }
.dxs-rvp .dxs-rvp-todo li { margin: 0; padding: 0; }

.dxs-rvp .dxs-rvp-todo a,
.dxs-rvp .dxs-rvp-todo a:visited {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border: 1.5px solid var(--gray-300, #CBD5E1);
  border-radius: 14px;
  background: var(--rv-surface);
  font-size: 14.5px;
  font-weight: 800;
  color: var(--color-navy, #0D1B3E);
  text-decoration: none;
  transition: background var(--transition-fast, .15s), border-color var(--transition-fast, .15s);
}

.dxs-rvp .dxs-rvp-todo a:hover,
.dxs-rvp .dxs-rvp-todo a:focus-visible { background: color-mix(in srgb, var(--color-blue, #2F6FED) 12%, var(--rv-surface)); border-color: var(--color-blue, #2F6FED); color: var(--color-navy, #0D1B3E); text-decoration: none; }
.dxs-rvp .dxs-rvp-todo__go { font-size: 13px; font-weight: 700; color: var(--gray-900, #0F172A); }

/* pagination (paginate_links type=list) */
.dxs-rvp .page-numbers { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dxs-rvp ul.page-numbers li { margin: 0; padding: 0; }

.dxs-rvp .page-numbers a,
.dxs-rvp .page-numbers span.page-numbers,
.dxs-rvp .page-numbers li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--gray-300, #CBD5E1);
  border-radius: 12px;
  background: var(--rv-surface);
  font-size: 15px;
  font-weight: 800;
  color: var(--color-navy, #0D1B3E);
  text-decoration: none;
}

.dxs-rvp .page-numbers a:hover,
.dxs-rvp .page-numbers a:focus-visible { background: color-mix(in srgb, var(--color-blue, #2F6FED) 12%, var(--rv-surface)); border-color: var(--color-blue, #2F6FED); color: var(--color-navy, #0D1B3E); }
.dxs-rvp .page-numbers .current { background: var(--color-navy, #0D1B3E); border-color: var(--color-navy, #0D1B3E); color: #fff; }

@media (min-width: 820px) {
  .dxs-rvp .dxs-rvp-top { grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); align-items: start; }
}

@media (min-width: 960px) {
  .dxs-rvp .dxs-rvp-grid { grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr); gap: clamp(28px, 4vw, 48px); }
  .dxs-rvp .dxs-rvp-aside { position: sticky; top: calc(var(--dripex-nav-h, 87px) + var(--dripex-adminbar-h, 0px) + 20px); }
}

@media (max-width: 560px) {
  .dxs-review { gap: 12px; padding: 16px; }
  .dxs-review__avatar { width: 40px; height: 40px; font-size: 16px; }
  .dxs-rate__star { width: 46px; height: 46px; }
  .dxs-rv-form .dxs-rv-btn { align-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .dxs-rv .dxs-rv-btn:hover,
  .dxs-rate__star:hover::before { transform: none; }
}