/**
 * VN Button Design System — shared CTA + icon controls.
 */

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
.vn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	min-height: var(--vn-button-height-md);
	padding-inline: var(--vn-button-padding-x);

	border: 1px solid transparent;
	border-radius: var(--vn-button-radius);

	font-family: inherit;
	font-size: var(--vn-button-font-size);
	font-weight: var(--vn-button-font-weight);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;

	cursor: pointer;
	user-select: none;

	transition: var(--vn-button-transition);
}

.vn-btn--block {
	width: 100%;
}

/* --------------------------------------------------------------------------
   Variants
   -------------------------------------------------------------------------- */
.vn-btn--primary {
	color: var(--vn-color-on-primary);
	background-color: var(--vn-color-primary);
	border-color: var(--vn-color-primary);
}

.vn-btn--primary:hover,
.vn-btn--primary:focus-visible {
	color: var(--vn-color-on-primary-hover);
	background-color: var(--vn-color-primary-hover);
	border-color: var(--vn-color-primary-hover);
}

.vn-btn--primary:active {
	color: var(--vn-color-on-primary-hover);
	background-color: var(--vn-color-primary-active);
	border-color: var(--vn-color-primary-active);
	transform: translateY(1px);
}

.vn-btn--outline {
	color: var(--vn-color-primary);
	background-color: transparent;
	border-color: var(--vn-color-primary);
}

.vn-btn--outline:hover,
.vn-btn--outline:focus-visible {
	color: var(--vn-color-on-primary-hover);
	background-color: var(--vn-color-primary-hover);
	border-color: var(--vn-color-primary-hover);
}

.vn-btn--outline:active {
	color: var(--vn-color-on-primary-hover);
	background-color: var(--vn-color-primary-active);
	border-color: var(--vn-color-primary-active);
	transform: translateY(1px);
}

.vn-btn--ghost {
	color: var(--vn-color-primary);
	background-color: transparent;
	border-color: transparent;
}

.vn-btn--ghost:hover,
.vn-btn--ghost:focus-visible {
	color: var(--vn-color-on-primary-hover);
	background-color: rgba(126, 211, 33, 0.18);
}

/* --------------------------------------------------------------------------
   Sizes
   -------------------------------------------------------------------------- */
.vn-btn--sm {
	min-height: var(--vn-button-height-sm);
	padding-inline: 16px;
	font-size: 13px;
}

.vn-btn--md {
	min-height: var(--vn-button-height-md);
}

.vn-btn--lg {
	min-height: var(--vn-button-height-lg);
	padding-inline: 28px;
	font-size: 15px;
}

/* --------------------------------------------------------------------------
   Icon button
   -------------------------------------------------------------------------- */
.vn-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 42px;
	height: 42px;
	padding: 0;

	color: var(--vn-color-primary);
	background: #ffffff;
	border: 1px solid rgba(36, 88, 36, 0.25);
	border-radius: var(--vn-button-radius);

	cursor: pointer;
	transition: var(--vn-button-transition);
}

.vn-icon-btn svg {
	fill: currentColor;
	stroke: currentColor;
}

.vn-icon-btn:hover,
.vn-icon-btn:focus-visible {
	color: var(--vn-color-on-primary-hover);
	background: var(--vn-color-primary-hover);
	border-color: var(--vn-color-primary-hover);
}

.vn-icon-btn.is-active,
.vn-icon-btn.is-wished,
.vn-icon-btn[aria-pressed="true"] {
	color: var(--vn-color-on-primary);
	background: var(--vn-color-primary);
	border-color: var(--vn-color-primary);
}

.vn-icon-btn.is-active:hover,
.vn-icon-btn.is-wished:hover,
.vn-icon-btn[aria-pressed="true"]:hover {
	color: var(--vn-color-on-primary-hover);
	background: var(--vn-color-primary-hover);
	border-color: var(--vn-color-primary-hover);
}

/* Wishlist on product cards — smaller circular control */
.vn-icon-btn--wish {
	width: 32px;
	height: 32px;
	border-radius: 50%;
}

/* --------------------------------------------------------------------------
   Focus, disabled, loading
   -------------------------------------------------------------------------- */
.vn-btn:focus-visible,
.vn-icon-btn:focus-visible {
	outline: 3px solid var(--vn-focus-ring);
	outline-offset: 2px;
}

.vn-btn:disabled,
.vn-btn[aria-disabled="true"],
.vn-btn.is-disabled,
.vn-icon-btn:disabled {
	color: var(--vn-color-button-disabled-text);
	background-color: var(--vn-color-button-disabled);
	border-color: var(--vn-color-button-disabled);
	cursor: not-allowed;
	pointer-events: none;
	opacity: 1;
}

.vn-btn.is-loading {
	position: relative;
	cursor: wait;
}

.vn-btn.is-loading > * {
	opacity: 0;
}

/* Card add-to-cart feedback states */
.vn-product-card__cart.is-success {
	color: var(--vn-color-on-primary);
	background-color: var(--vn-color-primary-active);
	border-color: var(--vn-color-primary-active);
}

.vn-product-card__cart.is-error {
	color: var(--vn-color-on-primary);
	background-color: #b45309;
	border-color: #b45309;
}

.vn-icon-btn--muted {
	color: #888f88;
	background: transparent;
	border-color: transparent;
}

.vn-icon-btn--muted:hover,
.vn-icon-btn--muted:focus-visible {
	color: var(--vn-color-primary);
	background: rgba(126, 211, 33, 0.18);
	border-color: transparent;
}

.vn-btn--buy-now {
	font-weight: 700;
	letter-spacing: 0.03em;
}

