/* ============================================================
   Google Reviews Widget — Public Styles
   ============================================================ */

:root {
  --grw-accent:       #4285F4;
  --grw-star-gold:    #FBBC05;
  --grw-text:         #1a1a2e;
  --grw-text-muted:   #666;
  --grw-bg:           #ffffff;
  --grw-card-bg:      #ffffff;
  --grw-border:       #e8ecf0;
  --grw-shadow:       0 2px 12px rgba(0,0,0,.08);
  --grw-shadow-hover: 0 6px 24px rgba(0,0,0,.14);
  --grw-radius:       12px;
  --grw-radius-sm:    8px;
  --grw-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---- Dark theme ---- */
.grw-dark {
  --grw-text:       #f0f0f0;
  --grw-text-muted: #a0a0b0;
  --grw-bg:         #16213e;
  --grw-card-bg:    #1a1a2e;
  --grw-border:     #2a2a4a;
  --grw-shadow:     0 2px 12px rgba(0,0,0,.4);
}

/* ======================================================== */
/* Widget wrapper                                           */
/* ======================================================== */
.grw-widget {
  font-family: var(--grw-font);
  color:       var(--grw-text);
  background:  var(--grw-bg);
  border:      1px solid var(--grw-border);
  border-radius: var(--grw-radius);
  padding:     24px;
  box-sizing:  border-box;
}

/* ======================================================== */
/* Header                                                   */
/* ======================================================== */
.grw-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             16px;
  margin-bottom:   24px;
  padding-bottom:  20px;
  border-bottom:   1px solid var(--grw-border);
  flex-wrap:       wrap;
}

.grw-header-info {
  display:     flex;
  align-items: center;
  gap:         14px;
}

.grw-business-photo {
  width:         56px;
  height:        56px;
  border-radius: 50%;
  object-fit:    cover;
  border:        2px solid var(--grw-border);
}

.grw-business-initial {
  width:            56px;
  height:           56px;
  border-radius:    50%;
  background:       var(--grw-accent);
  color:            #fff;
  font-size:        24px;
  font-weight:      700;
  display:          flex;
  align-items:      center;
  justify-content:  center;
}

.grw-business-name {
  margin:      0 0 4px;
  font-size:   18px;
  font-weight: 700;
  line-height: 1.2;
}

.grw-overall-rating {
  display:     flex;
  align-items: center;
  gap:         6px;
}

.grw-rating-number {
  font-size:   22px;
  font-weight: 700;
  line-height: 1;
  color:       var(--grw-accent);
}

.grw-total-count {
  font-size: 13px;
  color:     var(--grw-text-muted);
}

/* Google badge */
.grw-google-badge {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   12px;
  font-weight: 600;
  color:       var(--grw-text-muted);
  border:      1px solid var(--grw-border);
  border-radius: 20px;
  padding:     4px 10px;
}

/* ======================================================== */
/* Stars                                                    */
/* ======================================================== */
.grw-stars {
  display:   inline-flex;
  gap:       1px;
  font-size: 14px;
}

.grw-star { color: #ccc; }
.grw-star-full,
.grw-star-half { color: var(--grw-star-gold); }

/* ======================================================== */
/* Grid layout                                              */
/* ======================================================== */
.grw-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   16px;
  margin-bottom:         20px;
}

/* ======================================================== */
/* List layout                                              */
/* ======================================================== */
.grw-list {
  display:        flex;
  flex-direction: column;
  gap:            12px;
  margin-bottom:  20px;
}

.grw-style-list .grw-review-card {
  border-radius: var(--grw-radius-sm);
}

/* ======================================================== */
/* Review card                                              */
/* ======================================================== */
.grw-review-card {
  background:    var(--grw-card-bg);
  border:        1px solid var(--grw-border);
  border-radius: var(--grw-radius);
  padding:       18px;
  box-shadow:    var(--grw-shadow);
  transition:    transform .2s, box-shadow .2s;
  position:      relative;
  display:       flex;
  flex-direction:column;
  gap:           10px;
}

.grw-review-card:hover {
  transform:  translateY(-2px);
  box-shadow: var(--grw-shadow-hover);
}

