/**
 * reviews.css — Google Reviews social-proof section (Trustindex widget).
 *
 * Plugin: wp-reviews-plugin-for-google.
 * Shortcode: [trustindex no-registration=google].
 * Section context: .sc-section--dark (black bg, white text).
 *
 * Lazy-load: the Trustindex CDN script (loader.js) is NOT enqueued by PHP.
 * Instead, app.js injects it dynamically via IntersectionObserver when the
 * [data-trustindex-lazy] container scrolls into view (rootMargin: 200px ahead).
 * This prevents the CDN fetch on early bounces and keeps the network waterfall clean.
 *
 * Trustindex class conventions observed (v9.x carousel skin):
 *   .ti-widget, .ti-header, .ti-review-item, .ti-name, .ti-date,
 *   .ti-review-content, .ti-review-text, .ti-stars, .ti-star.f,
 *   .ti-write-review, .ti-write-review-button, .ti-powered-by
 *
 * All overrides scoped to .sc-reviews to avoid bleeding into other pages
 * that may embed the same plugin.
 *
 * Scope: descendientes de .sc-reviews para no contaminar otros usos del plugin.
 */

/* ============================================================
   Section layout
   ============================================================ */

.sc-reviews {
  /* background, color, padding all inherited from .sc-section--dark */
  position: relative;
}

.sc-reviews__header {
  text-align: center;
  margin-block-end: 2.5rem;
}

.sc-reviews__title {
  font-family: var(--font-serif, 'Merriweather', Georgia, serif);
  color: #fff;
  margin-block-end: 1rem;
}

.sc-reviews__lead {
  color: rgba(255 255 255 / 0.72);
  font-family: var(--font-sans, 'Overpass', system-ui, sans-serif);
  font-size: 1.125rem;
  max-width: 52ch;
  margin-inline: auto;
}

.sc-reviews__widget {
  width: 100%;
  overflow: hidden;
}

/* ============================================================
   Trustindex dark-section overrides
   ============================================================ */

/* Widget outer wrapper */
.sc-reviews .ti-widget {
  background: transparent !important;
}

/* Force font inside widget */
.sc-reviews .ti-widget,
.sc-reviews .ti-widget *:not(i):not(svg):not(svg *) {
  font-family: var(--font-sans, 'Overpass', system-ui, sans-serif) !important;
}

/* Widget header: rating text + review count — white on dark section bg.
   .ti-header .ti-name is NOT forced to white: Trustindex renders the header
   with its own background (light), so we leave .ti-name to inherit dark text. */
.sc-reviews .ti-widget .ti-rating-text,
.sc-reviews .ti-widget .ti-reviews-count {
  color: #fff !important;
}

