/* Base */
.grs-wrapper { position: relative; }

/* Make slides flex so we can horizontally align the card */
.grs-swiper .swiper-slide {
  display: flex;
  /* justify-content is controlled by control "card_horizontal_align" */
}

/* Card */
.grs-card {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  height: 100%;
  width: 100%; /* stretch by default; control can shrink via CSS */
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

.grs-card-header { display:flex; align-items:center; gap:12px; }
.grs-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.grs-author { line-height:1.2; }
.grs-date { font-size:12px; color:#666; }

.grs-stars { font-size:16px; letter-spacing:2px; }
.grs-star { opacity:0.25; }
.grs-star.is-on { opacity:1; }

.grs-text { margin:0; color:#222; }
.grs-notice { padding:10px; background:#fff3cd; border:1px solid #ffeeba; border-radius:8px; }

/* Readmore default */
.grs-readmore {
  display:inline-block;
  margin-top: 8px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: #f2f2f2;
  color: #111;
  cursor: pointer;
}

/* Arrows (stylable in Style tab) */
.swiper-button-prev, .swiper-button-next {
  width: 36px;
  height: 36px;
  font-size: 18px;
  color: inherit;
  background-color: rgba(0,0,0,0.06);
  border-radius: 50%;
}
.swiper-button-prev::after, .swiper-button-next::after { font-size: 1em; }

/* Pagination (dots) — gap can be controlled via control */
.grs-swiper .swiper-pagination { margin-top: 12px; }

.swiper-pagination-bullet { opacity: 0.4; }
.swiper-pagination-bullet-active { opacity: 1; }