/* ===== AMARO B2B skin for Cassiopeia (Joomla 5 / Bootstrap 5) ===== */

:root{
  --am-accent: #2563eb;
  --am-accent-2: #0ea5e9;
  --am-ink: #0f172a;
  --am-muted: #475569;
  --am-border: rgba(15, 23, 42, 0.10);
  --am-card: #ffffff;
  --am-soft: #f8fafc;
}

/* ============================================================
   TOPBAR (pills) – pozycja: topbar
   ============================================================ */

.am-topbar{
  font-size: .92rem;
  background: #fff;
  border-bottom: 1px solid var(--am-border);
  color: var(--am-muted);
}

.am-pill{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  white-space: nowrap;
}

.am-pill-label{
  font-weight: 700;
  color: var(--am-ink);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.am-pill-label::before{
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: rgba(37,99,235,.35);
  outline: 2px solid rgba(37,99,235,.10);
}

.am-pill-muted{
  color: var(--am-muted);
  font-weight: 500;
}

.am-pill-link{
  color: var(--am-accent);
  text-decoration: none;
  font-weight: 600;
}
.am-pill-link:hover{ text-decoration: underline; }

/* ikonka link (svg) */
.am-pill-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  color: var(--am-accent);
  text-decoration: none;
  transition: background .2s ease, transform .15s ease;
}
.am-pill-icon:hover{
  background: rgba(37,99,235,.12);
  transform: translateY(-1px);
}
.am-ico{
  width: 1.05rem;
  height: 1.05rem;
  display:block;
}

@media (max-width: 575px){
  .am-topbar .container{
    justify-content: center !important;
    gap: .5rem;
  }
}

/* ============================================================
   TOP CHIPS (pod menu / pozycja: top-a lub main-top)
   ============================================================ */

.am-topchips-wrap{
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: center;
  padding: .75rem 0 1rem;
}

.am-chip{
  display: inline-flex;
  align-items: center;
  padding: .55rem .95rem;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.14);
  background: #fff;
  color: var(--am-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.am-chip::before{
  content:"";
  width:.55rem;
  height:.55rem;
  border-radius:999px;
  background: rgba(37,99,235,.35);
  margin-right:.5rem;
}
.am-chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2,6,23,.08);
  border-color: rgba(37,99,235,.28);
}
.am-chip:focus-visible{
  outline: 3px solid rgba(37,99,235,.28);
  outline-offset: 2px;
}

@media (max-width: 575px){
  .am-chip{
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   HERO
   ============================================================ */

.am-hero{
  background:
    radial-gradient(1200px 400px at 20% 0%, rgba(37,99,235,.12), transparent 70%),
    radial-gradient(900px 300px at 80% 10%, rgba(14,165,233,.10), transparent 60%),
    linear-gradient(180deg, #ffffff, var(--am-soft));
  border-bottom: 1px solid var(--am-border);
  padding-top: clamp(1.75rem, 3vw, 3rem);
  padding-bottom: clamp(2.5rem, 4vw, 4rem);
  overflow: hidden;
}

.am-hero h1{
  letter-spacing: -0.02em;
  color: var(--am-ink);
  font-weight: 700;
}

.am-lead{
  color: var(--am-muted);
  font-size: 1.1rem;
}

@media (max-width: 575px){
  .am-lead{ font-size: 1.02rem; }
}

/* wtapianie grafiki (na home) */
body.itemid-101 .am-hero .row > :last-child{ position: relative; }

body.itemid-101 .am-hero .row > :last-child::after{
  content:"";
  position:absolute;
  inset:-12%;
  pointer-events:none;
  background: radial-gradient(ellipse at 65% 55%,
    rgba(248,250,252,0) 52%,
    rgba(248,250,252,.92) 100%);
}

body.itemid-101 .am-hero .row > :last-child img{
  display:block;
  width: 100%;
  height: auto;
  -webkit-mask-image: radial-gradient(ellipse at 63% 52%,
    rgba(0,0,0,1) 62%,
    rgba(0,0,0,.55) 78%,
    rgba(0,0,0,0) 92%);
  mask-image: radial-gradient(ellipse at 63% 52%,
    rgba(0,0,0,1) 62%,
    rgba(0,0,0,.55) 78%,
    rgba(0,0,0,0) 92%);
}

@media (max-width: 991px){
  body.itemid-101 .am-hero .row > :last-child::after{ display:none; }
  body.itemid-101 .am-hero .row > :last-child img{
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ============================================================
   CARDS / KPI
   ============================================================ */

.am-card{
  border: 1px solid var(--am-border);
  background: var(--am-card);
  border-radius: 1.1rem;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.am-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(2, 6, 23, 0.10);
}
.am-card .card-body{ padding: 1.2rem; }

.am-kpi{
  border: 1px solid var(--am-border);
  background: var(--am-card);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  height: 100%;
}
.am-kpi-title{ font-weight: 600; color: var(--am-ink); }
.am-kpi-desc{ color: var(--am-muted); font-size: .95rem; margin-top: .25rem; }

/* ============================================================
   BUTTONS
   ============================================================ */

.am-btn-primary{
  background: var(--am-accent);
  border-color: var(--am-accent);
}
.am-btn-primary:hover{ filter: brightness(0.95); }

/* ============================================================
   HEADER – sticky + shrink (współpracuje z user.js → .am-scrolled)
   ============================================================ */

header.container-header{
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
}

header.container-header,
header.container-header .grid-child.container-nav,
header.container-header .navbar-brand img,
header.container-header .navbar-nav .nav-link,
header.container-header .btn-primary,
header.container-header .dj-megamenu li a{
  transition: padding .22s ease, max-height .22s ease, box-shadow .22s ease, font-size .22s ease, line-height .22s ease;
}

header.container-header .navbar-brand img{
  max-height: 44px;
  height: auto;
  width: auto;
  display: block;
}

header.container-header .navbar-nav .nav-link,
header.container-header .navbar-nav > li > a,
header.container-header .dj-megamenu li a{
  padding-top: .45rem;
  padding-bottom: .45rem;
  line-height: 1.15;
}

header.container-header .btn-primary{
  background-color: var(--am-accent) !important;
  border-color: var(--am-accent) !important;
  font-weight: 600 !important;
  box-shadow: 0 6px 18px rgba(37,99,235,.30);
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
}

/* PO SCROLLU */
header.container-header.am-scrolled{
  box-shadow: 0 4px 14px rgba(15,23,42,.12) !important;
}

header.container-header.am-scrolled .grid-child.container-nav{
  padding-top: .12rem !important;
  padding-bottom: .12rem !important;
  max-height: 64px !important;
  overflow: hidden !important;
}

header.container-header.am-scrolled .navbar-brand img{ max-height: 30px !important; }

header.container-header.am-scrolled .navbar-nav .nav-link,
header.container-header.am-scrolled .navbar-nav > li > a,
header.container-header.am-scrolled .dj-megamenu li a{
  padding-top: .16rem !important;
  padding-bottom: .16rem !important;
  line-height: 1.05 !important;
  font-size: .95rem !important;
}

header.container-header.am-scrolled .btn-primary{
  padding-top: .20rem !important;
  padding-bottom: .20rem !important;
  font-size: .92rem !important;
}

@media (max-width: 991px){
  header.container-header .navbar-brand img{ max-height: 40px; }
  header.container-header.am-scrolled .navbar-brand img{ max-height: 34px !important; }
  header.container-header.am-scrolled .grid-child.container-nav{ max-height: 72px !important; }
}

/* ============================================================
   KONTAKT (pozycja: bottom-b) – DWA MODUŁY OBOK SIEBIE
   WAŻNE: zawężone do home, żeby nie psuć innych stron
   ============================================================ */

body.itemid-101 .grid-child.container-bottom-b{
  display: grid !important;
  grid-template-columns: 1fr 1.4fr;
  gap: 1.25rem;
  align-items: stretch;
}

body.itemid-101 .grid-child.container-bottom-b > .bottom-b.card{
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 1.1rem !important;
  box-shadow: 0 10px 30px rgba(2,6,23,.06) !important;
  overflow: hidden;
  background: #fff !important;
}

body.itemid-101 .grid-child.container-bottom-b > .bottom-b.card > .card-body{
  padding: 1.25rem !important;
  background: #fff !important;
}

/* DJ EasyContact – wersja “pewna”: łapiemy po wrapperze DJ (bez konkretnego ID) */
body.itemid-101 .grid-child.container-bottom-b .dj-easy-contact-wrapper,
body.itemid-101 .grid-child.container-bottom-b .dj-easy-contact-wrapper *{
  font-family: inherit;
}

body.itemid-101 .grid-child.container-bottom-b .dj-easy-contact-wrapper{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* pola */
body.itemid-101 .grid-child.container-bottom-b .dj-easy-contact-wrapper input[type="text"],
body.itemid-101 .grid-child.container-bottom-b .dj-easy-contact-wrapper input[type="email"],
body.itemid-101 .grid-child.container-bottom-b .dj-easy-contact-wrapper input[type="tel"],
body.itemid-101 .grid-child.container-bottom-b .dj-easy-contact-wrapper select,
body.itemid-101 .grid-child.container-bottom-b .dj-easy-contact-wrapper textarea,
body.itemid-101 .grid-child.container-bottom-b .dj-easy-contact-wrapper .form-control{
  width: 100% !important;
  border-radius: .85rem !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  padding: .7rem .9rem !important;
  background: #fff !important;
  color: var(--am-ink) !important;
  box-shadow: none !important;
  font-size: .95rem !important;
}

body.itemid-101 .grid-child.container-bottom-b .dj-easy-contact-wrapper textarea{
  min-height: 140px !important;
  resize: vertical;
}

body.itemid-101 .grid-child.container-bottom-b .dj-easy-contact-wrapper input:focus,
body.itemid-101 .grid-child.container-bottom-b .dj-easy-contact-wrapper select:focus,
body.itemid-101 .grid-child.container-bottom-b .dj-easy-contact-wrapper textarea:focus,
body.itemid-101 .grid-child.container-bottom-b .dj-easy-contact-wrapper .form-control:focus{
  outline: none !important;
  border-color: rgba(37,99,235,.45) !important;
  box-shadow: 0 0 0 .2rem rgba(37,99,235,.16) !important;
}

/* submit */
body.itemid-101 .grid-child.container-bottom-b .dj-easy-contact-wrapper button,
body.itemid-101 .grid-child.container-bottom-b .dj-easy-contact-wrapper .btn,
body.itemid-101 .grid-child.container-bottom-b .dj-easy-contact-wrapper input[type="submit"]{
  background: #0f2a55 !important;
  border: 1px solid #0f2a55 !important;
  color: #fff !important;
  border-radius: .85rem !important;
  padding: .7rem 1.15rem !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 22px rgba(2,6,23,.10);
  transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
}

body.itemid-101 .grid-child.container-bottom-b .dj-easy-contact-wrapper button:hover,
body.itemid-101 .grid-child.container-bottom-b .dj-easy-contact-wrapper .btn:hover,
body.itemid-101 .grid-child.container-bottom-b .dj-easy-contact-wrapper input[type="submit"]:hover{
  filter: brightness(.96);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(2,6,23,.14);
}

/* MOBILE */
@media (max-width: 991px){
  body.itemid-101 .grid-child.container-bottom-b{
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   ACCESSIBILITY: reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  header.container-header,
  header.container-header .grid-child.container-nav,
  header.container-header .navbar-brand img,
  header.container-header .navbar-nav .nav-link,
  header.container-header .btn-primary,
  header.container-header .dj-megamenu li a,
  .am-chip,
  body.itemid-101 .am-hero .row > :last-child img{
    transition: none !important;
  }
}
/* =========================
   KONTAKT – wymuś styl lewego bloku
   ========================= */

#kontakt.am-contact-section{
  background: var(--am-soft);
  border-top: 1px solid var(--am-border);
  border-bottom: 1px solid var(--am-border);
  padding: clamp(2.5rem, 4vw, 4rem) 0;
}

/* karta */
#kontakt .am-contact-card{
  background: #fff;
  border: 1px solid var(--am-border);
  border-radius: 1.25rem;
  box-shadow: 0 14px 36px rgba(2,6,23,.08);
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
}

/* typografia lewa */
#kontakt .am-contact-h{
  font-weight: 800 !important;
  color: var(--am-ink) !important;
  margin: 0 0 .35rem !important;
  letter-spacing: -0.02em;
  text-align: left;
}

#kontakt .am-contact-sub{
  color: var(--am-muted) !important;
  margin: 0 0 1.25rem !important;
}

/* lista */
#kontakt .am-contact-list{
  display: grid;
  gap: .75rem;
}

#kontakt .am-contact-item{
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: .75rem;
  align-items: baseline;
}

#kontakt .am-contact-k{
  font-weight: 700 !important;
  color: var(--am-ink) !important;
}

