/* AgroFakt instant search — slide-down overlay z dropdown wyników. */

/* ---------- Trigger (lupa w nawigacji) ----------
 * Trigger jest `<a role="button">` — dziedziczy theme'owy `header ul li a` styling
 * (padding, font-size, baseline) automatycznie. Tu tylko hover/focus + cursor.
 */
.afss-instant__trigger {
    cursor: pointer;
    transition: color 0.15s ease;
}
.afss-instant__trigger:hover,
.afss-instant__trigger:focus {
    color: #dc1900;
    outline: none;
    text-decoration: none;
}
.afss-instant__trigger:focus-visible {
    outline: 2px solid rgba(220, 25, 0, 0.5);
    outline-offset: 2px;
}
/* Theme ma `header ul li.search a span {display: none}` — to zostaje (label hidden) */
.afss-instant__trigger:hover,
.afss-instant__trigger:focus {
    color: #dc1900;
    outline: none;
}
/* Focus ring tylko keyboard — nie podczas klika, żeby nie skakał layout */
.afss-instant__trigger:focus-visible {
    outline: 2px solid rgba(220, 25, 0, 0.5);
    outline-offset: 2px;
}
.afss-instant__trigger-label {
    display: none;
}
@media (max-width: 600px) {
    .afss-instant__trigger-label {
        display: inline;
        margin-left: 0.35rem;
    }
}

/* ---------- Overlay container ---------- */
.afss-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: block;
}
.afss-search-overlay[hidden] {
    display: none;
}

.afss-search-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 25, 16, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.18s ease;
}
.afss-search-overlay.is-open .afss-search-overlay__backdrop {
    opacity: 1;
}

/* ---------- Panel — białe pole z inputem + dropdown ---------- */
.afss-search-overlay__panel {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 720px;
    padding: 1rem;
    box-sizing: border-box;
    transform: translateY(-12px);
    opacity: 0;
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.18s ease;
}
.afss-search-overlay.is-open .afss-search-overlay__panel {
    transform: translateY(0);
    opacity: 1;
}

/* ---------- Search bar ---------- */
.afss-search-overlay__bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.afss-search-overlay__bar:focus-within {
    border-color: #dc1900;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18), 0 0 0 3px rgba(220, 25, 0, 0.15);
}

.afss-search-overlay__icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: #666;
}

.afss-search-overlay__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    padding: 0.65rem 0.25rem;
    font-size: 1rem;
    color: #222;
    font-family: inherit;
}
.afss-search-overlay__input::placeholder {
    color: #999;
}

.afss-search-overlay__clear {
    flex-shrink: 0;
    background: #f5f5f5;
    border: 0;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    /* On mobile WCAG 2.5.5 / Apple HIG: 44×44px touch target via padding box */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #555;
    padding: 0;
    transition: background 0.15s ease;
}
@media (max-width: 600px) {
    .afss-search-overlay__clear {
        width: 36px;
        height: 36px;
    }
}
.afss-search-overlay__clear:hover {
    background: #eaeaea;
}

.afss-search-overlay__close {
    flex-shrink: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: #555;
    padding: 0.45rem 0.65rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-family: inherit;
    transition: background 0.15s ease;
}
.afss-search-overlay__close:hover {
    background: #f5f5f5;
}
.afss-search-overlay__close-kbd {
    font-family: inherit;
    font-size: 0.7rem;
    padding: 0.1rem 0.35rem;
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    color: #666;
    line-height: 1;
}
@media (max-width: 600px) {
    .afss-search-overlay__close-text { display: none; }
    .afss-search-overlay__close-kbd  { display: none; }
    .afss-search-overlay__close::before {
        content: '×';
        font-size: 1.5rem;
        line-height: 1;
        color: #555;
    }
}

/* ---------- Dropdown z wynikami ---------- */
.afss-search-overlay__dropdown {
    margin-top: 0.5rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
    max-height: min(60vh, 520px);
    overflow-y: auto;
    overflow-x: hidden;
    /* Pokazuje się tylko gdy ma zawartość — render wkleja innerHTML */
}
.afss-search-overlay__dropdown:empty {
    display: none;
}

