/* NetParsi Live Search — mod_netparsisearch */

/* ---------- toggle button (optional, rendered at the module position) ---------- */
.npss-toggle{background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.npss-toggle svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6}
.npss-toggle:focus-visible{outline:1px solid #C9A474;outline-offset:4px}

html.npss-lock{overflow:hidden}

/* ---------- panel (same look & motion as the original #ws) ---------- */
.npss{
  --npss-ink:#F4EDE0;--npss-soft:#B8A58D;--npss-gold:#C9A474;
  --npss-line:rgba(201,164,116,.18);--npss-line-2:rgba(201,164,116,.45);
  --npss-wash:rgba(201,164,116,.09);
  --npss-ease:cubic-bezier(.2,.8,.2,1);--npss-dir:1;
  position:fixed;inset:0;z-index:999;visibility:hidden;pointer-events:none;
  transition:visibility 0s linear .45s;
  font-family:var(--sans, "Anjoman", "Vazirmatn", sans-serif);color:var(--npss-ink);
  text-align:start
}
@supports (color:color-mix(in srgb, red 50%, transparent)){
  .npss{
    --npss-line:color-mix(in srgb, var(--npss-gold) 18%, transparent);
    --npss-line-2:color-mix(in srgb, var(--npss-gold) 45%, transparent);
    --npss-wash:color-mix(in srgb, var(--npss-gold) 9%, transparent)
  }
}
[dir=rtl] .npss{--npss-dir:-1}
.npss.is-open{visibility:visible;pointer-events:auto;transition:visibility 0s}

.npss-scrim{position:absolute;inset:0;cursor:pointer;background:rgba(14,9,5,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .45s ease}
.npss.is-open .npss-scrim{opacity:1}

.npss-bar{
  position:absolute;left:0;right:0;top:0;padding:2.2rem 6vw;
  background:linear-gradient(180deg, rgba(26,16,10,.95) 0%, rgba(26,16,10,.88) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);
  border-bottom:1px solid var(--npss-line);
  opacity:0;transform:translateY(-14px);transition:opacity .45s ease,transform .45s ease
}
.npss.is-open .npss-bar{opacity:1;transform:translateY(0)}

/* ---------- form ---------- */
.npss-form{position:relative;display:flex;align-items:center;gap:1rem;max-width:46rem;margin:0 auto;border-bottom:1px solid var(--npss-line-2)}
/* gold underline that draws from the centre on focus */
.npss-form::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--npss-gold);transform:scaleX(0);transition:transform .8s var(--npss-ease)}
.npss-form:focus-within::before{transform:scaleX(1)}
/* light sweeping along the underline while a request is in flight */
.npss-form::after{content:"";position:absolute;left:0;bottom:-1px;width:35%;height:1px;background:linear-gradient(90deg, transparent, #FFF6E6, transparent);opacity:0;pointer-events:none}
.npss.is-loading .npss-form::after{opacity:1;animation:npss-sweep 1.15s ease-in-out infinite}
[dir=rtl] .npss.is-loading .npss-form::after{animation-direction:reverse}

.npss-form button{background:none;border:0;padding:.5rem 0;margin:0;color:var(--npss-soft);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color .3s ease;-webkit-tap-highlight-color:transparent}
.npss-form button:hover{color:var(--npss-ink)}
.npss-form button:focus-visible{outline:1px solid var(--npss-gold);outline-offset:3px}
.npss-form svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.4}
.npss.is-loading .npss-go{color:var(--npss-gold);animation:npss-pulse 1.15s ease-in-out infinite}

.npss-input{flex:1;min-width:0;background:transparent;border:0;outline:0;border-radius:0;box-shadow:none;padding:.7rem 0;margin:0;font:inherit;font-size:1.05rem;font-weight:300;letter-spacing:.02em;color:var(--npss-ink);-webkit-appearance:none;appearance:none}
.npss-input::placeholder{color:var(--npss-soft);opacity:.75}
.npss-input::-webkit-search-cancel-button,.npss-input::-webkit-search-decoration{-webkit-appearance:none;display:none}

/* ---------- results container (height is animated from JS) ---------- */
.npss-results{
  position:relative;overflow:hidden;
  /* 0.75rem wider than the form on each side, so hover washes bleed past the text edge */
  margin-left:max(-.75rem, calc((100% - 47.5rem) / 2));
  margin-right:max(-.75rem, calc((100% - 47.5rem) / 2))
}
.npss-scroll{max-height:calc(100vh - 10rem);max-height:calc(100dvh - 10rem);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--npss-line-2) transparent}
.npss-list{position:relative;display:grid;grid-template-columns:minmax(0,1fr);column-gap:1rem;padding:1.3rem 0 .4rem}
.npss-list:empty{padding:0}
@media (min-width:821px){.npss-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.npss-group,.npss-all,.npss-empty,.npss-note,.npss-intro,.npss-skel{grid-column:1/-1}

.npss-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- group heading ---------- */
.npss-group{display:flex;align-items:center;gap:.9rem;padding:0 .75rem;margin:1rem 0 .3rem;font-size:.78rem;letter-spacing:.06em;color:var(--npss-gold)}
.npss-group:first-child{margin-top:0}
.npss-group i{flex:1;height:1px;background:linear-gradient(to right, var(--npss-line-2), transparent);transform-origin:left}
[dir=rtl] .npss-group i{background:linear-gradient(to left, var(--npss-line-2), transparent);transform-origin:right}
.npss-group em{font-style:normal;font-family:var(--latin, "Maven Pro", sans-serif);font-size:.72rem;color:var(--npss-soft);min-width:1.2em;text-align:center}

/* ---------- result item ---------- */
.npss .npss-item{position:relative;display:flex;align-items:center;gap:1rem;padding:.65rem .75rem;color:var(--npss-ink);text-decoration:none;isolation:isolate;outline:0;-webkit-tap-highlight-color:transparent}
.npss .npss-item::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to right, var(--npss-wash), transparent 85%);opacity:0;transform:scaleX(.4);transform-origin:left;transition:opacity .45s ease,transform .6s var(--npss-ease)}
.npss .npss-item::after{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--npss-gold);transform:scaleY(0);transition:transform .5s var(--npss-ease)}
[dir=rtl] .npss .npss-item::before{background:linear-gradient(to left, var(--npss-wash), transparent 85%);transform-origin:right}
[dir=rtl] .npss .npss-item::after{left:auto;right:0}
.npss .npss-item:hover::before,.npss .npss-item.is-active::before{opacity:1;transform:none}
.npss .npss-item:hover::after,.npss .npss-item.is-active::after{transform:scaleY(1)}

