/* The signature box (TASK-153), shared by the signing page, the invoice page and
   the template constructor. The typed name is set in the face the PDF embeds,
   served by us from /fonts/, so the page and the paper show the same letters. */

/* Marck Script (TASK-167): the face a new signature is typed in — Latin, its
   accents and Cyrillic. Dancing Script: the face of signatures typed before. */
@font-face {
    font-family: "Marck Script";
    src: url("/fonts/marck-script.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "Dancing Script";
    src: url("/fonts/dancing-script.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

.sigpad {
    width: 100%;
}

.sigpad [hidden] {
    display: none !important;
}

.sigpad__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.sigpad__tab {
    appearance: none;
    border: 2px solid #d9d9e3;
    background: #fff;
    color: #333;
    border-radius: 999px;
    padding: 6px 18px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.sigpad__tab[aria-selected="true"] {
    border-color: var(--accent, #d14472);
    color: var(--accent, #d14472);
    background: rgba(209, 68, 114, 0.06);
}

/* The box to sign in. `touch-action: none` is what lets a finger draw instead of
   scrolling the page. */
.sigpad__surface {
    position: relative;
    height: 180px;
    border: 2px dashed #cfcfdc;
    border-radius: 10px;
    background: #fff;
    touch-action: none;
}

.sigpad__canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    cursor: crosshair;
    border-radius: 10px;
}

.sigpad__line {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 44px;
    border-bottom: 1px solid #b9b9c9;
    pointer-events: none;
}

.sigpad__hint {
    position: absolute;
    left: 24px;
    bottom: 16px;
    font-size: 13px;
    color: #8a8a99;
    pointer-events: none;
}

.sigpad__row {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

.sigpad__clear {
    appearance: none;
    background: none;
    border: 0;
    color: var(--accent, #d14472);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
}

.sigpad__input {
    width: 100%;
    box-sizing: border-box;
}

.sigpad__typed {
    margin-top: 10px;
    min-height: 84px;
    display: flex;
    align-items: flex-end;
    padding: 8px 18px;
    border: 2px dashed #cfcfdc;
    border-radius: 10px;
    background: #fff;
    color: #14142b;
    font-size: 42px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
}

.sigpad__typed--held {
    border-style: solid;
    margin-top: 0;
}

.sigpad__file {
    display: block;
    margin-bottom: 10px;
}

.sigpad__preview,
.sigpad__held {
    display: block;
    max-width: 100%;
    max-height: 120px;
    background: #fff;
    border: 1px solid #e3e3ea;
    border-radius: 8px;
    padding: 6px;
}

.sigpad__error {
    color: #b42318;
    font-size: 13px;
    margin: 6px 0 0;
}

@media (max-width: 480px) {
    .sigpad__surface {
        height: 160px;
    }

    .sigpad__typed {
        font-size: 34px;
    }
}