/* =============================================================
   FALMIS — FORMS
   Requires falmis-tokens.css

   Deliberately simple. Every control is a plain element with one
   class, so Contact Form 7's own markup can wear it unchanged.
   The CF7 section at the bottom maps the wpcf7-* classes onto
   these styles — paste it and CF7 forms match the product.
   ============================================================= */

/* ---------- layout ---------- */

.fm-form{
  display:flex;
  flex-direction:column;
  gap:var(--fm-space-5);
}
.fm-field{ display:block; }
.fm-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:var(--fm-space-4);
  align-items:start;   /* fields with helper text must not stretch their pair */
}

/* ---------- label and help ---------- */

.fm-label{
  display:block;
  margin-bottom:var(--fm-space-2);
  font-size:var(--fm-text-sm);
  font-weight:var(--fm-weight-medium);
  color:var(--fm-text-body);
}
.fm-label .req{ color:var(--fm-error); margin-inline-start:2px; }

.fm-help{
  margin:var(--fm-space-2) 0 0;
  font-size:var(--fm-text-xs);
  line-height:var(--fm-lh-xs);
  color:var(--fm-text-muted);
}
.fm-error{
  margin:var(--fm-space-2) 0 0;
  font-size:var(--fm-text-xs);      /* never smaller — error red is
                                       4.89:1, it has no headroom */
  color:var(--fm-error);
  display:flex;
  align-items:center;
  gap:var(--fm-space-2);
}
.fm-error::before{ content:"✕"; font-size:11px; flex:none; }

/* ---------- text inputs ---------- */

.fm-input,
.fm-textarea,
.fm-select{
  width:100%;
  min-height:var(--fm-control-md);
  padding:11px var(--fm-space-4);
  background:var(--fm-surface-2);
  border:1px solid var(--fm-border-input);   /* 3.02:1 — the border is
                                                the affordance */
  border-radius:var(--fm-radius-md);
  color:var(--fm-text-primary);
  font-family:var(--fm-font);
  font-size:var(--fm-text-base);
  line-height:1.6;
  letter-spacing:var(--fm-tracking);
  transition:border-color var(--fm-dur-fast) var(--fm-ease-out),
             background   var(--fm-dur-fast) var(--fm-ease-out),
             box-shadow   var(--fm-dur-fast) var(--fm-ease-out);
}
.fm-input::placeholder,
.fm-textarea::placeholder{ color:var(--fm-text-muted); }

.fm-input:hover,
.fm-textarea:hover,
.fm-select:hover{ border-color:var(--fm-border-accent); }

.fm-input:focus,
.fm-textarea:focus,
.fm-select:focus{
  outline:none;
  border-color:var(--fm-focus-ring);
  background:var(--fm-surface-3);
  box-shadow:var(--fm-focus-shadow);
}

.fm-textarea{ min-height:120px; resize:vertical; }

/* validation */
.fm-input.is-error,
.fm-textarea.is-error,
.fm-select.is-error{
  border-color:var(--fm-border-error);
  background:var(--fm-error-bg);
}
.fm-input.is-error:focus,
.fm-textarea.is-error:focus{
  box-shadow:0 0 0 3px rgba(240,86,122,.28);
}
.fm-input.is-success{ border-color:var(--fm-border-success); }

/* disabled */
.fm-input:disabled,
.fm-textarea:disabled,
.fm-select:disabled{
  background:var(--fm-surface-1);
  border-color:var(--fm-border);
  color:var(--fm-text-disabled);
  cursor:not-allowed;
}

/* numbers hold a fixed digit width */
.fm-input[inputmode="numeric"],
.fm-input[type="tel"]{ font-variant-numeric:tabular-nums; }

/* Latin values inside an RTL form stay left-to-right */
.fm-input[type="email"],
.fm-input[type="url"],
.fm-input[type="tel"]{ direction:ltr; text-align:start; }

/* ---------- select ---------- */

.fm-select-wrap{ position:relative; display:block; }
.fm-select{
  appearance:none;
  -webkit-appearance:none;
  padding-inline-end:var(--fm-space-10);
  cursor:pointer;
}
.fm-select-wrap::after{
  content:"";
  position:absolute;
  inset-inline-end:var(--fm-space-4);
  top:calc(50% - 3px);
  width:8px; height:8px;
  border-inline-end:2px solid var(--fm-text-muted);
  border-block-end:2px solid var(--fm-text-muted);
  transform:translateY(-2px) rotate(45deg);
  pointer-events:none;
  transition:border-color var(--fm-dur-fast) var(--fm-ease-out);
}
.fm-select-wrap:hover::after{ border-color:var(--fm-text-accent); }
.fm-select option{ background:var(--fm-surface-3); color:var(--fm-text-primary); }

/* ---------- checkbox and radio ---------- */

