/* ============================================================
   v2.4.0S-ucm Pass B — Universal Contract Modal visual parity
   ----------------------------------------------------------------
   Strictly scoped to #ucm-modal and #ucm-zelle.
   Loaded AFTER door-contract.css so it overrides only the visuals
   while the Pass A overlay/scroll/stacking rules in
   door-contract.css remain in force.
   No global selectors. No page-wide change.
   ============================================================ */

/* ---- Tokens (contract-only; do not leak to other surfaces) ---- */
#ucm-modal,
#ucm-zelle {
  --uc-navy:    #1a3a8f;
  --uc-blue:    #1d4ed8;
  --uc-red:     #cc0000;
  --uc-green:   #16a34a;
  --uc-ink:     #1f2937;
  --uc-ink-2:   #374151;
  --uc-mute:    #6b7280;
  --uc-rule:    #9ca3af;
  --uc-rule-2:  #d1d5db;
  --uc-bg-row:  #fffde7;
  --uc-bg-hd:   #e8e8e8;
  --uc-bg-ro:   #f9f9f9;
  --uc-bg-soft: #f9fafb;
  --uc-bg-sub:  #fafafa;
  --uc-paper:   #ffffff;
  --uc-stack:   'Inter', Arial, Helvetica, sans-serif;
  --uc-serif:   Georgia, 'Times New Roman', serif;
  --uc-display: 'Oswald', Impact, 'Arial Narrow Bold', sans-serif;
}

/* ---- Panel chrome ---- */
#ucm-modal .door-contract-panel,
#ucm-zelle .door-contract-panel {
  background: var(--uc-paper);
  color: #111827;
  font-family: var(--uc-stack);
  max-width: 880px;
  width: calc(100% - 24px);
  padding: 24px;
  border-radius: 4px;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  position: relative;
  margin: 24px auto;
}

/* Close button: absolute top-right */
#ucm-modal .door-contract-close,
#ucm-zelle .door-contract-close {
  position: absolute;
  top: 8px; right: 12px;
  width: 32px; height: 32px;
  border: 0; background: transparent;
  font-size: 24px; line-height: 1;
  color: var(--uc-mute);
  cursor: pointer;
  z-index: 2;
}
#ucm-modal .door-contract-close:hover,
#ucm-zelle .door-contract-close:hover { color: var(--uc-ink); }

/* Hide all the OLD Pass A chrome — we are replacing it with the reference layout below. */
#ucm-modal .door-contract-title,
#ucm-modal .door-contract-sub,
#ucm-modal h3.door-contract-h3,
#ucm-modal .dcm-kv,
#ucm-modal .dcm-fieldset,
#ucm-modal .dcm-cost,
#ucm-modal .dcm-spec-wrap,
#ucm-modal .dcm-note,
#ucm-modal .dcm-field,
#ucm-modal .dcm-sign-box,
#ucm-modal .dcm-sign-clear,
#ucm-modal .dcm-agree,
#ucm-modal .dcm-submit-row,
#ucm-modal .dcm-err { display: none !important; }

/* ---- Quote banner ---- */
#ucm-modal .uc-quote {
  text-align: center;
  font-family: var(--uc-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  color: var(--uc-ink);
  border-bottom: 2px solid var(--uc-ink);
  padding: 0 0 12px;
  margin: 0 0 16px;
}

/* ---- Header grid ---- */
#ucm-modal .uc-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 16px;
}
#ucm-modal .uc-bizinfo {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
#ucm-modal .uc-logo {
  height: 80px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
#ucm-modal .uc-services {
  font-size: 12px;
  line-height: 18px;
  color: var(--uc-ink);
}
#ucm-modal .uc-services .uc-site {
  font-weight: 700;
  font-size: 14px;
  color: var(--uc-navy);
  letter-spacing: .02em;
}
#ucm-modal .uc-services .uc-spacer { height: 4px; }
#ucm-modal .uc-services .uc-phone { font-weight: 700; }

