/**
 * Magnetrix reviews slider.
 *
 * Cards reuse the site's .mx-card class, so background, border, radius, shadow
 * and hover animation all come from the existing stylesheet. Everything here
 * describes the slider mechanism and the review-specific typography only.
 */

.mxr { position: relative; }

/* Viewport clips; the track slides. Overflow hidden also guarantees the
   section can never cause horizontal page scroll on a phone. */
.mxr__viewport { overflow: hidden; }

.mxr__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 24px;
  will-change: transform;
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
.mxr.is-dragging .mxr__track { transition: none; cursor: grabbing; }

/* 3 up desktop, 2 up tablet, 1 up phone. The gap is subtracted so the third
   card is never clipped -- percentage widths plus a fixed gap overflow. */
.mxr__slide { flex: 0 0 calc((100% - 48px) / 3); min-width: 0; display: flex; }
@media (max-width: 1024px) { .mxr__slide { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 767px)  { .mxr__slide { flex-basis: 100%; } .mxr__track { gap: 16px; } }

/* Equal heights: the card fills its slide. */
.mxr-card { display: flex; flex-direction: column; width: 100%; }

.mxr-card__stars { display: flex; gap: 3px; margin-bottom: 12px; }
.mxr-star { font-size: 17px; line-height: 1; color: #DCEAEA; }
.mxr-star.is-on { color: #00B67A; }          /* Trustpilot green */

.mxr-card__title {
  margin: 0 0 8px;
  font-family: var(--mx-font-display, sans-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--mx-ink, #04100F);
}

.mxr-card__text {
  margin: 0 0 18px;
  border: 0;
  padding: 0;
  font-family: var(--mx-font-body, sans-serif);
  font-size: 15px;
  line-height: 1.62;
  color: var(--mx-body, #3F5C5A);
}

/* margin-top:auto pins the footer to the bottom, so names line up across
   cards of different text lengths. */
.mxr-card__foot { margin-top: auto; }

.mxr-card__name {
  margin: 0;
  font-family: var(--mx-font-display, sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--mx-ink, #04100F);
}
.mxr-card__meta {
  margin: 2px 0 0;
  font-size: 13.5px;
  color: var(--mx-muted, #6C8A88);
}
.mxr-card__stamp {
  margin: 9px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.mxr-card__date {
  font-family: var(--mx-font-mono, monospace);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mx-slate, #5E817F);
}
.mxr-card__verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0,182,122,.10);
  color: #00875C;
  font-family: var(--mx-font-mono, monospace);
  font-size: .56rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mxr-card__tick { font-size: 10px; line-height: 1; }

/* ---------- controls ---------- */
.mxr__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}
.mxr__arrow {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--mx-border, #DCEAEA);
  background: #fff;
  color: var(--mx-teal-600, #00636D);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, color .25s ease, opacity .25s ease;
}
.mxr__arrow:hover { border-color: var(--mx-teal-600, #00636D); background: var(--mx-surface, #F7FCFC); }
.mxr__arrow:focus-visible { outline: 3px solid var(--mx-accent, #20E6F2); outline-offset: 3px; }
.mxr__arrow[disabled] { opacity: .35; pointer-events: none; }

.mxr__dots { display: flex; align-items: center; gap: 8px; }
.mxr__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--mx-border, #DCEAEA);
  cursor: pointer;
  transition: background .25s ease, width .25s ease;
}
.mxr__dot.is-active { width: 22px; border-radius: 999px; background: var(--mx-teal-600, #00636D); }
.mxr__dot:focus-visible { outline: 2px solid var(--mx-accent, #20E6F2); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .mxr__track { transition: none; }
  .mxr__dot { transition: none; }
}