.grw-reviewer-info {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.grw-reviewer-avatar img,
.grw-avatar-initial {
  width:         40px;
  height:        40px;
  border-radius: 50%;
  flex-shrink:   0;
  object-fit:    cover;
}

.grw-avatar-initial {
  background:       var(--grw-accent);
  color:            #fff;
  font-size:        16px;
  font-weight:      700;
  display:          flex;
  align-items:      center;
  justify-content:  center;
}

.grw-reviewer-meta {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.grw-reviewer-name {
  font-size:   14px;
  font-weight: 600;
  line-height: 1;
}

.grw-review-date {
  font-size: 12px;
  color:     var(--grw-text-muted);
}

.grw-review-rating .grw-stars {
  font-size: 13px;
}

.grw-review-text p {
  margin:      0;
  font-size:   14px;
  line-height: 1.55;
  color:       var(--grw-text);
}

/* "Read more" truncation */
.grw-review-excerpt {
  display:            -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

.grw-review-excerpt.grw-expanded {
  display: block;
}

.grw-read-more {
  background:    none;
  border:        none;
  padding:       4px 0 0;
  cursor:        pointer;
  color:         var(--grw-accent);
  font-size:     13px;
  font-weight:   600;
  text-decoration: underline;
}

/* ---- Per-card Google link ---- */
.grw-google-review-link {
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  margin-top:      auto;
  padding-top:     10px;
  text-decoration: none !important;
  color:           var(--grw-text-muted) !important;
  font-size:       12px;
  font-weight:     500;
  border-top:      1px solid var(--grw-border);
  transition:      color .15s;
  width:           100%;
}

.grw-google-review-link:hover {
  color: #4285F4 !important;
}

.grw-view-on-google {
  white-space: nowrap;
}

/* ======================================================== */
/* Carousel                                                 */
/* ======================================================== */
.grw-carousel-wrapper {
  position:    relative;
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-bottom: 20px;
  overflow:    hidden;
}

.grw-carousel-track-wrapper {
  overflow: hidden;
  flex:     1;
}

.grw-carousel-track {
  display:    flex;
  gap:        16px;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}

.grw-style-carousel .grw-review-card {
  flex:    0 0 calc(33.333% - 11px);
  min-width: 260px;
}

.grw-carousel-btn {
  background:    var(--grw-card-bg);
  border:        1px solid var(--grw-border);
  border-radius: 50%;
  width:         40px;
  height:        40px;
  font-size:     20px;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
  transition:    background .2s, box-shadow .2s;
  color:         var(--grw-text);
  line-height:   1;
}

.grw-carousel-btn:hover {
  background:  var(--grw-accent);
  color:       #fff;
  box-shadow:  var(--grw-shadow);
  border-color: var(--grw-accent);
}

/* ======================================================== */
/* Badge style                                              */
/* ======================================================== */
.grw-badge {
  text-align:   center;
  padding:      28px 20px;
  border:       2px solid var(--grw-border);
  border-radius: var(--grw-radius);
  max-width:    220px;
  margin:       0 auto 20px;
}

.grw-badge-rating {
  font-size:   52px;
  font-weight: 800;
  color:       var(--grw-accent);
  line-height: 1;
  margin-bottom: 6px;
}

.grw-badge-stars {
  font-size:     20px;
  margin-bottom: 6px;
}

.grw-badge-count {
  font-size:     13px;
  color:         var(--grw-text-muted);
  margin-bottom: 12px;
}

.grw-badge-google {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  font-size:   13px;
  font-weight: 600;
  color:       var(--grw-text-muted);
}

/* ======================================================== */
/* Footer                                                   */
/* ======================================================== */
.grw-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-top:      16px;
  padding-top:     16px;
  border-top:      1px solid var(--grw-border);
  flex-wrap:       wrap;
  gap:             10px;
}

.grw-write-review-btn {
  display:       inline-flex;
  align-items:   center;
  background:    var(--grw-accent);
  color:         #fff !important;
  border:        none;
  border-radius: 6px;
  padding:       8px 16px;
  font-size:     13px;
  font-weight:   600;
  text-decoration: none !important;
  transition:    opacity .2s, transform .15s;
  cursor:        pointer;
}

.grw-write-review-btn:hover {
  opacity:   .88;
  transform: translateY(-1px);
}

.grw-view-all-link {
  font-size:       13px;
  color:           var(--grw-accent) !important;
  text-decoration: none !important;
  font-weight:     600;
}

.grw-view-all-link:hover {
  text-decoration: underline !important;
}

/* ======================================================== */
/* Error                                                    */
/* ======================================================== */
.grw-error {
  color:         #c62828;
  background:    #ffebee;
  border:        1px solid #ef9a9a;
  border-radius: 6px;
  padding:       12px 16px;
  font-size:     14px;
}

/* ======================================================== */
/* Responsive                                               */
/* ======================================================== */
@media (max-width: 600px) {
  .grw-grid {
    grid-template-columns: 1fr;
  }
  .grw-style-carousel .grw-review-card {
    flex: 0 0 85vw;
  }
  .grw-header {
    flex-direction: column;
    align-items:    flex-start;
  }
}