/* =====================================================
   MyPlug Gallery — Front-end styles
   ===================================================== */

.mpg-gallery,
.mpg-gallery *,
.mpg-gallery *::before,
.mpg-gallery *::after {
	box-sizing: border-box;
}

.mpg-item {
	position: relative;
	overflow: hidden;
	display: block;
}

.mpg-item a {
	display: block;
	height: 100%;
}

.mpg-item img.mpg-img,
.swiper-slide img.mpg-img,
.mpg-cover__media img.mpg-img {
	width: 100%;
	display: block;
	transition: transform .35s ease, filter .35s ease, opacity .35s ease;
}

/* =====================================================
   Mosaic
   ===================================================== */

.mpg-mosaic.mpg-mode-grid {
	display: grid;
	grid-template-columns: repeat(var(--mpg-columns, 4), 1fr);
	gap: var(--mpg-gap, 10px);
}

.mpg-mosaic.mpg-mode-masonry {
	column-count: var(--mpg-columns, 4);
	column-gap: var(--mpg-gap, 10px);
}

.mpg-mode-masonry .mpg-item {
	break-inside: avoid;
	margin-bottom: var(--mpg-gap, 10px);
	width: 100%;
}

.mpg-mode-grid .mpg-item {
	aspect-ratio: var(--mpg-ratio, 1/1);
}

.mpg-mode-grid .mpg-item img.mpg-img {
	height: 100%;
	object-fit: cover;
}

.mpg-mode-masonry .mpg-item img.mpg-img {
	height: auto;
}

@media (max-width: 767px) {
	.mpg-mosaic.mpg-mode-grid,
	.mpg-mosaic.mpg-mode-masonry {
		gap: var(--mpg-gap, 8px);
		column-gap: var(--mpg-gap, 8px);
	}
}

/* Column-count capping for the "fixed columns" path only (shortcode and
   the single gallery page template) — the Elementor widget never gets
   this class, since it manages its own per-breakpoint column counts
   through Elementor's native responsive controls and never sets
   --mpg-columns via inline style in the first place. Without this, a
   fixed columns="6" (say) would stay 6 columns even on a phone. */
@media (max-width: 1024px) {
	.mpg-fixed-columns.mpg-mode-grid,
	.mpg-fixed-columns.mpg-mode-masonry {
		--mpg-columns: min(var(--mpg-columns, 4), 3);
	}
}

@media (max-width: 600px) {
	.mpg-fixed-columns.mpg-mode-grid,
	.mpg-fixed-columns.mpg-mode-masonry {
		--mpg-columns: min(var(--mpg-columns, 4), 2);
	}
}

/* =====================================================
   Hover effects (shared between mosaic items and carousel slides)
   ===================================================== */

.mpg-hover-zoom .mpg-item:hover img.mpg-img,
.mpg-hover-zoom .swiper-slide:hover img.mpg-img,
.mpg-cover.mpg-hover-zoom:hover .mpg-cover__media img.mpg-img {
	transform: scale(1.08);
}

.mpg-hover-grayscale .mpg-item img.mpg-img,
.mpg-hover-grayscale .swiper-slide img.mpg-img,
.mpg-cover.mpg-hover-grayscale .mpg-cover__media img.mpg-img {
	filter: grayscale(100%);
}

.mpg-hover-grayscale .mpg-item:hover img.mpg-img,
.mpg-hover-grayscale .swiper-slide:hover img.mpg-img,
.mpg-cover.mpg-hover-grayscale:hover .mpg-cover__media img.mpg-img {
	filter: grayscale(0%);
}

.mpg-hover-fade .mpg-item::after,
.mpg-cover.mpg-hover-fade .mpg-cover__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, .35);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}

.mpg-hover-fade .mpg-item:hover::after,
.mpg-cover.mpg-hover-fade:hover .mpg-cover__media::after {
	opacity: 1;
}

/* =====================================================
   Style presets
   Kept to 1-2 class selectors so an Elementor widget's own
   style-tab controls (border/radius/padding/shadow, which target
   .mpg-item / img with similar specificity) always take precedence
   over these baked-in defaults.
   ===================================================== */

/* Style 1 — classic, minimal */
.mpg-preset-style-1 .mpg-item img,
.mpg-preset-style-1 .swiper-slide img {
	border-radius: 6px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .08);
}

/* Style 2 — modern card: outer card frame + inner image radius,
   so the two layers never fight over the same property. */
