.subdomain-control {
  display: flex;
  align-items: stretch;
  direction: ltr;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d8ddea;
  border-radius: 12px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.subdomain-control:focus-within {
  border-color: #7047b8;
  box-shadow: 0 0 0 3px rgba(112, 71, 184, .12);
}

.subdomain-control.is-invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, .1);
}

.subdomain-control.is-valid { border-color: #119c72; }

.subdomain-control input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  direction: ltr;
  text-align: left;
}

.subdomain-suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-inline-start: 1px solid #d8ddea;
  background: #f6f3fb;
  color: #573691;
  font: 700 .92rem/1.2 Inter, Arial, sans-serif;
  white-space: nowrap;
  user-select: none;
}

.subdomain-status {
  display: block;
  min-height: 1.25em;
  color: #73809a;
  font-size: .82rem;
}

.subdomain-status.is-invalid { color: #c92b3b; }
.subdomain-status.is-valid { color: #087c5a; }

@media (max-width: 560px) {
  .subdomain-suffix { padding-inline: 10px; font-size: .82rem; }
}