/* --- config.style.css --- */
/* Boat Configurator Styles (with 2-column options, color circles, glassmorphism) */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
    font-family: 'MFred';
    src: url('../fonts/MFred.woff2') format('woff2'), /* Modern Browsers */
         url('../fonts/MFred.woff') format('woff'); /* Older Browsers */
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Improve perceived performance */
}

:root {
    /* --- Colors --- */
    --primary-color: #9e8f65;       /* Muted Brown/Khaki */
    --primary-color-rgb: 158, 143, 101; /* RGB for rgba() - Updated */
    --secondary-color: #6c757d;     /* Cool Gray */
    --accent-color: #ee9b00;       /* Orange/Gold Accent */
    --bg-color: #f8f9fa;          /* Very Light Gray Background */
    --menu-bg: #f1f3f5;           /* Slightly Off-White Menu */
    --text-color: #212529;        /* Dark Gray Text */
    --light-text-color: #ffffff;    /* Light Text (on dark backgrounds) */
    --menu-bg-rgb: 241, 243, 245; /* RGB for --menu-bg */
    --border-color: #dee2e6;      /* Light Border */
    --hover-bg: #e9ecef;          /* Light Hover Background */
    --selected-bg: var(--primary-color); /* Background for selected items */
    --selected-text: var(--light-text-color); /* Text color for selected items */
    --error-color: #dc3545;       /* Red for errors */

    /* --- Component Specific Colors --- */
    --light-text-color-rgb: 255, 255, 255; /* RGB for rgba() */
    --text-color-rgb: 33, 37, 41; /* RGB for rgba() */
    --overlay-bg: rgba(var(--light-text-color-rgb), 0.85);
    --spinner-track-color: rgba(var(--text-color-rgb), 0.1);
    --top-controls-bg: #495057;
    --top-controls-border: rgba(var(--light-text-color-rgb), 0.3);
    --top-controls-hover-bg: rgba(var(--light-text-color-rgb), 0.08);
    --top-controls-hover-border: rgba(var(--light-text-color-rgb), 0.5);
    --top-controls-active-bg: rgba(var(--light-text-color-rgb), 0.12);
    --glass-border-color: rgba(var(--light-text-color-rgb), 0.3);
    --glass-bg-color: rgba(var(--light-text-color-rgb), 0.15);
    --glass-shadow-color: rgba(var(--text-color-rgb), 0.1);
    --glass-hover-bg-color: rgba(var(--light-text-color-rgb), 0.25);
    --glass-hover-border-color: rgba(var(--light-text-color-rgb), 0.5);
    --glass-hover-shadow-color: rgba(var(--text-color-rgb), 0.15);
    --glass-selected-shadow-color: rgba(var(--text-color-rgb), 0.2);
    --glass-selected-circle-border: rgba(var(--light-text-color-rgb), 0.8);
    --color-circle-border: rgba(var(--text-color-rgb), 0.1);
    --color-circle-shadow: rgba(var(--text-color-rgb), 0.2);
    --legend-footer-bg: rgba(var(--light-text-color-rgb), 0.85);
    --legend-table-cell-bg: var(--light-text-color); /* #fff */

    /* --- Mobile Specific --- */
    --top-controls-mobile-bg: #333333;
    --top-controls-mobile-border: rgba(var(--light-text-color-rgb), 0.4);

    /* --- Print Specific --- */
    --print-bg: #ffffff;
    --print-text: #000000;
    --print-border-light: #cccccc;
    --print-border-dark: #aaaaaa;
    --print-header-bg: #eeeeee;

    /* --- Typography --- */
    --font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; /* Added Montserrat */

    /* --- Layout & Spacing --- */

    /* --- Borders & Shadows --- */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);

    /* --- Transitions --- */
    --transition-speed: 0.1s;

    /* --- Footer --- */
    --footer-height: 160px; /* Define fixed footer height */
}

/* Global styles */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--font-family);
    display: flex;
    height: 100vh;
    margin: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow: hidden; /* Keep hidden on body, allow scrolling on menu/preview if needed */
}

