/* Freshlab Theme: customer area (default "perfex" customers theme) and public forms
   (web-to-lead, ticket form, estimate request).
   Replaces clients.css and bold-clients.css. Loaded after base.css, which owns the tokens and the
   shared components (buttons, fields, labels, alerts, tables, tabs, dropdowns, modals).
   Panels, tables, alerts, the focus outline, checkbox focus and the Tailwind warm-grey bridge
   also come from base.css, so the customer area matches the admin exactly.
   This file covers what is specific to the customer area: the light top bar, page titles,
   the invoice / estimate / proposal / contract views, tickets, knowledge base, customer login
   and register, footer, colours left over in the theme's own style.css, and public forms.

   Technique: flat rules, each prefixed with ":root " (no CSS nesting). Hooks are Bootstrap
   classes, Perfex semantic classes and body.<controller> classes. Rules keyed on Tailwind tw-*
   utilities are avoided; the two that remain are marked.
   Inline colours (status labels, form submit buttons) are never overridden. */

/* ---------- Extra tokens (this file only; see DESIGN-login-clients.md) ---------- */

:root {
  /* Same 4px rule as --fl-space-1..8 in base.css */
  --fl-space-10: 40px;
  --fl-space-12: 48px;
  --fl-space-16: 64px;

  /* Brand pattern, tone on tone (same asset as the staff login) */
  --fl-pattern-ground: var(--fl-bone);
  --fl-pattern-shape: color-mix(in srgb, var(--fl-paper) 55%, var(--fl-bone)); /* faint: texture, not decoration */
  --fl-pattern-size: 1080px;

  --fl-client-nav-height: 72px;
  --fl-client-nav-gap: var(--fl-space-8); /* top bar to page content */
  --fl-client-logo-height: 30px;
  --fl-client-doc-logo-height: 36px;
  --fl-client-title-size: var(--fl-text-3xl);
  --fl-client-title-tracking: var(--fl-track-3xl);
  --fl-client-display-size: var(--fl-text-3xl);
  --fl-client-display-tracking: var(--fl-track-3xl);
  --fl-client-control-height: 48px;
  --fl-client-search-height: 56px;

  /* Login and search fields: warm grey outline, 3.4:1 on white (WCAG 1.4.11) */
  --fl-client-field-border: color-mix(in srgb, var(--fl-ink) 35%, var(--fl-stone));
}

@media (max-width: 767px) {
  :root {
    --fl-pattern-size: 640px;
    --fl-client-nav-height: 64px;
    --fl-client-nav-gap: var(--fl-space-5);
    --fl-client-logo-height: 26px;
    --fl-client-doc-logo-height: 30px;
    --fl-client-title-size: var(--fl-text-2xl);
    --fl-client-title-tracking: var(--fl-track-2xl);
    --fl-client-display-size: var(--fl-text-2xl);
    --fl-client-search-height: 52px;
  }
}

/* =====================================================================================
   Shared by the customer area and the public forms
   ===================================================================================== */

:root body:is(.customers, .web-to-lead, .ticket_form, .estimate-request-form) {
  color: var(--fl-ink-2);
}

:root body:is(.customers, .web-to-lead, .ticket_form, .estimate-request-form) hr {
  border-top-color: var(--fl-line);
}

/* =====================================================================================
   Customer area
   ===================================================================================== */

:root body.customers {
  background: var(--fl-canvas);
}

:root body.customers #wrapper {
  background: transparent;
}

/* Headings in ink, not slate. Perfex's coloured headings (.text-*), inline colours, alert
   headings and the deliberately muted empty-state headings keep their colour.
   (Tailwind-keyed part: the two tw-text-neutral exclusions; if they stop matching, those two
   headings turn ink, nothing breaks.) */
:root body.customers #content :is(h1, h2, h3, h4, h5, h6):not(.text-muted, .text-info, .text-success, .text-warning, .text-danger, .text-primary, .tw-text-neutral-400, .tw-text-neutral-500, [style]):not(.alert *) {
  color: var(--fl-ink);
}

/* 16px fields on phones so iOS does not zoom in on focus */
@media (max-width: 767px) {
  :root body.customers .form-control {
    font-size: 16px;
  }
}

/* ---------- Top bar: white, hairline, logo left, links right ---------- */

:root body.customers .navbar-default {
  min-height: var(--fl-client-nav-height);
  margin-bottom: var(--fl-client-nav-gap);
  background: var(--fl-white);
  border: 0;
  border-bottom: 1px solid var(--fl-line);
}

