/**
 * Natanek — Form styling (site-wide convention)
 *
 * Cel: jednolity wygląd wszystkich formularzy. Zawiera:
 *   - Custom HTML forms (.form-field) — natywne <input>/<textarea>
 *   - Fluent Forms (.ff-*) — wtyczka WP
 *   - Department selector tabs (.dept-btn)
 *   - Form wrapper (.contact-form-box)
 *
 * Konwencja clip-path (ścięcia brand):
 *   - Wrapper:        var(--clip-corner)     ← 40px (duża karta)
 *   - Submit/tab btn: var(--clip-corner-btn) ← 12px (spójny z .btn)
 *   - Input/textarea: var(--clip-corner-sm)  ← 8px  (mały element)
 *   - Success msg:    var(--clip-corner-sm)  ← 8px
 *
 * Konwencja kolorystyczna: dark theme (białe rgba na ciemnym tle).
 * Aby zastosować na nowym formularzu — owiń go w <div class="contact-form-box">.
 *
 * Tokeny ładowane z style.css (globalnie). Plik enqueued w functions.php
 * dla całego frontendu — nie tylko homepage.
 */

/* ─── FORM WRAPPER ─── */
.contact-form-box {
  background: var(--surface-dark-xs);
  border: 1px solid var(--border-on-dark);
  clip-path: var(--clip-corner);
  padding: 48px;
}

/* ─── DEPARTMENT SELECTOR (tabs nad formularzem) ─── */
.dept-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 32px;
}
.dept-btn {
  padding: 12px 16px;
  background: var(--border-on-dark-sm);
  border: 0;
  clip-path: var(--clip-corner-btn);
  color: var(--text-w-m);
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
  text-align: center;
}
.dept-btn:hover { background: var(--border-on-dark-md); color: var(--white); }
.dept-btn.active {
  background: var(--accent);
  color: var(--white);
}

/* ─── CUSTOM HTML FORM FIELDS (.form-field) ─── */
.form-field { margin-bottom: 16px; }
.form-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--border-on-dark-35);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--border-on-dark-xs);
  border: none;
  border-radius: 0;
  clip-path: var(--clip-corner-sm);
  color: var(--white);
  font-family: var(--body);
  font-size: 0.9375rem;
  outline: none;
  transition: background 0.25s;
}
.form-field input:focus,
.form-field textarea:focus {
  background: var(--accent-focus);
}
.form-field textarea { resize: vertical; min-height: 88px; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--border-on-dark-18); }
.form-submit-btn {
  width: 100%;
  padding: 16px 24px;
  background: var(--accent);
  color: var(--white);
  border: 0;
  border-radius: 0;
  clip-path: var(--clip-corner-btn);
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.2s;
}
.form-submit-btn:hover { opacity: 0.85; }

/* ─── FLUENT FORMS OVERRIDES (scoped: .contact-form-box) ─── */
/* !important — Fluent Forms ładuje swój CSS po theme, więc bez !important
   nie wygramy kaskady. Scope na .contact-form-box żeby nie psuć formularzy
   w wp-admin gdyby kiedyś tam się pojawiły. */

.contact-form-box .ff-default { background: transparent !important; padding: 0 !important; }

/* Labels */
.contact-form-box .ff-el-input--label label {
  font-family: 'Saira Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.45) !important;
  margin-bottom: 8px !important;
}

/* Inputs + textarea — bez border (clip-path ścięcia + background contrast) */
.contact-form-box .ff-el-form-control {
  background: rgba(255,255,255,0.05) !important;
  border: none !important;
  border-radius: 0 !important;
  clip-path: var(--clip-corner-sm) !important;
  color: #fff !important;
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: 15px !important;
  padding: 14px 16px !important;
  box-shadow: none !important;
  outline: none !important;
  transition: background 0.2s !important;
}
.contact-form-box .ff-el-form-control::placeholder { color: rgba(255,255,255,0.25) !important; }
.contact-form-box .ff-el-form-control:focus {
  background: rgba(0,127,218,0.12) !important;
  box-shadow: none !important;
}
.contact-form-box textarea.ff-el-form-control {
  min-height: 120px !important;
  resize: vertical !important;
}

/* Group spacing */
.contact-form-box .ff-el-group { margin-bottom: 20px !important; }
.contact-form-box .ff-t-container { gap: 16px !important; }
.contact-form-box .ff-t-cell { flex: 1 !important; }

/* Submit button — z clip-path ścięcia (spójny rozmiar z .btn) */
.contact-form-box .ff-btn-submit,
.contact-form-box button[type="submit"] {
  background: #007FDA !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  clip-path: var(--clip-corner-btn) !important;
  font-family: 'Instrument Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  padding: 16px 32px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: opacity 0.2s !important;
  box-shadow: none !important;
  text-transform: uppercase !important;
}
.contact-form-box .ff-btn-submit:hover { opacity: 0.85 !important; }

/* Success message — z clip-path ścięcia */
.contact-form-box .ff-message-success {
  background: rgba(0,127,218,0.1) !important;
  border: 1px solid rgba(0,127,218,0.3) !important;
  border-radius: 0 !important;
  clip-path: var(--clip-corner-sm) !important;
  color: rgba(255,255,255,0.85) !important;
  padding: 20px 24px !important;
}

/* Errors */
.contact-form-box .error {
  color: #ff6b6b !important;
  font-size: 12px !important;
  margin-top: 6px !important;
}
.contact-form-box .frm-fluent-form { margin: 0 !important; }
.contact-form-box .ff_submit_btn_wrapper { margin-top: 8px !important; }

/* Hide Subject + Branża — wypełniane automatycznie przez dept-selector JS (piny nad formularzem) */
.contact-form-box .ff-el-group:has([data-name="subject"]),
.contact-form-box .ff-el-group:has([name="subject"]),
.contact-form-box .ff-el-group:has([name="branza"]) {
  display: none !important;
}

/* ─── GLOBAL INPUT BRAND OVERRIDE ───
   Wymusza brand convention na WSZYSTKICH inputach w main content area —
   również poza .contact-form-box (np. legacy formularze w post_content spec-*,
   zaplecze, sprzedaz-pojazdow). Border:none, clip-path 8px.
   Scope na 'main' żeby nie psuć wp-admin / login. */
main input[type="text"],
main input[type="email"],
main input[type="tel"],
main input[type="url"],
main input[type="number"],
main input[type="search"],
main textarea,
.form-field input,
.form-field textarea {
  border: none !important;
  border-radius: 0 !important;
  clip-path: var(--clip-corner-sm) !important;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .contact-form-box { padding: 32px 24px; }
}