#upload-container {
    transition: all 0.3s ease;
}

#upload-container.drag-over {
    background-color: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
}

#original-image, #output-canvas, #preview-canvas {
    max-height: 400px;
    width: 100%;
    height: 100%;
}

.aspect-video {
    aspect-ratio: 16/9;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Tab Styles */
.tab-btn {
    color: #6B7280;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.tab-btn:hover {
    color: #1F2937;
}

.tab-btn.active {
    color: #2563EB;
    border-bottom-color: #2563EB;
}

/* Background Options */
input[type="color"] {
    -webkit-appearance: none;
    padding: 0;
    border: none;
    border-radius: 0.5rem;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 0.5rem;
}

/* Checkerboard background for transparency */
.bg-transparent-preview {
    background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
                      linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
                      linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* Navigation Styles */
#nav {
    margin-bottom: 1.5rem; /* Add some space below the nav */
    text-align: center; /* Center the nav links */
}

#nav a, #nav .nav-group-title {
    margin: 0 0.5rem; /* Add spacing between links */
    color: #3b82f6; /* Tailwind blue-500 */
    text-decoration: none; /* Remove underline */
    font-weight: 500; /* Medium font weight */
}

#nav .nav-group-title {
    cursor: default; /* For span elements acting as titles */
}

#nav a {
    cursor: pointer; /* Ensure links remain clickable */
}

#nav a:hover {
    text-decoration: underline; /* Add underline on hover for actual links */
}

.nav-group {
    display: inline-block;
    position: relative;
}

.nav-group-content {
    display: none;
    position: absolute;
    background-color: white; /* Ensure dropdown has a background */
    min-width: 200px; /* Adjust as needed */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100; /* Ensure dropdown is above other content */
    border-radius: 0.375rem; /* Tailwind rounded-md */
    padding: 0.5rem 0; /* py-2 */
    margin-top: 0.25rem; /* Add a little space from the title */
    text-align: left; /* Align dropdown text to the left */
}

.nav-group:hover .nav-group-content {
    display: block;
}

.nav-group-content a {
    color: black; /* Or your preferred dropdown link color */
    padding: 0.75rem 1rem; /* px-4 py-3 */
    text-decoration: none;
    display: block;
    /* text-align: left; */ /* Already set on .nav-group-content */
    font-weight: normal; /* Override main nav link weight if needed */
}

.nav-group-content a:hover {
    background-color: #f1f1f1; /* Light grey background on hover */
    text-decoration: none; /* Ensure no underline on hover for dropdown items */
}
.responsive-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 600px) {
    .responsive-btns a {
        width: 100%;
        text-align: center;
    }
}