/* ============================================================
   brafa Systems — guest / kiosk pages
   Public QR-accessed pages (room checkout, housekeeping, self
   check-in). Focused centred card on a light background — not the
   admin shell. Part of the brafa shell, loaded after brafa-shell.css.
   ============================================================ */
.brafa-guest {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
}
.brafa-guest__card {
    width: 100%;
    max-width: 460px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.brafa-guest__head {
    background: var(--bg-sunken);
    border-bottom: 1px solid var(--border);
    padding: 28px 28px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.brafa-guest__logo {
    max-width: 70%;
    max-height: 72px;
    object-fit: contain;
    display: block;
}
.brafa-guest__name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: var(--weight-medium);
    color: var(--fg);
}
.brafa-guest__body { padding: 28px; text-align: center; }
.brafa-guest__eyebrow {
    font-family: var(--font-wide);
    font-size: 10px;
    font-weight: var(--weight-medium);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--fg-subtle);
}
.brafa-guest__title {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: var(--weight-regular);
    letter-spacing: -0.01em;
    color: var(--fg);
    margin: 4px 0 6px;
}
.brafa-guest__subtitle { color: var(--fg-muted); font-size: 13.5px; margin: 0 0 22px; }

/* key/value list */
.brafa-guest__kv {
    display: flex;
    flex-direction: column;
    max-width: 340px;
    margin: 0 auto 22px;
}
.brafa-guest__kv .kv {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.brafa-guest__kv .kv:last-child { border-bottom: 0; }
.brafa-guest__kv .k {
    font-family: var(--font-wide);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-subtle);
    flex-shrink: 0;
}
.brafa-guest__kv .v { font-size: 14px; color: var(--fg); font-weight: var(--weight-medium); text-align: right; }

/* a booking sub-panel (departing / arriving) */
.brafa-guest__panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
    padding: 16px;
    margin: 0 auto 14px;
    max-width: 360px;
    text-align: left;
}
.brafa-guest__panel h5 {
    font-family: var(--font-wide);
    font-size: 10px;
    font-weight: var(--weight-medium);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-subtle);
    margin: 0 0 8px;
}
.brafa-guest__panel .line { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 3px 0; }
.brafa-guest__panel .line .k { color: var(--fg-muted); }
.brafa-guest__panel .line .v { color: var(--fg); font-weight: var(--weight-medium); }

.brafa-guest__note { color: var(--fg-subtle); font-size: 12.5px; margin: 0 0 16px; }

.brafa-guest .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 320px;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: var(--weight-medium);
    letter-spacing: 0.02em;
    color: var(--brafa-white);
    background: var(--brafa-black);
    border: 1px solid var(--brafa-black);
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: none;
    background-image: none;
    transition: background var(--dur-fast) var(--ease);
}
.brafa-guest .btn:hover { background: var(--brafa-ink); color: var(--brafa-white); }
.brafa-guest .btn--green { background: var(--brafa-green); color: var(--brafa-black); border-color: var(--brafa-green-deep); }
.brafa-guest .btn--green:hover { background: #3FCD66; color: var(--brafa-black); }