/* checkin.css — check-in pages. Empty state of the QR pages (qr_v2 / qr_v3 view + validate):
   gym_checkin/components/card/qr_empty/state.html and the supported-features table it reveals.
   Colours come from color/custom_color.css. */

/* ---------- empty state (centred in the space under the page head) ---------- */
.qr-empty-wrap { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 150px); padding: 12px 0; }
.qr-empty-wrap--compact { min-height: 0; padding: 18px 0 8px; }
.qr-empty { max-width: 500px; text-align: center; }
.qr-empty__art { position: relative; width: 320px; max-width: 80%; margin: 0 auto 4px; }
.qr-empty__art::before {
    content: ""; position: absolute; inset: -12% 4% 2%; border-radius: 50%; z-index: 0;
    background: radial-gradient(closest-side, var(--custom_color_zircon) 0%, rgba(241, 244, 249, 0.6) 60%, rgba(241, 244, 249, 0) 100%);
}
.qr-empty__art svg { position: relative; z-index: 1; width: 100%; height: auto; display: block; }
.qr-empty__title { font-family: 'Custom-Font-Bold', sans-serif; font-size: 22px; letter-spacing: -0.015em; color: var(--custom_color_bunker); margin: 0 0 8px; }
.qr-empty__text { font-size: 14px; line-height: 1.6; color: var(--custom_color_rolling_stone); margin: 0 auto 14px; max-width: 380px; }
.qr-empty__toggle {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px;
    border: 0; background: transparent; color: var(--custom_color_bombay);
    font-family: 'Custom-Font-Semibold', sans-serif; font-size: 12px; transition: color .15s, background .15s;
}
.qr-empty__toggle:hover { color: var(--custom_color_rolling_stone); background: var(--custom_color_zircon); }
.qr-empty__toggle:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.14); }
.qr-empty__toggle i { font-size: 11px; color: inherit; }
.qr-empty__toggle-caret { transition: transform .2s; }
.qr-empty__toggle[aria-expanded="true"] .qr-empty__toggle-caret { transform: rotate(180deg); }

