@import "../mixins/mixins-master";

.pp-no-trans {
    transition: none;
}

.pp-media-overlay {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	inset-inline-end: 0;
	bottom: 0;

	@include transition();
}

.pp-image-overlay {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	inset-inline-end: 0;
	bottom: 0;
}

.pp-icon {
	display: inline-block;
	line-height: 1;
	text-align: center;
    transition: all .3s;
}

.pp-icon i,
.pp-icon svg {
    width: 1em;
    height: 1em;
    position: relative;
    display: block;
}

.pp-image-gallery {
    // Duration for the filter show/hide animation (overridable via custom CSS).
    --pp-gallery-filter-duration: 0.4s;
    // Positioning context for the filter animation / absolutely-positioned masonry
    // items. Grid uses Elementor's .elementor-grid; masonry sets its own display.
    position: relative;

    .pp-grid-item-wrap {
        transition: none;
    }

    .pp-grid-item-hidden {
        display: none;
    }
}
// Masonry layout — absolutely positioned items (mirrors Elementor's e-gallery
// masonry). A CSS-grid fallback + gap shows the correct columns/gutters before the
// script runs (no item padding → no load-in shift); the script reads the gap back
// from the container and absolutely positions the items.
.pp-image-gallery-masonry {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: grid;
    grid-template-columns: repeat(var(--pp-gallery-columns, 3), 1fr);
    gap: var(--grid-row-gap, 0) var(--grid-column-gap, 0);

    .pp-gallery-slide-image,
    .pp-image img {
        display: block;
        width: 100%;
        height: auto;
    }
}

.pp-image-gallery-thumbnail-wrap {
    overflow: hidden;
	position: relative;
    transition: all 0.25s linear;

    a {
        cursor: pointer;
        display: block;
        position: relative;
    }
}

.pp-image-gallery-thumbnail {
    overflow: hidden;

    img {
        transition: all 0.25s linear;
        vertical-align: middle;
    }
}

.pp-gallery-equal-height {

    .pp-image img {
        width: 100%;
    }
}

.pp-gallery-filters {
	margin-inline-start: -5px;
	margin-inline-end: -5px;
    text-align: center;

    .pp-gallery-filter {
        cursor: pointer;
        display: inline-block;
        line-height: 1;
        margin: 0 5px 18px;
		padding: 12px 0;
		position: relative;
        transition: all 0.25s linear;
    }
}

.pp-filters-dropdown {
	display: none;
	margin: 0 0 20px;
	padding: 10px;
}

.pp-gallery-load-more {
	text-decoration: none;
}

.pp-gallery-load-more.disabled {
	pointer-events: none;
	opacity: 0.3;
}

.pp-media-content {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	inset-inline-end: 0;
	bottom: 0;

    .pp-gallery-image-caption {
        color: #fff;
        padding: 5px 10px;

		a {
			color: inherit;
		}
    }
}

.pp-gallery-image-content,
.pp-gallery-image-icon-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.pp-gallery-tilt {
    transform-style: preserve-3d;
}

.pp-button-loader {
    display: none;
}

