/* Root variables for colors and dimensions */
        :root {
            --primary: #4361ee; /* Primary color */
            --secondary: #3f37c9; /* Secondary color */
            --light-bg: #ffffff; /* Light background */
            --dark-bg: #1a1a1a; /* Dark background */
            --text-light: #f0f0f0; /* Light text */
            --text-dark: #212529; /* Dark text */
            --border-light: #ddd; /* Light border */
            --border-dark: #444; /* Dark border */
            --footer-bg: #000000; /* Black footer background */
            --footer-text: #a0a0a0; /* Lighter grey text for footer */
            --button-primary-bg: #0d6efd; /* Blue button */
            --button-primary-hover: #0a58ca; /* Darker blue hover */
            --button-secondary-bg: #6c757d; /* Grey button */
            --button-secondary-hover: #5a6268; /* Darker grey hover */


            /* Dimensions */
            --page-width: 220mm; /* Changed from 210mm */
            --page-height: 332mm;
            --photo-width: 35mm;
            --photo-height: 47mm;
            --gap-size: 2mm;
            --padding-size: 10mm;
        }


        /* Basic reset and font */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }


        /* Body styling and theme transition */
        body {
            background-color: #f5f5f5; /* Light greyish background */
            color: var(--text-dark);
            transition: background-color 0.3s ease, color 0.3s ease;
            position: relative; /* Needed for overlay */
            overflow-x: hidden; /* Prevent horizontal scroll when menu is open */
        }


        body.dark-mode {
            background-color: var(--dark-bg);
            color: var(--text-light);
        }


        /* Main container */
        .main-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px; /* Remove top/bottom padding */
            min-height: calc(100vh - 180px); /* Adjust based on header/footer */
        }


        /* Header styling */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            border-bottom: 1px solid var(--border-light);
            background-color: var(--light-bg);
            position: sticky; /* Make header sticky */
            top: 0;
            z-index: 100;
            transition: background-color 0.3s ease, border-bottom-color 0.3s ease;
        }


        body.dark-mode header {
            background-color: var(--dark-bg);
            border-bottom-color: var(--border-dark);
        }


        .logo {
            font-size: 24px;
            font-weight: 600;
            color: var(--text-dark);
            z-index: 102; /* Ensure logo is above overlay */
        }
         body.dark-mode .logo {
             color: var(--text-light);
         }


        /* Mobile Menu Button */
        .mobile-menu-button {
            display: none; /* Hidden by default on larger screens */
            font-size: 28px;
            background: none;
            border: none;
            cursor: pointer;
            color: var(--text-dark);
            z-index: 102; /* Ensure button is above overlay */
            margin-left: 15px; /* Add some space between right items and button */
        }
        body.dark-mode .mobile-menu-button {
            color: var(--text-light);
        }


        /* Navigation Links */
        nav#mainNav { /* Target the nav by ID */
            display: flex; /* Visible by default */
            transition: transform 0.3s ease-in-out;
        }
        nav#mainNav ul {
            list-style: none;
            display: flex;
            gap: 25px; /* Spacing between links */
        }


        nav#mainNav ul li a {
            text-decoration: none;
            color: var(--text-dark);
            font-weight: 500;
            transition: color 0.3s ease;
        }
        nav#mainNav ul li a:hover {
            color: var(--primary);
        }
         body.dark-mode nav#mainNav ul li a {
             color: var(--text-light);
         }
         body.dark-mode nav#mainNav ul li a:hover {
            color: var(--primary);
         }


        /* Header Right Side Elements */
        .header-right {
            display: flex;
            align-items: center;
            gap: 15px; /* Spacing between items */
            z-index: 102; /* Ensure header items are above overlay */
        }


        /* Language Dropdown */
        .language-select {
            padding: 6px 10px;
            border: 1px solid var(--border-light);
            border-radius: 5px;
            background-color: var(--light-bg);
            color: var(--text-dark);
            cursor: pointer;
            transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
         }
         body.dark-mode .language-select {
            background-color: var(--dark-bg);
            border-color: var(--border-dark);
             color: var(--text-light);
         }


        /* Theme Toggle Button */
        .theme-toggle {
            background: transparent;
            border: none;
            cursor: pointer;
            font-size: 18px;
            color: var(--text-dark);
            padding: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
         }
        body.dark-mode .theme-toggle {
             color: var(--text-light);
         }
        .theme-toggle:hover {
            opacity: 0.7;
         }


        /* Header Buttons */
        .header-btn {
            padding: 8px 18px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: background-color 0.3s ease;
            text-decoration: none;
             display: inline-block;
             text-align: center;
         }
        .btn-login {
            background-color: var(--light-bg);
            color: var(--text-dark);
            border: 1px solid var(--border-light);
        }
        .btn-login:hover {
            background-color: #f0f0f0;
         }
         body.dark-mode .btn-login {
            background-color: var(--dark-bg);
            color: var(--text-light);
             border: 1px solid var(--border-dark);
         }
         body.dark-mode .btn-login:hover {
             background-color: #333;
         }


        .btn-signup {
            background-color: var(--button-primary-bg);
            color: white;
        }
        .btn-signup:hover {
            background-color: var(--button-primary-hover);
        }




        /* Main Title Styling */
        .main-title {
            text-align: center;
            font-size: 2.5rem;
            font-weight: 600;
            margin: 40px 0 30px 0;
            color: var(--text-dark);
         }
        body.dark-mode .main-title {
             color: var(--text-light);
         }
        .main-title span {
             color: var(--primary);
         }


        /* Step container - general styling */
        .step-container {
            background: var(--light-bg);
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            margin-top: 30px;
            margin-bottom: 30px;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid #e0e0e0;
        }


        body.dark-mode .step-container {
            background: #2d2d2d;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            border-color: var(--border-dark);
        }


        /* Step 1 Specific Layout */
        #uploadStep .step-content-wrapper {
            display: flex;
            gap: 30px;
            padding: 30px;
             border: 1px dashed var(--border-light);
             border-radius: 8px;
             margin-bottom: 30px;
         }
         body.dark-mode #uploadStep .step-content-wrapper {
             border-color: var(--border-dark);
         }


        /* Upload area styling */
        .upload-container {
            flex: 1;
            padding: 40px;
            text-align: center;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s;
            background-color: #f9f9f9;
            border: 2px dashed #ccc;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 300px;
        }


        body.dark-mode .upload-container {
            border-color: #555;
            background-color: #2a2a2a;
        }


        .upload-container:hover {
            border-color: var(--primary);
            background: rgba(67, 97, 238, 0.05);
        }
        body.dark-mode .upload-container:hover {
            background: rgba(67, 97, 238, 0.1);
         }


         .upload-icon {
            font-size: 40px;
            color: var(--primary);
            margin-bottom: 15px;
         }


        .upload-text {
            margin-bottom: 15px;
            font-size: 16px;
             font-weight: 500;
         }


        .upload-separator {
            display: block;
            margin: 15px 0;
            font-size: 14px;
            color: #888;
        }
         body.dark-mode .upload-separator {
            color: #aaa;
         }


        /* Preview area styling */
        .image-preview-container {
            flex: 1;
            border: 1px solid var(--border-light);
            border-radius: 10px;
            padding: 10px;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 350px;
            overflow: hidden;
         }
        body.dark-mode .image-preview-container {
            border-color: var(--border-dark);
            background-color: #3a3a3a;
        }


        #uploadImagePreview {
             display: block;
             max-width: 100%;
            max-height: 100%;
            opacity: 0;
            transition: opacity 0.3s ease;
         }
         #uploadImagePreview.loaded {
             opacity: 1;
         }


         .cropper-container { }




        /* Size and DPI options */
        .size-options-wrapper {
            display: flex;
            justify-content: center;
            padding: 0 30px 30px 30px;
        }
        .size-options {
            display: flex;
            gap: 25px;
            align-items: center;
            flex-wrap: wrap;
             justify-content: center;
        }


        .select-box {
            padding: 10px 15px;
            border-radius: 5px;
            border: 1px solid #ccc;
            background: var(--light-bg);
            min-width: 200px;
            color: var(--text-dark);
            transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
         }
         body.dark-mode .select-box {
            background: #333;
            border-color: var(--border-dark);
            color: var(--text-light);
        }
        .size-options label {
            font-weight: 500;
            color: #555;
        }
         body.dark-mode .size-options label {
            color: #bbb;
         }


        /* General button styling */
        .btn {
            padding: 10px 20px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s;
            margin: 5px;
             font-weight: 500;
         }


        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }


        .btn-primary {
            background: var(--button-primary-bg);
            color: white;
        }
        .btn-primary:hover:not(:disabled) {
            background: var(--button-primary-hover);
         }


        .btn-secondary {
            background: var(--button-secondary-bg);
            color: white;
        }
        .btn-secondary:hover:not(:disabled) {
            background: var(--button-secondary-hover);
         }


        /* --- Styles for other steps --- */


        #uploadStep .step-header { display: none;
         }


        .step-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding: 20px 30px 0 30px;
         }


        .step-title {
            font-size: 20px;
            font-weight: 500;
        }


        .step-number {
            background: var(--primary);
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            font-weight: bold;
         }


        .image-editor-container {
            margin-top: 0;
            padding: 0 30px 30px 30px;
        }
        .editor-wrapper {
            display: flex;
            gap: 30px;
            flex-direction: row;
            flex-wrap: wrap;
        }


        .image-preview-container-steps {
            flex: 1;
            min-width: 280px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start; /* Align content to top */
            align-items: center;
            border: 1px solid var(--border-light);
            border-radius: 5px;
            padding: 10px;
            background-color: var(--light-bg);
            transition: background-color 0.3s ease, border-color 0.3s ease;
         }
        body.dark-mode .image-preview-container-steps {
            border-color: var(--border-dark);
            background-color: #2d2d2d;
        }
        #editStep .image-preview-container-steps { order: 2; }
