/* FlowOps v33.4.2 — shared application form system.
 * The Bookings control treatment is the single source of truth for application forms.
 * Page styles should define layout only; control colours and states live here.
 */:root{
  --flowops-form-surface:var(--fo-surface-1);
  --flowops-form-surface-hover:#141820;
  --flowops-form-surface-readonly:#0d1116;
  --flowops-form-border:#2b3039;
  --flowops-form-border-hover:#3a424e;
  --flowops-form-text:#eef1f4;
  --flowops-form-placeholder:#737d8a;
  --flowops-form-muted:#929ba7;
  --flowops-form-accent:var(--flowops-accent,#4f8cff);
  --flowops-form-danger:#ff727f;
  --flowops-form-radius:9px;
  --flowops-form-height:40px;
}

/* Labels and help text */body[class*="flowops-page-"] .flowops-main form .flowops-field > label, body[class*="flowops-page-"] .flowops-main form .flowops-form-field > label, body[class*="flowops-page-"] .flowops-main form label.flowops-label{
  color:#aeb7c3!important;
  font-family:inherit!important;
}body[class*="flowops-page-"] .flowops-main form .flowops-inline-help, body[class*="flowops-page-"] .flowops-main form .description, body[class*="flowops-page-"] .flowops-main form .flowops-help{
  color:#7e8895!important;
}

/* Shared text controls. Deliberately excludes buttons, hidden fields, checks and radios. */body[class*="flowops-page-"] .flowops-main form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]), body[class*="flowops-page-"] .flowops-main form select, body[class*="flowops-page-"] .flowops-main form textarea, body[class*="flowops-page-"] .flowops-main .flowops-form-control, body[class*="flowops-page-"] .flowops-main .flowops-input, body[class*="flowops-page-"] .flowops-main .flowops-select, body[class*="flowops-page-"] .flowops-main .flowops-textarea{
  min-width:0!important;
  max-width:100%!important;
  border:1px solid var(--flowops-form-border)!important;
  border-radius:var(--flowops-form-radius)!important;
  background-color:var(--flowops-form-surface)!important;
  color:var(--flowops-form-text)!important;
  -webkit-text-fill-color:var(--flowops-form-text)!important;
  caret-color:var(--flowops-form-text)!important;
  color-scheme:dark!important;
  font-family:inherit!important;
  box-shadow:none!important;
  outline:0!important;
  opacity:1!important;
  transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease!important;
}body[class*="flowops-page-"] .flowops-main form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]), body[class*="flowops-page-"] .flowops-main form select{
  min-height:var(--flowops-form-height)!important;
}body[class*="flowops-page-"] .flowops-main form textarea{
  min-height:88px!important;
  resize:vertical!important;
}body[class*="flowops-page-"] .flowops-main form select{
  padding-right:34px!important;
}body[class*="flowops-page-"] .flowops-main form select option, body[class*="flowops-page-"] .flowops-main form select optgroup{
  background:var(--flowops-form-surface)!important;
  color:var(--flowops-form-text)!important;
}

/* Placeholder and browser date/time text */body[class*="flowops-page-"] .flowops-main form input::placeholder, body[class*="flowops-page-"] .flowops-main form textarea::placeholder{
  color:var(--flowops-form-placeholder)!important;
  -webkit-text-fill-color:var(--flowops-form-placeholder)!important;
  opacity:1!important;
}body[class*="flowops-page-"] .flowops-main form input::-webkit-date-and-time-value, body[class*="flowops-page-"] .flowops-main form input::-webkit-datetime-edit, body[class*="flowops-page-"] .flowops-main form input::-webkit-datetime-edit-fields-wrapper, body[class*="flowops-page-"] .flowops-main form input::-webkit-datetime-edit-text, body[class*="flowops-page-"] .flowops-main form input::-webkit-datetime-edit-month-field, body[class*="flowops-page-"] .flowops-main form input::-webkit-datetime-edit-day-field, body[class*="flowops-page-"] .flowops-main form input::-webkit-datetime-edit-year-field, body[class*="flowops-page-"] .flowops-main form input::-webkit-datetime-edit-hour-field, body[class*="flowops-page-"] .flowops-main form input::-webkit-datetime-edit-minute-field, body[class*="flowops-page-"] .flowops-main form input::-webkit-datetime-edit-ampm-field{
  color:var(--flowops-form-text)!important;
  -webkit-text-fill-color:var(--flowops-form-text)!important;
}body[class*="flowops-page-"] .flowops-main form input::-webkit-calendar-picker-indicator{
  opacity:.76!important;
  filter:invert(1) brightness(.88)!important;
  cursor:pointer!important;
}

