/* ============================================================================
   InSync - shared service enquiry form
   Used by the form at the bottom of every service page and by the contact
   page router. Dark theme, pink accent, matches the rest of the site.
   ========================================================================== */

.ef-section {
  position: relative;
  background: #080808;
  padding: 90px clamp(20px, 5vw, 48px) 100px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.ef-glow {
  position: absolute;
  top: -120px;
  left: 50%;
  width: min(760px, 90vw);
  height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(233, 30, 140, 0.16), transparent 68%);
  pointer-events: none;
}
.ef-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}
.ef-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e91e8c;
  margin: 0 0 14px;
}
.ef-title {
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 14px;
}
.ef-title em {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: #e91e8c;
}
.ef-sub {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 38px;
  max-width: 560px;
}

/* ---- form shell ---- */
.ef-form {
  display: flex;
  flex-direction: column;
  gap: 32px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  padding: clamp(26px, 4vw, 44px);
}
/* .ef-group is a <fieldset> for choice questions and a <div> for the rest.
   The reset keeps both looking identical: no browser default frame, no
   default legend indent, so the form card is the only visible box. */
.ef-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.ef-group > label,
.ef-legend {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
  padding: 0;
  float: left;      /* legend sizes to its text instead of the whole row */
  width: 100%;
}
.ef-legend + * { clear: both; }
.ef-req { color: #e91e8c; margin-left: 2px; }
.ef-hint {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  margin: -2px 0 2px;
}

/* ---- text inputs, selects, textareas ---- */
.ef-form input[type="text"],
.ef-form input[type="email"],
.ef-form input[type="tel"],
.ef-form input[type="url"],
.ef-form select,
.ef-form textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 15px;
  color: #fff;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.ef-form textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.ef-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23ffffff' stroke-opacity='0.5' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
}
.ef-form select option { background: #141414; color: #fff; }
.ef-form input::placeholder,
.ef-form textarea::placeholder { color: rgba(255, 255, 255, 0.33); }
.ef-form input:focus,
.ef-form select:focus,
.ef-form textarea:focus {
  border-color: rgba(233, 30, 140, 0.6);
  background: rgba(255, 255, 255, 0.06);
}
.ef-form input:user-invalid,
.ef-form select:user-invalid,
.ef-form textarea:user-invalid { border-color: rgba(233, 30, 140, 0.55); }

/* ---- choice chips (radios and checkboxes) ---- */
.ef-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  border: 0;
  padding: 0;
  margin: 0;
}
.ef-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 17px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.ef-choice:hover { border-color: rgba(255, 255, 255, 0.26); color: #fff; }
.ef-choice input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.ef-choice-dot {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.ef-choice--multi .ef-choice-dot { border-radius: 5px; }
.ef-choice:has(input:checked) {
  border-color: #e91e8c;
  background: rgba(233, 30, 140, 0.12);
  color: #fff;
}
.ef-choice:has(input:checked) .ef-choice-dot {
  border-color: #e91e8c;
  background: #e91e8c;
  box-shadow: inset 0 0 0 3px #0c0c0c;
}
.ef-choice--multi:has(input:checked) .ef-choice-dot {
  box-shadow: inset 0 0 0 2px #0c0c0c;
}
.ef-choice input:focus-visible ~ .ef-choice-dot {
  outline: 2px solid rgba(233, 30, 140, 0.8);
  outline-offset: 2px;
}

/* ---- consent ---- */
.ef-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
}
.ef-consent input {
  width: 19px;
  height: 19px;
  margin-top: 1px;
  flex: none;
  accent-color: #e91e8c;
  cursor: pointer;
}
.ef-consent a { color: #e91e8c; text-decoration: underline; text-underline-offset: 3px; }

/* ---- submit ---- */
.ef-submit {
  background: #e91e8c;
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  padding: 17px 34px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  align-self: flex-start;
  box-shadow: 0 12px 40px rgba(233, 30, 140, 0.35);
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.ef-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 16px 50px rgba(233, 30, 140, 0.5);
}
.ef-submit:disabled { opacity: 0.65; cursor: default; transform: none; }

.ef-foot {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}
.ef-foot a { color: rgba(255, 255, 255, 0.66); }

/* honeypot - hidden from people, visible to bots */
.ef-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* conditional blocks, revealed by js */
.ef-group[hidden], .ef-block[hidden] { display: none !important; }
.ef-block { display: flex; flex-direction: column; gap: 26px; }

@media (max-width: 768px) {
  .ef-section { padding: 60px 20px 72px; }
  .ef-form { padding: 22px 18px 26px; gap: 22px; border-radius: 16px; }
  .ef-sub { font-size: 15px; margin-bottom: 28px; }
  .ef-choice { padding: 11px 15px; font-size: 14px; }
  .ef-submit { width: 100%; text-align: center; align-self: stretch; }
}