/* ==========================================================================
   WhatsApp Lead Form — Frontend Styles
   ========================================================================== */

:root {
	--wlf-color:        #25D366;
	--wlf-color-dark:  #128C7E;
	--wlf-color-light: #dcf8c6;
	--wlf-radius:      12px;
	--wlf-shadow:      0 8px 32px rgba(0,0,0,.18);
	--wlf-font:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--wlf-z:           99999;
}

/* ---- Floating Button ---- */
#wlf-floating-btn {
	position:        fixed;
	bottom:          24px;
	right:           24px; /* overridden via inline style if position = left */
	z-index:         var(--wlf-z);
	display:         flex;
	align-items:     center;
	gap:             10px;
	padding:         14px 20px 14px 16px;
	background:      var(--wlf-color);
	color:           #fff;
	border:          none;
	border-radius:   50px;
	box-shadow:      0 4px 18px rgba(37,211,102,.45);
	cursor:          pointer;
	font-family:     var(--wlf-font);
	font-size:       15px;
	font-weight:     600;
	line-height:     1;
	white-space:     nowrap;
	transition:      transform .2s ease, box-shadow .2s ease, background .2s ease;
	/* Pulse animation to attract attention */
	animation:       wlf-pulse 2.5s infinite;
}
#wlf-floating-btn:hover,
#wlf-floating-btn:focus-visible {
	background:   var(--wlf-color-dark);
	transform:    scale(1.06);
	box-shadow:   0 6px 24px rgba(37,211,102,.55);
	outline:      3px solid #fff;
	animation:    none;
}
#wlf-floating-btn svg {
	flex-shrink: 0;
	width:  28px;
	height: 28px;
}
.wlf-btn-label {
	display: inline-block;
}

@keyframes wlf-pulse {
	0%, 100% { box-shadow: 0 4px 18px rgba(37,211,102,.45); }
	50%       { box-shadow: 0 4px 28px rgba(37,211,102,.75); }
}

/* ---- Overlay ---- */
#wlf-modal-overlay {
	display:          none;
	position:         fixed;
	inset:            0;
	background:       rgba(0,0,0,.50);
	z-index:          calc(var(--wlf-z) + 1);
	animation:        wlf-fade-in .2s ease;
}
#wlf-modal-overlay.wlf-visible {
	display: block;
}

/* ---- Modal ---- */
#wlf-modal {
	display:          none;
	position:         fixed;
	bottom:           90px;
	right:            24px;
	z-index:          calc(var(--wlf-z) + 2);
	width:            360px;
	max-width:        calc(100vw - 32px);
	background:       #fff;
	border-radius:    var(--wlf-radius);
	box-shadow:       var(--wlf-shadow);
	overflow:         hidden;
	font-family:      var(--wlf-font);
	animation:        wlf-slide-up .25s ease;
}
#wlf-modal.wlf-visible {
	display: block;
}

/* Position left variant */
body.wlf-pos-left #wlf-modal {
	right: auto;
	left:  24px;
}

/* ---- Modal Header ---- */
#wlf-modal-header {
	display:          flex;
	align-items:      center;
	gap:              12px;
	padding:          18px 20px;
	background:       var(--wlf-color);
	color:            #fff;
}
#wlf-modal-header .wlf-modal-icon {
	flex-shrink: 0;
	display:     flex;
	align-items: center;
}
#wlf-modal-header .wlf-modal-icon svg {
	width:  36px;
	height: 36px;
}
#wlf-modal-header h2 {
	margin:      0 0 2px;
	font-size:   17px;
	font-weight: 700;
	line-height: 1.2;
	color:       #fff;
}
#wlf-modal-header p {
	margin:    0;
	font-size: 13px;
	opacity:   .9;
	line-height: 1.3;
}

/* ---- Close button ---- */
#wlf-close-btn {
	position:    absolute;
	top:         10px;
	right:       12px;
	background:  transparent;
	border:      none;
	color:       rgba(255,255,255,.85);
	font-size:   22px;
	line-height: 1;
	cursor:      pointer;
	padding:     4px 6px;
	border-radius: 50%;
	transition:  background .15s;
	z-index:     1;
}
#wlf-close-btn:hover,
#wlf-close-btn:focus-visible {
	background: rgba(255,255,255,.2);
	outline:    none;
}

/* ---- Form body ---- */
#wlf-form {
	padding: 20px;
}

