/* =========================================================
   Google Reviews Slider v2 — Styles
   ========================================================= */

/* ─── Light tokens ─────────────────────────────────────── */
.grs-wrapper {
    --grs-bg:           #ffffff;
    --grs-card-bg:      #f8f9fa;
    --grs-border:       #e2e4e7;
    --grs-text:         #1a1a1a;
    --grs-text-muted:   #4a4a4a;
    --grs-text-light:   #888;
    --grs-accent:       #1a73e8;
    --grs-btn-bg:       #f0f2f5;
    --grs-btn-hover:    #e2e4e7;
    --grs-btn-active:   #d4d7db;
    --grs-btn-color:    #444;
    --grs-dot:          #ccc;
    --grs-dot-active:   #1a73e8;
    --grs-shadow:       0 2px 8px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.06);
    --grs-radius:       16px;
    --grs-radius-card:  14px;
    --grs-transition:   0.38s cubic-bezier(0.4,0,0.2,1);
    color-scheme: light dark;
}

/* ─── Auto dark (system) ───────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .grs-wrapper:not(.grs-light) {
        --grs-bg:           #000000;
        --grs-card-bg:      #111111;
        --grs-border:       #2c2c2c;
        --grs-text:         #f0f0f0;
        --grs-text-muted:   #c8c8c8;
        --grs-text-light:   #777;
        --grs-accent:       #8ab4f8;
        --grs-btn-bg:       #1c1c1c;
        --grs-btn-hover:    #2a2a2a;
        --grs-btn-active:   #333;
        --grs-btn-color:    #ddd;
        --grs-dot:          #3a3a3a;
        --grs-dot-active:   #8ab4f8;
        --grs-shadow:       0 4px 20px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4);
    }
}

/* ─── Force dark ───────────────────────────────────────── */
.grs-wrapper.grs-dark {
    --grs-bg:           #000000;
    --grs-card-bg:      #111111;
    --grs-border:       #2c2c2c;
    --grs-text:         #f0f0f0;
    --grs-text-muted:   #c8c8c8;
    --grs-text-light:   #777;
    --grs-accent:       #8ab4f8;
    --grs-btn-bg:       #1c1c1c;
    --grs-btn-hover:    #2a2a2a;
    --grs-btn-active:   #333;
    --grs-btn-color:    #ddd;
    --grs-dot:          #3a3a3a;
    --grs-dot-active:   #8ab4f8;
    --grs-shadow:       0 4px 20px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4);
}

/* ─── Force light ──────────────────────────────────────── */
.grs-wrapper.grs-light {
    --grs-bg:           #ffffff;
    --grs-card-bg:      #f8f9fa;
    --grs-border:       #e2e4e7;
    --grs-text:         #1a1a1a;
    --grs-text-muted:   #4a4a4a;
    --grs-text-light:   #888;
    --grs-accent:       #1a73e8;
    --grs-btn-bg:       #f0f2f5;
    --grs-btn-hover:    #e2e4e7;
    --grs-btn-active:   #d4d7db;
    --grs-btn-color:    #444;
    --grs-dot:          #ccc;
    --grs-dot-active:   #1a73e8;
    --grs-shadow:       0 2px 8px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.06);
}

/* ═══════════════════════════════════════════════════════
   Wrapper
   ═══════════════════════════════════════════════════════ */
.grs-wrapper {
    background: var(--grs-bg);
    padding: 20px 16px 18px;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}

/* ─── Demo badge ───────────────────────────────────────── */
.grs-demo-badge {
    background: rgba(255,193,7,.15);
    color: #b07800;
    border: 1px solid rgba(255,193,7,.4);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12px;
    margin-bottom: 16px;
    text-align: center;
}
.grs-dark .grs-demo-badge,
@media (prefers-color-scheme:dark) { .grs-wrapper:not(.grs-light) .grs-demo-badge {
    background: rgba(255,193,7,.1);
    color: #ffc107;
    border-color: rgba(255,193,7,.25);
} }

/* ═══════════════════════════════════════════════════════
   Track & slides
   ═══════════════════════════════════════════════════════ */
.grs-track-outer { overflow: hidden; position: relative; }

.grs-track {
    display: flex;
    transition: transform var(--grs-transition);
    will-change: transform;
    align-items: stretch;
}

.grs-slide {
    flex: 0 0 100%;
    min-width: 0;
    padding: 0 4px;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .grs-slide { flex: 0 0 50%; padding: 0 6px; }
}

/* ═══════════════════════════════════════════════════════
   Card  ← matches the reference screenshot
   ═══════════════════════════════════════════════════════ */
.grs-card {
    background: var(--grs-card-bg);
    border-radius: var(--grs-radius-card);
    padding: 20px 22px 18px;
    box-shadow: var(--grs-shadow);
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    box-sizing: border-box;
    transition: box-shadow var(--grs-transition);
    border: 1px solid var(--grs-border);
}

/* ─── Card header ──────────────────────────────────────── */
.grs-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.grs-card-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

