/* ===========================
   Reviews Container (outer wrapper)
   =========================== */
.mpx-sr-container {
  max-width: 100%;
  padding: 0rem !important;
  overflow-x: auto;            /* allow horizontal scroll */
  overflow-y: hidden;          /* hide vertical scroll */
  white-space: nowrap;         /* prevent wrapping */
  scrollbar-width: none;       /* hide scrollbar in Firefox */
  -ms-overflow-style: none;    /* hide scrollbar in IE/Edge */
  scroll-snap-type: x mandatory; 
  scroll-behavior: smooth;     /* smooth native scroll */
  cursor: grab;                /* indicate draggable */
  user-select: none;           /* prevent text selection */
  -webkit-user-select: none;
  -ms-user-select: none;
}

.mpx-sr-container:active {
  cursor: grabbing;
}

.mpx-sr-container::-webkit-scrollbar {
  display: none;               /* hide scrollbar in Chrome/Safari/Opera */
}

/* ===========================
   Reviews Wrapper (flex row for cards)
   =========================== */
.mpx-sr-container .glsr-reviews {
  display: flex;
  gap: 1.25rem;                 /* spacing between cards */
}

/* Invisible spacer to force horizontal scroll on desktop */
.mpx-sr-container .glsr-reviews::after {
  content: "";
  display: inline-block;
  width: 1px;                  
}

/* ===========================
   Review Card
   =========================== */
.mpx-sr-container .glsr-review {
  flex: 0 0 calc(33.333% - 1rem); /* 3 cards on desktop */
  background: var(--mpx-clr-wh);
  border: 1px solid var(--mpx-brd-clr-a);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  white-space: normal;         /* allow text wrapping */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  scroll-snap-align: start;    /* snap card neatly */
}


/* ===========================
   Star Rating
   =========================== */
.mpx-sr-container .glsr-star-rating {
  margin-bottom: 1rem;
  font-size: 1rem;
}

/* ===========================
   Date
   =========================== */
.mpx-sr-container .glsr-review-date {
  font-size: var(--mpx-fs-xxs);
  color: var(--mpx-clr-gray-dk);
  margin-bottom: 1rem;
}

/* ===========================
   Review Text
   =========================== */
.mpx-sr-container .glsr-review-content {
  font-size: var(--mpx-fs-xs);
  line-height: var(--mpx-lh-sm);
  color: var(--mpx-clr-bk); 
  margin-bottom: 1rem;
}

/* Reviewer Avatar */
.mpx-sr-container .glsr-review-avatar img {
  width: 2.5rem !important;; 
  height: 2.5rem !important;  
  border-radius: 50%;
  border: 2px solid var(--mpx-brd-clr-a);
  box-shadow: 2px 4px 6px rgba(0,0,0,0.08);	
}

/* ===========================
   Author
   =========================== */
.mpx-sr-container .glsr-review-author {
  font-weight: 600;
  color: var(--mpx-clr-gray-dk);
  font-size: var(--mpx-fs-xs);
  margin: -0.5rem 0 0 0;
}

/* ===========================
   Pagination (Load More button container)
   =========================== */
.mpx-sr-container .glsr-pagination {
  margin-top: 0rem;
  text-align: center;
}

/* ===========================
   Load More Button
   =========================== */
