/*
 * 15. AVT Smart Search Styles
 * Prefixed with .avt-ss-
 */

/* --- 1. Header Icon --- */

button#avt-ss-close-button {
    z-index: 999;
    top: 25px;
    right: 15px;
}

.avt-ss-open-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0px; /* Add some padding for easier clicking */
    color: var(--navigation-text-color, #333); /* Use theme's text color */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, opacity 0.15s ease, outline-color 0.15s ease; /* Added outline-color */
    margin-left: 10px; /* Space it from other nav items */
    
    /* --- NEW: Fix for focus jiggle --- */
    /* Reserve space for outline */
    outline: 2px solid transparent;
}

.avt-ss-open-button:hover {
    opacity: 0.7;
    color: var(--accent); /* Use theme's accent color */
    outline: 2px solid transparent; /* Keep it transparent on hover */
}

/* --- NEW: Fix for focus jiggle --- */
.avt-ss-open-button:focus,
.avt-ss-open-button:focus-visible {
    opacity: 0.7;
    color: var(--navigation-text-hover-color, var(--accent));
    /* Color in the reserved outline */
    outline-color: var(--navigation-text-hover-color, var(--accent));
}

button.avt-ss-open-button {
    background-color: unset !important;
}

.avt-ss-open-button svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* --- FIX: Commented out to ensure search stays visible on mobile ---
   Some themes toggle this class when the mobile menu is open, 
   which was hiding the search icon.
*/
/*
.main-navigation.toggled .avt-ss-open-button {
    display: none;
}
*/

/* * --- NEW MOBILE REORDERING LOGIC ---
 * This is designed to work with common WP themes (like GeneratePress).
 * We added a safety check so it only applies if the classes actually exist.
 */
@media (max-width: 800px) {
    /* Target the container holding the menu toggle and the widget */
    .inside-navigation {
        display: flex;
        justify-content: flex-end; /* Keep content aligned to the right by default */
        align-items: center;
    }
    
    /* Target the Mobile Menu Toggle (Hamburger Icon) */
    .menu-toggle {
        order: 2; /* Move menu toggle to the right */
    }

    /* Target the Widget/Secondary Nav Area (where your button lives) */
    .header-widget {
        order: 1; /* Move widget area to the left of the menu toggle */
        /* Ensure the widget doesn't collapse margins/padding */
        display: flex; 
        align-items: center;
    }
    
    /* Optional: Remove the default left margin if we want it right next to the menu toggle */
    .avt-ss-open-button {
        margin:0;
    }
}


/* --- 2. Modal Overlay & Content --- */
.avt-ss-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 24, 39, 0.5);
    z-index: 99998; /* Below modal, above site */
    opacity: 0;
    visibility: hidden;
    
    /* --- MODIFICATION: Add blur effect --- */
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    transition: opacity 0.3s ease, visibility 0.3s, -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease;
    
    overflow-y: auto;
    overflow-x: hidden; /* Prevent horizontal scroll */
    display: flex;
    align-items: flex-start; /* Align modal to top */
    justify-content: center;
    padding: 6vh 1rem 2rem; /* 6vh top padding */
}