/* ---------- camera scan button (card/qr_empty/scan_button.html + the scan modal) ---------- */
.qr-scan-btns { display: flex; justify-content: center; margin: 2px 0 18px; }
.qr-scan-btns--end { justify-content: flex-end; margin: 0 0 14px; }
.qr-scan-btn {
    display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 999px; border: 0;
    background: var(--custom_color_v2_dark_navi_blue); color: #fff; text-align: left;
    box-shadow: 0 10px 24px rgba(12, 27, 61, 0.22); transition: transform .15s, box-shadow .15s, background .15s;
}
.qr-scan-btn:hover { background: var(--custom_color_v2_navi_medium); transform: translateY(-1px); box-shadow: 0 14px 28px rgba(12, 27, 61, 0.26); }
.qr-scan-btn:active { transform: translateY(0); }
.qr-scan-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(19, 183, 234, 0.45), 0 10px 24px rgba(12, 27, 61, 0.22); }
.qr-scan-btn__icon { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.12); font-size: 15px; }
.qr-scan-btn__text { display: flex; flex-direction: column; line-height: 1.2; }
.qr-scan-btn__text span { font-family: 'Custom-Font-Semibold', sans-serif; font-size: 13.5px; }
.qr-scan-btn__text small { font-size: 11px; opacity: .72; margin-top: 2px; }
.qr-scan-btn--stop { background: #B42323; box-shadow: 0 10px 24px rgba(180, 35, 35, 0.22); }
.qr-scan-btn--stop:hover { background: #9E1E1E; }

/* ---------- illustration ---------- */
.qr-art__shadow { fill: var(--custom_color_mercury); opacity: .55; }
.qr-art__phone { fill: var(--custom_color_v2_dark_navi_blue); }
.qr-art__screen { fill: #fff; }
.qr-art__notch { fill: var(--custom_color_v2_abstract_blue); }
.qr-art__finder { fill: none; stroke: var(--custom_color_v2_dark_navi_blue); stroke-width: 3; }
.qr-art__module { fill: var(--custom_color_v2_dark_navi_blue); }
.qr-art__frame path { fill: none; stroke: var(--custom_color_matisse); stroke-width: 3; stroke-linecap: round; }
.qr-art__beam { fill: var(--custom_color_v2_soft_blue); opacity: .95; filter: drop-shadow(0 0 3px rgba(19, 183, 234, 0.9)); animation: qr-beam 1.8s ease-in-out infinite alternate; }
.qr-art__badge { fill: var(--custom_color_v2_green); }
.qr-art__tick { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.qr-art__pause path { stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.qr-art__pause { display: none; }
.qr-art__badge, .qr-art__beam, .qr-art__frame path { transition: fill .25s, stroke .25s, opacity .25s; }

/* illustration follows the scanner: .qr-art-live gets is-ready / is-reading / is-paused
   (set by qr_scanner_status_v2.html on the page empty state, by the modal script on the modal art) */
.qr-art-live.is-reading .qr-art__beam { animation-duration: .7s; }
.qr-art-live.is-reading .qr-art__frame path { stroke: var(--custom_color_v2_soft_blue); }
.qr-art-live.is-reading .qr-art__badge { fill: var(--custom_color_matisse); }
.qr-art-live.is-paused .qr-art__beam { animation-play-state: paused; opacity: .25; filter: none; }
.qr-art-live.is-paused .qr-art__frame path { stroke: var(--custom_color_bombay); }
.qr-art-live.is-paused .qr-art__module, .qr-art-live.is-paused .qr-art__finder { opacity: .45; }
.qr-art-live.is-paused .qr-art__badge { fill: #D64545; }
.qr-art-live.is-paused .qr-art__tick { display: none; }
.qr-art-live.is-paused .qr-art__pause { display: block; }
.qr-art-live.is-paused .qr-empty__art::before, .qr-art-live.is-paused.qr-empty__art::before { background: radial-gradient(closest-side, #FFF1F1 0%, rgba(255, 241, 241, 0.6) 60%, rgba(255, 241, 241, 0) 100%); }
.qr-empty.is-paused .qr-empty__title, .qr-modal.is-paused .qr-modal__title { color: #A32D2D; }

/* ---------- supported-features table (revealed by the button) ---------- */
.qr-support { max-width: 920px; margin: 4px auto 24px; }
.qr-support .ui-table th:first-child, .qr-support .ui-table td:first-child { padding-left: 16px; }
.qr-support__dash { color: var(--custom_color_bombay); }
.qr-support__note { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.4; color: var(--custom_color_rolling_stone); max-width: 220px; margin-left: auto; margin-right: auto; }
.qr-support__note--only { margin-top: 0; }

/* camera running: the illustration and copy fold away so the Stop button stays right under the live preview
   instead of being pushed a full viewport down by the centred empty state (qr_v2 / qr_v3 camera_scanner.html). */
.qr-empty-wrap.is-scanning { min-height: 0; padding: 0 0 8px; }
.qr-empty-wrap.is-scanning .qr-empty__art,
.qr-empty-wrap.is-scanning .qr-empty__title,
.qr-empty-wrap.is-scanning .qr-empty__text,
.qr-empty-wrap.is-scanning .qr-empty__toggle { display: none; }

@media (max-width: 767.98px) {
    .qr-empty-wrap { min-height: calc(100vh - 190px); padding: 8px 4px; }
    .qr-empty-wrap--compact { min-height: 0; }
    .qr-empty__art { width: 240px; }
    .qr-empty__title { font-size: 19px; }
    .qr-empty__text { font-size: 13px; }
}

/* phone: one card per QR type instead of the 4-column table */
.qr-support__cards { display: grid; gap: 10px; }
.qr-support__card { border: 1px solid var(--custom_color_mercury); border-radius: 14px; padding: 12px 14px; background: #fff; }
.qr-support__card .ui-row-title { margin-bottom: 6px; }
.qr-support__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--custom_color_zircon); text-align: right; }
.qr-support__key { flex: 0 0 auto; font-size: 12px; color: var(--custom_color_rolling_stone); text-align: left; padding-top: 2px; }
.qr-support__val { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; }
.qr-support__row .qr-support__note { margin: 0; max-width: 210px; }

/* ---------- floating scanner indicator (utils/common/js/qr_scanner_status_v2.html) ---------- */
.qr-status {
    position: fixed; top: 7px; right: 18px; z-index: 1030;   /* clears the 40px-tall page head row on desktop, stays under the mobile sidenav drawer (1035) and its backdrop */
    display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 9px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.92); border: 1px solid var(--custom_color_mercury);
    box-shadow: 0 6px 18px rgba(12, 27, 61, 0.10); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    font-family: 'Custom-Font-Semibold', sans-serif; font-size: 11.5px; line-height: 1.4; color: var(--custom_color_bunker); white-space: nowrap;
    transition: border-color .2s, background .2s;
}
.qr-status__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: var(--custom_color_v2_green); }
.qr-status__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--custom_color_v2_green); opacity: 0; animation: qr-status-ping 1.6s ease-out infinite; }
.qr-status.is-reading .qr-status__dot, .qr-status.is-reading .qr-status__dot::after { background-color: var(--custom_color_matisse); border-color: var(--custom_color_matisse); }
.qr-status.is-reading .qr-status__dot::after { animation-duration: .8s; }
.qr-status.is-paused { border-color: #F3C6C6; background: rgba(255, 245, 245, 0.95); color: #A32D2D; }
.qr-status.is-paused .qr-status__dot { background: #D64545; }
.qr-status.is-paused .qr-status__dot::after { animation: none; }
@keyframes qr-status-ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .qr-status__dot::after { animation: none; } }
@media (max-width: 767.98px) {
    .qr-status { top: auto; right: auto; bottom: calc(16px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); padding: 8px 14px 8px 11px; font-size: 12.5px; }
}

/* ---------- scan-QR modal (components/modals/qr_v2.html, opened from the sidenav) ---------- */
.qr-modal { max-width: 400px; }
.qr-modal__content { border: 0; border-radius: 22px; box-shadow: 0 24px 60px rgba(12, 27, 61, 0.22); }
.qr-modal__input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.qr-modal__close {
    position: absolute; top: 12px; right: 12px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 0;
    background: var(--custom_color_zircon); color: var(--custom_color_rolling_stone); font-size: 13px;
    display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s;
}
.qr-modal__close:hover { background: var(--custom_color_mercury); color: var(--custom_color_bunker); }
.qr-modal__body { padding: 28px 24px 22px; text-align: center; }
.qr-modal__art { width: 210px; margin: 0 auto 4px; }
.qr-modal__reader { border-radius: 16px; overflow: hidden; max-width: 100%; margin: 0 auto 12px; }
.qr-modal__title { font-family: 'Custom-Font-Bold', sans-serif; font-size: 20px; letter-spacing: -0.015em; color: var(--custom_color_bunker); margin: 0 0 6px; }
.qr-modal__text { font-size: 13px; line-height: 1.55; color: var(--custom_color_rolling_stone); margin: 0 auto 14px; max-width: 320px; }
.qr-modal__status {
    display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 9px; border-radius: 999px; margin-bottom: 18px;
    border: 1px solid var(--custom_color_mercury); background: #fff; font-family: 'Custom-Font-Semibold', sans-serif; font-size: 11.5px;
    color: var(--custom_color_v2_green) !important;   /* wins over Bootstrap's .text-success / .text-danger */
}
.qr-modal__status.text-danger { color: #A32D2D !important; border-color: #F3C6C6; background: #FFF5F5; }
.qr-modal.is-reading .qr-modal__status { color: var(--custom_color_matisse) !important; }
.qr-modal.is-reading .qr-modal__dot::after { animation-duration: .8s; }
.qr-modal__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 8px; }
.qr-modal__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: qr-status-ping 1.6s ease-out infinite; }
.qr-modal__status.text-danger .qr-modal__dot::after { animation: none; }
.qr-modal__actions { display: flex; flex-direction: column; gap: 8px; }
.qr-modal__scan { width: 100%; justify-content: center; padding-right: 14px; }
.qr-modal__scan .qr-scan-btn__text { text-align: left; }

/* ---------- QR v1 check-in pages (gym_checkin/qr/*.html) ---------- */
/* On desktop (qr-v1-scanner--pull, set only when the page head is rendered) the camera button row is pulled up into the
   right half of the page-head row; phone / tablet user agents render no page head, so no pull-up there. The head is a
   full-width col-12 on these pages, so only a wide screen really leaves its right half free: below 992px the row flows
   under the head as it did before. */
.qr-v1-scanner { margin: 0 0 14px; }
@media (min-width: 992px) { .qr-v1-scanner--pull { margin-top: -66px; } }
.qr-v1-scanner .qr-scan-btns { margin: 0; }
.qr-v1-scanner #qr-reader { margin: 12px 0 0 auto; }
.qr-v1-tabs { margin-top: 6px; }
.qr-v1-tabs + .mt-3 { margin-top: 0 !important; }
@media (max-width: 767.98px) {
    .qr-v1-scanner .qr-scan-btns { justify-content: center; }
    .qr-v1-scanner #qr-reader { margin: 12px auto 0; }
    /* five single-type tabs do not fit one phone-width line: wrap them instead of hiding the last one in a
       scrollbar-less overflow (they wrapped onto two lines before today too). */
    .qr-v1-tabs { flex-wrap: wrap; overflow-x: visible; }
}