/* Bill-to fields (read-only locked) */
#ucm-modal .uc-billto {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
#ucm-modal .uc-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
#ucm-modal .uc-row .uc-label {
  font-weight: 700;
  font-size: 12px;
  width: 100px;
  flex-shrink: 0;
  color: var(--uc-ink);
  letter-spacing: .03em;
  text-transform: uppercase;
}
#ucm-modal .uc-row .uc-val {
  flex: 1 1 auto;
  border: 1px solid var(--uc-rule-2);
  background: var(--uc-bg-ro);
  color: var(--uc-ink-2);
  padding: 6px 8px;
  font-size: 13px;
  min-height: 28px;
  line-height: 16px;
  font-family: var(--uc-stack);
  word-break: break-word;
}
#ucm-modal .uc-row .uc-val.uc-empty { color: #9ca3af; font-style: italic; }
#ucm-modal .uc-row input.uc-val.uc-editable {
  background: #fff;
  cursor: text;
}
#ucm-modal .uc-row input.uc-val.uc-editable:focus {
  outline: none;
  border-color: var(--uc-blue);
}

/* ---- Items spec table ---- */
#ucm-modal .uc-spec-wrap { margin: 0 0 4px; overflow-x: auto; }
#ucm-modal .uc-spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  background: #fff;
}
#ucm-modal .uc-spec thead th {
  background: var(--uc-bg-hd);
  border: 1px solid var(--uc-rule);
  padding: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: center;
  color: var(--uc-ink);
  white-space: nowrap;
}
#ucm-modal .uc-spec tbody td {
  border: 1px solid var(--uc-rule);
  padding: 6px 4px;
  text-align: center;
  vertical-align: middle;
  color: var(--uc-ink-2);
}
#ucm-modal .uc-spec tbody tr.uc-item-row { background: var(--uc-bg-row); }
#ucm-modal .uc-spec tbody tr.uc-item-row td.uc-strong { font-weight: 700; color: var(--uc-ink); }
#ucm-modal .uc-spec tbody tr.uc-item-row td.uc-color  { font-weight: 700; color: var(--uc-ink); }

#ucm-modal .uc-spec tbody tr.uc-preview-row td {
  background: var(--uc-bg-sub);
  padding: 12px;
  text-align: center;
}
#ucm-modal .uc-preview-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
#ucm-modal .uc-preview-stack .uc-preview-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--uc-mute);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 4px;
}
#ucm-modal .uc-thumb {
  max-height: 220px;
  max-width: 320px;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--uc-rule-2);
  background: #fff;
}
#ucm-modal .uc-preview-caption {
  font-size: 11px;
  color: var(--uc-ink-2);
  margin: 4px 0 0;
}
#ucm-modal .uc-customer-photos {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-top: 6px;
}
#ucm-modal .uc-customer-photos img {
  width: 80px; height: 80px; object-fit: cover;
  border: 1px solid var(--uc-rule-2);
}

/* ---- Red caveat ---- */
#ucm-modal .uc-caveat {
  text-align: center;
  font-family: var(--uc-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 13px;
  color: var(--uc-red);
  margin: 12px 0;
}

/* ---- Order Cost Breakdown ---- */
#ucm-modal .uc-cost-panel {
  border: 1px solid var(--uc-rule-2);
  background: var(--uc-bg-soft);
  margin: 0 0 16px;
}
#ucm-modal .uc-cost-header {
  background: var(--uc-navy);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 6px 12px;
  border-bottom: 1px solid var(--uc-rule-2);
}
#ucm-modal .uc-cost-body { padding: 12px; }
#ucm-modal .uc-cost-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: var(--uc-ink-2);
}
#ucm-modal .uc-cost-table thead th {
  text-align: left;
  font-weight: 600;
  color: var(--uc-mute);
  padding: 4px 12px 4px 0;
  border-bottom: 1px solid var(--uc-rule-2);
}
#ucm-modal .uc-cost-table thead th:last-child { text-align: right; }
#ucm-modal .uc-cost-table tbody td {
  padding: 6px 12px 6px 0;
  border-bottom: 1px solid #e5e7eb;
}
#ucm-modal .uc-cost-table tbody td.uc-cost-item    { font-weight: 500; color: var(--uc-ink); }
#ucm-modal .uc-cost-table tbody td.uc-cost-details { color: var(--uc-mute); font-style: italic; }
#ucm-modal .uc-cost-table tbody td.uc-cost-amount  { text-align: right; font-weight: 700; color: var(--uc-navy); }

