/**
 * HM Modals — deliberately minimal. The dialog is a white sheet; everything
 * inside is whatever you built in the page builder.
 */

/* Border-box everywhere inside the modal: without it, width:100% plus padding
   overflows the viewport and you get horizontal scroll on mobile. */
.hm-modal,
.hm-modal *,
.hm-modal *::before,
.hm-modal *::after {
	box-sizing: border-box;
}

.hm-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	visibility: hidden;
	pointer-events: none;
	overflow: hidden; /* nothing inside may push the viewport sideways */
}

.hm-modal.is-open {
	visibility: visible;
	pointer-events: auto;
}

.hm-modal__scrim {
	position: absolute;
	inset: 0;
	background: rgba(10, 4, 9, .55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .28s ease;
}

.hm-modal.is-open .hm-modal__scrim {
	opacity: 1;
}

.hm-modal__dialog {
	position: relative;
	width: 100%;
	max-height: min(85vh, 760px);
	overflow-y: auto;
	/* Setting overflow-y makes overflow-x compute to auto, which let the
	   close button's gradient patch (which sits outside the right edge)
	   create a sideways scroll. Clip it explicitly. */
	overflow-x: hidden;
	overscroll-behavior: contain; /* don't chain scrolling to the page */
	background: #fff;
	border-radius: 14px;
	padding: 32px 34px;
	box-shadow: rgba(0, 0, 0, .3) 0 32px 68px 0;
	opacity: 0;
	transform: translateY(14px) scale(.98);
	transition: opacity .3s cubic-bezier(.2, .7, .3, 1), transform .3s cubic-bezier(.2, .7, .3, 1);
}

.hm-modal.is-open .hm-modal__dialog {
	opacity: 1;
	transform: none;
}

.hm-modal__dialog:focus {
	outline: none;
}

/* Flush / full-bleed modal: lets a coloured builder row reach the dialog
   edges instead of sitting inside a white padded sheet. Enable by adding
   "hm-modal-flush" in Modal options > Extra class. The dialog keeps its
   rounded corners (overflow-y:auto clips to the radius) and drop shadow;
   internal spacing then comes from the builder row/column padding. */
.hm-modal-flush .hm-modal__dialog {
	padding: 0;
	background: transparent;
}

/* The white mask behind the X is wrong on a colour, so drop it whenever the
   dialog itself is coloured (flush, or a Background colour set in options). */
.hm-modal-flush .hm-modal__bar::before,
.hm-modal-has-bg .hm-modal__bar::before {
	display: none;
}

/**
 * Sticky wrapper: keeps the close button pinned while the dialog scrolls.
 * Zero height so it takes no layout space — the button is positioned inside it.
 */
/* Zero height, so it can't intercept anything by itself — which means it must
   NOT be pointer-events:none, or the button inside inherits a disabled
   subtree that some mobile browsers refuse to hit-test properly. Only the
   gradient pseudo-element opts out of pointer events. */
.hm-modal__bar {
	position: sticky;
	top: 0;
	z-index: 90;
	height: 0;
}

/**
 * Soft white patch behind the close button only, so content scrolling under
 * the button is masked without veiling the whole top of the dialog.
 * Sized/positioned so its centre sits on the button's centre (36px in from
 * the top and right), opaque across the button, fading out to nothing.
 */
.hm-modal__bar::before {
	content: "";
	position: absolute;
	top: -39px;
	right: -39px;
	width: 150px;
	height: 150px;
	pointer-events: none;
	background: radial-gradient(
		circle closest-side,
		#fff 0%,
		#fff 38%,
		rgba(255, 255, 255, .85) 58%,
		rgba(255, 255, 255, 0) 100%
	);
}

.hm-modal__close {
	position: absolute;
	top: 18px;
	right: 18px;
	/* High: builder rows/columns inside the modal often carry their own
	   z-index and would otherwise sit above the button and swallow taps. */
	z-index: 99;
	touch-action: manipulation; /* no 300ms tap delay */
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid #ddd;
	background: #fff;
	color: #212121;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease-in-out, color .2s ease-in-out;
}

/* Taps must land on the button, never the icon inside it — some mobile
   browsers report the SVG node as the event target, which the delegated
   click handler then can't resolve. */
.hm-modal__close svg,
.hm-modal__close svg * {
	pointer-events: none;
}

.hm-modal__close:hover {
	background: #f4f4f4;
	color: #000;
}

.hm-modal__close:focus-visible {
	outline: 3px solid rgba(24, 99, 220, .35);
	outline-offset: 2px;
}

/* Builder rows inside a dialog shouldn't try to be full-bleed. */
.hm-modal__content .vc_row {
	margin-left: 0;
	margin-right: 0;
}

.hm-modal__content > *:last-child {
	margin-bottom: 0;
}

/* Stop the page scrolling behind the dialog. overflow:hidden alone is ignored
   by iOS Safari, so the body is also pinned (the JS stores/restores the
   scroll position via an inline top offset). */
html.hm-modal-lock,
html.hm-modal-lock body {
	overflow: hidden;
}

html.hm-modal-lock body {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
}

/* Triggers rendered by the shortcode: unstyled by default so they inherit
   whatever you've got. Style .hm-modal-trigger yourself, or use a Salient
   button with the hm-modal-open-{slug} class instead. */
button.hm-modal-trigger {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

[class*="hm-modal-open-"] {
	cursor: pointer;
}

@media (max-width: 720px) {
	.hm-modal {
		padding: 14px;
	}

	.hm-modal__dialog {
		padding: 24px 20px;
		max-height: 88vh;
	}

	/* Bigger tap target on touch screens (44px is the accessible minimum). */
	.hm-modal__close {
		top: 10px;
		right: 10px;
		width: 44px;
		height: 44px;
	}

	/* button centre moves to 32px in, so re-centre the patch on it */
	.hm-modal__bar::before {
		top: -28px;
		right: -28px;
		width: 120px;
		height: 120px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hm-modal__scrim,
	.hm-modal__dialog {
		transition-duration: .001s;
	}
}