/* ==========================================================================
   SHOPPER APPROVED STARS & REVIEWS WIDGETS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL REVIEW MODAL POPUP
   -------------------------------------------------------------------------- */
#sa-reviews-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99999;
  justify-content: center;
  align-items: center;
}

.sa-modal-dialog {
  background: #ffffff;
  width: 90%;
  max-width: 800px;
  max-height: 85vh;
  padding: 32px 24px 24px;
  border-radius: 12px;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

#close-sa-modal {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: all 0.2s ease;
}

#close-sa-modal:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* Modal SVG Review Stars (Overrides Shopper Approved default pink) */
#SA_review_wrapper .SA_activestar svg path,
#SA_review_wrapper .SA__star.SA_activestar svg path,
.SA__star.SA_activestar svg path,
.SA__star.SA_activestar svg polygon {
  fill: #EB7100 !important;
  color: #EB7100 !important;
}

#SA_review_wrapper .SA_inactivestar svg path,
.SA__star.SA_inactivestar svg path {
  fill: #cbd5e1 !important;
  color: #cbd5e1 !important;
}

/* --------------------------------------------------------------------------
   2. DYNAMIC PARTIAL STAR ICONS (Clipped Percentage Fill)
   -------------------------------------------------------------------------- */
.sa-partial-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
  vertical-align: middle;
}

.sa-star-wrap {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  color: #cbd5e1; /* Base empty star grey */
  user-select: none;
}

.sa-star-fill {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  color: #EB7100; /* Active star orange */
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. PRODUCT STAR BADGES (Card Badges & Hero Badges)
   -------------------------------------------------------------------------- */
.product-stars-container {
  cursor: pointer;
}

/* Base / Card Badges (Used on 'Days of Data' and standard product cards) */
.sa-stars-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.sa-stars-badge .sa-partial-stars {
  font-size: 21px;
}

.sa-stars-badge .sa-rating-num {
  color: #003473;
  font-weight: 700;
  font-size: 16px;
}

.sa-stars-badge .sa-count-link {
  color: #009dd6 !important;
  font-size: 14px !important;
  font-weight: 600;
  text-decoration: underline !important;
  white-space: nowrap !important;
  flex-shrink: 0;
  cursor: pointer;
}

.sa-stars-badge .sa-count-link:hover {
  color: #0073b6 !important;
}

/* Hero / Large Badges (Used on containers with class .big) */
.product-stars-container.big .sa-stars-badge,
.sa-badge-large {
  gap: 8px;
}

.product-stars-container.big .sa-partial-stars,
.sa-badge-large .sa-partial-stars {
  font-size: 24px; /* Prominent hero stars */
}

.product-stars-container.big .sa-rating-num,
.sa-badge-large .sa-rating-num {
  font-size: 20px;
  font-weight: 700;
  color: #003473;
}

.product-stars-container.big .sa-count-link,
.sa-badge-large .sa-count-link {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #009dd6 !important;
  text-decoration: underline !important;
  margin-left: 6px;
  cursor: pointer;
}

.product-stars-container.big .sa-count-link:hover,
.sa-badge-large .sa-count-link:hover {
  color: #0073b6 !important;
}


/* Hide the badge counts (e.g. "19 reviews" / "47 reviews"), but leave
   the whole badge clickable so its reviews dialog can still be opened. */
.product-stars-container .sa-count-link,
.sa-badge-large .sa-count-link {
  display: none !important;
}

/* Defensive presentation-only rules for modal controls. The modal is
   generated by a JS file not included with these uploads; confirm its
   exact markup and remove these controls in that source as well. */
#sa-reviews-modal [class*="share" i],
#sa-reviews-modal [class*="filter" i],
#sa-reviews-modal [class*="sort" i],
#sa-reviews-modal [aria-label*="share" i],
#sa-reviews-modal [title*="share" i],
#sa-reviews-modal select {
  display: none !important;
}

/* --------------------------------------------------------------------------
   4. PRODUCT CARD LAYOUT INTEGRATION
   -------------------------------------------------------------------------- */
