/**
 * Monkey Bookings — customer booking form ([monkey_bookings]).
 *
 * Self-contained, and scoped to .mbk-booking. Colours pick up the Monkey
 * Business theme's own (--mb-*) when it is active and fall back to the same
 * greens and gold when it is not, so the form matches the site without the
 * theme needing to know about it.
 */

.mbk-booking {
    --mbk-accent: var(--mb-golden, #d4a017);
    --mbk-dark: var(--mb-jungle-dark, #0f2e1a);
    --mbk-green: var(--mb-primary, #1a3d2b);
    --mbk-ink: var(--mb-foreground, #14261b);
    --mbk-muted: var(--mb-muted-foreground, #5a6b60);
    --mbk-line: var(--mb-border, #d3ddd6);
    --mbk-tint: #f6f4ec;
    --mbk-ok: #23693f;
    --mbk-bad: #a52a2a;
    --mbk-radius: 12px;

    max-width: 880px;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--mbk-ink);
    text-align: left;
}

.mbk-booking *,
.mbk-booking *::before,
.mbk-booking *::after {
    box-sizing: border-box;
}

.mbk-booking [hidden] {
    display: none !important;
}

.mbk-booking__loading,
.mbk-booking-notice {
    padding: 1.5rem;
    text-align: center;
    color: var(--mbk-muted);
}

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

.mbk-step {
    margin: 0 0 1.25rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--mbk-line);
    border-radius: var(--mbk-radius);
}

.mbk-step__title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem;
    font-size: 1.5rem;
    line-height: 1.15;
    color: var(--mbk-green);
}

.mbk-step__num {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--mbk-dark);
    background: var(--mbk-accent);
    border-radius: 50%;
}

.mbk-note {
    margin: 0.75rem 0 0;
    color: var(--mbk-muted);
}

.mbk-note--small {
    font-size: 0.875rem;
}

.mbk-note a {
    color: inherit;
    text-decoration: underline;
}

/* ---- Choices (desk type, pass) --------------------------------------------- */

.mbk-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr));
    gap: 0.75rem;
}

.mbk-options--types {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.mbk-option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 100%;
    padding: 0.9rem 1rem;
    background: #fff;
    border: 2px solid var(--mbk-line);
    border-radius: var(--mbk-radius);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.mbk-option:hover {
    border-color: var(--mbk-accent);
}

.mbk-option.is-selected {
    background: var(--mbk-tint);
    border-color: var(--mbk-accent);
    box-shadow: 0 0 0 1px var(--mbk-accent);
}

/* The radio button stays for keyboards and screen readers, but out of sight. */
.mbk-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.mbk-option:focus-within {
    outline: 2px solid var(--mbk-green);
    outline-offset: 2px;
}

.mbk-option__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--mbk-green);
}

.mbk-option__text {
    font-size: 0.9375rem;
    color: var(--mbk-muted);
}

/* Paid upgrades: tick as many as you like. */
.mbk-extras__group {
    margin: 1rem 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mbk-muted);
}

.mbk-extras__group:first-child {
    margin-top: 0;
}

.mbk-options--extras {
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}

.mbk-option--extra {
    padding-right: 2.6rem;
}

/* The tick box, drawn (the real checkbox is kept for keyboards and screen readers). */
.mbk-option--extra::after {
    content: '';
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
    color: #fff;
    background: #fff;
    border: 2px solid var(--mbk-line);
    border-radius: 5px;
}

.mbk-option--extra.is-selected::after {
    content: '\2713';
    background: var(--mbk-green);
    border-color: var(--mbk-green);
}

.mbk-option__thumb {
    display: block;
    width: 100%;
    max-width: 9rem;
    height: 5rem;
    margin-bottom: 0.35rem;
    object-fit: contain;
    object-position: left center;
}

.mbk-option__text--small {
    font-size: 0.8125rem;
}

.mbk-summary__extras {
    margin: 0.35rem 0 0;
    font-size: 0.9375rem;
    color: var(--mbk-muted);
}

.mbk-option__price {
    margin-top: auto;
    padding-top: 0.35rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--mbk-ink);
}

.mbk-option__badge {
    align-self: flex-start;
    padding: 0.1rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mbk-dark);
    background: var(--mbk-accent);
    border-radius: 999px;
}

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

