/* =========================================================
   SP UNIFIED BUTTONS (v2.22)
   Spójny system przycisków w stylu „Wejdź do Strefy Klienta".
   Ładowany PO wszystkich modułach — nadpisuje ich style.

   Wzorzec referencyjny: .sp-stopka__strefa-btn
   • linear-gradient (gold → gold-jasny)
   • gold glow shadow + inner shine
   • shimmer ::before (refleks świetlny)
   • lift hover (-3px) + scale (1.02)
   • cubic-bezier(.4,0,.2,1) — Apple-smooth
   ========================================================= */

/* ---------- Zmienne brand-tier (z brand.css) ---------- */
:root {
	--spbtn-gold:       var(--sp-zloty, #D4A017);
	--spbtn-gold-light: var(--sp-zloty-jasny, #E6B844);
	--spbtn-navy:       var(--sp-granat, #1A2540);
	--spbtn-cream:      var(--sp-kremowy, #F8F3E0);
	--spbtn-radius:     999px;
	--spbtn-easing:     cubic-bezier(.4, 0, .2, 1);
	--spbtn-shadow-bg:  0 10px 24px rgba(212,160,23,.36);
	--spbtn-shadow-hov: 0 16px 38px rgba(212,160,23,.52);
	--spbtn-shine:      inset 0 1px 0 rgba(255,255,255,.25);
}

/* =========================================================
   PRIMARY CTA — gold gradient + shimmer + lift
   Targety: każdy „główny" przycisk akcji we wtyczce
   ========================================================= */
.sp-stopka__strefa-btn,           /* footer Strefa Klienta — wzorzec */
.sp-menu__cta,                    /* menu — Bezpłatna analiza */
.sp-hr__cta--primary,             /* hero — primary CTA */
.sp-form__cta,                    /* formularz — submit button */
.sp-sk__cta,                      /* sekcja konsultacji — CTA */
.sp-sp__button,                   /* sekcja poradnik — pobierz */
.sp-bl__cta,                      /* bloki — CTA */
.sp-calc__cta-area .sp-calc__cta, /* kalkulator — CTA pod kartami */
.sp-pk__btn {                     /* panel klienta — Zaloguj się */
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	padding: .85em 1.6em;
	background: linear-gradient(135deg, var(--spbtn-gold) 0%, var(--spbtn-gold-light) 100%) !important;
	color: var(--spbtn-navy) !important;
	border: none;
	border-radius: var(--spbtn-radius);
	font-weight: 800;
	letter-spacing: .02em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	line-height: 1.1;
	box-shadow: var(--spbtn-shadow-bg), var(--spbtn-shine);
	transition: transform .25s var(--spbtn-easing),
	            box-shadow .25s var(--spbtn-easing),
	            filter .25s ease;
	border-bottom-style: solid;  /* nadpisz Astry "underlined" links */
}

/* Refleks świetlny — przebiega przy hover */
.sp-stopka__strefa-btn::before,
.sp-menu__cta::before,
.sp-hr__cta--primary::before,
.sp-form__cta::before,
.sp-sk__cta::before,
.sp-sp__button::before,
.sp-bl__cta::before,
.sp-calc__cta-area .sp-calc__cta::before,
.sp-pk__btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg,
		transparent 0%,
		rgba(255,255,255,.42) 50%,
		transparent 100%);
	transform: translateX(-100%);
	transition: transform .7s var(--spbtn-easing);
	pointer-events: none;
	z-index: 1;
}

/* Hover — lift + scale + intensywniejszy glow */
.sp-stopka__strefa-btn:hover,
.sp-menu__cta:hover,
.sp-hr__cta--primary:hover,
.sp-form__cta:hover,
.sp-sk__cta:hover,
.sp-sp__button:hover,
.sp-bl__cta:hover,
.sp-calc__cta-area .sp-calc__cta:hover,
.sp-pk__btn:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: var(--spbtn-shadow-hov), var(--spbtn-shine);
	filter: brightness(1.06);
	color: var(--spbtn-navy) !important;
}

/* Aktywuj refleks przy hover */
.sp-stopka__strefa-btn:hover::before,
.sp-menu__cta:hover::before,
.sp-hr__cta--primary:hover::before,
.sp-form__cta:hover::before,
.sp-sk__cta:hover::before,
.sp-sp__button:hover::before,
.sp-bl__cta:hover::before,
.sp-calc__cta-area .sp-calc__cta:hover::before,
.sp-pk__btn:hover::before {
	transform: translateX(100%);
}

/* Active — przyciśnięcie */
.sp-stopka__strefa-btn:active,
.sp-menu__cta:active,
.sp-hr__cta--primary:active,
.sp-form__cta:active,
.sp-sk__cta:active,
.sp-sp__button:active,
.sp-bl__cta:active,
.sp-calc__cta-area .sp-calc__cta:active,
.sp-pk__btn:active {
	transform: translateY(-1px) scale(1);
	box-shadow: 0 4px 12px rgba(212,160,23,.36);
}

/* SVG ikony wewnątrz */
.sp-stopka__strefa-btn svg,
.sp-menu__cta svg,
.sp-hr__cta--primary svg,
.sp-form__cta svg,
.sp-sk__cta svg,
.sp-sp__button svg,
.sp-calc__cta-area .sp-calc__cta svg,
.sp-pk__btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	position: relative;
	z-index: 2;
	transition: transform .25s var(--spbtn-easing);
}

