/* ===========================
   SOOCIALY - SHARED CSS (sool.css)
   uzywany w kazdej podstronie
   =========================== */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

:root {
  --navy: #15356E;
  --navy-dark: #0E2347;
  --navy-light: #234B94;
  --whatsapp: #25D366;
  --section-bg: #F7F9FC;
  --brand: #F2B033;
  --brand-dark: #D49718;
  --brand-light: #D4891A;
  --brand-bg: #FEF6E0;
  --black: #0A0A0A;
  --gray-900: #1A1A1A;
  --gray-800: #2A2A2A;
  --gray-700: #444;
  --gray-500: #888;
  --gray-300: #E5E5E5;
  --gray-200: #EFEFEF;
  --gray-100: #F7F7F7;
  --gray-50: #FAFAFA;
  --white: #FFFFFF;
  --green: #00C271;
  --red: #E74C3C;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--black);
  line-height: 1.5;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 960px; margin: 0 auto; padding: 0 24px; }
.container--md { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* === HEADER (CIEMNY MOTYW - czarne tlo, pomarancz akcent) === */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 10, 0.96);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 24px;
}

.logo {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #fff;
  text-decoration: none;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.logo span { color: var(--brand); }

/* Logo PNG - obrazek ma czarny tekst na bialym tle, inwertujemy + miksuje by zostal w bieli na czarnym headerze */
.logo img {
  filter: brightness(0) invert(1);
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
  justify-content: center;
}

.nav a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s;
  position: relative;
  padding: 4px 0;
}

.nav a:hover { color: var(--brand); }

.nav a.active {
  color: #fff;
  font-weight: 600;
}

.nav a.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 2px;
  background: var(--brand);
  border-radius: 2px;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Ghost button na ciemnym tle - bialy obrys */
.header .btn--ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
}
.header .btn--ghost:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: rgba(242, 176, 51, 0.08);
}

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn--primary {
  background: var(--brand);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(242, 176, 51, 0.25);
}

.btn--primary:hover {
  background: var(--brand-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(242, 176, 51, 0.4);
}

.btn--ghost {
  background: transparent;
  color: var(--black);
  border: 1.5px solid var(--gray-300);
}

.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }

.btn--dark {
  background: var(--black);
  color: var(--white);
}

.btn--dark:hover { background: var(--gray-900); }

.btn--lg { padding: 15px 32px; font-size: 16px; }
.btn--sm { padding: 8px 16px; font-size: 13px; }
.btn--block { width: 100%; }

/* === ICONS === */
.icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-box {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--brand-bg);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
}

.icon-box .icon { width: 28px; height: 28px; }

.icon-box--sm { width: 40px; height: 40px; border-radius: 10px; }
.icon-box--sm .icon { width: 20px; height: 20px; }

.icon-box--dark { background: rgba(242, 176, 51, 0.15); color: var(--brand-light); }
.icon-box--white { background: rgba(255, 255, 255, 0.2); color: var(--white); }
.icon-box--gray { background: var(--gray-100); color: var(--gray-700); }

/* === BADGES & TAGS === */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: var(--brand-bg);
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  border-radius: 100px;
}

.badge--green { background: rgba(0, 194, 113, 0.1); color: var(--green); }
.badge--gray { background: var(--gray-100); color: var(--gray-700); }
.badge--dark { background: var(--black); color: var(--white); }

.tag-pill {
  padding: 5px 12px;
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 100px;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.tag-pill:hover { background: var(--brand); color: var(--white); }

.tag-pill.active { background: var(--brand); color: var(--white); }

/* === FORMS === */
.input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: var(--gray-100);
  border: 2px solid transparent;
  border-radius: 12px;
  transition: all 0.2s;
}

.input-wrap:focus-within {
  background: var(--white);
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(242, 176, 51, 0.1);
}

.input-wrap svg { color: var(--gray-500); flex-shrink: 0; }

.input-wrap input,
.input-wrap select,
.input-wrap textarea {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 15px;
  color: var(--black);
  font-family: inherit;
}

.input-wrap input::placeholder { color: #aaa; }

.input-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-700);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* === SECTION COMMON === */
section { padding: 96px 0; }

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}

.section-eyebrow {
  display: inline-block;
  padding: 6px 16px;
  background: var(--brand-bg);
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 100px;
  margin-bottom: 18px;
}

