/* Session QR block — frontend.
 *
 * Replicates the visual shell of the magic-marker QR card
 * (`.mm-cs-qr-overlay.mm-cs-qr-inline` from central-screen.css) so the new
 * block looks identical even when central-screen.css is not present.
 */

.kf-session-qr.mm-cs-qr-overlay {
    display:        block;
    position:       static;
    background:     #fff;
    border:         1px solid #dedede;
    border-radius:  5px;
    overflow:       hidden;
    padding:        0;
    box-shadow:     0 1px 4px rgba(0,0,0,0.08);
    width:          fit-content;
    max-width:      320px;
    text-align:     center;
    margin:         0 auto;
    pointer-events: none; /* wrapper handles clicks when blurred */
}
.kf-session-qr .mm-cs-qr-section-top    { padding: 12px; }
.kf-session-qr .mm-cs-qr-section-bottom { padding: 12px; background: #dedede; }

.kf-session-qr .mm-cs-qr-heading {
    font-size:   28px;
    font-weight: 400;
    line-height: 1.15;
    color:       #00374a;
    margin:      0 auto 12px;
    white-space: nowrap;
}
.kf-session-qr .mm-cs-qr-heading strong {
    font-weight:      800;
    display:          block;
    font-size:        21px;
    color:            #fff;
    background-color: #00374a;
    border-radius:    5px;
    padding:          5px 10px;
    letter-spacing:   2px;
    text-transform:   uppercase;
}
.kf-session-qr .mm-cs-qr-heading-sub {
    font-size:      15px;
    display:        block;
    font-style:    italic;
    padding:        0 10px;
    margin-bottom:  4px;
}

.kf-session-qr .mm-cs-qr-code-wrap          { display: block; margin: 0 auto; position: relative; }
.kf-session-qr .mm-cs-qr-code-wrap img,
.kf-session-qr .mm-cs-qr-code-wrap canvas   { display: block; margin: 0 auto; }

/* Centred logo over the QR — uses --kf-sq-favicon (set inline by the
 * server-render template). Scoped to .kf-session-qr so it does NOT
 * affect the magic-marker QR which has its own image rule. */
.kf-session-qr .mm-cs-qr-code-wrap::after {
    content:             '';
    position:            absolute;
    top:                 50%;
    left:                50%;
    transform:           translate(-50%, -50%);
    width:               76px;
    height:              76px;
    background-color:    #fff;
    background-image:    var(--kf-sq-favicon, none);
    background-size:     72px 72px;
    background-position: center;
    background-repeat:   no-repeat;
    border-radius:       0;
    pointer-events:      none;
}

.kf-session-qr .mm-cs-qr-or {
    width:       180px;
    margin:      0 auto 8px;
    color:       #00374a;
    line-height: 1.2;
}
.kf-session-qr .mm-cs-qr-or a {
    display:         block;
    color:           #00374a;
    font-weight:     bold;
    text-transform:  uppercase;
    text-decoration: none;
    font-size:       17px;
    letter-spacing:  0.5px;
}
.kf-session-qr .mm-cs-qr-or a:hover { text-decoration: underline; }

.kf-session-qr .mm-cs-qr-pin {
    box-sizing:      border-box;
    display:         flex;
    align-items:     stretch;
    width:           180px;
    margin:          0 auto;
    line-height:     1;
    text-decoration: none;
    color:           #00374a;
}
.kf-session-qr .mm-cs-qr-pin-label {
    background-color: #00374a;
    color:            #fff;
    font-family:      "Lekton", sans-serif;
    font-weight:      700;
    font-size:        19px;
    letter-spacing:   0.1em;
    padding:          2px 12px 0;
    border-radius:    5px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    margin-right:     8px;
}
.kf-session-qr .mm-cs-qr-pin-code {
    flex:           1;
    font-family:    "Lekton", sans-serif;
    font-weight:    700;
    font-size:      32px;
    letter-spacing: 0.2em;
    color:          #00374a;
    text-align:     center;
    padding:        3px 0 0;
}

.kf-session-qr.is-unconfigured,
.kf-session-qr.is-error {
    max-width: 320px;
    margin:    0 auto;
}

/* ── Blur toggle ─────────────────────────────────────────────────────────── */
/* kf-sq-wrapper is the click target and positioning root for the reveal btn. */
.kf-sq-wrapper {
    position:        relative;
    width:           fit-content;
    margin:          0 auto;
    cursor:          pointer;
    user-select:     none;
}

/* QR card gets the blur; transition smooths the reveal. */
.kf-session-qr {
    transition:      filter 0.25s ease;
}
.kf-session-qr.is-blurred {
    filter:          blur(14px);
    pointer-events:  none; /* pass clicks through to wrapper */
}
/* When revealed, restore bottom-section pointer events for the link. */
.kf-session-qr:not(.is-blurred) .mm-cs-qr-section-bottom {
    pointer-events:  auto;
}
/* When revealed, top section click re-blurs (pointer on wrapper handles it). */
.kf-session-qr:not(.is-blurred) {
    pointer-events:  auto;
}

/* ── Centered reveal button (sibling of card, never blurred) ────────────── */
.kf-sq-blur-btn {
    display:         none; /* shown only when blurred */
    position:        absolute;
    top:             50%;
    left:            50%;
    transform:       translate(-50%, -50%);
    width:           44px;
    height:          44px;
    padding:         0;
    background:      #fff;
    border:          1px solid #dedede;
    border-radius:   10px;
    box-shadow:      0 1px 4px rgba(0, 0, 0, 0.08);
    cursor:          pointer;
    align-items:     center;
    justify-content: center;
    color:           #00374a;
    z-index:         2;
    pointer-events:  none; /* wrapper click handles toggle */
}
.kf-sq-blur-btn .ph {
    font-size:   22px;
    line-height: 1;
    display:     block;
}
/* Show button when card is blurred */
.kf-session-qr.is-blurred + .kf-sq-blur-btn {
    display: flex;
}

/* ── Active-session badge ──────────────────────────────────────────────
 * Sits inside .mm-cs-qr-section-bottom (above .mm-cs-qr-or — the URL link).
 * Hidden until the relay reports activeCount > 0 for this form. Phosphor
 * icon + count + label. Centred via the parent's `text-align: center`
 * (inherited from .mm-cs-qr-overlay) — `display: inline-flex` lets the
 * pill shrink-wrap its content. */
.kf-sq-wrapper {
    position: relative;
}
.mm-cs-qr-section-bottom > .kf-sq-active {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    margin:         0 auto 8px;
    padding:        4px 10px;
    background:     #00374a;
    color:          #4ade80;
    border-radius:  999px;
    font-family:    "Lekton", ui-monospace, Menlo, Consolas, monospace;
    font-size:      14px;
    font-weight:    700;
    line-height:    1;
    letter-spacing: 0.5px;
}
.mm-cs-qr-section-bottom > .kf-sq-active .ph {
    font-size: 16px;
    line-height: 1;
}
.kf-sq-active[hidden] {
    display: none;
}