.mpg-preset-style-2 .mpg-item,
.mpg-preset-style-2 .swiper-slide {
	background: #fff;
	padding: 6px;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
	transition: transform .3s ease, box-shadow .3s ease;
}

.mpg-preset-style-2 .mpg-item:hover,
.mpg-preset-style-2 .swiper-slide:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(0, 0, 0, .18);
}

.mpg-preset-style-2 .mpg-item img,
.mpg-preset-style-2 .swiper-slide img {
	border-radius: 9px;
}

/* =====================================================
   Carousel — minimal, self-contained Swiper structural CSS.
   Not relying on Elementor's own Swiper stylesheet (name/availability
   isn't guaranteed) — only the small set of rules Swiper's JS actually
   needs to position slides correctly.
   ===================================================== */

.mpg-carousel {
	position: relative;
}

.mpg-carousel .swiper {
	position: relative;
	overflow: hidden;
	list-style: none;
	padding: 0;
	margin: 0;
	z-index: 1;
}

.mpg-carousel .swiper-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	box-sizing: content-box;
	transition-property: transform;
}

.mpg-carousel .swiper-slide {
	flex-shrink: 0;
	width: 100%;
	height: auto;
	position: relative;
	transition-property: transform;
}

.mpg-carousel .swiper-slide img.mpg-img {
	border-radius: 6px;
}

/* Navigation arrows — simple CSS chevrons, no icon-font dependency.
   !important is used deliberately on the structural/positioning
   properties here: WoodMart (and Elementor itself, which bundles
   Swiper for its own native carousel widgets) both very plausibly ship
   their own unscoped CSS for the generic .swiper-button-prev /
   .swiper-button-next classes, since this markup doesn't belong to
   this plugin alone — it's Swiper's own convention. Without
   !important, whichever stylesheet happens to load later (or matches
   with marginally higher specificity) wins, which is exactly what
   caused both arrows to collapse onto the same side. Cosmetic
   properties (background/color/shadow/radius) are deliberately left
   WITHOUT !important so Elementor's own {{WRAPPER}}-scoped style
   controls (which are more specific already) can still style them. */
.mpg-carousel .swiper-button-prev,
.mpg-carousel .swiper-button-next {
	position: absolute !important;
	top: 50% !important;
	bottom: auto !important;
	z-index: 15 !important;
	width: var(--mpg-arrow-size, 40px) !important;
	height: var(--mpg-arrow-size, 40px) !important;
	margin: 0 !important;
	margin-top: calc(var(--mpg-arrow-size, 40px) / -2) !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .9);
	color: #222;
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
	cursor: pointer;
}

/* ---------- Side placement: 3 selectable scenarios ---------- *
 * "auto" (default, no modifier class): follows the site's text
 *   direction via the .rtl body class WordPress adds automatically.
 * "manual-standard" / "manual-reversed": fixed left/right, completely
 *   independent of .rtl / logical properties — an escape hatch for
 *   sites where the automatic placement still gets overridden by
 *   theme or Elementor CSS. Selectable in the widget's style panel. */

/* auto — LTR (no .rtl ancestor): prev left, next right. */
.mpg-carousel:not(.mpg-arrow-manual-standard):not(.mpg-arrow-manual-reversed) .swiper-button-prev {
	inset-inline-start: var(--mpg-arrow-inset, 12px) !important;
	inset-inline-end: auto !important;
}
.mpg-carousel:not(.mpg-arrow-manual-standard):not(.mpg-arrow-manual-reversed) .swiper-button-next {
	inset-inline-end: var(--mpg-arrow-inset, 12px) !important;
	inset-inline-start: auto !important;
}

/* manual-standard: prev right / next left — fixed, ignores .rtl. */
.mpg-carousel.mpg-arrow-manual-standard .swiper-button-prev {
	right: var(--mpg-arrow-inset, 12px) !important;
	left: auto !important;
}
.mpg-carousel.mpg-arrow-manual-standard .swiper-button-next {
	left: var(--mpg-arrow-inset, 12px) !important;
	right: auto !important;
}

/* manual-reversed: prev left / next right — fixed, ignores .rtl. */
.mpg-carousel.mpg-arrow-manual-reversed .swiper-button-prev {
	left: var(--mpg-arrow-inset, 12px) !important;
	right: auto !important;
}
.mpg-carousel.mpg-arrow-manual-reversed .swiper-button-next {
	right: var(--mpg-arrow-inset, 12px) !important;
	left: auto !important;
}

.mpg-carousel .swiper-button-prev::after,
.mpg-carousel .swiper-button-next::after {
	content: "";
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
}

