/* repairOS frontend wizard experience styles.
   This file is intentionally separate from ros-frontend-wizard.css. */

html.ros-fw-experience-active,
html.ros-fw-experience-active body.ros-wizard-active {
  scroll-behavior: smooth;
}

body.ros-wizard-active .ros-fw-tools-toggle,
body.ros-wizard-active .ros-fw-stylebar,
body.ros-wizard-active .ros-fw-stylebar * {
  box-sizing: border-box !important;
  font-family: var(--font-family-main, "Bai Jamjuree", Arial, sans-serif) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.ros-fw-tools-toggle {
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
  right: 16px !important;
  z-index: 2147481001 !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(15, 23, 42, .16) !important;
  border-radius: 8px !important;
  background: #111827 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .18) !important;
  cursor: pointer !important;
}

.ros-fw-stylebar {
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 66px) !important;
  right: 16px !important;
  z-index: 2147481000 !important;
  display: grid !important;
  gap: 12px !important;
  width: min(94vw, 330px) !important;
  padding: 12px !important;
  border: 1px solid rgba(15, 23, 42, .12) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .18) !important;
  backdrop-filter: blur(14px) saturate(1.25) !important;
}

.ros-fw-stylebar.is-collapsed {
  display: none !important;
}

.ros-fw-stylebar__head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.ros-fw-stylebar__head {
  justify-content: space-between !important;
}

