@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

/* General body styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f9;
    color: #333;
    min-height: 100vh; /* Ensure body takes full viewport height */
    box-sizing: border-box; /* Consistent box model */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Header styles */
header {
    background-color: #6a00ff;
    color: #FFFCF9;
    padding: 10px 0;
    text-align: center;
    width: 100%;
}

h1 {
    font-family: 'Pacifico', cursive; /* Rounded font */
    margin: 0;
    font-size: 48px; /* Larger font size */
    text-align: center;
    color: #FFFCF9;
    margin-top: 20px; /* Add some space above */
    margin-bottom: 30px; /* Increased space below */
    letter-spacing: 2px; /* Added for increased kerning */
}

/* Container for the main content */
.container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #6a00ff;
    color: #FFFCF9;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease; /* Add transition for smooth drag feedback */
    position: relative; /* For positioning drag overlay */
}

/* Drag and drop styles */
.container.drag-over {
    border: 3px dashed #FFFCF9;
    background-color: #7a10ff; /* Slightly lighter purple */
    transform: scale(1.02); /* Slight scale effect */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); /* Enhanced shadow */
}

.container.drag-over::before {
    content: "Drop your image here";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 252, 249, 0.95);
    color: #6a00ff;
    padding: 20px 40px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

/* Styles for file upload section */
#uploadSection, .controls {
    margin-bottom: 30px;
    width: 100%;
}

#uploadSection h2 {
    font-size: 18px; /* Standardized font size */
    margin-bottom: 10px;
}

#fileInput {
    margin-bottom: 10px;
}

/* Editor area layout */
.editor-area {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* justify-content: space-around; */ /* Changed to allow full-width child */
    justify-content: flex-start; /* Or remove if children are 100% width */
    margin-bottom: 20px;
    width: 100%;
}

/* Preview and options sections */
.preview-section, .options-section { /* Removed #imagePreviewSection from this group rule for text-align */
    margin-top: 20px;
    /* text-align: center; */ /* Overridden below for .preview-section */
}

.preview-section { /* Specific styles for the main preview wrapper */
    width: 100%; /* Ensure it takes full width of editor-area */
    text-align: left; /* Align contents to the left */
}

#imagePreviewSection { /* This is the container for the h2 and img */
    margin-top: 20px;
    text-align: center; /* Center image and text horizontally */
    width: 100%; /* Take full width of its parent, previewContainer */
    position: relative; /* Add this for loading overlay positioning */
}


#imagePreviewSection h2, .preview-section h2, .options-section h2 {
    font-size: 18px; /* Standardized font size */
    margin-bottom: 10px; /* This will apply to the moved H2, creating space before previewContainer */
    color: #FFFCF9;
    display: block;
    /* text-align: center; */ /* Default for this group, .preview-section parent handles left-align for its direct H2 child */
    margin-top: 0;
}

/* Image preview styling */
#imagePreview, #previewContainer img { /* This rule targets the image correctly */
    max-width: 100%;
    max-height: 350px; /* Fixed max height */
    display: block;
    object-fit: contain; /* Ensures the whole image is visible without changing aspect ratio */
    border-radius: 4px;
    /* margin: 0 auto 10px auto; */ /* Ensures image is centered in its container */
    margin: 0 auto 10px auto; /* Confirmed: This centers the image */
}

#previewContainer {
    background-color: #f0f0f0; /* Light gray background */
    border-radius: 8px;      /* Rounded corners */
    padding: 20px;           /* Padding inside the container */
    box-sizing: border-box;  /* Include padding and border in the element's total width and height */
    width: 100%;             /* Ensure it takes full available width */
    margin-top: 20px;        /* Add some space above the preview container */
}

/* Loading overlay for image preview */
#loadingOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(240, 240, 240, 0.9);
    border-radius: 8px;
    display: none; /* Hidden by default */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    min-height: 200px; /* Ensure minimum height for visibility */
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(106, 0, 255, 0.3);
    border-left: 4px solid #6a00ff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    color: #6a00ff;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
}

