.rrs-search{
  --rrs-bg:#ffffff;
  --rrs-text:#172033;
  --rrs-muted:#68707d;
  --rrs-border:#e3e6ea;
  --rrs-button:#111111;
  --rrs-button-text:#ffffff;
  --rrs-accent:#9f0000;

  width:100%;
  max-width:900px;
  margin:1.25rem auto;
  color:var(--rrs-text);
}

.rrs-search__label{
  display:block;
  margin-bottom:.45rem;
  font-size:.95rem;
  line-height:1.3;
  font-weight:700;
  color:var(--rrs-text);
}

.rrs-search__field{
  position:relative;
  display:flex;
  width:100%;
  min-height:52px;
  overflow:hidden;
  border:1px solid var(--rrs-border);
  border-radius:10px;
  background:var(--rrs-bg);
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}

.rrs-search__field:focus-within{
  border-color:#b8bec7;
  box-shadow:0 0 0 3px rgba(0,0,0,.04);
}

.rrs-search__input{
  flex:1;
  min-width:0;
  width:100%;
  padding:.98rem 8.3rem .72rem 1rem;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  color:var(--rrs-text) !important;
  font:inherit;
  line-height:1.3;
}

.rrs-search__input::placeholder{
  color:#8a9099;
  opacity:1;
}

.rrs-search__button{
  position:absolute;
  top:5px;
  right:5px;
  bottom:5px;
  width:auto;
  min-width:7.35rem;
  padding:0 1rem;
  border:0;
  border-radius:7px;
  cursor:pointer;
  background:var(--rrs-button);
  color:var(--rrs-button-text) !important;
  font:inherit;
  font-weight:700;
  line-height:1;
}

.rrs-search__button:hover,
.rrs-search__button:focus{
  filter:brightness(1.08);
}

.rrs-search__meta{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  margin-top:.35rem;
  font-size:.75rem;
  color:var(--rrs-muted);
}

.rrs-search__status{
  margin-top:.8rem;
  font-size:.92rem;
  color:var(--rrs-text);
}

.rrs-search__results{
  display:grid;
  gap:.65rem;
  margin-top:.85rem;
}

.rrs-result-card{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.68rem;
  border:1px solid var(--rrs-border);
  border-radius:10px;
  background:var(--rrs-bg);
  color:var(--rrs-text) !important;
  text-decoration:none !important;
  box-shadow:0 1px 2px rgba(0,0,0,.025);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.rrs-result-card:hover,
.rrs-result-card:focus{
  transform:translateY(-1px);
  border-color:#cfd4da;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  color:var(--rrs-text) !important;
  text-decoration:none !important;
}

.rrs-result-card__media{
  width:76px;
  height:76px;
  flex:0 0 76px;
  overflow:hidden;
  border-radius:8px;
  background:#f3f4f6;
}

.rrs-result-card__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.rrs-result-card__body{
  min-width:0;
  color:var(--rrs-text);
}

.rrs-result-card__title{
  margin:0 0 .12rem !important;
  color:var(--rrs-text) !important;
  font-size:.98rem !important;
  line-height:1.25 !important;
  font-weight:700;
}

.rrs-result-card__category{
  margin-bottom:.18rem;
  color:var(--rrs-muted) !important;
  font-size:.76rem;
  line-height:1.25;
}

.rrs-result-card__description{
  display:-webkit-box;
  overflow:hidden;
  margin:.16rem 0 .28rem !important;
  color:#333b47 !important;
  font-size:.84rem !important;
  line-height:1.32 !important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.rrs-result-card__cta{
  color:var(--rrs-accent) !important;
  font-size:.82rem;
  line-height:1.2;
  font-weight:700;
}


.rrs-search__more{
  display:block;
  margin:.9rem auto 0;
  padding:.72rem 1.15rem;
  border:1px solid #111111;
  border-radius:8px;
  cursor:pointer;
  background:#111111;
  color:#ffffff !important;
  font:inherit;
  font-size:.9rem;
  font-weight:700;
  line-height:1.1;
}

.rrs-search__more:hover,
.rrs-search__more:focus{
  filter:brightness(1.08);
}

.rrs-search__more[hidden]{
  display:none !important;
}

@media(max-width:600px){
  .rrs-search{
    margin:1rem auto;
  }

  .rrs-search__field{
    min-height:50px;
  }

  .rrs-search__input{
    padding:.95rem 7.2rem .69rem 1rem;
  }

  .rrs-search__button{
    min-width:6.3rem;
    padding:0 .75rem;
    font-size:.9rem;
  }

  .rrs-result-card{
    align-items:flex-start;
    gap:.65rem;
  }

  .rrs-result-card__media{
    width:68px;
    height:68px;
    flex-basis:68px;
  }
}