/*
 ValeAinda Design System — Fundação mínima (CSS-only, isolado e reversível)
 + F2: Modernização controlada dos cards (preservando identidade ValeAinda)
 
 Regras:
 - Não aplica estilos globais perigosos
 - Prioriza reutilização de tokens existentes: var(--va-*)
 - Tokens namespaceados --va-ds-*
 - Classes com namespace .va-ds-*
 - Sem !important desnecessário
 - Compatível com Astra + WPAdverts + plugins ValeAinda
 - Desativação restaura visual anterior
 */

:root {
	/* Espaçamentos semânticos */
	--va-ds-space-xs: 4px;
	--va-ds-space-sm: 8px;
	--va-ds-space-md: 16px;
	--va-ds-space-lg: 24px;
	--va-ds-space-xl: 32px;
	--va-ds-space-2xl: 48px;

	/* Radius semânticos */
	--va-ds-radius-sm: var(--va-raio-sm, 4px);
	--va-ds-radius-md: var(--va-raio-md, 12px);
	--va-ds-radius-lg: var(--va-raio-lg, 16px);
	--va-ds-radius-xl: var(--va-raio-xl, 20px);
	--va-ds-radius-pill: var(--va-raio-pill, 50px);

	/* Elevação */
	--va-ds-elevation-1: var(--va-sombra-sm, 0 2px 6px rgba(0,0,0,0.05));
	--va-ds-elevation-2: var(--va-sombra, 0 4px 15px rgba(0,0,0,0.08));
	--va-ds-elevation-3: var(--va-sombra-md, 0 6px 18px rgba(0,0,0,0.08));
	--va-ds-elevation-4: var(--va-sombra-hover, 0 10px 30px rgba(0,0,0,0.1));

	/* Transições */
	--va-ds-transition-fast: var(--va-transicao-rapida, 0.2s ease);
	--va-ds-transition-normal: var(--va-transicao, 0.3s ease);

	/* Superfície/bordas/texto */
	--va-ds-bg-surface: #fff;
	--va-ds-bg-subtle: var(--va-cinza-50, #f9f9f9);
	--va-ds-border: var(--va-cinza-200, #e9ecef);
	--va-ds-border-strong: var(--va-cinza-300, #ddd);
	--va-ds-text-primary: var(--va-cinza-900, #333);
	--va-ds-text-secondary: var(--va-cinza-700, #666);

	/* Z-index */
	--va-ds-z-header: 100;
	--va-ds-z-sticky: 110;
	--va-ds-z-modal: 1000;
}

/*
 Componentes-base com namespace .va-ds-*
 Não aplicados automaticamente.
 */
.va-ds-card {
	background: var(--va-ds-bg-surface);
	border: 1px solid var(--va-ds-border);
	border-radius: var(--va-ds-radius-md);
	box-shadow: var(--va-ds-elevation-1);
	transition: transform var(--va-ds-transition-fast), box-shadow var(--va-ds-transition-fast);
}

.va-ds-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--va-ds-elevation-3);
}

.va-ds-button {
	display: inline-block;
	border: none;
	border-radius: var(--va-ds-radius-pill);
	font-weight: 600;
	line-height: 1.5;
	padding: var(--va-ds-space-sm) var(--va-ds-space-lg);
	transition: background var(--va-ds-transition-fast), transform var(--va-ds-transition-fast), box-shadow var(--va-ds-transition-fast);
}

.va-ds-button:active {
	transform: translateY(1px);
}

.va-ds-panel {
	background: var(--va-ds-bg-surface);
	border: 1px solid var(--va-ds-border);
	border-radius: var(--va-ds-radius-lg);
	box-shadow: var(--va-ds-elevation-2);
	padding: var(--va-ds-space-lg);
}

.va-ds-badge {
	display: inline-block;
	border-radius: var(--va-ds-radius-pill);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	padding: 2px 10px;
}

.va-ds-text-secondary {
	color: var(--va-ds-text-secondary);
}

/* F2: Modernização controlada dos cards (contextual, sem unificar HTML)
   Aplica-se APENAS sobre cards existentes. Preserva identidade ValeAinda. */

/* Padrão B: .adverts-list .adverts-item (mais utilizado no child) */
.adverts-list .adverts-item {
	border-radius: var(--va-ds-radius-md);
	border: 1px solid var(--va-ds-border);
	box-shadow: var(--va-ds-elevation-1);
	transition: transform var(--va-ds-transition-fast), box-shadow var(--va-ds-transition-fast);
}

.adverts-list .adverts-item:hover {
	transform: translateY(-4px);
	box-shadow: var(--va-ds-elevation-3);
}

.adverts-list .adverts-item img {
	border-radius: var(--va-ds-radius-md) var(--va-ds-radius-md) 0 0;
	/* Preserva altura 260px existente; mantém responsividade */
	height: 260px;
	object-fit: cover;
	width: 100%;
}

/* Padrão A: .advert-item (WPAdverts base) */
.advert-item {
	border-radius: var(--va-ds-radius-md);
	border: 1px solid var(--va-ds-border);
	box-shadow: var(--va-ds-elevation-1);
	transition: transform var(--va-ds-transition-fast), box-shadow var(--va-ds-transition-fast);
}

.advert-item:hover {
	transform: translateY(-4px);
	box-shadow: var(--va-ds-elevation-3);
}

.advert-item .advert-img img,
.advert-img-modern {
	border-radius: var(--va-ds-radius-md) var(--va-ds-radius-md) 0 0;
}

/* Padrão C: .valeainda-card (usado em taxonomy-advert_category.php inline) */
.valeainda-card {
	border-radius: var(--va-ds-radius-md);
	border: 1px solid var(--va-ds-border);
	box-shadow: var(--va-ds-elevation-1);
	transition: transform var(--va-ds-transition-fast), box-shadow var(--va-ds-transition-fast);
	overflow: hidden;
	background: var(--va-ds-bg-surface);
}

.valeainda-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--va-ds-elevation-3);
}

.valeainda-card img {
	border-radius: var(--va-ds-radius-md) var(--va-ds-radius-md) 0 0;
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* Ajustes sutis internos (apenas aparência, sem alterar estrutura) */
.advert-post-title,
.adverts-listing h3 {
	padding: var(--va-ds-space-sm) var(--va-ds-space-md) 0;
}

.advert-published {
	padding: 0 var(--va-ds-space-md) var(--va-ds-space-md);
}

.advert-price {
	border-radius: var(--va-ds-radius-sm);
	padding: 4px 8px;
	display: inline-block;
}

/* F3: Modernização controlada da HOMEPAGE (identidade ValeAinda preservada)
   Aplica-se contextualmente. Não altera header/footer/global. */

.va-ds-home .valeainda-categorias {
	border-radius: var(--va-ds-radius-lg);
	background: linear-gradient(180deg, rgba(249,249,249,0.6), rgba(255,255,255,0.9));
	padding: var(--va-ds-space-lg) var(--va-ds-space-md);
	margin: var(--va-ds-space-2xl) auto;
}

.va-ds-home .valeainda-cat-link {
	border-radius: var(--va-ds-radius-md);
	border: 1px solid var(--va-ds-border);
	box-shadow: var(--va-ds-elevation-1);
	transition: transform var(--va-ds-transition-fast), box-shadow var(--va-ds-transition-fast), border-color var(--va-ds-transition-fast);
}

.va-ds-home .valeainda-cat-link:hover {
	transform: translateY(-4px);
	box-shadow: var(--va-ds-elevation-3);
	border-color: var(--va-verde);
}

.va-ds-home .valeainda-cat-icon {
	border-radius: var(--va-ds-radius-sm);
	transition: transform var(--va-ds-transition-fast), background var(--va-ds-transition-fast), color var(--va-ds-transition-fast);
}

.va-ds-home .valeainda-cat-link:hover .valeainda-cat-icon {
	transform: scale(1.08);
}

.va-ds-home .valeainda-cat-label {
	letter-spacing: 0.2px;
}

/* F4: Modernização controlada dos formulários (publicar/editar)
   CSS isolado, contextual. Não altera lógica/validação WPAdverts.
   Preserva identidade ValeAinda. */

.va-ds-form .wpa-form,
.va-ds-form .adverts-form,
.va-ds-form.wpadverts-form,
.wpadverts-form.va-ds-form {
	background: var(--va-ds-bg-surface);
	border: 1px solid var(--va-ds-border);
	border-radius: var(--va-ds-radius-lg);
	box-shadow: var(--va-ds-elevation-1);
	padding: var(--va-ds-space-xl);
}

.va-ds-form .wpa-form-field > label,
.va-ds-form .adverts-field > label,
.va-ds-form label.wpa-form-label,
.va-ds-form .wpa-field-label {
	color: var(--va-ds-text-primary);
	font-weight: 600;
	margin-bottom: var(--va-ds-space-xs);
	display: inline-block;
}

.va-ds-form input[type="text"],
.va-ds-form input[type="email"],
.va-ds-form input[type="url"],
.va-ds-form input[type="number"],
.va-ds-form input[type="tel"],
.va-ds-form input[type="password"],
.va-ds-form textarea,
.va-ds-form select {
	border-radius: var(--va-ds-radius-sm);
	border: 1px solid var(--va-ds-border-strong);
	box-shadow: none;
	transition: border-color var(--va-ds-transition-fast), box-shadow var(--va-ds-transition-fast);
	width: 100%;
	padding: 0.6em 0.8em;
	line-height: 1.65;
	box-sizing: border-box;
}

.va-ds-form input[type="text"]:focus,
.va-ds-form input[type="email"]:focus,
.va-ds-form input[type="url"]:focus,
.va-ds-form input[type="number"]:focus,
.va-ds-form input[type="tel"]:focus,
.va-ds-form input[type="password"]:focus,
.va-ds-form textarea:focus,
.va-ds-form select:focus {
	outline: none;
	border-color: var(--va-verde);
	box-shadow: 0 0 0 3px rgba(31, 95, 70, 0.12);
}

.va-ds-form textarea {
	resize: vertical;
	min-height: 140px;
}

.va-ds-form .wpa-form-wrap,
.va-ds-form .adverts-control-group,
.va-ds-form .wpa-field {
	margin-bottom: var(--va-ds-space-lg);
}

.va-ds-form .adverts-button,
.va-ds-form input[type="submit"],
.va-ds-form button[type="submit"] {
	border-radius: var(--va-ds-radius-pill);
	font-weight: 600;
	padding: 0.7em 1.8em;
	transition: transform var(--va-ds-transition-fast), box-shadow var(--va-ds-transition-fast), background var(--va-ds-transition-fast);
}

.va-ds-form .adverts-button:hover,
.va-ds-form input[type="submit"]:hover,
.va-ds-form button[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: var(--va-ds-elevation-3);
}

.va-ds-form .wpa-form-description,
.va-ds-form .adverts-field-description {
	color: var(--va-ds-text-secondary);
	margin-top: var(--va-ds-space-xs);
	font-size: 0.9rem;
}

.va-ds-form input[type="checkbox"],
.va-ds-form input[type="radio"] {
	accent-color: var(--va-verde);
}

.va-ds-form .wpa-form-group {
	gap: var(--va-ds-space-md);
}

@media (max-width: 480px) {
	.va-ds-form .adverts-button,
	.va-ds-form input[type="submit"],
	.va-ds-form button[type="submit"] {
		width: 100%;
	}
}

/* F5: Componentes secundários — perfil, badge verificado e elementos isolados.
   CSS contextual e conservador. Preserva identidade ValeAinda. */

.va-ds-badge,
.va-ver-badge {
	border: 1px solid var(--va-verde);
	background: color-mix(in srgb, var(--va-verde) 10%, white);
	color: var(--va-verde-escuro, var(--va-verde));
	border-radius: var(--va-ds-radius-pill);
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow: none;
	transition: box-shadow var(--va-ds-transition-fast);
}

.va-ds-badge:hover,
.va-ver-badge:hover {
	box-shadow: var(--va-ds-elevation-1);
}

.va-ds-profile,
.author-profile,
.atw-author-box {
	background: var(--va-ds-bg-surface);
	border: 1px solid var(--va-ds-border);
	border-radius: var(--va-ds-radius-lg);
	box-shadow: var(--va-ds-elevation-1);
	padding: var(--va-ds-space-lg);
	margin-bottom: var(--va-ds-space-xl);
}

.va-ds-profile .author-name,
.author-profile .author-name {
	color: var(--va-ds-text-primary);
	font-weight: 700;
	margin-bottom: var(--va-ds-space-sm);
}

.va-ds-profile .author-info,
.author-profile .author-info,
.atw-author-box .author-info {
	color: var(--va-ds-text-secondary);
	gap: var(--va-ds-space-sm);
}

.va-ds-profile a,
.author-profile a,
.atw-author-box a {
	color: var(--va-verde);
	text-decoration: none;
	transition: color var(--va-ds-transition-fast);
}

.va-ds-profile a:hover,
.author-profile a:hover,
.atw-author-box a:hover {
	color: var(--va-verde-escuro, var(--va-verde));
	text-decoration: underline;
}

@media (max-width: 600px) {
	.va-ds-profile,
	.author-profile,
	.atw-author-box {
		padding: var(--va-ds-space-md);
		border-radius: var(--va-ds-radius-md);
	}
}

/* F6: Refinamento final e consistência visual.
   Microacabamento conservador. Preserva identidade ValeAinda. */

.va-ds-form input[type="text"],
.va-ds-form input[type="email"],
.va-ds-form input[type="url"],
.va-ds-form input[type="number"],
.va-ds-form input[type="tel"],
.va-ds-form input[type="password"],
.va-ds-form textarea,
.va-ds-form select {
	font-size: 1rem;
}

.va-ds-form .wpa-form-field > label,
.va-ds-form .adverts-field > label,
.va-ds-form label.wpa-form-label {
	letter-spacing: 0.01em;
}

.va-ds-card,
.adverts-item,
.adverts-list-item {
	scroll-margin-top: 120px;
}

.va-ds-badge,
.va-ver-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	line-height: 1.8;
}

@media (prefers-reduced-motion: reduce) {
	.va-ds-form .adverts-button,
	.va-ds-form input[type="submit"],
	.va-ds-form button[type="submit"],
	.va-ds-profile a,
	.author-profile a,
	.atw-author-box a,
	.va-ds-card,
	.va-ds-card * {
		transition: none !important;
	}
}