/* --- Initial Content Visibility & Fade-in --- */
/* Initially hide main content elements */
#menu, #preview, #legendFooter, #boatNameDisplay, #top-right-controls {
    opacity: 0;
    transition: opacity 0.5s ease-in-out 0.3s; /* Fade-in transition with a delay */
}
/* Make content visible when body has the class */
body.main-content-visible #menu,
body.main-content-visible #preview,
body.main-content-visible #legendFooter,
body.main-content-visible #boatNameDisplay,
body.main-content-visible #top-right-controls {
    opacity: 1;
}
/* --- End Initial Content Visibility --- */

/* Splash Screen (Initial Load) */
#splashScreen {
    position: fixed;
    inset: 0; /* Equivalent to top: 0; right: 0; bottom: 0; left: 0; */
    background-color: var(--menu-bg); /* Use menu background or a dedicated splash color */
    display: flex;
    flex-direction: column; /* Stack logo and message vertically */
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Higher than loading overlay */
    opacity: 1;
    visibility: visible;
    /* Updated transition for smoother fade-out */
    transition: opacity 1s ease-in-out, visibility 0.5s 0.5s;
}
#splashScreen.hidden {
    opacity: 0;
    visibility: hidden;
    /* Transition properties are now defined on the base element, no need to repeat here */
}
.splash-logo {
    
    margin: 3rem;
    max-width: 60%; /* Adjust size as needed */
    max-height: 400px; /* Adjust size as needed */
    
}
.splash-prompt { /* Style for the new prompt text */
    font-size: 1.1em;
    color: var(--text-color); /* Use standard text color */
    margin-bottom: 15px;
    text-align: center;
    max-width: 80%; /* Prevent it getting too wide */
}
/* Style for the select dropdown within the splash screen */
#splashScreen #xmlFileSelect {
    padding: 10px 15px;
    font-size: 1em;
    border-radius: var(--border-radius-md); /* Slightly more rounded */
    border: 1px solid var(--primary-color); /* Use primary color for border */
    background-color: var(--light-text-color); /* White background */
    color: var(--text-color);
    min-width: 250px; /* Give it a decent width */
    max-width: 70%;
    cursor: pointer;
    appearance: none; /* Remove default system appearance */
    /* Custom arrow using primary color */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%239e8f65%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px center; /* Adjust position */
    background-size: 12px auto; /* Adjust size */
    padding-right: 40px; /* More space for custom arrow */
    transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease; /* Add transition */
    box-shadow: var(--shadow-sm);
}
#splashScreen #xmlFileSelect:hover {
    border-color: var(--accent-color); /* Use accent color on hover */
    box-shadow: var(--shadow-md);
}
#splashScreen #xmlFileSelect:focus {
     outline: none; /* Remove default focus outline */
     border-color: var(--accent-color);
     box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.3); /* Custom focus ring */
}
#splashScreen #xmlFileSelect option {
    /* Options styling remains the same */
    background-color: var(--light-text-color);
    color: var(--text-color);
    padding: 8px 15px; /* Add some padding to options */
}

/* Splash Screen Background Container */
#splashBackgroundContainer {
    position: absolute;
    inset: 0;
    overflow: hidden; /* Ensure images don't overflow */
    z-index: -1; /* Place behind foreground content */
}

/* Splash Screen Background Images */
.splash-bg-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area, might crop */
    opacity: 0; /* Hidden by default */
    transition: opacity 1s ease-in-out;
}

.splash-bg-image.active {
    opacity: 0.8; /* Active image is semi-transparent */
}

/* Splash Screen Foreground Content Wrapper */
.splash-content {
    position: relative; /* Ensure it stays above the background */
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Add padding or background if needed to make text readable over images */
    background-color: rgba(var(--menu-bg-rgb, 241, 243, 245), 0.5); /* Slight background tint for readability */
    padding: 30px;
    border-radius: var(--border-radius-md);
    max-width: 90%;
}

