/**
 * HVT / InnoPha — Modern Flatsome Slider Navigation v1.0.1
 * Child-theme override for Flickity navigation buttons used by Flatsome.
 * Parent theme files remain untouched.
 */

:root {
  --hvt-slider-nav-green: #76A943;
  --hvt-slider-nav-green-dark: #478019;
  --hvt-slider-nav-pink: #EC1478;
  --hvt-slider-nav-shadow: 0 10px 28px rgba(31, 45, 28, .14);
  --hvt-slider-nav-shadow-hover: 0 12px 32px rgba(71, 128, 25, .24);
}

/* ------------------------------------------------------------------
 * Base: preserve Flickity/Flatsome behavior, modernize visuals only.
 * ------------------------------------------------------------------ */
.slider .flickity-prev-next-button,
.row-slider .flickity-prev-next-button,
.ux-slider .flickity-prev-next-button {
  width: 44px !important;
  height: 44px !important;
  top: 50% !important;
  bottom: auto !important;
  margin-top: -22px !important;
  padding: 0 !important;
  border: 1px solid rgba(118, 169, 67, .36) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .94) !important;
  color: var(--hvt-slider-nav-green-dark) !important;
  box-shadow: var(--hvt-slider-nav-shadow) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 18 !important;
  overflow: visible !important;
  transition:
    opacity .22s ease,
    background-color .22s ease,
    border-color .22s ease,
    color .22s ease,
    box-shadow .22s ease !important;
}

.slider .flickity-prev-next-button.previous,
.row-slider .flickity-prev-next-button.previous,
.ux-slider .flickity-prev-next-button.previous {
  left: 12px !important;
  right: auto !important;
}

.slider .flickity-prev-next-button.next,
.row-slider .flickity-prev-next-button.next,
.ux-slider .flickity-prev-next-button.next {
  right: 12px !important;
  left: auto !important;
}

.slider .flickity-prev-next-button svg,
.row-slider .flickity-prev-next-button svg,
.ux-slider .flickity-prev-next-button svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 27% !important;
  margin: 0 !important;
  color: currentColor !important;
  fill: currentColor !important;
  border-color: currentColor !important;
}

.slider .flickity-prev-next-button .arrow,
.row-slider .flickity-prev-next-button .arrow,
.ux-slider .flickity-prev-next-button .arrow {
  fill: currentColor !important;
}

/* Hover: green brand surface + clean white arrow. */
.slider .flickity-prev-next-button:hover,
.row-slider .flickity-prev-next-button:hover,
.ux-slider .flickity-prev-next-button:hover {
  background: linear-gradient(135deg, var(--hvt-slider-nav-green) 0%, var(--hvt-slider-nav-green-dark) 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--hvt-slider-nav-shadow-hover) !important;
  opacity: 1 !important;
}

.slider .flickity-prev-next-button:hover svg,
.row-slider .flickity-prev-next-button:hover svg,
.ux-slider .flickity-prev-next-button:hover svg,
.slider .flickity-prev-next-button:hover .arrow,
.row-slider .flickity-prev-next-button:hover .arrow,
.ux-slider .flickity-prev-next-button:hover .arrow {
  color: #fff !important;
  fill: #fff !important;
}

/* Keyboard accessibility: pink brand focus ring. */
.slider .flickity-prev-next-button:focus-visible,
.row-slider .flickity-prev-next-button:focus-visible,
.ux-slider .flickity-prev-next-button:focus-visible {
  outline: 3px solid rgba(236, 20, 120, .22) !important;
  outline-offset: 3px !important;
}

