.crm-form {
  align-content: start;
}

.crm-form .iti {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
}

.crm-form .iti__tel-input,
.crm-form .iti input[type="tel"] {
  width: 100%;
  padding-left: 52px !important;
  padding-right: 12px;
}

.crm-form .iti__country-list {
  max-width: calc(100vw - 32px);
  max-height: min(210px, calc(100svh - 250px));
  overflow-x: hidden;
  box-sizing: border-box;
  border-color: #cfc7bc;
  border-radius: 0;
  box-shadow: 0 12px 30px rgba(35, 30, 25, .14);
}

.crm-form .iti__country {
  min-height: 36px;
  padding: 7px 10px;
  white-space: normal;
}

.crm-form .iti__country-name {
  overflow-wrap: anywhere;
}

.crm-form .form-field {
  display: grid;
  gap: 7px;
  color: #504943;
}

.crm-form .check span {
  line-height: 1.45;
}

.crm-form .check input {
  align-self: flex-start;
  margin: 2px 0 0;
}

.crm-form .check input.error,
.crm-form .check input.is-invalid {
  outline: 1px solid #9f3f35;
  outline-offset: 1px;
}

.crm-form .check a {
  color: #806945;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.crm-form input.is-invalid {
  border-color: #9f3f35;
}

.crm-form input.is-valid {
  border-color: #9b927f;
}

.crm-form .crm-submit {
  grid-column: 1 / -1;
  width: 100%;
  height: 45px;
  margin-top: 8px;
  border: 0;
  padding: 0 24px;
  border-radius: 0;
  background: var(--sand);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  text-align: center;
}

.crm-form .crm-submit:disabled {
  cursor: wait;
  opacity: .65;
}

.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: grid;
  place-items: center;
  padding: 32px;
  background: rgba(17, 15, 13, .62);
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s ease, visibility .24s ease;
}

.legal-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.legal-modal-dialog {
  position: relative;
  width: min(820px, 100%);
  max-height: calc(100svh - 64px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.legal-modal-close {
  position: sticky;
  top: 0;
  z-index: 1;
  float: right;
  width: 46px;
  height: 46px;
  margin: 0;
  border: 0;
  background: #fff;
  color: #171513;
  cursor: pointer;
  font: 300 28px/1 Inter, Arial, sans-serif;
}

.legal-modal-content {
  padding: 54px 64px 64px;
  color: #39342f;
  font-size: 14px;
  line-height: 1.7;
}

.legal-modal-content h1,
.legal-modal-content h2 {
  margin: 0 0 24px;
  color: #171513;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

.legal-modal-content p,
.legal-modal-content ul,
.legal-modal-content table {
  margin: 0 0 18px;
}

.legal-modal-content table {
  width: 100%;
  border-collapse: collapse;
}

.legal-modal-content th,
.legal-modal-content td {
  border: 1px solid #ded7ce;
  padding: 8px;
  text-align: left;
  vertical-align: top;
}

@media (max-width: 560px) {
  .crm-form-heading {
    font-size: 22px;
  }

  .legal-modal {
    padding: 14px;
  }

  .legal-modal-dialog {
    max-height: calc(100svh - 28px);
  }

  .legal-modal-content {
    padding: 46px 22px 30px;
  }

  .legal-modal-content table {
    display: block;
    overflow-x: auto;
  }
}

    .lead-overlay{
      position: fixed;
      inset: 0;
      z-index: 6000;
      display: grid;
      place-items: center;
      padding: 28px;
      background: rgba(10,9,8,.58);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      overscroll-behavior: contain;
      transition: opacity .25s ease, visibility .25s ease}

    .lead-overlay.is-open{
      opacity: 1;
      visibility: visible;
      pointer-events: auto}

    .lead-overlay .lead-modal{
      width: min(520px, 100%);
      max-height: calc(100svh - 56px);
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      touch-action: pan-y;
      scrollbar-gutter: stable both-edges;
      background: #fff;
      padding: 38px 40px;
      position: relative;
      box-shadow: 0 30px 100px rgba(0,0,0,.22)}

    .lead-overlay h2{
      margin: 0 0 26px;
      padding-right: 30px}

    .lead-close{
      position: absolute;
      right: 20px;
      top: 18px;
      width: 32px;
      height: 32px;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer}

    .lead-form{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      width: 100%;
      min-width: 0}

    .lead-form > *{
      min-width: 0}

    .lead-form label{
      display: grid;
      gap: 7px;
      color: #504943}

    .lead-form input{
      width: 100%;
      max-width: 100%;
      height: 39px;
      border: 1px solid #cfc7bc;
      padding: 10px 12px}

    .crm-popup-form .iti{
      width: 100%;
      max-width: 100%}

    .crm-popup-form .check input{
      flex: 0 0 14px;
      width: 14px;
      height: 14px;
      margin-top: 2px;
      padding: 0}

    .crm-popup-form .check span{
      min-width: 0}

    .crm-popup-form .form-error{
      grid-column: 1 / -1}

    .crm-form input.error,
    .crm-form input.is-invalid,
    .crm-form input[aria-invalid="true"]{
      border-color: #b42318 !important;
      box-shadow: inset 0 0 0 1px #b42318;
      color: #8e3028;
      outline: 1px solid #b42318 !important;
      outline-offset: 0}

    .crm-form input.error::placeholder,
    .crm-form input.is-invalid::placeholder,
    .crm-form input[aria-invalid="true"]::placeholder{
      color: #b42318;
      opacity: 1}

    .crm-form .check:has(input.error) span,
    .crm-form .check:has(input.is-invalid) span,
    .crm-form .check:has(input[aria-invalid="true"]) span{
      color: #9f3f35}

    .lead-form .full,
.lead-form .check,
.lead-status,
.lead-form .btn{
      grid-column: 1 / -1}

    .lead-form .check{
      display: flex;
      gap: 10px;
      align-items: flex-start}

    .lead-form .btn{
      width: 100%;
      max-width: 100%;
      height: 38px;
      border: 0;
      background: #9d845e;
      color: #fff;
      text-transform: uppercase;
      cursor: pointer}

    .lead-status{
      margin: 0;
      color: #8b7453;
      text-transform: uppercase}


:root{--sand:#a78c62}
.lead-overlay{backdrop-filter:none}
.lead-overlay .lead-modal{max-width:100%;border-radius:0}
.lead-overlay h2{font-size:clamp(28px,1.667vw,32px);font-weight:400;line-height:1.2;letter-spacing:0}
.lead-overlay .lead-form label,.lead-overlay .lead-form input,.lead-overlay .lead-form .check span{font-size:clamp(11px,.63vw,12px);line-height:1.45}
.lead-overlay .lead-form input:not([type=checkbox]){height:39px;padding:10px 12px;background:#fff;border-radius:0}
.lead-overlay .lead-form input.crm-submit{height:38px;padding:0 24px;border:0;background:#9d845e;color:#fff;margin-top:8px;letter-spacing:0}
.lead-overlay .lead-form .check input{width:14px;height:14px;flex:0 0 14px;margin:2px 0 0;padding:0}
.lead-overlay .form-note{margin:4px 0 0;text-align:center}
.lead-overlay .form-note:empty{display:none}
.lead-overlay .form-note:not(:empty){display:block}
.lead-overlay .iti__country-list{max-width:calc(100vw - 32px);font-size:clamp(11px,.63vw,12px)}
@media(max-width:1100px){.lead-overlay{padding:18px}.lead-overlay .lead-modal{padding:32px 24px}.lead-overlay .lead-form{grid-template-columns:1fr}.lead-overlay .lead-form label,.lead-overlay .lead-form input{font-size:11px}}
