/* Required-field markers and validation guidance.
   Loaded after styles.css / rfq-page.css on purpose: a few of these rules have
   to win against `form label > span` and `.checkbox-row span`, which are
   element-level selectors with !important on their own. */

/* ------------------------------------------------------------------ marker */
/* The star is appended inside the label's own text element, so it must stay
   inline: `form label > span` would otherwise push it onto its own line. */
.kw-req,
span.kw-req,
label span.kw-req,
form label > span.kw-req,
.checkbox-row span.kw-req {
  display: inline !important;
  color: #d94a3d !important;
  font-size: inherit !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin: 0 0 0 3px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

/* A control that is not inside a <label> is never wrapped: its parent becomes
   the positioning host and the star is pinned to the top-left corner. */
.kw-req-host {
  position: relative;
}

.kw-req-badge {
  position: absolute;
  top: 1px;
  left: 3px;
  color: #d94a3d;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}

/* --------------------------------------------------------------- invalid UI */
/* outline, not border: nothing may reflow while the user is being guided. */
.kw-req-invalid {
  outline: 2px solid #d94a3d !important;
  outline-offset: 1px;
  border-radius: 2px;
}

.kw-req-invalid:focus,
.kw-req-invalid:focus-visible {
  outline: 2px solid #d94a3d !important;
  outline-offset: 2px;
}

.kw-req-hint,
span.kw-req-hint,
label span.kw-req-hint {
  display: block !important;
  color: #d94a3d !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0;
  margin: 4px 0 0 !important;
  padding: 0 !important;
}

/* One reusable bar for the whole page; it is never stacked.
   z-index 550 clears every in-page surface the guidance has to appear over:
   app.js pins #quote-modal/#auth-modal at 130, BuyerPortal.vue uses 240 and
   InvoiceTemplateFields.vue 460. It deliberately stays below the blocking
   .kingwell-notice alertdialog (600) and the table-tools popovers (900). */
.kw-req-summary {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 32px));
  padding: 10px 16px 10px 14px;
  background: var(--white, #fff);
  color: #b23a2e;
  border: 1px solid #e7b3ac;
  border-left: 3px solid #d94a3d;
  border-radius: 4px;
  box-shadow: 0 10px 28px rgba(14, 29, 47, .18);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  z-index: 550;
}

.kw-req-summary[hidden] {
  display: none;
}

body[data-theme="dark"] .kw-req-summary {
  background: var(--white, #14273d);
  border-color: #7d3129;
  border-left-color: #d94a3d;
  color: #f3b5ad;
}