/* =========================================================
   MODUŁ: Panel Klienta
   ========================================================= */

.sp-pk {
	--sppk-font:        'Inter', sans-serif;
	--sppk-size-label:  13px;
	--sppk-size-tytul:  36px;
	--sppk-size-opis:   16px;
	--sppk-max-width:   1100px;
	--sppk-pad-y:       80px;
	--sppk-pad-x:       32px;
	--sppk-sec-radius:  0px;
	--sppk-form-radius: 24px;
	--sppk-karta-radius:16px;
	--sppk-bg:          #F8F3E0;
	--sppk-label:       #D4A017;
	--sppk-tytul:       #1A2540;
	--sppk-opis:        #3A3A3A;
	--sppk-form-bg:     #FFFFFF;
	--sppk-input-bg:    #F8F3E0;
	--sppk-input-border:#E8DFCB;
	--sppk-input-focus: #D4A017;
	--sppk-btn-bg:      #D4A017;
	--sppk-btn-text:    #FFFFFF;
	--sppk-karta-bg:    #FFFFFF;
	--sppk-karta-ik-bg: #1A2540;
	--sppk-karta-ik:    #D4A017;
	--sppk-karta-tytul: #1A2540;
	--sppk-karta-opis:  #5A5A5A;
	--sppk-logout-bg:   #E0E0E0;
	--sppk-logout-text: #1A2540;

	font-family: var(--sppk-font);
	background: var(--sppk-bg);
	padding: var(--sppk-pad-y) var(--sppk-pad-x);
	border-radius: var(--sppk-sec-radius);
	color: var(--sppk-opis);
}
.sp-pk * { box-sizing: border-box; }

.sp-pk--w-full {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.sp-pk--w-container {
	width: 100%;
	max-width: var(--sppk-max-width);
	margin-left: auto;
	margin-right: auto;
}

.sp-pk__inner {
	max-width: var(--sppk-max-width);
	margin: 0 auto;
	width: 100%;
}

/* ===== HEAD ===== */
.sp-pk__head { text-align: center; margin-bottom: 2.5rem; }
.sp-pk__head--logged {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	text-align: left;
	gap: 2rem;
	flex-wrap: wrap;
}
.sp-pk__head--logged .sp-pk__head-text { flex: 1; min-width: 280px; }

.sp-pk__label {
	font-size: var(--sppk-size-label);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sppk-label);
	margin: 0 0 1rem;
}
.sp-pk__tytul {
	font-size: var(--sppk-size-tytul);
	font-weight: 800;
	color: var(--sppk-tytul);
	line-height: 1.15;
	letter-spacing: -.01em;
	margin: 0 0 .85rem;
}
.sp-pk__tytul em {
	font-style: italic;
	font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
	font-weight: 600;
	color: var(--sppk-label);
}
.sp-pk__opis {
	font-size: var(--sppk-size-opis);
	line-height: 1.6;
	color: var(--sppk-opis);
	margin: 0;
	max-width: 680px;
}

/* =========================================================
   FORMULARZ LOGOWANIA (modernizacja w stylu screenu)
   ========================================================= */
.sp-pk__form-card {
	background: var(--sppk-form-bg);
	border-radius: var(--sppk-form-radius);
	padding: 2.5rem 2.5rem 2rem;
	max-width: 520px;
	margin: 0 auto;
	box-shadow: 0 30px 80px rgba(26,37,64,.12), 0 6px 16px rgba(26,37,64,.05);
	border: 1px solid rgba(26,37,64,.05);
	position: relative;
	overflow: hidden;
}
.sp-pk__form-card::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--sppk-input-focus), var(--sppk-tytul));
	border-radius: var(--sppk-form-radius) var(--sppk-form-radius) 0 0;
}

/* === Ikona w niebieskim/granatowym kwadracie (jak na screenie) === */
.sp-pk__icon-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	background: linear-gradient(135deg, var(--sppk-tytul), color-mix(in srgb, var(--sppk-tytul) 75%, var(--sppk-input-focus)));
	color: #FFF;
	border-radius: 16px;
	box-shadow: 0 12px 30px rgba(26,37,64,.30), inset 0 1px 0 rgba(255,255,255,.18);
	margin-bottom: 1.5rem;
	transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.sp-pk__form-card:hover .sp-pk__icon-box {
	transform: rotate(-8deg) scale(1.05);
}
.sp-pk__icon-box svg {
	width: 32px;
	height: 32px;
}

