/* ================================================================
   Google Reviews & Schema — carousel styles
   Supports: light (default) and dark themes
   ================================================================ */

/* ── CSS custom properties ──────────────────────────────────── */
.grs-widget {
    --grs-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --grs-radius:        12px;
    --grs-card-radius:   10px;
    --grs-shadow:        0 2px 8px rgba(0, 0, 0, .08);
    --grs-gap:           16px;

    /* light defaults */
    --grs-bg:            #ffffff;
    --grs-left-bg:       #f8f9ff;
    --grs-card-bg:       #ffffff;
    --grs-border:        #e8eaed;
    --grs-text:          #1a1a1a;
    --grs-muted:         #6b7280;
    --grs-star-full:     #fbbc04;
    --grs-star-empty:    #d1d5db;
    --grs-cta-bg:        #4285F4;
    --grs-cta-text:      #ffffff;
    --grs-cta-hover:     #2a6dd9;
    --grs-arrow-bg:      #f3f4f6;
    --grs-arrow-hover:   #e5e7eb;
    --grs-dot:           #d1d5db;
    --grs-dot-active:    #4285F4;
    --grs-half-clip:     50%;
}

/* ── Dark theme overrides ───────────────────────────────────── */
.grs-theme-dark {
    --grs-bg:            #1e2128;
    --grs-left-bg:       #16181f;
    --grs-card-bg:       #272b35;
    --grs-border:        #363c49;
    --grs-text:          #e8eaed;
    --grs-muted:         #9aa0ad;
    --grs-star-empty:    #4a5060;
    --grs-arrow-bg:      #2e3340;
    --grs-arrow-hover:   #363c49;
    --grs-dot:           #4a5060;
}

/* ── Widget shell ───────────────────────────────────────────── */
.grs-widget {
    display:             flex;
    gap:                 0;
    font-family:         var(--grs-font);
    background:          var(--grs-bg);
    border:              1px solid var(--grs-border);
    border-radius:       var(--grs-radius);
    box-shadow:          var(--grs-shadow);
    overflow:            hidden;
    color:               var(--grs-text);
    max-width:           100%;
}

/* ── Left panel ─────────────────────────────────────────────── */
.grs-left {
    flex-shrink:         0;
    width:               200px;
    background:          var(--grs-left-bg);
    border-right:        1px solid var(--grs-border);
    padding:             28px 20px;
    display:             flex;
    flex-direction:      column;
    align-items:         center;
    text-align:          center;
    gap:                 10px;
}

.grs-rating-label {
    font-size:           .75rem;
    font-weight:         700;
    letter-spacing:      .08em;
    color:               #4285F4;
    text-transform:      uppercase;
}

.grs-big-score {
    font-size:           3rem;
    font-weight:         800;
    line-height:         1;
    color:               var(--grs-text);
}

.grs-stars {
    display:             flex;
    gap:                 2px;
}

.grs-star {
    font-size:           1rem;
}

.grs-stars--big .grs-star {
    font-size:           1.25rem;
}

.grs-star--full,
.grs-star--half {
    color:               var(--grs-star-full);
}

/* Half star clipping via clip-path gradient trick */
.grs-star--half {
    background:          linear-gradient(to right, var(--grs-star-full) var(--grs-half-clip), var(--grs-star-empty) var(--grs-half-clip));
    -webkit-background-clip: text;
    background-clip:     text;
    -webkit-text-fill-color: transparent;
}

.grs-star--empty {
    color:               var(--grs-star-empty);
}

.grs-count {
    font-size:           .78rem;
    color:               var(--grs-muted);
    line-height:         1.4;
}

.grs-count strong {
    color:               var(--grs-text);
}

.grs-google-logo {
    margin-top:          4px;
}

.grs-google-logo svg {
    height:              22px;
    width:               auto;
}

.grs-cta {
    display:             inline-block;
    margin-top:          6px;
    padding:             8px 14px;
    background:          var(--grs-cta-bg);
    color:               var(--grs-cta-text);
    border-radius:       6px;
    text-decoration:     none;
    font-size:           .78rem;
    font-weight:         600;
    text-align:          center;
    transition:          background .18s;
    line-height:         1.3;
}

.grs-cta:hover,
.grs-cta:focus-visible {
    background:          var(--grs-cta-hover);
    color:               var(--grs-cta-text);
}

/* ── Right panel ────────────────────────────────────────────── */
.grs-right {
    flex:                1;
    min-width:           0;
    padding:             20px;
    display:             flex;
    flex-direction:      column;
    gap:                 12px;
}

