/* -------------------------------- 
FORMS & INPUTS
-------------------------------- */

#filtro-promos {
  --inputH:50px;
  --gap:var(--wp--preset--spacing--xs);
  --formRadius:100vmin;
  --buttonRadius:50%;
  --formPadding:6px 6px 6px 18px;
  --inputBack:        transparent;
  --inputBorder:      transparent;
  border:2px solid white;
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: var(--formPadding);
  border-radius: var(--formRadius);

/*  border:2px solid red;*/
  max-width: 720px;
  margin-inline: auto;
}


.filter-submit {
/*  padding: var(--wp--preset--spacing--s);*/
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--inputH);
  color: white;
  border-radius: var(--buttonRadius);
  aspect-ratio: 1;
  background-color:var(--wp--preset--color--contrast);
}
 

.filter-submit path                   { transition:all 500ms ease; transform-origin: center; }
.filter-submit path:not(.move)        { transform: scale(1.4) }
.filter-submit path.move              { transform: scale(.85); opacity:0; }

.filter-submit:hover path:not(.move)  { transform: scale(1) }
.filter-submit:hover path.move        { transform: scale(1); opacity:1; }
 
 

.is-style-button:hover .virtualmove  {     
    scale: 1.5;
    transform-origin: center;
}

.is-style-button:hover .virtualno  {
    scale:   .35;
    opacity: 0;
}  
 

.filtro-select { 
  position: relative;
  flex:1;
}

#filtro-promos {
    font-family: var(--wp--preset--font-family--header);
    --left: 0;
    --width: 120px;
    --size: 16px;
    width: 100%;
    position: relative;
    z-index: 5;
    --label: red;
    --inputBack: rgb(255 255 255 / .75);
    --inputBorder: rgb(255 255 255 / .75);
    --inputBorderFocus: var(--wp--preset--color--light);
    background: rgb(255 255 255 / .7);
    
    overflow: clip;
    backdrop-filter: blur(4px);
    box-shadow: var(--shadow-5);
}
 

#filtro-promos label {
  color: black;
  font-size: var(--wp--preset--font-size--xs);
  display: block;
  text-transform: uppercase;
}


#filtro-promos input:not([type=submit]),
#filtro-promos select {
  font-family: var(--wp--preset--font-family--header);
  font-size: var(--wp--preset--font-size--p);
  color:   var(--wp--preset--color--contrast);
   
  background-color: transparent; 
  border:1px solid transparent;
  
  transition: all 350ms linear;
  display: flex;
  width: 100%;

  height: var(--inputH);
  cursor: pointer;
}

input:not([type=submit]):focus,
textarea:focus,
select:focus,
.form-group input:valid,
.form-group textarea:valid,
.form-group select:valid {
  --inputBack:   rgb(255 255 255 / 1);
  --inputBorder: var(--wp--preset--color--bordergrey);
}

input:not([type=submit])::placeholder,
textarea::placeholder,
select::placeholder {
  color:black;
}

select[disabled] {
  opacity: .25;
  cursor: not-allowed;
}
 
 
.form-group input:required:placeholder-shown {
    border:2px solid var(--inputBorder);

}


.form-group input:not(:focus):not(:placeholder-shown):invalid,
.form-group textarea:invalid:not(:focus):not(:placeholder-shown), 
.form-group input:invalid:not(:focus):not(:placeholder-shown) {
    --inputBorder:red;
    background-color: pink;
    color: red;
}
 

.form-group select:required:not(:placeholder-shown):valid,
.form-group textarea:required:not(:placeholder-shown):valid,
.form-group input:required:not(:placeholder-shown):valid {
  background-color: white;
    box-shadow: var(--wp--preset--shadow--shadow-6);
 }
 
 
/* -------------------------------- 

CHECKBOXES & RADIOS

-------------------------------- */
 
.form-check {
  display: flex;
  align-items: flex-start;
  position: relative;
  gap:calc(var(--size)/2);
}

.form-check label {
  color: var(--label);
  font-size: var(--wp--preset--font-size--xs);
  cursor: pointer;
  margin:2px 0 0;
}

 
.form-check input[type="checkbox"] {
  position: absolute;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  z-index:-1;
  cursor: pointer;
}

.form-check input[type="checkbox"] + span { position:relative; } 
.form-check input[type="checkbox"] + span::before { 
  content: '';
  display: block;
  width:  var(--size);
  height: var(--size);
  border:2px solid var(--inputBorder);
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

.form-check input[type="checkbox"] + span::after {
  content: '';
  display: block;
  width:  var(--size);
  height: var(--size);
  position: absolute;
  inset:0;
}
 
.form-check input[type="checkbox"]:checked + span::after, 
.form-check input[type="checkbox"]:checked + span::before {
  --inputBorder:white;
  box-shadow: var(--shadow-3);
  transition: transform .2s;
}

.form-check input[type="checkbox"]:checked ~ label {
  color: var(--label); 
 }
 
.form-check input[type="radio"]:checked + span::after,
.form-check input[type="checkbox"]:checked + span::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolyline points='1 6.5 4 9.5 11 2.5' fill='none' stroke='%2338d9a9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  mask-size:  8px;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: var(--inputBorder);
}

/* -------------------------------- 

NO RESULTS

-------------------------------- */
 
.no-results,
.no-results div {
  display: flex;
  flex-direction: column;
}

 
.no-results {
  --cardWith:  120px;
  --cardHeigt: 160px;
  --span:        8px;
  text-align: center;
  align-items: center;
  gap: 20px;
  padding: var(--wp--preset--spacing--l);
      grid-column: span 3;
}

.placeholder-card {
  width:  var(--cardWith);
  height: var(--cardHeigt);
  background:      var(--wp--preset--color--lightgrey);
  border:2px solid var(--wp--preset--color--darkgrey);
  border-radius: var(--span);
  padding: 10px;
  justify-content: space-between;
  align-items: start;
}

.placeholder-card .chip { min-width:50px; border-color:var(--wp--preset--color--darkgrey); }
.placeholder-card div {
  gap:6px;
}
.placeholder-card div span {
  display: block;
  background: var(--wp--preset--color--darkgrey);
  height: var(--span);
  width:  var(--size);
}
.placeholder-card div span:first-child {
  height: calc(var(--span) * 2);
  margin-bottom: var(--span);
}