/**
 * MasterSupply Commerce Suite – Widget de Redes Sociales
 *
 * @package MasterSupply_Commerce_Suite
 */

/* ------------------------------------------------------------------ */
/*  Variables                                                          */
/* ------------------------------------------------------------------ */

#msc-social-widget {
	--toggle-size: 54px;
	--btn-size:    44px;
	--gap:         12px;
	--offset:      24px;
	--z:           9999;
	--ease:        cubic-bezier(0.4, 0, 0.2, 1);
	--dur:         0.28s;

	position:       fixed !important;
	z-index:        var(--z) !important;
	display:        flex !important;
	flex-direction: column !important;
	align-items:    flex-end !important;
	/* reset total: sin margin, padding, ni max-width del tema */
	margin:         0 !important;
	padding:        0 !important;
	max-width:      none !important;
	width:          auto !important;
	background:     none !important;
	border:         none !important;
	box-shadow:     none !important;
}

/* ------------------------------------------------------------------ */
/*  Posición – Desktop                                                 */
/* ------------------------------------------------------------------ */

#msc-social-widget.msc-pos-bottom-right {
	bottom: var(--offset) !important;
	right:  var(--offset) !important;
	left:   auto !important;
	top:    auto !important;
	align-items: flex-end !important;
}

#msc-social-widget.msc-pos-bottom-left {
	bottom: var(--offset) !important;
	left:   var(--offset) !important;
	right:  auto !important;
	top:    auto !important;
	align-items: flex-start !important;
}

#msc-social-widget.msc-pos-top-right {
	top:    var(--offset) !important;
	right:  var(--offset) !important;
	bottom: auto !important;
	left:   auto !important;
	align-items:    flex-end !important;
	flex-direction: column-reverse !important;
}

#msc-social-widget.msc-pos-top-left {
	top:    var(--offset) !important;
	left:   var(--offset) !important;
	bottom: auto !important;
	right:  auto !important;
	align-items:    flex-start !important;
	flex-direction: column-reverse !important;
}

/* ------------------------------------------------------------------ */
/*  Posición – Mobile                                                  */
/* ------------------------------------------------------------------ */

@media (max-width: 768px) {
	#msc-social-widget.msc-mobile-bottom-right {
		bottom: var(--offset) !important;
		right:  var(--offset) !important;
		left:   auto !important;
		top:    auto !important;
		align-items:    flex-end !important;
		flex-direction: column !important;
	}

	#msc-social-widget.msc-mobile-bottom-left {
		bottom: var(--offset) !important;
		left:   var(--offset) !important;
		right:  auto !important;
		top:    auto !important;
		align-items:    flex-start !important;
		flex-direction: column !important;
	}

	#msc-social-widget.msc-mobile-top-right {
		top:    var(--offset) !important;
		right:  var(--offset) !important;
		bottom: auto !important;
		left:   auto !important;
		align-items:    flex-end !important;
		flex-direction: column-reverse !important;
	}

	#msc-social-widget.msc-mobile-top-left {
		top:    var(--offset) !important;
		left:   var(--offset) !important;
		bottom: auto !important;
		right:  auto !important;
		align-items:    flex-start !important;
		flex-direction: column-reverse !important;
	}
}

/* ------------------------------------------------------------------ */
/*  Botón principal (toggle) – anula estilos del tema                 */
/* ------------------------------------------------------------------ */

#msc-social-widget .msc-social-toggle,
#msc-social-widget .msc-social-toggle:hover,
#msc-social-widget .msc-social-toggle:focus,
#msc-social-widget .msc-social-toggle:active {
	/* Reset de botón del tema */
	appearance:      none !important;
	-webkit-appearance: none !important;
	font-family:     inherit !important;
	font-size:       inherit !important;
	line-height:     1 !important;
	text-transform:  none !important;
	letter-spacing:  0 !important;

	/* Dimensiones */
	width:           var(--toggle-size) !important;
	height:          var(--toggle-size) !important;
	min-width:       0 !important;
	min-height:      0 !important;
	padding:         0 !important;
	margin:          0 !important;

	/* Forma circular */
	border-radius:   50% !important;
	border:          none !important;
	outline:         none !important;

	/* Fondo y color */
	background:      #1c3464 !important;
	color:           #fff !important;

	/* Layout */
	display:         flex !important;
	align-items:     center !important;
	justify-content: center !important;
	flex-shrink:     0 !important;
	position:        relative !important;

	/* Sombra */
	box-shadow:      0 4px 16px rgba(0, 0, 0, 0.30) !important;

	/* Cursor */
	cursor:          pointer !important;

	/* Transición */
	transition:      background var(--dur) var(--ease),
	                 transform  var(--dur) var(--ease),
	                 box-shadow var(--dur) var(--ease) !important;
}

