/* ======================================================
   GOOGLE REVIEWS — FINAL STABLE VERSION (CLS SAFE)
====================================================== */

/* ===============================
   HEADER (центрований блок)
================================*/
.gr-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  margin-bottom: 30px;
}

.gr-stars {
  font-size: 32px;
  color: #f4b400;
  font-weight: bold;
}

.gr-score {
  font-size: 20px;
  font-weight: 600;
}

.gr-sub {
  font-size: 14px;
  opacity: 0.8;
}

/* КНОПКА "ЗАЛИШИТИ ВІДГУК" — GPU SAFE */
.gr-leave-review {
  background: #f4b400;
  color: #000;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  margin-top: 6px;
  display: inline-block;

  transition: opacity 0.25s ease, transform 0.25s ease;
}

.gr-leave-review:hover {
  opacity: 0.9;
  transform: scale(1.03);
}

/* ===============================
   SLIDER (FADE VERSION — CLS SAFE)
================================*/
.gr-slider {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  contain: layout paint;
}


.gr-track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* SLIDES */
.gr-slide {
  position: absolute;
  inset: 0;
  opacity: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: opacity 0.5s ease;
  will-change: opacity;
}

.gr-slide.active {
  opacity: 1;
}

/* IMAGES */
.gr-slide img {
  width: auto;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ===============================
   DOTS (VISIBLE + GPU SAFE)
================================*/
.gr-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

/* DOT */
.gr-dots button {
  width: 10px;
  height: 10px;

  padding: 0;
  margin: 0;

  border-radius: 50%;
  border: 1px solid #f4b400;

  background-color: #f4b400; /* СТАТИЧНО — БЕЗ АНІМАЦІЇ */
  opacity: 0.35;

  cursor: pointer;

  transition: opacity 0.25s ease, transform 0.25s ease;
  will-change: opacity, transform;
}

/* ACTIVE / HOVER */
.gr-dots button.active,
.gr-dots button:hover {
  opacity: 1;
  transform: scale(1.2);
}

/* ===============================
   ACCESSIBILITY / RESET FIX
================================*/
.gr-dots button:focus {
  outline: none;
  box-shadow: none;
}
/* =========================================
   GOOGLE REVIEWS DOTS — TAP TARGET FIX
========================================= */

.gr-dots{
  display:flex;
  gap:8px; /* відстань між зонами кліку */
}

.gr-dots button{
  width:44px;
  height:44px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;
}

/* сам візуальний дот */
.gr-dots button::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#8DAC99;
  opacity:.4;
  transition:.2s;
}

.gr-dots button.active::before{
  opacity:1;
  transform:scale(1.25);
}

/* keyboard / a11y */
.gr-dots button:focus-visible{
  outline:2px solid #8DAC99;
  outline-offset:4px;
}