/* Gold stars */
.sc-reviews .ti-widget .ti-star.f,
.sc-reviews .ti-widget i.ti-star.f,
.sc-reviews .ti-widget svg.ti-star.f path,
.sc-reviews .ti-widget .ti-stars .ti-star {
  color: var(--color-gold, #D99E39) !important;
  fill: var(--color-gold, #D99E39) !important;
}

/* Rating score (large number, e.g. "4.9") */
.sc-reviews .ti-rating-score,
.sc-reviews .ti-widget .ti-rating {
  color: var(--color-gold, #D99E39) !important;
  font-family: var(--font-serif, 'Merriweather', Georgia, serif) !important;
}

/* Individual review cards — let Trustindex render its own light card bg.
   We don't fight the card internals; white cards pop on the dark section. */
.sc-reviews .ti-widget .ti-review-item {
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0 0 0 / 0.18) !important;
  transition: box-shadow 0.25s ease !important;
}

.sc-reviews .ti-widget .ti-review-item:hover {
  box-shadow: 0 4px 16px rgba(0 0 0 / 0.28) !important;
  transform: none !important;
}

/* Reviewer name — let Trustindex's default dark text handle this (readable on white card) */
/* .sc-reviews .ti-widget .ti-name intentionally NOT overridden */

/* Review date — let Trustindex's default muted text handle this */
/* .sc-reviews .ti-widget .ti-date intentionally NOT overridden */

/* Review body text — let Trustindex's default dark text handle this */
/* .sc-reviews .ti-widget .ti-review-content,
   .sc-reviews .ti-widget .ti-review-text intentionally NOT overridden */

/* Navigation arrows (carousel skin) */
.sc-reviews .ti-widget .ti-widget-arrow,
.sc-reviews .ti-widget [class*="ti-arrow"] {
  border-color: rgba(255 255 255 / 0.3) !important;
  color: #fff !important;
}

.sc-reviews .ti-widget .ti-widget-arrow:hover,
.sc-reviews .ti-widget [class*="ti-arrow"]:hover {
  border-color: var(--color-gold, #D99E39) !important;
  color: var(--color-gold, #D99E39) !important;
}

/* "Write a review" / "See all reviews" CTA.
   Broad selector catches .ti-write-review, .ti-write-review-button, and
   any Trustindex variant that renders near the header logo. */
.sc-reviews .ti-widget .ti-write-review,
.sc-reviews .ti-widget .ti-write-review-button,
.sc-reviews .ti-widget a.ti-write-review-button,
.sc-reviews .ti-widget a[class*="ti-write"],
.sc-reviews .ti-widget [class*="ti-review-button"],
.sc-reviews .ti-widget .ti-header-write-btn,
.sc-reviews .ti-widget a.ti-header-write-btn {
  background: var(--color-gold, #D99E39) !important;
  border: none !important;
  color: #1a1a1a !important;
  border-radius: 999px !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

.sc-reviews .ti-widget .ti-write-review:hover,
.sc-reviews .ti-widget .ti-write-review-button:hover,
.sc-reviews .ti-widget a.ti-write-review-button:hover,
.sc-reviews .ti-widget a[class*="ti-write"]:hover,
.sc-reviews .ti-widget [class*="ti-review-button"]:hover,
.sc-reviews .ti-widget .ti-header-write-btn:hover,
.sc-reviews .ti-widget a.ti-header-write-btn:hover {
  background: var(--color-gold-ink, #a87410) !important;
  color: #fff !important;
}

/* Powered-by badge — keep visible for trust, desaturate for dark bg */
.sc-reviews .ti-powered-by {
  opacity: 0.45;
  filter: invert(1) brightness(1.2);
}

/* Fallback message (plugin not configured / shortcode placeholder) */
.sc-reviews__widget > p {
  font-family: var(--font-sans, 'Overpass', system-ui, sans-serif);
  color: rgba(255 255 255 / 0.6);
  font-style: italic;
  text-align: center;
  padding: 2rem;
}

/* ============================================================
   Loading skeleton — shown while CDN script fetches
   (the [data-trustindex-lazy] div before loader.js fires)
   ============================================================ */

.sc-reviews__loading {
  display: flex;
  gap: 1rem;
  overflow: hidden;
}

.sc-reviews__loading-card {
  flex: 0 0 280px;
  height: 180px;
  background: rgba(255 255 255 / 0.06);
  border: 1px solid rgba(255 255 255 / 0.08);
  border-radius: 8px;
  animation: sc-reviews-pulse 1.6s ease-in-out infinite;
}

.sc-reviews__loading-card:nth-child(2) { animation-delay: 0.2s; }
.sc-reviews__loading-card:nth-child(3) { animation-delay: 0.4s; }

@keyframes sc-reviews-pulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1;   }
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .sc-reviews .ti-widget .ti-review-item,
  .sc-reviews .ti-widget .ti-write-review,
  .sc-reviews .ti-widget [class*="ti-arrow"],
  .sc-reviews__loading-card {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 768px) {
  .sc-reviews__header {
    text-align: left;
  }

  .sc-reviews__lead {
    margin-inline: 0;
  }

  .sc-reviews__loading {
    gap: 0.75rem;
  }

  .sc-reviews__loading-card {
    flex: 0 0 240px;
    height: 160px;
  }
}