/* =========================================================================
   Webzoe Promotores — Estilos do formulário de cadastro
   Visual premium • Verde • Mobile First • Cards suaves
   ========================================================================= */

.wzp-wrapper {
	/* Variáveis de tema (fácil de customizar) */
	--wzp-green:        #16a34a;
	--wzp-green-dark:   #15803d;
	--wzp-green-light:  #dcfce7;
	--wzp-gray:         #f3f4f6;
	--wzp-gray-2:       #e5e7eb;
	--wzp-text:         #1f2937;
	--wzp-text-soft:    #6b7280;
	--wzp-white:        #ffffff;
	--wzp-danger:       #dc2626;
	--wzp-radius:       16px;
	--wzp-radius-sm:    10px;
	--wzp-shadow:       0 10px 30px rgba(16, 24, 40, 0.08);
	--wzp-shadow-sm:    0 2px 8px rgba(16, 24, 40, 0.06);

	max-width: 920px;
	margin: 32px auto;
	padding: 0 16px;
	color: var(--wzp-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
}

.wzp-wrapper *,
.wzp-wrapper *::before,
.wzp-wrapper *::after {
	box-sizing: border-box;
}

/* ----------------------------------------------------------------- Card */
.wzp-card {
	background: var(--wzp-white);
	border-radius: var(--wzp-radius);
	box-shadow: var(--wzp-shadow);
	padding: 24px;
	border: 1px solid var(--wzp-gray-2);
}

/* -------------------------------------------------------------- Cabeçalho */
.wzp-header {
	text-align: center;
	margin-bottom: 24px;
}

.wzp-title {
	font-size: 1.6rem;
	font-weight: 800;
	margin: 0 0 6px;
	color: var(--wzp-text);
}

.wzp-subtitle {
	margin: 0;
	color: var(--wzp-text-soft);
	font-size: 0.95rem;
}

/* ------------------------------------------------------------------ Steps */
.wzp-steps {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 8px;
	margin-bottom: 8px;
	-webkit-overflow-scrolling: touch;
}

.wzp-step {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--wzp-gray);
	border: 1px solid var(--wzp-gray-2);
	border-radius: 999px;
	padding: 8px 14px;
	cursor: pointer;
	font-size: 0.85rem;
	color: var(--wzp-text-soft);
	white-space: nowrap;
	transition: all 0.2s ease;
}

.wzp-step:hover { background: var(--wzp-gray-2); }

.wzp-step.is-active {
	background: var(--wzp-green);
	border-color: var(--wzp-green);
	color: #fff;
	box-shadow: var(--wzp-shadow-sm);
}

.wzp-step.is-done {
	background: var(--wzp-green-light);
	border-color: var(--wzp-green-light);
	color: var(--wzp-green-dark);
}

.wzp-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	font-weight: 700;
	font-size: 0.75rem;
}

.wzp-step.is-active .wzp-step-num { background: rgba(255, 255, 255, 0.3); }
.wzp-step-icon { font-size: 1rem; }
.wzp-step-label { display: none; } /* oculto no mobile; aparece em telas maiores */

/* --------------------------------------------------------- Barra progresso */
.wzp-progress {
	height: 6px;
	background: var(--wzp-gray-2);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 24px;
}

.wzp-progress-bar {
	height: 100%;
	background: linear-gradient(90deg, var(--wzp-green), var(--wzp-green-dark));
	border-radius: 999px;
	transition: width 0.35s ease;
}

/* ----------------------------------------------------------------- Painéis */
.wzp-panel { display: none; animation: wzp-fade 0.3s ease; }
.wzp-panel.is-active { display: block; }

@keyframes wzp-fade {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.wzp-panel-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--wzp-green-light);
}

.wzp-panel-icon {
	font-size: 1.4rem;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wzp-green-light);
	border-radius: 12px;
}

.wzp-panel-title {
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0;
}

/* ------------------------------------------------------------------- Grid */
.wzp-grid {
	display: grid;
	grid-template-columns: 1fr;   /* mobile first: 1 coluna */
	gap: 16px;
}

