/* Estilos para Mi Plugin Reviews Google - Diseño Tarjetas v0.8 (con scroll automático) */

.mprg-reviews-widget-container {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin-bottom: 20px;
    max-width: 100%; /* Asegura que no se desborde del contenedor padre */
}

.mprg-widget-header {
    margin-bottom: 15px;
    padding: 0 10px; /* Pequeño padding para alinear con las tarjetas si hay scroll */
}
.mprg-widget-header h3 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.3em;
    color: #202124; /* Color oscuro de Google */
}
.mprg-average-rating {
    font-size: 0.95em;
    color: #5f6368; /* Color gris de Google */
    margin: 0;
}

/* === Bloque Modificado para Paso 8 === */
.mprg-reviews-list-container {
    display: flex; /* Activa Flexbox */
    overflow-x: hidden; /* OCULTA la barra de scroll horizontal */ /* <--- CAMBIO IMPORTANTE */
    padding: 10px; /* Espacio alrededor de las tarjetas */
    gap: 15px; /* Espacio entre las tarjetas */
    /* scroll-snap-type: x mandatory; */ /* Comentado/Eliminado: No aplica a scroll automático */

    /* Las reglas de scrollbar ya no son necesarias al estar oculto (puedes borrarlas) */
    /*
    &::-webkit-scrollbar {
        height: 8px;
    }
    &::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }
    &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 4px;
    }
    &::-webkit-scrollbar-thumb:hover {
        background: #aaa;
    }
    */
}
/* === Fin del Bloque Modificado === */


.mprg-review-card {
    flex: 0 0 auto; /* Evita que las tarjetas se encojan/crezcan, mantiene su ancho */
    width: 300px; /* Ancho fijo de cada tarjeta (ajusta según necesites) */
    background-color: #fff;
    border: 1px solid #dadce0; /* Borde sutil gris de Google */
    border-radius: 8px; /* Bordes redondeados */
    padding: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); /* Sombra muy sutil */
    /* scroll-snap-align: start; */ /* Comentado/Eliminado: No aplica a scroll automático */
    display: flex;
    flex-direction: column; /* Organiza header y body verticalmente */
    box-sizing: border-box; /* Asegura que padding/border no aumenten el tamaño total */
}

.mprg-card-header {
    display: flex;
    justify-content: space-between; /* Empuja logo a la derecha */
    align-items: flex-start; /* Alinea elementos arriba */
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f3f4; /* Separador ligero */
}

.mprg-author-section {
    display: flex;
    align-items: center; /* Centra verticalmente foto e info */
    gap: 10px; /* Espacio entre foto e info */
    flex-grow: 1; /* Permite que esta sección ocupe espacio */
}

.mprg-author-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%; /* Foto circular */
    object-fit: cover; /* Evita que la imagen se distorsione */
    border: 1px solid #eee; /* Borde ligero opcional */
}
.mprg-author-photo-placeholder {
     width: 48px;
     height: 48px;
     border-radius: 50%;
     background-color: #e0e0e0;
     color: #757575;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5em;
     font-weight: bold;
}


.mprg-author-info {
    display: flex;
    flex-direction: column; /* Nombre arriba, fecha abajo */
}

.mprg-author-name {
    font-weight: 600; /* Semi-bold */
    font-size: 0.95em;
    color: #202124;
    line-height: 1.3;
}

.mprg-review-time {
    font-size: 0.8em;
    color: #5f6368;
    line-height: 1.3;
}

.mprg-google-logo {
    flex-shrink: 0; /* Evita que el logo se encoja */
    margin-left: 10px; /* Espacio a la izquierda del logo */
}
.mprg-google-logo img {
    display: block; /* Evita espacio extra debajo de la imagen */
}

.mprg-card-body {
     flex-grow: 1; /* Permite que esta sección ocupe el espacio vertical restante */
     display: flex;
     flex-direction: column;
}

.mprg-review-rating {
    color: #fbbc05; /* Amarillo de Google */
    font-size: 1.1em; /* Tamaño de las estrellas */
    margin-bottom: 8px;
    line-height: 1; /* Ajusta el espaciado de las estrellas */
}
.mprg-review-rating span { /* Si usas spans para estrellas individuales */
    margin-right: 2px;
}

.mprg-review-text {
    font-size: 0.9em;
    line-height: 1.5;
    color: #3c4043; /* Color de texto principal de Google */
    margin-top: 0;
    margin-bottom: 0; /* Sin margen inferior para que el cuerpo crezca */
     flex-grow: 1; /* Ocupa el espacio restante en la tarjeta */
     overflow: hidden; /* Oculta el texto que desborda (si no se limita en PHP) */
     /* text-overflow: ellipsis; */ /* Añade '...' si el texto se corta (necesita más ajustes) */
}


.mprg-more-reviews-link {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9em;
     padding: 0 10px;
}
.mprg-more-reviews-link a {
    text-decoration: none;
    color: #1a73e8; /* Azul de Google */
    font-weight: 500;
}
.mprg-more-reviews-link a:hover {
    text-decoration: underline;
}

/* Estilos para el caso de no haber reseñas */
.mprg-reviews-widget-no-reviews {
     border: 1px solid #eee;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
    text-align: center;
}
.mprg-reviews-widget-no-reviews h3 {
     margin-top: 0;
    color: #333;
}