/* Climate Farmers — "Know your farmer" registration form
 * Same brand tokens as admin.php/profile.php/farm-profile.php so the
 * campaign landing page reads as one system with the rest of the
 * platform, even though this plugin is a separate codebase. */
#cffreg-widget {
  --cf-text: #204832;
  --cf-lime: #e3ef89;
  --cf-lime-pale: #f9fce7;
  --cf-lime-mid: #d4e46a;
  --cf-white: #ffffff;
  --cf-off-white: #fafaf7;
  --cf-border: #e8edcc;
  --cf-muted: #4d7060;
  --cf-stone: #6b7a6e;
  --cf-danger: #b94040;
  --radius: 8px;
  --shadow: 0 1px 10px rgba(32, 72, 50, 0.08);
  font-family: 'Inter', Arial, sans-serif;
  color: var(--cf-text);
  max-width: 640px;
  margin: 0 auto;
}
#cffreg-widget h1, #cffreg-widget h2, #cffreg-widget h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  color: var(--cf-text);
}
#cffreg-widget .cffreg-intro h2 { font-size: 1.7rem; margin: 0 0 .4rem; }
#cffreg-widget .cffreg-intro p { color: var(--cf-muted); font-size: .95rem; line-height: 1.55; margin: 0 0 1.2rem; }

#cffreg-widget .cffreg-progress {
  display: flex; align-items: center; gap: .55rem;
  background: var(--cf-lime-pale); border: 1px solid var(--cf-border);
  border-radius: var(--radius); padding: .7rem 1rem; margin-bottom: 1.4rem;
  font-size: .85rem; color: var(--cf-text);
}
#cffreg-widget .cffreg-progress-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: var(--cf-stone); transition: background .2s ease;
}
#cffreg-widget .cffreg-progress.is-ready .cffreg-progress-dot { background: #2f8f4e; }
#cffreg-widget .cffreg-progress.is-ready { border-color: #bfe3c9; }

#cffreg-widget .cffreg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

#cffreg-widget .cffreg-section {
  background: var(--cf-white); border: 1px solid var(--cf-border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.2rem 1.3rem; margin-bottom: 1rem;
}
#cffreg-widget .cffreg-section h3 { font-size: 1.05rem; margin: 0 0 .9rem; }
#cffreg-widget .cffreg-section h3 .req { font-family: 'Inter', sans-serif; font-size: .72rem; color: var(--cf-stone); font-weight: 500; }
#cffreg-widget .cffreg-hint { font-size: .82rem; color: var(--cf-muted); margin: .35rem 0 .7rem; line-height: 1.5; }
#cffreg-widget .cffreg-subtext { font-size: .78rem; color: var(--cf-stone); margin: .3rem 0 0; }

#cffreg-widget .cffreg-row { display: flex; gap: 1rem; flex-wrap: wrap; }
#cffreg-widget .cffreg-row .cffreg-field { flex: 1 1 220px; }
#cffreg-widget .cffreg-field { margin-bottom: .9rem; }
#cffreg-widget label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: .3rem; color: var(--cf-text); }
#cffreg-widget .map-flag { font-size: .8rem; }
#cffreg-widget input[type="text"], #cffreg-widget input[type="email"],
#cffreg-widget input[type="tel"], #cffreg-widget input[type="url"],
#cffreg-widget select, #cffreg-widget textarea {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: .92rem;
  padding: .55rem .7rem; border: 1px solid var(--cf-border); border-radius: 6px;
  background: var(--cf-off-white); color: var(--cf-text);
}
#cffreg-widget input:focus, #cffreg-widget select:focus, #cffreg-widget textarea:focus {
  outline: none; border-color: var(--cf-lime-mid); box-shadow: 0 0 0 3px rgba(212, 228, 106, .35);
}
#cffreg-widget input.cffreg-invalid, #cffreg-widget .cffreg-invalid input {
  border-color: var(--cf-danger);
}
#cffreg-widget .cffreg-field-error { color: var(--cf-danger); font-size: .78rem; margin-top: .25rem; min-height: 1.1em; }
#cffreg-widget textarea { resize: vertical; }

