/* CF7 Signature Field
 * Override via custom properties, e.g. .cf7sig { --cf7sig-border: #999; }
 */
.cf7sig {
    display: block;
    width: 100%;
    max-width: var(--cf7sig-width, 100%);
}

.cf7sig__pad {
    position: relative;
    display: block;
    height: var(--cf7sig-height, 150px);
    border: 1px solid var(--cf7sig-border, #ced4da);
    border-radius: var(--cf7sig-radius, 4px);
    background: var(--cf7sig-bg, #fff);
    overflow: hidden;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.cf7sig__pad:focus-within,
.cf7sig__pad:hover {
    border-color: var(--cf7sig-border-active, #86b7fe);
}

/* signing line, display only – not part of the exported image */
.cf7sig__pad::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 25%;
    border-bottom: 1px dashed var(--cf7sig-line, rgba(0, 0, 0, .2));
    pointer-events: none;
}

.cf7sig__canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    touch-action: none;
}

.cf7sig__hint {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: var(--cf7sig-hint, rgba(0, 0, 0, .35));
    font-size: .9em;
    pointer-events: none;
}

.cf7sig:not(.is-empty) .cf7sig__hint {
    display: none;
}

.cf7sig__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: .25rem;
}

.cf7sig__clear {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: .875em;
    text-decoration: underline;
    opacity: .7;
    cursor: pointer;
}

.cf7sig__clear:hover,
.cf7sig__clear:focus {
    opacity: 1;
}

.cf7sig.is-empty .cf7sig__clear {
    visibility: hidden;
}

.cf7sig.wpcf7-not-valid .cf7sig__pad {
    border-color: var(--cf7sig-invalid, #dc3232);
}