/*
 * C4mulo5 – Google Bewertungen Section
 * Autor: Nico Eberhardt – https://nico-eberhardt.de
 */

/* ── CSS-Variablen ───────────────────────────────────────── */
.c4mulo5-google-reviews {
    --gr-star-color:      #FBBC05;
    --gr-star-empty:      #dcdcde;
    --gr-title-color:     #1d2327;
    --gr-score-color:     #1d2327;
    --gr-card-bg:         #ffffff;
    --gr-card-border:     #e0e0e0;
    --gr-card-shadow:     0 2px 8px rgba(0,0,0,.07);
    --gr-card-shadow-hov: 0 4px 16px rgba(0,0,0,.12);
    --gr-name-color:      #1d2327;
    --gr-date-color:      #70757a;
    --gr-text-color:      #3c4043;
    --gr-more-color:      #1a73e8;
    --gr-columns:         3;
}

/* ── Header ──────────────────────────────────────────────── */
.c4mulo5-gr-header {
    text-align: center;
    margin-bottom: 32px;
}

.c4mulo5-gr-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--gr-title-color);
    margin: 0 0 20px;
}

/* Gesamtbewertung */
.c4mulo5-gr-overall {
    display:         inline-flex;
    align-items:     center;
    gap:             20px;
    background:      #fff;
    border:          1px solid var(--gr-card-border);
    border-radius:   12px;
    padding:         14px 24px;
    box-shadow:      var(--gr-card-shadow);
}

.c4mulo5-gr-score-wrap {
    display:     flex;
    align-items: center;
    gap:         12px;
}

.c4mulo5-gr-score {
    font-size:   2.8rem;
    font-weight: 700;
    color:       var(--gr-score-color);
    line-height: 1;
}

.c4mulo5-gr-score-meta {
    display:        flex;
    flex-direction: column;
    gap:            2px;
}

.c4mulo5-gr-stars-big {
    font-size:    1.4rem;
    color:        var(--gr-star-color);
    letter-spacing: 2px;
}

.c4mulo5-gr-count {
    font-size:  0.78rem;
    color:      var(--gr-date-color);
    white-space: nowrap;
}

.c4mulo5-gr-google-badge {
    border-left: 1px solid #e0e0e0;
    padding-left: 20px;
}

/* ── Karten-Grid ─────────────────────────────────────────── */

/* ── ::before / ::after Fix (Bootstrap Clearfix → Grid-Item-Problem) ── */
.c4mulo5-gr-grid::before,
.c4mulo5-gr-grid::after {
    display: none !important;
    content: none !important;
}

.c4mulo5-gr-grid {
    display:               grid;
    grid-template-columns: repeat(var(--gr-columns), 1fr);
    gap:                   20px;
    width:                 100%;
}

/* ── Einzelne Karte ──────────────────────────────────────── */
.c4mulo5-review-card {
    background:    var(--gr-card-bg);
    border:        1px solid var(--gr-card-border);
    border-radius: 10px;
    padding:       20px;
    box-shadow:    var(--gr-card-shadow);
    transition:    box-shadow .2s, transform .2s;
    display:       flex;
    flex-direction: column;
    gap:           10px;
}

.c4mulo5-review-card:hover {
    box-shadow: var(--gr-card-shadow-hov);
    transform:  translateY(-2px);
}

/* Karten-Kopf: Avatar + Name + Google-Icon */
.c4mulo5-rc-head {
    display:     flex;
    align-items: center;
    gap:         12px;
}

.c4mulo5-rc-avatar {
    width:           40px;
    height:          40px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #fff;
    font-weight:     700;
    font-size:       0.85rem;
    flex-shrink:     0;
    background:      #4285F4; /* Default – nth-child überschreibt */
}

