/* ==========================================================================
   HCD WPForms — "HCD WPForms Contact-US" (form ID 5464, shortcode [wpforms id="5464"])
   Scoped to #wpforms-5464 only, so other WPForms forms are not affected.
   Layout:  row 1  Name | Email | Phone      row 2  Nationality (full)
            row 3  Enquiry (full)            row 4  Service Required | CALL BACK button
   Palette: black borders/text, #907755 focus + button, white fields.
   Fully responsive: 6-column grid above 640px, single column below.
   ========================================================================== */

/* ---------- layout ----------
   Plain forms (no W#wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout))orms "Layout" fields): 6-column grid.
   Forms built with W#wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout))orms Layout fields keep the layout from the builder; only the control
   styling below applies. */
#wpforms-5464 .wpforms-form,
#wpforms-5464 .wpforms-form *,
#wpforms-5464 .wpforms-form *::before,
#wpforms-5464 .wpforms-form *::after{box-sizing:border-box;}

#wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout)){
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  column-gap:25px;
  row-gap:36px;
  align-items:start;
  margin:0;
  padding:0;
}
#wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout)) .wpforms-field-container{display:contents;}
#wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout)) > *{grid-column:1 / -1;}
#wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout)) .wpforms-field{grid-column:1 / -1;margin:0;padding:0;min-width:0;}
#wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout)) .wpforms-field-name,
#wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout)) .wpforms-field-email,
#wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout)) .wpforms-field-phone,
#wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout)) .wpforms-field-email + .wpforms-field:not(.wpforms-field-select):not(.wpforms-field-textarea){grid-column:span 2;}
/* the second dropdown (Service Required) shares its row with the submit button */
#wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout)) .wpforms-field-select ~ .wpforms-field-select{grid-column:span 4;}
#wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout)) .wpforms-submit-container{grid-column:span 2;margin:0;padding:0;}

/* every field is a block that fills its cell/column, never a shrunken box */
#wpforms-5464 .wpforms-field{width:auto;max-width:100%;}

/* neutralise decorative pseudo-elements / glyph icons injected by older custom CSS */
#wpforms-5464 .wpforms-field::before,
#wpforms-5464 .wpforms-field::after,
#wpforms-5464 .wpforms-field-row::before,
#wpforms-5464 .wpforms-field-row::after{content:none !important;display:none !important;}

/* ---------- labels: visually hidden (placeholders carry the text) ---------- */
#wpforms-5464 .wpforms-field-name .wpforms-field-label,
#wpforms-5464 .wpforms-field-email .wpforms-field-label,
#wpforms-5464 .wpforms-field-phone .wpforms-field-label,
#wpforms-5464 .wpforms-field-text .wpforms-field-label,
#wpforms-5464 .wpforms-field-email + .wpforms-field:not(.wpforms-field-select):not(.wpforms-field-textarea) .wpforms-field-label,
#wpforms-5464 .wpforms-field-select .wpforms-field-label,
#wpforms-5464 .wpforms-field-textarea .wpforms-field-label,
#wpforms-5464 .wpforms-field-sublabel{
  position:absolute !important;
  width:1px !important;height:1px !important;margin:-1px !important;padding:0 !important;overflow:hidden !important;
  clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important;
}

/* ---------- inputs / selects / textarea ---------- */
#wpforms-5464 .wpforms-field input[type="text"],
#wpforms-5464 .wpforms-field input[type="email"],
#wpforms-5464 .wpforms-field input[type="tel"],
#wpforms-5464 .wpforms-field input[type="number"],
#wpforms-5464 .wpforms-field input[type="url"],
#wpforms-5464 .wpforms-field select,
#wpforms-5464 .wpforms-field textarea,
#wpforms-5464 .wpforms-field .choices__inner{
  display:block;
  width:100%;
  max-width:100%;
  height:60px;
  min-height:60px;
  margin:0;
  padding:0 18px 0 52px;
  background-color:#fff;
  background-repeat:no-repeat;
  background-size:20px 20px;
  background-position:18px center;
  border:1px solid #000;
  border-radius:0;
  box-shadow:none;
  outline:0;
  font-family:"Crimson Text",Georgia,"Times New Roman",serif;
  font-size:1.125rem;
  font-weight:400;
  line-height:1.2;
  color:#000;
  transition:border-color .2s ease,box-shadow .2s ease;
}
#wpforms-5464 .wpforms-field textarea{
  height:130px;
  min-height:130px;
  padding:18px 18px 18px 52px;
  background-position:18px 20px;
  resize:vertical;
}
#wpforms-5464 .wpforms-field input::placeholder,
#wpforms-5464 .wpforms-field textarea::placeholder{color:#000;opacity:.75;}

