/* ==========================================================================
   Fluent Forms bridge
   --------------------------------------------------------------------------
   Maps Fluent Forms' own markup onto the Navan design system. Written against
   the real generated output, not assumed class names:

     .ff-el-group
       .ff-el-input--label [.ff-el-is-required] > label
       .ff-el-input--content > .ff-el-form-control        (input / select / textarea)
       .ff-el-input--content > .ff-el-form-check[.ff_item_selected]
                                 > label.ff-el-form-check-label
                                     > input.ff-el-form-check-radio + span
     .ff-el-group.ff_submit_btn_wrapper > button.ff-btn-submit

   Scoped to .form-shell so it cannot leak into the WP admin or any other form.
   ========================================================================== */

/* ------------------------------------------------------- shell & two-column grid */

.form-shell .fluentform { margin: 0; }

/* The fieldset carries Fluent Forms' own inline reset, so the grid goes on it. */
.form-shell .frm-fluent-form > fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

@media (max-width: 720px) {
  .form-shell .frm-fluent-form > fieldset { grid-template-columns: 1fr; }
}

/* Keep the screen-reader legend out of the grid flow entirely. */
.form-shell .ff_screen_reader_title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.form-shell .ff-el-group { margin: 0; min-width: 0; }

/* Fields that need the full width. Matched on what the group contains, so adding
   or reordering fields in the Fluent Forms editor does not break the layout. */
.form-shell .ff-el-group:has(textarea),
.form-shell .ff-el-group:has(.ff-el-form-check),
.form-shell .ff-el-group:has(input[name="equipment"]),
.form-shell .ff-el-group:has(select[name="subject"]),
.form-shell .ff-el-group.ff_submit_btn_wrapper,
.form-shell .ff-el-group--full { grid-column: 1 / -1; }

/* ---------------------------------------------------------------------- labels */

.form-shell .ff-el-input--label { margin-bottom: 8px; padding: 0; }

.form-shell .ff-el-input--label label {
  font-family: var(--display);
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin: 0;
  padding: 0;
}

.form-shell .ff-el-is-required.asterisk-right label::after {
  content: " *";
  color: var(--blue);
  font-weight: 700;
}

.form-shell .ff-el-tooltip svg { fill: var(--muted); width: 14px; height: 14px; }

/* --------------------------------------------------------------------- controls */

.form-shell .ff-el-form-control,
.form-shell input.ff-el-form-control,
.form-shell select.ff-el-form-control,
.form-shell textarea.ff-el-form-control {
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--ink);
  height: 50px;
  padding: 0 15px;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: #fff;
  width: 100%;
  box-shadow: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}

.form-shell textarea.ff-el-form-control {
  height: auto;
  min-height: 122px;
  padding: 14px 15px;
  line-height: 1.6;
  resize: vertical;
}

.form-shell .ff-el-form-control:hover { border-color: #C0D5EC; }

.form-shell .ff-el-form-control:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(20, 110, 245, .13);
}

.form-shell .ff-el-form-control::placeholder { color: #9CACBB; opacity: 1; }

.form-shell select.ff-el-form-control {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7C8C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 17px;
}

/* ---------------------------------------------------- radios as selectable cards */

.form-shell .ff-el-input--content:has(.ff-el-form-check) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 560px) {
  .form-shell .ff-el-input--content:has(.ff-el-form-check) { grid-template-columns: 1fr; }
}

.form-shell .ff-el-form-check {
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}

.form-shell .ff-el-form-check:hover { border-color: #C0D5EC; }

.form-shell .ff-el-form-check-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  cursor: pointer;
  font-family: var(--display);
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}

.form-shell .ff-el-form-check-input {
  accent-color: var(--blue);
  width: 17px;
  height: 17px;
  margin: 0;
  flex: none;
}

.form-shell .ff-el-form-check.ff_item_selected,
.form-shell .ff-el-form-check:has(input:checked) {
  border-color: var(--blue);
  background: var(--blue-tint);
  box-shadow: 0 0 0 4px rgba(20, 110, 245, .1);
}

.form-shell .ff-el-form-check:has(input:focus-visible) {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- submit button */

.form-shell .ff-el-group.ff_submit_btn_wrapper {
  margin-top: 6px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.form-shell .ff-btn-submit,
.form-shell button.ff-btn.ff-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--display);
  font-size: .96rem;
  font-weight: 700;
  letter-spacing: -.012em;
  padding: 15px 28px;
  height: auto;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: var(--grad-blue);
  color: #fff;
  box-shadow: var(--shadow-blue);
  cursor: pointer;
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}

.form-shell .ff-btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(20, 110, 245, .36);
  color: #fff;
}

.form-shell .ff-btn-submit:active { transform: translateY(0); }

/* ------------------------------------------------------- validation & messaging */

.form-shell .ff-el-form-control.ff-el-is-error,
.form-shell .ff-el-is-error .ff-el-form-control {
  border-color: #D9455C;
  box-shadow: 0 0 0 4px rgba(217, 69, 92, .1);
}

.form-shell .error,
.form-shell .text-danger,
.form-shell .ff-el-is-error-message {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 500;
  color: #C43A50;
  margin-top: 6px;
}

.form-shell .ff-errors-in-stack,
.form-shell .ff-error-message-wrapper {
  grid-column: 1 / -1;
  background: #FDF0F2;
  border: 1px solid #F2C7CE;
  border-radius: var(--radius);
  color: #8E2536;
  font-size: .88rem;
  line-height: 1.55;
}

.form-shell .ff-errors-in-stack:empty,
.form-shell .ff-error-message-wrapper:empty {
  display: none;
  border: 0;
  background: none;
  padding: 0;
}

.form-shell .ff-errors-in-stack:not(:empty),
.form-shell .ff-error-message-wrapper:not(:empty) { padding: 16px 18px; margin-top: 18px; }

.form-shell .ff-message-success {
  background: var(--green-tint);
  border: 1px solid #C9E4D6;
  border-radius: var(--radius);
  padding: 22px 24px;
  color: #093A26;
  font-size: .96rem;
  line-height: 1.6;
}

.form-shell .ff-message-success p:last-child { margin-bottom: 0; }

/* Fluent Forms' loading state dims the form; keep it subtle rather than jarring. */
.form-shell .ff-form-loading { opacity: .6; transition: opacity .2s var(--ease); }