/* Loading Overlay (for subsequent actions) */
#loadingOverlay {
    position: fixed; inset: 0;
    background-color: var(--overlay-bg);
    display: flex; justify-content: center; align-items: center;
    z-index: 1000; font-size: 1.2em; color: var(--primary-color);
    visibility: hidden; opacity: 0;
    transition: visibility 0s var(--transition-speed), opacity var(--transition-speed) ease-in-out;
}
#loadingOverlay.active { visibility: visible; opacity: 1; transition-delay: 0s; }
.spinner { border: 4px solid var(--spinner-track-color); width: 36px; height: 36px; border-radius: 50%; border-left-color: var(--primary-color); animation: spin 1s ease infinite; margin-right: 15px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Menu Sidebar */
#menu {
    width: 25%;
    background-color: var(--menu-bg);
    padding: 15px;
    overflow-y: visible; /* Allow menu scrolling */
    border-right: 0px solid var(--border-color);
    box-shadow: var(--shadow-md);
    display: flex; flex-direction: column;
    height: calc(100vh - var(--footer-height)); /* Adjust height for fixed footer */
    flex-shrink: 0; /* Prevent menu from shrinking */
    position: relative; /* Needed for absolute positioning of toggle button in collapsed state */
    overflow-y: auto; /* Ensure menu scrolls if content overflows */
    transition: width var(--transition-speed) ease-in-out,
                min-width var(--transition-speed) ease-in-out,
                padding var(--transition-speed) ease-in-out,
                opacity 0.3s ease-in-out, /* Added for fullscreen fade */
                visibility 0s linear 0.3s; /* Delay visibility change */
}

/* --- Collapsed Menu State --- */
#menu.menu-collapsed {
    width: 0px; /* Width when collapsed */
    min-width: 0px;
    padding: 15px 0; /* Minimal vertical padding, no horizontal */
    overflow: hidden; /* Hide overflowing content */
}

#menu.menu-collapsed .logo-container,
#menu.menu-collapsed #xmlFileSelect,
#menu.menu-collapsed #saveButton,
#menu.menu-collapsed #configurator {
    display: none; /* Hide elements when collapsed */
}

#menu.menu-collapsed #menuToggleButton {
    margin: 0 auto; /* Center button horizontally */
    display: block; /* Ensure it takes block space for centering */
}

/* Adjust preview margin when menu is collapsed */
body:has(#menu.menu-collapsed) #preview {
    margin-left: 0px; /* Match collapsed menu width */
    width: calc(100vw - 60px); /* Adjust width */
    transition: margin-left var(--transition-speed) ease-in-out, width var(--transition-speed) ease-in-out;
}


/* Logo Container (replaces h1) */
.logo-container {
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}
#configuratorLogo {
    max-width: 80%; height: auto; max-height: 80px; display: inline-block;
}

/* Controls below logo/header */
.menu-controls {
     margin-bottom: 20px;
     border-bottom: 1px solid var(--border-color);
     padding-bottom: 20px;
     display: flex; /* Use flex for alignment */
     align-items: center; /* Align items vertically */
     gap: 10px; 
}

/* --- New Top Right Controls --- */
#top-right-controls {
    position: fixed; /* Changed to fixed for viewport positioning */
    top: 20px; /* Position from top of viewport */
    right: 20px; /* Position from right of viewport */
    left: auto; /* Ensure left is not interfering */
    display: flex;
    align-items: center; /* Vertically center items */
    gap: 8px; /* Space between controls */
    background-color: var(--top-controls-bg);
    padding: 8px 12px;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    z-index: 5000; /* Increased z-index to ensure it's above other elements */
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s; /* Added for fullscreen fade */
}

#top-right-controls select,
#top-right-controls button {
    background-color: transparent; /* Transparent background */
    color: var(--light-text-color); /* White text */
    border: 1px solid var(--top-controls-border);
    padding: 6px 10px;
    border-radius: var(--border-radius-sm);
    font-size: 0.85em; /* Smaller font */
    cursor: pointer;
    transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
    display: inline-flex; /* Use inline-flex for better alignment within the flex container */
    align-items: center; /* Re-affirm vertical center */
    gap: 5px;
    white-space: nowrap; /* Prevent text wrapping */
    line-height: 1.2; /* Adjust line height for better vertical centering */
}

