/* =============================================================
   OKU Google Reviews  —  oku-gr.css  v3.0
   Desktop: side-by-side (summary left, 4 cards right)
   Mobile:  full-width stacked — summary card then slider below
============================================================= */

:root {
  --oku-brand:        #186E70;
  --oku-brand-dark:   #0f4e50;
  --oku-brand-light:  #e6f4f4;
  --oku-star:         #F5A623;
  --oku-text:         #111827;
  --oku-sub:          #374151;
  --oku-muted:        #6b7280;
  --oku-border:       #e5e7eb;
  --oku-card-bg:      #ffffff;
  --oku-section-bg:   #f9fafb;
  --oku-shadow:       0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
  --oku-shadow-hover: 0 4px 8px rgba(0,0,0,.07), 0 12px 32px rgba(24,110,112,.12);
  --oku-rad:          14px;
  --oku-gap:          14px;
  --oku-ease:         all .22s ease;
}

/* ── Outer section ─────────────────────────────────────────── */
.oku-gr-section {
  background: var(--oku-section-bg);
  padding: 56px 40px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  box-sizing: border-box;
  width: 100%;
}

.oku-gr-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 40px;
  width: 100%;
  box-sizing: border-box;
}

/* ── LEFT: Summary panel ───────────────────────────────────── */
.oku-gr-summary-card {
  flex: 0 0 200px;
  width: 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  background: var(--oku-card-bg);
  border-radius: var(--oku-rad);
  border: 1px solid var(--oku-border);
  padding: 24px 20px;
  box-shadow: var(--oku-shadow);
  box-sizing: border-box;
}

.oku-gr-logo-full {
  width: 100px;
  height: 36px;
  display: block;
}

.oku-gr-trust-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--oku-text);
  line-height: 1.35;
  margin: 0;
}

.oku-gr-excellent-label {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--oku-text);
  line-height: 1;
}

.oku-gr-stars-lg {
  display: flex;
  gap: 3px;
  color: var(--oku-star);
}
.oku-gr-stars-lg .oku-gr-star {
  width: 22px;
  height: 22px;
}

.oku-gr-count {
  font-size: 13px;
  color: var(--oku-muted);
  margin: 0;
  line-height: 1.4;
}
.oku-gr-count strong {
  color: var(--oku-text);
  font-weight: 700;
}

.oku-gr-wordmark {
  width: 58px;
  height: 20px;
  display: block;
}

.oku-gr-review-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #4285F4;
  color: #fff;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 15px;
  border-radius: 24px;
  transition: var(--oku-ease);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(66,133,244,.28);
  border: none;
  cursor: pointer;
  margin-top: 4px;
}
.oku-gr-review-btn .oku-gr-gsvg { width: 16px; height: 16px; flex-shrink: 0; }
.oku-gr-review-btn:hover,
.oku-gr-review-btn:focus {
  background: #1a6de8;
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(66,133,244,.38);
}

/* ── RIGHT: Slider area ────────────────────────────────────── */
.oku-gr-slider-area {
  flex: 1 1 0%;
  min-width: 0;
  width: 0; /* force flex shrink to work */
  display: flex;
  flex-direction: column;
  position: relative;
}

.oku-gr-track-outer {
  overflow: hidden;
  border-radius: var(--oku-rad);
  width: 100%;
}

.oku-gr-track {
  display: flex;
  gap: var(--oku-gap);
  transition: transform .42s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
  align-items: stretch;
}

