/* Zero dependency — własne klasy uzupełniające Tailwinda (self-hosted w tailwind.css) */

/* Link "Przejdź do treści" dla klawiatury */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: #2563eb; color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 .75rem 0; font-weight: 600; font-size: .875rem; }
.skip-link:focus { left: 0; }

/* Widoczny fokus dla nawigacji klawiaturą */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }

/* Cele kotwic nie chowają się pod stałym nagłówkiem (64 px + zapas) */
[id] { scroll-margin-top: 5rem; }

/* Siatka w tle hero */
.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Nav */
.nav-link {
  padding: .5rem .75rem;
  color: rgb(203 213 225);
  font-size: .875rem;
  font-weight: 500;
  border-radius: .5rem;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.nav-link:hover    { color: #fff; background: rgba(255,255,255,.05); }
.nav-link--active  { color: #fff; background: rgba(255,255,255,.07); }
.mobile-nav-link   { display: block; padding: .625rem 1rem; color: rgb(203 213 225); font-size: .875rem; font-weight: 500; border-radius: .5rem; transition: color .15s, background .15s; }
.mobile-nav-link:hover { color: #fff; background: rgba(255,255,255,.05); }
.dropdown-item     { display: flex; flex-direction: column; padding: .75rem 1rem; transition: background .15s; }
.dropdown-item:hover { background: rgb(30 41 59); }

/* Footer socials */
.footer-social { width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: rgb(30 41 59); display: flex; align-items: center; justify-content: center; color: rgb(148 163 184); transition: background .15s, color .15s; }
.footer-social:hover { background: rgb(51 65 85); color: #fff; }

/* Karty usług */
.service-card { background: #fff; border-radius: 1rem; padding: 2rem; border: 1px solid rgb(241 245 249); transition: border-color .2s, box-shadow .2s; }
.service-card:hover { border-color: rgb(226 232 240); box-shadow: 0 4px 24px rgba(0,0,0,.06); }
.service-icon { width: 3rem; height: 3rem; border-radius: .75rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; }

/* Karty komponentów */
.component-card { background: #fff; border-radius: 1rem; padding: 1.5rem; border: 1px solid rgb(241 245 249); transition: border-color .2s, box-shadow .2s; }
.component-card:hover { border-color: rgb(219 234 254); box-shadow: 0 4px 16px rgba(59,130,246,.07); }
.component-icon  { width: 3.5rem; height: 3.5rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }

/* Integracje */
.integration-row { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; border-radius: .75rem; background: rgb(248 250 252); transition: background .15s; }
.integration-row:hover { background: rgb(241 245 249); }
.integration-dot { width: .75rem; height: .75rem; border-radius: 9999px; flex-shrink: 0; margin-top: .375rem; }

/* Formularz */
.form-label { display: block; font-size: .875rem; font-weight: 500; color: rgb(51 65 85); margin-bottom: .375rem; }
.form-input  { width: 100%; padding: .75rem 1rem; border: 1px solid rgb(226 232 240); border-radius: .75rem; color: rgb(15 23 42); font-size: .875rem; transition: border-color .15s, box-shadow .15s; outline: none; }
.form-input:focus { border-color: rgb(96 165 250); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.form-input::placeholder { color: rgb(148 163 184); }

/* Slider klientów */
.clients-track { overflow: hidden; position: relative; }
.clients-track::before,
.clients-track::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 1; pointer-events: none; }
.clients-track::before { left: 0;  background: linear-gradient(to right, #fff, transparent); }
.clients-track::after  { right: 0; background: linear-gradient(to left,  #fff, transparent); }
.clients-inner { display: flex; align-items: center; animation: scroll-clients 30s linear infinite; width: max-content; }
@keyframes scroll-clients { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* pauza: najechanie myszą lub fokus klawiatury na dowolnym logo */
.clients-track:hover .clients-inner,
.clients-track:focus-within .clients-inner { animation-play-state: paused; }

/* Ograniczenie ruchu dla osób, które sobie tego życzą */
@media (prefers-reduced-motion: reduce) {
  .clients-inner, .animate-pulse, .animate-bounce { animation: none !important; }
  html { scroll-behavior: auto !important; }
  * { transition-duration: .01ms !important; }
}

/* Druk: ciemne sekcje na białym papierze */
@media print {
  header, footer, .clients-track, .skip-link { display: none !important; }
  .bg-slate-950, .bg-slate-900 { background: #fff !important; }
  .bg-slate-950 *, .bg-slate-900 * { color: #000 !important; }
}

/* ===== Wizualizacje produktowe (mockupy budowane w CSS — bez plików graficznych) ===== */

/* Okno aplikacji POS */
.mock-window { background: #0f172a; border: 1px solid rgb(51 65 85); border-radius: 1rem; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(2,6,23,.7); }
.mock-titlebar { display: flex; align-items: center; gap: .375rem; padding: .5rem .875rem; background: #020617; border-bottom: 1px solid rgb(30 41 59); }
.mock-dot { width: .5rem; height: .5rem; border-radius: 9999px; }

/* Kafelek produktu na mockupie POS */
.mock-tile { border-radius: .5rem; padding: .5rem .55rem; font-size: .58rem; font-weight: 600; color: #fff; line-height: 1.15; display: flex; flex-direction: column; justify-content: flex-end; min-height: 2.9rem; }

/* Kiosk — pionowa rama urządzenia */
.mock-kiosk { aspect-ratio: 9 / 16; background: #020617; border: 6px solid #1e293b; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(2,6,23,.7); display: flex; flex-direction: column; }

/* Telefon — rama aplikacji managera */
.mock-phone { aspect-ratio: 9 / 19; background: #020617; border: 5px solid #1e293b; border-radius: 1.5rem; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(2,6,23,.7); display: flex; flex-direction: column; }

/* Bon kuchenny */
.ticket { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #fdfdfb; color: #0f172a; padding: 1.1rem 1.25rem 1.4rem; box-shadow: 0 20px 45px -18px rgba(2,6,23,.45); font-size: .78rem; line-height: 1.55; position: relative; border-radius: 2px; }
.ticket::before, .ticket::after { content: ''; position: absolute; left: 0; right: 0; height: 8px; background-image: radial-gradient(circle at 6px 0px, transparent 5px, #fdfdfb 5px); background-size: 12px 8px; background-repeat: repeat-x; }
.ticket::before { top: -7px; transform: rotate(180deg); }
.ticket::after { bottom: -7px; }
.ticket-hr { border: 0; border-top: 1px dashed rgb(148 163 184); margin: .5rem 0; }

/* Karta zamówienia na mockupie ekranu kuchni */
.mock-kds-card { background: #0f172a; border: 1px solid rgb(51 65 85); border-radius: .625rem; overflow: hidden; font-size: .62rem; line-height: 1.35; }

/* Helpers */
.tag-blue { display: inline-flex; padding: .25rem .75rem; background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.2); color: rgb(96 165 250); font-size: .75rem; border-radius: 9999px; }
.tag-cyan { display: inline-flex; padding: .25rem .75rem; background: rgba(6,182,212,.1);  border: 1px solid rgba(6,182,212,.2);  color: rgb(34 211 238);  font-size: .75rem; border-radius: 9999px; }