/* ==========================================================================
   Morris Moor — membership application (/membership/apply).
   Uses the internal screens' tokens (see admin.css) and is scoped to
   `.mm-internal` so nothing here reaches the public site.
   ========================================================================== */

.mm-internal .mm-apply-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
    margin: 0;
}
.mm-internal .mm-apply-main {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

/* --- Who is applying ------------------------------------------------------- */

.mm-internal .mm-apply-account {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 16px;
    background-color: var(--ad-surface);
    border: 1px solid var(--ad-rule);
    border-left: 3px solid var(--ad-accent);
    border-radius: 2px;
    font-size: 14px;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-apply-account strong {
    color: var(--ad-ink);
}
.mm-internal .mm-apply-account i {
    color: var(--ad-accent);
}

/* --- Steps ---------------------------------------------------------------- */

.mm-internal .mm-apply-step {
    padding: 24px;
    background-color: var(--ad-surface);
    border: 1px solid var(--ad-rule);
    border-radius: 3px;
}
.mm-internal .mm-apply-step-head {
    display: flex;
    gap: 16px;
    align-items: baseline;
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--ad-rule-soft);
}
.mm-internal .mm-apply-step-num {
    flex: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--ad-accent);
}
.mm-internal .mm-apply-step-head h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--ad-ink);
}
.mm-internal .mm-apply-step-head p {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ad-ink-soft);
}

/* --- Billing cycle -------------------------------------------------------- */

.mm-internal .mm-apply-billing {
    display: inline-flex;
    padding: 3px;
    margin-bottom: 20px;
    background-color: var(--ad-bg);
    border: 1px solid var(--ad-rule);
    border-radius: 2px;
}
.mm-internal .mm-apply-billing-option {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 2px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ad-ink-soft);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.mm-internal .mm-apply-billing-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.mm-internal .mm-apply-billing-option.is-selected {
    background-color: var(--ad-dark);
    color: var(--ad-on-dark);
}
.mm-internal .mm-apply-billing-option small {
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ad-accent);
}
.mm-internal .mm-apply-billing-option:focus-within {
    outline: 2px solid var(--ad-accent);
    outline-offset: 2px;
}

/* --- Tier cards ----------------------------------------------------------- */

.mm-internal .mm-apply-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}
.mm-internal .mm-apply-tier {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 18px 20px;
    background-color: var(--ad-surface);
    border: 1px solid var(--ad-rule);
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Colour, not movement: a card that shifts under the pointer is harder to
   click, and these are the page's main choice. */
.mm-internal .mm-apply-tier:hover {
    background-color: var(--ad-bg);
    border-color: var(--ad-ink-soft);
}
.mm-internal .mm-apply-tier input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.mm-internal .mm-apply-tier.is-selected {
    border-color: var(--ad-accent);
    box-shadow: inset 0 0 0 1px var(--ad-accent);
}
/* A tick in the corner, drawn only for the chosen card. */
.mm-internal .mm-apply-tier.is-selected::after {
    content: '';
    position: absolute;
    top: 14px;
    right: 14px;
    width: 14px;
    height: 8px;
    border-left: 2px solid var(--ad-accent);
    border-bottom: 2px solid var(--ad-accent);
    transform: rotate(-45deg);
}
.mm-internal .mm-apply-tier:focus-within {
    outline: 2px solid var(--ad-accent);
    outline-offset: 2px;
}
.mm-internal .mm-apply-tier-name {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-apply-tier-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 27px;
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--ad-ink);
}
.mm-internal .mm-apply-tier-price small {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ad-ink-soft);
}
/* The invoice figure, under the headline rate. */
.mm-internal .mm-apply-tier-gst {
    font-size: 12px;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-apply-tier-credits {
    font-size: 13px;
    font-weight: 500;
    color: var(--ad-accent);
}
.mm-internal .mm-apply-tier-accounts {
    font-size: 12px;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-apply-tier-blurb {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ad-ink-soft);
}

/* --- Fields --------------------------------------------------------------- */

.mm-internal .mm-apply-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}
.mm-internal .mm-apply-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mm-internal .mm-apply-field-wide {
    grid-column: 1 / -1;
}
.mm-internal .mm-apply-field > label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-apply-optional {
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--ad-rule);
}
.mm-internal .mm-apply-hint {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ad-ink-soft);
}
/* --- Motion --------------------------------------------------------------- */

/* admin.css already rises each direct child of .mm-internal-content on load,
   which on this page is just two blocks: the heading and the whole form. The
   steps inside the form are what the applicant actually works down, so the form
   itself only fades and each step rises in its own right. All of it is inside a
   no-preference query, so reduced-motion gets the page with no movement at all. */
