/*
 * SW Reviews Slider – Frontend CSS v2.0
 *
 * Fixes:
 * - Pfeile waren NIE sichtbar (fehlende [data-arrows="1"]-Regel)
 * - Mobile: overflow:hidden im CSS (nicht nur JS)
 * - touch-action:pan-y → vertikales Scrollen funktioniert wieder
 * - CSS-Variablen vom Backend durchgeleitet (JS setzt sie, CSS greift sie ab)
 * - Fixe Karten-Höhe auf Mobile deaktiviert (führte zu Übergroß-Problem)
 * - Alle Klassen-Präfixe: swrs-* (konsistent)
 */

/* ============================================================
   1. CSS-Variablen: Defaults (werden per JS vom Backend überschrieben)
   ============================================================ */
.sw-reviews-slider {
  --swrs-accent:       #f7ce7d;
  --swrs-ink:          #343434;
  --swrs-card-bg:      #ffffff;
  --swrs-border:       #e9e9e9;
  --swrs-arrow-bg:     #ffffff;
  --swrs-arrow-color:  #f7ce7d;
  --swrs-radius:       12px;
  --swrs-gap:          20px;
  --swrs-pad-x:        20px;
  --swrs-pad-y:        20px;
  --swrs-shadow:       8;
  --swrs-max-width:    1200px;
  --swrs-name-size:    1rem;
  --swrs-body-size:    1rem;
  --swrs-source-size:  0.88rem;
  --swrs-star-size:    18px;
  --swrs-dot-size:     8px;
  --swrs-transition:   360ms;
  --swrs-outside-y:    0px;
}

/* ============================================================
   2. Wrapper
   ============================================================ */
.sw-reviews-slider {
  position:    relative;
  box-sizing:  border-box;
  max-width:   var(--swrs-max-width);
  width:       100%;
  margin:      var(--swrs-outside-y, 0) auto;
  color:       var(--swrs-ink);
  /* Overflow-Schutz im CSS (nicht nur JS) */
  overflow:    hidden;
  /* Pfeile über dem Track */
  isolation:   isolate;
}

/* ============================================================
   3. Viewport + Track
   ============================================================ */
.sw-reviews-slider .swrs-viewport {
  overflow: hidden;
  width:    100%;
}

.sw-reviews-slider .swrs-track {
  display:       flex;
  flex-wrap:     nowrap;
  gap:           var(--swrs-gap);
  will-change:   transform;
  transition:    transform var(--swrs-transition) ease;
  /* Touch: vertikales Scrollen erlauben */
  touch-action:  pan-y;
  user-select:   none;
  -webkit-user-select: none;
}

/* prefers-reduced-motion: Transition deaktivieren */
@media (prefers-reduced-motion: reduce) {
  .sw-reviews-slider .swrs-track {
    transition: none;
  }
}

/* ============================================================
   4. Slides + Cards
   ============================================================ */
.sw-reviews-slider .swrs-slide {
  flex:       0 0 auto;
  width:      100%;   /* JS berechnet exakte Breite */
  box-sizing: border-box;
}

.sw-reviews-slider .swrs-card {
  display:        flex;
  flex-direction: column;
  height:         100%;
  background:     var(--swrs-card-bg);
  border:         1px solid var(--swrs-border);
  border-radius:  var(--swrs-radius);
  padding:        var(--swrs-pad-y) var(--swrs-pad-x);
  box-shadow:     0 4px calc(var(--swrs-shadow) * 1px) rgba(0, 0, 0, 0.08);
  box-sizing:     border-box;
}

/* ============================================================
   5. Kopfbereich: Avatar + Meta
   ============================================================ */
.sw-reviews-slider .swrs-head {
  display:        flex;
  gap:            12px;
  align-items:    flex-start;
  margin-bottom:  10px;
  padding-bottom: 10px;
  border-bottom:  1px solid var(--swrs-border);
}

.sw-reviews-slider .swrs-avatar {
  flex-shrink:   0;
  width:         56px;
  height:        56px;
  border-radius: calc(var(--swrs-radius) * 0.7);
  object-fit:    cover;
  display:       block;
  background:    #e8e8e8;
}

.sw-reviews-slider .swrs-initials {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  font-weight:     700;
  font-size:       1.2rem;
  color:           #666;
}

.sw-reviews-slider .swrs-meta {
  display:        flex;
  flex-direction: column;
  gap:            3px;
  min-width:      0;
}

