/* Контакт страница
   Ползва глобалните променливи от :root в style.css
*/

#contact-page{
  padding:60px 0;
}

/* layout */
#contact-page .contact-layout{
  display:flex;
  flex-direction:column;
  gap:40px;
}

/* 50 / 50 от desktop нагоре */
@media (min-width: 992px){
  #contact-page .contact-layout{
    flex-direction:row;
    align-items:stretch;
  }

  #contact-page .contact-left,
  #contact-page .contact-right{
    flex:0 0 50%;
    max-width:50%;
  }
}

/* форма */
#contact-form{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:24px;
  box-shadow:0 12px 36px rgba(0,0,0,.35);
}

#contact-form .form-label{
  font-size:14px;
  margin-bottom:6px;
  display:block;
}

#contact-form .form-control{
  border-radius:10px;
  padding:10px 12px;
}

#contact-form textarea{
  resize:vertical;
}

#contact-form .btn{
  padding:12px 22px;
  border-radius:999px;
  font-weight:700;
}

/* дясна колона */
#contact-page .contact-right{
  display:flex;
}

/* карта */
#contact-page .contact-map{
  flex:1;
  min-height:420px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 12px 36px rgba(0,0,0,.35);
}

#contact-page .contact-map iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}

/* ред с captcha + бутон */
#contact-page .contact-submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;       /* вертикално по средата */
  gap: 14px;
  margin-top: 16px;
}

/* капчата да не е огромна */
#contact-page .contact-captcha-wrap {
  line-height: 0;
}

#contact-page .contact-captcha-wrap .g-recaptcha,
#contact-page .contact-captcha-wrap .cf-turnstile {
  transform: scale(0.9);
  transform-origin: left center;
}

/* бутонът, когато е в contact-submit-row */
#contact-page .contact-submit-row .btn {
  margin-top: 0;             /* да е на линията с капчата */
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 700;
}

/* мобилно – едно под друго */
@media (max-width: 576px) {
  #contact-page .contact-submit-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  #contact-page .contact-captcha-wrap .g-recaptcha,
  #contact-page .contact-captcha-wrap .cf-turnstile {
    transform: scale(0.95);
    transform-origin: left top;
  }

  #contact-page .contact-submit-row .btn {
    width: auto;
  }
}