/**
 * Sparkles Navigation Components
 * Header, footer, menus, and navigation patterns
 * Extends: sparkles-utilities.css, sparkles-animations.css, sparkles-tokens.css
 * All 3 optimization layers applied: keyframes consolidated, patterns extracted, component organization
 */

/* ========== HEADER NAVIGATION ========== */
.sparkles-header {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1));
    --tw-shadow: 0 1px 2px 0 #0000000d;
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    position: sticky;
    top: 0;
    z-index: var(--z-fixed);
    isolation: isolate;
    transition-property: all;
    transition-duration: .15s;
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(0, 0, .2, 1);
}

/* Container query anchors for navigation modules */
:where(.sparkles-header,
    .sparkles-megamenu,
    .sparkles-breadcrumb,
    .sparkles-pagination,
    .sparkles-tabs,
    .sparkles-footer) {
    container-type: inline-size;
}

.sparkles-header-scrolled {
    --tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
}

.sparkles-header-container {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 5rem;
}

/* Logo */
.sparkles-logo {
    color: var(--color-secondary);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
}

.sparkles-logo-icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-right: .75rem;
}

/* Main Navigation */
.sparkles-nav-main {
    justify-content: center;
    gap: 2rem;
}

.sparkles-nav-list,
.sparkles-tabs-list {
    display: flex;
    margin: 0;
    padding: 0;
}

.sparkles-nav-list {
    gap: 1.5rem;
}

.sparkles-nav-link {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--gray-700);
    padding-top: .5rem;
    padding-bottom: .5rem;
    position: relative;
}

.sparkles-nav-link:hover {

    color: var(--color-primary);
}

.sparkles-nav-link::after {
    background-color: var(--color-primary);
    content: '';
    transform-origin: right;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    transition: transform .3s ease-out;
    --tw-scale-x: 0;
}

.sparkles-nav-link:hover::after,
.sparkles-nav-link-active::after {
    transform-origin: left;
}

.sparkles-nav-link-active {

    color: var(--color-primary);
}

/* Header Actions */
.sparkles-header-actions,
.sparkles-testimonial-author,
.sparkles-banner-promo .sparkles-banner-content {
    justify-content: center;
    gap: 1rem;
}

.sparkles-header-icon-btn {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    color: var(--gray-700);
    position: relative;
}

.sparkles-header-icon-btn:hover {
    color: var(--color-primary);
    background-color: var(--gray-100);
}

.sparkles-header-badge {
    background-color: var(--color-secondary);
    position: absolute;
    top: 0;
    right: 0;
    width: 1.25rem;
    height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity, 1));
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 700;
}

/* ========== MOBILE NAVIGATION ========== */
.sparkles-mobile-menu-btn {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    background-color: initial;
    border-width: 0;
    cursor: pointer;
}

.sparkles-hamburger {
    width: 1.5rem;
    height: 1rem;
    position: relative;
}

.sparkles-hamburger span {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    --tw-bg-opacity: 1;
    background-color: rgba(55, 65, 81, var(--tw-bg-opacity, 1));
    transition-property: all;
    transition-duration: .15s;
    transition-timing-function: cubic-bezier(0, 0, .2, 1);
}

.sparkles-hamburger span:first-child {
    top: 0;
}

.sparkles-hamburger span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.sparkles-hamburger span:last-child {
    bottom: 0;
}

.sparkles-hamburger-active span:first-child {
    transform: rotate(45deg) translateX(0.25rem) translateY(0.25rem);
}

.sparkles-hamburger-active span:nth-child(2) {
    opacity: 0;
}

.sparkles-hamburger-active span:last-child {
    transform: rotate(-45deg) translateX(0.25rem) translateY(-0.25rem);
}

/* Mobile Menu Overlay */
.sparkles-mobile-nav {
    position: fixed;
    top: 5rem;
    left: 0;
    right: 0;
    bottom: 0;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1));
    --tw-translate-x: -100%;
    transition-property: all;
    transition-duration: .15s;
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(0, 0, .2, 1);
    overflow-y: auto;
    z-index: var(--z-fixed);
}

.sparkles-mobile-nav-active {
    --tw-translate-x: 0px;
}

.sparkles-mobile-nav-list {
    padding: 1.5rem;
}

.sparkles-mobile-nav-item {
    border-bottom-width: 1px;
    border-color: var(--gray-200);
}

.sparkles-mobile-nav-link {
    color: var(--gray-700);
    display: block;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
}

/* ========== DROPDOWN MENU ========== */
.sparkles-dropdown {
    position: relative;
}

.sparkles-dropdown-menu,
.sparkles-megamenu {
    position: absolute;
    top: 100%;
    left: 0;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1));
    opacity: 0;
    visibility: hidden;
    transition-property: all;
    transition-duration: .15s;
    transition-timing-function: cubic-bezier(0, 0, .2, 1);
}