/* Hover, focus and keyboard focus */body[class*="flowops-page-"] .flowops-main form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):hover, body[class*="flowops-page-"] .flowops-main form select:hover, body[class*="flowops-page-"] .flowops-main form textarea:hover{
  border-color:var(--flowops-form-border-hover)!important;
  background-color:var(--flowops-form-surface-hover)!important;
}body[class*="flowops-page-"] .flowops-main form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus, body[class*="flowops-page-"] .flowops-main form select:focus, body[class*="flowops-page-"] .flowops-main form textarea:focus, body[class*="flowops-page-"] .flowops-main form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus-visible, body[class*="flowops-page-"] .flowops-main form select:focus-visible, body[class*="flowops-page-"] .flowops-main form textarea:focus-visible{
  border-color:var(--flowops-form-accent)!important;
  background-color:var(--flowops-form-surface)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--flowops-form-accent) 14%,transparent)!important;
}

/* Autofill must never restore a white browser surface. */body[class*="flowops-page-"] .flowops-main form input:-webkit-autofill, body[class*="flowops-page-"] .flowops-main form input:-webkit-autofill:hover, body[class*="flowops-page-"] .flowops-main form input:-webkit-autofill:focus, body[class*="flowops-page-"] .flowops-main form textarea:-webkit-autofill, body[class*="flowops-page-"] .flowops-main form select:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--flowops-form-surface) inset!important;
  box-shadow:0 0 0 1000px var(--flowops-form-surface) inset!important;
  -webkit-text-fill-color:var(--flowops-form-text)!important;
  caret-color:var(--flowops-form-text)!important;
  border-color:var(--flowops-form-border)!important;
  transition:background-color 9999s ease-out 0s!important;
}

/* Disabled and readonly */body[class*="flowops-page-"] .flowops-main form input[readonly], body[class*="flowops-page-"] .flowops-main form textarea[readonly], body[class*="flowops-page-"] .flowops-main form input:disabled, body[class*="flowops-page-"] .flowops-main form select:disabled, body[class*="flowops-page-"] .flowops-main form textarea:disabled, body[class*="flowops-page-"] .flowops-main form fieldset[disabled] input, body[class*="flowops-page-"] .flowops-main form fieldset[disabled] select, body[class*="flowops-page-"] .flowops-main form fieldset[disabled] textarea{
  background-color:var(--flowops-form-surface-readonly)!important;
  border-color:#252b34!important;
  color:#aeb7c3!important;
  -webkit-text-fill-color:#aeb7c3!important;
  opacity:1!important;
}

/* Validation */body[class*="flowops-page-"] .flowops-main form .is-invalid input:not([type="checkbox"]):not([type="radio"]), body[class*="flowops-page-"] .flowops-main form .is-invalid select, body[class*="flowops-page-"] .flowops-main form .is-invalid textarea, body[class*="flowops-page-"] .flowops-main form input.is-invalid, body[class*="flowops-page-"] .flowops-main form select.is-invalid, body[class*="flowops-page-"] .flowops-main form textarea.is-invalid, body[class*="flowops-page-"] .flowops-main form [aria-invalid="true"]{
  border-color:var(--flowops-form-danger)!important;
  box-shadow:0 0 0 3px rgba(255,114,127,.11)!important;
}body[class*="flowops-page-"] .flowops-main form .flowops-field-error, body[class*="flowops-page-"] .flowops-main form .flowops-error-text{
  color:#ff969f!important;
}

/* Keep compact Booking dimensions on desktop and touch-safe dimensions on phones. */
@media (max-width:620px){:root{--flowops-form-height:48px}body[class*="flowops-page-"] .flowops-main form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]), body[class*="flowops-page-"] .flowops-main form select, body[class*="flowops-page-"] .flowops-main form textarea{
    font-size:16px!important;
  }body[class*="flowops-page-"] .flowops-main form textarea{min-height:96px!important}
}