#wpforms-5464 .wpforms-field input:hover,
#wpforms-5464 .wpforms-field select:hover,
#wpforms-5464 .wpforms-field textarea:hover,
#wpforms-5464 .wpforms-field input:focus,
#wpforms-5464 .wpforms-field select:focus,
#wpforms-5464 .wpforms-field textarea:focus,
#wpforms-5464 .wpforms-field .choices.is-focused .choices__inner,
#wpforms-5464 .wpforms-field .choices.is-open .choices__inner{
  border-color:#907755;
  box-shadow:0 0 0 1px #907755;
}

/* ---------- icons (inline SVG, black) ---------- */
#wpforms-5464 .wpforms-field-name input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
#wpforms-5464 .wpforms-field-email input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8'/%3E%3C/svg%3E");
}
#wpforms-5464 .wpforms-field-phone:not(:has(.iti)) input,
#wpforms-5464 .wpforms-field-email + .wpforms-field:not(.wpforms-field-select):not(.wpforms-field-textarea):not(:has(.iti)) input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
#wpforms-5464 .wpforms-field-textarea textarea{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

/* dropdowns: left icon + right chevron, native arrow removed */
#wpforms-5464 .wpforms-field-select select{
  -webkit-appearance:none;
  appearance:none;
  padding-right:48px;
  background-position:18px center,right 18px center;
  background-size:20px 20px,14px 14px;
  background-repeat:no-repeat,no-repeat;
  text-overflow:ellipsis;
  cursor:pointer;
  /* first dropdown (Nationality): map pin */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* second dropdown (Service Required): arrow */
#wpforms-5464 .wpforms-field-select ~ .wpforms-field-select select{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
#wpforms-5464 .wpforms-field select option{color:#000;background:#fff;}

/* phone with country flag/code (intl-tel-input, Country/Phone add-on): keep the library's own spacing */
#wpforms-5464 .wpforms-field .iti{display:block;width:100%;}
#wpforms-5464 .wpforms-field .iti input[type="tel"],
#wpforms-5464 .wpforms-field .iti input[type="text"]{background-image:none;}
#wpforms-5464 .wpforms-field .iti__country-list{z-index:50;max-width:90vw;border:1px solid #000;border-radius:0;font-family:"Raleway",Arial,sans-serif;}

/* modern (Choices.js) dropdown style, if enabled in the form */
#wpforms-5464 .wpforms-field .choices{margin:0;}
#wpforms-5464 .wpforms-field .choices__inner{display:flex;align-items:center;}
#wpforms-5464 .wpforms-field .choices__list--dropdown{border:1px solid #000;border-radius:0;z-index:50;}
#wpforms-5464 .wpforms-field .choices__list--dropdown .choices__item--selectable.is-highlighted{background:#907755;color:#fff;}

/* ---------- submit button ---------- */
#wpforms-5464 .wpforms-submit-container .wpforms-submit{
  display:block;
  width:100%;
  height:60px;
  min-height:60px;
  margin:0;
  padding:0 20px;
  background:#907755;
  border:0;
  border-radius:0;
  box-shadow:none;
  font-family:"Crimson Text",Georgia,"Times New Roman",serif;
  font-size:1.0625rem;
  font-weight:700;
  line-height:1;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff;
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}
#wpforms-5464 .wpforms-submit-container .wpforms-submit:hover,
#wpforms-5464 .wpforms-submit-container .wpforms-submit:focus,
#wpforms-5464 .wpforms-submit-container .wpforms-submit:active{background:#000;color:#fff;outline:0;}
#wpforms-5464 .wpforms-submit-container .wpforms-submit[disabled]{opacity:.6;cursor:wait;}
#wpforms-5464 .wpforms-submit-container .wpforms-submit:focus-visible{outline:2px solid #000;outline-offset:2px;}
#wpforms-5464 .wpforms-submit-spinner{display:none;}

/* ---------- validation + confirmation ---------- */
#wpforms-5464 label.wpforms-error,
#wpforms-5464 em.wpforms-error,
#wpforms-5464 .wpforms-error-container{
  display:block;
  margin:6px 0 0;
  font-family:"Raleway",Arial,sans-serif;
  font-size:.875rem;
  font-weight:700;
  line-height:1.3;
  color:#000;
}
#wpforms-5464 .wpforms-field input.wpforms-error,
#wpforms-5464 .wpforms-field select.wpforms-error,
#wpforms-5464 .wpforms-field textarea.wpforms-error{border-color:#000;box-shadow:0 0 0 1px #000;}
#wpforms-5464 .wpforms-confirmation-container-full,
#wpforms-5464 .wpforms-confirmation-container{
  margin:0;
  padding:22px 24px;
  background:#fff;
  border:1px solid #907755;
  border-radius:0;
  font-family:"Raleway",Arial,sans-serif;
  font-size:1rem;
  line-height:1.6;
  color:#000;
}
#wpforms-5464 .wpforms-recaptcha-container{padding:0;margin:0;}

