/**
 * Swatch Studio — share bar (standard) and floating dock styling.
 *
 * Root cause of the earlier broken layout: the icon button combined a fixed
 * `width` with horizontal `padding` *and* a visible label in icon+label mode
 * — three things fighting over the same box, which is what produced the
 * wrapping/overlap. Icon-only and icon+label are now two clearly separate
 * sizing rules instead of one rule patched with overrides.
 *
 * Every selector here is scoped to Swatch Studio's own `.ss-share-*` classes,
 * and the properties a theme is most likely to reset (box model, radius,
 * decoration, SVG size) are `!important` so the compact square buttons hold
 * their shape regardless of the active theme.
 */

.ss-share-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	/* Compact by design — padding, not margin, so it doesn't collapse/stack
	   with whatever WooCommerce or theme markup sits directly above/below the
	   hook point it's rendered at. */
	margin: 0;
	padding: 4px 0;
	max-width: 100%;
}

.ss-share-label-heading {
	font-size: 13px;
	font-weight: 600;
	flex-shrink: 0;
}

.ss-share-icons {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: var(--ss-share-gap, 6px) !important;
	min-width: 0;
}

/* — one button, shared by <a> (network links) and <button> (copy link, Web
   Share). Icon-only (default): a fixed square. Icon+label: auto width. — */
.ss-share-icon {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0;
	box-sizing: border-box !important;
	height: var(--ss-share-icon-size, 32px) !important;
	width: var(--ss-share-icon-size, 32px) !important;
	min-width: var(--ss-share-icon-size, 32px);
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid rgba(0, 0, 0, 0.14) !important;
	border-radius: 6px !important;
	/* No !important here: each button's actual brand color comes from an
	   inline style (see Sharing::bg_style()) — this is only the fallback
	   for the rare case a network has no color defined. */
	background: #6b7280;
	color: #fff !important;
	text-decoration: none !important;
	cursor: pointer;
	font: inherit;
	font-size: 12.5px;
	line-height: 1;
	gap: 6px;
	appearance: none;
	-webkit-appearance: none;
	transition: background 120ms ease, border-color 120ms ease;
}

/* Label only: let the box grow to fit the label instead of forcing it into
   the same fixed square used for icon-only mode. */
.ss-share-style-labelOnly .ss-share-icon {
	width: auto !important;
	padding: 0 10px !important;
}

.ss-share-style-iconOnly .ss-share-icon-label {
	display: none;
}

/* 44x44 minimum tap target regardless of the configured (smaller) icon size. */
.ss-share-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(44px, var(--ss-share-icon-size, 32px));
	height: max(44px, var(--ss-share-icon-size, 32px));
	transform: translate(-50%, -50%);
}

/* Bundled icon files (assets/images/sharing/) — rendered as-is, no CSS
   recoloring. Only box-model/sizing is controlled here so a theme can't
   collapse or stretch them; the icons' own fill/stroke colors from the file
   are left untouched. */
.ss-share-icon .ss-share-icon-img {
	display: block !important;
	width: 55% !important;
	height: 55% !important;
	min-width: 14px !important;
	min-height: 14px !important;
	max-width: none !important;
	max-height: none !important;
	flex-shrink: 0 !important;
	object-fit: contain !important;
	pointer-events: none;
}

.ss-share-icon-label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Dim rather than override the background on hover/focus, so each button
   keeps its own brand color instead of flattening to generic gray. */
.ss-share-icon:hover,
.ss-share-icon:focus-visible {
	filter: brightness(0.92);
	border-color: rgba(0, 0, 0, 0.28) !important;
}

.ss-share-icon:focus-visible {
	outline: 2px solid #ec3013;
	outline-offset: 1px;
}

.ss-share-icon-copied::before {
	content: attr(data-copied-text);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 6px;
	padding: 4px 8px;
	background: #201e1d;
	color: #fff;
	font-size: 11px;
	white-space: nowrap;
	border-radius: 4px;
	pointer-events: none;
	z-index: 1;
}

/* — "More sharing options" popup (opened by the "+" button when the Web
   Share API isn't available) — */
.ss-share-more-menu {
	position: fixed;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	min-width: 180px;
	max-width: calc(100vw - 16px);
	padding: 6px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
	box-sizing: border-box;
}

.ss-share-more-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 44px;
	padding: 8px 10px;
	border: 0;
	box-sizing: border-box;
	border-radius: 6px;
	background: none;
	color: #201e1d;
	font: inherit;
	font-size: 13px;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.ss-share-more-item:hover,
.ss-share-more-item:focus-visible {
	background: rgba(0, 0, 0, 0.06);
}

.ss-share-more-item:focus-visible {
	outline: 2px solid #ec3013;
	outline-offset: -2px;
}

.ss-share-more-item-icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	padding: 4px;
	border-radius: 5px;
	background-color: var(--ss-more-item-color, #6b7280);
	object-fit: contain;
	box-sizing: border-box;
}

/* — floating dock — */
.ss-floating-dock {
	/* Floating has its own configurable icon size (Floating Icon Size),
	   independent of the standard bar's Icon Size — redefining the same
	   custom property locally means .ss-share-icon's existing rules pick it
	   up automatically without a second copy of the button styles. */
	--ss-share-icon-size: var(--ss-floating-icon-size, 32px);
	position: fixed;
	z-index: 999;
	display: flex;
	flex-direction: column;
	gap: var(--ss-share-gap, 6px);
}

.ss-floating-dock .ss-share-icons {
	flex-direction: column !important;
}

.ss-floating-left {
	left: 12px;
}

.ss-floating-right {
	right: 12px;
}

.ss-floating-dock .ss-share-icon-label {
	display: none;
}

/* — narrow columns (WooCommerce product-summary sidebars) — never overflow — */
@media (max-width: 480px) {
	.ss-share-bar {
		gap: 6px;
	}
}