/* v2.4.0P — Door ContractModal + Zelle payment screen
   Palette-locked: Blue (#0a3a8c / #2e6bff), Black, Gray, White only.
   Scoped to #door-contract-modal and #door-zelle-screen. */

#door-contract-modal,
#door-zelle-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px 48px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#door-contract-modal[hidden],
#door-zelle-screen[hidden] { display: none !important; }

#door-contract-modal .door-contract-backdrop,
#door-zelle-screen   .door-contract-backdrop {
  position: fixed; inset: 0;
  background: rgba(8, 12, 20, 0.74);
}

.door-contract-panel,
.door-zelle-panel {
  position: relative;
  z-index: 1;
  background: #ffffff;
  color: #14181f;
  width: 100%;
  max-width: 880px;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  padding: 28px 28px 22px;
  border: 1px solid #d6dae2;
}
.door-contract-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: 0; font-size: 20px; cursor: pointer;
  color: #6b7280; line-height: 1; padding: 6px 10px; border-radius: 8px;
}
.door-contract-close:hover { background: #f1f3f6; color: #14181f; }

.door-contract-head { margin-bottom: 18px; }
.door-contract-head h2 {
  font-size: 22px; line-height: 1.25; margin: 0 0 6px;
  color: #0b1733;
  letter-spacing: -0.01em;
}
.door-contract-sub { margin: 0; color: #4a5260; font-size: 14px; }

.dcm-section { border-top: 1px solid #e6e9ef; padding: 18px 0 6px; }
.dcm-section:first-of-type { border-top: 0; padding-top: 4px; }
.dcm-section h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #0a3a8c;
  margin: 0 0 12px;
  font-weight: 700;
}

/* Customer info key/value grid */
.dcm-kv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  margin: 0;
}
.dcm-kv > div { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.dcm-kv dt { color: #6b7280; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; flex: 0 0 84px; }
.dcm-kv dd { margin: 0; color: #14181f; font-weight: 600; font-size: 14px; word-break: break-word; min-width: 0; }
@media (max-width: 560px) { .dcm-kv { grid-template-columns: 1fr; } }

/* Spec section: preview tile + 6-col table */
.dcm-spec-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 640px) { .dcm-spec-row { grid-template-columns: 1fr; } }
.dcm-preview {
  margin: 0;
  background: #f4f6fa;
  border: 1px solid #d6dae2;
  border-radius: 10px;
  padding: 8px;
}
.dcm-preview[hidden] { display: none; }
.dcm-preview-frame {
  aspect-ratio: 3 / 5;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
}
.dcm-preview-frame img {
  max-width: 100%; max-height: 100%;
  display: block;
  transform-origin: 50% 50%;
  transition: transform .25s ease, opacity .25s ease;
}
.dcm-preview[data-swing="right"] .dcm-preview-frame img { transform: scaleX(-1); }
/* v2.4.0R: legacy CSS-filter recolor removed. Preview uses real per-color photo
   for modern-flat-mesh; scrollwork shows the gallery image at its natural tone. */
.dcm-preview figcaption { font-size: 12px; color: #4a5260; text-align: center; margin-top: 8px; }

.dcm-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  border: 1px solid #d6dae2;
  border-radius: 8px;
  overflow: hidden;
}
.dcm-spec-table th, .dcm-spec-table td {
  padding: 10px 12px;
  text-align: left;
  border-right: 1px solid #e6e9ef;
}
.dcm-spec-table th:last-child, .dcm-spec-table td:last-child { border-right: 0; }
.dcm-spec-table thead th {
  background: #0b1733;
  color: #ffffff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}
.dcm-spec-table tbody td {
  background: #ffffff;
  color: #14181f;
  font-weight: 600;
  border-top: 1px solid #e6e9ef;
}
@media (max-width: 720px) {
  .dcm-spec-table thead { display: none; }
  .dcm-spec-table, .dcm-spec-table tbody, .dcm-spec-table tr, .dcm-spec-table td { display: block; width: 100%; border: 0; }
  .dcm-spec-table tr { border: 1px solid #d6dae2; border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
  .dcm-spec-table td { border-bottom: 1px solid #e6e9ef; padding: 8px 12px; }
  .dcm-spec-table td:last-child { border-bottom: 0; }
  .dcm-spec-table td::before { content: attr(data-label); display: block; color: #6b7280; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px; font-weight: 600; }
}

/* Install radios */
.dcm-question { margin: 0 0 8px; color: #14181f; font-weight: 600; font-size: 14px; }
.dcm-install-radios { display: flex; flex-direction: column; gap: 8px; }
.dcm-install-radios .bld-radio { display: flex; gap: 8px; align-items: center; font-size: 14px; color: #14181f; }
.dcm-install-radios .bld-radio input { accent-color: #0a3a8c; }

/* Cost table */
.dcm-cost-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dcm-cost-table th, .dcm-cost-table td {
  padding: 8px 0;
  text-align: left;
  border-bottom: 1px solid #e6e9ef;
  font-weight: 500;
}
.dcm-cost-table th { color: #4a5260; font-weight: 500; }
.dcm-cost-table td { text-align: right; color: #14181f; font-variant-numeric: tabular-nums; }
.dcm-cost-table .dcm-cost-sub th, .dcm-cost-table .dcm-cost-sub td { font-weight: 700; color: #14181f; }
.dcm-cost-table .dcm-cost-total th, .dcm-cost-table .dcm-cost-total td {
  font-size: 18px; font-weight: 800; color: #0a3a8c; border-bottom: 0; padding-top: 12px;
}

/* Signature */
.dcm-sign-instr { margin: 0 0 8px; font-size: 13px; color: #4a5260; }
.dcm-sign-wrap { position: relative; }
#dcm-sign-canvas {
  display: block;
  width: 100%;
  max-width: 560px;
  height: 160px;
  background: #ffffff;
  border: 2px dashed #b6bcc8;
  border-radius: 8px;
  cursor: crosshair;
  touch-action: none;
}
.dcm-sign-clear { margin-top: 8px; font-size: 12px; padding: 6px 10px; }
.dcm-agree { margin-top: 12px; display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: #14181f; line-height: 1.45; }
.dcm-agree input { margin-top: 3px; flex: 0 0 auto; accent-color: #0a3a8c; }

/* Modal footer + buttons */
.dcm-foot { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.dcm-foot.dcm-foot-center { justify-content: center; }
.door-contract-panel .bld-btn,
.door-zelle-panel .bld-btn {
  display: inline-block;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1.2;
  transition: background .15s ease, border-color .15s ease;
}
.door-contract-panel .bld-btn.primary,
.door-zelle-panel .bld-btn.primary {
  background: #0a3a8c; color: #ffffff; border-color: #0a3a8c;
}
.door-contract-panel .bld-btn.primary:hover,
.door-zelle-panel .bld-btn.primary:hover { background: #082c6c; border-color: #082c6c; }
.door-contract-panel .bld-btn.secondary,
.door-zelle-panel .bld-btn.secondary {
  background: #ffffff; color: #0a3a8c; border-color: #c9d0db;
}
.door-contract-panel .bld-btn.secondary:hover,
.door-zelle-panel .bld-btn.secondary:hover { background: #f1f3f6; border-color: #0a3a8c; }
#dcm-submit-total { display: inline-block; margin-left: 8px; font-variant-numeric: tabular-nums; opacity: .92; }
#dcm-err { margin-top: 12px; color: #b30021; background: #fdeef0; border: 1px solid #f5c5cc; padding: 10px 12px; border-radius: 8px; }

.door-contract-panel .bld-form-row label { color: #14181f; font-weight: 600; font-size: 13px; display: block; margin-bottom: 4px; }
.door-contract-panel .bld-form-row input[type="text"] {
  width: 100%; padding: 10px 12px; border: 1px solid #c9d0db; border-radius: 8px;
  background: #ffffff; color: #14181f; font-size: 14px;
}
.door-contract-panel .bld-form-row input[type="text"]:focus { outline: 0; border-color: #0a3a8c; box-shadow: 0 0 0 3px rgba(10,58,140,.15); }

.door-contract-panel .bld-standing { margin: 14px 0 0; font-size: 12px; color: #6b7280; line-height: 1.5; }

/* ============================================================
   Zelle payment screen
   ============================================================ */
.door-zelle-panel { max-width: 640px; }
.dzs-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  align-items: center;
  margin: 12px 0 16px;
}
@media (max-width: 560px) { .dzs-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.dzs-qr { margin: 0; }
.dzs-qr img {
  display: block;
  width: 260px; height: 260px;
  background: #ffffff;
  padding: 12px;
  border: 1px solid #d6dae2;
  border-radius: 12px;
}
.dzs-qr figcaption { text-align: center; font-size: 12px; color: #4a5260; margin-top: 6px; }
.dzs-info { display: grid; gap: 14px; margin: 0; }
.dzs-info > div { display: flex; flex-direction: column; gap: 2px; }
.dzs-info dt { color: #6b7280; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.dzs-info dd { margin: 0; color: #14181f; font-size: 16px; font-weight: 600; word-break: break-word; }
.dzs-info dd #dzs-amount { color: #0a3a8c; font-size: 26px; font-weight: 800; }
.dzs-alt { margin: 12px 0 8px; }
.dzs-alt-note { margin: 8px 0 0; font-size: 13px; color: #4a5260; }
.dzs-confirm {
  margin: 12px 0 8px;
  padding: 12px 14px;
  background: #eef3fb;
  border-left: 3px solid #0a3a8c;
  border-radius: 6px;
  color: #14181f;
  font-size: 14px;
}

/* prevent page scroll behind modal */
body.dcm-open { overflow: hidden; }


/* ============================================================
   v2.4.0Q — Payment method section + new cost rows
   ============================================================ */
.dcm-pay-section { /* same chrome as install section */ }
.dcm-pay-radios { display: flex; flex-direction: column; gap: 8px; }
.dcm-pay-radios .bld-radio {
  border: 1px solid #d6dae2; border-radius: 8px;
  padding: 10px 12px; background: #ffffff; cursor: pointer;
  display: flex; gap: 8px; align-items: center;
  font-size: 14px; color: #14181f;
  transition: border-color .15s ease, background .15s ease;
}
.dcm-pay-radios .bld-radio:hover { border-color: #0a3a8c; }
.dcm-pay-radios .bld-radio input { accent-color: #0a3a8c; }
/* Highlight checked option (modern browsers; safe fallback ignored elsewhere) */
@supports selector(:has(*)) {
  .dcm-pay-radios .bld-radio:has(input:checked) {
    border-color: #0a3a8c; background: #eef3fb;
  }
}
/* Cost row consistency for new add-on rows */
#dcm-cost-row-egress td,
#dcm-cost-row-ccfee  td { color: #0a3a8c; font-weight: 600; }


/* ============================================================
   v2.4.0Q-sample — Discount code field (validator stub)
   ============================================================ */
.dcm-discount-section { /* inherits .dcm-section chrome */ }
.dcm-discount-row {
  display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap;
  margin: 0 0 6px;
}
#dcm_discount {
  flex: 1 1 220px; min-width: 0;
  padding: 10px 12px;
  border: 1px solid #c9d0db; border-radius: 8px;
  background: #ffffff; color: #14181f;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
#dcm_discount:focus {
  outline: 0;
  border-color: #0a3a8c;
  box-shadow: 0 0 0 3px rgba(10,58,140,.15);
}
#dcm_discount::placeholder { letter-spacing: .02em; text-transform: none; color: #6b7280; }
#dcm-discount-apply { flex: 0 0 auto; }
.dcm-discount-msg {
  margin: 6px 0 0; min-height: 1.2em;
  font-size: 13px; line-height: 1.4;
}
.dcm-discount-msg-info  { color: #4a5260; }
.dcm-discount-msg-error { color: #b30021; }
.dcm-discount-msg-ok    { color: #0a3a8c; font-weight: 600; }

/* Discount cost row (will be revealed once validator is live) */
#dcm-cost-row-discount td { color: #0a3a8c; font-weight: 600; }

/* ----------------------------------------------------------------------
   v2.4.0P-pfc — Pool Fence contract modal aliasing
   The pool-fence modal uses id="pfc-modal" (not #door-contract-modal),
   so the overlay rules above were never picking it up. This block aliases
   the same styles onto #pfc-modal and resolves the inline-render bug.
   ---------------------------------------------------------------------- */
#pfc-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px 48px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#pfc-modal[hidden] { display: none !important; }
#pfc-modal .door-contract-backdrop,
#pfc-modal::before {
  content: "";
  position: fixed; inset: 0;
  background: rgba(8, 12, 20, 0.74);
  z-index: 0;
}
#pfc-modal .door-contract-panel,
#pfc-modal > div:not(.door-contract-backdrop) {
  position: relative;
  z-index: 1;
  background: #ffffff;
  color: #14181f;
  width: 100%;
  max-width: 880px;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  padding: 28px 28px 22px;
  border: 1px solid #d6dae2;
}
html.pfc-open, body.pfc-open { overflow: hidden !important; }


/* ======================================================================
   v2.4.0R-ucm — Universal contract modal aliasing (Pass A · scroll/stacking)
   ---------------------------------------------------------------------
   The universal contract modal is built by universal-contract.js with
   id="ucm-modal" (and the Zelle screen id="ucm-zelle"), but every
   overlay rule above is scoped to the ID #door-contract-modal, not to
   a class. Without an alias the modal renders as an in-flow block, the
   backdrop never paints, and the sticky .total-bar (z-index:200) covers
   the SUBMIT button on mobile. This block aliases the overlay / panel /
   scroll-lock chrome onto #ucm-modal and #ucm-zelle and hides the sticky
   .total-bar while the universal modal is open so SUBMIT is always
   reachable on every viewport.
   Same pattern as the v2.4.0P-pfc block above. NO VISUAL REDESIGN HERE
   — that's Pass B.
   ====================================================================== */
#ucm-modal,
#ucm-zelle {
  position: fixed;
  inset: 0;
  z-index: 1200; /* above .total-bar (200), .mega-menu (1000), mobile header (60) */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px 48px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#ucm-modal[hidden],
#ucm-zelle[hidden] { display: none !important; }

/* Backdrop painted by the overlay itself so we don't depend on a child
   .door-contract-backdrop element existing. */
#ucm-modal::before,
#ucm-zelle::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 20, 0.74);
  z-index: 0;
}

/* Inner panel — universal-contract.js puts class="door-contract-panel"
   on the first child div. Selector matches either the class OR the
   structural first-child-div to be resilient. */
#ucm-modal .door-contract-panel,
#ucm-zelle .door-contract-panel,
#ucm-modal > div:first-child,
#ucm-zelle > div:first-child {
  position: relative;
  z-index: 1;
  background: #ffffff;
  color: #14181f;
  width: 100%;
  max-width: 880px;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  padding: 28px 28px 22px;
  border: 1px solid #d6dae2;
  margin-bottom: 48px; /* keeps SUBMIT reachable on short viewports */
}

/* Hide the configurator's sticky bottom .total-bar while the universal
   contract (or Zelle screen) is open, so it cannot cover the SUBMIT
   button on mobile. When the modal closes the class is removed and the
   bar returns to normal. */
body.dcm-open .total-bar { display: none !important; }
html.dcm-open,
body.dcm-open { overflow: hidden !important; }