/**
 * hd_nbs_slider_v1.css
 * No Brainer Slider for Elementor  -  HisDesigns
 *
 * Override reference:
 *   Wrapper          =  .hd_nbs_slider_wrap
 *   Track            =  .hd_nbs_slider_track
 *   Individual slide =  .hd_nbs_slider_slide
 *   Active slide     =  .hd_nbs_slider_slide_active
 *   Prev arrow       =  .hd_nbs_slider_arrow_prev
 *   Next arrow       =  .hd_nbs_slider_arrow_next
 *   Dot              =  .hd_nbs_slider_dot
 *   Active dot       =  .hd_nbs_slider_dot_active
 */


/* -- Wrapper ---------------------------------------------------- */

.hd_nbs_slider_wrap {
  position   : relative;
  width      : 100%;
  overflow   : hidden !important;
  opacity    : 0;
  transition : opacity 0.3s ease !important;
}

.hd_nbs_slider_wrap.hd_nbs_slider_ready {
  opacity : 1;
}


/* -- Track ----------------------------------------------------- */

.hd_nbs_slider_track {
  position : relative;
  width    : 100%;
  height   : 100%;
}


/* -- Arrows ---------------------------------------------------- */

.hd_nbs_slider_arrow {
  position         : absolute !important;
  top              : 50%;
  transform        : translateY(-50%);
  z-index          : 10;
  width            : 44px;
  height           : 44px;
  background-color : rgba(0, 0, 0, 0.4);
  color            : #ffffff;
  border           : none;
  border-radius    : 50%;
  cursor           : pointer;
  font-size        : 18px;
  line-height      : 1;
  display          : flex;
  align-items      : center;
  justify-content  : center;
  transition       : background 0.2s ease !important;
  padding          : 0;
}

.hd_nbs_slider_arrow:hover {
  background-color : rgba(0, 0, 0, 0.65);
}

.hd_nbs_slider_arrow_prev {
  left  : 16px;
  right : auto;
}

.hd_nbs_slider_arrow_next {
  right : 16px;
  left  : auto;
}


/* -- Dots ------------------------------------------------------ */

.hd_nbs_slider_dots {
  position  : absolute !important;
  bottom    : 16px;
  left      : 50%;
  transform : translateX(-50%);
  z-index   : 10;
  display   : flex;
  gap       : 8px;
  align-items : center;
}

.hd_nbs_slider_dot {
  width            : 10px;
  height           : 10px;
  border-radius    : 50%;
  background-color : rgba(255, 255, 255, 0.5);
  border           : none;
  cursor           : pointer;
  padding          : 0;
  transition       : background-color 0.2s ease !important;
  flex-shrink      : 0 !important;
}

.hd_nbs_slider_dot.hd_nbs_slider_dot_active {
  background-color : #ffffff;
}


/* -- Editor canvas  -  show slides stacked so you can edit them -- */

.elementor-editor-active .hd_nbs_slider_wrap {
  opacity : 1;
  overflow : hidden !important;
}

.elementor-editor-active .hd_nbs_slider_track {
  display : flex;
  flex-direction : column;
  gap     : 8px;
  position : relative;
  width    : 100%;
  height   : 500px; /* matches slide height */
}

.elementor-editor-active .hd_nbs_slider_wrap {
  opacity : 1;
}

.elementor-editor-active .hd_nbs_slider_track {
  position : relative !important;
  height   : auto !important;
  display  : flex;
  flex-direction : column;
  gap      : 8px;
}

.elementor-editor-active .hd_nbs_slider_slide {
  position       : relative !important;
  transform      : none !important;
  height         : auto !important;
  pointer-events : auto !important;
  border         : 2px dashed rgba(100, 100, 255, 0.3);
  border-radius  : 3px;
}

/* -- Slides ---------------------------------------------------- */

.hd_nbs_slider_slide {
  background:#fff;
  position   : absolute !important;
  display    : flex;
  flex-direction : column;
  top        : 0;
  left       : 0;
  width      : 100%;
  height     : 100%;
  box-sizing : border-box !important;
  transition : transform 0.6s ease !important;
  z-index        : 0;
}

.hd_nbs_slider_slide.hd_nbs_slider_slide_active {
  pointer-events : auto;
  position       : relative !important;  /* active slide holds document flow */
  z-index        : 1;
}

/* Elementor wraps nested containers in .e-con  -  make it fill the slide */
.hd_nbs_slider_slide > .e-con,
.hd_nbs_slider_slide > .elementor-container {
  width    : 100% !important;
  height   : 100% !important;
  max-width: none !important;
}

.hd_nbs_slider_slide_img {
  display:inline-block;
  width:100%;
  height:100% !important;
  position : absolute;
  top      : 0;
  left     : 0;
}

.hd_nbs_slider_slide_overlay {
  background:rgba(0,0,0,.5);
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  max-height:100%;
  flex       : 1;
  display    : flex;
  align-items     : center;
  justify-content : center;
  width      : 100%;
  position:absolute;
}

.hd_nbs_slider_slide_text_wrap {
  position:absolute;
  max-height:100%;
}

.hd_nbs_slider_slide_text_wrap h1,
.hd_nbs_slider_slide_text_wrap h2,
.hd_nbs_slider_slide_text_wrap p {
  color:#fff;
}

.hd_nbs_slider_slide_button_wrapper {
  display:block;
  width:100%;
  height:auto;
}

.hd_nbs_slider_slide_button,
.hd_nbs_slider_slide_button_alt {
  background:#238ad3;
  border-radius:10px;
  padding:5px 10px;
  color:#fff;
  display:inline-block;
}

.hd_nbs_slider_slide_button_alt {
  background:#d67b2f;
  margin-left:10px;
}

.hd_nbs_slider_slide_overlay a.hd_nbs_slider_slide_button {
  text-decoration:none !important;
}

.hd_nbs_slider_slide_overlay a.hd_nbs_slider_slide_button:hover {
  color:#fff;
}

.hd_nbs_slider_slide_button:hover,
.hd_nbs_slider_slide_button_alt:hover {
  opacity:.7;
}

.elementor-editor-active .hd_nbs_slider_slide > .e-con {
  display : none;
}


/* -- Responsive ------------------------------------------------ */

/* Desktop: default styles above */

@media (max-width: 1024px) and (min-width: 769px) {

  .hd_nbs_slider_slide {
    height : 380px;
  }

  .hd_nbs_slider_arrow {
    width     : 36px !important;
    height    : 36px !important;
    font-size : 14px !important;
  }

}

@media (max-width: 768px) {

  .hd_nbs_slider_slide {
    height : 260px;
  }

  .hd_nbs_slider_arrow {
    width     : 32px !important;
    height    : 32px !important;
    font-size : 12px !important;
  }

  .hd_nbs_slider_arrow_prev { left  : 8px; }
  .hd_nbs_slider_arrow_next { right : 8px; }

}
