/* ============================================================
   Joybunch — Buttons (5 variants × 7 states × 4 sizes)
   element 5
   References tokens. Includes WC compatibility selectors.
   ============================================================ */

/* ---------- Base ---------- */
.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-page #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--joy-space-sm);
	font-family: var(--joy-font-body);
	font-size: var(--joy-text-md);
	font-weight: 600;
	line-height: 1.2;
	border-radius: var(--joy-radius-pill);
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	min-height: var(--height-button-md);
	padding: 12px 20px;
	color: var(--color-text-primary);
	transition: background var(--dur-fast) var(--ease),
	            color var(--dur-fast) var(--ease),
	            box-shadow var(--dur-fast) var(--ease),
	            transform var(--dur-fast) var(--ease),
	            border-color var(--dur-fast) var(--ease);
}

/* Sizes */
.btn-sm  { padding: 8px 16px;  min-height: var(--height-button-sm); font-size: var(--joy-text-base); }
.btn-lg  { padding: 14px 28px; min-height: var(--height-button-lg); font-size: var(--joy-text-lg); }
.btn-xl  { padding: 16px 32px; min-height: var(--height-button-xl); font-size: var(--joy-text-lg); }

/* Block / full width */
.btn-block { display: flex; width: 100%; }

/* ---------- Primary (coral pill) ---------- */
.btn-primary,
.button.alt,
.single_add_to_cart_button,
.checkout-button,
.woocommerce-page #place_order {
	background: var(--color-brand-primary);
	color: var(--color-brand-on-primary);
	box-shadow: var(--joy-shadow-coral);
}
.btn-primary:hover,
.button.alt:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
.woocommerce-page #place_order:hover {
	background: var(--joy-coral-dark);
	box-shadow: 0 12px 28px rgba(255, 107, 107, 0.45);
	transform: translateY(-2px);
	color: var(--color-brand-on-primary);
}
.btn-primary:active,
.button.alt:active,
.single_add_to_cart_button:active,
.checkout-button:active {
	background: var(--joy-coral-dark);
	transform: translateY(0);
	box-shadow: 0 4px 8px rgba(255, 107, 107, 0.35);
}
.btn-primary:focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 3px;
}
.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
	background: var(--joy-coral-soft);
	box-shadow: none;
	transform: none;
	cursor: not-allowed;
	pointer-events: none;
	opacity: var(--op-disabled);
}

/* Loading state — keeps button width, swaps label for spinner */
.btn-primary.is-loading {
	color: transparent;
	pointer-events: none;
	cursor: wait;
	position: relative;
}
.btn-primary.is-loading::after {
	content: '';
	position: absolute;
	left: 50%; top: 50%;
	width: 18px; height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: white;
	border-radius: 50%;
	animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Success state — joyful overshoot bounce */
.btn-primary.is-success {
	background: var(--joy-success);
	box-shadow: 0 8px 20px rgba(63, 142, 95, 0.30);
	animation: btn-success-bounce var(--dur-base) var(--ease-bounce);
}
@keyframes btn-success-bounce {
	0%   { transform: scale(1); }
	30%  { transform: scale(1.04); }
	100% { transform: scale(1); }
}

/* ---------- Secondary (graphite outline) ---------- */
.btn-secondary {
	background: transparent;
	color: var(--joy-graphite);
	border-color: var(--joy-graphite);
	box-shadow: none;
}
.btn-secondary:hover {
	background: var(--joy-graphite);
	color: var(--joy-white);
}
.btn-secondary:active {
	background: var(--joy-graphite);
	color: var(--joy-white);
	transform: translateY(0);
}
.btn-secondary:focus-visible {
	border-color: var(--color-focus-ring);
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 3px;
}
.btn-secondary:disabled {
	color: var(--joy-gray);
	border-color: var(--joy-gray-light);
	cursor: not-allowed;
	opacity: var(--op-disabled);
}

/* ---------- Ghost (low-emphasis link-style emphasis) ---------- */
.btn-ghost {
	background: transparent;
	color: var(--joy-coral-dark);
	border-color: transparent;
	padding: 8px 12px;
	min-height: var(--height-button-sm);
	box-shadow: none;
}
.btn-ghost:hover { color: var(--joy-coral); background: var(--joy-coral-bg); }
.btn-ghost:active { background: #FFE5E0; }
.btn-ghost:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.btn-ghost:disabled { color: var(--joy-gray); cursor: not-allowed; opacity: var(--op-disabled); }

/* ---------- Link button (text-only inline) ---------- */
.btn-link {
	background: transparent;
	color: var(--joy-coral-dark);
	padding: 0;
	border: none;
	border-radius: 0;
	min-height: auto;
	font-weight: 500;
	box-shadow: none;
}
.btn-link:hover { color: var(--joy-coral); text-decoration: underline; text-underline-offset: 3px; }
.btn-link:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--joy-radius-sm); }

/* ---------- Icon disc (kit signature beige round button) ---------- */
.btn-disc {
	width: 40px; height: 40px;
	min-width: 40px; min-height: 40px;
	padding: 0;
	border-radius: 50%;
	background: var(--color-brand-warm);
	color: var(--joy-graphite);
	border: 2px solid transparent;
	box-shadow: none;
}
.btn-disc:hover { transform: scale(1.06); background: #DEC78A; }
.btn-disc:active { transform: scale(0.98); }
.btn-disc:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; }
.btn-disc:disabled { background: var(--joy-gray-light); color: var(--joy-gray); cursor: not-allowed; }
.btn-disc-lg { width: 64px; height: 64px; min-width: 64px; min-height: 64px; }
.btn-disc-xl { width: 80px; height: 80px; min-width: 80px; min-height: 80px; }
.btn-disc-coral {
	background: var(--joy-coral);
	color: var(--joy-white);
}
.btn-disc-coral:hover { background: var(--joy-coral-dark); }

/* ---------- Disabled rules apply across variants ---------- */
.btn[aria-disabled="true"] { pointer-events: none; }

/* ---------- Reduced motion override (extra safety) ---------- */
@media (prefers-reduced-motion: reduce) {
	.btn-primary.is-loading::after { animation: none; }
	.btn-primary.is-success { animation: none; }
}