/* ==========================================================================
   Podstrona: Myjnia samoobsługowa „Ogon w pianie” (.wash-)
   Uzupełnia wspólne komponenty z subpage.css.
   ========================================================================== */

/* ---------- Hero ---------- */
.wash-hero-badge { margin-top: 18px; }

.wash-hero-price {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 30px;
  padding: 14px 24px 14px 20px;
  border-radius: var(--radius);
  background: var(--color-white);
  box-shadow: 0 20px 40px -26px rgba(2, 27, 74, .35);
}
.wash-hero-price-value {
  flex: none;
  font-family: var(--font-heading);
  font-size: 44px;
  line-height: 1;
  color: var(--color-black);
}
.wash-hero-price-text { font-size: 16px; line-height: 1.4; }
.wash-hero-price-text strong { color: var(--color-black); }

.wash-hero-more svg { transition: transform .5s var(--ease-out-quart); }
.wash-hero-more:hover svg { transform: translateY(3px); }

.wash-hero-phone { margin: 18px 0 0; font-size: 16px; }
.wash-hero-phone a { font-weight: 700; color: var(--color-black); white-space: nowrap; }

/* bańki piany wokół ilustracji */
.wash-bubble {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  border: 2px solid var(--color-primary-2);
  background: radial-gradient(circle at 32% 30%, var(--color-white) 0 14%, rgba(255, 255, 255, .7) 15% 45%, rgba(255, 255, 255, .25) 75%);
  animation: wash-float 6s ease-in-out infinite alternate;
}
.wash-bubble--1 { top: 9%; left: 8%; width: 48px; height: 48px; }
.wash-bubble--2 { top: 3%; right: 22%; width: 26px; height: 26px; animation-delay: -2s; }
.wash-bubble--3 { top: 32%; right: 1%; width: 62px; height: 62px; animation-delay: -4s; }
.wash-bubble--4 { bottom: 7%; right: 18%; width: 34px; height: 34px; animation-delay: -1s; }
.wash-hero-media > img { position: relative; z-index: 1; }
.wash-hero-media .page-hero-sticker { z-index: 2; }

@keyframes wash-float {
  from { transform: translateY(0); }
  to { transform: translateY(-14px); }
}

/* ---------- Co zapewniamy – kolory kółek z ikonami ---------- */
.wash-icon--mint { background: var(--color-secondary-4); }
.wash-icon--peach { background: var(--color-secondary-3); }
.wash-icon--lavender { background: var(--color-secondary-5); }

/* ---------- Jak to działa – kroki ---------- */
.wash-steps {
  --wash-step-size: 210px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* przerywana linia łącząca kółka */
.wash-steps::before {
  content: "";
  position: absolute;
  top: calc(var(--wash-step-size) / 2);
  left: 12.5%;
  right: 12.5%;
  border-top: 3px dashed var(--color-primary-2-dark);
}
.wash-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.wash-step-circle {
  position: relative;
  width: var(--wash-step-size);
  height: var(--wash-step-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .55);
}
.wash-step-icon { width: 44px; height: 44px; margin-bottom: 8px; }
.wash-step-label { font-size: 16px; line-height: 1.3; color: var(--color-primary-1); }
.wash-step-name {
  margin: 8px 0 0;
  font-size: 20px;
  line-height: 1.2;
  color: var(--color-primary-1);
}
.wash-step-text {
  max-width: 250px;
  margin: 24px auto 0;
  font-size: 16px;
  line-height: 1.5;
}
.wash-step-text a { color: inherit; font-weight: 700; white-space: nowrap; }
.wash-step-text strong { color: var(--color-black); }

/* ---------- FAQ ---------- */
.wash-faq { max-width: 900px; margin-inline: auto; }
.wash-faq .faq-answer a { color: var(--color-black); font-weight: 700; }

/* ---------- CTA ---------- */
.wash-faq-section,
.wash-cta { padding-top: 0; }
.wash-cta-alt {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}
.wash-cta-alt-kicker { font-size: 14px; font-weight: 400; }
.wash-cta-alt-label { font-size: 18px; }

/* ---------- Responsywność ---------- */
@media (min-width: 1440px) {
  .wash-steps { --wash-step-size: 230px; gap: 40px; }
  .wash-step-name { font-size: 22px; }
}
@media (max-width: 1279px) {
  .wash-steps { --wash-step-size: 180px; gap: 20px; }
  .wash-step-circle { padding: 18px; }
  .wash-step-name { font-size: 18px; }
}
@media (max-width: 991px) {
  .wash-steps { --wash-step-size: 200px; grid-template-columns: repeat(2, 1fr); row-gap: 50px; }
  .wash-steps::before { display: none; }
}
@media (max-width: 767px) {
  .wash-hero-price-value { font-size: 38px; }
  .wash-steps { grid-template-columns: 1fr; row-gap: 0; }
  /* pionowa kropkowana „ścieżka” między krokami */
  .wash-step:not(:last-child)::after {
    content: "";
    display: block;
    height: 44px;
    margin: 18px 0;
    border-left: 3px dashed var(--color-primary-2-dark);
  }
}
@media (max-width: 479px) {
  .wash-hero-price { gap: 12px; padding: 12px 16px; }
  .wash-hero-price-value { font-size: 34px; }
  .wash-hero-price-text { font-size: 15px; }
  .page-hero-actions .btn { width: 100%; }
  .wash-steps { --wash-step-size: 180px; }
  .wash-cta-alt { width: 100%; }
  .cta-band-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .wash-bubble { animation: none; }
  .wash-hero-more svg { transition: none; }
}

/* cennik: dopisek pod kwotą w osobnej linii na wąskich ekranach */
@media (max-width: 767px) {
  .wash-price-cards .price-card-amount small { display: block; margin-top: 10px; }
}