.mbk-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.9rem;
}

.mbk-row + .mbk-row {
    margin-top: 0.9rem;
}

.mbk-field {
    display: block;
    margin: 0;
}

.mbk-avail .mbk-field {
    max-width: 22rem;
    margin-top: 1rem;
}

.mbk-field__label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

.mbk-booking .mbk-input {
    display: block;
    width: 100%;
    min-height: 2.9rem;
    padding: 0.6rem 0.8rem;
    font-family: inherit;
    /* 16px or more stops phones zooming in on focus. */
    font-size: 1rem;
    line-height: 1.4;
    color: var(--mbk-ink);
    background: #fff;
    border: 1px solid #9fb0a5;
    border-radius: 8px;
}

.mbk-booking textarea.mbk-input {
    resize: vertical;
}

.mbk-booking .mbk-input:focus {
    border-color: var(--mbk-green);
    outline: 2px solid var(--mbk-accent);
    outline-offset: 1px;
}

/* ---- A password for the member account that comes with the booking ----------- */

.mbk-account-fields {
    margin-top: 0.9rem;
}

.mbk-password[hidden] {
    display: none;
}

/* As wide as one of the boxes above it, not the whole row. */
.mbk-password__box {
    position: relative;
    max-width: 26rem;
}

/* Room for "Show" inside the box, on the right. */
.mbk-booking .mbk-password__box .mbk-input {
    padding-right: 4.25rem;
}

.mbk-booking .mbk-password__show {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    min-height: 2rem;
    padding: 0 0.4rem;
    font-size: 0.875rem;
    transform: translateY(-50%);
}

.mbk-password .mbk-note {
    margin-top: 0.35rem;
}

.mbk-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    margin: 0;
    font-size: 0.9375rem;
    cursor: pointer;
}

.mbk-booking .mbk-check input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: var(--mbk-green);
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.mbk-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- Availability ---------------------------------------------------------- */

.mbk-when {
    margin: 0 0 0.75rem;
    font-size: 1.0625rem;
}

.mbk-alert {
    margin: 0;
    padding: 0.75rem 1rem;
    font-weight: 600;
    border-left: 4px solid;
    border-radius: 6px;
}

.mbk-alert--ok {
    color: var(--mbk-ok);
    background: #e8f4ec;
    border-color: var(--mbk-ok);
}

.mbk-alert--bad {
    color: var(--mbk-bad);
    background: #fbeceb;
    border-color: var(--mbk-bad);
}

.mbk-avail .mbk-alert + .mbk-note {
    margin-top: 0.75rem;
}

/* ---- Floor plan -------------------------------------------------------------- */

.mbk-plan {
    margin-top: 0.75rem;
    /* On a phone the plan keeps a tappable size and scrolls sideways. */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    background: var(--mbk-tint);
    border: 1px solid var(--mbk-line);
    border-radius: var(--mbk-radius);
}

.mbk-plan__canvas {
    position: relative;
    margin: 0 auto;
}

.mbk-plan__stage {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
}

.mbk-plan__item {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: none;
    border-radius: 6px;
}

.mbk-plan__item.is-round {
    border-radius: 50%;
}

/* The tracing image, when it is set to show to customers too. */
.mbk-booking .mbk-plan__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* Areas, shapes, text, symbols and pictures: there for bearings. Their
   colours, borders and text come from each item's own style, set in the
   floor plan editor. */
.mbk-plan__item--zone,
.mbk-plan__item--shape,
.mbk-plan__item--label,
.mbk-plan__item--icon,
.mbk-plan__item--image {
    pointer-events: none;
}

.mbk-plan__item--label {
    overflow: visible;
    white-space: nowrap;
}

.mbk-plan__name {
    position: absolute;
    max-width: calc(100% - 16px);
    overflow: hidden;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mbk-plan__icon {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 12%;
}

.mbk-plan__icon svg {
    width: 100%;
    height: 100%;
}

.mbk-booking .mbk-plan__img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
}

/* Desks of another type: there for bearings only. */
.mbk-plan__item--other {
    color: #a3b0a7;
    background: #e9eee9;
    border: 1px solid #d3ddd6;
}

