/*
 * WL Scanner System — front-end scanner CSS
 * Mobile-first. Branding colours are overridden at runtime by scanner.js
 * using CSS custom properties.
 */

/* ── Custom properties (defaults overridden by JS) ─────────────────────── */
:root {
    --wl-primary : #0073aa;
    --wl-success : #00a651;
    --wl-error   : #d63638;
    --wl-warn    : #ff9500;
    --wl-neutral : #888888;
    --wl-bg      : #111111;
    --wl-radius  : 14px;
}

/* ── Wrapper ────────────────────────────────────────────────────────────── */
.wl-scanner-wrap {
    position      : relative;
    max-width     : 480px;
    margin        : 0 auto;
    background    : var(--wl-bg);
    border-radius : var(--wl-radius);
    overflow      : hidden;
    font-family   : -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-user-select : none;
    user-select   : none;
    touch-action  : manipulation;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.wl-scanner-header {
    background   : var(--wl-primary);
    padding      : 14px 20px;
    text-align   : center;
    color        : #fff;
    min-height   : 56px;
    display      : flex;
    align-items  : center;
    justify-content : center;
}

.wl-scanner-title {
    margin      : 0;
    font-size   : 1.15rem;
    font-weight : 700;
    color       : #fff;
    letter-spacing: 0.3px;
}

.wl-scanner-logo {
    max-height : 44px;
    max-width  : 200px;
    width      : auto;
    object-fit : contain;
}

/* ── Camera viewport ────────────────────────────────────────────────────── */
.wl-scanner-viewport {
    position     : relative;
    width        : 100%;
    aspect-ratio : 1 / 1;
    background   : #000;
    overflow     : hidden;
}

#wl-video {
    display    : block;
    width      : 100%;
    height     : 100%;
    object-fit : cover;
}

/* ── Scan-frame guides ──────────────────────────────────────────────────── */
.wl-scan-frame {
    position       : absolute;
    inset          : 16%;
    pointer-events : none;
}

.wl-scan-corner {
    position     : absolute;
    width        : 26px;
    height       : 26px;
    border-color : #fff;
    border-style : solid;
    opacity      : 0.85;
}

.wl-scan-corner--tl { top: 0;    left: 0;   border-width: 3px 0 0 3px; }
.wl-scan-corner--tr { top: 0;    right: 0;  border-width: 3px 3px 0 0; }
.wl-scan-corner--bl { bottom: 0; left: 0;   border-width: 0 0 3px 3px; }
.wl-scan-corner--br { bottom: 0; right: 0;  border-width: 0 3px 3px 0; }

/* ── Animated scan line ─────────────────────────────────────────────────── */
.wl-scan-line {
    position   : absolute;
    left       : 0;
    right      : 0;
    height     : 2px;
    background : linear-gradient(to right, transparent 0%, var(--wl-primary) 50%, transparent 100%);
    animation  : wl-scan-sweep 2.2s ease-in-out infinite;
}

@keyframes wl-scan-sweep {
    0%   { top: 4%;  opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { top: 96%; opacity: 0; }
}

/* ── Hint text ──────────────────────────────────────────────────────────── */
.wl-scan-hint {
    position       : absolute;
    bottom         : 14px;
    left           : 0;
    right          : 0;
    margin         : 0;
    padding        : 0 16px;
    text-align     : center;
    color          : rgba(255, 255, 255, 0.82);
    font-size      : 0.82rem;
    letter-spacing : 0.2px;
    pointer-events : none;
}

/* ── Start button overlay ───────────────────────────────────────────────── */
.wl-start-wrap {
    position        : absolute;
    inset           : 0;
    display         : flex;
    align-items     : center;
    justify-content : center;
    background      : rgba(0, 0, 0, 0.55);
}

.wl-btn-start {
    display         : inline-flex;
    align-items     : center;
    gap             : 10px;
    background      : var(--wl-primary);
    color           : #fff;
    border          : none;
    border-radius   : 50px;
    padding         : 16px 36px;
    font-size       : 1.05rem;
    font-weight     : 700;
    cursor          : pointer;
    box-shadow      : 0 6px 24px rgba(0, 0, 0, 0.45);
    transition      : transform 0.12s ease, box-shadow 0.12s ease;
    -webkit-tap-highlight-color : transparent;
}

.wl-btn-start:active {
    transform  : scale(0.96);
    box-shadow : 0 3px 10px rgba(0, 0, 0, 0.4);
}

.wl-icon-camera {
    font-size : 1.4rem;
}

/* ── Result overlay ─────────────────────────────────────────────────────── */
.wl-result-overlay {
    position        : absolute;
    inset           : 0;
    display         : flex;
    align-items     : center;
    justify-content : center;
    z-index         : 200;
    animation       : wl-result-in 0.18s ease;
    cursor          : pointer;
}

@keyframes wl-result-in {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}

/* Colour variants */
.wl-result--valid        { background: rgba(0, 166, 81,   0.96); }
.wl-result--invalid      { background: rgba(214, 54, 56,  0.96); }
.wl-result--expired      { background: rgba(214, 54, 56,  0.96); }
.wl-result--already_used { background: rgba(255, 149, 0,  0.96); }
.wl-result--inactive     { background: rgba(110, 110, 110, 0.96); }
.wl-result--blocked      { background: rgba(214, 54, 56,  0.96); }

.wl-result-inner {
    text-align     : center;
    color          : #fff;
    padding        : 32px 28px;
    pointer-events : none;
}

.wl-result-icon {
    font-size   : 5.5rem;
    line-height : 1;
    font-weight : 900;
    margin-bottom : 10px;
}

.wl-result-message {
    font-size      : 1.7rem;
    font-weight    : 800;
    line-height    : 1.2;
    margin-bottom  : 8px;
    letter-spacing : 0.2px;
}

.wl-result-sub {
    font-size     : 1.1rem;
    font-weight   : 400;
    opacity       : 0.9;
    margin-bottom : 22px;
    min-height    : 1.5em;
}

.wl-result-btn {
    pointer-events : auto;
    background     : rgba(255, 255, 255, 0.22);
    color          : #fff;
    border         : 2px solid rgba(255, 255, 255, 0.55);
    border-radius  : 50px;
    padding        : 11px 30px;
    font-size      : 1rem;
    font-weight    : 700;
    cursor         : pointer;
    transition     : background 0.15s;
    -webkit-tap-highlight-color : transparent;
}

.wl-result-btn:hover,
.wl-result-btn:active {
    background : rgba(255, 255, 255, 0.38);
}

/* ── Login / permission notice ──────────────────────────────────────────── */
.wl-scanner-notice {
    background    : #fff3cd;
    border        : 1px solid #ffc107;
    border-radius : 8px;
    padding       : 18px 22px;
    text-align    : center;
    font-size     : 1rem;
    line-height   : 1.6;
}

.wl-scanner-notice a {
    display            : inline-block;
    margin-top         : 10px;
    background         : var(--wl-primary);
    color              : #fff;
    padding            : 9px 22px;
    border-radius      : 50px;
    text-decoration    : none;
    font-weight        : 700;
    transition         : opacity 0.15s;
}

.wl-scanner-notice a:hover {
    opacity : 0.88;
}

/* ── Responsive tweaks ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .wl-scanner-wrap {
        border-radius : 0;
    }
    .wl-result-icon    { font-size: 4.5rem; }
    .wl-result-message { font-size: 1.5rem; }
}