.npss-thumb{position:relative;flex:0 0 auto;width:58px;height:58px;overflow:hidden;display:grid;place-items:center;background:rgba(255,255,255,.03);border:1px solid var(--npss-line);color:var(--npss-gold)}
.npss-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--npss-ease),filter .6s ease;filter:saturate(.92)}
.npss-thumb svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.2;opacity:.8}
.npss .npss-item:hover .npss-thumb img,.npss .npss-item.is-active .npss-thumb img{transform:scale(1.08);filter:saturate(1.05)}

.npss-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.npss-title{display:block;font-size:.97rem;font-weight:400;line-height:1.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npss-meta{display:flex;flex-wrap:wrap;gap:.2rem .6rem;font-size:.78rem;line-height:1.6;color:var(--npss-soft)}
.npss-meta:empty,.npss-snip:empty{display:none}
.npss-price{color:var(--npss-gold);letter-spacing:.02em}
.npss-code{font-family:var(--latin, "Maven Pro", sans-serif);font-size:.74rem;letter-spacing:.06em;opacity:.8}
.npss-snip{font-size:.8rem;line-height:1.75;color:var(--npss-soft);opacity:.85;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.npss mark{background:none;color:var(--npss-gold);font-weight:500;padding:0;
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:100% 1px;background-position:0 100%}

.npss-arrow{flex:0 0 auto;display:inline-flex;color:var(--npss-gold);opacity:0;transform:translateX(calc(-8px * var(--npss-dir)));transition:opacity .35s ease,transform .5s var(--npss-ease)}
.npss-arrow svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.4}
[dir=rtl] .npss-arrow svg{transform:scaleX(-1)}
.npss .npss-item:hover .npss-arrow,.npss .npss-item.is-active .npss-arrow,
.npss .npss-all:hover .npss-arrow,.npss .npss-all.is-active .npss-arrow{opacity:1;transform:none}

/* ---------- "all results" footer ---------- */
.npss .npss-all{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.9rem;padding:1rem .75rem .5rem;border-top:1px solid var(--npss-line);color:var(--npss-soft);font-size:.86rem;text-decoration:none;outline:0;transition:color .3s ease}
.npss .npss-all b{font-weight:500;color:var(--npss-ink)}
.npss .npss-all:hover,.npss .npss-all.is-active{color:var(--npss-gold)}
.npss .npss-all .npss-arrow{opacity:.55;transform:none}

/* ---------- empty / note / intro ---------- */
.npss-empty{display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:1.4rem .75rem 1.2rem;color:var(--npss-soft);font-size:.92rem;text-align:center}
.npss-empty b{color:var(--npss-ink);font-weight:400}
.npss-empty svg{width:42px;height:42px;stroke:var(--npss-gold);fill:none;stroke-width:1;stroke-linecap:round}
.npss-empty svg *{stroke-dasharray:60;stroke-dashoffset:0}
.npss-empty.is-entering svg *{animation:npss-stroke 1.4s var(--npss-ease) both .1s}
.npss-note{padding:.2rem .75rem .6rem;font-size:.85rem;color:var(--npss-soft)}
.npss-note.is-error{color:#E3A39A}

.npss-intro{padding:0 .75rem .5rem}
.npss-intro-h{display:block;margin-bottom:.8rem;font-size:.78rem;letter-spacing:.06em;color:var(--npss-gold)}
.npss-chips{display:flex;flex-wrap:wrap;gap:.55rem}
.npss .npss-chip{border:1px solid var(--npss-line-2);border-radius:999px;background:none;color:var(--npss-soft);font:inherit;font-size:.84rem;line-height:1.6;padding:.3rem 1rem;cursor:pointer;outline:0;transition:color .3s ease,border-color .3s ease,background-color .3s ease,transform .4s var(--npss-ease)}
.npss .npss-chip:hover,.npss .npss-chip.is-active{color:var(--npss-ink);border-color:var(--npss-gold);background:var(--npss-wash);transform:translateY(-2px)}
.npss-intro.is-entering .npss-chip{animation:npss-in .7s var(--npss-ease) both;animation-delay:calc(var(--c,0) * 45ms + 60ms)}

/* ---------- skeleton (first request) ---------- */
.npss-skel{display:grid;grid-template-columns:minmax(0,1fr);column-gap:1rem}
@media (min-width:821px){.npss-skel{grid-template-columns:repeat(2,minmax(0,1fr))}}
.npss-skel-row{display:flex;align-items:center;gap:1rem;padding:.65rem .75rem}
.npss-skel-row>span{flex:0 0 58px;height:58px}
.npss-skel-row>div{flex:1;display:flex;flex-direction:column;gap:.55rem}
.npss-skel-row>div>span{height:.62rem;width:70%}
.npss-skel-row>div>span+span{width:42%}
.npss-skel-row span{display:block;background:linear-gradient(90deg, rgba(255,255,255,.035) 25%, var(--npss-wash) 50%, rgba(255,255,255,.035) 75%);background-size:300% 100%;animation:npss-shimmer 1.4s linear infinite}
[dir=rtl] .npss-skel-row span{animation-direction:reverse}

/* ---------- enter / leave choreography ---------- */
.npss .is-entering{animation:npss-in .7s var(--npss-ease) both;animation-delay:calc(var(--d,0) * 55ms)}
.npss-item.is-entering .npss-thumb img{animation:npss-reveal 1.05s var(--npss-ease) both;animation-delay:calc(var(--d,0) * 55ms + 90ms)}
.npss-group.is-entering i{animation:npss-draw 1s var(--npss-ease) both;animation-delay:calc(var(--d,0) * 55ms + 120ms)}
.npss-intro.is-entering,.npss-empty.is-entering{animation-name:npss-fade}

.npss .is-leaving{position:absolute;z-index:0;margin:0;pointer-events:none;animation:npss-out .32s ease both}

@keyframes npss-in{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes npss-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes npss-out{to{opacity:0;transform:scale(.97);filter:blur(4px)}}
@keyframes npss-reveal{from{clip-path:inset(100% 0 0 0);transform:scale(1.3)}to{clip-path:inset(0 0 0 0);transform:scale(1)}}
@keyframes npss-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes npss-sweep{from{transform:translateX(-100%)}to{transform:translateX(290%)}}
@keyframes npss-pulse{50%{opacity:.45}}
@keyframes npss-shimmer{from{background-position:100% 0}to{background-position:0 0}}
@keyframes npss-stroke{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .npss-bar{padding:1.3rem 6vw}
  .npss-input{font-size:1rem}
  .npss-scroll{max-height:calc(100vh - 7rem);max-height:calc(100dvh - 7rem)}
  .npss-thumb,.npss-skel-row>span{width:50px;height:50px;flex-basis:50px}
  .npss-snip{-webkit-line-clamp:1}
}
@media (min-width:1501px){.npss-form svg{width:1.3vw;height:1.3vw}}

@media (prefers-reduced-motion:reduce){
  .npss-bar,.npss-scrim,.npss-form::before{transition:none}
  .npss .is-entering,.npss .is-entering *,.npss .is-leaving,.npss-skel-row span,
  .npss.is-loading .npss-form::after,.npss.is-loading .npss-go{animation:none!important}
  .npss .is-leaving{display:none}
}