/* Keep disabled arrows invisible exactly like Flatsome. */
.slider .flickity-prev-next-button:disabled,
.row-slider .flickity-prev-next-button:disabled,
.ux-slider .flickity-prev-next-button:disabled,
.slider button.flickity-prev-next-button[disabled],
.row-slider button.flickity-prev-next-button[disabled],
.ux-slider button.flickity-prev-next-button[disabled] {
  opacity: 0 !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

/* Respect the "outside" navigation option instead of forcing it inside. */
@media (min-width: 850px) {
  .slider-nav-outside .flickity-prev-next-button.previous {
    left: -54px !important;
    right: auto !important;
  }
  .slider-nav-outside .flickity-prev-next-button.next {
    right: -54px !important;
    left: auto !important;
  }
}

/* ------------------------------------------------------------------
 * InnoPha product declaration gallery: a slightly more deliberate nav.
 * ------------------------------------------------------------------ */
.hvt-documents-section .hvt-doc-gallery-native.flickity-enabled .flickity-prev-next-button,
.hvt-documents-section .hvt-doc-gallery-native .flickity-prev-next-button {
  width: 46px !important;
  height: 46px !important;
  margin-top: -23px !important;
  border-color: rgba(118, 169, 67, .42) !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 10px 30px rgba(31,45,28,.16) !important;
}

.hvt-documents-section .hvt-doc-gallery-native .flickity-prev-next-button.previous {
  left: 10px !important;
}
.hvt-documents-section .hvt-doc-gallery-native .flickity-prev-next-button.next {
  right: 10px !important;
}

.hvt-documents-section .hvt-doc-gallery-native .flickity-prev-next-button:hover {
  background: linear-gradient(135deg, var(--hvt-slider-nav-green) 0%, var(--hvt-slider-nav-green-dark) 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 14px 34px rgba(71,128,25,.26) !important;
}

/* Medium screens: slightly smaller so the arrows do not cover content. */
@media (max-width: 849px) {
  .slider .flickity-prev-next-button,
  .row-slider .flickity-prev-next-button,
  .ux-slider .flickity-prev-next-button,
  .hvt-documents-section .hvt-doc-gallery-native .flickity-prev-next-button {
    width: 40px !important;
    height: 40px !important;
    margin-top: -20px !important;
  }

  .slider .flickity-prev-next-button.previous,
  .row-slider .flickity-prev-next-button.previous,
  .ux-slider .flickity-prev-next-button.previous,
  .hvt-documents-section .hvt-doc-gallery-native .flickity-prev-next-button.previous {
    left: 8px !important;
  }

  .slider .flickity-prev-next-button.next,
  .row-slider .flickity-prev-next-button.next,
  .ux-slider .flickity-prev-next-button.next,
  .hvt-documents-section .hvt-doc-gallery-native .flickity-prev-next-button.next {
    right: 8px !important;
  }
}

/* Flatsome intentionally hides many slider arrows on small mobile screens.
 * Do not force them back on; style only the row-slider arrows it keeps visible.
 */
@media (max-width: 549px) {
  .row-slider .flickity-prev-next-button {
    width: 34px !important;
    height: 34px !important;
    margin-top: -17px !important;
    border: 1px solid rgba(118,169,67,.30) !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 6px 18px rgba(31,45,28,.10) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slider .flickity-prev-next-button,
  .row-slider .flickity-prev-next-button,
  .ux-slider .flickity-prev-next-button {
    transition: none !important;
  }
}


/* ------------------------------------------------------------------
 * v1.0.1 Stability patch
 * Lock geometry on normal/hover states. Flatsome core otherwise changes
 * transform/margins for reveal/push/circle nav styles, which can make the
 * arrows appear to jump vertically or diagonally on hover.
 * ------------------------------------------------------------------ */
.slider .flickity-prev-next-button,
.slider .flickity-prev-next-button:hover,
.slider .flickity-prev-next-button:focus,
.slider .flickity-prev-next-button:active,
.slider:hover .flickity-prev-next-button,
.row-slider .flickity-prev-next-button,
.row-slider .flickity-prev-next-button:hover,
.row-slider .flickity-prev-next-button:focus,
.row-slider .flickity-prev-next-button:active,
.row-slider:hover .flickity-prev-next-button,
.ux-slider .flickity-prev-next-button,
.ux-slider .flickity-prev-next-button:hover,
.ux-slider .flickity-prev-next-button:focus,
.ux-slider .flickity-prev-next-button:active,
.ux-slider:hover .flickity-prev-next-button {
  top: 50% !important;
  bottom: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  transform: translateY(-50%) !important;
}

/* Reveal/push core styles move the SVG with margins. Reset them. */
.slider-nav-push.slider-nav-reveal .flickity-prev-next-button svg,
.slider-nav-push:not(.slider-nav-reveal) .flickity-prev-next-button svg,
.slider-nav-reveal .flickity-prev-next-button svg,
.slider-nav-circle .flickity-prev-next-button svg,
.slider-nav-circle .flickity-prev-next-button:hover svg {
  margin: 0 !important;
}

/* Keep the arrow itself perfectly centered and dimensionally stable. */
.slider .flickity-prev-next-button svg,
.row-slider .flickity-prev-next-button svg,
.ux-slider .flickity-prev-next-button svg,
.slider .flickity-prev-next-button:hover svg,
.row-slider .flickity-prev-next-button:hover svg,
.ux-slider .flickity-prev-next-button:hover svg {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 27% !important;
  transform: translate(-50%, -50%) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: color .20s ease, fill .20s ease !important;
}

.slider .flickity-prev-next-button .arrow,
.row-slider .flickity-prev-next-button .arrow,
.ux-slider .flickity-prev-next-button .arrow {
  transition: fill .20s ease !important;
}

/* Circle style in Flatsome applies the circle to the SVG itself.
 * Our circle is the button, so neutralize the inner circle to prevent resize. */
.slider-nav-circle .flickity-prev-next-button .arrow,
.slider-nav-circle .flickity-prev-next-button svg,
.slider-nav-circle .flickity-prev-next-button:hover .arrow,
.slider-nav-circle .flickity-prev-next-button:hover svg {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Preserve fixed vertical centering at every responsive size. */
@media (max-width: 849px) {
  .slider .flickity-prev-next-button,
  .slider .flickity-prev-next-button:hover,
  .slider:hover .flickity-prev-next-button,
  .row-slider .flickity-prev-next-button,
  .row-slider .flickity-prev-next-button:hover,
  .row-slider:hover .flickity-prev-next-button,
  .ux-slider .flickity-prev-next-button,
  .ux-slider .flickity-prev-next-button:hover,
  .ux-slider:hover .flickity-prev-next-button {
    margin-top: 0 !important;
    transform: translateY(-50%) !important;
  }
}

@media (max-width: 549px) {
  .row-slider .flickity-prev-next-button,
  .row-slider .flickity-prev-next-button:hover,
  .row-slider:hover .flickity-prev-next-button {
    margin-top: 0 !important;
    transform: translateY(-50%) !important;
  }
}