/* ============================================================
   Pranie WAWA — custom enhancements
   1. Subtle scroll-reveal animations (driven by custom.js)
   2. Hover polish for CTA buttons and cards
   3. Before/after slider polish
   4. Utility patches for sections added after the Tailwind build
   ------------------------------------------------------------
   Notes for future edits:
   - This site is a purged Tailwind v4 build (styles-6XnLRtVl.css).
     Tailwind v4 animates movement with the `translate` / `scale`
     CSS properties (NOT `transform`). Custom hover effects below
     deliberately use those same properties so they compose with —
     and never fight — the existing utility classes.
   - The `.transition` utility already lists translate/scale/shadow,
     so timing tweaks are done via the --tw-duration / --tw-ease
     variables instead of overriding transition-property.
   ============================================================ */

/* Smooth anchor scrolling for #uslugi, #kontakt, etc. */
html {
  scroll-behavior: smooth;
}

/* ---------- Scroll reveal (fade-in-up) ---------- */
.wawa-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--wawa-delay, 0ms);
}

/* Hint the compositor only while the element still has to animate in */
.wawa-reveal:not(.wawa-visible) {
  will-change: opacity, transform;
}

.wawa-reveal.wawa-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Hover polish ---------- */

/* Primary / outline CTA links (pill buttons).
   They all carry Tailwind's `.transition`, which reads these vars,
   so we only retune timing and add a 1px lift via the `translate`
   property — bg/border/shadow hovers keep working untouched. */
