/* ==========================================================================
   Terms and Conditions: the document itself, and the signing pop-up.

   Two things share this file because they share the document's typography:
   - the /terms page (templates/Pages/terms.php), and
   - the pop-up on the casual booking and membership application pages
     (templates/element/terms_sign_modal.php), which loads that same page into
     itself and adds a signing section underneath.
   Loaded wherever either of them appears; nothing here depends on another
   stylesheet, so it looks the same under every layout.
   ========================================================================== */

/* ---- The document ------------------------------------------------------- */

.mm-terms {
    max-width: 800px;
    margin: 0 auto;
    padding: 56px 24px 96px;
    line-height: 1.6;
    color: #1a1a1a;
}
.mm-terms h1 {
    font-size: 32px;
    margin-bottom: 4px;
}
.mm-terms .mm-terms-updated {
    color: #666666;
    font-size: 15.5px;
    margin-bottom: 32px;
}
.mm-terms-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
    font-size: 15.5px;
    color: #FF6900;
    text-decoration: none;
    font-weight: 600;
}
.mm-terms-back:hover {
    text-decoration: underline;
}

/* Part A / B / C headings, then clauses, then sub-clauses. */
.mm-terms h2.mm-terms-part,
.mm-tsm-doc h2.mm-terms-part {
    font-size: 24px;
    margin-top: 56px;
    margin-bottom: 4px;
    padding-bottom: 8px;
    border-bottom: 3px solid #FF6900;
}
.mm-terms h3,
.mm-tsm-doc h3 {
    font-size: 20px;
    margin-top: 32px;
    margin-bottom: 8px;
    border-bottom: 1px solid #eee;
    padding-bottom: 6px;
}
.mm-terms h4,
.mm-tsm-doc h4 {
    font-size: 17px;
    margin-top: 20px;
    margin-bottom: 4px;
}
.mm-terms p,
.mm-terms li,
.mm-tsm-doc p,
.mm-tsm-doc li {
    font-size: 16.5px;
}
.mm-terms .mm-terms-note,
.mm-tsm-doc .mm-terms-note {
    color: #666666;
    font-style: italic;
}
.mm-terms .mm-lic-head,
.mm-tsm-doc .mm-lic-head {
    margin-top: 20px;
    margin-bottom: 4px;
}
.mm-terms .mm-lic-centre,
.mm-tsm-doc .mm-lic-centre {
    text-align: center;
}
.mm-terms .mm-terms-plan,
.mm-tsm-doc .mm-terms-plan {
    display: block;
    width: 100%;
    height: auto;
    margin: 12px 0;
    border: 1px solid #eeeeee;
}

/* Signature lines in the execution block: a rule with a caption under it. */
.mm-terms .mm-lic-sigline,
.mm-tsm-doc .mm-lic-sigline {
    display: flex;
    gap: 40px;
    margin: 36px 0 8px;
}
.mm-terms .mm-lic-sigline span,
.mm-tsm-doc .mm-lic-sigline span {
    flex: 1;
    border-top: 1px solid #1a1a1a;
    padding-top: 4px;
    font-size: 14.5px;
}

/* Lists. The licence numbers its clauses (a), (i), (A) and recitals A., B.,
   so each style counts for itself instead of using the browser's list
   markers, which cannot wrap the number in brackets everywhere. */
.mm-terms ol.mm-lic,
.mm-tsm-doc ol.mm-lic {
    list-style: none;
    padding-left: 0;
    margin: 8px 0 12px;
}
.mm-terms ol.mm-lic > li,
.mm-tsm-doc ol.mm-lic > li {
    position: relative;
    padding-left: 2.8em;
    margin-bottom: 6px;
}
.mm-terms ol.mm-lic > li::before,
.mm-tsm-doc ol.mm-lic > li::before {
    position: absolute;
    left: 0;
}
.mm-terms ol.mm-lic-a,
.mm-tsm-doc ol.mm-lic-a { counter-reset: lic-a; }
.mm-terms ol.mm-lic-a > li,
.mm-tsm-doc ol.mm-lic-a > li { counter-increment: lic-a; }
.mm-terms ol.mm-lic-a > li::before,
.mm-tsm-doc ol.mm-lic-a > li::before { content: "(" counter(lic-a, lower-alpha) ")"; }

