/* =======================================================================
   pool-fence-contract.css — v1.0
   Olson-Secure-inspired visual layer for the Pool Fence Review-and-Pay
   modal. Palette-locked to Blue / Black / Gray / White.

   Scoped to #pfc-modal and #pfc-zelle. Does not affect the doors funnel,
   does not affect the configurator page chrome, does not affect SEO, and
   does not change any JS logic or Formspree payload field names.

   Hooks expected in markup (pool-fence-contract.js):
     #pfc-modal, .door-contract-modal, .door-contract-close
     .dcm-kv, .dcm-spec-wrap, .dcm-spec-table
     .dcm-fieldset, .dcm-legend, .dcm-radio
     .dcm-cost, .dcm-field
     .dcm-sign-box, .dcm-sign-canvas, .dcm-sign-clear
     .dcm-agree, .dcm-err, .dcm-submit-row, .dcm-submit-btn
     #pfc-submit-total
   ======================================================================= */

/* ---------- 1. Overlay + panel ---------------------------------------- */
#pfc-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 20px 64px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(5, 10, 20, 0.72);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
#pfc-modal[hidden] { display: none !important; }
html.pfc-open, body.pfc-open { overflow: hidden !important; }

/* The first <div> inside #pfc-modal is the white panel. */
#pfc-modal > div:not(.door-contract-backdrop) {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  background: #ffffff;
  color: #0f172a;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  padding: 36px 40px 28px;
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (max-width: 640px) {
  #pfc-modal { padding: 16px 10px 40px; }
  #pfc-modal > div:not(.door-contract-backdrop) { padding: 24px 20px 20px; border-radius: 12px; }
}

/* ---------- 2. Close button ------------------------------------------- */
#pfc-modal .door-contract-close {
  position: absolute;
  top: 14px; right: 16px;
  width: 36px; height: 36px;
  border: 0;
  background: #f1f5f9;
  color: #475569;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 10px;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
#pfc-modal .door-contract-close:hover { background: #e2e8f0; color: #0f172a; transform: scale(1.05); }

/* ---------- 3. Section headers (modal body uses <h2>, <h3>) ----------- */
#pfc-modal h2 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 700;
  color: #0b1733;
  letter-spacing: -0.015em;
}
#pfc-modal h2 + p,
#pfc-modal h2 ~ p.dcm-lead {
  margin: 0 0 24px;
  color: #475569;
  font-size: 14px;
}
#pfc-modal h3 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #0a3a8c;
  margin: 28px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}
#pfc-modal h3:first-of-type { margin-top: 8px; }

/* ---------- 4. Customer info (dl.dcm-kv) ------------------------------ */
#pfc-modal .dcm-kv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
  margin: 0 0 8px;
  padding: 18px 22px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
#pfc-modal .dcm-kv > div {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
#pfc-modal .dcm-kv dt {
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}
#pfc-modal .dcm-kv dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  word-break: break-word;
}
@media (max-width: 560px) { #pfc-modal .dcm-kv { grid-template-columns: 1fr; padding: 14px 16px; } }

/* ---------- 5. Preview photo card ------------------------------------ */
#pfc-modal #pfc-pick-section {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin: 14px 0 0 !important;
  float: none !important;
}
#pfc-modal #pfc-pick-section img { float: none !important; margin: 0 !important; width: 96px !important; height: 96px !important; object-fit: cover; border-radius: 8px; }
#pfc-modal #pfc-pick-section > div { padding: 0 !important; font-size: 14px; line-height: 1.5; }

/* ---------- 6. Specs table (.dcm-spec-table) ------------------------- */
#pfc-modal .dcm-spec-wrap { margin: 0 0 4px; }
#pfc-modal .dcm-spec-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}
#pfc-modal .dcm-spec-table th,
#pfc-modal .dcm-spec-table td {
  padding: 12px 14px;
  text-align: left;
  border-right: 1px solid #eef2f7;
}
#pfc-modal .dcm-spec-table th:last-child,
#pfc-modal .dcm-spec-table td:last-child { border-right: 0; }
#pfc-modal .dcm-spec-table thead th {
  background: #0b1733;
  color: #ffffff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}
