/* =========================================================================
   NASZPIKOWANI - Portal zbiórek - design system
   Primary brand red #C7030F. Humanist friendly sans (Hanken Grotesk).
   Recreated pixel-perfect from the approved design.
   ========================================================================= */
:root{
  /* brand */
  --red:        #C7030F;
  --red-700:    #9E0309;
  --red-800:    #7C0207;
  --red-100:    #FBDDDD;
  --red-50:     #FDEDEC;

  /* neutral grays - clean, modern */
  --bg:         #F5F5FA;   /* light neutral page */
  --surface:    #FFFFFF;
  --surface-2:  #FAFAFA;
  --ink:        #18191B;   /* near-black */
  --ink-2:      #5B5E64;   /* neutral gray text */
  --ink-3:      #9397A0;   /* faint */
  --line:       #E7E8EA;   /* hairline */
  --line-2:     #D8DADE;

  /* support */
  --success:    #1F8A5B;
  --success-bg: #E6F4EC;
  --amber:      #C98A12;

  /* shape */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(60,30,20,.06), 0 1px 3px rgba(60,30,20,.05);
  --shadow:    0 4px 16px rgba(80,30,20,.07), 0 2px 6px rgba(80,30,20,.05);
  --shadow-lg: 0 18px 50px rgba(90,30,20,.13), 0 6px 18px rgba(90,30,20,.07);

  --maxw: 1180px;
  --font: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; color:inherit; -webkit-tap-highlight-color:transparent; }
img{ max-width:100%; display:block; }
::selection{ background:var(--red-100); }
h1,h2,h3,h4{ margin:0; line-height:1.08; letter-spacing:-.02em; font-weight:800; }
p{ margin:0; }
input,select,textarea{ font-family:inherit; }

/* ---- layout ---- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section{ padding:72px 0; }
.center{ text-align:center; }
.eyebrow{
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--red); display:inline-flex; align-items:center; gap:8px;
}
.muted{ color:var(--ink-2); }
.faint{ color:var(--ink-3); }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:none; border-radius:999px; font-weight:700; font-size:16px;
  padding:14px 26px; transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
  white-space:nowrap; text-decoration:none;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--red); color:#fff; }
.btn-primary:hover{ background:var(--red-700); }
.btn-primary:disabled{ opacity:.5; cursor:not-allowed; }
.btn-ghost{ background:var(--surface); color:var(--ink); border:1.5px solid var(--line-2); }
.btn-ghost:hover{ border-color:var(--red); color:var(--red); }
.btn-ghost:disabled{ opacity:.45; cursor:not-allowed; }
.btn-soft{ background:var(--red-50); color:var(--red-700); }
.btn-soft:hover{ background:var(--red-100); }
.btn-lg{ padding:17px 34px; font-size:17px; }
.btn-sm{ padding:9px 16px; font-size:14px; }
.btn-block{ width:100%; }
.btn svg{ display:block; }   /* ikony bez przesunięcia względem linii bazowej */