.sw-reviews-slider .swrs-name {
  font-size:    var(--swrs-name-size);
  font-weight:  600;
  line-height:  1.3;
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   6. Sterne
   ============================================================ */
.sw-reviews-slider .swrs-stars {
  display:    flex;
  gap:        2px;
  align-items: center;
}

.sw-reviews-slider .swrs-star {
  width:    var(--swrs-star-size);
  height:   var(--swrs-star-size);
  fill:     #d8d8d8;
  flex-shrink: 0;
}

.sw-reviews-slider .swrs-star--on {
  fill: var(--swrs-accent);
}

/* ============================================================
   7. Quelle + Datum
   ============================================================ */
.sw-reviews-slider .swrs-source {
  font-size: var(--swrs-source-size);
  color:     #777;
  display:   flex;
  gap:       4px;
  align-items: center;
  flex-wrap: wrap;
}

.sw-reviews-slider .swrs-source a {
  color:           var(--swrs-accent);
  text-decoration: none;
}
.sw-reviews-slider .swrs-source a:hover,
.sw-reviews-slider .swrs-source a:focus-visible {
  text-decoration: underline;
}

.sw-reviews-slider .swrs-date {
  color:     #aaa;
  font-size: 0.85em;
}

/* ============================================================
   8. Bewertungstext
   ============================================================ */
.sw-reviews-slider .swrs-body {
  font-size:   var(--swrs-body-size);
  line-height: 1.65;
  flex:        1;
}

.sw-reviews-slider .swrs-body p:first-child { margin-top: 0; }
.sw-reviews-slider .swrs-body p:last-child  { margin-bottom: 0; }

/* ============================================================
   9. Pfeile
   FIX: Waren NIE sichtbar – [data-arrows="1"] Regel fehlte komplett.
   ============================================================ */
.sw-reviews-slider .swrs-arrow {
  display:          none; /* Standard: ausgeblendet */
  align-items:      center;
  justify-content:  center;
  position:         absolute;
  top:              50%;
  transform:        translateY(-50%);
  width:            44px;
  height:           44px;
  border-radius:    50%;
  background:       var(--swrs-arrow-bg);
  color:            var(--swrs-arrow-color);
  border:           1px solid rgba(0, 0, 0, 0.10);
  box-shadow:       0 2px 8px rgba(0, 0, 0, 0.10);
  cursor:           pointer;
  z-index:          10;
  transition:       opacity 0.15s ease, background 0.15s ease;
  padding:          0;
}

.sw-reviews-slider .swrs-arrow svg {
  width:  22px;
  height: 22px;
  fill:   currentColor;
  display: block;
}

.sw-reviews-slider .swrs-arrow:hover {
  opacity: 0.85;
}

.sw-reviews-slider .swrs-arrow:focus-visible {
  outline:        2px solid var(--swrs-accent);
  outline-offset: 2px;
}

.sw-reviews-slider .swrs-arrow:disabled {
  opacity: 0.30;
  cursor:  not-allowed;
}

/* BUGFIX: Pfeile sichtbar schalten wenn data-arrows="1" */
.sw-reviews-slider[data-arrows="1"] .swrs-arrow {
  display: flex;
}

.sw-reviews-slider .swrs-prev { left:  -6px; }
.sw-reviews-slider .swrs-next { right: -6px; }

/* Auf Mobile: Pfeile innen (damit nichts außerhalb des Containers liegt) */
@media (max-width: 640px) {
  .sw-reviews-slider .swrs-prev { left:  4px; }
  .sw-reviews-slider .swrs-next { right: 4px; }
}

/* ============================================================
   10. Dots
   ============================================================ */
.sw-reviews-slider .swrs-dots {
  display:         flex;
  gap:             8px;
  justify-content: center;
  margin-top:      16px;
  margin-bottom:      16px;
  flex-wrap:       wrap;
}

.sw-reviews-slider[data-dots="0"] .swrs-dots {
  display: none;
}

.sw-reviews-slider .swrs-dot {
  width:         var(--swrs-dot-size);
  height:        var(--swrs-dot-size);
  min-width:     6px;
  min-height:    6px;
  border-radius: 50%;
  background:    #d0d0d0;
  border:        none;
  padding:       0;
  cursor:        pointer;
  transition:    background 0.2s ease, transform 0.2s ease;
  /* Zugänglichkeit: Click-Fläche vergrößern */
  position:      relative;
}
.sw-reviews-slider .swrs-dot::after {
  content:  '';
  position: absolute;
  inset:    -6px;
}

.sw-reviews-slider .swrs-dot.is-active {
  background: var(--swrs-accent);
  transform:  scale(1.25);
}

.sw-reviews-slider .swrs-dot:hover {
  background: var(--swrs-accent);
}

.sw-reviews-slider .swrs-dot:focus-visible {
  outline:        2px solid var(--swrs-accent);
  outline-offset: 2px;
}

/* ============================================================
   11. Responsive: Mobile Cards volle Höhe (kein Fixed-Height-Bug)
   ============================================================ */
@media (max-width: 640px) {
  .sw-reviews-slider .swrs-card {
    padding: 14px 14px;
  }

  .sw-reviews-slider .swrs-avatar {
    width:  46px;
    height: 46px;
  }
}

/* ============================================================
   12. Zugänglichkeit: Fokus-Sichtbarkeit im Slider
   ============================================================ */
.sw-reviews-slider:focus-visible {
  outline:        2px solid var(--swrs-accent);
  outline-offset: 3px;
  border-radius:  calc(var(--swrs-radius) + 3px);
}