/* --- Main Container --- */
.grs-slider-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    /* Padding on sides ensures the arrows don't touch the screen edge on mobile */
    padding: 0 25px; 
}

/* Swiper track */
.grs-swiper {
    padding: 15px 0;
    overflow: hidden;
}

/* Force Swiper slides and cards to stretch equally */
.swiper-slide {
    height: auto !important; 
}

/* --- Card Styling (Matches R3 Antiaging exact flat style) --- */
.grs-card {
    background: #f5f5f5; /* The exact flat light grey from the site */
    border-radius: 8px;  /* Subtle rounding */
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    border: none;
    box-shadow: none; /* No shadow, flat design */
}

/* --- Header Section --- */
.grs-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    margin-bottom: 12px; 
}

.grs-user-info { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
}

/* Avatars */
.grs-avatar, .grs-avatar-placeholder { 
    width: 42px; 
    height: 42px; 
    border-radius: 50%; 
    object-fit: cover; 
}
.grs-avatar-placeholder { 
    background: #8FA2A6; /* Gray-blue default avatar color */
    color: white; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: 500; 
    font-size: 18px; 
}

/* Name and Date */
.grs-meta {
    display: flex;
    flex-direction: column;
}

.grs-name { 
    font-weight: 600; 
    font-size: 15px; 
    color: #202124;
    line-height: 1.2; 
}

.grs-date { 
    font-size: 13px; 
    color: #70757a; 
    margin-top: 4px; 
}

/* Google Icon */
.grs-google-icon img { 
    width: 20px; 
    height: 20px; 
}

/* --- Stars & Rating --- */
.grs-rating { 
    display: flex; 
    align-items: center; 
    gap: 2px; 
    margin-bottom: 12px; 
}
.grs-rating svg { 
    width: 17px; 
    height: 17px; 
}
.grs-rating .grs-check { 
    width: 15px; 
    height: 15px; 
    margin-left: 6px; 
}

/* --- Review Content --- */
.grs-content { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    flex-grow: 1; 
}
.grs-text-wrapper { 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
}

.grs-review-text {
    font-size: 14.5px;
    color: #202124;
    line-height: 1.6; /* Slightly taller line-height for readability */
    margin: 0 !important;
    padding: 0 !important;
}

/* Read More / Hide Button */
.grs-toggle-btn {
    display: inline-block;
    font-size: 14px;
    color: #70757a;
    text-decoration: none;
    font-weight: 400;
    margin-top: 6px;
    padding-top: 4px;
}
.grs-toggle-btn:hover { 
    text-decoration: underline; 
    color: #202124;
}

/* --- Navigation Arrows (Matches R3 Gold Color) --- */
.grs-button-prev, .grs-button-next {
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%);
    width: 38px; 
    height: 38px;
    background: #CBA052; /* Exact gold/tan accent color from the site */
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer; 
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15); 
    transition: background-color 0.3s ease;
}

.grs-button-prev:hover, .grs-button-next:hover { 
    background: #b58c44; /* Slightly darker gold on hover */
}

/* Position arrows slightly overlapping the edges */
.grs-button-prev { left: -10px; }
.grs-button-next { right: -10px; }

.grs-button-prev svg, .grs-button-next svg { 
    width: 22px; 
    height: 22px; 
}

/* Hide arrows when Swiper disables them (e.g. not enough slides) */
.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .grs-button-prev { left: -5px; }
    .grs-button-next { right: -5px; }
}