@media (prefers-reduced-motion: no-preference) {
    .mm-internal .mm-apply .mm-apply-grid {
        animation: mm-internal-fade 0.4s ease-out both;
    }

    .mm-internal .mm-apply-stagger > .mm-apply-step {
        animation: mm-internal-rise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    .mm-internal .mm-apply-stagger > .mm-apply-step:nth-of-type(2) {
        animation-delay: 0.08s;
    }
    .mm-internal .mm-apply-stagger > .mm-apply-step:nth-of-type(3) {
        animation-delay: 0.16s;
    }
    .mm-internal .mm-apply-stagger > .mm-apply-step:nth-of-type(n+4) {
        animation-delay: 0.24s;
    }

    /* The summary panel rides along as the page scrolls, and a transform on a
       sticky element takes it out of its dock, so it only ever fades. */
    .mm-internal .mm-apply-summary-dock {
        animation: mm-internal-fade 0.55s ease-out 0.12s both;
    }

    /* Moving between steps is not a page load, so the incoming step gets a
       larger, more deliberate move than the load stagger: forwards arrives from
       below, Back from above, so the direction of travel is legible. */
    @keyframes mm-apply-step-in {
        from {
            opacity: 0;
            transform: translateY(18px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }
    @keyframes mm-apply-step-back {
        from {
            opacity: 0;
            transform: translateY(-14px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }
    .mm-internal .mm-apply-step-in {
        animation: mm-apply-step-in 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    .mm-internal .mm-apply-step-back {
        animation: mm-apply-step-back 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }

    /* Inside the account step the groups follow the card in, so it reads as the
       step assembling rather than one slab appearing. */
    .mm-internal .mm-apply-step-in > .mm-apply-step-head,
    .mm-internal .mm-apply-step-in > .mm-apply-signin,
    .mm-internal .mm-apply-step-in > .mm-apply-fieldset,
    .mm-internal .mm-apply-step-in > .mm-apply-actions {
        animation: mm-internal-rise 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    .mm-internal .mm-apply-step-in > .mm-apply-signin {
        animation-delay: 0.08s;
    }
    .mm-internal .mm-apply-step-in > .mm-apply-fieldset {
        animation-delay: 0.14s;
    }
    .mm-internal .mm-apply-step-in > .mm-apply-fieldset + .mm-apply-fieldset {
        animation-delay: 0.2s;
    }
    .mm-internal .mm-apply-step-in > .mm-apply-actions {
        animation-delay: 0.26s;
    }
}

/* --- Progress rail -------------------------------------------------------- */

/* Two stops, and a ball that travels between them so a guest can see there is a
   second half to this and where they are in it. Two equal columns put each dot
   at the centre of its own half — 25% and 75% across — which is what the rail
   and the ball's two positions are pinned to. */
.mm-internal .mm-apply-progress {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0;
    padding: 18px 0 6px;
    list-style: none;
}
/* The track the ball runs along, drawn between the two dot centres. */
.mm-internal .mm-apply-progress::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 25%;
    right: 25%;
    height: 2px;
    background-color: var(--ad-rule);
}
/* The travelled portion, which grows as the ball moves. */
.mm-internal .mm-apply-progress::after {
    content: '';
    position: absolute;
    top: 24px;
    left: 25%;
    width: 0;
    height: 2px;
    background-color: var(--ad-accent);
    transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mm-internal .mm-apply-progress[data-step="account"]::after {
    width: 50%;
}

.mm-internal .mm-apply-progress-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}
.mm-internal .mm-apply-progress-dot {
    width: 12px;
    height: 12px;
    margin-top: 6px;
    background-color: var(--ad-bg);
    border: 2px solid var(--ad-rule);
    border-radius: 50%;
    transition: border-color 0.3s ease;
}
.mm-internal .mm-apply-progress-item.is-current .mm-apply-progress-dot,
.mm-internal .mm-apply-progress-item.is-done .mm-apply-progress-dot {
    border-color: var(--ad-accent);
}
.mm-internal .mm-apply-progress-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ad-rule);
    transition: color 0.3s ease;
}
.mm-internal .mm-apply-progress-item.is-done .mm-apply-progress-label {
    color: var(--ad-ink-soft);
}
.mm-internal .mm-apply-progress-item.is-current .mm-apply-progress-label {
    color: var(--ad-ink);
}

/* The ball itself: one element that slides between the two dot centres, rather
   than a dot per stop lighting up, so the movement is what carries the meaning. */
.mm-internal .mm-apply-progress-ball {
    position: absolute;
    top: 18px;
    left: 25%;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    background-color: var(--ad-accent);
    border: 3px solid var(--ad-bg);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--ad-accent);
    transition: left 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mm-internal .mm-apply-progress[data-step="account"] .mm-apply-progress-ball {
    left: 75%;
}
@media (prefers-reduced-motion: reduce) {
    .mm-internal .mm-apply-progress::after,
    .mm-internal .mm-apply-progress-ball {
        transition: none;
    }
}
@media (max-width: 600px) {
    .mm-internal .mm-apply-progress-label {
        font-size: 10px;
        letter-spacing: 0.1em;
    }
}

/* --- Account step (guest sign-up) ----------------------------------------- */

/* The generic field grid is auto-fit, which on a wide screen can drop three or
   four boxes onto a row and leave the account step looking scattered. These
   fields read as pairs, so they are pinned to two columns. */
.mm-internal .mm-apply-fields-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) {
    .mm-internal .mm-apply-fields-pair {
        grid-template-columns: 1fr;
    }
}

.mm-internal .mm-apply-signin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px;
    padding: 11px 14px;
    background-color: var(--ad-bg);
    border: 1px solid var(--ad-rule-soft);
    border-radius: 2px;
    font-size: 13px;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-apply-signin i {
    color: var(--ad-accent);
}
.mm-internal .mm-apply-signin-link {
    margin-left: auto;
    font-weight: 500;
    color: var(--ad-accent);
    text-decoration: none;
}
.mm-internal .mm-apply-signin-link:hover,
.mm-internal .mm-apply-signin-link:focus-visible {
    text-decoration: underline;
}

/* Grouping the name/email boxes apart from the password ones is what stops the
   step reading as one undifferentiated pile of inputs. */
.mm-internal .mm-apply-fieldset {
    margin: 0;
    padding: 0;
    border: none;
}
.mm-internal .mm-apply-fieldset + .mm-apply-fieldset {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--ad-rule-soft);
}
.mm-internal .mm-apply-fieldset > legend {
    padding: 0;
    margin-bottom: 14px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ad-ink);
}
.mm-internal .mm-apply-fieldset .mm-apply-fields + .mm-apply-hint {
    margin-top: 14px;
}

/* The eye button inherits its position from style.css; only the colours need
   to come from the internal palette rather than the public site's orange. */
.mm-internal .mm-password-toggle-icon {
    color: var(--ad-ink-soft);
}
.mm-internal .mm-password-toggle-icon:hover,
.mm-internal .mm-password-toggle-icon:focus-visible {
    color: var(--ad-accent);
    background-color: rgba(255, 105, 0, 0.1);
}
.mm-internal .mm-password-toggle-icon[aria-pressed="true"] {
    color: var(--ad-accent);
}

.mm-internal .mm-apply-match {
    margin: 0;
    font-size: 12px;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-apply-match-no {
    color: #C1392B;
}
.mm-internal .mm-apply-match-yes {
    color: #1E7A4B;
}

.mm-internal .mm-apply-step > .mm-apply-fields + .mm-apply-field,
.mm-internal .mm-apply-step > .mm-apply-insurance + .mm-apply-fields,
.mm-internal .mm-apply-step > .mm-apply-rooms + .mm-apply-insurance {
    margin-top: 20px;
}

/* --- Rooms ---------------------------------------------------------------- */

.mm-internal .mm-apply-rooms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.mm-internal .mm-apply-room {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        'box name'
        'box meta'
        'box note';
    gap: 2px 12px;
    padding: 14px 16px;
    background-color: var(--ad-bg);
    border: 1px solid var(--ad-rule);
    border-radius: 2px;
    cursor: pointer;
}
.mm-internal .mm-apply-room input {
    grid-area: box;
    align-self: center;
    width: 16px;
    height: 16px;
    accent-color: var(--ad-accent);
}
.mm-internal .mm-apply-room.is-selected {
    background-color: var(--ad-surface);
    border-color: var(--ad-accent);
}
.mm-internal .mm-apply-room.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.mm-internal .mm-apply-room-name {
    grid-area: name;
    font-size: 14px;
    font-weight: 500;
    color: var(--ad-ink);
}
.mm-internal .mm-apply-room-meta {
    grid-area: meta;
    font-size: 12px;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-apply-room-note {
    grid-area: note;
    font-size: 11px;
    color: var(--ad-ink-soft);
    font-style: italic;
}

.mm-internal .mm-apply-insurance {
    padding: 18px;
    background-color: var(--ad-bg);
    border: 1px dashed var(--ad-rule);
    border-radius: 2px;
}

/* --- Agreement and actions ------------------------------------------------ */

.mm-internal .mm-apply-check {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ad-ink);
    cursor: pointer;
}
.mm-internal .mm-apply-check + .mm-apply-check {
    border-top: 1px solid var(--ad-rule-soft);
}
.mm-internal .mm-apply-check input {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--ad-accent);
}
.mm-internal .mm-apply-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 20px;
    margin-top: 6px;
    border-top: 1px solid var(--ad-rule);
}