.wzp-field { display: flex; flex-direction: column; }
.wzp-field--wide { grid-column: 1 / -1; }

/* Campos condicionais começam ocultos (JS exibe). */
.wzp-field--conditional { display: none; grid-column: 1 / -1; }
.wzp-field--conditional.is-visible { display: flex; }

/* ----------------------------------------------------------------- Labels */
.wzp-label {
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--wzp-text);
}

.wzp-req { color: var(--wzp-danger); }

.wzp-help {
	margin-top: 6px;
	font-size: 0.75rem;
	color: var(--wzp-text-soft);
}

/* ----------------------------------------------------------------- Inputs */
.wzp-input {
	width: 100%;
	padding: 11px 13px;
	border: 1.5px solid var(--wzp-gray-2);
	border-radius: var(--wzp-radius-sm);
	font-size: 0.95rem;
	color: var(--wzp-text);
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	font-family: inherit;
}

.wzp-input:focus {
	outline: none;
	border-color: var(--wzp-green);
	box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

.wzp-input.wzp-invalid {
	border-color: var(--wzp-danger);
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

textarea.wzp-input { resize: vertical; min-height: 80px; }

/* ------------------------------------------------------------ Radio/Check */
.wzp-radios { display: flex; flex-wrap: wrap; gap: 10px; }

.wzp-radio {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1.5px solid var(--wzp-gray-2);
	border-radius: var(--wzp-radius-sm);
	cursor: pointer;
	font-size: 0.9rem;
	transition: all 0.2s ease;
}

.wzp-radio:hover { border-color: var(--wzp-green); }
.wzp-radio input { accent-color: var(--wzp-green); }

/* --------------------------------------------------------------- Uploads */
.wzp-upload {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 22px;
	border: 2px dashed var(--wzp-gray-2);
	border-radius: var(--wzp-radius-sm);
	cursor: pointer;
	background: var(--wzp-gray);
	text-align: center;
	transition: all 0.2s ease;
}

.wzp-upload:hover {
	border-color: var(--wzp-green);
	background: var(--wzp-green-light);
}

.wzp-upload--sm { padding: 14px; }
.wzp-upload-icon { font-size: 1.6rem; }
.wzp-upload-text { font-size: 0.85rem; color: var(--wzp-text-soft); }
.wzp-file { display: none; }

/* Pré-visualização de imagem */
.wzp-preview {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.wzp-preview img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--wzp-gray-2);
}

.wzp-preview .wzp-file-name {
	font-size: 0.8rem;
	color: var(--wzp-green-dark);
	background: var(--wzp-green-light);
	padding: 6px 10px;
	border-radius: 8px;
}

/* -------------------------------------------------------------- Repeaters */
.wzp-repeater-items { display: flex; flex-direction: column; gap: 12px; margin: 10px 0; }

.wzp-repeater-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px;
	background: var(--wzp-gray);
	border-radius: var(--wzp-radius-sm);
	border: 1px solid var(--wzp-gray-2);
	flex-wrap: wrap;
}

.wzp-repeater-row .wzp-upload { flex: 1; min-width: 140px; }
.wzp-repeater-row--doc .wzp-input { flex: 1 1 100%; }

.wzp-btn-remove {
	background: #fee2e2;
	color: var(--wzp-danger);
	border: none;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 0.9rem;
	flex: 0 0 auto;
	transition: background 0.2s ease;
}
.wzp-btn-remove:hover { background: #fecaca; }

/* ------------------------------------------------------------------ Botões */
.wzp-actions {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--wzp-gray-2);
}

.wzp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 22px;
	border-radius: var(--wzp-radius-sm);
	border: none;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: inherit;
	text-decoration: none;
}

