/*
         * Custom CSS for the Password Generator App
         * This section defines the base styles and responsive adjustments
         * for different screen sizes, as well as theme-specific styles.
         */

        /* General Body Styling */
        body {
            font-family: 'Comfortaa', sans-serif; /* Sets the primary font to Comfortaa */
            background-color: #e0f2f7; /* Light Cyan background for the default (light) theme */
            display: flex; /* Uses flexbox for centering content */
            justify-content: center; /* Centers content horizontally */
            align-items: center; /* Centers content vertically */
            min-height: 100vh; /* Ensures the body takes at least the full viewport height */
            margin: 0; /* Removes default body margin */
            padding: 1rem; /* Adds padding for very small screens to prevent content from touching edges */
            box-sizing: border-box; /* Ensures padding is included in the element's total width and height */
            transition: background-color 0.3s ease; /* Smooth transition for background color when theme changes */
        }

        /* Dark Theme Styles for the Body */
        body.dark-theme {
            background-color: #1f2937; /* Dark Gray-900 background for the dark theme */
        }

        /* Main Container Styling */
        .container {
            background-color: #f0f9ff; /* Pale Blue background for the default (light) theme container */
            padding: 1.5rem; /* Default padding for smaller screens */
            border-radius: 1.5rem; /* More rounded corners for a softer look */
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Softer shadow for depth */
            max-width: 450px; /* Maximum width for the container */
            width: 90%; /* Takes 90% of the viewport width, ensuring responsiveness */
            text-align: center; /* Centers text within the container */
            transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for theme changes */
        }

        /* Dark Theme Styles for the Container */
        body.dark-theme .container {
            background-color: #374151; /* Dark Gray-700 container background for dark theme */
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); /* Darker shadow for dark theme */
        }

        /* Responsive Padding for Larger Screens (sm breakpoint and above) */
        @media (min-width: 640px) {
            .container {
                padding: 2.5rem; /* Increased padding for larger screens */
            }
        }

        /* Password Display Input Field Styling */
        #passwordDisplay {
            background-color: #dbeafe; /* Light Blue-200 input background for default theme */
            border: 1px solid #bfdbfe; /* Light Blue-300 subtle border */
            padding: 0.75rem; /* Default padding */
            font-size: 1rem; /* Default font size */
            border-radius: 0.75rem; /* Rounded corners */
            width: calc(100% - 1.5rem); /* Adjusts width to account for padding */
            margin-bottom: 1rem; /* Space below the input field */
            text-align: center; /* Centers the displayed password text */
            color: #1e3a8a; /* Dark Blue-800 text color for default theme */
            font-weight: bold; /* Bold font for better readability */
            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Smooth transitions for theme changes */
        }

        /* Dark Theme Styles for Password Display */
        body.dark-theme #passwordDisplay {
            background-color: #4b5563; /* Gray-600 input background for dark theme */
            border-color: #6b7280; /* Gray-500 border for dark theme */
            color: #e0f2f7; /* Light Cyan text for dark theme */
        }

        /* Responsive Font Size and Padding for Password Display */
        @media (min-width: 640px) {
            #passwordDisplay {
                padding: 1rem; /* Increased padding for larger screens */
                font-size: 1.25rem; /* Larger font size for larger screens */
                width: calc(100% - 2rem); /* Adjusts width for increased padding */
                margin-bottom: 1.5rem; /* More space below for larger screens */
            }
        }

        /* Generate Button Styling */
        .btn-generate {
            background-image: linear-gradient(to right, #93c5fd, #a78bfa); /* Blue to Light Purple gradient */
            color: white; /* White text color */
            padding: 0.8rem 1.5rem; /* Default padding */
            font-size: 1rem; /* Default font size */
            font-weight: bold; /* Bold font */
            border-radius: 0.75rem; /* Rounded corners */
            cursor: pointer; /* Indicates interactivity */
            transition: all 0.2s ease-in-out; /* Smooth transition for hover effects */
            border: none; /* Removes default button border */
            width: 100%; /* Full width button */
            margin-bottom: 0.75rem; /* Space below the button */
            box-shadow: 0 4px 10px rgba(147, 197, 253, 0.3); /* Shadow based on blue gradient start */
        }

        /* Responsive Padding and Font Size for Generate Button */
        @media (min-width: 640px) {
            .btn-generate {
                padding: 1rem 2rem; /* Increased padding for larger screens */
                font-size: 1.1rem; /* Larger font size for larger screens */
                margin-bottom: 1rem; /* More space below for larger screens */
            }
        }

        /* Hover Effects for Generate Button */
        .btn-generate:hover {
            transform: translateY(-2px); /* Lifts the button slightly on hover */
            box-shadow: 0 6px 15px rgba(147, 197, 253, 0.4); /* Larger shadow on hover */
        }

        /* Copy Button Styling */
        .btn-copy {
            background-color: #6ee7b7; /* Emerald-300 green for the copy button */
            color: white; /* White text color */
            padding: 0.6rem 1.2rem; /* Default padding */
            font-size: 0.9rem; /* Default font size */
            font-weight: bold; /* Bold font */
            border-radius: 0.75rem; /* Rounded corners */
            cursor: pointer; /* Indicates interactivity */
            transition: background-color 0.2s ease-in-out; /* Smooth transition for hover effects */
            border: none; /* Removes default button border */
            width: 100%; /* Full width button */
            margin-top: 0.75rem; /* Space above the button */
        }

        /* Responsive Padding and Font Size for Copy Button */
        @media (min-width: 640px) {
            .btn-copy {
                padding: 0.75rem 1.5rem; /* Increased padding for larger screens */
                font-size: 1rem; /* Larger font size for larger screens */
                margin-top: 1rem; /* More space above for larger screens */
            }
        }

        /* Hover Effects for Copy Button */
        .btn-copy:hover {
            background-color: #34d399; /* Darker Emerald-500 on hover */
        }

        /* Option Group Styling (for checkboxes and labels) */
        .option-group {
            display: flex; /* Uses flexbox for layout */
            justify-content: space-between; /* Distributes items with space between them */
            align-items: center; /* Centers items vertically */
            margin-bottom: 0.75rem; /* Space below each option group */
            background-color: #eff6ff; /* Light Blue-100 background for options in default theme */
            padding: 0.6rem 0.8rem; /* Default padding */
            border-radius: 0.75rem; /* Rounded corners */
            border: 1px solid #dbeafe; /* Light Blue-200 subtle border */
            transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth transitions for theme changes */
        }

        /* Dark Theme Styles for Option Groups */
        body.dark-theme .option-group {
            background-color: #4b5563; /* Gray-600 background for options in dark theme */
            border-color: #6b7280; /* Gray-500 border for dark theme */
        }

        /* Responsive Padding for Option Groups */
        @media (min-width: 640px) {
            .option-group {
                margin-bottom: 1rem; /* More space below for larger screens */
                padding: 0.75rem 1rem; /* Increased padding for larger screens */
            }
        }

        /* Option Label Styling */
        .option-group label {
            color: #374151; /* Gray-700 text for labels in default theme */
            font-size: 0.9rem; /* Default font size */
            font-weight: 500; /* Medium font weight */
            transition: color 0.3s ease; /* Smooth transition for text color when theme changes */
        }

        /* Dark Theme Styles for Labels */
        body.dark-theme .option-group label {
            color: #e0f2f7; /* Light Cyan text for labels in dark theme */
        }

        /* Responsive Font Size for Labels */
        @media (min-width: 640px) {
            .option-group label {
                font-size: 1rem; /* Larger font size for larger screens */
            }
        }

        /* Checkbox Styling */
        .option-group input[type="checkbox"] {
            transform: scale(1.1); /* Slightly larger checkboxes for better touch targets */
            accent-color: #6366f1; /* Sets the color of the checkbox when checked */
        }

        /* Responsive Scale for Checkboxes */
        @media (min-width: 640px) {
            .option-group input[type="checkbox"] {
                transform: scale(1.2); /* Even larger checkboxes for larger screens */
            }
        }

        /* Password Length Slider Styling */
        #passwordLength {
            width: 100%; /* Full width slider */
            -webkit-appearance: none; /* Removes default WebKit browser styling */
            appearance: none; /* Removes default browser styling */
            height: 8px; /* Height of the slider track */
            background: #dbeafe; /* Light Blue-200 background for the slider track in default theme */
            outline: none; /* Removes outline on focus */
            border-radius: 5px; /* Rounded corners for the track */
            margin-top: 0.5rem; /* Space above the slider */
            margin-bottom: 0.75rem; /* Default space below the slider */
            transition: background 0.3s ease; /* Smooth transition for track background when theme changes */
        }

        /* Dark Theme Styles for Slider Track */
        body.dark-theme #passwordLength {
            background: #4b5563; /* Gray-600 background for slider track in dark theme */
        }

        /* Responsive Margin for Slider */
        @media (min-width: 640px) {
            #passwordLength {
                margin-bottom: 1rem; /* More space below for larger screens */
            }
        }

        /* Slider Thumb Styling (for WebKit browsers like Chrome, Safari) */
        #passwordLength::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px; /* Width of the thumb */
            height: 20px; /* Height of the thumb */
            background: #6366f1; /* Indigo-500 color for the thumb */
            border-radius: 50%; /* Makes the thumb circular */
            cursor: pointer; /* Indicates interactivity */
            box-shadow: 0 2px 5px rgba(99, 102, 241, 0.4); /* Shadow for the thumb */
            transition: background 0.2s ease-in-out; /* Smooth transition for thumb color on hover */
        }

        /* Slider Thumb Styling (for Mozilla Firefox) */
        #passwordLength::-moz-range-thumb {
            width: 20px; /* Width of the thumb */
            height: 20px; /* Height of the thumb */
            background: #6366f1; /* Indigo-500 color for the thumb */
            border-radius: 50%; /* Makes the thumb circular */
            cursor: pointer; /* Indicates interactivity */
            box-shadow: 0 2px 5px rgba(99, 102, 241, 0.4); /* Shadow for the thumb */
            transition: background 0.2s ease-in-out; /* Smooth transition for thumb color on hover */
        }

        /* Hover Effects for Slider Thumb */
        #passwordLength::-webkit-slider-thumb:hover {
            background: #4f46e5; /* Darker Indigo-600 on hover */
        }
        #passwordLength::-moz-range-thumb:hover {
            background: #4f46e5; /* Darker Indigo-600 on hover */
        }

        /* Length Value Display Styling */
        #lengthValue {
            font-size: 1rem; /* Default font size */
            font-weight: bold; /* Bold font */
            color: #374151; /* Gray-700 text color for default theme */
            margin-left: 0.5rem; /* Space to the left of the value */
            transition: color 0.3s ease; /* Smooth transition for text color when theme changes */
        }

        /* Dark Theme Styles for Length Value */
        body.dark-theme #lengthValue {
            color: #e0f2f7; /* Light Cyan text for dark theme */
        }

        /* Responsive Font Size for Length Value */
        @media (min-width: 640px) {
            #lengthValue {
                font-size: 1.1rem; /* Larger font size for larger screens */
            }
        }

        /* Responsive Heading Font Size */
        .text-3xl {
            font-size: 1.875rem; /* Default font size for mobile (approx. 30px) */
            transition: color 0.3s ease; /* Smooth transition for text color when theme changes */
        }

        /* Dark Theme Styles for Heading */
        body.dark-theme .text-3xl {
            color: #e0f2f7; /* Light Cyan text for heading in dark theme */
        }

        /* Responsive Heading Font Size for Small Screens (sm breakpoint and above) */
        @media (min-width: 640px) {
            .text-3xl {
                font-size: 2.25rem; /* Equivalent to Tailwind's sm:text-3xl (approx. 36px) */
            }
        }

        /* Responsive Heading Font Size for Medium Screens (md breakpoint and above) */
        @media (min-width: 768px) {
            .text-3xl {
                font-size: 3rem; /* Equivalent to Tailwind's md:text-4xl (approx. 48px) */
            }
        }

        /* Theme Toggle Button Styling */
        #themeToggle {
            background-color: #6366f1; /* Indigo-500 purple background for default theme */
            color: white; /* White text color */
            padding: 0.5rem 1rem; /* Padding for the button */
            font-size: 0.9rem; /* Font size */
            font-weight: bold; /* Bold font */
            border-radius: 0.5rem; /* Rounded corners */
            cursor: pointer; /* Indicates interactivity */
            transition: background-color 0.2s ease-in-out; /* Smooth transition for hover effects */
            border: none; /* Removes default button border */
            position: absolute; /* Positions the button relative to its nearest positioned ancestor (body in this case) */
            top: 1rem; /* 1rem from the top of the viewport */
            right: 1rem; /* 1rem from the right of the viewport */
            z-index: 10; /* Ensures the button is on top of other elements */
        }

        /* Hover Effects for Theme Toggle Button */
        #themeToggle:hover {
            background-color: #4f46e5; /* Darker Indigo-600 on hover */
        }

        /* Dark Theme Styles for Theme Toggle Button */
        body.dark-theme #themeToggle {
            background-color: #818cf8; /* Indigo-400 lighter purple in dark theme */
        }

        /* Dark Theme Hover Effects for Theme Toggle Button */
        body.dark-theme #themeToggle:hover {
            background-color: #a78bfa; /* Even lighter purple on hover in dark theme */
        }