/* Un-squash 5G Unlimited titleblock on desktop by overriding Bootstrap's .d-flex */
@media (min-width: 992px) {
  #unlimitedPlanCard .plan-head {
    display: contents !important;
  }
}

/* Vertically center the review badge within the days-of-data card flex row */
.plan-card .product-stars-container {
  align-self: center;
}

/* --------------------------------------------------------------------------
   5. FULL-WIDTH REVIEWS SECTION
   -------------------------------------------------------------------------- */
.sa-reviews-section {
  clear: both;
  width: 100%;
  background: #f8fafc;
  border-top: 1px solid #eef2f6;
  border-bottom: 1px solid #eef2f6;
  padding: 3rem 0;
}

.sa-reviews-section.bg-white {
  background: #ffffff;
}

.sa-reviews-header-row {
  width: 100%;
  margin: 0 0 1.5rem 0;
}

.sa-reviews-pink-line {
  max-width: 180px;
}

.sa-reviews-nav-btn {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sa-reviews-nav-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

/* --------------------------------------------------------------------------
   6. HORIZONTAL 4-CARD SCROLL TRACK & CUSTOM SCROLLBAR
   -------------------------------------------------------------------------- */
.sa-reviews-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}

.sa-reviews-track::-webkit-scrollbar {
  height: 6px;
}

.sa-reviews-track::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.sa-reviews-track::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.sa-reviews-track::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* --------------------------------------------------------------------------
   7. REVIEW SCROLL CARDS (4 cards per window on desktop)
   -------------------------------------------------------------------------- */
.review-scroll-card {
  flex: 0 0 calc(25% - 12px) !important;
  min-width: 260px;
  scroll-snap-align: start;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.review-scroll-card .card-stars {
  color: #EB7100;
  font-size: 15px;
  letter-spacing: 1px;
}

.review-scroll-card .card-comment {
  font-size: 14px;
  line-height: 1.5;
  color: #475467;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 1rem;
}

.review-scroll-card .card-footer-wrap {
  padding-top: 8px;
  border-top: 1px solid #edf2f7;
}

@media (max-width: 991px) {
  .review-scroll-card {
    flex: 0 0 calc(50% - 10px) !important;
  }
}

@media (max-width: 575px) {
  .review-scroll-card {
    flex: 0 0 85% !important;
  }
}

/* Mobile responsive adjustments for Shopper Approved badges */
@media (max-width: 767px) {

  /* 1. Scale 5G Unlimited aside badge so 'Reviews' does not overflow */
  .product-stars-container.big .sa-partial-stars,
  .sa-badge-large .sa-partial-stars {
    font-size: 19px !important;
  }

  .product-stars-container.big .sa-rating-num,
  .sa-badge-large .sa-rating-num {
    font-size: 17px !important;
  }

  .product-stars-container.big .sa-count-link,
  .sa-badge-large .sa-count-link {
    font-size: 14px !important;
  }

  /* 2. Days of Data cards: wrap reviews cleanly below data and price */
  .card.plan-card .card-body .d-flex.justify-content-between {
    flex-wrap: wrap !important;
  }

  .card.plan-card .card-body .d-flex.justify-content-between>div:first-child {
    order: 1;
  }

  .card.plan-card .card-body .d-flex.justify-content-between>.text-end {
    order: 2;
  }

  .card.plan-card .card-body .d-flex.justify-content-between>.product-stars-container {
    order: 3;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 10px;
    margin-bottom: 4px;
  }
}
/* --------------------------------------------------------------------------
   8. FIRST-PARTY FIVE-STAR MODAL FOR ALL VOICE PRODUCT BADGES
   -------------------------------------------------------------------------- */
#mobal-sa-five-star-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483002;
  background: rgba(0, 0, 0, .64);
  padding: 18px;
  align-items: center;
  justify-content: center;
}
#mobal-sa-five-star-modal.is-open { display: flex; }
#mobal-sa-five-star-modal .sa-five-star-dialog {
  position: relative;
  width: min(100%, 760px);
  max-height: min(86vh, 850px);
  overflow: auto;
  background: #fff;
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 12px 42px rgba(0,0,0,.25);
}
#mobal-sa-five-star-modal .sa-five-star-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #cbd5e1;
  border-radius: 50%;
  background: #f1f5f9;
  color: #334155;
  font-size: 26px;
  cursor: pointer;
}
#mobal-sa-five-star-modal .sa-five-star-title {
  padding-right: 38px;
  color: #003473;
  font-size: 24px;
  margin: 0 0 8px;
}
#mobal-sa-five-star-modal .sa-five-star-context {
  font-size: 13px;
  line-height: 1.5;
  color: #64748b;
  margin: 0 0 18px;
}
#mobal-sa-five-star-modal .sa-five-star-review {
  padding: 18px 0;
  border-top: 1px solid #e2e8f0;
}
#mobal-sa-five-star-modal .sa-five-star-review-stars {
  color: #EB7100;
  letter-spacing: 1px;
  font-size: 20px;
  margin-right: 8px;
}
#mobal-sa-five-star-modal .sa-five-star-review-date,
#mobal-sa-five-star-modal .sa-five-star-review-location {
  color: #64748b;
  font-size: 13px;
}
#mobal-sa-five-star-modal .sa-five-star-review-comment {
  color: #334155;
  margin: 10px 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
}
#mobal-sa-five-star-modal .sa-five-star-review-author {
  font-weight: 700;
  color: #003473;
}
#mobal-sa-five-star-modal .sa-five-star-empty {
  border-top: 1px solid #e2e8f0;
  padding: 20px 0 4px;
  color: #475569;
}
.product-stars-container[data-sa-five-star-ready="true"] {
  cursor: pointer;
}
.product-stars-container[data-sa-five-star-ready="true"]:focus-visible {
  outline: 2px solid #009dd6;
  outline-offset: 4px;
}
@media (max-width: 600px) {
  #mobal-sa-five-star-modal .sa-five-star-dialog { padding: 22px 18px; }
  #mobal-sa-five-star-modal .sa-five-star-title { font-size: 20px; }
}