#top-right-controls select {
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 8px auto;
    padding-right: 25px; /* Space for arrow */
    min-width: 150px; /* Give select some width */
}

#top-right-controls select option {
    background-color: var(--menu-bg); /* Use menu background for dropdown */
    color: var(--text-color); /* Use standard text color */
}

#top-right-controls button:hover,
#top-right-controls select:hover {
    background-color: var(--top-controls-hover-bg);
    border-color: var(--top-controls-hover-border);
}

#top-right-controls button:active {
    background-color: var(--top-controls-active-bg);
}

#top-right-controls button i {
    font-size: 0.9em; /* Adjust icon size if needed */
    display: inline-block; /* Ensure icon is displayed */
}

/* Ensure button text is visible by default (will be hidden on mobile) */
#top-right-controls button span {
    display: inline;
}

/* --- End New Top Right Controls --- */

/* Menu Toggle Button is now styled within #top-right-controls below */

/* Styles for #xmlFileSelect and #saveButton are now handled within #top-right-controls */

/* Add specific styles for the toggle button within the top-right controls */
#top-right-controls #menuToggleButton {
    /* Inherits most styles from #top-right-controls button */
    padding: 6px; /* Adjust padding for icon-only */
    width: auto; /* Let padding define width */
    height: auto; /* Let padding define height */
    line-height: 1; /* Ensure icon is centered */
    font-size: 1em; /* Match icon size closer to text */
    /* Remove properties not needed for icon button */
    gap: 0;
    white-space: normal;
}

/* Configuration Options Area */
#configurator {
    flex-grow: 1; /* Allow configurator to take remaining space in menu */
    overflow-y: auto; /* Allow scrolling within options if they overflow */
}
#configurator:empty::before,
#configurator > p { /* Placeholder text */
    content: "Select a boat to configure above to begin.";
    display: block; text-align: center; color: var(--secondary-color);
    margin-top: 30px; font-style: italic;
}
#configurator > p.error { color: var(--error-color); font-weight: bold; font-style: normal; }

.category { margin-bottom: 25px; }
.category h3 { text-align: center; font-size: 1.4em; color: var(--text-color); margin: 0 0 15px 0; font-weight: 500; padding-bottom: 5px; border-bottom: 1px solid var(--border-color); } /* Changed color to --text-color */

/* Options Container - Use Grid for two columns */
.option-container {
    display: grid; /* Use Grid Layout */
    grid-template-columns: repeat(2, 1fr); /* Create two equal-width columns */
    gap: 10px; /* Gap between grid items (buttons) */
    padding: 10px;
}

/* Option Button (Label) - Glassmorphism Base */
.option-button {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 10px;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--glass-border-color);
    background: var(--glass-bg-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari */
    box-shadow: 0 4px 15px var(--glass-shadow-color);
    cursor: pointer; font-size: 0.85em; text-align: left; /* Reduced font size */
    transition: border-color var(--transition-speed) ease,
                transform var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease;
    position: relative; user-select: none;
    color: var(--text-color);
    overflow: hidden;
}

/* Glassmorphism Hover/Selected States */
.option-button:hover {
    background: var(--glass-hover-bg-color);
    border-color: var(--glass-hover-border-color);
    box-shadow: 0 6px 20px var(--glass-hover-shadow-color);
    transform: translateY(-2px);
}

.option-button.selected {
    background: rgba(var(--primary-color-rgb), 0.3); /* Use primary color rgba */
    border-color: rgba(var(--primary-color-rgb), 0.6);
    color: var(--selected-text); /* Use variable */
    box-shadow: 0 2px 10px var(--glass-selected-shadow-color);
    font-weight: 500;
}
.option-button.selected .option-color-circle {
     border-color: var(--glass-selected-circle-border);
}

/* Color Circle inside the button */
.option-color-circle {
    width: 30px; height: 30px;
    border-radius: 25%; border: 1px solid var(--color-circle-border);
    flex-shrink: 0; /* Prevent circle from shrinking */
    box-shadow: inset 0 0 3px var(--color-circle-shadow);
}