.sp-stopka__strefa-btn:hover svg,
.sp-menu__cta:hover svg {
	transform: translateX(4px);
}

/* Tekst wewnątrz na wierzchu nad shimmer */
.sp-stopka__strefa-btn > *,
.sp-menu__cta > *,
.sp-hr__cta--primary > *,
.sp-form__cta > *,
.sp-sk__cta > *,
.sp-sp__button > *,
.sp-bl__cta > *,
.sp-calc__cta-area .sp-calc__cta > *,
.sp-pk__btn > * {
	position: relative;
	z-index: 2;
}

/* Disabled state */
.sp-form__cta[disabled],
.sp-pk__btn[disabled],
.sp-menu__cta[disabled] {
	opacity: .65;
	cursor: wait;
	transform: none !important;
	filter: grayscale(.2);
}

/* =========================================================
   GHOST / SECONDARY — outlined gold, dla CTA drugorzędnych
   ========================================================= */
.sp-hr__cta--ghost {
	position: relative;
	overflow: hidden;
	background: rgba(255,255,255,.06) !important;
	color: #FFF !important;
	border: 2px solid rgba(255,255,255,.30) !important;
	backdrop-filter: blur(8px);
	transition: transform .25s var(--spbtn-easing),
	            border-color .25s ease,
	            background .25s ease;
}
.sp-hr__cta--ghost:hover {
	background: rgba(255,255,255,.12) !important;
	border-color: var(--spbtn-gold) !important;
	color: var(--spbtn-gold) !important;
	transform: translateY(-2px);
}

/* =========================================================
   GLASSMORPHIC PILLS (chip-style, jak w stopce)
   Dla utility klasy .sp-pill
   ========================================================= */
.sp-pill {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .55em 1em;
	height: 34px;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(212,160,23,.20);
	border-radius: var(--spbtn-radius);
	color: inherit;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
	backdrop-filter: blur(8px);
	transition: transform .25s var(--spbtn-easing),
	            background .25s ease,
	            border-color .25s ease,
	            box-shadow .25s ease;
}
.sp-pill:hover {
	transform: translateY(-2px);
	background: rgba(255,255,255,.10);
	border-color: rgba(212,160,23,.55);
	box-shadow: 0 6px 18px rgba(212,160,23,.18);
}
.sp-pill-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--spbtn-gold);
	box-shadow: 0 0 0 3px rgba(212,160,23,.22);
	animation: sp-pill-pulse 2.4s ease-in-out infinite;
}
@keyframes sp-pill-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(212,160,23,.22); transform: scale(1); }
	50%      { box-shadow: 0 0 0 7px rgba(212,160,23,.04); transform: scale(1.12); }
}