/* Protect against legacy widgets that override the HTML hidden attribute. */
#sa-reviews-modal .mobal-sa-not-five-star {
  display: none !important;
}

/* Original Shopper Approved modal: five-star-only review list. A review card
   stays hidden until script verification adds mobal-sa-five-star-visible, so
   lower-rated reviews cannot flash briefly before MutationObserver runs. */
#sa-reviews-modal .SA__customer_reviews:not(.mobal-sa-five-star-visible),
#sa-reviews-modal .SA_review_item:not(.mobal-sa-five-star-visible),
#sa-reviews-modal .SA_review_entry:not(.mobal-sa-five-star-visible),
#sa-reviews-modal .sa-review-item:not(.mobal-sa-five-star-visible) {
  display: none !important;
}
#sa-reviews-modal .sa-review-subset-note {
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 40px 14px 0;
}
#sa-reviews-modal .sa-five-star-review-stars {
  color: #EB7100;
  letter-spacing: 1px;
  font-size: 19px;
  margin: 6px 0;
}
#sa-reviews-modal [class*="share" i],
#sa-reviews-modal [class*="filter" i],
#sa-reviews-modal [class*="sort" i],
#sa-reviews-modal [aria-label*="share" i],
#sa-reviews-modal [title*="share" i],
#sa-reviews-modal select { display: none !important; }


/* Unified presentation for EVERY Shopper Approved product review modal.
   Same shell, same review card markup/styles, and no modal title/header. */
#sa-reviews-modal,
#mobal-sa-five-star-modal {
  background: rgba(0,0,0,.64);
  padding: 18px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