.mpx-sr-container .glsr-button-loadmore {
  background: var(--mpx-clr-gray-dk); 
  color: var(--mpx-clr-wh);
  border: none;
  padding: var(--mpx-btn-pad-sm);
  border-radius: var(--mpx-brd-sm); 
  font-size: var(--mpx-fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mpx-sr-container .glsr-button-loadmore:hover {
  background: var(--mpx-clr-sec);
}

/* ===========================
   Responsive Breakpoints
   =========================== */
@media (max-width: 1024px) {    /* Tablet: 2 cards */
  .mpx-sr-container .glsr-review {
    flex: 0 0 calc(50% - 1rem);
  }
}

@media (max-width: 767px) {     /* Mobile: 1 card */
  .mpx-sr-container .glsr-review {
    flex: 0 0 366px;   /* fixed width */
    max-width: 366px;
    min-width: 366px;
  }
}

/* Write review section --------*/

/* Write review trigger */
.mpx-sr-write {
	cursor: pointer;
}

/* ===========================
   Container hide/show + transition
   =========================== */
.mpx-sr-write-container {
  width: 100%; /* full width */
  opacity: 0;
  max-height: 0; 
  overflow: hidden;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.4s ease, max-height 0.5s ease, transform 0.4s ease, padding 0.4s ease;
  background-color: var(--mpx-clr-wh);
  border: 1px solid var(--mpx-brd-clr-a);
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  padding: 0 1.25rem; /* horizontal padding */
}

/* Show container */
.mpx-sr-write-container.show {
  opacity: 1;
  max-height: 1000px; /* large enough for form */
  pointer-events: auto;
  transform: translateY(0);
  padding: 1.5rem;
}

/* ===========================
   Form Fields
   =========================== */
.mpx-sr-write-container .glsr-form .glsr-field {
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
}

.mpx-sr-write-container label.glsr-label span {
  font-size: var(--mpx-fs-sm);
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--mpx-clr-gray-dk);
}

/* Inputs & textarea */
.mpx-sr-write-container input.glsr-input,
.mpx-sr-write-container textarea.glsr-textarea,
.mpx-sr-write-container select.glsr-select {
  margin: 0.5rem 0 0 0 !important;
	padding: 1rem !important;
  font-size: var(--mpx-fs-sm) !important;
  border: 1px solid var(--mpx-clr-gray-lt) !important;
  border-radius: 4px !important;
  transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s !important;
  background-color: #fff !important;  
}

/* Stronger specificity with !important */
body .glsr-default form.glsr-form input.glsr-input,
body .glsr-default form.glsr-form select.glsr-select,
body .glsr-default form.glsr-form textarea.glsr-textarea {
    padding: 1rem !important; /* your desired padding */
}


.mpx-sr-write-container input.glsr-input:focus,
.mpx-sr-write-container textarea.glsr-textarea:focus,
.mpx-sr-write-container select.glsr-select:focus {
  border: 1px solid var(--mpx-clr-sec) !important;
  outline: none !important;    
  box-shadow: var(--mpx-shd-hov) !important; 
}

/* ===========================
   Star Rating
   =========================== */
.mpx-sr-write-container .glsr-star-rating--stars span {
  cursor: pointer;
  font-size: 1rem;
  margin: 0.5rem 0 0 0 !important;
}

/* ===========================
   Submit Button
   =========================== */
.mpx-sr-write-container button.glsr-button {
  background: var(--mpx-clr-acc-a); 
  color: var(--mpx-clr-bk);
  border: none;
  padding: var(--mpx-btn-pad-md) !important;
  border-radius: var(--mpx-brd-sm); 
  font-size: var(--mpx-fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mpx-sr-write-container button.glsr-button:hover {
  background: var(--mpx-clr-sec);
  color: var(--mpx-clr-wh);
}

.glsr-default .glsr-form-success {
    color: var(--mpx-clr-succ);
    font-size: var(--mpx-fs-sm);
    font-weight: 500;
}

.glsr-default .glsr-form-failed {
    color: var(--glsr-form-error);
	font-size: var(--mpx-fs-sm);
    font-weight: 500;
}

/* ===========================
   Responsive
   =========================== */
@media screen and (max-width: 768px) {
  .mpx-sr-write-container {
    padding: 1.25rem; /* internal spacing */
  }

  .mpx-sr-write-container button.glsr-button {
    width: 100%;
    padding: 0.75rem 0;
  }
}

@media (max-width: 480px) {
  .mpx-sr-write-container input.glsr-input,
  .mpx-sr-write-container textarea.glsr-textarea,
  .mpx-sr-write-container select.glsr-select {
    font-size: 16px !important;
  }
}