/*
 * F-Tech Search: podpowiedzi w nagłówku.
 * Tokeny ft-core v1.0.0 z wartościami zapasowymi, gdy warstwa nie jest wgrana.
 */

.ftech-srch-sug-host {
    position: relative;
}

.ftech-srch-sug[hidden],
.ftech-srch-sug [hidden] {
    display: none !important;
}

.ftech-srch-sug {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: var(--ft-z-dropdown, 1000);
    max-height: min(28rem, 70svh);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    background: var(--ft-color-bg, #FFFFFF);
    border: 1px solid var(--ft-color-border, #E2E4E7);
    border-top: 2px solid var(--ft-color-primary, #1A6DCC);
    border-radius: 0 0 var(--ft-radius-md, 8px) var(--ft-radius-md, 8px);
    box-shadow: var(--ft-shadow-lg, 0 12px 32px rgba(17, 20, 24, .12));
    color: var(--ft-color-text, #1B1F23);
    font-family: var(--ft-font-body, 'Instrument Sans', system-ui, sans-serif);
    font-size: var(--ft-text-md, 1rem);
    text-align: start;
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--ft-dur, 200ms) var(--ft-ease, cubic-bezier(.2, .7, .2, 1)),
                transform var(--ft-dur, 200ms) var(--ft-ease, cubic-bezier(.2, .7, .2, 1));
}

@starting-style {
    .ftech-srch-sug {
        opacity: 0;
        transform: translateY(calc(var(--ft-space-1, .25rem) * -1));
    }
}

.ftech-srch-sug__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ftech-srch-sug .ftech-srch-sug__item {
    display: flex;
    align-items: center;
    gap: var(--ft-space-3, .75rem);
    min-height: calc(var(--ft-space-7, 3rem) - var(--ft-space-1, .25rem));
    margin: 0;
    padding: var(--ft-space-3, .75rem) var(--ft-space-4, 1rem);
    border-bottom: 1px solid var(--ft-color-surface, #F5F5F4);
    color: var(--ft-color-text, #1B1F23);
    cursor: pointer;
    transition: background-color var(--ft-dur, 200ms) var(--ft-ease, cubic-bezier(.2, .7, .2, 1)),
                box-shadow var(--ft-dur, 200ms) var(--ft-ease, cubic-bezier(.2, .7, .2, 1));
}

.ftech-srch-sug .ftech-srch-sug__item:last-child {
    border-bottom: 0;
}

.ftech-srch-sug .ftech-srch-sug__item:hover,
.ftech-srch-sug .ftech-srch-sug__item.is-active {
    background: var(--ft-color-primary-soft, #E8F1FB);
}

/* Aktywna opcja ma też znacznik niezależny od koloru tła (WCAG 1.4.1). */
.ftech-srch-sug .ftech-srch-sug__item.is-active {
    box-shadow: inset var(--ft-space-1, .25rem) 0 0 var(--ft-color-primary, #1A6DCC);
}

.ftech-srch-sug__img {
    flex: 0 0 auto;
    width: calc(var(--ft-space-7, 3rem) - var(--ft-space-1, .25rem));
    height: calc(var(--ft-space-7, 3rem) - var(--ft-space-1, .25rem));
    object-fit: contain;
    border-radius: var(--ft-radius-sm, 4px);
    background: var(--ft-color-surface, #F5F5F4);
}

.ftech-srch-sug__img--empty {
    display: block;
}

.ftech-srch-sug__info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--ft-space-1, .25rem);
    min-width: 0;
}

.ftech-srch-sug__name {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ft-color-text, #1B1F23);
    font-size: var(--ft-text-sm, .875rem);
    font-weight: 600;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.ftech-srch-sug__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ft-space-2, .5rem);
}

.ftech-srch-sug__oe {
    padding: 0 var(--ft-space-2, .5rem);
    border-radius: var(--ft-radius-sm, 4px);
    background: var(--ft-color-primary-soft, #E8F1FB);
    color: var(--ft-color-primary-hover, #0F5BAF);
    font-size: var(--ft-text-xs, .75rem);
    font-weight: 600;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.ftech-srch-sug__price {
    color: var(--ft-color-text, #1B1F23);
    font-size: var(--ft-text-sm, .875rem);
    font-weight: 700;
}

.ftech-srch-sug__stock {
    flex: 0 0 auto;
    width: var(--ft-space-2, .5rem);
    height: var(--ft-space-2, .5rem);
    border-radius: 50%;
    background: var(--ft-color-success, #1E8E3E);
}

.ftech-srch-sug__sr,
.ftech-srch-sug__status {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.ftech-srch-sug__msg {
    margin: 0;
    padding: var(--ft-space-5, 1.5rem) var(--ft-space-4, 1rem);
    color: var(--ft-color-muted, #5C636B);
    font-size: var(--ft-text-sm, .875rem);
    text-align: center;
}

.ftech-srch-sug__msg.is-error {
    color: var(--ft-color-danger, #C62828);
}

.ftech-srch-sug.is-loading .ftech-srch-sug__msg {
    background-image: linear-gradient(90deg, transparent, var(--ft-color-primary-soft, #E8F1FB), transparent);
    background-size: 200% 100%;
    animation: ftech-srch-shimmer 1.2s var(--ft-ease, cubic-bezier(.2, .7, .2, 1)) infinite;
}

@keyframes ftech-srch-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

.ftech-srch-sug .ftech-srch-sug__all {
    justify-content: center;
    gap: var(--ft-space-2, .5rem);
    background: var(--ft-color-surface, #F5F5F4);
    border-top: 1px solid var(--ft-color-border, #E2E4E7);
    color: var(--ft-color-primary-hover, #0F5BAF);
    font-size: var(--ft-text-sm, .875rem);
    font-weight: 600;
}

.ftech-srch-sug .ftech-srch-sug__all svg {
    transition: transform var(--ft-dur, 200ms) var(--ft-ease, cubic-bezier(.2, .7, .2, 1));
}

.ftech-srch-sug .ftech-srch-sug__all:hover svg,
.ftech-srch-sug .ftech-srch-sug__all.is-active svg {
    transform: translateX(var(--ft-space-1, .25rem));
}

@media (prefers-reduced-motion: reduce) {
    .ftech-srch-sug,
    .ftech-srch-sug * {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}