/* ─── Avatar ───────────────────────────────────────────── */
.grs-avatar {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
}

.grs-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.grs-avatar-initials {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    user-select: none;
}

/* ─── Author info ──────────────────────────────────────── */
.grs-author-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.grs-author-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--grs-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.grs-date {
    font-size: 12.5px;
    color: var(--grs-text-light);
    line-height: 1;
}

/* ─── Google G badge (top-right) ───────────────────────── */
.grs-g-badge {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grs-g-badge svg {
    width: 28px;
    height: 28px;
    display: block;
}

/* ─── Stars row ────────────────────────────────────────── */
.grs-card-stars-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.grs-card-stars {
    display: flex;
    align-items: center;
    gap: 2px;
}

.grs-star { flex-shrink: 0; display: block; }

/* ─── Verified badge ───────────────────────────────────── */
.grs-verified-badge {
    display: inline-flex;
    align-items: center;
}

.grs-verified-badge svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* ─── Review text ──────────────────────────────────────── */
.grs-text { margin: 0; }

.grs-text p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--grs-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════
   Controls
   ═══════════════════════════════════════════════════════ */
.grs-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}

.grs-wrapper .grs-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: 1px solid var(--grs-border) !important;
    background: var(--grs-btn-bg) !important;
    color: var(--grs-btn-color) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background var(--grs-transition), transform 0.15s ease !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    outline-offset: 3px;
    box-shadow: none !important;
}

.grs-wrapper .grs-btn:hover  { background: var(--grs-btn-hover) !important; }
.grs-wrapper .grs-btn:active { background: var(--grs-btn-active) !important; transform: scale(0.9); }
.grs-wrapper .grs-btn:focus-visible { outline: 2px solid var(--grs-accent) !important; }

.grs-wrapper .grs-btn svg {
    width: 17px !important;
    height: 17px !important;
    pointer-events: none;
}

/* Light mode buttons */
.grs-wrapper:not(.grs-dark) .grs-btn {
    background: #f0f2f5 !important;
    color: #444 !important;
    border-color: #e2e4e7 !important;
}
.grs-wrapper:not(.grs-dark) .grs-btn:hover {
    background: #e2e4e7 !important;
}

/* Dark mode buttons */
.grs-wrapper.grs-dark .grs-btn {
    background: #1c1c1c !important;
    color: #ddd !important;
    border-color: #2c2c2c !important;
}
.grs-wrapper.grs-dark .grs-btn:hover {
    background: #2a2a2a !important;
}

/* Auto dark (system preference) */
@media (prefers-color-scheme: dark) {
    .grs-wrapper:not(.grs-light) .grs-btn {
        background: #1c1c1c !important;
        color: #ddd !important;
        border-color: #2c2c2c !important;
    }
    .grs-wrapper:not(.grs-light) .grs-btn:hover {
        background: #2a2a2a !important;
    }
}

/* ─── Dots ─────────────────────────────────────────────── */
.grs-wrapper .grs-dots {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
}

.grs-wrapper .grs-dot {
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    max-width: 8px !important;
    max-height: 8px !important;
    border-radius: 50% !important;
    background: var(--grs-dot) !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
    transition: background 0.38s ease, width 0.38s ease, max-width 0.38s ease, border-radius 0.38s ease !important;
    outline-offset: 3px;
    appearance: none;
    -webkit-appearance: none;
}

.grs-wrapper .grs-dot:focus-visible {
    outline: 2px solid var(--grs-accent) !important;
}

.grs-wrapper .grs-dot.is-active {
    width: 20px !important;
    max-width: 20px !important;
    height: 8px !important;
    border-radius: 4px !important;
    background: var(--grs-dot-active) !important;
}

/* Light mode dots */
.grs-wrapper:not(.grs-dark) .grs-dot            { background: #cccccc !important; }
.grs-wrapper:not(.grs-dark) .grs-dot.is-active  { background: #1a73e8 !important; }

/* Dark mode dots */
.grs-wrapper.grs-dark .grs-dot           { background: #3a3a3a !important; }
.grs-wrapper.grs-dark .grs-dot.is-active { background: #8ab4f8 !important; }

/* Auto dark (system preference) */
@media (prefers-color-scheme: dark) {
    .grs-wrapper:not(.grs-light) .grs-dot           { background: #3a3a3a !important; }
    .grs-wrapper:not(.grs-light) .grs-dot.is-active { background: #8ab4f8 !important; }
}

/* ─── No reviews ───────────────────────────────────────── */
.grs-no-reviews {
    text-align: center;
    color: var(--grs-text-light);
    padding: 24px;
    font-size: 14px;
}

/* ─── Sync status indicator ────────────────────────────── */
.grs-sync-status {
    font-size: 11px;
    color: var(--grs-text-light);
    text-align: center;
    margin-top: 10px;
    opacity: 0.7;
}

/* ─── Reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .grs-track, .grs-card, .grs-btn, .grs-dot { transition: none !important; }
}