/* MobiQ Search – boje, veličine i tekstovi mijenjaju se u wp-admin → MobiQ Search */
:root{--mqs-text:#1d1d1f;--mqs-muted:#86868b;--mqs-accent:#1d1d1f;--mqs-accent-text:#fff;--mqs-border:#d2d2d7;--mqs-soft:#f5f5f7;--mqs-bg:#fff;--mqs-price:#1d1d1f;--mqs-sale:#1d1d1f;--mqs-icon:#1d1d1f;--mqs-overlay:rgba(0,0,0,.28);--mqs-blur:6px;--mqs-radius:16px;--mqs-width:680px;--mqs-top:72px;--mqs-fs-input:16px;--mqs-fs-label:12px;--mqs-fs-chip:14px;--mqs-fs-name:15px;--mqs-fs-price:15px;--mqs-fs-meta:13px;--mqs-fw-name:500;--mqs-fw-price:600;--mqs-fw-label:600;--mqs-img:72px;--mqs-icon-size:20px;--mqs-cols-m:2;--mqs-cols-d:4}

/* Gumb u zaglavlju */
.mqs-btn{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--mqs-icon-size) + 20px);height:calc(var(--mqs-icon-size) + 20px);padding:0!important;margin:0;border:0!important;border-radius:50%!important;background:none!important;color:var(--mqs-icon)!important;cursor:pointer;box-shadow:none!important;-webkit-tap-highlight-color:transparent}
.mqs-btn:hover{background:var(--mqs-soft)!important}
.mqs-btn svg{width:var(--mqs-icon-size);height:var(--mqs-icon-size);display:block}
.mqs-bar{display:flex;align-items:center;gap:10px;width:100%;min-width:0;max-width:520px;height:44px;padding:0 18px!important;margin:0;border:1px solid var(--mqs-border)!important;border-radius:999px!important;background:var(--mqs-bg)!important;color:var(--mqs-muted)!important;font-size:14px!important;font-weight:400!important;line-height:1!important;text-align:left;text-transform:none!important;letter-spacing:0!important;cursor:text;box-shadow:none!important}
.mqs-bar:hover{border-color:var(--mqs-muted)!important}
.mqs-bar svg{width:18px;height:18px;flex:none;color:var(--mqs-icon)}
.mqs-auto{display:inline-flex;align-items:center;width:100%}
.mqs-auto .mqs-bar{display:none}
@media (min-width:768px){.mqs-auto .mqs-btn{display:none}.mqs-auto .mqs-bar{display:flex}}
.mqs-bar span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Prozor */
.mqs-ov{position:fixed;inset:0;z-index:999999;display:none;background:var(--mqs-overlay);-webkit-backdrop-filter:blur(var(--mqs-blur));backdrop-filter:blur(var(--mqs-blur))}
.mqs-ov.is-open{display:block}
.mqs-panel{position:absolute;top:var(--mqs-top);left:50%;transform:translateX(-50%);width:min(var(--mqs-width),calc(100% - 32px));max-height:calc(100vh - var(--mqs-top) - 32px);display:flex;flex-direction:column;background:var(--mqs-bg);color:var(--mqs-text);border-radius:var(--mqs-radius);box-shadow:0 20px 60px rgba(0,0,0,.18);overflow:hidden}
.mqs-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--mqs-soft);background:var(--mqs-bg)}
.mqs-field{flex:1;min-width:0;display:flex;align-items:center;height:48px;padding:0 5px 0 18px;border:1px solid var(--mqs-border);border-radius:999px;background:var(--mqs-soft);transition:border-color .15s,background .15s}
.mqs-field:focus-within{border-color:var(--mqs-text);background:var(--mqs-bg)}
.mqs-input{flex:1;min-width:0;width:auto!important;height:46px!important;margin:0!important;padding:0!important;border:0!important;outline:0!important;box-shadow:none!important;background:none!important;font-size:var(--mqs-fs-input)!important;color:var(--mqs-text)!important;-webkit-appearance:none;appearance:none}
.mqs-input::placeholder{color:var(--mqs-muted);opacity:1}
.mqs-input::-webkit-search-cancel-button,.mqs-input::-webkit-search-decoration{-webkit-appearance:none;display:none}
.mqs-go{flex:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;min-height:0!important;padding:0!important;margin:0!important;border:0!important;border-radius:50%!important;background:var(--mqs-accent)!important;color:var(--mqs-accent-text)!important;cursor:pointer;box-shadow:none!important}
.mqs-go svg{width:18px;height:18px;display:block}
.mqs-close{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:0!important;padding:0!important;margin:0!important;border:0!important;border-radius:50%!important;background:var(--mqs-soft)!important;color:var(--mqs-text)!important;cursor:pointer;box-shadow:none!important}
.mqs-close:hover{background:var(--mqs-border)!important}
.mqs-close svg{width:18px;height:18px;display:block}
.mqs-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:6px 0 16px}
.mqs-label{margin:14px 16px 10px;font-size:var(--mqs-fs-label);font-weight:var(--mqs-fw-label);color:var(--mqs-muted)}

/* Najtraženije */
.mqs-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px}
.mqs-chip{height:36px;min-height:0!important;padding:0 15px!important;margin:0!important;border:1px solid var(--mqs-border)!important;border-radius:999px!important;background:var(--mqs-bg)!important;color:var(--mqs-text)!important;font-size:var(--mqs-fs-chip)!important;font-weight:500!important;line-height:34px!important;text-transform:none!important;letter-spacing:0!important;cursor:pointer;box-shadow:none!important}
.mqs-chip:hover{border-color:var(--mqs-text)!important}

