/* ============================================================
 * Divulcar — Formulário Público de Cadastro de Veículos
 * Versão Modernizada
 * ============================================================ */

:root {
	--dc-primary: #e22446;
	--dc-primary-hover: #c01e3b;
	--dc-primary-light: #fce9ec;
	--dc-success: #10b981;
	--dc-bg: #f8fafc;
	--dc-border: #e2e8f0;
	--dc-text: #1e293b;
	--dc-text-light: #64748b;
	--dc-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--dc-radius: 12px;
}

.dc-wizard * {
	box-sizing: border-box;
}

	.dc-wizard {
		max-width: 800px;
		margin: 2rem auto;
		padding: 2rem;
		background: #fff;
		border-radius: 20px;
		box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
		font-family: inherit;
		color: var(--dc-text);
	}

/* ---------- Progress Bar ---------- */
.dc-wizard-progress {
	height: 6px;
	background: var(--dc-border);
	border-radius: 10px;
	margin-bottom: 2.5rem;
	overflow: hidden;
}

.dc-wizard-progress-bar {
	height: 100%;
	width: 20%;
	background: var(--dc-primary);
	transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Step Indicators ---------- */
.dc-wizard-steps {
	display: flex;
	justify-content: space-between;
	margin-bottom: 3rem;
	position: relative;
}

.dc-step-indicator {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	z-index: 1;
}

.dc-step-number {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--dc-border);
	color: var(--dc-text-light);
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
	transition: all 0.3s ease;
}

.dc-step-indicator.active .dc-step-number {
	background: var(--dc-primary);
	border-color: var(--dc-primary);
	color: #fff;
	box-shadow: 0 0 0 4px var(--dc-primary-light);
}

.dc-step-indicator.done .dc-step-number {
	background: var(--dc-success);
	border-color: var(--dc-success);
	color: #fff;
}

.dc-step-label {
	font-size: 12px;
	font-weight: 500;
	color: var(--dc-text-light);
}

.dc-step-indicator.active .dc-step-label {
	color: var(--dc-primary);
	font-weight: 600;
}

/* ---------- Steps ---------- */
.dc-wizard-step {
	display: none;
	animation: slideUp 0.4s ease-out;
}

.dc-wizard-step.active {
	display: block;
}

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

.dc-step-title {
	font-size: 28px;
	font-weight: 800;
	margin-bottom: 2rem;
	text-align: center;
	letter-spacing: -0.025em;
}

/* ---------- Tipo Selector ---------- */
.dc-tipo-selector {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 2.5rem;
}

	.dc-tipo-card {
		position: relative;
		padding: 2rem 1rem;
		border: 2px solid var(--dc-border);
		border-radius: var(--dc-radius);
		cursor: pointer;
		transition: all 0.2s ease;
		text-align: center;
		background: #fff;
		overflow: hidden;
	}

.dc-tipo-card:hover {
	border-color: var(--dc-primary);
	background: var(--dc-primary-light);
	transform: translateY(-4px);
}

	.dc-tipo-card input {
		position: absolute;
		opacity: 0;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		cursor: pointer;
		margin: 0;
		z-index: 2;
	}

	.dc-tipo-card:has(input:checked),
	.dc-tipo-card.active {
		border-color: var(--dc-primary);
		background: var(--dc-primary-light);
		box-shadow: var(--dc-shadow);
	}

.dc-tipo-card-icon {
	font-size: 48px;
	display: block;
	margin-bottom: 12px;
}

.dc-tipo-card-label {
	font-weight: 700;
	font-size: 16px;
}

/* ---------- Fields Area ---------- */
.dc-fipe-fields {
	padding: 2rem;
	background: var(--dc-bg);
	border-radius: var(--dc-radius);
	border: 1.5px solid var(--dc-border);
	margin-top: 2rem;
	animation: fadeIn 0.3s ease;
}

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

/* ---------- Form Groups ---------- */
.dc-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.dc-form-group {
	margin-bottom: 1.5rem;
}

.dc-form-group label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--dc-text);
}

.dc-form-group input,
.dc-form-group select,
.dc-form-group textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1.5px solid var(--dc-border);
	border-radius: 10px;
	font-size: 15px;
	font-family: inherit;
	transition: all 0.2s ease;
	background: #fff;
}

.dc-form-group input:focus,
.dc-form-group select:focus,
.dc-form-group textarea:focus {
	outline: none;
	border-color: var(--dc-primary);
	box-shadow: 0 0 0 4px var(--dc-primary-light);
}

.dc-form-group.error input,
.dc-form-group.error select {
	border-color: #ef4444;
}