/* ---------- Chevron direction: follows the PHYSICAL side a button
   ends up on (right-edge button always points right, left-edge button
   always points left) — this stays correct automatically for all 3
   side-placement scenarios above without tracking prev/next separately. */

/* auto + LTR (no .rtl): prev on the left → points left. next on the right → points right. */
.mpg-carousel:not(.mpg-arrow-manual-standard):not(.mpg-arrow-manual-reversed) .swiper-button-prev::after {
	transform: rotate(135deg);
	margin-right: 3px;
}
.mpg-carousel:not(.mpg-arrow-manual-standard):not(.mpg-arrow-manual-reversed) .swiper-button-next::after {
	transform: rotate(-45deg);
	margin-left: 3px;
}

/* auto + .rtl (default for RTL sites): prev on the right → points right. next on the left → points left. */
.rtl .mpg-carousel:not(.mpg-arrow-manual-standard):not(.mpg-arrow-manual-reversed) .swiper-button-prev::after {
	transform: rotate(-45deg);
	margin-right: 0;
	margin-left: 3px;
}
.rtl .mpg-carousel:not(.mpg-arrow-manual-standard):not(.mpg-arrow-manual-reversed) .swiper-button-next::after {
	transform: rotate(135deg);
	margin-left: 0;
	margin-right: 3px;
}

/* manual-standard: prev is on the right → points right, regardless of .rtl. */
.mpg-carousel.mpg-arrow-manual-standard .swiper-button-prev::after {
	transform: rotate(-45deg);
	margin-right: 0;
	margin-left: 3px;
}
.mpg-carousel.mpg-arrow-manual-standard .swiper-button-next::after {
	transform: rotate(135deg);
	margin-left: 0;
	margin-right: 3px;
}

/* manual-reversed: prev is on the left → points left, regardless of .rtl. */
.mpg-carousel.mpg-arrow-manual-reversed .swiper-button-prev::after {
	transform: rotate(135deg);
	margin-right: 3px;
	margin-left: 0;
}
.mpg-carousel.mpg-arrow-manual-reversed .swiper-button-next::after {
	transform: rotate(-45deg);
	margin-left: 3px;
	margin-right: 0;
}

.mpg-carousel .swiper-button-disabled {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}

/* Vertical position (advanced arrow settings) — default is the
   centered rule above; these two override it when the admin picks
   "top" or "bottom" instead of the default "middle". */
.mpg-carousel.mpg-arrow-valign-top .swiper-button-prev,
.mpg-carousel.mpg-arrow-valign-top .swiper-button-next {
	top: var(--mpg-arrow-inset, 12px) !important;
	margin-top: 0 !important;
}

.mpg-carousel.mpg-arrow-valign-bottom .swiper-button-prev,
.mpg-carousel.mpg-arrow-valign-bottom .swiper-button-next {
	top: auto !important;
	bottom: var(--mpg-arrow-inset, 12px) !important;
	margin-top: 0 !important;
}

/* Reveal arrows only on hover/focus (advanced arrow setting, opt-in). */
.mpg-carousel.mpg-arrows-hover-only .swiper-button-prev,
.mpg-carousel.mpg-arrows-hover-only .swiper-button-next {
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}

.mpg-carousel.mpg-arrows-hover-only:hover .swiper-button-prev,
.mpg-carousel.mpg-arrows-hover-only:hover .swiper-button-next,
.mpg-carousel.mpg-arrows-hover-only:focus-within .swiper-button-prev,
.mpg-carousel.mpg-arrows-hover-only:focus-within .swiper-button-next {
	opacity: 1;
	pointer-events: auto;
}

/* Pagination dots */
.mpg-carousel .swiper-pagination {
	position: relative;
	margin-top: 14px;
	text-align: center;
	line-height: 1;
}

.mpg-carousel .swiper-pagination-bullet {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin: 0 4px;
	background: #ccc;
	opacity: .8;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}

.mpg-carousel .swiper-pagination-bullet-active {
	background: #222;
	opacity: 1;
	transform: scale(1.15);
}

/* =====================================================
   Editor helper (visible only inside Elementor's editor)
   ===================================================== */

.mpg-editor-notice {
	padding: 24px;
	text-align: center;
	background: #f6f7f7;
	border: 1px dashed #c3c4c7;
	color: #666;
	border-radius: 6px;
	font-size: 14px;
}

/* =====================================================
   Self-contained lightbox — used when 'native' lightbox_mode is
   requested (shortcode, single gallery page). See frontend.js.
   ===================================================== */