#sa-reviews-modal .sa-modal-dialog,
#mobal-sa-five-star-modal .sa-modal-dialog {
  position: relative;
  box-sizing: border-box;
  width: min(100%, 760px);
  max-width: 760px;
  max-height: min(86vh, 850px);
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  padding: 60px 28px 24px;
  box-shadow: 0 12px 42px rgba(0,0,0,.25);
}
#sa-reviews-modal #close-sa-modal,
#mobal-sa-five-star-modal .sa-five-star-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cbd5e1;
  border-radius: 50%;
  background: #f1f5f9;
  color: #334155;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
}
#sa-reviews-modal #close-sa-modal:hover,
#mobal-sa-five-star-modal .sa-five-star-close:hover {
  background: #e2e8f0;
}
#sa-reviews-modal #close-sa-modal:focus-visible,
#mobal-sa-five-star-modal .sa-five-star-close:focus-visible {
  outline: 2px solid #009dd6;
  outline-offset: 3px;
}
#sa-reviews-modal .sa-five-star-review,
#mobal-sa-five-star-modal .sa-five-star-review {
  display: block;
  box-sizing: border-box;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 10px;
  padding: 18px;
  margin: 0 0 12px;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
  color: #334155;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 1.55;
}
#sa-reviews-modal .sa-review-card-top,
#mobal-sa-five-star-modal .sa-review-card-top {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
#sa-reviews-modal .sa-five-star-review-stars,
#mobal-sa-five-star-modal .sa-five-star-review-stars {
  color: #eb7100;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 1px;
  margin: 0;
}
#sa-reviews-modal .sa-five-star-review-date,
#mobal-sa-five-star-modal .sa-five-star-review-date,
#sa-reviews-modal .sa-five-star-review-location,
#mobal-sa-five-star-modal .sa-five-star-review-location {
  color: #64748b;
  font-size: 13px;
}
#sa-reviews-modal .sa-five-star-review-heading,
#mobal-sa-five-star-modal .sa-five-star-review-heading {
  display:none;
}
#sa-reviews-modal .sa-five-star-review-comment,
#mobal-sa-five-star-modal .sa-five-star-review-comment {
  margin: 0 0 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
  color: #334155;
}
#sa-reviews-modal .sa-review-card-footer,
#mobal-sa-five-star-modal .sa-review-card-footer {
  border-top: 1px solid #edf2f7;
  padding-top: 10px;
}
#sa-reviews-modal .sa-five-star-review-author,
#mobal-sa-five-star-modal .sa-five-star-review-author {
  font-size: 14px;
  font-weight: 700;
  color: #003473;
}
#sa-reviews-modal .sa-review-subset-footer,
#mobal-sa-five-star-modal .sa-review-subset-footer {
display:none;
}
/* The vendor may insert a title, rating summary, filters and toolbars. None
   belongs above the unified list. Preserve individual review contents. */
#sa-reviews-modal #SA_review_wrapper > :is(h1,h2,h3,header),
#sa-reviews-modal #SA_review_wrapper .SA__product_header,
#sa-reviews-modal #SA_review_wrapper .SA__review_header,
#sa-reviews-modal #SA_review_wrapper .SA__rating_summary,
#sa-reviews-modal #SA_review_wrapper .SA__total_reviews,
#sa-reviews-modal #SA_review_wrapper .SA__review_filters,
#sa-reviews-modal #SA_review_wrapper .SA__review_sort,
#sa-reviews-modal #SA_review_wrapper .SA__product_title,
#sa-reviews-modal #SA_review_wrapper .SA__review_title:not(.sa-five-star-review-heading) {
  display: none !important;
}
#sa-reviews-modal #SA__product_reviews { padding: 0; margin: 0; }
@media(max-width:600px) {
  #sa-reviews-modal .sa-modal-dialog,
  #mobal-sa-five-star-modal .sa-modal-dialog { padding: 58px 16px 18px; }
  #sa-reviews-modal .sa-five-star-review,
  #mobal-sa-five-star-modal .sa-five-star-review { padding: 14px; }
}