#kontakt .am-contact-v{
  color: var(--am-muted) !important;
  text-decoration: none;
}

#kontakt .am-contact-v:hover{
  color: var(--am-ink) !important;
  text-decoration: underline;
}

#kontakt .am-contact-meta{
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px dashed rgba(15,23,42,.18);
  color: var(--am-muted) !important;
  font-size: .92rem;
  line-height: 1.45;
}

/* mobile */
@media (max-width: 575px){
  #kontakt .am-contact-item{
    grid-template-columns: 1fr;
    gap: .15rem;
  }
  #kontakt .am-contact-k{
    font-size: .92rem;
    color: var(--am-muted) !important;
  }
}
/* =========================================
   KONTAKT – DJ jako prawa część karty
   ========================================= */

/* prawa kolumna = formularz */
#kontakt .dj-easy-contact-wrapper{
  background: rgba(248,250,252,.65);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 1rem;
  padding: 1.25rem;
}

/* nagłówek DJ */
#kontakt .dj-easy-contact-wrapper h3{
  font-weight: 800;
  color: var(--am-ink);
  margin-bottom: .75rem;
}

/* opis nad formularzem */
#kontakt .dj-easy-contact-wrapper p{
  color: var(--am-muted);
  font-size: .95rem;
}

/* pola formularza */
#kontakt .dj-easy-contact-wrapper input,
#kontakt .dj-easy-contact-wrapper textarea,
#kontakt .dj-easy-contact-wrapper select{
  border-radius: .85rem;
  border: 1px solid rgba(15,23,42,.14);
  padding: .7rem .9rem;
}

/* focus */
#kontakt .dj-easy-contact-wrapper input:focus,
#kontakt .dj-easy-contact-wrapper textarea:focus{
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 .2rem rgba(37,99,235,.15);
}

/* przycisk */
#kontakt .dj-easy-contact-wrapper button,
#kontakt .dj-easy-contact-wrapper input[type="submit"]{
  background: #0f2a55;
  border: none;
  border-radius: .85rem;
  padding: .7rem 1.15rem;
  font-weight: 700;
  color: #fff;
}

/* hover */
#kontakt .dj-easy-contact-wrapper button:hover{
  transform: translateY(-1px);
  filter: brightness(.96);
}
/* === Anchor offset: Kontakt === */
#kontakt-form{
  scroll-margin-top: 150px;
  position: relative;
  top: -150px;
  display: block;
  height: 0;
  visibility: hidden;
}
/* DJ-MegaMenu dropdown zawsze nad treścią */
header.header.container-header{ z-index: 9999 !important; }
header.header.container-header .dj-megamenu-wrapper{ position: relative; z-index: 10000 !important; }
header.header.container-header .dj-subwrap{ z-index: 20000 !important; }

/* treść niżej nie może przykrywać menu */
.site-grid{ position: relative; z-index: 1 !important; }

/* header nie może ucinać dropdown */
header.header.container-header,
header.header.container-header .container-nav,
header.header.container-header .grid-child.container-nav{ overflow: visible !important; }
/* płynne przejście shrink + dropdown */
header.header.container-header{
  transition: padding .22s ease, box-shadow .22s ease;
}
header.header.container-header .navbar-nav .nav-link,
header.header.container-header .navbar-brand img{
  transition: padding .22s ease, max-height .22s ease, transform .22s ease;
}
/* =========================================================
   DJ-MegaMenu – wygląd dropdown (bardziej "enterprise")
   ========================================================= */

/* kontener dropdown */
header.header.container-header .dj-subwrap{
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(2,6,23,.18);
  padding: .35rem;
  min-width: 260px;
  backdrop-filter: blur(8px);
}

/* lista w środku */
header.header.container-header .dj-subwrap ul{
  margin: 0;
  padding: .15rem;
  list-style: none;
}

/* pojedynczy element */
header.header.container-header .dj-subwrap li{
  margin: 0;
}