#menu.menu-collapsed #menuToggleButton {
    /* Keep it top-right even when collapsed */
    top: 15px; /* Adjust top position slightly for collapsed padding */
    right: 15px; /* Adjust right position slightly */
}

/* Hide actual radio button */
.option-button input[type="radio"] {
    position: absolute; opacity: 0; pointer-events: none;
    width: 0; height: 0; margin: 0; padding: 0; border: 0;
}

/* Preview Area */
#preview {
    flex-grow: 1; display: flex; justify-content: center; align-items: center;
    padding: 1px; position: relative; /* Change from absolute */ background-color: transparent; /* Make background transparent */
    /* margin-left: 25%; /* Default margin matching menu width */
    background-size: cover; min-height: 300px;
    height: calc(100vh - var(--footer-height)); /* Adjust height for fixed footer */
    width: 100%; /* Default width */
    overflow: hidden; /* Hide overflow in preview */
    transition: margin-left var(--transition-speed) ease-in-out,
                width 0.3s ease-in-out,
                height 0.3s ease-in-out,
                inset 0.3s ease-in-out,
                padding 0.3s ease-in-out,
                background-color 0.3s ease-in-out;
}
 #preview:empty::before,
 #preview > p { /* Placeholder text */
    content: "Preview will appear here.";
    display: block; text-align: center; color: var(--secondary-color);
    font-size: 1.2em; font-style: italic;
}

/* New container for the clickable area */
.clickable-preview-area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; /* Changed back to 100% */
    height: 100%; /* Changed back to 100% */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: zoom-in; /* Apply cursor to the wrapper */
    /* Add title="Full-screen preview" attribute in HTML for tooltip */
}

.layered-image {
    position: absolute; /* Ensure layers stack */
    top: 0;
    left: 0;
    width: 100%; /* Fill the .clickable-preview-area */
    height: 100%; /* Fill the .clickable-preview-area */
    max-width: 100%; 
    max-height: 100%; 
    background-color: transparent;
    opacity: 0; transition: opacity 0.3s; ease-in-out;
    image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges;
    pointer-events: none; 
    object-fit: contain; /* Scale image within wrapper, preserving aspect ratio */
}
 .layered-image.loaded {
     opacity: 1; transition: opacity 0.3s; ease-in-out;
 }
 .layered-image[alt*="Background"], .layered-image[alt*="Shadow"] { /* Adjust base layers if needed */ }

/* --- Toggleable Category Styles --- */
.option-container .category-toggle-label {
    display: flex; /* Use flex for alignment */
    align-items: center;
    padding: 8px 10px; /* Match option button padding */
    margin-bottom: 10px; /* Space below toggle */
    background-color: var(--hover-bg); /* Distinct background */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    grid-column: 1 / -1; /* Span full width if container is grid */
    font-weight: 500;
    color: var(--primary-color);
}
.option-container .category-toggle-label:hover {
    background-color: #dbe4ee; /* Slightly different hover */
}
.option-container .category-toggle-checkbox {
    margin-right: 8px; /* Space between checkbox and text */
    accent-color: var(--primary-color); /* Style checkbox color */
    width: 16px;
    height: 16px;
}
/* Hide regular options if toggle is off (handled by JS display:none, but good fallback) */
.category-type-toggleable .option-container > .option-button {
    /* Styles applied by JS based on toggle state */
}


/* --- Fixed Footer Legend --- */
#legendFooter {
    position: fixed; /* Make footer fixed */
    bottom: 0;
    left: 0; /* Ensure it spans full width */
    right: 0; /* Ensure it spans full width */
    width: 100%; /* Explicit full width */
    height: var(--footer-height); /* Use variable for height */
    background-color: var(--menu-bg);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-top: 0px solid var(--border-color);
    z-index: 20; /* Above preview images */
    overflow-y: auto; /* Allow content scroll within fixed height */
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s; /* Added for fullscreen fade */
}

