/* Minimal, isolated button styles for classes: .pk-btn, .pk-btn--gradient */

.pk-btn {
	/* Layout */
	display: inline-block;
	padding: 14px 22px;
	border-radius: 12px;
	text-decoration: none;
	text-align: center;
	line-height: 1.2;
	
	/* Typography */
	font-weight: 600;
	font-size: 16px;
	
	/* Colors */
	color: #ffffff;
	background: #6a5acd; /* fallback */
	
	/* Effects */
	box-shadow: 0 8px 20px rgba(58, 99, 255, 0.25);
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
	position: relative;
	overflow: hidden;
}

.pk-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(58, 99, 255, 0.35);
}

.pk-btn:active {
	transform: translateY(0);
	box-shadow: 0 8px 20px rgba(58, 99, 255, 0.28);
}

.pk-btn:focus-visible {
	outline: 3px solid rgba(99, 102, 241, 0.55);
	outline-offset: 2px;
}

/* Gradient with subtle animated shift */
.pk-btn--gradient {
	/* Base: cool blue-teal range */
	background: linear-gradient(135deg, #60a5fa, #22d3ee, #3b82f6);
	background-size: 250% 250%;
	animation: pkGradientShift 9s ease infinite;
}

@keyframes pkGradientShift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* Optional size modifiers */
.pk-btn--sm { padding: 10px 16px; font-size: 14px; border-radius: 10px; }
.pk-btn--lg { padding: 16px 26px; font-size: 18px; border-radius: 14px; }

/* Wider width modifiers */
.pk-btn--wide { padding-left: 44px; padding-right: 44px; }
.pk-btn--xl { padding: 16px 52px; font-size: 18px; border-radius: 14px; }
.pk-btn--xxl { padding: 18px 64px; font-size: 18px; border-radius: 16px; min-width: 320px; }

/* 2x wider than xxl */
.pk-btn--mega { padding: 20px 80px; font-size: 18px; border-radius: 18px; min-width: 640px; }

/* Keep mega reasonable on small screens */
@media (max-width: 480px) {
	.pk-btn--mega { min-width: 100%; padding-left: 20px; padding-right: 20px; }
}

/* Block variant */
.pk-btn--block { display: block; width: 100%; }

/* High-contrast hover filter to enhance "sheen" */
.pk-btn--gradient:hover,
.pk-btn--gradient:active {
	/* On hover/active: shift to green hues */
	background: linear-gradient(135deg, #34d399, #22c55e, #10b981);
	background-size: 200% 200%;
	filter: brightness(1.04) saturate(1.07);
}

/* Reduce motion for users preferring less animation */
@media (prefers-reduced-motion: reduce) {
	.pk-btn--gradient { animation: none; }
}

/* Ensure good contrast on dark backgrounds if nested in WP core button */
.wp-block-button__link.pk-btn { color: #ffffff; }