/* Target the specific page by using page-id-1336 */

/* Container for the whole search bar */
.page-id-1336 .ai-search-bar {
    background-color: #f8f8f8;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    margin: 20px auto; /* Centering the search bar with consistent margins */
    max-width: 100%; /* Ensure it fits within the screen */
}

/* Styling for the search options (buttons) */
.page-id-1336 .search-options {
    display: flex;
    justify-content: center;
    gap: 15px; /* Space between buttons */
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
    margin-bottom: 20px; /* Consistent bottom margin */
}

/* Slightly larger buttons */
.page-id-1336 .search-options button {
    background: linear-gradient(135deg, #b19cd9, #89cff0); /* Lighter gradient background */
    color: white; /* Text color */
    border: none; /* Remove default border */
    padding: 16px 28px; /* Slightly larger padding for buttons */
    margin: 10px 0; /* Space between buttons */
    border-radius: 15px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 18px; /* Slightly larger text size */
    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.1); /* Slightly larger shadow */
    transition: transform 0.2s, box-shadow 0.2s; /* Smooth hover effects */
    text-align: center; /* Center align the text */
    width: 100%; /* Full width on smaller screens */
    max-width: 280px; /* Slightly larger width on larger screens */
}

.page-id-1336 .search-options button:hover {
    transform: translateY(-5px); /* Slight hover lift */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Enhanced hover shadow */
}

/* Container for the search input */
.page-id-1336 .search-input {
    margin-top: 20px;
    position: relative;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #d3d3d3, #f0f0f0); /* Light grey gradient */
    border-radius: 8px;
    padding: 10px;
    border: none;
    max-width: 100%; /* Ensure it fits within the screen */
    box-sizing: border-box; /* Include padding in the element's width and height */
    height: 60px; /* Set a fixed height for the smaller search bar */
    overflow: hidden; /* Prevent overflow when text grows */
}

/* Styling for the text input field */
.page-id-1336 .search-input input[type="text"] {
    flex: 1; /* Ensure the input field takes available space */
    padding: 16px; /* Slightly larger padding */
    border-radius: 8px;
    border: none;
    font-size: 18px; /* Slightly larger font size */
    outline: none; /* Removes the outline */
    background: transparent; /* Make input background transparent */
    color: white; /* Text color changed to white */
    background: linear-gradient(135deg, #b19cd9, #89cff0); /* Gradient background */
    -webkit-background-clip: text; /* Apply the gradient to text */
    -webkit-text-fill-color: transparent; /* Make the text transparent so the gradient shows */
    resize: none; /* Prevent resizing */
    height: 100%; /* Ensure the input fits the fixed height */
    line-height: 1.5; /* Control line spacing */
    white-space: pre-wrap; /* Allow text wrapping */
    word-wrap: break-word; /* Wrap long words to avoid overflow */
    overflow-y: auto; /* Allow vertical scrolling if too much text is entered */
}

/* Gradient placeholder text */
.page-id-1336 .search-input input::placeholder {
    color: transparent; /* Hide original placeholder text color */
    background: linear-gradient(135deg, #b19cd9, #89cff0); /* Gradient for placeholder text */
    -webkit-background-clip: text; /* Apply gradient to placeholder text */
    background-clip: text;
}

/* Styling for the smaller attachment icon (upload button) */
.page-id-1336 .attach-icon {
    margin-right: 10px;
    cursor: pointer;
    width: 45px; /* Smaller width for the upload button */
    height: 45px; /* Smaller height for the upload button */
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-id-1336 .attach-icon img {
    width: 24px; /* Smaller icon inside the upload button */
    height: auto; /* Maintain aspect ratio */
}

/* Styling for the search button with your logo */
.page-id-1336 .search-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0; /* Remove padding to ensure the logo fits well */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px; /* Slightly larger button */
    height: 65px; /* Slightly larger button */
    margin-left: 10px; /* Add some space between input and button */
}

.page-id-1336 .search-button img {
    width: 34px; /* Slightly larger logo size */
    height: auto; /* Maintain aspect ratio */
}

/* Ensure the button stays within the search bar at all times */
.page-id-1336 .search-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page-id-1336 .search-input input[type="text"] {
    flex-grow: 1;
    min-width: 0; /* Prevents overflow */
    padding-right: 65px; /* Prevents input text from going under the search button */
    white-space: normal; /* Allow multiline text wrapping */
    overflow: hidden; /* Ensure text stays within the search box */
}

.page-id-1336 .search-button {
    position: relative;
    right: 0;
    top: 0;
}