/* =========================================================
   Kontakt — jedna forma za sve (članovi, treneri, development, firme).
   Sve ide na podrska@musclemind.app, naslov mejla zavisi od izabrane teme.
   ========================================================= */
.contact__in { max-width: 880px; }
.contact__title { margin: 0; color: var(--text-dark); font: 700 36px/1.1 var(--f-head); letter-spacing: .3px; }
.contact__lead { max-width: 600px; margin: 22px 0 0; font-size: 16px; line-height: 1.6; text-wrap: pretty; }

.cf { margin-top: 50px; }
.cf__row { display: grid; gap: 8px; margin: 0; padding: 28px 0 12px; border: 0; border-bottom: 1px solid var(--hdr-line); }
.cf__topics { padding: 0 0 28px; }
.cf__label { padding: 0; margin-bottom: 16px; color: var(--text-dark); font-size: 16px; line-height: 1.5; }
.cf__label .cf__opt { color: var(--text-light); }
.cf input:not([type=radio]):not([type=checkbox]), .cf textarea { width: 100%; padding: 4px 0; border: 0; border-radius: 0; background: none; color: var(--text-dark); font-size: 16px; line-height: 1.5; outline: 0; }
.cf textarea { min-height: 28px; resize: none; overflow: hidden; }
.cf input::placeholder, .cf textarea::placeholder { color: var(--text-light); transition: color .3s; }
.cf input:focus::placeholder, .cf textarea:focus::placeholder { color: #4a4a4a; }
.cf__row:focus-within { border-bottom-color: var(--text-light); }
.cf__row.is-bad { border-bottom-color: #a23737; }
.cf__err { color: #e06767; font-size: 14px; line-height: 1.5; }
.cf__err:empty { display: none; }

/* podteme se pojavljuju kad se izabere tema */
.chips--sub[hidden] { display: none; }
.chips--sub { animation: fade .35s ease; }
.cf__step { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px; border: 1px solid var(--bd); border-radius: 50%; color: var(--text); font-size: 11px; font-weight: 600; line-height: 1; vertical-align: 1px; }
.cf__alt { margin: 30px 0 0; color: var(--text-light); font-size: 14px; line-height: 1.5; }
.cf__alt a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.cf__alt a:hover { color: var(--link); }

.cf__msg { margin: 25px 0 0; font-size: 15px; line-height: 1.5; }
.cf__msg.is-ok { color: #52bc5d; }
.cf__msg.is-bad { color: #e06767; }
.cf__send { display: inline-flex; align-items: center; gap: 16px; margin-top: 40px; padding: 0; border: 0; background: none; color: var(--text-dark); font-size: 16px; font-weight: 500; cursor: pointer; }
.cf__circle { --fill: var(--accent); display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--text-dark); color: var(--bg); }
.cf__circle .ico { width: 18px; height: 13px; }
.cf__send[disabled] { opacity: .6; pointer-events: none; }

@media (min-width: 768px) {
  .contact__in { margin-inline: auto; }
  .contact__title { font-size: 52px; }
  .contact__lead { font-size: 17px; }
  .cf { margin-top: 60px; }
  .cf__row { padding: 34px 0 14px; }
  .cf__topics { padding: 0 0 28px; }
}