/* =========================================================
   Form split
   ========================================================= */

.sec-form-split{
  position: relative;
  padding: 9.6rem 0;
  overflow: visible;
}

.sec-form-split.bg-white{
  background: var(--white);
}

.sec-form-split.bg-secondary{
  background: var(--secondary);
}

.sec-form-split.bg-dark-blue{
  background: var(--dark-blue);
}

.sec-form-split .container{
  position: relative;
  z-index: 2;
}

.form-split-grid{
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 8.8rem;
  align-items: start;
}

.form-split-intro,
.form-split-form-column{
  min-width: 0;
}

.form-split-intro{
  position: relative;
  align-self: stretch;
}

.form-split-intro-inner{
  max-width: 46rem;
  padding-right: 2rem;
}

@media(min-width: 992px){
  .form-split-intro-inner{
    position: sticky;
    top: 15rem;
  }

  .admin-bar .form-split-intro-inner{
    top: 18.2rem;
  }
}

.form-split-badge{
  margin-bottom: 2rem;
}

.sec-form-split.bg-dark-blue .form-split-badge{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: #8DB8FF;
}

.form-split-title{
  max-width: 44rem;
  margin: 0;
  color: var(--black);
  font-size: 4rem;
  line-height: 4.8rem;
  font-weight: 600;
  letter-spacing: -1.2px;
  text-transform: none;
}

.sec-form-split.bg-dark-blue .form-split-title{
  color: var(--white);
}

.form-split-lead{
  max-width: 44rem;
  margin-top: 2rem;
}

.form-split-lead p{
  margin: 0 0 1.2rem;
  color: #667085;
  font-size: 1.7rem;
  line-height: 2.8rem;
  letter-spacing: -.1px;
}

.form-split-lead p:last-child{
  margin-bottom: 0;
}

.sec-form-split.bg-dark-blue .form-split-lead p{
  color: rgba(255,255,255,.7);
}

.form-split-accent{
  display: block;
  width: 7.2rem;
  height: .4rem;
  margin-top: 3.2rem;
  border-radius: 999px;
  background: var(--primary);
}

/* =========================================================
   Informacje po lewej
   ========================================================= */

.form-split-info-list{
  display: grid;
  gap: 2rem;
  margin-top: 3.4rem;
}

.form-split-info-item{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
}

.form-split-info-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  flex: 0 0 4.8rem;
  border-radius: 1.4rem;
  background: #eef4ff;
}

.form-split-info-icon img{
  display: block;
  width: 3.4rem;
  height: 3.4rem;
  object-fit: contain;
}

.form-split-info-title{
  margin: 0 0 .5rem;
  color: var(--black);
  font-size: 1.7rem;
  line-height: 2.4rem;
  font-weight: 600;
  letter-spacing: -.15px;
  text-transform: none;
}

.form-split-info-text{
  color: #697289;
  font-size: 1.4rem;
  line-height: 2.2rem;
  letter-spacing: -.05px;
}

.sec-form-split.bg-dark-blue .form-split-info-title{
  color: var(--white);
}

.sec-form-split.bg-dark-blue .form-split-info-text{
  color: rgba(255,255,255,.62);
}

.sec-form-split.bg-dark-blue .form-split-info-icon{
  background: rgba(255,255,255,.08);
}

/* =========================================================
   Panel formularza
   ========================================================= */

.form-split-form-card{
  position: relative;
  padding: 4.8rem;
  border: 1px solid var(--border-secondary);
  border-radius: 2.4rem;
  background: var(--white);
  box-shadow: 0 18px 60px rgba(18, 19, 20, .06);
}

.sec-form-split.bg-white .form-split-form-card{
  background: var(--secondary);
}

.sec-form-split.bg-dark-blue .form-split-form-card{
  background: var(--white);
  border-color: rgba(255,255,255,.12);
}

/* =========================================================
   Contact Form 7 - baza
   ========================================================= */

.form-split-form .wpcf7-form{
  margin: 0;
}

.form-split-form .wpcf7-form > p{
  margin: 0;
}

.form-split-form .wpcf7-form-control-wrap{
  display: block;
  width: 100%;
}

