/* 1. Reset the wrapper to be visually transparent.
   It should only be used for positioning the icon. */
.search-input-wrapper {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    border: none !important;      /* <<< ADDED: Explicitly remove any lingering border */
    background: none !important; /* <<< ADDED: Explicitly remove any background */
    padding: 0 !important;       /* <<< ADDED: Explicitly remove any padding */
}

/* 7. This override rule is still needed to fight with other stylesheets.
      It's updated to ensure our new styles apply correctly. */
form#searchForm .search-input-wrapper .search-icon-button {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 50% !important; /* Ensure the circular shape overrides others */
    padding: 0 !important;
}

/* 2. Style the input element to look like a single, seamless bar. */
#queryInput {
    /* Layout & Sizing */
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: 48px !important; /* A slightly taller, more modern height */
    padding: 12px 50px 12px 20px !important;

    /* Appearance (The core of the visual style) */
    background-color: #282828 !important; /* The visible background of the bar */
    border: 1px solid #444 !important;    /* The visible border of the bar */
    border-radius: 25px !important;       /* The rounded corners */
    color: #e0e0e0 !important;
    font-size: 1rem !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;

    /* Behavior */
    outline: none !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* 3. Refined Focus state for the input. */
#queryInput:focus {
    border-color: #58d68d !important;
}

/* 4. The icon button - now with a defined size and shape for the hover effect */
.search-icon-button {
    position: absolute;
    right: 8px; /* Adjusted to accommodate the button's width */
    top: 50%;
    transform: translateY(-50%);

    /* Sizing for the circular hover area */
    width: 36px;
    height: 36px;
    border-radius: 50%; /* Makes the background a circle */

    /* Base style resets */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;

    /* Flex properties to center the icon inside the button */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Icon color */
    color: #b0b0b0;

    /* Smooth transition for hover effects */
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* 6. The new, more stylish hover effect */
.search-icon-button:hover {
    color: var(--dark-accent-green, #58d68d); /* Icon turns green */
    background-color: rgba(88, 214, 141, 0.15); /* Adds a faint, circular green glow */
}

/* It's good practice to also define the hover state in the override */
form#searchForm .search-input-wrapper .search-icon-button:hover {
    background-color: rgba(88, 214, 141, 0.15) !important;
}

/* 5. The SVG icon itself - now larger */
.search-icon-button .search-icon {
    width: 24px;  /* Increased from 20px */
    height: 24px; /* Increased from 20px */
    fill: currentColor; /* This makes the SVG inherit the button's color */
}

/* 4. Search Form (compare.html) */
form#searchForm {
    display: flex !important;
    flex-direction: column !important; /* Stack children vertically */
    align-items: center !important; /* Center items horizontally if they are not full width */
    gap: 1.5rem !important; /* Adjust gap for vertical stacking (e.g., between search bar and gender buttons) */
    max-width: 700px !important; /* You can adjust this: overall width of the centered search block */
    margin: 0 auto 2.5rem auto !important; /* Centers the entire form block on the page */
    padding: 0 1rem !important; /* Add some horizontal padding if max-width is large */
    box-sizing: border-box !important;
}

form#searchForm button[type="submit"] { /* Specific to compare.html search button */
    padding: 0.75rem 1.25rem !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    background-color: var(--dark-accent-green) !important; /* Your vibrant green */
    border: none !important;
    color: var(--dark-bg-primary) !important; /* Dark text on green */
    font-weight: 600 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

form#searchForm button[type="submit"]:hover {
    background-color: var(--dark-accent-green-hover) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

form#searchForm button[type="submit"]:disabled {
    background-color: #2f6f35 !important; /* Darker disabled green */
    color: var(--dark-text-muted) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* Make the overall widget container transparent so it blends in */
.search-area .gsc-control-cse {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 1.5rem !important;
}

/* Style the main search box container (the rounded rectangle) */
.search-area .gsc-input-box {
    background: #282828 !important;
    border: 1px solid #444 !important;
    border-radius: 50px !important;
    padding: 0 !important;
    height: 48px !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
    transition: border-radius 0.15s ease-out, box-shadow 0.15s ease-out, border-color 0.15s ease-out;
}

/* This rule applies ONLY when the search box is active (focused) */
.search-area .gsc-input-box.gsc-input-box-focus {
    border-color: #58d68d !important;
    box-shadow: 0 0 8px rgba(88, 214, 141, 0.3) !important;
    border-radius: 24px 24px 0 0 !important;
}

.search-area .gsc-input-box:hover:not(.gsc-input-box-focus) {
    border-color: #666 !important;
}

/* Style the text input field */
.search-area input.gsc-input {
    background: none !important;
    color: #e0e0e0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    height: 46px !important;
    padding: 0 55px 0 24px !important; /* This padding makes room for our button */
    border: none !important;
    text-shadow: none !important;
    box-sizing: border-box !important;
}

