/* ============================================================
   Google Reviews Slider v2 — style.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Lora:wght@600&display=swap');

/* ── Base ──────────────────────────────────────────────── */
.grs-wrap {
  --grs-font:    'Plus Jakarta Sans', sans-serif;
  --grs-serif:   'Lora', serif;
  --grs-radius:  20px;
  --grs-ease:    cubic-bezier(.22,.68,0,1.2);
  font-family: var(--grs-font);
  position: relative;
}

/* ── Colour Schemes ────────────────────────────────────── */
.grs-scheme-light  { --bg:#ffffff;                   --text:#111827; --sub:#6b7280; --border:rgba(0,0,0,.08);   --card-hover:#f8faff; }
.grs-scheme-dark   { --bg:#1c2035;                   --text:#f1f5f9; --sub:#94a3b8; --border:rgba(255,255,255,.08); --card-hover:#232840; }
.grs-scheme-glass  { --bg:rgba(255,255,255,.2);      --text:#111827; --sub:#4b5563; --border:rgba(255,255,255,.45); --card-hover:rgba(255,255,255,.3); }
.grs-scheme-warm   { --bg:#fdf8f2;                   --text:#2d1f0e; --sub:#78604a; --border:rgba(120,80,30,.1);   --card-hover:#f5ede0; }
.grs-scheme-violet { --bg:linear-gradient(135deg,#4f46e5,#7c3aed); --text:#fff; --sub:rgba(255,255,255,.75); --border:rgba(255,255,255,.2); --card-hover:rgba(255,255,255,.12); }

/* ── Placeholder ───────────────────────────────────────── */
.grs-placeholder {
  text-align: center; padding: 50px 30px;
  background: #f1f5fd; border: 2px dashed #c7d2fe;
  border-radius: var(--grs-radius); color: #475569;
}
.grs-placeholder-icon { font-size: 3rem; display: block; margin-bottom: 10px; }
.grs-placeholder h3   { font-size: 1.1rem; font-weight: 700; color: #1e293b; margin: 0 0 8px; }
.grs-placeholder p    { font-size: .88rem; margin: 4px 0; }
.grs-placeholder-sub  { color: #7c3aed !important; font-size: .82rem !important; }

/* ── Business Header ───────────────────────────────────── */
.grs-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  margin-bottom: 24px; padding: 18px 22px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--grs-radius);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.grs-biz-name {
  display: block; font-family: var(--grs-serif);
  font-size: 1.15rem; color: var(--text); margin-bottom: 5px;
}
.grs-overall { display: flex; align-items: center; gap: 8px; }
.grs-score   { font-size: 2rem; font-weight: 700; color: var(--text); line-height: 1; }
.grs-count   { font-size: .78rem; color: var(--sub); }
.grs-write-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; background: #4285F4; color: #fff !important;
  border-radius: 50px; font-size: .82rem; font-weight: 600;
  text-decoration: none !important; white-space: nowrap;
  transition: background .2s, transform .2s;
}
.grs-write-btn:hover { background: #3367d6; transform: translateY(-1px); }

/* ── Loading ───────────────────────────────────────────── */
.grs-loading {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; padding: 60px 20px; color: #9ca3af; font-size: .88rem;
}
@keyframes grsSpin { to { transform: rotate(360deg); } }
.grs-spin {
  width: 36px; height: 36px; flex-shrink: 0;
  border: 3px solid rgba(99,102,241,.15); border-top-color: #6366F1;
  border-radius: 50%; animation: grsSpin .75s linear infinite;
}

/* ── Error banner ──────────────────────────────────────── */
.grs-error {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 16px 20px; margin-bottom: 14px;
  background: #fff7ed; border: 1px solid #fed7aa;
  border-radius: 12px; text-align: center;
}
.grs-error-icon { font-size: 1.5rem; }
.grs-error-msg  { font-weight: 600; font-size: .85rem; color: #92400e; margin: 0; }
.grs-error-sub  { font-size: .8rem; color: #b45309; margin: 0; }

/* ── Slider wrap — side padding creates arrow space ───── */
.grs-slider-wrap {
  position: relative;
  padding: 8px 50px 52px; /* ← left/right 50px keeps arrows inside */
}

/* ── Swiper ────────────────────────────────────────────── */
.grs-swiper { overflow: hidden; }

/* Equal-height slides */
.grs-swiper .swiper-wrapper  { align-items: stretch; }
.grs-swiper .swiper-slide    { height: auto; display: flex; }

/* ── Card ──────────────────────────────────────────────── */
.grs-card {
  width: 100%; /* fill flex slide */
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--grs-radius);
  padding: 26px 24px 20px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  transition: transform .3s var(--grs-ease), box-shadow .3s;
  position: relative; overflow: hidden;
}
.grs-scheme-glass .grs-card  { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.grs-scheme-violet .grs-card { border-color: rgba(255,255,255,.18); }

.grs-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(99,102,241,.05) 0%, transparent 55%);
}
.grs-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  background: var(--card-hover);
}

/* ── Card head ─────────────────────────────────────────── */
.grs-card-head { display: flex; align-items: center; justify-content: space-between; }
.grs-quote {
  font-family: Georgia, serif; font-size: 4rem; line-height: .7;
  color: #6366F1; opacity: .2; font-weight: 900; user-select: none;
}
.grs-stars { display: flex; gap: 2px; }
.grs-star  { font-size: 1rem; transition: transform .2s; }
.grs-star-on  { color: #F59E0B; }
.grs-star-off { color: #d1d5db; }
.grs-card:hover .grs-star-on { transform: scale(1.15); }

/* ── Review text ───────────────────────────────────────── */
.grs-text {
  flex: 1; margin: 0; font-size: .9rem; line-height: 1.75;
  color: var(--text); word-break: break-word;
}
.grs-toggle {
  background: none; border: none; cursor: pointer; padding: 0;
  color: #6366F1; font-size: .8rem; font-weight: 600;
  font-family: var(--grs-font);
}
.grs-toggle:hover { text-decoration: underline; }

/* ── Card footer ───────────────────────────────────────── */
.grs-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border);
}
.grs-author { display: flex; align-items: center; gap: 12px; min-width: 0; }

.grs-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.8);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.grs-avatar-letter {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 1.05rem;
}
.grs-author-info { display: flex; flex-direction: column; min-width: 0; }
.grs-name {
  font-weight: 600; font-size: .88rem; color: var(--text) !important;
  text-decoration: none !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px;
  transition: color .2s;
}
.grs-name:hover { color: #6366F1 !important; }
.grs-date { font-size: .74rem; color: var(--sub); margin-top: 1px; }

.grs-g-icon { width: 20px; height: 20px; flex-shrink: 0; opacity: .65; transition: opacity .2s; }
.grs-card:hover .grs-g-icon { opacity: 1; }

/* ── Arrow Buttons ─────────────────────────────────────── */
.grs-prev,
.grs-next {
  /* Position inside the 50px side-padding zone */
  position: absolute;
  top: 50%;
  transform: translateY(-65%); /* shift up slightly — above the dots */
  z-index: 20;

  /* Size & shape */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  padding: 0;

  /* Appearance */
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 4px 14px rgba(0,0,0,.13);
  color: #374151;
  cursor: pointer;

  /* Layout */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Reset button styles */
  -webkit-appearance: none;
  appearance: none;
  outline: none;

  transition: background .2s, border-color .2s, color .2s,
              box-shadow .2s, transform .2s;
}

.grs-prev { left: 0; }
.grs-next { right: 0; }

.grs-prev svg,
.grs-next svg {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
  flex-shrink: 0;
}

.grs-prev:hover,
.grs-next:hover {
  background: #6366F1;
  border-color: #6366F1;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(99,102,241,.45);
  transform: translateY(-65%) scale(1.1);
}

.grs-prev:disabled,
.grs-next:disabled {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

/* ── Dots ──────────────────────────────────────────────── */
.grs-dots { bottom: 4px !important; }
.grs-dots .swiper-pagination-bullet {
  width: 7px; height: 7px; opacity: 1;
  background: #cbd5e1; border-radius: 50px;
  transition: width .3s, background .3s;
}
.grs-dots .swiper-pagination-bullet-active { background: #6366F1; width: 22px; }

/* ── Slide-in animation ────────────────────────────────── */
@keyframes grsIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.grs-card { animation: grsIn .35s ease both; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 768px) {
  .grs-slider-wrap { padding: 8px 44px 48px; }
  .grs-card { padding: 20px 18px 16px; }
  .grs-header { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .grs-slider-wrap { padding: 8px 40px 48px; }
}

/* ── Dark scheme overrides ─────────────────────────────── */
.grs-scheme-dark .grs-prev,
.grs-scheme-dark .grs-next {
  background: #2d3555; border-color: #3d4a6b; color: #e2e8f0;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.grs-scheme-dark .grs-dots .swiper-pagination-bullet { background: #374151; }
.grs-scheme-dark .grs-error { background: #1a0d00; border-color: #78350f; }
.grs-scheme-dark .grs-error-msg, .grs-scheme-dark .grs-error-sub { color: #fde68a; }
.grs-scheme-dark .grs-avatar { border-color: rgba(255,255,255,.15); }