/* ==========================================================================
   Service Report — iPad "Industrial" Theme (Gravity Forms)
   Focus: large type, big targets, minimal chrome, high contrast.
   Scope with #gform_wrapper_2 wrapper.
   ========================================================================== */

#gform_wrapper_2 {
  --bg: #f2f3f6;
  --panel: #fcfcfd;
  --ink: #181c21;
  --sub: #5e6670;
  --border: #cdd2d9;
  --muted: #eaecf0;
  --accent: #15803d; 
  --btn-back: #dCAA26; 
  --btn-accent: #a8851e; 
  --accent-dark: #a8851e;
  --good: #15803d;
  --bad: #b42318;
  --ring: 0 0 0 4px rgba(94,102,102,.33);

  --radius: 10px;
  --radius-lg: 14px;

  --fz-base: 20px;           /* large base */
  --fz-label: 24px;
  --fz-btn: 22px;
  --line: 1.35;
}

#gform_wrapper_2 .gform_wrapper,
#gform_wrapper_2.gform_wrapper {
  background: var(--bg);
  padding: 0;
  font-size: var(--fz-base);
  line-height: var(--line);
  -webkit-font-smoothing: antialiased;
}

/* Header area (optional) */
#gform_wrapper_2 .gform_heading {
  width: 100%;
  margin: 0 auto;
  padding: 20px 16px 0;
}
#gform_wrapper_2 h2  {
  font-weight: 800;
  font-size: 48px;
  color: var(--sub) !important;
text-align:center;
  margin: 40px auto;
}
#gform_wrapper_2 .gform_description { color: var(--sub); }

/* Main panel */
#gform_wrapper_2 .gform_body {
  max-width: 860px;
  margin: 12px auto 18px;
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

/* Single column grid with generous gaps */
#gform_wrapper_2 .gform_fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

/* Section titles */
#gform_wrapper_2 .gsection_title {
  font-weight: 800;
  font-size: 22px;
  color: var(--ink);
  margin: 8px 0 4px;
}
#gform_wrapper_2 .gsection_description { color: var(--sub); }

/* Labels */
#gform_wrapper_2 .gfield_label {
  font-weight: 700;
  font-size: var(--fz-label) !important;
  color: var(--sub);
  margin-top:40px;
  margin-bottom: 6px;
}


/* Inputs & selects */
#gform_wrapper_2 .ginput_container input[type="text"],
#gform_wrapper_2 .ginput_container input[type="email"],
#gform_wrapper_2 .ginput_container input[type="tel"],
#gform_wrapper_2 .ginput_container input[type="number"],
#gform_wrapper_2 .ginput_container input[type="url"],
#gform_wrapper_2 .ginput_container textarea,
#gform_wrapper_2 .ginput_container select {
  width: 100%;
  height: 68px;                       /* big touch target */
  padding: 16px 18px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink) !important;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#gform_wrapper_2 .ginput_container textarea {
  height: auto;
  min-height: 180px;                  /* bigger textarea */
  resize: vertical;
  line-height: 1.45;
}

/* Focus ring */
#gform_wrapper_2 .ginput_container input:focus,
#gform_wrapper_2 .ginput_container textarea:focus,
#gform_wrapper_2 .ginput_container select:focus {
  outline: none;
  border-color: var(--border);
  box-shadow: var(--ring);
}

/* Placeholder */
#gform_wrapper_2 ::placeholder { color: #8c939b; }

/* Select chevrons */
#gform_wrapper_2 .ginput_container_select select {
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #8c939b 50%),
    linear-gradient(135deg, #8c939b 50%, transparent 50%);
  background-position:
    calc(100% - 32px) calc(50% + 3px),
    calc(100% - 22px) calc(50% + 3px);
  background-size: 9px 9px, 9px 9px;
  background-repeat: no-repeat;
  padding-right: 56px;
  color: var(--ink) !important;
}

/* Radios/Checkboxes as big segmented "chips" */
#gform_wrapper_2 .gfield_radio,
#gform_wrapper_2 .gfield_checkbox { display: flex; flex-wrap: wrap; gap: 12px; }

#gform_wrapper_2 .gfield_radio li,
#gform_wrapper_2 .gfield_checkbox li { position: relative; }

#gform_wrapper_2 .gfield_radio input,
#gform_wrapper_2 .gfield_checkbox input { inset: 0; opacity: 0; pointer-events: none;
}

#gform_wrapper_2 .gchoice input[type="text"]{
opacity: 1;
}


