/* === alt45-offramp.css — lekki „zjazd z Bootstrapa” === */
/* Zmieniasz kolory/rozmiary w jednym miejscu: */
:root{
  --container-max: 1320px;
  --gutter: 16px;
  --radius: 12px;
  --c-dark: #0f1115;
  --c-dark-2: #151821;
  --c-white: #fff;
  --c-text: #e6e6e6;
  --c-secondary: #a7a7a7;
  --shadow: 0 6px 20px rgba(0,0,0,.15);
  --card-border: 1px solid rgba(255,255,255,.08);
}

/* ====== Layout / Grid ====== */

.container-fluid.fullwidth {
  max-width:none;
  margin:0;
}

.row{ display:flex; flex-wrap:wrap; margin-left: calc(var(--gutter) * -0.5); margin-right: calc(var(--gutter) * -0.5); }
[class^="col"], .col{ padding-left: calc(var(--gutter) * .5); padding-right: calc(var(--gutter) * .5); }

/* Domyślnie kolumny są full width */
.col, .col-sm-12{ flex: 0 0 100%; max-width:100%; }

/* Breakpointy (zbliżone do Bootstrapa) */
@media (min-width: 992px){ /* lg */
  .col-lg-2{ flex:0 0 16.6667%; max-width:16.6667%; }
  .col-lg-3{ flex:0 0 25%;      max-width:25%; }
  .col-lg-6{ flex:0 0 50%;      max-width:50%; }
  .col-lg-9{ flex:0 0 75%;      max-width:75%; }
}

/* ====== Kolory / tła / typografia ====== */
.bg-dark{ background: var(--c-dark); }
.bg-white{ background: var(--c-white); }
.text-white{ color: var(--c-white) !important; }
.text-secondary{ color: var(--c-secondary) !important; }
.link-secondary{ color: var(--c-secondary); text-decoration: none; }
.link-secondary:hover{ color: var(--c-white); text-decoration: underline; }

/* ====== Spacing utilities (wybór najczęstszych) ====== */
.mt-2{ margin-top:.5rem; } .mt-4{ margin-top:1rem; } .mt-5{ margin-top:1.5rem; }
.mb-2{ margin-bottom:.5rem; }
.px-3{ padding-left:1rem; padding-right:1rem; }
.py-2{ padding-top:.5rem; padding-bottom:.5rem; }
.w-full{ width:100%; }

/* ====== Flex utilities ====== */
.d-flex{ display:flex; }
.flex{ display:flex; }
.flex-wrap{ flex-wrap:wrap; }
.flex-row-reverse{ flex-direction: row-reverse; }
.flex-col{ flex-direction: column; }
.items-center{ align-items: center; }
.position-relative{ position: relative; }

/* ====== Navbar (Dark) ====== */
.navbar{ display:flex; align-items:center; gap:1rem; padding:.5rem 0; }
.navbar-dark{ color: var(--c-text); }
.navbar a{ color: var(--c-text); }
.navbar a:hover{ color: var(--c-white); }

