/* --- 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;
}

/* --- Safety net ---
   If, for any reason, the Swiper library fails to load (CDN blocked, offline dev
   environment, etc.), these base rules make sure the reviews still lay out and
   remain fully readable instead of silently collapsing to nothing.
   IMPORTANT: these rules are scoped with :not(.swiper-initialized) so they only
   apply BEFORE Swiper finishes initializing. Swiper automatically adds the
   "swiper-initialized" class to the container once it's running — after that,
   Swiper's own CSS (which expects "nowrap" + JS-driven transforms) takes full
   control. Without this scoping, "flex-wrap: wrap" here fights with Swiper's
   slide transforms and the whole slider collapses to a blank screen after it
   cycles through a few autoplay loops. */
.grs-swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.grs-swiper:not(.swiper-initialized) .swiper-slide {
    flex: 1 1 300px;
    max-width: 380px;
}

/* 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; }
}