/**
 * modal.css — WP WhatsApp Lead & UTM Catcher
 *
 * Estilos para:
 *  - Botão trigger (.pwfd-trigger-btn)
 *  - Overlay do modal (#pwfd-overlay / .pwfd-overlay)
 *  - Card do modal (.pwfd-modal)
 *  - Campos e botões internos
 *  - Spinner de carregamento
 *  - Responsividade
 *
 * Sem dependências — CSS puro, sem frameworks.
 * Prefixo de classes: pwfd-
 */

/* =============================================================================
   VARIÁVEIS CSS
   ============================================================================= */

:root {
	--pwfd-green:       #25d366;
	--pwfd-green-dark:  #1ebe5d;
	--pwfd-green-light: #e8f9ef;
	--pwfd-text:        #1a1a1a;
	--pwfd-text-light:  #6b7280;
	--pwfd-border:      #e5e7eb;
	--pwfd-radius:      12px;
	--pwfd-shadow:      0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.10);
	--pwfd-transition:  all 0.2s ease;
	--pwfd-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* =============================================================================
   BOTÃO TRIGGER (dispara a abertura do modal)
   ============================================================================= */

.pwfd-trigger-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             0.55rem;
	padding:         0.75rem 1.5rem;
	background:      var(--pwfd-green);
	color:           #ffffff;
	font-family:     var(--pwfd-font);
	font-size:       1rem;
	font-weight:     600;
	line-height:     1;
	border:          none;
	border-radius:   50px;
	cursor:          pointer;
	text-decoration: none;
	transition:      var(--pwfd-transition);
	box-shadow:      0 4px 15px rgba(37, 211, 102, 0.35);
}

.pwfd-trigger-btn:hover,
.pwfd-trigger-btn:focus-visible {
	background:  var(--pwfd-green-dark);
	box-shadow:  0 6px 20px rgba(37, 211, 102, 0.5);
	transform:   translateY(-1px);
	outline:     none;
}

.pwfd-trigger-btn:active {
	transform: translateY(0);
}

/* Ícone SVG dentro do botão trigger */
.pwfd-trigger-btn svg {
	width:      1.25rem;
	height:     1.25rem;
	fill:       currentColor;
	flex-shrink: 0;
}

/* =============================================================================
   OVERLAY (fundo semitransparente)
   ============================================================================= */

.pwfd-overlay {
	display:          none; /* controlado via JS */
	position:         fixed;
	inset:            0;    /* top: 0; right: 0; bottom: 0; left: 0 */
	z-index:          99999;
	background:       rgba(0, 0, 0, 0.55);
	align-items:      center;
	justify-content:  center;
	padding:          1rem;
	backdrop-filter:  blur(2px);
	-webkit-backdrop-filter: blur(2px);
	animation:        pwfdFadeIn 0.2s ease;
}

@keyframes pwfdFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* =============================================================================
   CARD DO MODAL
   ============================================================================= */

.pwfd-modal {
	position:         relative;
	background:       #ffffff;
	border-radius:    var(--pwfd-radius);
	box-shadow:       var(--pwfd-shadow);
	padding:          2rem;
	width:            100%;
	max-width:        420px;
	font-family:      var(--pwfd-font);
	color:            var(--pwfd-text);
	animation:        pwfdSlideUp 0.25s ease;
}