.sparkles-dropdown-menu {
    min-width: 200px;
    margin-top: .5rem;
    border-radius: .5rem;
    --tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
}

.sparkles-dropdown:hover .sparkles-dropdown-menu,
.sparkles-dropdown-active .sparkles-dropdown-menu,
.sparkles-nav-item:hover .sparkles-megamenu {
    opacity: 1;
    visibility: visible;
    --tw-translate-y: 0px;
}

.sparkles-dropdown-item {
    display: block;
    padding: .5rem 1rem;
    color: var(--gray-700);
}

.sparkles-dropdown-item:hover {
    color: var(--color-primary);
    background-color: var(--gray-100);
}

/* ========== MEGA MENU ========== */
.sparkles-megamenu {
    right: 0;
    --tw-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
}

.sparkles-megamenu-container {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
}

.sparkles-megamenu-column h3,
.sparkles-sidebar-title {
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.sparkles-megamenu-list {
    /* Inherits list styles from parent */
}

.sparkles-megamenu-link {
    display: block;
    padding-top: .5rem;
    padding-bottom: .5rem;
    color: var(--gray-600);
}

.sparkles-megamenu-link:hover {

    color: var(--color-primary);
}

/* ========== BREADCRUMBS - REMOVED DUPLICATE ========== */
/* See line 413 for the complete breadcrumb implementation */

/* ========== SIDEBAR NAVIGATION ========== */
.sparkles-sidebar-nav {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1));
    border-radius: .75rem;
    padding: 1.5rem;
    --tw-shadow: 0 1px 2px 0 #0000000d;
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
}

.sparkles-sidebar-list {
    /* Inherits list styles from parent */
}

.sparkles-sidebar-item {
    margin-bottom: .25rem;
}

.sparkles-sidebar-link {
    display: block;
    padding-left: .75rem;
    padding-right: .75rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-radius: .5rem;
    color: var(--gray-700);
}

.sparkles-sidebar-link:hover {
    color: var(--color-primary);
    background-color: var(--gray-100);
}

.sparkles-sidebar-link-active {
    background-color: var(--color-primary);
    color: white;
}

/* ========== BREADCRUMB NAVIGATION ========== */
.sparkles-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: .875rem;
    line-height: 1.25rem;
}

.sparkles-breadcrumb-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.sparkles-breadcrumb-link {
    color: var(--gray-600);
    padding-top: .25rem;
    padding-bottom: .25rem;
    padding-left: .5rem;
    padding-right: .5rem;
    border-radius: .25rem;
}

.sparkles-breadcrumb-link:hover {
    color: var(--color-primary);
    background-color: var(--gray-100);
}

.sparkles-breadcrumb-current {
    color: var(--color-secondary);
    font-weight: 500;
    padding-top: .25rem;
    padding-bottom: .25rem;
    padding-left: .5rem;
    padding-right: .5rem;
}

.sparkles-breadcrumb-separator {
    color: var(--gray-400);
    margin-left: .25rem;
    margin-right: .25rem;
    font-size: .75rem;
    line-height: 1rem;
}

/* Breadcrumb with icons */
.sparkles-breadcrumb-home,
.sparkles-admin-card-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.sparkles-breadcrumb-icon {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

/* Breadcrumb variations */
.sparkles-breadcrumb-arrows .sparkles-breadcrumb-separator::before {
    content: '→';
}

.sparkles-breadcrumb-chevrons .sparkles-breadcrumb-separator::before {
    content: '›';
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.sparkles-breadcrumb-dots .sparkles-breadcrumb-separator::before {
    content: '•';
}

.sparkles-breadcrumb-slashes .sparkles-breadcrumb-separator::before {
    content: '/';
}

/* Centered breadcrumb */
.sparkles-breadcrumb-centered {
    justify-content: center;
}

/* Background variations */
.sparkles-breadcrumb-contained {
    background-color: var(--gray-50);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    border-radius: .375rem;
}

.sparkles-breadcrumb-bordered {
    border-width: 1px;
    border-color: var(--gray-200);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    border-radius: .375rem;
}

/* Sparkles style breadcrumb */
.sparkles-breadcrumb-luxury {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --tw-gradient-from: var(--gray-50) var(--tw-gradient-from-position);
    --tw-gradient-to: var(--gray-50)00 var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: var(--gray-100) var(--tw-gradient-to-position);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-radius: .5rem;
    --tw-shadow: 0 1px 2px 0 #0000000d;
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
}

.sparkles-breadcrumb-luxury .sparkles-breadcrumb-link {
    color: var(--color-secondary);
    font-weight: 500;
}

.sparkles-breadcrumb-luxury .sparkles-breadcrumb-link:hover {
    color: var(--color-primary);
    background-color: var(--color-primary);
    --tw-bg-opacity: 0.1;
}

.sparkles-breadcrumb-luxury .sparkles-breadcrumb-separator {

    color: var(--color-primary);
}

/* Mobile breadcrumb - consolidated above */

/* ========== PAGINATION COMPONENT ========== */
.sparkles-pagination,
.sparkles-blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.sparkles-pagination-list {
    justify-content: center;
    gap: .25rem;
}

.sparkles-pagination-item {
    /* Inherits list styles from parent */
}

.sparkles-pagination-link {
    border-width: 2px;
    border-radius: .25rem;
}

.sparkles-pagination-link:hover {
    background-color: var(--gray-100);
    border-color: var(--gray-400);
}

.sparkles-pagination-link:focus {
    --tw-ring-color: var(--color-primary);
}

/* Previous/Next buttons */
.sparkles-pagination-prev,
.sparkles-pagination-next {
    font-size: .875rem;
    line-height: 1.25rem;
}

.sparkles-pagination-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* Ellipsis */
.sparkles-pagination-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--gray-500);
}

