/* MHB Popups — frontend */

.mhb-popup {
	position: fixed;
	z-index: 99999;
	color: var(--mhb-pop-text, #2a2225);
	/* Explicit font fallbacks so the popup looks the same whether it's
	   rendered on the frontend (theme vars set) or injected into the admin
	   preview (vars come via mhb_popup_fonts inline style). */
	font-family: var(--font-body, "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif);
}
.mhb-popup[hidden] { display: none !important; }

/* Backdrop (overlay only) */
.mhb-popup__backdrop {
	position: fixed;
	inset: 0;
	background: var(--mhb-pop-overlay, rgba(0,0,0,.55));
	animation: mhb-pop-fade .25s ease;
}

/* Inner container — shared */
.mhb-popup__inner {
	position: relative;
	background: var(--mhb-pop-bg, #fff);
	border-radius: var(--mhb-pop-radius, 8px);
	/* Symmetric top + bottom padding. The extra top space also keeps the
	   close button from overlapping the heading, so alignment stays honest. */
	padding: 2.5rem 1.5rem;
	box-shadow: 0 12px 36px rgba(0, 0, 0, .18);
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden; /* clips the side image to the rounded corner */
}
.mhb-popup__content { min-width: 0; } /* lets text wrap inside flex layouts */

/* Side-by-side image layouts — only allowed for the full-screen overlay
   layout. The :is() guard means stale data ("left" or "right" on a corner
   or bar layout) silently falls back to a normal stacked layout. */
.mhb-popup--overlay .mhb-popup__inner[data-img-pos="left"],
.mhb-popup--overlay .mhb-popup__inner[data-img-pos="right"] {
	display: flex;
	padding: 0; /* columns handle their own padding */
	align-items: stretch;
}
/* Desktop: wider + shorter so the popup reads as a landscape card rather
   than a portrait one. Removed on tablet/mobile so the popup hugs content. */
@media (min-width: 901px) {
	.mhb-popup--overlay .mhb-popup__inner[data-img-pos="left"],
	.mhb-popup--overlay .mhb-popup__inner[data-img-pos="right"] {
		width: min(880px, calc(100vw - 4rem));
		min-height: 360px;
		max-height: 440px;
	}
}
.mhb-popup--overlay .mhb-popup__inner[data-img-pos="left"]  .mhb-popup__side  { order: 0; }
.mhb-popup--overlay .mhb-popup__inner[data-img-pos="right"] .mhb-popup__side  { order: 2; }
.mhb-popup--overlay .mhb-popup__inner[data-img-pos="left"]  .mhb-popup__content,
.mhb-popup--overlay .mhb-popup__inner[data-img-pos="right"] .mhb-popup__content {
	order: 1;
	flex: 1 1 50%;
	padding: 2.5rem 1.75rem; /* symmetric top + bottom; clears close button */
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .75rem;
}
.mhb-popup--overlay .mhb-popup__inner[data-img-pos="left"]  .mhb-popup__content > *,
.mhb-popup--overlay .mhb-popup__inner[data-img-pos="right"] .mhb-popup__content > * {
	margin: 0; /* gap handles spacing in flex column — no double-spacing from element margins */
}
.mhb-popup--overlay .mhb-popup__side {
	flex: 0 0 50%;
	overflow: hidden;
	background: rgba(0,0,0,.04);
	position: relative;
	align-self: stretch;
}
/* Side wrapper min-height — desktop only; on mobile the popup stacks and
   we want the image to hug its natural height, not get artificially stretched. */
@media (min-width: 901px) {
	.mhb-popup--overlay .mhb-popup__side { min-height: 240px; }
}
.mhb-popup--overlay .mhb-popup__side .mhb-popup__img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important; /* override the stacked-layout cap */
	object-fit: cover;
	object-position: var(--mhb-pop-focal, center center);
	margin: 0;
	border-radius: 0;
	display: block;
}
/* On non-overlay layouts, the .mhb-popup__side wrapper still wraps the image
   — render it as a regular block element so the popup still looks fine. */
:not(.mhb-popup--overlay) .mhb-popup__side .mhb-popup__img {
	width: var(--mhb-pop-img-d, 100%);
	margin: 0 auto 1rem;
}

/* Layout: overlay (centered) */
.mhb-popup--overlay {
	inset: 0;
	display: grid;
	place-items: center;
	padding: 1rem;
}
.mhb-popup--overlay .mhb-popup__inner {
	width: 520px;
	max-width: calc(100vw - 2rem);
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
}

/* Layout: corner slide-up */
.mhb-popup--corner-right,
.mhb-popup--corner-left {
	bottom: 1.25rem;
}
.mhb-popup--corner-right { right: 1.25rem; }
.mhb-popup--corner-left  { left: 1.25rem; }
.mhb-popup--corner-right .mhb-popup__inner,
.mhb-popup--corner-left  .mhb-popup__inner {
	width: 380px;
	max-width: calc(100vw - 2rem);
	max-height: calc(100vh - 3rem);
	overflow-y: auto;
}


/* Close button — always visible (white pill on any background) so it works
   over images, dark popups, etc. */
.mhb-popup__close {
	position: absolute;
	top: .55rem; right: .6rem;
	width: 36px; height: 36px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .92);
	color: #2a2225;
	border: 0;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
	opacity: 1;
	z-index: 2;
	transition: background .15s ease, transform .15s ease;
}
.mhb-popup__close:hover,
.mhb-popup__close:focus-visible {
	background: #8B4F60;
	color: #fff;
	transform: scale(1.08);
	box-shadow: 0 3px 10px rgba(139, 79, 96, .35);
	outline: none;
}

/* Content elements */
.mhb-popup__img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	/* Cap stacked (above / below) image height so a tall portrait photo
	   can't turn the popup into a banner-sized vertical strip. */
	max-height: 320px;
	object-fit: cover;
	border-radius: calc(var(--mhb-pop-radius, 8px) - 2px);
	margin: 0 auto 1rem;
	object-position: var(--mhb-pop-focal, center center);
}
.mhb-popup__heading {
	margin: 0 0 .5rem;
	font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
	font-size: var(--mhb-pop-h-d, 28px) !important; /* beats theme's h2 !important */
	font-weight: 300;
	line-height: 1.2;
	color: var(--mhb-pop-heading, #8B4F60);
}
.mhb-popup__body {
	margin: 0 0 1rem;
	font-size: var(--mhb-pop-b-d, 16px) !important;
	line-height: 1.5;
}
.mhb-popup__btn {
	display: inline-block;
	background: var(--mhb-pop-btn-bg, #8B4F60);
	color: var(--mhb-pop-btn-text, #fff);
	font-size: var(--mhb-pop-btn-d, 16px) !important;
	padding: .65rem 1.25rem;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 500;
	border: 0;
	cursor: pointer;
	transition: opacity .15s ease;
}
/* Button wrapper carries the alignment (text-align style) and doesn't add its
   own spacing; the button itself is the visible chip. */
.mhb-popup__btn-wrap { display: block; }

/* Disclaimer — small fine-print text below the button */
.mhb-popup__disclaimer {
	margin: .9rem 0 0;
	font-size: 11px;
	line-height: 1.45;
	color: rgba(0, 0, 0, .55);
	opacity: .85;
}

/* Alignment classes — high-specificity selector + !important so theme
   `h2 { text-align: ... !important }` rules can't beat them. */
.mhb-popup .mhb-popup__align-left,
.mhb-popup .mhb-popup__heading.mhb-popup__align-left   { text-align: left   !important; }
.mhb-popup .mhb-popup__align-center,
.mhb-popup .mhb-popup__heading.mhb-popup__align-center { text-align: center !important; }
.mhb-popup .mhb-popup__align-right,
.mhb-popup .mhb-popup__heading.mhb-popup__align-right  { text-align: right  !important; }
.mhb-popup__btn:hover { opacity: .9; color: var(--mhb-pop-btn-text, #fff); }

/* Tablet — auto-scale text down ~85% of the desktop value */
@media (max-width: 900px) {
	.mhb-popup--overlay .mhb-popup__inner,
	.mhb-popup--corner-right .mhb-popup__inner,
	.mhb-popup--corner-left  .mhb-popup__inner { width: 380px; }
	.mhb-popup__heading { font-size: calc(var(--mhb-pop-h-d, 28px) * 0.85) !important; }
	.mhb-popup__body    { font-size: calc(var(--mhb-pop-b-d, 16px) * 0.92) !important; }
	.mhb-popup__btn     { font-size: calc(var(--mhb-pop-btn-d, 16px) * 0.92) !important; }
}

/* Side-by-side layouts stack on tablet + mobile so the popup hugs content. */
@media (max-width: 900px) {
	.mhb-popup--overlay .mhb-popup__inner[data-img-pos="left"],
	.mhb-popup--overlay .mhb-popup__inner[data-img-pos="right"] {
		flex-direction: column;
		padding: 0;
		min-height: 0;
	}
	.mhb-popup--overlay .mhb-popup__inner[data-img-pos="left"]  .mhb-popup__side,
	.mhb-popup--overlay .mhb-popup__inner[data-img-pos="right"] .mhb-popup__side {
		flex: 0 0 auto;
		max-height: 220px;
		min-height: 0;
	}
	.mhb-popup--overlay .mhb-popup__inner[data-img-pos="left"]  .mhb-popup__side .mhb-popup__img,
	.mhb-popup--overlay .mhb-popup__inner[data-img-pos="right"] .mhb-popup__side .mhb-popup__img {
		position: static;
		height: auto !important;
	}
	.mhb-popup--overlay .mhb-popup__inner[data-img-pos="left"]  .mhb-popup__content,
	.mhb-popup--overlay .mhb-popup__inner[data-img-pos="right"] .mhb-popup__content {
		padding: 1.25rem;
	}
}

/* Mobile */
@media (max-width: 600px) {
	.mhb-popup--overlay .mhb-popup__inner,
	.mhb-popup--corner-right .mhb-popup__inner,
	.mhb-popup--corner-left  .mhb-popup__inner { width: calc(100vw - 1.5rem); }
	/* Cap image height on mobile so the heading + body + button can't be pushed
	   off-screen by a tall portrait image. */
	.mhb-popup__img {
		max-height: 32vh;
		width: 100%;
		max-width: 100%;
		margin: 0 auto 1rem;
		object-fit: cover;
	}
	/* Bigger tap target for the close button on touch devices. */
	.mhb-popup__close { width: 40px; height: 40px; font-size: 1.5rem; }
	.mhb-popup--corner-right,
	.mhb-popup--corner-left {
		left: .75rem; right: .75rem; bottom: .75rem;
	}
	.mhb-popup--corner-right .mhb-popup__inner,
	.mhb-popup--corner-left .mhb-popup__inner {
		width: auto;
		max-width: 100%;
	}
	.mhb-popup__heading { font-size: calc(var(--mhb-pop-h-d, 28px) * 0.7) !important; }
	.mhb-popup__body    { font-size: calc(var(--mhb-pop-b-d, 16px) * 0.85) !important; }
	.mhb-popup__btn     { font-size: calc(var(--mhb-pop-btn-d, 16px) * 0.85) !important; }
	.mhb-popup__inner   { padding: 1.1rem; }
}

/* Open animations — class on root selects the keyframe applied to .mhb-popup__inner */
.mhb-popup:not(.is-closing).mhb-popup--anim-fade         .mhb-popup__inner { animation: mhb-anim-fade        .35s ease both; }
.mhb-popup:not(.is-closing).mhb-popup--anim-slide-left   .mhb-popup__inner { animation: mhb-anim-slide-left  .4s cubic-bezier(.2,.7,.3,1.05) both; }
.mhb-popup:not(.is-closing).mhb-popup--anim-slide-right  .mhb-popup__inner { animation: mhb-anim-slide-right .4s cubic-bezier(.2,.7,.3,1.05) both; }
.mhb-popup:not(.is-closing).mhb-popup--anim-slide-top    .mhb-popup__inner { animation: mhb-anim-slide-top   .4s cubic-bezier(.2,.7,.3,1.05) both; }
.mhb-popup:not(.is-closing).mhb-popup--anim-slide-bottom .mhb-popup__inner { animation: mhb-anim-slide-bottom .4s cubic-bezier(.2,.7,.3,1.05) both; }
.mhb-popup:not(.is-closing).mhb-popup--anim-zoom         .mhb-popup__inner { animation: mhb-anim-zoom        .35s cubic-bezier(.2,.7,.3,1.2) both; }

/* Close animations — applied while .is-closing is on the root. */
.mhb-popup.is-closing.mhb-popup--close-fade         .mhb-popup__inner { animation: mhb-anim-fade-out        .3s ease both; }
.mhb-popup.is-closing.mhb-popup--close-slide-left   .mhb-popup__inner { animation: mhb-anim-slide-left-out  .35s cubic-bezier(.4,.0,.6,.4) both; }
.mhb-popup.is-closing.mhb-popup--close-slide-right  .mhb-popup__inner { animation: mhb-anim-slide-right-out .35s cubic-bezier(.4,.0,.6,.4) both; }
.mhb-popup.is-closing.mhb-popup--close-slide-top    .mhb-popup__inner { animation: mhb-anim-slide-top-out   .35s cubic-bezier(.4,.0,.6,.4) both; }
.mhb-popup.is-closing.mhb-popup--close-slide-bottom .mhb-popup__inner { animation: mhb-anim-slide-bottom-out .35s cubic-bezier(.4,.0,.6,.4) both; }
.mhb-popup.is-closing.mhb-popup--close-zoom         .mhb-popup__inner { animation: mhb-anim-zoom-out        .3s cubic-bezier(.4,.0,.6,1) both; }
.mhb-popup.is-closing.mhb-popup--close-fade         .mhb-popup__backdrop,
.mhb-popup.is-closing.mhb-popup--close-slide-left   .mhb-popup__backdrop,
.mhb-popup.is-closing.mhb-popup--close-slide-right  .mhb-popup__backdrop,
.mhb-popup.is-closing.mhb-popup--close-slide-top    .mhb-popup__backdrop,
.mhb-popup.is-closing.mhb-popup--close-slide-bottom .mhb-popup__backdrop,
.mhb-popup.is-closing.mhb-popup--close-zoom         .mhb-popup__backdrop { animation: mhb-anim-fade-out .25s ease both; }
.mhb-popup.is-closing.mhb-popup--close-none .mhb-popup__inner,
.mhb-popup.is-closing.mhb-popup--close-none .mhb-popup__backdrop { animation: none; opacity: 0; }

@keyframes mhb-pop-fade       { from { opacity: 0; } to { opacity: 1; } }
@keyframes mhb-anim-fade      { from { opacity: 0; } to { opacity: 1; } }
@keyframes mhb-anim-slide-left   { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: translateX(0); } }
@keyframes mhb-anim-slide-right  { from { opacity: 0; transform: translateX( 48px); } to { opacity: 1; transform: translateX(0); } }
@keyframes mhb-anim-slide-top    { from { opacity: 0; transform: translateY(-48px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mhb-anim-slide-bottom { from { opacity: 0; transform: translateY( 48px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mhb-anim-zoom         { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }

@keyframes mhb-anim-fade-out         { from { opacity: 1; } to { opacity: 0; } }
@keyframes mhb-anim-slide-left-out   { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-48px); } }
@keyframes mhb-anim-slide-right-out  { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX( 48px); } }
@keyframes mhb-anim-slide-top-out    { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-48px); } }
@keyframes mhb-anim-slide-bottom-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY( 48px); } }
@keyframes mhb-anim-zoom-out         { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.85); } }

@media (prefers-reduced-motion: reduce) {
	.mhb-popup__backdrop, .mhb-popup__inner { animation: mhb-anim-fade .25s ease both !important; transform: none !important; }
}

/* Admin preview — force the requested device's text scaling and layout
   regardless of the editor's actual viewport width. */
.mhb-popup--preview.mhb-popup--device-tablet .mhb-popup__heading { font-size: calc(var(--mhb-pop-h-d, 28px) * 0.85) !important; }
.mhb-popup--preview.mhb-popup--device-tablet .mhb-popup__body    { font-size: calc(var(--mhb-pop-b-d, 16px) * 0.92) !important; }
.mhb-popup--preview.mhb-popup--device-tablet .mhb-popup__btn     { font-size: calc(var(--mhb-pop-btn-d, 16px) * 0.92) !important; }
.mhb-popup--preview.mhb-popup--device-tablet.mhb-popup--overlay .mhb-popup__inner,
.mhb-popup--preview.mhb-popup--device-tablet.mhb-popup--corner-right .mhb-popup__inner,
.mhb-popup--preview.mhb-popup--device-tablet.mhb-popup--corner-left  .mhb-popup__inner { width: 380px !important; }
/* Preview-only: side-by-side on tablet stacks, like the live frontend. */
.mhb-popup--preview.mhb-popup--device-tablet.mhb-popup--overlay .mhb-popup__inner[data-img-pos="left"],
.mhb-popup--preview.mhb-popup--device-tablet.mhb-popup--overlay .mhb-popup__inner[data-img-pos="right"] {
	flex-direction: column !important;
	padding: 0 !important;
	min-height: 0 !important;
	width: 380px !important;
}

.mhb-popup--preview.mhb-popup--device-mobile .mhb-popup__heading { font-size: calc(var(--mhb-pop-h-d, 28px) * 0.7) !important; }
.mhb-popup--preview.mhb-popup--device-mobile .mhb-popup__body    { font-size: calc(var(--mhb-pop-b-d, 16px) * 0.85) !important; }
.mhb-popup--preview.mhb-popup--device-mobile .mhb-popup__btn     { font-size: calc(var(--mhb-pop-btn-d, 16px) * 0.85) !important; }
.mhb-popup--preview.mhb-popup--device-mobile.mhb-popup--overlay .mhb-popup__inner,
.mhb-popup--preview.mhb-popup--device-mobile.mhb-popup--corner-right .mhb-popup__inner,
.mhb-popup--preview.mhb-popup--device-mobile.mhb-popup--corner-left  .mhb-popup__inner { width: 340px !important; }
.mhb-popup--preview.mhb-popup--device-mobile .mhb-popup__inner   { padding: 1.1rem; }

.mhb-popup--preview.mhb-popup--device-mobile.mhb-popup--overlay .mhb-popup__inner[data-img-pos="left"],
.mhb-popup--preview.mhb-popup--device-mobile.mhb-popup--overlay .mhb-popup__inner[data-img-pos="right"] {
	flex-direction: column !important;
	padding: 0 !important;
	min-height: 0 !important;
}
.mhb-popup--preview.mhb-popup--device-mobile .mhb-popup__inner[data-img-pos="left"] .mhb-popup__side,
.mhb-popup--preview.mhb-popup--device-mobile .mhb-popup__inner[data-img-pos="right"] .mhb-popup__side {
	flex: 0 0 auto !important;
	max-height: 220px;
	min-height: 0 !important;
}
.mhb-popup--preview.mhb-popup--device-mobile .mhb-popup__side .mhb-popup__img {
	position: static !important;
	height: auto !important;
}