/* ============================================================
   Kancelaria DPPW — style uzupełniające Tailwind
   ============================================================ */

:root { color-scheme: light; }

/* Ikony SVG: jawny rozmiar. <svg> to element zastępowany, więc width/height
   działa też w wrapperach inline — bez kosztownego globalnego :has(). */
svg.icon { display: inline-block; vertical-align: middle; flex: none; width: 1.1em; height: 1.1em; }
.h-3   > svg.icon { width: .75rem;  height: .75rem; }
.h-3\.5 > svg.icon { width: .875rem; height: .875rem; }
.h-4  > svg.icon { width: 1rem;    height: 1rem; }
.h-5  > svg.icon { width: 1.25rem; height: 1.25rem; }
.h-6  > svg.icon { width: 1.5rem;  height: 1.5rem; }
.h-7  > svg.icon { width: 1.75rem; height: 1.75rem; }
.h-9  > svg.icon { width: 2.25rem; height: 2.25rem; }
.h-11 > svg.icon { width: 1.6rem;  height: 1.6rem; }
.h-12 > svg.icon { width: 1.75rem; height: 1.75rem; }

/* Wrapper ikony (np. <span class="h-5 w-5">…svg…</span>) — wyśrodkuj svg w pionie.
   Usuwa efekt „ikona za nisko" wynikający z baseline/line-height inline-block. */
.h-3:has(> svg.icon), .h-3\.5:has(> svg.icon), .h-4:has(> svg.icon), .h-5:has(> svg.icon),
.h-6:has(> svg.icon), .h-7:has(> svg.icon), .h-9:has(> svg.icon),
.h-11:has(> svg.icon), .h-12:has(> svg.icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body { -webkit-font-smoothing: antialiased; }

/* Linki nawigacji (desktop) */
.nav-link {
  border-radius: .5rem;
  padding: .5rem .75rem;
  font-size: .875rem;
  font-weight: 700;
  white-space: nowrap;       /* napisy nav nie zawijają się do dwóch linii */
  color: #475569;            /* slate-600 — kontrast AA */
  transition: background-color .2s, color .2s;
}
.nav-link:hover { background-color: #f1f5f9; color: #1E3A8A; }
.nav-link[aria-current="page"] { color: #1E3A8A; background-color: #eef4fb; }

/* Linki nawigacji (mobile) */
.mobile-link {
  display: block;
  border-radius: .5rem;
  padding: .625rem .75rem;
  font-size: .95rem;
  font-weight: 700;
  color: #334155;
}
.mobile-link:hover { background-color: #f1f5f9; color: #1E3A8A; }

/* Fokus widoczny tylko dla klawiatury */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1E40AF;
  border-radius: .375rem;
}

/* Pola formularzy */
.field {
  width: 100%;
  border-radius: .625rem;
  border: 1px solid #cbd5e1;
  background: #fff;
  padding: .65rem .85rem;
  font-size: .95rem;
  color: #0F172A;
  transition: border-color .15s, box-shadow .15s;
}
.field::placeholder { color: #94a3b8; }
.field:hover { border-color: #94a3b8; }
.field:focus { border-color: #1E40AF; box-shadow: 0 0 0 3px rgba(30,64,175,.15); outline: none; }
.field[aria-invalid="true"] { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
textarea.field { min-height: 7rem; resize: vertical; line-height: 1.6; }

.field-label { display:block; margin-bottom:.35rem; font-size:.8rem; font-weight:700; color:#334155; }
.field-hint { margin-top:.35rem; font-size:.78rem; color:#64748b; line-height:1.45; }
.field-error { margin-top:.35rem; font-size:.78rem; font-weight:700; color:#dc2626; }

/* Animacja wejścia widoku */
.view-enter { animation: viewIn .35s cubic-bezier(.16,.84,.44,1) both; }
@keyframes viewIn { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }

.fade-in { animation: fadeIn .3s ease both; }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }

/* Pulsowanie kwoty (akcent) */
.price-pulse { animation: pricePulse .5s ease; }
@keyframes pricePulse { 0%{transform:scale(1)} 35%{transform:scale(1.06)} 100%{transform:scale(1)} }

/* Pasek kroków */
.step-dot { transition: background-color .25s, color .25s, border-color .25s; }

/* Toast */
.toast-item {
  pointer-events: auto;
  display:flex; align-items:center; gap:.6rem;
  border-radius:.75rem; padding:.75rem 1rem;
  background:#0F172A; color:#fff; font-size:.9rem; font-weight:600;
  box-shadow: 0 10px 30px -10px rgba(15,23,42,.5);
  animation: toastIn .28s ease both;
}
@keyframes toastIn { from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }

/* Karta usługi — hover bez przesunięcia layoutu */
.service-card { transition: box-shadow .25s, border-color .25s, transform .25s; }
.service-card:hover { box-shadow: 0 2px 4px rgba(15,23,42,.06), 0 24px 48px -16px rgba(15,23,42,.22); border-color:#b6cdec; transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce){ .service-card:hover{ transform:none; } }

/* Komórki kalendarza */
.cal-day { transition: background-color .15s, color .15s, border-color .15s; }

/* Ukryj strzałki number input gdy nie trzeba */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* Pasek przewijania w panelu */
.thin-scroll::-webkit-scrollbar { height:8px; width:8px; }
.thin-scroll::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:8px; }

/* Karuzela opinii (strzałki + kropki, snap-scroll, autoodtwarzanie w JS) */
.carousel {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) { .carousel { scroll-behavior: auto; } }

/* Logo — sylwetka (obraz), bez dodatkowych animacji */

/* ── Premium-polish ─────────────────────────────────────────── */

/* Scroll-reveal: klasę .rv nadaje wyłącznie JS elementom POD linią ekranu —
   bez JS (i przy prefers-reduced-motion) wszystko jest widoczne od razu. */
.rv { opacity: 0; transform: translateY(22px); }
.rv.rv-in {
  opacity: 1; transform: none;
  transition: opacity .65s cubic-bezier(.16,.84,.44,1), transform .65s cubic-bezier(.16,.84,.44,1);
}
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; }
}

/* Mikro-feedback: delikatne „wciśnięcie" przy kliknięciu + uniesienie głównych CTA */
@media (prefers-reduced-motion: no-preference) {
  a:active, button:active { transform: translateY(1px); }
  .shadow-lift { transition: transform .2s ease, box-shadow .25s ease, background-color .2s; }
  a.shadow-lift:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(15,23,42,.10), 0 30px 56px -16px rgba(15,23,42,.30); }
}

/* Czat — bąbelki wiadomości */
.chat-scroll { max-height: 22rem; overflow-y: auto; }
.chat-scroll::-webkit-scrollbar { width: 8px; }
.chat-scroll::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius: 8px; }