/* ══════════════════════════════════════════════════════════════════════
   Wigmorean Forms — Frontend Styles  v1.0.0
   Matches WPForms Modern theme quality
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --wf-primary:     #0C1A2E;
  --wf-accent:      #C9A84C;
  --wf-focus:       #1A4A8C;
  --wf-border:      #d1d5db;
  --wf-border-focus:#1A4A8C;
  --wf-bg:          #ffffff;
  --wf-bg-alt:      #f9fafb;
  --wf-text:        #111827;
  --wf-text-muted:  #6b7280;
  --wf-error:       #dc2626;
  --wf-success:     #16a34a;
  --wf-radius:      8px;
  --wf-radius-sm:   5px;
  --wf-shadow-focus:0 0 0 3px rgba(26,74,140,.15);
  --wf-transition:  all .18s ease;
}

/* ── Wrapper ─────────────────────────────────────────────────────── */
.wf-form-wrap { position:relative; }

/* ── Status bar ──────────────────────────────────────────────────── */
.wf-form-status {
  display:none; margin-bottom:20px; padding:14px 18px;
  border-radius:var(--wf-radius); font-size:.9rem; font-weight:500;
  border-left:4px solid transparent;
}
.wf-form-status.is-success {
  display:block; background:#f0fdf4; border-left-color:var(--wf-success); color:#14532d;
}
.wf-form-status.is-error {
  display:block; background:#fef2f2; border-left-color:var(--wf-error); color:#7f1d1d;
}

/* ── Progress bar (multi-page) ───────────────────────────────────── */
.wf-progress-bar-wrap {
  height:6px; background:#e5e7eb; border-radius:99px; overflow:hidden; margin-bottom:10px;
}
.wf-progress-bar {
  height:100%; background:var(--wf-accent); border-radius:99px;
  transition:width .4s ease;
}
.wf-page-indicator {
  font-size:.82rem; color:var(--wf-text-muted); margin-bottom:20px; text-align:right;
}

/* ── Form ────────────────────────────────────────────────────────── */
.wf-form { max-width:680px; }

/* ── Field wrapper ───────────────────────────────────────────────── */
.wf-field {
  margin-bottom:22px;
}
.wf-field.wf-size-small  { max-width:200px; }
.wf-field.wf-size-medium { max-width:360px; }
.wf-field.wf-size-large  { max-width:100%; }

/* Conditional logic hidden state */
.wf-field[data-cond].wf-cond-hidden { display:none; }

/* ── Label ───────────────────────────────────────────────────────── */
.wf-label {
  display:block; margin-bottom:7px;
  font-weight:600; font-size:.875rem; color:var(--wf-text);
  line-height:1.4;
}
.wf-required { color:var(--wf-error); margin-left:2px; }

/* ── Description text ────────────────────────────────────────────── */
.wf-desc {
  margin:0 0 8px; font-size:.8rem; color:var(--wf-text-muted); line-height:1.5;
}
.wf-desc-below { margin:6px 0 0; }