/* --- Summary -------------------------------------------------------------- */

/* The panel rides with the scroll, settling in the middle of the screen rather
   than parked against the top.
   Two things this deliberately avoids. A viewport-tall spacer would centre it,
   but a spacer is the taller of the two grid columns whenever the form is short,
   and its leftover height shows up as dead space under the last step. Pulling it
   back by half its height with a transform centres it too, but a transform
   paints outside the column, so at the top of the page it rides over the page
   heading. A plain sticky offset does neither: sticky holds an element back as
   the page scrolls but never lifts it above where it naturally sits, and never
   past the end of its own column.
   The offset is half the panel's height below the middle of the screen, measured
   at runtime into --mm-apply-summary-half (membership-apply.js) because the
   panel grows and shrinks with the rooms chosen. The fallback matches its usual
   height, so it is still close to centred with the script blocked. */
.mm-internal .mm-apply-summary-dock {
    position: sticky;
    top: max(24px, calc(50vh - var(--mm-apply-summary-half, 205px)));
    box-sizing: border-box;
}
.mm-internal .mm-apply-summary {
    width: 100%;
    padding: 22px;
    background-color: var(--ad-dark);
    border-radius: 3px;
    color: var(--ad-on-dark);
    /* Taller than the screen: scroll inside rather than get clipped. */
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
}
.mm-internal .mm-apply-summary-title {
    margin: 0 0 18px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ad-on-dark-soft);
}
.mm-internal .mm-apply-summary-total {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(242, 238, 231, 0.12);
    font-size: 34px;
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1;
}
.mm-internal .mm-apply-summary-total small {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--ad-on-dark-soft);
}
.mm-internal .mm-apply-summary-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}
.mm-internal .mm-apply-summary-list > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 13px;
}
.mm-internal .mm-apply-summary-list dt {
    color: var(--ad-on-dark-soft);
}
.mm-internal .mm-apply-summary-list dd {
    margin: 0;
    text-align: right;
}
.mm-internal .mm-apply-summary-saving {
    margin: 18px 0 0;
    padding: 10px 12px;
    background-color: rgba(255, 105, 0, 0.14);
    border-radius: 2px;
    font-size: 12px;
    color: #FFB07A;
}
.mm-internal .mm-apply-summary-fine {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(242, 238, 231, 0.12);
    font-size: 11px;
    line-height: 1.6;
    color: var(--ad-on-dark-soft);
}

/* --- Confirmation --------------------------------------------------------- */

.mm-internal .mm-apply-receipt {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 22px;
    align-items: start;
}
.mm-internal .mm-apply-receipt-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
}
.mm-internal .mm-apply-receipt-list dd {
    margin: 4px 0 0;
}
.mm-internal .mm-apply-receipt-sub {
    display: block;
    font-size: 13px;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-apply-next {
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-apply-next li + li {
    margin-top: 14px;
}
.mm-internal .mm-apply-next strong {
    display: block;
    color: var(--ad-ink);
}
.mm-internal .mm-apply-receipt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--ad-rule);
}

/* --- Narrow screens ------------------------------------------------------- */

@media (max-width: 1040px) {
    .mm-internal .mm-apply-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    /* Stacked layout: the panel goes back to being an ordinary block above the
       form, so nothing is pinned or viewport-tall. */
    .mm-internal .mm-apply-summary-dock {
        position: static;
        display: block;
        min-height: 0;
        padding: 0;
        order: -1;
    }
    .mm-internal .mm-apply-summary {
        max-height: none;
        overflow: visible;
    }
}
@media (max-width: 600px) {
    .mm-internal .mm-apply-step {
        padding: 20px 16px;
    }
    .mm-internal .mm-apply-summary-total {
        font-size: 28px;
    }
}