.mpg-lightbox-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .9);
	padding: 40px;
	box-sizing: border-box;
}

.mpg-lightbox-overlay.is-open {
	display: flex;
}

.mpg-lightbox-stage {
	max-width: 90vw;
	max-height: 85vh;
	text-align: center;
}

.mpg-lightbox-stage img {
	max-width: 100%;
	max-height: 80vh;
	display: block;
	margin: 0 auto;
	border-radius: 4px;
}

.mpg-lightbox-caption {
	color: #fff;
	margin-top: 12px;
	font-size: 14px;
	opacity: .85;
}

.mpg-lightbox-close,
.mpg-lightbox-prev,
.mpg-lightbox-next {
	position: absolute;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background .2s ease;
}

.mpg-lightbox-close:hover,
.mpg-lightbox-prev:hover,
.mpg-lightbox-next:hover {
	background: rgba(255, 255, 255, .25);
}

.mpg-lightbox-close {
	inset-inline-end: 20px;
	inset-block-start: 20px;
	width: 44px;
	height: 44px;
}

.mpg-lightbox-close::after {
	content: "";
	width: 16px;
	height: 16px;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
	transform: rotate(45deg);
}

.mpg-lightbox-prev,
.mpg-lightbox-next {
	inset-block-start: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
}

.mpg-lightbox-prev { inset-inline-start: 20px; }
.mpg-lightbox-next { inset-inline-end: 20px; }

/* Same fixed-physical-border chevron technique as the carousel arrows
   (see the note above .mpg-carousel .swiper-button-prev/next) — and
   the same RTL swap, for the same reason: the button that ends up on
   the physical right after RTL repositioning must point right. */
.mpg-lightbox-prev::after,
.mpg-lightbox-next::after {
	content: "";
	width: 12px;
	height: 12px;
	border-right: 3px solid currentColor;
	border-bottom: 3px solid currentColor;
}

.mpg-lightbox-prev::after { transform: rotate(135deg); margin-right: 4px; }
.mpg-lightbox-next::after { transform: rotate(-45deg); margin-left: 4px; }

.rtl .mpg-lightbox-prev::after { transform: rotate(-45deg); margin-right: 0; margin-left: 4px; }
.rtl .mpg-lightbox-next::after { transform: rotate(135deg); margin-left: 0; margin-right: 4px; }

@media (max-width: 600px) {
	.mpg-lightbox-overlay {
		padding: 16px;
	}
	.mpg-lightbox-prev,
	.mpg-lightbox-next {
		width: 40px;
		height: 40px;
	}
	.mpg-lightbox-close {
		width: 36px;
		height: 36px;
		inset-inline-end: 10px;
		inset-block-start: 10px;
	}
}

/* =====================================================
   Gallery Cover widget
   ===================================================== */

.mpg-cover {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	border-radius: 8px;
}

.mpg-cover__media {
	position: relative;
	display: block;
	aspect-ratio: var(--mpg-cover-ratio, 16 / 9);
	overflow: hidden;
}

.mpg-cover__media img.mpg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mpg-cover__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0) 65%);
	pointer-events: none;
}

/* Overlay layout: title/count/button float on top of the image. */
.mpg-cover-overlay .mpg-cover__content {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 22px;
	color: #fff;
}

.mpg-cover-overlay.mpg-cover-valign-top .mpg-cover__content {
	inset-block-end: auto;
	inset-block-start: 0;
}

.mpg-cover-overlay.mpg-cover-valign-middle .mpg-cover__content {
	inset-block-end: auto;
	inset-block-start: 50%;
	transform: translateY(-50%);
}

/* Below layout: plain card, content sits below the image. */
.mpg-cover-below {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .08);
}

.mpg-cover-below .mpg-cover__content {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 20px;
	color: inherit;
}

.mpg-cover__title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
}

.mpg-cover__count {
	font-size: 13px;
	opacity: .8;
}

.mpg-cover__button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	margin-top: 10px;
	padding: 9px 20px;
	border-radius: 999px;
	background: #fff;
	color: #222;
	font-size: 14px;
	font-weight: 600;
	transition: transform .2s ease;
}

.mpg-cover-below .mpg-cover__button {
	background: #222;
	color: #fff;
}

.mpg-cover:hover .mpg-cover__button {
	transform: translateY(-2px);
}

.mpg-cover__button svg,
.mpg-cover__button i {
	font-size: 14px;
	width: 14px;
	height: 14px;
}