#legendContent {
    padding: 15px 20px;
    max-height: 200px; /* Limit height */
    overflow-y: auto;
}

#legendContent h3 {
    margin: 0 0 10px 0;
    font-size: 1.1em;
    color: var(--primary-color);
    text-align: center;
    font-weight: 500;
}

.legend-table-container {
    overflow-x: auto; /* Allow horizontal scroll if needed */
}

#legendTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    table-layout: fixed; /* Force equal column widths */
}

#legendTable th,
#legendTable td {
    border: 1px solid var(--border-color);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}

#legendTable th {
    background-color: var(--hover-bg);
    color: var(--primary-color);
    font-weight: 600;
    white-space: normal; /* Allow header wrapping */
    word-wrap: break-word; /* Break long words if necessary */
    overflow-wrap: break-word; /* Modern equivalent of word-wrap */
}

#legendTable td {
    background-color: var(--legend-table-cell-bg);
    white-space: normal; /* Allow text wrapping */
    word-wrap: break-word; /* Break long words if necessary */
    overflow-wrap: break-word; /* Modern equivalent of word-wrap */
}

/* --- End Footer Legend --- */

/* --- Boat Name Display --- */
#boatNameDisplay {
    display:none;
    position: fixed;
    /* Adjust bottom based on fixed footer height + margin */
    bottom: calc(var(--footer-height) + 10px); /* Reduced margin from 20px to 10px */
    right: 20px; /* Align with top-right-controls */
    color: var(--primary-color);
    font-family: 'MFred', sans-serif; /* Apply MFred font specifically here */
    font-size: 5rem;
    font-weight: bold; /* Make it stand out a bit */
    text-transform: uppercase;
    z-index: 999; /* Above legend (20), below top controls (100) */
    pointer-events: none; /* Prevent interaction */
    white-space: nowrap; /* Prevent wrapping */
}
/* --- End Boat Name Display --- */


/* --- Responsive Design --- */

/* Tablet and smaller desktop */
@media (max-width: 1024px) {
    /* Adjust preview margin for tablets */
    body:not(:has(#menu.menu-collapsed)) #preview { /* Only apply when menu is NOT collapsed */

    }
    #menu {
        width: 35%; /* Slightly wider menu */
        min-width: 260px;
    }
    .option-container {
        /* Keep 2 columns for tablets */
    }
}

