/* Odstapienie online /widerruf/ (echtelikes, wariant 1 "Karta"; makieta 2whTCEDZPXB8JkRNMrpwUA, sekcja Specyfikacja).
   Kolor marki: zmienne --wr-brand* z PHP (vves_primary_color). Font serwisu (Lato/Sora na echtelikes) z !important,
   bo motyw ma globalny reset font-family z !important. Komentarze w ASCII. */
.wr {
	--wr-ink: #303435;
	--wr-ink2: #5F6366;
	--wr-line: #EDEDED;
	--wr-field: #DDD9D5;
	--wr-err: #B3261E;
	--wr-ro: #F7F6F5;
	--wr-fh: 'Sora', 'Lato', sans-serif;
	--wr-fb: 'Lato', sans-serif;
	padding: 24px 16px 98px; /* 48 px odstepu + 50 px ujemnego margin-top stopki motywu (#jas-footer) */
	color: var(--wr-ink);
}
.wr, .wr p, .wr a, .wr span, .wr label, .wr input, .wr button, .wr dt, .wr dd, .wr div { font-family: var(--wr-fb) !important; }
.wr .wr__h1, .wr .wr__okh { font-family: var(--wr-fh) !important; }
.wr__col { max-width: 480px; margin: 0 auto; }

/* okruszek-pigulka (wysrodkowana nad tytulem) */
.wr__crumb { display: flex; width: max-content; max-width: 100%; box-sizing: border-box; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 4px; border: 1px solid var(--wr-line); border-radius: 999px; font-size: 13px; line-height: 1; color: var(--wr-ink2); margin: 0 auto 20px; position: relative; z-index: 1; }
.wr__home { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -5px -10px -5px -6px; color: var(--wr-ink2); text-decoration: none; border-radius: 999px; }
.wr__home:hover, .wr__home:focus-visible { color: var(--wr-brand); }
.wr__sep { color: #B5B8BA; }

.wr .wr__h1 { margin: 0 0 12px; padding: 0; background: none; font-size: 26px; line-height: 1.25; font-weight: 400; color: #222; text-align: center; }
.wr .wr__lead { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: var(--wr-ink2); text-align: center; }
.wr .wr__lead a { color: var(--wr-ink); text-decoration: underline; text-underline-offset: 3px; }
.wr .wr__lead a:hover { color: var(--wr-ink); text-decoration-color: var(--wr-brand); }

.wr__card { margin-top: 20px; border: 1px solid var(--wr-line); border-radius: 8px; padding: 20px 16px 18px; background: #fff; scroll-margin-top: calc(var(--plh-top, 0px) + 96px); }
.wr__f + .wr__f { margin-top: 16px; }
.wr .wr__lb { display: block; margin: 0 0 6px; font-size: 14px; line-height: 1.4; font-weight: 700; color: var(--wr-ink); }
.wr .wr__form .wr__in.wr__in {
	display: block; width: 100%; height: 52px; margin: 0; padding: 0 14px; box-sizing: border-box;
	font-size: 16px; line-height: 1.3; color: var(--wr-ink); background: #fff;
	border: 1px solid var(--wr-field); border-radius: 8px; box-shadow: none; outline: 0;
	transition: border-color .12s, box-shadow .12s;
}
.wr .wr__form .wr__in.wr__in:focus { border-color: var(--wr-brand); box-shadow: 0 0 0 4px var(--wr-ring); }
.wr .wr__form .wr__in.wr__in[aria-invalid="true"] { border-color: var(--wr-err); }
.wr .wr__form .wr__in.wr__in[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(179,38,30,.14); }
.wr .wr__form .wr__in.wr__in[readonly] { background: var(--wr-ro); }
.wr .wr__hint, .wr .wr__err { margin: 6px 0 0; font-size: 13px; line-height: 1.4; }
.wr .wr__hint { color: var(--wr-ink2); }
.wr .wr__err { display: flex; gap: 6px; align-items: flex-start; color: var(--wr-err); }
.wr .wr__err[hidden], .wr .wr__hint[hidden] { display: none !important; }
.wr__eic { flex: none; margin-top: 2px; }
.wr__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.wr__sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* blad serwera */
.wr__alert { display: flex; gap: 10px; margin: 20px 0 0; padding: 12px 14px; background: #FDEDEB; border: 1px solid #F4C7C1; border-radius: 8px; }
.wr__alert[hidden] { display: none !important; }
.wr__aic { flex: none; margin-top: 2px; color: var(--wr-err); }
.wr .wr__alert p { margin: 0; font-size: 14px; line-height: 1.45; }
.wr .wr__alert1 { color: var(--wr-err); }
.wr .wr__alert2 { margin-top: 4px; color: var(--wr-ink); }
.wr .wr__alert2 a { color: var(--wr-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }

/* przycisk (pigulka jak presety superlike/echtelikes) */
.wr .wr__form .wr__btn.wr__btn {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	width: 100%; height: 52px; margin: 20px 0 0; padding: 0 20px; box-sizing: border-box;
	font-size: 16px; line-height: 1; font-weight: 700; letter-spacing: normal; text-transform: none;
	color: #fff; background: var(--wr-brand); border: 0; border-radius: 999px; cursor: pointer;
	transition: background-color .12s;
}
.wr .wr__form .wr__btn.wr__btn:hover, .wr .wr__form .wr__btn.wr__btn[aria-busy="true"] { background: var(--wr-brand-h); color: #fff; }
.wr .wr__form .wr__btn.wr__btn:focus-visible { outline: 2px solid var(--wr-ink); outline-offset: 2px; }
.wr .wr__form .wr__btn.wr__btn[aria-busy="true"] { cursor: progress; }
.wr__spin { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; box-sizing: border-box; animation: wr-spin .8s linear infinite; }
.wr__btn[aria-busy="true"] .wr__spin { display: inline-block; }
@keyframes wr-spin { to { transform: rotate(360deg); } }

/* sukces */
.wr__ok { text-align: center; outline: 0; }
.wr__okic { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 4px auto 14px; border-radius: 50%; background: var(--wr-tint); color: var(--wr-brand); }
.wr .wr__okh { margin: 0 0 8px; font-size: 22px; line-height: 1.3; font-weight: 600; color: var(--wr-ink); outline: 0; }
.wr .wr__okt { margin: 0; font-size: 15px; line-height: 1.5; color: var(--wr-ink); }
.wr__note { display: flex; gap: 10px; margin: 16px 0 0; padding: 12px 14px; background: var(--wr-tint); border-radius: 8px; text-align: left; }
.wr__note svg { flex: none; margin-top: 2px; color: var(--wr-brand-h); }
.wr .wr__note p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--wr-ink); }
.wr__sum { margin: 16px 0 0; border: 1px solid var(--wr-line); border-radius: 8px; text-align: left; }
.wr__sum > div { display: flex; gap: 12px; justify-content: space-between; padding: 10px 14px; font-size: 14px; line-height: 1.4; }
.wr__sum > div + div { border-top: 1px solid var(--wr-line); }
.wr .wr__sum dt { margin: 0; font-weight: 400; color: var(--wr-ink2); }
.wr .wr__sum dd { margin: 0; font-weight: 700; color: var(--wr-ink); text-align: right; overflow-wrap: anywhere; }
.wr .wr__okm, .wr .wr__okn { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--wr-ink2); overflow-wrap: anywhere; }
.wr .wr__okm b { color: var(--wr-ink); }
.wr .wr__back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 0 4px; font-size: 15px; font-weight: 700; color: var(--wr-ink); text-decoration: underline; text-underline-offset: 3px; }
.wr .wr__back:hover { color: var(--wr-ink); text-decoration-color: var(--wr-brand); }
.wr a:focus-visible { outline: 2px solid var(--wr-ink); outline-offset: 2px; }

@media (min-width: 768px) {
	.wr { padding-top: 40px; padding-bottom: 114px; }
	.wr__card { padding: 28px 28px 22px; }
	.wr .wr__h1 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
	.wr__spin { animation: none; border-top-color: rgba(255,255,255,.45); border-right-color: #fff; }
	.wr .wr__form .wr__in.wr__in, .wr .wr__form .wr__btn.wr__btn { transition: none; }
}