/* ATENA pretraga sa predlozima .at-suggest (DESIGN 5.14) - combobox + panel sa grupama rezultata.
   Učitava se globalno (header i strana rezultata). */

.at-suggest{position:relative;width:100%}
.at-suggest__form{position:relative;display:flex;align-items:center}
.at-suggest__icon{position:absolute;left:14px;width:20px;height:20px;color:var(--at-muted);pointer-events:none}
.at-suggest__input{width:100%;height:52px;padding:0 100px 0 44px;border:1px solid var(--at-line-strong);border-radius:var(--at-radius-md);background:var(--at-surface);color:var(--at-ink);font-size:1rem;appearance:none;transition:border-color var(--at-d-fast) var(--at-ease-out),box-shadow var(--at-d-fast) var(--at-ease-out)}
.at-suggest__input::placeholder{color:var(--at-muted)}
.at-suggest__input::-webkit-search-cancel-button,.at-suggest__input::-webkit-search-decoration{appearance:none}
.at-suggest__input:hover{border-color:var(--at-ink)}
.at-suggest__input:focus{outline:none;border-color:var(--at-accent);box-shadow:var(--at-ring)}
.at-suggest.is-open .at-suggest__input{border-bottom-left-radius:0;border-bottom-right-radius:0}
.at-suggest__clear{position:absolute;right:76px;display:grid;place-content:center;width:32px;height:32px;border-radius:50%;color:var(--at-muted);transition:background-color var(--at-d-fast) var(--at-ease-out),color var(--at-d-fast) var(--at-ease-out)}
.at-suggest__clear:hover{background:var(--at-surface-2);color:var(--at-ink)}
.at-suggest__clear svg{width:16px;height:16px}
.at-suggest__submit{position:absolute;right:6px;height:40px;padding:0 var(--at-s-4);border-radius:var(--at-radius-sm);background:var(--at-ink);color:var(--at-bg);font-size:var(--at-fs-small);font-weight:600;transition:background-color var(--at-d-base) var(--at-ease-out)}
.at-suggest__submit:hover{background:var(--at-accent)}

/* Kompaktna varijanta (header) */
.at-suggest--compact .at-suggest__input{height:40px;padding:0 40px 0 38px;font-size:var(--at-fs-small)}
.at-suggest--compact .at-suggest__icon{left:11px;width:18px;height:18px}
.at-suggest--compact .at-suggest__submit{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
.at-suggest--compact .at-suggest__clear{right:4px}

/* Panel predloga */
.at-suggest__panel{position:absolute;left:0;right:0;top:100%;z-index:var(--at-z-dropdown);max-height:min(70vh,560px);overflow-y:auto;overscroll-behavior:contain;padding:var(--at-s-2);background:var(--at-surface);border:1px solid var(--at-line);border-top:0;border-radius:0 0 var(--at-radius-md) var(--at-radius-md);box-shadow:var(--at-shadow-md);animation:at-suggest-in var(--at-d-base) var(--at-ease-out) both}
.at-suggest--compact .at-suggest__panel{min-width:min(420px,calc(100vw - 2*var(--at-gutter)));left:auto;top:calc(100% + 8px);border-top:1px solid var(--at-line);border-radius:var(--at-radius-md)}
@keyframes at-suggest-in{from{opacity:0;transform:translateY(-4px)}}
.at-suggest__group{padding:var(--at-s-3) var(--at-s-3) var(--at-s-1);font-size:var(--at-fs-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--at-muted)}
.at-suggest__item{display:flex;align-items:center;gap:var(--at-s-3);padding:var(--at-s-2) var(--at-s-3);border-radius:var(--at-radius-sm);color:var(--at-ink);transition:background-color var(--at-d-fast) var(--at-ease-out)}
.at-suggest__item:hover,.at-suggest__item.is-active,.at-suggest__all.is-active,.at-suggest__cats .at-chip.is-active{background:var(--at-surface-2)}
.at-suggest__img{width:48px;height:48px;flex:none;border-radius:var(--at-radius-sm);overflow:hidden;background:var(--at-surface-2)}
.at-suggest__img img{width:100%;height:100%;object-fit:cover}
.at-suggest__text{flex:1;min-width:0;display:grid;gap:2px}
.at-suggest__name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.at-suggest__name mark{background:transparent;color:var(--at-accent);font-weight:700}
.at-suggest__meta{font-size:var(--at-fs-micro);color:var(--at-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.at-suggest__item--cat{min-height:44px}
.at-suggest__item--cat svg{width:18px;height:18px;color:var(--at-muted)}
.at-suggest__item .at-price{font-size:var(--at-fs-body);flex:none}
.at-suggest__all{display:flex;align-items:center;gap:var(--at-s-2);margin-top:var(--at-s-2);padding:var(--at-s-3);border-top:1px solid var(--at-line);border-radius:0 0 var(--at-radius-sm) var(--at-radius-sm);font-weight:600;font-size:var(--at-fs-small);color:var(--at-accent)}
.at-suggest__all svg{width:18px;height:18px;margin-left:auto;transition:transform var(--at-d-base) var(--at-ease-out)}
.at-suggest__all:hover svg{transform:translateX(4px)}
.at-suggest__n{display:inline-grid;place-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:var(--at-radius-pill);background:var(--at-accent-soft);font-size:var(--at-fs-micro);font-variant-numeric:tabular-nums}
.at-suggest__none{padding:var(--at-s-3);font-size:var(--at-fs-small);color:var(--at-ink-2)}
.at-suggest__cats{padding:0 var(--at-s-3) var(--at-s-3)}
.at-suggest__recent{display:flex;flex-wrap:wrap;gap:var(--at-s-2);padding:0 var(--at-s-3) var(--at-s-3)}
.at-suggest__recent .at-chip{height:32px;font-size:var(--at-fs-micro)}