/*
 * Plugin Name: My Custom Google Reviews
 * Description: Basic styling for Google Reviews.
 * Version: 1.0.0
 * Author: Dein Name
 */

/* ------------------------------------------------------------------- */
/* 1. GLOBALE BOX-MODELL DEFINITION (WICHTIG!) */
/* Stellt sicher, dass Padding und Border in der Breite und Höhe enthalten sind */
/* ------------------------------------------------------------------- */
.mgrp-widget-wrapper,
.mgrp-overall-rating,
.mgrp-overall-g-logo,
.mgrp-overall-text,
.mgrp-overall-value,
.mgrp-overall-stars,
.mgrp-overall-count,
.mgrp-reviews-container,
.mgrp-review-item,
.mgrp-review-header,
.mgrp-reviewer-photo-wrapper,
.mgrp-reviewer-photo,
.mgrp-google-badge,
.mgrp-author-info,
.mgrp-reviewer-name,
.mgrp-review-stars-row,
.mgrp-review-rating,
.mgrp-review-text,
.mgrp-review-text-short,
.mgrp-review-text-full,
.mgrp-read-more,
.mgrp-read-less,
.mgrp-source-and-date-link,
.mgrp-review-date,
.mgrp-write-review-link,
.swiper-button-next, /* Hinzugefügt für Swiper */
.swiper-button-prev, /* Hinzugefügt für Swiper */
.swiper-pagination /* Hinzugefügt für Swiper */ {
    box-sizing: border-box !important;
}

/* ------------------------------------------------------------------- */
/* 2. HAUPT-LAYOUT-ANPASSUNGEN FÜR GLEICHE BREITEN */
/* ------------------------------------------------------------------- */

/* Der Haupt-Wrapper für das gesamte Widget (Gesamtinfo, Grid, Button) */
.mgrp-widget-wrapper {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    padding-left: 8px !important; /* Globaler Padding */
    padding-right: 8px !important; /* Globaler Padding */
    max-width: 1200px !important; /* Maximale Breite für Desktop */
    margin-left: auto !important; /* Zentrierung auf Desktop */
    margin-right: auto !important; /* Zentrierung auf Desktop */
}