/* ==========================================================================
   Membership payment (/membership/checkout/{id}).
   ========================================================================== */

.mm-internal .mm-pay-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}
.mm-internal .mm-pay-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}
.mm-internal .mm-pay-lead {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ad-ink-soft);
}

/* --- Card panel ----------------------------------------------------------- */

.mm-internal .mm-pay-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 20px;
    background-color: var(--ad-bg);
    border: 1px solid var(--ad-rule);
    border-radius: 3px;
}
.mm-internal .mm-pay-field-wide {
    grid-column: 1 / -1;
}
.mm-internal .mm-pay-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-pay-field input {
    width: 100%;
    padding: 11px 13px;
    background-color: var(--ad-surface);
    border: 1px solid var(--ad-rule);
    border-radius: 2px;
    font-family: 'Dia', 'Archivo', Arial, sans-serif;
    font-size: 15px;
    color: var(--ad-ink);
    box-sizing: border-box;
}
/* The fields are inert until Stripe is connected, and look it. */
.mm-internal .mm-pay-field input:disabled {
    background-color: var(--ad-rule-soft);
    color: var(--ad-ink-soft);
    cursor: not-allowed;
}
.mm-internal .mm-pay-card-number {
    position: relative;
}
.mm-internal .mm-pay-card-number input {
    padding-right: 44px;
}
.mm-internal .mm-pay-card-brands {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    font-size: 17px;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-pay-submit {
    grid-column: 1 / -1;
    justify-content: center;
}
.mm-internal .mm-pay-submit:disabled {
    background-color: var(--ad-rule);
    border-color: var(--ad-rule);
    color: var(--ad-ink-soft);
    cursor: not-allowed;
}
.mm-internal .mm-pay-note {
    display: flex;
    gap: 10px;
    margin: 16px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-pay-note i {
    flex: none;
    margin-top: 2px;
}

/* --- Test payment --------------------------------------------------------- */

.mm-internal .mm-pay-test {
    border-style: dashed;
}
.mm-internal .mm-pay-test-btn {
    width: 100%;
    justify-content: center;
}

/* --- Order summary -------------------------------------------------------- */

.mm-internal .mm-pay-summary {
    position: sticky;
    top: 24px;
    padding: 22px;
    background-color: var(--ad-dark);
    border-radius: 3px;
    color: var(--ad-on-dark);
}
.mm-internal .mm-pay-summary-title {
    margin: 0 0 18px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ad-on-dark-soft);
}
.mm-internal .mm-pay-summary-total {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(242, 238, 231, 0.12);
    font-size: 34px;
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1;
}
.mm-internal .mm-pay-summary-total small {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--ad-on-dark-soft);
}
.mm-internal .mm-pay-summary-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}
.mm-internal .mm-pay-summary-list > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 13px;
}
.mm-internal .mm-pay-summary-list dt {
    color: var(--ad-on-dark-soft);
}
.mm-internal .mm-pay-summary-list dd {
    margin: 0;
    text-align: right;
}
.mm-internal .mm-pay-summary-business {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(242, 238, 231, 0.12);
    font-size: 13px;
    line-height: 1.6;
}
.mm-internal .mm-pay-summary-business .mm-crud-field-label {
    margin: 0 0 4px;
    color: var(--ad-on-dark-soft);
}
.mm-internal .mm-pay-summary-business p + .mm-crud-field-label {
    margin-top: 14px;
}
.mm-internal .mm-pay-summary-business p {
    margin: 0;
}
.mm-internal .mm-pay-summary-business span {
    color: var(--ad-on-dark-soft);
}
.mm-internal .mm-pay-summary-fine {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(242, 238, 231, 0.12);
    font-size: 11px;
    line-height: 1.6;
    color: var(--ad-on-dark-soft);
}

/* --- Already paid --------------------------------------------------------- */

.mm-internal .mm-pay-done {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px;
    background-color: var(--ad-surface);
    border: 1px solid var(--ad-rule);
    border-left: 3px solid var(--ad-accent);
    border-radius: 3px;
}
.mm-internal .mm-pay-done-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 16px;
    color: var(--ad-ink);
}
.mm-internal .mm-pay-done-title i {
    color: var(--ad-accent);
}

