/* =========================================================
   MTP Reviews — Scoped Isolation Layer
   Prevents host theme CSS from breaking the module.
   ========================================================= */
.mtpReviews, .mtpReviews * { box-sizing: border-box; }

/* Reset hostile theme rules for controls/links inside the module */
.mtpReviews a { text-decoration: none !important; color: inherit; }
.mtpReviews button { all: unset; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mtpReviews img { display: block; max-width: 100%; height: auto; }

/* Containment */
.mtpReviews { isolation: isolate; position: relative; overflow: hidden; display: block; }

/* MTP Reviews Module — Themeable via CSS Variables */
.mtpReviews{
  --mtp-bg: rgba(0,0,0,.22);
  --mtp-card-bg: rgba(20,20,24,.86);
  --mtp-text: rgba(255,255,255,.92);
  --mtp-muted: rgba(255,255,255,.70);
  --mtp-accent: #ff1538;
  --mtp-accent-2: #ffd54a;
  --mtp-radius: 20px;
  --mtp-shadow: 0 18px 60px rgba(0,0,0,.55);
  --mtp-border: 1px solid rgba(255,255,255,.09);
  --mtp-gap: 16px;
  --mtp-card-w: 360px;
  --mtp-pad: 18px;
  --mtp-maxw: 1180px; /* can be overridden per-site */

  width: 100%;
  max-width: min(var(--mtp-maxw), 100%);
  margin-inline: auto;
  border-radius: var(--mtp-radius);
  border: var(--mtp-border);
  background: var(--mtp-bg);
  box-shadow: var(--mtp-shadow);
  overflow: hidden;
}

.mtpReviews__inner{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  padding: 18px;
  align-items: center;
}

@media (max-width: 980px){
  .mtpReviews__inner{ grid-template-columns: 1fr; }
}

.mtpReviews__summary{
  border-radius: calc(var(--mtp-radius) - 6px);
  background: rgba(0,0,0,.28);
  border: var(--mtp-border);
  padding: 20px;
}

.mtpReviews__title{
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mtp-text);
  font-size: 26px;
  margin: 0 0 10px 0;
}

.mtpStars{ display:flex; gap:6px; align-items:center; margin: 10px 0 6px; }
.mtpStar{ font-size: 20px; line-height: 1; color: var(--mtp-accent-2); }
.mtpReviews__meta{ color: var(--mtp-muted); font-weight: 700; }

.mtpReviews__brand{
  margin: 12px 0 16px;
  font-weight: 900;
  font-size: 34px;
  letter-spacing: .02em;
  background: linear-gradient(90deg, #4285F4, #34A853, #FBBC05, #EA4335);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mtpBtn{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 44px;
  border-radius: 14px;
  border: var(--mtp-border);
  background: rgba(255,255,255,.06);
  color: var(--mtp-text);
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: transform .12s ease, background .12s ease;
}
.mtpBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }
.mtpBtnPrimary{ background: var(--mtp-accent); border-color: rgba(0,0,0,.0); color: #fff; }
.mtpBtnPrimary:hover{ background: color-mix(in srgb, var(--mtp-accent) 88%, white 12%); }
.mtpBtnRow{ display:grid; gap: 10px; }

.mtpReviews__railWrap{
  position: relative;
  min-width: 0;
}

.mtpReviews__rail{
  display:flex;
  gap: var(--mtp-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 10px 60px; /* leaves room for fades */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.25) transparent;
}
.mtpReviews__rail::-webkit-scrollbar{ height: 10px; }
.mtpReviews__rail::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.22); border-radius: 999px; }
.mtpReviews__rail::-webkit-scrollbar-track{ background: transparent; }

/* Prevent "runs off page" */
.mtpReviews__railWrap{ overflow:hidden; }
.mtpReviews__rail{ max-width:100%; }

/* Edge fade */
.mtpReviews__railWrap:before,
.mtpReviews__railWrap:after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 54px;
  pointer-events:none;
  z-index:2;
}
.mtpReviews__railWrap:before{
  left:0;
  background: linear-gradient(to right, rgba(0,0,0,.70), rgba(0,0,0,0));
}
.mtpReviews__railWrap:after{
  right:0;
  background: linear-gradient(to left, rgba(0,0,0,.70), rgba(0,0,0,0));
}

.mtpReviews__nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: var(--mtp-border);
  background: rgba(0,0,0,.35);
  color: var(--mtp-text);
  font-size: 22px;
  z-index: 3;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mtpReviews__nav:hover{ background: rgba(0,0,0,.55); }
.mtpReviews__navPrev{ left: 8px; }
.mtpReviews__navNext{ right: 8px; }

.mtpReviewCard{
  width: var(--mtp-card-w);
  flex: 0 0 auto;
  scroll-snap-align: start;
  border-radius: 18px;
  background: var(--mtp-card-bg);
  border: var(--mtp-border);
  padding: var(--mtp-pad);
  color: var(--mtp-text);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}

.mtpReviewTop{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.mtpAuthor{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}
.mtpAvatar{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  object-fit: cover;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.mtpAuthorName{
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mtpTime{ color: var(--mtp-muted); font-weight: 700; font-size: 13px; }
.mtpStarsSm{ display:flex; gap:4px; margin: 6px 0 10px; }
.mtpReviewText{
  color: rgba(255,255,255,.86);
  line-height: 1.45;
  font-weight: 650;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Hard layout guards (theme collision protection) --- */
.mtpReviews__inner{
  display: grid !important;
  grid-template-columns: minmax(260px, 360px) 1fr !important;
  gap: 18px !important;
  align-items: stretch !important;
  width: 100% !important;
}

@media (max-width: 900px){
  .mtpReviews__inner{ grid-template-columns: 1fr !important; }
}

.mtpReviews__railWrap{
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  min-height: 240px !important;
}

.mtpReviews__rail{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: var(--mtp-gap, 16px) !important;
  overflow: hidden !important;
  padding: 8px 6px !important;
}

.mtpReviews__card{
  flex: 0 0 var(--mtp-card-w, 360px) !important;
  max-width: var(--mtp-card-w, 360px) !important;
}

/* Buttons */
.mtpBtnRow{ display:flex !important; gap:12px !important; flex-wrap:wrap !important; }
.mtpBtn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  user-select: none !important;
}


/* Optional: force full-bleed width */
.mtpReviews--full{
  max-width: 100% !important;
}