/* The original bundle references sepc1.png/sepc2.png, but those two files are
   absent from the local snapshot. Recreate the small feature icons in CSS. */
.features-card .feature-item:nth-child(1) .feature-icon,
.features-card .feature-item:nth-child(2) .feature-icon {
  display: none !important;
}

.features-card .feature-item:nth-child(1)::before,
.features-card .feature-item:nth-child(2)::before {
  box-sizing: border-box;
  display: flex;
  width: 28px;
  height: 28px;
  margin-bottom: 6px;
  align-items: center;
  justify-content: center;
  color: #c89a55;
}

/* Keep the identity page's three-step progress icons consistent with the
   compact line icons used by the personal-data and bank pages. */
.card-progress .cp-label { display: none !important; }
.card-progress .cp-dot {
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}
.card-progress .cp-step:nth-child(1) .cp-dot { background-image: url("../images/app/status1.png") !important; }
.card-progress .cp-step:nth-child(3) .cp-dot { background-image: url("../images/app/status2.png") !important; }
.card-progress .cp-step:nth-child(3).cp-done .cp-dot { background-image: url("../images/app/status3.png") !important; }
.card-progress .cp-step:nth-child(5) .cp-dot { background-image: url("../images/app/status4.png") !important; }
.card-progress .cp-step:nth-child(5).cp-done .cp-dot { background-image: url("../images/app/status5.png") !important; }
.card-progress .cp-line { height: 2px !important; margin: 0 16px !important; background: #c9cdd5 !important; }
.card-progress .cp-line-done { background: #d7ab55 !important; }

/* Keep shared verification SVGs visible inside uni-image on H5. */
uni-image.showStatus,
.showStatus {
  display: block !important;
  width: 51px !important;
  height: 51px !important;
  min-width: 51px !important;
  flex: 0 0 51px !important;
  overflow: visible !important;
}
uni-image.showStatus > div,
uni-image.showStatus img,
.showStatus > div,
.showStatus img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  object-fit: contain !important;
}

/* Older verification pages can render an empty uni-image src. Draw the
   three progress glyphs on the containers themselves as a reliable fallback. */
.showPosition .showStatus {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 24px 24px !important;
}
.showPosition .showStatus > div,
.showPosition .showStatus img {
  opacity: 0 !important;
}
.showFirst .showStatus {
  background-image: url("../images/app/status0.png") !important;
}
.showFirst .showPosition:has(.showLineMiddleGold) .showStatus {
  background-image: url("../images/app/status1.png") !important;
}
.login-header .col3:nth-child(2) .showStatus {
  background-image: url("../images/app/status2.png") !important;
}
.login-header .col3:nth-child(2) .showPosition:has(.showLineMiddleGold) .showStatus {
  background-image: url("../images/app/status3.png") !important;
}
.login-header .col3:nth-child(3) .showStatus {
  background-image: url("../images/app/status4.png") !important;
}

.features-card .feature-item:nth-child(1)::before {
  content: "◷";
  font-size: 30px;
  line-height: 28px;
}

.features-card .feature-item:nth-child(2)::before {
  content: "➤";
  font-size: 30px;
  line-height: 28px;
  transform: rotate(-35deg);
}