/* ------------------------------------------------------------------- */
/* 3. Styling für die Gesamtbewertung (Sterne-Durchschnitt und Anzahl) */
/* ------------------------------------------------------------------- */
.mgrp-overall-rating {
    text-align: center !important;
    margin-bottom: 20px !important;
    font-size: 1.2em !important;
    font-weight: bold !important;
    padding: 10px 15px !important;
    border: 1px solid #eee !important;
    border-radius: 8px !important;
    background-color: #f9f9f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

.mgrp-overall-rating .dashicons {
    font-size: 20px !important;
    color: #f5b000 !important;
    vertical-align: middle !important;
}

.mgrp-overall-rating .dashicons-star-empty {
    color: #ccc !important;
}

/* Styling für das Google G Logo in der Gesamtbewertung - Globale Regeln (Desktop) */
.mgrp-overall-g-logo {
    height: 24px !important;
    width: auto !important;
    vertical-align: middle !important;
    margin-right: 5px !important;
    max-width: 20px !important;
    object-fit: contain !important;
    display: inline-block !important;
}

/* Styling für den Text "Ausgezeichnet auf Google" */
.mgrp-overall-text {
    font-weight: bold !important;
    color: #333 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    display: inline-block !important;
    margin-right: 5px !important;
}

.mgrp-overall-value {
    vertical-align: middle !important;
    color: #000 !important;
    font-weight: bold !important;
}

.mgrp-overall-count {
    font-weight: normal !important;
    font-size: 0.9em !important;
    color: #555 !important;
    vertical-align: middle !important;
}

.mgrp-overall-stars {
    vertical-align: middle !important;
    display: inline-block !important;
    margin-left: 5px !important;
    margin-top: -5px !important;
}

/* ------------------------------------------------------------------- */
/* 4. Container für die einzelnen Bewertungen - Globale Slider-Einstellungen */
/* ------------------------------------------------------------------- */
.mgrp-reviews-container.swiper { /* Spezifischer für Swiper */
    width: 100% !important; /* Swiper-Container nimmt volle Breite ein */
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important; /* Wichtig für Swiper, um Scrollleisten zu verstecken */
    padding-bottom: 20px !important; /* Abstand für Pagination (falls genutzt) */
}

/* Der Wrapper für die Slides, Swiper verwaltet dies */
.swiper-wrapper {
    display: flex !important;
    box-sizing: content-box !important; /* Swiper Standard */
}

/* Einzelnes Bewertungselement - Jetzt ein Swiper-Slide */
.mgrp-review-item.swiper-slide { /* Spezifischer für Swiper */
    border: 1px solid var(--mgrp-border-color, #eee) !important;
    background-color: var(--mgrp-background-color, #fff) !important;
    border-radius: var(--mgrp-border-radius, 8px) !important;
    padding: 20px !important; /* Etwas mehr Padding für den Inhalt */
    box-shadow: var(--mgrp-box-shadow, 0 2px 5px rgba(0,0,0,0.05)) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Inhalt oben ausrichten */
    flex-shrink: 0 !important; /* Wichtig: Slide soll nicht schrumpfen */
    min-width: unset !important; /* Wichtig: Alte min-width entfernen */

    /* NEU: Einheitliche Höhe für alle Slides (flexibel anpassbar) */
    min-height: 250px !important; /* Beispiel: Mindesthöhe festlegen, kann angepasst werden */
    height: auto !important; /* Ermöglicht Höhenwachstum bei mehr Inhalt */

    /* Sicherstellen, dass Swiper die Breite kontrolliert */
    /*width: 100% !important;*/
    max-width: 100% !important;
}


/* ------------------------------------------------------------------- */
/* 5. Elemente innerhalb einer einzelnen Bewertung */
/* ------------------------------------------------------------------- */
.mgrp-review-header {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    gap: 10px !important;
    position: relative !important;
}

/* Wrapper für Foto und Google G Badge */
.mgrp-reviewer-photo-wrapper {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

/* Profilbild des Rezensenten */
.mgrp-reviewer-photo {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Google "G" Badge am unteren rechten Rand des Fotos */
.mgrp-google-badge {
    position: absolute !important;
    bottom: -9px !important;
    left: 26px !important;
    width: 30px !important;
    height: 30px !important;
    background-color: #fff !important;
    border-radius: 50% !important;
    border: 1px solid #eee !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
    display: block !important;
    z-index: 2 !important;
    background-image: url("../images/google-g-logo.png") !important;
    background-size: 87% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Name des Rezensenten */
.mgrp-reviewer-name {
    line-height: 1.3em !important;
}

/* Neue Zeile für die Sterne im einzelnen Review-Item */
.mgrp-review-stars-row {
    margin-top: 5px !important;
    margin-bottom: 10px !important;
}

.mgrp-review-rating .dashicons {
    color: #f5b000 !important;
    line-height: 1 !important;
}
.mgrp-review-rating .dashicons-star-empty {
    color: #ccc !important;
}

.mgrp-review-text {
    font-size: 0.95em !important;
    line-height: 1.5 !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    flex-grow: 1 !important; /* Lässt den Textbereich den verfügbaren Platz ausfüllen */
    overflow: hidden !important; /* Verhindert Überlauf */
}

.mgrp-source-and-date-link {
    font-size: 0.85em !important;
    color: #777 !important;
    margin-top: auto !important; /* Schiebt diesen Bereich nach unten, falls Platz */
}

/* ------------------------------------------------------------------- */
/* 6. Styling für den "Bewertung schreiben" Button */
/* ------------------------------------------------------------------- */
.mgrp-write-review-link {
    text-align: center !important;
    margin-top: 20px !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}
.mgrp-write-review-link a {
    display: inline-block !important;
    background-color: #4285F4 !important;
    color: #fff !important;
    padding: 10px 20px !important;
    border-radius: 5px !important;
    text-decoration: none !important;
    transition: background-color 0.3s ease !important;
}
.mgrp-write-review-link a:hover {
    background-color: #3367D6 !important;
}

/* ------------------------------------------------------------------- */
/* 7. Responsive Anpassungen (Media Queries) */
/* ------------------------------------------------------------------- */

/* Regeln für Tablets (max-width: 992px) */
@media (max-width: 992px) {
    .mgrp-widget-wrapper {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Gesamtbewertungs-Header für Tablets */
    .mgrp-overall-rating {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 10px 15px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Google G Logo in der Kopfzeile für Tablets */
    .mgrp-overall-g-logo {
        height: 22px !important;
        max-width: 18px !important;
    }

    /* Schriftgrößen auf Tablets ggf. leicht anpassen */
    .mgrp-overall-text,
    .mgrp-overall-value,
    .mgrp-overall-count,
    .mgrp-overall-stars {
        font-size: 1em !important;
    }

    /* Slider-Container für Tablets (Swiper steuert die Breite der Slides) */
    .mgrp-reviews-container.swiper {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Breite der einzelnen Bewertungs-Items wird jetzt vom Swiper JS gesteuert */
    .mgrp-review-item.swiper-slide {
        /* Keine feste width hier mehr, Swiper JS übernimmt das */
        width: 100% !important; /* Sicherstellen, dass keine alte Regel greift */
        max-width: 100% !important;
        min-width: unset !important;
    }

    /* "Bewertung schreiben" Button für Tablets */
    .mgrp-write-review-link {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Regeln für Smartphones (max-width: 600px) */
@media (max-width: 600px) {
    .mgrp-widget-wrapper {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Optimierung für den Gesamtbewertungsbereich auf Mobiltelefonen */
    .mgrp-overall-rating {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 10px 10px !important;
        font-size: 1em !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 0 !important;
    }

    /* Erste Zeile: Google G Logo und Text "Ausgezeichnet auf Google" */
    .mgrp-overall-g-logo {
        height: 28px !important;
        max-width: 24px !important;
        margin-right: 5px !important;
    }
    .mgrp-overall-text {
        white-space: normal !important;
        margin-right: 0 !important;
    }

    /* Zweite Zeile: Wert, Sterne und Anzahl der Bewertungen */
    .mgrp-overall-value {
        display: inline-block !important;
        vertical-align: middle !important;
        font-weight: bold !important;
        color: #000 !important;
        margin-right: 5px !important;
        margin-top: 5px !important;
    }
    .mgrp-overall-stars {
        display: inline-block !important;
        vertical-align: middle !important;
        margin-left: 0 !important;
        margin-right: 5px !important;
    }
    .mgrp-overall-count {
        display: inline-block !important;
        vertical-align: middle !important;
        margin-left: 0 !important;
    }

    /* Slider-Container für Smartphones (Swiper steuert die Breite der Slides) */
    .mgrp-reviews-container.swiper {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Breite der einzelnen Bewertungs-Items wird jetzt vom Swiper JS gesteuert */
    .mgrp-review-item.swiper-slide {
        /* Keine feste width hier mehr, Swiper JS übernimmt das */
        width: 100% !important; /* Sicherstellen, dass keine alte Regel greift */
        max-width: 100% !important;
        min-width: unset !important;
    }

    /* Schriftgrößenanpassungen für bessere Lesbarkeit */
    .mgrp-review-text {
        font-size: 0.9em !important;
    }

    .mgrp-reviewer-name {
        font-size: 1em !important;
    }

    /* Anpassung des "Bewertung schreiben" Buttons */
    .mgrp-write-review-link {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .mgrp-write-review-link a {
        padding: 8px 15px !important;
        font-size: 0.9em !important;
    }
}

/* --- Styling für "weiterlesen" / "weniger anzeigen" Links --- */
.mgrp-read-more,
.mgrp-read-less {
    color: #4CAF50 !important;
    text-decoration: none !important;
    font-weight: bold !important;
    cursor: pointer !important;
    margin-left: 5px !important;
}

.mgrp-read-more:hover,
.mgrp-read-less:hover {
    text-decoration: underline !important;
}

/* ------------------------------------------------------------------- */
/* 8. ZUSÄTZLICHE REGELN FÜR LAYOUT UND VARIABLEN */
/* ------------------------------------------------------------------- */

:root {
    --mgrp-columns: 1;
    --mgrp-individual-review-star-size: 1.4em;
    /* NEUE Standardfarben für das Plugin */
    --mgrp-background-color: #fff;
    --mgrp-border-color: #eee;
    --mgrp-border-radius: 8px;
    --mgrp-box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    --mgrp-primary-color: #4285F4; /* Google Blau */
}

.mgrp-review-rating .dashicons-star-filled,
.mgrp-overall-stars .dashicons-star-filled,
.mgrp-review-rating .dashicons-star-half,
.mgrp-overall-stars .dashicons-star-half {
    color: #f5b000 !important;
}
.mgrp-review-rating .dashicons-star-empty,
.mgrp-overall-stars .dashicons-star-empty {
    color: #ccc !important;
}

.mgrp-review-item .mgrp-review-rating .dashicons {
    font-size: var(--mgrp-individual-review-star-size) !important;
    width: var(--mgrp-individual-review-star-size) !important;
    height: var(--mgrp-individual-review-star-size) !important;
    line-height: var(--mgrp-individual-review-star-size) !important;
}

/* ------------------------------------------------------------------- */
/* 9. Swiper Navigation (Pfeile) und Pagination (Punkte) Styling (Optional) */
/* ------------------------------------------------------------------- */

/* Swiper Navigationspfeile */
.mgrp-reviews-container .swiper-button-next,
.mgrp-reviews-container .swiper-button-prev {
    color: var(--mgrp-primary-color, #4285F4) !important; /* Farbe passend zum Google Blau */
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    font-size: 20px !important; /* Größe des Pfeilsymbols */
    width: 40px !important; /* Fläche für den Klick */
    height: 40px !important; /* Fläche für den Klick */
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    transition: background-color 0.3s ease !important;
}

.mgrp-reviews-container .swiper-button-next:hover,
.mgrp-reviews-container .swiper-button-prev:hover {
    background-color: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
}

.mgrp-reviews-container .swiper-button-prev {
    left: 10px !important; /* Abstand vom linken Rand */
}

.mgrp-reviews-container .swiper-button-next {
    right: 10px !important; /* Abstand vom rechten Rand */
}

/* Swiper Pagination Punkte */
.mgrp-reviews-container .swiper-pagination {
    bottom: 0px !important; /* Position am unteren Rand des Containers */
    text-align: center !important;
    padding-top: 10px !important; /* Abstand zu den Slides */
}

.mgrp-reviews-container .swiper-pagination-bullet {
    background: #ccc !important; /* Farbe der inaktiven Punkte */
    opacity: 1 !important;
    width: 8px !important; /* Größe der Punkte */
    height: 8px !important; /* Größe der Punkte */
    margin: 0 4px !important; /* Abstand zwischen den Punkten */
    transition: background-color 0.3s ease !important;
}

.mgrp-reviews-container .swiper-pagination-bullet-active {
    background: var(--mgrp-primary-color, #4285F4) !important; /* Farbe des aktiven Punktes */
}