.mbk-plan__item--taken {
    color: #8a968d;
    background: repeating-linear-gradient(45deg, #dfe5e0, #dfe5e0 6px, #eef2ee 6px, #eef2ee 12px);
    border: 2px solid #b9c6bd;
}

/* A taken desk can still be tapped, to see what it is like. */
button.mbk-plan__item--taken {
    cursor: pointer;
}

button.mbk-plan__item--taken:hover,
button.mbk-plan__item--taken:focus {
    color: #6b7a70;
    background: repeating-linear-gradient(45deg, #dfe5e0, #dfe5e0 6px, #eef2ee 6px, #eef2ee 12px);
    border-color: #8a968d;
}

button.mbk-plan__item--taken:focus-visible {
    outline: 3px solid var(--mbk-accent);
    outline-offset: 2px;
}

button.mbk-plan__item--taken.is-viewed {
    color: var(--mbk-dark);
    border-color: var(--mbk-dark);
}

.mbk-plan__item--free {
    color: var(--mbk-ok);
    background: #fff;
    border: 2px solid var(--mbk-ok);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.mbk-plan__item--free:hover {
    background: #e8f4ec;
}

.mbk-plan__item--free:focus-visible {
    outline: 3px solid var(--mbk-accent);
    outline-offset: 2px;
}

.mbk-plan__item--free.is-selected {
    color: var(--mbk-dark);
    background: var(--mbk-accent);
    border-color: var(--mbk-dark);
}

.mbk-key {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin: 0.6rem 0 0;
    font-size: 0.875rem;
    color: var(--mbk-muted);
}

.mbk-key span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.mbk-key__dot {
    position: static;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 4px;
}

/* ---- The desk being looked at: photo, name, description ---------------------- */

.mbk-desk {
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    margin: 0.9rem 0 1rem;
    padding: 0.75rem;
    background: #fff;
    border: 1px solid var(--mbk-line);
    border-radius: var(--mbk-radius);
}

.mbk-desk:not(.has-photo) {
    grid-template-columns: minmax(0, 1fr);
}

.mbk-booking .mbk-desk__photo {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--mbk-tint);
    border: 0;
    border-radius: 8px;
    cursor: zoom-in;
}

.mbk-booking .mbk-desk__photo img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

.mbk-booking .mbk-desk__photo:focus-visible {
    outline: 3px solid var(--mbk-accent);
    outline-offset: 2px;
}

.mbk-desk__status {
    display: inline-block;
    margin: 0 0 0.4rem;
    padding: 0.1rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: var(--mbk-ok);
    border-radius: 999px;
}

.mbk-desk__status--taken {
    color: #4f5a53;
    background: #dfe5e0;
}

.mbk-booking .mbk-desk__title {
    margin: 0 0 0.4rem;
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--mbk-green);
}

.mbk-desk__text {
    margin: 0 0 0.5rem;
    white-space: pre-line;
}

.mbk-desk__facts {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    color: var(--mbk-muted);
}

.mbk-desk__body > :last-child {
    margin-bottom: 0;
}

/* The photo, large. It is added to the page itself, outside the form. */
.mbk-lightbox {
    max-width: min(92vw, 1100px);
    max-height: 92vh;
    padding: 0;
    overflow: hidden;
    color: #14261b;
    background: #fff;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.mbk-lightbox::backdrop {
    background: rgba(10, 25, 15, 0.82);
}

.mbk-lightbox__img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(92vh - 3.5rem);
    margin: 0 auto;
}

