.search-wrapper {
    position: fixed;
    top: 0;
    width: 100%;
    color: var(--theme-color);
    z-index: 402; /* 402 instead of 401 to get over campus switcher */
    font-family: var(--font-family);
}

.search-wrapper > div {
    background-color: var(--theme-bg);
    /* background-color: red; */
    margin: 1rem;
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.search-input-wrapper {
    position: relative;
    width: 100%;
}

.search-wrapper input {
    box-sizing: border-box;
    width: 100%;
    padding: 1rem 3rem 1rem 1.5rem; /* Add right padding for clear button */
    font-size: 1.5rem;
    border-radius: 1rem;
    border: 1px solid var(--theme-color);
    background-color: var(--theme-bg);
    color: var(--theme-color);
    margin: 0;
    outline: none;
}

.search-clear-btn {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--theme-color);
    font-size: 2rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.nav-clear-btn {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--theme-color);
    font-size: 2rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.search-clear-btn:hover {
    opacity: 1;
}

.nav-clear-btn:hover {
    opacity: 1;
}

.search-results {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    font-size: 1.5rem;
    margin-left: 0.5rem;
    max-height: 42vh;
    overflow: auto;
}

.search-result-item {
    display: flex;
    align-items: center;
    column-gap: 1rem;
    cursor: pointer;
}

.search-result-item i {
    font-size: 1.7rem;
}

.search-btn {
    position: relative;
    color: var(--theme-color);
    background-color: var(--theme-bg);
    overflow: clip;
    isolation: isolate;
    z-index: 0;
    padding: 1.7rem;
    border-radius: 5rem;
    font-size: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    pointer-events: all;
    cursor: pointer;
    transition: color 0.3s ease-in-out;
}

.search-btn::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: conic-gradient(
        from 0deg,
        hsla(0, 100%, 70%, 1),
        hsla(30, 100%, 70%, 1),
        hsla(60, 100%, 70%, 1),
        hsla(120, 100%, 70%, 1),
        hsla(180, 100%, 70%, 1),
        hsla(240, 100%, 70%, 1),
        hsla(300, 100%, 70%, 1),
        hsla(360, 100%, 70%, 1)
    );
    filter: blur(40px) saturate(1.5);
    transform-origin: 50% 50%;
    animation: simGradientSwirl 10s cubic-bezier(.4, 0, .2, 1) infinite alternate;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.search-btn.gradient-active::before {
    opacity: 1;
}

/* Marquee scrolling for overflowing recent search/navigation text */
.marquee-container {
    position: relative;
    overflow: hidden;
}

.marquee-track {
    display: inline-flex;
    white-space: nowrap;
    will-change: transform;
    animation-name: searchMarqueeScroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: var(--marquee-duration, 12s);
}

.marquee-text {
    padding-right: 3rem; /* gap between repetitions so it doesn't look cramped */
}

@keyframes searchMarqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* two identical spans in track, shift by half for seamless loop */
}

/* Pause marquee on hover for accessibility */
.marquee-container:hover .marquee-track {
    animation-play-state: paused;
}

/* New wrapper to apply the fade effect instantly */
.overflow-fade {
    position: relative;
    flex: 1;
    overflow: hidden;
}

.overflow-fade::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 6rem; /* Increased width for a longer fade */
    background: linear-gradient(to left, var(--theme-bg) 30%, transparent 100%); /* Start solid, then fade */
    pointer-events: none; /* Allows clicks to pass through to elements behind it */
}