/* Skup Aut Opole – Formularze. Everything is scoped to .saf to survive any theme. */

.saf {
	--saf-navy: #0e1a61;
	--saf-navy-ink: #070d33;
	--saf-blue: #1e73be;
	--saf-amber: #e1a136;
	--saf-amber-2: #f2c26b;
	--saf-ink: #141826;
	--saf-muted: #5d6475;
	--saf-error: #c62828;
	--saf-radius: 12px;
	--saf-head: "Montserrat", "Instrument Sans", system-ui, sans-serif;
	--saf-body: "Instrument Sans", "Montserrat", system-ui, sans-serif;

	/* light (paper) skin = default tokens */
	--saf-bg: #ffffff;
	--saf-text: var(--saf-ink);
	--saf-soft: var(--saf-muted);
	--saf-line: #dcd8cc;
	--saf-line-strong: #c9c4b5;
	--saf-field: #ffffff;
	--saf-field-hover: #fbfaf6;
	--saf-chip-on: var(--saf-navy);
	--saf-focus: rgba(30, 115, 190, .22);

	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(24px, 4vw, 44px);
	border-radius: 22px;
	background: var(--saf-bg);
	color: var(--saf-text);
	font-family: var(--saf-body);
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
	border: 1px solid #ebe7dc;
	box-shadow: 0 40px 80px -48px rgba(14, 26, 97, .45);
}

.saf *, .saf *::before, .saf *::after { box-sizing: border-box; }
.saf [hidden] { display: none !important; }

.saf--dark {
	--saf-bg: linear-gradient(160deg, #0e1a61 0%, #16267f 55%, #10205f 100%);
	--saf-text: #ffffff;
	--saf-soft: rgba(255, 255, 255, .72);
	--saf-line: rgba(255, 255, 255, .16);
	--saf-line-strong: rgba(255, 255, 255, .3);
	--saf-field: rgba(255, 255, 255, .07);
	--saf-field-hover: rgba(255, 255, 255, .1);
	--saf-chip-on: var(--saf-amber);
	--saf-error: #ff8a8a;
	--saf-focus: rgba(75, 155, 227, .35);
	background: var(--saf-bg);
	border-color: transparent;
}

.saf__glow { display: none; }
.saf--dark .saf__glow { display: block; position: absolute; inset: -40% -30% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(30, 115, 190, .55), rgba(30, 115, 190, 0)); pointer-events: none; z-index: -1; }

/* Header (when shown) */
.saf__head { margin: 0 0 26px; }
.saf__kicker { display: inline-block; margin: 0 0 10px; font: 700 12px/1.3 var(--saf-head); letter-spacing: 2.6px; text-transform: uppercase; color: var(--saf-blue); }
.saf--dark .saf__kicker { color: var(--saf-amber); }
.saf .saf__title { margin: 0 0 6px; font: 800 clamp(24px, 3vw, 32px)/1.15 var(--saf-head); color: inherit; letter-spacing: -.4px; }
.saf .saf__subtitle { margin: 0; color: var(--saf-soft); }