@keyframes pwfdSlideUp {
	from { opacity: 0; transform: translateY(20px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* =============================================================================
   BOTÃO DE FECHAR (×)
   ============================================================================= */

.pwfd-close {
	position:    absolute;
	top:         0.85rem;
	right:       0.85rem;
	width:       2rem;
	height:      2rem;
	display:     flex;
	align-items: center;
	justify-content: center;
	background:  transparent;
	border:      none;
	border-radius: 50%;
	color:       var(--pwfd-text-light);
	font-size:   1.4rem;
	line-height: 1;
	cursor:      pointer;
	transition:  var(--pwfd-transition);
}

.pwfd-close:hover,
.pwfd-close:focus-visible {
	background: var(--pwfd-border);
	color:      var(--pwfd-text);
	outline:    none;
}

/* =============================================================================
   CABEÇALHO DO MODAL
   ============================================================================= */

.pwfd-modal-header {
	display:      flex;
	align-items:  center;
	gap:          0.75rem;
	margin-bottom: 0.5rem;
}

.pwfd-modal-header svg {
	width:       2.25rem;
	height:      2.25rem;
	fill:        var(--pwfd-green);
	flex-shrink: 0;
}

.pwfd-modal-header h2,
#pwfd-modal-title {
	margin:      0;
	padding:     0;
	font-size:   1.25rem;
	font-weight: 700;
	color:       var(--pwfd-text);
	line-height: 1.2;
}

.pwfd-modal-subtitle {
	margin:      0 0 1.5rem;
	font-size:   0.9rem;
	color:       var(--pwfd-text-light);
	line-height: 1.5;
}

/* =============================================================================
   CAMPO DE FORMULÁRIO
   ============================================================================= */

.pwfd-field {
	display:        flex;
	flex-direction: column;
	gap:            0.35rem;
	margin-bottom:  1rem;
}

.pwfd-field label {
	font-size:   0.875rem;
	font-weight: 600;
	color:       var(--pwfd-text);
}

.pwfd-input {
	width:         100%;
	padding:       0.7rem 1rem;
	font-family:   var(--pwfd-font);
	font-size:     1rem;
	color:         var(--pwfd-text);
	background:    #ffffff;
	border:        1.5px solid var(--pwfd-border);
	border-radius: 8px;
	outline:       none;
	transition:    var(--pwfd-transition);
	box-sizing:    border-box;
}

.pwfd-input:focus {
	border-color: var(--pwfd-green);
	box-shadow:   0 0 0 3px rgba(37, 211, 102, 0.18);
}

.pwfd-input::placeholder {
	color: #b0b8c1;
}

/* =============================================================================
   MENSAGEM DE ERRO
   ============================================================================= */

.pwfd-error {
	font-size:  0.8rem;
	color:      #dc2626;
	min-height: 1.1rem;
	line-height: 1.4;
}

/* =============================================================================
   BOTÃO DE SUBMIT
   ============================================================================= */

.pwfd-submit-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             0.5rem;
	width:           100%;
	padding:         0.85rem 1.5rem;
	background:      var(--pwfd-green);
	color:           #ffffff;
	font-family:     var(--pwfd-font);
	font-size:       1rem;
	font-weight:     700;
	border:          none;
	border-radius:   8px;
	cursor:          pointer;
	transition:      var(--pwfd-transition);
	margin-top:      0.25rem;
}

.pwfd-submit-btn:hover:not(:disabled),
.pwfd-submit-btn:focus-visible:not(:disabled) {
	background: var(--pwfd-green-dark);
	transform:  translateY(-1px);
	box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
	outline:    none;
}

.pwfd-submit-btn:active:not(:disabled) {
	transform: translateY(0);
}

.pwfd-submit-btn:disabled {
	opacity: 0.65;
	cursor:  not-allowed;
}

/* =============================================================================
   SPINNER DE CARREGAMENTO
   ============================================================================= */

.pwfd-spinner {
	display:            none;
	width:              1rem;
	height:             1rem;
	border:             2px solid rgba(255, 255, 255, 0.35);
	border-top-color:   #ffffff;
	border-radius:      50%;
	animation:          pwfdSpin 0.7s linear infinite;
}

.pwfd-loading .pwfd-spinner {
	display: block;
}

@keyframes pwfdSpin {
	to { transform: rotate(360deg); }
}

/* =============================================================================
   RESPONSIVIDADE
   ============================================================================= */

@media ( max-width: 480px ) {
	.pwfd-modal {
		padding:       1.5rem 1.25rem;
		border-radius: 16px 16px 0 0;
		max-width:     100%;
		margin-top:    auto;
	}

	.pwfd-overlay {
		align-items: flex-end;
		padding:     0;
	}
}

/* =============================================================================
   BOTÃO FLUTUANTE
   ============================================================================= */

.pwfd-float-btn {
	position:    fixed;
	bottom:      1.75rem;
	right:       1.75rem;
	z-index:     99998; /* abaixo do overlay (99999) */
	min-width:   3.5rem;
	height:      3.5rem;
	padding:     0 1.1rem;
	border-radius: 50px;
	gap:         0;
	box-shadow:  0 4px 20px rgba(37, 211, 102, 0.55), 0 2px 8px rgba(0, 0, 0, 0.15);
	transition:  background 0.2s ease, box-shadow 0.2s ease, gap 0.3s ease;

	/* Animação de pulso via box-shadow */
	animation: pwfdPulse 2.5s ease-out infinite;
}

.pwfd-float-btn:hover,
.pwfd-float-btn:focus-visible {
	animation: none;
	box-shadow: 0 6px 24px rgba(37, 211, 102, 0.65), 0 2px 10px rgba(0, 0, 0, 0.18);
	gap:        0.55rem;
}

/* Ícone SVG do botão flutuante — tamanho fixo, não encolhe */
.pwfd-float-btn svg {
	width:      1.5rem;
	height:     1.5rem;
	flex-shrink: 0;
}

/* Texto do botão flutuante — oculto por padrão, expande no hover */
.pwfd-float-label {
	display:     inline-block;
	max-width:   0;
	overflow:    hidden;
	white-space: nowrap;
	transition:  max-width 0.35s ease;
	font-size:   0.95rem;
}

.pwfd-float-btn:hover .pwfd-float-label,
.pwfd-float-btn:focus-visible .pwfd-float-label {
	max-width: 200px;
}

@keyframes pwfdPulse {
	0%   { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.55), 0 0 0 0   rgba(37, 211, 102, 0.50); }
	70%  { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.55), 0 0 0 14px rgba(37, 211, 102, 0);   }
	100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.55), 0 0 0 0   rgba(37, 211, 102, 0);   }
}

/* Em telas pequenas, mantém o botão flutuante numa posição confortável */
@media ( max-width: 480px ) {
	.pwfd-float-btn {
		bottom: 1.25rem;
		right:  1.25rem;
	}
}