.navbar-toggler{
  background: transparent; border:1px solid rgba(255,255,255,.25);
  border-radius:10px; padding:.4rem .6rem; cursor:pointer;
}
.navbar-toggler-icon{
  display:inline-block; width:1.25rem; height:1.25rem; position: relative;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after{
  content:""; position:absolute; left:0; right:0; height:2px; background: var(--c-text);
}
.navbar-toggler-icon::before{ top:4px; }
.navbar-toggler-icon::after{ bottom:4px; }

.navbar-nav{ list-style:none; margin:0; padding:0; display:flex; gap:.5rem; }
.nav-item{ }
.nav-link{ display:block; padding:.4rem .7rem; border-radius:10px; color: var(--c-text); }
.nav-link:hover{ background: rgba(255,255,255,.08); color: var(--c-white); text-decoration:none; }



/* Gdy nie ma Bootstrapa */
.collapse { display: none; }
.collapse.show { display: block; }
@media (min-width: 992px){
  .navbar-expand-lg .collapse { display: block !important; }
}



/* ====== Karty / listy (sidebar) ====== */
.card{
  background: var(--c-dark-2);
  color: var(--c-text);
  border: var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card-header{
  padding:.75rem 1rem;
  border-bottom: var(--card-border);
  font-weight:600;
}
.card-body{
  padding:1rem;
}
.list-group{
  display:block;
}
.list-group a{
  display:inline-block;
  padding:.25rem 0;
  color: var(--c-secondary);
  text-decoration:none;
}
.list-group a:hover{ color: var(--c-white); text-decoration:underline; }

/* ====== Prosty footer ====== */
.site-footer{
  padding:2rem 1rem;
  color: var(--c-secondary);
  background: var(--c-dark);
  text-align:center;
}

/* ====== Drobiazgi zgodne z Twoim alt45.css ====== */
.bgray{
  background:#f1f1f1;
  color:#111;
  padding:.4rem .6rem;
  border-radius:8px;
  display:inline-block;
}
.def1{ line-height:1.6; }

/* ====== Reset ikonki hamburgera w dark tle ====== */
.bg-dark .navbar-toggler{ border-color: rgba(255,255,255,.3); }
.bg-dark .nav-link:hover{ background: rgba(255,255,255,.06); }


.visually-hidden-focusable {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  border: 0;
}
.visually-hidden-focusable:focus {
  position: static;
  width: auto; height: auto;
  margin: 0; clip: auto;
  background: #000; color: #fff;
  padding: .5rem 1rem;
  z-index: 1000;
}



/* Sekcja nagłówkowa info */
.info-hero { margin-top: 1.5rem; }
.info-hero h1 { font-size: clamp(1.6rem, 1.2vw + 1.2rem, 2.2rem); margin-bottom: .25rem; }
.info-lead { color: var(--c-secondary); margin: 0 0 1rem; }
.info-cta { display:flex; gap:.5rem; flex-wrap: wrap; }

/* Kafelki z informacjami */
.info-cards { display:grid; gap: 1rem; grid-template-columns: 1fr; margin: 1rem 0; }
@media (min-width: 992px){ .info-cards{ grid-template-columns: repeat(3, 1fr); } }

.info-card{
  background:#f7f9fc;
  border:1px solid #dae4f2;
  border-radius: 14px;
  padding: 1rem 1.2rem;
  box-shadow: 0 6px 22px rgba(9,30,66,.08);
}
.bg-dark .info-card{ background:#fff; }

.info-card h2{ font-size:1.15rem; margin:0 0 .5rem; }
.info-card .clean{ list-style:none; padding:0; margin:0; }
.info-card .clean li{ margin:.4rem 0; line-height:1.6; }
.info-footnote{ font-size:.9rem; color: var(--c-secondary); margin:.5rem 0 0; }

.pill{
  display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.02em;
  padding:.15rem .45rem; border-radius: 999px; margin-right:.35rem;
  background:#e9eef7; color:#143a8b; border:1px solid #cfdaf0;
}
.bg-dark .pill{ background:#e9eef7; color:#143a8b; }

.info-links{ margin-top:.5rem; display:flex; gap:.5rem; flex-wrap:wrap; }


/* Przyciski nawigacyjne/akcje – zostawiamy .btn-zad (nie zakładki!) */
.btn-zad{
  display:inline-block; padding:.5rem .9rem;
  border-radius: 10px; border:1px solid #b8c7e0;
  background: linear-gradient(#f9fbff, #eef3fb);
  text-decoration:none; color:#1f3b66; font-weight:600;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
  cursor: pointer;
}
.btn-zad:hover{ background: #e9f0fb; }
.btn-zad.is-active{
  background: linear-gradient(#e2ecff, #cfe0ff);
  border-color:#7aa0ff; color:#143a8b;
}


/* karty informacyjne (możesz już mieć podobne) */
.info-cards { display: grid; gap: 1rem; }
.info-card {
  background: #f7f9fc; border: 1px solid #dae4f2; border-radius: 14px;
  padding: 1rem 1.2rem; box-shadow: 0 6px 22px rgba(9,30,66,.08);
}
.info-card h2 { margin-top: 0; }
.info-hero .hero-tag { color: #6b7a90; }
ul.clean { list-style: none; padding-left: 0; margin: .5rem 0 0; }
ul.clean li { margin: .35rem 0; }
.pill {
  display:inline-block; font-size:.85em; padding:.1rem .45rem; border-radius:999px;
  background:#e9eef8; color:#143a8b; border:1px solid #b8c7e0; margin-right:.35rem;
}
.info-links { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }



/* ====== Arkusze: formularz pobierania ====== */

/* (opcjonalnie) zamiast inline style="max-width:660px;margin:0 auto;" */
.card-narrow { max-width:660px; margin:0 auto; }

/* (opcjonalnie) zamiast inline grid na <div> wewnątrz form */
.form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
@media (max-width: 560px){
  .form-grid-2{ grid-template-columns:1fr; }
}

/* Etykiety i podpisy pól */
.info-card form label{
  display:flex; flex-direction:column; gap:.25rem;
}
.info-card form label > div{
  font-size:.9rem; font-weight:600; letter-spacing:.02em;
  color: #143a8b;
}

/* Selecty &#8212; lekkie, z własną strzałką */
.info-card form select{
  display:block; width:100%;
  padding:.55rem .9rem;
  border:1px solid #cfdaf0; border-radius:10px;
  background:#fff;
  color:#0f1b2d; line-height:1.3;
  appearance:none; /* ukryj natywną strzałkę */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M2 2.5L7 7.5L12 2.5" stroke="%23143a8b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat:no-repeat;
  background-position: right .65rem center;
  background-size: 14px 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.info-card form select:hover{ border-color:#b8c7e0; }
.info-card form select:focus{
  outline:2px solid #7aa0ff; outline-offset:2px;
  border-color:#7aa0ff;
  box-shadow: 0 0 0 3px rgba(122,160,255,.18);
}

/* Przycisk (dopieszczone stany) */
.btn-zad:focus-visible{
  outline:2px solid #7aa0ff; outline-offset:2px;
}
.btn-zad:disabled{ opacity:.65; cursor:not-allowed; }

/* Podgląd nazwy pliku */
#previewId code{
  background:#eef3fb; border:1px solid #cfdaf0;
  padding: .05rem .35rem; border-radius:6px;
}

/* Dark tło strony: karta i elementy pozostają czytelne */
.bg-dark .info-card{ background:#fff; }
.bg-dark .info-card form select{ background:#fff; color:#0f1b2d; }