/* Import Google Fonts for a modern and clean look */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&family=Inter:wght@400;600;700&display=swap');

/* Main wrapper for the converter to apply background/centering without affecting whole body */
.avif-converter-wrapper {
    font-family: 'Inter', sans-serif; /* Default font for general text */
    background: linear-gradient(135deg, #eef5fe 0%, #dce9f8 100%); /* Lighter, fresh gradient background */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0; /* Add some padding top/bottom */
    min-height: auto; /* Allow height to adjust naturally, not always 100vh */
    width: 100%; /* Ensure it takes full width */
    box-sizing: border-box; /* Include padding in width calculation */
    margin: 0 auto; /* Center the wrapper itself if it has a max-width */
}


/* Main converter container styling */
.converter-container {
    background-color: #ffffff;
    border-radius: 2.5rem; /* Even more rounded corners for a soft, friendly look */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18); /* Deeper, more diffused shadow */
    padding: 3rem; /* Increased padding inside the container */
    max-width: 1100px; /* Wider container for better layout */
    width: 95%; /* Responsive width for smaller screens */
    animation: fadeIn 0.9s ease-out; /* Smooth fade-in animation on load */
    border: 1px solid #e0e7ee; /* Subtle border for definition */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Keyframe animation for fade-in effect */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Heading specific font for better visual hierarchy */
.avif-converter-wrapper h1, .avif-converter-wrapper h2 {
    font-family: 'Poppins', sans-serif; /* Poppins font for headings */
    color: #2c3e50; /* Darker heading color for strong contrast */
}

/* Drag Area Styling for file upload */
.drag-area {
    border: 4px dashed #6a0dad; /* Deep vibrant purple dashed border */
    border-radius: 2rem; /* Rounded corners for the drag area */
    background-color: #f8f0ff; /* Very light purple background */
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother transition */
    min-height: 280px; /* Ensures a good minimum height for usability */
    cursor: pointer; /* Indicate it's clickable */
    display: flex; /* Tailwind equivalent: flex */
    flex-direction: column; /* Tailwind equivalent: flex-col */
    align-items: center; /* Tailwind equivalent: items-center */
    justify-content: center; /* Tailwind equivalent: justify-center */
    padding: 3rem; /* Tailwind equivalent: p-12 (approx) */
    text-align: center; /* Tailwind equivalent: text-center */
    color: #4a5568; /* Tailwind equivalent: text-gray-600 */
}
.drag-area.active {
    background-color: #e5d1ff; /* Slightly darker background on active */
    border-color: #4b0082; /* Even deeper purple border */
    transform: scale(1.03); /* More pronounced scale up animation on active */
    box-shadow: 0 10px 20px rgba(106, 13, 173, 0.3); /* Shadow on active */
}
.drag-area svg {
    color: #6a0dad; /* Icon color within the drag area */
    width: 6rem; /* Tailwind equivalent: w-24 */
    height: 6rem; /* Tailwind equivalent: h-24 */
    margin-bottom: 1rem; /* Tailwind equivalent: mb-4 */
    animation: bounce-slow 2s infinite; /* Ensure animation exists */
}

@keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}


