/* =============================================
   Trustify Review Slider Widget - v2
   Scoped to .trustify-slider to prevent bleed
   ============================================= */

.trustify-slider,
.trustify-slider *,
.trustify-slider *::before,
.trustify-slider *::after {
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  line-height: normal !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  list-style: none !important;
  border: none !important;
  background: none !important;
  outline: none !important;
  box-shadow: none !important;
  animation: none !important;
  vertical-align: baseline !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  white-space: normal !important;
  max-width: none !important;
  min-width: 0 !important;
  max-height: none !important;
  min-height: 0 !important;
}

/* --- Font --- */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'),
       url('../fonts/open-sans-regular-webfont.woff2') format('woff2');
}

/* =============================================
   WIDGET CONTAINER
   ============================================= */
.trustify-slider {
  width: 100% !important;
  max-width: 680px !important;
  border-radius: 12px !important;
  background-color: #ffffff !important;
  border: 1px solid #f3f4f6 !important;
  overflow: hidden !important;
  position: relative !important;
  font-family: 'Open Sans', sans-serif !important;
  z-index: 99999 !important;
  display: block !important;
  container-type: inline-size;
  container-name: tfy-slider;
}
.trustify-slider[data-auto-width="true"] {
  max-width: none !important;
}
.trustify-slider[data-bg-transparent="true"] {
  background-color: transparent !important;
}
.trustify-slider[data-no-border="true"] {
  border: none !important;
}

/* =============================================
   HEADER  (stats left · logo right)
   ============================================= */
.trustify-slider .tfy-sl-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid #f3f4f6 !important;
  gap: 12px !important;
}