/* ---------- Chips (Opcionais) ---------- */
.dc-opcionais-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 12px;
}

.dc-opcional-chip {
	padding: 10px 14px;
	border: 1.5px solid var(--dc-border);
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	gap: 8px;
}

.dc-opcional-chip:hover {
	background: var(--dc-bg);
}

	.dc-opcional-chip:has(input:checked),
	.dc-opcional-chip.active {
		background: var(--dc-primary);
		color: #fff;
		border-color: var(--dc-primary);
	}

.dc-opcional-chip input {
	display: none;
}

/* ---------- Upload Area ---------- */
.dc-upload-dropzone {
	border: 2px dashed var(--dc-border);
	border-radius: 16px;
	padding: 3rem 2rem;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease;
	background: var(--dc-bg);
}

.dc-upload-dropzone:hover,
.dc-upload-dropzone.dragover {
	border-color: var(--dc-primary);
	background: var(--dc-primary-light);
	box-shadow: inset 0 0 10px rgba(226, 36, 70, 0.1);
}

	.dc-photos-preview {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		margin-top: 2rem;
		min-height: 50px;
	}

.dc-photo-item {
	position: relative;
	aspect-ratio: 1;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--dc-border);
}

.dc-photo-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dc-photo-remove {
	position: absolute;
	top: 5px;
	right: 5px;
	background: rgba(0,0,0,0.5);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	cursor: pointer;
}

/* ---------- Navigation ---------- */
.dc-wizard-nav {
	display: flex;
	justify-content: space-between;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--dc-border);
}

.dc-btn {
	padding: 12px 24px;
	border-radius: 10px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	gap: 8px;
	border: none;
}

.dc-btn-prev {
	background: #fff;
	color: var(--dc-text);
	border: 1.5px solid var(--dc-border);
}

.dc-btn-prev:hover:not(:disabled) {
	background: var(--dc-bg);
}

.dc-btn-next, .dc-btn-submit {
	background: var(--dc-primary);
	color: #fff;
}

.dc-btn-next:hover, .dc-btn-submit:hover {
	background: var(--dc-primary-hover);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(226, 36, 70, 0.2);
}

.dc-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---------- Review ---------- */
.dc-review-grid {
	background: var(--dc-bg);
	padding: 2rem;
	border-radius: 16px;
	display: grid;
	gap: 1rem;
}

.dc-review-item {
	font-size: 15px;
}

.dc-form-message {
	margin-top: 1.5rem;
	padding: 1rem;
	border-radius: 8px;
	text-align: center;
	font-weight: 600;
}

