/**
 * Xyod Share Buttons
 */

.xyod-share-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	width: 100%;
}

.elementor-widget-xyod-share-buttons.xyod-share-align-center .xyod-share-buttons,
.elementor-widget-xyod-share-buttons.xyod-share-align-tablet-center .xyod-share-buttons,
.elementor-widget-xyod-share-buttons.xyod-share-align-mobile-center .xyod-share-buttons {
	justify-content: center;
}

.elementor-widget-xyod-share-buttons.xyod-share-align-right .xyod-share-buttons,
.elementor-widget-xyod-share-buttons.xyod-share-align-tablet-right .xyod-share-buttons,
.elementor-widget-xyod-share-buttons.xyod-share-align-mobile-right .xyod-share-buttons {
	justify-content: flex-end;
}

.elementor-widget-xyod-share-buttons.xyod-share-align-left .xyod-share-buttons,
.elementor-widget-xyod-share-buttons.xyod-share-align-tablet-left .xyod-share-buttons,
.elementor-widget-xyod-share-buttons.xyod-share-align-mobile-left .xyod-share-buttons {
	justify-content: flex-start;
}

.elementor-widget-xyod-share-buttons.xyod-share-align-justify .xyod-share-buttons {
	justify-content: space-between;
}

.elementor-widget-xyod-share-buttons.xyod-share-align-justify .xyod-share-btn {
	flex: 1 1 auto;
}

.elementor-widget-xyod-share-buttons[class*='xyod-share-grid-']:not(.xyod-share-grid-0) .xyod-share-buttons {
	display: grid;
}