/* Left group: avg · stars · score label */
.trustify-slider .tfy-sl-header-stats {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.trustify-slider .tfy-sl-header-avg {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #2C3C4F !important;
  display: inline-block !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.trustify-slider .tfy-sl-header-stars {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  flex-wrap: nowrap !important;
}

.trustify-slider .tfy-sl-header-stars img {
  display: inline-block !important;
  position: static !important;
  float: none !important;
  height: 17px !important;
  width: auto !important;
  border: none !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Score label */
.trustify-slider .tfy-sl-header-score {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0179b2 !important;
  display: inline-block !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Right group: count + logo */
.trustify-slider .tfy-sl-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

.trustify-slider .tfy-sl-header-count {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #9ca3af !important;
  display: inline-block !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.trustify-slider .tfy-sl-header-logo {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  padding-left: 12px !important;
  border-left: 1px solid #f3f4f6 !important;
}

.trustify-slider .tfy-sl-header-logo img {
  display: inline-block !important;
  position: static !important;
  float: none !important;
  height: 15px !important;
  width: auto !important;
  border: none !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =============================================
   SLIDER TRACK
   ============================================= */
.trustify-slider .tfy-sl-track-outer {
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
}

.trustify-slider .tfy-sl-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  /* CSS-variable-driven transform: JS sets --tfy-sl-offset via setProperty().
     The var() is consumed here so !important still guards the property while
     JS can update the variable value freely. */
  transform: translateX(var(--tfy-sl-offset, 0%));
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.trustify-slider .tfy-sl-slide {
  min-width: 100% !important;
  width: 100% !important;
  padding: 22px 24px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  position: relative !important;
  min-height: 180px !important;
}

/* =============================================
   SLIDE CONTENT
   ============================================= */

/* Top row: author name (left) + date (right) */
.trustify-slider .tfy-sl-slide-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.trustify-slider .tfy-sl-slide-author-name {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #2C3C4F !important;
  display: block !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.trustify-slider .tfy-sl-slide-top-date {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #9ca3af !important;
  display: block !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.trustify-slider .tfy-sl-slide-stars {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  flex-wrap: nowrap !important;
}

.trustify-slider .tfy-sl-slide-stars img {
  display: inline-block !important;
  position: static !important;
  float: none !important;
  height: 20px !important;
  width: auto !important;
  border: none !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.trustify-slider .tfy-sl-slide-text {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #374151 !important;
  text-align: left !important;
  display: block !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  word-break: break-word !important;
  white-space: pre-wrap !important;
}

/* =============================================
   NAVIGATION
   ============================================= */
.trustify-slider .tfy-sl-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 16px 14px !important;
  border-top: 1px solid #f3f4f6 !important;
}

.trustify-slider .tfy-sl-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid #e5e7eb !important;
  background-color: #ffffff !important;
  cursor: pointer !important;
  user-select: none !important;
  color: #6b7280 !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0 !important;
}

.trustify-slider .tfy-sl-btn:hover {
  background-color: #f9fafb !important;
  border-color: #0179b2 !important;
  color: #0179b2 !important;
}

.trustify-slider .tfy-sl-btn:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

.trustify-slider .tfy-sl-btn svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
}

/* =============================================
   DOTS
   ============================================= */
.trustify-slider .tfy-sl-dots {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex: 1 !important;
  flex-wrap: wrap !important;
}

.trustify-slider .tfy-sl-dot {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background-color: #d1d5db !important;
  cursor: pointer !important;
  /* transition/transform not !important — we own these, no reset needed */
  transition: background-color 0.2s ease, transform 0.2s ease;
  border: none !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

.trustify-slider .tfy-sl-dot.tfy-sl-dot-active {
  background-color: #0179b2 !important;
  transform: scale(1.3);
}

/* =============================================
   NO REVIEWS STATE
   ============================================= */
.trustify-slider .tfy-sl-empty {
  padding: 32px 24px !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #6b7280 !important;
  text-align: center !important;
  display: block !important;
  background: none !important;
  border: none !important;
}

/* =============================================
   RESPONSIVE  (container query — reacts to the
   widget's own width, not the viewport)
   ============================================= */
@container tfy-slider (max-width: 480px) {
  .tfy-sl-header {
    padding: 10px 14px !important;
    gap: 8px !important;
  }
  /* Hide score label and review count; keep avg + stars + logo */
  .tfy-sl-header-score,
  .tfy-sl-header-count {
    display: none !important;
  }
  .tfy-sl-header-right {
    gap: 0 !important;
  }
  /* Remove left divider since count is hidden */
  .tfy-sl-header-logo {
    padding-left: 0 !important;
    border-left: none !important;
  }
  .tfy-sl-slide {
    padding: 16px 16px 14px !important;
  }
  .tfy-sl-nav {
    padding: 6px 12px 12px !important;
  }
}

/* Fallback for browsers without container query support */
@media (max-width: 540px) {
  .trustify-slider .tfy-sl-header {
    padding: 10px 14px !important;
    gap: 8px !important;
  }
  .trustify-slider .tfy-sl-header-score,
  .trustify-slider .tfy-sl-header-count {
    display: none !important;
  }
  .trustify-slider .tfy-sl-header-right {
    gap: 0 !important;
  }
  .trustify-slider .tfy-sl-header-logo {
    padding-left: 0 !important;
    border-left: none !important;
  }
  .trustify-slider .tfy-sl-slide {
    padding: 16px 16px 14px !important;
  }
  .trustify-slider .tfy-sl-nav {
    padding: 6px 12px 12px !important;
  }
}

/* =============================================
   DARK MODE
   ============================================= */
.trustify-slider[data-mode="dark"] {
  background-color: #1F2A38 !important;
  border-color: #334155 !important;
}

.trustify-slider[data-mode="dark"] .tfy-sl-header {
  border-bottom-color: #2d3f52 !important;
}

.trustify-slider[data-mode="dark"] .tfy-sl-header-logo {
  border-left-color: #2d3f52 !important;
}

.trustify-slider[data-mode="dark"] .tfy-sl-header-avg {
  color: #f9fafb !important;
}

.trustify-slider[data-mode="dark"] .tfy-sl-header-score {
  color: #0088FF !important;
}

.trustify-slider[data-mode="dark"] .tfy-sl-header-count {
  color: #6b7280 !important;
}

.trustify-slider[data-mode="dark"] .tfy-sl-slide-footer {
  border-top-color: #2d3f52 !important;
}

.trustify-slider[data-mode="dark"] .tfy-sl-slide-text {
  color: #d1d5db !important;
}

.trustify-slider[data-mode="dark"] .tfy-sl-slide-author-name {
  color: #f3f4f6 !important;
}

.trustify-slider[data-mode="dark"] .tfy-sl-slide-top-date {
  color: #6b7280 !important;
}

.trustify-slider[data-mode="dark"] .tfy-sl-nav {
  border-top-color: #2d3f52 !important;
}

.trustify-slider[data-mode="dark"] .tfy-sl-btn {
  background-color: #273444 !important;
  border-color: #334155 !important;
  color: #9ca3af !important;
}

.trustify-slider[data-mode="dark"] .tfy-sl-btn:hover {
  background-color: #2d3f52 !important;
  border-color: #0088FF !important;
  color: #0088FF !important;
}

.trustify-slider[data-mode="dark"] .tfy-sl-dot {
  background-color: #334155 !important;
}

.trustify-slider[data-mode="dark"] .tfy-sl-dot.tfy-sl-dot-active {
  background-color: #0088FF !important;
}

.trustify-slider[data-mode="dark"] .tfy-sl-empty {
  color: #6b7280 !important;
}