/* RandomQRCode Scanner v1.3 */

.rqrc-wrapper {
    box-sizing: border-box;
    background: var(--rqrc-bg, #fff);
    border: var(--rqrc-border-w, 1px) solid var(--rqrc-border, #e0e0e0);
    border-radius: var(--rqrc-radius, 12px);
    box-shadow: var(--rqrc-shadow, 0 4px 24px rgba(0,0,0,.08));
    padding: 20px 20px 16px;
    font-family: var(--rqrc-font, inherit);
    margin: 16px auto;
    position: relative;
}

/* ── Header ─────────────────────────────────────────────────── */
.rqrc-header { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.rqrc-icon   { color:var(--rqrc-primary,#01696f); flex-shrink:0; display:block; }
.rqrc-title  { margin:0; font-size:1.05rem; font-weight:700; color:var(--rqrc-primary,#01696f); line-height:1.2; }

/* ── Video region ────────────────────────────────────────────
   KEY FIX: aspect-ratio 1/1 makes it a square.
   min-height 280px ensures it never collapses to a line.
   overflow hidden clips the video neatly.
   The JS also sets an explicit pixel height before rendering.
   ─────────────────────────────────────────────────────────── */
.rqrc-video-region {
    width: 100%;
    aspect-ratio: 1 / 1;       /* perfect square */
    min-height: 280px;
    max-height: 480px;
    border-radius: calc(var(--rqrc-radius,12px) - 4px);
    overflow: hidden;
    background: #111;
    margin-bottom: 14px;
    position: relative;
    display: block;
}

/* Reset everything html5-qrcode injects so it fills the square */
.rqrc-video-region > div,
.rqrc-video-region > div > div {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

.rqrc-video-region video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;   /* fill the square, no letterbox */
    display: block !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    border-radius: 0 !important;
}

/* Scan canvas overlay must also fill */
.rqrc-video-region canvas {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Hide ALL html5-qrcode UI chrome — we have our own buttons */
[id$="__dashboard"],
[id$="__dashboard_section"],
[id$="__dashboard_section_csr"],
[id$="__dashboard_section_swaplink"],
[id$="__dashboard_section_fileselect"],
[id$="__header_message"],
[id$="__status_span"],
[id$="__camera_permission_button"],
[id$="__camera_selection"] {
    display: none !important;
}

/* Tint scan-box border with brand colour */
[id$="__scan_region"] {
    border-color: var(--rqrc-primary,#01696f) !important;
    width:  100% !important;
    height: 100% !important;
}

/* ── Idle placeholder (shown when camera is off) ───────────── */
.rqrc-video-region:not(.is-active) {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a2e;
}
.rqrc-video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #555;
    pointer-events: none;
    user-select: none;
}
.rqrc-video-placeholder svg { opacity:.35; }
.rqrc-video-placeholder span { font-size:.8rem; opacity:.5; }

/* ── Controls ────────────────────────────────────────────────── */
.rqrc-controls { display:flex; gap:8px; justify-content:center; margin-bottom:14px; flex-wrap:wrap; }

/* ── Buttons ─────────────────────────────────────────────────── */
.rqrc-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:10px 22px; border:none;
    border-radius:var(--rqrc-btn-radius,8px);
    font-family:var(--rqrc-font,inherit);
    font-size:.9rem; font-weight:600; cursor:pointer;
    transition:background .18s, transform .12s, opacity .18s;
    line-height:1; white-space:nowrap;
}
.rqrc-btn svg { flex-shrink:0; }
.rqrc-btn:focus-visible { outline:2px solid var(--rqrc-primary,#01696f); outline-offset:3px; }
.rqrc-btn:disabled { opacity:.55; cursor:not-allowed; transform:none!important; }

.rqrc-btn-start { background:var(--rqrc-btn-bg,#01696f); color:var(--rqrc-btn-text,#fff); }
.rqrc-btn-start:hover:not(:disabled) { background:var(--rqrc-btn-hover,#0c4e54); transform:translateY(-1px); }
.rqrc-btn-stop  { background:#c0392b; color:#fff; }
.rqrc-btn-stop:hover  { background:#96281b; transform:translateY(-1px); }

.rqrc-btn-action { background:var(--rqrc-btn-bg,#01696f); color:var(--rqrc-btn-text,#fff); font-size:.82rem; padding:7px 14px; }
.rqrc-btn-action:hover { background:var(--rqrc-btn-hover,#0c4e54); }
.rqrc-btn-clear  { background:#7f8c8d!important; color:#fff!important; }
.rqrc-btn-clear:hover { background:#555!important; }

/* ── Result ──────────────────────────────────────────────────── */
.rqrc-result-area  { margin-top:8px; animation:rqrcFade .3s ease; }
@keyframes rqrcFade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.rqrc-result-label { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--rqrc-primary,#01696f); margin:0 0 6px; }
.rqrc-result-box   { background:var(--rqrc-result-bg,#f0faf9); border:1px solid var(--rqrc-border,#e0e0e0); border-radius:calc(var(--rqrc-radius,12px) - 4px); padding:12px 14px; margin-bottom:10px; word-break:break-all; }
.rqrc-result-text  { margin:0; font-size:var(--rqrc-font-size-result,15px); color:var(--rqrc-result-text,#01696f); font-weight:500; line-height:1.5; }
.rqrc-result-actions { display:flex; flex-wrap:wrap; gap:8px; }

/* ── Powered by ──────────────────────────────────────────────── */
.rqrc-powered-by   { text-align:center; font-size:.72rem; color:#aaa; margin:12px 0 0; }
.rqrc-powered-by a { color:var(--rqrc-primary,#01696f); text-decoration:none; font-weight:600; }
.rqrc-powered-by a:hover { text-decoration:underline; }

/* ── Copy flash ──────────────────────────────────────────────── */
.rqrc-copied-flash {
    position:absolute; top:12px; right:12px;
    background:var(--rqrc-primary,#01696f); color:#fff;
    font-size:11px; padding:4px 10px; border-radius:20px;
    pointer-events:none; z-index:9;
    animation:rqrcFlash .95s ease forwards;
}
@keyframes rqrcFlash { 0%{opacity:0;transform:scale(.85)} 20%{opacity:1;transform:scale(1)} 70%{opacity:1} 100%{opacity:0} }

/* ── Responsive ──────────────────────────────────────────────── */
@media(max-width:420px){
    .rqrc-wrapper { padding:14px 12px 12px; }
    .rqrc-btn-start,.rqrc-btn-stop { padding:9px 16px; font-size:.85rem; }
    .rqrc-video-region { min-height:240px; }
}