/* Mobile devices */
@media (max-width: 767px) {
    body {
        flex-direction: column; /* Stack menu and preview vertically */
        overflow: auto; /* Allow body scrolling on mobile */
        height: auto; /* Remove fixed height */
    }

    #menu {
        width: 100%; /* Full width menu */
        max-width: none;
        height: auto; /* Auto height for menu */
        border-right: none;
        border-bottom: 1px solid var(--border-color); /* Border below menu */
        box-shadow: none; /* Remove side shadow */
        overflow-y: visible; /* Don't need internal scroll */
        width: 100%; /* Reset width */
        min-width: 100%;
        padding: 15px; /* Restore padding */
        transition: none; /* Disable transitions on mobile */
    }
    /* Hide toggle button on mobile by default? Or keep it? Let's keep it for now. */
    /* If hiding: #menuToggleButton { display: none; } */

    /* --- Mobile Specific Adjustments --- */

    /* Adjust top-right controls for mobile - Place below menu, centered, dark theme */
    #top-right-controls {
        position: static; /* Remove fixed positioning */
        width: auto; /* Allow natural width */
        justify-content: center; /* Center items horizontally */
        padding: 8px 12px; /* Match desktop padding */
        background-color: var(--top-controls-mobile-bg);
        box-shadow: var(--shadow-sm); /* Add subtle shadow */
        gap: 5px; /* Restore original gap */
        margin: 3px; /* Center block, add bottom margin */
        border-radius: var(--border-radius-md); /* Add rounded corners */
        border-bottom: none; /* Remove the previous border */
        flex-wrap: wrap; /* Allow wrapping if needed */
        display: flex; /* Ensure flex properties apply */
    }
    #top-right-controls select,
    #top-right-controls button {
        /* Apply dark theme styles */
        background-color: transparent; /* Match desktop */
        color: var(--light-text-color); /* Match desktop */
        border: 1px solid var(--top-controls-mobile-border);
        flex-grow: 0; /* Don't allow buttons to grow */
        min-width: auto; /* Reset min-width */
        font-size: 0.8em; /* Slightly smaller font on mobile */
        padding: 6px 10px; /* Restore padding */
        /* Adjust padding for icon-only buttons */
    }
    #top-right-controls button {
        padding: 6px; /* Consistent padding for icon buttons */
        gap: 0; /* No gap for icon-only buttons */
    }
    /* Hide text span in all buttons on mobile for icon-only appearance */
    #top-right-controls button span {
        display: none;
    }
    /* Hide specific buttons on mobile */
     #top-right-controls select {
        background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
        padding: 6px 25px 6px 10px; /* Adjust padding for text and arrow */
        min-width: 120px; /* Slightly wider select */
     }
     #top-right-controls select option {
        background-color: var(--menu-bg); /* Use menu background for dropdown */
        color: var(--text-color); /* Use standard text color */
    }


    #configurator {
        overflow-y: visible; /* Don't need internal scroll */
        padding-right: 0;
        display: block !important; /* Ensure configurator is always visible on mobile */
    }

    /* --- Mobile Accordion Styles --- */
    .category {
        margin-bottom: 5px; /* Reduce space between categories */
        border-bottom: 1px solid var(--border-color); /* Separator */
    }
    .category:last-child {
        border-bottom: none;
    }

    .category h3 {
        cursor: pointer;
        padding: 12px 10px;
        font-size: 1.2em;
        text-align: start;
        margin: 0;
        border-bottom: none; /* Remove original border */
        position: relative; /* For indicator */
        transition: background-color var(--transition-speed) ease;
    }
    .category h3:hover {
        background-color: var(--hover-bg);
    }
    /* Add indicator (+/-) */
    .category h3::after {
        content: '+'; /* Plus sign for collapsed */
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        transition: transform 0.2s ease-in-out;
        font-size: 1.2em; /* Adjust size for + sign */
        font-weight: bold; /* Make it bolder */
        color: var(--text-color); /* Make +/- sign black */
    }
    .category.active h3::after {
        content: '-'; /* Minus sign for expanded */
        transform: translateY(-50%); /* Keep vertical centering */
    }

    .option-container {
        display: flex; /* Use flex for horizontal layout */
        flex-wrap: wrap; /* Allow wrapping */
        gap: 8px;
        max-height: 0; /* Initially collapsed */
        overflow: hidden;
        padding: 0 10px; /* No vertical padding when collapsed */
        opacity: 0;
        transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out, opacity 0.3s ease-in-out;
        border-top: 1px solid var(--border-color); /* Separator line */
    }
    .category.active .option-container {
        max-height: 500px; /* Allow expansion (adjust if needed) */
        padding: 10px; /* Restore padding when expanded */
        opacity: 1;
    }

    /* Option Buttons: Keep small, centered circle */
    .option-button .option-text {
        display: none; /* Keep text label hidden */
    }
    .option-button {
        padding: 6px; /* Smaller padding */
        gap: 4px; /* Smaller gap */
        justify-content: center; /* Center the color circle */
        /* Mobile Specific: Glassmorphism removed for simplicity/performance. */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        /* Revert background/border to simpler state if needed */
    }
    .option-color-circle {
        width: 24px; /* Smaller circle */
        height: 24px;
        margin: 0;
    }

    #preview {
        width: 100%; /* Full width */
        height: auto; /* Auto height */
        min-height: 250px; /* Keep a minimum height */
        padding: 15px;
        margin-left: 0; /* No left margin on mobile */
        transition: none; /* Disable transitions on mobile */
        position: relative; /* Needed for footer positioning */
        background-color: transparent; /* Ensure background is transparent */
    }

     /* Footer adjustments for mobile */
    #legendFooter {
        position: relative; /* Keep relative position on mobile */
        bottom: auto;
        left: auto;
        right: auto; /* Reset fixed positioning */
        width: 100%; /* Full width on mobile */
        height: auto; /* Allow height to adjust to content */
        min-height: var(--footer-height); /* Suggest a min-height */
        transform: none !important; /* Ensure no transform */
        margin-top: 15px; /* Space above footer */
        overflow-y: visible; /* Allow natural overflow */
    }
    #legendContent {
        display: block; /* Ensure content is visible */
    }

    /* Transpose Legend Table */
    #legendTable thead {
        display: none; /* Hide original table header */
    }
    #legendTable,
    #legendTable tbody,
    #legendTable tr,
    #legendTable td {
        display: block; /* Make table elements block-level */
        width: 100%;
    }
    #legendTable tr {
        margin-bottom: 10px; /* Space between "rows" */
        border: 1px solid var(--border-color);
        padding: 8px;
        border-radius: var(--border-radius-sm);
    }
    #legendTable td {
        display: flex; /* Use flex for label and value alignment */
        justify-content: space-between; /* Space out label and value */
        align-items: center; /* Vertically align items */
        text-align: right; /* Align value text to the right */
        padding: 6px 0; /* Adjust vertical padding */
        border: none; /* Remove individual cell borders */
        border-bottom: 1px solid var(--border-color); /* Add separator line */
        font-size: 0.9em; /* Adjust font size if needed */
        background-color: var(--menu-bg); /* Set background to menu color */
    }
    #legendTable tr td:last-child {
        border-bottom: none; /* Remove border from last "cell" in a "row" */
    }
    #legendTable td::before {
        content: attr(data-label); /* Get label from data attribute (NEEDS JS) */
        font-weight: bold;
        text-align: left; /* Align label text to the left */
        margin-right: 10px; /* Space between label and value */
        color: var(--primary-color);
        white-space: nowrap; /* Prevent label wrapping */
    }

     #legendContent {
        max-height: none;
    }


    .layered-image {
        max-width: 100%;
        max-height: 100%;
    }

    /* Adjust boat name display on mobile */
    #boatNameDisplay {
        font-size: 1.5rem; /* Smaller font size */
        bottom: 10px; /* Keep simple bottom position */
        right: 10px;
        transition: none;
        display: none;
    }
}