.mbk-lightbox__caption {
    margin: 0;
    padding: 0.75rem 1rem 0.85rem;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.mbk-lightbox__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1.6rem;
    line-height: 1;
    color: #fff;
    background: rgba(15, 46, 26, 0.85);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.mbk-lightbox__close:focus-visible {
    outline: 3px solid #d4a017;
    outline-offset: 2px;
}

/* ---- Pictures on the plan that open large when tapped ------------------------ */

.mbk-booking button.mbk-plan__item--image.is-zoomable {
    pointer-events: auto;
    min-height: 0;
    color: inherit;
    background: transparent;
    border: 0;
    box-shadow: none;
    cursor: zoom-in;
    -webkit-appearance: none;
    appearance: none;
}

.mbk-booking button.mbk-plan__item--image.is-zoomable:hover,
.mbk-booking button.mbk-plan__item--image.is-zoomable:focus-visible {
    outline: 3px solid var(--mbk-accent);
    outline-offset: 2px;
}

/* ---- The floor plan on its own ([monkey_bookings_map]) ----------------------- */

.mbk-booking.mbk-map {
    max-width: 100%;
}

.mbk-map .mbk-plan {
    margin-top: 0;
}

/* A desk: in its type's colour when the plan has desk types, else green. */
.mbk-plan__item--show {
    color: var(--mbk-type, var(--mbk-ok));
    background: #fff;
    border: 2px solid var(--mbk-type, var(--mbk-ok));
}

/* One with a photo, a name or a description can be tapped. */
.mbk-booking button.mbk-plan__item--show {
    min-height: 0;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.mbk-booking button.mbk-plan__item--show:hover {
    background: #eef5f0;
}

.mbk-booking button.mbk-plan__item--show:focus-visible {
    outline: 3px solid var(--mbk-accent);
    outline-offset: 2px;
}

.mbk-booking button.mbk-plan__item--show.is-viewed {
    color: var(--mbk-dark);
    background: var(--mbk-accent);
    border-color: var(--mbk-dark);
}

.mbk-map__hint {
    margin: 0.6rem 0 0;
}

/* Only when part of the plan is off to the side. */
.mbk-map__swipe[hidden] {
    display: none;
}

.mbk-map__card:empty {
    display: none;
}

.mbk-map__action {
    margin: 1.25rem 0 0;
    text-align: center;
}

.mbk-booking a.mbk-button,
.mbk-booking a.mbk-button:hover {
    color: var(--mbk-dark);
    text-decoration: none;
}

/* ---- Check in with a booking code ([monkey_bookings_checkin]) ---------------- */

.mbk-booking.mbk-checkin {
    max-width: 540px;
}

.mbk-checkin__card {
    display: grid;
    gap: 1rem;
    justify-items: center;
    text-align: center;
}

.mbk-checkin__label {
    font-weight: 600;
}

.mbk-booking .mbk-checkin__input {
    max-width: 17rem;
    min-height: 4rem;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
}

.mbk-booking .mbk-checkin__input::placeholder {
    font-weight: 400;
    letter-spacing: 0.08em;
    opacity: 0.45;
}

.mbk-checkin__card .mbk-alert {
    width: 100%;
    text-align: left;
}

.mbk-checkin__card .mbk-done__list {
    text-align: left;
}

/* ---- Summary and submit ------------------------------------------------------ */

.mbk-summary {
    margin: 1.1rem 0 1rem;
    padding: 0.9rem 1rem;
    background: var(--mbk-tint);
    border-left: 4px solid var(--mbk-accent);
    border-radius: 6px;
}

.mbk-summary p {
    margin: 0;
}

.mbk-summary__what {
    font-weight: 700;
}

.mbk-summary__price {
    color: var(--mbk-muted);
}

.mbk-booking .mbk-alert + .mbk-button {
    margin-top: 0.9rem;
}

.mbk-booking .mbk-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding: 0.8rem 2.25rem;
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mbk-dark);
    background: var(--mbk-accent);
    border: 0;
    border-radius: 0.75rem;
    cursor: pointer;
}

.mbk-booking .mbk-button:hover {
    filter: brightness(0.94);
}

.mbk-booking .mbk-button:focus-visible {
    outline: 3px solid var(--mbk-green);
    outline-offset: 2px;
}

.mbk-booking .mbk-button:disabled {
    cursor: wait;
    opacity: 0.6;
}

/* Secondary and "are you sure" buttons on the "your booking" panel. */
.mbk-booking .mbk-button--quiet {
    color: var(--mbk-green);
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--mbk-line);
}

.mbk-booking .mbk-button--quiet:hover {
    box-shadow: inset 0 0 0 2px var(--mbk-green);
    filter: none;
}

.mbk-booking .mbk-button--danger {
    color: #fff;
    background: var(--mbk-bad);
}

.mbk-link {
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--mbk-green);
    text-decoration: underline;
    background: none;
    border: 0;
    cursor: pointer;
}

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