.mm-terms ol.mm-lic-i,
.mm-tsm-doc ol.mm-lic-i { counter-reset: lic-i; }
.mm-terms ol.mm-lic-i > li,
.mm-tsm-doc ol.mm-lic-i > li { counter-increment: lic-i; }
.mm-terms ol.mm-lic-i > li::before,
.mm-tsm-doc ol.mm-lic-i > li::before { content: "(" counter(lic-i, lower-roman) ")"; }

.mm-terms ol.mm-lic-A,
.mm-tsm-doc ol.mm-lic-A { counter-reset: lic-upper; }
.mm-terms ol.mm-lic-A > li,
.mm-tsm-doc ol.mm-lic-A > li { counter-increment: lic-upper; }
.mm-terms ol.mm-lic-A > li::before,
.mm-tsm-doc ol.mm-lic-A > li::before { content: "(" counter(lic-upper, upper-alpha) ")"; }

.mm-terms ol.mm-lic-rec,
.mm-tsm-doc ol.mm-lic-rec { counter-reset: lic-rec; }
.mm-terms ol.mm-lic-rec > li,
.mm-tsm-doc ol.mm-lic-rec > li { counter-increment: lic-rec; }
.mm-terms ol.mm-lic-rec > li::before,
.mm-tsm-doc ol.mm-lic-rec > li::before { content: counter(lic-rec, upper-alpha) "."; }

/* A plain numbered list (the credit membership rules). */
.mm-terms ol.mm-lic-1,
.mm-tsm-doc ol.mm-lic-1 {
    list-style: decimal;
    padding-left: 22px;
}
.mm-terms ol.mm-lic-1 > li,
.mm-tsm-doc ol.mm-lic-1 > li {
    position: static;
    padding-left: 0;
}
.mm-terms ol.mm-lic-1 > li::before,
.mm-tsm-doc ol.mm-lic-1 > li::before { content: none; }

/* ---- The pop-up --------------------------------------------------------- */

html.mm-tsm-open {
    overflow: hidden;
}
.mm-tsm[hidden] {
    display: none;
}
.mm-tsm {
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(39, 39, 39, 0.62);
}
.mm-tsm-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 780px;
    max-height: 92vh;
    max-height: 92dvh;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    color: #1a1a1a;
    text-align: left;
}
.mm-tsm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid #e6e6e6;
    flex-shrink: 0;
}
.mm-tsm-head h3 {
    margin: 0;
    font-size: 18.5px;
}
.mm-tsm-close {
    border: none;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: #666666;
    cursor: pointer;
    padding: 2px 8px;
}
.mm-tsm-close:hover {
    color: #1a1a1a;
}
.mm-tsm-body {
    padding: 8px 24px 24px;
    overflow-y: auto;
    flex: 1 1 auto;
}
.mm-tsm-foot {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 24px;
    border-top: 1px solid #e6e6e6;
    flex-shrink: 0;
}

/* The document inside the pop-up: same markup as the page, a size down. */
.mm-tsm-doc {
    line-height: 1.6;
}
.mm-tsm-doc h1 {
    font-size: 22px;
    margin: 8px 0 4px;
}
.mm-tsm-doc .mm-terms-updated {
    color: #666666;
    font-size: 14.5px;
    margin-bottom: 16px;
}
.mm-tsm-doc h2.mm-terms-part {
    font-size: 20px;
    margin-top: 36px;
}
.mm-tsm-doc h3 {
    font-size: 17px;
    margin-top: 24px;
}
.mm-tsm-doc h4 {
    font-size: 15.5px;
}
.mm-tsm-doc p,
.mm-tsm-doc li {
    font-size: 15px;
}

