/* ACRA Panel — identyfikacja ACRA 2026: granat #0B1D3A, niebieski, turkus #00A3A3, zieleń #7CB342, szary. Fonty: Red Hat Display (nagłówki) + Red Hat Text (treść), decyzja usera 11.09.2026. */
:root { --c-granat: #0B1D3A; --c-niebieski: #1F5FA8; --c-turkus: #00A3A3; --c-turkus-dark: #00807F; --c-turkus-pale: #CCEBEB; --c-zielen: #7CB342; --c-zielen-pale: #E2EFD0; --c-szary: #5B6573; --c-linia: #E1E5EA; --c-tlo: #F5F7F9; --c-karta: #fff; --r: 14px; }
* { box-sizing: border-box; }
h1, h2, h3, .acra-liczba strong, .acra-saldo-duze strong, .acra-logo { font-family: "Red Hat Display", "Red Hat Text", -apple-system, sans-serif; letter-spacing: -.01em; }
body.acra { margin: 0; background: var(--c-tlo); color: #1c2430; font-family: "Red Hat Text", -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.55; }
a { color: var(--c-niebieski); }
.acra-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.acra-main { min-height: 60vh; padding-bottom: 48px; }

/* nagłówek */
.acra-naglowek { background: #fff; color: var(--c-granat); border-bottom: 1px solid var(--c-linia); position: sticky; top: 0; z-index: 20; }
.acra-naglowek-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; flex-wrap: wrap; }
.acra-logo { display: flex; align-items: center; gap: 10px; color: var(--c-granat); text-decoration: none; font-weight: 700; }
.acra-logo img { height: 36px; width: auto; }
.acra-logo-tekst { padding-left: 12px; border-left: 1px solid var(--c-linia); color: var(--c-szary); font-size: 13px; font-weight: 500; line-height: 1.2; }
.acra-logo-znak { background: var(--c-turkus); color: #fff; border-radius: 8px; padding: 4px 9px; letter-spacing: .06em; font-size: 14px; }
.acra-logo-tekst { font-weight: 500; opacity: .9; }
.acra-menu { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.acra-menu a { color: var(--c-granat); text-decoration: none; font-weight: 600; font-size: 14px; }
.acra-menu li + li::before { content: '|'; color: var(--c-linia); margin: 0 4px 0 -4px; }
.acra-menu li { list-style: none; display: inline; }
.acra-user { color: var(--c-szary); font-size: 14px; }
.acra-punkty-pigulka { background: var(--c-turkus-pale); border-radius: 999px; padding: 6px 14px; }
.acra-punkty-pigulka strong { color: var(--c-turkus-dark); }

/* przyciski */
.acra-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px; border-radius: 12px; background: var(--c-turkus); color: #fff !important; font-weight: 600; text-decoration: none !important; border: 0; cursor: pointer; transition: filter .12s; }
.acra-btn:hover { filter: brightness(1.08); }
.acra-btn-drugi { background: #fff; color: var(--c-granat) !important; border: 2px solid var(--c-linia); }
.acra-btn-cichy { background: transparent; border: 1px solid var(--c-linia); color: var(--c-granat) !important; min-height: 36px; padding: 6px 14px; font-size: 14px; }
.acra-btn-duzy { min-height: 52px; padding: 14px 28px; font-size: 17px; }

/* hero (gość) */
.acra-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; padding: 56px 0 40px; }
@media (max-width: 800px) { .acra-hero { grid-template-columns: 1fr; padding-top: 32px; } }
.acra-nadtytul { font-size: 14px; font-weight: 600; color: var(--c-turkus-dark); margin: 0 0 8px; }
.acra-hero h1, .acra-powitanie h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; margin: 0 0 14px; color: var(--c-granat); }
.acra-lead { font-size: 1.1rem; color: var(--c-szary); margin: 0 0 22px; }
.acra-akcje { display: flex; gap: 12px; flex-wrap: wrap; }
.acra-cechy { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.acra-cechy li { background: var(--c-karta); border-radius: var(--r); padding: 16px 18px; border-left: 4px solid var(--c-zielen); display: flex; flex-direction: column; gap: 2px; color: var(--c-szary); font-size: .95rem; }
.acra-cechy strong { color: var(--c-granat); font-size: 1.05rem; }

/* panel respondenta */
.acra-powitanie { padding: 36px 0 8px; }
.acra-h2 { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 600; color: var(--c-granat); margin: 32px 0 14px; }
.acra-h2::before { content: ''; width: 28px; height: 2px; background: var(--c-turkus); }
.acra-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.acra-siatka-zwarta { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.acra-badanie { background: var(--c-karta); border-radius: var(--r); padding: 20px; border: 1px solid var(--c-linia); display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 2px rgba(11,29,58,.04); }
.acra-badanie h3 { margin: 0; font-size: 1.1rem; color: var(--c-granat); line-height: 1.3; }
.acra-badanie-gora { display: flex; gap: 6px; flex-wrap: wrap; }
.acra-tag { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--c-turkus-pale); color: var(--c-turkus-dark); }
.acra-tag-punkty { background: var(--c-zielen-pale); color: #4a6f1f; }
.acra-badanie-opis { margin: 0; color: var(--c-szary); font-size: .95rem; }
.acra-badanie-meta { margin: 0; font-size: .85rem; color: var(--c-szary); }
.acra-badanie-akcja { margin: auto 0 0; padding-top: 6px; }
.acra-badanie-w_toku { border-left: 4px solid var(--c-niebieski); }
.acra-badanie-ukonczone { opacity: .85; }
.acra-ok { color: #4a6f1f; font-weight: 600; }
.acra-pusto-tekst { color: var(--c-szary); background: var(--c-karta); border: 1px dashed var(--c-linia); border-radius: var(--r); padding: 24px; text-align: center; }
.acra-lista-wynikow { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.acra-lista-wynikow li { background: var(--c-karta); border: 1px solid var(--c-linia); border-radius: 10px; padding: 12px 16px; display: flex; justify-content: space-between; gap: 12px; }
.acra-lista-wynikow span { color: var(--c-szary); font-size: .9rem; }

/* strony */
.acra-strona, .acra-karta { background: var(--c-karta); border-radius: var(--r); padding: 32px; margin-top: 32px; border: 1px solid var(--c-linia); }
.acra-strona h1, .acra-karta h1 { margin-top: 0; color: var(--c-granat); }
.acra-pusto { text-align: center; }
.fb3g-punkty { --akcent: var(--c-turkus); }

/* stopka */
.acra-stopka { background: var(--c-granat); color: rgba(255,255,255,.8); font-size: 13px; }
.acra-stopka-marki { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .acra-stopka-marki img { height: 34px; width: auto; display: block; } .acra-stopka-kreska { width: 1px; height: 28px; background: rgba(255,255,255,.25); }
.acra-stopka-menu { display: flex; gap: 18px; flex-wrap: wrap; } .acra-stopka-menu li { list-style: none; display: inline; } .acra-stopka-menu a { text-decoration: none; font-weight: 600; font-size: 13px; }
.acra-stopka-in { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 20px; }
.acra-stopka a { color: #fff; }

/* ekran logowania WP (wp-login.php: logowanie, reset hasła, aktywacja) w identyfikacji ACRA */
body.login { background: var(--c-tlo); font-family: "Red Hat Text", -apple-system, sans-serif; }
body.login #login { padding-top: 6vh; width: 400px; max-width: calc(100% - 32px); }
body.login #login h1 a { background: url("../assets/img/logo/acra.svg") no-repeat center / contain; width: 200px; height: 68px; margin: 0 auto 20px; text-indent: -9999px; overflow: hidden; }
body.login form { background: #fff; border: 1px solid var(--c-linia); border-radius: 14px; box-shadow: 0 10px 30px -22px rgba(11,29,58,.35); padding: 28px; }
body.login label { color: var(--c-granat); font-weight: 600; font-size: .9rem; }
body.login .input, body.login input[type=text], body.login input[type=password] { border: 2px solid var(--c-linia); border-radius: 12px; padding: 10px 14px; font-size: 16px; box-shadow: none; font-family: inherit; }
body.login .input:focus, body.login input[type=text]:focus, body.login input[type=password]:focus { border-color: var(--c-turkus); box-shadow: 0 0 0 3px var(--c-turkus-pale); }
body.login .button-primary { background: var(--c-turkus); border: 0; border-radius: 12px; min-height: 44px; padding: 0 22px; font-weight: 600; font-family: inherit; text-shadow: none; box-shadow: none; }
body.login .button-primary:hover, body.login .button-primary:focus { background: var(--c-turkus-dark); }
body.login .wp-pwd .button.wp-hide-pw { color: var(--c-szary); } body.login .wp-pwd .button.wp-hide-pw:focus { box-shadow: none; }
body.login #nav, body.login #backtoblog { text-align: center; padding: 0; } body.login #nav a, body.login #backtoblog a { color: var(--c-turkus-dark); }
body.login .notice, body.login #login_error, body.login .message { border-left: 0; border-radius: 12px; box-shadow: none; padding: 12px 16px; }
body.login #login_error { background: #fde8e8; color: #b42318; } body.login .message { background: var(--c-turkus-pale); color: var(--c-granat); }
body.login .language-switcher { display: none; }
body.login .privacy-policy-page-link { text-align: center; } body.login .privacy-policy-page-link a { color: var(--c-szary); }

/* ===== landing w identyfikacji ACRA (brandbook 11.09.2026) ===== */
body.acra.home:not(.logged-in) .acra-main { min-height: 0; padding-bottom: 0; }
body.acra.home:not(.logged-in) main[hidden] { display: none; }
.acra-btn-obrys { background: transparent; border: 2px solid var(--c-turkus); color: #fff !important; }
.acra-btn-obrys:hover { background: rgba(0,163,163,.15); }
.acra-etykieta { display: flex; align-items: center; gap: 10px; color: var(--c-turkus-dark); font-weight: 600; font-size: 13px; margin: 0 0 8px; }
.acra-etykieta::before { content: ''; width: 28px; height: 2px; background: var(--c-turkus); }
/* hero granatowy z siatką punktów i pierścieniem znaku */
.acra-hero-granat { position: relative; background: var(--c-granat); color: #fff; overflow: hidden; }
.acra-siec { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; pointer-events: none; }
.acra-hero-in { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; padding: 64px 20px 72px; }
.acra-hero-granat h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.1; margin: 0 0 18px; }
.acra-hero-haslo { font-family: "Red Hat Display", sans-serif; font-size: 1.35rem; font-weight: 600; margin: 0 0 14px; }
.acra-hero-haslo span { color: var(--c-turkus-light); display: block; }
.acra-hero-opis { color: rgba(255,255,255,.82); max-width: 52ch; margin: 0 0 28px; }
.acra-pierscien { position: relative; width: min(100%, 420px); aspect-ratio: 1; margin: 0 auto; }
.acra-pierscien svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: acra-obrot 40s linear infinite; }
.acra-obszary { position: absolute; inset: 15%; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acra-obszary li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.acra-obszary .acra-ikona { width: 60px; height: 60px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.6), 0 8px 20px -8px rgba(0,0,0,.5); background: var(--o); }
@media (max-width: 800px) { .acra-hero-in { grid-template-columns: 1fr; padding: 40px 20px 48px; } .acra-pierscien { width: min(100%, 300px); } }
@keyframes acra-obrot { to { transform: rotate(360deg); } }
/* pętla procesu – kolory obszarów */
.acra-sekcja { padding: 56px 0 8px; }
.acra-sekcja h2 { color: var(--c-granat); font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 12px; line-height: 1.2; }
.acra-lead { max-width: 72ch; }
.acra-petla { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; position: relative; }
.acra-petla::before { content: ''; position: absolute; left: 10%; right: 10%; top: 36px; border-top: 2px dashed var(--c-linia); z-index: 0; }
.acra-petla li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; font-size: .9rem; color: var(--c-szary); }
.acra-petla .acra-ikona { width: 72px; height: 72px; border-radius: 50%; box-shadow: 0 0 0 6px #fff; transition: transform .25s; }
.acra-petla li:hover .acra-ikona { transform: translateY(-4px); }
.acra-petla strong { color: var(--o, var(--c-granat)); font-size: 1rem; margin-top: 6px; }
@media (max-width: 900px) { .acra-petla { grid-template-columns: repeat(2, 1fr); } .acra-petla::before { display: none; } }
/* pary tekst + fotografia */
.acra-para { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.acra-para-odwrotnie { grid-template-columns: 1fr 1.2fr; }
.acra-para-tekst p { color: var(--c-szary); max-width: 54ch; } .acra-mala { font-size: .92rem; }
.acra-para figure { justify-self: center; margin: 0; } .acra-foto-wysuw img { display: block; width: 100%; max-width: 400px; height: auto; }
.acra-pille { display: flex; gap: 8px; flex-wrap: wrap; } .acra-pille span { background: var(--c-zielen-pale); color: #4a6f1f; border-radius: 999px; padding: 6px 14px; font-size: .88rem; font-weight: 600; }
@media (max-width: 800px) { .acra-para, .acra-para-odwrotnie { grid-template-columns: 1fr; } .acra-para-odwrotnie figure { order: 2; } }
/* pas gwarancji – jak dolny pas strony raportów z moodboardu */
.acra-pas { background: #fff; border-top: 1px solid var(--c-linia); border-bottom: 1px solid var(--c-linia); margin-top: 56px; }
.acra-pas-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 28px 20px; }
.acra-pas-in > div { display: flex; gap: 14px; align-items: flex-start; padding: 0 24px; font-size: .92rem; color: var(--c-szary); }
.acra-pas-in > div + div { border-left: 1px solid var(--c-linia); }
.acra-pas-in strong { display: block; color: var(--c-granat); margin-bottom: 4px; }
.acra-pas .acra-ikona { width: 52px; height: 52px; flex: none; }
@media (max-width: 800px) { .acra-pas-in { grid-template-columns: 1fr; gap: 18px; } .acra-pas-in > div { padding: 0; } .acra-pas-in > div + div { border-left: 0; border-top: 1px solid var(--c-linia); padding-top: 18px; } }
/* CTA granat z sygnetem */
.acra-cta-granat { position: relative; background: var(--c-granat); color: #fff; overflow: hidden; }
.acra-cta-sygnet { position: absolute; right: -80px; top: -120px; width: 420px; height: auto; opacity: .35; pointer-events: none; }
.acra-cta-in { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 56px 20px; }
.acra-cta-in h2 { color: #fff; margin: 0 0 6px; font-size: clamp(1.5rem, 3vw, 2.1rem); } .acra-cta-in p { margin: 0; color: rgba(255,255,255,.8); }
/* strony wewnętrzne */
.acra-formularz { max-width: 440px; margin: 40px auto; background: var(--c-karta); border: 1px solid var(--c-linia); border-radius: var(--r); padding: 32px; }
.acra-formularz h1 { color: var(--c-granat); margin: 0 0 6px; }
.acra-formularz label { display: block; font-weight: 600; font-size: .9rem; margin: 12px 0 4px; }
.acra-formularz input[type=text], .acra-formularz input[type=password] { width: 100%; padding: 12px 14px; border: 2px solid var(--c-linia); border-radius: 12px; font: inherit; }
.acra-formularz input:focus { outline: none; border-color: var(--c-turkus); }
.acra-formularz .login-remember label { font-weight: 400; display: flex; gap: 8px; align-items: center; }
.acra-formularz input[type=submit] { width: 100%; margin-top: 12px; min-height: 50px; border: 0; border-radius: 12px; background: var(--c-turkus); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.acra-blad { background: #fde8e8; color: #b42318; padding: 10px 12px; border-radius: 10px; }
.acra-mini { font-size: .9rem; color: var(--c-szary); margin-top: 14px; }
.acra-dwie { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 24px; }
@media (max-width: 760px) { .acra-dwie { grid-template-columns: 1fr; } }
.acra-dl { display: grid; grid-template-columns: 160px 1fr; gap: 6px 12px; margin: 12px 0; }
.acra-dl dt { color: var(--c-szary); font-size: .9rem; } .acra-dl dd { margin: 0; font-weight: 500; }
.acra-saldo-duze { font-size: 1.1rem; color: var(--c-szary); } .acra-saldo-duze strong { font-size: 2.6rem; color: var(--c-turkus-dark); font-variant-numeric: tabular-nums; }
/* animacje */
.acra-anim { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.acra-anim.acra-widoczne { opacity: 1; transform: none; }
.acra-anim .acra-foto-wysuw { opacity: 0; transform: translateX(40px); transition: opacity .7s ease .15s, transform .7s cubic-bezier(.2,.8,.2,1) .15s; }
.acra-para-odwrotnie .acra-foto-wysuw { transform: translateX(-40px); }
.acra-anim.acra-widoczne .acra-foto-wysuw { opacity: 1; transform: none; }
.acra-petla li { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.acra-anim.acra-widoczne .acra-petla li { opacity: 1; transform: none; }
.acra-anim.acra-widoczne .acra-petla li:nth-child(2) { transition-delay: .1s; } .acra-anim.acra-widoczne .acra-petla li:nth-child(3) { transition-delay: .2s; } .acra-anim.acra-widoczne .acra-petla li:nth-child(4) { transition-delay: .3s; } .acra-anim.acra-widoczne .acra-petla li:nth-child(5) { transition-delay: .4s; }
.acra-badanie { transition: transform .2s, box-shadow .2s; } .acra-badanie:hover { transform: translateY(-3px); box-shadow: 0 12px 26px -14px rgba(11,29,58,.35); }
.acra-btn { transition: filter .12s, transform .12s; } .acra-btn:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { .acra-anim, .acra-anim .acra-foto-wysuw, .acra-petla li { opacity: 1; transform: none; transition: none; } .acra-pierscien svg { animation: none; } }

.acra-badanie-obraz { width: calc(100% + 40px); margin: -20px -20px 6px; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--r) var(--r) 0 0; display: block; }
.acra-badanie-niedostepne { opacity: .8; } .acra-badanie-powod { color: var(--c-szary); font-size: .9rem; }
/* ===== strony wewnętrzne w identyfikacji ACRA ===== */
.acra-naglowek-strony { position: relative; overflow: hidden; margin: 0 -20px; padding: 40px 20px 28px; background: #fff; border-bottom: 1px solid var(--c-linia); }
@media (min-width: 1160px) { .acra-naglowek-strony { margin: 0 calc(50% - 50vw); padding-left: calc(50vw - 560px); padding-right: calc(50vw - 560px); } }
.acra-naglowek-sygnet { position: absolute; right: -60px; top: -110px; width: 260px; height: auto; opacity: .12; pointer-events: none; }
.acra-naglowek-strony h1 { color: var(--c-granat); font-size: clamp(1.8rem, 3.6vw, 2.4rem); margin: 0 0 8px; line-height: 1.15; }
.acra-naglowek-strony .acra-lead { margin: 0; max-width: 64ch; }
.acra-saldo-pasek { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 18px 0 0; color: var(--c-szary); }
.acra-saldo-pasek strong { color: var(--c-turkus-dark); font-family: "Red Hat Display", sans-serif; font-size: 1.3rem; }
.acra-karta { margin-top: 24px; }
.acra-karta h2 { color: var(--c-granat); font-size: 1.3rem; margin: 0 0 10px; }
.acra-karta-cicha { background: var(--c-turkus-pale); border-color: transparent; } .acra-karta-cicha a { color: var(--c-turkus-dark); font-weight: 600; }
.acra-para-kontakt { grid-template-columns: 1.4fr 1fr; align-items: start; }
.acra-dokument { max-width: 800px; line-height: 1.7; } .acra-dokument p { margin: 0 0 12px; } .acra-dokument b, .acra-dokument strong { color: var(--c-granat); } .acra-dokument ol { padding-left: 22px; }
.acra-tresc a { color: var(--c-turkus-dark); }
.acra-logowanie { display: grid; grid-template-columns: 440px 1fr; gap: 40px; align-items: center; padding: 40px 0; }
.acra-logowanie .acra-formularz { margin: 0; }
.acra-logowanie-obok { color: var(--c-szary); max-width: 40ch; } .acra-logowanie-obok img { width: 120px; height: auto; margin-bottom: 14px; } .acra-logowanie-obok h2 { color: var(--c-turkus-dark); font-size: 1.5rem; margin: 0 0 8px; }
@media (max-width: 860px) { .acra-logowanie { grid-template-columns: 1fr; } .acra-logowanie-obok { display: none; } .acra-para-kontakt { grid-template-columns: 1fr; } }
.acra-strona .fb3g-app, .acra-karta .fb3g-app { margin: 0; }
.fb3g-punkty { --akcent: var(--c-turkus-dark); } .fb3g-p-saldo { background: var(--c-turkus-pale); } .fb3g-p-liczba { font-family: "Red Hat Display", sans-serif; }

/* karta badania w całości klikalna */
.acra-badanie { position: relative; } .acra-badanie-link::after { content: ''; position: absolute; inset: 0; border-radius: var(--r); }
.acra-badanie:has(.acra-badanie-link):hover { border-color: var(--c-turkus); } .acra-badanie-link:focus-visible::after { outline: 3px solid var(--c-turkus-pale); }

/* pasek postępu na karcie niedokończonego badania */
.acra-postep { height: 6px; background: var(--c-linia); border-radius: 3px; overflow: hidden; margin: 4px 0 6px; }
.acra-postep span { display: block; height: 100%; background: var(--c-turkus); border-radius: 3px; transition: width .6s ease; }