/* 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);
 }
/* Active link style */
nav#mainNav ul li.active a {
    color: var(--primary);
    font-weight: 600;
}

/* 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;
}

/* User Dropdown Styling */
.user-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-toggle {
    background-color: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-dark);
    padding: 8px 15px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

body.dark-mode .dropdown-toggle {
    color: var(--text-light);
    border-color: var(--border-dark);
}

.dropdown-toggle:hover {
    background-color: #f0f0f0;
}

body.dark-mode .dropdown-toggle:hover {
    background-color: #333;
}

.dropdown-toggle .arrow {
    font-size: 10px;
    transition: transform 0.3s ease;
}

.dropdown-menu {
    display: none; /* Hidden by default */
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 5px;
    background-color: var(--light-bg);
    border: 1px solid var(--border-light);
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    min-width: 200px;
    z-index: 110; /* Above other header elements */
    overflow: hidden;
}

body.dark-mode .dropdown-menu {
    background-color: var(--dark-bg);
    border-color: var(--border-dark);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.dropdown-menu.show {
    display: block; /* Show the menu */
}

.dropdown-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dropdown-menu ul li a {
    display: block;
    padding: 12px 20px;
    color: var(--text-dark);
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

body.dark-mode .dropdown-menu ul li a {
    color: var(--text-light);
}

.dropdown-menu ul li a:hover {
    background-color: #f5f5f5;
    color: var(--primary);
}

body.dark-mode .dropdown-menu ul li a:hover {
    background-color: #333;
}


/* 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 */ }
}

/* --- Pricing Page Styles --- */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
    align-items: center;
}

.pricing-card {
    background: var(--light-bg);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

body.dark-mode .pricing-card {
    background: #2d2d2d;
    border-color: var(--border-dark);
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 25px rgba(0,0,0,0.1);
}

body.dark-mode .pricing-card:hover {
    box-shadow: 0 15px 25px rgba(0,0,0,0.3);
}

.pricing-card.featured {
    border: 2px solid var(--primary);
    transform: scale(1.05);
}

.pricing-card.featured:hover {
    transform: scale(1.05) translateY(-10px);
}

.featured-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.pricing-card h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
}

.pricing-card .price {
    font-size: 42px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 25px;
}

.pricing-card ul {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    text-align: left;
}

.pricing-card ul li {
    margin-bottom: 12px;
    font-size: 16px;
    color: #555;
}

body.dark-mode .pricing-card ul li {
    color: var(--text-light);
}

.pricing-card .btn-full {
    width: 100%;
    padding: 12px;
}

/* --- Point History Table Styles --- */
.history-container {
    overflow-x: auto;
    background: var(--light-bg);
    border-radius: 8px;
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

body.dark-mode .history-container {
    background: #2d2d2d;
    border-color: var(--border-dark);
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.history-table th, .history-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
}

body.dark-mode .history-table th, body.dark-mode .history-table td {
    border-bottom-color: var(--border-dark);
}

.history-table th {
    font-weight: 600;
    font-size: 14px;
    background-color: #f9f9f9;
}

body.dark-mode .history-table th {
    background-color: #3a3a3a;
}

.history-table tbody tr:last-child td {
    border-bottom: none;
}

.history-table tbody tr:hover {
    background-color: #f5f5f5;
}

body.dark-mode .history-table tbody tr:hover {
    background-color: #333;
}

.points-positive {
    color: #28a745;
    font-weight: bold;
}

.points-negative {
    color: #dc3545;
    font-weight: bold;
}

.status-successful, .status-completed {
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
}

.status-successful {
    background-color: #28a745;
}

.status-completed {
    background-color: var(--button-secondary-bg);
}

/* Responsive History Table */
@media screen and (max-width: 768px) {
    .history-table thead {
        display: none;
    }
    .history-table, .history-table tbody, .history-table tr, .history-table td {
        display: block;
        width: 100%;
    }
    .history-table tr {
        margin-bottom: 15px;
    }
    .history-table td {
        text-align: right;
        padding-left: 50%;
        position: relative;
        border-bottom: none;
    }
    .history-table td:last-child {
       border-bottom: 1px solid var(--border-light);
    }
    body.dark-mode .history-table td:last-child {
       border-bottom: 1px solid var(--border-dark);
    }
    .history-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 15px;
        width: calc(50% - 30px);
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
    }
}
/* --- Change Password & Form Styles --- */
.content-box {
    background: var(--light-bg);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin: 30px auto;
    max-width: 1140px;
}

body.dark-mode .content-box {
    background: #2d2d2d;
    border-color: var(--border-dark);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
}

.form-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-light);
    border-radius: 5px;
    background-color: var(--light-bg);
    color: var(--text-dark);
    font-size: 16px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

body.dark-mode .form-input {
    background-color: #3a3a3a;
    border-color: var(--border-dark);
    color: var(--text-light);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
}

.btn-full {
    width: 100%;
    padding: 12px;
    margin-top: 10px;
}
/* --- Notification Message Styles --- */
.notification {
    padding: 15px 20px;
    margin: 20px auto;
    border-radius: 8px;
    font-weight: 500;
    font-size: 16px;
    max-width: 1100px;
    text-align: center;
    border-left: 5px solid #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    position: relative;
    z-index: 1001; /* Should be on top of other content */
}

