/* assets/css/forms.css */

/* Scope: only this template, only Ninja Forms */
 .page-template-basic-forms-page .sio-dark-form .nf-form-cont {
  /* Theme expects rgb(var(--...)) tokens; 0 0 0 = black */
  /* page text color */
  --theme-color-body: 255 255 255;
  color: rgb(var(--theme-color-body));
}

/* Inputs/selects/textarea often don't inherit, so set explicitly */
 .page-template-basic-forms-page .sio-dark-form .nf-form-cont input.ninja-forms-field,
 .page-template-basic-forms-page .sio-dark-form .nf-form-cont textarea.ninja-forms-field,
 .page-template-basic-forms-page .sio-dark-form .nf-form-cont select.ninja-forms-field {
  color: #fff;
  -webkit-text-fill-color: #fff; /* webkit/autofill quirks */
}

/* Placeholder & labels */
 .page-template-basic-forms-page .sio-dark-form .nf-form-cont .ninja-forms-field::placeholder { color: #333; opacity: 1; }
 .page-template-basic-forms-page .sio-dark-form .nf-form-cont label { color: grey; }

/* Chrome/Safari autofill */
 .page-template-basic-forms-page .sio-dark-form .nf-form-cont input.ninja-forms-field:-webkit-autofill {
  -webkit-text-fill-color: #000;
  transition: background-color 9999s ease-out;
}

 .page-template-basic-forms-page .sio-dark-form .nf-form-cont textarea.ninja-forms-field {
  background-color: #000;
  color: #fff;
  -webkit-text-fill-color: #fff; /* helps Safari autofill */
  border: 0 solid #636363;            /* optional tweak */
  border-bottom: 1px solid #fff;
}

 .page-template-basic-forms-page .sio-dark-form .nf-form-cont select {
  background-color: #f0f0f0;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.5rem;
}

 .page-template-basic-forms-page .sio-dark-form .nf-form-cont select:focus {
  background-color: #fff;
  outline: 2px solid #fbad25; /* your brand accent */
  outline-offset: 2px;
}

/* Style the default visible selected option text */
 .page-template-basic-forms-page .sio-dark-form .nf-form-cont select {
  background-color: #f0f0f0; /* light grey */
  color: #000;               /* default selected text = black */
}

/* Also set the color on the options themselves (for open dropdown list) */
 .page-template-basic-forms-page .sio-dark-form .nf-form-cont select option {
  color: #000;               /* option text black */
  background-color: #fff;    /* dropdown background */
}
html.dark  .page-template-basic-forms-page .sio-dark-form .nf-form-cont select {
  background-color: #222;
  color: #fff;
}
html.dark  .page-template-basic-forms-page .sio-dark-form .nf-form-cont select option {
  background-color: #333;
  color: #fff;
}

/* Smooth transitions on state changes */
 .page-template-basic-forms-page .sio-dark-form .nf-form-cont .ninja-forms-field {
  transition: background-color .15s ease, color .15s ease, outline-color .15s ease, box-shadow .15s ease;
}

/* Hover: dim background and ensure readable text */
 .page-template-basic-forms-page .sio-dark-form .nf-form-cont .ninja-forms-field:hover {
  background-color: #222;
  color: #fff;
  -webkit-text-fill-color: #fff; /* WebKit */
  caret-color: #fff;             /* visible flashing caret */
}

/* Focus/typing: same as hover plus a clear focus ring */
 .page-template-basic-forms-page .sio-dark-form .nf-form-cont .ninja-forms-field:focus,
 .page-template-basic-forms-page .sio-dark-form .nf-form-cont .ninja-forms-field:focus-visible {
  background-color: #222;
  color: #fff;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  outline: 2px solid #fbad25;  /* brand accent */
  outline-offset: 2px;
  box-shadow: none;            /* avoid theme shadows fighting the ring */
}

/* Placeholder stays readable on dark background */
 .page-template-basic-forms-page .sio-dark-form .nf-form-cont .ninja-forms-field::placeholder {
  color: #bbb;
  opacity: 1;
}

/* Open dropdown list items (when the select is expanded) */
 .page-template-basic-forms-page .sio-dark-form .nf-form-cont select option {
  background-color: #222;
  color: #fff;
}

/* Autofill (Chrome/Safari) – force white text & dark bg inside the input */
 .page-template-basic-forms-page .sio-dark-form .nf-form-cont input.ninja-forms-field:-webkit-autofill,
 .page-template-basic-forms-page .sio-dark-form .nf-form-cont textarea.ninja-forms-field:-webkit-autofill {
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
  /* paint over the yellow autofill bg */
  box-shadow: 0 0 0 1000px #222 inset;
  transition: background-color 9999s ease-out; /* suppress flash */
}

/* Optional: selection highlight inside inputs/textarea */
 .page-template-basic-forms-page .sio-dark-form .nf-form-cont .ninja-forms-field::selection {
  background: #fbad25;
  color: #000;
}
/* Base style for all Ninja Forms text inputs (not submit buttons) */
 .page-template-basic-forms-page .sio-dark-form .prose .nf-form-cont input.ninja-forms-field:not([type="submit"]),
 .page-template-basic-forms-page .sio-dark-form .prose .nf-form-cont input[type="text"].ninja-forms-field,
 .page-template-basic-forms-page .sio-dark-form .prose .nf-form-cont input[type="email"].ninja-forms-field,
 .page-template-basic-forms-page .sio-dark-form .prose .nf-form-cont input[type="tel"].ninja-forms-field,
 .page-template-basic-forms-page .sio-dark-form .prose .nf-form-cont input[type="url"].ninja-forms-field,
 .page-template-basic-forms-page .sio-dark-form .prose .nf-form-cont input[type="number"].ninja-forms-field,
 .page-template-basic-forms-page .sio-dark-form .prose .nf-form-cont input[type="password"].ninja-forms-field {
  background-color: #000;
  color: #fff;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  border: 0 solid #636363;     /* to match your textarea */
  border-bottom: 1px solid #fff;
}
/* Hover/focus specifically for inputs (higher specificity with .prose) */
 .page-template-basic-forms-page .sio-dark-form .prose .nf-form-cont input.ninja-forms-field:hover {
  background-color: #222;
  color: #fff;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
}

 .page-template-basic-forms-page .sio-dark-form .prose .nf-form-cont input.ninja-forms-field:focus,
 .page-template-basic-forms-page .sio-dark-form .prose .nf-form-cont input.ninja-forms-field:focus-visible {
  background-color: #222;
  color: #fff;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  outline: 2px solid #fbad25;
  outline-offset: 2px;
  box-shadow: none;
}
 .page-template-basic-forms-page .sio-dark-form .prose .nf-form-cont input.ninja-forms-field:-webkit-autofill {
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
  box-shadow: 0 0 0 1000px #222 inset;  /* paint over yellow */
  transition: background-color 9999s ease-out;
}
/* ===== SIO dark form wrapper =====
   Works for ANY Ninja Form placed inside:
   <div class="sio-dark-form">[ninja_form id=…]</div>
*/

/* Base text color var + default text */
.sio-dark-form .nf-form-cont {
  --theme-color-body: 255 255 255;
  color: rgb(var(--theme-color-body));
}

/* Text inputs ONLY (exclude submit) — strong but clean specificity */
.sio-dark-form .nf-form-cont .nf-field-element input.ninja-forms-field:not([type="submit"]),
.sio-dark-form .nf-form-cont .nf-field-element input[type="text"].ninja-forms-field,
.sio-dark-form .nf-form-cont .nf-field-element input[type="email"].ninja-forms-field,
.sio-dark-form .nf-form-cont .nf-field-element input[type="tel"].ninja-forms-field,
.sio-dark-form .nf-form-cont .nf-field-element input[type="url"].ninja-forms-field,
.sio-dark-form .nf-form-cont .nf-field-element input[type="number"].ninja-forms-field,
.sio-dark-form .nf-form-cont .nf-field-element input[type="password"].ninja-forms-field,
.sio-dark-form .nf-form-cont .nf-field-element input.ninja-forms-field.nf-element
{
  background-color: #000;
  color: #fff;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  border: 0 solid #636363;
  border-bottom: 1px solid #fff;
  transition: background-color .15s ease, color .15s ease, outline-color .15s ease, box-shadow .15s ease;
}

/* Textarea to match (you already had this, keeping it under the wrapper) */
.sio-dark-form .nf-form-cont .nf-field-element textarea.ninja-forms-field {
  background-color: #000;
  color: #fff;
  -webkit-text-fill-color: #fff;
  border: 0 solid #636363;
  border-bottom: 1px solid #fff;
}

/* Hover */
.sio-dark-form .nf-form-cont .nf-field-element input.ninja-forms-field:hover,
.sio-dark-form .nf-form-cont .nf-field-element textarea.ninja-forms-field:hover,
.sio-dark-form .nf-form-cont .nf-field-element input.ninja-forms-field.nf-element:hover
{
  background-color: #222;
  color: #fff;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
}

/* Focus */
.sio-dark-form .nf-form-cont .nf-field-element input.ninja-forms-field:focus,
.sio-dark-form .nf-form-cont .nf-field-element textarea.ninja-forms-field:focus,
.sio-dark-form .prose .nf-form-cont .nf-field-element input.ninja-forms-field:not([type="submit"])
{
  background-color: #222;
  color: #fff;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  outline: 2px solid #fbad25;
  outline-offset: 2px;
  box-shadow: none;
}

/* Placeholder */
.sio-dark-form .nf-form-cont .ninja-forms-field::placeholder {
  color: #bbb;
  opacity: 1;
}

/* Autofill (Chrome/Safari) */
.sio-dark-form .nf-form-cont .nf-field-element input.ninja-forms-field:-webkit-autofill,
.sio-dark-form .nf-form-cont .nf-field-element textarea.ninja-forms-field:-webkit-autofill,
.sio-dark-form .prose .nf-form-cont .nf-field-element input.ninja-forms-field:not([type="submit"])
{
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
  box-shadow: 0 0 0 1000px #222 inset;
  transition: background-color 9999s ease-out;
}