/* =============================================================
   WebePc Seller Tab — seller-tab.css
   ============================================================= */

/* ---- Base linguetta ---- */
#webepc-seller-tab {
	position: fixed !important;
	right: 0 !important;
	top: var(--wst-top, 40%) !important;
	z-index: var(--wst-zindex, 99999) !important;

	display: flex !important;
	align-items: center !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 0 !important;

	background: var(--wst-bg, #1a1a2e) !important;
	color: var(--wst-fg, #ffffff) !important;

	padding: 10px 12px !important;
	border-radius: 8px 0 0 8px !important;
	border: none !important;

	text-decoration: none !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: .02em !important;
	white-space: nowrap !important;
	overflow: visible !important;

	box-shadow: -3px 2px 14px rgba(0,0,0,.25) !important;
	cursor: pointer !important;
	-webkit-tap-highlight-color: transparent !important;
	text-rendering: optimizeLegibility !important;
}

/* ---- Icona: sempre visibile ---- */
#webepc-seller-tab .wst-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	width: 20px !important;
	height: 20px !important;
}

#webepc-seller-tab .wst-icon svg {
	display: block !important;
	width: 20px !important;
	height: 20px !important;
}

/* ---- Testo: nascosto di default via max-width sul wrapper ---- */
#webepc-seller-tab .wst-label {
	display: inline-block !important;
	max-width: 0 !important;
	overflow: hidden !important;
	opacity: 0 !important;
	margin-left: 0 !important;
	transition: max-width .32s cubic-bezier(.4,0,.2,1),
	            opacity .2s ease,
	            margin-left .32s ease !important;
	vertical-align: middle !important;
}

/* ---- Hover / focus: testo appare ---- */
#webepc-seller-tab:hover,
#webepc-seller-tab:focus-visible {
	background: var(--wst-hover-bg, #e63946) !important;
	box-shadow: -4px 2px 20px rgba(0,0,0,.32) !important;
	outline: none !important;
	text-decoration: none !important;
	color: var(--wst-fg, #ffffff) !important;
}

#webepc-seller-tab:hover .wst-label,
#webepc-seller-tab:focus-visible .wst-label {
	max-width: 200px !important;
	opacity: 1 !important;
	margin-left: 8px !important;
	transition: max-width .32s cubic-bezier(.4,0,.2,1),
	            opacity .2s ease .12s,
	            margin-left .32s ease !important;
}

/* ---- Mobile: solo icona ---- */
@media (max-width: 768px) {
	#webepc-seller-tab .wst-label {
		display: none !important;
	}
}

/* ---- Accessibilità ---- */
@media (prefers-reduced-motion: reduce) {
	#webepc-seller-tab,
	#webepc-seller-tab .wst-label {
		transition: background .15s ease, opacity .15s ease !important;
	}
}