:root body.customers .navbar-default .navbar-brand {
  display: flex;
  align-items: center;
  height: var(--fl-client-nav-height);
  padding-block: 0;
}

:root body.customers .navbar-default .navbar-brand img {
  width: auto;
  height: var(--fl-client-logo-height);
}

/* Shown when no logo is uploaded */
:root body.customers .navbar-default .navbar-brand.logo-text {
  margin-top: 0;
  color: var(--fl-ink);
  font-size: var(--fl-text-xl);
  font-weight: 700;
  letter-spacing: -0.03em;
}

:root body.customers .navbar-default .navbar-nav > li > a {
  background: transparent;
  border-radius: 0;
  color: var(--fl-ink-2);
  font-size: var(--fl-text-sm);
  font-weight: 500;
  letter-spacing: -0.002em;
  transition: color var(--fl-duration) var(--fl-ease);
}

:root body.customers .navbar-default .navbar-nav > li > a:is(:hover, :focus),
:root body.customers .navbar-default .navbar-nav > :is(.active, .open) > a,
:root body.customers .navbar-default .navbar-nav > :is(.active, .open) > a:is(:hover, :focus) {
  background: transparent;
  color: var(--fl-ink);
}

/* Sign-in link for guests: a real button. !important beats the theme's own !important (CT:532-547). */
:root body.customers .navbar-default .navbar-nav > li.customers-nav-item-login > a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--fl-btn-height);
  padding: 0 var(--fl-space-5);
  background: var(--fl-blue) !important;
  border-radius: var(--fl-btn-radius) !important;
  color: var(--fl-white) !important;
  font-weight: 600;
  line-height: 1;
}

:root body.customers .navbar-default .navbar-nav > li.customers-nav-item-login > a:is(:hover, :active, :focus) {
  background: var(--fl-blue-dark) !important;
}

/* Contact avatar */
:root body.customers .client-profile-image-small {
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--fl-line);
}

/* The profile menu faded in over a full second */
:root body.customers .navbar .dropdown-menu.animated {
  animation-duration: 0.12s;
}

@media (min-width: 768px) {
  :root body.customers .navbar-default .navbar-nav > li > a {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--fl-client-nav-height);
    margin: 0;
    padding: 0 var(--fl-space-3);
    line-height: 20px;
  }

  /* Where you are: a 2px blue rule on the hairline (the language of the admin tab strip).
     Hover previews it in stone. Same weight in every state, so nothing shifts. */
  :root body.customers .navbar-default .navbar-nav > li > a::after {
    content: "";
    position: absolute;
    inset-inline: var(--fl-space-3);
    bottom: -1px;
    height: 2px;
    background: transparent;
    transition: background-color var(--fl-duration) var(--fl-ease);
  }

  :root body.customers .navbar-default .navbar-nav > li:not(.dropdown) > a:hover::after {
    background: var(--fl-stone);
  }

  :root body.customers .navbar-default .navbar-nav > li.active > a::after {
    background: var(--fl-blue);
  }

  :root body.customers .navbar-default .navbar-nav > li.customers-nav-item-login > a {
    height: var(--fl-btn-height);
    margin-block: calc((var(--fl-client-nav-height) - var(--fl-btn-height)) / 2);
    margin-inline-start: var(--fl-space-3);
  }

  :root body.customers .navbar-default .navbar-nav > li.customers-nav-item-login > a::after {
    content: none;
  }

  :root body.customers .navbar-default .navbar-nav > li.customers-nav-item-profile > a {
    padding-inline: var(--fl-space-3) 0;
  }
}

