/* Camera view styles */
#cameraView {
    width: 100%;
    height: auto;
    display: block;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

#resultImage {
    height: auto;
    display: block;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

#swapresultImage {
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* Adjust camera view size on desktop */
@media (min-width: 992px) {
    #cameraView {
        width: 50%; /* Smaller camera view on desktops */
    }
}
#qrCodeContainer {
    text-align: center; /* Centers inline elements like <img> */
    width: 100%; /* Ensures it takes full width for centering */
    margin-top: 10px;
}

#qrCode {
    width: 30%; /* Default: 30% width */
    max-width: 150px; /* Limit size for larger screens */
    height: auto;
    display: block;
    margin: 0 auto; /* Centers the image */
}

/* Adjust button size for large screens */
#swapBtn {
    width: auto; /* Allow the button to shrink to fit content */
    max-width: 350px; /* Optionally set a max width */
    margin: 0; /* Reset margins */
    background-color: #7C218A;
    border-color: #7C218A;
    padding: 15px;
}

/* Center the capture button */
#captureBtn, #retakeBtn {
    width: auto;
    max-width: 200px;
    margin-top: 20px;
}

.capture-img {
    width: 30%; /* 30% width on larger screens */
}
/* Ensure the "Retake" button is centered */
@media (max-width: 768px) {
    #captureBtn, #retakeBtn {
        width: 100%; /* Full-width on mobile */
    }
    #qrCode {
        width: 100%; /* Full width on mobile */
        max-width: none; /* Remove max-width restriction */
    }
    .capture-img {
        width: 100%; /* Full width on mobile */
    }
}

/* Result image */
#resultImage {
    max-width: 100%;
    max-height: 300px;
    display: none;
}

/* Background color styling */
body {
    background-color: #f4f7fc;
}

.container {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-top: 8rem;
}

h3 {
    color: #9968A2;
}

.library-options {
    gap: 20px; /* Space between each image */
    flex-wrap: wrap; /* Allow items to wrap when screen is small */
}
.library-option.selected {
    border: 3px solid #F6A8B6; /* Highlight border for selected option */
    transform: scale(1.1); /* Slightly enlarge the selected option */
    border-radius: 10px;
}

.library-option img {
    width: 200px; /* Make the images bigger */
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s ease;
}

    .library-option img:hover {
        transform: scale(1.05); /* Slight enlargement on hover */
    }

.action-buttons .btn {
    margin: 10px;
}

#loadingGif {
    position: fixed; /* Use fixed positioning so it stays in the same place even when scrolling */
    top: 50%; /* Centers vertically */
    left: 50%; /* Centers horizontally */
    transform: translate(-50%, -50%); /* Adjusts the positioning to perfectly center the GIF */
    z-index: 9999; /* Ensures it stays on top of other content */
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: white;
    padding: 10px 0;
    z-index: 1000;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    height: 90px; /* Fixed height for the header */
}

    /* Smaller, centered header image */
    .header img {
        max-width: 100%; /* Image will scale to the width of the header */
        height: auto;
        max-height: 70px; /* Restrict the image height */
    }

.footer {
    /*    top:20px;
*/ /*position: fixed;*/
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    padding: 10px 0;
    z-index: 1000;
    text-align: center;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  /*  height: 80px; *//* Set fixed height for footer */
    width: 100%; /* Ensure it spans the full width */
}

    /* Center and resize the footer image */
    .footer img {
        max-width: 100%;
        height: auto;
        max-height: 50px; /* Restrict the image height */
    }

img {
    max-width: 100%;
    height: auto;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}