/**
 * SOS Grupo do WhatsApp PRO — estilos do botão.
 *
 * Todas as personalizações chegam por variáveis CSS geradas no servidor
 * (Css_Generator) ou pela pré-visualização do painel. Este arquivo contém
 * apenas o layout e os estados, jamais valores do usuário.
 *
 * @package SOSGW
 * @since   1.0.0
 */

.sosgw-widget {
	--sosgw-bg: #25d366;
	--sosgw-bg-hover: #1ebe5b;
	--sosgw-color: #ffffff;
	--sosgw-color-hover: #ffffff;
	--sosgw-icon-color: #ffffff;
	--sosgw-border-color: #25d366;
	--sosgw-border-width: 0;
	--sosgw-border-style: solid;
	--sosgw-radius: 50px;
	--sosgw-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
	--sosgw-padding-y: 14px;
	--sosgw-padding-x: 22px;
	--sosgw-margin: 0;
	--sosgw-z: 99000;
	--sosgw-offset-x: 20px;
	--sosgw-offset-y: 20px;
	--sosgw-width: auto;
	--sosgw-height: auto;
	--sosgw-max-width: none;
	--sosgw-opacity: 1;
	--sosgw-font-family: inherit;
	--sosgw-font-size: 16px;
	--sosgw-font-weight: 600;
	--sosgw-letter-spacing: 0;
	--sosgw-icon-size: 28px;
	--sosgw-gap: 10px;
	--sosgw-delay: 0ms;
	--sosgw-glow: rgba(37, 211, 102, 0.55);

	box-sizing: border-box;
	display: flex;
	align-items: center;
	margin: var(--sosgw-margin);
}

.sosgw-widget *,
.sosgw-widget *::before,
.sosgw-widget *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ Botão */

.sosgw-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sosgw-gap);
	width: var(--sosgw-width);
	height: var(--sosgw-height);
	max-width: var(--sosgw-max-width);
	padding: var(--sosgw-padding-y) var(--sosgw-padding-x);
	border: var(--sosgw-border-width) var(--sosgw-border-style) var(--sosgw-border-color);
	border-radius: var(--sosgw-radius);
	background-color: var(--sosgw-bg);
	box-shadow: var(--sosgw-shadow);
	color: var(--sosgw-color);
	font-family: var(--sosgw-font-family);
	font-size: var(--sosgw-font-size);
	font-weight: var(--sosgw-font-weight);
	letter-spacing: var(--sosgw-letter-spacing);
	line-height: 1.2;
	text-decoration: none;
	opacity: var(--sosgw-opacity);
	transition: transform 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.sosgw-button:hover,
.sosgw-button:focus-visible {
	background-color: var(--sosgw-bg-hover);
	color: var(--sosgw-color-hover);
	text-decoration: none;
}

.sosgw-button:focus-visible {
	outline: 3px solid var(--sosgw-glow);
	outline-offset: 3px;
}

.sosgw-button__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--sosgw-icon-size);
	height: var(--sosgw-icon-size);
}

.sosgw-button__icon .sosgw-icon {
	width: 100%;
	height: 100%;
	display: block;
	fill: var(--sosgw-icon-color);
}

.sosgw-button__icon img.sosgw-icon {
	object-fit: contain;
	border-radius: 4px;
}

.sosgw-button__label {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	min-width: 0;
}

/*
 * O botão acompanha o comprimento do texto: por padrão o rótulo NUNCA quebra
 * em várias linhas. Se o espaço acabar (telas estreitas ou largura máxima
 * definida), o texto é cortado com reticências em vez de empilhar palavras.
 */
.sosgw-button__text,
.sosgw-button__subtext {
	display: block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sosgw-button__subtext {
	font-size: 0.78em;
	font-weight: 400;
	opacity: 0.85;
}

/* Quebra de linha liberada, quando o usuário pedir explicitamente. */
.sosgw-wrap .sosgw-button__text,
.sosgw-wrap .sosgw-button__subtext {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}

.sosgw-no-text .sosgw-button {
	padding: var(--sosgw-padding-y);
	gap: 0;
}

.sosgw-icon-right .sosgw-button {
	flex-direction: row-reverse;
}

.sosgw-offline {
	margin: 8px 0 0;
	font-size: 12px;
	color: #555;
}

/* --------------------------------------------------------------- Flutuante */

.sosgw-floating {
	position: fixed;
	z-index: var(--sosgw-z);
	max-width: calc(100vw - 24px);
	animation-delay: var(--sosgw-delay);
}

.sosgw-pos-top-left {
	top: var(--sosgw-offset-y);
	left: var(--sosgw-offset-x);
}

.sosgw-pos-top-center {
	top: var(--sosgw-offset-y);
	left: 50%;
	transform: translateX(-50%);
}

.sosgw-pos-top-right {
	top: var(--sosgw-offset-y);
	right: var(--sosgw-offset-x);
}

.sosgw-pos-middle-left {
	top: 50%;
	left: var(--sosgw-offset-x);
	transform: translateY(-50%);
}

.sosgw-pos-middle-center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.sosgw-pos-middle-right {
	top: 50%;
	right: var(--sosgw-offset-x);
	transform: translateY(-50%);
}

.sosgw-pos-bottom-left {
	bottom: var(--sosgw-offset-y);
	left: var(--sosgw-offset-x);
}

.sosgw-pos-bottom-center {
	bottom: var(--sosgw-offset-y);
	left: 50%;
	transform: translateX(-50%);
}

.sosgw-pos-bottom-right {
	bottom: var(--sosgw-offset-y);
	right: var(--sosgw-offset-x);
}

/* Instâncias inline (shortcode, bloco, widget) nunca são posicionadas. */
.sosgw-inline {
	position: relative;
	display: inline-flex;
}

.sosgw-block.sosgw-align-center {
	text-align: center;
}

.sosgw-block.sosgw-align-center .sosgw-widget {
	justify-content: center;
}

.sosgw-block.sosgw-align-right .sosgw-widget {
	justify-content: flex-end;
}

/* --------------------------------------------------------------- Animações */

@keyframes sosgw-fade-in {
	from { opacity: 0; }
	to { opacity: var(--sosgw-opacity); }
}

@keyframes sosgw-slide-up {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: var(--sosgw-opacity); transform: translateY(0); }
}

