.dmn-share-copy-url,
.dmn-share-icons-preview {
    --share-bg: #ffffff;
    --share-text: #111111;
    --share-muted: #6f6f6f;
    --share-border: rgba(17, 17, 17, 0.12);
    --share-accent: #111111;
    --share-accent-contrast: #ffffff;
    --share-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    --share-radius: 16px;
    --share-gap: 12px;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--share-gap);
    flex-wrap: wrap;
    padding: 14px 16px;
    border: 1px solid var(--share-border);
    border-radius: var(--share-radius);
    background: var(--share-bg);
    color: var(--share-text);
    box-shadow: var(--share-shadow);
}

.dmn-share-copy-url__label,
.dmn-share-icons-preview__label {
    margin: 0;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--share-muted);
    flex: 0 0 auto;
}

.dmn-share-copy-url__actions,
.dmn-share-icons-preview__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dmn-share-copy-url__icon,
.dmn-share-icons-preview__icon,
.dmn-share-copy-url__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--share-border);
    border-radius: 999px;
    background: transparent;
    color: var(--share-text);
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.dmn-share-copy-url__copy {
    background: var(--share-accent);
    color: var(--share-accent-contrast);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dmn-share-copy-url__icon:hover,
.dmn-share-icons-preview__icon:hover,
.dmn-share-copy-url__copy:hover,
.dmn-share-copy-url__icon:focus-visible,
.dmn-share-icons-preview__icon:focus-visible,
.dmn-share-copy-url__copy:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    outline: none;
}

.dmn-share-copy-url__icon:hover,
.dmn-share-icons-preview__icon:hover {
    background: rgba(17,17,17,.04);
}

.dmn-share-copy-url__copy:hover,
.dmn-share-copy-url__copy:focus-visible {
    background: #2a2a2a;
    border-color: #2a2a2a;
}

.dmn-share-copy-url__status {
    font-size: 12px;
    color: var(--share-muted);
    opacity: 0;
    transform: translateY(2px);
    transition: opacity .18s ease, transform .18s ease;
}

.dmn-share-copy-url.is-copied .dmn-share-copy-url__status {
    opacity: 1;
    transform: translateY(0);
}

.dmn-share-copy-url__popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 30;
    width: min(280px, calc(100vw - 32px));
    padding: 14px;
    border: 1px solid var(--share-border);
    border-radius: 18px;
    background: var(--share-bg);
    box-shadow: 0 18px 42px rgba(0,0,0,.14);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
}

.dmn-share-copy-url.is-open .dmn-share-copy-url__popover {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.dmn-share-copy-url__popover-title {
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--share-muted);
}

.dmn-share-copy-url__popover-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.dmn-share-copy-url__popover .dmn-share-copy-url__icon,
.dmn-share-copy-url__popover .dmn-share-copy-url__copy {
    width: 100%;
    justify-content: center;
}

body.blog-glossy .dmn-share-copy-url,
body.glossy .dmn-share-copy-url,
body[class*="glossy"] .dmn-share-copy-url {
    --share-bg: #fff;
    --share-text: #151515;
    --share-muted: #767676;
    --share-border: rgba(21, 21, 21, 0.1);
    --share-accent: #151515;
    --share-accent-contrast: #fff;
    --share-shadow: 0 18px 48px rgba(0,0,0,.09);
    --share-radius: 20px;
}

body.blog-glossy .dmn-share-copy-url__label,
body.glossy .dmn-share-copy-url__label,
body[class*="glossy"] .dmn-share-copy-url__label {
    letter-spacing: .18em;
}

body.site-digiday .dmn-share-copy-url,
body[class*="digiday"] .dmn-share-copy-url {
    --share-radius: 10px;
    --share-shadow: 0 8px 22px rgba(0,0,0,.06);
}

body[class*="mdrnretail"] .dmn-share-copy-url,
body.modern-retail .dmn-share-copy-url {
    --share-radius: 12px;
    --share-border: rgba(0,0,0,.14);
    --share-shadow: 0 10px 24px rgba(0,0,0,.07);
}

.glossy-featured-share {
    margin-top: 20px;
}

.glossy-featured-share .dmn-share-copy-url {
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 767px) {
    .dmn-share-copy-url,
    .dmn-share-icons-preview {
        padding: 12px;
        gap: 10px;
    }

    .dmn-share-copy-url__actions,
    .dmn-share-icons-preview__actions {
        width: 100%;
    }

    .dmn-share-copy-url__copy {
        flex: 1 1 auto;
    }

    .dmn-share-copy-url__popover {
        left: 0;
        right: auto;
        width: 100%;
    }
}

/* Uniform social/copy icon rendering (icon-first share actions) */
.dmn-share-copy-url__icon svg,
.dmn-share-icons-preview__icon svg,
.dmn-share-copy-url__copy .dmn-share-copy-url__glyph {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	display: block;
}
.dmn-share-copy-url__icon img,
.dmn-share-icons-preview__icon img {
	width: 18px;
	height: 18px;
	object-fit: contain;
}
.dmn-share-copy-url__copy {
	gap: 8px;
}
.dmn-share-copy-url__copy .dmn-share-copy-url__glyph {
	width: 16px;
	height: 16px;
}
.dmn-share-copy-url__copy-label {
	line-height: 1;
}