/* === Zakładki === */
.sp-pk__tabs {
	display: flex;
	gap: 0;
	margin-bottom: 1.75rem;
	background: var(--sppk-input-bg);
	padding: .4em;
	border-radius: 12px;
	position: relative;
	border: 1px solid rgba(26,37,64,.05);
}
.sp-pk__tab {
	flex: 1;
	background: transparent;
	border: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--sppk-opis);
	padding: .7em .9em;
	border-radius: 9px;
	cursor: pointer;
	transition: color .25s cubic-bezier(.4,0,.2,1);
	letter-spacing: .02em;
	position: relative;
	z-index: 2;
	white-space: nowrap;
}
.sp-pk__tab:hover { color: var(--sppk-tytul); }
.sp-pk__tab.is-active { color: var(--sppk-tytul); }
.sp-pk__tab-indicator {
	position: absolute;
	top: .4em;
	left: 0;
	height: calc(100% - .8em);
	background: #FFF;
	border-radius: 9px;
	box-shadow: 0 4px 10px rgba(26,37,64,.08), 0 1px 3px rgba(26,37,64,.04);
	transition: transform .35s cubic-bezier(.4,0,.2,1), width .35s cubic-bezier(.4,0,.2,1);
	z-index: 1;
}

/* === Panele — animacja przy zmianie zakładki === */
.sp-pk__panel {
	display: none;
	animation: sp-pk-fadein .35s cubic-bezier(.4,0,.2,1);
}
.sp-pk__panel.is-active { display: block; }
@keyframes sp-pk-fadein {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* head wewnątrz panelu — wyrównany do lewej */
.sp-pk__panel .sp-pk__head {
	text-align: left;
	margin-bottom: 1.5rem;
}
.sp-pk__panel .sp-pk__tytul {
	font-size: 28px;
	margin-bottom: .4rem;
}
.sp-pk__panel .sp-pk__opis {
	font-size: 14px;
	color: #6B7280;
	margin: 0;
}

/* === Wiersz: label + inline link "Nie pamiętasz?" === */
.sp-pk__field-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: .35em;
	gap: 1rem;
}
.sp-pk__field-row label { margin: 0; }

.sp-pk__inline-link {
	background: transparent;
	border: none;
	color: var(--sppk-tytul);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
	text-decoration: none;
	transition: color .15s ease;
	letter-spacing: .01em;
}
.sp-pk__inline-link:hover {
	color: var(--sppk-input-focus);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* === Tekst pomocniczy pod polem === */
.sp-pk__help {
	display: block;
	font-size: 12px;
	color: #6B7280;
	margin-top: .35em;
	line-height: 1.4;
}

/* === Rejestracja: 2 kolumny imię/nazwisko === */
.sp-pk__row-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
@media (max-width: 480px) {
	.sp-pk__row-2 { grid-template-columns: 1fr; }
}

/* === Zgoda RODO === */
.sp-pk__consent {
	display: flex;
	gap: .65em;
	align-items: flex-start;
	font-size: 12.5px;
	color: var(--sppk-opis);
	cursor: pointer;
	margin: 0;
	line-height: 1.45;
}
.sp-pk__consent input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--sppk-input-focus);
	cursor: pointer;
	flex-shrink: 0;
	margin-top: 1px;
}

.sp-pk__form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.sp-pk__field {
	display: flex;
	flex-direction: column;
	gap: .35em;
}
.sp-pk__field label {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--sppk-tytul);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.sp-pk__input-wrap {
	position: relative;
	display: flex;
	align-items: stretch;
}
.sp-pk__input-ikona {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--sppk-input-focus);
	pointer-events: none;
	z-index: 2;
	width: 22px; height: 22px;
}
.sp-pk__input-ikona svg { width: 22px; height: 22px; display: block; }

