/* Contract Forms – Frontend */
.cf-wrap { max-width: 720px; margin: 0 auto; font-family: inherit; }

.cf-field { margin-bottom: 18px; }
.cf-field label { display: block; font-weight: 600; margin-bottom: 5px; }
.cf-required { color: #e00; }

.cf-field input[type=text],
.cf-field input[type=email],
.cf-field input[type=tel],
.cf-field input[type=number],
.cf-field input[type=date],
.cf-field select,
.cf-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 15px;
    box-sizing: border-box;
    transition: border-color .2s;
}
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus { border-color: #0073aa; outline: none; }
.cf-field textarea { min-height: 100px; resize: vertical; }

.cf-field.cf-invalid input,
.cf-field.cf-invalid select,
.cf-field.cf-invalid textarea { border-color: #e00; }
input.cf-invalid, select.cf-invalid, textarea.cf-invalid { border-color: #e00 !important; }

/* Signature */
.cf-signature-wrap { position: relative; }
.cf-signature-canvas {
    display: block;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: crosshair;
    width: 100%;
    max-width: 500px;
    touch-action: none;
    background: #fafafa;
}
.cf-signature-canvas.cf-invalid { border-color: #e00; }
.cf-sig-clear {
    margin-top: 6px;
    padding: 4px 12px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #e00;
}

/* Checkbox / Radio */
.cf-checkbox-label,
.cf-radio-label { display: block; margin-bottom: 4px; font-weight: normal; cursor: pointer; }

/* Actions */
.cf-actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.cf-btn {
    padding: 11px 24px;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    cursor: pointer;
    transition: background .2s;
}
.cf-btn-preview,
.cf-btn-submit { background: #0073aa; color: #fff; }
.cf-btn-preview:hover,
.cf-btn-submit:hover { background: #005a87; }
.cf-btn-secondary { background: #f0f0f0; color: #333; border: 1px solid #ccc; }
.cf-btn-secondary:hover { background: #e0e0e0; }
.cf-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Contract preview */
.cf-contract-preview-box {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 32px 40px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    line-height: 1.7;
}
.cf-contract-title { margin-top: 0; font-size: 22px; color: #1a1a2e; }
.cf-contract-body img { max-width: 100%; }

/* Success */
.cf-success-msg {
    text-align: center;
    padding: 40px 20px;
    background: #f0fff4;
    border: 1px solid #b2dfdb;
    border-radius: 6px;
}
.cf-success-icon {
    display: inline-block;
    width: 56px; height: 56px;
    line-height: 56px;
    border-radius: 50%;
    background: #2e7d32;
    color: #fff;
    font-size: 28px;
    margin-bottom: 12px;
}

/* Notices */
.cf-error {
    padding: 10px 14px;
    background: #fff0f0;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    color: #c0392b;
    margin-top: 12px;
}
.cf-loader {
    padding: 10px;
    color: #555;
    font-style: italic;
}

/* OCR auto-fill */
.cf-ocr-notice {
    padding: 10px 14px;
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-radius: 4px;
    color: #2e7d32;
    margin-bottom: 16px;
    font-size: 14px;
}
.cf-ocr-notice.cf-error {
    background: #fff0f0;
    border-color: #f5c6cb;
    color: #c0392b;
}
.cf-ocr-filled {
    background: #fffde7 !important;
    border-color: #f9a825 !important;
    transition: background 1s ease;
}

/* Review page signature */
.cf-review-signatures {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid #e0e0e0;
}
.cf-sig-heading {
    font-size: 17px;
    margin: 0 0 6px;
    color: #1a1a2e;
}
.cf-sig-instruction {
    color: #555;
    font-size: 14px;
    margin: 0 0 16px;
}
.cf-review-sig-field { margin-bottom: 0; }

/* Policy agreement checkbox */
.cf-policy-agree {
    margin-top: 24px;
    padding: 14px 16px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.cf-policy-agree.cf-invalid {
    border-color: #e00;
    background: #fff0f0;
}
.cf-policy-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    cursor: pointer;
    font-weight: normal;
}
.cf-policy-label input[type=checkbox] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Current date (auto) field — read-only */
.cf-field input.cf-current-date {
    background: #f5f5f5;
    color: #555;
    cursor: default;
    border-color: #ddd;
}

/* Keep-together: use class="cf-keep-together" on any block in the contract template */
.cf-keep-together { page-break-inside: avoid; }