.mbk-done {
    padding: 2rem 1.5rem;
    text-align: center;
    background: #fff;
    border: 1px solid var(--mbk-line);
    border-top: 4px solid var(--mbk-accent);
    border-radius: var(--mbk-radius);
}

.mbk-done:focus {
    outline: none;
}

.mbk-done__tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 0 0.75rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    background: var(--mbk-ok);
    border-radius: 50%;
}

.mbk-done__title {
    margin: 0 0 0.5rem;
    font-size: 2rem;
    line-height: 1.15;
    color: var(--mbk-green);
}

.mbk-done__list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1rem;
    max-width: 30rem;
    margin: 1.25rem auto;
    padding: 1rem 1.25rem;
    text-align: left;
    background: var(--mbk-tint);
    border-radius: 8px;
}

.mbk-done__list dt {
    font-weight: 600;
    color: var(--mbk-muted);
}

.mbk-done__list dd {
    margin: 0;
    font-weight: 600;
}

.mbk-done__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin: 1rem 0 0;
}

/* Their member account and the app, on "You're booked" and "Your booking". */
.mbk-account {
    max-width: 30rem;
    margin: 1.25rem auto;
    padding: 1.1rem 1.25rem 1.25rem;
    text-align: left;
    background: #fff;
    border: 1px solid var(--mbk-line);
    border-left: 4px solid var(--mbk-accent);
    border-radius: var(--mbk-radius);
}

.mbk-booking .mbk-account__title {
    margin: 0 0 0.4rem;
    font-size: 1.125rem;
    line-height: 1.3;
    color: var(--mbk-green);
}

.mbk-account__text {
    margin: 0 0 0.6rem;
    overflow-wrap: anywhere;
}

.mbk-booking .mbk-account .mbk-button {
    margin-top: 0.25rem;
}

/* ---- Your booking (change / cancel) ------------------------------------------ */

.mbk-manage .mbk-alert {
    margin-bottom: 1.25rem;
    text-align: left;
}

.mbk-manage__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

.mbk-step .mbk-manage__actions {
    justify-content: flex-start;
}

.mbk-manage__ask {
    flex: 1 0 100%;
    margin: 0;
    font-weight: 700;
}

.mbk-pill {
    display: inline-block;
    padding: 0.15rem 0.7rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #fff;
    background: var(--mbk-ok);
    border-radius: 999px;
}

.mbk-pill--cancelled {
    color: #4f5a53;
    background: #dfe5e0;
}

.mbk-pill--pending {
    color: var(--mbk-dark);
    background: var(--mbk-accent);
}

/* Waiting for an online payment to come through. */
.mbk-alert--wait {
    color: var(--mbk-ink);
    background: #fdf6e3;
    border-color: var(--mbk-accent);
}

/* A note that sits among the pass choices. */
.mbk-options > .mbk-note {
    grid-column: 1 / -1;
    margin: 0;
}

/* Shown above the steps while an existing booking is being changed. */
.mbk-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin: 0 0 1.25rem;
    padding: 0.85rem 1.1rem;
    background: var(--mbk-tint);
    border-left: 4px solid var(--mbk-accent);
    border-radius: 6px;
}

.mbk-banner p {
    margin: 0;
}

.mbk-find__intro {
    margin: 0 0 1rem;
}

.mbk-find .mbk-alert {
    margin-bottom: 1rem;
}

.mbk-manage-link {
    margin: 0;
    text-align: center;
}

/* ---- Members signing in: on the booking form ------------------------------------ */

.mbk-signin-offer {
    margin: 0 0 0.9rem;
    padding: 0.7rem 1rem;
    background: var(--mbk-tint);
    border-radius: 8px;
}

/* "Signed in as …", above the details that are left to fill in. */
.mbk-signed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 1.25rem;
    margin: 0 0 0.9rem;
    padding: 0.75rem 1rem;
    background: var(--mbk-tint);
    border-left: 4px solid var(--mbk-accent);
    border-radius: 6px;
}

.mbk-signed p {
    margin: 0;
    overflow-wrap: anywhere;
}

.mbk-signed__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}

.mbk-signin {
    max-width: 26rem;
}