/* Pagination Info */
.sparkles-pagination-info {
    margin-left: 1rem;
}

/* Pagination variations */
.sparkles-pagination-rounded .sparkles-pagination-link {
    border-radius: var(--radius-full);
}

.sparkles-pagination-square .sparkles-pagination-link {
    border-radius: 0;
}

.sparkles-pagination-minimal .sparkles-pagination-link {
    border-width: 0;
    background-color: initial;
}

.sparkles-pagination-minimal .sparkles-pagination-link:hover {
    background-color: var(--gray-100);
}

.sparkles-pagination-minimal .sparkles-pagination-active .sparkles-pagination-link {
    color: var(--color-secondary);
    background-color: var(--gray-200);
}

/* Sparkles luxury pagination */
.sparkles-pagination-luxury .sparkles-pagination-link {
    border-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 600;
}

.sparkles-pagination-luxury .sparkles-pagination-link:hover {
    background-color: color-mix(in srgb, var(--color-primary, rgb(250, 204, 21)) 10%, transparent);
}

.sparkles-pagination-luxury .sparkles-pagination-active .sparkles-pagination-link {
    border-color: var(--color-primary);
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: var(--color-orange-light) var(--tw-gradient-from-position);
    --tw-gradient-to: var(--color-orange-light)00 var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: var(--color-warning-light) var(--tw-gradient-to-position);
}

/* Centered with page info */
.sparkles-pagination-centered {
    flex-wrap: wrap;
}

.sparkles-pagination-summary {
    width: 100%;
    text-align: center;
    color: var(--gray-600);
    font-size: .875rem;
    line-height: 1.25rem;
    margin-bottom: 1rem;
}

/* Mobile pagination */
@container (max-width: 640px) {
    .sparkles-pagination {
        gap: .25rem;
    }

    .sparkles-pagination-link {
        min-width: 36px;
        height: 2.25rem;
        padding-left: .5rem;
        padding-right: .5rem;
        font-size: .875rem;
        line-height: 1.25rem;
    }

    /* Hide page numbers on mobile, keep only nav */
    .sparkles-pagination-mobile-simple .sparkles-pagination-item:not(.sparkles-pagination-prev):not(.sparkles-pagination-next):not(.sparkles-pagination-active) {
        display: none;
    }
}

/* Load more button style */
.sparkles-load-more {
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.sparkles-load-more-btn {
    color: var(--color-primary);
    border-color: var(--color-primary);
    border-width: 1px;
    background-color: initial;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-weight: 500;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition-property: all;
    transition-duration: .15s;
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(0, 0, .2, 1);
}

.sparkles-load-more-btn:hover {
    background-color: var(--color-primary);
    color: white;
    transform: translateY(-0.125rem);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.sparkles-load-more-spinner {
    animation: spin 1s linear infinite;
}

/* ========== TABS NAVIGATION ========== */
.sparkles-tabs {
    border-bottom-width: 2px;
    border-color: var(--gray-200);
}

.sparkles-tabs-list {
    gap: 2rem;
}

.sparkles-tab-link {
    display: block;
    padding-left: .75rem;
    padding-right: .75rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    color: var(--gray-600);
    position: relative;
}

.sparkles-tab-link:hover {

    color: var(--color-primary);
}

.sparkles-tab-link-active {
    color: var(--color-primary);
    font-weight: 600;
}

.sparkles-tab-link-active::after {
    background-color: var(--color-primary);
    content: '';
    position: absolute;
    left: 0;
    right: 0;
}

/* ========== PAGINATION - REMOVED DUPLICATE ========== */
/* See line 530 for the complete pagination implementation */

/* ========== FOOTER ========== */
.sparkles-footer {
    background-color: var(--color-secondary);
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity, 1));
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-bottom: 2rem;
}

