/* ==========================================================================
   CONTACT SECTION ("Get in Touch")
   Pozadina #242424 (nastavak iz prethodnih sekcija), sa "card" boxom unutra
   koji ima gradient border (crveno-plavi) i plavi box-shadow glow.
   ========================================================================== */

.contact {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 100px 48px;
  background: #242424;
}

.contact__inner {
  width: 100%;
  max-width: var(--container-width);
}

/* Gradient border trik (isti princip kao Features/Checklist kartice):
   border: 2px solid transparent rezervise prostor, background-image sloj 1
   (pozadina #202020, clip: padding-box) + sloj 2 (gradient border boja,
   clip: border-box). */
.contact__box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;

  padding: 60px;
  border-radius: 32px;
  border: 2px solid transparent;

  background-image: linear-gradient(#202020, #202020), linear-gradient(200deg, #CC3838 -1.35%, #5B8AE1 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;

  box-shadow: 0 4px 40px 0 rgba(91, 138, 225, 0.50);
}

.contact__info {
  display: flex;
  flex-direction: column;
}

.contact__eyebrow {
  margin: 0;
  color: var(--main-blue);
  font-family: var(--font-family);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 21px; /* 150% */
  letter-spacing: 1.68px;
  text-transform: uppercase;
}

.contact__heading {
  margin: 16px 0 0;
  color: #FFF;
  font-family: var(--font-family);
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 46px; /* 115% */
  letter-spacing: -0.8px;
}

.contact__text {
  margin: 16px 0 0;
  max-width: 380px;
  color: #C4C4C4;
  font-family: var(--font-family);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}

.contact__detail {
  margin-top: 48px;
}

.contact__detail-label {
  margin: 0;
  color: #C4C4C4;
  font-family: var(--font-family);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 21px; /* 150% */
  letter-spacing: 1.12px;
  text-transform: uppercase;
}

.contact__detail-value {
  margin: 6px 0 0;
  color: #FFF;
  font-family: var(--font-family);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 30px; /* 150% */
}

.contact__detail-value a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact__detail-value a:hover {
  color: var(--main-blue);
}

.contact__form-col {
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   CF7 FORM STYLING
   Ciljamo CF7 default markup klase (wpcf7-form-control, wpcf7-text, itd.)
   Struktura reda (2 polja u redu) se pravi preko .contact-form-row wrapper-a
   koji se dodaje RUCNO u CF7 admin editoru (uputstvo je poslato u chatu).
   ========================================================================== */

.contact-form-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.contact-form-row + .contact-form-row {
  margin-top: 20px;
}

/* Fallback u slucaju da CF7/WP ipak ubaci <p> tag oko celog reda (npr. ako
   remove_filter iz functions.php ne uspe da se registruje iz nekog razloga) -
   <p> tada postaje flex kontejner za oba polja u redu, umesto blok elementa
   koji bi ih bacio jedno ispod drugog. */
.contact-form-row p {
  margin: 0;
  flex: 1 0 0;
  display: flex;
  align-items: flex-end;
  gap: 24px;
}

.contact-form-row br {
  display: none;
}

.contact__form-col form {
  display: flex;
  flex-direction: column;
}

.contact__form-col .contact-form-row:first-of-type {
  margin-top: 0;
}

.wpcf7-form-control-wrap {
  flex: 1 0 0;
  display: block;
}

.contact__form-col input[type="text"],
.contact__form-col input[type="tel"],
.contact__form-col input[type="email"] {
  display: flex;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;

  border-radius: 8px;
  border: 1px solid #5A5A5A;
  background: #F5F5F7;

  color: #000;
  font-family: var(--font-family);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  outline: none;
}

.contact__form-col input::placeholder,
.contact__form-col textarea::placeholder {
  color: rgba(0, 0, 0, 0.40);
  font-family: var(--font-family);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}

.contact-field-label {
  display: block;
  margin: 0 0 8px 0;
  color: #757575;
  font-family: var(--font-family);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 17px; /* 121.429% */
}

.contact__form-col select {
  display: flex;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  align-items: center;
  box-sizing: border-box;

  border-radius: 8px;
  border: 1px solid #5A5A5A;
  background: #F5F5F7;

  color: #000;
  font-family: var(--font-family);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  outline: none;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.contact__form-col textarea {
  display: flex;
  width: 100%;
  height: 200px;
  padding: 16px;
  box-sizing: border-box;

  border-radius: 8px;
  border: 1px solid #5A5A5A;
  background: #F5F5F7;

  color: #000;
  font-family: var(--font-family);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  outline: none;
  resize: vertical;
}

.contact__form-col .contact-message-row {
  margin-top: 20px;
}

.contact__form-col input[type="submit"] {
  margin-top: 32px;
  align-self: flex-start;

  display: flex;
  padding: 12px 32px;
  justify-content: center;
  align-items: center;

  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.00);
  background: var(--main-blue);

  color: #FFF;
  text-align: center;
  font-family: var(--font-family);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px; /* 137.5% */
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.contact__form-col input[type="submit"]:hover {
  background: var(--main-blue-dark, #4A73C4);
  transform: translateY(-2px);
}

.wpcf7-not-valid-tip {
  color: #CC3838;
  font-size: 13px;
  margin-top: 4px;
}

.wpcf7-response-output {
  border-radius: 8px;
  border: 1px solid #5A5A5A;
  color: #FFF;
  font-family: var(--font-family);
  font-size: 14px;
  margin-top: 16px !important;
}

/* ==========================================================================
   TABLET (768px - 1023px)
   ========================================================================== */
@media (max-width: 1023px) {

  .contact {
    padding: 80px 24px;
  }

  .contact__box {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 48px;
  }
}

/* ==========================================================================
   MOBILE (<= 767px)
   ========================================================================== */
@media (max-width: 767px) {

  .contact {
    padding: 80px 24px;
  }

  .contact__box {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 32px;
  }

  .contact-form-row {
    flex-direction: column;
    gap: 20px;
  }

  /* Pokriva CF7 <p> fallback slucaj (vidi komentar iznad .contact-form-row p) -
     ako CF7 ubaci <p> oko reda, taj <p> je stvarni flex kontejner na desktopu,
     ne .contact-form-row samo - zato mora i ovde da se prebaci na column,
     u suprotnom polja ostaju jedno pored drugog (usko/nagurano) na mobile-u. */
  .contact-form-row p {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
}