.mbk-booking .mbk-signin__title {
    margin: 0 0 0.4rem;
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--mbk-green);
}

.mbk-signin__intro {
    margin: 0 0 0.9rem;
}

.mbk-signin .mbk-alert {
    margin-bottom: 0.9rem;
}

.mbk-signin__fields {
    display: grid;
    gap: 0.9rem;
}

.mbk-signin .mbk-check {
    margin-top: 0.5rem;
}

.mbk-signin__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 0.75rem;
}

/* The six numbers from the email: big, and spaced to be read off a phone. */
.mbk-booking .mbk-signin__code {
    max-width: 12rem;
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3em;
    text-align: center;
}

/* While signing in on the booking form, the price and "Book now" step aside. */
.mbk-step--signing .mbk-summary,
.mbk-step--signing > .mbk-alert,
.mbk-step--signing > .mbk-button,
.mbk-step--signing > .mbk-note {
    display: none;
}

/* A link that looks like a button (the theme colours links its own way). */
.mbk-booking a.mbk-button {
    color: var(--mbk-dark);
    text-decoration: none;
}

.mbk-booking a.mbk-button--quiet {
    color: var(--mbk-green);
}

/* ---- "My account" ([monkey_bookings_account]) ------------------------------------ */

.mbk-me {
    max-width: 760px;
}

.mbk-me__door .mbk-step {
    padding: 1.75rem 1.5rem;
}

.mbk-me__door .mbk-signin {
    margin: 0 auto;
}

.mbk-me .mbk-me__door .mbk-signin__title {
    font-size: 1.75rem;
}

.mbk-me__new {
    margin-bottom: 1.5rem;
    text-align: center;
}

.mbk-me__page:focus {
    outline: none;
}

.mbk-me__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1.25rem;
    margin: 0 0 1.25rem;
}

.mbk-booking .mbk-me__hello {
    margin: 0;
    font-size: 2rem;
    line-height: 1.15;
    color: var(--mbk-green);
}

.mbk-me__who {
    margin: 0;
    color: var(--mbk-muted);
    overflow-wrap: anywhere;
}

.mbk-me__status {
    margin: 0 0 0.9rem;
}

.mbk-me__status .mbk-pill {
    margin-right: 0.35rem;
}

.mbk-me__facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 1rem;
    max-width: 22rem;
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    background: var(--mbk-tint);
    border-radius: 8px;
}

.mbk-me__facts dt {
    font-weight: 600;
    color: var(--mbk-muted);
}

.mbk-me__facts dd {
    margin: 0;
    font-weight: 700;
}

.mbk-me__app {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    margin: 0;
}

.mbk-me__app .mbk-note {
    flex: 1 1 14rem;
    margin: 0;
}

.mbk-me__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mbk-me__booking {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    margin: 0;
    padding: 1rem 0;
    border-top: 1px solid var(--mbk-line);
}

.mbk-me__booking:first-child {
    padding-top: 0;
    border-top: 0;
}

.mbk-me__main {
    flex: 1 1 16rem;
    min-width: 0;
}

.mbk-me__main p {
    margin: 0;
    overflow-wrap: anywhere;
}

.mbk-me__when {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--mbk-green);
}

.mbk-me__meta {
    font-size: 0.9375rem;
    color: var(--mbk-muted);
}

.mbk-me__side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.9rem;
}

/* Smaller than the form's main button: there may be several on the page. */
.mbk-booking .mbk-me__action,
.mbk-booking .mbk-me__app .mbk-button {
    min-height: 2.75rem;
    padding: 0.55rem 1.25rem;
    font-size: 1rem;
}

.mbk-me__none {
    margin: 0;
}

.mbk-me__book {
    margin: 1rem 0 0;
}

.mbk-me__past {
    display: grid;
    grid-template-columns: minmax(9.5rem, auto) 1fr auto;
    align-items: center;
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0.6rem 0;
    font-size: 0.9375rem;
    border-top: 1px solid var(--mbk-line);
}

.mbk-me__past:first-child {
    padding-top: 0;
    border-top: 0;
}

.mbk-me__past-when {
    font-weight: 600;
}

.mbk-me__past-what {
    min-width: 0;
    color: var(--mbk-muted);
    overflow-wrap: anywhere;
}

