/* ============================================================
   Pure Massage — Gallery (Swiper + GLightbox)
   Swiper's own CSS bundle (loaded from CDN by gallery.js) supplies
   the base carousel/arrow styles — this just adjusts them to match
   the brand.
   ============================================================ */
.gallery-swiper {
  padding-inline: 44px;
}

/* About's Gallery usage — has its own eyebrow/heading/description
   header + background, unlike Membership's plain gallery. */
.about-gallery-section {
  background-color: var(--color-cream-50);
}

.gallery-swiper .swiper-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 15px;
}

/* This Swiper version renders the arrow as an actual SVG
   (.swiper-navigation-icon using currentColor), sized via
   --swiper-navigation-size — NOT a font ::after glyph, so both need
   overriding directly rather than through a ::after rule. */
.gallery-swiper .swiper-button-next,
.gallery-swiper .swiper-button-prev {
  /* Swiper uses this same variable to calculate the vertical-center
     margin-top offset — it must match the button's real 40px size
     below, not the (smaller) icon size, or the offset undershoots
     and the button sits below true center. */
  --swiper-navigation-size: 40px !important;
  width: 40px !important;
  height: 40px !important;
  background-color: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(4px);
  border-radius: 50% !important;
  color: var(--color-primary) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.gallery-swiper .swiper-button-next:hover,
.gallery-swiper .swiper-button-prev:hover {
  background-color: var(--color-white) !important;
  transform: scale(1.06);
}

/* The icon's own <svg> is set to fill 100% of the button box
   (see Swiper's `& svg { height:100%; width:100% }` rule) — that's
   what was still making it look oversized even with the button
   itself at 40px. Shrink the svg itself so it sits with room to
   spare inside the circle. */
.gallery-swiper .swiper-button-next svg,
.gallery-swiper .swiper-button-prev svg {
  width: 17px !important;
  height: 17px !important;
  fill: var(--color-primary) !important;
}

.gallery-swiper .swiper-button-disabled {
  opacity: 0.35;
}

/* GLightbox controls (close/next/prev) render outside .gallery-swiper
   (appended to the document, not the carousel) — not scoped to it. */
.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
  background: transparent !important;
}