#msc-social-widget .msc-social-toggle:hover {
	background:  #274080 !important;
	box-shadow:  0 6px 20px rgba(0, 0, 0, 0.35) !important;
}

#msc-social-widget .msc-social-toggle:focus-visible {
	outline:        3px solid rgba(127, 84, 179, 0.8) !important;
	outline-offset: 3px !important;
}

#msc-social-widget.msc-always-open .msc-social-toggle {
	display: none !important;
}

/* Íconos dentro del toggle */
#msc-social-widget .msc-social-toggle svg {
	width:      22px !important;
	height:     22px !important;
	position:   absolute !important;
	top:        50% !important;
	left:       50% !important;
	transform:  translate(-50%, -50%) rotate(0deg) !important;
	transition: opacity   var(--dur) var(--ease),
	            transform var(--dur) var(--ease) !important;
	flex-shrink: 0 !important;
	display:     block !important;
	stroke:      #fff !important;
	color:       #fff !important;
}

#msc-social-widget .msc-icon-open  { opacity: 1 !important; transform: translate(-50%, -50%) rotate(0deg)   !important; }
#msc-social-widget .msc-icon-close { opacity: 0 !important; transform: translate(-50%, -50%) rotate(-90deg) !important; }

/* Estado abierto */
#msc-social-widget.is-open .msc-social-toggle {
	background: #274080 !important;
}

#msc-social-widget.is-open .msc-icon-open  { opacity: 0 !important; transform: translate(-50%, -50%) rotate(90deg)  !important; }
#msc-social-widget.is-open .msc-icon-close { opacity: 1 !important; transform: translate(-50%, -50%) rotate(0deg)   !important; }

/* ------------------------------------------------------------------ */
/*  Lista de redes                                                     */
/* ------------------------------------------------------------------ */

#msc-social-widget .msc-social-networks {
	display:        flex !important;
	flex-direction: column !important;
	align-items:    inherit !important;
	gap:            var(--gap) !important;
	margin:         0 0 var(--gap) 0 !important;
	padding:        0 !important;
	list-style:     none !important;
	pointer-events: none !important;
}

#msc-social-widget.msc-pos-top-right .msc-social-networks,
#msc-social-widget.msc-pos-top-left  .msc-social-networks {
	margin: var(--gap) 0 0 0 !important;
}

@media (max-width: 768px) {
	#msc-social-widget.msc-mobile-top-right .msc-social-networks,
	#msc-social-widget.msc-mobile-top-left  .msc-social-networks {
		margin: var(--gap) 0 0 0 !important;
	}
	#msc-social-widget.msc-mobile-bottom-right .msc-social-networks,
	#msc-social-widget.msc-mobile-bottom-left  .msc-social-networks {
		margin: 0 0 var(--gap) 0 !important;
	}
}

/* ------------------------------------------------------------------ */
/*  Botones de red social                                              */
/* ------------------------------------------------------------------ */

#msc-social-widget .msc-social-btn {
	/* Reset de <a> del tema */
	text-decoration: none !important;
	border:          none !important;
	outline:         none !important;

	/* Dimensiones */
	width:           var(--btn-size) !important;
	height:          var(--btn-size) !important;
	min-width:       0 !important;
	min-height:      0 !important;
	padding:         0 !important;
	margin:          0 !important;

	/* Forma */
	border-radius:   50% !important;

	/* Fondo */
	background:      var(--net-color, #333) !important;
	color:           #fff !important;

	/* Layout */
	position:        relative !important;
	display:         flex !important;
	align-items:     center !important;
	justify-content: center !important;
	flex-shrink:     0 !important;

	/* Sombra */
	box-shadow:      0 3px 10px rgba(0, 0, 0, 0.22) !important;

	/* Estado inicial oculto */
	opacity:         0 !important;
	transform:       translateY(10px) scale(0.7) !important;

	transition:      opacity    var(--dur) var(--ease),
	                 transform  var(--dur) var(--ease),
	                 box-shadow 0.18s ease !important;
}

#msc-social-widget .msc-social-btn svg {
	width:       20px !important;
	height:      20px !important;
	flex-shrink: 0 !important;
	display:     block !important;
	fill:        #fff !important;
	color:       #fff !important;
}

