/* KryptoStart.pl – style uzupełniające Tailwind (fonty, efekty, modal, szablony PDF) */

/* ---------- Fonty (self-hosted, bez Google Fonts = zero zapytań do podmiotów trzecich) ---------- */
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/poppins-medium.woff) format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/poppins-semibold.woff) format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/poppins-bold.woff) format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 800; font-style: normal; font-display: swap; src: url(../fonts/poppins-extrabold.woff) format("woff"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/inter-400.woff) format("woff"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/inter-500.woff) format("woff"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/inter-600.woff) format("woff"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/inter-700.woff) format("woff"); }

:root {
  --navy-950: #000a1c; --navy-900: #000f26; --navy-850: #03142f; --navy-800: #071a3a; --navy-700: #10295a;
  --gold-300: #f6d58a; --gold-500: #e5b352; --gold-600: #c99a3e;
  --line: rgba(229, 179, 82, .38);
}
html { background: var(--navy-900); color: #f1f5f9; scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { background: var(--navy-900); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow-x: hidden; }
html.modal-open, html.modal-open body { overflow: hidden; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(229, 179, 82, .35); color: #fff; }

/* ---------- Tło hero ---------- */
.hero-bg {
  background:
    radial-gradient(52% 70% at 74% 38%, rgba(30, 64, 140, .55) 0%, rgba(10, 33, 80, .35) 38%, rgba(0, 15, 38, 0) 70%),
    radial-gradient(40% 50% at 12% 0%, rgba(229, 179, 82, .07) 0%, rgba(0, 15, 38, 0) 70%),
    linear-gradient(180deg, #000f26 0%, #001029 70%, #000f26 100%);
}
.hero-figure { position: relative; }
.hero-figure img { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .35)); }
.hero-figure::before { content: ""; position: absolute; inset: 8% 6% 6% 14%; background: radial-gradient(closest-side, rgba(59, 110, 210, .35), rgba(0, 15, 38, 0)); filter: blur(10px); z-index: -1; }
@keyframes ks-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.hero-figure img { animation: ks-float 7s ease-in-out infinite; }
.gold-text { background: linear-gradient(180deg, #f3cf7f 0%, #e5b352 45%, #c99a3e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gold-grad { background: linear-gradient(135deg, #f6d58a 0%, #e5b352 45%, #b8862f 100%); }
.gold-border { border: 1px solid var(--line); }
.card-tool { background: linear-gradient(180deg, rgba(10, 33, 80, .38), rgba(3, 20, 47, .55)); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.card-tool:hover { transform: translateY(-3px); border-color: rgba(229, 179, 82, .75); box-shadow: 0 16px 40px -18px rgba(229, 179, 82, .35); }
.blik-badge { background: linear-gradient(180deg, #3a2b0c, #251a05); border: 1px solid rgba(229, 179, 82, .6); color: #f3cf7f; }
.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.panel { background: linear-gradient(180deg, rgba(7, 26, 58, .72), rgba(3, 20, 47, .82)); border: 1px solid rgba(148, 163, 184, .16); }
.panel-gold { border-color: rgba(229, 179, 82, .35); }

/* ---------- Formularze ---------- */
.fld label, .fld-label { display: block; font-size: .8125rem; font-weight: 600; color: #cbd5e1; margin-bottom: .35rem; }
.inp, .fld input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), .fld select, .fld textarea {
  width: 100%; background: rgba(0, 10, 28, .65); border: 1px solid rgba(148, 163, 184, .28); border-radius: .65rem; color: #f8fafc;
  padding: .62rem .8rem; font-size: .9375rem; line-height: 1.35; transition: border-color .15s, box-shadow .15s;
}
.fld textarea { min-height: 84px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus, .inp:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(229, 179, 82, .18); }
.fld input::placeholder, .fld textarea::placeholder { color: #64748b; }
.fld select option { background: #071a3a; }
.fld .help { display: block; font-size: .75rem; color: #94a3b8; margin-top: .3rem; }
.fld input[type=date]::-webkit-calendar-picker-indicator { filter: invert(.8); }
.fld.invalid input, .fld.invalid select, .fld.invalid textarea { border-color: #f87171; }
.chk { display: flex; gap: .6rem; align-items: flex-start; font-size: .875rem; color: #cbd5e1; cursor: pointer; }
.chk input { margin-top: .2rem; width: 1rem; height: 1rem; accent-color: var(--gold-500); flex: none; }
input[type=range] { accent-color: var(--gold-500); width: 100%; }

/* ---------- Dropzone ---------- */
.dropzone { border: 1.5px dashed rgba(229, 179, 82, .55); background: rgba(229, 179, 82, .04); transition: background .15s, border-color .15s; }
.dropzone.drag { background: rgba(229, 179, 82, .12); border-color: var(--gold-500); }

/* ---------- Wynik PIT-38 (KryptoVault) ---------- */
.ks-val { font-variant-numeric: tabular-nums; transition: filter .35s ease; }
.locked-blur .ks-val { filter: blur(7px); user-select: none; -webkit-user-select: none; }
.locked-blur[data-state="empty"] .ks-val { filter: none; opacity: .35; }
.lock-cta { display: none; }
.locked-blur[data-state="locked"] .lock-cta { display: block; }
.unlocked-only { display: none; }
[data-state="unlocked"] .unlocked-only { display: block; }
[data-state="unlocked"] .locked-only { display: none; }

/* ---------- Zakładki generatora ---------- */
.tabs { scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab-btn[aria-selected="true"] { background: linear-gradient(180deg, rgba(229, 179, 82, .2), rgba(229, 179, 82, .08)); border-color: rgba(229, 179, 82, .8); color: #fff; }
.tab-btn[aria-selected="true"] .ico { color: var(--gold-300); }

/* ---------- Podgląd dokumentu ---------- */
.doc-preview { position: relative; border-radius: .9rem; overflow: hidden; background: #0b1a36; }
.pdf-preview-frame { position: relative; overflow: hidden; background: #fff; border-radius: 6px; margin-bottom: 12px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6); }
.pdf-preview-inner { position: absolute; top: 0; left: 0; width: 794px; transform-origin: top left; }
.preview-lock { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: linear-gradient(180deg, rgba(3, 20, 47, 0) 0%, rgba(3, 20, 47, .78) 32%, rgba(3, 20, 47, .96) 60%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 1.25rem; text-align: center; }
.doc-preview.paid .preview-lock { display: none; }
.preview-scroll { max-height: 640px; overflow: hidden; }
.doc-preview.paid .preview-scroll { overflow: auto; }

/* ---------- Przyciski ---------- */
.btn-gold { background: linear-gradient(180deg, #f3cf7f 0%, #e5b352 55%, #d3a043 100%); color: #1a1205; font-weight: 700; box-shadow: 0 8px 24px -10px rgba(229, 179, 82, .65), inset 0 1px 0 rgba(255, 255, 255, .45); transition: filter .15s, transform .15s; }
.btn-gold:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-gold:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-line { border: 1px solid rgba(229, 179, 82, .55); color: #f8fafc; transition: background .15s, border-color .15s; }
.btn-line:hover { background: rgba(229, 179, 82, .1); border-color: var(--gold-500); }
.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(26, 18, 5, .35); border-top-color: #1a1205; animation: ks-spin .7s linear infinite; }
@keyframes ks-spin { to { transform: rotate(360deg); } }
.spinner { width: 42px; height: 42px; border-radius: 50%; border: 3px solid rgba(229, 179, 82, .25); border-top-color: var(--gold-500); animation: ks-spin .9s linear infinite; }

/* ---------- Modal płatności ---------- */
#blik-modal .pay-option { display: flex; gap: .75rem; padding: .85rem 1rem; border: 1px solid rgba(148, 163, 184, .25); border-radius: .8rem; cursor: pointer; background: rgba(0, 10, 28, .45); transition: border-color .15s, background .15s; }
#blik-modal .pay-option:has(input:checked) { border-color: var(--gold-500); background: rgba(229, 179, 82, .08); }
#blik-modal .pay-option input { margin-top: .25rem; accent-color: var(--gold-500); }
#blik-modal .pay-info { border: 1px solid rgba(148, 163, 184, .25); border-radius: .8rem; padding: .8rem 1rem; background: rgba(0, 10, 28, .45); font-size: 13.5px; line-height: 1.5; color: #cbd5e1; }
#blik-modal .pay-info p + p { margin-top: .2rem; }
#blik-modal .pay-info b { color: #fff; font-weight: 600; }
#blik-modal .pay-info a, #blik-modal .pay-disclaimer a { color: var(--gold-300, #f6d58a); text-decoration: underline; text-underline-offset: 3px; }
#blik-modal .pay-disclaimer { font-size: 12.5px; line-height: 1.5; color: #94a3b8; }
#blik-modal .pay-option-body { display: flex; flex-direction: column; gap: .2rem; width: 100%; }
#blik-modal .pay-option-top { display: flex; justify-content: space-between; gap: 1rem; color: #f8fafc; }
#blik-modal .pay-option small { color: #94a3b8; font-size: .8rem; }
#blik-modal .pay-price { color: var(--gold-300); font-weight: 700; white-space: nowrap; }
#blik-modal .pay-badge { align-self: flex-start; margin-top: .3rem; font-size: .7rem; font-weight: 700; color: #052e1c; background: #34d399; padding: .1rem .5rem; border-radius: 999px; }
#pay-summary { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; border-radius: .7rem; background: rgba(229, 179, 82, .08); border: 1px solid rgba(229, 179, 82, .3); font-size: .9rem; }
#pay-summary b { color: var(--gold-300); }

/* ---------- FAQ / akordeony ---------- */
details.acc > summary { list-style: none; cursor: pointer; }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary .chev { transition: transform .2s; }
details.acc[open] > summary .chev { transform: rotate(180deg); }

/* ---------- Wykres kalkulatora ---------- */
.bar-a { fill: #3b82f6; }
.bar-b { fill: #e5b352; }
.grid-line { stroke: rgba(148, 163, 184, .15); }

/* ---------- Toast ---------- */
#toast { transition: opacity .25s, transform .25s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* ---------- Postęp PDF ---------- */
#pdf-progress { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =====================================================================
 * SZABLONY PDF (renderowane przez html2canvas – zwykły CSS, bez Tailwind)
 * ===================================================================== */
.pdf-root, .pdf-page { color: #0f172a; font-family: Inter, Arial, Helvetica, sans-serif; font-size: 11.5px; line-height: 1.55; letter-spacing: 0; text-align: left; }
.pdf-page { background: #fff; position: relative; box-sizing: border-box; overflow: hidden; }
.pdf-root *, .pdf-page * { box-sizing: border-box; }
.pdf-body { height: 100%; }
.pdf-blk { padding-bottom: 10px; display: flow-root; }
.pdf-blk > :first-child { margin-top: 0 !important; }
.pdf-blk > :last-child { margin-bottom: 0 !important; }
.pdf-h1 { font-family: Inter, Arial, sans-serif; font-weight: 700; font-size: 15px; text-align: center; line-height: 1.35; margin: 0; letter-spacing: .01em; color: #0b1f44; }
.pdf-mt { margin-top: 8px !important; }
.pdf-sub { text-align: center; color: #334155; margin: 4px 0 0; font-size: 10.5px; }
.pdf-h3 { font-size: 11.8px; font-weight: 700; margin: 6px 0 0; color: #0b1f44; border-bottom: 1px solid #e2e8f0; padding-bottom: 3px; }
.pdf-h3.pdf-center { text-align: center; border-bottom: 0; }
.pdf-p { margin: 0; text-align: justify; }
.pdf-ol { margin: 0; padding-left: 20px; list-style: decimal; }
.pdf-ol li { margin: 0 0 4px; text-align: justify; padding-left: 2px; }
.pdf-list { margin: 0; padding-left: 18px; list-style: disc; }
.pdf-list li { margin-bottom: 4px; text-align: justify; }
.pdf-table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.pdf-table th, .pdf-table td { border: 1px solid #cbd5e1; padding: 5px 7px; vertical-align: top; text-align: left; }
.pdf-table thead th { background: #eef2f7; font-weight: 600; color: #0b1f44; }
.pdf-table tfoot td { background: #f8fafc; }
.pdf-kv th { width: 40%; background: #f8fafc; font-weight: 600; color: #0b1f44; }
.pdf-small { font-size: 9.5px; }
.pdf-small th, .pdf-small td { padding: 4px 6px; }
.pdf-xs { font-size: 8.1px; line-height: 1.35; }
.pdf-xs th, .pdf-xs td { padding: 3px 4px; }
.pdf-fixed { table-layout: fixed; }
.pdf-ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdf-num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pdf-strong td { font-weight: 700; background: #fff8e6; }
.pdf-warnrow td { background: #fef2f2; }
.pdf-mono { font-family: "Courier New", Courier, monospace; font-size: .95em; }
.pdf-break { word-break: break-all; }
.pdf-note { font-size: 9.2px; color: #64748b; margin: 5px 0 0; }
.pdf-callout { border: 1px solid #cbd5e1; background: #f8fafc; border-radius: 6px; padding: 9px 12px; }
.pdf-callout-gold { border-color: #e5b352; background: #fff8e6; }
.pdf-callout-red { border-color: #fca5a5; background: #fef2f2; }
.pdf-brandbar { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #e5b352; padding-bottom: 6px; margin-bottom: 12px; font-size: 9.2px; color: #64748b; }
.pdf-brand { font-family: Poppins, Inter, sans-serif; font-weight: 700; font-size: 14px; color: #0b1f44; }
.pdf-brand b { color: #c99a3e; font-weight: 700; }
.pdf-row2 { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.pdf-sender { font-size: 11px; line-height: 1.55; max-width: 60%; }
.pdf-placedate { white-space: nowrap; }
.pdf-addressee { margin-left: 52%; margin-top: 16px; line-height: 1.55; }
.pdf-signrow { display: flex; justify-content: space-between; gap: 40px; margin-top: 30px; }
.pdf-signature { width: 240px; text-align: center; font-size: 9.8px; color: #334155; }
.pdf-sigline { border-bottom: 1px dotted #334155; height: 38px; margin-bottom: 4px; }
.pdf-blank { display: inline-block; border-bottom: 1px dotted #64748b; height: 1.05em; vertical-align: baseline; }
.pdf-foot { position: absolute; left: 64px; right: 64px; bottom: 26px; display: flex; justify-content: space-between; font-size: 8.5px; color: #94a3b8; border-top: 1px solid #e2e8f0; padding-top: 5px; }
.pdf-runhead { position: absolute; left: 64px; right: 64px; top: 24px; display: flex; justify-content: space-between; font-size: 8.5px; color: #94a3b8; }
.pdf-cont { font-size: 8.5px; color: #94a3b8; text-align: right; margin-bottom: 3px; }
.pdf-hr { border-top: 1px dashed #94a3b8; margin: 4px 0 10px; }
.pdf-muted { color: #64748b; }
.pdf-watermark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: Poppins, Inter, sans-serif; font-size: 120px; font-weight: 800; color: rgba(229, 179, 82, .16); transform: rotate(-28deg); pointer-events: none; letter-spacing: .05em; }