/* Styling for common buttons (file upload, convert) */
.file-upload-btn, .convert-button {
    border-radius: 9999px; /* Fully rounded pill shape */
    font-weight: 700; /* Bold text */
    letter-spacing: 0.08em; /* Slightly more spaced letters */
    text-transform: uppercase; /* Uppercase text */
    transition: all 0.3s ease-in-out; /* Smoother transition for hover effects */
    box-shadow: 0 8px 15px rgba(0,0,0,0.25); /* Stronger button shadow */
    border: none; /* Ensure no default button border */
    cursor: pointer; /* Indicate clickable */
}
.file-upload-btn {
    background: linear-gradient(45deg, #8a2be2, #4b0082); /* Blue-violet to Indigo gradient */
    color: #ffffff; /* White text color */
    padding: 0.75rem 2.5rem; /* Tailwind equivalent: py-3 px-10 */
    font-size: 1.125rem; /* Tailwind equivalent: text-lg */
}
.file-upload-btn:hover {
    background: linear-gradient(45deg, #4b0082, #8a2be2); /* Inverted gradient on hover */
    transform: translateY(-5px); /* More pronounced lift on hover */
    box-shadow: 0 12px 25px rgba(75, 0, 130, 0.6); /* Enhanced shadow on hover */
}

.convert-button {
    background: linear-gradient(45deg, #2ecc71, #27ae60); /* Emerald green gradient */
    color: #ffffff; /* White text color */
    padding: 1rem 4rem; /* Tailwind equivalent: py-4 px-16 */
    font-size: 1.5rem; /* Tailwind equivalent: text-2xl */
}
.convert-button:hover {
    background: linear-gradient(45deg, #27ae60, #2ecc71); /* Inverted green gradient on hover */
    transform: translateY(-5px); /* More pronounced lift on hover */
    box-shadow: 0 12px 25px rgba(46, 204, 113, 0.6); /* Enhanced shadow on hover */
}
.convert-button:disabled {
    opacity: 0.6; /* Reduced opacity when disabled */
    cursor: not-allowed; /* Not-allowed cursor */
    box-shadow: none; /* No shadow when disabled */
    transform: none; /* No transform when disabled */
}

/* Styling for conversion format options (radio buttons) */
.conversion-option-label {
    background-color: #e0f7fa; /* Lightest cyan background */
    color: #00796b; /* Dark teal text color */
    border: 2px solid #80deea; /* Light blue-green border */
    border-radius: 9999px; /* Fully rounded shape */
    cursor: pointer;
    padding: 0.85rem 1.8rem; /* Increased padding for size */
    font-weight: 600; /* Semi-bold text */
    transition: all 0.3s ease-in-out; /* Smoother transition for check/hover */
    box-shadow: 0 3px 8px rgba(0,0,0,0.1); /* Subtle shadow */
    min-width: 120px; /* Ensure consistent width */
    text-align: center;
}
.conversion-option-input:checked + .conversion-option-label {
    background-color: #00bcd4; /* Vibrant cyan when checked */
    color: #ffffff; /* White text when checked */
    border-color: #0097a7; /* Darker cyan border */
    box-shadow: 0 6px 15px rgba(0, 188, 212, 0.5); /* Enhanced shadow when checked */
    transform: translateY(-3px); /* Slight lift when checked */
}
.conversion-option-label:hover {
    transform: translateY(-3px); /* More pronounced lift on hover */
    box-shadow: 0 6px 15px rgba(0,0,0,0.2); /* Enhanced shadow on hover */
}

/* Styling for alert messages (e.g., max image limit) */
.max-image-alert {
    background-color: #ffebee; /* Very light red background */
    color: #d32f2f; /* Stronger red text color */
    border-left: 6px solid #c62828; /* Thicker, strong red left border */
    border-radius: 0.75rem; /* More rounded corners */
    padding: 1.2rem; /* Increased padding inside the alert */
    font-weight: 700; /* Bold text */
    animation: slideInFromTop 0.6s ease-out; /* Slightly slower, smoother slide-in */
    box-shadow: 0 5px 10px rgba(0,0,0,0.1); /* Subtle shadow for alerts */
}
/* Keyframe animation for slide-in effect */
@keyframes slideInFromTop {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Styling for image preview and download cards */
.preview-card, .download-card {
    background-color: #fdfdfd; /* Off-white background for cards */
    border: 1px solid #e0e7ee; /* Light gray border */
    border-radius: 1.5rem; /* More rounded corners for cards */
    padding: 1.5rem; /* Increased padding inside the card */
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); /* Deeper card shadow */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transition for hover effect */
}
.preview-card:hover, .download-card:hover {
    transform: translateY(-8px); /* More pronounced lift effect on hover */
    box-shadow: 0 15px 30px rgba(0,0,0,0.2); /* Stronger shadow on hover */
}
.preview-card img, .download-card img {
    border-radius: 1rem; /* Rounded image corners within the card */
    object-fit: cover; /* Ensures consistent image sizing */
    width: 100%; /* Make image fill card width */
    height: 180px; /* Fixed height for consistency */
    box-shadow: 0 5px 10px rgba(0,0,0,0.1); /* Image shadow */
}

/* Styling for the "Remove" button on preview cards */
.remove-file-btn {
    background-color: #ffcdd2; /* Light red background */
    color: #b71c1c; /* Dark red text color */
    font-weight: 700; /* Bold text */
    border-radius: 9999px; /* Fully rounded shape */
    padding: 0.5rem 1.2rem; /* Increased padding for the button */
    font-size: 0.9rem; /* Slightly larger font size */
    transition: all 0.2s ease-in-out; /* Smooth transition */
}
.remove-file-btn:hover {
    background-color: #ef9a9a; /* Slightly darker red on hover */
    transform: scale(1.08); /* More pronounced scale up on hover */
    box-shadow: 0 4px 8px rgba(183, 28, 28, 0.3); /* Shadow on hover */
}

/* Styling for download links on download cards */
.download-card a {
    background: linear-gradient(45deg, #1abc9c, #16a085); /* Darker green gradient */
    color: white; /* White text */
    font-weight: 700; /* Bold text */
    padding: 0.85rem 1.8rem; /* Increased padding for the link */
    border-radius: 9999px; /* Fully rounded shape */
    text-decoration: none; /* No underline */
    transition: all 0.3s ease-in-out; /* Smooth transition */
    box-shadow: 0 5px 12px rgba(26, 188, 156, 0.4); /* Subtle shadow */
}
.download-card a:hover {
    background: linear-gradient(45deg, #16a085, #1abc9c); /* Inverted gradient on hover */
    transform: translateY(-3px); /* Slight lift on hover */
    box-shadow: 0 8px 18px rgba(26, 188, 156, 0.6); /* Enhanced shadow on hover */
}

/* Styling for the "Reset" button */
.reset-button {
    background-color: #cfd8dc; /* Light gray background */
    color: #455a64; /* Darker gray text */
    font-weight: 700; /* Bold text */
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 9999px;
    padding: 0.85rem 2.2rem;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 8px 15px rgba(0,0,0,0.15);
}
.reset-button:hover {
    background-color: #90a4ae; /* Darker gray on hover */
    transform: translateY(-5px); /* More pronounced lift on hover */
    box-shadow: 0 12px 25px rgba(0,0,0,0.3); /* Enhanced shadow on hover */
}

/* Loading Overlay and Spinner styling */
.loading-overlay {
    position: fixed; /* Fixed position to cover the whole screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95); /* More opaque white background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* High z-index to appear on top */
    transition: opacity 0.4s ease; /* Smoother fade in/out */
}
.loading-overlay.hidden {
    opacity: 0; /* Fully transparent when hidden */
    pointer-events: none; /* Allows clicks through when hidden */
}
.spinner {
    border: 10px solid #e1f5fe; /* Light blue border */
    border-top: 10px solid #03a9f4; /* Bright blue top border */
    border-radius: 50%; /* Circular shape */
    width: 80px;
    height: 80px;
    animation: spin 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite; /* More bouncy spin animation */
    box-shadow: 0 0 25px rgba(3, 169, 244, 0.6); /* Stronger glow effect */
}
/* Keyframe animation for spinner rotation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive adjustments (original Tailwind breakpoints approximate) */
@media (max-width: 768px) {
    .conversion-option-label {
        padding: 0.5rem 1rem; /* Reduce padding for smaller screens */
        font-size: 0.875rem; /* Reduce font size for smaller screens */
        min-width: auto; /* Adjust min-width to content */
        margin-bottom: 0.5rem; /* Add some bottom margin for better spacing on mobile */
    }

    .flex-wrap {
        justify-content: center; /* Center the buttons on smaller screens */
        gap: 0.5rem; /* Reduce gap between buttons on mobile */
    }

    .convert-button {
        padding: 0.75rem 2rem; /* Smaller padding for convert button on mobile */
        font-size: 1.125rem; /* Smaller font size for convert button on mobile */
        max-width: 80%; /* Limit width to prevent overflow on very small screens */
        box-sizing: border-box; /* Ensure padding/border included in width */
    }
}

@media (min-width: 640px) { /* sm */
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) { /* lg */
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Flex utilities for compatibility */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.text-center { text-align: center; }
.hidden { display: none !important; } /* Important to override any theme styles */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.gap-8 { gap: 2rem; } /* 32px */
.mb-4 { margin-bottom: 1rem; } /* 16px */
.mb-10 { margin-bottom: 2.5rem; } /* 40px */
.mb-12 { margin-bottom: 3rem; } /* 48px */
.mb-3 { margin-bottom: 0.75rem; } /* 12px */
.mb-8 { margin-bottom: 2rem; } /* 32px */
.mt-3 { margin-top: 0.75rem; } /* 12px */
.mt-4 { margin-top: 1rem; } /* 16px */
.mt-6 { margin-top: 1.5rem; } /* 24px */
.mt-12 { margin-top: 3rem; } /* 48px */
.mt-16 { margin-top: 4rem; } /* 64px */
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; } /* 40px */
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } /* 12px */
.px-16 { padding-left: 4rem; padding-right: 4rem; } /* 64px */
.py-4 { padding-top: 1rem; padding-bottom: 1rem; } /* 16px */
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.w-full { width: 100%; }
.text-purple-700 { color: #6d28d9; }
.text-teal-600 { color: #0d9488; }
.text-gray-700 { color: #4b5563; }
.text-gray-600 { color: #4a5568; }
.text-gray-500 { color: #6b7280; }
.text-gray-800 { color: #1f2937; }
.text-white { color: #ffffff; }
.font-extrabold { font-weight: 800; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.text-5xl { font-size: 3rem; line-height: 1; } /* 48px */
.text-lg { font-size: 1.125rem; line-height: 1.75rem; } /* 18px */
.text-2xl { font-size: 1.5rem; line-height: 2rem; } /* 24px */
.text-xl { font-size: 1.25rem; line-height: 1.75rem; } /* 20px */
.text-base { font-size: 1rem; line-height: 1.5rem; } /* 16px */
.text-md { font-size: 1rem; line-height: 1.5rem; } /* 16px */
.text-sm { font-size: 0.875rem; line-height: 1.25rem; } /* 14px */
.text-xs { font-size: 0.75rem; line-height: 1rem; } /* 12px */
.rounded-lg { border-radius: 0.5rem; } /* 8px */
.rounded-xl { border-radius: 0.75rem; } /* 12px */
.rounded-2xl { border-radius: 1rem; } /* 16px */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inline-block { display: inline-block; }