/*
 * QUOTE REQUEST FORM (public)
 * =====================================================================
 * This stylesheet has a harder job than the rest of the plugin's CSS.
 * Everything else in PaintClarity renders inside the app canvas, where
 * we control the page. This form renders inside SOMEBODY ELSE'S THEME,
 * on a painter's contact page, and we have no idea what that theme does
 * to a form. So the rules here are defensive on purpose.
 *
 * THREE THINGS EVERY RULE HERE IS GUARDING AGAINST:
 *
 * 1. INHERITANCE LOSES TO ANY DIRECTLY-MATCHING RULE, HOWEVER WEAK.
 *    Browsers do not inherit font into form controls, and most themes
 *    set their own `input { font-size: ... }`. So the controls below
 *    state `font: inherit` explicitly rather than trusting the cascade.
 *    The same trap has bitten this plugin twice before.
 *
 * 2. SPECIFICITY. A theme rule like `.site-content input[type="text"]`
 *    beats a bare `.paintops-lead-form input`. Every control rule below
 *    therefore matches BOTH the wrapper class and a class on the control
 *    itself, which outweighs the usual theme selector without resorting
 *    to !important. The two exceptions are marked where they appear:
 *    box-sizing and max-width are the two properties whose loss actually
 *    breaks the layout rather than just restyling it.
 *
 * 3. A THEME THAT FLOATS OR GRIDS ITS FORMS. The wrapper resets its own
 *    display and the rows lay themselves out, so an outer theme rule has
 *    nothing left to fight over.
 *
 * COLORS ARE VARIABLES WITH FALLBACKS, deliberately. A painter whose
 * site is orange can drop four lines in Appearance > Customize >
 * Additional CSS and have the form match their brand, without touching
 * the plugin or losing it on the next update:
 *
 *   .paintops-lead-form { --po-lead-accent: #c2410c; }
 *
 * THE SCALE MATCHES THE APP'S OWN FORMS (6px radius, 10px/14px padding,
 * 16px controls on a phone). It is not trying to look like the app, it
 * is on someone else's site, but a product should not be two different
 * sizes of itself, and the 16px floor is a real fix: below it, iOS zooms
 * the page the moment a field takes focus.
 */

.paintops-lead-form {
  --po-lead-accent: #4682B4;
  --po-lead-accent-dark: #35648a;
  --po-lead-text: #2b3440;
  --po-lead-muted: #5c6b7a;
  --po-lead-border: #ccd6de;
  --po-lead-bg: #ffffff;
  --po-lead-radius: 6px;
  --po-lead-gap: 14px;

  display: block;
  max-width: 720px;
  margin: 0 0 24px;
  text-align: left;
}

/* Box-sizing is one of the two !important rules. A theme that sets
 * content-box on form controls turns every 100%-wide field into one that
 * overflows its container by exactly the padding and border, which reads
 * as a broken plugin rather than a theme conflict. */
.paintops-lead-form,
.paintops-lead-form * {
  box-sizing: border-box !important;
}

/* ---------- Rows and layout ---------------------------------------- */

.paintops-lead-form .paintops-lead-rows {
  display: block;
  margin: 0;
  padding: 0;
}

.paintops-lead-form .paintops-lead-row {
  display: block;
  margin: 0 0 var(--po-lead-gap);
  padding: 0;
  border: 0;
  float: none;
  clear: both;
}

/* Two fields sharing a line in the stacked layout (first and last name,
 * city and state and zip). Collapses below 520px. */
.paintops-lead-form .paintops-lead-pair {
  display: flex;
  flex-wrap: wrap;
  gap: var(--po-lead-gap);
  margin: 0 0 var(--po-lead-gap);
}

.paintops-lead-form .paintops-lead-pair > .paintops-lead-row {
  flex: 1 1 180px;
  min-width: 0;
  margin: 0;
}

/* A narrow member of a pair, for a state or postal code that does not
 * need half the row. */
.paintops-lead-form .paintops-lead-pair > .paintops-lead-row.is-narrow {
  flex: 0 1 140px;
}