#ucm-modal .uc-cost-table tfoot tr.uc-cost-sub td {
  border-top: 2px solid var(--uc-navy);
  padding-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--uc-ink);
}
#ucm-modal .uc-cost-table tfoot tr.uc-cost-sub td.uc-cost-amount { color: var(--uc-navy); }

#ucm-modal .uc-cost-table tfoot tr.uc-cost-tax td {
  padding: 2px 12px 2px 0;
  font-size: 11px;
  color: var(--uc-mute);
}
#ucm-modal .uc-cost-table tfoot tr.uc-cost-tax td.uc-cost-amount { color: var(--uc-mute); font-weight: 500; }

#ucm-modal .uc-cost-table tfoot tr.uc-cost-total td {
  border-top: 1px solid var(--uc-rule-2);
  padding-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}
#ucm-modal .uc-cost-table tfoot tr.uc-cost-total td.uc-cost-amount {
  color: var(--uc-red);
  font-size: 16px;
}

/* ---- Payment Details panel ---- */
#ucm-modal .uc-pay-panel {
  border: 2px solid var(--uc-ink);
  margin: 0 0 16px;
  background: #fff;
}
#ucm-modal .uc-pay-header {
  background: #f3f4f6;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 6px 12px;
  border-bottom: 1px solid var(--uc-rule);
  color: var(--uc-ink);
}
#ucm-modal .uc-pay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
#ucm-modal .uc-pay-cell {
  padding: 12px;
  border-right: 1px solid var(--uc-rule);
  font-size: 12px;
  color: var(--uc-ink-2);
}
#ucm-modal .uc-pay-cell:last-child { border-right: 0; }
#ucm-modal .uc-pay-cell .uc-pay-title {
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  border-bottom: 1px solid var(--uc-rule-2);
  padding-bottom: 4px;
  margin: 0 0 8px;
  color: var(--uc-ink);
}
#ucm-modal .uc-pay-line {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin: 2px 0;
  gap: 8px;
}
#ucm-modal .uc-pay-line.uc-pay-strong {
  font-weight: 700;
  border-top: 1px solid var(--uc-rule-2);
  padding-top: 4px;
  margin-top: 4px;
}
#ucm-modal .uc-pay-line.uc-pay-strong .uc-pay-amount { color: var(--uc-navy); font-size: 15px; }
#ucm-modal .uc-pay-cell.uc-pay-balance .uc-pay-line.uc-pay-strong .uc-pay-amount { color: var(--uc-green); }
#ucm-modal .uc-pay-cell.uc-pay-balance .uc-pay-zero { color: var(--uc-green); font-weight: 700; }
#ucm-modal .uc-pay-cell .uc-pay-mute { color: var(--uc-mute); font-style: italic; font-size: 11px; }

/* ---- Acceptance / install / payment-method radios ---- */
#ucm-modal .uc-acceptance {
  border: 1px solid var(--uc-rule-2);
  padding: 12px;
  font-size: 12px;
  line-height: 18px;
  margin: 0 0 16px;
  color: var(--uc-ink-2);
}
#ucm-modal .uc-acceptance .uc-acc-head {
  font-weight: 700;
  text-decoration: underline;
  margin: 0 0 6px;
  color: var(--uc-ink);
}
#ucm-modal .uc-acceptance p { margin: 0 0 6px; }
#ucm-modal .uc-acceptance p:last-child { margin-bottom: 0; }

#ucm-modal .uc-radio-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--uc-ink-2);
}
#ucm-modal .uc-radio-group .uc-rg-title {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--uc-ink);
  margin: 0 0 4px;
}
#ucm-modal .uc-radio-group label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  padding: 4px 0;
}
#ucm-modal .uc-radio-group input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--uc-blue);
}