#cffreg-widget .cffreg-check-inline label {
  display: flex; align-items: flex-start; gap: .5rem; font-weight: 400; font-size: .9rem;
  /* Explicit left alignment — defensive against the WordPress theme/page
     builder's own default text-align for form labels (Divi text modules in
     particular often default to centered), which otherwise overrides this
     flex layout's natural left start. Designer feedback, 2026-10-01: the
     consent line was reading as centered rather than left-aligned. */
  text-align: left;
}
#cffreg-widget .cffreg-check-inline input[type="checkbox"] { margin-top: .15rem; flex-shrink: 0; }

#cffreg-widget .cffreg-checks { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-bottom: .5rem; }
#cffreg-widget .cffreg-checks label {
  display: flex; align-items: center; gap: .4rem; font-weight: 400; font-size: .85rem;
  background: var(--cf-off-white); border: 1px solid var(--cf-border); border-radius: 20px;
  padding: .35rem .8rem .35rem .6rem; cursor: pointer;
}
#cffreg-widget .cffreg-checks input { width: auto; margin: 0; }

/* Toggle switch (Community Platform interest) */
#cffreg-widget .cffreg-toggle-row { margin-top: .4rem; }
#cffreg-widget .cffreg-switch-label { display: flex; align-items: center; gap: .65rem; font-weight: 400; font-size: .9rem; cursor: pointer; }
#cffreg-widget .cffreg-switch { position: relative; display: inline-block; flex-shrink: 0; }
#cffreg-widget .cffreg-switch input { position: absolute; opacity: 0; width: 42px; height: 24px; margin: 0; cursor: pointer; }
#cffreg-widget .cffreg-switch-track {
  display: block; width: 42px; height: 24px; border-radius: 12px;
  background: var(--cf-border); transition: background .15s ease; position: relative;
}
#cffreg-widget .cffreg-switch-thumb {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--cf-white); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s ease;
}
#cffreg-widget .cffreg-switch input:checked + .cffreg-switch-track { background: #2f8f4e; }
#cffreg-widget .cffreg-switch input:checked + .cffreg-switch-track .cffreg-switch-thumb { transform: translateX(18px); }
#cffreg-widget .cffreg-switch input:focus-visible + .cffreg-switch-track { box-shadow: 0 0 0 3px rgba(212, 228, 106, .5); }

/* Maps */
#cffreg-widget .cffreg-geo-status { font-size: .78rem; color: var(--cf-muted); margin-top: .35rem; min-height: 1.1em; }
#cffreg-widget .cffreg-geo-status.is-ok { color: #2f8f4e; }
#cffreg-widget .cffreg-geo-status.is-err { color: var(--cf-danger); }
#cffreg-widget .cffreg-map {
  height: 260px; border-radius: 6px; border: 1px solid var(--cf-border);
  margin: .5rem 0; background: var(--cf-off-white);
}
#cffreg-widget .cffreg-coord-row { margin-top: .6rem; }
#cffreg-widget .cffreg-coord-row .cffreg-field { margin-bottom: 0; }

/* Produce — a collapsed accordion of general categories (2026-10-01:
   all 19 items shown flat at once was overwhelming to fill in), each
   holding the existing produce-grid rows unchanged. Closed by default;
   each summary shows a live "N selected" count so what's filled in is
   visible without opening every section. */
#cffreg-widget .cffreg-produce-categories { display: flex; flex-direction: column; gap: .5rem; }
#cffreg-widget .cffreg-produce-category {
  border: 1px solid var(--cf-border); border-radius: 6px; background: var(--cf-off-white); overflow: hidden;
}
#cffreg-widget .cffreg-produce-category[open] { background: var(--cf-white); }
#cffreg-widget .cffreg-produce-category summary {
  display: flex; align-items: center; gap: .6rem; list-style: none; cursor: pointer;
  padding: .65rem .8rem; font-size: .88rem; font-weight: 600; color: var(--cf-text);
}
#cffreg-widget .cffreg-produce-category summary::-webkit-details-marker { display: none; }
#cffreg-widget .cffreg-produce-category summary::after {
  content: '▾'; font-size: .7rem; color: var(--cf-stone); margin-left: auto; transition: transform .15s ease;
}
#cffreg-widget .cffreg-produce-category[open] summary::after { transform: rotate(180deg); }
#cffreg-widget .cffreg-produce-cat-count {
  font-size: .72rem; font-weight: 600; color: var(--cf-white); background: #2f8f4e;
  border-radius: 10px; padding: .1rem .55rem; display: none;
}
#cffreg-widget .cffreg-produce-category .cffreg-produce-grid { padding: 0 .8rem .8rem; }