.fm-check{
  display:flex;
  align-items:flex-start;
  gap:var(--fm-space-3);
  cursor:pointer;
  font-size:var(--fm-text-sm);
  color:var(--fm-text-body);
  min-height:var(--fm-control-md);
  padding-block:10px;
}
.fm-check input{
  appearance:none;
  -webkit-appearance:none;
  flex:none;
  width:20px; height:20px;
  margin:0;
  background:var(--fm-surface-2);
  border:1px solid var(--fm-border-input);
  border-radius:var(--fm-radius-sm);
  cursor:pointer;
  display:grid;
  place-content:center;
  transition:background var(--fm-dur-fast) var(--fm-ease-out),
             border-color var(--fm-dur-fast) var(--fm-ease-out);
}
.fm-check input[type="radio"]{ border-radius:var(--fm-radius-full); }

.fm-check input::after{
  content:"";
  width:10px; height:10px;
  transform:scale(0);
  transition:transform var(--fm-dur-fast) var(--fm-ease-snap);
}
.fm-check input[type="checkbox"]::after{
  width:11px; height:6px;
  border-inline-start:2px solid #fff;
  border-block-end:2px solid #fff;
  transform:rotate(-45deg) scale(0);
  margin-block-start:-3px;
}
.fm-check input[type="radio"]::after{
  border-radius:var(--fm-radius-full);
  background:#fff;
}
.fm-check input:checked{
  background:var(--fm-brand);
  border-color:var(--fm-brand);
}
.fm-check input[type="checkbox"]:checked::after{ transform:rotate(-45deg) scale(1); }
.fm-check input[type="radio"]:checked::after{ transform:scale(1); }
.fm-check input:hover{ border-color:var(--fm-border-accent); }
.fm-check input:focus-visible{ outline:2px solid var(--fm-focus-ring); outline-offset:3px; }
.fm-check input:disabled{ background:var(--fm-surface-1); border-color:var(--fm-border); cursor:not-allowed; }
.fm-check input:disabled + span{ color:var(--fm-text-disabled); }

/* ---------- toggle ---------- */

.fm-toggle{
  display:flex;
  align-items:center;
  gap:var(--fm-space-3);
  cursor:pointer;
  font-size:var(--fm-text-sm);
  color:var(--fm-text-body);
  min-height:var(--fm-control-md);
}
.fm-toggle input{
  appearance:none;
  -webkit-appearance:none;
  flex:none;
  position:relative;
  width:46px; height:26px;
  margin:0;
  border-radius:var(--fm-radius-full);
  background:var(--fm-surface-2);
  border:1px solid var(--fm-border-input);
  cursor:pointer;
  transition:background var(--fm-dur-base) var(--fm-ease-out),
             border-color var(--fm-dur-base) var(--fm-ease-out);
}
.fm-toggle input::after{
  content:"";
  position:absolute;
  inset-block-start:3px;
  inset-inline-start:3px;
  width:18px; height:18px;
  border-radius:var(--fm-radius-full);
  background:var(--fm-text-muted);
  transition:transform var(--fm-dur-base) var(--fm-ease-out),
             background var(--fm-dur-base) var(--fm-ease-out);
}
.fm-toggle input:checked{ background:var(--fm-gradient-button); border-color:var(--fm-border-strong); }
.fm-toggle input:checked::after{ background:#fff; transform:translateX(20px); }
[dir="rtl"] .fm-toggle input:checked::after{ transform:translateX(-20px); }
.fm-toggle input:focus-visible{ outline:2px solid var(--fm-focus-ring); outline-offset:3px; }

/* ---------- file upload ---------- */

.fm-upload{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--fm-space-2);
  min-height:140px;
  padding:var(--fm-space-6);
  text-align:center;
  background:var(--fm-surface-2);
  border:1px dashed var(--fm-border-input);
  border-radius:var(--fm-radius-lg);
  cursor:pointer;
  transition:border-color var(--fm-dur-base) var(--fm-ease-out),
             background var(--fm-dur-base) var(--fm-ease-out);
}
.fm-upload:hover,
.fm-upload.is-drag{
  border-color:var(--fm-focus-ring);
  background:var(--fm-tint-violet);
}
.fm-upload input{ position:absolute; width:1px; height:1px; opacity:0; }
.fm-upload b{ font-size:var(--fm-text-sm); font-weight:var(--fm-weight-medium); color:var(--fm-text-primary); }
.fm-upload span{ font-size:var(--fm-text-xs); color:var(--fm-text-muted); }
.fm-upload .ring{
  width:38px; height:38px; border-radius:var(--fm-radius-full);
  border:1px solid var(--fm-border-accent); background:var(--fm-tint-violet);
  display:grid; place-content:center; color:var(--fm-text-accent); font-size:18px;
  margin-bottom:var(--fm-space-1);
}

/* ---------- form-level message ---------- */

.fm-note{
  display:flex;
  gap:var(--fm-space-3);
  padding:var(--fm-space-4);
  border-radius:var(--fm-radius-md);
  border:1px solid;
  font-size:var(--fm-text-sm);
}
.fm-note--ok  { background:var(--fm-success-bg); border-color:var(--fm-border-success); color:var(--fm-success); }
.fm-note--warn{ background:var(--fm-warning-bg); border-color:rgba(232,184,75,.40); color:var(--fm-warning); }
.fm-note--bad { background:var(--fm-error-bg);   border-color:var(--fm-border-error);  color:var(--fm-error); }
.fm-note--info{ background:var(--fm-info-bg);    border-color:rgba(96,165,250,.40);    color:var(--fm-info); }