/* ---- Signature grid ---- */
#ucm-modal .uc-sig-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0 0 16px;
}
#ucm-modal .uc-sig-label { font-size: 12px; font-weight: 700; margin: 0 0 4px; color: var(--uc-ink); }
#ucm-modal .uc-sig-canvas-wrap {
  border: 1px solid var(--uc-rule);
  background: var(--uc-bg-ro);
  border-radius: 4px;
  position: relative;
}
#ucm-modal canvas#ucm-sign-canvas {
  display: block;
  width: 100%;
  height: 80px;
  cursor: crosshair;
  background: var(--uc-bg-ro);
}
#ucm-modal .uc-sig-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--uc-mute);
}
#ucm-modal .uc-sig-clear {
  background: none;
  border: 0;
  color: var(--uc-mute);
  cursor: pointer;
  font-size: 11px;
  padding: 0;
}
#ucm-modal .uc-sig-clear:hover { color: var(--uc-red); }
#ucm-modal .uc-sig-hint { margin-left: auto; font-style: italic; }

#ucm-modal .uc-sig-typed { margin-top: 8px; }
#ucm-modal .uc-sig-typed label,
#ucm-modal .uc-sig-date label {
  display: block;
  font-size: 11px;
  color: var(--uc-mute);
  margin: 0 0 2px;
}
#ucm-modal .uc-sig-typed input,
#ucm-modal .uc-sig-date input {
  width: 100%;
  border: 1px solid var(--uc-rule-2);
  padding: 6px 8px;
  font-size: 13px;
  font-family: var(--uc-stack);
  color: var(--uc-ink);
}
#ucm-modal .uc-sig-typed input:focus { outline: none; border-color: var(--uc-blue); }
#ucm-modal .uc-sig-date input { background: var(--uc-bg-ro); }
#ucm-modal .uc-sig-date { margin-top: 8px; }

#ucm-modal .uc-rep-box {
  border: 1px solid var(--uc-rule-2);
  background: var(--uc-bg-ro);
  padding: 8px;
  height: 40px;
  display: flex;
  align-items: center;
}
#ucm-modal .uc-rep-box span {
  font-style: italic;
  color: var(--uc-mute);
  font-size: 12px;
}
#ucm-modal .uc-rep-eta { margin-top: 16px; }

/* ---- Final terms strip ---- */
#ucm-modal .uc-final-terms {
  border-top: 2px solid var(--uc-ink);
  padding-top: 12px;
  margin: 0 0 16px;
  text-align: center;
}
#ucm-modal .uc-final-terms .uc-final-1 {
  font-weight: 700;
  font-size: 13px;
  color: var(--uc-ink);
  margin: 0 0 4px;
}
#ucm-modal .uc-final-terms .uc-final-2 {
  font-size: 11px;
  color: var(--uc-mute);
  margin: 0;
}

/* ---- Agree checkbox + error ---- */
#ucm-modal .uc-agree {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12px;
  color: var(--uc-ink-2);
  margin: 0 0 12px;
}
#ucm-modal .uc-agree input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--uc-blue);
}
#ucm-modal .uc-err {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 0 0 12px;
}

/* ---- Submit button ---- */
#ucm-modal .uc-submit {
  display: block;
  width: 100%;
  padding: 16px;
  background: var(--uc-blue);
  color: #fff;
  border: 0;
  font-family: var(--uc-display);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: .15em;
  cursor: pointer;
  transition: opacity .15s ease;
}
#ucm-modal .uc-submit:hover:not(:disabled) { opacity: .9; }
#ucm-modal .uc-submit:disabled { opacity: .6; cursor: wait; }
#ucm-modal .uc-fineprint {
  text-align: center;
  font-size: 11px;
  color: var(--uc-mute);
  margin: 8px 0 0;
}

/* ---- Mobile (≤ 720px) ---- */
@media (max-width: 720px) {
  #ucm-modal .door-contract-panel { padding: 16px; margin: 12px auto; }
  #ucm-modal .uc-header { grid-template-columns: 1fr; gap: 12px; }
  #ucm-modal .uc-bizinfo { gap: 10px; }
  #ucm-modal .uc-logo { height: 64px; }
  #ucm-modal .uc-services { font-size: 11px; line-height: 16px; }
  #ucm-modal .uc-row .uc-label { width: 80px; font-size: 11px; }
  #ucm-modal .uc-pay-grid { grid-template-columns: 1fr; }
  #ucm-modal .uc-pay-cell { border-right: 0; border-bottom: 1px solid var(--uc-rule); }
  #ucm-modal .uc-pay-cell:last-child { border-bottom: 0; }
  #ucm-modal .uc-sig-grid { grid-template-columns: 1fr; gap: 16px; }
  #ucm-modal .uc-spec thead th { font-size: 8px; padding: 4px 2px; }
  #ucm-modal .uc-spec tbody td { padding: 4px 2px; font-size: 10px; }
  #ucm-modal .uc-thumb { max-height: 180px; max-width: 100%; }
  #ucm-modal .uc-submit { font-size: 16px; padding: 14px; letter-spacing: .1em; }
  #ucm-modal .uc-quote { font-size: 13px; }
  #ucm-modal .uc-caveat { font-size: 12px; }
}


