/* ========= Flickity Base Essentials ========= */
.flickity-enabled {
  position: relative;
}
.flickity-enabled:focus {
  outline: none;
}
.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
  touch-action: pan-y;
}
.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
}
.flickity-rtl .flickity-slider {
  left: unset;
  right: 0;
}
.flickity-cell {
  position: absolute;
  left: 0;
}
.flickity-rtl .flickity-cell {
  left: unset;
  right: 0;
}
.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
  cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: grabbing;
}
.flickity-enabled.is-fade .flickity-slider > * {
  pointer-events: none;
  z-index: 0;
}
.flickity-enabled.is-fade .flickity-slider > .is-selected {
  pointer-events: auto;
  z-index: 1;
}

/* ========= Custom Navigation Layout ========= */
.custom-flickity-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5rem; /* Adjust spacing between arrows and dots */
  margin-top: 2rem;
  position: relative;
}

/* ========= Custom Arrows ========= */
.custom-flickity-controls .flickity-prev-next-button {
  position: relative;
  width: 52px;
  height: 52px;
  background: white;
  border: none;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  cursor: pointer;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  overflow: visible;
  z-index: 1;
}

.custom-flickity-controls .flickity-prev-next-button::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  background: linear-gradient(289.08deg, #0A4A7F 0.09%, #0199DF 99.91%);
  z-index: -1;
}
.custom-flickity-controls .flickity-prev-next-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background: white;
  z-index: -1;
  transition: opacity 0.3s ease;
}
.custom-flickity-controls .flickity-prev-next-button:hover::after {
  opacity: 0;
}
.custom-flickity-controls .flickity-prev-next-button svg {
  width: 18px;
  height: 18px;
  z-index: 1;
  transition: 0.3s;
}
.custom-flickity-controls .flickity-prev-next-button:hover path {
  fill: white;
}

.home .products-carousel .flickity-prev-next-button:hover path {fill:#fff;}


/* ---- page dots ---- */
.flickity-page-dots {
  position: absolute;
  bottom: 35px;
  left: 35px;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  z-index: 3;
  margin: 0 -10px;
}

.flickity-rtl .flickity-page-dots { direction: rtl; }

.flickity-page-dot {
  display: block;
  width: 80px;
  height: 4px;
  margin: 0 4px;
  background: #fff;
  opacity: 0.5;
  cursor: pointer;
  appearance: none;
  border: none;
  text-indent: -9999px;
  overflow: hidden;
}

.flickity-rtl .flickity-page-dot {
  text-indent: 9999px;
}

.flickity-page-dot.is-selected {
  opacity:1;
}

/* flickity-fade */
.flickity-enabled.is-fade .flickity-slider > * {
  pointer-events: none;
  z-index: 0;
}

.flickity-enabled.is-fade .flickity-slider > .is-selected {
  pointer-events: auto;
  z-index: 1;
}


/* ========= Custom Dots as Lines ========= */
.custom-flickity-controls .flickity-page-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  position: static;
  margin: 0;
}
.custom-flickity-controls .flickity-page-dot {
  position: relative;
  width: 16px;
  height: 6px; /* Fixed container height */
  padding: 0;
  appearance: none;
  cursor: pointer;
  text-indent: -9999px;
  overflow: hidden;
  background: transparent;
  border: none;
  opacity: 1;
  padding: 2px 0;
}
.custom-flickity-controls .flickity-page-dot::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 3px;
  background: #0A4A7F;
  transition: all 0.3s ease;
}
.custom-flickity-controls .flickity-page-dot:hover,
.custom-flickity-controls .flickity-page-dot.is-selected{
  height: 8px;
}
.custom-flickity-controls .flickity-page-dot:hover:after,
.custom-flickity-controls .flickity-page-dot.is-selected::after {
  height: 4px;
  background: #0199DF;
}


.orange-nav .custom-flickity-controls .flickity-page-dot::after{
  background: #FF9200;
}

.orange-nav .custom-flickity-controls .flickity-page-dot.is-selected::after {
  background: #F36500;
}

