/* 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;
}
.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 0 10px;
    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:   0.5px;
    text-transform:   uppercase;
}
.kf-session-qr .mm-cs-qr-heading-sub {
    font-size:      15px;
    display:        block;
    text-transform: uppercase;
    margin-bottom:  4px;
}

.kf-session-qr .mm-cs-qr-code-wrap          { display: block; margin: 0 auto 4px; 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;
}