#pfc-modal .dcm-spec-table tbody td {
  background: #ffffff;
  color: #0f172a;
  font-weight: 600;
  border-top: 1px solid #eef2f7;
}
@media (max-width: 720px) {
  #pfc-modal .dcm-spec-table thead { display: none; }
  #pfc-modal .dcm-spec-table, #pfc-modal .dcm-spec-table tbody,
  #pfc-modal .dcm-spec-table tr, #pfc-modal .dcm-spec-table td { display: block; width: 100%; border: 0; }
  #pfc-modal .dcm-spec-table tr { border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
  #pfc-modal .dcm-spec-table td { border-bottom: 1px solid #eef2f7; padding: 10px 14px; }
  #pfc-modal .dcm-spec-table td:last-child { border-bottom: 0; }
  #pfc-modal .dcm-spec-table td::before { content: attr(data-label); display: block; color: #64748b; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px; font-weight: 700; }
}

#pfc-modal .dcm-note { color: #475569; font-size: 13px; margin: 10px 0 0; line-height: 1.55; }

/* ---------- 7. Card-style radios (Install + Payment) ----------------- */
#pfc-modal .dcm-fieldset {
  border: 0; margin: 0; padding: 0;
  display: grid; gap: 10px;
}
#pfc-modal .dcm-legend {
  padding: 0;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
#pfc-modal .dcm-radio {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  color: #0f172a;
  line-height: 1.45;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
#pfc-modal .dcm-radio:hover { border-color: #94a3b8; }
#pfc-modal .dcm-radio input[type="radio"] {
  flex: 0 0 auto;
  accent-color: #0a3a8c;
  width: 18px; height: 18px;
  margin: 0;
}
@supports selector(:has(*)) {
  #pfc-modal .dcm-radio:has(input:checked) {
    border-color: #0a3a8c;
    background: #eef3fb;
    box-shadow: 0 0 0 4px rgba(10,58,140,.08);
  }
}

/* ---------- 8. Pricing hierarchy (.dcm-cost dl) ---------------------- */
#pfc-modal .dcm-cost {
  margin: 0;
  padding: 20px 22px 18px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  font-variant-numeric: tabular-nums;
}
#pfc-modal .dcm-cost > div {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0;
  font-size: 14px;
  color: #334155;
  border-bottom: 1px dashed #eef2f7;
}
#pfc-modal .dcm-cost > div:last-child { border-bottom: 0; }
#pfc-modal .dcm-cost dt { margin: 0; font-weight: 500; color: #475569; }
#pfc-modal .dcm-cost dd { margin: 0; font-weight: 600; color: #0f172a; }

/* Subtotal row */
#pfc-modal #pfc-cost-row-sub { border-top: 1px solid #e2e8f0; margin-top: 6px; padding-top: 12px; }
#pfc-modal #pfc-cost-row-sub dt, #pfc-modal #pfc-cost-row-sub dd { font-weight: 700; color: #0f172a; }

/* Big Project Total */
#pfc-modal #pfc-cost-row-total { padding: 14px 0 6px; border-bottom: 0; }
#pfc-modal #pfc-cost-row-total dt { font-size: 13px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .08em; }
#pfc-modal #pfc-cost-row-total dd { font-size: 30px; font-weight: 800; color: #0a3a8c; letter-spacing: -0.02em; }

/* Big Deposit Due Now */
#pfc-modal #pfc-cost-row-deposit {
  margin-top: 10px;
  padding: 14px 18px;
  background: #0b1733;
  border-radius: 12px;
  border-bottom: 0;
  color: #ffffff;
}
#pfc-modal #pfc-cost-row-deposit dt { font-size: 13px; font-weight: 600; color: #a6b3ce; text-transform: uppercase; letter-spacing: .08em; }
#pfc-modal #pfc-cost-row-deposit dd { font-size: 28px; font-weight: 800; color: #ffffff; letter-spacing: -0.02em; }

