/**
 * Lofind Gigneo Fixes 0.5.8 — service-gallery controls.
 * Matches Gigneo 0.1.3's card-layout-1.php: .gn-head > .gn-save-btn,
 * .gn-service-media-slider button.slick-arrow, and the existing SVG heart.
 * Never touches Woodmart product galleries or unrelated carousel controls.
 */

/* Give overlays a stable coordinate system. */
.gn-service-card > .gn-head,
body.lofind-public-service #lofind-service-main .gn-service-single .gn-head .gn-service-media-slider {
  position: relative !important;
}

/* Save heart: Woodmart was stretching the native button vertically into an oval.
   Use the original Gigneo heart SVG and retain its normal click event and saved state. */
.gn-service-card > .gn-head > button.gn-save-btn,
.gn-service-card > .gn-head > .gn-save-btn.gn-btn {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  position: absolute !important;
  inset: 12px 12px auto auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  flex: none !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  aspect-ratio: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(31, 37, 45, .62) !important;
  color: #fff !important;
  fill: none !important;
  text-decoration: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  transform: none !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: hidden !important;
  z-index: 12 !important;
  cursor: pointer !important;
  backdrop-filter: blur(5px);
}
.gn-service-card > .gn-head > .gn-save-btn .gn-saved-icon {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}
.gn-service-card > .gn-head > .gn-save-btn .gn-saved-icon svg {
  display: block !important;
  position: static !important;
  flex: none !important;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  fill: none !important;
  color: #fff !important;
  overflow: visible !important;
}
.gn-service-card > .gn-head > .gn-save-btn .gn-saved-icon svg path {
  stroke: #fff !important;
  stroke-width: 1.8px !important;
  fill: none !important;
}
.gn-service-card > .gn-head > .gn-save-btn.gn-saved .gn-saved-icon svg path {
  fill: #fff !important;
}
.gn-service-card > .gn-head > .gn-save-btn::before,
.gn-service-card > .gn-head > .gn-save-btn::after {
  content: none !important;
  display: none !important;
}
.gn-service-card > .gn-head > .gn-save-btn:is(:hover, :focus) {
  border: 0 !important;
  background: rgba(31, 37, 45, .82) !important;
  color: #fff !important;
  box-shadow: none !important;
  outline: none !important;
}
.gn-service-card > .gn-head > .gn-save-btn:focus-visible {
  outline: 2px solid white !important;
  outline-offset: -4px !important;
}

/* Previous/next: remove competing Slick/hero-icons and theme-generated
   pseudo-glyphs. A real SVG is inserted into each existing button by our JS. */
