/* ═══════════════════════════════════════════════════════════
   SEARCH — بحث بسيط وأنيق
   - مش بيأثر على أي حاجة موجودة
   - بيشتغل على الموبايل والكمبيوتر
   ═══════════════════════════════════════════════════════════ */

/* ─── زر البحث في الهيدر ─── */
.search-btn{
  width:36px;
  height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  border:1px solid transparent;
  background:transparent;
  color:var(--ink,#1a1512);
  font-size:1rem;
  cursor:pointer;
  transition:.25s;
  -webkit-tap-highlight-color:transparent;
  padding:0;
}
.search-btn:hover{
  border-color:var(--line,rgba(26,21,18,.1));
  background:rgba(217,171,95,.07);
}
.search-btn:active{transform:scale(.95)}

/* ─── المودال ─── */
.vl-search-modal{
  position:fixed;
  inset:0;
  z-index:99998;
  background:rgba(26,21,18,.7);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:5vh 1rem 1rem;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease,visibility 0s linear .25s;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.vl-search-modal.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .25s ease,visibility 0s;
}

.vl-search-box{
  background:#fff;
  border-radius:20px;
  width:100%;
  max-width:640px;
  max-height:85vh;
  display:flex;
  flex-direction:column;
  box-shadow:0 25px 60px rgba(0,0,0,.3);
  overflow:hidden;
  border:1px solid rgba(217,171,95,.25);
  transform:translateY(-15px) scale(.98);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.vl-search-modal.open .vl-search-box{
  transform:translateY(0) scale(1);
}

/* ─── الـ header بتاع البحث ─── */
.vl-search-head{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.9rem 1rem;
  border-bottom:1px solid rgba(26,21,18,.08);
  background:linear-gradient(135deg,#fffcf9,#fdf5ed);
  flex-shrink:0;
}
.vl-search-icon{
  font-size:1.1rem;
  color:var(--gold2,#b8863f);
  flex-shrink:0;
}
.vl-search-input{
  flex:1;
  min-width:0;
  border:none;
  background:transparent;
  font-family:inherit;
  font-size:16px; /* 16px يمنع الزووم على iOS */
  color:#1a1512;
  outline:none;
  padding:.25rem 0;
}
.vl-search-input::placeholder{color:#a89880}
.vl-search-close{
  width:32px;
  height:32px;
  border-radius:50%;
  border:none;
  background:rgba(0,0,0,.06);
  color:#8b6f47;
  font-size:.95rem;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:.2s;
  flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.vl-search-close:hover{background:rgba(0,0,0,.12)}

/* ─── شرائح الترتيب ─── */
.vl-search-chips{
  display:flex;
  gap:.4rem;
  padding:.65rem 1rem;
  border-bottom:1px solid rgba(26,21,18,.06);
  overflow-x:auto;
  scrollbar-width:none;
  background:#fdfaf5;
  flex-shrink:0;
}
.vl-search-chips::-webkit-scrollbar{display:none}
.vl-search-chip{
  padding:.42rem .85rem;
  border-radius:99px;
  border:1px solid rgba(217,171,95,.3);
  background:#fff;
  color:#8a7a64;
  font-family:inherit;
  font-size:.78rem;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:.2s;
  -webkit-tap-highlight-color:transparent;
}
.vl-search-chip:hover{
  border-color:var(--gold,#d4af37);
  color:var(--gold2,#b8863f);
}
.vl-search-chip.on{
  background:linear-gradient(135deg,var(--gold,#d4af37),#b8863f);
  color:#fff;
  border-color:transparent;
}

/* ─── النتائج ─── */
.vl-search-results{
  flex:1;
  overflow-y:auto;
  padding:.5rem;
  min-height:200px;
  -webkit-overflow-scrolling:touch;
}
.vl-search-results::-webkit-scrollbar{width:5px}
.vl-search-results::-webkit-scrollbar-thumb{background:var(--gold,#d4af37);border-radius:5px}

.vl-search-empty{
  text-align:center;
  padding:2.5rem 1rem;
  color:#a89880;
}
.vl-search-empty p{
  margin:0;
  font-size:.9rem;
  line-height:1.6;
}

/* ─── كارت النتيجة ─── */
.vl-search-card{
  display:flex;
  gap:.75rem;
  padding:.65rem;
  border-radius:14px;
  cursor:pointer;
  transition:.2s;
  align-items:center;
  border:1px solid transparent;
  -webkit-tap-highlight-color:transparent;
}
.vl-search-card:hover{
  background:#fdf9f2;
  border-color:rgba(217,171,95,.25);
}
.vl-search-card:active{transform:scale(.99)}

.vl-search-card-img{
  position:relative;
  width:64px;
  height:64px;
  border-radius:12px;
  overflow:hidden;
  background:#f5efe5;
  flex-shrink:0;
  border:1px solid rgba(26,21,18,.06);
}
.vl-search-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.vl-search-disc{
  position:absolute;
  top:4px;
  inset-inline-end:4px;
  background:linear-gradient(135deg,#e74c3c,#c0392b);
  color:#fff;
  font-size:.62rem;
  font-weight:800;
  padding:2px 6px;
  border-radius:99px;
  letter-spacing:.3px;
}

.vl-search-card-info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:.15rem;
}
.vl-search-card-cat{
  font-size:.68rem;
  color:var(--gold2,#b8863f);
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:600;
}
.vl-search-card-name{
  font-family:'El Messiri',serif;
  font-size:.92rem;
  color:#1a1512;
  font-weight:700;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.vl-search-card-price{
  display:flex;
  align-items:baseline;
  gap:.4rem;
  margin-top:.1rem;
}
.vl-search-card-price b{
  color:var(--gold2,#b8863f);
  font-size:.95rem;
  font-weight:800;
}
.vl-search-card-price del{
  color:#a89880;
  font-size:.72rem;
  text-decoration:line-through;
}

/* ─── موبايل ─── */
@media (max-width:600px){
  .vl-search-modal{
    padding:0;
    align-items:stretch;
  }
  .vl-search-box{
    max-width:100%;
    max-height:100vh;
    max-height:100dvh;
    border-radius:0;
    min-height:100vh;
    min-height:100dvh;
  }
  .vl-search-head{
    padding:1rem;
    position:sticky;
    top:0;
    z-index:2;
  }
  .vl-search-card-img{
    width:58px;
    height:58px;
  }
  .vl-search-card-name{font-size:.88rem}
  .vl-search-card-price b{font-size:.9rem}
}

/* ─── تقليل الحركة ─── */
@media (prefers-reduced-motion:reduce){
  .vl-search-modal,
  .vl-search-box,
  .vl-search-chip,
  .vl-search-card{transition:none}
}