/* ==========================================================================
   9. IDENTICAL VOICE SIM / eSIM PAGINATION AND COMPLETE REVIEW CARD BORDERS
   ==========================================================================
   Shopper Approved injects extra styles for eSIM review cards. Force the
   same complete four-sided outline and rounded corners as the SIM cards.
   These declarations cover original vendor cards AND our first-party ones.
   Keep the vendor's review list from clipping the card's bottom edge.
*/
#sa-reviews-modal #SA__product_reviews {
  overflow: visible !important;
  padding-bottom: 2px !important;
}
#sa-reviews-modal #SA__product_reviews > .SA__customer_reviews.sa-five-star-review,
#sa-reviews-modal .sa-five-star-review,
#mobal-sa-five-star-modal .sa-five-star-review {
  box-sizing: border-box !important;
  display: block;
  border: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background-color: #fff !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04) !important;
  margin-bottom: 12px !important;
  overflow: visible !important;
}
/* Hidden page items must remain hidden despite the card's display rule. */
#sa-reviews-modal .sa-five-star-review[hidden],
#mobal-sa-five-star-modal .sa-five-star-review[hidden] {
  display: none !important;
}
/* Numbered review pagination: matches the existing eSIM vendor widget.
   Black circular active page, plain digits, unobtrusive chevrons.
   Works identically for our physical SIM and eSIM five-star popups. */
#sa-reviews-modal .sa-review-pagination,
#mobal-sa-five-star-modal .sa-review-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  margin: 18px 0 0;
  padding: 0 0 0 24px;
  font-family: 'Open Sans', sans-serif;
}
#sa-reviews-modal .sa-review-page-numbers,
#mobal-sa-five-star-modal .sa-review-page-numbers {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
#sa-reviews-modal .sa-review-page-number,
#mobal-sa-five-star-modal .sa-review-page-number,
#sa-reviews-modal .sa-review-page-arrow,
#mobal-sa-five-star-modal .sa-review-page-arrow {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #202020;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
}
#sa-reviews-modal .sa-review-page-number.is-active,
#mobal-sa-five-star-modal .sa-review-page-number.is-active {
  background: #202020;
  color: #fff;
}
#sa-reviews-modal .sa-review-page-number:hover:not(.is-active),
#mobal-sa-five-star-modal .sa-review-page-number:hover:not(.is-active),
#sa-reviews-modal .sa-review-page-arrow:hover:not(:disabled),
#mobal-sa-five-star-modal .sa-review-page-arrow:hover:not(:disabled) {
  background: #f1f5f9;
}
#sa-reviews-modal .sa-review-page-arrow,
#mobal-sa-five-star-modal .sa-review-page-arrow {
  font-size: 25px;
  padding-bottom: 3px;
}
#sa-reviews-modal .sa-review-page-ellipsis,
#mobal-sa-five-star-modal .sa-review-page-ellipsis {
  color: #64748b;
  min-width: 18px;
  text-align: center;
}
#sa-reviews-modal .sa-review-page-number:focus-visible,
#mobal-sa-five-star-modal .sa-review-page-number:focus-visible,
#sa-reviews-modal .sa-review-page-arrow:focus-visible,
#mobal-sa-five-star-modal .sa-review-page-arrow:focus-visible {
  outline: 2px solid #009dd6;
  outline-offset: 3px;
}
#sa-reviews-modal .sa-review-page-arrow[hidden],
#mobal-sa-five-star-modal .sa-review-page-arrow[hidden] {
  display: none !important;
}
@media (max-width: 480px) {
  #sa-reviews-modal .sa-review-pagination,
  #mobal-sa-five-star-modal .sa-review-pagination {
    gap: 3px;
    padding-left: 0;
  }
  #sa-reviews-modal .sa-review-page-numbers,
  #mobal-sa-five-star-modal .sa-review-page-numbers { gap: 3px; }
  #sa-reviews-modal .sa-review-page-number,
  #mobal-sa-five-star-modal .sa-review-page-number,
  #sa-reviews-modal .sa-review-page-arrow,
  #mobal-sa-five-star-modal .sa-review-page-arrow {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
}