/* UPVCLeads.com — for-fabricators compact/professional restyle (v19).
 * Pure additive CSS. Targets ONLY classes already on the page
 * (.field, .field__label, .input, .mullions--2, .field__phone,
 * .field__cc, .combobox, .btn--primary). No markup changes — the
 * form keeps every name="" and JS hook. Scoped under .ff-scope so it
 * can't bleed into other pages. */

.ff-scope {
  --ff-ink: #1a2233;
  --ff-muted: #6b7688;
  --ff-line: #e3e8f2;
  --ff-brand: #2563eb;
  --ff-bg: #f7f9fc;
  max-width: 760px;
  margin: 0 auto;
}

/* Card shell around the form for a contained, professional feel */
.ff-scope #firm-form {
  background: #fff;
  border: 1px solid var(--ff-line);
  border-radius: 16px;
  padding: 28px;
  margin-top: 20px !important;
  box-shadow: 0 1px 2px rgba(20, 34, 51, .04), 0 8px 24px rgba(20, 34, 51, .05);
}

/* Tighter, consistent vertical rhythm between fields */
.ff-scope .field { margin-bottom: 16px; }
.ff-scope .mullions--2 { margin-bottom: 0; }
.ff-scope .mullions--2 > .field { margin-bottom: 16px; }

/* Labels: smaller, calmer, uppercase micro-label look */
.ff-scope .field__label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ff-muted);
  margin-bottom: 6px;
  display: block;
}

/* Inputs: compact height, crisp focus */
.ff-scope .input {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ff-ink);
  background: #fff;
  border: 1px solid var(--ff-line);
  border-radius: 9px;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.ff-scope .input:focus {
  outline: none;
  border-color: var(--ff-brand);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.ff-scope .input::placeholder { color: #9aa4b5; }

/* Phone field: +91 prefix visually joined to the input */
.ff-scope .field__phone {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--ff-line);
  border-radius: 9px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.ff-scope .field__phone:focus-within {
  border-color: var(--ff-brand);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.ff-scope .field__cc {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ff-muted);
  background: var(--ff-bg);
  border-right: 1px solid var(--ff-line);
}
.ff-scope .field__phone .input {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Hints smaller & muted */
.ff-scope .field__hint {
  display: block;
  font-size: 12px;
  color: var(--ff-muted);
  margin-top: 5px;
}

/* File input: make it look intentional, not raw */
.ff-scope input[type="file"].input {
  padding: 8px 10px;
  font-size: 13.5px;
  background: var(--ff-bg);
  cursor: pointer;
}

/* Combobox: match the input system, compact tags */
.ff-scope .combobox {
  border: 1px solid var(--ff-line);
  border-radius: 9px;
  padding: 4px;
  transition: border-color .15s, box-shadow .15s;
}
.ff-scope .combobox:focus-within {
  border-color: var(--ff-brand);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.ff-scope .combobox .input {
  border: none !important;
  box-shadow: none !important;
  padding: 7px 8px;
}
.ff-scope .combobox__tags:not(:empty) { padding: 4px 4px 0; }

/* Submit: full-width, confident, not oversized */
.ff-scope .btn--primary.btn--block {
  width: 100%;
  padding: 13px 20px;
  font-size: 15.5px;
  font-weight: 700;
  border-radius: 10px;
  margin-top: 20px !important;
  background: var(--ff-brand);
  border: none;
  cursor: pointer;
  transition: filter .15s;
}
.ff-scope .btn--primary.btn--block:hover { filter: brightness(1.06); }
.ff-scope .btn--primary.btn--block:disabled { opacity: .6; cursor: default; }

/* CAPTCHA widget: sit it in a subtle tray so it reads as part of the form */
.ff-scope .captcha,
.ff-scope [data-captcha] {
  margin-top: 8px;
  padding: 12px;
  background: var(--ff-bg);
  border: 1px solid var(--ff-line);
  border-radius: 10px;
}

/* Tighten the two-column grid gap on desktop, stack cleanly on mobile */
@media (min-width: 640px) {
  .ff-scope .mullions--2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
  }
}
@media (max-width: 639px) {
  .ff-scope #firm-form { padding: 20px; }
  .ff-scope .mullions--2 { display: block; }
}