/*
 * Self-hosted Trustpilot-style widgets (see inc/trustpilot-widgets.php).
 * Pixel-match of the official TrustBox widgets, no external JS, no backlink.
 *
 * NOTE: the compiled theme CSS carries generic `.aol-trust-top span` and
 * `.aol-trust-top img` rules (leftover from the old static markup). The
 * selectors below are class-scoped so they out-specify those and are safe.
 */

/* ------- shared ------- */
.aol-tp-stars { display: inline-flex; align-items: center; line-height: 0; }
.aol-tp-stars-svg { height: 22px; width: auto; display: block; }
.aol-tp-logo { height: 20px; width: auto; display: block; }

/* ------- header-bar "Micro Combo" ------- */
/* Balance the bar's vertical padding (compiled CSS had 15/10 etc. = more top
   than bottom) so the widget sits optically centred. Cart keeps its own
   !important paddings and is unaffected. */
.aol-trust-top { padding-top: 8px; padding-bottom: 8px; }
@media (min-width: 576px) { .aol-trust-top { padding-top: 10px; padding-bottom: 10px; } }
@media (min-width: 992px) { .aol-trust-top { padding-top: 10px; padding-bottom: 10px; } }

.aol-tp-microcombo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  font-family: inherit;
  flex-wrap: nowrap;
}
/* Neutralise the legacy `.aol-trust-top span/img { width: … }` rules (leftover
   from the old static markup) so the widget centres cleanly inside the bar. */
.aol-trust-top .aol-tp-microcombo,
.aol-trust-top .aol-tp-microcombo span,
.aol-trust-top .aol-tp-microcombo img,
.aol-trust-top .aol-tp-microcombo svg { width: auto; }
.aol-trust-top .aol-tp-microcombo .aol-tp-stars { display: inline-flex; }
.aol-tp-microcombo .aol-tp-stars-svg { height: 20px; }
.aol-tp-microcombo .aol-tp-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  width: auto;
}
/* Beat `.aol-trust-top span { display:none; width:147px }` from the compiled CSS */
.aol-trust-top .aol-tp-microcombo .aol-tp-meta,
.aol-trust-top .aol-tp-microcombo .aol-tp-meta span {
  display: inline;
  width: auto;
}
.aol-tp-microcombo .aol-tp-meta { display: inline-flex; }
.aol-tp-microcombo .aol-tp-score strong { font-weight: 700; }
.aol-tp-microcombo .aol-tp-sep { opacity: 0.55; font-weight: 300; }
/* Beat `.aol-trust-top img { width:216px }` from the compiled CSS */
.aol-trust-top .aol-tp-microcombo .aol-tp-logo { width: auto; height: 20px; }

.aol-tp-dark .aol-tp-meta { color: #fff; }
.aol-tp-light .aol-tp-meta { color: #191919; }

@media (max-width: 575px) {
  .aol-tp-microcombo { gap: 8px; }
  .aol-tp-microcombo .aol-tp-meta { font-size: 13px; }
  .aol-tp-microcombo .aol-tp-stars-svg { height: 18px; }
  .aol-tp-microcombo .aol-tp-logo,
  .aol-trust-top .aol-tp-microcombo .aol-tp-logo { height: 18px; }
}

/* ------- summary badge (used by the [trustpilot] shortcode) ------- */
.aol-tp-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.aol-tp-badge .aol-tp-stars-svg { height: 32px; }
.aol-tp-badge-text { font-size: 20px; color: #191919; line-height: 1.2; }
.aol-tp-badge-text strong { font-weight: 700; }
.aol-tp-badge .aol-tp-logo { height: 26px; }
.aol-tp-badge-count { font-size: 14px; color: #6e7684; }
.aol-tp-dark .aol-tp-badge-text { color: #fff; }
.aol-tp-dark .aol-tp-badge-count { color: #d7d7de; }

/* ------- review carousel ------- */
.aol-tp-carousel { text-align: center; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.aol-tp-carousel-head {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.aol-tp-carousel-head .aol-tp-stars-svg { height: 26px; }
.aol-tp-carousel-summary { font-size: 16px; color: #191919; }
.aol-tp-carousel-summary strong { font-weight: 700; }
.aol-tp-carousel-head .aol-tp-logo { height: 22px; }

.aol-tp-swiper { position: relative; overflow: hidden; }
.aol-tp-review-card {
  background: #fff;
  border: 1px solid #e7e9ec;
  border-radius: 4px;
  padding: 24px;
  text-align: left;
  height: 100%;
  box-sizing: border-box;
  min-height: 210px;
  display: flex;
  flex-direction: column;
}
.aol-tp-review-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.aol-tp-review-top .aol-tp-stars-svg { height: 22px; }
.aol-tp-verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #6e7684;
  white-space: nowrap;
}
.aol-tp-review-title {
  font-size: 16px;
  font-weight: 700;
  color: #191919;
  margin: 0 0 8px;
}
.aol-tp-review-body {
  font-size: 15px;
  line-height: 1.5;
  color: #191919;
  margin: 0 0 14px;
  flex: 1 1 auto;
}
.aol-tp-review-meta { font-size: 14px; color: #6e7684; margin: 0; }
.aol-tp-review-name { font-weight: 700; color: #191919; }
.aol-tp-review-date::before { content: "\00b7"; margin: 0 6px; }

/* carousel nav arrows */
.aol-tp-swiper-prev,
.aol-tp-swiper-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e7e9ec;
  cursor: pointer;
  z-index: 5;
}
.aol-tp-swiper-prev { left: -6px; }
.aol-tp-swiper-next { right: -6px; }
.aol-tp-swiper-prev::after,
.aol-tp-swiper-next::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid #191919;
  border-right: 2px solid #191919;
}
.aol-tp-swiper-prev::after { transform: translate(-35%, -50%) rotate(-135deg); }
.aol-tp-swiper-next::after { transform: translate(-65%, -50%) rotate(45deg); }
.swiper-button-disabled { opacity: 0.35; cursor: default; }

.aol-tp-carousel-foot { font-size: 14px; color: #6e7684; margin: 20px 0 0; }