/* Shared look & feel for the waiver / contract signing modals.
   Used by register.aspx, Sign.aspx and UpgradeMembership.aspx — link this file on any
   page that shows a signing modal. The reference design is the register page. */

/* The dialog is capped to the viewport and only the body scrolls, so the footer with
   the Accept & Sign button stays visible even on short screens. */
.sign-doc-modal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 20px); /* .modal-dialog has 10px top/bottom margin on xs */
    overflow: hidden;
}

@media (min-width: 768px) {
    .sign-doc-modal .modal-content {
        max-height: calc(100vh - 60px); /* 30px top/bottom margin on sm and up */
    }
}

.sign-doc-modal .modal-header,
.sign-doc-modal .modal-footer {
    flex-shrink: 0;
}

.sign-doc-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Document text (waiver / contract HTML rendered from RTF). */
.sign-doc-modal .waiver-html {
    line-height: 1.6;
    text-align: left;
}

    .sign-doc-modal .waiver-html img {
        max-width: 100%;
        height: auto;
        display: block; /* prevents odd inline gaps */
    }

    .sign-doc-modal .waiver-html table {
        width: 100% !important; /* Word/RTF tables often have fixed width */
        table-layout: auto;
    }

/* Scrollable document pane inside the modal body. */
.sign-doc-modal .sign-doc-text {
    max-height: 400px;
    overflow-y: auto;
    word-break: break-word;
}

/* Signature pad container. */
.sign-doc-modal .sign-doc-canvas {
    border: 1px solid #ccc;
    width: 100%;
    height: 200px;
    position: relative;
}

    .sign-doc-modal .sign-doc-canvas canvas {
        width: 100%;
        height: 100%;
    }

/* Parent / legal guardian consent block shown when the member is a minor. */
.guardian-consent {
    margin: 0 0 18px 0;
    border: 1px solid #ecd9a0;
    background: #fffdf6;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    overflow: hidden;
    text-align: left;
}

.guardian-consent__header {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    background: #fbf1cf;
    border-bottom: 1px solid #ecd9a0;
    color: #8a6d3b;
    font-weight: 600;
    font-size: 14px;
}

    .guardian-consent__header i {
        font-size: 18px;
        margin-right: 10px;
    }

.guardian-consent__body {
    padding: 16px 18px;
}

.guardian-consent__row {
    margin-bottom: 14px;
}

    .guardian-consent__row label {
        display: block;
        font-weight: 600;
        color: #555;
        font-size: 13px;
        margin-bottom: 5px;
    }

.guardian-consent .form-control {
    max-width: 420px;
}

.guardian-attest {
    display: flex;
    align-items: flex-start;
    background: #fff;
    border: 1px dashed #d9c47a;
    border-radius: 6px;
    padding: 11px 13px;
    font-size: 13px;
    font-weight: normal;
    color: #444;
    margin: 6px 0 0 0;
}

    .guardian-attest input {
        margin: 3px 9px 0 0;
    }