/* ==========================================================================
   Fluent Forms — complements the base restyling in ipam.css
   (checkboxes, consent, file upload, select, columns, help/required marks).
   Loaded on every page by inc/fields/forms.php.
   ========================================================================== */

.fluentform .ff-t-container { gap: 20px; }
.fluentform .ff-t-container .ff-t-cell { min-width: 0; }
.fluentform .ff-name-field-wrapper .ff-t-container { gap: 20px; }
@media (max-width: 640px) {
  .fluentform .ff-t-container { display: flex; flex-direction: column; gap: 0; }
  .fluentform .ff-t-container .ff-t-cell { flex-basis: 100% !important; width: 100%; }
}

/* Required mark & help text */
.fluentform .ff-el-is-required.asterisk-right label::after { color: var(--amber-600); margin-left: 4px; }
.fluentform .ff-el-help-message { font-size: 13px; line-height: 20px; color: var(--color-text-muted); margin-top: 6px; font-style: normal; }
.fluentform .ff-el-input--label { margin-bottom: 6px; }

/* Select */
.fluentform select.ff-el-form-control {
  appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231b2450' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
}
.fluentform textarea.ff-el-form-control { min-height: 140px; resize: vertical; }
.fluentform .ff-el-form-control::placeholder { color: rgba(74, 85, 104, 0.6); }

/* Checkboxes, radios, consent */
.fluentform .ff-el-form-check { margin-bottom: 8px; }
.fluentform .ff-el-form-check-label { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 22px; color: var(--color-text-body); cursor: pointer; }
.fluentform .ff-el-form-check-input,
.fluentform .ff_tc_checkbox input {
  appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 20px; height: 20px; margin: 1px 0 0;
  border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm); background: #fff; cursor: pointer;
  display: grid; place-items: center; transition: background .15s, border-color .15s;
}
.fluentform input[type="radio"].ff-el-form-check-input { border-radius: 50%; }
.fluentform .ff-el-form-check-input:checked { background: var(--green-600); border-color: var(--green-600); }
.fluentform .ff-el-form-check-input:checked::after {
  content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg);
}
.fluentform input[type="radio"].ff-el-form-check-input:checked::after { width: 8px; height: 8px; border: 0; border-radius: 50%; background: #fff; transform: none; }
.fluentform .ff-el-form-check-input:focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; }
.fluentform .ff-el-form-check.ff-el-tc { display: block; padding: 14px 16px; border-radius: var(--radius-md); background: var(--color-bg-soft); }
.fluentform .ff_tc_checkbox { display: inline-flex; }
/* Fluent Forms lays the consent out as table-row/cells (no gap) — keep our flex row */
.fluentform .ff-el-tc .ff-el-form-check-label.ff_tc_label { display: flex; gap: 10px; }
.fluentform .ff-el-tc .ff_tc_label > span.ff_tc_checkbox, .fluentform .ff-el-tc .ff_tc_label > div.ff_t_c { display: block; padding: 0; }
.fluentform .ff-el-form-check.ff-el-tc label.ff_tc_label > span.ff_tc_checkbox { padding-top: 0 !important; } /* beats fluent-forms-public.css !important */
.fluentform .ff_t_c { font-size: 14px; line-height: 22px; }
.fluentform .ff_t_c a, .fluentform .ff-el-form-check-label a { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }

/* File upload */
.fluentform .ff_upload_btn.ff-btn {
  background: #fff !important; color: var(--navy-900) !important; border: 1.5px dashed var(--color-border-strong) !important;
  font-family: var(--font-mono); font-weight: 500; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; padding: 12px 20px;
}
.fluentform .ff_upload_btn.ff-btn:hover { border-color: var(--navy-900) !important; background: var(--color-bg-soft) !important; }
.fluentform .ff-uploaded-list { margin-top: 10px; }
.fluentform .ff-upload-preview { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; }

/* Submit & feedback */
.fluentform .ff_submit_btn_wrapper { margin-top: 8px; margin-bottom: 0; }
.fluentform .ff-el-is-error .ff-el-form-control { border-color: #b3261e; }
.fluentform .ff-errors-in-stack { margin-top: 12px; color: #b3261e; font-size: 14px; }

/* Forms on a navy background (newsletter keeps its own styles in ipam.css) */
.on-navy .fluentform .ff-el-input--label label { color: rgba(255, 255, 255, 0.75); }
.on-navy .fluentform .ff-el-form-check-label, .on-navy .fluentform .ff_t_c { color: rgba(255, 255, 255, 0.85); }

/* Panel that wraps a full form (contact, application, membership) */
.form-panel {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: clamp(24px, 3.3vw, 40px); display: flex; flex-direction: column; gap: 24px;
  border-top: 6px solid var(--green-600);
}
.form-panel--navy { border-top-color: var(--navy-900); }
.form-panel--amber { border-top-color: var(--amber-500); }
.form-panel__head { display: flex; flex-direction: column; gap: 8px; }
.form-panel__empty { padding: 16px 18px; border-radius: var(--radius-md); border: 1.5px dashed var(--color-border-strong); font-size: 15px; }

/* Search form (searchform.php) — used on search, 404 and anywhere get_search_form() is called */
.search-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; width: 100%; max-width: 640px; }
.search-form .search { flex: 1; min-width: 0; padding: 12px 18px; }
.search-form .search input { font-size: 16px; }
.search-form--inverse .search { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); }
.search-form--inverse .search svg { color: rgba(255, 255, 255, 0.7); }
.search-form--inverse .search input { color: #fff; }
.search-form--inverse .search input::placeholder { color: rgba(255, 255, 255, 0.65); }
.search-form--inverse .search:focus-within { border-color: var(--sage-500); }
@media (max-width: 640px) { .search-form .btn { width: 100%; } }