.ros-fw-stylebar__title {
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

.ros-fw-stylebar__close {
  width: 32px !important;
  height: 32px !important;
  border: 1px solid rgba(15, 23, 42, .12) !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: #111827 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.ros-fw-stylebar__section {
  display: grid !important;
  gap: 8px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(15, 23, 42, .10) !important;
}

.ros-fw-stylebar__label {
  color: #4b5563 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.ros-fw-stylebar__select {
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.ros-fw-stylebar__select {
  width: 100% !important;
  min-width: 100% !important;
  border: 1px solid rgba(15, 23, 42, .16) !important;
  background: #fff !important;
  color: #111827 !important;
  padding: 0 34px 0 12px !important;
}

.ros-fw-stylebar #ros-gsm-btn,
.ros-fw-stylebar .ros-fw-stylebar__importer {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 42px !important;
  justify-content: flex-start !important;
  border-radius: 7px !important;
  transform: none !important;
  box-shadow: none !important;
}

.ros-fw-headline {
  position: fixed !important;
  z-index: 2147480990 !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  font-family: var(--font-family-main, "Bai Jamjuree", Arial, sans-serif) !important;
}

.ros-fw-headline__eyebrow {
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.ros-fw-headline__title {
  margin-top: 6px !important;
  font-size: clamp(22px, 3vw, 38px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
}

.ros-fw-progress {
  position: fixed !important;
  z-index: 2147480990 !important;
  box-sizing: border-box !important;
  font-family: var(--font-family-main, "Bai Jamjuree", Arial, sans-serif) !important;
}

.ros-fw-progress__track {
  position: relative !important;
  overflow: hidden !important;
  background: rgba(148, 163, 184, .24) !important;
}

.ros-fw-progress__bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  transition: width .38s ease;
}

.ros-fw-orb {
  position: fixed !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.ros-fw-orb::before,
.ros-fw-orb::after {
  content: "";
  position: absolute;
  border-radius: 999px;
}

body.ros-wizard-active.ros-fw-enter .ros-step-content.active {
  animation: rosFwStepIn .34s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes rosFwStepIn {
  from {
    opacity: .38;
    transform: translate3d(0, 18px, 0) scale(.985);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

body.ros-wizard-active.ros-fw-enter .brand-card,
body.ros-wizard-active.ros-fw-enter .ros-popular-model-card,
body.ros-wizard-active.ros-fw-enter .repair-card {
  animation: rosFwCardPop .38s ease both;
}

body.ros-wizard-active.ros-fw-enter .brand-card:nth-child(2n),
body.ros-wizard-active.ros-fw-enter .ros-popular-model-card:nth-child(2n),
body.ros-wizard-active.ros-fw-enter .repair-card:nth-child(2n) {
  animation-delay: .035s;
}

body.ros-wizard-active.ros-fw-enter .brand-card:nth-child(3n),
body.ros-wizard-active.ros-fw-enter .ros-popular-model-card:nth-child(3n),
body.ros-wizard-active.ros-fw-enter .repair-card:nth-child(3n) {
  animation-delay: .07s;
}

@keyframes rosFwCardPop {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

body.ros-wizard-active.ros-fw-pilot .ros-cat-card {
  min-height: 70px !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 28px !important;
  align-items: center !important;
  justify-items: start !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(26, 127, 100, .18) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #12352b !important;
  text-align: left !important;
  box-shadow: 0 10px 22px rgba(26, 127, 100, .07) !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-cat-card::before {
  content: "" !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #1a7f64, #bddf74) !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-cat-card::after {
  content: ">" !important;
  justify-self: end !important;
  color: #1a7f64 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-cat-card span,
body.ros-wizard-active.ros-fw-pilot .ros-cat-card {
  font-weight: 850 !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-0 .ros-cat-card {
  min-height: 70px !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 28px !important;
  background: #fff !important;
  color: #12352b !important;
}

body.ros-wizard-active.ros-fw-pilot {
  --ros-fw-ink: #06251f;
  --ros-fw-muted: #52615e;
  --ros-fw-panel: #fbfff8;
  --ros-fw-line: rgba(6, 37, 31, .13);
  --ros-fw-accent: #1a7f64;
  --ros-fw-accent-2: #d97706;
  background: #ecf5ea !important;
  color: var(--ros-fw-ink) !important;
}

body.ros-wizard-active.ros-fw-pilot::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(26, 127, 100, .16), transparent 34%),
    linear-gradient(315deg, rgba(217, 119, 6, .12), transparent 28%);
}

body.ros-wizard-active.ros-fw-pilot .ros-fw-headline {
  display: none !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-fw-progress {
  top: 72px !important;
  left: 50% !important;
  width: min(820px, calc(100vw - 32px)) !important;
  transform: translateX(-50%) !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-fw-progress__track {
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(6, 37, 31, .12) !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-fw-progress__bar {
  background: #1a7f64 !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-stepper {
  position: sticky !important;
  top: 88px !important;
  z-index: 3200 !important;
  width: min(820px, calc(100vw - 32px)) !important;
  margin: 92px auto 14px !important;
  padding: 6px !important;
  border: 1px solid rgba(6, 37, 31, .12) !important;
  border-radius: 8px !important;
  background: rgba(251, 255, 248, .92) !important;
  box-shadow: 0 14px 36px rgba(6, 37, 31, .12) !important;
  backdrop-filter: blur(12px) !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-stepper::before,
body.ros-wizard-active.ros-fw-pilot #ros-stepper::after,
body.ros-wizard-active.ros-fw-pilot #ros-stepper .ros-step::before,
body.ros-wizard-active.ros-fw-pilot #ros-stepper .ros-step::after {
  content: none !important;
  display: none !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-stepper .ros-step {
  width: auto !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 10px !important;
  border-radius: 7px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #52615e !important;
  box-shadow: none !important;
  transform: none !important;
}

.ros-fw-stylebar__save {
  width: 100% !important;
  min-height: 36px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: #111827 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 8px 18px rgba(17, 24, 39, .16) !important;
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease !important;
}

.ros-fw-stylebar__save:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px rgba(17, 24, 39, .22) !important;
}

.ros-fw-stylebar__save:disabled {
  opacity: .65 !important;
  cursor: wait !important;
  transform: none !important;
}

.ros-fw-stylebar__status {
  min-height: 14px !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.ros-fw-stylebar__status[data-kind="success"] {
  color: #168146 !important;
}

.ros-fw-stylebar__status[data-kind="error"] {
  color: #dc2626 !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-stepper .ros-step small {
  display: inline !important;
  margin-left: 5px !important;
  color: inherit !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-stepper .ros-step.active,
body.ros-wizard-active.ros-fw-pilot #ros-stepper .ros-step.completed {
  background: #06251f !important;
  border-color: #06251f !important;
  color: #fff !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-step-content {
  width: min(820px, calc(100vw - 32px)) !important;
  max-width: 820px !important;
  margin: 0 auto 28px !important;
  padding: clamp(18px, 3vw, 30px) !important;
  border: 1px solid rgba(6, 37, 31, .12) !important;
  border-radius: 8px !important;
  background: rgba(251, 255, 248, .95) !important;
  box-shadow: 0 16px 46px rgba(6, 37, 31, .11) !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-step-content > h2 {
  text-align: left !important;
  font-size: clamp(1.8rem, 4.2vw, 3.15rem) !important;
  line-height: 1.03 !important;
  margin: 0 0 18px !important;
}

body.ros-wizard-active.ros-fw-pilot .gsma-search-wrapper,
body.ros-wizard-active.ros-fw-pilot .ros-repair-search-row {
  max-width: none !important;
  margin: 0 0 16px !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-category-grid,
body.ros-wizard-active.ros-fw-pilot #ros-category-grid,
body.ros-wizard-active.ros-fw-pilot .ros-brand-grid,
body.ros-wizard-active.ros-fw-pilot .ros-popular-models,
body.ros-wizard-active.ros-fw-pilot #ros-imported-models,
body.ros-wizard-active.ros-fw-pilot .ros-repair-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

body.ros-wizard-active.ros-fw-pilot .brand-card,
body.ros-wizard-active.ros-fw-pilot .ros-category-card,
body.ros-wizard-active.ros-fw-pilot .ros-popular-model-card,
body.ros-wizard-active.ros-fw-pilot .repair-card {
  min-height: 74px !important;
  display: grid !important;
  grid-template-columns: 66px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  border: 1px solid rgba(6, 37, 31, .12) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.ros-wizard-active.ros-fw-pilot .brand-card:hover,
body.ros-wizard-active.ros-fw-pilot .ros-category-card:hover,
body.ros-wizard-active.ros-fw-pilot .ros-popular-model-card:hover,
body.ros-wizard-active.ros-fw-pilot .repair-card:hover {
  transform: translateX(6px) !important;
  border-color: rgba(26, 127, 100, .54) !important;
  box-shadow: 0 10px 26px rgba(6, 37, 31, .10) !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-wizard-nav {
  position: sticky !important;
  bottom: 12px !important;
  z-index: 3300 !important;
  width: min(820px, calc(100vw - 32px)) !important;
  margin: 16px auto !important;
  padding: 10px !important;
  border: 1px solid rgba(6, 37, 31, .12) !important;
  border-radius: 8px !important;
  background: rgba(251, 255, 248, .94) !important;
  box-shadow: 0 14px 34px rgba(6, 37, 31, .14) !important;
  backdrop-filter: blur(12px) !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-category-grid {
  counter-reset: rosPilotCards !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-0 .ros-cat-card {
  counter-increment: rosPilotCards !important;
  min-height: 62px !important;
  display: grid !important;
  grid-template-columns: 34px 46px minmax(0, 1fr) 20px !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  align-items: center !important;
  justify-items: stretch !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-0 .ros-cat-card::before {
  content: counter(rosPilotCards, decimal-leading-zero) !important;
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 6px !important;
  background: #e5f3dc !important;
  color: #1a7f64 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-0 .ros-cat-card::after {
  align-self: center !important;
  justify-self: end !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-0 .ros-cat-ico {
  position: static !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  transform: none !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-0 .ros-cat-ico img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-0 .ros-cat-name {
  position: static !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: #12352b !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

@media (max-width: 1024px) {
  .ros-fw-tools-toggle {
    top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    right: 8px !important;
  }

  .ros-fw-stylebar {
    top: calc(env(safe-area-inset-top, 0px) + 58px) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
  }

  .ros-fw-stylebar__select {
    min-width: 0 !important;
    color: #111827 !important;
    background: #fff !important;
  }

  .ros-fw-headline {
    display: none !important;
  }

  body.ros-wizard-active.ros-fw-pilot #ros-category-grid,
  body.ros-wizard-active.ros-fw-pilot .ros-category-grid,
  body.ros-wizard-active.ros-fw-pilot .ros-brand-grid,
  body.ros-wizard-active.ros-fw-pilot .ros-popular-models,
  body.ros-wizard-active.ros-fw-pilot #ros-imported-models,
  body.ros-wizard-active.ros-fw-pilot .ros-repair-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  body.ros-wizard-active.ros-fw-pilot .ros-step-content {
    padding: 18px 14px !important;
  }

  body.ros-wizard-active.ros-fw-pilot .ros-step-content > h2 {
    margin-bottom: 12px !important;
  }

  body.ros-wizard-active.ros-fw-pilot .brand-card,
  body.ros-wizard-active.ros-fw-pilot .ros-cat-card,
  body.ros-wizard-active.ros-fw-pilot .ros-category-card,
  body.ros-wizard-active.ros-fw-pilot .ros-popular-model-card,
  body.ros-wizard-active.ros-fw-pilot .repair-card {
    min-height: 66px !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) 24px !important;
    align-items: center !important;
    text-align: left !important;
    padding: 10px 14px !important;
  }

  body.ros-wizard-active.ros-fw-pilot .brand-card::after,
  body.ros-wizard-active.ros-fw-pilot .ros-cat-card::after,
  body.ros-wizard-active.ros-fw-pilot .ros-category-card::after,
  body.ros-wizard-active.ros-fw-pilot .ros-popular-model-card::after,
  body.ros-wizard-active.ros-fw-pilot .repair-card::after {
    content: ">" !important;
    color: #1a7f64 !important;
    font-weight: 900 !important;
    font-size: 18px !important;
  }

  body.ros-wizard-active.ros-fw-pilot .brand-card img,
  body.ros-wizard-active.ros-fw-pilot .ros-category-card img,
  body.ros-wizard-active.ros-fw-pilot .ros-popular-model-card img,
  body.ros-wizard-active.ros-fw-pilot .repair-card img {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
  }
}

body.ros-wizard-active.ros-fw-pilot #ros-category-grid,
body.ros-wizard-active.ros-fw-pilot .ros-category-grid {
  width: min(840px, 100%) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-0 .ros-cat-card {
  width: 100% !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-brand-grid,
body.ros-wizard-active.ros-fw-pilot #ros-imported-models,
body.ros-wizard-active.ros-fw-pilot .ros-popular-models {
  width: min(860px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

body.ros-wizard-active.ros-fw-pilot .brand-card {
  width: 100% !important;
  min-height: 68px !important;
  height: auto !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr) 24px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  background: #fff !important;
}

body.ros-wizard-active.ros-fw-pilot .brand-card::before {
  width: 62px !important;
  height: 42px !important;
  border-radius: 7px !important;
  background-color: #eef7e9 !important;
  background-size: 76% auto !important;
  filter: saturate(1.1) contrast(1.08) drop-shadow(0 1px 0 rgba(255, 255, 255, .9)) !important;
}

body.ros-wizard-active.ros-fw-pilot .brand-card::after {
  content: ">" !important;
  justify-self: end !important;
  color: #1a7f64 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

body.ros-wizard-active.ros-fw-pilot .brand-label {
  color: #12352b !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-popular-model-card,
body.ros-wizard-active.ros-fw-pilot #ros-imported-models .ros-popular-model-card,
body.ros-wizard-active.ros-fw-pilot .ros-popular-models .ros-popular-model-card {
  width: 100% !important;
  min-height: 112px !important;
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) 28px !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 12px 16px !important;
  text-align: left !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-popular-model-card::after {
  content: "Details" !important;
  writing-mode: vertical-rl !important;
  transform: rotate(180deg) !important;
  justify-self: end !important;
  color: #1a7f64 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-popular-model-card img.ros-model-thumb {
  width: 78px !important;
  height: 88px !important;
  object-fit: contain !important;
  border: 1px solid rgba(6, 37, 31, .10) !important;
  border-radius: 8px !important;
  background: #f7fbf4 !important;
  padding: 4px !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-popular-model-text {
  min-width: 0 !important;
  display: grid !important;
  gap: 6px !important;
  text-align: left !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-popular-model-text strong {
  color: #06251f !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-model-nums {
  color: #60716d !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

@media (max-width: 1024px) {
  body.ros-wizard-active.ros-fw-pilot #ros-category-grid,
  body.ros-wizard-active.ros-fw-pilot .ros-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.ros-wizard-active.ros-fw-pilot #ros-step-0 .ros-cat-card {
    min-height: 82px !important;
    grid-template-columns: 28px minmax(0, 1fr) 18px !important;
    grid-template-rows: 34px auto !important;
    gap: 4px 8px !important;
    padding: 10px !important;
  }

  body.ros-wizard-active.ros-fw-pilot #ros-step-0 .ros-cat-card::before {
    width: 26px !important;
    height: 26px !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body.ros-wizard-active.ros-fw-pilot #ros-step-0 .ros-cat-ico {
    width: 34px !important;
    height: 34px !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  body.ros-wizard-active.ros-fw-pilot #ros-step-0 .ros-cat-name {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
    font-size: 12px !important;
  }

  body.ros-wizard-active.ros-fw-pilot #ros-step-0 .ros-cat-card::after {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
  }

  body.ros-wizard-active.ros-fw-pilot .brand-card {
    grid-template-columns: 62px minmax(0, 1fr) 22px !important;
  }

  body.ros-wizard-active.ros-fw-pilot .brand-card::before {
    width: 50px !important;
    height: 34px !important;
  }

  body.ros-wizard-active.ros-fw-pilot .ros-popular-model-card,
  body.ros-wizard-active.ros-fw-pilot #ros-imported-models .ros-popular-model-card,
  body.ros-wizard-active.ros-fw-pilot .ros-popular-models .ros-popular-model-card {
    grid-template-columns: 68px minmax(0, 1fr) !important;
    min-height: 92px !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  body.ros-wizard-active.ros-fw-pilot .ros-popular-model-card img.ros-model-thumb {
    width: 58px !important;
    height: 70px !important;
  }
}

body.ros-wizard-active.ros-fw-pilot #ros-step-1 .ros-brand-grid {
  width: min(760px, 100%) !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  justify-content: stretch !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-1 .ros-brand-grid > .brand-card {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 68px !important;
  height: auto !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: 82px minmax(0, 1fr) 24px !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-1 .ros-brand-grid > .brand-card::before {
  width: 66px !important;
  height: 42px !important;
  border-radius: 7px !important;
  background-color: #06251f !important;
  background-size: 72% auto !important;
  filter: invert(1) grayscale(1) contrast(1.35) drop-shadow(0 1px 0 rgba(255, 255, 255, .28)) !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-1 .brand-label {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #12352b !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-2 #ros-imported-models,
body.ros-wizard-active.ros-fw-pilot #ros-step-2 .ros-popular-models {
  width: min(860px, 100%) !important;
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

body.ros-wizard-active #ros-step-2 .gsma-search-wrapper {
  overflow: visible !important;
}

@media (min-width: 1025px) {
body.ros-wizard-active #ros-step-2 .ros-step2-imei-layout {
  width: min(926px, calc(100vw - 48px)) !important;
  max-width: min(926px, calc(100vw - 48px)) !important;
}

body.ros-wizard-active #ros-step-2 .ros-step2-imei-layout .gsma-search-wrapper {
  width: calc(100% - 66px) !important;
  max-width: calc(100% - 66px) !important;
  margin-left: 66px !important;
  margin-right: 0 !important;
}
}

body.ros-wizard-active #ros-step-2 .gsma-search-wrapper .gsma-suggest {
  left: 0 !important;
  right: auto !important;
  width: calc(100% - 128px) !important;
  max-width: calc(100% - 128px) !important;
  transform: none !important;
  box-sizing: border-box !important;
}

@media (min-width: 1025px) {
body.ros-wizard-active #ros-step-2 .ros-step2-imei-layout > #ros-device-preview {
  width: calc(100% - 194px) !important;
  max-width: calc(100% - 194px) !important;
  min-width: 0 !important;
  margin-left: 66px !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
}

@media (min-width: 1025px) {
body.ros-wizard-active #ros-step-2 .ros-step2-imei-layout > .ros-s2-hint {
  width: calc(100% - 194px) !important;
  max-width: calc(100% - 194px) !important;
  min-width: 0 !important;
  margin-left: 66px !important;
  margin-right: 0 !important;
  margin-top: 8px !important;
  left: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}
}

@media (min-width: 1025px) {
body.ros-wizard-active #ros-step-3 {
  --ros-step3-control-width: min(732px, calc(100vw - 48px));
}
}

body.ros-wizard-active #ros-step-3 > #ros-device-preview {
  width: var(--ros-step3-control-width) !important;
  max-width: var(--ros-step3-control-width) !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body.ros-wizard-active #ros-step-3 > #ros-device-preview {
  margin-top: 18px !important;
  margin-bottom: 22px !important;
}

body.ros-wizard-active #ros-step-3 .ros-repair-search-row {
  position: relative !important;
  width: var(--ros-step3-control-width) !important;
  max-width: var(--ros-step3-control-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

body.ros-wizard-active #ros-step-3 .ros-repair-search-field {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body.ros-wizard-active #ros-step-3 #ros-b2b-slot {
  position: absolute !important;
  left: calc(100% + 12px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

body.ros-wizard-active #ros-step-3 #ros_repair_search {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-2 .ros-popular-model-card {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: 82px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-2 .ros-popular-model-card img.ros-model-thumb {
  grid-row: 1 / 3 !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-2 .ros-popular-model-card::after {
  content: "Details" !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  width: max-content !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: #e5f3dc !important;
  color: #1a7f64 !important;
  writing-mode: horizontal-tb !important;
  transform: none !important;
  justify-self: start !important;
  align-self: end !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-2 .ros-popular-model-text strong {
  font-size: 16px !important;
  line-height: 1.14 !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-2 .ros-model-nums {
  display: block !important;
  margin-top: 4px !important;
  font-size: 12px !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-2 .ros-popular-model-text,
body.ros-wizard-active.ros-fw-pilot #ros-step-2 .ros-popular-model-text * {
  text-align: left !important;
}

@media (max-width: 1024px) {
  body.ros-wizard-active.ros-fw-pilot #ros-step-1 .ros-brand-grid {
    grid-template-columns: 1fr !important;
  }

  body.ros-wizard-active #ros-step-2 .gsma-search-wrapper .gsma-suggest {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
  }

  body.ros-wizard-active #ros-step-2 .ros-step2-imei-layout {
    width: auto !important;
    max-width: 500px !important;
  }

  body.ros-wizard-active #ros-step-2 .ros-step2-imei-layout .gsma-search-wrapper {
    width: min(100%, calc(500px + 2cm)) !important;
    max-width: 500px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.ros-wizard-active #ros-step-2 .ros-step2-imei-layout .ros-step2-imei-btn {
    left: -66px !important;
  }

  body.ros-wizard-active #ros-step-2 .ros-step2-imei-layout > #ros-device-preview {
    width: min(100%, calc(500px + 2cm)) !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.ros-wizard-active #ros-step-2 .ros-step2-imei-layout > .ros-s2-hint {
    width: min(100%, calc(500px + 2cm)) !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.ros-wizard-active #ros-step-3 {
    --ros-step3-control-width: unset;
  }

  body.ros-wizard-active.ros-fw-pilot #ros-step-1 .ros-brand-grid > .brand-card {
    grid-template-columns: 62px minmax(0, 1fr) 22px !important;
    min-height: 62px !important;
    padding: 9px 12px !important;
  }

  body.ros-wizard-active.ros-fw-pilot #ros-step-1 .ros-brand-grid > .brand-card::before {
    width: 50px !important;
    height: 34px !important;
  }
}

@media (max-width: 620px) {
  body.ros-wizard-active #ros-step-2 .ros-step2-imei-layout .gsma-search-wrapper {
    width: min(100%, calc(500px + 2cm)) !important;
    max-width: 500px !important;
    margin-left: 0 !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body.ros-wizard-active #ros-step-2 .ros-step2-imei-layout .ros-step2-imei-btn {
    left: -48px !important;
  }

  body.ros-wizard-active #ros-step-2 .ros-step2-imei-layout > #ros-device-preview {
    width: min(100%, calc(500px + 2cm)) !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.ros-wizard-active #ros-step-2 .ros-step2-imei-layout > .ros-s2-hint {
    width: min(100%, calc(500px + 2cm)) !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.ros-wizard-active #ros-step-3 {
    --ros-step3-control-width: unset;
  }

  body.ros-wizard-active #ros-step-3 .ros-repair-search-row {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  body.ros-wizard-active #ros-step-3 #ros-b2b-slot {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    flex-basis: 100% !important;
    justify-content: center !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ros-wizard-active.ros-fw-enter .ros-step-content.active,
  body.ros-wizard-active.ros-fw-enter .brand-card,
  body.ros-wizard-active.ros-fw-enter .ros-category-card,
  body.ros-wizard-active.ros-fw-enter .ros-popular-model-card,
  body.ros-wizard-active.ros-fw-enter .repair-card {
    animation: none !important;
  }
}