/**
 * Raylora WooCommerce Product Share — Frontend Styles
 * Flat gray icons, no background, compact single-line layout.
 *
 * @package Raylora_Product_Share
 */

.rlps-share-wrap {
	--rlps-icon-size: 18px;
	--rlps-icon-color: #777777;
	--rlps-hover-color: #333333;
	--rlps-justify: flex-start;
	--rlps-gap: 14px;
	margin: 1em 0 0.5em;
	clear: both;
	width: 100%;
}

.rlps-share-heading {
	display: inline;
	margin: 0 12px 0 0;
	padding: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: #555555;
	vertical-align: middle;
}

.rlps-share-icons {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: var(--rlps-justify);
	gap: var(--rlps-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	vertical-align: middle;
}

.rlps-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: var(--rlps-icon-size);
	height: var(--rlps-icon-size);
	min-width: var(--rlps-icon-size);
	min-height: var(--rlps-icon-size);
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 0;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--rlps-icon-color) !important;
	text-decoration: none !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
	line-height: 1;
	font: inherit;
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	opacity: 0.9;
}

.rlps-share-btn .rlps-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--rlps-icon-size);
	height: var(--rlps-icon-size);
	line-height: 1;
	color: inherit;
}

.rlps-share-btn .rlps-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.rlps-share-btn .rlps-label {
	display: none;
}

.rlps-share-wrap.rlps-has-labels .rlps-share-btn,
.rlps-share-btn.rlps-with-label {
	width: auto;
	min-width: var(--rlps-icon-size);
	padding: 0;
}

.rlps-share-wrap.rlps-has-labels .rlps-share-btn .rlps-label,
.rlps-share-btn.rlps-with-label .rlps-label {
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	color: inherit;
}

.rlps-share-btn:hover,
.rlps-share-btn:focus {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--rlps-hover-color) !important;
	opacity: 1;
	transform: translateY(-1px);
	box-shadow: none !important;
	outline: none;
	text-decoration: none !important;
}

.rlps-share-btn:focus-visible {
	outline: 1px solid var(--rlps-hover-color);
	outline-offset: 3px;
}

.rlps-share-btn:active {
	transform: none;
	opacity: 0.75;
}

.rlps-copy-link.rlps-copied {
	background: transparent !important;
	color: #27ae60 !important;
	transform: none;
}

/* Keep icons on one line; allow horizontal scroll only if needed on tiny screens */
@media (max-width: 480px) {
	.rlps-share-wrap {
		--rlps-gap: 12px;
		--rlps-icon-size: 16px;
	}

	.rlps-share-icons {
		flex-wrap: nowrap;
		overflow-x: auto;
		max-width: 100%;
		-webkit-overflow-scrolling: touch;
	}
}