/* ---------- responsive ---------- */
@media (max-width:640px){
  #wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout)){grid-template-columns:minmax(0,1fr);row-gap:20px;}
  #wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout)) > *,
  #wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout)) .wpforms-field,
  #wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout)) .wpforms-field-name,
  #wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout)) .wpforms-field-email,
    #wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout)) .wpforms-field-phone,
  #wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout)) .wpforms-field-email + .wpforms-field:not(.wpforms-field-select):not(.wpforms-field-textarea),
  #wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout)) .wpforms-field-select ~ .wpforms-field-select,
  #wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout)) .wpforms-submit-container{grid-column:1 / -1;}
  #wpforms-5464 .wpforms-field input[type="text"],
  #wpforms-5464 .wpforms-field input[type="email"],
  #wpforms-5464 .wpforms-field input[type="tel"],
  #wpforms-5464 .wpforms-field select,
  #wpforms-5464 .wpforms-field .choices__inner{height:56px;min-height:56px;font-size:1.0625rem;}
  #wpforms-5464 .wpforms-field textarea{height:120px;min-height:120px;font-size:1.0625rem;}
  #wpforms-5464 .wpforms-submit-container .wpforms-submit{height:56px;min-height:56px;}
}
/* narrow desktop / tablet: keep three fields per row but tighten gaps */
@media (min-width:641px) and (max-width:860px){
  #wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout)){column-gap:16px;row-gap:26px;}
  #wpforms-5464 .wpforms-field input[type="text"],
  #wpforms-5464 .wpforms-field input[type="email"],
  #wpforms-5464 .wpforms-field input[type="tel"],
  #wpforms-5464 .wpforms-field select{padding-left:46px;background-position:14px center,right 14px center;font-size:1rem;}
}
@media (prefers-reduced-motion:reduce){
  #wpforms-5464 .wpforms-field input,#wpforms-5464 .wpforms-field select,#wpforms-5464 .wpforms-field textarea,#wpforms-5464 .wpforms-submit{transition:none;}
}


/* ---------- WPForms Layout-field compatibility: stable 3-column row ----------
   Only activates when the form actually contains WPForms' one-third fields.
   The existing plain-form grid above and its mobile stacking are unchanged. */
@media (min-width: 641px) {
  #wpforms-5464 .wpforms-form .wpforms-field-container:has(> .wpforms-one-third) {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: flex-start;
    gap: 20px 0;
    width: 100%;
    min-width: 0;
  }

  #wpforms-5464 .wpforms-form .wpforms-field-container:has(> .wpforms-one-third) > .wpforms-one-third {
    flex: 0 0 32% !important;
    width: 32% !important;
    max-width: 32% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #wpforms-5464 .wpforms-form .wpforms-field-container:has(> .wpforms-one-third) > :not(.wpforms-one-third) {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  #wpforms-5464 .wpforms-form .wpforms-field-container:has(> .wpforms-one-third) {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 20px;
  }

  #wpforms-5464 .wpforms-form .wpforms-field-container:has(> .wpforms-one-third) > .wpforms-one-third,
  #wpforms-5464 .wpforms-form .wpforms-field-container:has(> .wpforms-one-third) > :not(.wpforms-one-third) {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ---------- FIRST ROW: Name | Email | Phone — always three across ----------
   Position based, so it works whatever WPForms field TYPE each one is (the phone can be a Phone,
   Text or country-code field): every field that comes BEFORE the first dropdown shares row one,
   and any field holding a tel input / country-code picker does too. */
@media (min-width:641px){
#wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout)) .wpforms-field:not(.wpforms-field-select):not(.wpforms-field-textarea):not(.wpforms-field-select ~ .wpforms-field):not(.wpforms-field-hidden),
#wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout)) .wpforms-field:has(input[type="tel"]),
#wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout)) .wpforms-field:has(.iti){
  grid-column:span 2 !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  float:none !important;
  clear:none !important;
  margin:0 !important;
}
}
@media (max-width:640px){
#wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout)) .wpforms-field:not(.wpforms-field-select):not(.wpforms-field-textarea):not(.wpforms-field-select ~ .wpforms-field):not(.wpforms-field-hidden),
#wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout)) .wpforms-field:has(input[type="tel"]),
#wpforms-5464 .wpforms-form:not(:has(.wpforms-field-layout)) .wpforms-field:has(.iti){
  grid-column:1 / -1 !important;
  float:none !important;
}
}