/*
 * Madness Share — compact dark Bento bar
 * v2.4.6
 *
 * This stylesheet intentionally includes compatibility rules for the old
 * v2.3 card markup. That prevents cached article HTML from becoming a jumble
 * when a new plugin version is activated before every page cache is purged.
 */

.mmad-share-card {
	--mmad-share-bg: #151b23;
	--mmad-share-tile: #202733;
	--mmad-share-tile-hover: #28313e;
	--mmad-share-border: rgba(255, 255, 255, 0.10);
	--mmad-share-text: #f5f7fa;
	--mmad-share-muted: #c8d0da;
	--mmad-share-accent: #b7f34b;

	position: relative !important;
	isolation: isolate !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 6px !important;
	/* Size to the actual visible controls. The shell grows and shrinks naturally
	 * as services are enabled or disabled. */
	width: fit-content !important;
	inline-size: fit-content !important;
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
	margin: 18px auto !important;
	padding: 6px !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	color: var(--mmad-share-text) !important;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008)),
		var(--mmad-share-bg) !important;
	border: 1px solid var(--mmad-share-border) !important;
	border-radius: 18px !important;
	box-shadow:
		0 12px 28px rgba(0, 0, 0, 0.30),
		inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
	font-family: inherit !important;
	line-height: 1 !important;
	text-align: left !important;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.mmad-share-card::-webkit-scrollbar {
	display: none;
}

/* Remove decorative pieces from the taller legacy card. */
.mmad-share-card::before,
.mmad-share-card::after {
	display: none !important;
	content: none !important;
}

/*
 * v2.3 compatibility: old cached pages contain a .mmad-share-card__top
 * wrapper plus large heading/subtext. Collapse that wrapper into the same
 * compact favicon + Share label used by the new markup.
 */
.mmad-share-card > .mmad-share-card__top {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	flex: 0 0 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.mmad-share-card__heading-wrap,
.mmad-share-card__eyebrow,
.mmad-share-card__heading,
.mmad-share-card__subtext,
.mmad-share-card__spark {
	display: none !important;
}

/* Shared Bento tile treatment. */
.mmad-share-card__brand,
.mmad-share-card__label,
.mmad-share-card > .mmad-share-card__top::after,
.mmad-share-card .mmad-share-button,
.mmad-share-card .mmad-share-button:visited {
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	height: 42px !important;
	min-height: 42px !important;
	margin: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.075) !important;
	background:
		linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012)),
		var(--mmad-share-tile) !important;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.035),
		0 4px 10px rgba(0,0,0,0.14) !important;
}

.mmad-share-card__brand {
	width: 42px !important;
	min-width: 42px !important;
	padding: 4px !important;
	border-radius: 13px !important;
}

.mmad-share-card__avatar {
	position: relative !important;
	display: grid !important;
	place-items: center !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	background: #0b1016 !important;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05) !important;
}

.mmad-share-card__avatar::before,
.mmad-share-card__avatar::after {
	display: none !important;
	content: none !important;
}

.mmad-share-card__avatar img {
	position: absolute !important;
	inset: 0 !important;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: inherit !important;
}

.mmad-share-card__avatar img {
	z-index: 2 !important;
	object-fit: cover !important;
	opacity: 1 !important;
	transition: none !important;
}


/* The Share label tile is intentionally hidden in v2.4.4.
 * Keep compatibility selectors so cached older markup also drops it cleanly. */
.mmad-share-card__label,
.mmad-share-card > .mmad-share-card__top::after {
	display: none !important;
	content: none !important;
}

.mmad-share-grid {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 6px !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	flex: 0 0 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* Hard reset button/anchor styling so theme button rules cannot stretch the bar. */
.mmad-share-card .mmad-share-button,
.mmad-share-card a.mmad-share-button,
.mmad-share-card button.mmad-share-button,
.mmad-share-card .mmad-share-button:visited {
	position: relative !important;
	width: 42px !important;
	min-width: 42px !important;
	max-width: 42px !important;
	padding: 0 !important;
	border-radius: 13px !important;
	color: #eaf0f7 !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-indent: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease !important;
}

.mmad-share-card .mmad-share-button:hover {
	transform: translateY(-1px) !important;
	border-color: rgba(255,255,255,0.16) !important;
	background:
		linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)),
		var(--mmad-share-tile-hover) !important;
	box-shadow:
		0 7px 15px rgba(0,0,0,0.22),
		inset 0 1px 0 rgba(255,255,255,0.05) !important;
	color: #fff !important;
	text-decoration: none !important;
}