/* The signing section, underneath the document. */
.mm-tsm-sign {
    margin-top: 36px;
    padding: 22px 22px 20px;
    border: 2px solid #FF6900;
    border-radius: 8px;
    background: #fffaf5;
}
.mm-tsm-sign h3 {
    margin: 0 0 6px;
    font-size: 19px;
    border: none;
    padding: 0;
}
.mm-tsm-sign p {
    font-size: 15px;
    margin: 0 0 14px;
}
.mm-tsm-label {
    display: block;
    margin: 14px 0 6px;
    font-size: 14.5px;
    font-weight: 600;
}
.mm-tsm-sign input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 16px;
    border: 1px solid #bdbdbd;
    border-radius: 6px;
    background: #ffffff;
}
.mm-tsm-tabs {
    display: flex;
    gap: 8px;
    margin: 14px 0 8px;
}
.mm-tsm-tab {
    padding: 8px 16px;
    font-size: 14.5px;
    font-weight: 600;
    border: 1px solid #bdbdbd;
    border-radius: 6px;
    background: #ffffff;
    color: #1a1a1a;
    cursor: pointer;
}
.mm-tsm-tab[aria-selected="true"] {
    background: #FF6900;
    border-color: #FF6900;
    color: #ffffff;
}
.mm-tsm-pad {
    position: relative;
    height: 170px;
    border: 2px dashed #bdbdbd;
    border-radius: 6px;
    background: #ffffff;
}
.mm-tsm-pad canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
}
.mm-tsm-pad-hint {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: #9a9a9a;
    font-size: 15px;
    pointer-events: none;
}
.mm-tsm-pad-hint[hidden] {
    display: none;
}
.mm-tsm-upload[hidden],
.mm-tsm-draw[hidden] {
    display: none;
}
.mm-tsm-upload input[type="file"] {
    font-size: 15px;
}
.mm-tsm-preview {
    display: block;
    max-width: 100%;
    max-height: 150px;
    margin-top: 10px;
    padding: 6px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #ffffff;
}
.mm-tsm-preview[hidden] {
    display: none;
}
.mm-tsm-padtools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    font-size: 13.5px;
    color: #666666;
}
.mm-tsm-link {
    border: none;
    background: none;
    padding: 0;
    font-size: 14px;
    color: #FF6900;
    text-decoration: underline;
    cursor: pointer;
}
.mm-tsm-agree {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 16px;
    font-size: 15px;
}
.mm-tsm-agree input {
    margin-top: 4px;
    flex-shrink: 0;
}
.mm-tsm-date {
    margin-top: 10px;
    font-size: 14px;
    color: #666666;
}
.mm-tsm-error {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 6px;
    background: #fdecea;
    color: #8a1c10;
    font-size: 14.5px;
}
.mm-tsm-error[hidden] {
    display: none;
}
.mm-tsm-btn {
    padding: 10px 20px;
    font-size: 15.5px;
    font-weight: 600;
    border: 1px solid #bdbdbd;
    border-radius: 6px;
    background: #ffffff;
    color: #1a1a1a;
    cursor: pointer;
}
.mm-tsm-btn:hover {
    background: #f4f4f4;
}
.mm-tsm-btn-primary {
    background: #FF6900;
    border-color: #FF6900;
    color: #ffffff;
}
.mm-tsm-btn-primary:hover {
    background: #e55f00;
}
.mm-tsm-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* The line under the "I agree" box on the form once it has been signed. */
.mm-tsm-status {
    margin: 4px 0 0;
}
.mm-tsm-status-text {
    margin: 0;
    font-size: 14.5px;
    color: #2e7d32;
}
.mm-tsm-status-text:empty {
    display: none;
}

@media (max-width: 600px) {
    .mm-tsm {
        padding: 0;
    }
    .mm-tsm-box {
        max-height: 100vh;
        height: 100vh;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
    }
    .mm-tsm-body {
        padding: 8px 16px 20px;
    }
    .mm-tsm-sign {
        padding: 16px 14px;
    }
    .mm-terms .mm-lic-sigline,
    .mm-tsm-doc .mm-lic-sigline {
        flex-direction: column;
        gap: 28px;
    }
}