/**
 * Comovision Reviews – Frontend Styles
 *
 * Basis-Variablen werden pro Feed per Inline-Style überschrieben:
 *   #cvr-feed-1 { --cvr-primary: #4A90D9; --cvr-stars: #F5A623; ... }
 *
 * Theme-Override: alle Regeln lassen sich per CSS-Spezifität überschreiben.
 */

/* ============================================================
   Custom Properties (Defaults)
   ============================================================ */

.cvr-feed {
    --cvr-primary:  #4A90D9;
    --cvr-stars:    #F5A623;
    --cvr-text:     #333333;
    --cvr-bg:       #ffffff;
    --cvr-border:   rgba(0, 0, 0, 0.09);
    --cvr-radius:   8px;
    --cvr-gap:      20px;

    font-family: inherit;
    color: var(--cvr-text);
    box-sizing: border-box;
    line-height: 1.5;
}

.cvr-feed *,
.cvr-feed *::before,
.cvr-feed *::after {
    box-sizing: inherit;
}

/* ============================================================
   Header
   ============================================================ */

.cvr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

.cvr-header-rating {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cvr-header-avg {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--cvr-text);
}

.cvr-header-count {
    font-size: 0.875rem;
    color: #767676; /* WCAG AA: 4.54:1 auf Weiß */
}

/* ============================================================
   Stars
   ============================================================ */

.cvr-stars {
    display: inline-flex;
    gap: 1px;
    line-height: 1;
    vertical-align: middle;
}

.cvr-star {
    font-style: normal;
    font-size: 1.1rem;
    color: #ddd;
    line-height: 1;
}

.cvr-star--filled { color: var(--cvr-stars); }

.cvr-star--half {
    color: var(--cvr-stars);
    opacity: 0.55;
}

.cvr-stars--large .cvr-star {
    font-size: 1.4rem;
}

/* ============================================================
   Review-Karte (gemeinsam für alle Layouts)
   ============================================================ */

.cvr-review {
    background:    var(--cvr-bg);
    border-radius: var(--cvr-radius);
    border:        1px solid var(--cvr-border);
    padding:       20px;
    display:       flex;
    flex-direction: column;
    gap:           12px;
}

/* Header-Zeile (Avatar + Name + Provider-Icon) */
.cvr-review-header {
    display:     flex;
    align-items: flex-start;
    gap:         12px;
}

/* Avatar */
.cvr-avatar {
    width:        40px;
    height:       40px;
    border-radius: 50%;
    object-fit:   cover;
    flex-shrink:  0;
}

.cvr-avatar--initials {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    border-radius:   50%;
    background:      var(--cvr-primary);
    color:           #fff;
    font-weight:     600;
    font-size:       1rem;
    flex-shrink:     0;
    user-select:     none;
}

/* Reviewer-Infos */
.cvr-reviewer-info {
    flex:      1;
    min-width: 0;
}

.cvr-reviewer-name {
    font-weight:    600;
    font-size:      0.9375rem;
    display:        block;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

a.cvr-reviewer-link {
    color:           inherit;
    text-decoration: none;
}

a.cvr-reviewer-link:hover {
    text-decoration: underline;
    color:           var(--cvr-primary);
}

.cvr-review-date {
    font-size:  0.8125rem;
    color:      #767676; /* WCAG AA: 4.54:1 auf Weiß */
    display:    block;
    margin-top: 2px;
}

/* Provider-Icon */
.cvr-provider-badge {
    flex-shrink: 0;
    margin-left: auto;
    display:     flex;
    align-items: center;
}

.cvr-provider-icon {
    display: block;
}

/* Review-Text */
.cvr-review-text {
    font-size:   0.9375rem;
    line-height: 1.65;
    color:       var(--cvr-text);
    margin:      0;
}

/* Der Wrapper schiebt den Aufklapp-Schalter direkt unter den Text und laesst
   die Karte darunter (z. B. die Inhaber-Antwort) unberuehrt. */
.cvr-review-text-wrap {
    min-width: 0;
}

/* In Layouts, die Karten nebeneinander stellen, sind alle Karten einer Reihe so
   hoch wie die hoechste. Ohne Begrenzung entstehen unter kurzen Bewertungen
   grosse Leerflaechen. Die Zeilenzahl kommt aus --cvr-text-lines (Standard 6).
   Die Liste bleibt unbegrenzt – dort stehen die Bewertungen untereinander. */
.cvr-layout-carousel .cvr-review-text,
.cvr-layout-cards .cvr-review-text {
    display:            -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--cvr-text-lines, 6);
    line-clamp:         var(--cvr-text-lines, 6);
    overflow:           hidden;
}

.cvr-layout-carousel .cvr-review-text.is-expanded,
.cvr-layout-cards .cvr-review-text.is-expanded {
    display:            block;
    -webkit-line-clamp: none;
    line-clamp:         none;
    overflow:           visible;
}

/* Wird von cvr-reviews.js nur dort eingeblendet, wo der Text tatsaechlich
   ueber die Begrenzung hinausgeht. */