#clothesStep .image-preview-container-steps { order: 2;
         } /* Ensure preview is second (right) */
        #borderStep .image-preview-container-steps { order: 2;
         } /* Added for border step */


        .editor-tools {
            flex: 1;
            min-width: 280px;
            display: flex;
            flex-direction: column;
        }
         #editStep .editor-tools { order: 1;
         }
         #clothesStep .editor-tools { order: 1;
         } /* Ensure tools are first (left) */

         #borderStep .editor-tools { order: 1;
         } /* Added for border step */


        #imagePreview, #processedImage, #noBgImg, #clothesCanvas, #borderPreviewImage /* Added borderPreviewImage */ {
            max-width: 100%;
            max-height: 400px;
            display: block;
            object-fit: contain;
            border-radius: 4px;
            transition: filter 0.3s ease;
            margin-bottom: 10px; /* Add some space below previews */
        }
        body.dark-mode #noBgImg, body.dark-mode #borderPreviewImage { border-color: var(--border-dark);
         }
        #noBgImg, #borderPreviewImage { border: 1px solid var(--border-light);
         }


        .tool-group {
            margin-bottom: 15px;
            border: 1px solid var(--border-light);
            border-radius: 5px; overflow: hidden;
            background-color: var(--light-bg);
            transition: border-color 0.3s ease, background-color 0.3s ease;
         }
        body.dark-mode .tool-group {
            border-color: var(--border-dark);
            background-color: #2d2d2d;
        }
         .tool-group-header {
            display: flex;
            justify-content: space-between; align-items: center;
            padding: 12px 15px; cursor: pointer; background-color: #f9f9f9;
            border-bottom: 1px solid var(--border-light);
            transition: background-color 0.3s ease, border-bottom-color 0.3s ease;
        }
        body.dark-mode .tool-group-header {
            background-color: #3a3a3a;
            border-bottom-color: var(--border-dark);
        }
        .tool-group-header:hover { background-color: #f0f0f0;
         }
        body.dark-mode .tool-group-header:hover { background-color: #4a4a4a;
         }
        .tool-group-header.active { border-bottom-color: transparent;
         }
         body.dark-mode .tool-group-header.active { border-bottom-color: transparent;
         }
        .tool-title { font-weight: 500; font-size: 1.1em; color: inherit;
         }
        .tool-group-toggle-icon { transition: transform 0.3s ease; width: 18px; height: 18px; fill: currentColor;
         }
        .tool-group-header.active .tool-group-toggle-icon { transform: rotate(180deg);
         }
        .tool-group-content { padding: 0 15px; max-height: 0; overflow: hidden;
            transition: max-height 0.4s ease-out, padding 0.4s ease-out; }
        .tool-group-content.active { max-height: 1000px;
            min-height: 180px ; /* Ensure enough space for content */
         padding: 15px;
            transition: max-height 0.5s ease-in, padding 0.5s ease-in;
         }


        .slider-container { margin-bottom: 15px;
         }
        .slider-label { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.95em;
         }
        .slider { width: 100%; height: 8px; -webkit-appearance: none; appearance: none; background: #ddd;
            border-radius: 5px; outline: none; cursor: pointer; transition: background-color 0.3s ease;
         }
        body.dark-mode .slider { background: #555;
         }
        .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
            background: var(--primary); cursor: pointer; }
        .slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%;
            background: var(--primary); cursor: pointer; border: none; }
        .btn-group { display: flex; gap: 10px;
            margin-top: 20px; flex-wrap: wrap; justify-content: flex-start; }


        .photo-comparison { display: flex; gap: 20px;
            margin-bottom: 30px; flex-wrap: wrap; justify-content: center; width: 100%; }
        .original-photo, .modified-photo { flex: 1;
            border: 1px solid var(--border-light); padding: 10px; border-radius: 5px; text-align: center; min-width: 200px; background-color: var(--light-bg);
            transition: background-color 0.3s ease, border-color 0.3s ease; }
        body.dark-mode .original-photo, body.dark-mode .modified-photo { border-color: var(--border-dark);
            background-color: #2d2d2d; }
        .original-photo img, .modified-photo img { /* Removed #noBgImg, #clothesCanvas, #borderPreviewImage here */ max-width: 100%;
            height: auto;
         max-height: 300px; display: block; margin: 10px auto 0; object-fit: contain;
         }
        .photo-title { font-weight: 500; margin-bottom: 5px;
         }




        #backgroundStep .editor-wrapper > .modified-photo { order: 2;
         } /* Ensure preview is second (right) */
         #backgroundStep .editor-wrapper > .nameplate-section { order: 1;
         } /* Ensure tools are first (left) */
         .nameplate-section { flex: 1;
            min-width: 250px; }
         .name-input { width: 100%; padding: 10px 15px; border-radius: 5px;
            border: 1px solid var(--border-light); margin-bottom: 15px; background-color: var(--light-bg); color: var(--text-dark); transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
         }
         body.dark-mode .name-input { background: #333; border-color: var(--border-dark); color: var(--text-light);
            /* Adjusted dark mode background */ }
         #nameplateSizeSlider { width: 100%;
            margin-top: 5px; margin-bottom: 5px; }
         #nameplateSizeValue { display: inline-block; margin-left: 10px;
            font-size: 0.9em; }




        .clothes-section { }
        .gender-options { display: flex;
            gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
        .gender-btn { padding: 10px 20px;
            border-radius: 5px; border: 1px solid var(--border-light); background: var(--light-bg); cursor: pointer; transition: all 0.3s; color: var(--text-dark);
         }
        body.dark-mode .gender-btn { background: #333; border-color: var(--border-dark); color: var(--text-light);
         }
        .gender-btn.active { background: var(--primary); color: white; border-color: var(--primary);
         }
         body.dark-mode .gender-btn.active { color: white;
         }
        .clothing-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; max-height: 150px;
            overflow-y: auto; padding: 5px; border: 1px solid var(--border-light); border-radius: 5px; margin-top: 15px;
         }
        body.dark-mode .clothing-options { border-color: var(--border-dark);
         }
        .clothing-option { border: 1px solid var(--border-light); border-radius: 5px; padding: 5px; text-align: center;
            cursor: pointer; transition: all 0.3s; background-color: var(--light-bg); }
        body.dark-mode .clothing-option { background: #333;
            border-color: var(--border-dark); }
        .clothing-option:hover { border-color: var(--primary); transform: translateY(-2px);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
         body.dark-mode .clothing-option:hover { box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
         }
        .clothing-option img { width: 100%; height: 80px; object-fit: contain; margin-bottom: 5px;
         }
        .apply-clothing-btn { padding: 4px 8px !important; font-size: 12px !important; margin-top: 5px !important;
         }
        #clothesCanvas { cursor: move; border: 2px dashed var(--primary);
         }


        .layout-section { padding: 0 30px 30px 30px;
         }
        .paper-size-options, .photo-count-options { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap;
            align-items: center; }
        .paper-size-options .option-title, .photo-count-options .option-title { margin-right: 10px; font-weight: 500;
         }
        .paper-size-options .btn, .photo-count-options .btn { background-color: #eee; color: #333;
            border: 1px solid #ccc; }
        body.dark-mode .paper-size-options .btn, body.dark-mode .photo-count-options .btn { background-color: #444;
            color: #eee; border-color: #666; }
        .paper-size-options .btn.active, .photo-count-options .btn.active { background: var(--primary);
            color: white; border-color: var(--primary); }
         body.dark-mode .paper-size-options .btn.active, body.dark-mode .photo-count-options .btn.active { color: white;
         }
        .photo-grid-container { overflow: auto; margin-top: 30px; border: 1px solid var(--border-light); padding: 15px;
            border-radius: 5px; background-color: #f9f9f9; display: flex; justify-content: center; align-items: flex-start; transition: background-color 0.3s ease, border-color 0.3s ease;
         }
        body.dark-mode .photo-grid-container { border-color: var(--border-dark); background-color: #2a2a2a;
         }
        .photo-grid { display: grid; margin-bottom: 0; justify-content: center; background-color: white; padding: var(--padding-size);
            box-sizing: border-box; border: 1px solid #ccc; transition: background-color 0.3s ease, border-color 0.3s ease;
         }
        body.dark-mode .photo-grid { background-color: #333; border-color: #555;
         }
        .grid-photo { background-size: cover; background-repeat: no-repeat; background-position: center; border: 1px solid black;
            box-sizing: border-box; position: relative; overflow: hidden; }
        .container-4x6-portrait { width: 101.6mm; height: 152.4mm;
            grid-template-columns: repeat(3, 30mm); grid-template-rows: repeat(3, 40mm); gap: calc((101.6mm - 3 * 30mm) / 2);
            padding: calc((152.4mm - 3 * 40mm - 2 * ((101.6mm - 3 * 30mm) / 2)) / 2) calc((101.6mm - 3 * 30mm) / 2);
         }
        .photo-4x6-portrait { width: 30mm; height: 40mm;
         }
        .container-4x6-landscape { width: 152.4mm; height: 101.6mm; grid-template-columns: repeat(4, var(--photo-width)); grid-template-rows: repeat(2, var(--photo-height));
            gap: var(--gap-size); padding: calc((101.6mm - 2 * var(--photo-height) - var(--gap-size)) / 2) calc((152.4mm - 4 * var(--photo-width) - 3 * var(--gap-size)) / 2);
         }
        .photo-4x6-landscape { width: var(--photo-width); height: var(--photo-height);
         }
        .container-a4 { width: var(--page-width); grid-template-columns: repeat(6, var(--photo-width)); gap: var(--gap-size); padding: var(--padding-size);
         }
        .photo-a4 { width: var(--photo-width); height: var(--photo-height); border: 1px solid #999;
         }
        .photo-index { position: absolute; top: 2px; left: 2px; background: rgba(0,0,0,0.5); color: white;
            padding: 2px 5px; font-size: 10px; border-radius: 3px; }


        .step-btn-group {
            display: flex;
            justify-content: space-between; /* Default to space-between */
            padding: 0 30px 30px 30px;
            margin-top: 20px;
        }
        /* Specific style for layout step button group */
        #layoutStep .step-btn-group {
            justify-content: flex-start; /* Align back button to the left */
        }
        .step-btn-group .btn-primary,
        .step-btn-group .btn-secondary {
             min-width: 100px;
         }


        .btn-container {
            margin: 15px auto;
            text-align: center;
            max-width: 600px; /* Increased width for 3 buttons */
            padding: 12px;
            background: var(--light-bg);
            box-shadow: 0 0 5px rgba(0,0,0,0.1);
            border-radius: 8px;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
            display: flex; /* Use flexbox for button layout */
            justify-content: center; /* Center buttons */
            gap: 10px; /* Add space between buttons */
            flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
        }
        body.dark-mode .btn-container {
            background: #2d2d2d;
            box-shadow: 0 0 5px rgba(255,255,255,0.1);
        }


        footer {
            background-color: var(--footer-bg);
            color: var(--footer-text);
            padding: 40px 20px 20px 20px;
            margin-top: 50px;
        }
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto 30px auto;
         }
        .footer-column h4 {
            font-size: 16px;
            font-weight: 600;
            color: #ffffff;
            margin-bottom: 15px;
         }
        .footer-column p,
        .footer-column ul {
            font-size: 14px;
            line-height: 1.6;
        }
        .footer-column ul {
            list-style: none;
            padding: 0;
        }
        .footer-column ul li {
            margin-bottom: 8px;
         }
        .footer-column ul li a {
            color: var(--footer-text);
            text-decoration: none;
            transition: color 0.3s ease;
        }
        .footer-column ul li a:hover {
            color: #ffffff;
         }
        .footer-copyright {
            text-align: center;
            font-size: 13px;
            border-top: 1px solid #333;
            padding-top: 20px;
            max-width: 1200px;
            margin: 0 auto;
         }


        .hidden { display: none !important;
         }
        .error { color: red; margin-top: 10px; text-align: center; font-weight: bold;
         }
        #bgCanvas { display: none;
         }
        .overlay {
             display: none;
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             background-color: rgba(0, 0, 0, 0.5);
             z-index: 99;
             transition: opacity 0.3s ease-in-out;
        }
        .overlay.active {
             display: block;
             opacity: 1;
        }




        /* Responsive Adjustments */
        @media (max-width: 992px) {
             header { flex-wrap: nowrap; /* Prevent wrapping for logo/nav/button line */ }
             .mobile-menu-button { display: block; } /* Show hamburger */
             /* Keep header-right elements */
             .header-right { /* No specific change needed here */ }


             nav#mainNav {
                 position: fixed;
                 top: 0;
                 right: -280px; /* Start off-screen */
                 width: 250px; /* Menu width */
                 height: 100vh;
                 background-color: var(--light-bg);
                 border-left: 1px solid var(--border-light);
                 padding-top: 80px; /* Space for header */
                 flex-direction: column;
                 z-index: 101; /* Above overlay */
                 transform: translateX(0); /* Reset potential transform */
                 transition: right 0.3s ease-in-out; /* Animate 'right' */
             }
              body.dark-mode nav#mainNav {
                  background-color: var(--dark-bg);
                  border-left: 1px solid var(--border-dark);
              }
              nav#mainNav.nav-active {
                  right: 0; /* Slide in */
              }
             nav#mainNav ul {
                 flex-direction: column;
                 gap: 0;
                 width: 100%;
             }
             nav#mainNav ul li {
                 width: 100%;
             }
             nav#mainNav ul li a {
                 display: block;
                 padding: 15px 25px;
                 border-bottom: 1px solid var(--border-light);
                 text-align: right;
             }
             body.dark-mode nav#mainNav ul li a {
                 border-bottom: 1px solid var(--border-dark);
             }
             nav#mainNav ul li:last-child a {
                 border-bottom: none;
             }




             .main-title { font-size: 2rem;
             }
             #uploadStep .step-content-wrapper { flex-direction: column;
             }
             .image-preview-container { min-height: 300px;
             }
             .editor-wrapper { flex-direction: column; gap: 20px;
             }
             .editor-wrapper > .editor-tools { order: 1; /* Default order, adjusted below for specific steps */ }
             .editor-wrapper > .image-preview-container-steps { order: 2; /* Default order */ min-width: 100%; }
             #clothesStep .editor-wrapper > .image-preview-container-steps { order: 2; } /* Preview Second */
             #clothesStep .editor-wrapper > .editor-tools { order: 1; } /* Tools First */
             #backgroundStep .editor-wrapper > .modified-photo { order: 2; /* Preview Second */ min-width: 100%; }
             #backgroundStep .editor-wrapper > .nameplate-section { order: 1; /* Tools First */ min-width: 100%; }
             #editStep .editor-wrapper > .editor-tools { order: 1; /* Edit Tools First */ }
             #editStep .editor-wrapper > .image-preview-container-steps { order: 2; /* Edit Preview Second */ }
             #borderStep .editor-wrapper > .editor-tools { order: 1; } /* Border Tools First */
             #borderStep .editor-wrapper > .image-preview-container-steps { order: 2; } /* Border Preview Second */

             .photo-comparison { flex-direction: column;
                 align-items: center; }
             .original-photo, .modified-photo { width: 100%;
                 max-width: 300px; }
        }


        @media (max-width: 768px) {
            .main-container { padding: 0 15px;
             }
             header { padding: 10px 15px;
             }
             .logo { font-size: 20px;
             }
             .header-right { gap: 10px;
             }
             .header-btn { padding: 6px 12px; font-size: 13px;
             }
             .main-title { font-size: 1.8rem;
                 margin: 30px 0 20px 0; }
             .step-container { padding: 0;
             }
             #uploadStep .step-content-wrapper,
             .image-editor-container,
             .layout-section,
             .step-btn-group { padding-left: 20px;
                 padding-right: 20px; }
             .step-header { padding-left: 20px;
                 padding-right: 20px; }
             #uploadStep .step-content-wrapper { padding-top: 20px;
                 padding-bottom: 20px; }
             .image-editor-container { padding-top: 20px;
                 padding-bottom: 20px; }
             .layout-section { padding-top: 20px;
                 padding-bottom: 20px; }
             .step-btn-group { padding-bottom: 20px;
             }


            .size-options-wrapper { padding-left: 20px; padding-right: 20px; padding-bottom: 20px;
             }
             .size-options { flex-direction: column; align-items: stretch;
                 gap: 15px;}
             .select-box { min-width: unset; width: 100%;
             }


             .clothing-options { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
             }
             #imagePreview, #processedImage, #clothesCanvas, #uploadImagePreview, #noBgImg, #borderPreviewImage { max-height: 350px;
             }
             .footer-content { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
                 gap: 20px; }


             /* Mobile grid adjustments */
             .container-4x6-portrait, .container-4x6-landscape, .container-a4 { width: 95%;
                 height: auto; padding: 5mm; margin: 10px auto; }
             .container-4x6-portrait { grid-template-columns: repeat(3, 1fr);
                 gap: 1mm; }
             .photo-4x6-portrait { width: 100%;
                 aspect-ratio: 30 / 40; height: auto; }
             .container-4x6-landscape { grid-template-columns: repeat(4, 1fr);
                 gap: 1mm; }
             .photo-4x6-landscape { width: 100%;
                 aspect-ratio: 35 / 47; height: auto; }
             .container-a4 { grid-template-columns: repeat(3, 1fr);
                 gap: 1mm; }
             .photo-a4 { width: 100%;
                 aspect-ratio: 35 / 47; height: auto; }
             .btn-container { padding: 8px;
             }
        }


        @media (max-width: 480px) {
            .main-container { padding: 0 10px;
             }
             header { padding: 10px;
             }
             .header-right { flex-wrap: wrap; justify-content: center;
                 gap: 5px; }
             /* Adjust sizes if needed */
             .language-select, .theme-toggle, .btn-login, .btn-signup { }
             .main-title { font-size: 1.5rem;
             }
             #uploadStep .step-content-wrapper,
             .image-editor-container,
             .layout-section,
             .step-btn-group,
             .step-header,
             .size-options-wrapper { padding-left: 15px;
                 padding-right: 15px; }


             .upload-container, .image-preview-container { padding: 25px;
                 min-height: 250px; }
             .image-preview-container { min-height: 300px;
             }
             .btn { padding: 8px 15px; font-size: 14px;
             }
             .clothing-options { grid-template-columns: repeat(2, 1fr); gap: 10px;
                 max-height: 300px; }
             .clothing-option img { height: 80px;
             }
             #imagePreview, #processedImage, #clothesCanvas, #uploadImagePreview, #noBgImg, #borderPreviewImage { max-height: 300px;
             }
             .footer-content { grid-template-columns: 1fr; text-align: center;
             }
              .footer-column h4 { margin-top: 15px;
             }
             .footer-column:first-child h4 { margin-top: 0;
             }
             .footer-copyright { font-size: 12px;
             }


             /* Further Mobile grid adjustments */
             .container-a4 { grid-template-columns: repeat(2, 1fr);
             }
             .container-4x6-portrait { grid-template-columns: repeat(2, 1fr);
             }
             .container-4x6-landscape { grid-template-columns: repeat(2, 1fr);
             }
             .btn-container { flex-direction: column; /* Stack buttons vertically */ }
        }


        /* Print styles */
        @media print {
            @page { size: auto;
                 margin: 0; }
            body { background-color: white !important;
                 color: black !important; }
            body * { visibility: hidden;
                 box-shadow: none !important; border: none !important; }
             .photo-grid-container, .photo-grid-container * { visibility: visible;
                 border: none !important; }
             .photo-grid { position: absolute;
                 top: 0; left: 0; margin: 0; background: none !important; visibility: visible; padding: 0 !important; border: none !important; display: grid !important;
             }
             .container-4x6-portrait { width: 101.6mm !important;
                 height: 152.4mm !important; padding: calc((152.4mm - 3 * 40mm - 2 * ((101.6mm - 3 * 30mm) / 2)) / 2) calc((101.6mm - 3 * 30mm) / 2) !important;
                 gap: calc((101.6mm - 3 * 30mm) / 2) !important; grid-template-columns: repeat(3, 30mm) !important; grid-template-rows: repeat(3, 40mm) !important;
             }
             .container-4x6-landscape { width: 152.4mm !important;
                 height: 101.6mm !important; padding: calc((101.6mm - 2 * var(--photo-height) - var(--gap-size)) / 2) calc((152.4mm - 4 * var(--photo-width) - 3 * var(--gap-size)) / 2) !important;
                 gap: var(--gap-size) !important; grid-template-columns: repeat(4, var(--photo-width)) !important; grid-template-rows: repeat(2, var(--photo-height)) !important;
             }
            .container-a4 { width: var(--page-width) !important; height: var(--page-height) !important;
                 padding: var(--padding-size) !important; gap: var(--gap-size) !important; grid-template-columns: repeat(6, var(--photo-width)) !important; grid-auto-rows: var(--photo-height) !important;
             }
             .grid-photo { visibility: visible !important;
                 border: 1px solid black !important; background-color: white !important; box-sizing: border-box !important; overflow: hidden !important; background-size: cover !important; background-repeat: no-repeat !important;
                 background-position: center !important; }
             .photo-4x6-portrait, .photo-4x6-landscape, .photo-a4 { visibility: visible !important;
             }
             .container-4x6-portrait .photo-4x6-portrait { width: 30mm !important;
                 height: 40mm !important; }
             .container-4x6-landscape .photo-4x6-landscape { width: var(--photo-width) !important;
                 height: var(--photo-height) !important; }
              .container-a4 .photo-a4 { width: var(--photo-width) !important;
                 height: var(--photo-height) !important; }
            .photo-index { display: none !important;
             }
            header, .step-container, .btn-container, .paper-size-options, .photo-count-options, .download-section, .step-btn-group, footer, .main-title, .size-options-wrapper, .mobile-menu-button, .overlay, .rotation-slider-wrapper { display: none !important;
                 visibility: hidden !important; } /* Added .rotation-slider-wrapper to hide in print */
        }


        /* Hindi font override */
        .hindi { font-family: 'Noto Sans Devanagari', 'Poppins', sans-serif;
         }