/* link w dropdown */
header.header.container-header .dj-subwrap a{
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .70rem;
  border-radius: 10px;
  color: var(--am-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  transition: background .15s ease, transform .15s ease;
}

/* hover/focus */
header.header.container-header .dj-subwrap a:hover,
header.header.container-header .dj-subwrap a:focus-visible{
  background: rgba(37,99,235,.10);
  transform: translateY(-1px);
}

/* delikatna ikonka-kropka przed linkiem (spójna z chipami) */
header.header.container-header .dj-subwrap a::before{
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: rgba(37,99,235,.35);
  flex: 0 0 auto;
}

/* separatory jeśli DJ je dodaje */
header.header.container-header .dj-subwrap .separator{
  height: 1px;
  margin: .25rem .4rem;
  background: rgba(15,23,42,.08);
  padding: 0 !important;
}

/* =========================================================
   Dopasowanie pod stan "po scrollu" (header mniejszy)
   ========================================================= */

header.header.container-header.am-scrolled .dj-subwrap{
  padding: .30rem;
  border-radius: 12px;
}

header.header.container-header.am-scrolled .dj-subwrap a{
  padding: .48rem .65rem;
  font-size: .93rem;
}
/* =========================================================
   NASZE USŁUGI – category-list jest tabelą -> robimy kafle
   ========================================================= */

/* ukryj caption i thead (zostawiamy tylko treść) */
.com-content-category.category-list .com-content-category__table caption,
.com-content-category.category-list .com-content-category__table thead{
  display: none !important;
}

/* tabela + tbody jako grid */
.com-content-category.category-list .com-content-category__table{
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  margin-top: 1.25rem !important;
}

/* UWAGA: tu robimy grid */
.com-content-category.category-list .com-content-category__table tbody{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1.1rem !important;
}

/* wiersz tabeli staje się kaflem */
.com-content-category.category-list .com-content-category__table tbody tr{
  display: block !important;            /* odkleja od tabeli */
  margin: 0 !important;
  background: #fff !important;
  border: 1px solid var(--am-border) !important;
  border-radius: 1rem !important;
  box-shadow: 0 10px 28px rgba(2,6,23,.06) !important;
  overflow: hidden !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

/* komórka z tytułem */
.com-content-category.category-list .com-content-category__table tbody tr th.list-title,
.com-content-category.category-list .com-content-category__table tbody tr td{
  display: block !important;
  border: 0 !important;
  padding: 0 !important;
}

/* link w kaflu – cała powierzchnia klik */
.com-content-category.category-list .com-content-category__table tbody tr th.list-title a{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .75rem !important;

  padding: 1.05rem 1.1rem !important;
  font-weight: 700 !important;
  color: var(--am-ink) !important;
  text-decoration: none !important;
  line-height: 1.25 !important;
}

/* strzałka */
.com-content-category.category-list .com-content-category__table tbody tr th.list-title a::after{
  content: "→" !important;
  font-weight: 800 !important;
  color: rgba(37,99,235,.9) !important;
  transition: transform .18s ease !important;
}

/* hover */
.com-content-category.category-list .com-content-category__table tbody tr:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 36px rgba(2,6,23,.10) !important;
  border-color: rgba(37,99,235,.35) !important;
}
.com-content-category.category-list .com-content-category__table tbody tr:hover th.list-title a::after{
  transform: translateX(3px) !important;
}

/* zbijamy styl bootstrapowego table-striped */
.com-content-category.category-list .table-striped > tbody > tr:nth-of-type(odd){
  --bs-table-accent-bg: transparent !important;
  background-color: transparent !important;
}

/* RWD */
@media (max-width: 1200px){
  .com-content-category.category-list .com-content-category__table tbody{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 991px){
  .com-content-category.category-list .com-content-category__table tbody{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 575px){
  .com-content-category.category-list .com-content-category__table tbody{
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   NASZE USŁUGI – kafle + ikony (po href/slug) + dopieszczenie
   ========================================================= */

/* baza kafla */
.com-content-category.category-list .com-content-category__table tbody tr{
  position: relative !important;
}

/* link jako “karta” */
.com-content-category.category-list .com-content-category__table tbody tr th.list-title a{
  padding: 1.05rem 1.1rem !important;
  border-radius: 1rem !important;
}

/* Ikona w kółku po lewej (domyślna) */
.com-content-category.category-list .com-content-category__table tbody tr th.list-title a::before{
  content: "💼"; /* domyślna */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  border-radius: 999px !important;
  background: rgba(37,99,235,.10) !important;
  color: var(--am-ink) !important;
  flex: 0 0 auto !important;
  margin-right: .75rem !important;
  font-size: 1.05rem !important;
}

/* Układ: ikona | tytuł | strzałka */
.com-content-category.category-list .com-content-category__table tbody tr th.list-title a{
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
}

/* strzałka – delikatniejsza */
.com-content-category.category-list .com-content-category__table tbody tr th.list-title a::after{
  color: rgba(37,99,235,.85) !important;
}

/* hover tła wewnątrz */
.com-content-category.category-list .com-content-category__table tbody tr:hover th.list-title a{
  background: rgba(37,99,235,.06) !important;
}

/* focus dla klawiatury */
.com-content-category.category-list .com-content-category__table tbody tr th.list-title a:focus-visible{
  outline: 3px solid rgba(37,99,235,.35) !important;
  outline-offset: 2px !important;
}

/* =========================================================
   IKONY PER POZYCJA – po fragmencie URL (slug)
   Dostosuj slugi do swoich aliasów w Joomla
   ========================================================= */

/* Audyt / porządkowanie IT */
.com-content-category.category-list a[href*="audyt"]::before{
  content: "🧾";
}

/* Sieci / VPN */
.com-content-category.category-list a[href*="vpn"]::before,
.com-content-category.category-list a[href*="sieci"]::before{
  content: "🛡️";
}

/* Podpis elektroniczny */
.com-content-category.category-list a[href*="podpis"]::before,
.com-content-category.category-list a[href*="sigillum"]::before{
  content: "✍️";
}

/* Wdrożenia WAPRO */
.com-content-category.category-list a[href*="wapro"]::before{
  content: "📦";
}

/* Hosting i poczta */
.com-content-category.category-list a[href*="hosting"]::before,
.com-content-category.category-list a[href*="poczta"]::before{
  content: "📧";
}

/* Kolokacja */
.com-content-category.category-list a[href*="kolokacja"]::before{
  content: "🏢";
}

/* Serwery i administracja */
.com-content-category.category-list a[href*="serwery"]::before,
.com-content-category.category-list a[href*="administracja"]::before{
  content: "🖥️";
}

/* Opieka IT / Outsourcing */
.com-content-category.category-list a[href*="opieka"]::before,
.com-content-category.category-list a[href*="outsourcing"]::before,
.com-content-category.category-list a[href*="sla"]::before{
  content: "🧑‍💻";
}

/* Oprogramowanie (ogólnie) */
.com-content-category.category-list a[href*="oprogramowanie"]::before{
  content: "🧩";
}
/* Topbar – pill z ikoną */
.am-pill{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .38rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--am-border);
  background: #fff;
  color: var(--am-ink);
  font-size: .92rem;
}

.am-pill-muted{
  color: var(--am-muted);
  background: rgba(255,255,255,.75);
}

.am-pill-label{
  font-weight: 700;
}

.am-pill-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--am-border);
  background: rgba(37,99,235,.08);
  color: var(--am-accent);
  text-decoration: none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.am-pill-icon:hover{
  transform: translateY(-1px);
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.35);
}

.am-pill-icon:focus-visible{
  outline: 3px solid rgba(37,99,235,.35);
  outline-offset: 2px;
}
/* ikona w “kółku” */
.am-pill-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;
  border-radius: 999px;

  border: 1px solid var(--am-border);
  background: rgba(37,99,235,.08);
  color: var(--am-accent);

  text-decoration: none;
  line-height: 1;
}

/* WAŻNE: to wymusza widoczność ikony */
.am-pill-icon i{
  font-size: 15px;
  line-height: 1;
  color: currentColor;
}
/* baza */
.am-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  transition: 
    background-color .2s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    transform .15s ease;
}

/* tekst */
.am-pill-label {
  font-weight: 500;
  color: #1f2937; /* CIEMNY – NIE ZMIENIAMY NA HOVER */
}

/* ikonka */
.am-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1f2937; /* jw. */
}

/* HOVER – BEZ ZNIKANIA */
.am-pill:hover,
.am-pill:focus-within {
  background-color: #f4f7fb;           /* delikatne tło */
  border-color: rgba(37, 99, 235, .35); /* akcent */
  box-shadow: 0 4px 14px rgba(37,99,235,.12);
  transform: translateY(-1px);
}

/* ikona może się lekko podświetlić */
.am-pill:hover .am-pill-icon {
  color: #2563eb;
}
/* ============================================================
   TOPBAR – FIX hover (Sprzedaż/Wsparcie nie znikają)
   ============================================================ */

.am-topbar .am-pill{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.38rem .80rem;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(15,23,42,.12);
  color: var(--am-ink);
  transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease, transform .15s ease;
}

/* FontAwesome ikony zawsze widoczne */
.am-topbar .am-pill i{
  color: currentColor;
  opacity: 1;
}

/* Link w pill — dziedziczy kolor, nie robi "dziwnych" hoverów */
.am-topbar .am-pill-link{
  color: inherit !important;
  text-decoration: none !important;
  font-weight: 700;
  opacity: 1 !important;
}

/* Hover/focus na całej pigułce (nie na samym <a>) */
.am-topbar .am-pill:hover,
.am-topbar .am-pill:focus-within{
  background:#f4f7fb;
  border-color: rgba(37,99,235,.35);
  box-shadow: 0 4px 14px rgba(37,99,235,.12);
  transform: translateY(-1px);
}

/* Delikatny akcent tylko dla CTA (Sprzedaż/Wsparcie) */
.am-topbar .am-pill-cta:hover,
.am-topbar .am-pill-cta:focus-within{
  color: var(--am-accent);
}

/* Podkreślenie tekstu na hover (subtelny sygnał) */
.am-topbar .am-pill-cta:hover .am-pill-link,
.am-topbar .am-pill-cta:focus-within .am-pill-link{
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Muted nie zmienia koloru tekstu na hover (tylko lekko tło) */
.am-topbar .am-pill-muted:hover,
.am-topbar .am-pill-muted:focus-within{
  color: var(--am-muted);
  background: rgba(248,250,252,.9);
  border-color: rgba(15,23,42,.12);
  box-shadow: none;
  transform: none;
}
/* =========================================================
   PARTNERZY – stopka (footer) / 2 moduły w jednym .grid-child
   SKORYGOWANA WERSJA
   ========================================================= */

/* tło całej stopki-sekcji */
footer.container-footer.footer.full-width{
  background: linear-gradient(135deg, rgba(13,26,60,.95), rgba(56,60,120,.92));
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.10);
}

/* wrapper – dwa klocki obok siebie */
footer.container-footer.footer.full-width > .grid-child{
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.25rem);

  /* 🔽 MNIEJ WYSOKOŚCI (zwłaszcza na dole) */
  padding-top: clamp(1.25rem, 2.2vw, 2.0rem);
  padding-bottom: clamp(.95rem, 1.8vw, 1.55rem);

  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* lewy klocek */