.mmad-share-card .mmad-share-button:active {
	transform: translateY(0) scale(0.97) !important;
}

.mmad-share-card .mmad-share-button:focus-visible {
	outline: 3px solid rgba(183, 243, 75, 0.34) !important;
	outline-offset: 2px !important;
}

.mmad-share-card .mmad-share-glyph {
	display: grid !important;
	place-items: center !important;
	flex: 0 0 auto !important;
	width: 30px !important;
	height: 30px !important;
	min-width: 30px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	color: #fff !important;
	background: #303946 !important;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.11),
		0 2px 7px rgba(0,0,0,0.18) !important;
}

.mmad-share-card .mmad-share-icon {
	display: block !important;
	width: 16px !important;
	height: 16px !important;
	max-width: 16px !important;
	max-height: 16px !important;
	margin: 0 !important;
	padding: 0 !important;
	fill: currentColor !important;
}

.mmad-share-card .mmad-share-icon path {
	fill: currentColor !important;
}

.mmad-share-card .mmad-share-button--facebook .mmad-share-glyph { background: #1877f2 !important; color: #fff !important; }
.mmad-share-card .mmad-share-button--x .mmad-share-glyph { background: #080a0d !important; color: #fff !important; }
.mmad-share-card .mmad-share-button--bluesky .mmad-share-glyph { background: #1185fe !important; color: #fff !important; }
.mmad-share-card .mmad-share-button--reddit .mmad-share-glyph { background: #ff4500 !important; color: #fff !important; }
.mmad-share-card .mmad-share-button--pinterest .mmad-share-glyph { background: #e60023 !important; color: #fff !important; }
.mmad-share-card .mmad-share-button--email .mmad-share-glyph,
.mmad-share-card .mmad-share-button--copy .mmad-share-glyph { background: #303946 !important; color: #dfe7f0 !important; }

.mmad-share-card .mmad-share-button--copy.is-copied {
	border-color: rgba(183, 243, 75, 0.44) !important;
	box-shadow:
		0 0 0 2px rgba(183,243,75,0.07),
		inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

.mmad-share-card .mmad-share-button--copy.is-copied .mmad-share-glyph {
	background: rgba(183, 243, 75, 0.14) !important;
	color: var(--mmad-share-accent) !important;
}

/*
 * Hide visible button text while preserving it for screen readers.
 * The first selector is current markup; the second handles cached v2.3 markup.
 */
.mmad-share-card .mmad-share-button__label,
.mmad-share-card .mmad-share-button > span:not(.mmad-share-glyph),
.mmad-share-card .mmad-share-status {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

@media (max-width: 560px) {
	.mmad-share-card {
		gap: 5px !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 5px !important;
		border-radius: 16px !important;
	}

	.mmad-share-card > .mmad-share-card__top {
		gap: 5px !important;
	}

	.mmad-share-grid {
		gap: 5px !important;
	}

	.mmad-share-card__brand,
	.mmad-share-card .mmad-share-button,
	.mmad-share-card .mmad-share-button:visited {
		height: 40px !important;
		min-height: 40px !important;
		width: 40px !important;
		min-width: 40px !important;
		max-width: 40px !important;
		border-radius: 12px !important;
	}

	.mmad-share-card__avatar,
	.mmad-share-card .mmad-share-glyph {
		width: 30px !important;
		height: 30px !important;
		min-width: 30px !important;
	}

}

@media (max-width: 430px) {
	/* On very narrow phones, keep the favicon and actions; container scrolls if needed. */
	}
}

@media (prefers-reduced-motion: reduce) {
	.mmad-share-card .mmad-share-button,
	.mmad-share-card__avatar img {
		transition: none !important;
	}
}