/* =================================================================
   File:    05-buttons.css
   Purpose: All button variants. Glass primary, ghost, quote, icon.
            All use design tokens so palette changes flow through.
   ================================================================= */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 10px 22px;
	min-height: 44px;
	font-family: inherit;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	line-height: 1.2;
	letter-spacing: 0.01em;
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform var(--dur-fast) var(--ease),
	            background var(--dur) var(--ease),
	            box-shadow var(--dur) var(--ease),
	            color var(--dur-fast) var(--ease);
	white-space: nowrap;
	text-decoration: none;
}
.btn:active { transform: scale(0.97); transition-duration: 100ms; }
.btn:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

.btn-sm { padding: 8px 14px; min-height: 44px; font-size: var(--fs-sm); }
.btn-lg { padding: 14px 28px; min-height: 52px; font-size: var(--fs-base); }
.btn-block { width: 100%; }

/* Primary (solid accent) */
.btn-primary {
	background: var(--c-accent);
	color: #fff;
	box-shadow: 0 6px 16px -6px color-mix(in oklab, var(--c-accent) 60%, transparent);
}
.btn-primary:hover { background: var(--c-accent-2); color: #fff; }

/* Warm (gold) — for "Request Quote" / B2B / sale CTAs */
.btn-warm {
	background: var(--c-warm);
	color: #1A1300;
	box-shadow: 0 6px 16px -6px color-mix(in oklab, var(--c-warm) 60%, transparent);
}
.btn-warm:hover { background: color-mix(in oklab, var(--c-warm) 85%, white); }

/* Glass — translucent over the page */
.btn-glass {
	background: var(--glass-bg);
	border: var(--glass-border);
	color: var(--c-ink);
	-webkit-backdrop-filter: blur(var(--glass-blur-sm));
	backdrop-filter:         blur(var(--glass-blur-sm));
	box-shadow: var(--glass-highlight), 0 4px 14px -6px rgba(15,23,42,0.12);
}
.btn-glass:hover { background: var(--glass-bg-strong); color: var(--c-ink); }

/* Ghost (text + border) */
.btn-ghost {
	background: transparent;
	color: var(--c-ink);
	border-color: var(--c-line);
}
.btn-ghost:hover { background: var(--c-surface-2); }

/* Link-style */
.btn-link {
	background: transparent;
	color: var(--c-accent);
	padding-inline: 0;
	min-height: 0;
	border-radius: 0;
}
.btn-link:hover { color: var(--c-accent-2); }
.btn-link::after {
	content: "→";
	transition: transform var(--dur-fast) var(--ease);
}
[dir="rtl"] .btn-link::after { content: "←"; }
.btn-link:hover::after { transform: translateX(3px); }
[dir="rtl"] .btn-link:hover::after { transform: translateX(-3px); }

/* Icon-only button (used in header) */
.liqui-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	color: var(--c-ink);
	background: transparent;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
	text-decoration: none;
}
.liqui-icon-btn:hover {
	background: var(--glass-bg-strong);
	border-color: var(--c-line);
}
.liqui-icon-btn:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}
.liqui-icon-btn:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
	.btn:hover { transform: translateY(-1px); }
}
.btn:active { transform: scale(0.97); }

/* Cart count badge inside icon button */
.liqui-cart-count {
	position: absolute;
	top: 6px;
	inset-inline-end: 4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--radius-pill);
	background: var(--c-accent);
	color: #fff;
	font-size: 12px;
	font-weight: var(--fw-bold);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* Disabled */
.btn[disabled], .btn.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none !important;
}