#gform_wrapper_2 .gfield_radio label,
#gform_wrapper_2 .gfield_checkbox label {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 80px; width:90%; padding: 22px 22px 0px 22px; 
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--muted);
  color: var(--sub);
  font-size: var(--fz-base) !important;
  font-weight: 700;
  text-align:center;
  cursor: pointer; user-select: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}

#gform_wrapper_2 .gfield_radio input:focus-visible + label,
#gform_wrapper_2 .gfield_checkbox input:focus-visible + label {
  box-shadow: var(--ring);
  border-color: var(--accent);
}

#gform_wrapper_2 .gfield_radio input:checked + label,
#gform_wrapper_2 .gfield_checkbox input:checked + label {
  background: rgba(81,169,114,.33);                /* subtle safety yellow tint */
  border-color: var(--accent);
  color: #3b2f0e;
}

/* List field (Hours / Parts) — large rows */
#gform_wrapper_2 table.gfield_list {
  width: 100%;
  border-collapse: separate;
  border-spacing: 12px 12px;
}
#gform_wrapper_2 table.gfield_list thead th {
  text-align: left;
  background: var(--muted);
  color: var(--sub);
  font-weight: 800;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
}
#gform_wrapper_2 table.gfield_list td { padding: 0; }
#gform_wrapper_2 table.gfield_list input[type="text"],
#gform_wrapper_2 table.gfield_list input[type="number"] {
  height: 56px;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-weight: 600;
}

/* Add/Remove buttons for list rows */
#gform_wrapper_2 .gfield_list_icons{
width:auto !important;
padding:0px 20px;
}
 #gform_wrapper_2 .gfield_list_icons button{
width:auto !important;
}

#gform_wrapper_2 [id^="field_2_"] .gfield_list_icons .add_list_item,
#gform_wrapper_2 [id^="field_2_"] .gfield_list_icons .delete_list_item {
  height: 50px; padding: 0 10px; border-radius: 12px;
  font-weight: 800; border: 2px solid var(--border);
  background: var(--muted); color: var(--ink); font-size:var(--fz-base) !important;
}

#gform_wrapper_2 [id^="field_2_"] .gfield_list_icons .add_list_item {
  background: #f3faed; border-color: #bbf7d0; color: var(--good);
}

#gform_wrapper_2 #field_2_11 .gfield_list_icons .delete_list_item,
#gform_wrapper_2 #field_2_12 .gfield_list_icons .delete_list_item,
#gform_wrapper_2 #field_2_21 .gfield_list_icons .delete_list_item {
  background: #fff5f5; border-color: #fecaca; color: var(--bad);
}
#gform_wrapper_2 #field_2_11 .gfield_list_11_cell1.gform-grid-col{
width:50%;
/*max-width:460px;*/
}
#gform_wrapper_2 #field_2_11 .gfield_list_11_cell2.gform-grid-col{
width:30%;
/*max-width:120px;*/
}

#gform_wrapper_2 #field_2_12 .gfield_list_12_cell1.gform-grid-col{
width:50%;
/*max-width:460px;*/
}
#gform_wrapper_2 #field_2_12 .gfield_list_12_cell2.gform-grid-col{
width:35%;
/*max-width:460px;*/
}
#gform_wrapper_2 #field_2_12 .gfield_list_12_cell3.gform-grid-col{
width:15%;
/*max-width:120px;*/
}
 
/* Validation/help text */
#gform_wrapper_2 .gfield_description,
#gform_wrapper_2 .instruction { color: var(--sub); font-size: 18px; }
#gform_wrapper_2 .gfield_validation_message,
#gform_wrapper_2 .validation_message {
  background: #fff5f5; border: 2px solid #fecaca; color: var(--bad);
  padding: 10px 14px; border-radius: 10px; margin-top: 8px;
}

/* Footer with sticky submit (thumb-friendly) */
#gform_wrapper_2 .gform_footer {
  width: 100%;
  margin: 12px auto;
  padding: 20px;


}

/* Buttons */
#gform_wrapper_2 .gform_button,
#gform_wrapper_2 .gform_next_button,
#gform_wrapper_2 .gform_previous_button,
#gform_wrapper_2 .gform_save_link {
  display: inline-flex; align-items: center; justify-content: center;
  height: 60px; max-width: 860px; padding: 0 22px; border-radius: 12px;
  margin: 12px auto;
  font-weight: 900; font-size: var(--fz-btn);
  border: 2px solid transparent; cursor: pointer;
  transition: transform .06s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

#gform_wrapper_2 .gform_button,
#gform_wrapper_2 .gform_next_button {
  width: 100%;
  background: var(--btn-back);
  color: #333;
  border-color: var(--btn-accent);

}