.orange-nav .custom-flickity-controls .flickity-prev-next-button::before {
  background: linear-gradient(90deg, #F36500 0%, #FF9200 100%);
}
.blue-nav .custom-flickity-controls .flickity-prev-next-button::before {
  background: linear-gradient(90deg, #0029B4 0%, #3965F8 100%);
}
.blue-nav .custom-flickity-controls .flickity-page-dot::after{
  background: #3965F8;
}
.blue-nav .custom-flickity-controls .flickity-page-dot.is-selected::after{
  background: #0029B4;
}
.yellow-nav .custom-flickity-controls .flickity-prev-next-button::before {
  background: linear-gradient(180deg, #FFB400 0%, #EFA722 100%); 
}
.yellow-nav .custom-flickity-controls .flickity-page-dot::after{
  background: #FFB400;
}
.yellow-nav .custom-flickity-controls .flickity-page-dot.is-selected::after{
  background: #EFA722;
}
.turquoise-nav .custom-flickity-controls .flickity-prev-next-button::before {
  background: linear-gradient(271.53deg, #2A849D 0%, #1A3E48 89.24%);
}
.turquoise-nav .custom-flickity-controls .flickity-page-dot::after{
  background: #2A849D;
}
.turquoise-nav .custom-flickity-controls .flickity-page-dot.is-selected::after{
  background: #1A3E48;
}
.cyan-nav .custom-flickity-controls .flickity-prev-next-button::before {
  background: linear-gradient(91.73deg, #00ACC9 -0.54%, #50E6FF 100%);
}
.cyan-nav .custom-flickity-controls .flickity-page-dot::after{
  background: #50E6FF;
}
.cyan-nav .custom-flickity-controls .flickity-page-dot.is-selected::after{
  background: #00ACC9;
}
.pink-nav .custom-flickity-controls .flickity-prev-next-button::before {
  background: linear-gradient(268.93deg, #F4AAB7 4.79%, #D67B8B 74.15%);
}
.pink-nav .custom-flickity-controls .flickity-page-dot::after{
  background: #F4AAB7;
}
.pink-nav .custom-flickity-controls .flickity-page-dot.is-selected::after{
  background: #D67B8B;
}

/* Arrow element centered inside the button */
.home .products-carousel .flickity-prev-next-button {
  position: relative; /* ensure ::before/::after & arrow position correctly */
}
.home .products-carousel .flickity-prev-next-button .carousel-arrow {
  position: absolute;
  inset: 0;                 /* center by background-position */
  margin: auto;
  width: 18px;
  height: 18px;
  background: linear-gradient(289.08deg, #0A4A7F 0.09%, #0199DF 99.91%);
  background-repeat: no-repeat;
  background-position: center;

  /* mask = LEFT arrow shape */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M10.8024 15.8276L5.45123 10.4764H17.4V7.98343H5.45123L10.8024 2.63228L9.03986 0.869751L0.679688 9.22992L9.03986 17.5901L10.8024 15.8276Z" fill="black"/></svg>') no-repeat center;
  -webkit-mask-size: 18px 18px;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M10.8024 15.8276L5.45123 10.4764H17.4V7.98343H5.45123L10.8024 2.63228L9.03986 0.869751L0.679688 9.22992L9.03986 17.5901L10.8024 15.8276Z" fill="black"/></svg>') no-repeat center;
  mask-size: 18px 18px;

  pointer-events: none;      /* clicks go to the button */
  transition: background .25s ease;
}

/* NEXT arrow points right by flipping the mask shape */
.home .products-carousel .flickity-prev-next-button .carousel-arrow.is-next {
  transform: scaleX(-1);
}

/* Hover: swap arrow color to white (your circle bg/gradient comes from ::before/::after) */
.home .products-carousel .flickity-prev-next-button:hover .carousel-arrow {
  background: #fff;
}

/* Hide any inline svg icons if Flickity re-injects them */
.home-carousel.products-carousel .flickity-prev-next-button svg {
  display: none !important;
}