/* Phase 1 hero icon integration: use the approved Repmation icon system. */
body.brand-v5 .builder .business-field::before{
  content:"";
  position:absolute;
  z-index:2;
  left:16px;
  top:50%;
  width:20px;
  height:20px;
  border:0;
  border-radius:0;
  background:#655D56;
  box-shadow:none;
  transform:translateY(-50%);
  -webkit-mask:url("/assets/icons/icon-business.svg") center/contain no-repeat;
  mask:url("/assets/icons/icon-business.svg") center/contain no-repeat;
  pointer-events:none;
}

body.brand-v5 .builder .business-field::after{
  content:none;
  display:none;
}

body.brand-v5 #simulateScan::before{
  content:"";
  display:block;
  width:24px;
  height:24px;
  flex:0 0 24px;
  border:0;
  border-radius:0;
  background:#F54703;
  box-shadow:none;
  -webkit-mask:url("/assets/icons/icon-play.svg") center/contain no-repeat;
  mask:url("/assets/icons/icon-play.svg") center/contain no-repeat;
}

/* Make the entire brand-color field the native, tappable color swatch. */
body.brand-v5 .builder .color-control{
  position:relative;
  display:block;
  min-height:52px;
  padding:0;
  overflow:hidden;
  border:1px solid #514941;
  background:#171513;
}

body.brand-v5 .builder .color-control input[type="color"]{
  display:block;
  width:100%;
  min-height:52px;
  height:52px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}

body.brand-v5 .builder .color-control input[type="color"]::-webkit-color-swatch-wrapper{
  padding:0;
}

body.brand-v5 .builder .color-control input[type="color"]::-webkit-color-swatch{
  border:0;
  border-radius:0;
}

body.brand-v5 .builder .color-control input[type="color"]::-moz-color-swatch{
  border:0;
  border-radius:0;
}

body.brand-v5 .builder .color-control b{
  position:absolute;
  top:50%;
  right:10px;
  z-index:1;
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(23,21,19,.78);
  color:#FFFFFF;
  transform:translateY(-50%);
  pointer-events:none;
}