.portable-contact-form {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.portable-contact-form label {
  display: grid;
  gap: 6px;
  color: #555;
  font-size: 14px;
}

.portable-contact-form input {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #d8d8d8;
  border-radius: 0;
  background: #fff;
  color: #222;
}

.portable-contact-form button {
  min-height: 46px;
  padding: 10px 20px;
  border: 0;
  background: #f6efc5;
  color: #444;
  cursor: pointer;
}

.portable-contact-form button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.portable-form-status {
  min-height: 22px;
  color: #555;
}

.portable-form-honey {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.portable-form-status.is-success {
  color: #176c37;
}

.portable-form-status.is-error {
  color: #a51d1d;
}

.portable-form-legal {
  margin: 0;
  color: #666;
  font-size: 12px;
  line-height: 1.45;
}

.portable-form-legal a {
  color: inherit;
  text-decoration: underline;
}

/* The original Bazium site opened these forms through Angular. The portable
   copy keeps the same markup and exposes only the requested modal. */
.page-section[modal-id] .modal-container {
  display: none !important;
}

.page-section[modal-id].portable-modal-open .modal-container {
  display: block !important;
}

body.portable-modal-is-open {
  overflow: hidden;
}

/* Keep every safety point on its own row on the home page. */
.page_section_5 .text-61__list {
  column-count: 1 !important;
  columns: 1 !important;
}

.page_section_5 .text-61-item__container {
  display: block !important;
  width: 100% !important;
  break-inside: avoid;
}

@media (max-width: 640px) {
  .page-section[modal-id] .modal-container {
    padding: 10px;
  }
}