@media (max-width: 767px) {
  /* Logo lines up with the page content (the theme pushed it 25px in, the content sits at 15px) */
  :root body.customers .navbar-default .navbar-brand {
    padding-inline-start: 15px;
  }

  :root body.customers .navbar-default .navbar-brand img,
  :root body.customers .navbar-default .navbar-brand.logo-text {
    margin: 0;
  }

  /* 44px touch target with ink bars (the stock bars were #cbd5e1 on white, 1.5:1) */
  :root body.customers .navbar-default .navbar-toggle {
    width: 44px;
    height: 44px;
    margin: calc((var(--fl-client-nav-height) - 44px) / 2) 15px;
    padding: 14px 10px;
    border: 1px solid transparent;
    border-radius: var(--fl-radius);
  }

  :root body.customers .navbar-default .navbar-toggle:is(:hover, :focus) {
    background: var(--fl-bone);
  }

  :root body.customers .navbar-default .navbar-toggle .icon-bar {
    width: 22px;
    height: 2px;
    background: var(--fl-ink);
  }

  :root body.customers .navbar-default .navbar-collapse {
    border-top: 1px solid var(--fl-line);
    box-shadow: none;
  }

  :root body.customers .navbar-default .navbar-nav {
    margin-block: var(--fl-space-2);
  }

  :root body.customers .navbar-default .navbar-nav > li > a {
    display: block;
    padding: var(--fl-space-3) 15px;
    font-size: var(--fl-text-base);
    line-height: 24px;
  }

  :root body.customers .navbar-default .navbar-nav > .active > a,
  :root body.customers .navbar-default .navbar-nav > .active > a:is(:hover, :focus) {
    background: var(--fl-bone);
    border-radius: var(--fl-radius);
  }

  :root body.customers .navbar-default .navbar-nav > li.customers-nav-item-login {
    padding: var(--fl-space-2) 15px var(--fl-space-3);
  }

  :root body.customers .navbar-default .navbar-nav > li.customers-nav-item-login > a {
    margin: 0;
  }
}

/* ---------- Files / Calendar links above the page (colour !important beats CT:214-223) ---------- */

:root body.customers .customer-top-submenu {
  margin: 0 0 var(--fl-space-4);
  padding: 0;
}

:root body.customers .customer-top-submenu li {
  margin-inline-end: var(--fl-space-5);
}

:root body.customers .customer-top-submenu li:last-child {
  margin-inline-end: 0;
}

:root body.customers .customer-top-submenu li a {
  color: var(--fl-ink-2) !important;
  font-size: var(--fl-text-sm);
  font-weight: 500;
  transition: color var(--fl-duration) var(--fl-ease);
}

:root body.customers .customer-top-submenu li a:is(:hover, :focus, :active) {
  color: var(--fl-blue) !important;
}

:root body.customers .customer-top-submenu li a svg {
  width: 18px;
  height: 18px;
}

/* ---------- Page titles: ink, Switzer, tight ---------- */

:root body.customers :is(h1, h2, h3, h4):is(.section-heading, .section-text):not(.panel_s *) {
  color: var(--fl-ink);
  font-size: var(--fl-client-title-size);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--fl-client-title-tracking);
}

/* Room under the larger title (set on the panel, so titles in flex rows are untouched;
   the two margins collapse to this value) */
:root body.customers :is(h1, h2, h3, h4):is(.section-heading, .section-text) + .panel_s {
  margin-top: var(--fl-space-5);
}

/* "View account statement" sits inside the Invoices title */
:root body.customers .section-heading > span {
  margin-inline-start: var(--fl-space-3);
  font-size: var(--fl-text-sm);
  font-weight: 500;
  letter-spacing: normal;
}

/* Second-level headings outside panels */
:root body.customers :is(.tickets-summary-heading, .contracts-summary-heading, .projects-summary-heading, .invoices-quick-info-heading, .kb-related-heading) {
  font-size: var(--fl-text-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* Home: "Good afternoon, Jan!" */
:root body.customers #greeting {
  margin: 0 0 var(--fl-space-2);
  font-size: var(--fl-client-display-size);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: var(--fl-client-display-tracking);
  text-wrap: balance;
}

:root body.customers #greeting b {
  font-weight: inherit;
}

/* ---------- Invoice, estimate, proposal, contract and subscription views ---------- */

:root body.customers [class*="-html-logo"] img {
  width: auto;
  height: var(--fl-client-doc-logo-height);
}

:root body.customers .preview-sticky-header {
  background: var(--fl-white);
  box-shadow: 0 1px 0 var(--fl-line);
}

/* Action buttons (Go to portal, Download, Pay, Accept, Decline): wrap on phones instead of
   running off the screen. Spacing becomes a gap so a wrapped row starts flush. */
:root body.customers .preview-top-wrapper div:has(> .action-button) {
  flex-wrap: wrap;
  gap: var(--fl-space-2);
}

:root body.customers .preview-top-wrapper div:has(> .action-button) > * {
  margin-inline: 0;
}