.gn-service-card > .gn-head .gn-service-media-slider button.slick-arrow,
body.lofind-public-service #lofind-service-main .gn-service-single .gn-service-media-slider button.slick-arrow {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  position: absolute !important;
  inset-block-start: 50% !important;
  inset-block-end: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
  gap: 0 !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  aspect-ratio: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: rgba(22, 24, 28, .60) !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  outline: none !important;
  color: #fff !important;
  fill: none !important;
  font-family: inherit !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: 0 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  transform: translateY(-50%) !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 9 !important;
  cursor: pointer !important;
  overflow: hidden !important;
}
.gn-service-card > .gn-head .gn-service-media-slider button.slick-prev,
body.lofind-public-service #lofind-service-main .gn-service-single .gn-service-media-slider button.slick-prev {
  inset-inline-start: 12px !important;
  inset-inline-end: auto !important;
  left: 12px !important;
  right: auto !important;
}
.gn-service-card > .gn-head .gn-service-media-slider button.slick-next,
body.lofind-public-service #lofind-service-main .gn-service-single .gn-service-media-slider button.slick-next {
  inset-inline-end: 12px !important;
  inset-inline-start: auto !important;
  right: 12px !important;
  left: auto !important;
}
.gn-service-card > .gn-head .gn-service-media-slider button.slick-arrow::before,
.gn-service-card > .gn-head .gn-service-media-slider button.slick-arrow::after,
body.lofind-public-service #lofind-service-main .gn-service-single .gn-service-media-slider button.slick-arrow::before,
body.lofind-public-service #lofind-service-main .gn-service-single .gn-service-media-slider button.slick-arrow::after {
  content: none !important;
  display: none !important;
}
.gn-service-card > .gn-head .gn-service-media-slider button.slick-arrow > svg.lofind-service-arrow-icon,
body.lofind-public-service #lofind-service-main .gn-service-single .gn-service-media-slider button.slick-arrow > svg.lofind-service-arrow-icon {
  display: block !important;
  position: static !important;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
  fill: none !important;
  stroke: currentColor !important;
  transform: none !important;
  pointer-events: none !important;
}
.gn-service-card > .gn-head .gn-service-media-slider button.slick-arrow:is(:hover,:focus),
body.lofind-public-service #lofind-service-main .gn-service-single .gn-service-media-slider button.slick-arrow:is(:hover,:focus) {
  background: rgba(22, 24, 28, .82) !important;
  box-shadow: none !important;
  outline: none !important;
  border: 0 !important;
  color: #fff !important;
}
.gn-service-card > .gn-head .gn-service-media-slider button.slick-arrow:focus-visible,
body.lofind-public-service #lofind-service-main .gn-service-single .gn-service-media-slider button.slick-arrow:focus-visible {
  outline: 2px solid white !important;
  outline-offset: -5px !important;
}
.gn-service-card > .gn-head .gn-service-media-slider button.slick-arrow.slick-disabled,
body.lofind-public-service #lofind-service-main .gn-service-single .gn-service-media-slider button.slick-arrow.slick-disabled {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Slick dots, kept independent from Woodmart pagination controls. */
.gn-service-card .gn-service-media-slider ul.slick-dots,
body.lofind-public-service #lofind-service-main .gn-service-media-slider ul.slick-dots {
  box-sizing: border-box !important;
  position: absolute !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  top: auto !important;
  bottom: 12px !important;
  left: 50% !important;
  right: auto !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: calc(100% - 24px) !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 6px 10px !important;
  margin: 0 !important;
  border-radius: 20px !important;
  list-style: none !important;
  background: rgba(18, 22, 26, .5) !important;
  transform: translateX(-50%) !important;
  z-index: 7 !important;
}
.gn-service-card .gn-service-media-slider ul.slick-dots li,
body.lofind-public-service #lofind-service-main .gn-service-media-slider ul.slick-dots li {
  position: static !important;
  float: none !important;
  display: block !important;
  flex: 0 0 7px !important;
  width: 7px !important;
  min-width: 7px !important;
  max-width: 7px !important;
  height: 7px !important;
  min-height: 7px !important;
  max-height: 7px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  list-style: none !important;
  line-height: 0 !important;
}
.gn-service-card .gn-service-media-slider ul.slick-dots li button,
body.lofind-public-service #lofind-service-main .gn-service-media-slider ul.slick-dots li button {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: static !important;
  display: block !important;
  width: 7px !important;
  min-width: 7px !important;
  max-width: 7px !important;
  height: 7px !important;
  min-height: 7px !important;
  max-height: 7px !important;
  border: 0 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
  box-shadow: none !important;
  outline: none !important;
  background: rgba(255,255,255,.6) !important;
}
.gn-service-card .gn-service-media-slider ul.slick-dots li.slick-active button,
body.lofind-public-service #lofind-service-main .gn-service-media-slider ul.slick-dots li.slick-active button {
  background: #fff !important;
}
.gn-service-card .gn-service-media-slider ul.slick-dots :is(li,button)::before,
.gn-service-card .gn-service-media-slider ul.slick-dots :is(li,button)::after,
body.lofind-public-service #lofind-service-main .gn-service-media-slider ul.slick-dots :is(li,button)::before,
body.lofind-public-service #lofind-service-main .gn-service-media-slider ul.slick-dots :is(li,button)::after {
  content: none !important;
  display: none !important;
}