/* ---------- The side by side layout -------------------------------- */
/*
 * For a strip on a contact page or a panel off a menu. The fields flow
 * into as many columns as fit, which is what makes this usable in a
 * container whose width we cannot know: a 1100px content area gets four
 * columns, a 400px sidebar gets one, and nothing has to be told which.
 *
 * The description box and the button always take the full width. A
 * one-line-tall textarea next to a name field is not a form anyone wants
 * to describe a paint job in.
 */
.paintops-lead-form.is-horizontal .paintops-lead-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--po-lead-gap);
  align-items: start;
}

.paintops-lead-form.is-horizontal .paintops-lead-row,
.paintops-lead-form.is-horizontal .paintops-lead-pair {
  margin: 0;
}

.paintops-lead-form.is-horizontal .paintops-lead-pair {
  display: contents;
}

.paintops-lead-form.is-horizontal .paintops-lead-row.is-wide,
.paintops-lead-form.is-horizontal .paintops-lead-actions {
  grid-column: 1 / -1;
}

/* ---------- Labels and controls ------------------------------------ */

.paintops-lead-form .paintops-lead-label {
  display: block;
  margin: 0 0 5px;
  padding: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--po-lead-text);
  text-transform: none;
  letter-spacing: normal;
}

.paintops-lead-form .paintops-lead-req {
  color: #b3261e;
  font-weight: 600;
  margin-left: 2px;
}

.paintops-lead-form .paintops-lead-input,
.paintops-lead-form .paintops-lead-select,
.paintops-lead-form .paintops-lead-textarea {
  display: block;
  width: 100%;
  max-width: 100% !important; /* the second of the two, same reason as box-sizing */
  min-height: 42px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--po-lead-border);
  border-radius: var(--po-lead-radius);
  background: var(--po-lead-bg);
  color: var(--po-lead-text);
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  box-shadow: none;
  text-transform: none;
  appearance: none;
  -webkit-appearance: none;
}

.paintops-lead-form .paintops-lead-textarea {
  min-height: 110px;
  resize: vertical;
}

/* The native arrow is removed by the appearance reset above, so it is
 * drawn back on. Without this a select looks like a text field that
 * refuses to accept typing. */
.paintops-lead-form .paintops-lead-select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235c6b7a' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px 8px;
}

.paintops-lead-form .paintops-lead-input:focus,
.paintops-lead-form .paintops-lead-select:focus,
.paintops-lead-form .paintops-lead-textarea:focus {
  outline: 2px solid var(--po-lead-accent);
  outline-offset: 1px;
  border-color: var(--po-lead-accent);
}

.paintops-lead-form .paintops-lead-input::placeholder,
.paintops-lead-form .paintops-lead-textarea::placeholder {
  color: var(--po-lead-muted);
  opacity: 0.7;
}

.paintops-lead-form .paintops-lead-hint {
  display: block;
  margin: 5px 0 0;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  color: var(--po-lead-muted);
}

/* A field the visitor got wrong. The border alone is not enough on its
 * own (about one man in twelve cannot rely on a color change), so the
 * message under the field is what actually carries it, and the field
 * points at that message with aria-describedby. */
.paintops-lead-form .paintops-lead-row.has-error .paintops-lead-input,
.paintops-lead-form .paintops-lead-row.has-error .paintops-lead-select,
.paintops-lead-form .paintops-lead-row.has-error .paintops-lead-textarea {
  border-color: #b3261e;
}

.paintops-lead-form .paintops-lead-error {
  display: block;
  margin: 5px 0 0;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  color: #b3261e;
}

/* ---------- The button --------------------------------------------- */

.paintops-lead-form .paintops-lead-actions {
  margin: 4px 0 0;
}

.paintops-lead-form .paintops-lead-button {
  display: inline-block;
  width: auto;
  min-height: 46px;
  margin: 0;
  padding: 12px 26px;
  border: 1px solid var(--po-lead-accent-dark);
  border-radius: var(--po-lead-radius);
  background: var(--po-lead-accent);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}

.paintops-lead-form .paintops-lead-button:hover,
.paintops-lead-form .paintops-lead-button:focus {
  background: var(--po-lead-accent-dark);
  border-color: var(--po-lead-accent-dark);
  color: #fff;
}