/* --------------------------------------------------------------------------
   Legacy selector mapping (same tokens, no duplicate color blocks)
   -------------------------------------------------------------------------- */
.vn-btn--primary,
.vn-product-card__cart,
.vn-product-card__add-btn,
.vn-price-filter__submit,
.vn-product-action--cart,
.vn-product-action--buy-now,
.vn-wishlist-item__cart,
.vn-wishlist-drawer__view-all,
.vn-button--primary,
.vn-cart-drawer__btn--primary,
.vn-newsletter__btn,
.vn-product-review-form__submit,
.vn-product-review-form input[type="submit"],
body.woocommerce-cart .button,
body.woocommerce-cart button.button,
body.woocommerce-cart input.button,
body.woocommerce-checkout .button,
body.woocommerce-checkout button.button,
body.woocommerce-checkout input.button,
body.woocommerce-checkout #place_order,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	color: var(--vn-color-on-primary);
	background-color: var(--vn-color-primary);
	border: 1px solid var(--vn-color-primary);
	border-radius: var(--vn-button-radius);
	font-family: inherit;
	font-weight: var(--vn-button-font-weight);
	cursor: pointer;
	transition: var(--vn-button-transition);
	text-decoration: none;
}

.vn-btn--primary:hover,
.vn-btn--primary:focus-visible,
.vn-product-card__cart:hover,
.vn-product-card__cart:focus-visible,
.vn-product-card__add-btn:hover,
.vn-product-card__add-btn:focus-visible,
.vn-price-filter__submit:hover,
.vn-price-filter__submit:focus-visible,
.vn-product-action--cart:hover,
.vn-product-action--cart:focus-visible,
.vn-product-action--buy-now:hover,
.vn-product-action--buy-now:focus-visible,
.vn-wishlist-item__cart:hover,
.vn-wishlist-item__cart:focus-visible,
.vn-wishlist-drawer__view-all:hover,
.vn-wishlist-drawer__view-all:focus-visible,
.vn-button--primary:hover,
.vn-button--primary:focus-visible,
.vn-cart-drawer__btn--primary:hover,
.vn-cart-drawer__btn--primary:focus-visible,
.vn-newsletter__btn:hover,
.vn-newsletter__btn:focus-visible,
.vn-product-review-form__submit:hover,
.vn-product-review-form__submit:focus-visible,
.vn-product-review-form input[type="submit"]:hover,
.vn-product-review-form input[type="submit"]:focus-visible,
body.woocommerce-cart .button:hover,
body.woocommerce-cart button.button:hover,
body.woocommerce-cart input.button:hover,
body.woocommerce-checkout .button:hover,
body.woocommerce-checkout button.button:hover,
body.woocommerce-checkout input.button:hover,
body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout #place_order:focus-visible,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus-visible {
	color: var(--vn-color-on-primary-hover);
	background-color: var(--vn-color-primary-hover);
	border-color: var(--vn-color-primary-hover);
}

.vn-btn--primary:active,
.vn-product-card__cart:active,
.vn-product-card__add-btn:active,
.vn-price-filter__submit:active,
.vn-product-action--cart:active,
.vn-product-action--buy-now:active,
.vn-wishlist-item__cart:active,
.vn-wishlist-drawer__view-all:active,
.vn-button--primary:active,
.vn-cart-drawer__btn--primary:active,
.vn-newsletter__btn:active,
body.woocommerce-checkout #place_order:active,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:active {
	color: var(--vn-color-on-primary-hover);
	background-color: var(--vn-color-primary-active);
	border-color: var(--vn-color-primary-active);
	transform: translateY(1px);
}

.vn-btn--outline,
.vn-cart-drawer__btn--secondary,
.btn-outline {
	color: var(--vn-color-primary);
	background-color: transparent;
	border: 1px solid var(--vn-color-primary);
}

.vn-btn--outline:hover,
.vn-btn--outline:focus-visible,
.vn-cart-drawer__btn--secondary:hover,
.vn-cart-drawer__btn--secondary:focus-visible,
.btn-outline:hover,
.btn-outline:focus-visible {
	color: var(--vn-color-on-primary-hover);
	background-color: var(--vn-color-primary-hover);
	border-color: var(--vn-color-primary-hover);
}

/* Homepage / brand legacy primary */
.btn-primary {
	color: var(--vn-color-on-primary);
	background-color: var(--vn-color-primary);
	border: 2px solid var(--vn-color-primary);
}

.btn-primary:hover,
.btn-primary:focus-visible {
	color: var(--vn-color-on-primary-hover);
	background-color: var(--vn-color-primary-hover);
	border-color: var(--vn-color-primary-hover);
}

/* Icon legacy mapping */
.vn-icon-btn,
.vn-product-card__view-btn,
.vn-wishlist-drawer__close,
.vn-wishlist-item__remove,
.vn-cart-drawer__close,
.vn-cart-item__remove,
.vn-product-detail__wishlist,
.vn-product-card__wish {
	color: var(--vn-color-primary);
}

.vn-product-card__view-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: #ffffff;
	border: 1px solid rgba(36, 88, 36, 0.25);
	border-radius: var(--vn-button-radius);
	transition: var(--vn-button-transition);
}

.vn-product-card__view-btn svg {
	fill: currentColor;
	stroke: currentColor;
}

.vn-product-card__view-btn:hover,
.vn-product-card__view-btn:focus-visible {
	color: var(--vn-color-on-primary-hover);
	background: var(--vn-color-primary-hover);
	border-color: var(--vn-color-primary-hover);
}