/*
 * Reusable "signature on file" capture card.
 *
 * Shared by signup Step 7 (mos variantA + single-page accordion) and the standalone
 * /signup/signature page, so the merchant sees the same card wherever we ask for it.
 * Lifted out of signup/mos/variantA/step7/form.blade.php, where it started life inline.
 */
.esign-sign-card {
    background: #ffffff;
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
    padding: 40px 44px 44px;
    margin-bottom: 32px;
}
/* For a caller that already renders a card of its own — mos variantSinglePageAccordion step 7
   includes this partial inside the accordion's panel, where the chrome above would draw a second
   white box inside the first. The two pages that sit on the page background keep it. */
.esign-sign-card--flat {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0;
}
.esign-sign-title {
    font-size: 28px;
    font-weight: 700;
    color: #1f2733;
    margin: 0 0 12px;
}
.esign-sign-subtitle {
    font-size: 15px;
    line-height: 1.55;
    color: #7b8494;
    max-width: 480px;
    margin: 0 auto 28px;
}
.esign-sign-auth {
    background: #f6f8fb;
    border: 1px solid #eceff3;
    border-radius: 10px;
    /* Reduced bottom padding so the authorization text sits closer to the panel's lower edge. */
    padding: 22px 24px 12px;
    margin-bottom: 28px;
}
.esign-sign-auth-heading {
    font-size: 16px;
    font-weight: 700;
    color: #2f4c9c;
    margin: 0 0 12px;
}
.esign-sign-auth-body {
    font-size: 14px;
    line-height: 1.6;
    color: #3f4753;
    margin: 0 0 16px;
}
.esign-sign-auth a {
    color: #2e9e5b;
    font-weight: 600;
}
.esign-sign-auth a:hover { text-decoration: underline; }
/* Collapsed "View completed MPA" — a plain disclosure rather than a button, so it reads as
   optional next to the actual submit button below. */
.esign-sign-mpa {
    margin-bottom: 24px;
}
.esign-sign-mpa-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    color: #2f4c9c;
    font-size: 14px;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
}
.esign-sign-mpa-toggle:hover { color: #1f3568; }
.esign-sign-mpa-toggle:focus { outline: none; }
.esign-sign-mpa-toggle:focus-visible { outline: 2px solid #2f4c9c; outline-offset: 2px; }
.esign-sign-mpa-chevron {
    display: inline-block;
    transition: transform .15s ease;
}
.esign-sign-mpa-toggle[aria-expanded="true"] .esign-sign-mpa-chevron {
    transform: rotate(90deg);
}
.esign-sign-mpa-body {
    margin-top: 10px;
    border: 1px solid #eceff3;
    border-radius: 10px;
    overflow: hidden;
}
.esign-sign-mpa-loading,
.esign-sign-mpa-error {
    margin: 0;
    padding: 32px 16px;
    text-align: center;
    font-size: 14px;
    color: #7b8494;
}
.esign-sign-mpa-error { color: #b42318; }
.esign-sign-mpa-frame {
    display: block;
    width: 100%;
    height: 32rem;
    border: none;
}
/* The signature box: the typed name on its own signing line, then a footer with the two
   controls that belong to the signature itself — the face it is written in (bottom-left) and
   Clear (bottom-right). Height is left to the content so there's no dead space above the name. */
.esign-sign-typed {
    border: 1px solid #dde1e7;
    border-radius: 10px;
    background: #ffffff;
    margin-top: 20px;
    padding: 28px 24px 16px;
}
.esign-sign-typed-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    padding: 0 0 14px;
    color: #1f2733;
    background: transparent;
    border: none;
    border-bottom: 1px solid #d5dae1;
    /* Face and size are set by _capture_js from the shared font list, so this cannot drift from
       what the canvas render uses. Each face renders at its own size (sizeFactor, 29–42px), so a
       relative line-height made the box grow and shrink as the font changed — the line-height and
       height are fixed in px instead, sized for the largest face. 50px line + 14px padding + 1px
       border. */
    height: 65px;
    line-height: 50px;
    outline: none;
}
.esign-sign-typed-input::placeholder { color: #cbd3df; }
/* The two controls under the signing line. Plain-text controls, not buttons — they sit on the
   signature and should read as quiet options, not compete with the submit button below. */
.esign-sign-typed-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}
/* Bottom-left: which face the signature is written in, and the picker for it. _capture_js
   builds a custom listbox in here (a native <select> can't render each option in its own face
   on every browser); these style the trigger and the menu it opens. */
.esign-sign-font {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
}
.esign-sign-font-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 2px 0;
    background: none;
    border: none;
    color: #6b7280;
    font: inherit;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
}
.esign-sign-font-trigger:hover { color: #1f2733; }
.esign-sign-font-trigger:focus { outline: none; }
.esign-sign-font-trigger:focus-visible {
    outline: 2px solid #2f4c9c;
    outline-offset: 2px;
    border-radius: 4px;
}
/* The face's name, in plain UI text (not the face itself) — the trigger names the font, the
   menu below is where it is shown in its own hand. */
.esign-sign-font-current {
    font-weight: 600;
    color: #3f4753;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.esign-sign-font-caret {
    font-size: 10px;
    line-height: 1;
    transition: transform .15s ease;
}
.esign-sign-font[data-open="true"] .esign-sign-font-caret { transform: rotate(180deg); }
.esign-sign-font-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    min-width: 220px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #ffffff;
    border: 1px solid #e6e8ec;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(16, 24, 40, .14);
}
.esign-sign-font-menu[hidden] { display: none; }
/* Each option carries its own `font` inline (set by _capture_js from the shared font list), so
   the name is shown in the hand it names. Only the layout lives here. */
.esign-sign-font-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 6px 12px;
    border-radius: 6px;
    color: #1f2733;
    line-height: 1.15;
    white-space: nowrap;
    cursor: pointer;
}
.esign-sign-font-option:hover,
.esign-sign-font-option.is-active {
    background: #f2f5fa;
}
.esign-sign-font-option[aria-selected="true"] { background: #eef2f9; }
.esign-sign-font-check {
    flex: 0 0 auto;
    width: 14px;
    /* Reset the option's inline handwriting `font` for the tick, so it reads as a plain mark. */
    font: 700 14px/1 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: #2e9e5b;
}
/* Bottom-right: clear the typed name. Plain text with an × icon, matching the face picker. */
.esign-sign-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 2px 0;
    background: none;
    border: none;
    color: #6b7280;
    font: inherit;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
}
.esign-sign-clear:hover { color: #1f2733; }
.esign-sign-clear:focus { outline: none; }
.esign-sign-clear:focus-visible {
    outline: 2px solid #2f4c9c;
    outline-offset: 2px;
    border-radius: 4px;
}
.esign-sign-clear-icon {
    font-size: 17px;
    line-height: 1;
}
/* Moved out of the old controls row, onto its own quiet line under the box. */
.esign-sign-secure-note {
    margin: 12px 2px 0;
    color: #9aa1ac;
    font-size: 13px;
}
/* Amber, matching the warning language elsewhere in the e-sign UI — raised only once the typed
   name stops matching the owner it was prefilled with (see _capture_js's syncNameWarning). */
.esign-sign-typed-warning {
    margin: 12px 2px 0;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #a15c00;
    background: #fff4e5;
    border: 1px solid #ffd9a8;
    border-radius: 6px;
}
.esign-sign-attestation {
    margin: 12px 2px 0;
    font-size: 14px;
    line-height: 1.55;
    color: #9aa1ac;
}
.esign-sign-draw-label {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1f2733;
    margin-bottom: 12px;
}
/* Wrapped in an outlined box, matching the bordered checkbox cards the rest of this signup uses
   (.st-checkbox-plain in split-test.css: 1px #d8dee6, radius 10px) so the consent gate reads as
   the same kind of control the merchant has ticked on earlier steps. */
.esign-sign-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 24px 0 22px;
}
/* Bordered consent row on the single-page accordion only (its layout's body.split-test-body) —
   the other variants keep the plain checkbox + label. */