footer.container-footer .am-partners--text{
  flex: 0 0 36%;
  min-width: 260px;
}

/* typografia lewego */
footer.container-footer .am-partners--text h2,
footer.container-footer .am-partners--text .h4{
  color: #fff;
  margin: 0 0 .35rem;
}

/* 🔽 zbijamy „powietrze” pod opisem */
footer.container-footer .am-partners--text .text-muted{
  color: rgba(255,255,255,.72) !important;
  margin-bottom: .6rem !important;
}

/* prawy klocek – slider */
footer.container-footer .am-partners--slider{
  flex: 1 1 auto;
  min-width: 0;
}

/* ================= DJ-ImageSlider – czysty look ================= */

/* brak białych teł */
footer.container-footer .am-partners--slider .djslider-loader,
footer.container-footer .am-partners--slider .djslider-default{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* szerokość slidera */
footer.container-footer .am-partners--slider .djslider-default{
  width: 100% !important;
  max-width: 760px;
  margin-left: auto;
}

/* centrowanie pionowe */
footer.container-footer .am-partners--slider .djslider-in,
footer.container-footer .am-partners--slider ul.djslider-in{
  display: flex !important;
  align-items: center !important;
}

/* pojedynczy slajd */
footer.container-footer .am-partners--slider .djslider-in li{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* =========================================================
   LOGOTYPY – jaśniejsze w stanie spoczynku
   ========================================================= */

footer.container-footer .am-partners--slider img{
  opacity: .85;
  filter: grayscale(1) brightness(1.65) contrast(1.05);
  transition: filter .18s ease, opacity .18s ease, transform .18s ease;
}

/* hover na cały kafel (pewniejsze niż img:hover) */
footer.container-footer .am-partners--slider .djslider-in li:hover img{
  opacity: 1;
  filter: none;
  transform: translateY(-1px);
}

/* ================= RWD ================= */

@media (max-width: 991px){
  footer.container-footer.footer.full-width > .grid-child{
    flex-direction: column;
    align-items: flex-start;
  }

  footer.container-footer .am-partners--text,
  footer.container-footer .am-partners--slider{
    width: 100%;
  }

  footer.container-footer .am-partners--slider .djslider-default{
    margin-left: 0;
    max-width: 100%;
  }
}
/* delikatne optyczne podniesienie slidera */
footer.container-footer .am-partners--slider{
  position: relative;
  top: -8px; /* spróbuj -5px do -8px */
}
/* =========================================================
   DJ-MegaMenu OFFCANVAS (mobile) – pełna wysokość i na wierzchu
   ========================================================= */

/* sam panel */
aside#dj-megamenu111offcanvas{
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;

  z-index: 99999 !important;  /* zawsze nad treścią i headerem */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* overlay pod panelem, ale nad stroną */
.dj-megamenu-offcanvas-overlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 99998 !important;
}

/* gdy offcanvas otwarty – niech strona się nie przewija pod spodem */
body.dj-offcanvas-open{
  overflow: hidden !important;
}

/* header i jego dzieci nie mogą “zjadać” klików/warstw */
header.container-header,
header.container-header *{
  transform: none !important; /* jeśli gdzieś wpadło transform, potrafi psuć fixed */
}
/* =========================================================
   FAQ / POMOC – Category Blog (Jedna kategoria -> przegląd)
   URL: /pomoc  (warto zawęzić do itemid jeśli chcesz)
   ========================================================= */

/* kontener listy blogowej */
.com-content-category-blog .com-content-category-blog__items{
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}

/* pojedynczy wpis jako karta */
.com-content-category-blog .com-content-category-blog__item{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 28px rgba(2,6,23,.06);
  padding: 1.05rem 1.1rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.com-content-category-blog .com-content-category-blog__item:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(2,6,23,.10);
  border-color: rgba(37,99,235,.30);
}

/* tytuł (H2/H3 zależnie od ustawień) */
.com-content-category-blog .com-content-category-blog__item h2,
.com-content-category-blog .com-content-category-blog__item h3{
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* link w tytule – bez “surowego” niebieskiego + podkreślenia */
.com-content-category-blog .com-content-category-blog__item h2 a,
.com-content-category-blog .com-content-category-blog__item h3 a{
  color: var(--am-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}

/* ikonka po lewej (spójna z resztą) */
.com-content-category-blog .com-content-category-blog__item h2 a::before,
.com-content-category-blog .com-content-category-blog__item h3 a::before{
  content: "🧰";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: rgba(37,99,235,.10);
  flex: 0 0 auto;
}

/* strzałka po prawej (jak w usługach) */
.com-content-category-blog .com-content-category-blog__item h2 a::after,
.com-content-category-blog .com-content-category-blog__item h3 a::after{
  content: "→";
  margin-left: .35rem;
  font-weight: 800;
  color: rgba(37,99,235,.85);
  transition: transform .18s ease;
}

.com-content-category-blog .com-content-category-blog__item:hover h2 a::after,
.com-content-category-blog .com-content-category-blog__item:hover h3 a::after{
  transform: translateX(3px);
}

/* intro / zajawka */
.com-content-category-blog .com-content-category-blog__item .com-content-article__body,
.com-content-category-blog .com-content-category-blog__item .item-content,
.com-content-category-blog .com-content-category-blog__item p{
  color: var(--am-muted);
  margin: .55rem 0 0;
}

/* focus dla klawiatury */
.com-content-category-blog .com-content-category-blog__item h2 a:focus-visible,
.com-content-category-blog .com-content-category-blog__item h3 a:focus-visible{
  outline: 3px solid rgba(37,99,235,.35);
  outline-offset: 3px;
  border-radius: .75rem;
}
/* =========================================================
   FAQ / POMOC – Itemid 112
   Korekta skali typografii
   ========================================================= */

body.itemid-112 .com-content-category-blog__item h2,
body.itemid-112 .com-content-category-blog__item h3{
  font-size: clamp(1.05rem, 1.15vw, 1.25rem);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* link w tytule */
body.itemid-112 .com-content-category-blog__item h2 a,
body.itemid-112 .com-content-category-blog__item h3 a{
  color: #0f172a; /* spójne z resztą serwisu */
}

/* ikonka – trochę mniejsza, mniej „krzycząca” */
body.itemid-112 .com-content-category-blog__item h2 a::before,
body.itemid-112 .com-content-category-blog__item h3 a::before{
  width: 2rem;
  height: 2rem;
  font-size: .95rem;
  background: rgba(37,99,235,.08);
}

/* strzałka – subtelniejsza */
body.itemid-112 .com-content-category-blog__item h2 a::after,
body.itemid-112 .com-content-category-blog__item h3 a::after{
  font-size: 1rem;
  opacity: .85;
}

/* zajawka / intro */
body.itemid-112 .com-content-category-blog__item p{
  font-size: .9rem;
  line-height: 1.5;
  color: var(--am-muted);
}
.faq-back{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-size:.9rem;
  color:#3b5bfd;
  text-decoration:none;
  margin-bottom:1rem;
}
.faq-back:hover{
  text-decoration:underline;
}
/* POMOC (ItemID 112) – moduł "Powrót" tylko na widoku artykułu */
body.itemid-112.view-category .am-faq-back{
  display: none !important;
}

body.itemid-112.view-article .am-faq-back{
  display: block !important;
}

/* (opcjonalnie) wygląd linku jak button */
body.itemid-112.view-article .am-faq-back a{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  text-decoration: none;
  font-weight: 600;
}
body.itemid-112.view-article .am-faq-back a:hover{
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.25);
}
.faq-search{
  max-width:480px;
  margin:0 0 2rem;
}
.faq-search input{
  border-radius:12px;
  padding:.6rem .9rem;
}
/* Smart Search / Finder – ukryj meta w wynikach */
.com-finder .result__meta,
.com-finder .result__taxonomy,
.com-finder .result__info,
.com-finder .result__date{
  display: none !important;
}
/* Ukryj MODUŁ wyszukiwarki na stronach wyników com_finder (zostaje tylko formularz komponentu) */
body.com_finder .faq-search {
  display: none !important;
}
/* =========================================================
   POMOC – WYNIKI WYSZUKIWANIA (com_finder) – styl jak FAQ
   ========================================================= */

/* Scope: tylko wyszukiwarka w kontekście Pomoc (Itemid=112) */
body.itemid-112 .com-finder,
body.itemid-112 .com-finder__search,
body.itemid-112 .com-finder__results{
  --faq-radius: 18px;
  --faq-border: rgba(0,0,0,.08);
  --faq-shadow: 0 12px 28px rgba(17, 24, 39, .08);
}

/* Nagłówki/typografia – mniej krzyku */
body.itemid-112 .com-finder h1,
body.itemid-112 .com-finder h2,
body.itemid-112 .com-finder h3{
  letter-spacing: -0.02em;
}

body.itemid-112 .com-finder__results .result__title,
body.itemid-112 .com-finder__results h3{
  font-size: clamp(1.15rem, 1.2vw + .9rem, 1.6rem);
  line-height: 1.25;
  margin: 0 0 .35rem;
}

/* Kontener wyników */
body.itemid-112 .com-finder__results{
  margin-top: 1.25rem;
}

/* Każdy wynik jako karta */
body.itemid-112 .com-finder__results .result,
body.itemid-112 .com-finder__results li{
  list-style: none;
  background: #fff;
  border: 1px solid var(--faq-border);
  border-radius: var(--faq-radius);
  box-shadow: var(--faq-shadow);
  padding: 1.05rem 1.15rem;
  margin: 0 0 1rem;
}

/* Jeśli Joomla wstawia <hr> pomiędzy wynikami – schowaj */
body.itemid-112 .com-finder__results hr{
  display: none !important;
}

/* Link tytułu */
body.itemid-112 .com-finder__results a{
  text-decoration: none;
}
body.itemid-112 .com-finder__results a:hover{
  text-decoration: underline;
}

/* Opis/snippet */
body.itemid-112 .com-finder__results .result__description,
body.itemid-112 .com-finder__results .result__text{
  color: rgba(17, 24, 39, .75);
  margin: 0;
}

/* Podświetlenie trafień (mark) – delikatne, spójne */
body.itemid-112 .com-finder__results mark{
  background: rgba(59, 130, 246, .16);
  color: inherit;
  padding: .05em .35em;
  border-radius: .45em;
}

/* Ukryj „surowe” elementy w wynikach (URL / metadane) */
body.itemid-112 .com-finder__results .result__url,
body.itemid-112 .com-finder__results .result__tax,
body.itemid-112 .com-finder__results .result__meta,
body.itemid-112 .com-finder__results .small,
body.itemid-112 .com-finder__results .muted,
body.itemid-112 .com-finder__results .result__misc{
  display: none !important;
}

/* Licznik "Rezultaty wyszukiwania..." – uspokój i wyrównaj */
body.itemid-112 .com-finder__results .search-results,
body.itemid-112 .com-finder__results .search-results__counter{
  margin-top: .5rem;
  color: rgba(17, 24, 39, .6);
  font-size: .95rem;
}

/* Drobna poprawka odstępów na mobile */
@media (max-width: 767px){
  body.itemid-112 .com-finder__results .result,
  body.itemid-112 .com-finder__results li{
    padding: .95rem 1rem;
    border-radius: 16px;
  }
}
body.itemid-112 .com-finder__results::before {
  content: "Wyniki wyszukiwania w Pomocy:";
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 1rem;
  color: rgba(15, 23, 42, .65);
}
/* najważniejsze: zmniejszamy H1 tylko w Pomocy */
body.itemid-112.view-article .page-header h1,
body.itemid-112.view-article h1{
  font-size: clamp(1.55rem, 3vw, 1.8rem);
  line-height: 1.15;
  font-weight: 700;   /* jeśli wciąż za grubo → daj 700 */
  margin: 0 0 .6rem;
}

/* treść artykułu */
body.itemid-112.view-article .com-content-article__body{
  font-size: 1.05rem;
  line-height: 1.65;
}
/* 2) Wyniki com_finder (search) – tytuły wyników */
body.itemid-112.view-search #search-results .result__title,
body.itemid-112.view-search #search-results h3,
body.itemid-112.view-search #search-results h3 a,
body.itemid-112.view-search #search-result-list .result__title a{
  font-size: clamp(1.05rem, 1.2vw, 1.25rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}
/* =========================================
   WYSZUKIWARKA – MODUŁ + COMPONENT
   ========================================= */

/* kontener */
.com-finder__form,
.com-finder form,
.mod-finder__form {
    margin-bottom: 2rem;
}

/* input */
.com-finder input[type="search"],
.com-finder input[type="text"],
.mod-finder input[type="search"],
.mod-finder input[type="text"] {
    height: 48px;
    padding: 0 16px;
    font-size: 16px;
    border-radius: 10px 0 0 10px;
    border: 1px solid #d5dbe5;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

/* focus input */
.com-finder input:focus,
.mod-finder input:focus {
    border-color: #223a6d; /* kolor banera */
    box-shadow: 0 0 0 3px rgba(34, 58, 109, 0.15);
    outline: none;
}

/* przycisk */
.com-finder button,
.mod-finder button {
    height: 48px;
    padding: 0 20px;
    border-radius: 0 10px 10px 0;
    background: #223a6d; /* kolor banera */
    color: #fff;
    font-weight: 500;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background .2s ease, box-shadow .2s ease, transform .1s ease;
}

/* hover */
.com-finder button:hover,
.mod-finder button:hover {
    background: #1b2f5c; /* delikatnie ciemniejszy */
    box-shadow: 0 6px 14px rgba(34, 58, 109, 0.25);
}

/* active */
.com-finder button:active,
.mod-finder button:active {
    transform: translateY(1px);
}

/* ikona lupy */
.com-finder button svg,
.mod-finder button svg {
    width: 16px;
    height: 16px;
}

/* wyrównanie input + button w jednej linii */
.com-finder .input-group,
.mod-finder .input-group {
    display: flex;
    align-items: stretch;
}
/* 1) Domyślnie (bez przycisku) – input ma być cały zaokrąglony */
.com-finder input[type="search"],
.com-finder input[type="text"],
.mod-finder input[type="search"],
.mod-finder input[type="text"]{
  border-radius: 10px !important;
}

/* 2) Jeśli input-group ma przycisk – wtedy lewa strona okrągła, prawa "na styk" z buttonem */
.com-finder .input-group:has(.btn, button[type="submit"]) input[type="search"],
.com-finder .input-group:has(.btn, button[type="submit"]) input[type="text"],
.mod-finder .input-group:has(.btn, button[type="submit"]) input[type="search"],
.mod-finder .input-group:has(.btn, button[type="submit"]) input[type="text"]{
  border-radius: 10px 0 0 10px !important;
}
/* =========================================================
   MINI FAQ (Podpis elektroniczny) – styl jak globalne FAQ
   Wymaga klasy modułu: am-mini-faq
   ========================================================= */

/* karta/kontener modułu */
.moduletable.am-mini-faq{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 28px rgba(2,6,23,.06);
  overflow: hidden;
}

/* tytuł modułu (nagłówek boxa) */
.moduletable.am-mini-faq > h3,
.moduletable.am-mini-faq .module-title,
.moduletable.am-mini-faq .card-header{
  margin: 0;
  padding: .9rem 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  border-bottom: 1px solid rgba(15,23,42,.08);
  
}

/* reset listy linków */
.moduletable.am-mini-faq ul{
  list-style: none;
  margin: 0;
  padding: .55rem .55rem .75rem;
}

/* element listy jako “wiersz” */
.moduletable.am-mini-faq li{
  margin: 0;
  padding: 0;
}

/* link jako kafelek (jak FAQ globalne: ikona + strzałka) */
.moduletable.am-mini-faq li a{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;

  padding: .7rem .7rem;
  border-radius: .85rem;

  color: var(--am-ink);
  text-decoration: none;
  font-weight: 700;
  line-height: 1.25;

  transition: background .15s ease, transform .15s ease;
}

/* ikonka-kółko z lewej (spójna z resztą) */
.moduletable.am-mini-faq li a::before{
  content: "🧰";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 999px;
  background: rgba(37,99,235,.10);
  flex: 0 0 auto;
  font-size: .95rem;
}

/* strzałka w prawo */
.moduletable.am-mini-faq li a::after{
  content: "→";
  font-weight: 800;
  color: rgba(37,99,235,.85);
  transition: transform .18s ease;
}

/* hover */
.moduletable.am-mini-faq li a:hover{
  background: rgba(37,99,235,.06);
  transform: translateY(-1px);
}
.moduletable.am-mini-faq li a:hover::after{
  transform: translateX(3px);
}

/* focus */
.moduletable.am-mini-faq li a:focus-visible{
  outline: 3px solid rgba(37,99,235,.35);
  outline-offset: 2px;
}

/* mobile – trochę ciaśniej */
@media (max-width: 575px){
  .moduletable.am-mini-faq li a{
    padding: .65rem .65rem;
  }
}
/* POMOC (ItemID 129) – moduł "Powrót" tylko na widoku artykułu dla FAQ-Sigillum */
body.itemid-129.view-category .am-faq-back{
  display: none !important;
}

body.itemid-129.view-article .am-faq-back{
  display: block !important;
}

/* (opcjonalnie) wygląd linku jak button */
body.itemid-129.view-article .am-faq-back a{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  text-decoration: none;
  font-weight: 600
  }
body.itemid-129.view-article .am-faq-back a:hover{
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.25);
}
/* ===== MINI FAQ (moduł: Articles - Category) ===== */

/* kontener modułu jako "karta" (spójna z resztą) */
.am-mini-faq{
  height: 100%;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 1.1rem;
  background: #fff;
  box-shadow: 0 10px 28px rgba(2,6,23,.06);
  overflow: hidden;
}

/* nagłówek modułu = tło jak w innych boksach */
.am-mini-faq .module-title,
.am-mini-faq > h3{
  margin: 0;
  padding: 1rem 1.1rem;
  background: var(--am-soft);
  border-bottom: 1px solid rgba(15,23,42,.10);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* wnętrze modułu */
.am-mini-faq .moduletable,
.am-mini-faq .card-body{
  padding: 0 !important;
}
/* lista pytań przewijana wewnątrz boksu (wysokość stała) */
.am-mini-faq .com-content-category-blog__items,
.am-mini-faq .category-module{
  max-height: 350px;           /* dobierz pod wysokość boksu obok */
  overflow: auto;
  padding: .75rem 1.1rem 1rem;
}

/* delikatniejszy wygląd scrolla (opcjonalnie) */
.am-mini-faq .com-content-category-blog__items::-webkit-scrollbar,
.am-mini-faq .category-module::-webkit-scrollbar{
  width: 10px;
}
.am-mini-faq .com-content-category-blog__items::-webkit-scrollbar-thumb,
.am-mini-faq .category-module::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,.14);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
/* ===== Podpis elektroniczny – Kontakt: ładne narożniki jak na home ===== */

/* sekcja też klipuje tło (ważne jeśli coś pod spodem wystaje) */
#kontakt.am-contact-section{
  border-radius: 1.25rem;
  overflow: hidden;
}

/* karta w środku – pewny radius + clip */
#kontakt .am-contact-card{
  border-radius: 1.25rem !important;
  overflow: hidden;
}

/* jeśli masz dodatkowy wrapper z obramowaniem/cieniem – też mu daj radius */
#kontakt .container{
  border-radius: 1.25rem;
  
}
/* =========================================================
   Podpis elektroniczny (Itemid 120) – Kontakt + MiniFAQ równa wysokość
   ========================================================= */