/* =====================================================================
   Pass C additions: prominent PAY CTAs (Zelle blue / QuickBooks green) +
   enhanced SELECTED CONFIGURATION block
   ===================================================================== */
#ucm-modal .uc-pay-methods { margin: 18px 0 4px; }
#ucm-modal .uc-pay-btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 8px;
}
#ucm-modal .uc-pay-card {
  display: block;
  position: relative;
  padding: 16px 18px 16px 44px;
  border-radius: 12px;
  border: 2px solid var(--uc-rule-2);
  background: #ffffff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
#ucm-modal .uc-pay-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
#ucm-modal .uc-pay-card input[type="radio"] {
  position: absolute;
  left: 16px; top: 20px;
  margin: 0;
  width: 18px; height: 18px;
  accent-color: currentColor;
  cursor: pointer;
}
#ucm-modal .uc-pay-card .uc-pay-body { display: block; }
#ucm-modal .uc-pay-card .uc-pay-label {
  font-family: var(--uc-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 6px;
}
#ucm-modal .uc-pay-card .uc-pay-sub {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--uc-ink-2);
}
/* Zelle (blue) */
#ucm-modal .uc-pay-card.is-zelle { color: var(--uc-blue); }
#ucm-modal .uc-pay-card.is-zelle.is-selected {
  border-color: var(--uc-blue);
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}
#ucm-modal .uc-pay-card.is-zelle .uc-pay-label::before {
  content: "\26A1 ";
  margin-right: 4px;
}
/* QuickBooks / Credit Card (green) */
#ucm-modal .uc-pay-card.is-cc { color: #15803d; }
#ucm-modal .uc-pay-card.is-cc.is-selected {
  border-color: #15803d;
  background: #f0fdf4;
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.15);
}
#ucm-modal .uc-pay-card.is-cc .uc-pay-label::before {
  content: "\1F4B3 ";
  margin-right: 4px;
}

/* --- Enhanced SELECTED CONFIGURATION block (overrides Pass B rules above) --- */
#ucm-modal .uc-preview-row > td {
  padding: 0 !important;
  border: 0 !important;
  background: #fff !important;
}
#ucm-modal .uc-preview-stack {
  padding: 14px 8px 18px;
  text-align: center;
  background: var(--uc-bg-sub);
  border-top: 1px solid var(--uc-rule);
  border-bottom: 1px solid var(--uc-rule);
  display: block;
}
#ucm-modal .uc-preview-title {
  font-family: var(--uc-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 13px;
  color: var(--uc-ink);
  margin-bottom: 4px;
}
#ucm-modal .uc-preview-sub {
  font-size: 11.5px;
  color: var(--uc-mute);
  margin-bottom: 10px;
}
#ucm-modal .uc-thumb {
  display: block;
  margin: 6px auto 0;
  max-width: 420px;
  max-height: 280px;
  width: auto;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--uc-rule-2);
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
#ucm-modal .uc-preview-caption {
  font-style: italic;
  font-size: 13px;
  color: var(--uc-ink-2);
  margin: 10px 0 0;
}

/* Mobile tweaks for Pass C */
@media (max-width: 720px) {
  #ucm-modal .uc-pay-btn-row { grid-template-columns: 1fr; }
  #ucm-modal .uc-pay-card { padding: 14px 14px 14px 40px; }
  #ucm-modal .uc-pay-card .uc-pay-label { font-size: 15px; }
  #ucm-modal .uc-pay-card .uc-pay-sub { font-size: 12px; }
  #ucm-modal .uc-thumb { max-height: 220px; max-width: 100%; }
  #ucm-modal .uc-preview-title { font-size: 12px; }
}