/* Kartice: prijedlozi i rezultati (karusel) */
.mqs-feat{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;padding:0 16px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.mqs-feat::-webkit-scrollbar{display:none}
.mqs-card{flex:0 0 calc((100% - 36px) / 3.5);scroll-snap-align:start;display:flex;flex-direction:column;padding:12px;border:1px solid var(--mqs-soft);border-radius:12px;background:var(--mqs-bg);color:var(--mqs-text)!important;text-decoration:none!important}
.mqs-card:hover,.mqs-card.is-active{border-color:var(--mqs-border)}
.mqs-card .mqs-img{display:block;aspect-ratio:1/1;margin:0 0 10px;border-radius:8px;overflow:hidden;background:#fff}
.mqs-card .mqs-img img{width:100%!important;height:100%!important;max-width:none!important;object-fit:contain;display:block;margin:0!important;border:0!important}
.mqs-card .mqs-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:calc(var(--mqs-fs-name) - 1px)}
.mqs-card .mqs-meta{margin-top:3px}
.mqs-card .mqs-prices{margin-top:auto;padding-top:6px;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:0 6px}
.mqs-grid{display:grid;grid-template-columns:repeat(var(--mqs-cols-d),minmax(0,1fr));gap:12px;padding:0 16px}
.mqs-grid .mqs-card{flex:none;width:auto}
.mqs-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin:12px 16px 0}
.mqs-prog{position:relative;width:96px;height:3px;border-radius:3px;background:var(--mqs-soft);overflow:hidden}
.mqs-prog span{position:absolute;left:0;top:0;height:100%;border-radius:3px;background:var(--mqs-text);transition:transform .1s linear}
.mqs-arrow{width:28px;height:28px;min-height:0!important;padding:0!important;margin:0!important;border:0!important;border-radius:50%!important;background:none!important;color:var(--mqs-muted)!important;font-size:22px!important;line-height:26px!important;cursor:pointer;box-shadow:none!important}
.mqs-arrow:hover{color:var(--mqs-text)!important;background:var(--mqs-soft)!important}
.mqs-foot{flex:none;padding:12px 16px;border-top:1px solid var(--mqs-soft);background:var(--mqs-bg)}
.mqs-foot .mqs-all{margin:0}

/* Rezultati */
.mqs-list{list-style:none!important;margin:0!important;padding:0!important}
li.mqs-item{margin:0!important;padding:0!important;list-style:none!important}
.mqs-list .mqs-item a{display:flex;align-items:center;gap:14px;padding:10px 16px;color:var(--mqs-text)!important;text-decoration:none!important}
.mqs-list .mqs-item a:hover,.mqs-list .mqs-item.is-active a{background:var(--mqs-soft)}
li.mqs-item img{width:var(--mqs-img)!important;height:var(--mqs-img)!important;max-width:none!important;flex:none;object-fit:contain;margin:0!important;padding:4px;border:1px solid var(--mqs-soft)!important;border-radius:12px;background:#fff;box-sizing:border-box}
li.mqs-item + li.mqs-item{border-top:1px solid var(--mqs-soft)!important}
.mqs-list .mqs-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mqs-txt{flex:1;min-width:0}
.mqs-dots{display:flex;align-items:center;gap:5px;margin-top:6px}
.mqs-dots i{display:block;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.mqs-dots em{margin-left:3px;font-style:normal;font-size:var(--mqs-fs-meta);color:var(--mqs-muted)}
.mqs-name{display:block;font-size:var(--mqs-fs-name);font-weight:var(--mqs-fw-name);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mqs-meta{display:block;margin-top:2px;font-size:var(--mqs-fs-meta);color:var(--mqs-muted)}
.mqs-prices{flex:none;display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.mqs-price{font-size:var(--mqs-fs-price);font-weight:var(--mqs-fw-price);color:var(--mqs-price);white-space:nowrap}
.mqs-has-sale .mqs-price{color:var(--mqs-sale)}
.mqs-old{font-size:calc(var(--mqs-fs-price) - 3px);color:var(--mqs-muted);text-decoration:line-through;white-space:nowrap}
.mqs-out .mqs-name,.mqs-out .mqs-price{color:var(--mqs-muted)}
.mqs-all{display:block;margin:8px 16px 0;padding:13px;border-radius:12px;background:var(--mqs-soft);color:var(--mqs-text)!important;font-size:14px;font-weight:600;text-align:center;text-decoration:none!important}
.mqs-all:hover{background:var(--mqs-border)}
.mqs-empty{padding:18px 16px 6px;font-size:14px;color:var(--mqs-muted)}
body.mqs-lock{overflow:hidden}

/* Mobitel: preko cijelog ekrana */
@media (max-width:767px){
  .mqs-panel{top:0;left:0;transform:none;width:100%;height:100%;height:100dvh;max-height:none;border-radius:0}
  .mqs-head{padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top))}
  .mqs-card{flex-basis:calc((100% - 12px) / 2.15)}
  .mqs-arrow{display:none}
  .mqs-grid{grid-template-columns:repeat(var(--mqs-cols-m),minmax(0,1fr));gap:10px;padding:0 12px}
  .mqs-foot{padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .mqs-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .mqs-input{font-size:max(16px,var(--mqs-fs-input))!important}
}
@media (prefers-reduced-motion:no-preference){
  .mqs-ov.is-open .mqs-panel{animation:mqs-in .18s ease-out}
  @keyframes mqs-in{from{opacity:0;margin-top:-6px}to{opacity:1;margin-top:0}}
}