/* =============================================================
   CONTACT FORM 7
   CF7 emits its own markup and its own classes. Rather than
   fight it, map them onto the styles above. Paste this block
   into the theme and CF7 forms match the product with no
   change to the shortcode.
   ============================================================= */

.wpcf7-form{ display:flex; flex-direction:column; gap:var(--fm-space-5); }
.wpcf7-form p{ margin:0; }
.wpcf7-form label{
  display:block;
  font-size:var(--fm-text-sm);
  font-weight:var(--fm-weight-medium);
  color:var(--fm-text-body);
}
.wpcf7-form-control-wrap{ display:block; margin-top:var(--fm-space-2); }

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form textarea,
.wpcf7-form select{
  width:100%;
  min-height:var(--fm-control-md);
  padding:11px var(--fm-space-4);
  background:var(--fm-surface-2);
  border:1px solid var(--fm-border-input);
  border-radius:var(--fm-radius-md);
  color:var(--fm-text-primary);
  font-family:var(--fm-font);
  font-size:var(--fm-text-base);
  line-height:1.6;
  transition:border-color var(--fm-dur-fast) var(--fm-ease-out),
             background var(--fm-dur-fast) var(--fm-ease-out),
             box-shadow var(--fm-dur-fast) var(--fm-ease-out);
}
.wpcf7-form textarea{ min-height:120px; resize:vertical; }
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus{
  outline:none;
  border-color:var(--fm-focus-ring);
  background:var(--fm-surface-3);
  box-shadow:var(--fm-focus-shadow);
}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder{ color:var(--fm-text-muted); }

/* CF7 marks a bad field with this class */
.wpcf7-form .wpcf7-not-valid{
  border-color:var(--fm-border-error);
  background:var(--fm-error-bg);
}
.wpcf7-not-valid-tip{
  margin-top:var(--fm-space-2);
  font-size:var(--fm-text-xs);
  color:var(--fm-error);
}

/* submit button — the Falmis primary */
.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"]{
  height:var(--fm-control-lg);
  padding-inline:var(--fm-space-8);
  border-radius:var(--fm-radius-full);
  border:1px solid var(--fm-border-strong);
  background:var(--fm-gradient-button);
  color:var(--fm-text-on-brand);
  font-family:var(--fm-font);
  font-size:var(--fm-text-sm);
  font-weight:var(--fm-weight-bold);
  cursor:pointer;
  box-shadow:var(--fm-glow-aurora), inset 0 1px 0 var(--fm-highlight-top);
  transition:transform var(--fm-dur-fast) var(--fm-ease-out),
             filter var(--fm-dur-fast) var(--fm-ease-out);
}
.wpcf7-form input[type="submit"]:hover{ transform:translateY(-3px); filter:brightness(1.1); }
.wpcf7-form input[type="submit"]:active{ transform:scale(.97); }

/* CF7 response messages */
.wpcf7-response-output{
  margin:0 !important;
  padding:var(--fm-space-4) !important;
  border-radius:var(--fm-radius-md);
  border-width:1px !important;
  font-size:var(--fm-text-sm);
}
.wpcf7 form.sent .wpcf7-response-output{
  background:var(--fm-success-bg); border-color:var(--fm-border-success) !important; color:var(--fm-success);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{
  background:var(--fm-error-bg); border-color:var(--fm-border-error) !important; color:var(--fm-error);
}
.wpcf7 form.spam .wpcf7-response-output{
  background:var(--fm-warning-bg); border-color:rgba(232,184,75,.40) !important; color:var(--fm-warning);
}
.wpcf7-spinner{ filter:hue-rotate(220deg) saturate(1.4); }

/* CF7 checkbox and radio lists */
.wpcf7-list-item{ margin:0 0 var(--fm-space-2) 0; display:block; }
.wpcf7-list-item label{ display:flex; align-items:center; gap:var(--fm-space-3); cursor:pointer; }
.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"]{
  appearance:none; -webkit-appearance:none;
  width:20px; height:20px; flex:none; margin:0;
  background:var(--fm-surface-2);
  border:1px solid var(--fm-border-input);
  border-radius:var(--fm-radius-sm);
  cursor:pointer;
}
.wpcf7-form input[type="radio"]{ border-radius:var(--fm-radius-full); }
.wpcf7-form input[type="checkbox"]:checked,
.wpcf7-form input[type="radio"]:checked{
  background:var(--fm-brand); border-color:var(--fm-brand);
}

/* =============================================================
   RULES
   · Every input needs a visible label. A placeholder is not a
     label — it disappears the moment a person types.
   · Error text sits under the field it belongs to, never at the
     top of the form.
   · Error colour never carries the message alone. The ✕ mark and
     the words do that.
   · Minimum control height is 44px, including checkboxes, which
     get padding to reach it.
   · Email, URL, and phone fields force direction:ltr inside an
     RTL form.
   ============================================================= */