/* General Reset and Base Styles */
.lmg-wrap {
    max-width: 900px; /* Wider container for better spacing */
    margin: 40px auto; /* More vertical spacing */
    padding: 30px;
    background: #ffffff; /* White background */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Modern font stack */
}

/* Heading */
.lmg-wrap h2 {
    font-size: 28px; /* Larger heading */
    font-weight: 600; /* Semi-bold */
    color: #1a1a1a; /* Darker text for contrast */
    margin-bottom: 30px;
    text-align: center; /* Centered for better balance */
    letter-spacing: 0.5px; /* Slight letter spacing for elegance */
}

/* Labels */
.lmg-wrap label {
    display: block;
    font-size: 16px; /* Slightly larger for readability */
    font-weight: 500; /* Medium weight */
    color: #333; /* Dark gray for contrast */
    margin-bottom: 8px; /* More spacing below */
    transition: color 0.3s ease; /* Smooth color transition */
}

/* Inputs and Textarea */
.lmg-wrap input[type="text"],
.lmg-wrap textarea {
    width: 100%;
    padding: 12px 15px; /* More padding for comfort */
    margin-bottom: 20px; /* Increased spacing between fields */
    border: 1px solid #d1d5db; /* Light gray border */
    border-radius: 8px; /* Rounded corners */
    font-size: 15px; /* Readable font size */
    color: #333; /* Dark text */
    background: #f9fafb; /* Light gray background */
    transition: all 0.3s ease; /* Smooth transitions for border, background, and shadow */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); /* Subtle inset shadow */
}

/* Hover and Focus States for Inputs */
.lmg-wrap input[type="text"]:hover,
.lmg-wrap textarea:hover {
    border-color: #3b82f6; /* Soft blue on hover */
    background: #ffffff; /* White background on hover */
}

.lmg-wrap input[type="text"]:focus,
.lmg-wrap textarea:focus {
    outline: none;
    border-color: #2563eb; /* Darker blue on focus */
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1); /* Glow effect */
    background: #ffffff;
}

/* Textarea Specifics */
.lmg-wrap textarea {
    resize: vertical; /* Allow vertical resizing only */
    min-height: 150px; /* Taller textarea for quiz questions */
}

/* Button */
.lmg-wrap .button-primary {
    display: block; /* Block-level for centering */
    width: 100%; /* Full width for consistency */
    max-width: 300px; /* Limit width for better proportions */
    margin: 20px auto; /* Center the button */
    padding: 14px 20px; /* Taller and wider padding */
    background: #2563eb; /* Modern blue */
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease; /* Smooth transitions */
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2); /* Subtle shadow */
}

/* Button Hover and Active States */
.lmg-wrap .button-primary:hover {
    background: #1d4ed8; /* Darker blue on hover */
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); /* Larger shadow on hover */
    transform: translateY(-1px); /* Slight lift effect */
}

.lmg-wrap .button-primary:active {
    transform: translateY(1px); /* Press-down effect */
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.2);
}

/* Progress Bar Container */
#progress-bar-container {
    margin-top: 30px;
    text-align: center; /* Center the progress bar */
}

/* Progress Label */
#progress-bar-container label {
    font-size: 14px;
    font-weight: 500;
    color: #4b5563; /* Gray for secondary text */
    margin-bottom: 8px;
}

/* Progress Bar */
#progress-bar {
    width: 100%;
    max-width: 600px;
    height: 8px; /* Thinner bar for elegance */
    background: #e5e7eb; /* Light gray background */
    border-radius: 4px;
    overflow: hidden; /* Ensure fill stays within rounded corners */
    margin: 0 auto; /* Center the bar */
}

/* Progress Fill */
#progress-fill {
    height: 100%;
    width: 0;
    background: #2563eb; /* Blue fill */
    border-radius: 4px;
    transition: width 0.5s ease-in-out; /* Smooth animation */
}

/* Progress Text */
#progress-text {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    color: #4b5563; /* Gray text */
    font-weight: 500;
}

/* Results Section */
#results {
    margin-top: 30px;
    text-align: center;
}

/* Download Link */
#results p {
    font-size: 16px;
    color: #1a1a1a;
}

#results a {
    display: inline-block;
    padding: 10px 20px;
    background: #10b981; /* Green for success */
    color: #ffffff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

#results a:hover {
    background: #059669; /* Darker green on hover */
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

/* Error Message */
#results p.error {
    color: #dc2626; /* Red for errors */
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
    .lmg-wrap {
        margin: 20px;
        padding: 20px;
    }

    .lmg-wrap h2 {
        font-size: 24px;
    }

    .lmg-wrap label {
        font-size: 14px;
    }

    .lmg-wrap input[type="text"],
    .lmg-wrap textarea {
        font-size: 14px;
        padding: 10px;
    }

    .lmg-wrap .button-primary {
        padding: 12px 18px;
        font-size: 14px;
    }

    #progress-bar {
        max-width: 100%;
    }
}

/* Font Import (Optional) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');