/*
 * Most popup chrome (overlay color, width, border-radius, box-shadow, close-button
 * visibility) is provided by Elementor's own generated per-popup CSS and its
 * conditionals/popup.min.css + conditionals/dialog.min.css, which target the
 * #elementor-popup-modal-{ID} / .dialog-message / .dialog-widget-content / .dialog-close-button
 * structure td-ec-custom-popup.js builds. Only the show/hide toggle lives here.
 */

[data-td-ec-popup="1"] {
	display: none;
}

.td-ec-popup-inner[data-td-ec-popup="1"] {
	display: block;
}

/*
 * Elementor's own conditionals/dialog.min.css supplies the fixed-overlay positioning
 * (position:fixed, z-index) for `.dialog-type-lightbox`, but it's loaded based on Elementor's
 * own per-page asset detection — it is NOT guaranteed to load just because a popup is present
 * on the page (confirmed: present on one post, absent on another with the same popup). Elementor
 * Pro's popup.min.css also sets `.elementor-popup-modal.dialog-type-lightbox{display:flex}`
 * unconditionally, which has higher specificity than a single-class rule and would win over a
 * plain `display:none` default regardless of visibility state. So: don't depend on either file
 * being loaded — declare positioning and the show/hide toggle here, defensively.
 */
.td-ec-popup-wrapper {
	display: none !important;
	position: fixed;
	inset: 0;
	z-index: 9999;
}

.td-ec-popup-wrapper.td-ec-popup--visible {
	display: flex !important;
}

/*
 * Elementor's base CSS sets .dialog-widget-content { position: absolute }, relying on
 * Elementor's own JS to size/position it at runtime — which we don't run. Left as-is, it
 * establishes its containing block against the fixed, full-viewport wrapper instead of the
 * (correctly-sized) .dialog-message, so it grows to fit its content instead of the popup's
 * configured width, and — being out of flow — collapses .dialog-message's height to 0.
 * Keeping it in normal flex flow instead fixes both.
 */
.td-ec-popup-wrapper .dialog-widget-content {
	position: relative;
	min-width: 0;
	width: 100%;
}

/*
 * .dialog-message itself needs `position: relative` so .dialog-close-button (below) has a
 * containing block to anchor against instead of the viewport.
 */
.td-ec-popup-wrapper .dialog-message {
	position: relative;
}

/*
 * .dialog-close-button's actual position/size/color also live entirely in the unreliable
 * dialog.min.css (see note above .td-ec-popup-wrapper). Without it, the button falls back to
 * being a plain flex item inside .dialog-message and stretches to fill the card's height
 * (align-items: stretch default). Declared fully here instead of depending on that file at all.
 */
.td-ec-popup-wrapper .dialog-close-button {
	position: absolute;
	top: 15px;
	inset-inline-end: 15px;
	flex: none;
	align-self: flex-start;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	color: #1f2124;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

/*
 * Elementor's site-wide "kit" styles include a generic `button:hover { background-color:
 * var(--e-global-color-text) }` rule (meant for CTA buttons), specific enough to override our
 * button's transparent background during :hover since our base rule doesn't declare that
 * property for the hover state. Combined with the color change below, that turned the × black-
 * on-black — invisible, looking like a solid blob. Re-declaring background here (our selector's
 * specificity already safely beats the kit rule) keeps it transparent regardless.
 */
.td-ec-popup-wrapper .dialog-close-button:hover {
	background: transparent;
	color: #000;
}