/* Document number: the title of the page */
:root body.customers :is(.transaction-html-info-col-left > h4, .proposal-html-number, .contract-html-subject) {
  margin-top: 0;
  font-size: var(--fl-text-2xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

:root body.customers .proposal-html-subject {
  color: var(--fl-muted);
  font-size: var(--fl-text-base);
  font-weight: 400;
  letter-spacing: normal;
}

/* "Bill to", "Ship to", "To": small caption labels */
:root body.customers .transaction-html-info-col-right > span {
  display: inline-block;
  margin-bottom: var(--fl-space-1);
  color: var(--fl-muted);
  font-size: var(--fl-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

:root body.customers address {
  line-height: 1.6;
}

/* The overdue notice: the theme pulled it 7px into the next block and rounded it 1px (CT:582-586) */
:root body.customers.viewinvoice .alert {
  margin: 0;
  border-radius: var(--fl-radius);
}

:root body.customers .alert > p:last-child {
  margin-bottom: 0;
}

/* Totals: the grand total reads like the last line of a receipt */
:root body.customers .table.text-right > tbody > tr:has(> td.total) > td {
  padding-block: var(--fl-space-3);
  border-top: 1px solid var(--fl-ink-2);
  color: var(--fl-ink);
  font-size: var(--fl-text-lg);
  font-weight: 600;
}

/* ---------- Tickets ---------- */

/* A reply written by the customer: bone instead of the theme's yellow (!important beats CT:577-580) */
:root body.customers .client-reply .panel-body {
  background: var(--fl-bone) !important;
  color: var(--fl-ink-2);
}

/* Status counters above the ticket list (their status colour is inline and stays) */
:root body.customers.tickets #content dl > a {
  border-radius: var(--fl-radius);
  transition: background-color var(--fl-duration) var(--fl-ease);
}

/* ---------- Knowledge base ---------- */

/* Search band under the top bar, on the brand pattern */
:root body.customers .kb-search-jumbotron {
  position: relative;
  isolation: isolate;
  margin: calc(var(--fl-client-nav-gap) * -1) 0 var(--fl-space-8);
  padding: var(--fl-space-16) 0;
  background: var(--fl-pattern-ground);
  border-bottom: 1px solid var(--fl-line);
  border-radius: 0;
}

:root body.customers .kb-search-jumbotron::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--fl-pattern-shape);
  -webkit-mask: url("../img/pattern-arcs-bars.svg?v=1") 50% 0 / var(--fl-pattern-size) repeat;
  mask: url("../img/pattern-arcs-bars.svg?v=1") 50% 0 / var(--fl-pattern-size) repeat;
}

@media (max-width: 767px) {
  :root body.customers .kb-search-jumbotron {
    padding: var(--fl-space-10) 0;
  }
}

:root body.customers .kb-search-heading {
  margin: 0 0 var(--fl-space-6);
  font-size: var(--fl-client-display-size);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: var(--fl-client-display-tracking);
  text-wrap: balance;
}

:root body.customers .kb-search .form-group {
  margin-bottom: 0;
}

:root body.customers .kb-search .kb-search-input {
  height: var(--fl-client-search-height);
  padding-inline-start: var(--fl-space-12);
  background: var(--fl-white);
  border-color: var(--fl-client-field-border);
  font-size: 16px;
  border-start-start-radius: var(--fl-radius-sm);
  border-end-start-radius: var(--fl-radius-sm);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

/* Tailwind kills box-shadow on inputs inside .input-group with !important (TW ".input-group input") */
:root body.customers .kb-search .kb-search-input:focus {
  border-color: var(--fl-blue);
  box-shadow: var(--fl-focus-ring) !important;
}

:root body.customers .kb-search .kb-search-button {
  height: var(--fl-client-search-height);
  padding: 0 var(--fl-space-6);
  font-size: var(--fl-text-base);
  font-weight: 600;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--fl-radius-sm);
  border-end-end-radius: var(--fl-radius-sm);
}

/* The magnifier vanished behind the field on focus (Bootstrap lifts a focused field to z-index 3) */
:root body.customers .kb-search .kb-search-icon {
  z-index: 4;
  top: 0;
  width: var(--fl-space-12);
  height: var(--fl-client-search-height);
  color: var(--fl-muted);
  line-height: var(--fl-client-search-height);
}

/* Category names and article titles */
:root body.customers #content ul[role="list"] h3 > a {
  color: var(--fl-ink);
}

:root body.customers #content .articles_list h4 > a {
  color: var(--fl-ink-2);
}

:root body.customers #content :is(ul[role="list"] h3, .articles_list h4) > a:hover {
  color: var(--fl-blue);
}

