/* Frontend styles for BV Store Search & Filter */
:root{
  --bvssf-primary-color:#272276;
  --bvssf-button-text-color:#ffffff;
  --bvssf-border-color:#272276;
  --bvssf-radius:0px;
  --bvssf-field-height:52px;
  --bvssf-gap:18px;
}

.bvssf-form{display:flex;flex-direction:column;gap:var(--bvssf-gap);width:100%}
.bvssf-search-row{width:100%}
.bvssf-searchwrap{position:relative}
.bvssf-field{background:#ffffff;border:4px solid var(--bvssf-border-color);height:var(--bvssf-field-height);box-sizing:border-box}
.bvssf-search{width:100%;padding:10px;text-align:center;color:#000080;border:none}
.bvssf-filter-row{display:flex;gap:var(--bvssf-gap);align-items:center}
.bvssf-dropdown{flex:1}
.bvssf-dropdown select{width:100%;height:100%;padding:10px;border:none;background:transparent;color:#000080;text-align:left}
.bvssf-actions{
  display:flex;
  gap:12px;
  align-items:center;
  width:auto;
  box-sizing:border-box;
}
.bvssf-submit{width:auto}
.bvssf-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
  min-width:0;
  height:var(--bvssf-field-height,72px);
  padding:0 18px;
  border:none;
  cursor:pointer;
  box-sizing:border-box;
  background:none;
  color:inherit;
  text-decoration:none;
}
.bvssf-btn:hover,
.bvssf-btn:focus{
  transform:none;
  box-shadow:none;
  outline:2px solid rgba(39,34,118,0.35);
  outline-offset:2px;
}
.bvssf-primary{background:var(--bvssf-primary-color);color:var(--bvssf-button-text-color);border:2px solid var(--bvssf-primary-color)}
.bvssf-clear{background:#ffffff;color:var(--bvssf-primary-color);border:2px solid var(--bvssf-primary-color);padding:0 18px}
.bvssf-clear:hover,
.bvssf-clear:focus{
  background:var(--bvssf-primary-color);
  color:var(--bvssf-button-text-color);
}
.bvssf-suggest{position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid var(--bvssf-border-color);z-index:9999;display:none}
.bvssf-suggestion{display:flex;gap:8px;padding:8px;cursor:pointer}
.bvssf-sugg-img img{width:48px;height:48px;object-fit:cover}
.bvssf-sugg-price{font-size:0.9em;color:#333}

/* Desktop: ensure dropdowns and button on same row */
@media(min-width:601px){
  .bvssf-filter-row .bvssf-dropdown{min-width:0}
}

/* Mobile: stack everything */
@media (max-width: 767px) {
  .bvssf-form {
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  .bvssf-search-row,
  .bvssf-filter-row {
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  .bvssf-searchwrap,
  .bvssf-field,
  .bvssf-dropdown,
  .bvssf-submit,
  .bvssf-actions {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .bvssf-field select,
  .bvssf-field input,
  .bvssf-search,
  .bvssf-dropdown select,
  .bvssf-submit button,
  .bvssf-btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .bvssf-actions {
    flex-direction: column;
  }

  .bvssf-submit {
    display: block;
  }

  .bvssf-submit button {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}