/* v33.4.40 — page-marker fallback. Some rewritten routes put the page marker on
 * html rather than body; controls must still use the shared dark form system.
 */html.flowops-v33-bookings .flowops-main form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]), html.flowops-v33-bookings .flowops-main form select, html.flowops-v33-bookings .flowops-main form textarea, html.flowops-v33-my-jobs .flowops-main form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]), html.flowops-v33-my-jobs .flowops-main form select, html.flowops-v33-my-jobs .flowops-main form textarea{
  background-color:var(--flowops-form-surface)!important;
  border-color:var(--flowops-form-border)!important;
  color:var(--flowops-form-text)!important;
  -webkit-text-fill-color:var(--flowops-form-text)!important;
  color-scheme:dark!important;
  box-shadow:none!important;
}

/* v38.0.0 — canonical button sizing, matched to the Dashboard/Bookings reference.
 * Loaded last (after every page layer) on purpose: dozens of page-scoped rules only
 * touch layout (width, flex, margin) and are left alone; this block is the single
 * source of truth for height/padding/radius/type so buttons stop drifting in size
 * page to page. Does not touch width/flex/margin utility rules elsewhere. */
:is(.flowops-btn,.flowops-btn-primary,.flowops-btn-secondary,.flowops-btn-danger,.flowops-btn-ghost){
  min-height:40px!important;
  height:40px!important;
  padding:0 16px!important;
  border-radius:10px!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:-.01em!important;
  box-shadow:none!important;
}
.flowops-btn-primary{
  background:linear-gradient(135deg,#00c85a,#00aa4d)!important;
  border-color:transparent!important;
  color:#07111f!important;
  box-shadow:0 12px 28px rgba(0,200,90,.22)!important;
}
.flowops-btn-secondary{
  background:var(--fo-surface-1)!important;
  color:var(--fo-text-primary)!important;
  border:1px solid rgba(148,163,184,.18)!important;
}
.flowops-btn-danger{
  background:rgba(239,68,68,.08)!important;
  color:#fca5a5!important;
  border:1px solid rgba(239,68,68,.30)!important;
}
.flowops-btn-ghost{
  background:transparent!important;
  color:#d8dee8!important;
  border:1px solid rgba(255,255,255,.10)!important;
}
:is(.flowops-btn,.flowops-btn-primary,.flowops-btn-secondary,.flowops-btn-danger,.flowops-btn-ghost):hover{
  filter:brightness(1.08);
}
:is(.flowops-btn,.flowops-btn-primary,.flowops-btn-secondary,.flowops-btn-danger,.flowops-btn-ghost):disabled,
:is(.flowops-btn,.flowops-btn-primary,.flowops-btn-secondary,.flowops-btn-danger,.flowops-btn-ghost)[disabled]{
  opacity:.5!important;
  cursor:not-allowed!important;
  filter:none!important;
}
/* Explicit size variants stay available for contexts that intentionally need them
 * (e.g. a compact inline table action, or a large onboarding CTA) without
 * reintroducing the old page-by-page drift for the *default* button. */
.flowops-btn--sm,.flowops-btn-sm{min-height:32px!important;height:32px!important;padding:0 12px!important;font-size:12px!important;border-radius:8px!important;}
.flowops-btn--lg,.flowops-btn-lg{min-height:48px!important;height:48px!important;padding:0 20px!important;font-size:14px!important;border-radius:12px!important;}

/* v38.0.1 — remove the duplicate large hero titles on Settings/Billing/Profile.
 * Bookings/Team/Calendar/My Jobs never had this second heading — the small
 * breadcrumb title in the topbar already names the page. Keeping the eyebrow
 * label and subtitle paragraph (useful description text Bookings doesn't need,
 * but these more complex pages do); only removing the oversized duplicate title. */
.flowops-settings-v98-title h1,
.flowops-profile-v52-title h2,
.flowops-profile-v52-head h2,
.flowops-billing-v94-title>span::after{
  display:none!important;
}