/* =========================================================
   RESTART METABOLISMU – KOMPLETNÍ CSS
   Bez @import, aby se CSS správně načetlo i v editoru e-shopu.
   ========================================================= */

.rm-process,
.rm-results {
  position: relative !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.rm-process *,
.rm-process *::before,
.rm-process *::after,
.rm-results *,
.rm-results *::before,
.rm-results *::after {
  box-sizing: border-box !important;
}

.rm-process img {
  display: block !important;
  max-width: 100% !important;
}

/* JAK RESTART FUNGUJE */

.rm-process {
  padding: 70px 24px 66px !important;
  background: #ffffff !important;
}

.rm-process__inner {
  width: min(930px, calc(100% - 32px)) !important;
  margin: 0 auto !important;
}

.rm-process__header {
  max-width: 700px !important;
  margin: 0 auto 48px !important;
  text-align: center !important;
}

.rm-process__eyebrow,
.rm-results__eyebrow {
  margin: 0 0 10px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: #5da942 !important;
}

.rm-process__title,
.rm-results__title {
  margin: 0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(34px, 3.55vw, 50px) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  color: #183d33 !important;
}

.rm-process__title span,
.rm-results__title span {
  color: #ed6252 !important;
}

.rm-process__timeline {
  position: relative !important;
  width: min(690px, 100%) !important;
  margin: 0 auto !important;
}

.rm-process__timeline::before {
  content: "" !important;
  position: absolute !important;
  top: 34px !important;
  bottom: 34px !important;
  left: 50% !important;
  width: 1px !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, rgba(99,184,75,.18), rgba(237,98,82,.14), rgba(99,184,75,.18)) !important;
}

.rm-process__step {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 84px minmax(0,1fr) !important;
  grid-template-areas: "left icon right" !important;
  align-items: center !important;
  min-height: 108px !important;
  margin: 0 0 16px !important;
}

.rm-process__step:last-child {
  margin-bottom: 0 !important;
}

.rm-process__copy {
  max-width: 230px !important;
  min-width: 0 !important;
}

.rm-process__step--left .rm-process__copy {
  grid-area: left !important;
  justify-self: end !important;
  padding-right: 22px !important;
  text-align: right !important;
}

.rm-process__step--right .rm-process__copy {
  grid-area: right !important;
  justify-self: start !important;
  padding-left: 22px !important;
  text-align: left !important;
}

.rm-process__number {
  display: block !important;
  margin: 0 0 2px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(25px, 2.4vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: rgba(99,184,75,.42) !important;
}

.rm-process__step:nth-child(even) .rm-process__number {
  color: rgba(237,98,82,.44) !important;
}

.rm-process__copy h3 {
  margin: 1px 0 4px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(17px, 1.45vw, 21px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #183d33 !important;
}

.rm-process__copy p {
  margin: 0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.46 !important;
  color: #55524e !important;
}

.rm-process__icon {
  grid-area: icon !important;
  position: relative !important;
  z-index: 2 !important;
  justify-self: center !important;
  display: grid !important;
  place-items: center !important;
  width: 72px !important;
  height: 72px !important;
  overflow: hidden !important;
  border: 1px solid rgba(35,91,77,.07) !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 9px 20px rgba(39,58,49,.06), 0 2px 5px rgba(39,58,49,.02) !important;
}

.rm-process__icon img {
  width: 65px !important;
  height: 65px !important;
  max-width: none !important;
  object-fit: contain !important;
  mix-blend-mode: multiply !important;
}

.rm-process__statement {
  max-width: 620px !important;
  margin: 38px auto 0 !important;
  padding-top: 22px !important;
  border-top: 1px solid rgba(99,184,75,.14) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(20px, 1.9vw, 27px) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-align: center !important;
  color: #262522 !important;
}

.rm-process__statement strong {
  color: #4f913d !important;
  font-weight: 700 !important;
}

/* CO ZÍSKÁŠ / CO SE ZMĚNÍ */

.rm-results {
  padding: 70px 24px 78px !important;
  background:
    radial-gradient(ellipse at 6% 86%, rgba(99,184,75,.08), transparent 24%),
    radial-gradient(ellipse at 95% 12%, rgba(237,98,82,.07), transparent 24%),
    linear-gradient(180deg, #fffaf7 0%, #fbf7f1 100%) !important;
}

.rm-results__inner {
  width: min(1120px, calc(100% - 32px)) !important;
  margin: 0 auto !important;
}

.rm-results__header {
  max-width: 760px !important;
  margin: 0 auto 42px !important;
  text-align: center !important;
}

.rm-results__grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 26px !important;
  align-items: stretch !important;
}

.rm-results__card {
  min-width: 0 !important;
  padding: 36px !important;
  border: 1px solid rgba(35,91,77,.07) !important;
  border-radius: 30px !important;
  box-shadow: 0 18px 42px rgba(48,55,49,.045), 0 3px 9px rgba(48,55,49,.018) !important;
}

.rm-results__card--gain {
  background: rgba(244,249,240,.94) !important;
}

.rm-results__card--change {
  background: rgba(255,243,239,.95) !important;
}

.rm-results__card-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 22px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(35,91,77,.10) !important;
}

.rm-results__badge {
  display: inline-grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.88) !important;
  font-size: 21px !important;
  line-height: 1 !important;
}

.rm-results__card-head h3 {
  margin: 0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(20px, 2vw, 26px) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #183d33 !important;
}