/* Controls styling */
#controls, .control-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: white; /* This is effectively #FFFCF9 */
    /* General labels will inherit font-size or have it set by more specific rules */
}

/* Set font size for specific main control group labels */
.control-group > label:not([for]), /* Targets "Aspect Ratio:" label */
label[for="paddingColorButton"] {   /* Targets "Padding Color:" label */
    font-size: 18px; /* Standardized font size */
}

/* Styles for aspect ratio and color controls */
#controls {
    margin-bottom: 20px;
}

.control-group {
    margin-bottom: 25px; /* Increased for more vertical spacing between groups */
}

/* Optional: If #controls has padding-bottom, this prevents double margin on the last group */
#controls > .control-group:last-child {
    margin-bottom: 0;
}

/* Form elements styling */
select, input[type="number"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 16px;
}

/* Color input styling */
/* input[type="color"] { */ /* Commented out or remove if no longer directly used and styled */
    /* padding: 0;
    border: none; 
    width: 100%;
    height: 44px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 5px;
    margin-bottom: 15px;
    box-sizing: border-box; 
} */

/* New Padding Color Button (PCB) styles */
.padding-color-button {
    width: 100%; /* Or a fixed width like 50px if preferred alongside a label */
    height: 44px;
    border: none; /* Remove border */
    border-radius: 4px;
    cursor: pointer;
    background-color: #000000; /* Default color, will be updated by JS */
    padding: 0; /* Remove default button padding */
    margin-top: 5px;
    margin-bottom: 15px;
    box-sizing: border-box;
}

.padding-color-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Button styles */
button {
    background-color: #FFFCF9;
    color: #6a00ff;
    padding: 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
    transition: background-color 0.3s ease;
    margin-bottom: 10px;
}

button:hover:not(:disabled) {
    background-color: #f0f0f0;
}

button:disabled {
    background-color: #b0b0b0;
    color: #666;
    cursor: not-allowed;
}

/* File input styling to match buttons */
input[type="file"] {
    display: none; /* Hide the default file input */
}

.file-input-label {
    background-color: #FFFCF9;
    color: #6a00ff;
    padding: 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    display: inline-block;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.file-input-label:hover {
    background-color: #f0f0f0;
}

/* Download button styling */
#downloadButton {
    width: 100%;
    padding: 15px;
    margin-top: 10px;
    font-weight: bold;
    display: none; /* Initially hide the download button */
}

/* Status message */
.status-message {
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 10px;
    font-size: 1em;
    color: #6a00ff; /* New teal accent color for status messages */
    text-align: center;
    width: 100%;
}

/* Aspect Ratio Picker Styles */
.aspect-ratio-picker {
    display: flex;
    overflow-x: auto;
    padding-top: 5px; /* Added to prevent top edge of shadow/outline from being clipped */
    padding-bottom: 10px;
    padding-left: 5px; /* Reduced from 15px to 5px for less spacing before first ARR */
    padding-right: 15px; /* Keep right padding to prevent clipping */
    gap: 10px;
    align-items: flex-start;
    cursor: grab;
    user-select: none;
    white-space: nowrap; /* Prevent wrapping to two rows */

    /* Hide scrollbar for webkit browsers (Chrome, Safari, Edge) */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for webkit browsers */
.aspect-ratio-picker::-webkit-scrollbar {
    display: none;
}

.aspect-ratio-picker.grabbing {
    cursor: grabbing;
}

.aspect-ratio-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3); /* Use theme's white with transparency */
    border-radius: 4px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.1); /* Light transparent white on purple */
    min-width: 80px;
    height: 100px; /* Fixed height ensures consistency */
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.aspect-ratio-option:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Slightly more opaque on hover */
    border-color: #FFFCF9; /* Full white border on hover */
}

.aspect-ratio-option:focus {
    outline: 2px solid #FFFCF9; /* White outline on focus */
    outline-offset: 2px; /* Optional: adds a little space between border and outline */
}

.aspect-ratio-option.selected {
    border-color: #FFFCF9; /* Full white border when selected */
    background-color: rgba(255, 255, 255, 0.3); /* More opaque when selected */
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* White shadow for emphasis */
}