/* ── Core input/select/textarea ──────────────────────────────────── */
.wf-input,
.wf-select,
.wf-textarea {
  width:100%; box-sizing:border-box;
  padding:10px 14px;
  border:1.5px solid var(--wf-border);
  border-radius:var(--wf-radius);
  font-size:.9rem; font-family:inherit; color:var(--wf-text);
  background:var(--wf-bg);
  transition:var(--wf-transition);
  appearance:none; -webkit-appearance:none;
}
.wf-input:focus,
.wf-select:focus,
.wf-textarea:focus {
  outline:none;
  border-color:var(--wf-border-focus);
  box-shadow:var(--wf-shadow-focus);
}
.wf-input::placeholder,
.wf-textarea::placeholder { color:#4B5563; }

/* ── Textarea ────────────────────────────────────────────────────── */
.wf-textarea { resize:vertical; min-height:100px; }
.wf-char-counter {
  font-size:.78rem; color:var(--wf-text-muted);
  text-align:right; margin-top:4px;
}
.wf-char-counter.is-over { color:var(--wf-error); }

/* ── Select arrow ────────────────────────────────────────────────── */
.wf-field-select .wf-input {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  padding-right:38px; cursor:pointer;
}

/* ── Radio & Checkbox lists ──────────────────────────────────────── */
.wf-radio-list, .wf-checkbox-list {
  list-style:none; margin:0; padding:0;
}
.wf-radio-list li, .wf-checkbox-list li {
  margin-bottom:10px;
}
.wf-radio-list label, .wf-checkbox-list label {
  display:flex; align-items:center; gap:10px;
  cursor:pointer; font-size:.9rem; color:var(--wf-text);
  user-select:none;
}
.wf-radio-list input[type="radio"],
.wf-checkbox-list input[type="checkbox"] {
  width:18px; height:18px; flex-shrink:0;
  accent-color:var(--wf-focus); cursor:pointer;
}
.wf-radio-list.wf-inline li,
.wf-checkbox-list.wf-inline li {
  display:inline-block; margin-right:20px;
}
.wf-check-all-wrap { border-bottom:1px solid var(--wf-border); padding-bottom:8px; margin-bottom:8px; }

/* ── Rating ──────────────────────────────────────────────────────── */
.wf-rating {
  display:flex; flex-direction:row-reverse; gap:4px;
  align-items:center; justify-content:flex-end;
}
.wf-rating-star {
  font-size:2rem; cursor:pointer; color:#d1d5db;
  transition:color .1s; line-height:1;
}
.wf-rating input[type="radio"] { display:none; }
.wf-rating-star:hover,
.wf-rating-star:hover ~ .wf-rating-star,
.wf-rating input:checked ~ label,
.wf-rating-star.is-active { color:#f59e0b; }
.wf-rating-value { font-size:.8rem; color:var(--wf-text-muted); margin-left:10px; }

/* ── File upload ─────────────────────────────────────────────────── */
.wf-file-upload-wrap { position:relative; }
.wf-file-input { display:none; }
.wf-file-dropzone {
  border:2px dashed var(--wf-border); border-radius:var(--wf-radius);
  padding:32px 24px; text-align:center; cursor:pointer;
  transition:var(--wf-transition); background:var(--wf-bg-alt);
}
.wf-file-dropzone:hover,
.wf-file-dropzone.is-dragover {
  border-color:var(--wf-accent); background:rgba(201,168,76,.05);
}
.wf-file-icon { font-size:2.5rem; margin-bottom:8px; }
.wf-file-dropzone p { margin:4px 0; font-size:.875rem; color:var(--wf-text-muted); }
.wf-file-dropzone strong { color:var(--wf-focus); }
.wf-file-hint { font-size:.78rem !important; }
.wf-file-list { margin-top:12px; }
.wf-file-item {
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  background:var(--wf-bg-alt); border:1px solid var(--wf-border);
  border-radius:var(--wf-radius-sm); margin-bottom:6px; font-size:.85rem;
}
.wf-file-item__name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wf-file-item__remove { cursor:pointer; color:var(--wf-error); flex-shrink:0; }

/* ── Password ────────────────────────────────────────────────────── */
.wf-password-wrap { position:relative; display:flex; align-items:center; }
.wf-password-wrap .wf-input { padding-right:44px; }
.wf-pw-toggle {
  position:absolute; right:12px; background:none; border:none;
  cursor:pointer; font-size:1rem; color:var(--wf-text-muted); padding:0;
}
.wf-password-confirm { margin-top:14px; }
.wf-pw-strength { margin-top:8px; }
.wf-pw-strength-bar {
  height:4px; border-radius:99px; background:#e5e7eb; transition:all .3s;
  background-size:100% 100%;
}
.wf-pw-strength-bar.s-weak     { background:var(--wf-error); width:25%; }
.wf-pw-strength-bar.s-fair     { background:#f59e0b; width:50%; }
.wf-pw-strength-bar.s-strong   { background:#22c55e; width:75%; }
.wf-pw-strength-bar.s-vstrong  { background:var(--wf-success); width:100%; }
.wf-pw-strength-label { font-size:.78rem; color:var(--wf-text-muted); }

/* ── Name / Address grids ────────────────────────────────────────── */
.wf-name-wrap { display:flex; gap:14px; flex-wrap:wrap; }
.wf-name-part { flex:1; min-width:120px; }
.wf-name-part label { display:block; font-size:.78rem; color:var(--wf-text-muted); margin-bottom:5px; font-weight:500; }
.wf-address-wrap { display:flex; flex-direction:column; gap:12px; }
.wf-addr-row label { display:block; font-size:.78rem; color:var(--wf-text-muted); margin-bottom:5px; font-weight:500; }
.wf-addr-cols { display:flex; gap:12px; flex-wrap:wrap; }
.wf-addr-col { flex:1; min-width:100px; }
.wf-addr-col label { display:block; font-size:.78rem; color:var(--wf-text-muted); margin-bottom:5px; font-weight:500; }
.wf-optional { font-weight:400; color:#4B5563; }

/* ── Divider ─────────────────────────────────────────────────────── */
.wf-field-divider { margin-bottom:28px; }
.wf-divider-label { font-size:1.05rem; font-weight:700; color:var(--wf-primary); margin:0 0 8px; }
.wf-divider-line { border:none; border-top:2px solid var(--wf-border); margin:0 0 10px; }
.wf-divider-desc { font-size:.875rem; color:var(--wf-text-muted); margin:0; }

/* ── Page break nav ──────────────────────────────────────────────── */
.wf-pagebreak { margin:24px 0 8px; }
.wf-page-nav { display:flex; gap:12px; }
.wf-page-title { font-size:1.1rem; font-weight:700; color:var(--wf-primary); margin:16px 0 0; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.wf-submit {
  display:inline-block; padding:13px 36px;
  background:var(--wf-accent); color:var(--wf-primary);
  font-size:.95rem; font-weight:700; font-family:inherit;
  border:none; border-radius:var(--wf-radius); cursor:pointer;
  transition:var(--wf-transition); line-height:1;
}
.wf-submit:hover { background:#b8932a; transform:translateY(-1px); box-shadow:0 4px 12px rgba(201,168,76,.35); }
.wf-submit:disabled { opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }

.wf-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 22px; border-radius:var(--wf-radius);
  font-size:.875rem; font-weight:600; cursor:pointer;
  border:1.5px solid var(--wf-border); background:var(--wf-bg);
  color:var(--wf-text); transition:var(--wf-transition); font-family:inherit;
}
.wf-btn:hover { border-color:var(--wf-focus); color:var(--wf-focus); }
.wf-btn-prev { margin-right:auto; }
.wf-btn-next { margin-left:auto; background:var(--wf-focus); color:#fff; border-color:var(--wf-focus); }
.wf-btn-next:hover { background:#143a70; }

/* ── Field error ─────────────────────────────────────────────────── */
.wf-field-error {
  font-size:.8rem; color:var(--wf-error); margin-top:5px;
  display:none;
}
.wf-field-error:not(:empty) { display:block; }
.wf-field.has-error .wf-input,
.wf-field.has-error .wf-select,
.wf-field.has-error .wf-textarea {
  border-color:var(--wf-error);
  box-shadow:0 0 0 3px rgba(220,38,38,.12);
}

/* ── Email confirm ───────────────────────────────────────────────── */
.wf-email-confirm { margin-top:14px; }

/* ── Honeypot ────────────────────────────────────────────────────── */
.wf-hp { display:none !important; }

/* ── Submit wrap ─────────────────────────────────────────────────── */
.wf-submit-wrap { margin-top:28px; }

/* ── HTML field ──────────────────────────────────────────────────── */
.wf-field-html { margin-bottom:22px; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 540px) {
  .wf-name-wrap, .wf-addr-cols { flex-direction:column; }
  .wf-form { max-width:100%; }
  .wf-field.wf-size-small,
  .wf-field.wf-size-medium { max-width:100%; }
}

/* ── New field types (gap analysis build) ───────────────────────────── */

/* Signature */
.wf-signature-wrap { text-align:center; }
.wf-signature-canvas { display:block; margin:0 auto; background:#fafafa; }
.wf-signature-actions { margin-top:8px; }

/* Repeater */
.wf-repeater-rows { margin-bottom:8px; }
.wf-repeater-row { display:flex; align-items:flex-start; gap:8px; padding:10px; margin-bottom:6px; background:#f9f9f9; border:1px solid #e0e0e0; border-radius:6px; }
.wf-repeater-row-fields { display:flex; flex-wrap:wrap; gap:8px; flex:1; }
.wf-repeater-cell { flex:1; min-width:120px; }
.wf-repeater-cell .wf-label-sm { font-size:12px; color:#666; display:block; margin-bottom:2px; }
.wf-repeater-remove { background:none; border:none; color:#c00; cursor:pointer; font-size:18px; padding:4px 8px; align-self:center; }
.wf-repeater-remove:hover { color:#900; }
.wf-repeater-add { margin-top:4px; }

/* Slider */
.wf-slider-wrap { padding:4px 0; }
.wf-slider { width:100%; -webkit-appearance:none; appearance:none; height:8px; border-radius:4px; background:#e0e0e0; outline:none; }
.wf-slider::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#2271b1; cursor:pointer; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.wf-slider::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:#2271b1; cursor:pointer; border:2px solid #fff; }
.wf-slider-output { text-align:center; font-size:20px; font-weight:700; color:#1d2327; margin:8px 0 4px; }
.wf-slider-range { display:flex; justify-content:space-between; font-size:12px; color:#888; }

/* NPS */
.wf-nps-wrap { text-align:center; }
.wf-nps-scale { display:flex; justify-content:center; gap:4px; flex-wrap:wrap; margin:8px 0; }
.wf-nps-btn { display:inline-block; }
.wf-nps-btn input { display:none; }
.wf-nps-btn span { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:6px; border:2px solid #ccc; font-size:14px; font-weight:700; cursor:pointer; transition:all .15s; background:#fff; }
.wf-nps-btn:hover span, .wf-nps-btn.is-selected span { color:#fff; border-color:transparent; }
.wf-nps-detractor span { color:#c00; }
.wf-nps-detractor:hover span, .wf-nps-detractor.is-selected span { background:#dc2626; }
.wf-nps-passive span { color:#e67e00; }
.wf-nps-passive:hover span, .wf-nps-passive.is-selected span { background:#f59e0b; }
.wf-nps-promoter span { color:#16a34a; }
.wf-nps-promoter:hover span, .wf-nps-promoter.is-selected span { background:#16a34a; }
.wf-nps-labels { display:flex; justify-content:space-between; font-size:12px; color:#888; margin-top:4px; }

/* Likert */
.wf-likert-table { width:100%; border-collapse:collapse; font-size:14px; }
.wf-likert-table th, .wf-likert-table td { padding:10px 8px; text-align:center; border-bottom:1px solid #eee; }
.wf-likert-row-label { text-align:left !important; font-weight:600; color:#1d2327; }
.wf-likert-col-head { font-size:12px; color:#666; font-weight:600; }
.wf-likert-radio-label { cursor:pointer; }
.wf-likert-radio-label input[type="radio"] { width:18px; height:18px; accent-color:#2271b1; }

/* Calculated */
.wf-calculated-wrap { padding:12px; background:#f9f9f9; border:1px solid #e0e0e0; border-radius:6px; text-align:center; }
.wf-calculated-display { font-size:28px; font-weight:700; color:#1d2327; }
.wf-calc-prefix, .wf-calc-suffix { font-size:18px; color:#888; }

/* Color picker */
.wf-color-wrap { display:flex; align-items:center; gap:12px; }
.wf-color-input { width:50px; height:40px; border:1px solid #ccc; border-radius:4px; padding:2px; cursor:pointer; }
.wf-color-hex { font-family:monospace; font-size:14px; color:#666; }

/* Rich text */
.wf-richtext-toolbar { display:flex; gap:2px; padding:6px 8px; background:#f5f5f5; border:1px solid #ccc; border-radius:4px 4px 0 0; }
.wf-richtext-toolbar button { background:none; border:1px solid transparent; padding:4px 8px; cursor:pointer; border-radius:3px; font-size:13px; }
.wf-richtext-toolbar button:hover { background:#e0e0e0; }
.wf-richtext-editor { background:#fff; }

/* Country */
.wf-country-wrap .wf-state-input { margin-top:8px; }

/* Date range */
.wf-daterange-wrap { display:flex; gap:12px; }
.wf-daterange-part { flex:1; }
.wf-daterange-part .wf-label-sm { font-size:12px; color:#666; display:block; margin-bottom:2px; }

/* GDPR */
.wf-gdpr-wrap { padding:12px 0; }
.wf-gdpr-label { display:flex; align-items:flex-start; gap:8px; cursor:pointer; font-size:14px; line-height:1.5; }
.wf-gdpr-checkbox { margin-top:3px; width:18px; height:18px; accent-color:#2271b1; flex-shrink:0; }
.wf-gdpr-text a { color:#2271b1; text-decoration:underline; }

/* Heading */
.wf-field-heading { margin:24px 0 8px; }
.wf-heading-text { margin:0 0 4px; color:#1d2327; }
.wf-heading-desc { margin:0; font-size:14px; color:#666; }

/* Payment (Stripe) */
.wf-payment-wrap { max-width:400px; }

/* Form closed state */
.wf-form-closed { padding:24px; background:#f9f9f9; border:1px solid #e0e0e0; border-radius:8px; text-align:center; color:#666; }

/* Multi-column layout classes */
.wf-cols-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.wf-cols-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.wf-cols-4 { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:16px; }
@media (max-width:600px) {
  .wf-cols-2, .wf-cols-3, .wf-cols-4 { grid-template-columns:1fr; }
  .wf-daterange-wrap { flex-direction:column; }
  .wf-nps-btn span { width:30px; height:30px; font-size:12px; }
}

/* Accessibility: screen-reader only */
.wf-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Conditional hidden */
.wf-cond-hidden { display:none !important; }