/* ---- chips / badges ---- */
.chip{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  padding:5px 11px; border-radius:999px; background:var(--surface-2);
  color:var(--ink-2); border:1px solid var(--line);
}
.chip-red{ background:var(--red-50); color:var(--red-700); border-color:var(--red-100); }
.chip-trust{ background:var(--success-bg); color:var(--success); border-color:#BFE6D2; }
button.chip{ transition:background .14s, border-color .14s, color .14s; }
button.chip:not(.chip-red):not(.chip-trust):hover{ background:var(--surface-2); border-color:var(--ink-3); color:var(--ink); }
.badge-urgent{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800;
  letter-spacing:.03em; padding:5px 11px; border-radius:999px;
  background:var(--red); color:#fff; text-transform:uppercase;
}
.badge-urgent::before{ content:""; width:6px; height:6px; border-radius:50%; background:#fff; animation:pulse 1.4s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }

/* ---- styled select ---- */
.np-select{ position:relative; display:inline-flex; align-items:center; }
.np-select select{ appearance:none; -webkit-appearance:none; background:var(--surface); border:1.5px solid var(--line-2);
  border-radius:10px; padding:9px 38px 9px 14px; font:700 14px var(--font); color:var(--ink); cursor:pointer; }
.np-select select:hover{ border-color:var(--red); }
.np-select select:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 4px var(--red-50); }
.np-select svg{ position:absolute; right:12px; color:var(--ink-2); pointer-events:none; }

/* ---- progress ---- */
.progress{ height:9px; border-radius:999px; background:var(--red-50); overflow:hidden; }
.progress > i{ display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--red),var(--red-700)); transition:width 1s cubic-bezier(.2,.7,.2,1); }
/* cel osiągnięty - pasek (i %) na zielono */
.progress.funded > i{ background:linear-gradient(90deg,var(--success),#157a4e); }
.fstats .pct.funded{ color:var(--success); }

/* ---- cards ---- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }

/* neutral placeholder (no photo) */
.cover.ph{ background:repeating-linear-gradient(135deg,#ECECEE 0 14px,#E5E5E8 14px 28px); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; color:#A9ACB3; }
.cover.ph svg{ opacity:.7; }
.cover.ph span{ font:600 12px/1 ui-monospace,monospace; letter-spacing:.02em; }

/* image frame with blurred side-fill (adapts square/vertical to horizontal) */
.imgframe{ background:#EAEAEC; }
.imgframe-bg{ position:absolute; inset:0; background-size:cover; background-position:center;
  filter:blur(24px) saturate(1.15) brightness(1.02); transform:scale(1.2); }
.imgframe-fg{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }

/* carousel arrows */
.caro-btn{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:40px; height:40px; border-radius:50%;
  border:none; cursor:pointer; background:rgba(255,255,255,.92); color:var(--ink); display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.18); transition:.15s; }
.caro-btn:hover{ background:#fff; color:var(--red); }
.caro-track{ display:flex; width:100%; height:100%; transition:transform .5s cubic-bezier(.4,.0,.2,1); }
@media (prefers-reduced-motion: reduce){
  .caro-track{ transition:none !important; }
}

/* logo tagline */
.logo-sub{ font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }

/* ---- cover ---- */
.cover{ position:relative; border-radius:inherit; overflow:hidden; isolation:isolate; width:100%; }

/* ---- header ---- */
.hdr{ position:sticky; top:0; z-index:50; background:#FFFFFF; border-bottom:1px solid var(--line); }
.hdr-row{ display:flex; align-items:center; gap:28px; height:70px; }
.nav{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.nav a{ padding:9px 14px; border-radius:999px; font-weight:600; font-size:15px; color:var(--ink-2); transition:.15s; }
.nav a:hover{ color:var(--ink); background:var(--surface-2); }
.nav a.active{ color:var(--red); }
.hdr-cta{ display:flex; align-items:center; gap:10px; }

/* logo */
.logo{ display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:20px; letter-spacing:-.02em; }

/* ---- mobile nav ---- */
.hamb{ display:none; margin-left:auto; width:44px; height:44px; border-radius:12px; border:1px solid var(--line-2);
  background:var(--surface); align-items:center; justify-content:center; }
.hamb svg{ width:22px; height:22px; }
.msheet{ position:fixed; inset:0; z-index:60; background:rgba(35,20,15,.4); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:.2s; overflow:hidden; }
.msheet.open{ opacity:1; pointer-events:auto; }
.msheet-inner{ position:absolute; top:0; right:0; height:100%; width:min(86vw,340px); background:var(--bg);
  transform:translateX(100%); transition:.26s cubic-bezier(.3,.7,.2,1); padding:18px; display:flex; flex-direction:column; gap:6px; }
.msheet.open .msheet-inner{ transform:none; }
.msheet a{ padding:15px 14px; border-radius:14px; font-weight:600; font-size:18px; }
.msheet a:hover{ background:var(--surface); }

/* ---- footer ---- */
.ftr{ background:#0F0F11; color:#E6E7E9; padding:60px 0 28px; margin-top:40px; }
.ftr a{ color:#C7C9CD; }
.ftr a:hover{ color:#fff; }
.ftr h5{ font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:#8A8F96; margin:0 0 16px; font-weight:700; }
.ftr ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; font-size:15px; }
.ftr-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:44px; padding-top:22px;
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:13.5px; color:#8A8F96; }

/* ---- fundraiser card ---- */
.fgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.fcard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:box-shadow .25s ease, border-color .2s ease; cursor:pointer; }
.fcard:hover{ box-shadow:var(--shadow-lg); border-color:var(--line-2); }
.fcard .fcover{ aspect-ratio:16/10; position:relative; }
.fcard .fcover .imgframe-fg{ transition:transform .4s ease; }
.fcard:hover .fcover .imgframe-fg{ transform:scale(1.05); }
.fcard .fbody{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:12px; flex:1; }
.fcard h3{ font-size:18.5px; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.4em; }
.fmeta{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); font-weight:600; }
.fstats{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.fstats .big{ font-size:19px; font-weight:800; color:var(--ink); }
.fstats .pct{ font-size:14px; font-weight:800; color:var(--red); }

/* ---- generic form ---- */
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:14px; font-weight:700; color:var(--ink); }
.input{ width:100%; border:1.5px solid var(--line-2); border-radius:12px; padding:13px 15px; font-size:16px;
  font-family:inherit; color:var(--ink); background:var(--surface); transition:.15s; }
.input:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 4px var(--red-50); }
textarea.input{ resize:vertical; min-height:90px; }

/* ---- amount picker ---- */
.amt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.amt{ border:1.5px solid var(--line-2); background:var(--surface); border-radius:14px; padding:16px 8px;
  font-size:20px; font-weight:800; color:var(--ink); transition:.14s; position:relative; }
.amt:hover{ border-color:var(--red); }
.amt.on{ border-color:var(--red); background:var(--red-50); color:var(--red-700); box-shadow:0 0 0 3px var(--red-50); }

/* ---- pay method ---- */
.pm{ display:flex; align-items:center; gap:14px; border:1.5px solid var(--line-2); border-radius:14px; padding:15px 16px;
  background:var(--surface); transition:.14s; cursor:pointer; width:100%; text-align:left; }
.pm:hover{ border-color:var(--red); }
.pm.on{ border-color:var(--red); background:var(--red-50); }
.pm .pm-logo{ width:86px; height:46px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:5px 8px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.07); background:#fff; }
.pm .pm-t{ font-weight:700; font-size:15.5px; }
.pm .pm-s{ font-size:13px; color:var(--ink-2); }
.pm .pm-radio{ margin-left:auto; width:22px; height:22px; border-radius:50%; border:2px solid var(--line-2); flex:none; position:relative; }
.pm.on .pm-radio{ border-color:var(--red); }
.pm.on .pm-radio::after{ content:""; position:absolute; inset:4px; border-radius:50%; background:var(--red); }

/* ---- donor feed ---- */
.donor-row{ display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }
.donor-av{ width:38px; height:38px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; color:var(--red-700); background:var(--red-50); }

/* ---- admin ---- */
.admin{ display:grid; grid-template-columns:248px 1fr; min-height:100vh; background:var(--surface-2); }
.aside{ background:#0F0F11; color:#E6E7E9; padding:22px 16px; display:flex; flex-direction:column; gap:4px; position:sticky; top:0; height:100vh; }
.aside .a-item{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; font-weight:600; font-size:15px; color:#A6AAB1; transition:.14s; }
.aside .a-item:hover{ background:rgba(255,255,255,.07); color:#fff; }
.aside .a-item.on{ background:var(--red); color:#fff; }
.aside .a-item svg{ width:19px; height:19px; flex:none; }
.amain{ padding:30px 34px 60px; overflow:auto; }
.admin-topbar{ display:none; align-items:center; gap:12px; padding:12px 16px; margin:-30px -34px 22px; background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; }
.acards{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.acard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px; box-shadow:var(--shadow-sm); }
.acard .k{ font-size:13px; font-weight:600; color:var(--ink-2); }
.acard .v{ font-size:30px; font-weight:800; margin-top:6px; letter-spacing:-.02em; }
.acard .d{ font-size:12.5px; font-weight:700; margin-top:6px; }
.up{ color:var(--success); } .down{ color:var(--red); }

.tbl{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.tbl th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); font-weight:700;
  padding:13px 16px; background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl td{ padding:13px 16px; border-bottom:1px solid var(--line); font-size:14.5px; }
.tbl tr:last-child td{ border-bottom:none; }
.tbl tr:hover td{ background:var(--surface-2); }
.pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; }
.pill.ok{ background:var(--success-bg); color:var(--success); }
.pill.wait{ background:#FBF0DA; color:var(--amber); }
.pill.ref{ background:var(--red-50); color:var(--red-700); }
.pill.draft{ background:#ECECEC; color:#6b6b6b; }

.toggle{ width:44px; height:26px; border-radius:999px; background:var(--line-2); position:relative; transition:.18s; flex:none; border:none; display:inline-block; }
.toggle.on{ background:var(--success); }
.toggle::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:.18s; }
.toggle.on::after{ transform:translateX(18px); }

/* ---- rich text editor (admin) ---- */
.rte-wrap{ border:1.5px solid var(--line-2); border-radius:12px; overflow:hidden; }
.rte-toolbar{ display:flex; flex-wrap:wrap; gap:4px; padding:8px 10px; border-bottom:1px solid var(--line); background:var(--surface-2); align-items:center; }
.rte-btn{ min-width:32px; height:32px; padding:0 9px; border-radius:7px; border:1px solid var(--line); background:#fff; font-size:14px; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:.12s; }
.rte-btn:hover{ border-color:var(--red); color:var(--red); }
.rte-btn.on{ background:var(--red-50); border-color:var(--red); color:var(--red-700); }
.rte-sep{ width:1px; align-self:stretch; background:var(--line); margin:2px 4px; }
.rte-color{ width:32px; height:32px; padding:0; border:1px solid var(--line); border-radius:7px; background:#fff; cursor:pointer; }
.rte-editor{ min-height:170px; padding:14px 15px; font-size:16px; line-height:1.7; color:var(--ink); outline:none; background:var(--surface); }
.rte-editor:focus{ box-shadow:inset 0 0 0 2px var(--red-50); }
.rte-editor:empty::before{ content:attr(data-placeholder); color:var(--ink-3); }

/* ---- rendered rich content (front + editor) ---- */
.rte-content h2, .rte-editor h2{ font-size:19px; font-weight:800; letter-spacing:-.01em; color:var(--ink); margin:1em 0 .35em; line-height:1.25; }
.rte-content h3, .rte-editor h3{ font-size:16.5px; font-weight:800; letter-spacing:-.01em; color:var(--ink); margin:1em 0 .3em; line-height:1.3; }
.rte-content h2:first-child, .rte-content h3:first-child, .rte-editor h2:first-child, .rte-editor h3:first-child{ margin-top:0; }
.rte-content p, .rte-editor p{ margin:0 0 .8em; }
.rte-content ul, .rte-content ol, .rte-editor ul, .rte-editor ol{ margin:.4em 0 .9em; padding-left:1.4em; }
.rte-content li, .rte-editor li{ margin:.2em 0; }
.rte-content a, .rte-editor a{ color:var(--red); font-weight:600; text-decoration:underline; }
.rte-content .embed-16x9, .rte-editor .embed-16x9{ position:relative; width:100%; max-width:660px; aspect-ratio:16/9; margin:16px 0; background:#000; border-radius:12px; overflow:hidden; }
.rte-content .embed-16x9 iframe, .rte-editor .embed-16x9 iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
/* osadzenia/treść opisu nie mogą rozpychać strony w poziomie (mobile) */
.rte-content, .rte-editor{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.rte-content > *, .rte-editor > *{ max-width:100%; }
.rte-content img, .rte-content iframe, .rte-content video, .rte-content table,
.rte-editor img, .rte-editor iframe, .rte-editor video, .rte-editor table{ max-width:100%; }
.rte-content :not(pre){ overflow-wrap:anywhere; word-break:break-word; }

/* ---- misc ---- */
.divider{ height:1px; background:var(--line); border:none; margin:0; }
/* widget "Zebrano łącznie": desktop w nagłówku, mobile pod siatką (pełna szerokość) */
.total-widget-mobile{ display:none; }
@media (max-width:760px){
  .total-widget-desktop{ display:none; }
  .total-widget-mobile{ display:block; }
}

.page-enter{ animation:pageIn .4s ease both; }
@keyframes pageIn{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

/* ---- modal ---- */
.modal-scrim{ position:fixed; inset:0; z-index:90; background:rgba(35,20,15,.5); display:flex; align-items:center; justify-content:center; padding:20px; }
.drawer-scrim{ position:fixed; inset:0; z-index:80; background:rgba(35,20,15,.45); display:flex; justify-content:flex-end; }

/* ---- responsive ---- */
@media (max-width:1000px){
  .fgrid{ grid-template-columns:repeat(2,1fr); }
  .acards{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px){
  .nav{ display:none; }
  .hamb{ display:inline-flex; margin-left:auto; }
  .hdr-row{ gap:12px; }
  .admin{ grid-template-columns:1fr; }
  .aside{ position:fixed; left:0; top:0; z-index:70; transform:translateX(-100%); transition:.24s; width:264px; box-shadow:var(--shadow-lg); }
  .aside.open{ transform:none; }
  .amain{ padding:0 18px 60px; }
  .admin-topbar{ display:flex; margin:0 -18px 20px; }
}
.admin-scrim{ display:block; }
@media (min-width:821px){ .admin-scrim{ display:none; } }
@media (max-width:680px){
  .section{ padding:48px 0; }
  .wrap{ padding:0 18px; }
  .fgrid{ grid-template-columns:1fr; }
  .acards{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  [data-stack]{ grid-template-columns:minmax(0,1fr) !important; }
}
@media (max-width:460px){
  .acards{ grid-template-columns:1fr; }
}