/* ── Review card ───────────────────────────────────────────── */
.oku-gr-card {
  /* JS sets exact width; CSS fallback for 4 cards */
  flex: 0 0 calc((100% - calc(var(--oku-gap) * 3)) / 4);
  background: var(--oku-card-bg);
  border-radius: var(--oku-rad);
  border: 1px solid var(--oku-border);
  padding: 18px 16px 20px;
  box-shadow: var(--oku-shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 210px;
  box-sizing: border-box;
  transition: var(--oku-ease);
}
.oku-gr-card:hover {
  box-shadow: var(--oku-shadow-hover);
  transform: translateY(-3px);
  border-color: #d0e7e7;
}

/* Card header */
.oku-gr-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.oku-gr-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #e5e7eb;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.oku-gr-card-meta  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.oku-gr-author     { font-size: 13.5px; font-weight: 700; color: var(--oku-text); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oku-gr-relative   { font-size: 11.5px; color: var(--oku-muted); }
.oku-gr-gicon      { flex-shrink: 0; margin-left: auto; }
.oku-gr-gsvg       { width: 20px; height: 20px; display: block; }

/* Stars */
.oku-gr-stars,
.oku-gr-card-stars { display: flex; align-items: center; gap: 2px; color: var(--oku-star); }
.oku-gr-star       { width: 15px; height: 15px; flex-shrink: 0; }
.oku-gr-star.empty { color: #d1d5db; }

/* Text */
.oku-gr-card-text {
  font-size: 13px;
  line-height: 1.65;
  color: var(--oku-sub);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

/* ── Arrows ────────────────────────────────────────────────── */
.oku-gr-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--oku-border);
  background: var(--oku-card-bg);
  color: var(--oku-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: var(--oku-ease);
  padding: 0;
}
.oku-gr-arrow svg      { width: 15px; height: 15px; display: block; }
.oku-gr-arrow:hover    { background: var(--oku-brand); border-color: var(--oku-brand); color: #fff; }
.oku-gr-arrow:disabled { opacity: .3; cursor: default; pointer-events: none; }
.oku-gr-prev           { left: -17px; }
.oku-gr-next           { right: -17px; }

/* ── Dots ──────────────────────────────────────────────────── */
.oku-gr-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  min-height: 12px;
}
.oku-gr-dot            { width: 8px; height: 8px; border-radius: 50%; background: #d1d5db; border: none; padding: 0; cursor: pointer; transition: var(--oku-ease); }
.oku-gr-dot.active     { background: var(--oku-brand); width: 22px; border-radius: 4px; }
.oku-gr-dot:hover:not(.active) { background: #9ca3af; }

.oku-gr-no-reviews { text-align: center; color: var(--oku-muted); font-size: 15px; padding: 32px; }

/* =============================================================
   RESPONSIVE — MOBILE FIRST
   The key fix: on mobile everything becomes 100% width stacked
============================================================= */

/* Tablet ≤ 1024px: 2 cards side by side */
@media (max-width: 1024px) {
  .oku-gr-card {
    flex: 0 0 calc((100% - var(--oku-gap)) / 2);
  }
}

/* Tablet ≤ 860px: start collapsing layout */
@media (max-width: 860px) {
  .oku-gr-section {
    padding: 40px 24px;
  }
  .oku-gr-summary-card {
    flex: 0 0 170px;
    width: 170px;
  }
}

/* Mobile ≤ 680px: stack vertically, both panels go full width */
@media (max-width: 680px) {
  .oku-gr-section {
    padding: 32px 16px;
  }

  .oku-gr-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  /* Summary card: full width, horizontal compact layout */
  .oku-gr-summary-card {
    flex: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px 18px;
  }

  /* Slider: full width */
  .oku-gr-slider-area {
    width: 100%;
    flex: none;
  }

  /* 2 cards on mobile */
  .oku-gr-card {
    flex: 0 0 calc((100% - var(--oku-gap)) / 2);
    min-height: 180px;
  }

  .oku-gr-prev { left: -12px; }
  .oku-gr-next { right: -12px; }
  .oku-gr-arrow { width: 28px; height: 28px; }
  .oku-gr-arrow svg { width: 12px; height: 12px; }
}

/* Very small screens ≤ 400px: still 2 cards, tighter padding */
@media (max-width: 400px) {
  .oku-gr-section { padding: 28px 12px; }
  .oku-gr-card    { padding: 14px 11px 16px; }
  .oku-gr-author  { font-size: 12px; }
  .oku-gr-card-text { font-size: 12px; -webkit-line-clamp: 4; }
  .oku-gr-avatar  { width: 36px; height: 36px; font-size: 11px; }
}