/* ==========================================================================
   Ahnira – Reviews Widget  |  ahnira-rw.css
   Uses theme CSS variables from storefront-child-ahnira/style.css
   ========================================================================== */

/* ── Section wrapper ── */
.ahnira-rw-section {
  padding: 60px 0 50px;
  background-color: #6b2d5e; /* deep plum */
  position: relative;
  overflow: hidden; /* clips the scrolling marquee track */
}

/* Subtle radial glow for depth */
.ahnira-rw-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,255,255,0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Header ── */
.ahnira-rw-header {
  text-align: center;
  margin-bottom: 36px;
  position: relative;
  z-index: 1;
}

.ahnira-rw-title {
  font-family: var(--font-family, 'Montserrat', sans-serif);
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

.ahnira-rw-subtitle {
  font-family: var(--font-family, 'Montserrat', sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin: 0;
}

/* ── Slider-wrap: full-width, no side padding (marquee bleeds edge-to-edge) ── */
.ahnira-rw-slider-wrap {
  position: relative;
  width: 100%;
  padding: 0;     /* no side padding; arrows are hidden in marquee mode */
  overflow: hidden;
}

/* ── Slider container ── */
.ahnira-rw-slider {
  overflow: hidden;
  position: relative;
  /* Fade edges for a polished "infinite" look */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

/* ── Track – the scrolling strip ──
   Width is intentionally larger than the viewport; JS sets card widths
   and --marquee-dist so the translateX amount = one full original set.
   will-change promotes it to its own compositor layer permanently so
   the animation never triggers a page repaint.                        */
.ahnira-rw-track {
  display: flex;
  align-items: stretch;
  will-change: transform;
}

/* ── Active marquee animation (class added by JS after sizing) ── */
.ahnira-rw-track.is-marquee {
  animation: ahnira-rw-scroll var(--marquee-dur, 30s) linear infinite;
}

/* ── Pause on hover – pure CSS, zero JS latency ──
   Targets the track only when the slider container is hovered.
   No JS event handlers needed → no frame-delay stutter.      */
.ahnira-rw-slider:hover .ahnira-rw-track.is-marquee {
  animation-play-state: paused;
}

/* ── Keyframes: scroll exactly one set width to the left ──
   JS sets --marquee-dist to (cardWidth × originalCount + gaps).
   When we reach -100% of the original set, the duplicate seamlessly
   takes over and the animation loops invisibly.                     */
@keyframes ahnira-rw-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--marquee-dist, 50%))); }
}

/* ── Individual slide ── */
.ahnira-rw-slide {
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 0 12px;
}

/* ── Review card ── */
.ahnira-rw-card {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

/* .ahnira-rw-card:hover {

  background: rgba(255,255,255,0.17);
  box-shadow: 0 8px 32px rgba(0,0,0,0.30);
} */

/* ── Stars ── */
.ahnira-rw-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 14px;
}

.ahnira-rw-star {
  font-size: 18px;
  line-height: 1;
  color: rgba(255,255,255,0.25);
}
.ahnira-rw-star.filled {
  color: var(--gold, #d4af37);
}

/* ── Review text ── */
.ahnira-rw-review-text {
  font-family: var(--font-family, 'Montserrat', sans-serif);
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.92);
  margin: 0 0 18px;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Reviewer row ── */
.ahnira-rw-reviewer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.15);
}

/* Photo / avatar */
.ahnira-rw-photo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.ahnira-rw-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-family: var(--font-family, 'Montserrat', sans-serif);
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}

/* Reviewer meta */
.ahnira-rw-reviewer-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.ahnira-rw-reviewer-name {
  font-family: var(--font-family, 'Montserrat', sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ahnira-rw-reviewer-location {
  font-family: var(--font-family, 'Montserrat', sans-serif);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Google badge */
.ahnira-rw-google-badge {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  opacity: 0.8;
}

/* ── Navigation arrows – hidden in marquee mode (JS hides them),
   but kept here in case theme ever re-enables slider mode.      ── */
.ahnira-rw-arrow {
  display: none;
}

/* ── Dots – hidden in marquee mode ── */
.ahnira-rw-dots {
  display: none;
}

/* ── "Read All Reviews on Google" button ── */
.ahnira-rw-google-cta {
  text-align: center;
  margin-top: 36px;
  position: relative;
  z-index: 1;
}

.ahnira-rw-google-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.55);
  color: rgba(255,255,255,0.9);
  font-family: var(--font-family, 'Montserrat', sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.ahnira-rw-google-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.85);
}

.ahnira-rw-google-btn svg {
  flex-shrink: 0;
  opacity: 0.8;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .ahnira-rw-track.is-marquee {
    animation: none;
  }
}

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

/* Tablet */
@media (max-width: 1024px) {
  .ahnira-rw-section { padding: 48px 0 40px; }
}

/* Mobile */
@media (max-width: 767px) {
  .ahnira-rw-section  { padding: 40px 0 36px; }
  .ahnira-rw-title    { font-size: 1.4rem; }
  .ahnira-rw-subtitle { font-size: 0.65rem; letter-spacing: 0.12em; }
  .ahnira-rw-card     { padding: 18px 16px 16px; }
  .ahnira-rw-review-text { font-size: 0.82rem; -webkit-line-clamp: 6; }
  .ahnira-rw-google-btn { font-size: 0.65rem; padding: 10px 20px; }
}

/* Very small phones */
@media (max-width: 400px) {
  .ahnira-rw-slide { padding: 0 6px; }
}