/**
 * WapuCommerce — Button Component System
 * ──────────────────────────────────────────────────────────────
 * Unifica 13+ variantes legacy de botón bajo 3 bases semánticas:
 *
 *   .wapu-btn--primary   → CTA principal (oscuro, solid)
 *   .wapu-btn--secondary → acciones alternas (outline)
 *   .wapu-btn--ghost     → acciones terciarias (sin bg)
 *
 * Tamaños: .wapu-btn--sm, (default), .wapu-btn--lg
 *
 * IMPORTANTE: Este archivo se carga AL FINAL del stack CSS para
 * que gane en la cascade a los estilos específicos viejos sin
 * tener que editar HTML de los templates.
 *
 * Los selectores legacy (.checkout-button, .wapu-single__add-btn,
 * etc.) heredan el estilo compartiendo el selector. Si una clase
 * legacy NO aparece aquí, mantiene su estilo original.
 *
 * @since 3.0.0
 */


/* ═══════════════════════════════════════════════════════════
 *  BASE PRIMARY — CTA principal del theme
 * ═══════════════════════════════════════════════════════════ */

.wapu-btn--primary,
.wapu-archive__collections-btn,
.wapu-account__btn-primary,
.wapu-account-orders__empty-btn,
.wapu-downloads__download-btn,
.wapu-downloads__empty-btn,
.wapu-edit-account__save-btn,
.wapu-edit-address__save-btn,
.wapu-cart-edit-modal__btn--primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ds-s-2);
	padding: var(--ds-s-3) var(--ds-s-5);
	border-radius: var(--ds-r-pill);
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-14);
	font-weight: 600;
	letter-spacing: var(--ds-ls-tight);
	line-height: 1;
	border: none;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	user-select: none;
	background: var(--ds-accent);
	color: var(--ds-surface);
	transition: opacity var(--ds-dur) var(--ds-ease),
	            transform var(--ds-dur) var(--ds-ease);
}

.wapu-btn--primary:hover:not(:disabled),
.wapu-archive__collections-btn:hover:not(:disabled),
.wapu-account__btn-primary:hover:not(:disabled),
.wapu-account-orders__empty-btn:hover:not(:disabled),
.wapu-downloads__download-btn:hover:not(:disabled),
.wapu-downloads__empty-btn:hover:not(:disabled),
.wapu-edit-account__save-btn:hover:not(:disabled),
.wapu-edit-address__save-btn:hover:not(:disabled),
.wapu-cart-edit-modal__btn--primary:hover:not(:disabled) {
	opacity: 0.88;
}

.wapu-btn--primary:active:not(:disabled),
.wapu-archive__collections-btn:active:not(:disabled),
.wapu-account__btn-primary:active:not(:disabled) {
	transform: scale(0.97);
}


/* ═══════════════════════════════════════════════════════════
 *  ACTION — botón azul de CTAs de commerce
 *  Usado en: add-to-cart (single product), proceder al pago,
 *  place order, aplicar cupón.
 *  NO responde al drop: consistente siempre para preservar la
 *  identidad del checkout a través de cualquier drop activo.
 *  El radius sí puede responder al drop (vía --ds-r-pill que no
 *  está tocado por el bridge, pero si se decidiera tokenizar se
 *  tomaría desde --ds-r-* ya regidos por el drops bridge).
 * ═══════════════════════════════════════════════════════════ */

.wapu-btn--action,
.checkout-button,
.wapu-single__add-btn,
.single_add_to_cart_button,
#place_order,
.wapu-coupon__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ds-s-2);
	padding: var(--ds-s-3) var(--ds-s-5);
	border-radius: var(--ds-r-pill);
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-14);
	font-weight: 600;
	letter-spacing: var(--ds-ls-tight);
	line-height: 1;
	border: none;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	user-select: none;
	background: var(--ds-action);
	color: var(--ds-surface);
	transition: background var(--ds-dur) var(--ds-ease),
	            transform var(--ds-dur) var(--ds-ease);
}

.wapu-btn--action:hover:not(:disabled),
.checkout-button:hover:not(:disabled),
.wapu-single__add-btn:hover:not(:disabled),
.single_add_to_cart_button:hover:not(:disabled),
#place_order:hover:not(:disabled),
.wapu-coupon__btn:hover:not(:disabled) {
	background: var(--ds-action-hover);
}

