/**
 * Stylesheet cho công cụ Quét mã QR bảo mật (Safe QR Code Scanner)
 */

.hihi-qr-container {
    --primary-indigo: #4f46e5;
    --primary-indigo-hover: #4338ca;
}

/* Kiểu dáng các tab chọn phương thức quét */
.qr-tab-btn {
    cursor: pointer;
    transition: all 0.2s ease;
}

.qr-tab-btn.active {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

/* Ẩn các view quét khi chưa chọn */
.qr-view {
    transition: all 0.3s ease;
}

/* Tùy chỉnh ẩn/hiện mặc định của thư viện html5-qrcode */
#qr-reader {
    border: none !important;
    background: #0f172a; /* Slate-900 */
}

#qr-reader img {
    display: none !important;
}

#qr-reader button {
    display: none !important;
}

#qr-reader__dashboard {
    display: none !important;
}

#qr-reader__scan_region {
    background: #0f172a !important;
}

#qr-reader__scan_region video {
    object-fit: cover !important;
    border-radius: 12px;
}

/* Đường Laser chạy động */
#scanner-laser {
    animation: laser-scan 2.5s ease-in-out infinite;
}

@keyframes laser-scan {
    0%, 100% {
        top: 5%;
    }
    50% {
        top: 95%;
    }
}

/* Dropzone kéo thả file ảnh */
#qr-dropzone.dragover {
    border-color: var(--primary-indigo);
    background-color: rgba(79, 70, 229, 0.05);
    transform: scale(1.01);
}

#qr-dropzone {
    transition: all 0.25s ease;
}

/* Bôi đậm domain chính tránh phishing */
.domain-highlight-main {
    color: #e11d48 !important; /* Rose-600 */
    font-weight: 900 !important;
    font-size: 1.05em;
    background-color: rgba(225, 29, 72, 0.05);
    padding: 1px 4px;
    border-radius: 4px;
    border: 1px solid rgba(225, 29, 72, 0.1);
}

.domain-highlight-sub {
    color: #475569; /* Slate-600 */
    font-weight: 500;
}

.domain-highlight-protocol {
    color: #0d9488; /* Teal-600 */
    font-weight: bold;
}