/* =====================================================================
   DocumentForm · front-end
   Designed to sit inside <div class="olya-form"> and reuse its look
   (navy card, #eeeeee pill fields, gold #d3ae5b accents).
   px and % only, no CSS variables, no font loading.
   ===================================================================== */

/* conditional sections */
[data-df-show][hidden] { display: none !important; }

/* ---------- signature pad ---------- */
.df-sig-pad {
  position: relative; display: block; width: 100%; height: 190px;
  background-color: #eeeeee; border: 2px solid transparent; border-radius: 24px;
  overflow: hidden; box-sizing: border-box; cursor: crosshair;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.df-sig-pad canvas {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: block; touch-action: none; z-index: 2;
}
.df-sig-hint {
  position: absolute; left: 22px; right: 110px; top: 16px; z-index: 1;
  font-size: 15px; line-height: 1.3; color: #7d8798; pointer-events: none;
  transition: opacity .2s ease;
}
.df-sig-line {
  position: absolute; left: 22px; right: 22px; bottom: 44px; z-index: 1;
  border-bottom: 1px dashed #a8b0bf; pointer-events: none;
}
.df-sig-line::before {
  content: "\00D7"; position: absolute; left: 0; bottom: 4px;
  font-size: 18px; line-height: 1; color: #a8b0bf;
}
.df-sig-pad.has-signature .df-sig-hint { opacity: 0; }
.df-sig-clear {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  margin: 0; padding: 7px 16px; border: 1px solid #c3c9d4; border-radius: 999px;
  background: #ffffff; color: #1a2333; font: inherit; font-size: 13px; line-height: 1.2;
  cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.df-sig-pad.has-signature .df-sig-clear { opacity: 1; pointer-events: auto; }
.df-sig-clear:hover { border-color: #1a2333; }
.df-sig-clear:focus-visible { outline: 2px solid #d3ae5b; outline-offset: 2px; }
.df-sig-pad.is-signing { border-color: #d3ae5b; box-shadow: 0 0 0 4px rgba(211, 174, 91, .25); }
.df-sig-pad.wpcf7-not-valid { border-color: #ff8f7e; }

/* ---------- phone: prefix 1/3 + number 2/3 (desktop), stacked on mobile ---------- */
/* CF7 wraps the two fields in a <p>; display:contents lets them sit in the grid. */
.of-phone { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 14px; width: 100%; align-items: start; }
.of-phone > p { display: contents; margin: 0; padding: 0; }
.of-phone br { display: none; }
.of-phone .wpcf7-form-control-wrap { display: block; width: 100%; min-width: 0; }
.olya-form form.wpcf7-form select.df-prefix.of { padding-left: 18px; padding-right: 44px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

/* ---------- document text in a scroll box ---------- */
.df-doc {
  max-height: 380px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 22px 24px; border-radius: 20px; box-sizing: border-box;
  border: 1px solid rgba(127, 135, 152, .35); background: rgba(127, 135, 152, .08);
  font-size: 14px; line-height: 1.6; text-align: left;
}
.df-doc:focus-visible { outline: 2px solid #d3ae5b; outline-offset: 2px; }
.df-doc h1, .df-doc h2, .df-doc h3, .df-doc h4 { font-size: 16px; line-height: 1.35; margin: 20px 0 8px; padding: 0; }
.df-doc h1:first-child, .df-doc h2:first-child, .df-doc p:first-child { margin-top: 0; }
.df-doc p { margin: 0 0 10px; padding: 0; }
.df-doc ul, .df-doc ol { margin: 0 0 10px 20px; padding: 0; }
.df-doc blockquote { margin: 0 0 10px 14px; padding: 0; border: 0; }
.df-doc .df-blank { display: inline-block; min-width: 120px; border-bottom: 1px solid currentColor; opacity: .5; }
.df-doc .df-blank-sig { min-width: 180px; }

/* navy OLYA card */
.olya-form .df-doc { color: #ffffff; border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .05); scrollbar-color: #d3ae5b transparent; scrollbar-width: thin; }
.olya-form .df-doc h1, .olya-form .df-doc h2, .olya-form .df-doc h3, .olya-form .df-doc h4 { color: #d3ae5b; }
.olya-form .df-doc a { color: #d3ae5b; }
.olya-form .df-doc::-webkit-scrollbar { width: 8px; }
.olya-form .df-doc::-webkit-scrollbar-thumb { background: #d3ae5b; border-radius: 8px; }

/* section headings inside the card */
.olya-form form.wpcf7-form .of-h.of-h-section { font-size: 17px; color: #d3ae5b; margin: 14px 0 4px; }

@media (max-width: 600px) {
  .of-phone { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .df-sig-pad { height: 170px; }
  .df-doc { max-height: 320px; padding: 18px; }
}

/* Consent checkboxes: keep the text plain when ticked (the site CSS turns ticked
   list items into gold "chips", which is meant for the destination chips only). */
.olya-form form.wpcf7-form .of-consent .wpcf7-list-item input:checked + .wpcf7-list-item-label,
.olya-form form.wpcf7-form .of-consent .wpcf7-list-item label:hover .wpcf7-list-item-label {
  background: none; border: 0; color: #ffffff;
}