.search-area input.gsc-input::placeholder {
    color: #888 !important;
}

/* HIDE Google's Default Sort By Dropdown (Revised) */
.gsc-control-cse .gsc-orderby-container {
    display: none !important;
}

/* --- HIDE Google's Default "Web/Image" Tabs --- */
.gsc-control-cse .gsc-tabsArea {
    display: none !important;
}

/*
* === START: DEFINITIVE FIX FOR SEARCH BUTTON LAYOUT ===
*/

/* 1. Hide Google's default "clear" (X) button by hiding its table cell. */
.search-area .gsc-search-box .gsib_b {
    display: none !important;
}

/* 2. Collapse the space the search button *used* to occupy to remove the gap. */
.search-area .gsc-search-box .gsc-search-button {
    width: 0px !important;
}

/* 3. Style the search button itself */
.search-area button.gsc-search-button-v2 {
    /* - Move the button left into the input's padded area.
        - Lift it to the top layer so it's clickable. */
    position: relative !important;
    z-index: 2 !important;
    transform: translateX(-50px) !important; /* Adjust this value if needed */

    /* Your existing visual styles */
    background-color: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    padding: 8px !important;
    margin: 0 !important;
    transition: background-color 0.2s ease;
}

/* 4. Keep the existing hover and SVG styles */
.search-area button.gsc-search-button-v2:hover {
    background-color: rgba(88, 214, 141, 0.15) !important;
}

.search-area button.gsc-search-button-v2 svg {
    fill: #b0b0b0 !important;
}

.search-area button.gsc-search-button-v2:hover svg {
    fill: #58d68d !important;
}

/* === END: DEFINITIVE FIX === */


/* --- AUTOCOMPLETE DROPDOWN STYLES (Unchanged) --- */
.gsc-completion-container {
    background: #333333 !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important;
    border-radius: 0 0 24px 24px !important;
    border: 1px solid #444 !important;
    border-top: none !important;
}

.gsc-completion-suggestion {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
}

.gsc-completion-suggestion .gs-title {
    padding: 12px 24px !important;
    color: #b0b0b0 !important;
}

.gsc-completion-suggestion .gs-title b {
    color: #e0e0e0 !important;
}

.gsc-completion-suggestion:hover,
.gsc-completion-selected {
    background-color: #2f6f35 !important;
}

.gsc-webResult.gsc-result {
    position: relative; /* Necessary for absolute positioning of the child button */
}

.youtube-review-button {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;

    /* --- NEW: Hide button by default --- */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

/* --- NEW: Show button on hover of the parent result --- */
.gsc-webResult.gsc-result:hover .youtube-review-button {
    opacity: 1;
    visibility: visible;
}

/* --- NEW: Class to force button to be always visible, overriding the default hidden state --- */
.youtube-review-button.always-visible {
    opacity: 1;
    visibility: visible;
}

.youtube-review-button svg {
    width: 24px;
    height: 24px;
    fill: #ff0000; /* YouTube Red */
}

/* --- Style for the new toggle --- */
.veganize-query-toggle {
    display: flex;
    align-items: center;
    margin-left: 16px; /* Adjust spacing as needed */
}

.veganize-query-toggle > label:first-child {
    margin-right: 8px; /* Adjust this value if needed to perfectly match the other toggle */
}

/* Make emoji the same visual height as the text and align them nicely */
.emoji {
    font-size: 1.5em;      /* 30-35 % bigger = visually even with cap-height */
    line-height: 1;         /* remove extra vertical space */
    vertical-align: -0.15em;/* nudge down so it sits on the baseline */
    margin-right: .25rem;   /* breathing room before the word */
}

/*
* === START: TOOLTIP STYLES ===
*/

/* 1. Tooltip Container */
/* The parent element that has the tooltip needs this class and position: relative */
.tooltip-container {
    position: relative;
    display: inline-block; /* Or 'block', depending on the element */
}

/* 2. The Tooltip Itself (Hidden by default) */
.tooltip-container::after {
    content: attr(data-tooltip); /* Use the data-tooltip attribute for the text */
    position: absolute;
    bottom: 100%; /* Position it above the element */
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px; /* Space between the element and the tooltip */

    /* Visual Styling */
    background-color: #1a1a1a;
    color: #e0e0e0;
    text-align: center;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap; /* Prevent the tooltip from wrapping to a new line */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);

    /* Animation & Visibility */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* The tooltip itself should not be interactive */
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    transition-delay: 1s; /* <<< This is the 1-second delay! */
    z-index: 1000; /* Ensure it appears above other elements */
}

/* 3. Show the Tooltip on Hover */
.tooltip-container:hover::after {
    opacity: 1;
    visibility: visible;
}