/*
 * Edi Rizoma — Check-in functional styles
 *
 * ONLY what JavaScript needs to operate correctly.
 * All visual design (layout, colors, typography, spacing) belongs in BeTheme Custom CSS.
 */

/* ── CSS custom properties (referenced by JS-injected elements) ───── */
:root {
    --edi-ci-green-bg:   rgba(108, 124,  73, 0.14);
    --edi-ci-green-txt:  #4F5D34;
    --edi-ci-green-brd:  rgba(108, 124,  73, 0.35);
    --edi-ci-red-bg:     rgba(186,  81,  63, 0.14);
    --edi-ci-red-txt:    #8D3B2E;
    --edi-ci-red-brd:    rgba(186,  81,  63, 0.35);
    --edi-ci-amber-bg:   rgba(224, 175,  95, 0.18);
    --edi-ci-amber-txt:  #8A6428;
    --edi-ci-amber-brd:  rgba(224, 175,  95, 0.40);
    --edi-ci-blue-bg:    rgba( 60, 100, 168, 0.12);
    --edi-ci-blue-txt:   #2D4F8A;
    --edi-ci-blue-brd:   rgba( 60, 100, 168, 0.30);
    --edi-ci-radius:     12px;
}

/* ── Camera video — must fill its container for BarcodeDetector to work ── */
.edi-checkin-video {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    display:     block;
    transform:   none !important;
}

/* ── Viewfinder — absolutely positioned overlay over the video ── */
.edi-checkin-viewport {
    position: relative;
    overflow: hidden;
}

.edi-checkin-viewfinder {
    position:       absolute;
    inset:          50% auto auto 50%;
    transform:      translate(-50%, -50%);
    width:          65%;
    height:         65%;
    pointer-events: none;
    --corner: 3px solid rgba(255,255,255,.9);
    border-top:    var(--corner);
    border-left:   var(--corner);
    border-bottom: var(--corner);
    border-right:  var(--corner);
    border-radius: 4px;
    -webkit-mask:
        linear-gradient(#fff 0 0) center center / calc(100% - 60px) calc(100% - 60px) no-repeat,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}

/* ── html5-qrcode — suppress the library's own styled UI ── */
.edi-checkin-html5qr {
    overflow: hidden;
}

.edi-checkin-html5qr #edi-qr-reader__dashboard_section_swaplink,
.edi-checkin-html5qr #edi-qr-reader__header_message,
.edi-checkin-html5qr #edi-qr-reader__status_span {
    font-size: .875rem !important;
}

.edi-checkin-html5qr #edi-qr-reader__scan_region video {
    border-radius: var(--edi-ci-radius);
    transform: none !important;
}

/* ── Lookup results list — structural only (JS appends to this) ── */
.edi-checkin-results-list {
    list-style: none !important;
    padding:    0    !important;
    margin:     0;
}

/* ── Result overlay (fallback: scanner page doubles as result page) ── */
.edi-ci-result-overlay {
    position:        fixed;
    inset:           0;
    z-index:         9999;
    background:      #FAF7F2;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         48px;
    box-sizing:      border-box;
    overflow-y:      auto;
}

/* ── Result details — neutralize theme table separators in QR cards ── */
.edi-checkin-card__details,
.edi-checkin-card__details table,
.edi-checkin-card__details tbody,
.edi-checkin-card__details tr,
.edi-checkin-card__details th,
.edi-checkin-card__details td,
.edi-checkin-card__detail-row {
    border: none !important;
    box-shadow: none !important;
    background: transparent;
}

.edi-checkin-card__details {
    margin: 0;
}

.edi-checkin-card__details dt,
.edi-checkin-card__details dd {
    border: none !important;
}

/* ── Offline / network-loss banner ── */
.edi-ci-offline-banner {
    position:    fixed;
    top:         0;
    left:        0;
    right:       0;
    z-index:     9998;
    background:  #d63638;
    color:       #fff;
    text-align:  center;
    padding:     10px 16px;
    font-size:   14px;
    font-weight: 600;
    line-height: 1.4;
}