/* =========================================================
   MODUŁ: Standalone CTA Button [sp_cta]
   ========================================================= */

/* Wrapper dla alignment */
.sp-cta-wrap {
	display: block;
	margin: 1rem 0;
	width: 100%;
}
.sp-cta-wrap--left   { text-align: left; }
.sp-cta-wrap--center { text-align: center; }
.sp-cta-wrap--right  { text-align: right; }

/* =========================================================
   BASE BUTTON
   ========================================================= */
.sp-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	border-radius: 999px;
	font-family: inherit;
	font-weight: 800;
	letter-spacing: .015em;
	text-decoration: none !important;
	white-space: nowrap;
	border: 2px solid transparent;
	cursor: pointer;
	line-height: 1;
	position: relative;
	overflow: hidden;
	transition: transform .25s cubic-bezier(.4,0,.2,1),
	            box-shadow .25s cubic-bezier(.4,0,.2,1),
	            background .2s ease,
	            color .2s ease,
	            border-color .2s ease,
	            filter .2s ease;
	border-bottom: none !important;
	vertical-align: middle;
}
.sp-cta__text { position: relative; z-index: 2; }
.sp-cta__ikona {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 2;
	transition: transform .25s cubic-bezier(.4,0,.2,1);
	flex-shrink: 0;
}
.sp-cta__ikona svg { display: block; width: 100%; height: 100%; }
.sp-cta--icon-right:hover .sp-cta__ikona { transform: translateX(3px); }
.sp-cta--icon-left:hover  .sp-cta__ikona { transform: translateX(-3px); }

/* Shimmer effect */
.sp-cta__shimmer {
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
	transform: translateX(-100%);
	transition: transform .7s cubic-bezier(.4,0,.2,1);
	pointer-events: none;
	border-radius: inherit;
	z-index: 1;
}
.sp-cta--shimmer:hover .sp-cta__shimmer { transform: translateX(100%); }

/* =========================================================
   SIZES
   ========================================================= */
.sp-cta--small  { padding: .55em 1.1em; font-size: 13px; }
.sp-cta--small  .sp-cta__ikona { width: 12px; height: 12px; }

.sp-cta--medium { padding: .85em 1.5em; font-size: 14px; }
.sp-cta--medium .sp-cta__ikona { width: 14px; height: 14px; }

.sp-cta--large  { padding: 1.05em 1.85em; font-size: 15px; }
.sp-cta--large  .sp-cta__ikona { width: 16px; height: 16px; }

.sp-cta--xlarge { padding: 1.25em 2.4em;  font-size: 17px; letter-spacing: .02em; }
.sp-cta--xlarge .sp-cta__ikona { width: 18px; height: 18px; }

/* =========================================================
   STYL: GOLD (default) — gradient + glow
   ========================================================= */