.aspect-ratio-option.disabled {
    cursor: not-allowed;
    opacity: 0.5;
    background-color: rgba(255, 255, 255, 0.05); /* Even more transparent when disabled */
    /* border-color remains rgba(255, 255, 255, 0.3) or as inherited */
}

.aspect-ratio-svg {
    width: 60px;
    height: 60px; /* Max height is controlled by max-height below */
    margin-bottom: 7px; /* Reduced margin for better fit */
    color: #FFFCF9; /* SVG elements should use this color */
    max-width: 70px; /* Ensure this is not too large for the ARR */
    max-height: 40px; /* Ensure this is not too large for the ARR */
    fill: #FFFCF9; /* Fill color for the SVG shape */
    stroke: #6a00ff; /* Stroke color to contrast with fill, using theme purple */
    stroke-width: 1px; /* Adjusted stroke width */
}

.aspect-ratio-option.selected .aspect-ratio-svg {
    fill: #FFFCF9; /* Keep fill white */
    stroke: #FFFCF9; /* Make stroke white for selected for a "highlighted" effect */
    /* Alternatively, could use a darker purple or a brighter accent if available */
}

.aspect-ratio-label {
    font-size: 12px;
    text-align: center;
    color: #FFFCF9;
    line-height: 1.2;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* flex-grow: 1; */ /* Can be useful if SVG height varies, but fixed max-height makes it less critical */
}

.aspect-ratio-value {
    display: block;
    width: 100%;
    margin-bottom: 4px;
    font-weight: bold;
    /* Removed text-overflow, overflow, white-space: nowrap to allow wrapping */
    white-space: normal; /* Explicitly allow wrapping */
}

.aspect-ratio-description {
    display: block;
    width: 100%;
    /* Removed text-overflow, overflow, white-space: nowrap to allow wrapping */
    white-space: normal; /* Explicitly allow wrapping */
}

/* Custom Ratio Inputs */
#customRatioInputsContainer {
    display: flex; /* This is also set by JS when shown */
    align-items: center; /* This vertically centers the label and inputs */
    gap: 8px; /* Adds space between the label, inputs, and colon */
    /* Ensure it doesn't have conflicting margin/padding if it was styled as form-group before */
    /* If it was 'form-group' and had specific margins, those might need to be removed or adjusted */
}

/* Override general label styles for the label INSIDE customRatioInputsContainer */
#customRatioInputsContainer label {
    display: inline; /* Make it part of the flex row */
    margin-bottom: 0; /* Remove bottom margin as it's now inline */
    flex-shrink: 0; /* Prevent label from shrinking if space is tight */
}

#customRatioInputsContainer input[type="number"] {
    width: 80px; /* Increased from 60px to accommodate decimal values like 2.39 */
    padding: 6px 8px; /* Adjust padding for height */
    text-align: center;
    background-color: rgba(255, 255, 255, 0.15); /* Slightly different from ARR for differentiation */
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    box-sizing: border-box;
}

/* Multiple Colors Checkbox */
.checkbox-container {
    display: flex;
    align-items: center;
    margin-bottom: 15px; /* Increased from 10px to add more space before Padding Color label */
    gap: 8px;
}

.checkbox-container input[type="checkbox"] {
    width: auto;
    margin: 0;
    transform: scale(1.2);
}

.checkbox-container input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.checkbox-label {
    display: inline !important;
    margin-bottom: 0 !important;
    font-size: 14px;
    cursor: pointer;
}

.checkbox-container input[type="checkbox"]:disabled + .checkbox-label {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Custom Color Picker Widget */
.color-picker-widget {
    position: fixed; /* Changed from absolute to fixed for better positioning control */
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    width: 280px;
    max-width: 90vw;
    /* Remove margin-top as positioning will be handled by JavaScript */
}

.color-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    color: #FFFCF9;
    font-weight: bold;
}

.close-picker-button {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #FFFCF9;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}

.close-picker-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.color-picker-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 15px;
}