/* Centered native play triangle. Keep Gigneo's video link/action unchanged. */
.gn-service-card .gn-service-media .gn-play-video-toggle,
body.lofind-public-service #lofind-service-main .gn-service-media .gn-play-video-toggle {
  box-sizing: border-box !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,.58) !important;
  border: 1px solid rgba(255,255,255,.7) !important;
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  transform: translate(-50%,-50%) !important;
  z-index: 6 !important;
}
.gn-service-card .gn-service-media .gn-play-video-toggle > :is(i,svg),
body.lofind-public-service #lofind-service-main .gn-service-media .gn-play-video-toggle > :is(i,svg) {
  display: none !important;
}
.gn-service-card .gn-service-media .gn-play-video-toggle::before,
body.lofind-public-service #lofind-service-main .gn-service-media .gn-play-video-toggle::before {
  content: '' !important;
  position: static !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 0 0 3px !important;
  padding: 0 !important;
  border-top: 7px solid transparent !important;
  border-bottom: 7px solid transparent !important;
  border-left: 11px solid #fff !important;
  background: none !important;
  transform: none !important;
}
.gn-service-card .gn-service-media .gn-play-video-toggle::after,
body.lofind-public-service #lofind-service-main .gn-service-media .gn-play-video-toggle::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 600px) {
  .gn-service-card > .gn-head .gn-service-media-slider button.slick-arrow,
  body.lofind-public-service #lofind-service-main .gn-service-single .gn-service-media-slider button.slick-arrow {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }
  .gn-service-card > .gn-head > button.gn-save-btn,
  .gn-service-card > .gn-head > .gn-save-btn.gn-btn {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }
}
.gn-service-card .gn-service-media-slider ul.slick-dots:has(li:only-child),
body.lofind-public-service #lofind-service-main .gn-service-media-slider ul.slick-dots:has(li:only-child) {
  display: none !important;
}


/* Lofind 0.5.9: public freelancer profile > Active services.
   Gigneo 0.1.3 templates/single/profile/parts/services.php places
   both the save control and Slick carousel inside .gn-media, NOT .gn-head.
   Do not alter main services directory cards or the detailed service page. */
