/**
* Wirt slider
 */
.keen-slider-wrapper.wirt-slider {
  position: relative;
  margin-top: var(--wirt-slider-top-vertical-spacing);
  margin-bottom: var(--wirt-slider-bottom-vertical-spacing);
  margin-block-start: var(--wirt-slider-top-vertical-spacing)!important;
  margin-block-end: var(--wirt-slider-bottom-vertical-spacing)!important;
}

.wirt-slider{

	.keen-slider{
		display: flex;
		align-items: center;
		background: var(--wirt-slider-background-color);
		padding:0;

		&__slide{
			display:flex;
			flex-direction: column;
			width: 100%;
			min-width: 100% !important;
			max-width: 100% !important;
			box-sizing: border-box;
			flex-shrink: 0;
			position: relative;

			img{
				cursor: pointer;
				width: 100%;
				height: auto;
				min-height: 180px;
				object-fit: contain;
				padding: 0;
				margin: 0;
				display: block !important;
				max-width: none !important;
			}
			.wirt-slide-caption{
				background-color: var(--wirt-caption-bg-color);
				color: var(--wirt-caption-text-color);
				position: absolute;
				max-width: 80%;
				top: 10px;
				left: 10px;
				padding: 5px;
				border-radius: 3px;
				justify-content: center;
				align-items: center;
				font-size: 0.8rem;
				opacity: 0;
				transition: 1s;
				line-height: 1.2;

				@media screen and (min-width: 768px) {
					font-size: 1rem;
				}

			}
		}
		&__slide.active{
			.wirt-slide-caption{
				opacity: 1;

			}
		}
	}

	.slider-prev { left: 0; }

	.slider-next { right: 0; }

  .slider-prev, .slider-next {
    display: var(--wirt-slider-nav-display);
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--wirt-navigation-background-color);

    &:hover{
      background: var(--wirt-navigation-background-hover-color);
    }
    color: #fff;
    border: none;
    height: 40px;
    width: 30px;
    cursor: pointer;
    z-index: 10;

    svg{
      width: 24px;
      min-width: 24px;
      height: 24px;
    }
  }

  .slider-dots {
    position: absolute;
    bottom: var(--wirt-dots-bottom-space);
    z-index: 1;
    width: 100%;
    display: var(--wirt-slider-dots-display);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .slider-dots .dot {
    min-width: 10px;
    max-width: 10px;
    padding:0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    background: var(--wirt-dot-color);
    cursor: pointer;
    border: none;
  }

  .dot.active {
    background-color: var(--wirt-active-dot-color);
  }
}



.wirt-slider-modal-overlay{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.95);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1111;

	.keen-slider-wrapper.wirt-slider{
		margin-top: 0;
		margin-bottom: 0;
		margin-block-start: 0!important;
		margin-block-end: 0!important;
	}

  button.wirt-slider-modal-close{
    padding: 5px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    border-radius: 6px;
    outline: none;
	 position: absolute;
	 top: 15px;
	 right: 15px;
	 cursor: pointer;
	 z-index: 1001;

    &:hover{
      background-color: #2d2d2d;
    }
  }

  .slider-dots {
    display: var(--wirt-slider-dots-display);
    position: relative;
    z-index: 11;
    top: -20px;
  }

  .keen-slider{

    &-wrapper{
      width:100%;
    }

    &__slide{

      img{
        width: 100%;
        min-width: 100% !important;
        height: auto;
        max-height: 100vh;
        object-fit: contain;
        padding: 0;
        margin: 0;
        cursor: inherit;
      }

		.wirt-slider-caption{
			cursor:pointer;
			position:absolute;
			top: calc(env(safe-area-inset-top, 0px) + 10px);
			left: 10px;
			transform: translateX(-100%);
			max-width: 70%;
			background-color: var(--wirt-caption-bg-color);
			color: var(--wirt-caption-text-color);
			padding:5px;
			border-radius:3px;
			font-size:0.8rem;
			line-height:1.2;
			transition: 1s;

			@media screen and (min-width: 768px) {
				font-size: 1rem;
			}

			@media screen and (orientation: landscape) and (max-height: 500px) {
				/* Force an extra 25px down if the phone doesn't report safe areas accurately */
				top: calc(env(safe-area-inset-top, 25px) + 25px);
			}

			&::after{
				content:'\27A1';
				display:flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 0;
				right: 0;
				height: 100%;
				width: 15px;
				border-radius: 6px;
				background-color: var(--wirt-caption-bg-color);
				color: var(--wirt-caption-text-color);
				z-index: 1;
				opacity: 1;
				transition: 1s;
			}

			&:hover{
				transform: translateX(0);

				&::after{
					opacity:0;
				}
			}

		}
    }
  }

  .slider-prev, .slider-next{
    color: #fff;
    display: var(--wirt-slider-nav-display);
    background: var(--wirt-navigation-background-color);

    &:hover{
      background: var(--wirt-navigation-background-hover-color);
    }

    svg{
      width: 24px;
      min-width: 24px;
      height: 24px;
    }
  }
}