.section-title {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.2px;
  color: var(--black);
  margin-bottom: 14px;
}

.section-sub {
  font-size: 17px;
  color: var(--gray-700);
  line-height: 1.55;
}

.gradient {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* === PAGE HERO (dla podstron, mniejszy niz home hero) ===
   Motyw navy jak strona wzorcowa /dla-wlascicieli (.ow-hero). */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 64px 0 56px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 60%, var(--brand) 140%);
  color: #fff;
}

.page-hero::before {
  content: '';
  position: absolute;
  top: -160px;
  right: -120px;
  width: 480px;
  height: 480px;
  background: rgba(242, 176, 51, 0.25);
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}

.page-hero .container { position: relative; z-index: 2; }

.page-hero__inner {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.page-hero h1 {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin-bottom: 16px;
  color: #fff;
}

.page-hero p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.55;
}

/* Breadcrumbs w hero na ciemnym tle (nadpisuje takze inline color:var(--black)
   na aktywnej pozycji - stad [style] + !important, bez ruszania 8 widokow). */
.page-hero .breadcrumbs a { color: rgba(255, 255, 255, 0.75); }
.page-hero .breadcrumbs a:hover { color: var(--brand); }
.page-hero .breadcrumbs span { color: rgba(255, 255, 255, 0.45); }
.page-hero .breadcrumbs span[style] { color: rgba(255, 255, 255, 0.9) !important; }

.breadcrumbs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: 18px;
}

.breadcrumbs a {
  color: var(--gray-500);
  text-decoration: none;
}

.breadcrumbs a:hover { color: var(--brand); }

.breadcrumbs span { color: var(--gray-300); }

/* === CARDS - generic === */
.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  padding: 28px;
  transition: all 0.3s;
}

.card:hover {
  border-color: var(--brand);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(242, 176, 51, 0.1);
}

/* === FOOTER === */
.footer {
  background: var(--black);
  color: var(--white);
  padding: 72px 0 32px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}

.footer__brand h3 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 14px;
}

.footer__brand h3 span { color: var(--brand); }

.footer__brand p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.65;
  max-width: 280px;
  margin-bottom: 20px;
}

.footer__contact {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
}

.footer__contact a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.footer__contact a:hover { color: var(--brand); }

.footer__col h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--brand);
  margin-bottom: 18px;
}

.footer__col ul { list-style: none; }

.footer__col li { margin-bottom: 10px; }

.footer__col a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}

.footer__col a:hover { color: var(--brand); }

.footer__bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.footer__bottom p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.footer__social {
  display: flex;
  gap: 10px;
}

.footer__social a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: var(--white);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
}

.footer__social a:hover { background: var(--brand); transform: translateY(-2px); }

