/* ------------------------------------------------------------------
   Fluent Forms -> MSDC Ring Card design system.
   Maps Fluent Forms' own markup onto the tokens in msdc.css so the
   live forms read as part of the design rather than as a plugin.
   ------------------------------------------------------------------ */

.form-panel .fluentform{ font-family:var(--font-ui); }
.form-panel .fluentform form{ margin:0; }
.form-panel .ff-el-group{ margin-bottom:20px; }
.form-panel .ff-el-group:last-of-type{ margin-bottom:0; }

/* Labels ---------------------------------------------------------- */
.form-panel .ff-el-input--label label{
  font-family:var(--font-ui); font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em; color:var(--text-dim);
  margin-bottom:7px; display:inline-block; line-height:1.45;
}
.form-panel .ff-el-input--label.asterisk-right label:after{ color:var(--accent); }

/* Controls -------------------------------------------------------- */
.form-panel .ff-el-form-control{
  font-family:var(--font-ui); font-size:1rem; color:#fff;
  background:var(--ink); border:1px solid var(--line);
  border-radius:var(--radius); padding:13px 14px; width:100%;
  height:auto; box-shadow:none; transition:.18s ease;
}
.form-panel .ff-el-form-control:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
}
.form-panel .ff-el-form-control::placeholder{ color:var(--text-dim); opacity:.6; }
.form-panel textarea.ff-el-form-control{ min-height:112px; resize:vertical; }

/* Native select arrow, drawn rather than inherited ----------------- */
.form-panel select.ff-el-form-control{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-color:var(--ink);
  background-image:linear-gradient(45deg,transparent 50%,var(--text-dim) 50%),
                   linear-gradient(135deg,var(--text-dim) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% - 2px),calc(100% - 15px) calc(50% - 2px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  padding-right:42px;
}

/* Name field: two real columns ------------------------------------ */
.form-panel .ff-t-container{ display:flex; flex-wrap:wrap; gap:20px; }
.form-panel .ff-t-cell{ flex:1 1 220px; min-width:0; padding:0; }

/* Radios and checkboxes as outlined chips -------------------------- */
.form-panel .ff-el-form-check{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-ui); font-size:.92rem; color:var(--text);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:11px 16px; margin:0 10px 10px 0; cursor:pointer;
  transition:.18s ease;
}
.form-panel .ff-el-form-check:hover{ border-color:var(--accent); }
.form-panel .ff-el-form-check label{
  font:inherit; color:inherit; text-transform:none; letter-spacing:0;
  margin:0; cursor:pointer;
}
.form-panel .ff-el-form-check input{
  accent-color:var(--accent); width:auto; margin:0; flex:none;
}

/* Submit ---------------------------------------------------------- */
.form-panel .ff-btn-submit{
  font-family:var(--font-ui); font-weight:600; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.14em;
  padding:16px 30px; border-width:2px; border-style:solid;
  cursor:pointer; transition:.18s ease; margin-top:6px;
}
.form-panel .ff_submit_btn_wrapper{ margin-top:8px; }

/* Messages -------------------------------------------------------- */
.form-panel .ff-message-success{
  border:1px solid var(--accent); background:rgba(243,78,58,.08);
  padding:18px 20px; border-radius:var(--radius);
  font-family:var(--font-ui); color:var(--text);
}
.form-panel .ff-message-success strong{ color:#fff; }
.form-panel .ff-message-success p{ margin:0; }
.form-panel .ff-el-is-error .ff-el-form-control{ border-color:var(--accent); }
.form-panel .error.text-danger,
.form-panel .ff-el-form-control + .error{
  font-family:var(--font-ui); font-size:.8rem; color:var(--accent); margin-top:6px;
}

@media (max-width:620px){
  .form-panel .ff-t-cell{ flex:1 1 100%; }
  .form-panel .ff-el-form-check{ width:100%; }
}