/* =========================
   HubSpot form styling (beige, label-less)
   Wrapper: .form-area
   ========================= */

.form-area .hs-form {
  --field-bg: var(--beige);
  --field-text: #767676;
  --field-placeholder: #767676;
  --field-gap: 22px;
  --field-pad-x: 16px;
  --field-height: 46px;
  --radius: 0px;
}

/* layout */
.form-area .hs-form fieldset { max-width: none !important; }
.form-area .hs-form .hs-form-field { margin: 0 0 var(--field-gap) 0 !important; }

/* hide labels */
.form-area .hs-form label,
.form-area .hs-form .hs-form-field > label { display: none !important; }

/* errors */
.form-area .hs-form .hs-error-msgs {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.form-area .hs-form .hs-error-msgs label {
  display: block !important;
  font-size: 12px;
  color: red;
}

/* inputs/selects/textarea base */
.form-area .hs-form input[type="text"],
.form-area .hs-form input[type="email"],
.form-area .hs-form input[type="tel"],
.form-area .hs-form input[type="number"],
.form-area .hs-form input[type="url"],
.form-area .hs-form input[type="date"],
.form-area .hs-form select,
.form-area .hs-form textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--field-bg) !important;
  color: var(--field-text) !important;
  border: 0 !important;
  border-radius: var(--radius) !important;
  padding: 0 var(--field-pad-x) !important;
  height: var(--field-height) !important;
  line-height: var(--field-height) !important;
  box-shadow: none !important;
  outline: none !important;
}

.form-area .hs-form textarea {
  height: 140px !important;
  line-height: 1.4 !important;
  padding: 18px var(--field-pad-x) !important;
  resize: vertical;
}

/* placeholder */
.form-area .hs-form ::placeholder { color: var(--field-placeholder); opacity: 1; }

/* focus */
.form-area .hs-form input:focus,
.form-area .hs-form select:focus,
.form-area .hs-form textarea:focus {
  outline: 2px solid rgba(0,0,0,.15) !important;
  outline-offset: 2px;
}

/* =========================
   SELECT ARROWS (global)
   - draw arrow on the .input wrapper
   - but explicitly disable for the phone field (handled below)
   ========================= */

.form-area .hs-form .hs-form-field .input { position: relative; }

.form-area .hs-form select{
  background-image: none !important; /* ensure we control arrow */
  padding-right: 56px !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* global arrow (non-phone selects) */
.form-area .hs-form .hs-form-field:has(select) .input::after{
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-35%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--accent);
  pointer-events: none;
}

/* fallback if :has() isn't supported */
@supports not selector(:has(*)) {
  .form-area .hs-form .hs-fieldtype-select .input::after{
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-35%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #E35A2C;
    pointer-events: none;
  }
}

/* =========================
   PHONE FIELD (intl country select + tel input inline)
   - make select a fixed column
   - tel input fills remaining space
   - arrow anchored to select area (no "outside" weirdness)
   ========================= */

/* disable global arrow for phone field */
.form-area .hs-form .hs-fieldtype-phonenumber .input::after { content: none !important; }
.form-area .hs-form .hs-fieldtype-phonenumber:has(select) .input::after { content: none !important; }

/* layout: HubSpot markup -> .input > .hs-fieldtype-intl-phone > select + tel + hidden */
.form-area .hs-form .hs-fieldtype-phonenumber .hs-fieldtype-intl-phone{
  position: relative;
  display: flex;
  gap: 18px;
  align-items: stretch;
}

/* hide the hidden field so it never affects layout */
.form-area .hs-form .hs-fieldtype-phonenumber .hs-fieldtype-intl-phone > input[type="hidden"]{
  display: none !important;
}

/* fixed width country select */
.form-area .hs-form .hs-fieldtype-phonenumber .hs-fieldtype-intl-phone > select{
  flex: 0 0 300px;        /* tweak if needed */
  max-width: 45%;
  width: auto !important; /* let flex-basis win */
  padding-right: 56px !important;
}

/* phone number fills remaining space */
.form-area .hs-form .hs-fieldtype-phonenumber .hs-fieldtype-intl-phone > input[type="tel"],
.form-area .hs-form .hs-fieldtype-phonenumber .hs-fieldtype-intl-phone > input[type="text"]{
  flex: 1 1 auto;
  min-width: 0;
}

