/* =============================================================
   On-brand styling for Fluent Forms inside the PPE CARE
   feedback card. Scoped to .form-card so it never bleeds.
   Targets stock Fluent Forms (free) markup.
   ============================================================= */

.form-card .fluentform{margin:0}
.form-card .fluentform .ff-el-group{margin-bottom:18px}
.form-card .fluentform .ff-t-container{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0}
.form-card .fluentform .ff-t-cell{padding:0}
@media (max-width:560px){.form-card .fluentform .ff-t-container{grid-template-columns:1fr}}

/* labels + help text */
.form-card .fluentform .ff-el-input--label label,
.form-card .fluentform label.ff-el-form-check-label{
  color:var(--text);font-weight:600;font-size:.9rem;margin-bottom:.45rem;
}
.form-card .fluentform .ff-el-input--label .ff-el-is-required,
.form-card .fluentform .ff_t_required,
.form-card .fluentform .ff-el-is-required{color:var(--green)}
.form-card .fluentform .ff-el-help-message,
.form-card .fluentform .ff-description{color:var(--muted-2);font-size:.8rem;margin-top:.35rem}

/* text inputs / selects / textarea */
.form-card .fluentform input[type=text],
.form-card .fluentform input[type=email],
.form-card .fluentform input[type=tel],
.form-card .fluentform input[type=url],
.form-card .fluentform input[type=number],
.form-card .fluentform input[type=date],
.form-card .fluentform select,
.form-card .fluentform textarea,
.form-card .fluentform .ff-el-form-control{
  width:100%;background:var(--graphite-900);border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);color:var(--text);font-family:inherit;font-size:.96rem;
  padding:.8rem .95rem;line-height:1.4;transition:border-color .2s,box-shadow .2s,background .2s;
}
.form-card .fluentform textarea{min-height:120px;resize:vertical}
.form-card .fluentform ::placeholder{color:var(--muted-2)}
.form-card .fluentform select{
  appearance:none;-webkit-appearance:none;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2398a2a8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.form-card .fluentform input:focus,
.form-card .fluentform select:focus,
.form-card .fluentform textarea:focus,
.form-card .fluentform .ff-el-form-control:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft);background:#0a0d0e;
}

/* section breaks → eyebrow-style headings */
.form-card .fluentform .ff-el-section-break{
  border:0;padding:0;margin:28px 0 14px;border-top:1px solid var(--line);padding-top:22px;
}
.form-card .fluentform .ff-el-section-break:first-child{border-top:0;padding-top:0;margin-top:0}
.form-card .fluentform .ff-el-section-break-title{
  font-family:var(--ff-display);font-weight:800;font-size:1.06rem;color:var(--white);margin:0 0 4px;
}
.form-card .fluentform .ff-el-section-break-desc{color:var(--muted-2);font-size:.86rem;margin:0}

/* checkboxes + radios as pills */
.form-card .fluentform .ff-el-form-check{
  display:inline-flex;align-items:center;margin:0 8px 8px 0;border:1px solid var(--line-strong);
  background:var(--graphite-900);border-radius:999px;transition:.2s var(--ease);
}
.form-card .fluentform .ff-el-form-check-label{
  display:inline-flex;align-items:center;gap:.5rem;margin:0;padding:.55rem .95rem;
  font-weight:500;font-size:.9rem;color:var(--text);cursor:pointer;
}
.form-card .fluentform .ff-el-form-check input[type=checkbox],
.form-card .fluentform .ff-el-form-check input[type=radio]{
  width:16px;height:16px;accent-color:var(--green);cursor:pointer;margin:0;
}
.form-card .fluentform .ff-el-form-check:hover{border-color:var(--green-ring)}
.form-card .fluentform .ff-el-form-check:has(input:checked){border-color:var(--green);background:var(--green-soft)}
.form-card .fluentform .ff-el-form-check:has(input:checked) .ff-el-form-check-label{color:#fff}

/* ratings / stars */
.form-card .fluentform .ff-el-ratings,
.form-card .fluentform .ff_rating_container{color:var(--green)}
.form-card .fluentform .ff-el-ratings .ff_t_stars,
.form-card .fluentform .ff_rating .star,
.form-card .fluentform .ff-el-ratings svg{color:var(--green);fill:currentColor}
.form-card .fluentform .ff-el-ratings .empty,
.form-card .fluentform .ff_rating .empty{color:var(--graphite-500)}

/* Net Promoter (numeric 1-5/0-10) as buttons */
.form-card .fluentform .ff_nps_wrapper label,
.form-card .fluentform .ff-el-ratings-nps label{
  background:var(--graphite-900);border:1px solid var(--line-strong);color:var(--text);
  border-radius:10px;transition:.2s var(--ease);
}
.form-card .fluentform .ff_nps_wrapper input:checked + label,
.form-card .fluentform .ff_nps_wrapper label:hover{background:var(--green-soft);border-color:var(--green);color:#fff}

/* submit button */
.form-card .fluentform .ff-el-group.ff_submit_btn_wrapper,
.form-card .fluentform .ff_submit_btn_wrapper{margin-top:8px}
.form-card .fluentform .ff-btn-submit,
.form-card .fluentform button[type=submit],
.form-card .fluentform .ff_btn_style{
  background:var(--green)!important;color:#0b1206!important;border:0!important;
  font-family:var(--ff-display);font-weight:700;font-size:1rem;letter-spacing:.01em;
  padding:.95rem 1.8rem!important;border-radius:999px!important;cursor:pointer;
  box-shadow:var(--shadow-green);transition:transform .25s var(--ease),background .25s;width:100%;
}
.form-card .fluentform .ff-btn-submit:hover,
.form-card .fluentform .ff_btn_style:hover{background:var(--green-bright)!important;transform:translateY(-2px)}

/* validation + messages */
.form-card .fluentform .ff-el-is-error .ff-el-form-control,
.form-card .fluentform .has-error .ff-el-form-control{border-color:var(--danger);box-shadow:0 0 0 3px rgba(226,91,91,.12)}
.form-card .fluentform .error,
.form-card .fluentform .text-danger,
.form-card .fluentform .ff-el-is-error label.error{color:#f1a3a3;font-size:.82rem;margin-top:.35rem}
.form-card .ff-message-success,
.form-card .fluentform_success{
  background:var(--green-soft);border:1px solid var(--green-ring);color:var(--green-bright);
  border-radius:var(--radius);padding:20px 22px;font-size:.98rem;
}
.form-card .ff-errors-in-stack,
.form-card .error-text{color:#f1a3a3}