/* SentientMail Forms frontend — neutral base that inherits theme typography.
   Sites can override via their own CSS (NALA dark styling ships in its
   site-specific stylesheet). */

.sentfobu-container { max-width: 100%; }
.sentfobu-form .sentfobu-field { margin: 0 0 18px; }
.sentfobu-form .sentfobu-label { display: block; font-weight: 600; margin-bottom: 6px; }
.sentfobu-form .sentfobu-required { color: #c0392b; }
.sentfobu-form input[type=text], .sentfobu-form input[type=email], .sentfobu-form input[type=tel],
.sentfobu-form input[type=url], .sentfobu-form input[type=number], .sentfobu-form input[type=date],
.sentfobu-form select, .sentfobu-form textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit;
  border: 1px solid #c8c8c8; border-radius: 4px; background: #fff; color: inherit;
}
.sentfobu-form textarea { resize: vertical; }
.sentfobu-form select { height: auto; min-height: 44px; line-height: 1.4; }
.sentfobu-form .sentfobu-desc { font-size: 0.85em; opacity: 0.75; margin-top: 4px; }
.sentfobu-form .sentfobu-error { color: #c0392b; font-size: 0.85em; margin-top: 4px; min-height: 0; }
.sentfobu-form .sentfobu-form-error { color: #c0392b; margin: 0 0 12px; }
.sentfobu-form .sentfobu-choices { display: flex; flex-direction: column; gap: 6px; }
.sentfobu-form .sentfobu-choice { display: flex; align-items: baseline; gap: 8px; font-weight: 400; cursor: pointer; }
.sentfobu-form .sentfobu-choice input { flex: none; }

/* Honeypot — visually removed, still in DOM for bots */
.sentfobu-hp { position: absolute !important; left: -9999px !important; height: 1px; overflow: hidden; }

/* Two-column layout parity with imported WPForms classes */
.sentfobu-form .wpforms-one-half, .sentfobu-form .sentfobu-one-half { width: 48%; float: left; margin-left: 4%; box-sizing: border-box; }
.sentfobu-form .wpforms-one-half.wpforms-first, .sentfobu-form .sentfobu-one-half.sentfobu-first { margin-left: 0; clear: both; }
.sentfobu-form .sentfobu-field:not(.wpforms-one-half):not(.sentfobu-one-half) { clear: both; }
@media (max-width: 600px) {
  .sentfobu-form .wpforms-one-half, .sentfobu-form .sentfobu-one-half { width: 100%; float: none; margin-left: 0; }
}

/* Uploader */
.sentfobu-uploader input[type=file] { display: none; }
/* The dropzone is a <button> so it is keyboard-operable, which means themes
   style it as a button. NALA's gold button rule collapsed it to a 130px-wide
   solid block, so the properties that decide the layout are forced here. The
   rest stay overridable so a site can still restyle it. */
.sentfobu-form button.sentfobu-upload-dropzone,
.sentfobu-upload-dropzone {
  -webkit-appearance: none !important; appearance: none !important;
  display: flex !important; flex-direction: column; gap: 6px;
  width: 100% !important; box-sizing: border-box;
  background: transparent !important; color: inherit !important;
  font: inherit !important; text-align: center !important;
  text-transform: none !important; letter-spacing: normal !important;
  border: 2px dashed #aaa !important; border-radius: 6px;
  padding: 28px 20px; min-height: 0;
  cursor: pointer; transition: border-color .15s, background .15s;
}
/* Themes give buttons a box-shadow that reads as a raised block here, so it is
   reset. Scoped away from the focused state, because on several themes that
   shadow IS the focus ring, and an explicit outline replaces it either way. */
.sentfobu-form button.sentfobu-upload-dropzone:not(:focus-visible),
.sentfobu-upload-dropzone:not(:focus-visible) { box-shadow: none !important; }
.sentfobu-upload-dropzone:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.sentfobu-upload-dropzone.sentfobu-drag, .sentfobu-upload-dropzone:hover { border-color: #666 !important; background: rgba(0,0,0,0.03) !important; }
.sentfobu-upload-title { font-weight: 600; }
.sentfobu-upload-hint { font-size: 0.8em; opacity: 0.7; }
.sentfobu-upload-item { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 0.9em; }
.sentfobu-upload-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sentfobu-upload-progress { flex: 0 0 120px; height: 6px; background: rgba(0,0,0,0.12); border-radius: 3px; overflow: hidden; }
.sentfobu-upload-bar { display: block; height: 100%; width: 0; background: #4a8f5c; transition: width .2s; }
.sentfobu-upload-error .sentfobu-upload-bar { background: #c0392b; }
/* Colour was the only thing separating a finished upload from a failed one. */
.sentfobu-upload-state { flex: none; font-weight: 700; }
.sentfobu-upload-done .sentfobu-upload-state::after { content: "\2713"; color: #2f6d3f; }
.sentfobu-upload-error .sentfobu-upload-state::after { content: "\2715"; color: #c0392b; }
.sentfobu-upload-remove { flex: none; border: 0; background: none; font-size: 18px; line-height: 1; cursor: pointer; opacity: .6; }
.sentfobu-upload-remove:hover { opacity: 1; }

/* Submit */
.sentfobu-submit { position: relative; cursor: pointer; padding: 12px 28px; font: inherit; font-weight: 600; border-radius: 4px; border: 0; }
.sentfobu-submit[disabled], .sentfobu-submit[aria-disabled="true"] { opacity: 0.7; cursor: default; }
.sentfobu-spinner { display: none; width: 14px; height: 14px; margin-left: 10px; vertical-align: -2px;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: currentColor; border-radius: 50%;
  animation: sentfobu-spin .7s linear infinite; }
.sentfobu-loading .sentfobu-spinner { display: inline-block; }
@keyframes sentfobu-spin { to { transform: rotate(360deg); } }

.sentfobu-confirmation { padding: 18px 20px; border-left: 4px solid #4a8f5c; background: rgba(74,143,92,0.08); }

/* ---------------------------------------------------------------- a11y */
/* Themes do not reliably ship .screen-reader-text; the required marker and
   rating labels depend on it, so define it here rather than hoping. */
.sentfobu-form .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sentfobu-form .sentfobu-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.sentfobu-form .sentfobu-fieldset > legend { padding: 0; }
.sentfobu-form .sentfobu-field.sentfobu-has-error input,
.sentfobu-form .sentfobu-field.sentfobu-has-error select,
.sentfobu-form .sentfobu-field.sentfobu-has-error textarea { border-color: #c0392b; }
.sentfobu-form [aria-invalid="true"] { outline-color: #c0392b; }
.sentfobu-form .sentfobu-error:empty { display: none; }
.sentfobu-confirmation:focus { outline: 2px solid currentColor; outline-offset: 2px; }

/* --------------------------------------------------------- multi-page */
.sentfobu-progress { margin: 0 0 22px; }
.sentfobu-progress-text { font-size: 0.85em; opacity: 0.75; margin: 0 0 8px; }
.sentfobu-steps { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; margin: 0 0 10px; padding: 0; }
.sentfobu-step { display: flex; align-items: center; gap: 7px; font-size: 0.85em; opacity: 0.5; }
.sentfobu-step-active, .sentfobu-step-done { opacity: 1; }
.sentfobu-step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 50%; border: 1px solid currentColor; font-size: 0.8em; font-weight: 700; flex: none;
}
/* Emphasise the active step with a thicker ring. Filling the circle with
   currentColor and inverting the text does not work: the fill resolves from
   the element's own color, so making the text transparent makes the fill
   transparent too and the whole badge disappears. */
.sentfobu-step-active .sentfobu-step-num { box-shadow: inset 0 0 0 2px currentColor; }
.sentfobu-step-done .sentfobu-step-num::after { content: "\2713"; }
.sentfobu-step-done .sentfobu-step-num { font-size: 0; }
.sentfobu-step-done .sentfobu-step-num::after { font-size: 12px; }
.sentfobu-progress-bar { height: 4px; background: rgba(0,0,0,0.10); border-radius: 2px; overflow: hidden; }
.sentfobu-progress-fill { height: 100%; background: currentColor; transition: width .25s ease; }
.sentfobu-page[hidden] { display: none; }
.sentfobu-page-title { margin: 0 0 16px; }
.sentfobu-page-nav { display: flex; gap: 10px; margin-top: 20px; clear: both; }
.sentfobu-page-nav button {
  cursor: pointer; padding: 11px 24px; font: inherit; font-weight: 600;
  border-radius: 4px; border: 1px solid currentColor; background: transparent; color: inherit;
}
.sentfobu-page-nav .sentfobu-next { background: currentColor; }
.sentfobu-submit-wrap[hidden] { display: none; }

/* ------------------------------------------------------------ new fields */
.sentfobu-address { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sentfobu-address-street, .sentfobu-address-street2 { grid-column: 1 / -1; }
.sentfobu-sublabel { display: block; font-size: 0.82em; opacity: 0.8; margin-bottom: 4px; font-weight: 400; }
@media (max-width: 600px) { .sentfobu-address { grid-template-columns: 1fr; } }

/* Radios are emitted low-to-high so tab order and screen-reader order run
   1..N, which rules out the row-reverse star trick (it needs descending
   markup). A :has()-driven fill was tried and did not apply reliably in
   practice, so the frontend script owns the lit state instead: it toggles
   .sentfobu-lit and this stays a plain class selector. */
.sentfobu-rating { display: inline-flex; gap: 2px; }
.sentfobu-rating-item { cursor: pointer; line-height: 1; }
.sentfobu-rating-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.sentfobu-rating-star { font-size: 30px; color: rgba(0,0,0,0.20); transition: color .12s; }
.sentfobu-rating-item.sentfobu-lit .sentfobu-rating-star { color: #f0a500; }
.sentfobu-rating-item input:focus-visible ~ .sentfobu-rating-star { outline: 2px solid currentColor; outline-offset: 2px; }

.sentfobu-consent { display: flex; align-items: baseline; gap: 9px; cursor: pointer; font-weight: 400; }
.sentfobu-consent input { flex: none; margin-top: 2px; }
.sentfobu-consent-text { font-size: 0.95em; }

.sentfobu-field-divider { margin: 26px 0 18px; }
.sentfobu-section-title { margin: 0 0 4px; }
.sentfobu-section-desc { font-size: 0.9em; opacity: 0.8; margin-bottom: 10px; }
.sentfobu-divider { border: 0; border-top: 1px solid rgba(0,0,0,0.14); margin: 0; }

.sentfobu-field[hidden] { display: none; }

/* --------------------------------------------------------- signature */
.sentfobu-signature-canvas {
  display: block; width: 100%; border: 1px solid rgba(0,0,0,0.25); border-radius: 4px;
  background: #fff; cursor: crosshair;
  /* Without this a stroke scrolls the page on a touch screen instead of drawing. */
  touch-action: none;
}
.sentfobu-signature-clear {
  margin-top: 8px; cursor: pointer; font: inherit; font-size: 0.85em; padding: 5px 12px;
  border-radius: 4px; border: 1px solid currentColor; background: transparent; color: inherit;
}

/* ------------------------------------------------------------ matrix */
.sentfobu-matrix-scroll { overflow-x: auto; }
.sentfobu-matrix { border-collapse: collapse; width: 100%; }
.sentfobu-matrix th, .sentfobu-matrix td { padding: 9px 10px; border-bottom: 1px solid rgba(0,0,0,0.10); text-align: center; }
.sentfobu-matrix thead th { font-size: 0.85em; font-weight: 600; }
.sentfobu-matrix tbody th { text-align: left; font-weight: 400; }
.sentfobu-matrix tbody tr:last-child th, .sentfobu-matrix tbody tr:last-child td { border-bottom: 0; }
.sentfobu-matrix-cell input { margin: 0; }

/* ---------------------------------------------------------- repeater */
.sentfobu-repeater-item {
  position: relative; padding: 14px 44px 14px 14px; margin-bottom: 10px;
  border: 1px solid rgba(0,0,0,0.12); border-radius: 4px;
}
.sentfobu-repeater-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.sentfobu-repeater-remove {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; line-height: 1;
  border: 0; border-radius: 50%; background: rgba(0,0,0,0.07); color: inherit; cursor: pointer; font-size: 16px;
}
.sentfobu-repeater-add {
  cursor: pointer; font: inherit; padding: 8px 18px; border-radius: 4px;
  border: 1px solid currentColor; background: transparent; color: inherit;
}
.sentfobu-repeater-remove[disabled], .sentfobu-repeater-add[disabled] { opacity: 0.4; cursor: default; }
.sentfobu-repeater-hint { font-size: 0.82em; opacity: 0.7; margin: 6px 0 0; }