@media (max-width: 1040px) {
    .mm-internal .mm-pay-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .mm-internal .mm-pay-summary {
        position: static;
        order: -1;
    }
}
@media (max-width: 480px) {
    .mm-internal .mm-pay-card {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Membership approval — the customer's view (/membership/status) and the
   admin queue (/membership/applications).
   ========================================================================== */

.mm-internal .mm-status-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 28px 24px;
    background-color: var(--ad-surface);
    border: 1px dashed var(--ad-rule);
    border-radius: 3px;
}
.mm-internal .mm-status-empty p {
    margin: 0;
    font-size: 15px;
    color: var(--ad-ink-soft);
}

/* --- One application, as the customer sees it ----------------------------- */

.mm-internal .mm-status-card {
    margin-bottom: 18px;
    background-color: var(--ad-surface);
    border: 1px solid var(--ad-rule);
    border-left: 3px solid var(--ad-rule);
    border-radius: 3px;
}
/* The edge carries the state: waiting, approved, running, turned down. */
.mm-internal .mm-status-pending-approval {
    border-left-color: #C79A3A;
}
.mm-internal .mm-status-approved {
    border-left-color: var(--ad-accent);
}
.mm-internal .mm-status-active {
    border-left-color: #2E7D32;
}
.mm-internal .mm-status-declined {
    border-left-color: #C62828;
}
.mm-internal .mm-status-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--ad-rule-soft);
}
.mm-internal .mm-status-head .mm-crud-field-label {
    margin: 0 0 6px;
}
.mm-internal .mm-status-plan {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ad-ink);
}
.mm-internal .mm-status-meta {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-status-chip {
    padding: 6px 12px;
    border: 1px solid var(--ad-rule);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ad-ink-soft);
    white-space: nowrap;
}
.mm-internal .mm-status-approved .mm-status-chip,
.mm-internal .mm-status-active .mm-status-chip {
    color: var(--ad-accent);
    border-color: var(--ad-accent);
}
.mm-internal .mm-status-body {
    padding: 20px 22px 22px;
}
.mm-internal .mm-status-line {
    display: flex;
    gap: 10px;
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ad-ink);
}
.mm-internal .mm-status-line i {
    flex: none;
    margin-top: 3px;
    color: var(--ad-accent);
}
.mm-internal .mm-status-test {
    margin: 0 0 18px;
    padding: 10px 12px;
    background-color: var(--ad-bg);
    border: 1px dashed var(--ad-rule);
    border-radius: 2px;
    font-size: 12px;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-status-detail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin: 18px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--ad-rule-soft);
}
.mm-internal .mm-status-detail dt {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-status-detail dd {
    margin: 5px 0 0;
    font-size: 14px;
    color: var(--ad-ink);
}

/* --- The admin queue ------------------------------------------------------ */

/* Status tabs and the filter bar above the list. */
.mm-internal .mm-applications-tabs {
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.mm-internal .mm-tab-count {
    margin-left: 8px;
    padding: 1px 7px;
    background-color: rgba(28, 28, 28, 0.08);
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0;
}
.mm-internal .mm-btn-primary .mm-tab-count {
    background-color: rgba(255, 255, 255, 0.24);
}
.mm-internal .mm-applications-table td {
    vertical-align: top;
}
/* The second line under a cell's main value: ABN, email, billing cycle. */
.mm-internal .mm-applications-sub {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-applications-review {
    white-space: nowrap;
}
.mm-internal .mm-applications-review .mm-review-form {
    display: inline-block;
    margin: 0 4px 0 0;
}
.mm-internal .mm-applications-review .mm-btn {
    padding: 6px 12px;
    font-size: 10px;
}
.mm-internal .mm-review-form {
    margin: 0;
}

.mm-internal .mm-applications-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 28px 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-applications-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background-color: var(--ad-accent);
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0;
    color: #FFFFFF;
}
.mm-internal .mm-applications-empty {
    margin: 0;
    padding: 28px 24px;
    background-color: var(--ad-surface);
    border: 1px dashed var(--ad-rule);
    border-radius: 3px;
    font-size: 14px;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-application {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    gap: 22px;
    margin-bottom: 16px;
    padding: 20px 22px;
    background-color: var(--ad-surface);
    border: 1px solid var(--ad-rule);
    border-left: 3px solid #C79A3A;
    border-radius: 3px;
}
.mm-internal .mm-application-business {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 500;
    color: var(--ad-ink);
}
.mm-internal .mm-application-meta {
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-application-notes {
    margin: 12px 0 0;
    padding: 10px 12px;
    background-color: var(--ad-bg);
    border-left: 2px solid var(--ad-rule);
    font-size: 13px;
    line-height: 1.55;
    color: var(--ad-ink);
}
.mm-internal .mm-application-figures {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}
.mm-internal .mm-application-figures > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}
.mm-internal .mm-application-figures dt {
    color: var(--ad-ink-soft);
}
.mm-internal .mm-application-figures dd {
    margin: 0;
    text-align: right;
    color: var(--ad-ink);
}
.mm-internal .mm-application-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: center;
}
.mm-internal .mm-application-actions form {
    margin: 0;
}
.mm-internal .mm-application-actions .mm-btn {
    width: 100%;
    justify-content: center;
}
.mm-internal .mm-application-decline {
    background-color: transparent;
    border-color: var(--ad-rule);
    color: var(--ad-ink-soft);
}
.mm-internal .mm-application-decline:hover,
.mm-internal .mm-application-decline:focus-visible {
    border-color: #C62828;
    color: #C62828;
    background-color: rgba(198, 40, 40, 0.06);
}
.mm-internal .mm-application-test {
    margin-left: 6px;
    padding: 2px 6px;
    background-color: var(--ad-bg);
    border: 1px dashed var(--ad-rule);
    border-radius: 2px;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ad-ink-soft);
}
/* Statuses this page shows that admin.css does not already cover. */
.mm-internal .mm-status-pending-approval,
.mm-internal span.mm-status-declined {
    white-space: nowrap;
}

/* Sits in the admin dashboard's action button. */
.mm-internal .mm-dash-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background-color: rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0;
}

@media (max-width: 900px) {
    .mm-internal .mm-application {
        grid-template-columns: minmax(0, 1fr);
    }
    .mm-internal .mm-application-actions {
        flex-direction: row;
        align-self: stretch;
    }
}

/* ==========================================================================
   Make a booking (/make-a-booking).
   ========================================================================== */

.mm-internal .mm-book-member {
    display: flex;
    align-items: baseline;
    line-height: 1.6;
    gap: 10px;
    margin: 0 0 20px;
    padding: 12px 16px;
    background-color: var(--ad-surface);
    border: 1px solid var(--ad-rule);
    border-left: 3px solid var(--ad-accent);
    border-radius: 2px;
    font-size: 14px;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-book-member strong {
    color: var(--ad-ink);
}
.mm-internal .mm-book-member i {
    flex: none;
    color: var(--ad-accent);
}
.mm-internal .mm-book-member-link {
    margin-left: 4px;
    color: var(--ad-accent);
}
.mm-internal .mm-book-member-none {
    border-left-color: var(--ad-rule);
}
.mm-internal .mm-book-member-none i {
    color: var(--ad-ink-soft);
}

.mm-internal .mm-book-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
}
.mm-internal .mm-book-step {
    padding: 24px;
    background-color: var(--ad-surface);
    border: 1px solid var(--ad-rule);
    border-radius: 3px;
}
.mm-internal .mm-book-step-head {
    display: flex;
    gap: 16px;
    align-items: baseline;
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--ad-rule-soft);
}
.mm-internal .mm-book-step-num {
    flex: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--ad-accent);
}
.mm-internal .mm-book-step-head h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--ad-ink);
}
.mm-internal .mm-book-step-head p {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ad-ink-soft);
}