.notification.success {
    background-color: #d4edda;
    color: #155724;
    border-left-color: #28a745;
}

.notification.error {
    background-color: #f8d7da;
    color: #721c24;
    border-left-color: #dc3545;
}

.notification.info {
    background-color: #cce5ff;
    color: #004085;
    border-left-color: #007bff;
}
/* === START: Custom Modal Styles === */
.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.custom-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.custom-modal {
    background: var(--light-bg);
    padding: 0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    width: 90%;
    max-width: 450px;
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.custom-modal-overlay.show .custom-modal {
    transform: scale(1);
}

body.dark-mode .custom-modal {
    background: #2d2d2d;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.custom-modal-header {
    background-color: var(--primary);
    color: white;
    padding: 15px 20px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.custom-modal-header h3 {
    margin: 0;
    font-size: 20px;
}

.custom-modal-body {
    padding: 25px 30px;
    font-size: 16px;
    line-height: 1.6;
}

.custom-modal-body p {
    margin-bottom: 10px;
}

.custom-modal-body p:last-child {
    margin-bottom: 0;
}

.custom-modal-footer {
    padding: 20px;
    background-color: #f7f7f7;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

body.dark-mode .custom-modal-footer {
    background-color: #3a3a3a;
}
/* === END: Custom Modal Styles === */

/* --- New Informational Sections CSS --- */
.page-info-sections {
    padding: 40px 0;
}

.info-section {
    margin: 60px 0;
}

.section-title {
    font-size: 2.2rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--text-dark);
}

body.dark-mode .section-title {
    color: var(--text-light);
}

.section-subtitle {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

body.dark-mode .section-subtitle {
    color: #ccc;
}

.text-center {
    text-align: center;
}

/* How it Works Grid */
.how-it-works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.how-it-works-card {
    background: var(--light-bg);
    padding: 30px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
}

body.dark-mode .how-it-works-card {
    background: #2d2d2d;
    border-color: var(--border-dark);
}

.how-it-works-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

body.dark-mode .how-it-works-card:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}


.how-it-works-card .card-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    line-height: 1;
}

.how-it-works-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.how-it-works-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
}

body.dark-mode .how-it-works-card p {
    color: #bbb;
}

/* Features Grid */
.features-grid {
    display: grid;
    gap: 25px;
    /* 2 columns for desktop/tablet to match the screenshot */
    grid-template-columns: repeat(2, 1fr);
}

/* Responsive adjustments for Features Grid */
@media (max-width: 600px) {
    .features-grid {
        /* 1 column for mobile phones */
        grid-template-columns: 1fr;
    }
}


.feature-card {
    background-color: var(--light-bg);
    border: 1px solid var(--border-light);
    padding: 25px;
    border-radius: 8px;
    border-left: 4px solid var(--primary);
    transition: all 0.3s ease;
}

body.dark-mode .feature-card {
    background-color: #2d2d2d;
    border-color: var(--border-dark);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.07);
}
body.dark-mode .feature-card:hover {
     box-shadow: 0 8px 15px rgba(0,0,0,0.25);
}


.feature-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.feature-card p {
    line-height: 1.6;
    color: #555;
}
body.dark-mode .feature-card p {
    color: #bbb;
}

/* Content Box Style for Text Sections */
.content-box-style {
    background: var(--light-bg);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 30px 40px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
body.dark-mode .content-box-style {
    background: #2d2d2d;
    border-color: var(--border-dark);
}
.content-box-style .section-title {
    text-align: left;
    font-size: 1.8rem;
}
.content-box-style p {
    margin-bottom: 20px;
    line-height: 1.7;
}
.subsection-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-top: 25px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--primary);
    display: inline-block;
}


/* FAQ Section */
.faq-container {
    max-width: 800px;
    margin: 30px auto 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--light-bg);
    transition: background-color 0.3s ease;
}
body.dark-mode .faq-item {
    border-color: var(--border-dark);
    background: #2d2d2d;
}

.faq-item summary {
    font-size: 1.1rem;
    font-weight: 500;
    padding: 20px;
    cursor: pointer;
    list-style: none; /* Remove default marker */
    position: relative;
    transition: color 0.3s ease;
}

.faq-item summary::-webkit-details-marker {
    display: none; /* Hide Safari marker */
}

.faq-item summary:after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--primary);
    transition: transform 0.3s ease;
}

.faq-item[open] > summary {
    color: var(--primary);
}

.faq-item[open] > summary:after {
    transform: translateY(-50%) rotate(45deg);
}

.faq-content {
    padding: 0 20px 20px 20px;
    line-height: 1.6;
}
.faq-content p {
    margin: 0;
}

/* === NEW TIPS SECTION CSS START === */
.tips-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.tip-card {
    text-align: center;
}

.tip-icon {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 20px;
}

.tip-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.tip-card p {
    line-height: 1.6;
    color: #555;
}

body.dark-mode .tip-card p {
    color: #bbb;
}
/* === NEW TIPS SECTION CSS END === */


/* Responsive adjustments for new sections */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.8rem;
    }
    .content-box-style {
        padding: 20px;
    }
    .tips-grid {
        grid-template-columns: 1fr;
    }
}


/* 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, .page-info-sections { display: none !important;
         visibility: hidden !important; } /* Added .rotation-slider-wrapper and .page-info-sections to hide in print */
}