:root{
  --brand-purple:#5B3192;

  --srch-w: 252px;
  --srch-h: 40px;
  --srch-radius: 100px;

  --srch-fs: 14px;
  --srch-lh: 16px;
  --srch-pad-l: 14px;       /* левый отступ текста */

  --srch-icon: 20px;
  --srch-icon-left: 218px;
  --srch-icon-top: 10px;
}

#rtd-search-form{
  position: relative;
  width: var(--srch-w);
  margin: 0 auto .5rem;
}

#rtd-search-form input[type="text"]{
  width: 100%;
  height: var(--srch-h);
  box-sizing: border-box;
  border-radius: var(--srch-radius);
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;

  font-size: var(--srch-fs);
  line-height: var(--srch-lh);
  color: #1f1f1f;
  letter-spacing: 0;
  padding:
    calc((var(--srch-h) - var(--srch-lh))/2)
    calc( (var(--srch-w) - var(--srch-icon-left)) - var(--srch-icon) + 4px )
    calc((var(--srch-h) - var(--srch-lh))/2)
    var(--srch-pad-l);

  outline: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

#rtd-search-form input::placeholder{ color:#9aa0a6; }

#rtd-search-form input[type="text"]:hover{
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
#rtd-search-form input[type="text"]:focus-visible{
  /*  */
}

#rtd-search-form::after{
  content:"";
  position:absolute;
  left: var(--srch-icon-left);
  top:  var(--srch-icon-top);
  width: var(--srch-icon);
  height: var(--srch-icon);
  pointer-events:none;
  transform: none;
  background: no-repeat center/100%
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235B3192'>\
  <path d='M15.5 14h-.8l-.3-.3A6.5 6.5 0 109.5 16a6.4 6.4 0 004.2-1.6l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 119.5 5a4.5 4.5 0 010 9z'/>\
</svg>");
}