:root body.customers .kb-article-single-heading {
  font-size: var(--fl-client-title-size);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: var(--fl-client-title-tracking);
}

:root body.customers .kb-article-content {
  max-width: 72ch;
  color: var(--fl-ink-2);
  font-size: var(--fl-text-lg);
  line-height: 1.65;
}

:root body.customers .kb-article-content :is(h1, h2, h3, h4) {
  margin-top: 1.4em;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* "Was this helpful?" Yes / No: a quiet outlined pair instead of a green and a red block */
:root body.customers .article_useful_buttons .btn:is(.btn-success, .btn-danger) {
  background: var(--fl-white);
  border-color: var(--fl-stone);
}

:root body.customers .article_useful_buttons .btn-success {
  color: var(--fl-success-text);
}

:root body.customers .article_useful_buttons .btn-danger {
  color: var(--fl-danger-text);
}

:root body.customers .article_useful_buttons .btn-success:is(:hover, :focus, :active) {
  background: var(--fl-success-tint);
  color: var(--fl-success-text);
}

:root body.customers .article_useful_buttons .btn-danger:is(:hover, :focus, :active) {
  background: var(--fl-danger-tint);
  color: var(--fl-danger-text);
}

/* ---------- Customer login, register, forgot and reset password ---------- */

/* The staff-login pattern behind the form; it starts under the hairline and ends at the footer */
:root body.customers:is(.customers_login, .register) .navbar-default {
  margin-bottom: 0;
}

:root body.customers:is(.customers_login, .register) #wrapper {
  position: relative;
  isolation: isolate;
  padding-block: var(--fl-space-10) var(--fl-space-12);
}

:root body.customers:is(.customers_login, .register) #wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--fl-pattern-shape);
  -webkit-mask: url("../img/pattern-arcs-bars.svg?v=1") 50% 0 / var(--fl-pattern-size) repeat;
  mask: url("../img/pattern-arcs-bars.svg?v=1") 50% 0 / var(--fl-pattern-size) repeat;
}

:root body.customers:is(.customers_login, .register) footer.footer {
  margin-top: 0;
}

:root body.customers :is(.login-heading, .register-heading, .forgot-password-heading > h1, .mtop40.text-center > h1) {
  margin: 0 0 var(--fl-space-6);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

:root body.customers .login-form .panel-body {
  padding: var(--fl-space-8);
}

:root body.customers .login-form :is(label, .control-label) {
  color: var(--fl-ink-2);
  font-size: var(--fl-text-sm);
  font-weight: 500;
}

:root body.customers .login-form .form-control:not(.bootstrap-select) {
  height: 44px;
  padding: 0 var(--fl-space-4);
  background: var(--fl-white);
  border-color: var(--fl-client-field-border);
  border-radius: var(--fl-radius-sm);
  font-size: 16px;
}

:root body.customers .login-form .form-control:focus {
  border-color: var(--fl-blue);
  box-shadow: var(--fl-focus-ring);
}

:root body.customers .login-form .bootstrap-select > .dropdown-toggle {
  height: 44px;
  border-color: var(--fl-client-field-border);
}

/* Perfex gives the select wrapper .form-control too: it must not get the field padding, or the select sits indented */
:root body.customers .login-form .bootstrap-select.form-control {
  height: auto;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

:root body.customers .login-form .btn-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fl-space-2);
  height: 44px;
  font-size: var(--fl-text-base);
  font-weight: 600;
}

:root body.customers .login-form .btn-block + .btn-block {
  margin-top: var(--fl-space-3);
}

/* ---------- Footer ---------- */

:root body.customers footer.footer {
  height: auto; /* the theme fixed it at 50px (CT:420-427), so a wrapped line spilled out on phones */
  min-height: 56px;
  margin-top: var(--fl-space-12);
  padding: var(--fl-space-5) 0;
  background: transparent;
  border-top: 1px solid var(--fl-line);
  color: var(--fl-muted);
  font-size: var(--fl-text-xs);
}

:root body.customers footer.footer a {
  color: var(--fl-ink-2);
}

:root body.customers footer.footer a:hover {
  color: var(--fl-blue);
}

/* ---------- Colours left over in the theme's style.css ---------- */

:root body.customers .activity-feed .feed-item {
  border-left-color: var(--fl-stone); /* was lime #84c529 (CT:1291-1296) */
}