body.itemid-120 .grid-child.container-bottom-b{
  display:flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 1.25rem !important;
  }

/* DWA moduły jako równe kolumny */
body.itemid-120 .grid-child.container-bottom-b > .moduletable.am-contact-section,
body.itemid-120 .grid-child.container-bottom-b > .moduletable.am-mini-faq{
  flex: 1 1 0 !important;       /* <<< KLUCZ: obie kolumny “równe” */
  align-self: stretch !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

/* Kontakt: sekcja + karta mają wypełnić wysokość kolumny */
body.itemid-120 .moduletable.am-contact-section #kontakt.am-contact-section{
  height: 100% !important;
}
body.itemid-120 .moduletable.am-contact-section .am-contact-card{
  height: 100% !important;
}

/* MiniFAQ: zabijamy wszelkie “dodatkowe doły” na wrapperze */
body.itemid-120 .moduletable.am-mini-faq{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
body.itemid-120 .moduletable.am-mini-faq ul.mod-articlescategory{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* Itemid 120 – wyrównanie wysokości: usuń domyślne marginesy modułów */
body.itemid-120 .grid-child.container-bottom-b > .moduletable{
  margin: 0 !important;
}

/* (opcjonalnie) jeśli tylko FAQ ma te marginesy, a nie chcesz ruszać kontaktu: */
body.itemid-120 .moduletable.am-mini-faq{
  margin: 0 !important;
}

/* =========================================================
   TOPBAR – mobile: zostaw tylko Sprzedaż/Support
   ========================================================= */
@media (max-width: 575px){

  /* chowamy lewą stronę (Bydgoszcz / IT dla firm) */
  .am-topbar .am-topbar-left{
    display: none !important;
  }

  /* prawa strona (CTA) na środku i w jednej linii */
  .am-topbar .container{
    justify-content: center !important;
  }

  .am-topbar .am-topbar-right{
    justify-content: center !important;
    width: 100%;
  }

  /* opcjonalnie: dopnij, żeby nie łamało się w 2 rzędy */
  .am-topbar .am-topbar-right{
    flex-wrap: nowrap !important;
  }
}
/* =========================================================
   MOBILE – mniejsze pole wyszukiwania w headerze
   ========================================================= */
@media (max-width: 768px){

  /* wrapper search */
  .container-search form,
  .container-search .search{
    width: 100%;
  }

  /* input */
  .container-search input[type="search"],
  .container-search input[type="text"]{
    height: 38px !important;
    padding: 0.4rem 0.75rem !important;
    font-size: 0.9rem !important;
    border-radius: 10px !important;
  }

  /* placeholder */
  .container-search input::placeholder{
    font-size: 0.85rem;
    opacity: 0.85;
  }

  /* jeśli jest ikonka lupy / button */
  .container-search button{
    height: 38px !important;
    padding: 0 0.75rem !important;
  }
}

@media (max-width: 768px){
  .container-search{
    max-width: 50%;
    margin-inline: auto;
  }
}
/* =========================================================
   MOBILE – wyrównanie searcha do krawędzi boxów poniżej
   ========================================================= */
@media (max-width: 768px){

  /* kontener headera (tam gdzie hamburger + search) */
  header .container,
  header .container-fluid{
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  /* wrapper search */
  .container-search{
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  /* sam input – dojeżdża idealnie do krawędzi */
  .container-search input[type="search"],
  .container-search input[type="text"]{
    width: 100% !important;
    margin-right: 0 !important;
  }
}
/* =========================================================
   DJ MegaMenu – MOBILE: hamburger mniejszy, bez otoczki,
   bez niebieskiego po kliknięciu + na wysokości "Szukaj"
   ========================================================= */
@media (max-width: 991px){

  /* wrapper z przyciskiem */
  #dj-megamenu111mobile{
    display: flex !important;
    align-items: center !important;
  }

  /* Sam przycisk – BEZ tła i obramowania */
  #dj-megamenu111mobile .dj-mobile-open-btn{
    width: 45px !important;
    height: 45px !important;
    padding: 0 !important;
    margin: 0 12px 0 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 12px !important;

    background: transparent !important; /* <- bez otoczki */
    border: 0 !important;              /* <- bez otoczki */
    box-shadow: none !important;

    /* żeby przeglądarka/DJ nie dokładały "focus ring" */
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* Wyłącz wszelkie niebieskie focus/active z DJ/BS */
  #dj-megamenu111mobile .dj-mobile-open-btn:focus,
  #dj-megamenu111mobile .dj-mobile-open-btn:focus-visible,
  #dj-megamenu111mobile .dj-mobile-open-btn:active{
    outline: none !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* Kontener ikony */
  #dj-megamenu111mobile .dj-mobile-open-icon{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  /* Ikona hamburgera (DJ rysuje w ::before) */
  #dj-megamenu111mobile .dj-mobile-open-icon::before{
    font-size: 1.55rem !important; /* zostaje jak jest – rozmiar kresek OK */
    line-height: 1 !important;

    /* KLUCZ: optyczne wyrównanie do inputa "Szukaj" */
    position: relative !important;
    top: 13px !important;  /* jeśli nadal minimalnie za wysoko -> 2px */
    
    /* NIE zmieniaj koloru na klik/focus */
    color: #ffffff !important; /* jeżeli chcesz dziedziczyć z tła – usuń i daj: color: currentColor */
  }

  /* Gdy DJ/FA próbuje zmienić kolor po kliknięciu/fokusie */
  #dj-megamenu111mobile .dj-mobile-open-btn:focus .dj-mobile-open-icon::before,
  #dj-megamenu111mobile .dj-mobile-open-btn:active .dj-mobile-open-icon::before{
    color: #ffffff !important;
  }
}
/* =========================================================
   DJ MegaMenu – MOBILE: usuń szary kwadrat (czyścimy wszystko)
   ========================================================= */
@media (max-width: 991px){

  /* BUTTON + WSZYSTKO W ŚRODKU + PSEUDO */
  #dj-megamenu111mobile .dj-mobile-open-btn,
  #dj-megamenu111mobile .dj-mobile-open-btn * ,
  #dj-megamenu111mobile .dj-mobile-open-btn::before,
  #dj-megamenu111mobile .dj-mobile-open-btn::after,
  #dj-megamenu111mobile .dj-mobile-open-icon,
  #dj-megamenu111mobile .dj-mobile-open-icon::before,
  #dj-megamenu111mobile .dj-mobile-open-icon::after{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    box-shadow: none !important;
    outline: none !important;
    border-color: transparent !important;
  }

  /* STANY aktywne / open */
  #dj-megamenu111mobile .dj-mobile-open-btn:hover,
  #dj-megamenu111mobile .dj-mobile-open-btn:focus,
  #dj-megamenu111mobile .dj-mobile-open-btn:focus-visible,
  #dj-megamenu111mobile .dj-mobile-open-btn:active,
  #dj-megamenu111mobile .dj-mobile-open-btn[aria-expanded="true"]{
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* Android/Samsung “tap highlight” */
  #dj-megamenu111mobile .dj-mobile-open-btn{
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  }

  /* Kolor kresek zawsze biały */
  #dj-megamenu111mobile .dj-mobile-open-icon::before{
    color: #fff !important;
  }
}
#dj-megamenu111mobile .dj-mobile-open-btn:active{
  opacity: .65;
}


