/* MP Reviews - fascia recensioni verificate in home (mockup review-idea.jpeg).
   Stesso linguaggio di mpshippingbanner/mpwhybuy/mpfeatures: palette brand, card bordate.
   Header con stelle VERDI + voto, carosello di card con stelle ORO e badge Verificato.
   Namespace mp-rev*. */

.mp-rev {
  padding: 1.75rem 0 2.25rem;
  background: #fff;
  --mp-blue: #084c95;
  --mp-ink: #16324f;
  --mp-muted: #6a7686;
  --mp-gold: #f5a623;
  --mp-green: #1f9d55;
  --mp-cardline: #eaeef4;
  --mp-line: #e7ecf3;
}

/* ---------------- header ---------------- */
.mp-rev__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  margin-bottom: 1.15rem;
}
.mp-rev__head-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem;
}
.mp-rev__label {
  font-weight: 800;
  color: var(--mp-blue);
  text-transform: uppercase;
  letter-spacing: .2px;
  font-size: 1.02rem;
}
.mp-rev__hstars { display: inline-flex; gap: 1px; margin-left: .2rem; }
.mp-rev__hstar { color: #cdd6e2; line-height: 0; }
.mp-rev__hstar.is-on { color: var(--mp-green); }
.mp-rev__hstar svg { width: 17px; height: 17px; }
.mp-rev__score { font-weight: 800; color: var(--mp-ink); font-size: .95rem; }
.mp-rev__count { color: var(--mp-muted); font-size: .9rem; }

.mp-rev__all {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--mp-blue);
  font-weight: 700;
  font-size: .92rem;
  white-space: nowrap;
}
.mp-rev__all:hover { color: #06356b; }
.mp-rev__all svg { width: 18px; height: 18px; }

/* ---------------- slider ---------------- */
.mp-rev__slider { position: relative; }

.mp-rev__track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  /* scrollbar discreta */
  scrollbar-width: thin;
}
.mp-rev__track::-webkit-scrollbar { height: 6px; }
.mp-rev__track::-webkit-scrollbar-thumb { background: #d7dfea; border-radius: 6px; }

/* card: 5 visibili su desktop largo, poi si adatta */
.mp-rev__card {
  flex: 0 0 calc((100% - 4rem) / 5);
  min-width: 210px;
  scroll-snap-align: start;
  border: 1px solid var(--mp-cardline);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(16, 42, 76, .05);
  padding: 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
}

.mp-rev__stars { display: inline-flex; gap: 1px; margin-bottom: .6rem; }
.mp-rev__star { color: #e5e8ee; line-height: 0; }
.mp-rev__star.is-on { color: var(--mp-gold); }
.mp-rev__star svg { width: 16px; height: 16px; }

.mp-rev__text {
  color: var(--mp-ink);
  font-size: .9rem;
  line-height: 1.5;
  margin: 0 0 1rem;
  flex: 1;
}

.mp-rev__foot {
  display: flex;
  align-items: center;
  gap: .45rem;
  border-top: 1px solid var(--mp-line);
  padding-top: .7rem;
  flex-wrap: wrap;
}
.mp-rev__author { font-weight: 800; color: var(--mp-ink); font-size: .85rem; }
.mp-rev__verified {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  color: var(--mp-green);
  font-weight: 700;
  font-size: .8rem;
}
.mp-rev__verified svg { width: 15px; height: 15px; }

/* ---------------- frecce (desktop) ---------------- */
.mp-rev__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--mp-cardline);
  background: #fff;
  color: var(--mp-blue);
  box-shadow: 0 4px 14px rgba(16, 42, 76, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.mp-rev__arrow:hover { background: var(--mp-blue); color: #fff; }
.mp-rev__arrow svg { width: 20px; height: 20px; }
.mp-rev__arrow[hidden] { display: none; }
.mp-rev__arrow--prev { left: -14px; }
.mp-rev__arrow--next { right: -14px; }

/* niente frecce su touch/mobile: si scorre con lo swipe */
@media (max-width: 991.98px) {
  .mp-rev__arrow { display: none !important; }
}

/* ---------------- responsive card ---------------- */
@media (max-width: 1199.98px) {
  .mp-rev__card { flex-basis: calc((100% - 3rem) / 4); }
}
@media (max-width: 991.98px) {
  .mp-rev__card { flex-basis: calc((100% - 2rem) / 3); }
}
@media (max-width: 767.98px) {
  .mp-rev__card { flex-basis: calc((100% - 1rem) / 2); }
}
@media (max-width: 575.98px) {
  .mp-rev { padding: 1.25rem 0 1.75rem; }
  .mp-rev__card { flex-basis: 82%; min-width: 0; }
  .mp-rev__label { font-size: .92rem; }
}