/**
 * Nzele Button Design System Component
 */

/* Base button */
.nzle-btn,
.qodef-theme-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 32px;
	font-family: var(--nzle-font-body);
	font-size: 0.75rem; /* 12px */
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--nzle-letter-spacing-wide);
	border: 1px solid var(--nzle-black);
	border-radius: 6px;
	background-color: var(--nzle-black);
	color: var(--nzle-white);
	cursor: pointer;
	transition: var(--nzle-transition-default);
	outline: none;
	text-align: center;
	line-height: 1.5;
}

/* Secondary Button / Outline */
.nzle-btn-outline,
.qodef-theme-button.qodef-layout--outline,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: transparent;
	color: var(--nzle-black);
	border: 1px solid var(--nzle-black);
}

/* Hovers */
.nzle-btn:hover,
.qodef-theme-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--nzle-accent);
	border-color: var(--nzle-accent);
	color: var(--nzle-white);
	box-shadow: 0 4px 12px rgba(176, 141, 87, 0.15);
	transform: translateY(-1px);
}

.nzle-btn-outline:hover,
.qodef-theme-button.qodef-layout--outline:hover {
	background-color: var(--nzle-black);
	border-color: var(--nzle-black);
	color: var(--nzle-white);
	box-shadow: none;
	transform: none;
}

/* Accent link button (like a text link button with underline hover) */
.nzle-btn-link {
	display: inline-flex;
	align-items: center;
	font-family: var(--nzle-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--nzle-letter-spacing-wide);
	color: var(--nzle-black);
	position: relative;
	padding-bottom: 4px;
	border: none;
	background: transparent;
}

.nzle-btn-link::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: var(--nzle-accent);
	transform: scaleX(0);
	transform-origin: bottom right;
	transition: transform var(--nzle-transition-duration) var(--nzle-transition-easing);
}

.nzle-btn-link:hover {
	color: var(--nzle-accent);
}

.nzle-btn-link:hover::after {
	transform: scaleX(1);
	transform-origin: bottom left;
}