/*  search.css  -  product search popup
 *  js/search.js ke saath jaati hai. Site ke brand blue par bani hai.  */

.lsr-backdrop{
  position:fixed; inset:0; z-index:20000;
  background:rgba(8,22,34,.55);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  display:none; align-items:flex-start; justify-content:center;
  padding:min(8vh,72px) 16px 24px;
}
.lsr-backdrop.on{ display:flex; }

.lsr-modal{
  background:#fff; width:min(760px,100%);
  border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; max-height:82vh;
  box-shadow:0 24px 60px rgba(6,26,42,.32);
  animation:lsrIn .18s ease-out;
}
@keyframes lsrIn{ from{ transform:translateY(-8px); opacity:0 } to{ transform:none; opacity:1 } }

/* ---- top ---- */
.lsr-top{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid #e6eef4; }
.lsr-top > svg{ flex:none; color:#6c8a99; }
.lsr-top input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font:inherit; font-size:16px; color:#0d1f2b;
}
.lsr-top input::placeholder{ color:#8aa6b5; }
.lsr-count{ flex:none; font-size:12px; color:#6c8a99; white-space:nowrap; font-variant-numeric:tabular-nums; }
.lsr-x{
  flex:none; border:1px solid #dbe7ef; background:#f5f9fc; color:#41606f;
  border-radius:7px; font-size:11px; font-weight:700; padding:4px 8px; cursor:pointer;
}
.lsr-x:hover{ background:#e9f2f8; }

/* ---- tabs ---- */
.lsr-tabs{ display:flex; gap:8px; padding:12px 18px; border-bottom:1px solid #e6eef4; flex-wrap:wrap; }
.lsr-tab{
  border:1px solid #dbe7ef; background:#f5f9fc; color:#41606f;
  border-radius:999px; padding:7px 16px; font-size:13px; font-weight:650;
  cursor:pointer; transition:.16s; font-family:inherit;
}
.lsr-tab:hover{ border-color:#005dff; color:#005dff; }
.lsr-tab[aria-selected="true"]{ background:#e8f2ff; border-color:#005dff; color:#005dff; }
.lsr-tab.pcd[aria-selected="true"]{ background:#f1e9fc; border-color:#7a3ccc; color:#7a3ccc; }
.lsr-tab.tp[aria-selected="true"]{ background:#e2f5f0; border-color:#0a7f6b; color:#0a7f6b; }

/* ---- body ---- */
.lsr-body{ overflow-y:auto; padding:14px 18px 18px; display:flex; flex-direction:column; gap:18px; }
.lsr-block{ display:block; }
.lsr-lbl{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#6c8a99; font-weight:700; margin-bottom:9px; }
.lsr-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.lsr-chip{
  border:1px solid #dbe7ef; background:#f5f9fc; color:#41606f;
  border-radius:999px; padding:6px 14px; font-size:13px; font-weight:600;
  cursor:pointer; transition:.16s; font-family:inherit;
}
.lsr-chip:hover{ border-color:#005dff; color:#005dff; background:#e8f2ff; }

.lsr-note{
  background:#e8f2ff; border:1px solid #b9d6ff; color:#0a4fb5;
  border-radius:9px; padding:9px 13px; font-size:13px;
}

.lsr-rows{ display:flex; flex-direction:column; gap:3px; }
.lsr-row{
  display:flex; align-items:center; gap:13px;
  padding:10px 11px; border-radius:9px; text-decoration:none;
  border:1px solid transparent; color:inherit;
}
.lsr-row:hover,.lsr-row.on{ background:#f5f9fc; border-color:#dbe7ef; }
.lsr-ic{
  flex:none; width:34px; height:34px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; letter-spacing:.02em;
}
.lsr-ic.p{ background:#f1e9fc; color:#7a3ccc; }
.lsr-ic.t{ background:#e2f5f0; color:#0a7f6b; }
.lsr-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.lsr-t{ font-size:14.5px; font-weight:650; color:#0d1f2b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lsr-s{ font-size:12.5px; color:#6c8a99; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lsr-meta{
  flex:none; max-width:170px; text-align:right;
  font-size:11.5px; color:#6c8a99; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lsr-meta em{ display:block; font-style:normal; font-size:10.5px; color:#9ab2c0; }
.lsr-row mark{ background:#dcebff; color:#0a4fb5; border-radius:3px; padding:0 2px; }

.lsr-more{
  width:100%; border:1px dashed #c3d8e6; background:#f5f9fc; color:#005dff;
  border-radius:9px; padding:11px; font-size:13.5px; font-weight:700;
  cursor:pointer; font-family:inherit;
}
.lsr-more:hover{ background:#e8f2ff; border-color:#005dff; }

.lsr-empty{ text-align:center; padding:34px 10px; color:#6c8a99; font-size:14px; line-height:1.7; }
.lsr-empty b{ color:#0d1f2b; font-size:15px; }
.lsr-cta{
  display:inline-block; margin-top:4px; background:#005dff; color:#fff;
  text-decoration:none; border-radius:999px; padding:10px 22px; font-weight:700; font-size:13.5px;
}

/* ---- footer ---- */
.lsr-foot{ border-top:1px solid #e6eef4; padding:9px 18px; display:flex; gap:16px; flex-wrap:wrap; font-size:11.5px; color:#8aa6b5; }
.lsr-foot span{ display:flex; align-items:center; gap:4px; }
.lsr-foot kbd{
  font-family:ui-monospace,Consolas,monospace; font-size:10.5px; font-weight:700;
  background:#f5f9fc; color:#41606f; border:1px solid #dbe7ef; border-bottom-width:2px;
  border-radius:4px; padding:1px 5px;
}

/* search box ab clickable dikhe */
.search-wrapper{ cursor:pointer; }
.search-box{ cursor:pointer; }

@media (max-width:600px){
  .lsr-backdrop{ padding:0; }
  .lsr-modal{ max-height:100vh; height:100vh; border-radius:0; width:100%; }
  .lsr-meta{ display:none; }
  .lsr-foot{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .lsr-modal{ animation:none; }
  .lsr-chip,.lsr-tab,.lsr-row{ transition:none; }
}