/* --- Fullscreen Preview Mode Styles --- */
body.fullscreen-active #menu,
body.fullscreen-active #legendFooter,
body.fullscreen-active #top-right-controls,
body.fullscreen-active #boatNameDisplay {
    display: none; /* Hide menu, footer, and controls */
}

body.fullscreen-active #preview {
    position: fixed; /* Take over the viewport */
    inset: 0;
    width: 100%;
    height: 100%;
    margin-left: 0;
    z-index: 3000; /* Ensure it's above everything else */
    background-color: transparent; /* Match normal preview background */
    padding: 20px; /* Add some padding */
    cursor: zoom-out; /* Indicate clicking exits fullscreen */
}

body.fullscreen-active .clickable-preview-area {
    cursor: zoom-out; /* Change cursor on the wrapper */
}

body.fullscreen-active .layered-image {
    max-width: 100%; /* Allow image to scale up */
    max-height: 100%;
    object-fit: fit; /* Scale image while preserving aspect ratio */
    /* Removed cursor: zoom-out; */
}
/* --- End Fullscreen Preview Mode Styles --- */

/* --- Modal/Popup Styles --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2500; /* Higher than splash screen */
    padding: 20px;
    /* Initially hidden - controlled by JS */
}

.modal-content {
    background-color: var(--light-text-color); /* White background */
    padding: 30px 40px;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    position: relative;
    max-width: 500px;
    width: 90%;
    text-align: center;
    color: var(--text-color);
}

.modal-content .close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.8em;
    font-weight: bold;
    color: var(--secondary-color);
    cursor: pointer;
    line-height: 1;
}

.modal-content .close-button:hover {
    color: var(--text-color);
}

.modal-content p {
    margin: 0;
    font-size: 1.1em;
    line-height: 1.5;
}
/* --- End Modal/Popup Styles --- */