a[class*="inline-flex"][class*="rounded-xl"] {
  --tw-duration: 200ms;
  --tw-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

a[class*="inline-flex"][class*="rounded-xl"]:hover {
  translate: 0 -1px;
}

a[class*="inline-flex"][class*="rounded-xl"]:active {
  translate: 0 0;
  scale: 0.985;
}

/* Cards lift via Tailwind's hover:-translate-y-1 (translate property).
   Slow the whole transition down slightly for a calmer, premium feel
   without replacing the property list (which would break the lift). */
.group[class*="rounded-2xl"] {
  --tw-duration: 300ms;
  --tw-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Before/after slider ---------- */

/* Handle: gentle grow on hover / while dragging.
   Uses the `scale` property so the Tailwind centering
   (-translate-x-1/2 -translate-y-1/2 → translate property)
   and the ring/shadow utilities are left fully intact. */
.wawa-ba-handle {
  transition: scale 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wawa-ba-container:hover .wawa-ba-handle {
  scale: 1.06;
}

.wawa-ba-container.wawa-ba-dragging .wawa-ba-handle {
  scale: 1.12;
}

/* No transition on the moving parts — keep them 1:1 with the pointer */
.wawa-ba-container .wawa-ba-clip,
.wawa-ba-container .wawa-ba-divider {
  transition: none;
}

/* Fade out the "← przeciągnij →" hint once the user interacts
   (the hint element already has transition-opacity duration-700) */
.wawa-ba-hint-hidden {
  opacity: 0 !important;
}

/* Visible focus ring for keyboard users on the slider */
.wawa-ba-container:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* ---------- Cyan info sections (sprzęt / dodatkowe usługi) ---------- */
.bg-cyan-custom {
  background-color: #3de0ff; /* vibrant sky cyan from client screenshots */
  color: #0f172a;
}

/* ---------- Utility patches ----------
   These sections were added after the Tailwind build was purged,
   so a handful of utilities they reference don't exist in
   styles-6XnLRtVl.css. Recreated here with identical values. */
.mb-8 {
  margin-bottom: calc(var(--spacing) * 8);
}

.mb-12 {
  margin-bottom: calc(var(--spacing) * 12);
}

.pt-8 {
  padding-top: calc(var(--spacing) * 8);
}

:where(.space-y-6 > :not(:last-child)) {
  margin-block-start: calc(var(--spacing) * 6);
}

.text-slate-800 {
  color: #1e293b;
}

.text-slate-900 {
  color: #0f172a;
}

.border-slate-900\/10 {
  border-color: rgb(15 23 42 / 0.1);
}

@media (min-width: 48rem) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:text-center {
    text-align: center;
  }
}

/* ---------- Accessibility: respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .wawa-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  a[class*="inline-flex"][class*="rounded-xl"]:hover,
  a[class*="inline-flex"][class*="rounded-xl"]:active {
    translate: 0 0;
    scale: 1;
  }

  .wawa-ba-handle {
    transition: none;
  }

  .wawa-ba-container:hover .wawa-ba-handle,
  .wawa-ba-container.wawa-ba-dragging .wawa-ba-handle {
    scale: 1;
  }
}

/* ============================================================
   Section: Sprzęt i środki (wawa-section-equipment)
   Section: Dodatkowe usługi (wawa-section-extra)
   ============================================================ */

/* ---------- Shared section background ---------- */
.wawa-section-equipment,
.wawa-section-extra {
  background-color: #f8fafc;
}

/* ---------- Section badge (pill above heading) ---------- */
.wawa-section-badge {
  display: inline-block;
  padding: 0.3rem 1rem;
  border-radius: 9999px;
  background-color: var(--primary);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Brand card ---------- */
.wawa-brand-card {
  background: #fff;
  border-radius: 1rem;
  border: 1px solid rgb(15 23 42 / 0.08);
  box-shadow: 0 4px 24px rgb(15 23 42 / 0.07);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Card header: dark navy bar */
.wawa-brand-header {
  background: var(--primary-dark, #0f172a);
  padding: 1.25rem 1.5rem;
}

.wawa-brand-header-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.wawa-brand-origin {
  color: rgb(255 255 255 / 0.55);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  margin-bottom: 0.2rem;
}

.wawa-brand-name {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.wawa-brand-category {
  background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.2);
  color: rgb(255 255 255 / 0.85);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  white-space: nowrap;
  align-self: center;
}

/* Card body */
.wawa-brand-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Feature list inside brand card */
.wawa-feature-list {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgb(15 23 42 / 0.07);
}

.wawa-feature-list-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.wawa-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wawa-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.9rem;
  color: #334155;
  line-height: 1.45;
}

.wawa-feature-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background-color: var(--primary);
  color: #fff;
  margin-top: 0.1rem;
}

/* ---------- Bottom callout banner ---------- */
.wawa-callout {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark, #1e3a5f) 100%);
  border-radius: 1rem;
  padding: 1.75rem 2rem;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  color: rgb(255 255 255 / 0.92);
  font-size: 1rem;
  line-height: 1.6;
}

.wawa-callout strong {
  color: #fff;
  font-weight: 700;
}

.wawa-callout-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  color: rgb(255 255 255 / 0.7);
  margin-top: 0.1rem;
}

/* ---------- Extra services grid ---------- */
.wawa-extra-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .wawa-extra-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Extra service card ---------- */
.wawa-extra-card {
  background: #fff;
  border-radius: 1rem;
  border: 1px solid rgb(15 23 42 / 0.07);
  box-shadow: 0 2px 16px rgb(15 23 42 / 0.06);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  transition:
    box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    translate 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wawa-extra-card:hover {
  box-shadow: 0 8px 32px rgb(15 23 42 / 0.12);
  translate: 0 -4px;
}

.wawa-extra-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  margin: 0;
}

.wawa-extra-card-desc {
  font-size: 0.9375rem;
  color: #475569;
  line-height: 1.6;
  margin: 0;
}

/* ---------- Icon circle ---------- */
.wawa-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.wawa-icon-circle--blue {
  background-color: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}

.wawa-icon-circle--green {
  background-color: rgb(16 185 129 / 0.12);
  color: #059669;
}

.wawa-icon-circle--purple {
  background-color: rgb(139 92 246 / 0.12);
  color: #7c3aed;
}

/* ============================================================
   WAWA brand palette — dopasowana do cennika (gradient fiolet→cyan)
   ============================================================ */
:root {
  --wawa-gradient: linear-gradient(135deg, #10c2fe 0%, #3DE0FF 100%);
  --wawa-cyan: #3DE0FF;
  --wawa-purple: #10c2fe;
  --wawa-purple-dark: #0090bf;
  --wawa-cyan-dark: #00BFFF;
}

/* Nadpisanie primary na kolor z loga */
:root {
  --primary: #10c2fe;
  --primary-dark: #0090bf;
  --ring: #10c2fe;
  --accent-foreground: #0090bf;
}

/* Statystyki / ciemne sekcje — gradient dopasowany do loga */
.bg-primary-dark {
  background: linear-gradient(135deg, #005f82 0%, #0090bf 100%) !important;
}

/* Badge nad nagłówkami sekcji — gradient */
.wawa-section-badge {
  background: var(--wawa-gradient) !important;
}

/* Hero logo */
.wawa-hero-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 1.75rem;
  margin-top: -2.5rem; /* Moves the logo higher */
}

/* Logo images */
.wawa-logo { height: 155px; border-radius: 26px; display: block; }
.wawa-logo-footer { height: 160px; display: block; }

/* "Zobacz dokładny cennik" button */
.wawa-cennik-wrap {
  padding: 2rem 0 0.5rem;
  text-align: center;
}

.wawa-cennik-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 2rem;
  background: var(--wawa-gradient);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(123,107,229,0.35);
  transition: box-shadow 0.25s ease, translate 0.25s ease;
  letter-spacing: 0.01em;
}
.wawa-cennik-btn:hover {
  translate: 0 -2px;
  box-shadow: 0 8px 28px rgba(123,107,229,0.48);
  color: #fff;
}
.wawa-cennik-btn svg { flex-shrink: 0; }