/* --- Rooms ---------------------------------------------------------------- */

.mm-internal .mm-book-rooms {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* A row per room: what it is on the left, what it costs on the right. */
.mm-internal .mm-book-room {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background-color: var(--ad-bg);
    border: 1px solid var(--ad-rule);
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.mm-internal .mm-book-room-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background-color: var(--ad-surface);
    border: 1px solid var(--ad-rule);
    border-radius: 50%;
    font-size: 15px;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-book-room.is-selected .mm-book-room-icon {
    background-color: rgba(255, 105, 0, 0.12);
    border-color: var(--ad-accent);
    color: var(--ad-accent);
}
.mm-internal .mm-book-room-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.mm-internal .mm-book-room:hover {
    border-color: var(--ad-ink-soft);
}
.mm-internal .mm-book-room input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.mm-internal .mm-book-room.is-selected {
    background-color: var(--ad-surface);
    border-color: var(--ad-accent);
    box-shadow: inset 0 0 0 1px var(--ad-accent);
}
.mm-internal .mm-book-room:focus-within {
    outline: 2px solid var(--ad-accent);
    outline-offset: 2px;
}
.mm-internal .mm-book-room-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--ad-ink);
}
.mm-internal .mm-book-room-credits {
    text-align: right;
    white-space: nowrap;
}
.mm-internal .mm-book-room-credits strong {
    display: block;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ad-accent);
}
.mm-internal .mm-book-room-credits small {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-book-room-meta {
    font-size: 12px;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-book-duration {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mm-internal .mm-book-duration .mm-crud-field-control {
    flex: 1;
}
.mm-internal .mm-book-unit {
    font-size: 12px;
    color: var(--ad-ink-soft);
}

/* --- Fields --------------------------------------------------------------- */

.mm-internal .mm-book-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px 22px;
}
.mm-internal .mm-book-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mm-internal .mm-book-field-wide + .mm-book-field-wide {
    margin-top: 18px;
}
.mm-internal .mm-book-field > label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-book-optional {
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--ad-rule);
}
.mm-internal .mm-book-hint {
    font-size: 12px;
    color: var(--ad-ink-soft);
}
/* --- Estimate and actions ------------------------------------------------- */

.mm-internal .mm-book-total-figure {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ad-rule-soft);
}
.mm-internal .mm-book-total-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-book-total-credits strong {
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--ad-ink);
}
.mm-internal .mm-book-total-credits small {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ad-ink-soft);
}
/* A room that costs more than the month's credits, said plainly rather than
   hidden or blocked — members top up. */
.mm-internal .mm-book-room-topup {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #C79A3A;
}
.mm-internal .mm-book-total-topup {
    margin: 14px 0 0;
    padding: 12px 14px;
    background-color: rgba(199, 154, 58, 0.1);
    border-left: 3px solid #C79A3A;
    border-radius: 2px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ad-ink);
}
.mm-internal .mm-book-total-note {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-book-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 18px;
    margin-top: 18px;
    border-top: 1px solid var(--ad-rule);
}

@media (max-width: 520px) {
    .mm-internal .mm-book-room {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .mm-internal .mm-book-room-credits {
        grid-column: 2;
        text-align: left;
    }
}

/* ==========================================================================
   Buy credits (/credits).
   ========================================================================== */

.mm-internal .mm-credits-rates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.mm-internal .mm-credits-rate {
    padding: 20px 22px;
    background-color: var(--ad-surface);
    border: 1px solid var(--ad-rule);
    border-left: 3px solid var(--ad-rule);
    border-radius: 3px;
}
/* The rate that applies to this customer leads; the other is for comparison. */
.mm-internal .mm-credits-rate.is-yours {
    border-left-color: var(--ad-accent);
}
.mm-internal .mm-credits-rate-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
}
.mm-internal .mm-credits-rate-name {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-credits-rate-tag {
    padding: 3px 9px;
    background-color: var(--ad-accent);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FFFFFF;
}
.mm-internal .mm-credits-rate-price {
    margin: 0;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--ad-ink);
}
.mm-internal .mm-credits-rate-price small {
    margin-left: 6px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-credits-rate-unit {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--ad-accent);
}
.mm-internal .mm-credits-rate-note {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--ad-ink-soft);
}

/* --- Buying --------------------------------------------------------------- */

.mm-internal .mm-credits-form {
    margin: 0;
}
.mm-internal .mm-credits-buy {
    background-color: var(--ad-surface);
    border: 1px solid var(--ad-rule);
    border-radius: 3px;
}
.mm-internal .mm-credits-buy-head {
    padding: 20px 22px;
    border-bottom: 1px solid var(--ad-rule);
}
.mm-internal .mm-credits-buy-head h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--ad-ink);
}
.mm-internal .mm-credits-buy-head p {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-credits-buy-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 22px;
    padding: 22px;
}
.mm-internal .mm-credits-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 220px;
}
.mm-internal .mm-credits-field > label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-credits-hint {
    font-size: 12px;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-credits-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}
.mm-internal .mm-credits-total-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-credits-total-figure {
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: var(--ad-ink);
}
.mm-internal .mm-credits-total-note {
    font-size: 12px;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-credits-card {
    padding: 0 22px 22px;
}
.mm-internal .mm-credits-card-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 20px;
    background-color: var(--ad-bg);
    border: 1px solid var(--ad-rule);
    border-radius: 3px;
}
.mm-internal .mm-credits-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-top: 1px solid var(--ad-rule);
}
.mm-internal .mm-credits-actions-note {
    font-size: 12px;
    color: var(--ad-ink-soft);
}

/* --- What they have bought ------------------------------------------------ */

