/*
  forms-public.css: the website's forms (Forms module, public site), on top of the Huruma contact
  form (.contact-area .contact-form). Loaded by the public layout after the template, so these rules
  win. Colours come from tokens only (StyleRules) and layout uses logical properties, so the RTL
  build and dark mode need nothing extra.
*/

/* ---- The form's card: the template's dashed frame, on the page's surface in both modes ---- */
.contact-area.bfau-form,
.contact-area.bfau-form-sent {
  background: var(--bfau-surface);
  color: var(--bfau-text);
  box-shadow: var(--bfau-shadow-soft);
}

/* The template aligns fields and the button to the physical left; follow the reading direction. */
.bfau-form .contact-form form,
.bfau-form .contact-form form .form-group,
.bfau-form .contact-form .send-btn {
  text-align: start;
}

.bfau-form .contact-content h3 {
  color: var(--bfau-heading);
}

.bfau-form .contact-content p {
  color: var(--bfau-text-muted);
  margin: 0;
}

/* ---- Labels, help, required and optional marks ---- */
.bfau-form-label {
  display: block;
  margin-block-end: 0.4rem;
  color: var(--bfau-heading);
  font-weight: 600;
}

.bfau-required {
  color: var(--bfau-danger);
  margin-inline-start: 0.15rem;
}

.bfau-optional {
  color: var(--bfau-text-muted);
  font-weight: 400;
  font-size: 0.85em;
  margin-inline-start: 0.25rem;
}

.bfau-form-help {
  display: block;
  margin-block-start: 0.35rem;
  color: var(--bfau-text-muted);
}

/* ---- Inputs: the template's soft grey fields, as tokens so dark mode is dark too ---- */
.bfau-form .contact-form form .form-control {
  background-color: color-mix(in srgb, var(--bfau-text) 5%, var(--bfau-surface));
  border: 1px solid var(--bfau-border);
  color: var(--bfau-text);
}

.bfau-form .contact-form form .form-control:focus {
  border-color: var(--bfau-primary);
  box-shadow: 0 0 0 0.2rem var(--bfau-focus-ring);
}

.bfau-form .contact-form form .form-control.is-invalid {
  border-color: var(--bfau-danger);
}

.bfau-form .contact-form form textarea.form-control {
  block-size: auto;
  min-block-size: 9rem;
}

.bfau-form .invalid-feedback {
  color: var(--bfau-danger);
  font-weight: 500;
}

.bfau-form .form-check {
  padding-inline-start: 1.75rem;
}

.bfau-form .form-check-input {
  margin-inline-start: -1.75rem;
  float: inline-start;
}

.bfau-form .form-check-label {
  color: var(--bfau-text);
}

/* ---- The 1-to-5 score: five round buttons ---- */
.bfau-rating {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

/* Bootstrap makes a legend a big heading; this one is a field label like the others. */
.bfau-rating legend.bfau-form-label {
  float: none;
  inline-size: auto;
  font-size: 1rem;
  line-height: inherit;
}

.bfau-rating-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bfau-rating-input {
  position: absolute;
  opacity: 0;
  inline-size: 1px;
  block-size: 1px;
}

.bfau-rating-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 1px solid var(--bfau-border);
  border-radius: 50%;
  background: var(--bfau-surface);
  color: var(--bfau-heading);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.bfau-rating-input:checked + .bfau-rating-label {
  background: var(--bfau-primary);
  border-color: var(--bfau-primary);
  color: var(--bfau-on-primary);
}

.bfau-rating-input:focus-visible + .bfau-rating-label {
  box-shadow: 0 0 0 0.2rem var(--bfau-focus-ring);
}

.bfau-rating-scale {
  display: flex;
  justify-content: space-between;
  max-inline-size: 16.5rem;
  margin-block-start: 0.35rem;
  color: var(--bfau-text-muted);
  font-size: 0.85rem;
}

/* ---- The hidden field only robots fill: off the screen, never display:none (robots look for that) ---- */
.bfau-form-trap {
  position: absolute;
  inset-inline-start: -10000px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

/* ---- Problems, the privacy line, the closed state ---- */
/* It takes the focus after a refused send (so it is announced); it is not a control, so no ring. */
.bfau-form-problem:focus {
  outline: none;
}

.bfau-form-problem {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: start;
}

.bfau-form-privacy {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-block: 0 1rem;
  color: var(--bfau-text-muted);
  font-size: 0.9rem;
}

.bfau-form-closed {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--bfau-text-muted);
}

.bfau-form-closed .bx {
  font-size: 1.75rem;
  color: var(--bfau-primary-text);
}

.bfau-form-closed p {
  margin: 0;
}

/* The arrow points the way the page reads. */
[dir="rtl"] .bfau-form-arrow {
  display: inline-block;
  transform: scaleX(-1);
}

/* The busy state while sending (forms-public.js). */
.bfau-form [data-bfau-form-submit][disabled] {
  opacity: 0.7;
  cursor: progress;
}

.bfau-form-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-block-end: 1rem;
  color: var(--bfau-link);
}

/* ---- The confirmation ---- */
.bfau-form-sent {
  text-align: center;
}

.bfau-form-sent-icon {
  font-size: 4rem;
  color: var(--bfau-success);
}

.bfau-form-sent h2 {
  margin-block: 0.5rem 1rem;
  color: var(--bfau-heading);
}

.bfau-form-sent-text {
  font-size: 1.1rem;
}

.bfau-form-reference {
  display: inline-block;
  padding: 0.35rem 1rem;
  border-radius: var(--bfau-radius);
  background: color-mix(in srgb, var(--bfau-primary) 10%, var(--bfau-surface));
  color: var(--bfau-heading);
  font-weight: 600;
}

.bfau-form-sent-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.5rem;
  margin-block-start: 1.5rem;
}

.bfau-form-link {
  color: var(--bfau-link);
  font-weight: 600;
}

/* ---- Phones: a lighter frame so the fields get the width ---- */
@media (max-width: 575.98px) {
  .contact-area.bfau-form,
  .contact-area.bfau-form-sent {
    padding: 1.25rem;
  }
}