/* Stylowanie formularza kontaktowego z użyciem Flexbox – bez zbędnego marginesu po prawej stronie */

.contacts {
  width: 100%;
  background: var(--color-sand);
  position: relative;
}
.contacts .page-content-narrow {
  display: flex;
  flex-direction: row-reverse; /* POPRAWKA */
  flex-wrap: wrap; /* DODANO dla lepszej responsywności */
  gap: 40px;
}
.contact-left,
.contact-right {
  background: var(--color-white);
  padding: 30px;
  border-radius: 30px;
  border: 1px solid rgba(var(--color-orange-rgb), 0.2);
}
.contact-left {
  width: calc(30% - 20px);
  overflow: hidden;
  position: relative;
}
.contact-left > h2,
.contact-left > p {
  text-align: center;
}

.contact-details {
  width: 100%;
  height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
.contact-email,
.contact-phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
}
.contact-email span,
.contact-phone span {
  display: block;
  height: 60px;
  width: 60px;
  border-radius: 30px;
  border: 1px dashed var(--color-blue-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.contact-phone a,
.contact-email a,
.contact-email i,
.contact-phone i {
  color: var(--color-blue) !important;
}
.contact-right {
  width: calc(70% - 20px);
}

h2.main-title {
  font-size: 2rem;
}
.padding-standard {
  padding: 60px 15px 200px;
}
.wpcf7-form > p {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.wpcf7-form-control-wrap[data-name='your-name'],
.wpcf7-form-control-wrap[data-name='your-email'] {
  width: 50%;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 20px !important;
}

.wpcf7-form-control-wrap[data-name='your-subject'],
.wpcf7-form-control-wrap[data-name='your-message'],
.wpcf7-form-control-wrap[data-name='zgoda-newsletter'] {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 20px !important;
  margin-top: 20px;
}

.wpcf7-form-control {
  width: 100%;
  padding: 10px !important;
  border: none !important;
  border: 1px dashed rgba(var(--color-magenta-rgb), 0.4) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0);
  line-height: 30px !important;
  transition: var(--default-transition);
}

.wpcf7-form-control:focus {
  border: 1px dashed rgba(var(--color-magenta-rgb), 1) !important;
  outline: none;
}
input:not(:placeholder-shown),
textarea:not(:placeholder-shown) {
  border: 1px dashed rgba(var(--color-magenta-rgb), 1) !important;
}

.wpcf7-textarea {
  resize: vertical;
  height: 200px;
  resize: none;
}
@media (max-width: 1280px) {
  .contacts .page-content-narrow {
    gap: 20px;
  }
  .contact-right {
    width: calc(65% - 10px);
  }
  .contact-left {
    width: calc(35% - 10px);
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 1024px) {
  /* Zmiana kierunku kontenera flexbox na pionowy */
  .contacts .page-content-narrow {
    flex-direction: column-reverse;
  }

  /* Ustawienie obu wewnętrznych divów na pełną szerokość */
  .contact-left,
  .contact-right {
    width: 100%;
    /* Resetujemy właściwość flex-basis, aby na pewno zajęły 100% */
    flex-basis: 100%;
  }
}
@media (max-width: 768px) {
  .wpcf7-form-control-wrap[data-name='your-email'] {
    margin-top: 20px;
  }
  .wpcf7-form > p {
    flex-direction: column;
    margin: 0;
  }

  .wpcf7-form-control-wrap[data-name='your-name'],
  .wpcf7-form-control-wrap[data-name='your-email'],
  .wpcf7-form-control-wrap[data-name='your-subject'],
  .wpcf7-form-control-wrap[data-name='your-message'],
  .wpcf7-form-control-wrap[data-name='zgoda-newsletter'],
  .wpcf7-submit {
    width: 100%;
  }
}
.boxed-link,
input[type='submit'] {
  min-width: 200px;
  text-align: center;
  margin: 20px 10px;
  width: 150px;
  background: var(--color-magenta);
  border-radius: 30px !important;
  height: 60px;
  transition: all 0.3s ease-in-out;
  border: none !important;
}
.boxed-link:hover,
button[type='submit']:hover {
  background-color: var(--color-orange);
}

.wpcf7-not-valid-tip {
  color: var(--color-red);
}
.wpcf7-list-item {
  margin: 0;
  cursor: pointer;
}
.wpcf7-acceptance {
  border: none !important;
  font-size: 0.9rem;
  color: var(--color-blue);
  cursor: pointer;
  padding: 0px !important;
  display: block;
}
.wpcf7-acceptance .wpcf7-list-item {
  background: rgba(var(--color-magenta-rgb), 0.3);
  border-radius: 30px;
  padding: 5px 15px;
  font-weight: 700;
}

input[type='checkbox'] {
  /* Usuwamy systemowy wygląd */
  appearance: none;
  -webkit-appearance: none; /* Dla starszych Safari/Chrome */
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-orange) !important;
  border-radius: 4px;
  background-color: var(--color-white);
  cursor: pointer;
  position: relative;
  vertical-align: middle;
}

/* Wygląd po zaznaczeniu */
input[type='checkbox']:checked {
  background-color: var(--color-red);
  cursor: pointer;
}

/* Tworzymy "ptaszka" za pomocą pseudoelementu */
input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  cursor: pointer;
}
.wpcf7-list-item-label {
  margin-left: 5px;
  cursor: pointer;
}
/* Styl ogólny dla wszystkich komunikatów */
.wpcf7-response-output {
  border-radius: 30px !important; /* Twoje zaokrąglenie */
  padding: 15px 25px !important;
  margin: 20px 0 !important;
  color: var(--color-white) !important; /* Biały tekst */
  font-weight: 500;
  text-align: center;
}

/* Kiedy mail został wysłany pomyślnie (zielony) */
.wpcf7 form.sent .wpcf7-response-output {
  background: var(--color-green) !important; /* Zielony */
  border-color: var(--color-green) !important;
}

/* Kiedy wystąpił błąd walidacji lub wysyłki (czerwony) */
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  background: var(--color-red) !important; /* Czerwony */
  border-color: var(--color-red) !important;
}

/* Kiedy wystąpiło ostrzeżenie / spam (pomarańczowy) */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  background: var(--color-orange) !important; /* Pomarańczowy */
  border-color: var(--color-orange) !important;
}