/* Slider container */
.sh-gb-slider {
  position: relative;
  padding: 8px 86px 48px;
  background: transparent;
  overflow: visible; /* don't clip arrows/shadows */
}

.sh-gb-slider__nav--prev { left: 20px; }
.sh-gb-slider__nav--next { right: 20px; }

/* Track uses CSS scroll-snap + JS nav */
.sh-gb-slider__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;                 /* allow native swipe on touch */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;/* smooth momentum on iOS */
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  scroll-behavior: smooth;
  padding: 8px 2px 16px;
  touch-action: pan-x;              /* let browser handle horizontal pan */
  cursor: grab;
  user-select: none;
}
.sh-gb-slider__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;           /* disable snapping while dragging */
}

.sh-gb-slider__track::-webkit-scrollbar { height: 8px; }
.sh-gb-slider__track::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 999px;
}

.sh-gb-slider__slide {
  min-width: clamp(260px, 33%, 360px);
  scroll-snap-align: center;
  flex: 0 0 auto;
}

/* Bubble card */
.sh-gb-bubble {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 23px 28px;
  max-width: 420px;
}
.sh-gb-bubble::after {
  content: "";
  position: absolute;
  bottom: -47px;
  right: 20%;
  width: 71px;
  height: 61px;
  background: no-repeat center/contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'><path d='M0,0 L20,20 L40,0 Z' fill='%23ffffff'/></svg>");
}

.sh-gb-bubble__head { display:flex; align-items:center; gap:12px; margin-bottom:8px; border-radius:50%; }
.sh-gb-bubble__avatar { width:56px; height:56px; border-radius:50%; background:#e2e8f0; flex:0 0 56px; }
.sh-gb-bubble__avatar--placeholder { display:inline-block; }

.sh-gb-bubble strong { font-size:20px; font-style:normal; font-weight:400!important; line-height:26px; }
.sh-gb-bubble div    { font-size:18px; font-style:normal; font-weight:400; line-height:30px; }
.sh-gb-bubble time   { font-size:14px; font-style:normal; font-weight:400; line-height:30px; }

.sh-gb-bubble__meta { display:flex; flex-direction:column; }
.sh-gb-bubble__name { line-height:1.1; }
.sh-gb-bubble__date { color:#64748b; font-size:.9rem; }
.sh-gb-bubble__body { margin-top:6px; }

/* Nav */
.sh-gb-slider__nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
}

/* Dots */
.sh-gb-slider__dots {
  position: absolute;
  left: 0; right: 0;
  bottom: 10px;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.sh-gb-slider__dots button {
  width: 11px;
  height: 12px;
  border-radius: 999px;
  border: none;
  background: #cbd5e1;
  cursor: pointer;
}
.sh-gb-slider__dots button[aria-current="true"] {
  background: #e94a2f;
}

.sh-gb-slider__track.no-snap,
.sh-gb-slider__track.is-dragging {
  scroll-snap-type: none !important;
}

/* Track hygiene */
[data-track]{
  scroll-snap-type: none;          /* redundant to JS, but belt + suspenders */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-y;             /* allow page vertical scroll */
  cursor: grab;
}
[data-track]:active{ cursor: grabbing; }

/* Dots */
[data-dots]{ display:flex; gap:.5rem; }
[data-dots]>button{
  width:10px; height:10px; border-radius:50%;
  border:0; background:#bbb;
}
[data-dots]>button[aria-current]{ background:#e11; }

/* prevent global smooth behavior from fighting our JS */
html, body { scroll-behavior: auto !important; }

/* while we’re animating/dragging we already disable snap via inline style,
   but ensure the base track also isn’t forcing smooth behavior */
[data-track] { scroll-behavior: auto; }

/* Mobile tweaks */
@media (max-width: 684px) {
  .sh-gb-slider {
    width: 100%;
    padding: 8px 2px 32px !important; /* slimmer sides, a bit more bottom for dots */
  }
  .sh-gb-slider__track {
    padding: 8px 2px 16px !important;
  }
  .sh-gb-slider__slide {
    width: 100% !important; /* one card per view */
  }
  .sh-gb-slider__nav--prev,
  .sh-gb-slider__nav--next {
    display: none; /* swipe instead of buttons */
  }

  .sh-gb-bubble .row.g-3 { display:flex; flex-direction:column; }
  .sh-gb-bubble .row.g-3 .col-auto {
    display:flex !important; flex-direction:row; justify-content:center; width:100%;
  }
}