/* =========================================================
   MENU — wykończenie spójności
   Nav pille (cream→white) zachowują światło, dodajemy
   smooth easing + gold-tinted shadow przy hover
   ========================================================= */
.sp-menu__item {
	transition: transform .25s var(--spbtn-easing),
	            box-shadow .25s var(--spbtn-easing),
	            color .2s ease,
	            border-color .2s ease,
	            background .2s ease !important;
}
.sp-menu__item:hover {
	box-shadow: 0 8px 20px rgba(26,37,64,.10),
	            0 2px 4px rgba(212,160,23,.12) !important;
}

/* Menu CTA: dosunięcie do wzorca primary (font + padding) */
.sp-menu__cta {
	padding: .7em 1.3em !important;
	font-size: var(--sp-menu-cta-font-size, 12px) !important;
	font-weight: 800 !important;
	letter-spacing: .025em !important;
	animation: sp-menu-cta-pulse 2.8s ease-in-out infinite;
}

/* Delikatny puls + ekspandujący glow — żywy „live" rytm
   Pauza przy hover, bo hover ma własne lift+scale */
@keyframes sp-menu-cta-pulse {
	0%, 100% {
		transform: scale(1);
		box-shadow:
			0 10px 24px rgba(212,160,23,.36),
			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 14px 32px rgba(212,160,23,.50),
			0 0 0 10px rgba(212,160,23,0),
			inset 0 1px 0 rgba(255,255,255,.30);
	}
}

/* Wyłącz puls przy hover (lift hover bierze górę) */
.sp-menu__cta:hover {
	animation-play-state: paused;
}

/* Wyłącz puls przy reduced-motion (accessibility) */
@media (prefers-reduced-motion: reduce) {
	.sp-menu__cta {
		animation: none;
	}
}

/* Menu panel button (login/panel) — pełna spójność z chipami */
.sp-menu__panel-btn--pill {
	background: rgba(255,255,255,.85) !important;
	border-color: rgba(26,37,64,.10) !important;
	box-shadow: 0 1px 3px rgba(26,37,64,.04), 0 2px 6px rgba(26,37,64,.03) !important;
	transition: transform .25s var(--spbtn-easing),
	            box-shadow .25s var(--spbtn-easing),
	            color .2s ease,
	            border-color .2s ease !important;
}
.sp-menu__panel-btn--pill:hover {
	transform: translateY(-2px) !important;
	border-color: var(--spbtn-gold) !important;
	color: var(--spbtn-gold) !important;
	box-shadow: 0 6px 14px rgba(26,37,64,.10),
	            0 2px 6px rgba(212,160,23,.18) !important;
}

/* =========================================================
   FORMULARZ — submit button (rozmiar full-width)
   ========================================================= */
.sp-form__cta {
	width: 100%;
	padding: 1em 1.6em;
	font-size: 15px;
}

/* =========================================================
   PANEL KLIENTA — Zaloguj / Zarejestruj
   Nadpisz oryginalny granatowy gradient na gold (spójność z resztą)
   ========================================================= */
.sp-pk__btn {
	padding: 1em 1.6em;
	font-size: 14px;
	letter-spacing: .12em;
	width: 100%;
}

/* =========================================================
   POLISH — wyłącz default border-bottom z motywu Astra
   (Astra dodaje underline do <a>, co psuje pille)
   ========================================================= */
.sp-stopka__strefa-btn,
.sp-menu__cta,
.sp-hr__cta,
.sp-form__cta,
.sp-sk__cta,
.sp-sp__button,
.sp-bl__cta,
.sp-pk__btn,
.sp-pill {
	border-bottom-color: transparent !important;
	text-decoration: none !important;
}

/* =========================================================
   RESPONSIVE — mniejsze przyciski na mobile
   ========================================================= */
@media (max-width: 600px) {
	.sp-stopka__strefa-btn,
	.sp-menu__cta,
	.sp-hr__cta--primary,
	.sp-form__cta,
	.sp-sk__cta,
	.sp-sp__button,
	.sp-bl__cta,
	.sp-calc__cta-area .sp-calc__cta,
	.sp-pk__btn {
		font-size: 14px;
		padding: .85em 1.4em;
	}
}