.form-split-form input[type="text"],
.form-split-form input[type="email"],
.form-split-form input[type="tel"],
.form-split-form input[type="url"],
.form-split-form input[type="number"],
.form-split-form select,
.form-split-form textarea{
  width: 100%;
  min-height: 5rem;
  outline: none;
  border: 1px solid var(--border-secondary);
  border-radius: 1rem;
  background: var(--white);
  color: var(--black);
  font-family: inherit;
  font-size: 1.5rem;
  line-height: 2.2rem;
  padding: 1.2rem 1.4rem;
  box-shadow: 0 1px 2px rgba(18,19,20,.05);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.form-split-form textarea{
  min-height: 15rem;
  resize: vertical;
}

.form-split-form input::placeholder,
.form-split-form textarea::placeholder{
  color: #838B9E;
  opacity: 1;
}

.form-split-form input:focus,
.form-split-form select:focus,
.form-split-form textarea:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(20,97,252,.08);
}

.form-split-form input[type="submit"],
.form-split-form button[type="submit"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4.8rem;
  padding: 0 2rem;
  border: 1px solid var(--btn-primary-border);
  border-radius: 1rem;
  background: var(--btn-primary);
  color: var(--btn-primary-color);
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}

.form-split-form input[type="submit"]:hover,
.form-split-form button[type="submit"]:hover{
  background: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover-border);
}

.form-split-form .wpcf7-list-item{
  margin: 0;
}

.form-split-form .wpcf7-checkbox,
.form-split-form .wpcf7-acceptance{
  display: grid;
  gap: 1rem;
}

.form-split-form .wpcf7-list-item label{
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  color: #323745;
  font-size: 1.4rem;
  line-height: 2rem;
  cursor: pointer;
}

.form-split-form input[type="checkbox"]{
  width: 1.8rem;
  height: 1.8rem;
  margin: .1rem 0 0;
  flex: 0 0 1.8rem;
  accent-color: var(--primary);
}

.form-split-form input[type="file"]{
  width: 100%;
  color: #697289;
  font-family: inherit;
  font-size: 1.4rem;
}

.form-split-form .wpcf7-not-valid-tip{
  margin-top: .6rem;
  color: #D52C2A;
  font-size: 1.2rem;
  line-height: 1.6rem;
}

.form-split-form .wpcf7-response-output{
  margin: 2rem 0 0 !important;
  padding: 1.2rem 1.4rem !important;
  border-radius: 1rem;
  font-size: 1.4rem;
  line-height: 2rem;
}

/* Klasy pomocnicze do formularza CF7, ktore wykorzystamy przy jego budowie. */
.form-split-form .form-section{
  padding-bottom: 3.2rem;
  margin-bottom: 3.2rem;
  border-bottom: 1px solid var(--border-secondary);
}

.form-split-form .form-section:last-child{
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.form-split-form .form-section-title{
  margin: 0 0 1.8rem;
  color: var(--black);
  font-size: 2.4rem;
  line-height: 3.2rem;
  font-weight: 600;
  letter-spacing: -.48px;
}

.form-split-form .form-field{
  margin-bottom: 1.6rem;
}

.form-split-form .form-field:last-child{
  margin-bottom: 0;
}

.form-split-form .form-field-label{
  display: block;
  margin-bottom: .7rem;
  color: #323745;
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 500;
}

.form-split-form .form-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
}

.form-split-form .choice-grid .wpcf7-form-control{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.6rem;
}

.form-split-form .choice-grid .wpcf7-list-item label{
  min-height: 4.8rem;
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--border-secondary);
  border-radius: 1rem;
  background: var(--white);
  transition: border-color .2s ease, background-color .2s ease;
}

.form-split-form .choice-grid .wpcf7-list-item label:hover{
  border-color: #b9c8e7;
  background: #f8faff;
}

.form-split-form .upload-field{
  padding: 2.4rem;
  border: 1px dashed #bcc4d4;
  border-radius: 1.4rem;
  background: #fbfcfe;
}

.form-split-form .form-submit-row{
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}

.form-split-form-note{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
  margin-top: 2.4rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--border-secondary);
  color: #697289;
  font-size: 1.3rem;
  line-height: 2rem;
}

.form-split-note-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: #ebf5ff;
  color: var(--primary);
  font-size: 1.2rem;
  font-weight: 600;
}

/* =========================================================
   Responsive
   ========================================================= */

