/* =========================
   SEARCH MODAL (base)
========================= */
.search-modal { 
  position: fixed;
  inset: 0;
  display: none;
  z-index: 99999;
}

.search-modal.is-open { display: block; }

.search-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

.search-modal__panel {
  position: relative;
  max-width: 700px;
  margin: 10vh auto 0;
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 20px 70px rgba(0,0,0,.35);

  /* important: clips the inner list to the rounded corners */
  overflow: hidden;
}

.search-modal__form {
  display: flex;
  gap: 10px;
  align-items: center;

  /* important: lets suggestions sit on a new row */
  flex-wrap: wrap;
}

.search-modal__input {
  flex: 1 1 320px;
  font-size: 18px;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 12px;
  outline: none;
}

.search-modal__submit {
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid #ddd;
  background: #f6f6f6;
  cursor: pointer;
}

/* Make submit button black when opened (override theme colors) */
.search-modal.is-open .search-modal__submit{
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}
.search-modal.is-open .search-modal__submit:hover{
  background: #EDCD6F !important;
  border-color: #EDCD6F !important;
  color: #000 !important;
}

/* =========================
   SEARCH ICON BUTTON (open)
========================= */
.search-open{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  line-height: 0;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;

  color: #000 !important;
  opacity: 1 !important;
  filter: none !important;
}

.search-open:hover,
.search-open:focus,
.search-open:active{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: #000 !important;
  opacity: 1 !important;
  filter: none !important;
}

.search-open svg,
.search-open .search-icon{
  width: 22px;
  height: 22px;
  display: block;
}

.search-open svg *,
.search-open .search-icon *{
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================
   CLOSE (X) BUTTON
========================= */
.search-close {
  position: absolute;
  top: 10px;
  right: 12px;
}

.search-close,
.search-close:hover,
.search-close:focus,
.search-close:active{
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  -webkit-appearance: none;
  appearance: none;

  color: #000 !important;
  opacity: 1 !important;
  filter: none !important;
}

.search-close::before,
.search-close::after{
  content: none !important;
}

.search-close svg,
.search-close svg *{
  fill: none !important;
  stroke: currentColor !important;
}

/* Remove the built-in clear (X) button in search inputs */
.search-modal__input[type="search"]::-webkit-search-cancel-button,
.search-modal__input[type="search"]::-webkit-search-decoration,
.search-modal__input[type="search"]::-webkit-search-results-button,
.search-modal__input[type="search"]::-webkit-search-results-decoration{
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.search-modal__input[type="search"]::-ms-clear,
.search-modal__input[type="search"]::-ms-reveal{
  display: none;
  width: 0;
  height: 0;
}

/* =========================
   SUGGESTIONS (joined look)
========================= */

/* Suggestions becomes a second row inside the form */
.search-suggestions{
  /* take full width as a new row */
  flex: 0 0 100%;
  order: 99;

  /* no absolute dropdown; keep it as part of the panel */
  position: relative;
  left: auto;
  right: auto;
  top: auto;

  /* make it feel like one block */
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;

  /* stretch to panel edges like in your screenshot */
  margin: 16px -18px -18px;
  padding: 0;

  /* divider line between input row and results */
  border-top: 1px solid #eee;

  max-height: 360px;
  overflow-y: auto;
  z-index: 100000;
}

/* if it’s empty, don’t show anything */
.search-suggestions:empty { display: none; }

.suggestion-item{
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 14px 22px;
  text-decoration: none;

  color: #000 !important;
  background: transparent;

  border-bottom: 1px solid #eee;
}

.suggestion-item:hover{
  background: rgba(0,0,0,.03);
}

.suggestion-img{
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 6px;
  flex: 0 0 28px;
}

.suggestion-title{
  flex: 1;
  font-size: 14px;
  line-height: 1.2;
  color: #000 !important;
}

.suggestion-price{
  font-size: 14px;
  white-space: nowrap;
  font-weight: 600;
  color: #000 !important;
}

/* Footer row "Visi rezultatai" */
.suggestion-all{
  display: block;
  padding: 16px 22px;
  text-decoration: none;
  font-weight: 700;

  color: #000 !important;
  background: #fff;

  /* keep it separated */
  border-top: 0;
}

/* WooCommerce price pieces inside suggestion-price */
.search-suggestions .woocommerce-Price-amount,
.search-suggestions .woocommerce-Price-currencySymbol,
.search-suggestions .woocommerce-price-suffix,
.search-suggestions bdi{
  color: #000 !important;
}