.mm-internal .mm-credits-history-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 30px 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-credits-history-count {
    padding: 3px 9px;
    background-color: rgba(255, 105, 0, 0.12);
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ad-accent);
}
.mm-internal .mm-credits-empty {
    margin: 0;
    padding: 24px;
    background-color: var(--ad-surface);
    border: 1px dashed var(--ad-rule);
    border-radius: 3px;
    font-size: 14px;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-data-table tr.is-inactive td {
    opacity: 0.55;
}
.mm-internal .mm-credits-expired {
    margin-left: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-credits-fine {
    margin: 22px 0 0;
    max-width: 78ch;
    font-size: 12px;
    line-height: 1.7;
    color: var(--ad-ink-soft);
}

@media (max-width: 720px) {
    .mm-internal .mm-credits-buy-body {
        grid-template-columns: minmax(0, 1fr);
    }
    .mm-internal .mm-credits-total {
        align-items: flex-start;
        text-align: left;
    }
    .mm-internal .mm-credits-card-fields {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Already a member, and cancelling.
   ========================================================================== */

.mm-internal .mm-already-card {
    background-color: var(--ad-surface);
    border: 1px solid var(--ad-rule);
    border-left: 3px solid var(--ad-accent);
    border-radius: 3px;
}
.mm-internal .mm-already-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--ad-rule-soft);
}
.mm-internal .mm-already-head .mm-crud-field-label {
    margin: 0 0 6px;
}
.mm-internal .mm-already-plan {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ad-ink);
}
.mm-internal .mm-already-meta {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-already-body {
    padding: 20px 22px 22px;
}
/* The end date, spelled out so it cannot be missed. */
.mm-internal .mm-already-ends {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 16px;
    padding: 14px 16px;
    background-color: var(--ad-bg);
    border-left: 3px solid #C79A3A;
    border-radius: 2px;
}
.mm-internal .mm-already-ends-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-already-ends-date {
    font-size: 17px;
    font-weight: 500;
    color: var(--ad-ink);
}
.mm-internal .mm-already-line {
    display: flex;
    gap: 10px;
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ad-ink);
}
.mm-internal .mm-already-line i {
    flex: none;
    margin-top: 3px;
    color: #C79A3A;
}
.mm-internal .mm-already-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.mm-internal .mm-already-terms-title {
    margin: 30px 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-already-terms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.mm-internal .mm-already-term {
    padding: 18px 20px;
    background-color: var(--ad-surface);
    border: 1px solid var(--ad-rule);
    border-radius: 3px;
}
.mm-internal .mm-already-term h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ad-ink);
}
.mm-internal .mm-already-term h3 i {
    color: var(--ad-accent);
}
.mm-internal .mm-already-term p {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-already-fine {
    margin: 20px 0 0;
    font-size: 12px;
    color: var(--ad-ink-soft);
}

/* --- Cancelling ----------------------------------------------------------- */

.mm-internal .mm-cancel-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}
.mm-internal .mm-cancel-facts {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.mm-internal .mm-cancel-fact {
    padding: 20px 22px;
    background-color: var(--ad-surface);
    border: 1px solid var(--ad-rule);
    border-radius: 3px;
}
/* The forfeited credits are the part people miss, so they get the warning edge. */
.mm-internal .mm-cancel-fact.is-warning {
    border-left: 3px solid #C79A3A;
}
.mm-internal .mm-cancel-fact .mm-crud-field-label {
    margin: 0 0 8px;
}
.mm-internal .mm-cancel-fact-figure {
    margin: 0;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--ad-ink);
}
.mm-internal .mm-cancel-fact-figure small {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-cancel-fact-note {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.65;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-cancel-confirm {
    padding: 22px;
    background-color: var(--ad-surface);
    border: 1px solid var(--ad-rule);
    border-radius: 3px;
}
.mm-internal .mm-cancel-confirm-title {
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-cancel-confirm p {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ad-ink);
}
.mm-internal .mm-cancel-confirm-warning {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    background-color: rgba(199, 154, 58, 0.12);
    border-left: 3px solid #C79A3A;
    border-radius: 2px;
    font-size: 13px;
}
.mm-internal .mm-cancel-confirm form {
    margin: 0;
}
/* Ending a membership is the destructive choice, so it is not the accent. */
.mm-internal .mm-cancel-confirm-btn {
    width: 100%;
    justify-content: center;
    background-color: transparent;
    border-color: #C62828;
    color: #C62828;
}
.mm-internal .mm-cancel-confirm-btn:hover,
.mm-internal .mm-cancel-confirm-btn:focus-visible {
    background-color: #C62828;
    color: #FFFFFF;
}
.mm-internal .mm-cancel-keep {
    width: 100%;
    justify-content: center;
    margin-top: 10px;
}
.mm-internal .mm-cancel-confirm-fine {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--ad-rule-soft);
    font-size: 12px;
    line-height: 1.6;
    color: var(--ad-ink-soft);
}
/* Statuses the ledger can now show. */
.mm-internal .mm-status-cancelling {
    color: #C79A3A;
}

@media (max-width: 1040px) {
    .mm-internal .mm-cancel-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .mm-internal .mm-cancel-confirm {
        order: -1;
    }
}

/* The guest-facing public_form layout keeps `.mm-internal` (for this whole
   stylesheet and the --ad-* variables), but its header/footer are the
   ordinary public ones, not the admin shell -- so the header's Login/Enquiry/
   Log Out button should look like the public site's rounded button, not the
   admin area's uppercase one. */
.mm-public-form .mm-header-btn {
    padding: 10px 24px;
    border-radius: 4px;
    font-size: inherit;
    font-weight: bold;
    letter-spacing: normal;
    text-transform: none;
}

/* Terms and Conditions modal on the membership application (guest and
   member alike -- both run under public_form/member layouts, both of which
   keep body.mm-internal). Reuses the site's generic .mm-modal-overlay /
   .mm-modal-box (defined in style.css) as the dimmed backdrop and panel,
   then overrides the panel for a longer document instead of a short
   confirmation message. */
.mm-internal .mm-terms-modal[hidden] {
    display: none;
}
.mm-internal .mm-terms-modal:not([hidden]) {
    display: flex;
}
.mm-internal .mm-terms-modal-box {
    text-align: left;
    max-width: 720px;
    width: calc(100% - 48px);
    max-height: 82vh;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.mm-internal .mm-terms-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--ad-rule);
    flex-shrink: 0;
}
.mm-internal .mm-terms-modal-head h3 {
    margin: 0;
    font-size: 17px;
    color: var(--ad-ink);
}
.mm-internal .mm-terms-modal-close {
    border: none;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    color: var(--ad-ink-soft);
    cursor: pointer;
    padding: 2px 6px;
}
.mm-internal .mm-terms-modal-close:hover {
    color: var(--ad-ink);
}
.mm-internal .mm-terms-modal-body {
    padding: 12px 24px 28px;
    overflow-y: auto;
}
.mm-internal .mm-terms-modal-body h1 {
    font-size: 20px;
    margin: 8px 0 4px;
}
.mm-internal .mm-terms-modal-body .mm-terms-updated {
    color: var(--ad-ink-soft);
    font-size: 13px;
    margin-bottom: 20px;
}
.mm-internal .mm-terms-modal-body h2 {
    font-size: 15px;
    margin-top: 22px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--ad-rule-soft);
    padding-bottom: 6px;
    color: var(--ad-ink);
}
.mm-internal .mm-terms-modal-body p,
.mm-internal .mm-terms-modal-body li {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ad-ink);
}
.mm-internal .mm-terms-modal-body ol {
    padding-left: 20px;
}
.mm-internal .mm-terms-modal-body ol li {
    margin-bottom: 6px;
}


