/* === FF Start Filters — start-form.css (6 kolumn) === */

.ffsf-form{
  --ffsf-gap: 12px;
  --ffsf-label-h: 22px;
  --ffsf-actions-w: 220px;
  --ffsf-all-w: 180px;
}

.ffsf-form > .ffsf-row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--ffsf-gap);
  align-items:center;
  width:100%;
  box-sizing:border-box;
}

/* 4 selekty liczone z reszty miejsca */
.ffsf-field{
  display:flex;
  flex-direction:column;
  min-width:180px;
  box-sizing:border-box;
}

/* kolumna "Wszystkie Produkty" */
.ffsf-all-products.ffsf-field{
  flex: 0 0 var(--ffsf-all-w);
  max-width: var(--ffsf-all-w);
  min-width: var(--ffsf-all-w);
  justify-content:flex-end;
  padding-top: var(--ffsf-label-h);
}

/* 4 pola select */
.ffsf-field:not(.ffsf-actions):not(.ffsf-all-products){
  flex: 0 0 calc((100% - var(--ffsf-all-w) - var(--ffsf-actions-w) - 5*var(--ffsf-gap)) / 4);
  max-width: calc((100% - var(--ffsf-all-w) - var(--ffsf-actions-w) - 5*var(--ffsf-gap)) / 4);
  flex-shrink: 0;
}

/* kolumna akcji */
.ffsf-actions.ffsf-field{
  flex: 0 0 var(--ffsf-actions-w);
  max-width: var(--ffsf-actions-w);
  min-width: var(--ffsf-actions-w);
  flex-shrink: 0;

  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:var(--ffsf-gap);
  white-space:nowrap;
  padding-top:var(--ffsf-label-h);
}

/* etykiety */
.ffsf-field label{
  font-weight:600;
  margin-bottom:6px;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.5px;
}

/* select */
.ffsf-field select{
  width:100%;
  height:44px;
  padding:8px 18px;
  border:1px solid var(--wd-form-border-color,#ddd);
  border-radius:50px;
  background:#fff;
  font-size:14px;
  line-height:1.2;
  transition:all .2s ease;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23666' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
.ffsf-field select:hover{
  border-color:var(--btn-accented-bgcolor);
}

/* przycisk wszystkie produkty */
.ffsf-all-products-btn{
  height:44px;
  padding:0 22px;
  border-radius:50px;
  background-color:var(--btn-accented-bgcolor);
  color:#fff !important;
  font-weight:600;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}
.ffsf-all-products-btn:hover{
  background-color:var(--btn-accented-hover-bgcolor,#007cc1);
  color:#fff !important;
}

/* filtruj */
.ffsf-btn{
  height:44px;
  padding:0 24px;
  border-radius:50px;
  border:0;
  background-color:var(--btn-accented-bgcolor);
  color:#fff!important;
  font-weight:600;
  cursor:pointer;
  transition:background-color .2s ease;
}
.ffsf-btn:hover{
  background-color:var(--btn-accented-hover-bgcolor,#007cc1);
}

/* wyczyść */
.ffsf-clear{
  background:transparent;
  border:0;
  text-decoration:underline;
  color:#333;
  padding:10px 0;
  font-weight:500;

  visibility:hidden;
  opacity:0;
  pointer-events:none;
}
.ffsf-form.ffsf-has-selection .ffsf-clear{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}

.ffsf-clear,
.ffsf-clear:focus,
.ffsf-clear:active{
  background:none !important;
  outline:none !important;
  box-shadow:none !important;
  color:inherit !important;
  -webkit-tap-highlight-color:transparent;
}

/* responsywność */
@media (max-width: 1200px){
  .ffsf-all-products.ffsf-field,
  .ffsf-actions.ffsf-field{
    flex:0 0 100%;
    max-width:100%;
    min-width:0;
    padding-top:0;
  }

  .ffsf-field:not(.ffsf-actions):not(.ffsf-all-products){
    flex:0 0 calc((100% - var(--ffsf-gap)) / 2);
    max-width:calc((100% - var(--ffsf-gap)) / 2);
  }
}

@media (max-width: 640px){
  .ffsf-field:not(.ffsf-actions):not(.ffsf-all-products){
    flex:0 0 100%;
    max-width:100%;
  }
}