/* =========================================================
   Top chips (mod-custom114) – MOBILE: lepsze proporcje na realnym telefonie
   ========================================================= */
@media (max-width: 991px){

  /* wrapper z chipami */
  #mod-custom114 .am-topchips-wrap{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .5rem !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* pojedynczy chip */
  #mod-custom114 a.am-chip{
    font-size: 14px !important;
    line-height: 1.15 !important;
    padding: .55rem .85rem !important;

    border-radius: 999px !important;

    /* żeby nie robił “kolosa” */
    max-width: 100% !important;

    /* jeśli tekst ma się ZAWSZE mieścić i może się łamać */
    white-space: normal !important;
    text-align: center !important;

    /* jeżeli gdzieś masz wymuszoną wysokość — kasujemy */
    height: auto !important;
    min-height: 0 !important;
  }
}

/* Dodatkowo: jeśli telefon ma mega szeroki font przez ustawienia/UA */
@media (max-width: 480px){
  #mod-custom114 a.am-chip{
    font-size: 15px !important;
    padding: .5rem .75rem !important;
  }
}

@media (width <= 991.98px) {
  .container-header {
    position: sticky !important;
    top: 0 !important;
    width: 100%;
    z-index: 100; /* Zapewnia, że nagłówek jest na wierzchu */
  }
}
@media (max-width: 991px){ /* Eliminuje migotanie menu */
  header.header.container-header{
    will-change: transform;
  }
}
/* HERO – obrazek na mobile: mniejszy, bliżej treści, bez „oderwania” */