/* ── Carousel ───────────────────────────────────────────────── */
.grs-carousel-wrapper {
    display:             flex;
    align-items:         stretch;
    gap:                 8px;
    overflow:            hidden;
}

.grs-track {
    display:             flex;
    flex:                1;
    gap:                 var(--grs-gap);
    overflow:            hidden;
    /* translate is driven by JS custom property */
    transform:           translateX(var(--grs-offset, 0));
    transition:          transform .35s cubic-bezier(.4, 0, .2, 1);
}

/* ── Cards ──────────────────────────────────────────────────── */
.grs-card {
    flex:                0 0 calc((100% - var(--grs-gap) * 2) / 3);
    background:          var(--grs-card-bg);
    border:              1px solid var(--grs-border);
    border-radius:       var(--grs-card-radius);
    padding:             16px;
    display:             flex;
    flex-direction:      column;
    gap:                 10px;
    font-size:           .875rem;
    transition:          box-shadow .18s;
}

.grs-card:hover {
    box-shadow:          0 4px 16px rgba(0, 0, 0, .10);
}

.grs-card-header {
    display:             flex;
    align-items:         center;
    gap:                 10px;
}

.grs-avatar {
    flex-shrink:         0;
    width:               40px;
    height:              40px;
    border-radius:       50%;
    display:             flex;
    align-items:         center;
    justify-content:     center;
    font-size:           1rem;
    font-weight:         700;
    color:               #fff;
    overflow:            hidden;
}

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

.grs-card-meta {
    display:             flex;
    flex-direction:      column;
    gap:                 2px;
    min-width:           0;
}

.grs-author {
    font-size:           .875rem;
    color:               var(--grs-text);
    white-space:         nowrap;
    overflow:            hidden;
    text-overflow:       ellipsis;
}

.grs-date {
    font-size:           .75rem;
    color:               var(--grs-muted);
}

.grs-review-text {
    margin:              0;
    font-size:           .83rem;
    color:               var(--grs-text);
    line-height:         1.55;
}

.grs-read-more {
    background:          none;
    border:              none;
    padding:             0;
    font-size:           .8rem;
    color:               #4285F4;
    cursor:              pointer;
    text-decoration:     underline;
    margin-left:         4px;
}

.grs-read-more:hover,
.grs-read-more:focus-visible {
    color:               #2a6dd9;
}

/* ── Arrows ─────────────────────────────────────────────────── */
.grs-arrow {
    flex-shrink:         0;
    align-self:          center;
    display:             flex;
    align-items:         center;
    justify-content:     center;
    width:               36px;
    height:              36px;
    border-radius:       50%;
    border:              1px solid var(--grs-border);
    background:          var(--grs-arrow-bg);
    color:               var(--grs-text);
    cursor:              pointer;
    transition:          background .18s, opacity .18s;
}

.grs-arrow:hover:not(:disabled),
.grs-arrow:focus-visible:not(:disabled) {
    background:          var(--grs-arrow-hover);
    outline:             2px solid #4285F4;
    outline-offset:      2px;
}

.grs-arrow:disabled {
    opacity:             .3;
    cursor:              default;
}

/* ── Dots ───────────────────────────────────────────────────── */
.grs-dots {
    display:             flex;
    justify-content:     center;
    gap:                 6px;
}

.grs-dot {
    width:               8px;
    height:              8px;
    border-radius:       50%;
    border:              none;
    padding:             0;
    background:          var(--grs-dot);
    cursor:              pointer;
    transition:          background .2s, transform .2s;
}

.grs-dot.is-active {
    background:          var(--grs-dot-active);
    transform:           scale(1.25);
}

.grs-dot:focus-visible {
    outline:             2px solid #4285F4;
    outline-offset:      2px;
}

/* ── No reviews / admin notice ──────────────────────────────── */
.grs-no-reviews,
.grs-notice {
    color:               var(--grs-muted);
    font-style:          italic;
    padding:             1rem;
    margin:              0;
}

/* ── Responsive ─────────────────────────────────────────────── */

/* 2 cards */
@media (max-width: 767px) {
    .grs-card {
        flex-basis:      calc((100% - var(--grs-gap)) / 2);
    }
}

/* 1 card + stack layout */
@media (max-width: 479px) {
    .grs-widget {
        flex-direction:  column;
    }

    .grs-left {
        width:           100%;
        border-right:    none;
        border-bottom:   1px solid var(--grs-border);
        padding:         20px;
        flex-direction:  row;
        flex-wrap:       wrap;
        justify-content: center;
        gap:             8px 16px;
    }

    .grs-big-score {
        font-size:       2rem;
    }

    .grs-card {
        flex-basis:      100%;
    }
}