/**
 * Listing Sharing — single listing share modal layout (ported from MyListing Club Enhanced Content Sharing Modal).
 *
 * Modal Background: `.social-share-modal .share-options` (theme: `share.php` — `ul.share-options` inside `#social-share-modal.modal-27`).
 * Modal Overlay: full-screen Bootstrap `.modal-backdrop` is always restored (theme uses `display: none` on backdrops).
 * `--mlpro-ls-modal-27-bg` follows MyListing General → Background when unset (PHP fallback #f4f4f4).
 */

/****** Modal Background — `.social-share-modal .share-options` (needs a real box; not `display:contents`) *****/
body.mlpro-listing-sharing .social-share-modal .share-options {
	--mlpro-ls-modal-27-bg: #ffffff;
	height: 100%;
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-content: stretch;
	min-height: 0;
	overflow-y: auto;
	background: var(--mlpro-ls-modal-27-bg, #f4f4f4) !important;
}

/* When the icon list is taller than the rail, start from the top so scrolling reaches all items (all viewports). */
body.mlpro-listing-sharing .social-share-modal .share-options.mlpro-ls-share-options--scroll {
	justify-content: flex-start;
}

/****** Modal Overlay — full-screen `.modal-backdrop` (theme: `.modal-backdrop{display:none!important}`; Bootstrap injects this node when the share modal opens) *****/
body.mlpro-listing-sharing.modal-open.mlpro-ls-share-bootstrap-overlay-on .modal-backdrop {
	display: block !important;
	position: fixed !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 1040 !important;
	opacity: 1 !important;
	background: var(--mlpro-ls-modal-bootstrap-overlay, rgba(0, 0, 0, 0.7)) !important;
}

/* Keep the share panel above the restored backdrop (typical Bootstrap modal vs backdrop stacking). */
body.mlpro-listing-sharing.modal-open.mlpro-ls-share-bootstrap-overlay-on #social-share-modal.modal-27 {
	z-index: 1050 !important;
}

/****** CONTENT SHARING MODAL — layout & behavior (icon fill: see body class accent vs network) *****/

/* MODAL CONTAINER */
#social-share-modal {
	display: flex !important;
	flex-direction: column;
	width: 10%;
	height: 100%;
	transition: all 0.65s ease;
}

/* SHARE ITEMS */
.social-share-modal .share-options li {
	width: auto !important;
	transition: all 0.25s ease;
	flex-grow: inherit !important;
}

/* ITEM LINKS — :link / :visited keep unvisited vs visited distinct; colors via custom properties */
.social-share-modal .share-options li a {
	font-size: 0.813rem;
}

.social-share-modal .share-options li a:link {
	color: var(--mlpro-ls-link, var(--accent, #f24286));
}

.social-share-modal .share-options li a:visited {
	color: var(
		--mlpro-ls-link-visited,
		color-mix(in srgb, var(--accent, #f24286), black 17.7%)
	);
}

.social-share-modal .share-options li a:hover,
.social-share-modal .share-options li a:focus-visible {
	color: var(
		--mlpro-ls-link-hover,
		color-mix(in srgb, var(--accent, #f24286), black 25.5%)
	);
}

.social-share-modal .share-options li a:active {
	color: var(
		--mlpro-ls-link-active,
		color-mix(in srgb, var(--accent, #f24286), black 44.3%)
	);
}

/* Global “icons only” — hide label text for every share item (see Share Link Text setting). */
body.mlpro-listing-sharing--hide-share-labels .social-share-modal .share-options {
	row-gap: 8px;
	column-gap: 0;
}

body.mlpro-listing-sharing--hide-share-labels .social-share-modal .share-options li a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	font-size: 0 !important;
	line-height: 0 !important;
	min-height: 0;
}
body.mlpro-listing-sharing--hide-share-labels .social-share-modal .share-options li a > span {
	font-size: 0.813rem !important;
	line-height: normal !important;
	margin-bottom: 0 !important;
}
body.mlpro-listing-sharing--hide-share-labels .social-share-modal .share-options li a > div {
	display: none !important;
}

/* Icons only: uniform gaps between items (theme li margins + copy/native markup otherwise collapse unevenly). */
body.mlpro-listing-sharing--hide-share-labels .social-share-modal .share-options li {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	flex-grow: 0 !important;
	flex-shrink: 0;
}

/* ITEM ICONS — accent mode only */
.mlpro-listing-sharing--accent .social-share-modal .share-options li a span {
	margin-bottom: 5px !important;
	background-color: var(--accent) !important;
}

body.mlpro-listing-sharing--hide-share-labels.mlpro-listing-sharing--accent .social-share-modal .share-options li a span {
	margin-bottom: 0 !important;
}

/* MOVE ITEMS TO THE RIGHT ON HOVER */
.social-share-modal .share-options li:hover {
	margin-left: 10px;
}

/* MOBILE */
@media screen and (max-width: 1200px) {
	#social-share-modal {
		width: 15%;
	}
}

@media screen and (max-width: 414px) {
	#social-share-modal {
		width: 35%;
	}
}