/**
 * WapuCommerce — Empty States Component
 * ──────────────────────────────────────────────────────────────
 * Estados vacíos: cuando no hay datos que mostrar.
 * Estructura base compartida: flex column centered, text-center.
 * Gap, padding, fondo y min-height son específicos de cada contexto
 * y viven aquí (no en los CSS de sección) para que el componente
 * controle todas las decisiones — mismo pattern que cards y list-items.
 *
 * Variantes para HTML nuevo:
 *   (base)       default (padding medio, gap 12px, sin caja)
 *   --boxed      fondo + dashed border para listas vacías contenidas
 *   --hero       min-height 60vh para empty states de pantalla completa
 *   --compact    flex:1 para paneles/modales pequeños
 *
 * EXCLUIDO: .wapu-my-address__empty — es solo texto placeholder
 * (color + margin), no un contenedor empty-state.
 *
 * Sub-elementos (__empty-icon, __empty-text, __empty-btn, __empty-title,
 * __empty-hint) se mantienen en sus archivos de sección porque son
 * específicos de cada contexto visual.
 *
 * Este archivo carga DESPUÉS de los CSS de sección para ganar cascade.
 *
 * @since 3.0.0
 */


/* ═══════════════════════════════════════════════════════════
 *  BASE — estructura flex compartida
 *  search__empty no tenía flex originalmente pero sus children
 *  (h* + p con margin) hacen block flow natural que se comporta
 *  idéntico bajo flex column.
 * ═══════════════════════════════════════════════════════════ */

.wapu-empty-state,
.wapu-account-orders__empty,
.wapu-downloads__empty,
.wapu-mini-cart__empty,
.wapu-cart--empty,
.wapu-search__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}


/* ═══════════════════════════════════════════════════════════
 *  VARIANTES para HTML nuevo que use .wapu-empty-state
 *  Los legacy conservan sus props específicas más abajo.
 * ═══════════════════════════════════════════════════════════ */

.wapu-empty-state {
	gap: var(--ds-s-3);                    /* 12px */
	padding: var(--ds-s-5) var(--ds-s-4);  /* 24px / 16px */
	color: var(--ds-ink-3);
}

.wapu-empty-state--boxed {
	background: var(--ds-surface-2);
	border: 1px dashed var(--ds-line-strong);
	border-radius: var(--ds-r-md);
}

.wapu-empty-state--hero {
	min-height: 60vh;
	padding: var(--ds-s-6) var(--ds-s-4);  /* 32px / 16px */
}

.wapu-empty-state--compact {
	flex: 1;
	padding: var(--ds-s-4) var(--ds-s-3);  /* 16px / 12px */
}


/* ═══════════════════════════════════════════════════════════
 *  LEGACY-SPECIFIC
 *  Props únicas de cada contexto, copiadas verbatim desde los
 *  archivos de sección. Viven aquí para que el componente sea
 *  self-contained — mismo pattern que las padding overrides en
 *  components-cards.css.
 * ═══════════════════════════════════════════════════════════ */

.wapu-account-orders__empty {
	background: var(--ds-surface-2);
	border: 1px dashed #d7deea;
	border-radius: 14px;
	gap: 12px;
	padding: 24px;
}

.wapu-downloads__empty {
	gap: 16px;
	padding: 48px 24px;
}

.wapu-mini-cart__empty {
	flex: 1;
	gap: 12px;
	padding: 40px 20px;
	color: var(--wapu-text-muted);
}

.wapu-cart--empty {
	min-height: 60vh;
	gap: 16px;
}

.wapu-search__empty {
	padding: 48px 24px 32px;
}

@media (max-width: 768px) {
	.wapu-search__empty {
		padding: 32px 16px 24px;
	}
}