@import "../templates/templates.css";

.hero-slider-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;

  &:not(.swiper-3d) {
    overflow: hidden;
  }

  &.swiper-3d,
  &.swiper-cube,
  &.swiper-flip {
    overflow: visible !important;
  }

  &.alignfull {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0 !important;
    margin-right: 0 !important;

    @supports (width: calc(100vw - 100%)) {
      width: calc(100vw - (100vw - 100%) + (var(--wp--style--root--padding-right) * 2) );
      max-width: calc(100vw - (100vw - 100%) + (var(--wp--style--root--padding-right) * 2) );
    }
  }

  &.alignwide {
    width: 100%;
    max-width: var(--wp--style--global--wide-size, 1200px);
    margin-left: auto;
    margin-right: auto;
  }

  .swiper-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  .swiper-slide {
    height: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  .swiper-pagination {
    position: absolute;
    bottom: 25px;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 20;
    width: auto !important;
    display: flex;
    justify-content: center;
    align-items: center;

    .swiper-pagination-bullet {
      width: 12px;
      height: 12px;
      background: rgba(255, 255, 255, 0.6);
      opacity: 0.7;
      margin: 0 6px !important;
      transition: all 0.3s ease;

      &.swiper-pagination-bullet-active {
        background: #ffffff;
        opacity: 1;
        width: 32px;
        border-radius: 6px;
      }
    }
  }

  .swiper-button-next,
  .swiper-button-prev {
    color: #ffffff !important;
    width: 48px !important;
    height: 48px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: 50% !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 30 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    top: 50% !important;
    margin-top: -24px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
    box-sizing: border-box !important;
    padding: 10px;

    &:after {
      font-size: 16px !important;
      font-weight: 700 !important;
      line-height: 1 !important;
      display: block !important;
      text-align: center !important;
      width: auto !important;
      height: auto !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    &:hover {
      background: #1e293b !important;
      border-color: rgba(255, 255, 255, 0.6) !important;
      color: #ffffff !important;
      transform: scale(1.08) !important;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
    }

    &:active {
      transform: scale(0.96) !important;
    }

    &.swiper-button-disabled {
      opacity: 0.3 !important;
      cursor: not-allowed !important;
      pointer-events: none !important;
    }
  }

  .swiper-button-next {
    right: 24px !important;
    left: auto !important;
  }

  .swiper-button-prev {
    left: 24px !important;
    right: auto !important;
  }

  @media (max-width: 768px) {
    .swiper-button-next,
    .swiper-button-prev {
      display: none !important;
    }

    .swiper-pagination {
      bottom: 20px;
    }
  }
}