/* BLOK: steps */
.steps--desktop .steps__wrapper { display: flex; flex-wrap: nowrap; border-radius: 20px; box-shadow: 0 0 12px 0 rgba(17, 17, 17, 0.24); }
.steps--desktop .steps__box { position: relative; width: 100%; }

.steps__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding: 28px 32px; background-color: #fff; cursor: pointer; transition: transform .3s; }
.steps--desktop .steps__box:not(:last-child) .steps__inner { border-right: 1px solid rgba(165, 166, 166, 0.5); }
.steps--desktop .steps__box:first-child .steps__inner { border-radius: 20px 0 0 20px; }
.steps--desktop .steps__box:last-child .steps__inner { border-radius: 0 20px 20px 0; }

.steps__name { display: flex; justify-content: center; align-items: center; min-height: 40px; text-align: center; }
.steps__description { display: none; text-align: center; }
.steps__description--show { display: block; }

.steps__link { display: none; align-items: center; gap: 12px; }
.steps__link--show { display: flex; }
.steps__link:hover .steps__link-text { color: #aa036c; transition: color .3s; }
.steps__link:hover .steps__icon path { stroke: #aa036c; transition: stroke .3s; }
.steps--desktop .steps__box:hover .steps__link { display: none; }

.steps__img { min-width: 64px; height: auto; min-height: 64px; max-height: 64px;}

/* Stan :hover (lub klasa .hovered) dla desktopu */
.steps__inner--hovered { position: absolute; left: -15px; right: -15px; top: -10%; z-index: 3; justify-content: flex-start; width: calc(100% + 30px); height: 135%; border-right: 0; border-radius: 20px; box-shadow: 0 0 12px 0 rgba(17, 17, 17, 0.24); }
.steps__inner--hovered .steps__name { color: #e2007e; }
.steps__inner--hovered .steps__img path { stroke: #e2007e; }
.steps__inner--hovered .steps__img--diff path { stroke: #e2007e; fill: #e2007e; }

/* Wersja mobilna */
.steps--mobile { display: none; }
.steps--mobile .steps__wrapper { display: flex; flex-direction: column; gap: 16px; }
.steps__box-mobile { display: flex; flex-direction: column; padding: 20px; border-radius: 20px; box-shadow: 0 0 12px 0 rgba(17, 17, 17, 0.24); cursor: pointer; }

.steps__row-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.steps__row-bottom { display: none; margin-top: 16px; }
.steps__box-mobile--show .steps__row-bottom { display: block; }
.steps__box-mobile--show .steps__name { color: #e2007e; transition: color .3s; }
.steps__box-mobile--show .steps__icon { transform: rotate(180deg); transition: transform .3s; }
.steps__box-mobile--show .steps__icon path { fill: #e2007e; transition: fill .3s; }

/* Kontrast */
.theme--contrast .steps--desktop .steps__wrapper { border: 1px solid rgba(165, 166, 166, 0.5) !important; }
.theme--contrast .steps__box, .theme--contrast .steps__inner { background-color: transparent !important; }
.theme--contrast .steps__inner--hovered { background-color: #000 !important; border: 1px solid rgba(165, 166, 166, 0.5) !important; }
.theme--contrast .steps__link .steps__icon { background-color: transparent !important; }
.theme--contrast .steps__link .steps__icon path,
.theme--contrast .steps__img path { stroke: #ffe800 !important; }
.theme--contrast .steps__img g > rect { fill: #000 !important; }
.theme--contrast .steps__img--diff path { stroke: #ffe800 !important; fill: #ffe800 !important; }

@media all and (max-width: 1550px) {
  .steps--desktop { padding: 0 32px 40px 32px; }
}
@media all and (max-width: 1400px) {
  .steps--desktop { padding: 0 32px 40px 32px; }
  .steps--desktop .steps__inner { padding: 14px 16px; }
  .steps__img { max-width: 48px; min-width: unset; }
  .steps__box-mobile { border-radius: 16px; padding: 14px; }
}
@media all and (max-width: 992px) {
  .steps--desktop { display: none; }
  .steps--mobile { display: block; }
}