html, body {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    padding: 0 15px;
}
/* Ensures the content inside uploadResult is handled properly */
#uploadResult {
    word-wrap: break-word; /* Allows text breaking for very long words/filenames */
    overflow-wrap: anywhere; /* Ensures wrapping inside containers */
}

/* Specifically for long filenames */
#uploadMessage {
    white-space: wrap; /* Prevent wrapping */
    overflow: hidden; /* Hide the overflowed portion */
    display: inline-block;
    max-width: 80%; /* Ensure it doesn't overflow the parent container's width */
    vertical-align: middle; /* Align nicely with other content */
}

#uploadedFileLink {
    white-space:wrap;
    overflow: hidden;
    display: inline-block;
    max-width: 80%; /* Prevent link from overflowing */
    vertical-align: middle;
}

.bg-light-cyan {
    --bs-bg-opacity: 1;
    background-color: rgb(219 231 243) !important;
}

.border-primary-dashed {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important;
    border-style: dashed;
}

/* Ensure proper wrapping on mobile */
footer p, header h1, .lead {
    font-size: 16px;
    word-wrap: break-word;
}

footer {
    bottom: 0;
    width: 100%;
    text-align: center;
}
/* Responsive video styling */
.responsive-video {
    max-width: 100%; /* Ensures the video fits within the container width */
    height: auto; /* Maintains the aspect ratio while scaling */
    display: block; /* Ensures the video aligns properly in the layout */
    margin: 0 auto; /* Centers the video in the container */
}

.file-container {
    max-width: 100%; /* Ensures the container doesn't exceed viewport width */
    padding: 1rem; /* Adds padding around the video */
    text-align: center; /* Centers content for a clean mobile layout */
}
.image-container {
    text-align: center;
}

.image-container img {
    max-width: 100%;
    max-height: 90vh;
    height: auto;
    cursor: zoom-in;
    transition: transform 0.3s ease;
    text-align: center;
}

.image-container img.zoomed {
    max-width: none !important;
    max-height: 100% !important;
    cursor: zoom-out;
}

.metadata-container {
    display: flex;
    flex-wrap: wrap;
    padding: 1rem 0;
    color: #333; /* Subtle, modern font color */
    font-size: 1rem; /* Ensure appropriate font size */
    text-align: center;
    justify-content: space-around; /* Responsive alignment */
    gap: 1.5rem; /* Spacing improvement */
}

.metadata-item {
    display: flex;
    flex-direction: column; /* Ensures label and value stack gracefully */
    align-items: center; /* Center within each block */
    min-width: 150px; /* Ensures proper spacing */
}

.label {
    font-weight: 500; /* Modern, semi-bold emphasis on labels */
    color: #6c757d; /* Use Bootstrap’s subtle text color */
    text-transform: uppercase;
    font-size: 0.8rem; /* Slightly smaller font for a modern touch */
}

.value {
    font-weight: bold;
    color: #212529; /* Strong contrast for values */
}

.footer {
    background-color: #f8f9fa; /* Subtle light background to match modern designs */
    font-size: 1rem; /* Slightly smaller font for a footer */
    color: #6c757d; /* Muted text color for a soft, modern look */
    border-top: 1px solid #dee2e6; /* Light border for separation */
}

.footer-link {
    color: #0d6efd; /* Bootstrap primary color for links */
    text-decoration: none; /* Remove underlines for cleaner links */
    font-weight: 500; /* Bold links for emphasis */
    transition: color 0.3s ease; /* Smooth transition on hover */
}

.footer-link:hover {
    color: #0056b3; /* Slightly darker color on hover */
    text-decoration: underline; /* Bring back underlines on hover for distinction */
}

/* Responsive grid alignment for small devices */
@media (max-width: 576px) {
    .metadata-container {
        gap: 0.5rem; /* Reduce spacing between metadata items */
        padding-top: 2rem; /* Less padding around the container */
        justify-content: flex-start; /* Align items to the start for better use of space */
    }

    .metadata-item {
        padding: 0.1rem 0; /* Reduce padding inside metadata items */
        min-width: 100%; /* Full width for small screens */
        text-align: left; /* Align text to the left for neat layout */
    }

    footer {
        font-size: 14px; /* Scale down the footer text for small devices */
    }

    .lead {
        font-size: 14px; /* Reduce header size to fit */
    }

    h1 {
        font-size: 24px; /* Smaller branding size */
    }
    #uploadResult .alert {
        text-align: left; /* Align everything neatly on small screens */
    }

    #uploadResult .btn {
        width: 100%; /* Full-width button for easier tapping on mobile */
        margin-top: 10px; /* Add spacing between button and text */
    }
    .file-container {
        padding: 0.5rem; /* Reduce padding for smaller devices */
    }

    .responsive-video {
        max-width: 100%; /* Keep video fully responsive */
        height: auto;
    }
}

@media (min-width: 768px) {
    .metadata-item {
        min-width: 180px;
    }

    .file-container {
        padding: 2rem; /* More padding for larger views */
    }
}