.sp-pk__form input[type="text"],
.sp-pk__form input[type="email"],
.sp-pk__form input[type="password"] {
	width: 100%;
	background: var(--sppk-input-bg);
	border: 1.5px solid var(--sppk-input-border);
	border-radius: 12px;
	padding: 0.95em 1em 0.95em 56px !important;
	font-family: inherit;
	font-size: 16px;
	color: var(--sppk-tytul);
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.sp-pk__form input:focus {
	outline: none;
	border-color: var(--sppk-input-focus);
	box-shadow: 0 0 0 4px rgba(212,160,23,.15);
	background: #fff;
}

.sp-pk__haslo-toggle {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: var(--sppk-input-focus);
	cursor: pointer;
	z-index: 3;
	width: 32px;
	height: 32px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease;
}
.sp-pk__haslo-toggle:hover { background: rgba(212,160,23,.10); }
.sp-pk__haslo-toggle svg { width: 18px; height: 18px; }

.sp-pk__remember {
	display: flex;
	gap: .6em;
	align-items: center;
	font-size: 14px;
	color: var(--sppk-opis);
	cursor: pointer;
	margin: 0;
}
.sp-pk__remember input[type="checkbox"] {
	width: 18px; height: 18px;
	accent-color: var(--sppk-input-focus);
	cursor: pointer;
}

.sp-pk__honeypot {
	position: absolute;
	left: -9999px;
	opacity: 0;
	height: 0;
	width: 0;
	pointer-events: none;
}

.sp-pk__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	width: 100%;
	background: linear-gradient(135deg, var(--sppk-tytul), color-mix(in srgb, var(--sppk-tytul) 80%, var(--sppk-input-focus)));
	color: #FFF;
	padding: 1.1em 1.6em;
	border-radius: 14px;
	border: none;
	font-family: inherit;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: .12em;
	cursor: pointer;
	transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1), filter .15s ease, opacity .15s ease;
	box-shadow: 0 10px 24px rgba(26,37,64,.28), inset 0 1px 0 rgba(255,255,255,.15);
	margin-top: .75rem;
	position: relative;
	overflow: hidden;
}
.sp-pk__btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
	transform: translateX(-100%);
	transition: transform .6s cubic-bezier(.4,0,.2,1);
	pointer-events: none;
}
.sp-pk__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(26,37,64,.40);
	filter: brightness(1.08);
}
.sp-pk__btn:hover::before { transform: translateX(100%); }
.sp-pk__btn-label { position: relative; z-index: 1; }
.sp-pk__btn[disabled] {
	opacity: .7;
	cursor: wait;
	transform: none;
}

.sp-pk__msg {
	padding: 0;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.5;
}
.sp-pk__msg:empty { display: none; }
.sp-pk__msg--sukces {
	background: #E8F5E9; color: #2E7D32;
	padding: .85em 1.1em;
	border: 1px solid rgba(46,125,50,.25);
}
.sp-pk__msg--blad {
	background: #FFEBEE; color: #C62828;
	padding: .85em 1.1em;
	border: 1px solid rgba(198,40,40,.25);
}

.sp-pk__links {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	font-size: 14px;
	margin-top: .5rem;
}
.sp-pk__link-lost,
.sp-pk__link-register {
	color: var(--sppk-input-focus);
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px dashed rgba(212,160,23,.3);
	transition: color .15s ease, border-color .15s ease;
}
.sp-pk__link-lost:hover,
.sp-pk__link-register:hover {
	color: var(--sppk-tytul);
	border-bottom-color: var(--sppk-tytul);
}

.sp-pk__security {
	text-align: center;
	font-size: 12px;
	color: var(--sppk-opis);
	opacity: .7;
	margin-top: .75rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(26,37,64,.08);
}

/* =========================================================
   PANEL — KARTY
   ========================================================= */