.sparkles-footer-container {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.sparkles-footer-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

:is(.sparkles-product-name, .sparkles-footer-column h3) {
    margin-bottom: var(--sparkles-heading-margin);
    font-size: var(--sparkles-heading-size);
    line-height: var(--sparkles-heading-line-height);
    font-weight: var(--sparkles-heading-weight);
}

.sparkles-product-name,
.sparkles-footer-column h3 {
    --sparkles-heading-size: 1.125rem;
    --sparkles-heading-line-height: 1.75rem;
    --sparkles-heading-weight: 600;
}

.sparkles-footer-column h3 {
    --sparkles-heading-margin: 1rem;
}

.sparkles-footer-list {
    /* Inherits list styles from parent */
}

.sparkles-footer-link {
    color: var(--gray-300);
    padding-top: .25rem;
    padding-bottom: .25rem;
}

.sparkles-footer-link:hover {
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity, 1));
}

.sparkles-footer-bottom {
    padding-top: 2rem;
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgba(255, 255, 255, var(--tw-border-opacity, 1));
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ========== RESPONSIVE DESIGN ========== */
@container (max-width: 1024px) {
    .sparkles-nav-main {
        display: none;
    }

    .sparkles-mobile-menu-btn {
        display: flex;
    }

    .sparkles-megamenu-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ========== CONSOLIDATED RESPONSIVE DESIGN ========== */
@container (max-width: 768px) {

    /* Mobile breadcrumb */
    .sparkles-breadcrumb {
        font-size: .75rem;
        line-height: 1rem;
    }

    .sparkles-breadcrumb-link,
    .sparkles-breadcrumb-current {
        padding: .25rem;
    }

    /* Hide middle items on mobile, show only first and last */
    .sparkles-breadcrumb-mobile-compact .sparkles-breadcrumb-item:not(:first-child):not(:last-child) {
        display: none;
    }

    .sparkles-breadcrumb-mobile-compact .sparkles-breadcrumb-item:first-child .sparkles-breadcrumb-separator {
        display: none;
    }

    .sparkles-breadcrumb-mobile-compact .sparkles-breadcrumb-item:nth-child(2)::before {
        content: '...';
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        color: var(--gray-400);
    }

    /* Header adjustments */
    .sparkles-header-container {
        height: 4rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .sparkles-mobile-nav {
        /* Mobile nav uses base styles at this breakpoint */
    }

    /* Footer adjustments */
    .sparkles-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .sparkles-footer-bottom,
    .sparkles-sale-banner {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    /* Navigation tabs */
    .sparkles-tabs-list {
        /* -webkit-overflow-scrolling: touch; removed - not needed for modern browsers */
        overflow-x: auto;
    }
}

@container (max-width: 475px) {
    .sparkles-footer-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* ========== ACCESSIBILITY ========== */
.sparkles-nav-link:focus,
.sparkles-dropdown-item:focus,
.sparkles-sidebar-link:focus {
    --tw-ring-color: var(--color-primary);
}

/* Hide Hyva's default skiplinks (we use sparkles-skip-link instead) */
body .hyva-skip-nav {
    display: none;
}

@media (min-width: 768px) {

    body .sparkles-skip-link:focus,
    body .sparkles-skip-link:active {
        position: fixed;
        left: 1rem;
        top: 1rem;
        width: auto;
        height: auto;
        min-height: auto;
        margin: 0;
        padding: 1rem 1.5rem;
        overflow: visible;
        clip: auto;
        white-space: normal;
        border-width: 0;
        border-radius: 0.375rem;
        background-color: var(--color-primary);
        color: white;
        font-weight: 600;
        font-size: 1rem;
        text-decoration: none;
        z-index: var(--z-skip-link);
        outline: 3px solid rgba(255, 255, 255, .8);
        outline-offset: 2px;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .3), 0 8px 10px -6px rgba(0, 0, 0, .3);
        line-height: 1.5;
    }
}

/* ========== SEARCH AUTOCOMPLETE ENHANCED ========== */
.sparkles-search-enhanced {
    position: relative;
    width: 100%;
}

.sparkles-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1));
    --tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    border-radius: 0 0 .5rem .5rem;
    max-height: 24rem;
    overflow-y: auto;
    z-index: var(--z-popover);
}

.sparkles-search-highlight {
    --tw-bg-opacity: 1;
    background-color: var(--color-warning);
    background-color: color-mix(in srgb, var(--color-warning, rgb(245, 158, 11)) 30%, transparent);
    font-weight: 600;
}


.sparkles-success-pulse {
    animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }
}