/* QR Code Section - Fixed Position */
#qr-code-section {
    position: fixed !important;           /* Fixes the QR code in place on the screen */
    top: 420px !important;                /* Keep the QR code fixed at this vertical position (420px) */
    right: 370px !important;              /* Keep the QR code fixed at this horizontal position (370px) */
    background: transparent !important;   /* No background shading */
    padding: 0 !important;                /* Remove extra padding */
    border-radius: 0 !important;          /* No border radius */
    box-shadow: none !important;          /* No box-shadow */
    text-align: center !important;        /* Center the text */
    display: inline-block !important;     /* Ensure it stays inline */
    z-index: 9999 !important;             /* Ensure the QR code stays above other elements */
}

/* QR Code image itself */
#qr-code {
    width: 10vw !important;               /* Width: 10% of the viewport width */
    height: 10vw !important;              /* Height: 10% of the viewport width (to keep aspect ratio) */
    margin: 0 auto !important;            /* Center the QR code */
    overflow: hidden !important;          /* Prevent overflow */
    background: url('framework/img/QRscanner.png') no-repeat center center !important; /* QR image path */
    background-size: contain !important;  /* Make sure QR code scales properly */
}

/* QR result text below the QR code */
#qr-result {
    font-size: 16px !important;
    margin-top: 15px !important;          /* Space below the QR code */
    color: #333 !important;
    font-weight: bold !important;
}

/* Mobile devices (adjust QR size and positioning) */
@media (max-width: 768px) {
    #qr-code-section {
        top: 5% !important;                 /* Move QR code closer to the top for smaller screens */
        right: 5% !important;               /* Adjust right position */
        width: 20vw !important;             /* QR code size is 20% of the viewport width */
        height: 20vw !important;            /* Maintain aspect ratio */
    }

    #qr-result {
        font-size: 14px !important;         /* Reduce font size for mobile */
    }
}

/* Tablet devices */
@media (min-width: 769px) and (max-width: 1024px) {
    #qr-code-section {
        top: 7% !important;                 /* Slightly adjust position for tablets */
        right: 8% !important;               /* Position more to the right */
        width: 15vw !important;             /* QR code size is 15% of the viewport width */
        height: 15vw !important;            /* Maintain aspect ratio */
    }

    #qr-result {
        font-size: 15px !important;         /* Slightly larger text size for tablets */
    }
}

/* Large desktop */
@media (min-width: 1025px) {
    #qr-code-section {
        top: 420px !important;              /* Keep it at the same position for large screens */
        right: 370px !important;            /* Keep position consistent with other screen sizes */
        width: 10vw !important;             /* Fixed size relative to viewport width */
        height: 10vw !important;            /* Maintain aspect ratio */
    }
}