.color-swatch {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.color-swatch:hover {
    border-color: #FFFCF9;
    transform: scale(1.1);
}

.color-swatch.selected {
    border-color: #FFFCF9;
    border-width: 3px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.color-swatch.selected::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    font-size: 16px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* Custom Color Input Section */
.custom-color-section {
    margin-bottom: 15px;
}

.custom-color-label {
    font-size: 14px !important;
    margin-bottom: 8px !important;
    color: #FFFCF9;
}

.custom-color-input-container {
    display: flex;
    gap: 10px;
    align-items: center;
}

.custom-color-input-container input[type="color"] {
    width: 50px;
    height: 40px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    cursor: pointer;
    background: none;
}

.add-color-button {
    padding: 8px 16px;
    font-size: 14px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #FFFCF9;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: auto;
    margin: 0;
}

.add-color-button:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Second Color Container */
#secondColorContainer {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

#secondColorContainer label {
    font-size: 18px; /* Match the main padding color label */
    margin-bottom: 5px;
}

/* Gradient Mode Picker */
.gradient-mode-picker {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.gradient-mode-picker > label {
    font-size: 18px;
    margin-bottom: 10px;
    display: block;
}

.gradient-mode-options-container {
    display: flex;
    overflow-x: auto;
    padding: 5px 15px 10px 15px; /* Added left and right padding */
    gap: 10px;
    align-items: flex-start;
    cursor: grab;
    user-select: none;
    white-space: nowrap;
    
    /* Hide scrollbar for webkit browsers (Chrome, Safari, Edge) */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.gradient-mode-options-container::-webkit-scrollbar {
    display: none;
}

.gradient-mode-options-container.grabbing {
    cursor: grabbing;
}

.gradient-mode-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.1);
    min-width: 70px;
    height: 80px;
    box-sizing: border-box;
    transition: all 0.2s ease;
    color: #FFFCF9;
    font-size: 10px;
    margin: 0;
}

.gradient-mode-option:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: #FFFCF9;
}

.gradient-mode-option:focus {
    outline: 2px solid #FFFCF9;
    outline-offset: 2px;
}

.gradient-mode-option.selected {
    border-color: #FFFCF9;
    background-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.gradient-mode-option.disabled {
    cursor: not-allowed;
    opacity: 0.5;
    background-color: rgba(255, 255, 255, 0.05);
}

.gradient-mode-svg {
    width: 50px;
    height: 40px;
    margin-bottom: 5px;
    color: #FFFCF9;
    fill: #FFFCF9;
    stroke: #6a00ff;
    stroke-width: 1px;
}

.gradient-mode-option.selected .gradient-mode-svg {
    fill: #FFFCF9;
    stroke: #FFFCF9;
}

.gradient-mode-label {
    font-size: 9px;
    text-align: center;
    color: #FFFCF9;
    line-height: 1.1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gradient-mode-value {
    display: block;
    width: 100%;
    margin-bottom: 2px;
    font-weight: bold;
    white-space: normal;
}

.gradient-mode-description {
    display: block;
    width: 100%;
    white-space: normal;
}

/* Footer styles */
footer {
    text-align: center;
    padding: 10px 0;
    background-color: transparent; /* Remove purple background */
    color: #555; /* Revert to original text color */
    position: relative;
    bottom: 0;
    width: 100%;
}

footer a {
    color: #6a00ff; /* Use theme color for links */
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

footer p {
    margin: 5px 0;
}

/* Media Queries for Responsive Adjustments */
@media (max-width: 640px) {
    .editor-area {
        flex-direction: column;
    }

    .preview-section, .options-section {
        min-width: 100%;
        margin-bottom: 20px;
    }

    .options-section:last-child {
        margin-bottom: 0;
    }

    h1 {
        font-size: 1.6em;
    }
}

@media (max-width: 480px) {
    body {
        padding: 10px;
    }
    .container {
        padding: 10px;
    }
    h1 {
        font-size: 1.4em;
    }
    select, input[type="color"], input[type="file"], button {
        padding: 10px;
        font-size: 15px;
    }
    input[type="color"] {
        height: 44px;
    }
}