/* Shared "component" styles reused across section blocks. */

.cp-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--cp-font-body);
	font-weight: 700;
	font-size: 14.5px;
	letter-spacing: 0.03em;
	border-radius: var(--cp-radius-pill);
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease,
		background 0.25s ease, color 0.25s ease;
	border: 1px solid transparent;
	white-space: nowrap;
	box-sizing: border-box;
}

.cp-btn--default {
	padding: 16px 34px;
}

.cp-btn--small {
	padding: 9px 18px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.cp-btn--primary {
	background: linear-gradient(160deg, var(--cp-accent), var(--cp-accent-dark));
	color: var(--cp-accent-ink);
	box-shadow: var(--cp-shadow-glow);
}

.cp-btn--primary:hover,
.cp-btn--primary:focus-visible {
	color: var(--cp-accent-ink);
	transform: translateY(-2px);
	box-shadow: 0 12px 42px rgba(88, 211, 107, 0.42);
}

.cp-btn--outline {
	border-color: rgba(255, 255, 255, 0.14);
	color: var(--cp-text);
	background: transparent;
}

.cp-btn--outline:hover,
.cp-btn--outline:focus-visible {
	color: var(--cp-text);
	border-color: var(--cp-accent-border);
	background: rgba(88, 211, 107, 0.06);
}

.cp-btn--outline.cp-btn--small {
	border-color: var(--cp-accent-border);
	color: var(--cp-accent);
}

.cp-btn--outline.cp-btn--small:hover,
.cp-btn--outline.cp-btn--small:focus-visible {
	background: var(--cp-accent);
	color: var(--cp-accent-ink);
}

.cp-btn--text {
	padding: 0;
	color: var(--cp-accent);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	border: none;
	background: transparent;
	box-shadow: none;
}

.cp-btn--text:hover,
.cp-btn--text:focus-visible {
	color: var(--cp-accent-bright);
	transform: none;
}

.cp-btn__arrow {
	color: inherit;
	display: flex;
	transition: transform 0.25s ease;
}

.cp-btn:hover .cp-btn__arrow {
	transform: translateX(3px);
}

@media (max-width: 480px) {
	.cp-btn--default {
		padding: 14px 26px;
		font-size: 13.5px;
	}
}

/* WooCommerce's own AJAX add-to-cart script toggles these two classes on the
   button itself — .loading while the request is in flight, .added on success. */

.cp-btn.loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

/* WooCommerce's own core CSS (.woocommerce a.button.loading::after — 3
   classes + 2 elements) still beats this on `content` and `top` specifically
   when body carries the .woocommerce class, since neither property is
   guarded here — leaving a hybrid where WC's off-center position wins but
   our circle shape (border/width/height/margin, which WC never sets) still
   renders. Force the two contested properties so this shape is always the
   one both drawn AND positioned. */
.cp-btn.loading::after {
	content: "" !important;
	position: absolute;
	top: 50% !important;
	right: auto !important;
	left: 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: var(--cp-text);
	border-radius: 50%;
	animation: cp-btn-spin 0.6s linear infinite;
}

.cp-btn.added {
	background: var(--cp-accent) !important;
	border-color: var(--cp-accent) !important;
	color: var(--cp-accent-ink) !important;
}

@keyframes cp-btn-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cp-btn.loading::after {
		animation-duration: 1.5s;
	}
}