/* ==========================================================================
   View and upgrade membership
   ========================================================================== */

.mm-internal .mm-mv-card {
    padding: 28px;
    background-color: var(--ad-surface);
    border: 1px solid var(--ad-rule);
    border-radius: 3px;
}
.mm-internal .mm-mv-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--ad-rule-soft);
}
.mm-internal .mm-mv-eyebrow {
    margin: 0 0 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-mv-head h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ad-ink);
}
.mm-internal .mm-mv-status {
    padding: 5px 12px;
    background-color: var(--ad-bg);
    border: 1px solid var(--ad-rule);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-mv-status-active {
    background-color: rgba(30, 122, 75, 0.1);
    border-color: rgba(30, 122, 75, 0.35);
    color: #1E7A4B;
}
.mm-internal .mm-mv-status-cancelling {
    background-color: rgba(193, 57, 43, 0.08);
    border-color: rgba(193, 57, 43, 0.3);
    color: #C1392B;
}

.mm-internal .mm-mv-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px 28px;
    margin: 0;
}
.mm-internal .mm-mv-facts dt {
    margin-bottom: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-mv-facts dd {
    margin: 0;
    font-size: 18px;
    color: var(--ad-ink);
}
.mm-internal .mm-mv-inc {
    display: block;
    font-size: 13px;
    color: var(--ad-ink-soft);
}

.mm-internal .mm-mv-rooms {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--ad-rule-soft);
}
.mm-internal .mm-mv-rooms-title {
    margin: 0 0 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-mv-rooms ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mm-internal .mm-mv-rooms li {
    padding: 6px 12px;
    background-color: var(--ad-bg);
    border: 1px solid var(--ad-rule);
    border-radius: 999px;
    font-size: 13px;
    color: var(--ad-ink);
}

.mm-internal .mm-mv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}
.mm-internal .mm-btn-quiet {
    background-color: transparent;
    border: 1px solid var(--ad-rule);
    color: var(--ad-ink-soft);
}
.mm-internal .mm-btn-quiet:hover {
    border-color: #C1392B;
    color: #C1392B;
}

/* --- Upgrade choices ------------------------------------------------------ */

.mm-internal .mm-mv-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
/* The label is the grid item and the span inside is the card. Making the label
   a flex container lets the card fill it without a percentage height — with
   `height: 100%` the card added its own padding and border on top of the full
   height it was given and overflowed the label by exactly that much, which put
   the buttons below the grid underneath the bottom of the cards. */
.mm-internal .mm-mv-plan {
    display: flex;
    cursor: pointer;
}
.mm-internal .mm-mv-plan input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}
.mm-internal .mm-mv-plan-body {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    padding: 22px;
    background-color: var(--ad-surface);
    border: 1px solid var(--ad-rule);
    border-radius: 3px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.mm-internal .mm-mv-plan:hover .mm-mv-plan-body {
    border-color: var(--ad-ink-soft);
}
.mm-internal .mm-mv-plan input:checked + .mm-mv-plan-body {
    border-color: var(--ad-accent);
    box-shadow: inset 0 0 0 1px var(--ad-accent);
}
.mm-internal .mm-mv-plan input:focus-visible + .mm-mv-plan-body {
    outline: 2px solid var(--ad-accent);
    outline-offset: 2px;
}
.mm-internal .mm-mv-plan-name {
    display: block;
    margin-bottom: 8px;
    font-size: 19px;
    font-weight: 500;
    color: var(--ad-ink);
}
.mm-internal .mm-mv-plan-price {
    display: block;
    font-size: 22px;
    color: var(--ad-ink);
}
.mm-internal .mm-mv-plan-price small {
    font-size: 13px;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-mv-plan-diff {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ad-accent);
}
.mm-internal .mm-mv-plan-includes {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-mv-plan-blurb {
    display: block;
    flex: 1;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ad-ink-soft);
}

/* --- Member discounts (Stripe promo codes) -------------------------------- */
.mm-internal .mm-discounts-list {
    display: grid;
    gap: 14px;
    max-width: 640px;
}
.mm-internal .mm-discounts-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid var(--ad-rule);
    border-radius: 3px;
    background: var(--ad-surface, #fff);
}
.mm-internal .mm-discounts-code {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.mm-internal .mm-discounts-summary {
    margin: 4px 0 0;
    color: var(--ad-ink-soft);
    font-size: 14px;
}
.mm-internal .mm-discounts-expiry {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-discounts-fine {
    margin-top: 22px;
    max-width: 640px;
    font-size: 13px;
    color: var(--ad-ink-soft);
}