@media(min-width:1360px) and (max-width:1459.98px){
  .sec-form-split{
    padding: 8.8rem 0;
  }

  .form-split-grid{
    gap: 7rem;
  }

  .form-split-form-card{
    padding: 4rem;
  }
}

@media(max-width:1199.98px){
  .form-split-grid{
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap: 5rem;
  }

  .form-split-form-card{
    padding: 3.6rem;
  }
}

@media(max-width:991.98px){
  .sec-form-split{
    padding: 8rem 0;
  }

  .form-split-grid{
    grid-template-columns: 1fr;
    gap: 4.8rem;
  }

  .form-split-intro-inner{
    max-width: 72rem;
    padding-right: 0;
  }

  .form-split-info-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:767.98px){
  .sec-form-split{
    padding: 6.8rem 0;
  }

  .form-split-title{
    font-size: 3.2rem;
    line-height: 4rem;
    letter-spacing: -.64px;
  }

  .form-split-lead p{
    font-size: 1.6rem;
    line-height: 2.6rem;
  }

  .form-split-info-list{
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .form-split-form-card{
    padding: 2.4rem;
    border-radius: 1.8rem;
  }

  .form-split-form .form-row,
  .form-split-form .choice-grid .wpcf7-form-control{
    grid-template-columns: 1fr;
  }

  .form-split-form .form-section{
    padding-bottom: 2.6rem;
    margin-bottom: 2.6rem;
  }

  .form-split-form .form-section-title{
    font-size: 2.2rem;
    line-height: 3rem;
  }
}

/* =========================================================
   CF7 - porzadkowanie automatycznych <br> / pustych akapitow
   ========================================================= */

/* CF7 potrafi dodawac <br> pomiedzy blokami HTML. W tej sekcji
   layout kontrolujemy wylacznie przez gap/marginesy w CSS. */
.form-split-form .wpcf7-form > br,
.form-split-form .form-section > br,
.form-split-form .form-row > br,
.form-split-form .form-field > br,
.form-split-form .choice-grid > br,
.form-split-form .upload > br,
.form-split-form .upload-box > br{
  display: none !important;
}

.form-split-form .wpcf7-form > p:empty,
.form-split-form .form-section > p:empty,
.form-split-form .form-field > p:empty{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Gdy CF7 opakuje pojedynczy fragment formularza w <p>,
   nie pozwalamy temu akapitowi dokladac dodatkowych odstepow. */
.form-split-form .form-section > p,
.form-split-form .form-row > p,
.form-split-form .form-field > p{
  margin-top: 0;
}


/* =========================================================
   Upload - lokalny wyglad dla form_split
   ========================================================= */

.form-split-form .upload-box{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 16rem;
  padding: 3.2rem;
  border: 1px dashed #bcc4d4;
  border-radius: 1.4rem;
  background: #fbfcfe;
}

.form-split-form .upload-box-content{
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.form-split-form .upload-box-content strong{
  display: block;
  margin: 0 0 .3rem;
  color: #323745;
  font-size: 1.7rem;
  line-height: 2.4rem;
  font-weight: 600;
}

.form-split-form .upload-box-content span{
  color: #697289;
  font-size: 1.3rem;
  line-height: 2rem;
}

.form-split-form .upload-box .add-file-btn{
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 4.4rem;
  min-height: 4.4rem;
  margin: 1.6rem 0 0;
  padding: 0 2rem;
  border: 0;
  border-radius: 1rem;
  background: var(--primary);
  color: #fff;
  font-family: inherit;
  font-size: 1.4rem;
  line-height: 4.4rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color .2s ease, transform .2s ease;
}

.form-split-form .upload-box .add-file-btn:hover{
  background: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover-border);
}

.form-split-form .upload-box .add-file-btn:active{
  transform: translateY(1px);
}

.form-split-form .upload-input{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  cursor: pointer;
}

.form-split-form .form-field-help{
  display: block;
  margin-top: 1.2rem;
  color: #697289;
  font-size: 1.2rem;
  line-height: 1.8rem;
}

@media(max-width:767.98px){
  .form-split-form .upload-box{
    min-height: 14rem;
    padding: 2.4rem;
  }

  .form-split-form .upload-box .add-file-btn{
    height: 4.2rem;
    min-height: 4.2rem;
    line-height: 4.2rem;
  }
}

