/* search_styles.css */

.search-container {
    position: fixed;
    top: 10px;
    left: 50px;
    width: 300px;
    z-index: 1010;
    background: rgba(34, 40, 49, 0.38);
    box-shadow: 0 8px 32px 0 rgba(230, 230, 236, 0.18);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1.5px solid rgba(231, 215, 215, 0.13);
    border-radius: 12px;
    color: #ffffff;
    transition: background 0.3s, box-shadow 0.3s;
}

#search-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid rgba(231, 222, 222, 0.18);
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 0.95rem;
    background: rgba(255,255,255,0.18);
    color: #f8f8f8;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

#search-results {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 1011;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(236, 226, 226, 0.18);
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 250px;
    overflow-y: auto;
    box-shadow: 0 2px 5px rgba(238, 234, 234, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ecf0f5;
}

.search-results-hidden {
    display: none;
}

.search-result-item {
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
}

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

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

.search-result-item strong {
    color: #007bff;
}

.search-result-item .result-details {
    font-size: 0.85em;
    color: #eee7e7;
}

.search-result-item i {
    margin-right: 8px;
    color: #e0e0e0;
    width: 16px;
    text-align: center;
}

.search-result-item .fa-bus { color: #ffc107; }
.search-result-item .fa-tram { color: #007bff; }
.search-result-item .fa-map-marker-alt { color: #28a745; }

/* Jeszcze mniejszy search na telefonie */
@media (max-width: 600px) {
    .search-container {
        width: 60vw !important;
        left: 4vw !important;
        top: 4px !important;
        font-size: 0.7em !important;
        padding: 1px 1px !important;
        border-radius: 5px !important;
        min-width: 0 !important;
        max-width: 90vw !important;
    }
    #search-input {
        font-size: 0.7em !important;
        padding: 2px 4px !important;
        border-radius: 2px !important;
        min-width: 0 !important;
        height: 26px !important;
    }
    #search-results {
        font-size: 0.7em !important;
        border-radius: 0 0 2px 2px !important;
        max-height: 60px !important;
    }
    .search-result-item {
        padding: 3px 4px !important;
        font-size: 0.7em !important;
    }
    .search-result-item .result-details {
        font-size: 0.6em !important;
    }
}