/* Developer-owned additions to the redesign stylesheet (public/css/redesign.css is the design,
   served as is). Styles for the components that the integration added to the redesign pages:
   HubSpot embeds, the recruitment form widgets, the footer newsletter block, the brochure dialog
   and the ops diagnostic report gate. Colours and radii follow the design tokens. */

/* HubSpot embeds (contact step 2, diagnostic gate, footer newsletter, brochure) */
.redesign .rd-hsform,
.redesign .brochure-dlg__form,
.redesign .nl .opago-hubspot-form {
  margin: 12px 0 0;
}
.redesign .hs-form fieldset {
  max-width: none;
}
.redesign .hs-form .hs-form-field label,
.redesign .hs-form .hs-form-field > label {
  font-size: 14px;
  font-weight: 600;
  color: #0b1f1c;
}
.redesign .hs-form .hs-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid #d7dbd9;
  border-radius: 10px;
  font: inherit;
  background: #fff;
}
.redesign .hs-form .hs-input[type='checkbox'],
.redesign .hs-form .hs-input[type='radio'] {
  width: auto;
}
.redesign .hs-form .hs-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background: #0b3629;
  color: #fff;
  font: 600 15px/1 inherit;
  cursor: pointer;
}
.redesign .hs-form .hs-error-msgs {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  color: #b42318;
  font-size: 13px;
}
.redesign .opago-form-pending {
  border: 1px dashed #c9ccc8;
  border-radius: 10px;
  padding: 14px 16px;
  background: #f7f8f7;
  font-size: 14px;
  color: #3b4a46;
}
.redesign .opago-form-pending__text {
  margin: 0;
}

/* Recruitment form widgets (file sections are built by src/scripts/housekeeping-form.ts) */
.redesign .rd-jobform .req {
  color: #b42318;
}
.redesign .rd-jobform .chips2.col {
  flex-direction: column;
  align-items: flex-start;
}
.redesign .rd-jobform .wu-sec {
  margin: 0 0 18px;
}
.redesign .rd-jobform .wu-title {
  font-size: 14px;
  font-weight: 600;
  color: #0b1f1c;
  margin: 0 0 8px;
}
.redesign .rd-jobform .wu-required::after {
  content: ' *';
  color: #b42318;
}
.redesign .rd-jobform .wu-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid #0b3629;
  border-radius: 999px;
  background: #fff;
  color: #0b3629;
  font: 600 14px/1 inherit;
  cursor: pointer;
}
.redesign .rd-jobform .wu-hint {
  font-size: 12px;
  color: #636b77;
  margin-top: 6px;
}
.redesign .rd-jobform .wu-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.redesign .rd-jobform .wu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid #e3e6e5;
  border-radius: 8px;
}
.redesign .rd-jobform .wu-thumb {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #eef0ef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #636b77;
  flex-shrink: 0;
}
.redesign .rd-jobform .wu-name {
  flex: 1 1 auto;
  font-size: 14px;
  word-break: break-all;
}
.redesign .rd-jobform .wu-del {
  background: transparent;
  border: 0;
  padding: 6px;
  cursor: pointer;
}
.redesign .rd-jobform .wu-error,
.redesign .rd-jobform .inline-error {
  color: #b42318;
  font-size: 13px;
  margin: 6px 0;
}
.redesign .rd-jobform .g-recaptcha {
  margin: 12px 0;
}
.redesign .rd-jobform .wu-submit[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.redesign .rd-jobform .wu-loading {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.redesign .rd-jobform .wu-spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid #dcdcdc;
  border-top-color: #0b3629;
  animation: rd-spin 0.8s linear infinite;
}
@keyframes rd-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Footer newsletter column */
.redesign footer .nl p {
  margin: 6px 0 0;
  font-size: 14px;
}
.redesign footer .nl .hs-form .hs-input {
  padding: 10px 12px;
}
.redesign footer .nl .hs-form .hs-button {
  padding: 10px 16px;
}

/* Brochure dialog */
.redesign .brochure-dlg {
  width: min(520px, calc(100vw - 32px));
  border: 0;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
}
.redesign .brochure-dlg::backdrop {
  background: rgba(11, 31, 28, 0.55);
}
.redesign .brochure-dlg h3 {
  margin: 0 32px 8px 0;
}
.redesign .brochure-dlg p {
  margin: 0;
  color: #636b77;
  font-size: 15px;
}
.redesign .brochure-dlg__close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: #636b77;
}
.redesign .brochure-dlg__done {
  margin-top: 16px;
}

/* Ops diagnostic report gate (revealed when the iframe reaches the result step) */
.redesign .calc-lead {
  margin: 16px 0 0;
  padding: 20px;
  border: 1px solid #e3e6e5;
  border-radius: 14px;
  background: #fff;
}
.redesign .calc-lead .gate-title {
  margin: 0 0 4px;
  font-weight: 700;
}
.redesign .calc-lead .gate-sub {
  margin: 0;
  color: #636b77;
  font-size: 14px;
}