.split-test-body .esign-sign-consent {
    padding: 12px 14px;
    border: 1px solid #d8dee6;
    border-radius: 10px;
    transition: border-color 0.15s ease;
}
.split-test-body .esign-sign-consent:hover {
    border-color: #b9c2cf;
}
.esign-sign-consent input {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: #2e9e5b;
}
.esign-sign-consent label {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #3f4753;
}
/* Inline consent error under the checkbox. Colour and size repeat Bootstrap's .invalid-feedback so
   it reads the same on a layout without Bootstrap; the negative top margin pulls it up into the
   consent row's bottom margin so it sits directly under the box rather than beside the button. */
.esign-sign-consent-error {
    width: 100%;
    margin: -16px 0 16px;
    font-size: 80%;
    color: #dc3545;
    text-align: left;
}
.esign-sign-submit {
    display: inline-block;
    background: #3ddc73;
    border: 1.5px solid #3ddc73;
    border-radius: 8px;
    color: #1f2733;
    font-size: 15px;
    font-weight: 700;
    padding: 12px 22px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.esign-sign-submit:hover:not(:disabled) {
    background: #ffffff;
    color: #3ddc73;
}
/* The button ships disabled and stays that way until the authorization box is ticked
   (see signup.esign._capture_js), so this is the state it is first seen in. */
.esign-sign-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
@media (max-width: 575.98px) {
    .esign-sign-card { padding: 28px 20px 30px; }
    /* The menu is anchored to the bottom-left control; cap it to the card so its 220px min-width
       can't push it off a narrow screen. */
    .esign-sign-font-menu {
        min-width: 0;
        width: max-content;
        max-width: calc(100vw - 56px);
    }
}

/* -------------------------------------------------------------------------
 * No-apollo / variant A standalone signature page (/signup/signature).
 * Scoped to .esign-capture-noapollo, which capture.blade.php and generate.blade.php add on the
 * container only on layouts.variantA, and mos variantA step 7 always adds, so the accordion's
 * step 7 keeps the plain shared card.
 * ------------------------------------------------------------------------- */
.esign-capture-noapollo .esign-sign-card {
    border: 6px double #1f4da1;
    border-radius: 10px;
    box-shadow: none;
}
/* Tighter gap between the submit button and the bottom border — capture page only. The generate
   card ("Preparing your paperwork") has no button, so it keeps its balanced padding. */
.esign-capture-noapollo #esign-capture-card {
    padding-bottom: 24px;
}
/* Tighter bottom on the "Signature authorization" box. */
.esign-capture-noapollo .esign-sign-auth {
    padding-bottom: 10px;
}
/* Blue consent checkbox, matching the no-apollo signup form's terms checkbox
   (#007bff, see .checkbox-custom:checked in mos/steps.css). */
.esign-capture-noapollo .esign-sign-consent input {
    accent-color: #007bff;
}
/* Keep the submit button the green no-apollo primary in every state. Without this, Bootstrap's
   .btn-primary:disabled (vendor.css) repaints it blue — a higher-specificity pseudo-class that
   signup.css's plain .btn-primary override does not beat. */
.esign-capture-noapollo .btn-primary:disabled,
.esign-capture-noapollo .btn-primary.disabled {
    background-color: #1c9c48;
    border-color: #1c9c48;
}