:root{
  --wc-search-border: rgba(60,60,67,0.18);
  --wc-search-bg: #fff;                 /* campo input */
  --wc-search-btn-bg: #ff2d55;          /* rosa del tuo brand */
  --wc-search-btn-bg-hover: #e4274b;
  --wc-search-btn-text: #fff;
}

.wc-search { margin: 8px 0 0; }

/* form in linea: campo + bottone */
.wc-search__form{
  display: flex;
  gap: 10px;
  align-items: stretch;
}

/* campo */
.wc-search__field{
  position: relative;
  flex: 1;
  background: var(--wc-search-bg);
  border: 1px solid var(--wc-search-border);
  border-radius: 99px;
  padding: 0px 36px 0px 56px; /* spazio per lente e per clear */
}

.wc-search__input {border: none !important; box-shadow: none;}

/* icona lente */
.wc-search__icon{
  position: absolute; left: 25px; top: 50%; transform: translateY(-50%);
  font-size: 18px; opacity: .55; pointer-events: none;
}

/* input */
.wc-search__input{
  width: 100%;
  border: 0; outline: 0; background: transparent;
  font-size: 16px; line-height: 22px; color: inherit;
}

/* clear (×) */
.wc-search__clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: gray;    /* sfondo trasparente */
  color: #fff;                /* colore grigio tenue */
  font-size: 18px;            /* icona più leggibile */
  line-height: 1;
  cursor: pointer;
  padding: 0;                 /* niente padding extra */
  display: none;
}


.wc-search__clear.show{ display:inline-block;      width: 25px;
    height: 25px;
    border-radius: 20px; }

/* bottone submit */
.wc-search__btn{
  border: 0; border-radius: 99px !important; padding: 0 16px; height: 50px;
  background: var(--wc-search-btn-bg); color: var(--wc-search-btn-text);
  font-weight: 700; font-size: 16px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 72px;
}
.wc-search__btn:hover{ background: var(--wc-search-btn-bg-hover); }
.wc-search__btn[disabled]{ opacity:.7; cursor: default; }

/* heading */
.wc-search__heading{ margin: 30px 0 12px; }

/* icona pending (clessidra) per sfondi in attesa di revisione */
.wc-pending-icon{
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 24px;
  color: #ff9500;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* mobile: bottone sotto il campo se lo spazio è stretto */
@media (max-width: 520px){
  .wc-search__form{ flex-direction: column; gap: 8px; }
  .wc-search__btn{ width: 100%; min-height: 40px; }
}