/* Search Container Styles */
.search-container {
    width: 100%;
}

/* Search wrapper to contain the input and dropdown */
.search-wrapper {
    position: relative;
    width: 100%;
}

/* Ensure suggestions dropdown is in normal document flow */
.suggestions-dropdown {
    position: static !important;
    margin-top: -1px; /* Overlap the border with input */
}

.search-results-container {
    transition: all 0.3s ease;
    font-family: "IBMPlexMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Rotating placeholder animation */
.rotating-placeholder::placeholder {
    opacity: var(--placeholder-opacity, 1);
    transition: opacity 0.3s ease-in-out;
}

/* Loading spinner */
.loading-spinner {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #b7ffa2;
    animation: spin 1s ease-in-out infinite;
    margin-bottom: 0.5rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Tool image container */
.tool-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Line clamp for description text */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Terminal Trove specific styles */
.results-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.results-header h3,
.result-item h4 {
    margin: 0;
    font-weight: normal;
}

.results-header,
.results-footer button {
    text-transform: uppercase;
}

/* Enhanced search suggestions styling */
.suggestions-dropdown {
    font-family: "IBMPlexMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.suggestion-item {
    transition: all 0.15s ease;
    background: transparent;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    padding: 12px;
    border-bottom: 1px solid #333;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.suggestion-item:hover {
    background-color: #111;
    transform: translateX(2px);
}

.suggestion-item.selected {
    background-color: #111;
    border-left: 2px solid #b7ffa2;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-content {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.suggestion-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.suggestion-icon.tool {
    color: #b7ffa2;
}

.suggestion-icon.category {
    color: #60a5fa;
}

.suggestion-icon.language {
    color: #a78bfa;
}

.suggestion-text {
    min-width: 0;
}

.suggestion-title {
    color: white;
    font-family: "IBMPlexMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 14px;
    margin: 0;
}

.suggestion-meta {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 4px;
}

.suggestion-type {
    font-size: 12px;
    color: #9ca3af;
    text-transform: uppercase;
    font-family: "IBMPlexMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.suggestion-footer {
    padding: 8px;
    text-align: center;
    border-top: 1px solid #333;
    background-color: #0a0a0a;
}

.suggestion-footer-text {
    font-size: 12px;
    color: #9ca3af;
    font-family: "IBMPlexMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    margin: 0;
}

/* Search Results Styling */
.search-loading {
    padding: 24px;
    text-align: center;
}

.search-loading p {
    color: white;
    margin: 0;
}

.no-results {
    padding: 24px;
    text-align: center;
}

.no-results p {
    color: white;
    margin: 0;
}

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

.results-list li {
    border-bottom: 1px solid #333;
}

.results-list li:last-child {
    border-bottom: none;
}

.result-item {
    display: block;
    padding: 16px;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.result-item:hover {
    background-color: #111;
}

.result-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.result-image {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-image img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    padding: 4px;
}

.result-image svg {
    width: 32px;
    height: 32px;
    color: #6b7280;
}

.result-details {
    flex: 1;
    min-width: 0;
}

.result-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
}

.result-title {
    font-size: 16px;
    font-family: "IBMPlexMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    color: #b7ffa2;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-language {
    font-size: 12px;
    padding: 3px 12px;
    font-family: "IBMPlexMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    flex-shrink: 0;
}

.result-tagline {
    font-size: 14px;
    text-align: left;
    color: #b7ffa2;
    font-family: "IBMPlexMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    margin-bottom: 8px;
    margin: 0 0 8px 0;
}

.result-description {
    font-size: 14px;
    color: white;
    margin-bottom: 8px;
    margin: 0 0 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.result-category {
    display: inline-block;
    padding: 4px 8px;
    font-size: 12px;
    text-transform: uppercase;
    font-family: "IBMPlexMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    border: 1px solid #b7ffa2;
    color: #b7ffa2;
    background: transparent;
}

.badge-c {
    background-color: #555555;
    color: #FFF;
}

.badge-cpp {
    background-color: #f34b7d;
    color: #FFF;
}

.badge-csharp {
    background-color: #178600;
    color: #FFF;
}

.badge-golang {
    background-color: #02ADD7;
    color: #000;
}

.badge-rust {
    background-color: #F46629;
    color: #000;
}

.badge-js {
    background-color: #f1e05a;
    color: #000;
}

.badge-zig {
    background-color: #EB915F;
    color: #000;
}

.badge-dlang {
    background-color: #ba595e;
    color: #000;
}

.badge-shell {
    background-color: #89e051;
    color: #000;
}

.badge-python {
    background-color: #5D9DCB;
    color: #000;
}

.badge-swift {
    background-color: #F05138;
    color: #FFF;
}

.badge-asm-x86 {
    background-color: #6E4C13;
    color: #FFF;
}

.badge-dart {
    background-color: #00B4AB;
    color: #000;
}

.badge-ocaml {
    background-color: #EE6A21;
    color: #000;
}

.badge-ruby {
    background-color: #701516;
    color: #FFF;
}

.badge-crystal {
    background-color: #140f46;
    color: #FFF;
}

.badge-java {
    background-color: #b07219;
    color: #FFF;
}

.badge-lua {
    background-color: #000080;
    color: #FFF;
}

.badge-objc {
    background-color: #438eff;
    color: #000;
}

.badge-objcpp {
    background-color: #6866fb;
    color: #FFF;
}

.badge-nim {
    background-color: #ffc200;
    color: #000;
}

.badge-pascal {
    background-color: #E3F171;
    color: #000;
}

.badge-perl {
    background-color: #0298c3;
    color: #000;
}

.badge-raku {
    background-color: #0000fb;
    color: #FFF;
}

.badge-fsharp {
    background-color: #b845fc;
    color: #000;
}

.badge-mojo {
    background-color: #B5C1F5;
    color: #000;
}

.badge-vlang {
    background-color: #4f87c4;
    color: #000;
}

.badge-odin {
    background-color: #60AFFE;
    color: #000;
}

.badge-ada {
    background-color: #02f88c;
    color: #000;
}

.badge-wasm {
    background-color: #04133b;
    color: #FFF;
}

.badge-haskell {
    background-color: #C389BC;
    color: #000;
}

.badge-common-lisp {
    background-color: #3fb68b;
    color: #000;
}

.badge-racket {
    background-color: #3c5caa;
    color: #FFF;
}

.badge-scala {
    background-color: #c22d40;
    color: #FFF;
}

.badge-clojure {
    background-color: #db5855;
    color: #FFF;
}

.badge-scheme {
    background-color: #1e4aec;
    color: #FFF;
}

.badge-kotlin {
    background-color: #A97BFF;
    color: #000;
}

.badge-julia {
    background-color: #a270ba;
    color: #000;
}

.badge-cobol {
    background-color: #9E6A13;
    color: #000;
}

.badge-haxe {
    background-color: #DF7915;
    color: #000;
}

.badge-typescript {
    background-color: #3178C4;
    color: #000;
}

.badge-vala {
    background-color: #FBE5CE;
    color: #000;
}

.badge-qml {
    background-color: #45A52D;
    color: #000;
}

/* Hide suggestions on mobile */
@media (max-width: 768px) {
    .suggestions-dropdown {
        display: none !important;
    }
}

/* Search input focus styles */
.search-container input:focus {
    outline: none;
    border-color: #b7ffa2;
    box-shadow: 0 0 0 2px rgba(183, 255, 162, 0.2);
}

/* Search button styles */
.search-container button:hover {
    transform: scale(1.05);
}

/* Search container positioning */
.search-container .input-group {
    border-radius: 0;
}

.search-container .input {
    border-radius: 0;
}

.search-container .btn {
    border-radius: 0;
}