.avt-ss-modal-overlay.avt-ss-visible {
    opacity: 1;
    visibility: visible;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.avt-ss-modal-content {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 99999;
    position: relative;
    width: 100%;
    max-width: 1100px; /* Larger max width */
    height: 80vh; /* Set height */
    max-height: 900px;
    padding: 2rem; /* Adjusted padding */
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.avt-ss-modal-overlay.avt-ss-visible .avt-ss-modal-content {
    opacity: 1;
    transform: scale(1);
}

.avt-ss-close-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
    padding: 0.5rem;
    line-height: 1;
    transition: color 0.2s ease;
}

.avt-ss-close-button:hover {
    color: #333;
}

/* --- 3. Modal Layout (Sidebar + Main) --- */
.avt-ss-modal-layout {
    display: flex;
    flex-grow: 1; /* Allow layout to fill modal content */
    overflow: hidden; /* Prevent internal scrolling */
    gap: 2rem;
}

/* 3.1 Sidebar (Filters) */
.avt-ss-sidebar {
    flex: 0 0 260px; /* Fixed width, no grow, no shrink */
    border-right: 1px solid #eee;
    padding-right: 2rem;
    overflow-y: auto; /* Allow sidebar to scroll if filters are tall */
    height: 100%;
}

/* --- New Quick Links Styles --- */
.avt-ss-quick-links-title, .avt-ss-filter-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--contrast);
    margin-top: 0;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.avt-ss-quick-links-list, .avt-ss-filter-list {
    list-style: none;
    margin: 0 0 0.5rem 0; /* Add margin-bottom to separate from filters */
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.avt-ss-quick-link-item a {
    display: block;
    background: none;
    border: none;
    padding: 0.6rem 0.75rem;
    border-radius: 5px;
    text-align: left;
    width: 100%;
    font-size: 0.9rem;
    color: #333;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.avt-ss-filter-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.6rem 0.75rem;
    border-radius: 5px;
    text-align: left;
    width: 100%;
    font-size: 0.9rem;
    color: #333;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-weight: 500;
    display: block;
}

.avt-ss-filter-button:hover,
.avt-ss-filter-button:focus-visible, .avt-ss-quick-link-item a:hover {
    color: var(--accent);
    background-color: var(--base);
}

.avt-ss-filter-button.active {
    background-color: var(--base);
    color: var(--accent);
    font-weight: 700;
}

.avt-ss-filter-button.active:focus-visible {
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5); /* Add a focus ring for active item */
    outline: none;
}

/* 3.2 Main Content (Search + Results) */
.avt-ss-main-content {
    flex: 1; /* Grow to fill remaining space */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent internal scrolling */
    height: 100%;
}

/* --- 4. Search Bar --- */
.avt-ss-search-bar-wrapper {
    position: relative;
    margin-bottom: 1rem; /* Space between bar and results */
    flex-shrink: 0; /* Prevent from shrinking */
    max-width: 500px; /* User request */
    margin-left: 35px; /* User request */
}

.avt-ss-search-bar-icon {
    position: absolute;
    top: 50%;
    right: 1.25rem; /* Moved to the right */
    left: auto; /* unset left */
    transform: translateY(-50%);
    color: #aaa;
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.avt-ss-search-input {
    width: 100%;
    padding: 0.9rem 3.5rem 0.9rem 1.25rem; /* Adjusted padding: right for icon, left for text */
    font-size: 1rem; /* Made slightly smaller */
    border: 2px solid #ddd;
    border-radius: 8px; /* Already 8px */
    transition: border-color 0.2s ease;
    font-weight: 500;
}

input#avt-ss-search-input {
    border-radius: 8px;
}

.avt-ss-search-input:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.avt-ss-label-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* --- 5. Results --- */
.avt-ss-results-container {
    flex-grow: 1; /* Fill remaining vertical space */
    overflow-y: auto; /* Allow results to scroll */
    padding-right: 0.5rem; /* Space for scrollbar */
}

.avt-ss-results-placeholder,
.avt-ss-results-message {
    text-align: center;
    color: #888;
    font-size: 1rem;
    padding: 2rem;
}

.avt-ss-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.avt-ss-result-item {
    margin-bottom: 0.5rem;
}

li.avt-ss-result-item {
    margin: 0px 0px 5px 0px;
}

.avt-ss-result-link {
    display: flex; /* Use flex for image + text alignment */
    align-items: center;
    gap: 0.75rem; /* Space between image and text */
    padding: 0.75rem 1rem;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.2s ease;
    height: 70px;
}

.avt-ss-result-link:hover,
.avt-ss-result-link:focus-visible {
    background-color: var(--base);
    outline: none;
}

.avt-ss-result-image-wrapper {
    width: 150px;
    height: 65px;
    flex-shrink: 0; /* Prevent from shrinking */
    border-radius: 4px;
    overflow: hidden; /* Ensures image respects the border-radius */
    position: relative;
}

.avt-ss-result-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.avt-ss-result-image.lazy-load {
    opacity: 0; /* Start invisible */
}