:root body.customers .activity-feed .feed-item::after {
  background: var(--fl-white);
  border-color: var(--fl-ink-2);
}

:root body.customers .activity-feed .feed-item .date {
  color: var(--fl-muted);
}

:root body.customers form.dropzone {
  background: var(--fl-paper);
  border: 1px dashed var(--fl-stone);
  border-radius: var(--fl-radius);
}

:root body.customers .dropzone .dz-message {
  color: var(--fl-blue);
}

:root body.customers .jquery-comments ul.main li.comment .name {
  color: var(--fl-ink);
}

/* !important beats the theme's own (CT:1075-1077) */
:root body.customers .jquery-comments .highlight-background {
  background: var(--fl-blue) !important;
}

:root body.customers .jquery-comments .textarea-wrapper .textarea {
  border-color: var(--fl-stone);
  border-radius: var(--fl-radius);
}

/* !important beats the theme's own (CT:902-905) */
:root body.customers .mime > a {
  color: var(--fl-ink-2) !important;
}

:root body.customers .list-status a {
  border-color: var(--fl-line);
  border-radius: var(--fl-radius);
}

:root body.customers .list-status a.active {
  background: var(--fl-paper);
}

:root body.customers :is(.gdpr-right, .gdpr-purpose) {
  border-color: var(--fl-line);
  border-radius: var(--fl-radius);
}

:root body.customers .tasks-phases .panel-body {
  background: var(--fl-paper);
}

:root body.customers .tasks-phases ._task_wrapper {
  border-color: var(--fl-line);
  border-radius: var(--fl-radius);
}

:root body.customers :is(#toplink, #botlink) {
  background: var(--fl-white);
  border-color: var(--fl-line);
  box-shadow: none;
  color: var(--fl-ink-2);
}

:root body.customers :is(#toplink, #botlink):hover {
  background: var(--fl-paper);
  color: var(--fl-blue);
}

/* Status fills used in project tasks and activity; !important beats the theme's own (CT:169-197) */
:root body.customers .success-bg {
  background: var(--fl-success) !important;
  border-color: var(--fl-success) !important;
}

:root body.customers .danger-bg {
  background: var(--fl-danger) !important;
  border-color: var(--fl-danger) !important;
}

:root body.customers .warning-bg {
  background: var(--fl-warning) !important;
  border-color: var(--fl-warning) !important;
  color: var(--fl-ink) !important; /* white on amber fails contrast */
}

:root body.customers :is(.info-bg, .primary-bg) {
  background: var(--fl-blue) !important;
  border-color: var(--fl-blue) !important;
}

/* =====================================================================================
   Public forms (often embedded in an iframe on another site, so only the "styled" variant
   gets a background)
   ===================================================================================== */

:root body:is(.web-to-lead, .ticket_form, .estimate-request-form).styled {
  background: var(--fl-bone);
}

/* !important beats forms.css (assets/css/forms.css, body.styled .form-col box-shadow) */
:root body:is(.web-to-lead, .ticket_form, .estimate-request-form).styled .form-col {
  margin-top: var(--fl-space-12);
  padding: var(--fl-space-8);
  border: 1px solid var(--fl-line);
  border-radius: var(--fl-radius);
  box-shadow: none !important;
}

:root body:is(.web-to-lead, .ticket_form, .estimate-request-form) .logo {
  margin-top: var(--fl-space-10);
}

:root body:is(.web-to-lead, .ticket_form, .estimate-request-form) .logo img {
  width: auto;
  height: var(--fl-client-doc-logo-height);
}

/* Submit colours come from the form's own settings (inline); only the shape is ours */
:root body:is(.web-to-lead, .ticket_form, .estimate-request-form) #form_submit {
  min-height: var(--fl-btn-height);
  padding: 0 var(--fl-space-5);
  border: 0;
  border-radius: var(--fl-btn-radius);
  font-weight: 600;
}

@media (max-width: 767px) {
  :root body:is(.web-to-lead, .ticket_form, .estimate-request-form).styled .form-col {
    margin-top: var(--fl-space-6);
    padding: var(--fl-space-5);
  }
}

/* =====================================================================================
   Reduced motion
   ===================================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root body.customers .navbar .dropdown-menu.animated {
    animation: none;
  }

  :root body.customers :is(.navbar-nav > li > a, .customer-top-submenu li a, #content dl > a),
  :root body.customers .navbar-nav > li > a::after {
    transition: none;
  }
}