/* =========================================================
   XFX CONTACT FORM
   ========================================================= */

.xfx-contact-form-wrap,
.xfx-contact-form {
  width: 100%;
}

.xfx-contact-form *,
.xfx-contact-form *::before,
.xfx-contact-form *::after {
  box-sizing: border-box;
}

.xfx-contact-form__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.xfx-contact-form__field {
  width: 100%;
}


/* =========================================================
   INPUTS + TEXTAREA
   ========================================================= */

.xfx-contact-form input[type="email"],
.xfx-contact-form input[type="tel"],
.xfx-contact-form textarea {
  display: block;
  width: 100%;

  margin: 0;

  padding: 12px 15px;

  background: transparent !important;
  background-color: transparent !important;

  border: 1px solid hsla(0, 0%, 100%, .20) !important;
  border-radius: 6px !important;

  color: var(--white, #fff);

  font-size: 14px;
  line-height: 1.45;

  outline: none;
  box-shadow: none;

  appearance: none;
  -webkit-appearance: none;

  transition:
    border-color .22s ease;
}

.xfx-contact-form input[type="email"],
.xfx-contact-form input[type="tel"] {
  min-height: 55px;
  height: auto;
}

.xfx-contact-form textarea {
  min-height: 150px;

  resize: vertical;

  /* Wymuszenie bordera także przy globalnych stylach Bricks */
  border-width: 1px !important;
  border-style: solid !important;
  border-color: hsla(0, 0%, 100%, .20) !important;
}

.xfx-contact-form input::placeholder,
.xfx-contact-form textarea::placeholder {
  color: hsla(0, 0%, 100%, .48);
  opacity: 1;
}

.xfx-contact-form input[type="email"]:focus,
.xfx-contact-form input[type="tel"]:focus,
.xfx-contact-form textarea:focus {
  background: transparent !important;
  background-color: transparent !important;

  border-color: var(--white, #fff) !important;
}

.xfx-contact-form .is-invalid {
  border-color: #ff6801 !important;
}


/* =========================================================
   ERRORS
   ========================================================= */

.xfx-contact-form__error {
  display: none;

  margin-top: 7px;

  color: #ff8a3d;

  font-size: 12px;
  line-height: 1.4;
}

.xfx-contact-form__error.is-visible {
  display: block;
}


/* =========================================================
   FILE UPLOAD
   ========================================================= */

.xfx-contact-form__upload {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 9px;
}

.xfx-contact-form__file-input {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  opacity: 0 !important;

  pointer-events: none !important;
}

.xfx-contact-form__file-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: fit-content;
  max-width: 100%;

  padding: 11px 15px;

  border: 1px solid var(--white, #fff) !important;
  border-radius: 6px;

  background: transparent;

  color: var(--white, #fff) !important;

  font-size: 13px;
  font-weight: 600;

  cursor: pointer;

  transition:
    border-color .22s ease,
    background-color .22s ease;
}

.xfx-contact-form__file-button,
.xfx-contact-form__file-button:hover,
.xfx-contact-form__file-button:focus,
.xfx-contact-form__file-button:active,
.xfx-contact-form__file-button:visited {
  color: var(--white, #fff) !important;
}

.xfx-contact-form__file-button:hover {
  border-color: var(--white, #fff);
  background: rgba(255, 255, 255, .06);
}

.xfx-contact-form__file-info {
  color: hsla(0, 0%, 100%, .50);

  font-size: 12px;
  line-height: 1.5;
}

.xfx-contact-form__file-list {
  display: flex;
  flex-direction: column;

  gap: 4px;

  color: hsla(0, 0%, 100%, .68);

  font-size: 12px;
}


/* =========================================================
   CONSENT
   ========================================================= */

.xfx-contact-form__consent-group {
  width: 100%;
}

.xfx-contact-form__consent {
  display: flex !important;
  align-items: flex-start !important;

  gap: 10px !important;

  width: 100%;

  margin: 0;

  cursor: pointer;

  text-transform: none !important;
  letter-spacing: normal !important;
}

.xfx-contact-form__consent-input {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  margin: 0 !important;
  padding: 0 !important;

  opacity: 0 !important;

  pointer-events: none;
}

.xfx-contact-form__checkbox {
  position: relative;

  display: block !important;

  flex: 0 0 18px !important;

  width: 18px;
  height: 18px;

  margin: 2px 0 0 0 !important;

  border: 1px solid hsla(0, 0%, 100%, .36);
  border-radius: 3px;

  background: transparent;
}

.xfx-contact-form__consent-text {
  display: block;

  flex: 1 1 auto;

  margin: 0;

  color: hsla(0, 0%, 100%, .68);

  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;

  text-transform: none !important;
  letter-spacing: normal !important;
}

.xfx-contact-form__consent-text a {
  color: var(--white, #fff);

  text-decoration: underline;
  text-underline-offset: 3px;
}

.xfx-contact-form__consent-input:focus-visible
+ .xfx-contact-form__checkbox {
  border-color: var(--white, #fff);
}

.xfx-contact-form__consent-input:checked
+ .xfx-contact-form__checkbox {
  border-color: #ff6801;
}

.xfx-contact-form__consent-input:checked
+ .xfx-contact-form__checkbox::after {
  content: "";

  position: absolute;

  top: 2px;
  left: 5px;

  width: 5px;
  height: 9px;

  border-right: 2px solid #ff6801;
  border-bottom: 2px solid #ff6801;

  transform: rotate(45deg);
}


/* =========================================================
   CAPTCHA
   ========================================================= */

.xfx-contact-form__captcha {
  width: 100%;
  overflow: visible;
}


/* =========================================================
   STATUS
   ========================================================= */

.xfx-contact-form__status {
  display: none;

  padding: 14px 15px;

  border: 1px solid rgba(255, 104, 1, .40);
  border-radius: 6px;

  background: rgba(255, 104, 1, .06);

  color: var(--white, #fff);

  font-size: 13px;
  line-height: 1.55;
}

.xfx-contact-form__status.is-visible {
  display: block;
}


/* =========================================================
   SUBMIT
   ========================================================= */

.xfx-contact-form__submit-wrap {
  width: 100%;

  overflow: visible;
}

.xfx-contact-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 14px;

  width: 100%;
  max-width: none;

  padding: 18px 25px;

  border: 0;
  border-radius: 8px;

  background: var(--white, #fff);

  color: var(--black, #060606);

  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;

  letter-spacing: 2px;
  text-transform: uppercase;

  cursor: pointer;

  box-shadow: none;

  transition:
    background-color .25s ease,
    color .25s ease;
}

.xfx-contact-form__submit i {
  font-size: 14px;

  transition:
    transform .25s ease;
}

.xfx-contact-form__submit:hover {
  background: var(--white, #fff);
  color: var(--black, #060606);
  box-shadow: none;
  filter: none;
}

.xfx-contact-form__submit:hover i {
  transform: translateX(4px);
}

.xfx-contact-form__submit:disabled {
  opacity: .55;

  cursor: wait;
}


/* =========================================================
   THANK YOU
   ========================================================= */

.xfx-contact-thankyou {
  display: none;

  width: 100%;

  padding: 40px 0;
}

.xfx-contact-thankyou.is-visible {
  display: block;
}

.xfx-contact-thankyou__check {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;

  margin-bottom: 22px;

  border: 1px solid #b2ff33;
  border-radius: 50%;

  color: #b2ff33;

  font-size: 20px;
}

.xfx-contact-thankyou h3 {
  margin: 0 0 12px;

  color: var(--white, #fff);
}

.xfx-contact-thankyou p {
  max-width: 600px;

  margin: 0;

  color: hsla(0, 0%, 100%, .68);

  line-height: 1.65;
}


/* =========================================================
   HONEYPOT
   ========================================================= */

.xfx-contact-form__hp {
  position: absolute !important;

  left: -99999px !important;

  width: 1px !important;
  height: 1px !important;

  opacity: 0 !important;

  pointer-events: none !important;
}