.wlf-field {
	margin-bottom: 14px;
}
.wlf-field label {
	display:       block;
	margin-bottom: 5px;
	font-size:     13px;
	font-weight:   600;
	color:         #333;
}
.wlf-req {
	color: #e53e3e;
}
.wlf-field input,
.wlf-field textarea {
	width:         100%;
	padding:       9px 12px;
	border:        1.5px solid #ddd;
	border-radius: 8px;
	font-family:   var(--wlf-font);
	font-size:     14px;
	color:         #222;
	background:    #fafafa;
	box-sizing:    border-box;
	transition:    border-color .2s, box-shadow .2s;
	outline:       none;
}
.wlf-field input:focus,
.wlf-field textarea:focus {
	border-color: var(--wlf-color);
	box-shadow:   0 0 0 3px rgba(37,211,102,.15);
	background:   #fff;
}
.wlf-field input.wlf-invalid,
.wlf-field textarea.wlf-invalid {
	border-color: #e53e3e;
}
.wlf-field textarea {
	resize:      vertical;
	min-height:  72px;
}

/* ---- Error message ---- */
#wlf-error-msg {
	background:    #fff5f5;
	border:        1px solid #fed7d7;
	color:         #c53030;
	border-radius: 6px;
	padding:       10px 14px;
	font-size:     13px;
	margin-bottom: 12px;
}

/* ---- Submit button ---- */
#wlf-submit-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	width:           100%;
	padding:         13px 16px;
	background:      var(--wlf-color);
	color:           #fff;
	border:          none;
	border-radius:   8px;
	font-family:     var(--wlf-font);
	font-size:       15px;
	font-weight:     700;
	cursor:          pointer;
	transition:      background .2s, transform .15s;
	position:        relative;
}
#wlf-submit-btn:hover:not(:disabled) {
	background: var(--wlf-color-dark);
	transform:  translateY(-1px);
}
#wlf-submit-btn:disabled {
	opacity: .7;
	cursor:  not-allowed;
}
#wlf-submit-btn .wlf-btn-icon svg {
	width:  18px;
	height: 18px;
}

/* Spinner */
.wlf-spinner {
	display:       none;
	width:         16px;
	height:        16px;
	border:        2px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation:     wlf-spin .7s linear infinite;
}
#wlf-submit-btn.wlf-loading .wlf-spinner {
	display: inline-block;
}
#wlf-submit-btn.wlf-loading .wlf-btn-text,
#wlf-submit-btn.wlf-loading .wlf-btn-icon {
	opacity: .6;
}

/* ---- Privacy note ---- */
.wlf-privacy {
	margin:     10px 0 0;
	font-size:  11px;
	color:      #888;
	text-align: center;
	line-height: 1.4;
}
.wlf-privacy a {
	color:           var(--wlf-color-dark);
	text-decoration: underline;
}

/* ---- Animations ---- */
@keyframes wlf-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes wlf-slide-up {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes wlf-spin {
	to { transform: rotate(360deg); }
}

/* =========================================================================
   Disparadores — Globo de chat (bubble) + Shake
   ========================================================================= */

/* Globo de chat */
#wlf-bubble {
	position:      fixed;
	bottom:        90px;
	right:         24px;
	z-index:       calc(var(--wlf-z) + 1);
	max-width:     220px;
	background:    #fff;
	color:         #222;
	font-family:   var(--wlf-font);
	font-size:     14px;
	font-weight:   500;
	line-height:   1.4;
	padding:       12px 16px;
	border-radius: 18px 18px 4px 18px;
	box-shadow:    0 4px 20px rgba(0,0,0,.16);
	border-left:   3px solid var(--wlf-color);
	cursor:        pointer;

	/* Oculto por defecto */
	opacity:       0;
	transform:     translateY(10px) scale(.95);
	pointer-events: none;
	transition:    opacity .3s ease, transform .3s ease;
}

/* Variante izquierda */
body.wlf-pos-left #wlf-bubble {
	right: auto;
	left:  24px;
	border-radius: 18px 18px 18px 4px;
	border-left:   none;
	border-right:  3px solid var(--wlf-color);
}

/* Estado visible */
#wlf-bubble.wlf-bubble-visible {
	opacity:       1;
	transform:     translateY(0) scale(1);
	pointer-events: auto;
	animation:     wlf-bubble-in .35s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* Indicador de tipeo (tres puntitos) antes del texto */
#wlf-bubble::before {
	content:     '';
	display:     inline-block;
	width:       8px;
	height:      8px;
	background:  var(--wlf-color);
	border-radius: 50%;
	margin-right: 8px;
	vertical-align: middle;
	animation:   wlf-dot-pulse 1.4s infinite;
}

@keyframes wlf-bubble-in {
	0%   { opacity: 0; transform: translateY(12px) scale(.9); }
	60%  { transform: translateY(-4px) scale(1.03); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes wlf-dot-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%       { opacity: .4; transform: scale(.7); }
}

/* ---- Shake del botón flotante ---- */
#wlf-floating-btn.wlf-shake {
	animation: wlf-shake .6s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes wlf-shake {
	0%, 100% { transform: translateX(0) rotate(0); }
	15%       { transform: translateX(-6px) rotate(-4deg); }
	30%       { transform: translateX(6px) rotate(4deg); }
	45%       { transform: translateX(-5px) rotate(-3deg); }
	60%       { transform: translateX(5px) rotate(3deg); }
	75%