#gn-services.gn-services-section .gn-service-card > .gn-media {
  position: relative !important;
  isolation: isolate;
}
#gn-services.gn-services-section .gn-service-card > .gn-media > button.gn-save-btn {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  position: absolute !important;
  inset: 12px 12px auto auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 36px !important;
  gap: 0 !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(31,37,45,.66) !important;
  color: #fff !important;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  transform: none !important;
  text-align: center !important;
  box-shadow: none !important;
  overflow: hidden !important;
  z-index: 15 !important;
  cursor: pointer !important;
}
#gn-services.gn-services-section .gn-service-card > .gn-media > button.gn-save-btn:is(:hover,:focus) {
  background: rgba(31,37,45,.84) !important;
  box-shadow: none !important;
  border: none !important;
}
#gn-services.gn-services-section .gn-service-card > .gn-media > button.gn-save-btn:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: -4px !important;
}
#gn-services.gn-services-section .gn-service-card > .gn-media > button.gn-save-btn::before,
#gn-services.gn-services-section .gn-service-card > .gn-media > button.gn-save-btn::after {
  content: none !important;
  display: none !important;
}
#gn-services.gn-services-section .gn-service-card > .gn-media > button.gn-save-btn .gn-saved-icon {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  flex: none !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  transform: none !important;
}
#gn-services.gn-services-section .gn-service-card > .gn-media > button.gn-save-btn svg {
  box-sizing: border-box !important;
  display: block !important;
  position: static !important;
  flex: none !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  fill: none !important;
  stroke: #fff !important;
  transform: none !important;
}
#gn-services.gn-services-section .gn-service-card > .gn-media > button.gn-save-btn svg path {
  stroke: #fff !important;
  fill: none !important;
}
#gn-services.gn-services-section .gn-service-card > .gn-media > button.gn-save-btn.gn-saved svg path {
  fill: #fff !important;
}
/* Slick arrow: native button and event listeners remain untouched. */
#gn-services.gn-services-section .gn-service-card > .gn-media .gn-service-media-slider button.slick-arrow {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(22,24,28,.68) !important;
  color: #fff !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: 0 !important;
  letter-spacing: 0 !important;
  transform: translateY(-50%) !important;
  z-index: 12 !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: hidden !important;
}
#gn-services.gn-services-section .gn-service-card > .gn-media .gn-service-media-slider button.slick-prev {
  inset-inline-start: 8px !important;
  inset-inline-end: auto !important;
  left: 8px !important;
  right: auto !important;
}
#gn-services.gn-services-section .gn-service-card > .gn-media .gn-service-media-slider button.slick-next {
  inset-inline-end: 8px !important;
  inset-inline-start: auto !important;
  right: 8px !important;
  left: auto !important;
}
#gn-services.gn-services-section .gn-service-card > .gn-media .gn-service-media-slider button.slick-arrow::before,
#gn-services.gn-services-section .gn-service-card > .gn-media .gn-service-media-slider button.slick-arrow::after {
  content: none !important;
  display: none !important;
}
#gn-services.gn-services-section .gn-service-card > .gn-media .gn-service-media-slider button.slick-arrow > svg.lofind-service-arrow-icon {
  display: block !important;
  position: static !important;
  flex: none !important;
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  min-height: 17px !important;
  max-width: 17px !important;
  max-height: 17px !important;
  margin: 0 !important;
  padding: 0 !important;
  fill: none !important;
  stroke: currentColor !important;
  color: #fff !important;
  transform: none !important;
  pointer-events: none !important;
}
#gn-services.gn-services-section .gn-service-card > .gn-media .gn-service-media-slider button.slick-arrow:is(:hover,:focus) {
  background: rgba(22,24,28,.86) !important;
  box-shadow: none !important;
}
#gn-services.gn-services-section .gn-service-card > .gn-media .gn-service-media-slider button.slick-arrow.slick-disabled {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Profile's slide pagination: center the entire group, never stretch the dots. */
#gn-services.gn-services-section .gn-service-card > .gn-media .gn-service-media-slider ul.slick-dots {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  position: absolute !important;
  top: auto !important;
  bottom: 10px !important;
  left: 50% !important;
  right: auto !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: calc(100% - 20px) !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 5px 9px !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  list-style: none !important;
  background: rgba(20,22,27,.55) !important;
  border-radius: 20px !important;
  z-index: 11 !important;
}
#gn-services.gn-services-section .gn-service-card > .gn-media .gn-service-media-slider ul.slick-dots li {
  box-sizing: border-box !important;
  position: static !important;
  display: block !important;
  float: none !important;
  flex: 0 0 6px !important;
  width: 6px !important;
  min-width: 6px !important;
  max-width: 6px !important;
  height: 6px !important;
  min-height: 6px !important;
  max-height: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  line-height: 0 !important;
  list-style: none !important;
}
#gn-services.gn-services-section .gn-service-card > .gn-media .gn-service-media-slider ul.slick-dots li button {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: static !important;
  display: block !important;
  width: 6px !important;
  min-width: 6px !important;
  max-width: 6px !important;
  height: 6px !important;
  min-height: 6px !important;
  max-height: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  color: transparent !important;
  background: rgba(255,255,255,.58) !important;
  box-shadow: none !important;
}
#gn-services.gn-services-section .gn-service-card > .gn-media .gn-service-media-slider ul.slick-dots li.slick-active button {
  background: #fff !important;
}
#gn-services.gn-services-section .gn-service-card > .gn-media .gn-service-media-slider ul.slick-dots :is(li,button)::before,
#gn-services.gn-services-section .gn-service-card > .gn-media .gn-service-media-slider ul.slick-dots :is(li,button)::after {
  content: none !important;
  display: none !important;
}
#gn-services.gn-services-section .gn-service-card > .gn-media .gn-service-media-slider ul.slick-dots:has(li:only-child) {
  display: none !important;
}