input, textarea, select {
  border: none;
  outline: none;
  font-family: inherit
}

/* Text area */
textarea {
  resize: none;
  field-sizing: content;
  min-height: 6lh
}

form {
  width: 100%;
  display:flex;
  flex-direction: column;
  gap: var(--n-l)
}

.brxe-form {
  .form-group {
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
  }

  .options-wrapper {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
}

/* Fields */
.form-group {
  position: relative;
  width: 100%;

  :is(textarea, input:where([type="text"], [type="email"], [type="tel"])) {
  display: inline-block;
  font-size: var(--fs-l);
  font-weight: var(--w500);
  width: 100%;
  background: var(--input-def-bg);
  color: currentColor;
  position: relative;
  padding: var(--n-2xl) var(--n-2xl) var(--n-l);
  border-radius: var(--br-l);
  transition: all var(--trs-2) ease;

  &:is(:hover, :focus) {
    -webkit-appearance: none;
    -webkit-box-shadow: var(--strk-h);
    box-shadow: var(--strk-h);
    background: var(--input-actn-bg)!important;
  }

  &:user-valid {
    color: var(--input-actn-txt);    
    }

  &:user-invalid:not(:hover, :focus, :placeholder-shown) {
    background: var(--input-err-bg-clr) !important;
    -webkit-appearance: none;
    -webkit-box-shadow: var(--strk-e);
    box-shadow: var(--strk-e);
    color: var(--input-err-txt-clr)
    }
  }
}

.form-group:has(:is(textarea, input:where([type="text"], [type="email"], [type="tel"]))) label {
  position: absolute;
  width: 100%;
  top: 0;
  left: var(--n-2xl);
  transform-origin: top left;
  transform: translate(0, 1.25em) scale(1);
  transition: all var(--trs-2) ease-in-out;
  z-index: 1;
  pointer-events: none;

  &:before {
    content: "";
    position: absolute;
    right: var(--n-2xl);
    bottom: calc(-1 * var(--n-xl));
    width: var(--n-2xl);
    aspect-ratio: 1;
    background: var(--input-actn-clr) var(--check-ic-url) no-repeat center center;
    border-radius: var(--br-3xl);
    opacity: 0;
    transform: scale(0);
    transition: all var(--trs-2) ease-in-out;
  }

  &:has(+ input:is(:user-valid,:-webkit-autofill)):before {
    opacity: 1;
    transform: scale(1);
  }
}

.form-group:has(:is(textarea, input:where([type="text"], [type="email"], [type="tel"])
):is(:focus, :valid, :invalid:not(:placeholder-shown))) label {
  top: -0.75em !important;
  width: calc(100% - var(--n-2xl));
  font-size: var(--fs-s)
}

/* auto-fill */
input:-webkit-autofill {
  -webkit-text-fill-color: var(--input-actn-txt);
  -webkit-appearance: none;
  -webkit-box-shadow: 0 0 0 62.5em var(--input-def-bg) inset !important;

  &:is(:hover,:focus) {
    -webkit-appearance: none;
    -webkit-box-shadow: var(--strk-h), 0 0 0 62.5em var(--input-actn-bg) inset !important
  }
}

:focus::-webkit-input-placeholder {color: var(--opc)}

/* Submit button */
.brxe-form button[type=submit]{width: 100%;
  .sending .text {
    cursor: default;
    opacity: .5}

  .sending i{opacity: 0}
  .loading {display: none}
  svg {height: 1em}
}

/* Radio button */
.form-group[role=radiogroup] ul {
  width:100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5em, 1fr));
  gap: var(--n-l);

  li:focus-within {
  box-shadow: var(--strk-h);
  border-radius: var(--br-xl)}
}

input[type=radio], input[type=radio] ~ label {
	cursor: pointer;
	-webkit-tap-highlight-color: var(--opc)
}

.form-group[role=radiogroup] {
  li {
    background: var(--prm-300);
    border-radius: var(--br-xl);
    display: flex;
    align-items: center;
    padding: var(--n-l) var(--n-xl);
    transition: all var(--trs-2) ease;

    &:hover {
      box-shadow: var(--strk-h);
      background: var(--input-actn-bg);
      color: var(--input-actn-txt)
    }

    input[type="radio"] {
      border-radius: var(--br-3xl);
      box-shadow: 0 0 0 .0625em var(--ntl-600) inset;
      margin-inline-end: var(--n-m);
      flex-shrink:0;
      outline: var(--opc);
      position: relative;
      width: 1.4rem;
      height: 1.4rem;
      transition: all var(--trs-2) ease;
      -webkit-appearance: none;
      appearance: none;
      
      &:checked {box-shadow: 0 0 0 .5em var(--prm-400) inset;
                & + label {color: var(--prm-500)}}
    }

    label {
      display: flex;
      flex-direction: column;
      width: 100%;
      span {line-height: 1.3em !important;
      &:nth-child(2){padding-left: var(--n-xs);}
      }
    }
  }
}

.col12:has(input[value="curs-online"]:checked) .curs-fizic,.col12:has(input[value="curs-fizic"]:checked) .curs-online  {display: none}

/* Checkbox */
/*.form-group:has(input[type="checkbox"]) {margin-bottom: var(--n-l)}*/
input[type=checkbox]:not(.SwichCk) {
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0;
  background: var(--opc);
  border: var(--strk-w) solid var(--check_b-def-clr);
  border-radius: var(--br-s);
  width: var(--gfx-s-2);
  aspect-ratio: 1;
  transition: all var(--trs-1) ease-in-out;
  cursor: pointer;
  vertical-align: -0.1875em;
  outline: 0;
  position: relative;

  +label {margin-left:var(--n-xs);font-size:var(--fs-s)}

  &:is(:hover, :focus-visible) {
    border-color: var(--check_b-bg-clr);
    -webkit-appearance: none;
    -webkit-box-shadow: 0 0 0 .1875em var(--prm-200);
    box-shadow: 0 0 0 .1875em var(--prm-200)
  }

  &:checked {
    border: none;
    border-color: var(--check_b-bg-clr);
    -webkit-appearance: none;
    -webkit-box-shadow: 0 0 0 .6875em var(--check_b-bg-clr) inset;
    box-shadow: 0 0 0 .6875em var(--check_b-bg-clr) inset
  }

  &:after {
    width: var(--n-l);
    aspect-ratio:1;
    background: var(--check-ic-url) no-repeat;
    content: "";
    display: block;
    position: absolute;
    top: var(--n-xs);
    left: var(--n-xs);
    opacity: 0;
    transition: all var(--trs-1) ease-in-out .1s
  }

  &:checked:after {
    opacity: 1;
  }
}

/* Form notice */
:where(.brxe-form) .message {
    margin-top: var(--n-l);
    padding: var(--n-xl);
    width: auto
}

:where(.brxe-form) .message.success {
    background: var(--pos-alt-lgt);
    color: var(--pos-alt-drk)
}

:where(.brxe-form) .message.error {
    background: var(--neg-alt-lgt);
    color: var(--neg-alt-drk)
}