:root {
  --color-input: var(--color-general-dark);
  --color-label: var(--color-gray);
}


/* Inputs */
*::-webkit-search-cancel-button {
  content: '';
  background: url('../../images/x.svg') 50% 50% no-repeat;
  width: 20px; height: 20px;
  background-size: contain;
  display: block;
  position: relative;
  top: 6px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.dark *::-webkit-search-cancel-button {
  background-image: url('../../images/x-white.svg');
}


select, textarea, 
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"] {
  background: none;
  border-bottom: 2px solid;
  display: block;
  font-size: var(--font-size-h4);
  color: var(--color-input, var(--color-general-dark));
  padding: 13px 0; 
  width: 100%;
  display: block;
}

select[aria-invalid="true"], 
textarea[aria-invalid="true"], 
input[aria-invalid="true"] {
  border-color: red;
}

label {
  margin-bottom: -3px;
}

@media (pointer: fine) {
  select:hover, 
  textarea:hover, 
  input[type="text"]:hover,
  input[type="email"]:hover,
  input[type="tel"]:hover,
  input[type="search"]:hover,
  input[type="number"]:hover {
    border-width: 4px;
    position: relative;    
  }

  .gfield:not(.gfield--type-submit):has(input:hover),
  .gfield:not(.gfield--type-submit):has(textarea:hover),
  .gfield:not(.gfield--type-submit):has(select:hover) {
    margin-bottom: -2px;  
  }

  .form-field:not(.form-field--checkboxes) input:hover,
  .form-field:not(.form-field--checkboxes) textarea:hover,
  .form-field:not(.form-field--checkboxes) select:hover {
    margin-bottom: -2px;
  }
  
}

/* Tabs */


/* Select */
select {
  background: url('../../images/dropdown.svg') right 0 top 50% no-repeat;
  padding-right: 30px;
}

/* Labels */
label  {
  display: block;
  position: relative; z-index: 2;
  font-size: var(--font-size-h5);
  color: var(--color-label, var(--color-gray));
}

/* Dark mode */
.dark {
  --color-input: white;
  --color-label: white;
}

.dark *::placeholder {
  color: white;
}

.dark input {
  color: white;  
}

.dark select {
  background-color: var(--color-general-dark);
  background-image: url('../../images/dropdown-white.svg');
}


/* Checkbox */
input[type="checkbox"] {
  border: 2px solid var(--color-input, var(--color-general-dark));
  width: 24px; height: 24px;
}

@media (pointer: fine) {
  input[type="checkbox"]:hover {
    border-width: 3px;
  }
}

input[type="checkbox"]:checked {
  background: url('../../images/check.svg') 50% 50% no-repeat ; 
  background-size: 18px;
}

.dark input[type="checkbox"]:checked {
  background-image: url('../../images/check-white.svg');
}

.ginput_container_consent,
.checkbox-wrapper,
.input-wrapper,
.form-field--checkboxes {
  display: flex; align-items: center;
  gap: 8px;
  letter-spacing: 0.02em;
}

.input-wrapper label,
.ginput_container_consent label,
.checkbox-wrapper label {
  color: var(--color-input, var(--color-general-dark));  
  font-size: var(--font-size-h4)
}

/* Radio button */
input[type="radio"] {
  width: 16px; height: 16px;
  background: white;
  border-radius: 50%;
  flex: 0 0 16px;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.20);
  transition: 0.15s background ease-out;
}

input[type="radio"]:checked {
  background: var(--color-dark);
}

@media (pointer: fine) {
  input[type="radio"]:not(:checked):hover {
    background: var(--color-light);
  }
}

/* Tab radios */
.tab-wrapper {
  position: relative;
}

.filter__input--with-tab {
  position: absolute; opacity: 0;
}

.filter__input--with-tab:checked ~ .uncheck {
  display: block;
}


/* Letters */
.letters {
  display: grid; grid-template-columns: repeat(4, 26px);
  place-items: stretch stretch;
  gap: 8px;
}

.letters .tab {
  width: 100%; display: flex;
  padding: 8px; height: 36px; width: 100%; 
}

.filter-section {
  margin-bottom: 23px;
}


/* View */
.filter-section--view {
  margin: 0;
}

.view__row {
  gap: 8px;
}

.view-item {
  height: 55px; width: 55px;
}


/* Mobile */
@media (max-width: 1000px) {
  label {
    letter-spacing: 0.03em;
    margin-bottom: 0;
  }

  textarea, 
  input[type="text"], 
  input[type="email"], 
  input[type="tel"],
  input[type="search"], 
  input[type="number"] {
    padding: 9px 0px;
  }

  select {
    padding: 7px 0px;
  }

  .form-field--checkboxes {
    margin: 5px 0 0;
  }

  .letters .tab {
    width: 36px;
  }

  .filter-section--view {
    margin-bottom: 32px;
  }

}