.dc-form-message.success { background: #d1fae5; color: #065f46; }
.dc-form-message.error { background: #fee2e2; color: #991b1b; }

@media (max-width: 640px) {
	.dc-tipo-selector { grid-template-columns: 1fr; }
	.dc-form-row { grid-template-columns: 1fr; }
	.dc-wizard { padding: 1.5rem; margin: 1rem; }
}

/* ============================================================
 * Ajuste visual — formulário de cadastro dentro do Dashboard
 * Quando o shortcode [dc_cadastro] é exibido na tela
 * "Adicionar Veículo" do painel do anunciante, ele passa a herdar
 * o mesmo padrão visual das telas do dashboard (cards, cores,
 * raios, tipografia e botões), em vez do visual próprio usado
 * quando o shortcode é colocado em outras páginas do site.
 * ============================================================ */

.dc-dashboard-card.dc-dashboard-shortcode-form {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
}

.dc-dashboard-shortcode-form .dc-wizard {
	max-width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	color: #172033;
}

/* Barra de progresso */
.dc-dashboard-shortcode-form .dc-wizard-progress {
	background: #edf0f5;
	border-radius: 20px;
	height: 5px;
	margin-bottom: 0;
}

.dc-dashboard-shortcode-form .dc-wizard-progress-bar {
	background: #e22446;
}

/* Indicadores de etapa viram um cartão no padrão do dashboard */
.dc-dashboard-shortcode-form .dc-wizard-steps {
	background: #fff;
	border: 1px solid #e5e9f0;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(20, 35, 70, .06);
	padding: 20px 22px 22px;
	margin: 18px 0 22px;
}

.dc-dashboard-shortcode-form .dc-step-number {
	border-color: #d9e0ea;
	color: #8994a6;
}

.dc-dashboard-shortcode-form .dc-step-indicator.active .dc-step-number {
	background: #e22446;
	border-color: #e22446;
	box-shadow: 0 0 0 4px #fce9ec;
}

.dc-dashboard-shortcode-form .dc-step-indicator.done .dc-step-number {
	background: #16a34a;
	border-color: #16a34a;
}

.dc-dashboard-shortcode-form .dc-step-label {
	color: #8994a6;
}

.dc-dashboard-shortcode-form .dc-step-indicator.active .dc-step-label {
	color: #e22446;
}

/* Cada etapa do wizard vira um cartão igual aos "dc-form-section" do dashboard */
.dc-dashboard-shortcode-form .dc-wizard-step {
	background: #fff;
	border: 1px solid #e5e9f0;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(20, 35, 70, .06);
	padding: 24px;
}

.dc-dashboard-shortcode-form .dc-step-title {
	text-align: left;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: normal;
	color: #172033;
	margin-bottom: 20px;
}

/* Cartões de tipo de veículo */
.dc-dashboard-shortcode-form .dc-tipo-card {
	border-radius: 12px;
	border-color: #e5e9f0;
}

.dc-dashboard-shortcode-form .dc-tipo-card:hover,
.dc-dashboard-shortcode-form .dc-tipo-card:has(input:checked),
.dc-dashboard-shortcode-form .dc-tipo-card.active {
	border-color: #e22446;
	background: #fce9ec;
}

.dc-dashboard-shortcode-form .dc-fipe-fields {
	background: #f8fafc;
	border-color: #e5e9f0;
	border-radius: 12px;
}

/* Campos de formulário no padrão dc-form-field do dashboard */
.dc-dashboard-shortcode-form .dc-form-group label {
	font-weight: 600;
	font-size: 13px;
	color: #172033;
}

.dc-dashboard-shortcode-form .dc-form-group input,
.dc-dashboard-shortcode-form .dc-form-group select,
.dc-dashboard-shortcode-form .dc-form-group textarea {
	border-radius: 8px;
	border-color: #d9e0ea;
	padding: 10px 11px;
	font-size: 15px;
}

.dc-dashboard-shortcode-form .dc-form-group input:focus,
.dc-dashboard-shortcode-form .dc-form-group select:focus,
.dc-dashboard-shortcode-form .dc-form-group textarea:focus {
	border-color: #e22446;
	box-shadow: 0 0 0 4px #fce9ec;
}

/* Chips de opcionais */
.dc-dashboard-shortcode-form .dc-opcional-chip {
	border-radius: 8px;
	border-color: #d9e0ea;
}

.dc-dashboard-shortcode-form .dc-opcional-chip:hover {
	background: #f8fafc;
}

.dc-dashboard-shortcode-form .dc-opcional-chip:has(input:checked),
.dc-dashboard-shortcode-form .dc-opcional-chip.active {
	background: #e22446;
	border-color: #e22446;
	color: #fff;
}

/* Upload de fotos */
.dc-dashboard-shortcode-form .dc-upload-dropzone {
	border-radius: 14px;
	background: #f8fafc;
	border-color: #cbd5e1;
}

.dc-dashboard-shortcode-form .dc-upload-dropzone:hover,
.dc-dashboard-shortcode-form .dc-upload-dropzone.dragover {
	border-color: #e22446;
	background: #fce9ec;
}

.dc-dashboard-shortcode-form .dc-photo-item {
	border-radius: 8px;
}

/* Navegação / botões no padrão dc-dashboard-button e dc-btn-ghost */
.dc-dashboard-shortcode-form .dc-wizard-nav {
	border-top: 1px solid #edf0f5;
	margin-top: 18px;
	padding-top: 18px;
}

.dc-dashboard-shortcode-form .dc-btn {
	border-radius: 8px;
	font-weight: 700;
	padding: 11px 18px;
}

.dc-dashboard-shortcode-form .dc-btn-prev {
	color: #536174;
	border-color: transparent;
	background: transparent;
}

.dc-dashboard-shortcode-form .dc-btn-prev:hover:not(:disabled) {
	background: #eef1f6;
	color: #172033;
}

.dc-dashboard-shortcode-form .dc-btn-next,
.dc-dashboard-shortcode-form .dc-btn-submit {
	background: #e22446;
	box-shadow: 0 6px 16px rgba(226, 36, 70, .25);
}

.dc-dashboard-shortcode-form .dc-btn-next:hover,
.dc-dashboard-shortcode-form .dc-btn-submit:hover {
	background: #c01e3b;
	box-shadow: 0 10px 22px rgba(226, 36, 70, .3);
}

@media (max-width: 560px) {
	.dc-dashboard-shortcode-form .dc-wizard-steps,
	.dc-dashboard-shortcode-form .dc-wizard-step {
		padding: 16px;
	}
}