/* =====================================================================
   Site-wide updates
   - hides the (unused) social media blocks in the footer and menus
   - footer contact row (email / phone / office)
   - small typography helpers for the contact widgets
   ===================================================================== */

.tf-hide {
  display: none !important;
}

/* ---------------------------------------------------------------------
   Footer contact row.
   Uses the same global typography tokens as the rest of the footer
   (Inter 12px), so it sits in the existing design instead of fighting it.
   --------------------------------------------------------------------- */
.tf-footer-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 22px 64px;
  width: 100%;
  padding: 30px 20px 28px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-family: var(--e-global-typography-text_4-font-family), Inter, sans-serif;
  font-size: var(--e-global-typography-text_4-font-size, 12px);
  font-weight: var(--e-global-typography-text_4-font-weight, 400);
  line-height: 1.5;
  color: #000;
  text-align: center;
}

.tf-footer-contact .tf-fc-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
}

.tf-footer-contact .tf-fc-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.5;
}

.tf-footer-contact a,
.tf-footer-contact .tf-fc-item > span:not(.tf-fc-label) {
  color: #000;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.tf-footer-contact a {
  transition: color 0.2s ease;
}

.tf-footer-contact a:hover {
  color: var(--e-global-color-accent_1, #ef233c);
  text-decoration: none;
}

@media (max-width: 767px) {
  .tf-footer-contact {
    gap: 18px 32px;
    padding: 24px 16px 22px;
  }
}

/* The footer's right-hand container holds two links (privacy + terms).
   Elementor stacks container children by default, so force them onto one line. */
.elementor-52 .elementor-element-d11bd26 > .e-con-inner {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------------
   Inline form feedback (the forms post in the background, so the result
   is reported here instead of navigating to the form provider's page)
   --------------------------------------------------------------------- */
.tf-form-message {
  display: none;
  margin-top: 16px;
  padding: 14px 16px;
  font-family: Inter, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.tf-form-message[data-state="ok"] {
  border-color: rgba(255, 255, 255, 0.35);
}

.tf-form-message[data-state="warn"] {
  border-color: #ef233c;
  color: #fff;
}

.tf-form-message[data-state="error"] {
  border-color: #ef233c;
  background: rgba(239, 35, 60, 0.14);
  color: #fff;
}

form.elementor-form button[type="submit"][aria-busy="true"] {
  opacity: 0.6;
  cursor: wait;
}

/* phone + address helpers still used by the header contact popup */
.elementor-element-tfphone .elementor-heading-title,
.elementor-element-tfaddress .elementor-heading-title {
  line-height: 1.5;
}

.elementor-element-tfaddress .elementor-heading-title {
  font-size: 0.82em;
  opacity: 0.8;
  text-transform: none;
}

/* ---------------------------------------------------------------------
   Spam honeypot.

   This is a real text input, so bots fill it in and the server rejects the
   submission. It must be invisible to people but not `display:none`, which
   some bots detect - so it is kept in the layout, sized to nothing and
   pushed off screen.
   --------------------------------------------------------------------- */
form.elementor-form .tf-honeypot {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   Consent checkboxes (SMS opt-in + Privacy/Terms acceptance).
   The SMS box is optional and must never be pre-checked; the Privacy box
   is required and the browser blocks the submit on its own.

   The `form.elementor-form` prefix is deliberate: the theme styles every
   input via `.elementor-kit-6 input:not([type=button]):not([type=submit])`,
   which outranks a plain two-class selector and was giving these boxes a
   10px pill radius plus input padding. Matching it here resets them to a
   normal, alignment-friendly square.
   --------------------------------------------------------------------- */
.tf-consent-field {
  margin-bottom: 14px;
}

form.elementor-form .tf-consent-field .elementor-field-subgroup,
form.elementor-form .tf-consent-field .elementor-field-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

form.elementor-form .tf-consent-field input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 3px 0 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 3px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

form.elementor-form .tf-consent-field input[type="checkbox"]:hover {
  border-color: rgba(255, 255, 255, 0.6);
}

form.elementor-form .tf-consent-field input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--e-global-color-accent_1, #ef233c);
  outline-offset: 2px;
}

form.elementor-form .tf-consent-field input[type="checkbox"]:checked {
  background: var(--e-global-color-accent_1, #ef233c);
  border-color: var(--e-global-color-accent_1, #ef233c);
}

form.elementor-form .tf-consent-field input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  width: 4px;
  height: 8px;
  margin: 1px 0 0 5px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

form.elementor-form .tf-consent-field label {
  font-family: var(--e-global-typography-text_4-font-family), Inter, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  /* the forms sit on the dark #212529 band, but the theme makes them
     inherit #333 - so state the colour here instead of inheriting */
  color: #fff;
  opacity: 0.72;
  cursor: pointer;
  text-transform: none;
}

form.elementor-form .tf-consent-field input[type="checkbox"]:checked + label {
  opacity: 0.9;
}

form.elementor-form .tf-consent-field label a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

form.elementor-form .tf-consent-field label a:hover {
  color: var(--e-global-color-accent_1, #ef233c);
}

form.elementor-form .tf-consent-field label strong {
  font-weight: 600;
  opacity: 1;
}

form.elementor-form .tf-consent-required label {
  opacity: 0.82;
}

@media (max-width: 767px) {
  form.elementor-form .tf-consent-field label {
    font-size: 11.5px;
  }
}