body {
    font-family: Arial, sans-serif;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Use full viewport height */
    background: linear-gradient(135deg, #45798F 0%, #A67B97 100%);
    min-height: 100vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%20512%20512%22%20width%3D%22512%22%20height%3D%22512%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cfilter%20id%3D%22noise%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.875%22%20result%3D%22noise%22%20%2F%3E%20%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220.171875%200%200%200%200%200%200.15234375%200%200%200%200%200%200.2109375%200%200%200%200%200%200.41015625%200%22%20%2F%3E%20%3C%2Ffilter%3E%20%3Crect%20filter%3D%22url%28%23noise%29%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22512%22%20height%3D%22512%22%20fill%3D%22transparent%22%20opacity%3D%221%22%20%2F%3E%3C%2Fsvg%3E), linear-gradient(45deg, #45798F 25%, #A67B97 70%);
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
}

.main-view {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Ensure the main view takes up the full width */
}

#productName {
    padding: 10px;
    font-size: 16px; /* Adjust font size as needed */
    border: 1px solid #ccc; /* Light gray border */
    height: 40px; /* Set a specific height */
    box-sizing: border-box; /* Include padding and border in the element's total height */
    width: 80%; /* Make the text box occupy 80% of the screen width */
    max-width: 600px; /* Set a max-width to prevent the text box from becoming too wide */
    border-radius: 20px; /* Rounded corners for the text box */
    background-color: #345B6F; /* Darker shade for background */
    color: #ffffff; /* White text color */
}

#productName::placeholder {
    color: #ffffff; /* White placeholder text */
    opacity: 1; /* Ensure the placeholder is fully opaque */
}

button {
    border: none;
    padding: 0 20px; /* Adjust padding while maintaining the height */
    cursor: pointer;
    transition: background-color 0.3s ease;
    background-color: #ffffff; /* Set button background color to white */
    color: #333333; /* Set button text color to dark gray for contrast */
    height: 40px; /* Match the height of the text box */
    box-sizing: border-box; /* Include padding and border in the element's total height */
    white-space: nowrap; /* Prevent text from wrapping */
    border-radius: 20px; /* Rounded corners for the button */
}

button:disabled {
    background-color: #cccccc; /* Lighter color to indicate disabled state */
    color: #666666; /* Darker text color to contrast with the lighter background */
    cursor: not-allowed; /* Cursor to indicate the button is not clickable */
    opacity: 0.7; /* Reduce opacity to make the button look "faded out" */
}

#backButton {
    position: fixed; /* Position the button fixed relative to the viewport */
    bottom: 20px; /* Position from the bottom of the viewport */
    right: 20px; /* Position from the right of the viewport */
    background-color: #ffffff; /* Set button background color to white */
    color: #333333; /* Set button text color to dark gray for contrast */
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 20px; /* Rounded corners for the button */
    z-index: 1050; /* Ensure the button is above other content */
}

button:hover {
    opacity: 0.8;
}

#results {
    padding: 20px;
    margin-top: 20px;
}

.second-view {
    display: none; /* Initially hidden */
    width: 100vw; /* 100% of the viewport width */
    height: 100vh; /* 100% of the viewport height */
    overflow-y: auto; /* Enable vertical scrolling */
    position: fixed; /* Make the second view position independent of the rest of the document */
    top: 0; /* Align the top edge of the second view with the top of the viewport */
    left: 0; /* Align the left edge of the second view with the left of the viewport */
    padding: 20px;
    box-sizing: border-box; /* Include padding in the element's total width and height */
    color: #333333; /* Dark gray text for readability */
    font-family: Arial, sans-serif; /* Use a standard web-safe font for a business look */
    z-index: 1000; /* Ensure the second view is above other content */
}

/* Assuming both views are flex containers themselves, ensure they stack vertically in their parent */
.parent-container { /* Make sure to add this class to the parent container in your HTML */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center-align children if desired */
}

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

#spinner {
    border: 4px solid rgba(255, 255, 255, 0.3); /* Lighter border for the rest of the spinner */
    border-top: 4px solid #ffffff; /* White color for the spinner's top border */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
    position: fixed; /* Or absolute, depending on your layout */
    top: 60%;
    left: 50%;
}