/* ===========================================
   Google Reviews Widget – Frontend Styles
   Elementor CSS-Variablen als Standard
   =========================================== */

.grw-wrapper {
    --grw-color-primary:    var(--e-global-color-primary,   #6EC1E4);
    --grw-color-secondary:  var(--e-global-color-secondary, #54595F);
    --grw-color-text:       var(--e-global-color-text,      #3c3c3c);
    --grw-color-bg:         #ffffff;
    --grw-color-star:       #FBBC04;

    --grw-font-primary:     var(--e-global-typography-primary-font-family, inherit);
    --grw-font-size-base:   var(--e-global-typography-text-font-size, 15px);

    --grw-radius:   10px;
    --grw-shadow:   0 2px 14px rgba(0,0,0,.08);
    --grw-spacing:  1.25rem;

    font-family: var(--grw-font-primary);
    font-size:   var(--grw-font-size-base);
    color:       var(--grw-color-text);
    max-width:   100%;
}

/* --- Summary --- */
.grw-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: var(--grw-spacing);
}
.grw-summary-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.grw-summary-rating {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--grw-color-secondary);
}
.grw-summary-count {
    color: var(--grw-color-text);
    opacity: .75;
    font-size: .9em;
}
.grw-summary-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Höhere Spezifität + !important, damit Theme-Link-/Button-Resets
   (z. B. "a { color: ... }") die Schrift nicht unsichtbar machen. */
.grw-wrapper .grw-summary-actions a.grw-review-btn,
.grw-wrapper .grw-summary-actions a.grw-review-btn:visited {
    display: inline-block;
    font-size: .85em;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none !important;
    color: #ffffff !important;
    background-color: var(--grw-color-primary) !important;
    border: none !important;
    border-radius: 20px;
    padding: 7px 16px;
    transition: opacity .2s, transform .2s;
    white-space: nowrap;
}
.grw-wrapper .grw-summary-actions a.grw-review-btn:hover,
.grw-wrapper .grw-summary-actions a.grw-review-btn:focus {
    color: #ffffff !important;
    background-color: var(--grw-color-primary) !important;
    opacity: .88;
    text-decoration: none !important;
}

.grw-powered-by {
    font-size: .8em;
    text-decoration: none;
    color: var(--grw-color-text);
    opacity: .6;
    border: 1px solid currentColor;
    border-radius: 20px;
    padding: 4px 12px;
    transition: opacity .2s;
}
.grw-powered-by:hover { opacity: 1; color: var(--grw-color-primary); }

/* --- Stars --- */
.grw-stars { display: inline-flex; gap: 1px; line-height: 1; }
.grw-star { font-size: 1em; }
.grw-star-full,
.grw-star-half { color: var(--grw-color-star); }
.grw-star-empty { color: #dcdcde; }

/* --- Track / Cards ---
   .grw-track ist das Sichtfenster (überflüssiges Ausblenden),
   .grw-track-inner ist das eigentliche, per JS verschobene Element
   (kontinuierlicher, weicher Lauf statt Sprung-Scroll). */
.grw-track-outer {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}
.grw-track {
    overflow: hidden;
    padding: 4px 2px 12px;
    flex: 1;
}
.grw-track-inner {
    display: flex;
    gap: var(--grw-spacing);
    will-change: transform;
}

.grw-wrapper[data-layout="grid"] .grw-track {
    overflow: visible;
}
.grw-wrapper[data-layout="grid"] .grw-track-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.grw-wrapper[data-layout="list"] .grw-track {
    overflow: visible;
}
.grw-wrapper[data-layout="list"] .grw-track-inner {
    flex-direction: column;
}

.grw-review-card {
    background: var(--grw-color-bg);
    border-radius: var(--grw-radius);
    box-shadow: var(--grw-shadow);
    padding: var(--grw-spacing);
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.grw-wrapper[data-layout="grid"] .grw-review-card,
.grw-wrapper[data-layout="list"] .grw-review-card {
    flex: initial;
    width: auto;
}

.grw-review-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.grw-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}
.grw-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--grw-color-primary);
    color: #fff;
    font-weight: 700;
}
.grw-review-author { display: flex; flex-direction: column; line-height: 1.3; }
.grw-review-time { font-size: .8em; opacity: .6; }

.grw-review-text {
    font-size: .95em;
    line-height: 1.6;
    margin: 0;
}

/* --- Nav Buttons --- */
.grw-nav {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #dcdcde;
    background: #fff;
    color: var(--grw-color-secondary);
    font-size: 1.4em;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, color .2s;
    z-index: 1;
}
.grw-nav:hover {
    background: var(--grw-color-primary);
    color: #fff;
    border-color: var(--grw-color-primary);
}

.grw-no-reviews,
.grw-admin-hint {
    opacity: .7;
    font-style: italic;
}
.grw-admin-hint {
    border: 1px dashed #dcdcde;
    padding: 10px 14px;
    border-radius: 6px;
}

/* --- Responsive: weniger sichtbare Boxen auf kleinen Bildschirmen --- */
@media (max-width: 900px) {
    .grw-wrapper[data-layout="grid"] .grw-track-inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .grw-review-card { flex-basis: 82%; }

    .grw-wrapper[data-layout="grid"] .grw-track-inner {
        grid-template-columns: 1fr;
    }

    .grw-summary {
        justify-content: center;
        text-align: center;
    }
    .grw-summary-main,
    .grw-summary-actions {
        justify-content: center;
        width: 100%;
    }

    .grw-nav { width: 32px; height: 32px; font-size: 1.2em; }
}