/**
 * SEARCH AUTOCOMPLETE – Profesionální našeptávač
 * GIGA SHOP – živé vyhledávání s miniaturami, cenou, skladem
 * v2.0 – 2026-03-03
 */

/* ================================================
   SEARCH WRAPPER
   ================================================ */
.search-wrapper {
    position: relative;
    width: 100%;
    display: flex;
}

.search-wrapper .search-input {
    flex: 1;
    padding: 13px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 14px 0 0 14px;
    font-size: 0.97rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.25s ease;
    background: #fff;
    color: #1a202c;
}

.search-wrapper .search-input::placeholder {
    color: #a0aec0;
}

.search-wrapper .search-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.12);
}

.search-wrapper .search-btn {
    padding: 13px 22px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    border-radius: 0 14px 14px 0;
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-wrapper .search-btn:hover {
    background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
}

/* ================================================
   AUTOCOMPLETE DROPDOWN
   ================================================ */
.search-autocomplete {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.16),
                0 4px 16px rgba(0, 0, 0, 0.06);
    z-index: 9999;
    display: none;
    overflow: hidden;
    border: 1px solid #e8ecf1;
}

.search-autocomplete.active {
    display: block;
    animation: sa-slideDown 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes sa-slideDown {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ================================================
   LOADING
   ================================================ */
.autocomplete-loading {
    display: none;
    padding: 28px 20px;
    text-align: center;
    color: #718096;
    font-size: 0.92rem;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.autocomplete-loading .sa-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #e2e8f0;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: sa-spin 0.7s linear infinite;
}

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

.search-autocomplete.loading .autocomplete-loading {
    display: flex;
}

.search-autocomplete.loading .autocomplete-results,
.search-autocomplete.loading .autocomplete-footer {
    display: none;
}

/* ================================================
   RESULTS LIST
   ================================================ */
.autocomplete-results {
    max-height: 420px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 transparent;
}

.autocomplete-results::-webkit-scrollbar { width: 5px; }
.autocomplete-results::-webkit-scrollbar-track { background: transparent; }
.autocomplete-results::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 10px; }

/* ================================================
   SINGLE RESULT ITEM
   ================================================ */
.sa-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    text-decoration: none !important;
    color: inherit !important;
    transition: background 0.15s ease;
    gap: 14px;
    border-bottom: 1px solid #f4f6f8;
    cursor: pointer;
}

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

.sa-item:hover,
.sa-item.selected {
    background: #f7f8fc;
}

.sa-item:hover .sa-item-name,
.sa-item.selected .sa-item-name {
    color: #667eea;
}

/* --- Image thumb --- */
.sa-item-img {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f8f9fb;
    border: 1px solid #edf0f4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sa-item-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.25s ease;
}

.sa-item:hover .sa-item-img img {
    transform: scale(1.08);
}

/* --- Info --- */
.sa-item-info {
    flex: 1;
    min-width: 0;
}

.sa-item-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 3px 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s ease;
}

.sa-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: #94a3b8;
    margin: 0;
}

.sa-item-brand {
    color: #667eea;
    font-weight: 500;
}

.sa-item-stock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sa-item-stock .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.sa-item-stock.in-stock .dot { background: #22c55e; }
.sa-item-stock.in-stock { color: #16a34a; }

.sa-item-stock.out-of-stock .dot { background: #ef4444; }
.sa-item-stock.out-of-stock { color: #dc2626; }

/* --- Price --- */
.sa-item-price {
    font-size: 1.02rem;
    font-weight: 700;
    color: #667eea;
    white-space: nowrap;
    text-align: right;
    flex-shrink: 0;
    min-width: 80px;
}

/* ================================================
   FOOTER – SHOW ALL
   ================================================ */
.autocomplete-footer {
    padding: 11px 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #eef1ff 100%);
    border-top: 1px solid #e8ecf1;
    display: none;
    text-align: center;
}

.autocomplete-footer.has-more {
    display: block;
}

.sa-show-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    transition: color 0.2s ease;
    padding: 4px 0;
}

.sa-show-all:hover {
    color: #764ba2;
}

.sa-show-all i {
    transition: transform 0.2s ease;
    font-size: 0.78rem;
}

.sa-show-all:hover i {
    transform: translateX(4px);
}

/* ================================================
   NO RESULTS
   ================================================ */
.sa-no-results {
    padding: 32px 20px;
    text-align: center;
    color: #718096;
}

.sa-no-results i {
    font-size: 2.2rem;
    color: #cbd5e0;
    margin-bottom: 10px;
    display: block;
}

.sa-no-results p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
}

.sa-no-results strong {
    color: #475569;
}

/* ================================================
   HIGHLIGHT MATCHED TEXT
   ================================================ */
.sa-item-name mark {
    background: rgba(102, 126, 234, 0.18);
    color: inherit;
    padding: 1px 3px;
    border-radius: 3px;
    font-weight: 700;
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 768px) {
    .search-autocomplete {
        position: fixed;
        top: auto;
        left: 8px;
        right: 8px;
        max-height: 65vh;
        border-radius: 14px;
    }

    .autocomplete-results {
        max-height: 55vh;
    }

    .sa-item {
        padding: 9px 12px;
        gap: 10px;
    }

    .sa-item-img {
        width: 44px;
        height: 44px;
        border-radius: 8px;
    }

    .sa-item-name { font-size: 0.86rem; }
    .sa-item-price { font-size: 0.92rem; min-width: 70px; }
}