.paintops-lead-form .paintops-lead-button:focus-visible {
  outline: 2px solid var(--po-lead-accent-dark);
  outline-offset: 2px;
}

/* ---------- Notices ------------------------------------------------- */

/* A regular 1px border all round, no thick accent bar on the left or top
   (Mike 2026-09-29: the wide side bars are what to avoid on notes; ordinary
   borders are fine). */
.paintops-lead-notice {
  max-width: 720px;
  margin: 0 0 24px;
  padding: 14px 18px;
  border: 1px solid #c8e2c8;
  border-radius: var(--po-lead-radius, 6px);
  background: #f2f9f2;
  color: #1f4620;
  font-size: 15px;
  line-height: 1.5;
}

.paintops-lead-notice.is-error {
  border-color: #e8bcb8;
  background: #fdf3f2;
  color: #7a1c15;
}

.paintops-lead-ts-note { margin: 8px 0 0; color: #7a1c15; }
/* A theme's own rule on p beats the browser's [hidden] default, and the note
   showed under a widget that said Success (Mike 2026-09-30). */
.paintops-lead-ts-note[hidden] { display: none !important; }

.paintops-lead-notice p { margin: 0; }
.paintops-lead-notice p + p { margin-top: 8px; }

/* ---------- The honeypot -------------------------------------------- */
/*
 * MOVED OFF SCREEN, NEVER type="hidden" AND NEVER display:none.
 *
 * A real hidden input is skipped by most automated form fillers, so a
 * honeypot built that way catches nothing. This one has to look like a
 * live field in the markup and be taken out of sight by the stylesheet.
 *
 * It is the ONLY hidden field of its kind on the form and it is a
 * textarea, because an automated filler that targets recognizable input
 * types (name, email, tel, street address) is exactly what a browser's
 * own autofill is, and a homeowner whose password manager helpfully
 * fills a hidden "address" field must not be treated as a robot. A
 * free-text area is close to invisible to that machinery.
 *
 * The markup carries tabindex="-1" and aria-hidden="true" as well, so a
 * keyboard or screen reader user is never dropped into it, plus a real
 * label saying to leave it empty for anything that surfaces it anyway.
 * A honeypot without those quietly discards requests from the people
 * least able to work out why nobody called them back.
 *
 * AND IF IT IS EVER WRONG, the request is still recorded and flagged,
 * never thrown away. That part lives in the PHP, but it is the reason
 * this is safe to ship at all.
 */
.paintops-lead-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none;
}

/* ---------- Phones --------------------------------------------------- */

@media (max-width: 520px) {
  .paintops-lead-form .paintops-lead-pair {
    display: block;
  }
  .paintops-lead-form .paintops-lead-pair > .paintops-lead-row {
    margin: 0 0 var(--po-lead-gap);
  }
  .paintops-lead-form .paintops-lead-pair > .paintops-lead-row.is-narrow {
    flex-basis: auto;
  }
  /* One column on a phone whatever the chosen layout. Side by side is a
   * choice about a wide contact page, not something to force through a
   * 360px screen. */
  .paintops-lead-form.is-horizontal .paintops-lead-rows {
    grid-template-columns: 1fr;
  }
  .paintops-lead-form .paintops-lead-button {
    display: block;
    width: 100%;
  }
}

/* ---------- Dark themes ---------------------------------------------- */
/*
 * Only for a site that has actually declared a dark color scheme. A
 * theme that merely happens to have a dark header is not in here, and a
 * light site on a device set to dark mode is not either: this keys off
 * the SITE's declared scheme, not the visitor's device preference,
 * because a white form on a white page is correct even at midnight.
 */
@media (prefers-color-scheme: dark) {
  html[data-theme="dark"] .paintops-lead-form,
  body.dark-mode .paintops-lead-form,
  body.is-dark .paintops-lead-form {
    --po-lead-text: #e6ebf0;
    --po-lead-muted: #a3b1bf;
    --po-lead-border: #46525f;
    --po-lead-bg: #1e252c;
  }
}