/* Ontraport SmartForms placed as raw HTML (contact: #enquiry-form, invoice: #invoice-form).
   Restyles them to the site's design. The id prefix outranks Ontraport's generated CSS. */

:is(#enquiry-form,#invoice-form) .moonray-form{
  width:100%;max-width:none;border:0;padding:0;background:transparent;
}
:is(#enquiry-form,#invoice-form) form{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:16px}
/* Ontraport's clearfix pseudo-elements would otherwise take grid cells. */
:is(#enquiry-form,#invoice-form) form::before,
:is(#enquiry-form,#invoice-form) form::after{content:none;display:none}

:is(#enquiry-form,#invoice-form) .moonray-form-element-wrapper{padding:0 0 18px;min-width:0;grid-column:1 / -1}
/* Paired fields sit side by side; city / state / post code share a row. */
:is(#enquiry-form,#invoice-form) .moonray-form-element-wrapper:has(:is(
  [name="firstname"],[name="lastname"],[name="email"],[name="office_phone"],[name="company//name"],[name="country"]
)){grid-column:span 3}
#enquiry-form .moonray-form-element-wrapper:has([name="email"]){grid-column:1 / -1}
#invoice-form .moonray-form-element-wrapper:has(:is([name="city"],[name="state"],[name="zip"])){grid-column:span 2}

:is(#enquiry-form,#invoice-form) .moonray-form-label{
  width:auto;margin-bottom:8px;
  font-family:var(--font-body);font-size:.9rem;font-weight:600;color:var(--forest);
}
:is(#enquiry-form,#invoice-form) :is(.moonray-form-input-type-text,.moonray-form-input-type-email,.moonray-form-input-type-tel,.moonray-form-input-type-select,.moonray-form-input-type-textarea) .moonray-form-input{
  width:100%;min-height:48px;padding:12px 14px;
  border:1px solid rgba(60,90,72,.22);border-radius:var(--r-sm);
  background-color:var(--bone);
  font-family:var(--font-body);font-size:1rem;color:var(--ink);
  transition:border-color 250ms var(--ease-soft),background-color 250ms var(--ease-soft),box-shadow 250ms var(--ease-soft);
}
:is(#enquiry-form,#invoice-form) .moonray-form-input-type-select .moonray-form-input{
  appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%233C5A48' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
:is(#enquiry-form,#invoice-form) .moonray-form-input-type-textarea .moonray-form-input{min-height:160px;resize:vertical;line-height:1.55}
:is(#enquiry-form,#invoice-form) .moonray-form-element-wrapper .moonray-form-input:hover{border-color:rgba(60,90,72,.4)}
:is(#enquiry-form,#invoice-form) .moonray-form-element-wrapper .moonray-form-input:focus,
:is(#enquiry-form,#invoice-form) .moonray-form-element-wrapper .moonray-form-input.moonray-form-state-active{
  outline:none;border-color:var(--forest);background-color:var(--white);box-shadow:0 0 0 3px rgba(60,90,72,.14);
}

/* Checkbox (invoice: "Request a meeting to discuss purchase") */
:is(#enquiry-form,#invoice-form) .moonray-form-input-type-checkbox{
  display:flex;align-items:center;gap:12px;min-height:48px;margin-bottom:18px;padding:12px 16px;
  border:1px solid var(--hair);border-radius:var(--r-sm);background:var(--mist);
}
:is(#enquiry-form,#invoice-form) .moonray-form-input-type-checkbox .moonray-form-input{
  width:20px!important;height:20px;margin:0!important;flex:none;accent-color:var(--forest);cursor:pointer;
}
:is(#enquiry-form,#invoice-form) .moonray-form-input-type-checkbox .moonray-form-label{
  margin:0;font-weight:600;font-size:.96rem;cursor:pointer;
}

:is(#enquiry-form,#invoice-form) .moonray-form-input-type-submit .moonray-form-input{
  min-height:48px;padding:14px 28px;margin-top:4px;
  border:0;border-radius:var(--r-pill);background-color:var(--forest);color:var(--white);
  font-family:var(--font-body);font-size:.94rem;font-weight:600;cursor:pointer;
  transition:background-color 420ms var(--ease-press),transform 260ms var(--ease-press);
}
:is(#enquiry-form,#invoice-form) .moonray-form-input-type-submit .moonray-form-input:hover{background-color:var(--deep)}
:is(#enquiry-form,#invoice-form) .moonray-form-input-type-submit .moonray-form-input:active{transform:scale(.975)}
:is(#enquiry-form,#invoice-form) .moonray-form-input-type-submit .moonray-form-input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media (max-width:520px){
  :is(#enquiry-form,#invoice-form) form .moonray-form-element-wrapper{grid-column:1 / -1!important}
  :is(#enquiry-form,#invoice-form) .moonray-form-input-type-submit .moonray-form-input{width:100%!important}
}