.wapu-btn--action:active:not(:disabled),
.checkout-button:active:not(:disabled),
.wapu-single__add-btn:active:not(:disabled),
.single_add_to_cart_button:active:not(:disabled),
#place_order:active:not(:disabled),
.wapu-coupon__btn:active:not(:disabled) {
	background: var(--ds-action-deep);
	transform: scale(0.97);
}


/* ═══════════════════════════════════════════════════════════
 *  BASE SECONDARY — outline / alt actions
 * ═══════════════════════════════════════════════════════════ */

.wapu-btn--secondary,
.wapu-archive__sort-btn,
.wapu-account__btn-secondary,
.wapu-cart-form__update-btn,
.wapu-account-orders__page-btn,
.wapu-cart-edit-modal__btn--ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ds-s-2);
	padding: var(--ds-s-3) var(--ds-s-5);
	border-radius: var(--ds-r-pill);
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-14);
	font-weight: 500;
	letter-spacing: var(--ds-ls-tight);
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	user-select: none;
	background: transparent;
	color: var(--ds-ink);
	border: 0.5px solid var(--ds-line-strong);
	transition: background var(--ds-dur) var(--ds-ease),
	            border-color var(--ds-dur) var(--ds-ease);
}

.wapu-btn--secondary:hover:not(:disabled),
.wapu-archive__sort-btn:hover:not(:disabled),
.wapu-account__btn-secondary:hover:not(:disabled),
.wapu-cart-form__update-btn:hover:not(:disabled),
.wapu-account-orders__page-btn:hover:not(:disabled),
.wapu-cart-edit-modal__btn--ghost:hover:not(:disabled) {
	background: var(--ds-surface-3);
	border-color: var(--ds-ink-4);
}


/* ═══════════════════════════════════════════════════════════
 *  BASE GHOST — acciones terciarias sin background
 * ═══════════════════════════════════════════════════════════ */

.wapu-btn--ghost,
.wapu-my-address__add-btn,
.wapu-account-orders__mobile-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ds-s-2);
	padding: var(--ds-s-3) var(--ds-s-4);
	border-radius: var(--ds-r-pill);
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-14);
	font-weight: 500;
	letter-spacing: var(--ds-ls-tight);
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	user-select: none;
	background: transparent;
	color: var(--ds-ink);
	border: none;
	transition: background var(--ds-dur) var(--ds-ease);
}

.wapu-btn--ghost:hover:not(:disabled),
.wapu-my-address__add-btn:hover:not(:disabled),
.wapu-account-orders__mobile-cta:hover:not(:disabled) {
	background: var(--ds-surface-3);
}


/* ═══════════════════════════════════════════════════════════
 *  SIZES — aplican encima de cualquier variante
 * ═══════════════════════════════════════════════════════════ */

.wapu-btn--sm,
.wapu-downloads__download-btn,
.wapu-account-orders__page-btn {
	padding: var(--ds-s-2) var(--ds-s-4);
	font-size: var(--ds-fs-13);
}

.wapu-btn--lg,
.wapu-single__add-btn,
.single_add_to_cart_button,
.checkout-button,
.wapu-archive__collections-btn {
	padding: var(--ds-s-4) var(--ds-s-6);
	font-size: var(--ds-fs-15);
	font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════
 *  STATES — disabled, focus universales
 * ═══════════════════════════════════════════════════════════ */

.wapu-btn:disabled,
.checkout-button:disabled,
.wapu-single__add-btn:disabled,
.single_add_to_cart_button:disabled,
#place_order:disabled,
.wapu-coupon__btn:disabled,
.wapu-archive__collections-btn:disabled,
.wapu-account__btn-primary:disabled,
.wapu-downloads__download-btn:disabled,
.wapu-edit-account__save-btn:disabled,
.wapu-edit-address__save-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none !important;
}

.wapu-btn:focus-visible,
.checkout-button:focus-visible,
.wapu-single__add-btn:focus-visible,
.single_add_to_cart_button:focus-visible,
#place_order:focus-visible,
.wapu-coupon__btn:focus-visible,
.wapu-archive__collections-btn:focus-visible,
.wapu-archive__sort-btn:focus-visible,
.wapu-account__btn-primary:focus-visible,
.wapu-account__btn-secondary:focus-visible,
.wapu-downloads__download-btn:focus-visible,
.wapu-edit-account__save-btn:focus-visible,
.wapu-edit-address__save-btn:focus-visible,
.wapu-my-address__add-btn:focus-visible {
	outline: 2px solid var(--ds-action);
	outline-offset: 2px;
}