.sp-cta--gold {
	background: linear-gradient(135deg, var(--spcta-gold-od, #D4A017), var(--spcta-gold-do, #E6B844));
	color: var(--spcta-gold-tekst, #1A2540) !important;
	border-color: transparent;
	box-shadow:
		0 12px 30px rgba(212,160,23,.40),
		inset 0 1px 0 rgba(255,255,255,.25);
}
.sp-cta--gold:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 18px 42px rgba(212,160,23,.55);
	filter: brightness(1.05);
	color: var(--spcta-gold-tekst, #1A2540) !important;
}
.sp-cta--gold:active {
	transform: translateY(-1px) scale(1);
	box-shadow: 0 6px 14px rgba(212,160,23,.40);
}

/* =========================================================
   STYL: DARK (granat solidny)
   ========================================================= */
.sp-cta--dark {
	background: var(--spcta-dark-tlo, #1A2540);
	color: var(--spcta-dark-tekst, #FFFFFF) !important;
	border-color: var(--spcta-dark-tlo, #1A2540);
	box-shadow:
		0 10px 26px rgba(26,37,64,.25),
		inset 0 1px 0 rgba(255,255,255,.10);
}
.sp-cta--dark:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 16px 36px rgba(26,37,64,.36);
	filter: brightness(1.1);
	color: var(--spcta-dark-tekst, #FFFFFF) !important;
}
.sp-cta--dark:active {
	transform: translateY(-1px) scale(1);
	box-shadow: 0 5px 12px rgba(26,37,64,.25);
}

/* =========================================================
   STYL: OUTLINE (obwódka, wypełnia się na hover)
   ========================================================= */
.sp-cta--outline {
	background: transparent;
	color: var(--spcta-outline-tekst, #1A2540) !important;
	border-color: var(--spcta-outline-border, #1A2540);
	box-shadow: 0 2px 6px rgba(26,37,64,.04);
}
.sp-cta--outline:hover {
	transform: translateY(-3px);
	background: var(--spcta-outline-hover-tlo, #1A2540);
	color: var(--spcta-outline-hover-tekst, #FFFFFF) !important;
	box-shadow: 0 12px 28px rgba(26,37,64,.18);
}
.sp-cta--outline:active {
	transform: translateY(-1px);
}

/* =========================================================
   STYL: GHOST (sam tekst, hover zmienia kolor)
   ========================================================= */
.sp-cta--ghost {
	background: transparent;
	color: var(--spcta-ghost-tekst, #1A2540) !important;
	border: none;
	box-shadow: none;
	padding-left: .5em;
	padding-right: .5em;
}
.sp-cta--ghost:hover {
	color: var(--spcta-ghost-hover, #D4A017) !important;
	transform: translateY(-1px);
}
.sp-cta--ghost .sp-cta__shimmer { display: none; }

/* =========================================================
   PULSE — delikatna pulsacja przyciągająca uwagę
   ========================================================= */
.sp-cta--pulse {
	animation: sp-cta-pulse 2.8s ease-in-out infinite;
}
@keyframes sp-cta-pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.035);
	}
}
.sp-cta--pulse:hover { animation-play-state: paused; }

/* Pulse + gold ring */
.sp-cta--gold.sp-cta--pulse {
	animation: sp-cta-pulse-gold 2.8s ease-in-out infinite;
}
@keyframes sp-cta-pulse-gold {
	0%, 100% {
		transform: scale(1);
		box-shadow:
			0 12px 30px rgba(212,160,23,.40),
			0 0 0 0 rgba(212,160,23,.45),
			inset 0 1px 0 rgba(255,255,255,.25);
	}
	50% {
		transform: scale(1.035);
		box-shadow:
			0 16px 36px rgba(212,160,23,.50),
			0 0 0 12px rgba(212,160,23,0),
			inset 0 1px 0 rgba(255,255,255,.30);
	}
}

/* Dark + pulse ring (granat) */
.sp-cta--dark.sp-cta--pulse {
	animation: sp-cta-pulse-dark 2.8s ease-in-out infinite;
}
@keyframes sp-cta-pulse-dark {
	0%, 100% {
		transform: scale(1);
		box-shadow:
			0 10px 26px rgba(26,37,64,.25),
			0 0 0 0 rgba(26,37,64,.40),
			inset 0 1px 0 rgba(255,255,255,.10);
	}
	50% {
		transform: scale(1.035);
		box-shadow:
			0 14px 32px rgba(26,37,64,.32),
			0 0 0 10px rgba(26,37,64,0),
			inset 0 1px 0 rgba(255,255,255,.12);
	}
}

/* Accessibility — reduced motion */
@media (prefers-reduced-motion: reduce) {
	.sp-cta--pulse,
	.sp-cta--gold.sp-cta--pulse,
	.sp-cta--dark.sp-cta--pulse {
		animation: none;
	}
	.sp-cta__shimmer { display: none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 600px) {
	.sp-cta--large,
	.sp-cta--xlarge {
		font-size: 14px;
		padding: .9em 1.5em;
	}
	.sp-cta-wrap--center .sp-cta,
	.sp-cta-wrap--left   .sp-cta,
	.sp-cta-wrap--right  .sp-cta {
		max-width: 100%;
		white-space: normal;
		text-align: center;
	}
}