@media (max-width: 991px){
  .am-hero img.am-hero-img{
    display: none !important;
  }
}
@media (max-width: 991px){
  .am-hero-img{ display: none !important; }
}
/* =========================================================
   DESKTOP (Itemid 101): Kontakt (kol1) + DJ-Easy (kol2)
   Kotwica #mod-custom143 nie może spychać formularza
   ========================================================= */
@media (min-width: 992px){

  body.itemid-101 .grid-child.container-bottom-b{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem !important;
    align-items: start !important;
  }

  /* 1) Kontakt = pierwszy moduletable w tej sekcji */
  body.itemid-101 .grid-child.container-bottom-b > .moduletable:first-of-type{
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  /* 2) Kotwica – niech siedzi w tej samej komórce co formularz, ale "zerowa" */
  body.itemid-101 .grid-child.container-bottom-b > #mod-custom143{
    grid-column: 2 !important;
    grid-row: 1 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  /* 3) DJ-Easy formularz = bottom-b card -> kol2/wiersz1 */
  body.itemid-101 .grid-child.container-bottom-b > .bottom-b.card{
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
}
/* =========================================================
   HOME (itemid-101) – wyrównanie wysokości kart Kontakt vs Formularz
   Rozciągamy wrappery + robimy obie kolumny flex
   ========================================================= */
@media (min-width: 992px){

  /* grid jak miałeś */
  body.itemid-101 .grid-child.container-bottom-b{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem !important;
    align-items: stretch !important;
  }

  /* OBIE kolumny jako flex, żeby dało się rozciągnąć wnętrze */
  body.itemid-101 .grid-child.container-bottom-b > .moduletable,
  body.itemid-101 .grid-child.container-bottom-b > .bottom-b.card{
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    height: 100% !important;
    margin: 0 !important;        /* kasujemy te 8px góra/dół z kart */
    min-height: 0 !important;
  }

  /* Prawa karta: card-body ma wypełniać wysokość */
  body.itemid-101 .grid-child.container-bottom-b > .bottom-b.card > .card-body{
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  /* LEWA strona: cały łańcuch wrapperów musi mieć "flex:1" */
  body.itemid-101 #mod-custom126,
  body.itemid-101 #mod-custom126 > section#kontakt{
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  body.itemid-101 #mod-custom126 #kontakt .am-contact-card{
    flex: 1 1 auto !important;   /* <<< KLUCZ: karta wypełnia kolumnę */
    height: 100% !important;
    min-height: 0 !important;
  }
}
/* =========================================================
   KONTAKT + FORMULARZ – wygląd KARTY na KAŻDEJ stronie
   (po ID modułów, więc nie psuje innych elementów)
   ========================================================= */

/* 1) Lewy moduł Kontakt (mod-custom126) jako karta */
#mod-custom126{
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 1.1rem !important;
  box-shadow: 0 10px 30px rgba(2,6,23,.06) !important;
  overflow: hidden !important;
  background: #fff !important;
}

/* jeżeli w środku masz “card-body” (czasem Cassiopeia owija) */
#mod-custom126 .card-body{
  padding: 1.25rem !important;
  background: #fff !important;
}

/* 2) Prawy moduł – wrapper DJ (on siedzi w .bottom-b.card) jako karta */
.grid-child.container-bottom-b .bottom-b.card{
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 1.1rem !important;
  box-shadow: 0 10px 30px rgba(2,6,23,.06) !important;
  overflow: hidden !important;
  background: #fff !important;
}

.grid-child.container-bottom-b .bottom-b.card > .card-body{
  padding: 1.25rem !important;
  background: #fff !important;
}

/* 3) DJ EasyContact – “prawa część” wygląda jak na home */
#dj-easy-contact-122.dj-easy-contact-wrapper{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* pola */
#dj-easy-contact-122 input[type="text"],
#dj-easy-contact-122 input[type="email"],
#dj-easy-contact-122 input[type="tel"],
#dj-easy-contact-122 select,
#dj-easy-contact-122 textarea,
#dj-easy-contact-122 .form-control{
  width: 100% !important;
  border-radius: .85rem !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  padding: .7rem .9rem !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: .95rem !important;
}

#dj-easy-contact-122 textarea{
  min-height: 140px !important;
  resize: vertical;
}

#dj-easy-contact-122 input:focus,
#dj-easy-contact-122 select:focus,
#dj-easy-contact-122 textarea:focus,
#dj-easy-contact-122 .form-control:focus{
  outline: none !important;
  border-color: rgba(37,99,235,.45) !important;
  box-shadow: 0 0 0 .2rem rgba(37,99,235,.16) !important;
}

/* submit */
#dj-easy-contact-122 button,
#dj-easy-contact-122 .btn,
#dj-easy-contact-122 input[type="submit"]{
  background: #0f2a55 !important;
  border: 1px solid #0f2a55 !important;
  color: #fff !important;
  border-radius: .85rem !important;
  padding: .7rem 1.15rem !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 22px rgba(2,6,23,.10);
  transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
}

#dj-easy-contact-122 button:hover,
#dj-easy-contact-122 .btn:hover,
#dj-easy-contact-122 input[type="submit"]:hover{
  filter: brightness(.96);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(2,6,23,.14);
}
/* =========================================================
   Równa wysokość 2 boksów (Kontakt + Formularz) w tej samej pozycji
   ========================================================= */

/* kontener z modułami ma rozciągać dzieci */
.grid-child.container-bottom-b{
  align-items: stretch !important;
}

/* oba moduły niech się rozciągają */
.grid-child.container-bottom-b > .moduletable,
.grid-child.container-bottom-b > .bottom-b.card{
  align-self: stretch !important;
}

/* jeżeli karta DJ ma card-body – rozciągnij go */
.grid-child.container-bottom-b > .bottom-b.card{
  display: flex !important;
  flex-direction: column !important;
}
.grid-child.container-bottom-b > .bottom-b.card > .card-body{
  flex: 1 1 auto !important;
}

/* lewy kontakt: rozciągnij sekcję + kartę, żeby wizualnie domknąć wysokość */
#mod-custom126,
#mod-custom126 #kontakt,
#mod-custom126 .am-contact-card{
  height: 100% !important;
}
/* =========================================================
   ItemID 120 – MOBILE: Kontakt + MiniFAQ POD SOBĄ
   (bez ruszania wyglądu kontaktu)
   ========================================================= */
@media (max-width: 991px){

  /* kontener z modułami w bottom-b */
  body.itemid-120 .grid-child.container-bottom-b{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    align-items: start !important;
  }

  /* moduły mają mieć pełną szerokość i nie mogą się “wypychać” */
  body.itemid-120 .grid-child.container-bottom-b > .moduletable,
  body.itemid-120 .grid-child.container-bottom-b > .bottom-b.card{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;          /* kasuje dziwne marginesy między modułami */
  }

  /* MINI FAQ (konkretnie) – pewne zachowanie na wąskim ekranie */
  body.itemid-120 .grid-child.container-bottom-b .moduletable.am-mini-faq{
    overflow: hidden !important;    /* żeby nic nie wystawało bokiem */
  }
}
/* =========================================
   HOME (itemid-101) – gradient tła dla sekcji "Dla kogo / Dlaczego"
   bez odcięcia w połowie
   ========================================= */
body.itemid-101 section.am-secion{
  position: relative;
  overflow: hidden;                 /* klucz: nie ma „ucięcia” / brzydkich krawędzi */
  border-radius: 18px;              /* dopasuj do reszty kart */
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
  padding-block: clamp(18px, 2.2vw, 34px) !important;

}

/* warstwa gradientu */
body.itemid-101 section.am-secion::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  background:
    radial-gradient(900px 380px at 18% 0%, rgba(37,99,235,.10), transparent 65%),
    radial-gradient(800px 320px at 85% 15%, rgba(14,165,233,.09), transparent 60%),
    linear-gradient(180deg, rgba(248,250,252,1), rgba(248,250,252,.55));
}

/* treść nad gradientem */
body.itemid-101 section.am-secion > .container{
  position: relative;
  z-index: 1;
}

/* HOME – Dla kogo pracujemy / Dlaczego AMARO
   WYPROSTUJ NAROŻNIKI */
body.itemid-101 section.am-secion,
body.itemid-101 section.am-secion::before{
  border-radius: 0 !important;
}
/* HOME (itemid-101) – anchor #kontakt w hero nie może dodawać wysokości */
body.itemid-101 .main-top.card #kontakt.am-section{
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.itemid-101 .main-top.card #kontakt{
  position: relative;
  top: calc(-1 * var(--header-height, 90px));
}
/* HOME – am-hero: zmniejszamy „separatory” (odstępy i linie) */
body.itemid-101 .main-top.card .am-hero{
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

/* jeśli te linie są borderami hero lub jego kontenera */
body.itemid-101 .main-top.card .am-hero{
  border-top-width: 0px !important;
  border-bottom-width: 0px !important;
}

/* często linie siedzą na .card-body */
body.itemid-101 .main-top.card > .card-body{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
/* =========================
   DJ-Megamenu MOBILE (offcanvas)
   ========================= */

/* kontener listy */
#dj-megamenu111offcanvas ul.dj-mobile-nav.dj-mobile-light{
  padding: 12px 0;
}

/* pozycje główne */
#dj-megamenu111offcanvas ul.dj-mobile-nav.dj-mobile-light > li.dj-mobileitem > a.dj-up_a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  font-weight: 600;
  color: #0f172a;
  background: transparent;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

/* pierwszy element bez górnej kreski */
#dj-megamenu111offcanvas ul.dj-mobile-nav.dj-mobile-light > li.dj-mobileitem:first-child > a.dj-up_a{
  border-top: 0;
}

