/* =========================================
   BASE SEARCH (ALL INSTANCES)
========================================= */

.static-search {
    position: relative;
    direction: rtl;
    font-family: inherit;
}

/* Inner wrapper */
.static-search__inner {
    position: relative;
}

/* Input field */
.static-search__input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 15px;
    font-size: 14px;
    outline: none;
    transition: border-color .2s ease;
}


/* Results dropdown */
.static-search__results {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    z-index: 9999;
    display: none;
    max-height: 270px;
	border-radius:15px;
	text-align: right;
    overflow-y: auto;
}

/* Show results when active */
.static-search--has-results .static-search__results {
    display: block;
}

/* Result items */
.static-search__result-item {
    display: block;
    padding: 10px 12px;
    text-decoration: none;
    border-bottom: 1px solid #f1f1f1;
    color: #515151;
	transition: background .2s ease;
}

.static-search__result-item:hover {
    background: #f9f9f9;
	transition: background .2s ease;
}

.static-search__result-title {
    font-weight: 600;
    margin-bottom: 4px;
	color: #000000;
}

.static-search__no-results {
    padding: 12px;
    color: #777;
}

/* Highlight */
mark {
    background: yellow;
    padding: 0 2px;
}



/* =========================================
   HEADER VARIANT – PREMIUM VERSION
========================================= */

.static-search--header {
    position: relative;
    display: flex;
    align-items: center;
}

/* -------------------------
   ICON (Minimal & Modern)
-------------------------- */

.static-search--header .static-search__toggle {
    cursor: pointer;
    font-size: 18px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.85);
    transition: 
        opacity .25s ease,
        color .25s ease,
        transform .25s ease;
}

/* Subtle hover */
.static-search--header .static-search__toggle:hover {
    transform: scale(1.08);
}

/* Hide icon when open */
.static-search--header.static-search--open 
.static-search__toggle {
    opacity: 0;
    pointer-events: none;
}


/* Scroll state color change */
body.static-search-scrolled 
.static-search--header .static-search__toggle {
    color: orange;
}


/* -------------------------
   INPUT EXPANSION
-------------------------- */

.static-search--header .static-search__inner {
    position: relative;
}

/* Collapsed state */
.static-search--header .static-search__input {
    width: 0;
    opacity: 0;
    padding: 7px 0;
    border-radius: 20px;
    border: none;
    background: white;
    box-shadow: 0 0 0 rgba(0,0,0,0);

    transition:
        width .4s cubic-bezier(.4,0,.2,1),
        opacity .25s ease,
        padding .3s ease,
        box-shadow .3s ease;
}

/* Expanded */
.static-search--header.static-search--open 
.static-search__input {
    width: 400px;
    opacity: 1;
    padding: 7px 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* Stronger shadow when scrolled */
body.static-search-scrolled 
.static-search--header.static-search--open 
.static-search__input {
    box-shadow: 0 10px 35px rgba(0,0,0,0.25);
}


/* -------------------------
   RESULTS DROPDOWN
-------------------------- */

.static-search--header .static-search__results {
    top: 115%;
    right: 0;
    width: 100%;
    border-radius: 15px;
}

/* Hide when closed */
.static-search--header:not(.static-search--open) 
.static-search__results {
    display: none;
}


/* =========================================
   SIDEBAR / MOBILE VARIANTS
========================================= */

.static-search--sidebar .static-search__input {
    font-size: 15px;
}

.static-search--mobile .static-search__input {
    font-size: 16px;
}
.static-search--header .static-search__input {
    pointer-events: auto;   /* allow input to work even when width=0 */
}
/* Remove focus/active outline from the header search icon */
.static-search--header .static-search__toggle {
    outline: none;
    box-shadow: none;
}

.static-search--header .static-search__toggle:focus {
	transform: scale(0.02) ease;
}
/* Also cover keyboard/mouse focus states explicitly */
.static-search--header .static-search__toggle:focus,
.static-search--header .static-search__toggle:active {
    outline: none !important;
    box-shadow: none !important;
}
/* Title */
.static-search__result-title {
    font-weight: 600;
    font-size: 14px;
    color: #222;
}

/* Category row */
.static-search__result-meta {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #666;
}

/* Category icon */
.static-search__result-icon {
    display: inline-flex;
    color: #999;
}

/* Category text */
.static-search__result-category {
    font-weight: 500;
}

/* Hover effect */
.static-search__result-item:hover .static-search__result-category {
    color: #111;
}

/* Highlight */
.static-search mark {
    background: #ffeaa7;
    padding: 0 2px;
    border-radius: 2px;
}
.static-search--docs-sidebar {
	margin-bottom: 20px;
}