.cvr-text-toggle {
    display:         inline-block;
    margin-top:      6px;
    padding:         0;
    background:      none;
    border:          none;
    color:           var(--cvr-primary);
    font-size:       0.875rem;
    font-family:     inherit;
    line-height:     1.4;
    cursor:          pointer;
    text-decoration: underline;
}

.cvr-text-toggle:hover,
.cvr-text-toggle:focus-visible {
    text-decoration: none;
}

.cvr-text-toggle[hidden] {
    display: none;
}

/* ============================================================
   Inhaber-Antwort
   ============================================================ */

.cvr-reply {
    background:    rgba(0, 0, 0, 0.035);
    border-left:   3px solid var(--cvr-primary);
    border-radius: 0 var(--cvr-radius) var(--cvr-radius) 0;
    padding:       12px 14px;
    font-size:     0.875rem;
}

.cvr-reply-header {
    display:        flex;
    align-items:    center;
    gap:            10px;
    margin-bottom:  6px;
    flex-wrap:      wrap;
}

.cvr-reply-label {
    font-weight: 600;
    color:       var(--cvr-text);
}

.cvr-reply-date {
    font-size: 0.8125rem;
    color:     #767676;
}

.cvr-reply-text {
    color:       var(--cvr-text);
    line-height: 1.6;
}

/* ============================================================
   "Bewertung schreiben"-Button
   ============================================================ */

.cvr-write-review {
    display:         inline-flex;
    align-items:     center;
    gap:             7px;
    background:      var(--cvr-primary);
    color:           #fff !important;
    padding:         9px 18px;
    border-radius:   var(--cvr-radius);
    text-decoration: none !important;
    font-size:       0.875rem;
    font-weight:     500;
    transition:      opacity 0.2s ease;
    white-space:     nowrap;
}

.cvr-write-review:hover {
    opacity: 0.85;
}

/* ============================================================
   Layout: List
   ============================================================ */

.cvr-layout-list .cvr-reviews {
    display:        flex;
    flex-direction: column;
    gap:            var(--cvr-gap);
}

/* ============================================================
   Layout: Cards (CSS Masonry via columns)
   ============================================================ */

.cvr-layout-cards .cvr-reviews {
    columns:    3;           /* überschrieben per inline style */
    column-gap: var(--cvr-gap);
}

.cvr-layout-cards .cvr-review {
    break-inside:  avoid;
    margin-bottom: var(--cvr-gap);
}

/* ============================================================
   Layout: Carousel
   ============================================================ */

.cvr-carousel-track-wrap {
    overflow: hidden;
}

.cvr-layout-carousel .cvr-reviews {
    display:    flex;
    gap:        var(--cvr-gap);
    transition: transform 0.35s ease;
}

.cvr-layout-carousel .cvr-review {
    /* Breite wird per JS gesetzt (abhängig von data-columns + Viewport) */
    flex-shrink: 0;
    min-width: 0;
}

/* Steuerung */
.cvr-carousel-controls {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             12px;
    margin-top:      20px;
}

.cvr-carousel-btn {
    background:      var(--cvr-primary);
    color:           #fff;
    border:          none;
    border-radius:   50%;
    width:           38px;
    height:          38px;
    cursor:          pointer;
    font-size:       1rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      opacity 0.2s ease;
    padding:         0;
    line-height:     1;
}

.cvr-arrow-icon {
    display: block;
    width:   18px;
    height:  18px;
}

.cvr-carousel-btn:disabled {
    opacity: 0.3;
    cursor:  default;
}

.cvr-carousel-btn:not(:disabled):hover {
    opacity: 0.8;
}

.cvr-carousel-dots {
    display: flex;
    gap:     7px;
}

.cvr-carousel-dot {
    width:         9px;
    height:        9px;
    border-radius: 50%;
    background:    #ddd;
    border:        none;
    cursor:        pointer;
    padding:       0;
    transition:    background 0.2s ease;
}

.cvr-carousel-dot--active,
.cvr-carousel-dot:hover {
    background: var(--cvr-primary);
}

/* ============================================================
   Fehler-Anzeige (nur Admins)
   ============================================================ */

.cvr-error {
    color:       #b00020;
    border:      1px solid #b00020;
    border-radius: 4px;
    padding:     10px 14px;
    font-size:   0.875rem;
    background:  #fff5f5;
}

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

@media (max-width: 768px) {
    .cvr-layout-cards .cvr-reviews {
        columns: 2 !important;
    }
}

@media (max-width: 480px) {
    .cvr-layout-cards .cvr-reviews {
        columns: 1 !important;
    }

    .cvr-header {
        flex-direction: column;
        align-items:    flex-start;
    }
}

/* ============================================================
   Barrierefreiheit: reduzierte Bewegung
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .cvr-layout-carousel .cvr-reviews {
        transition: none;
    }

    .cvr-write-review,
    .cvr-carousel-btn,
    .cvr-carousel-dot {
        transition: none;
    }
}