/* hover/focus – “premium”, bez szarej belki */
#dj-megamenu111offcanvas ul.dj-mobile-nav.dj-mobile-light > li.dj-mobileitem > a.dj-up_a:hover,
#dj-megamenu111offcanvas ul.dj-mobile-nav.dj-mobile-light > li.dj-mobileitem > a.dj-up_a:focus{
  background: rgba(2, 6, 23, 0.04);
}

/* aktywna pozycja */
#dj-megamenu111offcanvas ul.dj-mobile-nav.dj-mobile-light > li.dj-mobileitem.active > a.dj-up_a{
  background: rgba(30, 58, 138, 0.06);
  color: #0b1f3a;
}

/* SUBMENU (dzieci) */
#dj-megamenu111offcanvas ul.dj-mobile-nav-child{
  padding: 6px 0 10px;
  margin: 0;
  background: rgba(2, 6, 23, 0.02);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

/* linki w submenu */
#dj-megamenu111offcanvas ul.dj-mobile-nav-child > li.dj-mobileitem > a.dj-up_a{
  display: block;
  padding: 10px 18px 10px 34px; /* lekkie wcięcie */
  font-weight: 500;
  color: rgba(15, 23, 42, 0.78);
  background: transparent !important;
  border-top: 0 !important;
}

/* hover w submenu */
#dj-megamenu111offcanvas ul.dj-mobile-nav-child > li.dj-mobileitem > a.dj-up_a:hover{
  background: rgba(2, 6, 23, 0.04) !important;
  color: #0f172a;
}

/* TOGGLER – zamiast “+” dajemy chevron */
#dj-megamenu111offcanvas ul.dj-mobile-nav.dj-mobile-light li.dj-mobileitem.parent > a .toggler{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: auto;
  border-radius: 10px;
  background: rgba(2, 6, 23, 0.04);
}

/* ikonka chevron */
#dj-megamenu111offcanvas ul.dj-mobile-nav.dj-mobile-light li.dj-mobileitem.parent > a .toggler:before{
  content: "\f078"; /* chevron-down */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  display: inline-block;
  transition: transform 160ms ease;
}

/* po rozwinięciu – obrót */
#dj-megamenu111offcanvas ul.dj-mobile-nav.dj-mobile-light li.dj-mobileitem.parent.active > a .toggler:before{
  transform: rotate(180deg);
}
/* === DJ Megamenu mobile – ACTIVE (wariant B) === */

.dj-offcanvas .dj-offcanvas-content li.dj-mobileitem.current > a.dj-up_a,
.dj-offcanvas .dj-offcanvas-content li.dj-mobileitem.active > a.dj-up_a{
  background-color: rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* subtelny akcent po lewej */
.dj-offcanvas .dj-offcanvas-content li.dj-mobileitem.current > a.dj-up_a{
  border-left: 3px solid rgba(15, 23, 42, 0.45) !important;
  padding-left: calc(30px - 3px) !important;
}
/* SZERSZY DESKTOP – hybryda nadal zostaje */
:root{
  --am-content-max: 1420px;  /* było pewnie ~1200px -> za wąsko */
  --am-gutter-lg: 24px;
}

/* Jeśli masz własną klasę wrappera treści – super */
@media (min-width: 992px){
  .am-content,
  main .container,
  section .container{
    max-width: var(--am-content-max);
  }
}
:root{
  --am-contact-max: 1200px; /* 1040–1200 wg gustu */
}

/* KONTAKT / DOLNY BLOK – wymuszenie mniejszego max-width w tej sekcji */
@media (min-width: 992px){

  /* 1) jeżeli to jest wrapper sekcji */
  .container-bottom-b{
    max-width: var(--am-contact-max) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 2) najważniejsze: jeśli w środku jest .container (a zwykle jest) */
  .container-bottom-b .container{
    max-width: var(--am-contact-max) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 3) gdyby siedziało w container-fluid */
  .container-bottom-b .container-fluid{
    max-width: var(--am-contact-max) !important;
    width: 100% !important;
    margin-left: 3px !important;
    margin-right: auto !important;
  }
}
/* KONTAKT – ramka/tło jak sekcje wyżej (bez :has, bez resetów) */
@media (min-width: 992px){
  .container-bottom-b{
    /* szerokość jak reszta sekcji */
    max-width: var(--am-content-max) !important;
    width: 100% !important;
    margin-left:  auto !important;
    margin-right: auto !important;

    /* tło i ramka jak wyżej */
    background:  !important;
    border: 1px solid #e6ebf2 !important;
    border-radius: 0 !important;

    /* spacing jak w sekcjach */
    padding: 32px 32px !important;
    margin-top: 3px !important;
    margin-bottom: 32px !important;

    box-shadow: none !important;
  }
}
@media (min-width: 992px){
  :root{ --am-content-max: 1640px; }
}
@media (min-width: 992px){
  .container-bottom-b{
    --am-content-max: 1840px;
  }
}
/* =========================
   DJ EasyContact – ALERT + X (FINAL)
   ========================= */

/* alert */
.alert.alert-easy-contact{
  position: relative !important;
  padding: 12px 56px 12px 16px !important;
  border-radius: 12px !important;
}

/* SUKCES */
.alert.alert-easy-contact.alert-success{
  background: #eaf6ee !important;
  color: #14532d !important;
  border: 1px solid rgba(20,83,45,.25) !important;
}

/* BŁĄD */
.alert.alert-easy-contact.alert-danger,
.alert.alert-easy-contact.alert-error{
  background: #fdecec !important;
  color: #7f1d1d !important;
  border: 1px solid rgba(127,29,29,.25) !important;
}

/* ===== X ===== */
.alert.alert-easy-contact > button.btn-close{
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;

  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  margin: 0 !important;

  background: #0b2447 !important;
  background-image: none !important;
  border: none !important;
  border-radius: 6px !important;

  opacity: 1 !important;
  box-shadow: 0 4px 10px rgba(2,6,23,.18) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  transform: none !important;
}

/* znak X */
.alert.alert-easy-contact > button.btn-close::before{
  content: "×" !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* Bootstrapowe resztki – kasujemy */
.alert.alert-easy-contact > button.btn-close::after{
  content: none !important;
}
/* DJ EasyContact – przycisk X (close + btn-close) – FIX rozmiaru */
.alert.alert-easy-contact.alert-dismissible > button.close.btn-close{
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;

  /* twarde wymiary */
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;

  /* to najczęściej go powiększa */
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  font-size: 0 !important;   /* ubija ewentualny tekst/ikonę */
  flex: 0 0 24px !important;
  box-sizing: border-box !important;

  background: #0b2447 !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 6px !important;
  opacity: 1 !important;

  display: grid !important;
  place-items: center !important;

  /* ubijamy ewentualne skale/transformy z szablonu */
  transform: none !important;
}

.alert.alert-easy-contact.alert-dismissible > button.close.btn-close::before{
  content: "×" !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.alert.alert-easy-contact.alert-dismissible > button.close.btn-close::after{
  content: none !important;
}
/* FIX: wyłącz bootstrapowy "x" z tła i wycentruj nasz */
.alert.alert-easy-contact.alert-dismissible > button.close.btn-close{
  background-image: none !important;  /* ubija svg z .btn-close */
}

.alert.alert-easy-contact.alert-dismissible > button.close.btn-close{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* zabij ewentualne wewnętrzne ikonki/svgi jeśli DJ/BS je doklei */
.alert.alert-easy-contact.alert-dismissible > button.close.btn-close svg,
.alert.alert-easy-contact.alert-dismissible > button.close.btn-close i{
  display: none !important;
}

/* nasz X – twarde centrowanie */
.alert.alert-easy-contact.alert-dismissible > button.close.btn-close::before{
  content: "×" !important;
  position: relative !important;
  top: -1px !important;      /* mikro-korekta – zmień na 0 jeśli chcesz */
  left: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  transform: none !important;
}
/* ======================================
   DJ EasyContact – ALERT sukcesu (final)
   ====================================== */

/* cały pasek */
.alert.alert-easy-contact.alert-success{
  background: #eef4fb !important;              /* delikatny niebieski */
  border: 1px solid rgba(11,36,71,.18) !important;
  color: #0b2447 !important;                   /* granat */
  font-weight: 700 !important;                 /* pogrubiony komunikat */
  border-radius: 12px !important;
  box-shadow: 0 8px 22px rgba(2,6,23,.08) !important;
}

/* tekst w środku (czasem DJ pakuje go w div) */
.alert.alert-easy-contact.alert-success > div{
  font-weight: 700 !important;
}

/* przycisk X – zostawiamy jak jest, tylko kolorystycznie */
.alert.alert-easy-contact.alert-success button.close.btn-close{
  background: #0b2447 !important;
  color: #fff !important;
}