.pp-gallery-load-more {

    &.pp-loading {

        .pp-button-loader {
            display: inline-block;
            width: 18px;
            height: 18px;
            vertical-align: middle;
            margin-inline-end: 8px;

            &::after {
                content: '';
                display: block;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                border: 3px solid #fff;
                border-color: #fff transparent #fff transparent;
                animation: pp-dual-ring 1.2s linear infinite;
            }
        }
    }

    @keyframes pp-dual-ring {

      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
}

.pp-image-gallery-justified {

    &:not(.justified-gallery) {
        position: relative;
        overflow: hidden;
    }

    .pp-grid-item-wrap {

        @include transition($target: all, $time: 0.25s, $timing-function: linear);
    }
}

.pp-image-gallery-justified > div {
	position: absolute;
	display: inline-block;

	/* background: #888888; To have gray placeholders while the gallery is loading with waitThumbnailsLoad = false */
	filter: "alpha(opacity=10)";
	opacity: 0.1;
	margin: 0;
	padding: 0;
}

.pp-image-gallery-justified > .jg-entry-visible {
	filter: "alpha(opacity=100)";
	opacity: 1;
	background: none;
}

.pp-image-gallery-justified > .jg-filtered {
    display: none;
}

.pp-gallery-image-content,
.pp-gallery-image-caption,
.pp-gallery-image-title,
.pp-gallery-image-description {

    @include transition($target: all, $time: 0.25s, $timing-function: linear);
}

.pp-caption-hover-effect-fade-in {

	.pp-gallery-image-caption {
		opacity: 0;
	}

	.pp-image:hover {

		.pp-media-content {

			.pp-gallery-image-caption {
				opacity: 1;
			}
		}
	}
}

.pp-caption-hover-effect-fade-out {

	.pp-gallery-image-caption {
		opacity: 1;
	}

	.pp-image:hover {

		.pp-media-content {

			.pp-gallery-image-caption {
				opacity: 0;
			}
		}
	}
}

.pp-caption-hover-effect-slide-from-top {

    .pp-media-content {
        transform: translateY(-100%);
    }
}

.pp-caption-hover-effect-slide-from-bottom {

    .pp-media-content {
        transform: translateY(100%);
    }
}

.pp-caption-hover-effect-slide-from-left {

    .pp-media-content {
        transform: translateX(-100%);
    }
}

.pp-caption-hover-effect-slide-from-right {

    .pp-media-content {
        transform: translateX(100%);
    }
}

.pp-caption-hover-effect-fade-from-top {

    .pp-media-content {
        transform: translateY(-24px);
    }
}

.pp-caption-hover-effect-fade-from-bottom {

    .pp-media-content {
        transform: translateY(24px);
    }
}

.pp-caption-hover-effect-fade-from-left {

    .pp-media-content {
        transform: translateX(-24px);
    }
}

.pp-caption-hover-effect-fade-from-right {

    .pp-media-content {
        transform: translateX(24px);
    }
}

.pp-caption-hover-effect-fade-to-top {

	.pp-image:hover {

    	.pp-media-content {
            transform: translateY(-24px);
        }
    }
}

.pp-caption-hover-effect-fade-to-bottom {

	.pp-image:hover {

    	.pp-media-content {
            transform: translateY(24px);
        }
    }
}

.pp-caption-hover-effect-fade-to-left {

    .pp-image:hover {

    	.pp-media-content {
            transform: translateX(-24px);
        }
    }
}

.pp-caption-hover-effect-fade-to-right {

    .pp-image:hover {

    	.pp-media-content {
            transform: translateX(24px);
        }
    }
}

.pp-caption-hover-effect-slide-to-top {

    .pp-image:hover {

    	.pp-media-content {
            transform: translateY(-100%);
        }
    }
}

.pp-caption-hover-effect-slide-to-bottom {

    .pp-image:hover {

    	.pp-media-content {
            transform: translateY(100%);
        }
    }
}

.pp-caption-hover-effect-slide-to-left {

    .pp-image:hover {

    	.pp-media-content {
            transform: translateX(-100%);
        }
    }
}

.pp-caption-hover-effect-slide-to-right {

    .pp-image:hover {

    	.pp-media-content {
            transform: translateX(100%);
        }
    }
}

.pp-caption-hover-effect-fade-from-top,
.pp-caption-hover-effect-fade-from-bottom,
.pp-caption-hover-effect-fade-from-left,
.pp-caption-hover-effect-fade-from-right {

    .pp-media-content {
        opacity: 0;
    }
}

.pp-caption-hover-effect-fade-to-top,
.pp-caption-hover-effect-fade-to-bottom,
.pp-caption-hover-effect-fade-to-left,
.pp-caption-hover-effect-fade-to-right {

    .pp-image:hover {

    	.pp-media-content {
            opacity: 0;
        }
    }
}

.pp-caption-hover-effect-slide-from-bottom,
.pp-caption-hover-effect-slide-from-top,
.pp-caption-hover-effect-slide-from-right,
.pp-caption-hover-effect-slide-from-left,
.pp-caption-hover-effect-fade-from-top,
.pp-caption-hover-effect-fade-from-bottom,
.pp-caption-hover-effect-fade-from-left,
.pp-caption-hover-effect-fade-from-right {

    .pp-image:hover {

    	.pp-media-content {
            transform: translateY(0) translateX(0);
        }
    }
}

.pp-caption-hover-effect-fade-from-top,
.pp-caption-hover-effect-fade-from-bottom,
.pp-caption-hover-effect-fade-from-left,
.pp-caption-hover-effect-fade-from-right {

    .pp-image:hover {

    	.pp-media-content {
            opacity: 1;
        }
    }
}

.pp-fancybox-thumbs-x {

	&.fancybox-show-thumbs .fancybox-inner {
		inset-inline-end: 0;
		bottom: 95px;
	}

	.fancybox-thumbs {
		top: auto;
		width: auto;
		bottom: 0;
		inset-inline-start: 0;
		right : 0;
		height: 95px;
		padding: 10px 10px 5px 10px;
		box-sizing: border-box;
		background: rgba(0, 0, 0, 0.3);
	}
}

.pp-gallery-fancybox {

    .fancybox-button {
        border-radius: 0 !important;
        padding: 10px !important;
    }
}

.logged-in #wpadminbar~.pp-gallery-fancybox .fancybox-toolbar {
    margin-top: 32px;
}

@media (max-width: 1024px) {

	.pp-filters-wrapper-tablet {

		.pp-gallery-filters:not(.pp-filters-dropdown) {
			display: none;
		}

		.pp-filters-dropdown {
			display: block;
		}
	}
}

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

	.pp-filters-wrapper-mobile {

		.pp-gallery-filters:not(.pp-filters-dropdown) {
			display: none;
		}

		.pp-filters-dropdown {
			display: block;
		}
	}
}