/* ==================================================
   REMOVE SPACE AROUND THE HTML WIDGET
================================================== */

#miski-full-slider {
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex: 1 1 100%;
  align-self: stretch;
}

#miski-full-slider,
#miski-full-slider * {
  box-sizing: border-box;
}

/*
 Elementor HTML widget spacing reset.
 This only targets the widget containing this slider.
*/

.elementor-widget-html:has(#miski-full-slider),
.elementor-widget-html:has(#miski-full-slider) > .elementor-widget-container {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ==================================================
   MAIN SLIDER
================================================== */

.miski-main-slider {
  --miski-dark: #15344d;
  --miski-dark-deep: #0d2538;
  --miski-gold: #dfa03d;

  position: relative;

  width: 100%;
  min-width: 0;
  min-height: clamp(580px, 39vw, 710px);

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden;
  isolation: isolate;

  background: var(--miski-dark-deep);
  color: #ffffff;

  font-family: "Poppins", Arial, sans-serif;

  flex: 1 1 100%;
  align-self: stretch;
}


/* ==================================================
   BACKGROUND SLIDES
================================================== */

.miski-slider-images {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.miski-slider-image {
  position: absolute;
  inset: 0;

  background-size: var(--desktop-fit, cover);
  background-repeat: no-repeat;
  background-position: var(--desktop-position, center);

  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);

  transition:
    opacity 0.8s ease,
    visibility 0.8s ease,
    transform 7s ease;
}

.miski-slider-image.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.miski-slider-image::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.08),
      transparent 45%,
      rgba(0, 0, 0, 0.03)
    );
}


/* ==================================================
   LEFT DARK PANEL
================================================== */

.miski-slider-panel {
  position: absolute;
  inset: 0;
  z-index: 2;

  background:
    radial-gradient(
      circle at 25% 40%,
      #1b405c 0%,
      var(--miski-dark) 48%,
      var(--miski-dark-deep) 100%
    );

  -webkit-clip-path:
    polygon(
      0 0,
      48.5% 0,
      36.5% 100%,
      0 100%
    );

  clip-path:
    polygon(
      0 0,
      48.5% 0,
      36.5% 100%,
      0 100%
    );

  pointer-events: none;
}


/* ==================================================
   GOLD DIAGONAL DIVIDER
================================================== */

.miski-slider-divider {
  position: absolute;
  inset: 0;
  z-index: 3;

  background: var(--miski-gold);

  -webkit-clip-path:
    polygon(
      48.15% 0,
      48.7% 0,
      36.75% 100%,
      36.2% 100%
    );

  clip-path:
    polygon(
      48.15% 0,
      48.7% 0,
      36.75% 100%,
      36.2% 100%
    );

  pointer-events: none;
}


/* ==================================================
   CONTENT POSITION
================================================== */

.miski-slider-content-wrapper {
  position: relative;
  z-index: 4;

  width: 100%;
  min-height: inherit;

  margin: 0;
  padding:
    clamp(45px, 5vw, 85px)
    0
    clamp(45px, 5vw, 85px)
    clamp(32px, 5vw, 85px);

  display: flex;
  align-items: center;
}