#msc-social-widget .msc-social-btn:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32) !important;
	transform:  scale(1.13) !important;
}

#msc-social-widget .msc-social-btn:focus-visible {
	outline:        3px solid #fff !important;
	outline-offset: 2px !important;
}

/* ------------------------------------------------------------------ */
/*  Animación de apertura – stagger                                    */
/* ------------------------------------------------------------------ */

#msc-social-widget.is-open .msc-social-networks {
	pointer-events: auto !important;
}

#msc-social-widget.msc-always-open .msc-social-networks {
	margin: 0 !important;
	pointer-events: auto !important;
}

#msc-social-widget.is-open .msc-social-btn {
	opacity:   1 !important;
	transform: translateY(0) scale(1) !important;
}

#msc-social-widget.msc-always-open .msc-social-btn {
	opacity:   1 !important;
	transform: translateY(0) scale(1) !important;
}

/* Apertura: stagger de 50ms por botón */
#msc-social-widget.is-open .msc-social-btn:nth-child(1) { transition-delay: 0.00s !important; }
#msc-social-widget.is-open .msc-social-btn:nth-child(2) { transition-delay: 0.05s !important; }
#msc-social-widget.is-open .msc-social-btn:nth-child(3) { transition-delay: 0.10s !important; }
#msc-social-widget.is-open .msc-social-btn:nth-child(4) { transition-delay: 0.15s !important; }
#msc-social-widget.is-open .msc-social-btn:nth-child(5) { transition-delay: 0.20s !important; }
#msc-social-widget.is-open .msc-social-btn:nth-child(6) { transition-delay: 0.25s !important; }
#msc-social-widget.is-open .msc-social-btn:nth-child(7) { transition-delay: 0.30s !important; }

/* Cierre: orden inverso */
#msc-social-widget .msc-social-btn:nth-child(1) { transition-delay: 0.30s !important; }
#msc-social-widget .msc-social-btn:nth-child(2) { transition-delay: 0.25s !important; }
#msc-social-widget .msc-social-btn:nth-child(3) { transition-delay: 0.20s !important; }
#msc-social-widget .msc-social-btn:nth-child(4) { transition-delay: 0.15s !important; }
#msc-social-widget .msc-social-btn:nth-child(5) { transition-delay: 0.10s !important; }
#msc-social-widget .msc-social-btn:nth-child(6) { transition-delay: 0.05s !important; }
#msc-social-widget .msc-social-btn:nth-child(7) { transition-delay: 0.00s !important; }

/* ------------------------------------------------------------------ */
/*  Tooltip                                                            */
/* ------------------------------------------------------------------ */

#msc-social-widget .msc-social-tooltip {
	position:       absolute !important;
	right:          calc(100% + 10px) !important;
	left:           auto !important;
	top:            50% !important;
	transform:      translateY(-50%) !important;
	background:     rgba(0, 0, 0, 0.76) !important;
	color:          #fff !important;
	font-size:      12px !important;
	line-height:    1.2 !important;
	padding:        5px 9px !important;
	border-radius:  4px !important;
	white-space:    nowrap !important;
	pointer-events: none !important;
	opacity:        0 !important;
	transition:     opacity 0.15s ease !important;
	z-index:        1 !important;
}

/* Tooltip a la derecha para posiciones izquierda */
#msc-social-widget.msc-pos-bottom-left .msc-social-tooltip,
#msc-social-widget.msc-pos-top-left    .msc-social-tooltip {
	right: auto !important;
	left:  calc(100% + 10px) !important;
}

@media (max-width: 768px) {
	#msc-social-widget.msc-mobile-bottom-left .msc-social-tooltip,
	#msc-social-widget.msc-mobile-top-left    .msc-social-tooltip {
		right: auto !important;
		left:  calc(100% + 10px) !important;
	}
	#msc-social-widget.msc-mobile-bottom-right .msc-social-tooltip,
	#msc-social-widget.msc-mobile-top-right    .msc-social-tooltip {
		left: auto !important;
		right: calc(100% + 10px) !important;
	}
}

#msc-social-widget .msc-social-btn:hover .msc-social-tooltip {
	opacity: 1 !important;
}

/* ------------------------------------------------------------------ */
/*  Reduce motion                                                      */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	#msc-social-widget .msc-social-btn,
	#msc-social-widget .msc-social-toggle,
	#msc-social-widget .msc-icon-open,
	#msc-social-widget .msc-icon-close {
		transition:       none !important;
		transition-delay: 0s !important;
	}
}