/* Balance row — smaller, subdued */
#pfc-modal #pfc-cost-row-balance {
  padding: 8px 2px;
  margin-top: 6px;
  font-size: 12px;
  color: #64748b;
  border-bottom: 0;
}
#pfc-modal #pfc-cost-row-balance dt { color: #64748b; font-weight: 500; }
#pfc-modal #pfc-cost-row-balance dd { color: #64748b; font-weight: 600; }

/* ---------- 9. Signature --------------------------------------------- */
#pfc-modal .dcm-field { margin: 0 0 12px; }
#pfc-modal .dcm-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}
#pfc-modal .dcm-field input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#pfc-modal .dcm-field input[type="text"]:focus {
  outline: 0;
  border-color: #0a3a8c;
  box-shadow: 0 0 0 4px rgba(10,58,140,.15);
}

#pfc-modal .dcm-sign-box { margin: 0 0 8px; }
#pfc-modal .dcm-sign-canvas,
#pfc-modal #pfc-sign-canvas {
  display: block;
  width: 100%;
  max-width: 560px;
  height: 170px;
  background: #ffffff;
  border: 2px dashed #94a3b8;
  border-radius: 10px;
  cursor: crosshair;
  touch-action: none;
}
#pfc-modal .dcm-sign-clear {
  margin-top: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
#pfc-modal .dcm-sign-clear:hover { border-color: #0a3a8c; color: #0a3a8c; }

#pfc-modal .dcm-agree {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 14px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13px;
  color: #0f172a;
  line-height: 1.55;
  cursor: pointer;
}
#pfc-modal .dcm-agree input[type="checkbox"] {
  margin-top: 3px;
  flex: 0 0 auto;
  accent-color: #0a3a8c;
  width: 16px; height: 16px;
}

/* ---------- 10. Error box + submit ----------------------------------- */
#pfc-modal .dcm-err {
  margin: 14px 0 0;
  padding: 10px 14px;
  color: #9f1239;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: 10px;
  font-size: 13px;
}
#pfc-modal .dcm-submit-row {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #e2e8f0;
  display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap;
}
#pfc-modal .dcm-submit-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(180deg, #0a3a8c 0%, #082c6c 100%);
  border: 1px solid #082c6c;
  border-radius: 12px;
  cursor: pointer;
  letter-spacing: -0.005em;
  box-shadow: 0 8px 20px rgba(10,58,140,0.25);
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
  font-variant-numeric: tabular-nums;
}
#pfc-modal .dcm-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(10,58,140,0.32); }
#pfc-modal .dcm-submit-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
#pfc-modal #pfc-submit-total { font-weight: 800; opacity: .92; margin-left: 4px; }

/* ---------- 11. Zelle payment screen --------------------------------- */
#pfc-zelle {
  position: fixed; inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 20px 64px;
  background: rgba(5, 10, 20, 0.72);
  backdrop-filter: blur(2px);
  overflow-y: auto;
}
#pfc-zelle[hidden] { display: none !important; }
#pfc-zelle > div:not(.door-contract-backdrop) {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  background: #ffffff;
  color: #0f172a;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  padding: 32px 36px 24px;
}

/* ---------- 12. Accordion #9 (Pool Fence) transparent-pricing card --- */
/* The configurator accordion row for category "pool-fence" gets a subtle
   lift so it feels like a real product card when opened. */
.accordion-item[data-cat="pool-fence"].open,
#accordion-pool-fence.open {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(10, 58, 140, 0.08);
}

/* Sticky footer CTA: make BUY NOW feel expensive on pool-fence */
#send-quote-btn[data-cta-mode="pool-fence-buy-now"] {
  background: linear-gradient(180deg, #0a3a8c 0%, #082c6c 100%) !important;
  color: #ffffff !important;
  border-color: #082c6c !important;
  font-weight: 800 !important;
  letter-spacing: -0.005em;
  padding: 14px 22px !important;
  box-shadow: 0 10px 24px rgba(10,58,140,0.28);
  transition: transform .1s ease, box-shadow .15s ease;
}
#send-quote-btn[data-cta-mode="pool-fence-buy-now"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(10,58,140,0.36);
}