/* Avatar-Farben per Karten-Position – kein Inline-Style nötig */
.c4mulo5-review-card:nth-child(1) .c4mulo5-rc-avatar,
.c4mulo5-review-card:nth-child(7) .c4mulo5-rc-avatar  { background: #4285F4; }
.c4mulo5-review-card:nth-child(2) .c4mulo5-rc-avatar,
.c4mulo5-review-card:nth-child(8) .c4mulo5-rc-avatar  { background: #34A853; }
.c4mulo5-review-card:nth-child(3) .c4mulo5-rc-avatar,
.c4mulo5-review-card:nth-child(9) .c4mulo5-rc-avatar  { background: #EA4335; }
.c4mulo5-review-card:nth-child(4) .c4mulo5-rc-avatar,
.c4mulo5-review-card:nth-child(10) .c4mulo5-rc-avatar { background: #FBBC05; }
.c4mulo5-review-card:nth-child(5) .c4mulo5-rc-avatar,
.c4mulo5-review-card:nth-child(11) .c4mulo5-rc-avatar { background: #9C27B0; }
.c4mulo5-review-card:nth-child(6) .c4mulo5-rc-avatar,
.c4mulo5-review-card:nth-child(12) .c4mulo5-rc-avatar { background: #FF5722; }

/* Initialen-Span editierbar im Mesmerize-Editor */
.c4mulo5-rc-initials {
    pointer-events: auto;
    cursor:         text;
}

.c4mulo5-rc-meta {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
}

.c4mulo5-rc-name {
    font-weight:  600;
    font-size:    0.9rem;
    color:        var(--gr-name-color);
    white-space:  nowrap;
    overflow:     hidden;
    text-overflow: ellipsis;
}

.c4mulo5-rc-date {
    font-size: 0.75rem;
    color:     var(--gr-date-color);
}

.c4mulo5-rc-google-icon {
    flex-shrink: 0;
    opacity:     0.8;
}

/* Sterne */
.c4mulo5-rc-stars {
    font-size:      1rem;
    letter-spacing: 1px;
    color:          var(--gr-star-color);
    line-height:    1;
}

/* ★ gelb, ☆ grau */
.c4mulo5-rc-stars {
    unicode-bidi: isolate;
}

/* Bewertungstext */
.c4mulo5-rc-text p {
    font-size:   0.875rem;
    color:       var(--gr-text-color);
    line-height: 1.6;
    margin:      0;
}

/* ── Footer: mehr Bewertungen ────────────────────────────── */
.c4mulo5-gr-footer {
    text-align:  center;
    margin-top:  28px;
}

.c4mulo5-gr-more-link {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    color:          var(--gr-more-color);
    font-size:      0.9rem;
    font-weight:    600;
    text-decoration: none;
    padding:        10px 20px;
    border:         1px solid var(--gr-more-color);
    border-radius:  24px;
    transition:     background .15s, color .15s;
}

.c4mulo5-gr-more-link:hover {
    background: var(--gr-more-color);
    color:      #fff;
}

/* ── Responsive ─────────────────────────────────────────── */

/* Tablet: 2 Spalten */
@media (max-width: 1100px) {
    .c4mulo5-google-reviews { --gr-columns: 2; }
}

/* Mobil: 1 Spalte, alles gestapelt */
@media (max-width: 680px) {
    .c4mulo5-google-reviews { --gr-columns: 1; }

    /* Grid: eine einzige Spalte */
    .c4mulo5-gr-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* Gesamtbewertungs-Badge: vertikal stapeln */
    .c4mulo5-gr-overall {
        flex-direction: column;
        align-items:    center;
        text-align:     center;
        padding:        14px 16px;
        gap:            12px;
    }
    .c4mulo5-gr-score-wrap { justify-content: center; }
    .c4mulo5-gr-google-badge {
        border-left:  none;
        border-top:   1px solid #e0e0e0;
        padding:      10px 0 0;
    }

    /* Kopfbereich */
    .c4mulo5-gr-title    { font-size: 1.4rem; }
    .c4mulo5-gr-header   { margin-bottom: 20px; }

    /* Karten: Kopfzeile besser lesbar */
    .c4mulo5-review-card { padding: 16px; }
    .c4mulo5-rc-head     { gap: 10px; }
    .c4mulo5-rc-avatar   { width: 36px; height: 36px; font-size: .78rem; }
    .c4mulo5-rc-name     { font-size: .85rem; }
    .c4mulo5-rc-date     { font-size: .72rem; }

    /* Sterne etwas kleiner */
    .c4mulo5-rc-stars    { font-size: .92rem; }

    /* Footer-Link: volle Breite */
    .c4mulo5-gr-more-link {
        display: block;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }
}

/* Extra-schmal (z.B. iPhone SE) */
@media (max-width: 380px) {
    .c4mulo5-gr-score       { font-size: 2.2rem; }
    .c4mulo5-gr-stars-big   { font-size: 1.1rem; }
    .c4mulo5-gr-count       { font-size: .72rem; }
}

/* ── Standort-Schlüssel (immer versteckt) ─────────────────── */
.c4mulo5-gr-location-key {
    display: none !important;
}

/* ── Dropdown-Select im Customizer Preview ──────────────── */
.c4m5-gr-location-select {
    display:      inline-block;
    padding:      5px 10px;
    border:       1px solid #ffc107;
    border-radius: 4px;
    background:   #fff;
    font-size:    12px;
    font-weight:  600;
    color:        #1d2327;
    cursor:       pointer;
    max-width:    320px;
    vertical-align: middle;
    margin:       0 8px;
}
.c4m5-gr-location-select:focus {
    outline:      2px solid #ffc107;
    border-color: #e6a800;
}
.c4m5-gr-location-status {
    font-size:    12px;
    font-weight:  600;
    vertical-align: middle;
}

/* ── Controls-JS: Info-Box im Section Settings Panel ─────── */
.c4m5-gr-cp-info {
    margin:        8px 0;
    padding:       8px 10px;
    background:    #fffbeb;
    border-left:   3px solid #FBBC05;
    border-radius: 2px;
    font-size:     11px;
    color:         #50575e;
    line-height:   1.5;
}