/* Tutokupisz – Footer (module) | 2025/26 premium final
   - Newsletter AJAX (komunikaty: .is-ok / .is-err, aria-live)
   - Zaufali nam (logotypy przewoźników)
   - Mini-FAQ (<details> z caret i akcentem slim)
   - Mobile: 2 kolumny dla „Zakupy” i „Pomoc”; „O nas” i „Kontakt” pełna szerokość
   - Mikroanimacje ikon (social/kontakt)
   - Akcent gradientowy u góry i dole (2px slim)
   - WCAG focus, wysoki kontrast linków kontaktu
*/

/* =========================
   Design tokens
   ========================= */
.footer{
  --bg: #f7f8fa;
  --bg-grad: linear-gradient(180deg, #fbfcfd 0%, #f3f5f9 100%);
  --text: #171a21;
  --muted:#5b6577;
  --line:#e7ebf2;
  --ring:#2a7de1;
  --accent:#2a7de1;
  --link:#0b57d0;
  --link-hover:#0847ad;
  --card:#ffffff;
  --chip:#f6f8fb;
  --ok:#0f9d58;
  --err:#d93025;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 1px rgba(16,24,40,.04);
}

/* =========================
   Grundy & akcenty
   ========================= */
.footer{
  background: var(--bg-grad);
  color: var(--text);
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.6;
  position: relative;
}
.footer__accent{
  height:2px; /* slim */
  background: linear-gradient(90deg, var(--accent), #56a2ff 35%, #9cc6ff 65%, var(--accent));
  opacity:.9;
}
.footer::after{
  content:""; display:block; height:2px; margin-top:24px; /* slim */
  background: linear-gradient(90deg, var(--accent), #56a2ff 35%, #9cc6ff 65%, var(--accent));
  opacity:.85;
}
.footer .container{ max-width: 1200px; margin: 0 auto; padding: 34px 16px 40px; }

/* =========================
   Newsletter (AJAX)
   ========================= */
.footer-newsletter{ margin: 0 0 26px; }
.footer-newsletter__inner{
  background: #fcfdff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow);
  display: grid; gap: 10px;
}
.footer-newsletter h3{ margin: 0; font-size: 18px; font-weight: 800; }
.footer-newsletter__lead{ margin: 0; color: var(--muted); font-size: 14.5px; }

.footer-newsletter__form{
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
}
@media (max-width: 600px){
  .footer-newsletter__form{ grid-template-columns: 1fr; }
}

.footer-newsletter__input{
  height: 42px; padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff; color: var(--text);
}
.footer-newsletter__input:focus{
  outline:2px solid transparent; box-shadow: 0 0 0 3px var(--ring);
}

.footer-newsletter__btn{
  height: 44px; padding: 0 16px;
  border-radius: 10px; border:0;
  background: var(--accent); color: #fff; font-weight: 700; cursor: pointer;
  box-shadow: 0 1px 1px rgba(16,24,40,.08);
  transition: filter .18s ease, transform .18s ease;
}
.footer-newsletter__btn:hover{ filter: brightness(1.05); transform: translateY(-1px); }
.footer-newsletter__btn:focus-visible{ outline:2px solid transparent; box-shadow: 0 0 0 3px var(--ring); }

.footer-newsletter__consent{
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start;
  font-size: 13px; color: var(--muted);
}
.footer-newsletter__consent a{ color: var(--link); }

.footer-newsletter__msg{
  grid-column: 1 / -1; font-size: 14px; min-height: 1.2em;
  color: var(--muted); padding-top: 4px;
}
.footer-newsletter__msg.is-ok{ color: var(--ok); }
.footer-newsletter__msg.is-err{ color: var(--err); }

/* honeypot */
.hp{ position:absolute !important; left:-9999px !important; opacity:0 !important; }

/* =========================
   Grid sekcji
   ========================= */
.footer__grid{
  display:grid; gap: 32px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width: 1024px){ .footer__grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 900px){  .footer__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* MOBILE: 2 kolumny dla „Zakupy” i „Pomoc”; „O nas” i „Kontakt” pełna szerokość */
@media (max-width: 600px){
  .footer__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
  .footer__col--about,
  .footer__col--contact{ grid-column: 1 / -1; }
  .footer__grid > .footer__col:nth-child(2){ grid-column: 1; } /* Zakupy */
  .footer__grid > .footer__col:nth-child(3){ grid-column: 2; } /* Pomoc */
}

/* Separatory kolumn (desktop) */
@media (min-width: 901px){
  .footer__grid > .footer__col { position: relative; padding-left: 24px; }
  .footer__grid > .footer__col:first-child { padding-left: 0; }
  .footer__grid > .footer__col:not(:first-child)::before{
    content:""; position:absolute; left:0; top:4px; bottom:4px; width:1px;
    background: linear-gradient(180deg, transparent 0%, var(--line) 15%, var(--line) 85%, transparent 100%);
  }
}

/* =========================
   Typografia i akcenty nagłówków
   ========================= */
.footer__logo{ display:block; margin: 0 0 12px; filter: saturate(1.05); }

.footer__h3{
  margin:.25rem 0 10px 0;
  font-size: 17px; font-weight: 800; letter-spacing:.2px;
  position:relative; padding-bottom:6px;
}
.footer__h3::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:36px; /* slim underline */
  border-radius:999px;
  background: linear-gradient(90deg, var(--accent), #6aa9ff);
}

.footer__text{ color: var(--muted); margin: 8px 0 12px; font-size: 14.5px; }
.footer__badges{
  display:flex; flex-wrap:wrap; gap:8px 14px;
  padding:0; margin:8px 0 0; list-style:none; color:var(--muted);
}

/* =========================
   Listy linków (Zakupy/Pomoc)
   ========================= */
.footer__links{ list-style:none; padding:0; margin:8px 0 0; display:grid; gap:9px; }
.footer__links a{
  color: var(--text); text-decoration:none; position:relative; outline:none;
  font-size: 15px;
}
.footer__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background: currentColor; transition: width .22s ease;
}
.footer__links a:hover::after,
.footer__links a:focus-visible::after{ width:18px; }
.footer__links a:hover{ color: var(--link); }
.footer__links a:focus-visible{
  outline:2px solid transparent; box-shadow:0 0 0 3px var(--ring); border-radius:4px;
}

/* =========================
   Kontakt
   ========================= */
.footer__contact{ list-style:none; padding:0; margin:0 0 12px; display:grid; gap:10px; }
.footer .footer__contact-link{
  display:inline-flex; align-items:center; gap:10px;
  color: var(--text) !important; opacity:1 !important;
  text-decoration:none; border-radius:8px; padding:4px 2px;
  transition: transform .18s ease, box-shadow .18s ease, color .18s ease;
}
.footer .footer__contact-link:hover{ color: var(--link) !important; transform: translateY(-2px) scale(1.05); }
.footer .footer__contact-link:focus-visible{ outline:2px solid transparent; box-shadow:0 0 0 3px var(--ring); }
.footer .footer__contact-ico{
  inline-size:18px; block-size:18px; display:inline-block; flex:0 0 18px;
  background-image: var(--icon);
  background-repeat:no-repeat; background-position:center; background-size:contain;
  transition: transform .18s ease;
}
.footer .footer__contact-link:hover .footer__contact-ico{ transform: scale(1.08); }
.footer .footer__contact-txt{ color: var(--text) !important; line-height:1; }
.footer__contact-address{ color: var(--muted); padding-left: 30px; font-size: 14.5px; }

/* =========================
   Social
   ========================= */
.footer__social{ list-style:none; display:flex; gap:12px; padding:0; margin:12px 0 0; }
.footer__social-link{
  display:inline-flex; align-items:center; justify-content:center;
  inline-size:40px; block-size:40px; border-radius:999px;
  background: var(--card);
  box-shadow: var(--shadow);
  border:1px solid var(--line);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.footer__social-ico{
  inline-size:22px; block-size:22px; display:block;
  background-image: var(--icon);
  background-repeat:no-repeat; background-position:center; background-size:contain;
  transition: transform .18s ease, filter .18s ease;
}
.footer__social-link:hover{
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.05);
  border-color: rgba(42,125,225,.35);
}
.footer__social-link:hover .footer__social-ico{ filter: saturate(1.08) brightness(1.04); transform: scale(1.08); }

/* Kolory ringów per platforma */
.footer__social-link[data-net="instagram"]:hover { background: radial-gradient(circle at 30% 110%, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%); color:#fff; }
.footer__social-link[data-net="tiktok"]:hover    { background: linear-gradient(135deg, #25f4ee 0%, #000 45%, #fe2c55 100%); color:#fff; }
.footer__social-link[data-net="youtube"]:hover   { background: linear-gradient(135deg, #ff4e45, #cc0000); color:#fff; }
.footer__social-link[data-net="facebook"]:hover  { background: #1877f2; color:#fff; }

/* =========================
   Zaufali nam
   ========================= */
.footer-trust{ margin: 22px 0 4px; }
.footer-trust__h3{ font-size: 15px; font-weight: 700; color: var(--muted); margin: 0 0 10px; }
.footer-trust__logos{ list-style:none; padding:0; margin:0; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.footer-trust__logo{
  inline-size:88px; block-size:28px; display:inline-block;
  background-image: var(--logo);
  background-repeat:no-repeat; background-position:center; background-size:contain;
  filter: grayscale(1) contrast(1.1); opacity:.9;
  transition: filter .18s ease, opacity .18s ease, transform .18s ease;
}
.footer-trust__logo:hover{ filter: grayscale(0) contrast(1.05); opacity:1; transform: translateY(-1px); }

/* =========================
   Mini-FAQ (premium look, slim stripe)
   ========================= */
.footer-faq{ margin: 20px 0 0; }
.footer-faq__h3{ font-size: 16px; font-weight: 800; color: var(--text); margin: 0 0 10px; letter-spacing:.2px; }
.footer-faq__items{ display:grid; gap:10px; }

.footer-faq details{
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.footer-faq details::before{
  content:"";
  position:absolute; inset:0 auto 0 0; width:2px; /* slim stripe */
  background: linear-gradient(180deg, var(--accent), #6aa9ff);
  opacity:.7;
}
.footer-faq details:hover{
  transform: translateY(-1px);
  box-shadow: 0 3px 9px rgba(16,24,40,.07), 0 1px 4px rgba(16,24,40,.05);
  border-color: rgba(42,125,225,.35);
}

.footer-faq summary{
  cursor: pointer; list-style: none; font-weight: 800;
  font-size: 15.5px; color: var(--text);
  padding: 12px 40px 12px 16px;
  position: relative;
  outline: none;
}
.footer-faq summary:focus-visible{
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--ring) inset;
}
.footer-faq summary::before{
  content: "";
  position: absolute; right: 14px; top: 50%;
  width: 10px; height: 10px;
  transform: translateY(-50%) rotate(0deg);
  transition: transform .2s ease, filter .18s ease;
  border-left: 6px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  color: var(--muted); filter: opacity(.9);
}
.footer-faq details[open] summary{ background: linear-gradient(180deg, #ffffff 0%, #fafdff 100%); }
.footer-faq details[open] summary::before{
  transform: translateY(-50%) rotate(90deg);
  color: var(--link); filter: none;
}

.footer-faq details > div{
  padding: 0 18px 14px 18px;
  color: var(--muted); font-size: 14.5px; line-height: 1.66;
}

/* Animacja otwierania */
@media (prefers-reduced-motion: no-preference){
  .footer-faq details > div{ max-height: 0; overflow: hidden; transition: max-height .24s ease; }
  .footer-faq details[open] > div{ max-height: 240px; }
}

.footer-faq details > div a{ color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.footer-faq details > div a:hover{ color: var(--link-hover); }

/* =========================
   Płatności
   ========================= */
.footer__payments{
  margin-top: 22px; padding-top: 18px;
  border-top: 1px dashed var(--line);
  display:flex; align-items:center; gap: 12px; flex-wrap: wrap;
  color: var(--muted);
}
.footer__payments-label{ font-weight:700; color: var(--text); }
.footer__payments ul{ list-style:none; padding:0; margin:0; display:flex; gap:10px; flex-wrap:wrap; }
.footer__payments li{
  border:1px solid var(--line);
  background: var(--card);
  padding:6px 10px; border-radius:999px;
  box-shadow: var(--shadow);
  font-size:13px; line-height:1;
}

/* =========================
   Pasek dolny
   ========================= */
.footer__bottom{
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap:wrap;
  color: var(--muted);
}
.footer__bottom p{ margin:0; }
.footer__bottom-links{ list-style:none; display:flex; gap:14px; padding:0; margin:0; }
.footer__bottom-links a{ color: var(--muted); text-decoration: none; }
.footer__bottom-links a:hover{ color: var(--link); text-decoration: underline; }

/* =========================
   Motion respect
   ========================= */
@media (prefers-reduced-motion: reduce){
  .footer__links a::after,
  .footer__social-link,
  .footer__social-ico,
  .footer-trust__logo,
  .footer .footer__contact-link,
  .footer .footer__contact-ico,
  .footer-newsletter__btn,
  .footer-faq summary::before { transition: none; }
}