.wzp-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.wzp-btn-primary { background: var(--wzp-green); color: #fff; }
.wzp-btn-primary:hover:not(:disabled) { background: var(--wzp-green-dark); }

.wzp-btn-success {
	background: var(--wzp-green-dark);
	color: #fff;
	box-shadow: var(--wzp-shadow-sm);
}
.wzp-btn-success:hover { filter: brightness(1.05); }

.wzp-btn-ghost {
	background: var(--wzp-gray);
	color: var(--wzp-text);
}
.wzp-btn-ghost:hover:not(:disabled) { background: var(--wzp-gray-2); }

.wzp-btn-add {
	background: var(--wzp-green-light);
	color: var(--wzp-green-dark);
	font-size: 0.85rem;
	padding: 9px 16px;
}
.wzp-btn-add:hover { background: #bbf7d0; }

/* ------------------------------------------------------------------ Revisão */
.wzp-review-intro { color: var(--wzp-text-soft); margin-bottom: 18px; }

.wzp-review-highlight {
	display: flex;
	gap: 18px;
	align-items: center;
	background: linear-gradient(135deg, var(--wzp-green-light), #fff);
	border: 1px solid var(--wzp-green-light);
	border-radius: var(--wzp-radius);
	padding: 18px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.wzp-review-photo {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: var(--wzp-gray-2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	color: var(--wzp-text-soft);
	overflow: hidden;
	flex: 0 0 auto;
	border: 3px solid #fff;
	box-shadow: var(--wzp-shadow-sm);
}
.wzp-review-photo img { width: 100%; height: 100%; object-fit: cover; }

.wzp-review-main { flex: 1; min-width: 200px; }
.wzp-review-main h3 { margin: 0 0 10px; font-size: 1.25rem; }

.wzp-review-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.wzp-review-tags span {
	background: #fff;
	border: 1px solid var(--wzp-gray-2);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 0.8rem;
	color: var(--wzp-text);
}

.wzp-review-all { display: grid; grid-template-columns: 1fr; gap: 0; }

.wzp-review-group { margin-bottom: 18px; }
.wzp-review-group h4 {
	margin: 0 0 8px;
	font-size: 0.95rem;
	color: var(--wzp-green-dark);
	font-weight: 700;
}

.wzp-review-item {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px dashed var(--wzp-gray-2);
	font-size: 0.88rem;
}
.wzp-review-item .k { color: var(--wzp-text-soft); }
.wzp-review-item .v { font-weight: 600; text-align: right; word-break: break-word; }

/* ------------------------------------------------------------------ Notices */
.wzp-notice {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px;
	border-radius: var(--wzp-radius-sm);
	margin-bottom: 16px;
	border-left: 4px solid;
}
.wzp-notice strong { font-size: 0.95rem; }
.wzp-notice span { font-size: 0.88rem; }

.wzp-notice--error   { background: #fef2f2; border-color: var(--wzp-danger); color: #991b1b; }
.wzp-notice--warning { background: #fffbeb; border-color: #f59e0b; color: #92400e; }
.wzp-notice--info    { background: #eff6ff; border-color: #3b82f6; color: #1e40af; }
.wzp-notice--success { background: var(--wzp-green-light); border-color: var(--wzp-green); color: var(--wzp-green-dark); }

/* ------------------------------------------------------------------ Sucesso */
.wzp-success { text-align: center; padding: 48px 24px; }
.wzp-success-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: var(--wzp-green);
	color: #fff;
	font-size: 2.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(22, 163, 74, 0.35);
}
.wzp-success .wzp-btn { margin-top: 20px; }

/* ===================================================================
   RESPONSIVIDADE — telas maiores
   =================================================================== */
@media (min-width: 640px) {
	.wzp-card { padding: 32px; }
	.wzp-grid { grid-template-columns: 1fr 1fr; }      /* 2 colunas */
	.wzp-step-label { display: inline; }                /* mostra rótulo */
	.wzp-title { font-size: 1.9rem; }
}

@media (min-width: 900px) {
	.wzp-grid { grid-template-columns: 1fr 1fr 1fr; }   /* 3 colunas */
	.wzp-field--wide { grid-column: 1 / -1; }
}

/* ===================================================================
   HONEYPOT anti-bot — invisível para humanos, fora da tela
   (evita display:none de propósito; vários bots pulam campos ocultos assim)
   =================================================================== */
.wzp-hp {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Widget do Cloudflare Turnstile */
.wzp-turnstile {
	display: flex;
	justify-content: center;
	margin: 20px 0 4px;
}

/* ===================================================================
   GALERIA — itens já cadastrados (modo edição)
   =================================================================== */
.wzp-gallery-existing {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 10px 0;
}
.wzp-gallery-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 8px;
	background: var(--wzp-gray);
	border: 1px solid var(--wzp-gray-2);
	border-radius: var(--wzp-radius-sm);
	cursor: pointer;
	font-size: 0.75rem;
}
.wzp-gallery-item img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 8px;
}
.wzp-gallery-item .wzp-file-icon { font-size: 2.2rem; }
.wzp-gallery-keep { display: inline-flex; align-items: center; gap: 4px; }
.wzp-gallery-keep input { accent-color: var(--wzp-green); }

/* ===================================================================
   SINGLE — ficha cadastral
   =================================================================== */
.wzp-single .wzp-card { padding: 0; overflow: hidden; }

.wzp-single-head {
	display: flex;
	gap: 20px;
	align-items: center;
	flex-wrap: wrap;
	padding: 24px;
	background: linear-gradient(135deg, var(--wzp-green-light), #fff);
	border-bottom: 1px solid var(--wzp-gray-2);
}

.wzp-single-photo {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	overflow: hidden;
	flex: 0 0 auto;
	background: var(--wzp-gray-2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	color: var(--wzp-text-soft);
	border: 4px solid #fff;
	box-shadow: var(--wzp-shadow-sm);
}
.wzp-single-photo img { width: 100%; height: 100%; object-fit: cover; }

.wzp-single-headinfo { flex: 1; min-width: 220px; }
.wzp-single-headinfo .wzp-title { margin: 8px 0 2px; }
.wzp-single-fantasia { margin: 0 0 12px; color: var(--wzp-text-soft); font-size: 1rem; }

.wzp-single-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}
.wzp-status-form {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}
.wzp-status-form .wzp-input { width: auto; padding: 9px 12px; }

/* Badge de status */
.wzp-badge {
	display: inline-block;
	padding: 5px 14px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: #fff;
}
.wzp-badge--pendente  { background: #f59e0b; }
.wzp-badge--ativo     { background: var(--wzp-green); }
.wzp-badge--doc       { background: #ea580c; }
.wzp-badge--inativo   { background: #6b7280; }
.wzp-badge--bloqueado { background: var(--wzp-danger); }

/* Seções */
.wzp-single-section { padding: 24px; border-bottom: 1px solid var(--wzp-gray-2); }
.wzp-single-section:last-child { border-bottom: none; }

.wzp-single-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}
.wzp-single-item {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px dashed var(--wzp-gray-2);
	font-size: 0.9rem;
}
.wzp-single-item .k { color: var(--wzp-text-soft); }
.wzp-single-item .v { font-weight: 600; text-align: right; word-break: break-word; }

/* Galeria na ficha */
.wzp-gallery-view { margin-top: 8px; }
.wzp-gallery-view h4 { margin: 0 0 10px; color: var(--wzp-green-dark); font-size: 0.95rem; }
.wzp-gallery-view-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.wzp-gallery-view-item {
	display: block;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--wzp-gray-2);
}
.wzp-gallery-view-item img {
	width: 110px;
	height: 110px;
	object-fit: cover;
	display: block;
	transition: transform 0.2s ease;
}
.wzp-gallery-view-item img:hover { transform: scale(1.05); }
.wzp-gallery-view-file {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: var(--wzp-gray);
	font-size: 0.82rem;
	color: var(--wzp-green-dark);
	text-decoration: none;
}
.wzp-gallery-view-file .wzp-file-icon { font-size: 1.4rem; }

@media (min-width: 640px) {
	.wzp-single-grid { grid-template-columns: 1fr 1fr; column-gap: 28px; }
}