/* arrow for the country select (anchored to the select width) */
.form-area .hs-form .hs-fieldtype-phonenumber .hs-fieldtype-intl-phone::after{
  content: "";
  position: absolute;
  top: 50%;
  left: calc(300px - 18px); /* = select column width - right inset */
  transform: translateY(-35%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #E35A2C;
  pointer-events: none;
}

/* mobile: stack + arrow on right of select */
@media (max-width: 720px){
  .form-area .hs-form .hs-fieldtype-phonenumber .hs-fieldtype-intl-phone{
    flex-direction: column;
  }
  .form-area .hs-form .hs-fieldtype-phonenumber .hs-fieldtype-intl-phone > select{
    flex: 0 0 auto;
    max-width: none;
  }
  .form-area .hs-form .hs-fieldtype-phonenumber .hs-fieldtype-intl-phone::after{
    left: auto;
    right: 18px;
    transform: translateY(-35%);
  }
}

/* =========================================
   FIX: phone arrow responsive (put arrow on the SELECT, not wrapper)
   ========================================= */

/* kill the wrapper arrow for phone completely */
.form-area .hs-form .hs-fieldtype-phonenumber .hs-fieldtype-intl-phone::after{
  content: none !important;
}

/* make sure select can show its own arrow */
.form-area .hs-form .hs-fieldtype-phonenumber .hs-fieldtype-intl-phone > select{
  background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZjUyMTUiIHZpZXdCb3g9IjAgMCAxMCA2Ij48cGF0aCBkPSJNNC43NjMgNiAwIDBoOS41MjZ6Ii8+PC9zdmc+") !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
  background-size: 12px 8px !important;
  padding-right: 56px !important; /* space for arrow */
}

/* keep your layout: fixed-ish select, tel fills rest */
.form-area .hs-form .hs-fieldtype-phonenumber .hs-fieldtype-intl-phone{
  display: flex;
  gap: 18px;
  align-items: stretch;
}

.form-area .hs-form .hs-fieldtype-phonenumber .hs-fieldtype-intl-phone > select{
  flex: 0 0 300px;
  max-width: 45%;
  width: auto !important;
}

.form-area .hs-form .hs-fieldtype-phonenumber .hs-fieldtype-intl-phone > input[type="tel"],
.form-area .hs-form .hs-fieldtype-phonenumber .hs-fieldtype-intl-phone > input[type="text"]{
  flex: 1 1 auto;
  min-width: 0;
}

/* stack on mobile */
@media (max-width: 720px){
  .form-area .hs-form .hs-fieldtype-phonenumber .hs-fieldtype-intl-phone{
    flex-direction: column;
  }
  .form-area .hs-form .hs-fieldtype-phonenumber .hs-fieldtype-intl-phone > select{
    flex: 0 0 auto;
    max-width: none;
  }
}


/* =========================
   checkboxes
   ========================= */

.form-area .hs-form .hs-form-booleancheckbox,
.form-area .hs-form .hs-form-checkbox { margin: 0 0 14px 0 !important; }

.form-area .hs-form .hs-form-booleancheckbox label,
.form-area .hs-form .hs-form-checkbox label{
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--field-text);
}

.form-area .hs-form input[type="checkbox"]{
  width: 18px !important;
  height: 18px !important;
  margin: 2px 0 0 0 !important;
  accent-color: #000;
}

/* =========================
   submit button
   ========================= */

.form-area .hs-form .hs-submit { margin-top: 18px; }

.form-area .hs-form input[type="submit"],
.form-area .hs-form button[type="submit"]{
  background: #000 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  height: auto !important;
  line-height: 1 !important;
  padding: 16px 28px !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
}
.form-area .hs-form input[type="submit"]:hover,
.form-area .hs-form button[type="submit"]:hover{ filter: brightness(.92); }

/* =========================
   2-column rows (HubSpot fieldset.form-columns-2)
   ========================= */

.form-area .hs-form fieldset.form-columns-2 { display: flex !important; gap: 24px; }
.form-area .hs-form fieldset.form-columns-2 .hs-form-field { width: calc(50% - 12px) !important; }
.form-area .hs-form fieldset.form-columns-2 .input { margin-right: 0 !important; }

@media (max-width: 720px) {
  .form-area .hs-form fieldset.form-columns-2 { display: block !important; }
  .form-area .hs-form fieldset.form-columns-2 .hs-form-field { width: 100% !important; }
}
  
.form-area .inputs-list {
  list-style: none;
  padding-left: 0px;
}

/* =========================================
   MOBILE OVERFLOW FIXES (HubSpot)
   ========================================= */

.form-area,
.form-area .hs-form,
.form-area .hs-form fieldset,
.form-area .hs-form .hs-form-field,
.form-area .hs-form .input {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Sometimes HubSpot gives fieldsets negative margins / fixed widths */
.form-area .hs-form fieldset{
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Make any control able to shrink inside flex parents */
.form-area .hs-form input,
.form-area .hs-form select,
.form-area .hs-form textarea{
  min-width: 0 !important;
}

/* The phone composite often causes horizontal scroll unless forced */
.form-area .hs-form .hs-fieldtype-phonenumber .hs-fieldtype-intl-phone{
  width: 100% !important;
}
.form-area .hs-form .hs-fieldtype-phonenumber .hs-fieldtype-intl-phone > select,
.form-area .hs-form .hs-fieldtype-phonenumber .hs-fieldtype-intl-phone > input[type="tel"]{
  width: 100% !important;
}

/* On mobile: stack all 2-col fieldsets and remove calc widths */
@media (max-width: 720px){
  .form-area .hs-form fieldset.form-columns-2{
    display: block !important;
  }
  .form-area .hs-form fieldset.form-columns-2 .hs-form-field{
    width: 100% !important;
  }

  /* if any padding is making it look like it "bumps out" */
  .form-area .hs-form{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* =========================================
   Checkbox: stop the box shrinking on mobile
   ========================================= */

.form-area .hs-form .hs-form-booleancheckbox label,
.form-area .hs-form .hs-form-checkbox label{
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
}

/* the checkbox */
.form-area .hs-form .hs-form-booleancheckbox label > input[type="checkbox"],
.form-area .hs-form .hs-form-checkbox label > input[type="checkbox"]{
  flex: 0 0 20px !important;   /* fixed width column */
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;  /* critical */
  margin: 2px 0 0 0 !important;
}

/* text wrap */
.form-area .hs-form .hs-form-booleancheckbox label > span,
.form-area .hs-form .hs-form-checkbox label > span{
  flex: 1 1 auto;
  min-width: 0;
}

/* checkbox text colour */
.form-area .hs-form .hs-form-booleancheckbox label > span,
.form-area .hs-form .hs-form-checkbox label > span{
  color: var(--foreground) !important;
}