@media (max-width: 560px) {
    .mbk-me__past {
        grid-template-columns: 1fr auto;
    }

    .mbk-me__past-what {
        grid-column: 1 / -1;
        order: 3;
    }

    .mbk-me__side {
        width: 100%;
        justify-content: space-between;
    }

    .mbk-booking .mbk-me__action {
        width: auto;
    }
}

/* ---- Several desks in one booking ---------------------------------------------- */

/* "How many desks?" */
.mbk-avail .mbk-count {
    max-width: 16rem;
}

.mbk-count .mbk-note {
    display: block;
    margin-top: 0.3rem;
}

/* A name and an email address for each of the other desks. */
.mbk-guests {
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--mbk-line);
}

.mbk-booking .mbk-guests__title {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--mbk-green);
}

.mbk-guests > .mbk-note {
    margin-top: 0.35rem;
}

.mbk-booking .mbk-guest {
    min-width: 0;
    margin: 0.9rem 0 0;
    padding: 0.85rem 1rem 1rem;
    border: 1px solid var(--mbk-line);
    border-radius: 8px;
}

.mbk-booking .mbk-guest__title {
    padding: 0 0.4rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--mbk-green);
}

.mbk-guest__warn {
    margin-top: 0.5rem;
    padding-left: 0.7rem;
    border-left: 3px solid var(--mbk-accent);
}

/* "Book without their email address?" */
.mbk-ask {
    margin: 0.9rem 0 0;
    padding: 1rem 1.1rem 1.1rem;
    background: #fdf6e3;
    border-left: 4px solid var(--mbk-accent);
    border-radius: 6px;
}

.mbk-ask p {
    margin: 0 0 0.5rem;
}

.mbk-ask__title {
    font-weight: 700;
}

/* A member is about to book on top of a booking they have. */
.mbk-overlap {
    margin-top: 0.9rem;
    margin-bottom: 0.9rem;
    font-weight: 400;
}

/* The other desks, on "You're booked". */
.mbk-group {
    max-width: 30rem;
    margin: 1.25rem auto;
    padding: 1rem 1.25rem;
    text-align: left;
    background: var(--mbk-tint);
    border-radius: 8px;
}

.mbk-booking .mbk-group__title {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    line-height: 1.3;
    color: var(--mbk-green);
}

.mbk-group__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mbk-group__list li {
    margin: 0;
    padding: 0.45rem 0;
    border-top: 1px solid var(--mbk-line);
    overflow-wrap: anywhere;
}

.mbk-group__list li:first-child {
    border-top: 0;
}

.mbk-group__how {
    display: block;
    font-size: 0.875rem;
    color: var(--mbk-muted);
}

.mbk-group .mbk-note {
    margin-top: 0.5rem;
    font-weight: 600;
    color: var(--mbk-ink);
}

/* "For Sam" / "Booked for you by Alex", on "My account". */
.mbk-me__for {
    font-size: 0.9375rem;
    color: var(--mbk-ink);
}

@media (max-width: 480px) {
    .mbk-desk {
        grid-template-columns: minmax(0, 1fr);
    }

    .mbk-step {
        padding: 1rem;
    }

    .mbk-booking .mbk-button {
        width: 100%;
    }

    .mbk-done__list {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }

    .mbk-done__list dd {
        margin-bottom: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mbk-option,
    .mbk-plan__item--free,
    .mbk-booking button.mbk-plan__item--show {
        transition: none;
    }
}

/* ---- Taking a meeting: the meeting room (since 0.22.0) --------------------- */

.mbk-room__list {
    margin: 0 0 0.9rem;
    padding: 0;
    list-style: none;
    border: 1px solid var(--mbk-line);
    border-radius: 0.5rem;
}

.mbk-room__list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0.55rem 0.8rem;
    border-top: 1px solid var(--mbk-line);
    font-weight: 600;
    color: var(--mbk-ink);
}

.mbk-room__list li:first-child {
    border-top: 0;
}

.mbk-room__pick {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    margin-bottom: 0.9rem;
}

.mbk-room .mbk-alert,
.mbk-room .mbk-note {
    margin: 0 0 0.9rem;
}

.mbk-room__also {
    margin-top: 0.9rem;
}