/* -------------------------------------------------------------------------
 * Inline layout (2026-07 refactor): social icons render inline next to the
 * Copy link button; the toggle button and popover module were removed from
 * the markup. Rules below lay the actions row out horizontally and add the
 * divider between the social icons and the Copy button.
 * ------------------------------------------------------------------------- */
.dmn-share-copy-url__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.dmn-share-copy-url__divider {
	display: inline-block;
	width: 1px;
	align-self: stretch;
	min-height: 20px;
	margin: 0 4px;
	background: var(--share-border);
}

/* Social icon links sit inline; keep uniform tap target and hover state. */
.dmn-share-copy-url__actions .dmn-share-copy-url__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--share-text);
	text-decoration: none;
	border-radius: 50%;
	transition: color .15s ease, background-color .15s ease;
}

.dmn-share-copy-url__actions .dmn-share-copy-url__icon:hover,
.dmn-share-copy-url__actions .dmn-share-copy-url__icon:focus-visible {
	color: var(--share-accent);
	background: var(--share-border);
}

.dmn-share-copy-url__actions .dmn-share-copy-url__icon svg {
	width: 18px;
	height: 18px;
}

/* Popover markup no longer rendered; hard-hide any legacy remnants. */
.dmn-share-copy-url__popover {
	display: none !important;
}


/* -------------------------------------------------------------------------
 * Centered stacked layout (2026-07-14): the "Share This Story" label sits on
 * its own line above the buttons, and the whole module (label + social icons
 * + divider + Copy link) is horizontally centered. Overrides the earlier
 * inline row + the Glossy featured space-between rule.
 * ------------------------------------------------------------------------- */
.dmn-share-copy-url {
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.dmn-share-copy-url__actions {
	justify-content: center;
}
/* Neutralize the Glossy featured override so centering wins. */
.glossy-featured-share .dmn-share-copy-url {
	justify-content: center;
	flex-direction: column;
	align-items: center;
}


/* -------------------------------------------------------------------------
 * Left-aligned, box-less layout (2026-07-21): remove the bounding box
 * (border, background, shadow, padding, radius) from the whole module,
 * left-align the label + actions, and remove the gap between the label
 * string and the icons row. Final block so it wins the cascade.
 * ------------------------------------------------------------------------- */
.dmn-share-copy-url {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	align-items: flex-start;
	text-align: left;
}
.dmn-share-copy-url__actions {
	justify-content: flex-start;
}
.glossy-featured-share .dmn-share-copy-url {
	justify-content: flex-start;
	align-items: flex-start;
}


/* Remove the vertical flex gap between the label and the icons row.
 * The container is a flex column, so its `gap` was still adding space
 * between the label and .dmn-share-copy-url__actions. row-gap: 0 removes
 * that vertical space while the actions row keeps its own icon spacing. */
.dmn-share-copy-url {
	row-gap: 0;
}


/* -------------------------------------------------------------------------
 * Hover/focus tooltips (2026-07-28): each share/copy action exposes a
 * data-tooltip label (see share-copy-url.php). Rendered as a small bubble
 * above the icon on hover and keyboard focus so the component is
 * self-describing across brands. Purely presentational; the accessible
 * name still comes from aria-label.
 * ------------------------------------------------------------------------- */
.dmn-share-copy-url__icon,
.dmn-share-copy-url__copy {
	position: relative;
}

.dmn-share-copy-url__icon[data-tooltip]::after,
.dmn-share-copy-url__copy[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	white-space: nowrap;
	padding: 4px 8px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: none;
	line-height: 1.2;
	color: #fff;
	background: #111;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
	opacity: 0;
	pointer-events: none;
	z-index: 40;
	transition: opacity .15s ease, transform .15s ease;
}

.dmn-share-copy-url__icon[data-tooltip]::before,
.dmn-share-copy-url__copy[data-tooltip]::before {
	content: "";
	position: absolute;
	bottom: calc(100% + 3px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	border: 5px solid transparent;
	border-top-color: #111;
	opacity: 0;
	pointer-events: none;
	z-index: 40;
	transition: opacity .15s ease, transform .15s ease;
}

.dmn-share-copy-url__icon[data-tooltip]:hover::after,
.dmn-share-copy-url__icon[data-tooltip]:focus-visible::after,
.dmn-share-copy-url__copy[data-tooltip]:hover::after,
.dmn-share-copy-url__copy[data-tooltip]:focus-visible::after,
.dmn-share-copy-url__icon[data-tooltip]:hover::before,
.dmn-share-copy-url__icon[data-tooltip]:focus-visible::before,
.dmn-share-copy-url__copy[data-tooltip]:hover::before,
.dmn-share-copy-url__copy[data-tooltip]:focus-visible::before {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* -------------------------------------------------------------------------
 * Copied confirmation (2026-07-28): when share-copy-url.js adds .is-copied
 * to the bar after a successful copy, override the Copy button tooltip
 * bubble to read "Copied!" and force it visible for the ~2s the class is
 * present. Reuses the same tooltip bubble so no extra markup is needed.
 * ------------------------------------------------------------------------- */
.dmn-share-copy-url.is-copied .dmn-share-copy-url__copy[data-tooltip]::after {
	content: "Copied!";
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.dmn-share-copy-url.is-copied .dmn-share-copy-url__copy[data-tooltip]::before {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}