/* === RESPONSIVE === */
@media (max-width: 1024px) {
  section { padding: 72px 0; }
  .page-hero { padding: 48px 0 40px; }
  .page-hero h1 { font-size: 36px; }
  .section-title { font-size: 34px; }
  .nav { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 640px) {
  section { padding: 56px 0; }
  .page-hero h1 { font-size: 28px; }
  .section-title { font-size: 26px; }
  .footer__grid { grid-template-columns: 1fr; }
  .header__actions .btn:first-child { display: none; }
}

/* =================================================
   DASHBOARD (po /login) - panel klienta naSpotted
   ================================================= */

.dash-page { background: #F7F7F7; min-height: calc(100vh - 80px); padding: 32px 0 80px; }
.dash-layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; }

.dash-sidebar { background: #0A0A0A; color: #fff; border-radius: 16px; padding: 24px 0; position: sticky; top: 90px; overflow: hidden; }
.dash-sidebar__user { text-align: center; padding: 0 24px 24px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.dash-sidebar__avatar { position: relative; width: 80px; height: 80px; margin: 0 auto 12px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,0.1); }
.dash-sidebar__avatar img { width: 100%; height: 100%; object-fit: cover; }
.dash-sidebar__avatar-edit { position: absolute; bottom: 0; right: 0; background: var(--brand); color: #fff; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid #0A0A0A; }
.dash-sidebar__name { font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 4px; }
.dash-sidebar__role { font-size: 13px; color: rgba(255,255,255,0.55); margin: 0; }
.dash-sidebar__nav { display: flex; flex-direction: column; padding: 16px 12px 0; gap: 2px; }
.dash-sidebar__link { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; color: rgba(255,255,255,0.75); text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.15s; background: none; border: none; width: 100%; text-align: left; cursor: pointer; font-family: inherit; }
.dash-sidebar__link:hover { background: rgba(255,255,255,0.05); color: #fff; }
.dash-sidebar__link.active { background: var(--brand); color: #fff; }
.dash-sidebar__link .icon { width: 18px; height: 18px; flex-shrink: 0; }
.dash-sidebar__link--logout { color: rgba(255,255,255,0.45); margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.08); border-radius: 0; padding-top: 16px; }
.dash-sidebar__link--logout:hover { color: #fff; background: none; }
.dash-sidebar__badge { background: var(--brand); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 100px; margin-left: 6px; font-weight: 700; }
.dash-sidebar__logout-form { margin: 0; }

.dash-main { display: flex; flex-direction: column; gap: 24px; }
.dash-welcome { background: #fff; border-radius: 16px; padding: 28px 32px; }
.dash-welcome__title { font-size: 32px; font-weight: 800; margin: 0 0 6px; color: #0A0A0A; }
.dash-welcome__title .gradient { background: linear-gradient(90deg, var(--brand), var(--brand-dark)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dash-welcome__sub { font-size: 15px; color: var(--gray-500); margin: 0; }

.dash-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dash-metric { background: #fff; border-radius: 14px; padding: 22px 24px; border: 1px solid var(--gray-200); }
.dash-metric__label { font-size: 12px; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 6px; }
.dash-metric__value { font-size: 32px; font-weight: 800; color: #0A0A0A; line-height: 1; margin-bottom: 6px; }
.dash-metric__hint { font-size: 12px; color: var(--gray-500); }

.dash-cta { background: linear-gradient(135deg, #0A0A0A 0%, #2A2A2A 100%); color: #fff; border-radius: 16px; padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dash-cta__content { flex: 1; min-width: 280px; }
.dash-cta__title { font-size: 22px; font-weight: 700; margin: 0 0 4px; color: #fff; }
.dash-cta__text { color: rgba(255,255,255,0.7); margin: 0; font-size: 14px; }

.dash-section { background: #fff; border-radius: 16px; padding: 28px 32px; }
.dash-section__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.dash-section__title { font-size: 18px; font-weight: 700; color: #0A0A0A; margin: 0; }
.dash-section__link { color: var(--brand); font-size: 14px; text-decoration: none; font-weight: 600; }
.dash-section__link:hover { text-decoration: underline; }

.dash-empty { text-align: center; padding: 40px 20px; }
.dash-empty__icon { width: 72px; height: 72px; background: #FEF6E0; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.dash-empty__title { font-size: 17px; font-weight: 700; margin: 0 0 6px; color: #0A0A0A; }
.dash-empty__text { color: var(--gray-500); margin: 0 auto 20px; max-width: 380px; font-size: 14px; }
.dash-table-link { display: block; padding: 16px; background: #F7F7F7; border-radius: 10px; color: var(--brand); font-weight: 600; text-decoration: none; text-align: center; }
.dash-table-link:hover { background: #FEF6E0; }

.dash-packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dash-package { background: #fff; border: 1.5px solid var(--gray-200); border-radius: 14px; padding: 24px; transition: all 0.2s; }
.dash-package:hover { border-color: var(--brand); transform: translateY(-2px); }
.dash-package--featured { border-color: var(--brand); background: linear-gradient(180deg, #FEF6E0 0%, #fff 100%); position: relative; }
.dash-package__badge { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--brand); letter-spacing: 0.5px; margin-bottom: 10px; }
.dash-package__price { font-size: 32px; font-weight: 800; color: #0A0A0A; margin-bottom: 16px; }
.dash-package__price span { font-size: 14px; font-weight: 600; color: var(--gray-500); }
.dash-package__list { list-style: none; padding: 0; margin: 0 0 20px; }
.dash-package__list li { padding: 6px 0 6px 22px; position: relative; font-size: 14px; color: var(--gray-700); }
.dash-package__list li::before { content: '\2713'; position: absolute; left: 0; color: var(--brand); font-weight: 700; }

.dash-custom { background: #F7F7F7; border-radius: 12px; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
.dash-custom__title { font-size: 16px; font-weight: 700; margin: 0 0 4px; color: #0A0A0A; }
.dash-custom__text { color: var(--gray-500); margin: 0; font-size: 13px; }

.dash-crossrole { background: #fff; border: 2px dashed var(--gray-300); border-radius: 14px; padding: 24px 28px; text-align: center; }
.dash-crossrole h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.dash-crossrole p { font-size: 14px; color: var(--gray-500); margin: 0 0 14px; }

.dash-card { background: #fff; border-radius: 16px; padding: 28px 32px; }
.dash-card--soft { background: #F7F7F7; border: 1px solid var(--gray-200); }
.dash-card__title { font-size: 18px; font-weight: 700; margin: 0 0 6px; color: #0A0A0A; }
.dash-card__hint { font-size: 14px; color: var(--gray-500); margin: 0 0 20px; }
.dash-divider { border: none; border-top: 1px solid var(--gray-200); margin: 28px 0; }

.dash-role-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dash-role { display: block; cursor: pointer; }
.dash-role input { display: none; }
.dash-role__card { border: 2px solid var(--gray-200); border-radius: 12px; padding: 20px; text-align: center; transition: all 0.15s; background: #fff; }
.dash-role__card:hover { border-color: var(--brand); }
.dash-role input:checked + .dash-role__card { border-color: var(--brand); background: #FEF6E0; }
.dash-role__icon { margin-bottom: 10px; }
.dash-role__name { font-size: 15px; font-weight: 700; color: #0A0A0A; margin-bottom: 4px; }
.dash-role__desc { font-size: 12px; color: var(--gray-500); }

.dash-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dash-form__field { display: flex; flex-direction: column; gap: 6px; }
.dash-form__field--full { grid-column: 1 / -1; }
.dash-form__field label { font-size: 13px; font-weight: 600; color: var(--gray-700); }
.dash-form__field input { border: 1.5px solid var(--gray-300); border-radius: 10px; padding: 11px 14px; font-size: 14px; font-family: inherit; transition: border 0.15s; }
.dash-form__field input:focus { outline: none; border-color: var(--brand); }
.dash-form__field input[readonly] { background: #F7F7F7; color: var(--gray-500); }
.dash-form__field small { font-size: 12px; color: var(--gray-500); }
.dash-form__actions { margin-top: 24px; }

@media (max-width: 968px) {
  .dash-layout { grid-template-columns: 1fr; }
  .dash-sidebar { position: static; }
  .dash-metrics { grid-template-columns: repeat(2, 1fr); }
  .dash-packages { grid-template-columns: 1fr; }
  .dash-form__grid { grid-template-columns: 1fr; }
  .dash-role-picker { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .dash-metrics { grid-template-columns: 1fr; }
  .dash-welcome__title { font-size: 24px; }
  .dash-welcome, .dash-section, .dash-card { padding: 20px; }
  .dash-cta { padding: 24px; flex-direction: column; align-items: flex-start; }
}

/* === DASHBOARD TABLE === */
.dash-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dash-table thead { border-bottom: 2px solid var(--gray-200); }
.dash-table th { text-align: left; padding: 12px 14px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; }
.dash-table td { padding: 14px; border-bottom: 1px solid var(--gray-200); color: var(--gray-700); }
.dash-table tr:hover td { background: #FAFAFA; }
.dash-table tr:last-child td { border-bottom: none; }

.dash-status { display: inline-block; padding: 4px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; background: var(--gray-200); color: var(--gray-700); }
.dash-status--active { background: #E6F7E9; color: #0A7A2C; }
.dash-status--complete { background: #E0F2FE; color: #0369A1; }
.dash-status--pending { background: #FEF3C7; color: #B45309; }
.dash-status--cancel { background: #FEE; color: #C00; }

.dash-link { color: var(--brand); text-decoration: none; font-weight: 600; font-size: 13px; }
.dash-link:hover { text-decoration: underline; }

.dash-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: var(--gray-100, #F7F7F7);
  border: 1px solid var(--gray-200, #EFEFEF);
  border-radius: 100px;
  color: var(--gray-700);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
}
.dash-chip:hover {
  background: var(--orange-bg, #FEF6E0);
  border-color: var(--brand);
  color: var(--brand);
}

/* Textarea w dashboardzie */
.dash-form__field textarea {
  border: 1.5px solid var(--gray-300);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  transition: border 0.15s;
  resize: vertical;
}
.dash-form__field textarea:focus { outline: none; border-color: var(--brand); }
.dash-form__field select {
  border: 1.5px solid var(--gray-300);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}


/* === NASPOTTED OVERRIDES (precyzyjne z KOD_ZRODLOWY_naSpotted.md) === */
/* Nagłówki: Bitter ExtraBold 800 (BRAND.md - slab-serif, pełne polskie znaki).
   Lockup "naSpotted" i nawigacja zostają na Outfit. */
h1, h2, h3, h4, h5, h6, .heading, .section-title {
  font-family: 'Bitter', Georgia, 'Times New Roman', serif;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.gradient, .text-gradient {
  background: linear-gradient(135deg, #F2B033 0%, #D49718 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* PRIMARY: zoltý tlo + granat tekst (wzorzec z /firma /reaktywacja) */
.btn--primary {
  background: #F2B033 !important;
  color: #15356E !important;
  font-weight: 700 !important;
  border-radius: 1rem !important;
  box-shadow: 0 10px 15px -3px rgba(242, 176, 51, 0.3) !important;
  transition: all 0.2s !important;
}
.btn--primary:hover {
  background: #D4891A !important;
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(242, 176, 51, 0.4) !important;
}

/* SECONDARY: bialy + obrys navy */
.btn--ghost, .btn--secondary, .btn--outline {
  background: #fff !important;
  color: #15356E !important;
  font-weight: 700 !important;
  border: 2px solid rgba(21, 53, 110, 0.15) !important;
  border-radius: 1rem !important;
  transition: all 0.2s !important;
}
.btn--ghost:hover, .btn--secondary:hover, .btn--outline:hover {
  border-color: rgba(21, 53, 110, 0.4) !important;
  background: rgba(21, 53, 110, 0.05) !important;
}

/* DARK button (uzywany w hero CTA) -> granat NaSpotted */
.btn--dark {
  background: #15356E !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 1rem !important;
}
.btn--dark:hover {
  background: #0E2347 !important;
  transform: translateY(-2px);
}

/* Header: granat marki z zolta linia u dolu (NS-05, wariant B).
   Sam granat zlewalby sie z granatowym hero - separacje robi zolta linia 3 px.
   Blogowy nav miast (.header--news) ZOSTAJE jasny, ma wlasny wyglad. */
.header {
  background: #15356E !important;
  backdrop-filter: saturate(180%) blur(12px) !important;
  border-bottom: none !important;
  box-shadow: inset 0 -3px 0 #F2B033 !important;
}
.header .nav a {
  color: rgba(255, 255, 255, 0.82) !important;
}
.header .nav a:hover {
  color: #F2B033 !important;
}
.header .nav a.active {
  color: #fff !important;
}
.header__actions .btn--ghost {
  color: #fff !important;
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
}
.header__actions .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: #F2B033 !important;
  color: #F2B033 !important;
}

/* Nav bloga miejskiego - jasny jak dotad (tresc i uklad bez zmian). */
.header.header--news {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(8px) !important;
}
.header.header--news .nav a {
  color: #15356E !important;
}
.header.header--news .header__actions .btn--ghost {
  color: #15356E !important;
  border-color: transparent !important;
}

/* Section bg light */
.bg-light, section.alt-bg {
  background: #F7F9FC !important;
}

/* Logo img w headerze - bez filter invert (PNG juz ma kolory) */
.header .logo img {
  filter: none !important;
  height: 36px !important;
}

/* Pager (szablon app/Views/pagers/sool_full.php) */
.sool-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.sool-pager a,
.sool-pager span {
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--gray-200, #EFEFEF);
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  color: var(--gray-700, #374151);
}
.sool-pager a:hover {
  border-color: var(--brand, #F2B033);
  color: var(--brand-dark, #D49718);
}
.sool-pager .is-current {
  background: var(--brand, #F2B033);
  border-color: var(--brand, #F2B033);
  color: #fff;
}