/* Produce grid */
#cffreg-widget .cffreg-produce-grid { display: flex; flex-direction: column; gap: .3rem; }
#cffreg-widget .cffreg-produce-row {
  /* Column: the name+checkboxes row, then (2026-10-02) an optional
     per-category detail input stacked below it when that item is ticked. */
  display: flex; flex-direction: column;
  padding: .5rem .7rem; border: 1px solid var(--cf-border); border-radius: 6px; background: var(--cf-off-white);
}
#cffreg-widget .cffreg-produce-row-main { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
#cffreg-widget .cffreg-produce-row .cffreg-produce-name { font-size: .88rem; flex: 1 1 auto; }
#cffreg-widget .cffreg-produce-row .cffreg-produce-opts { display: flex; gap: 1rem; flex-shrink: 0; }
#cffreg-widget .cffreg-produce-row label { display: flex; align-items: center; gap: .35rem; font-weight: 400; font-size: .8rem; margin: 0; white-space: nowrap; }
#cffreg-widget .cffreg-produce-row input[type="checkbox"] { width: auto; margin: 0; }
#cffreg-widget .cffreg-produce-row.cffreg-produce-disabled-sell .cffreg-sell-check { opacity: .45; }
#cffreg-widget .cffreg-produce-row .produce-detail-input { font-size: .85rem; padding: .45rem .6rem; }

/* Opening times */
#cffreg-widget .cffreg-opening-times { display: flex; flex-direction: column; gap: .4rem; }
#cffreg-widget .cffreg-ot-row { display: flex; align-items: center; gap: .7rem; }
#cffreg-widget .cffreg-ot-row label.cffreg-ot-day { width: 100px; font-weight: 400; font-size: .85rem; display: flex; align-items: center; gap: .4rem; margin: 0; flex-shrink: 0; }
#cffreg-widget .cffreg-ot-row input[type="checkbox"] { width: auto; }
#cffreg-widget .cffreg-ot-times { display: flex; align-items: center; gap: .4rem; opacity: .35; pointer-events: none; }
#cffreg-widget .cffreg-ot-row.is-open .cffreg-ot-times { opacity: 1; pointer-events: auto; }
#cffreg-widget .cffreg-ot-times input[type="time"] {
  width: auto; padding: .35rem .5rem; border: 1px solid var(--cf-border); border-radius: 6px;
  background: var(--cf-off-white); font-size: .85rem;
}

#cffreg-widget .cffreg-submit-row { text-align: center; margin-top: 1.5rem; }
#cffreg-widget #cffreg-submit-btn {
  background: var(--cf-text); color: var(--cf-lime-pale); border: none; border-radius: 6px;
  padding: .85rem 2.2rem; font-size: 1rem; font-weight: 600; cursor: pointer;
  font-family: 'Inter', sans-serif;
}
#cffreg-widget #cffreg-submit-btn:hover { background: #163825; }
#cffreg-widget #cffreg-submit-btn:disabled { opacity: .6; cursor: not-allowed; }
#cffreg-widget .cffreg-submit-note { font-size: .8rem; color: var(--cf-muted); margin: .7rem 0 0; line-height: 1.5; }
#cffreg-widget .cffreg-result { margin-top: 1rem; font-size: .92rem; }
#cffreg-widget .cffreg-result.is-success { color: #2f8f4e; }
#cffreg-widget .cffreg-result.is-error { color: var(--cf-danger); }

@media (max-width: 480px) {
  #cffreg-widget .cffreg-row { flex-direction: column; gap: 0; }
  #cffreg-widget .cffreg-produce-row-main { flex-direction: column; align-items: flex-start; gap: .4rem; }
  #cffreg-widget .cffreg-ot-row { flex-wrap: wrap; }

  /* Designer feedback (2026-10-01): "Contact Person" and "Farm basics"
     still feel a bit roomy on mobile. Trims the section's own padding/
     margin and the gap between fields — the field count and order are
     unchanged, just less air around each one. */
  #cffreg-widget .cffreg-section { padding: .95rem 1rem; margin-bottom: .75rem; }
  #cffreg-widget .cffreg-section h3 { margin: 0 0 .65rem; }
  #cffreg-widget .cffreg-field { margin-bottom: .65rem; }
  #cffreg-widget .cffreg-hint { margin: .25rem 0 .5rem; }
  #cffreg-widget .cffreg-toggle-row { margin-top: .25rem; }
}