/* ============================================================
   GUDJOB — Deftform Contact theme
   Paste into: Deftform dashboard → Edit form → Appearance → Custom CSS
   Applies to BOTH the Vietnamese (d78602ea) and English (d94fd464) forms.
   Tokens: Manrope · white surface · ink #050505 · accent #e3185c · 8px radius
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

/* --- Base typography & surface --- */
.cs_body,
.cs_bodycolor {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif !important;
  background: #ffffff !important;
  color: #050505 !important;
}

.cs_formbg {
  background: #ffffff !important;
  border-radius: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
}
/* Kill the iframe's internal bottom slack: Deftform's inner wrapper has
   pb-6/md:pb-8 (24/32px) — it inflates the auto-height and leaves empty
   space below the button. */
.cs_formbg > div {
  padding-bottom: 0 !important;
}

/* --- Field labels --- */
label {
  font-family: 'Manrope', system-ui, sans-serif !important;
  color: #050505 !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
}

/* --- Section titles (h2) & question labels: Manrope BOLD -----
   Everything is Manrope; questions/titles are bold. */
.formfield h2 {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
.formfield > label.block {
  font-weight: 700 !important;
  font-size: 1.125rem !important;
}

/* --- Inputs / textarea / select --- */
.field,
.cs_field.field {
  border-radius: 0.5rem !important;
  border: 1px solid #e5e5e5 !important;
  padding: 0.75rem 0.875rem !important;
  background: #ffffff !important;
  color: #050505 !important;
  font-size: 1rem !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.field::placeholder { color: #9ca3af !important; }
/* Remove the intl-tel vertical divider between the flag/country button and
   the input — it renders as a stray "blinking caret" line behind the flag. */
.iti__selected-country-primary {
  border-right: none !important;
}
/* CRITICAL: our .field padding shorthand (!important) overrides the iti's
   JS-set inline padding-left (92px) that clears the country button — so
   typed digits render UNDER/behind the flag. Restore a left padding that
   clears the ~86px button (6rem = 96px). Must exceed `.cs_field.field`
   (0,2,0) in specificity. */
input.field.cs_field.iti__tel-input {
  padding-left: 6rem !important;
}

/* Deftform renders empty hidden fields (hidden inputs for submission
   metadata) as ~28px-tall formfields — they stack into a large empty gap
   above the submit button (measured ~210px on the last form page). Hide
   any formfield that contains only hidden inputs. */
.formfield:has(input[type="hidden"]):not(:has(.field:not([type="hidden"]))) {
  display: none !important;
}
.field:hover { border-color: #cbd5e1 !important; }
.field:focus,
.field:focus-visible {
  border-color: #050505 !important;
  box-shadow: 0 0 0 3px rgba(5, 5, 5, 0.08) !important;
  outline: none !important;
}

/* --- Select dropdown arrow tidy ---
   NB: must be at least as specific as `.cs_field.field` (0,2,0) or it loses
   the cascade; `select.field.cs_field` (0,2,1) wins. Base64 SVG avoids any
   quote-escaping issues in Deftform's CSS pipeline. */
select.field.cs_field {
  appearance: none !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNicgaGVpZ2h0PScxNicgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPSdub25lJyBzdHJva2U9JyMwNTA1MDUnIHN0cm9rZS13aWR0aD0nMS44JyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnPjxwb2x5bGluZSBwb2ludHM9JzYgOSAxMiAxNSAxOCA5Jy8+PC9zdmc+") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 1rem !important;
  padding-right: 2.5rem !important;
}

/* Dropdown option list (native popup — Chromium respects bg/color/font). */
select.field.cs_field option {
  background-color: #ffffff !important;
  color: #050505 !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 1rem !important;
}
select.field.cs_field option:checked {
  background-color: #fafafa !important;
  color: #050505 !important;
  font-weight: 600 !important;
}

/* --- Checkboxes & radios --- */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #e3185c !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
}

/* Checkbox / option card labels (e.g. service multi-select) */
label.cs_field {
  border-radius: 0.5rem !important;
  border: 1px solid #e5e5e5 !important;
  background: #ffffff !important;
  transition: border-color .15s ease, background-color .15s ease !important;
}
/* Card text: Deftform wraps it in a span with Tailwind text-sm (14px),
   which beats the label's inherited size — so label font-size alone never
   changed the visible text. Target the span directly (16px, ink). */
label.cs_field span.cs_field {
  font-size: 1rem !important;
  color: #050505 !important;
}
label.cs_field:hover {
  border-color: #050505 !important;
  background: #fafafa !important;
}

/* --- Submit button on last page: Deftform puts it in a
   justify-between row with the back button; its w-full overflows the
   form edge. Size it to content instead (back left, submit right). */
button[type="submit"] {
  width: auto !important;
  flex: 0 0 auto !important;
}
.cs_button {
  background: #050505 !important;
  border: 1px solid #050505 !important;
  color: #ffffff !important;
  border-radius: 0.5rem !important;
  padding: 0.875rem 1.75rem !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  letter-spacing: 0 !important;
  transition: background-color .15s ease, border-color .15s ease !important;
}
.cs_button:hover,
.cs_button:focus {
  background: #e3185c !important;
  border-color: #e3185c !important;
  color: #ffffff !important;
}
.cs_button:active { transform: translateY(1px) !important; }

/* --- Progress bar: pink accent fill on neutral track --- */
.cs_progress {
  background: #e3185c !important;
}
.cs_progress_bg {
  background: #f5f5f4 !important;
}

/* --- Fix horizontal clipping -----------------------------------
   Deftform's .page uses -mx-3 (negative 12px margin), so every
   field/card extends 12px beyond the iframe on each side and the
   left/right borders get clipped. Zero the margin and keep a 12px
   gutter via .formfield padding instead: borders land inside the
   visible area, nothing is cut. */
.page {
  gap: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.formfield {
  padding: 0.875rem 0.75rem !important;
}

/* --- Budget & Timing fields side-by-side (50% / 50%) ----------
   Targets the SELECT fields on the first form page instead of field ids:
   Deftform renumbers field ids whenever a field is added/moved, so the old
   id-based rule (fieldpage-0-field-2/3) broke and matched the wrong fields.
   Page 0 carries exactly two <select> fields (Ngân sách, Khi nào) on both
   the Vietnamese (d78602ea) and English (d94fd464) forms. */
[wire\:key="page-0"] .formfield:has(select.cs_field) {
  flex: 0 0 50% !important;
  max-width: 50% !important;
  width: 50% !important;
}

/* --- Contact-info fields side-by-side on page 1 (50% / 50%) ---
   Pairs: (Họ và tên, Vị trí / chức danh) and (Email công việc, Mobile).
   Targeted by position on page 1 (nth-of-type 5-8) — the two section
   headings and the first two fields (Tên công ty, Website) stay full width.
   Position-based, not id-based: renumber-proof, but if fields are added
   before these on page 1, the nth-of-type offsets must be revisited. */
[wire\:key="page-1"] .formfield:nth-of-type(5),
[wire\:key="page-1"] .formfield:nth-of-type(6),
[wire\:key="page-1"] .formfield:nth-of-type(7),
[wire\:key="page-1"] .formfield:nth-of-type(8) {
  flex: 0 0 50% !important;
  max-width: 50% !important;
  width: 50% !important;
}

/* --- Phones only: stack the inline pairs full-width ---
   IMPORTANT: the media query measures the IFRAME width (desktop iframe =
   880px). Breakpoint 850 keeps the pairs INLINE at 880 (desktop and
   tablet-width windows) and stacks them only on real phone widths
   (iframe < 850). The user explicitly wants inline preserved at 880. */
@media (max-width: 850px) {
  [wire\:key="page-0"] .formfield:has(select.cs_field),
  [wire\:key="page-1"] .formfield:nth-of-type(5),
  [wire\:key="page-1"] .formfield:nth-of-type(6),
  [wire\:key="page-1"] .formfield:nth-of-type(7),
  [wire\:key="page-1"] .formfield:nth-of-type(8) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Service choice cards: single column on phones (they are grid-cols-2). */
  .formfield .grid {
    grid-template-columns: 1fr !important;
  }
}

/* --- Terms checkbox: minimal (no card border/background/hover) ---
   The consent label inherits the option-card styling via label.cs_field;
   strip it. The :not() excludes the service choice cards (inside .grid). */
label:has(> input[type="checkbox"]):not(.formfield .grid label) {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
label:has(> input[type="checkbox"]):not(.formfield .grid label):hover {
  border-color: transparent !important;
  background: transparent !important;
}