/* ============================================================
   Fluent Forms → styled to the approved contact-form design.
   Scoped to .contact__panel so it never touches forms elsewhere.
   Theme-side CSS only; the Fluent Forms plugin files are untouched.
   ============================================================ */

.contact__panel .frm-fluent-form { text-align: right; }

/* FF wraps all fields in a single <fieldset>; that is the real grid parent.
   `min-inline-size: auto` defeats the fieldset's intrinsic min-width that would
   otherwise break the two-column grid. */
.contact__panel .frm-fluent-form > fieldset {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  margin-top: 28px;
  padding: 0;
  border: 0;
  min-inline-size: auto;
}

/* FF's internal hidden inputs sit in the fieldset — keep them out of the grid. */
.contact__panel .frm-fluent-form > fieldset > input[type="hidden"] { display: none; }

/* Each field wrapper is a grid cell; the submit wrapper (last) spans both. */
.contact__panel .frm-fluent-form > fieldset > * {
  margin: 0;
  padding: 0;
  min-width: 0;
}
.contact__panel .frm-fluent-form > fieldset > *:last-child {
  grid-column: 1 / -1;
}

/* Labels are visually hidden — placeholders carry the field names, as designed. */
.contact__panel .ff-el-input--label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.contact__panel .ff-el-input--content {
  margin: 0;
}

.contact__panel .ff-el-form-control {
  width: 100%;
  height: 55px;
  padding: 0 18px;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  line-height: 55px;
  box-shadow: none;
}
.contact__panel .ff-el-form-control::placeholder { color: var(--placeholder); opacity: 1; }
/* type=tel defaults to LTR, pushing the Hebrew placeholder/number to the left.
   Force RTL + right alignment so it reads right-to-left like the other fields. */
.contact__panel input[type="tel"].ff-el-form-control { direction: rtl; text-align: right; }
.contact__panel .ff-el-form-control:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(8, 52, 81, .25);
  outline: none;
}

/* Select — native arrow removed, brand chevron on the inline-end (left in RTL). */
.contact__panel select.ff-el-form-control {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 44px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23083451' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: left 16px center;
}
.contact__panel select.ff-el-form-control:invalid { color: var(--placeholder); }

/* Privacy-consent checkbox row — spans both columns and reads right-to-left
   (checkbox before the white consent text) on the bronze panel. */
.contact__panel .frm-fluent-form > fieldset > div:has(.ff-el-form-check-checkbox) {
  grid-column: 1 / -1;
}
.contact__panel .ff-el-form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.contact__panel .ff-el-form-check-input {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--navy);
}
.contact__panel .ff-el-form-check-label,
.contact__panel .ff_ferror_error_check {
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
}

/* Submit — full-width navy button matching .btn--navy. */
.contact__panel .ff-btn-submit {
  width: 100%;
  min-height: 55px;
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color .25s var(--ease);
}
.contact__panel .ff-btn-submit:hover { background: var(--navy-deep); }

/* Validation + success states, on the bronze panel. */
.contact__panel .ff-el-is-error .ff-el-form-control { border-color: #b3261e; }
.contact__panel .error.text-danger,
.contact__panel .ff-el-is-error .error { color: #ffe0dd; font-size: 13px; margin-top: 6px; }
.contact__panel .ff-message-success {
  grid-column: 1 / -1;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
}

/* ── Success state ───────────────────────────────────────────────────────────
   Set by main.js (.is-submitted) once Fluent Forms shows its success message.
   Hides the intro + form and turns FF's message into a clean, centered
   confirmation card — no input-like border, a "תודה!" heading, white text. */
.contact__panel.is-submitted .contact__title,
.contact__panel.is-submitted .contact__sub,
.contact__panel.is-submitted .frm-fluent-form {
  display: none;
}
.contact__panel.is-submitted .fluentform {
  display: flex;
  min-height: 200px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.contact__panel.is-submitted .ff-message-success {
  /* !important defeats Fluent Forms' own bordered "success box" styling so no
     input-like frame is left behind. */
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 40ch;
  color: #fff;
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
}
.contact__panel.is-submitted .ff-message-success::before {
  content: "תודה!";
  display: block;
  margin-bottom: 10px;
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 700;
  line-height: 1.1;
}

@media (max-width: 860px) {
  .contact__panel .frm-fluent-form > fieldset { grid-template-columns: 1fr; gap: 16px; }
  .contact__panel.is-submitted .fluentform { min-height: 150px; }
}