@keyframes sosgw-slide-left {
	from { opacity: 0; transform: translateX(28px); }
	to { opacity: var(--sosgw-opacity); transform: translateX(0); }
}

@keyframes sosgw-zoom-in {
	from { opacity: 0; transform: scale(0.7); }
	to { opacity: var(--sosgw-opacity); transform: scale(1); }
}

@keyframes sosgw-bounce-in {
	0% { opacity: 0; transform: scale(0.4); }
	60% { opacity: 1; transform: scale(1.12); }
	80% { transform: scale(0.96); }
	100% { opacity: var(--sosgw-opacity); transform: scale(1); }
}

@keyframes sosgw-pulse {
	0% { box-shadow: var(--sosgw-shadow), 0 0 0 0 var(--sosgw-glow); }
	70% { box-shadow: var(--sosgw-shadow), 0 0 0 18px rgba(0, 0, 0, 0); }
	100% { box-shadow: var(--sosgw-shadow), 0 0 0 0 rgba(0, 0, 0, 0); }
}

@keyframes sosgw-shake {
	0%, 100% { transform: rotate(0deg); }
	25% { transform: rotate(-6deg); }
	75% { transform: rotate(6deg); }
}

.sosgw-anim-fade-in .sosgw-button { animation: sosgw-fade-in 0.5s ease both; animation-delay: var(--sosgw-delay); }
.sosgw-anim-slide-up .sosgw-button { animation: sosgw-slide-up 0.5s ease both; animation-delay: var(--sosgw-delay); }
.sosgw-anim-slide-left .sosgw-button { animation: sosgw-slide-left 0.5s ease both; animation-delay: var(--sosgw-delay); }
.sosgw-anim-zoom-in .sosgw-button { animation: sosgw-zoom-in 0.45s ease both; animation-delay: var(--sosgw-delay); }
.sosgw-anim-bounce-in .sosgw-button { animation: sosgw-bounce-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--sosgw-delay); }

.sosgw-pulse .sosgw-button {
	animation: sosgw-pulse 2.2s infinite;
}

.sosgw-pulse.sosgw-anim-fade-in .sosgw-button,
.sosgw-pulse.sosgw-anim-slide-up .sosgw-button,
.sosgw-pulse.sosgw-anim-slide-left .sosgw-button,
.sosgw-pulse.sosgw-anim-zoom-in .sosgw-button,
.sosgw-pulse.sosgw-anim-bounce-in .sosgw-button {
	animation: sosgw-pulse 2.2s infinite;
	animation-delay: var(--sosgw-delay);
}

/* ------------------------------------------------------------------- Hover */

.sosgw-hover-grow .sosgw-button:hover { transform: scale(1.07); }
.sosgw-hover-shrink .sosgw-button:hover { transform: scale(0.94); }
.sosgw-hover-float .sosgw-button:hover { transform: translateY(-6px); }
.sosgw-hover-shake .sosgw-button:hover { animation: sosgw-shake 0.4s ease; }
.sosgw-hover-glow .sosgw-button:hover { box-shadow: var(--sosgw-shadow), 0 0 24px 4px var(--sosgw-glow); }

/* ------------------------------------------------------- Acessibilidade */

@media (prefers-reduced-motion: reduce) {
	.sosgw-widget .sosgw-button,
	.sosgw-pulse .sosgw-button {
		animation: none !important;
		transition: none !important;
	}

	.sosgw-widget .sosgw-button:hover {
		transform: none !important;
	}
}

@media (max-width: 480px) {
	.sosgw-floating .sosgw-button {
		max-width: calc(100vw - 32px);
	}

	.sosgw-floating:not(.sosgw-wrap) .sosgw-button__text {
		max-width: 52vw;
	}
}