/* static replica additions */
.ng-hide{display:none!important}
.ng-invalid.ng-dirty{border-color:#c00!important}
.form-builder-submit-form .security,.form-builder-submit-form .recaptcha,.form-builder-submit-form .toast_error{display:none!important}
.form-builder-thankyou{padding:24px;border:1px solid #cfd6df;background:#f5f7fa;margin:20px 0}
.form-builder-thankyou h3{margin-top:0}
/* staff e-mail dialog (mirrors the CMS viClientDialog) */
body.bz-modal-open{overflow:hidden}
.bz-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100000;display:flex;align-items:flex-start;justify-content:center;padding:60px 12px;overflow:auto}
.bz-dialog{background:#fff;width:100%;max-width:540px;box-shadow:0 8px 40px rgba(0,0,0,.4);font-family:Mulish,Arial,sans-serif}
.bz-dialog-titlebar{background:#222;color:#fff;font-size:18px;padding:6px 12px;display:flex;justify-content:space-between;align-items:center}
.bz-close{background:#fff;color:#222;border:0;border-radius:50%;width:22px;height:22px;line-height:20px;font-size:18px;cursor:pointer;padding:0}
.bz-dialog-body{padding:16px 16px 20px}
.bz-dialog .send_mail_intro{margin:0 0 14px;color:#555}
.bz-dialog .send_share_email_table{width:100%;border-collapse:collapse}
.bz-dialog .send_share_email_table td{padding:4px 4px;vertical-align:top}
.bz-dialog .send_share_email_table td:first-child{width:160px;white-space:nowrap;padding-top:8px;color:#333}
.bz-dialog .send_share_email_table input[type=text],.bz-dialog .send_share_email_table input[type=email],.bz-dialog .send_share_email_table textarea{width:100%;border:1px solid #bbb;padding:4px 6px;font:inherit;box-sizing:border-box}
.bz-dialog .send_share_email_table textarea{min-height:100px}
.bz-dialog .required{color:#c00}
.bz-error{color:#c00;margin:8px 0}
.bz-dialog .send_share_email_buttons{margin-top:12px}
.bz-dialog .send_share_email_buttons .btn{background:#e6e6e6;border:1px solid #adadad;padding:3px 10px;font-size:12px;text-transform:uppercase;cursor:pointer;border-radius:2px;margin-right:4px}
/* search page */
.static-search-form{display:flex;gap:8px;max-width:640px;margin:10px 0 24px}
.static-search-form input{flex:1;border:1px solid #bbb;padding:8px 10px;font-size:16px}
.static-search-form button{background:#243f60;color:#fff;border:0;padding:8px 18px;cursor:pointer}
.search-results{list-style:none;padding:0;margin:0}
.search-results li{padding:12px 0;border-bottom:1px solid #e3e3e3}
.search-results li a{font-size:18px}
.search-results li p{margin:4px 0 0;color:#555}
.form-builder-thankyou .form-confirm-lead{font-weight:700;font-size:1.1em}
.form-builder-thankyou a.form-confirm-pay{color:#1a4d8f;text-decoration:underline}
.form-builder-thankyou p{color:#555;line-height:1.5}
.form-builder-submit-section input[type=date],.form-builder-submit-section input[type=datetime-local]{min-height:38px;padding:4px 8px;font:inherit;max-width:260px}

/* ---- pages we authored ourselves (Veterans Memorial order form) ----
   The Granicus form bundle styles .form-field/.field-input, but it has no
   notion of a section heading, a hint under a field, or a checkbox that needs
   breathing room next to its label. */
.form-section-heading { margin: 28px 0 10px; font-weight: normal; }
.field-note { margin-top: 4px; font-size: 12px; line-height: 1.4; color: #6b7280; }
.form-field .field-column-item input[type="checkbox"],
.form-field .field-column-item input[type="radio"] { margin-right: 8px; vertical-align: middle; }
.form-field .field-column-item label { font-weight: normal; }
.form-submit-buttons { margin: 24px 0 8px; }

/* ---- Veterans Memorial artwork (Graham Beduze, 2026-09-24) ----
   Figures sit inside the form flow, so they inherit its width. The site plan is
   a wide technical drawing: on a phone it is unreadable shrunk to 320px, so it
   is allowed to scroll horizontally inside its own box rather than forcing the
   page to scroll. */
.memorial-figure { margin: 22px 0 26px; }
.memorial-figure img {
  display: block; max-width: 100%; height: auto;
  border: 1px solid #e0e4e9; border-radius: 3px; background: #fff;
}
.memorial-figure figcaption {
  margin-top: 8px; font-size: 13px; line-height: 1.5; color: #5b6570;
}
.memorial-figure-wide { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.memorial-figure-wide img { min-width: 640px; }
@media (min-width: 700px) { .memorial-figure-wide img { min-width: 0; } }

/* ---- form validation feedback (2026-09-24) ----
   The generated forms carry no CMS .vi-validate-error-live span, so a failed
   submit was invisible: focus moved and nothing else. These styles back the
   injected .field-error-msg and the summary notice by the submit button. */
.form-field.field-invalid input,
.form-field.field-invalid select,
.form-field.field-invalid textarea {
  border-color: #c0392b;
  box-shadow: 0 0 0 2px rgba(192, 57, 43, .12);
}
.field-error-msg {
  margin-top: 5px; font-size: 13px; line-height: 1.4; color: #c0392b; font-weight: 600;
}
.form-submit-notice {
  margin: 16px 0 4px; padding: 11px 14px; font-size: 14px; line-height: 1.5;
  color: #7f231a; background: #fdecea; border: 1px solid #f5c6c0;
  border-left: 4px solid #c0392b; border-radius: 3px;
}
.form-submit-notice[hidden], .field-error-msg[hidden] { display: none; }

/* payment return notice (?paid=1 after an Xpress-pay redirect) */
.paid-notice {
  margin: 12px 0 18px;
  padding: 14px 16px;
  border: 1px solid #1f3556;
  border-left-width: 6px;
  background: #eef3f9;
  color: #1a1a1a;
}
.paid-notice b { display: block; font-size: 1.05em; margin-bottom: 4px; }
.paid-notice p { margin: 0; }

/* brick line 2 preview (added 5 Oct 2026) */
.brick-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid #c9d4e0;
  border-radius: 4px;
  background: #f7f9fc;
}
.brick-line-label {
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #4a5a6a;
}
.brick-line-preview {
  font-family: "Courier New", Courier, monospace;
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #1a1a1a;
  flex: 1 1 auto;
  min-width: 10ch;
  word-break: break-all;
}
.brick-line-count {
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
  color: #4a5a6a;
  white-space: nowrap;
}
.brick-line.is-full .brick-line-count { color: #7c0607; font-weight: 700; }
.brick-line.is-full { border-color: #7c0607; }
.brick-line.is-over { border-color: #7c0607; background: #fdf3f3; }
.brick-line.is-over .brick-line-count { color: #7c0607; font-weight: 700; }
