/**
 * Public styles for Multi-Source Reviews Pro
 */

/* General Styles */
.msrp-container {
    margin: 20px 0;
    font-family: inherit;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.msrp-container * {
    box-sizing: border-box;
}

.msrp-container a {
    text-decoration: none;
}

.msrp-review {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.msrp-review:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.msrp-review-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
}

.msrp-review-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #666;
    font-size: 18px;
}

.msrp-review-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.msrp-review-author {
    flex-grow: 1;
}

.msrp-review-name {
    font-weight: bold;
    margin: 0 0 5px;
    font-size: 16px;
}

.msrp-review-source {
    font-size: 12px;
    color: #777;
    margin: 0 0 5px;
}

.msrp-review-date {
    font-size: 12px;
    color: #999;
    margin: 0;
}

.msrp-review-rating {
    display: flex;
    margin-bottom: 10px;
}

.msrp-star {
    color: #FFB900;
    font-size: 18px;
    margin-right: 2px;
}

.msrp-star:last-child {
    margin-right: 0;
}

.msrp-star-empty {
    color: #DDD;
}

.msrp-review-title {
    font-weight: bold;
    margin: 0 0 10px;
    font-size: 16px;
}

.msrp-review-content {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #444;
}

/* Pinned Review */
.msrp-review-pinned {
    border: 2px solid #4285F4;
    position: relative;
}

.msrp-review-pinned::before {
    content: "★";
    position: absolute;
    top: -10px;
    right: 20px;
    background: #4285F4;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* Review Source Icons */
.msrp-source-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 5px;
}

.msrp-source-google .msrp-source-icon {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path d="M12 0C5.37 0 0 5.37 0 12s5.37 12 12 12 12-5.37 12-12S18.63 0 12 0zm0 19.2c-3.97 0-7.2-3.23-7.2-7.2S8.03 4.8 12 4.8s7.2 3.23 7.2 7.2-3.23 7.2-7.2 7.2z" fill="%234285F4"/><path d="M16.8 12c0 .27-.03.52-.07.78l-3.76-1.52V7.8c0-.66-.54-1.2-1.2-1.2s-1.2.54-1.2 1.2v4.55l-3.76 1.52c-.05-.26-.07-.51-.07-.78 0-2.65 2.15-4.8 4.8-4.8s4.8 2.15 4.8 4.8z" fill="%234285F4"/></svg>');
}

.msrp-source-facebook .msrp-source-icon {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" fill="%233b5998"/></svg>');
}

.msrp-source-custom .msrp-source-icon {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path d="M12 0a12 12 0 100 24 12 12 0 000-24zm0 22a10 10 0 110-20 10 10 0 010 20z" fill="%2334A853"/><path d="M18 9h-4V5a2 2 0 00-4 0v4H6a2 2 0 000 4h4v4a2 2 0 004 0v-4h4a2 2 0 000-4z" fill="%2334A853"/></svg>');
}

/* Masonry Layout */
.msrp-masonry {
    position: relative;
    margin: 0 -10px;
}

.msrp-masonry .msrp-review {
    width: calc(33.333% - 20px);
    margin: 0 10px 20px;
}

.msrp-masonry .msrp-review-sizer {
    width: calc(33.333% - 20px);
}

/* Masonry Drift Animation */
.msrp-masonry-drift {
    overflow: hidden;
    position: relative;
}

.msrp-masonry-drift::before,
.msrp-masonry-drift::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px;
    z-index: 1;
    pointer-events: none;
}