.miski-slider-content {
  /*
   This safe width keeps all text before the
   diagonal divider.
  */

  width: min(29vw, 430px);
  max-width: 430px;
  min-width: 0;

  margin: 0;
  padding: 0;

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.miski-slider-content.is-changing {
  opacity: 0;
  transform: translateY(12px);
}


/* ==================================================
   TITLE
================================================== */

.miski-slider-title {
  width: 100%;

  margin: 0 0 25px;
  padding: 0;

  color: #ffffff;

  font-size: clamp(38px, 3vw, 57px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -1.3px;

  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.miski-slider-title-line {
  display: block;
  width: 100%;

  white-space: nowrap;

  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.miski-slider-title-line + .miski-slider-title-line {
  margin-top: 3px;
}

.miski-slider-title-highlight {
  color: var(--miski-gold);
}


/* ==================================================
   DESCRIPTION
================================================== */

.miski-slider-description {
  width: 100%;
  max-width: 390px;

  margin: 0;
  padding: 0;

  color: rgba(255, 255, 255, 0.82);

  font-size: clamp(14px, 1vw, 16px);
  font-weight: 400;
  line-height: 1.7;

  word-break: normal;
  overflow-wrap: normal;
}


/* ==================================================
   BUTTON
================================================== */

.miski-slider-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 155px;
  min-height: 50px;

  margin: 30px 0 0;
  padding: 13px 26px;

  border: 2px solid var(--miski-gold);
  border-radius: 6px;

  background: var(--miski-gold);
  color: #ffffff;

  font-size: 15px;
  font-weight: 700;
  line-height: 1;

  text-decoration: none;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.miski-slider-button:hover {
  background: transparent;
  color: #ffffff;

  transform: translateY(-3px);

  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.2);
}


/* ==================================================
   NAVIGATION
================================================== */

.miski-slider-navigation {
  position: absolute;
  right: clamp(24px, 4vw, 70px);
  bottom: 28px;
  z-index: 7;

  min-height: 62px;
  padding: 8px 10px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;

  background: rgba(11, 34, 53, 0.78);

  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.22);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}


/* Reset Elementor button styles */

.miski-main-slider button.miski-slider-arrow {
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 45px !important;
  height: 45px !important;
  min-width: 45px !important;
  min-height: 45px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 50% !important;

  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;

  font-size: 0 !important;
  line-height: 1 !important;

  cursor: pointer;

  box-shadow: none !important;

  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.miski-main-slider button.miski-slider-arrow svg {
  display: block;

  width: 22px;
  height: 22px;

  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;

  pointer-events: none;
}

.miski-main-slider button.miski-slider-arrow:hover {
  border-color: var(--miski-gold) !important;
  background: var(--miski-gold) !important;
  color: #ffffff !important;

  transform: scale(1.08);

  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.25) !important;
}

.miski-main-slider button.miski-slider-arrow:focus-visible {
  outline: 3px solid rgba(223, 160, 61, 0.5) !important;
  outline-offset: 3px;
}


/* ==================================================
   DOTS
================================================== */

.miski-slider-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.miski-main-slider button.miski-slider-dot {
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 9px !important;
  height: 9px !important;
  min-width: 9px !important;
  min-height: 9px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 20px !important;

  background: rgba(255, 255, 255, 0.45) !important;

  font-size: 0 !important;
  line-height: 0 !important;

  cursor: pointer;

  box-shadow: none !important;

  transition:
    width 0.3s ease,
    background 0.3s ease,
    transform 0.3s ease;
}

.miski-main-slider button.miski-slider-dot:hover {
  background: rgba(255, 255, 255, 0.9) !important;
  transform: scale(1.15);
}

.miski-main-slider button.miski-slider-dot.is-active {
  width: 30px !important;
  min-width: 30px !important;

  background: var(--miski-gold) !important;
}


/* ==================================================
   DESKTOP MOUSE DRAG
================================================== */

@media (hover: hover) and (pointer: fine) {

  .miski-main-slider.miski-mouse-drag-enabled {
    cursor: grab;
  }

  .miski-main-slider.miski-mouse-drag-enabled a,
  .miski-main-slider.miski-mouse-drag-enabled button {
    cursor: pointer;
  }

  .miski-main-slider.miski-mouse-drag-enabled.is-mouse-dragging {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
  }

  .miski-main-slider.miski-mouse-drag-enabled.is-mouse-dragging
  .miski-slider-image.is-active {
    transform:
      translateX(var(--miski-mouse-drag-x, 0px))
      scale(1.01);
    transition: none;
  }

}


/* ==================================================
   MEDIUM DESKTOP
================================================== */

@media screen and (max-width: 1250px) {

  .miski-slider-panel {
    -webkit-clip-path:
      polygon(
        0 0,
        51% 0,
        39% 100%,
        0 100%
      );

    clip-path:
      polygon(
        0 0,
        51% 0,
        39% 100%,
        0 100%
      );
  }

  .miski-slider-divider {
    -webkit-clip-path:
      polygon(
        50.6% 0,
        51.2% 0,
        39.25% 100%,
        38.65% 100%
      );

    clip-path:
      polygon(
        50.6% 0,
        51.2% 0,
        39.25% 100%,
        38.65% 100%
      );
  }

  .miski-slider-content {
    width: min(32vw, 410px);
    max-width: 410px;
  }

  .miski-slider-title {
    font-size: clamp(37px, 3.5vw, 51px);
  }

}


/* ==================================================
   TABLET
================================================== */

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

  .miski-main-slider {
    min-height: 650px;
  }

  .miski-slider-panel {
    -webkit-clip-path:
      polygon(
        0 0,
        58% 0,
        45% 100%,
        0 100%
      );

    clip-path:
      polygon(
        0 0,
        58% 0,
        45% 100%,
        0 100%
      );
  }

  .miski-slider-divider {
    -webkit-clip-path:
      polygon(
        57.5% 0,
        58.3% 0,
        45.3% 100%,
        44.5% 100%
      );

    clip-path:
      polygon(
        57.5% 0,
        58.3% 0,
        45.3% 100%,
        44.5% 100%
      );
  }

  .miski-slider-content-wrapper {
    padding-left: clamp(30px, 5vw, 55px);
  }

  .miski-slider-content {
    width: min(40vw, 390px);
    max-width: 390px;
  }

  .miski-slider-title {
    font-size: clamp(35px, 4.5vw, 47px);
  }

  .miski-slider-description {
    max-width: 360px;
    font-size: 14px;
  }

}


/* ==================================================
   SMALL TABLET
================================================== */

@media screen and (max-width: 850px) {

  .miski-slider-panel {
    -webkit-clip-path:
      polygon(
        0 0,
        63% 0,
        49% 100%,
        0 100%
      );

    clip-path:
      polygon(
        0 0,
        63% 0,
        49% 100%,
        0 100%
      );
  }

  .miski-slider-divider {
    -webkit-clip-path:
      polygon(
        62.4% 0,
        63.3% 0,
        49.3% 100%,
        48.4% 100%
      );

    clip-path:
      polygon(
        62.4% 0,
        63.3% 0,
        49.3% 100%,
        48.4% 100%
      );
  }

  .miski-slider-content {
    width: 42vw;
    max-width: 355px;
  }

  .miski-slider-title {
    font-size: clamp(32px, 4.8vw, 41px);
  }

  .miski-slider-navigation {
    right: 20px;
  }

}


/* ==================================================
   MOBILE
================================================== */

@media screen and (max-width: 767px) {

  .miski-main-slider {
    min-height: 790px;
  }

  /* Mobile image area: keep the complete product photo visible. */
  .miski-slider-images {
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    height: 345px;
    overflow: hidden;
    background: #f7f7f7;
  }

  .miski-slider-image {
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    height: 345px;
    background-size: var(--mobile-fit, contain);
    background-repeat: no-repeat;
    background-position:
      var(--mobile-position, center center);
    background-color: #f7f7f7;
    transform: none;
  }

  .miski-slider-image.is-active {
    transform: none;
  }

  /*
   On mobile:
   - Image is on top
   - Content is below
   - Divider remains diagonal
  */

  .miski-slider-panel {
    background:
      linear-gradient(
        145deg,
        #1b405c 0%,
        var(--miski-dark) 45%,
        var(--miski-dark-deep) 100%
      );

    -webkit-clip-path:
      polygon(
        0 42%,
        100% 35%,
        100% 100%,
        0 100%
      );

    clip-path:
      polygon(
        0 42%,
        100% 35%,
        100% 100%,
        0 100%
      );
  }

  .miski-slider-divider {
    -webkit-clip-path:
      polygon(
        0 41.2%,
        100% 34.2%,
        100% 35.5%,
        0 42.5%
      );

    clip-path:
      polygon(
        0 41.2%,
        100% 34.2%,
        100% 35.5%,
        0 42.5%
      );
  }

  .miski-slider-content-wrapper {
    min-height: inherit;

    align-items: flex-end;

    padding:
      345px
      24px
      50px;
  }

  .miski-slider-content {
    width: 100%;
    max-width: 100%;
  }

  .miski-slider-title {
    margin-bottom: 19px;

    font-size: clamp(32px, 9vw, 43px);
    line-height: 1.08;
    letter-spacing: -0.8px;
  }

  .miski-slider-title-line {
    white-space: normal;
  }

  .miski-slider-description {
    max-width: 100%;

    font-size: 14px;
    line-height: 1.65;
  }

  .miski-slider-button {
    min-width: 140px;
    min-height: 47px;

    margin-top: 23px;
  }

  .miski-slider-navigation {
    top: 275px;
    right: 18px;
    bottom: auto;

    min-height: 55px;
    padding: 6px 8px;
    gap: 10px;
  }

  .miski-main-slider button.miski-slider-arrow {
    width: 41px !important;
    height: 41px !important;
    min-width: 41px !important;
    min-height: 41px !important;
  }

}


/* ==================================================
   SMALL MOBILE
================================================== */

@media screen and (max-width: 420px) {

  .miski-main-slider {
    min-height: 740px;
  }

  .miski-slider-images,
  .miski-slider-image {
    height: 315px;
  }

  .miski-slider-content-wrapper {
    padding:
      330px
      20px
      42px;
  }

  .miski-slider-title {
    font-size: 32px;
  }

  .miski-slider-navigation {
    top: 245px;
    right: 12px;
  }

  .miski-slider-dots {
    gap: 5px;
  }

  .miski-main-slider button.miski-slider-dot.is-active {
    width: 22px !important;
    min-width: 22px !important;
  }

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

  .miski-slider-image,
  .miski-slider-content,
  .miski-slider-button,
  .miski-slider-arrow,
  .miski-slider-dot {
    transition: none;
  }

}