/* Progress */
.saf-progress { margin: 0 0 26px; }
.saf-progress__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.saf-progress__label { font: 700 12.5px/1.3 var(--saf-head); letter-spacing: 1.6px; text-transform: uppercase; color: var(--saf-navy); }
.saf--dark .saf-progress__label { color: #fff; }
.saf-progress__label b { font-weight: 900; }
.saf-progress__pct { font: 600 13px var(--saf-body); color: var(--saf-soft); }
.saf-progress__bar { height: 6px; border-radius: 6px; background: #ece8dd; overflow: hidden; }
.saf--dark .saf-progress__bar { background: rgba(255, 255, 255, .12); }
.saf-progress__bar i { display: block; height: 100%; width: var(--saf-pct, 33%); border-radius: inherit; background: linear-gradient(90deg, var(--saf-amber), var(--saf-amber-2)); transition: width .45s cubic-bezier(.2, .8, .2, 1); }

/* Draft restore bar */
.saf-draft { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: #fff7e6; border: 1px solid #f1dcae; font-size: 14px; color: #6b4a07; }
.saf--dark .saf-draft { background: rgba(225, 161, 54, .14); border-color: rgba(225, 161, 54, .35); color: #fde3b0; }
.saf .saf-draft__clear { padding: 0; border: 0; background: none; font: 700 14px var(--saf-body); color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Steps */
.saf-group { margin: 0 0 8px; padding: 0; border: 0; min-width: 0; }
.saf--js .saf-step.is-active { animation: saf-step-in .35s cubic-bezier(.2, .8, .2, 1) both; }
.saf-group__legend { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 18px; padding: 0; font: 700 13px/1 var(--saf-head); letter-spacing: 2.2px; text-transform: uppercase; color: var(--saf-soft); }
.saf-group__legend::after { content: ""; flex: 1; height: 1px; background: var(--saf-line); }
.saf-group__legend:focus { outline: none; }
.saf-group__num { font: 900 22px/1 var(--saf-head); color: var(--saf-amber); letter-spacing: 0; }
.saf-group__legend .saf-opt { text-transform: none; letter-spacing: 0; }
.saf--wizard .saf-group__legend { display: none; }
.saf-step__hint { margin: -4px 0 18px; font-size: 14px; color: var(--saf-soft); }
.saf:not(.saf--wizard) .saf-step__hint { display: none; }
.saf:not(.saf--js) .saf-group { margin-bottom: 26px; }

/* Grid & fields */
.saf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.saf-field { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.saf-field--wide { grid-column: 1 / -1; }
.saf .saf-label { display: block; margin: 0 0 8px; font: 600 14px/1.3 var(--saf-body); color: var(--saf-text); }
.saf-req { color: var(--saf-amber); text-decoration: none; border: 0; font-weight: 700; }
.saf-opt { margin-left: 4px; color: var(--saf-soft); font-weight: 400; font-size: 12.5px; }

.saf .saf-input {
	display: block; width: 100%; height: 56px; margin: 0; padding: 0 16px;
	border: 1.5px solid var(--saf-line); border-radius: var(--saf-radius);
	background: var(--saf-field); color: var(--saf-text);
	font: 500 16px/1.4 var(--saf-body); box-shadow: none; outline: none;
	-webkit-appearance: none; appearance: none;
	transition: border-color .18s, background-color .18s, box-shadow .18s;
}
.saf .saf-input:hover { border-color: var(--saf-line-strong); background: var(--saf-field-hover); }
.saf .saf-input::placeholder { color: var(--saf-soft); opacity: .65; }
.saf .saf-input:focus { border-color: var(--saf-blue); background: var(--saf-field); box-shadow: 0 0 0 4px var(--saf-focus); }
.saf .saf-textarea { height: auto; min-height: 128px; padding: 14px 16px; resize: vertical; }
.saf-input-wrap { position: relative; }
.saf-input-wrap .saf-input { padding-right: 52px; }
.saf-input-suffix { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); color: var(--saf-soft); font: 700 12px/1 var(--saf-head); letter-spacing: 1px; pointer-events: none; }

/* Fuel chips */
.saf-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.saf-chip { position: relative; margin: 0; cursor: pointer; }
.saf-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.saf-chip span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border: 1.5px solid var(--saf-line); border-radius: 999px; background: var(--saf-field); font: 600 15px var(--saf-body); color: var(--saf-text); transition: background-color .15s, border-color .15s, color .15s, transform .15s; }
.saf-chip:hover span { border-color: var(--saf-line-strong); }
.saf-chip input:checked + span { background: var(--saf-chip-on); border-color: var(--saf-chip-on); color: #fff; }
.saf--dark .saf-chip input:checked + span { color: #1b1200; }
.saf-chip input:focus-visible + span { outline: 3px solid var(--saf-blue); outline-offset: 2px; }
.saf-chip input:active + span { transform: scale(.97); }

/* Tak / Nie */
.saf-toggle { display: grid; grid-template-columns: 1fr 1fr; max-width: 360px; height: 56px; padding: 4px; border: 1.5px solid var(--saf-line); border-radius: var(--saf-radius); background: var(--saf-field); }
.saf-toggle__opt { position: relative; display: block; margin: 0; cursor: pointer; }
.saf-toggle__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.saf-toggle__opt span { display: flex; align-items: center; justify-content: center; height: 100%; border-radius: 8px; font: 700 14px/1 var(--saf-head); letter-spacing: .8px; text-transform: uppercase; color: var(--saf-soft); transition: background-color .18s, color .18s; }
.saf-toggle__opt input:checked + span { background: var(--saf-navy); color: #fff; }
.saf-toggle__opt input[value="tak"]:checked + span { background: var(--saf-amber); color: #1b1200; }
.saf--dark .saf-toggle__opt input[value="nie"]:checked + span { background: var(--saf-blue); }
.saf-toggle__opt input:focus-visible + span { outline: 3px solid var(--saf-blue); outline-offset: 2px; }

/* Dropzone */
.saf-dropzone { display: flex; align-items: center; gap: 16px; margin: 0; padding: 20px 22px; border: 1.5px dashed var(--saf-line-strong); border-radius: var(--saf-radius); background: var(--saf-field); cursor: pointer; transition: border-color .18s, background-color .18s; }
.saf-dropzone:hover, .saf-dropzone.is-dragover { border-color: var(--saf-blue); background: var(--saf-field-hover); }
.saf-dropzone__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.saf-dropzone__input:focus-visible + .saf-dropzone__icon { outline: 3px solid var(--saf-blue); outline-offset: 3px; }
.saf-dropzone__icon { flex: none; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(var(--saf-navy), var(--saf-navy)) center / 2px 18px no-repeat, linear-gradient(var(--saf-navy), var(--saf-navy)) center / 18px 2px no-repeat, #f1ede2; }
.saf--dark .saf-dropzone__icon { background: linear-gradient(#fff, #fff) center / 2px 18px no-repeat, linear-gradient(#fff, #fff) center / 18px 2px no-repeat, rgba(30, 115, 190, .35); }
.saf-dropzone__text { font-size: 15px; line-height: 1.45; color: var(--saf-text); }
.saf-dropzone__text small { color: var(--saf-soft); font-size: 12.5px; }
.saf-field.is-busy .saf-dropzone { opacity: .8; }
.saf-field.is-busy .saf-dropzone__icon { animation: saf-pulse 1s ease-in-out infinite; }

.saf-previews { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.saf-previews:empty { display: none; }
.saf-previews li { position: relative; width: 96px; height: 72px; margin: 0; border-radius: 10px; overflow: hidden; background: #ece8dd; animation: saf-pop .25s ease-out both; }
.saf-previews li.is-file::before { content: "HEIC"; position: absolute; inset: 0; display: grid; place-items: center; font: 800 12px var(--saf-head); color: var(--saf-navy); }
.saf-previews img { display: block; width: 100%; height: 100%; object-fit: cover; }
.saf-previews .saf-previews__name { position: absolute; inset: auto 0 0; padding: 3px 6px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 10px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saf-previews .saf-previews__remove { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .65); color: #fff; font: 700 15px/24px Arial, sans-serif; cursor: pointer; }

/* Consent */
.saf-consent { margin: 22px 0 6px; }
.saf-check { position: relative; display: flex; align-items: flex-start; gap: 12px; margin: 0; cursor: pointer; font-size: 14px; line-height: 1.5; color: var(--saf-soft); }
.saf-check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.saf-check__box { flex: none; width: 24px; height: 24px; margin-top: 0; border: 1.5px solid var(--saf-line-strong); border-radius: 7px; background: var(--saf-field); transition: background-color .18s, border-color .18s; }
.saf-check input:checked + .saf-check__box { border-color: var(--saf-navy); background: var(--saf-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 16px no-repeat; }
.saf--dark .saf-check input:checked + .saf-check__box { border-color: var(--saf-blue); background-color: var(--saf-blue); }
.saf-check input:focus-visible + .saf-check__box { box-shadow: 0 0 0 4px var(--saf-focus); }
.saf-check__text a { color: var(--saf-text); text-decoration: underline; text-underline-offset: 2px; }

/* Errors */
.saf-error { display: none; margin: 7px 0 0; color: var(--saf-error); font-size: 13px; line-height: 1.4; font-weight: 500; }
.saf-field.is-invalid .saf-error { display: block; }
.saf-field.is-invalid .saf-input, .saf-field.is-invalid .saf-toggle, .saf-field.is-invalid .saf-dropzone, .saf-field.is-invalid .saf-check__box, .saf-field.is-invalid .saf-chip span { border-color: var(--saf-error); }
.saf-notice { display: none; margin: 0 0 20px; padding: 14px 16px; border-radius: 12px; background: #fdecec; border: 1px solid #f5c2c2; color: #8e1c1c; font-size: 15px; }
.saf--dark .saf-notice { background: rgba(255, 122, 122, .14); border-color: rgba(255, 122, 122, .35); color: #ffd6d6; }
.saf-notice.is-visible { display: block; }

/* Honeypot */
.saf-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Actions */
.saf-actions { margin-top: 26px; }
.saf-nav { display: flex; align-items: center; gap: 12px; }
.saf .saf-back { flex: none; min-height: 58px; padding: 0 20px; border: 1.5px solid var(--saf-line); border-radius: var(--saf-radius); background: transparent; color: var(--saf-text); font: 700 15px var(--saf-head); cursor: pointer; transition: border-color .15s, background-color .15s; }
.saf .saf-back:hover { border-color: var(--saf-line-strong); background: var(--saf-field-hover); }
.saf .saf-next { flex: 1; min-height: 58px; padding: 0 24px; border: 0; border-radius: var(--saf-radius); background: var(--saf-navy); color: #fff; font: 800 16px var(--saf-head); letter-spacing: .3px; cursor: pointer; transition: transform .15s, background-color .15s, box-shadow .15s; box-shadow: 0 14px 30px -14px rgba(14, 26, 97, .8); }
.saf .saf-next:hover { transform: translateY(-1px); background: #16267f; }
.saf .saf-next.is-skip { background: transparent; color: var(--saf-navy); border: 1.5px solid var(--saf-navy); box-shadow: none; }
.saf--dark .saf-next { background: var(--saf-amber); color: #1b1200; }
.saf--dark .saf-next.is-skip { color: #fff; border-color: rgba(255, 255, 255, .5); }
.saf .saf-next:focus-visible, .saf .saf-back:focus-visible { outline: 3px solid var(--saf-amber); outline-offset: 3px; }

.saf .saf-submit {
	position: relative; overflow: hidden; flex: 1;
	display: inline-flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; margin: 0; padding: 0 26px;
	border: 0; border-radius: var(--saf-radius);
	background: var(--saf-amber); color: #1b1200;
	font: 800 16px/1.2 var(--saf-head); letter-spacing: .4px; text-transform: none; text-decoration: none;
	cursor: pointer; box-shadow: 0 16px 34px -14px rgba(225, 161, 54, .95);
	transition: transform .15s, box-shadow .15s, background-color .15s;
}
.saf .saf-submit:hover { transform: translateY(-2px); background: #e9ac45; }
.saf .saf-submit:focus-visible { outline: 3px solid var(--saf-navy); outline-offset: 3px; }
.saf .saf-submit:disabled, .saf .saf-submit.is-busy { cursor: wait; transform: none; }
.saf-submit__label { position: relative; z-index: 1; flex: 1; text-align: left; }
.saf-submit__arrow { position: relative; z-index: 1; width: 22px; height: 12px; background: linear-gradient(#1b1200, #1b1200) left center / 100% 2px no-repeat; transition: transform .18s; }
.saf-submit__arrow::after { content: ""; position: absolute; right: 1px; top: 1px; width: 10px; height: 10px; border-top: 2px solid #1b1200; border-right: 2px solid #1b1200; transform: rotate(45deg); }
.saf .saf-submit:hover .saf-submit__arrow { transform: translateX(5px); }
.saf .saf-submit.is-busy .saf-submit__arrow { width: 18px; height: 18px; border: 2px solid rgba(27, 18, 0, .3); border-top-color: #1b1200; border-radius: 50%; background: none; animation: saf-spin .8s linear infinite; }
.saf .saf-submit.is-busy .saf-submit__arrow::after { display: none; }
.saf-submit__progress { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.saf-submit__progress i { display: block; height: 100%; width: var(--saf-upload, 0%); background: rgba(255, 255, 255, .35); transition: width .2s linear; }

.saf-actions__hint { margin: 12px 0 0; color: var(--saf-soft); font-size: 13px; text-align: center; }

/* Success */
.saf-success { display: flex; align-items: center; gap: 18px; padding: 24px 26px; border-radius: 16px; background: #eaf8f0; border: 1px solid #b9e8cf; animation: saf-pop .35s ease-out both; }
.saf--dark .saf-success { background: rgba(52, 219, 131, .12); border-color: rgba(52, 219, 131, .4); }
.saf-success:focus { outline: none; }
.saf-success__icon { flex: none; width: 52px; height: 52px; border-radius: 50%; background: #1f9d5b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 26px no-repeat; animation: saf-pop .5s .1s cubic-bezier(.2, 1.4, .4, 1) both; }
.saf .saf-success p { margin: 0; font-size: 16px; font-weight: 600; color: var(--saf-text); }

/* Motion */
@keyframes saf-step-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes saf-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes saf-spin { to { transform: rotate(360deg); } }
@keyframes saf-pulse { 50% { transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) {
	.saf *, .saf *::before, .saf *::after { animation: none !important; transition: none !important; }
}

/* Responsive */
@media (max-width: 640px) {
	.saf { padding: 22px 18px; border-radius: 18px; }
	.saf-grid { grid-template-columns: 1fr; gap: 16px; }
	.saf-field--wide { grid-column: auto; }
	.saf .saf-input, .saf-toggle { height: 54px; }
	.saf-toggle { max-width: none; }
	.saf-chip span { min-height: 44px; padding: 0 15px; font-size: 14.5px; }
	.saf .saf-back { padding: 0 16px; }
	.saf .saf-submit, .saf .saf-next { font-size: 15px; min-height: 56px; }
}