/* Loading state: spinner w prawym górnym rogu, poprzednie wyniki przygaszone (≠ pusty modal) */
.afss-search-overlay__dropdown.is-loading {
    position: relative;
}
.afss-search-overlay__dropdown.is-loading::after {
    content: '';
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 18px;
    height: 18px;
    border: 2.5px solid #e5e5e5;
    border-top-color: #dc1900;
    border-radius: 50%;
    animation: afss-spin 0.7s linear infinite;
    z-index: 1;
}
@keyframes afss-spin {
    to { transform: rotate(360deg); }
}
.afss-search-overlay__dropdown.is-loading > *:not(.afss-instant__skeleton) {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* Skeleton placeholder — pokazany gdy dropdown był pusty i właśnie zaczyna ładować */
.afss-instant__skeleton {
    list-style: none;
    margin: 0;
    padding: 0.4rem 0;
}
.afss-instant__skeleton-row {
    display: flex;
    gap: 0.85rem;
    padding: 0.7rem 1rem;
    align-items: center;
}
.afss-instant__skeleton-thumb {
    flex-shrink: 0;
    width: 56px;
    height: 42px;
    border-radius: 6px;
    background: linear-gradient(90deg, #eee 0%, #f5f5f5 50%, #eee 100%);
    background-size: 200% 100%;
    animation: afss-shimmer 1.4s ease infinite;
}
.afss-instant__skeleton-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.afss-instant__skeleton-text::before,
.afss-instant__skeleton-text::after {
    content: '';
    height: 12px;
    border-radius: 3px;
    background: linear-gradient(90deg, #eee 0%, #f5f5f5 50%, #eee 100%);
    background-size: 200% 100%;
    animation: afss-shimmer 1.4s ease infinite;
}
.afss-instant__skeleton-text::before { width: 85%; }
.afss-instant__skeleton-text::after  { width: 45%; height: 9px; }
@keyframes afss-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Empty / error states */
.afss-instant__empty,
.afss-instant__error {
    margin: 0;
    padding: 1rem 1.25rem;
    color: #666;
    font-size: 0.95rem;
}
.afss-instant__error {
    color: #b53b1c;
}

/* Reset agresywny — theme agrofakt ma ul/li/aside style które psują layout dropdownu */
.afss-search-overlay,
.afss-search-overlay * {
    box-sizing: border-box;
}
.afss-search-overlay ul,
.afss-search-overlay li {
    list-style: none !important;
    background: transparent !important;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    color: inherit;
}
.afss-search-overlay img {
    max-width: none;
    height: auto;
    border: 0;
    border-radius: 6px;
    box-shadow: none;
    margin: 0;
    display: block;
}
.afss-search-overlay h1,
.afss-search-overlay h2,
.afss-search-overlay h3,
.afss-search-overlay h4 {
    margin: 0;
    padding: 0;
    color: inherit;
    font-weight: inherit;
    line-height: inherit;
}
.afss-search-overlay a {
    color: inherit;
    text-decoration: none;
    background: transparent;
}

/* Lista wyników */
.afss-instant__list {
    list-style: none;
    margin: 0;
    padding: 0.4rem 0;
}
.afss-instant__item {
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
}
.afss-instant__link {
    display: flex;
    gap: 0.85rem;
    /* Min height ~46px (padding + thumb 42px) — WCAG 2.5.5 touch target  */
    padding: 0.7rem 1rem;
    text-decoration: none;
    color: inherit;
    align-items: center;
    border-left: 3px solid transparent;
    min-height: 44px;
    box-sizing: border-box;
}
@media (max-width: 600px) {
    .afss-instant__link {
        padding: 0.85rem 1rem;  /* większy touch obszar na mobile */
    }
}
.afss-instant__item[data-afss-active="true"] .afss-instant__link,
.afss-instant__link:hover {
    background: #fff5f0;
    border-left-color: #dc1900;
    text-decoration: none;
    color: inherit;
}

.afss-instant__thumb {
    flex-shrink: 0;
    width: 56px;
    height: 42px;
    object-fit: cover;
    border-radius: 6px;
    background: #eee;
    margin: 0;
}
.afss-instant__thumb--empty {
    background: linear-gradient(135deg, #eee, #ddd);
}

.afss-instant__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.afss-instant__title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    color: #222;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.afss-instant__title mark {
    background: #fff5b3;
    padding: 0 0.1em;
    color: inherit;
    font-weight: 700;
}
.afss-instant__byline {
    color: #666;
    font-size: 0.78rem;
    margin-top: 0.2rem;
}

/* ---------- Footer ---------- */
.afss-search-overlay__footer {
    margin-top: 0.5rem;
    padding: 0.55rem 1rem;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: #666;
}
.afss-search-overlay__hint {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.afss-search-overlay__hint kbd {
    font-family: inherit;
    font-size: 0.7rem;
    padding: 0.1rem 0.35rem;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    color: #666;
    line-height: 1;
    margin-right: 0.15rem;
}
.afss-search-overlay__hint--desktop {
    display: none;
}
@media (min-width: 700px) {
    .afss-search-overlay__hint--desktop {
        display: inline-flex;
    }
}
.afss-search-overlay__see-all {
    color: #dc1900;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}
.afss-search-overlay__see-all:hover {
    text-decoration: underline;
}

/* ---------- Mobile fullscreen ---------- */
@media (max-width: 600px) {
    .afss-search-overlay__panel {
        max-width: 100%;
        padding: 0.65rem;
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
    }
    .afss-search-overlay__bar {
        border-radius: 10px;
    }
    .afss-search-overlay__dropdown {
        flex: 1;
        max-height: none;
        margin-top: 0.6rem;
    }
    .afss-search-overlay__input {
        font-size: 16px;  /* iOS nie zoomuje */
    }
}

/* ---------- Body lock when open ---------- */
body.afss-search-open {
    overflow: hidden;
}