.sp-pk__karty {
	display: grid;
	gap: 1.5rem;
	margin: 0 0 2.5rem;
}
.sp-pk--kol-2 .sp-pk__karty { grid-template-columns: repeat(2, 1fr); }
.sp-pk--kol-3 .sp-pk__karty { grid-template-columns: repeat(3, 1fr); }
.sp-pk--kol-4 .sp-pk__karty { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
	.sp-pk--kol-3 .sp-pk__karty,
	.sp-pk--kol-4 .sp-pk__karty { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.sp-pk--kol-2 .sp-pk__karty,
	.sp-pk--kol-3 .sp-pk__karty,
	.sp-pk--kol-4 .sp-pk__karty { grid-template-columns: 1fr; }
}

.sp-pk__karta {
	background: var(--sppk-karta-bg);
	border-radius: var(--sppk-karta-radius);
	padding: 2rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	box-shadow: 0 12px 30px rgba(26,37,64,.08);
	border: 1px solid rgba(26,37,64,.04);
	transition: transform .25s ease, box-shadow .25s ease;
}
.sp-pk__karta:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(26,37,64,.12);
}

.sp-pk__karta-ikona {
	width: 56px;
	height: 56px;
	background: var(--sppk-karta-ik-bg);
	color: var(--sppk-karta-ik);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 16px rgba(26,37,64,.20);
}
.sp-pk__karta-ikona svg { width: 28px; height: 28px; }

.sp-pk__karta-tytul {
	font-size: 19px;
	font-weight: 700;
	color: var(--sppk-karta-tytul);
	margin: 0;
	line-height: 1.3;
}
.sp-pk__karta-opis {
	font-size: 14.5px;
	color: var(--sppk-karta-opis);
	line-height: 1.55;
	margin: 0;
	flex: 1;
}
.sp-pk__karta-cta {
	color: var(--sppk-btn-bg);
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .02em;
	display: inline-flex;
	align-items: center;
	gap: .35em;
	margin-top: auto;
	transition: gap .2s ease, color .15s ease;
}
.sp-pk__karta-cta:hover {
	gap: .75em;
	color: var(--sppk-tytul);
}

/* ===== LOGOUT BUTTON ===== */
.sp-pk__logout-btn {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	background: var(--sppk-logout-bg);
	color: var(--sppk-logout-text);
	padding: .8em 1.4em;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	transition: background .15s ease, transform .15s ease;
	border-bottom: none;
}
.sp-pk__logout-btn:hover {
	background: rgba(0,0,0,.08);
	transform: translateY(-1px);
}
.sp-pk__logout-btn svg { width: 16px; height: 16px; }
.sp-pk__logout-link {
	color: var(--sppk-input-focus);
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px dashed rgba(212,160,23,.3);
}

/* ===== EXTRA HTML / SHORTCODES ===== */
.sp-pk__extra {
	background: var(--sppk-karta-bg);
	border-radius: var(--sppk-karta-radius);
	padding: 2rem 2.5rem;
	box-shadow: 0 12px 30px rgba(26,37,64,.08);
	border: 1px solid rgba(26,37,64,.04);
	color: var(--sppk-opis);
	line-height: 1.65;
}
.sp-pk__extra h2,
.sp-pk__extra h3,
.sp-pk__extra h4 { color: var(--sppk-tytul); margin: 1em 0 .5em; }
.sp-pk__extra h3 { font-size: 22px; }
.sp-pk__extra p { margin: 0 0 1em; }
.sp-pk__extra a {
	color: var(--sppk-input-focus);
	font-weight: 600;
}

@media (max-width: 600px) {
	.sp-pk { --sppk-pad-y: 50px; --sppk-pad-x: 20px; --sppk-size-tytul: 26px; }
	.sp-pk__form-card { padding: 1.75rem 1.5rem; }
	.sp-pk__head--logged { flex-direction: column; align-items: flex-start; }
}

/* Wstrząs przy błędnym logowaniu */
.sp-pk__form--shake { animation: sp-pk-shake .55s cubic-bezier(.36,.07,.19,.97); }
@keyframes sp-pk-shake {
	10%, 90% { transform: translateX(-2px); }
	20%, 80% { transform: translateX(4px); }
	30%, 50%, 70% { transform: translateX(-8px); }
	40%, 60% { transform: translateX(8px); }
}