.elementor-widget-xyod-share-buttons.xyod-share-grid-1 .xyod-share-buttons { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.elementor-widget-xyod-share-buttons.xyod-share-grid-2 .xyod-share-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.elementor-widget-xyod-share-buttons.xyod-share-grid-3 .xyod-share-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.elementor-widget-xyod-share-buttons.xyod-share-grid-4 .xyod-share-buttons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.elementor-widget-xyod-share-buttons.xyod-share-grid-5 .xyod-share-buttons { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.elementor-widget-xyod-share-buttons.xyod-share-grid-6 .xyod-share-buttons { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1024px) {
	.elementor-widget-xyod-share-buttons.xyod-share-grid-tablet-1 .xyod-share-buttons { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.elementor-widget-xyod-share-buttons.xyod-share-grid-tablet-2 .xyod-share-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.elementor-widget-xyod-share-buttons.xyod-share-grid-tablet-3 .xyod-share-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.elementor-widget-xyod-share-buttons.xyod-share-grid-tablet-4 .xyod-share-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.elementor-widget-xyod-share-buttons.xyod-share-grid-tablet-5 .xyod-share-buttons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.elementor-widget-xyod-share-buttons.xyod-share-grid-tablet-6 .xyod-share-buttons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.elementor-widget-xyod-share-buttons.xyod-share-grid-mobile-1 .xyod-share-buttons { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.elementor-widget-xyod-share-buttons.xyod-share-grid-mobile-2 .xyod-share-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.elementor-widget-xyod-share-buttons.xyod-share-grid-mobile-3 .xyod-share-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.elementor-widget-xyod-share-buttons.xyod-share-grid-mobile-4 .xyod-share-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.elementor-widget-xyod-share-buttons.xyod-share-grid-mobile-5 .xyod-share-buttons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.elementor-widget-xyod-share-buttons.xyod-share-grid-mobile-6 .xyod-share-buttons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.xyod-share-btn {
	--xyod-share-primary: var(--xyod-share-official, #555);
	--xyod-share-secondary: #fff;
	--xyod-share-border: 2px;
	--xyod-share-size: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--xyod-share-size);
	padding: 8px 14px;
	border: 0;
	margin: 0;
	background: var(--xyod-share-primary);
	color: var(--xyod-share-secondary);
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	box-sizing: border-box;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
	font: inherit;
}

.xyod-share-btn:hover,
.xyod-share-btn:focus {
	color: var(--xyod-share-secondary);
	text-decoration: none;
	opacity: 0.9;
}

.xyod-share-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	font-size: 16px;
	line-height: 1;
}

.xyod-share-btn__icon svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.xyod-share-btn__text {
	display: inline-block;
	line-height: 1.2;
	white-space: nowrap;
}

/* View */
.elementor-widget-xyod-share-buttons.xyod-share-view-icon .xyod-share-btn {
	min-width: var(--xyod-share-size);
	min-height: var(--xyod-share-size);
	width: auto;
}

.elementor-widget-xyod-share-buttons.xyod-share-view-icon .xyod-share-btn__text {
	display: none;
}

/* Shape */
.elementor-widget-xyod-share-buttons.xyod-share-shape-square .xyod-share-btn {
	border-radius: 0;
}

.elementor-widget-xyod-share-buttons.xyod-share-shape-rounded .xyod-share-btn {
	border-radius: 6px;
}

.elementor-widget-xyod-share-buttons.xyod-share-shape-circle .xyod-share-btn {
	border-radius: 999px;
}

/* Skin: gradient */
.elementor-widget-xyod-share-buttons.xyod-share-skin-gradient .xyod-share-btn {
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.12));
	background-color: var(--xyod-share-primary);
	color: var(--xyod-share-secondary);
}

/* Skin: flat */
.elementor-widget-xyod-share-buttons.xyod-share-skin-flat .xyod-share-btn {
	background-image: none;
	background-color: var(--xyod-share-primary);
	color: var(--xyod-share-secondary);
}

/* Skin: framed */
.elementor-widget-xyod-share-buttons.xyod-share-skin-framed .xyod-share-btn {
	background: transparent;
	color: var(--xyod-share-primary);
	box-shadow: inset 0 0 0 var(--xyod-share-border) var(--xyod-share-primary);
}

.elementor-widget-xyod-share-buttons.xyod-share-skin-framed .xyod-share-btn:hover {
	background: var(--xyod-share-primary);
	color: var(--xyod-share-secondary);
	opacity: 1;
}

/* Skin: minimal */
.elementor-widget-xyod-share-buttons.xyod-share-skin-minimal .xyod-share-btn {
	background: transparent;
	color: var(--xyod-share-primary);
	padding-left: 4px;
	padding-right: 4px;
}

.elementor-widget-xyod-share-buttons.xyod-share-skin-minimal .xyod-share-btn:hover {
	opacity: 0.7;
}

/* Skin: boxed icon */
.elementor-widget-xyod-share-buttons.xyod-share-skin-boxed .xyod-share-btn {
	background: transparent;
	color: var(--xyod-share-primary);
	padding: 0;
	gap: 0;
}

.elementor-widget-xyod-share-buttons.xyod-share-skin-boxed .xyod-share-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--xyod-share-size);
	height: var(--xyod-share-size);
	background: var(--xyod-share-primary);
	color: var(--xyod-share-secondary);
	box-shadow: inset 0 0 0 var(--xyod-share-border) transparent;
}

.elementor-widget-xyod-share-buttons.xyod-share-skin-boxed.xyod-share-shape-rounded .xyod-share-btn__icon {
	border-radius: 6px;
}

.elementor-widget-xyod-share-buttons.xyod-share-skin-boxed.xyod-share-shape-circle .xyod-share-btn__icon {
	border-radius: 50%;
}

.elementor-widget-xyod-share-buttons.xyod-share-skin-boxed .xyod-share-btn__text {
	padding: 0 12px;
	color: var(--xyod-share-primary);
}

.elementor-widget-xyod-share-buttons.xyod-share-skin-boxed.xyod-share-view-icon .xyod-share-btn {
	width: auto;
}

/* Custom color mode keeps --xyod-share-primary from controls;
   Official uses --xyod-share-official set inline per button. */
.elementor-widget-xyod-share-buttons.xyod-share-color-official .xyod-share-btn {
	--xyod-share-primary: var(--xyod-share-official);
}