.avt-ss-result-image-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23cccccc' viewBox='0 0 512 512'%3E%3Cpath d='M448 80H64C28.7 80 0 108.7 0 144v224C0 403.3 28.7 432 64 432h384c35.3 0 64-28.7 64-64V144C512 108.7 483.3 80 448 80zM448 368H64V144h384v224zM160 216c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zM304 288l-88-88c-6-6-15.6-6-21.6 0l-56 56c-6.2 6.2-6.2 16.4 0 22.6l22.6 22.6c6.2 6.2 16.4 6.2 22.6 0L240 269.3l88 88c6.2 6.2 16.4 6.2 22.6 0l22.6-22.6c6.2 6.2 6.2-16.4 0-22.6z'/%3E%3C/svg%3E");
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
}

.avt-ss-result-text {
    flex: 1; /* Allow text to take remaining space */
    min-width: 0; /* Fix for flexbox text overflow */
}

.avt-ss-result-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: #222;
}

.avt-ss-result-link:hover .avt-ss-result-title {
    color: var(--accent);
}

.avt-ss-result-title strong {
    font-weight: 700; /* Make it heavier than the title's 600 */
    color: #111; /* Make it slightly darker */
}

.avt-ss-results-message .avt-ss-suggestion-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--accent);
    font-weight: 600;
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    display: inline;
}

.avt-ss-results-message .avt-ss-suggestion-button:hover,
.avt-ss-results-message .avt-ss-suggestion-button:focus-visible {
    color: #0056b3;
    outline: none;
}

.avt-ss-results-message strong {
    font-weight: 600;
    color: #555;
}


/* --- 6. Responsive (Mobile) --- */
@media (max-width: 768px) {
    .avt-ss-modal-overlay {
        padding: 0; /* Full screen */
    }
    
    .avt-ss-modal-content {
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        padding: 1.5rem 1rem;
    }
    
    .avt-ss-close-button {
        top: 0.5rem;
        right: 0.5rem;
    }

    .avt-ss-modal-layout {
        flex-direction: column;
        gap: 1rem;
    }

    /* 3.1 Sidebar (Filters) */
    .avt-ss-sidebar {
        flex: 0 0 auto; /* No fixed width */
        border-right: none;
        padding-right: 0;
        overflow-y: visible; /* No scroll, show all */
        height: auto;
        border-bottom: 1px solid #eee;
        padding-bottom: 0rem;
    }

    /* --- Quick Links Mobile --- */
    .avt-ss-quick-links-title {
        margin-bottom: 0.75rem;
    }

    .avt-ss-quick-links-list {
        margin-bottom: 1rem;
        flex-direction: row; /* Make links horizontal on mobile */
        flex-wrap: wrap; /* Allow wrapping */
        overflow-x: hidden; /* Prevent horizontal scroll */
        gap: 0.5rem;
    }

    .avt-ss-quick-link-item a {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
        white-space: nowrap; /* Keep on one line */
        background-color: var(--base); /* Add a light background to distinguish */
    }

    .avt-ss-quick-link-item a:hover {
        background-color: #f0f0f0;
    }
    /* --- End Quick Links Mobile --- */

    .avt-ss-filter-title {
        margin-bottom: 0.75rem;
    }

    .avt-ss-filter-list {
        flex-direction: row;
        flex-wrap: wrap; /* Allow wrapping */
        overflow-x: hidden; /* Prevent horizontal scroll */
	gap: 0px;
    }

    .avt-ss-filter-button {
        white-space: nowrap; /* Keep filters on one line */
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }
    
    /* 3.2 Main Content (Search + Results) */
    .avt-ss-search-bar-wrapper {
        margin-bottom: 1rem;
        margin-left: 0; /* Reset margin for mobile */
        max-width: 100%; /* Reset max-width for mobile */
    }

    .avt-ss-search-input {
        font-size: 1rem;
        padding: 0.8rem 3rem 0.8rem 1rem; /* Adjusted padding and size for mobile */
    }

    .avt-ss-search-bar-icon {
        right: 1rem; /* Adjusted for mobile */
        left: auto;
        width: 18px;
        height: 18px;
    }

    .avt-ss-results-container {
        padding-right: 0;
    }

    .avt-ss-result-image-wrapper {
        width: 125px;
        height: 60px;
    }

    .avt-ss-result-link {
        gap: 0.6rem;
        padding: 0.5rem;
    }

    .avt-ss-result-title {
        font-size: 0.9rem;
    }
}