.big-search-bar{
  position: relative;
  display: flex; align-items: center;
  background: #eff0f2;           /* نفس لون الصورة */
  border-radius: 999px;
  padding: .65rem 3.0rem;         /* كنخلي مساحة للأيقونات */
  margin: 1rem;
  box-shadow: 0 0 0 1px #e3e4e7 inset;
}
.big-search-bar:focus-within{ box-shadow: 0 0 0 2px #cfd1d6 inset; }

/* العدسة */
.big-search-bar .search-ic{
  position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%);
  font-size: 20px; color: #8a8e95; pointer-events: none;
}

/* الإنپوت */
.big-search-bar input{
  border: 0; background: #eff0f2; box-shadow: none;
  width: 100%; padding: 0;
  padding-inline-start: 5px;    /* مكان العدسة */
  padding-inline-end: 42px;      /* مكان زر X */
  font-size: 1.05rem; color: #111;
}
.big-search-bar input::placeholder{ color:#9aa0a6; }
.big-search-bar input:focus{ outline: none; box-shadow: none; }

/* نخفي زر X الافتراضي ديال type=search فـ iOS */
.big-search-bar input::-webkit-search-cancel-button{ -webkit-appearance:none; }

/* زر X المخصص */
.big-search-bar .clear-btn{
  position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  border: 0; display: none; align-items: center; justify-content: center;
  background: #cfd1d6; font-size: 18px; line-height: 1;
  cursor: pointer;
}
.big-search-bar.has-value .clear-btn{ display: flex; }


.big-search-bar{
  position: relative;
  display: flex; align-items: center;
  background: #eff0f2;           /* نفس لون الصورة */
  border-radius: 999px;
  padding: .65rem 3.0rem;         /* كنخلي مساحة للأيقونات */
  margin: 1rem;
  box-shadow: 0 0 0 1px #e3e4e7 inset;
}
.big-search-bar:focus-within{ box-shadow: 0 0 0 2px #cfd1d6 inset; }

/* العدسة */
.big-search-bar .search-ic{
  position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%);
  font-size: 20px; color: #8a8e95; pointer-events: none;
}

/* الإنپوت */
.big-search-bar input{
  border: 0; background: #eff0f2; box-shadow: none;
  width: 100%; padding: 0;
  padding-inline-start: 5px;    /* مكان العدسة */
  padding-inline-end: 42px;      /* مكان زر X */
  font-size: 1.05rem; color: #111;
}
.big-search-bar input::placeholder{ color:#9aa0a6; }
.big-search-bar input:focus{ outline: none; box-shadow: none; }

/* نخفي زر X الافتراضي ديال type=search فـ iOS */
.big-search-bar input::-webkit-search-cancel-button{ -webkit-appearance:none; }

/* زر X المخصص */
.big-search-bar .clear-btn{
  position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  border: 0; display: none; align-items: center; justify-content: center;
  background: #cfd1d6; font-size: 18px; line-height: 1;
  cursor: pointer;
}
.big-search-bar.has-value .clear-btn{ display: flex; }