/* =========================================================
   WP Google Reviews Lite — FINAL CLEAN CSS
   (all approved features preserved, duplicates removed)
   Fixes: large Excellent↔cards gap + 3 cards clipping
   + Updates: arrows removed globally, dots added, modal photo supported
   ========================================================= */

/* ---------- Widget-scoped base + box sizing ---------- */
.wpgrl-wrap,
.wpgrl-wrap *{
  font-family: var(--wpgrl-font-family, inherit) !important;
  font-size: var(--wpgrl-base-font-size, 16px);
  line-height: 1.45;
  box-sizing: border-box;
}

/* Minimal scoped reset to avoid theme interference */
.wpgrl-wrap p,
.wpgrl-wrap h1, .wpgrl-wrap h2, .wpgrl-wrap h3,
.wpgrl-wrap h4, .wpgrl-wrap h5, .wpgrl-wrap h6,
.wpgrl-wrap ul, .wpgrl-wrap li{
  margin: 0 !important;
  padding: 0 !important;
}
.wpgrl-wrap img{
  max-width: 100%;
  height: auto;
  border: 0;
}
.wpgrl-wrap button{
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* ---------- Container ---------- */
.wpgrl-wrap{
  width: 100%;
  max-width: 1280px;
  margin: 10px auto;
  padding-left: clamp(16px, 4vw, 28px);
  padding-right: clamp(16px, 4vw, 28px);

  display: flex;
  flex-wrap: nowrap;
  align-items: center;

  /* REAL reduced gap */
  gap: 12px;
  text-align: left;
}

.wpgrl-summary,
.wpgrl-carousel{
  min-width: 0;
}

/* =========================================================
   LEFT SUMMARY (EXCELLENT)
   ========================================================= */
.wpgrl-summary{
  flex: 0 0 210px;      /* narrower so carousel sits closer */
  padding: 6px 0;
  text-align: left;

  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.wpgrl-summary-title{
  font-weight: 800;
  letter-spacing: 0.4px;
  font-size: 1.65em;
  line-height: 1.2;
  margin-bottom: 12px;
}
.wpgrl-summary-stars{ margin-bottom: 8px; }

.wpgrl-summary-based{
  font-size: 1em;
  color: #111;
  margin-bottom: 12px;
  display: inline-block;
  text-decoration: none;
}
.wpgrl-summary-count{
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: inherit;
  cursor: pointer;
}

.wpgrl-google-logo{
  font-size: 2.2em;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}
.wpgrl-google-logo .g-blue{color:#4285F4}
.wpgrl-google-logo .g-red{color:#DB4437}
.wpgrl-google-logo .g-yellow{color:#F4B400}
.wpgrl-google-logo .g-green{color:#0F9D58}


/* =========================================================
   CAROUSEL
   ========================================================= */
.wpgrl-carousel{
  position: relative;
  flex: 1 1 auto;
  width: 100%;

  /* KEY FIX: remove side padding so no fake gap */
  padding: 0;
}

.wpgrl-track{
  display: flex;
  gap: 18px;

  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;

  scroll-snap-type: x mandatory;
  scroll-padding: 0;
  padding: 8px 6px;
  scrollbar-width: none;

  max-width: 100%;
  align-items: flex-start;
}
.wpgrl-track::-webkit-scrollbar{ display:none; }


/* =========================================================
   DOTS INDICATOR (desktop + mobile)
   JS populates .wpgrl-dot elements
   ========================================================= */
.wpgrl-dots{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 12px !important;
  width: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
}

.wpgrl-dot{
  appearance: none !important;
  -webkit-appearance: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;

  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;

  background: #999 !important;
  opacity: 0.35 !important;

  cursor: pointer !important;
  flex: 0 0 auto !important;   /* prevent stretching */
  display: block !important;   /* prevent inline weirdness */
  transition: transform 160ms ease, opacity 160ms ease;
}

.wpgrl-dot.active{
  opacity: 1 !important;
  background: #111 !important;
  transform: scale(1.25);
}

/* =========================================================
   REVIEW CARDS (equal height + pinned Read more)
   ========================================================= */
.wpgrl-card{
  scroll-snap-align: start;

  /* Responsive width to guarantee 3 full cards */
  flex: 0 0 clamp(215px, 23vw, 268px);
  max-width: clamp(215px, 23vw, 268px);

  background: #f4f4f4;
  border-radius: 22px;
  padding: 18px 18px 16px;

  height: 270px;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  box-shadow: none !important;
  transition: transform 220ms ease;
  will-change: transform;
}
.wpgrl-card:hover{
  transform: translateY(-6px);
}

/* Card header */
.wpgrl-card-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  width: 100%;
}

.wpgrl-user{
  display: flex;
  gap: 10px;
  align-items: center;
}
.wpgrl-photo{
  width: 48px;height: 48px;border-radius: 50%;
  object-fit: cover;flex: none;
}
.wpgrl-photo-fallback{ background:#ddd; }

.wpgrl-name{
  font-size: 1.2em;
  font-weight: 700;
  color:#111;
  line-height: 1.1;
}
.wpgrl-time{
  color:#777;
  font-size: 0.9em;
  margin-top: 2px;
}

/* Google icon */
.wpgrl-g-icon{
  display: grid;
  place-items: center;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  padding: 0 !important;
  flex: none;
  margin-left: auto;
}
.wpgrl-g-icon img{
  width: 20px;height: 20px;display:block;
}

.wpgrl-stars{ color:#f5b301; letter-spacing:2px; }
.wpgrl-stars-lg{ font-size:2.1em; }
.wpgrl-stars-sm{ font-size:1.2em; }

.wpgrl-stars-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}

.wpgrl-verified{
  display:inline-grid;
  place-items:center;
  width:18px;height:18px;
  flex:none;
  transform: translateY(1px);
}
.wpgrl-verified img{
  width:18px;height:18px;display:block;
}

.wpgrl-text{
  font-size: 15px;
  color:#111;
  flex: 1 1 auto;
  margin-bottom: 8px;
}

.clamp-4{
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
  max-height: calc(1.45em * 4);
}
.clamp-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.wpgrl-readmore{
  margin-top: auto;
  display: inline-block;
  padding-top: 6px;
  font-size: 1em;
  color:#8a8a8a;
  cursor:pointer;
  text-align:left;
}
.wpgrl-readmore:hover{ color:#555; }

.wpgrl-empty{ font-style: italic; color:#666; }


/* =========================================================
   NAV ARROWS
   (approved feature kept, but now hidden on ALL screens)
   ========================================================= */
.wpgrl-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;
  border:none;background:#fff;
  font-size:28px;line-height:1;
  cursor:pointer;
  display:grid;place-items:center;
  color:#444;
  z-index:10;
  box-shadow:none !important;
}

/* arrows positions kept, but hidden globally */
.wpgrl-prev{ left: -10px; }
.wpgrl-next{ right: -10px; }

/* GLOBAL HIDE */
.wpgrl-nav{ display:none !important; }


/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Tablet */
@media (max-width: 1100px) and (min-width: 901px){
  .wpgrl-card{
    flex: 0 0 clamp(210px, 30vw, 250px);
    max-width: clamp(210px, 30vw, 250px);
    height: 270px;
  }
}

/* Mobile stack */
@media (max-width: 900px){
  .wpgrl-wrap{
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
  }

  .wpgrl-summary{
    flex: none;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    order: 1;
  }

  .wpgrl-summary-title,
  .wpgrl-summary-stars,
  .wpgrl-summary-based,
  .wpgrl-google-logo{
    text-align: center;
  }

  .wpgrl-carousel{
    order: 2;
    width: 100%;
    padding: 0 8px;
  }

  .wpgrl-card,
  .wpgrl-stars-row,
  .wpgrl-text,
  .wpgrl-readmore{
    text-align: left;
  }
  .wpgrl-card{ align-items: flex-start; }

  .wpgrl-card-header{
    justify-content: space-between;
    text-align: left;
    width: 100%;
  }

  .wpgrl-g-icon{
    margin-left: auto;
  }
}

/* Phones */
@media (max-width: 640px){
  .wpgrl-carousel{ padding: 0 !important; }

  .wpgrl-track{
    padding: 8px 0 !important;
    scroll-padding: 0 !important;
  }

  .wpgrl-card{
    flex: 0 0 min(85vw, 360px) !important;
    max-width: min(85vw, 360px) !important;
    height: 240px !important;
  }

  .wpgrl-text{
    -webkit-line-clamp: 5 !important;
    line-height: 1.3 !important;                  /* tiny bump helps iOS */
    max-height: calc(1.75em * 5) !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }
}


/* =========================================================
   MODAL (photo supported)
   ========================================================= */
.wpgrl-modal.hidden{ display:none; }
.wpgrl-modal{
  position:fixed; inset:0; z-index:999999;
  display:grid; place-items:center;
}
.wpgrl-modal-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,0.5);
}
.wpgrl-modal-card{
  position:relative;
  width:min(640px, 92vw);
  background:#fff;
  border-radius:18px;
  padding:20px 20px 16px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  z-index:1;
}
.wpgrl-modal-close{
  position:absolute; top:10px; right:12px;
  width:34px;height:34px;border-radius:50%;
  border:none;background:#f3f3f3;
  font-size:22px;cursor:pointer;
}

/* Header now aligns photo + text side-by-side */
.wpgrl-modal-header{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  margin-bottom:6px;
}

.wpgrl-modal-photo{
  width:54px;
  height:54px;
  border-radius:50%;
  overflow:hidden;
  flex:none;
  display:none; /* JS toggles */
}
.wpgrl-modal-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.wpgrl-modal-name{ font-size:1.2em; font-weight:700; }
.wpgrl-modal-time{ font-size:0.9em; color:#777; }
.wpgrl-modal-stars{
  color:#f5b301;
  font-size:1.2em;
  letter-spacing:2px;
  margin-bottom:10px;
}
.wpgrl-modal-text{
  font-size:1.05em;
  line-height:1.55;
  color:#111;
  white-space:pre-wrap;
}

body.wpgrl-modal-open{ overflow:hidden; }