.rm-results__list {
  display: grid !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.rm-results__list li {
  display: grid !important;
  grid-template-columns: 30px minmax(0,1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid rgba(35,91,77,.085) !important;
  list-style: none !important;
}

.rm-results__list li:last-child {
  border-bottom: 0 !important;
}

.rm-results__list li::before,
.rm-results__list li::after {
  content: none !important;
  display: none !important;
}

.rm-results__check {
  display: inline-grid !important;
  place-items: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.rm-results__card--gain .rm-results__check {
  background: rgba(99,184,75,.13) !important;
  color: #4f913d !important;
}

.rm-results__card--change .rm-results__check {
  background: rgba(237,98,82,.13) !important;
  color: #d95949 !important;
}

.rm-results__list li > span:last-child {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(15px, 1.3vw, 17px) !important;
  font-weight: 400 !important;
  line-height: 1.42 !important;
  color: #263b34 !important;
}

.rm-results__statement {
  max-width: 700px !important;
  margin: 38px auto 0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(22px, 2.1vw, 30px) !important;
  font-weight: 600 !important;
  line-height: 1.36 !important;
  text-align: center !important;
  color: #183d33 !important;
}

.rm-results__statement strong {
  color: #ed6252 !important;
  font-weight: 700 !important;
}

/* TABLET */

@media (max-width: 900px) {
  .rm-process {
    padding: 52px 20px 58px !important;
  }

  .rm-process__timeline::before {
    left: 34px !important;
    transform: none !important;
  }

  .rm-process__step {
    grid-template-columns: 68px minmax(0,1fr) !important;
    grid-template-areas: "icon copy" !important;
    gap: 16px !important;
    min-height: 86px !important;
    margin-bottom: 13px !important;
  }

  .rm-process__step--left .rm-process__copy,
  .rm-process__step--right .rm-process__copy {
    grid-area: copy !important;
    justify-self: stretch !important;
    max-width: none !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .rm-process__icon {
    grid-area: icon !important;
    width: 64px !important;
    height: 64px !important;
  }

  .rm-process__icon img {
    width: 58px !important;
    height: 58px !important;
  }

  .rm-results__grid {
    grid-template-columns: 1fr !important;
    max-width: 760px !important;
    margin: 0 auto !important;
  }
}

/* MOBIL */

@media (max-width: 560px) {
  .rm-process,
  .rm-results {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .rm-process__title,
  .rm-results__title {
    font-size: clamp(30px, 8.6vw, 40px) !important;
  }

  .rm-process__timeline::before {
    left: 29px !important;
  }

  .rm-process__step {
    grid-template-columns: 58px minmax(0,1fr) !important;
    gap: 13px !important;
    min-height: 75px !important;
  }

  .rm-process__icon {
    width: 56px !important;
    height: 56px !important;
  }

  .rm-process__icon img {
    width: 50px !important;
    height: 50px !important;
  }

  .rm-results__card {
    padding: 24px 18px !important;
    border-radius: 23px !important;
  }

  .rm-results__list li > span:last-child {
    font-size: 15px !important;
  }
}


/* =========================================================
   INTERAKTIVITA + NOVÉ JEDNODUCHÉ IKONY
   Ostatní vzhled zůstává beze změny.
   ========================================================= */

/* Plynulé přechody */
.rm-process__step,
.rm-process__icon,
.rm-process__copy,
.rm-results__card,
.rm-results__card-head,
.rm-results__list li,
.rm-results__check {
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background-color .22s ease,
    border-color .22s ease,
    color .22s ease !important;
}

/* Jemná interaktivita kroků na desktopu */
@media (hover: hover) and (pointer: fine) {
  .rm-process__step:hover .rm-process__icon {
    transform: scale(1.06) !important;
    border-color: rgba(35,91,77,.14) !important;
    box-shadow:
      0 14px 28px rgba(39,58,49,.10),
      0 3px 8px rgba(39,58,49,.03) !important;
  }

  .rm-process__step--left:hover .rm-process__copy {
    transform: translateX(-4px) !important;
  }

  .rm-process__step--right:hover .rm-process__copy {
    transform: translateX(4px) !important;
  }

  .rm-results__card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(35,91,77,.12) !important;
    box-shadow:
      0 24px 52px rgba(48,55,49,.075),
      0 5px 14px rgba(48,55,49,.025) !important;
  }

  .rm-results__list li:hover {
    transform: translateX(5px) !important;
  }

  .rm-results__list li:hover .rm-results__check {
    transform: scale(1.08) !important;
  }
}

/* Původní emoji skryjeme, HTML není nutné měnit */
.rm-results__badge {
  position: relative !important;
  font-size: 0 !important;
}

/* Jednoduché zelené plus */
.rm-results__card--gain .rm-results__badge::before,
.rm-results__card--gain .rm-results__badge::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  border-radius: 999px !important;
  background: #5da942 !important;
  transform: translate(-50%, -50%) !important;
}

.rm-results__card--gain .rm-results__badge::before {
  width: 15px !important;
  height: 2px !important;
}

.rm-results__card--gain .rm-results__badge::after {
  width: 2px !important;
  height: 15px !important;
}

/* Jednoduchý korálový symbol změny */
.rm-results__card--change .rm-results__badge::before {
  content: "↻" !important;
  display: block !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 23px !important;
  font-weight: 400 !important;
  line-height: 44px !important;
  text-align: center !important;
  color: #ed6252 !important;
}

/* Respektování nastavení omezeného pohybu */
@media (prefers-reduced-motion: reduce) {
  .rm-process__step,
  .rm-process__icon,
  .rm-process__copy,
  .rm-results__card,
  .rm-results__card-head,
  .rm-results__list li,
  .rm-results__check {
    transition: none !important;
  }

  .rm-process__step:hover .rm-process__icon,
  .rm-process__step:hover .rm-process__copy,
  .rm-results__card:hover,
  .rm-results__list li:hover,
  .rm-results__list li:hover .rm-results__check {
    transform: none !important;
  }
}