.msrp-masonry-drift::before {
    left: 0;
    background: linear-gradient(to right, #fff 0%, rgba(255,255,255,0) 100%);
}

.msrp-masonry-drift::after {
    right: 0;
    background: linear-gradient(to left, #fff 0%, rgba(255,255,255,0) 100%);
}

.msrp-masonry-drift .msrp-review {
    animation: msrpDrift 20s linear infinite;
    margin-bottom: 0;
}

@keyframes msrpDrift {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Carousel Layout */
.msrp-carousel-container {
    position: relative;
    padding: 0 30px;
}

.msrp-carousel {
    overflow: hidden;
    position: relative;
}

.msrp-carousel .msrp-reviews {
    display: flex;
    transition: transform 0.3s ease;
}

.msrp-carousel .msrp-review {
    flex: 0 0 auto;
    padding: 15px;
    margin: 10px;
    transition: transform 0.3s ease;
}

.msrp-carousel-prev,
.msrp-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.msrp-carousel-prev {
    left: 0;
}

.msrp-carousel-next {
    right: 0;
}

.msrp-carousel-prev.disabled,
.msrp-carousel-next.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Grid Layout */
.msrp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

/* List Layout */
.msrp-list .msrp-review {
    margin-bottom: 15px;
}

/* Highlight Card */
.msrp-highlight-container {
    position: relative;
    padding: 0 30px;
}

.msrp-highlight {
    position: relative;
    min-height: 200px;
}

.msrp-highlight .msrp-review {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: none;
}

.msrp-highlight-prev,
.msrp-highlight-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.msrp-highlight-prev {
    left: 0;
}

.msrp-highlight-next {
    right: 0;
}

/* Wall Collage */
.msrp-wall {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.msrp-wall .msrp-review {
    width: calc(33.333% - 20px);
    margin: 10px;
}

.msrp-wall .msrp-review:nth-child(5n+1) {
    width: calc(50% - 20px);
}

.msrp-wall .msrp-review:nth-child(5n+3) {
    width: calc(25% - 20px);
}

/* Filters */
.msrp-filters {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.msrp-filters select {
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    font-size: 14px;
}

/* Pagination */
.msrp-pagination {
    text-align: center;
    margin-top: 20px;
}

.msrp-load-more {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4285F4;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.msrp-load-more:hover {
    background-color: #3367d6;
}

.msrp-load-more:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* Reviews Form */
.msrp-form-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.msrp-form-title {
    font-size: 24px;
    margin: 0 0 20px;
    text-align: center;
}

.msrp-form-message {
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    display: none;
}

.msrp-message-error {
    background-color: #FEE;
    border: 1px solid #F99;
    color: #C00;
}

.msrp-message-success {
    background-color: #EFE;
    border: 1px solid #9E9;
    color: #080;
}

.msrp-form-group {
    margin-bottom: 20px;
}

.msrp-form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.msrp-form-group input,
.msrp-form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.msrp-form-group textarea {
    min-height: 100px;
}

.msrp-rating-select {
    display: flex;
    margin-bottom: 10px;
}

.msrp-rating-select .msrp-star {
    font-size: 24px;
    cursor: pointer;
    color: #ddd;
}

.msrp-rating-select .msrp-star.selected {
    color: #FFB900;
}

.msrp-form-submit {
    text-align: center;
}

.msrp-form-submit button {
    padding: 10px 20px;
    background-color: #4285F4;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s ease;
}

.msrp-form-submit button:hover {
    background-color: #3367d6;
}

.msrp-form-submit button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.msrp-thank-you {
    text-align: center;
    display: none;
}

.msrp-thank-you h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.msrp-thank-you p {
    font-size: 16px;
    color: #666;
}

/* Schema Markup */
.msrp-schema {
    display: none;
}

/* Responsive Styles */
@media screen and (max-width: 992px) {
    .msrp-masonry .msrp-review,
    .msrp-masonry .msrp-review-sizer {
        width: calc(50% - 20px);
    }
    
    .msrp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .msrp-wall .msrp-review {
        width: calc(50% - 20px);
    }
    
    .msrp-wall .msrp-review:nth-child(5n+1),
    .msrp-wall .msrp-review:nth-child(5n+3) {
        width: calc(50% - 20px);
    }
}

@media screen and (max-width: 768px) {
    .msrp-masonry .msrp-review,
    .msrp-masonry .msrp-review-sizer {
        width: calc(100% - 20px);
    }
    
    .msrp-grid {
        grid-template-columns: 1fr;
    }
    
    .msrp-wall .msrp-review,
    .msrp-wall .msrp-review:nth-child(5n+1),
    .msrp-wall .msrp-review:nth-child(5n+3) {
        width: calc(100% - 20px);
    }
    
    .msrp-filters {
        flex-direction: column;
    }
    
    .msrp-filters select {
        margin-bottom: 10px;
    }
}