#gform_wrapper_2 .gform_previous_button,
#gform_wrapper_2 .gform_save_link {
  background: var(--muted);
  color: var(--ink);
  border-color: var(--border);
}

#gform_wrapper_2 .gform_button:active,
#gform_wrapper_2 .gform_next_button:active,
#gform_wrapper_2 .gform_previous_button:active,
#gform_wrapper_2 .gform_save_link:active { transform: translateY(1px); }

#gform_wrapper_2 #field_2_24 img {
    display: block;
    margin: 0px 0px 0px 10px;
    height: 50px;
    max-height: 50px;
    width: 50px;
    max-width: 50px;
}
/* Utilities */
#gform_wrapper_2 .full { grid-column: 1 / -1; }   /* add 'full' to a field's CSS class to span edge-to-edge */

/* Motion preference */
@media (prefers-reduced-motion: reduce) {
  #gform_wrapper_2 * { transition: none !important; }
}

/* Optional dark-mode */
@media (prefers-color-scheme: dark) {
  #gform_wrapper_2 {
    --bg:#0f1115; --panel:#14171d; --ink:#000000; --sub:#9aa4b2;
    --border:#222833; --muted:#1a1f28; --accent:#dCAA26;
  }
}

/* ==========================================================================
   New-site compatibility fixes
   Handles Gravity Forms newer markup/theme CSS that was forcing choices and
   some fields to stack/align differently from the original site.
   ========================================================================== */

#gform_wrapper_2,
#gform_wrapper_2 * {
  box-sizing: border-box;
}

/* Keep the outer form layout as a clean single-column panel, regardless of
   Gravity Forms layout classes applied on the new site. */
#gform_wrapper_2 .gform_fields {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}

#gform_wrapper_2 .gform_fields > .gfield {
  grid-column: 1 / -1 !important;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
}

/* Gravity Forms newer markup uses .gchoice divs instead of li elements.
   Force radio/checkbox choices back into the original two-column button grid. */
#gform_wrapper_2 .gfield_radio,
#gform_wrapper_2 .gfield_checkbox,
#gform_wrapper_2 .ginput_container_radio .gfield_radio,
#gform_wrapper_2 .ginput_container_checkbox .gfield_checkbox {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 12px 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#gform_wrapper_2 .gfield_radio .gchoice,
#gform_wrapper_2 .gfield_checkbox .gchoice,
#gform_wrapper_2 .gfield_radio li,
#gform_wrapper_2 .gfield_checkbox li {
  position: relative !important;
  display: block !important;
  flex: 0 0 calc(50% - 20px) !important;
  width: calc(50% - 20px) !important;
  max-width: calc(50% - 20px) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#gform_wrapper_2 .gfield_radio input[type="radio"],
#gform_wrapper_2 .gfield_checkbox input[type="checkbox"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#gform_wrapper_2 .gfield_radio label,
#gform_wrapper_2 .gfield_checkbox label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 80px !important;
  padding: 0 22px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* Keep Gravity Forms "Other" text inputs usable when they are revealed. */
#gform_wrapper_2 .gchoice input[type="text"] {
  position: relative !important;
  display: block;
  width: 100% !important;
  height: 56px !important;
  margin-top: 10px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* The total fields were drifting right on the new site because GF layout width
   classes were winning. Center them like the original version. */
#gform_wrapper_2 #field_2_14,
#gform_wrapper_2 #field_2_13 {
  max-width: 260px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

#gform_wrapper_2 #field_2_14 .gfield_label,
#gform_wrapper_2 #field_2_13 .gfield_label {
  display: block !important;
  text-align: center !important;
}

#gform_wrapper_2 #field_2_14 input,
#gform_wrapper_2 #field_2_13 input {
  text-align: left !important;
}

/* On narrow screens, stack the big radio buttons intentionally. */
@media (max-width: 700px) {
  #gform_wrapper_2 .gfield_radio .gchoice,
  #gform_wrapper_2 .gfield_checkbox .gchoice,
  #gform_wrapper_2 .gfield_radio li,
  #gform_wrapper_2 .gfield_checkbox li {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Gravity Forms list button icon color fix
   GF's default icon rule was forcing the pseudo-icons white on the new site. */
#gform_wrapper_2 .gfield_list_icons .add_list_item::before,
#gform_wrapper_2 .gfield_list_icons .delete_list_item::before {
  font-family: inherit !important;
  opacity: 1 !important;
  color: currentColor !important;
}

#gform_wrapper_2 .gfield_list_icons .add_list_item::before {
  content: "+" !important;
  color: #15803d !important;
}

#gform_wrapper_2 .gfield_list_icons .delete_list_item::before {
  content: "\2212" !important;
  color: #b91c1c !important;
}