/**
 * Form elements for the module's ~50 forms (registration, invoices,
 * payments, searches) and core forms.
 */
.kc-form, form { max-width: 100%; }
.kc-body__main > .region--content > form,
.kc-body__main > .region--content > .block > form,
.kc-body__main form.kc-form:not(.kc-form--bare) {
  padding: var(--kc-s6);
  background: var(--kc-surface);
  border: 1px solid var(--kc-line);
  border-radius: var(--kc-radius-xl);
  box-shadow: var(--kc-shadow-sm);
}
@media (max-width: 39.99rem) {
  .kc-body__main form.kc-form:not(.kc-form--bare) { padding: var(--kc-s4); border-radius: var(--kc-radius-lg); }
}
/* Simple forms (no table inside) read better at a comfortable width. */
.kc-body:not(.kc-body--with-sidebar) .kc-body__main form.kc-form:not(:has(table)):not(.kc-form--wide) { max-width: 52rem; }

/* Forms nested inside other forms or inside cards stay flat. */
.kc-form .kc-form, .kc-card .kc-form, .kc-auth .kc-form, .kc-profile .kc-form { padding: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; }

.form-item, .kc-field { margin: 0 0 var(--kc-s5); }
.details-wrapper > .form-item:last-child, .fieldset__wrapper > .form-item:last-child, .container-inline .form-item { margin-bottom: 0; }
.form-wrapper + .form-wrapper { margin-top: var(--kc-s4); }

label, .form-item__label, .fieldset__label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--kc-fs-sm);
  font-weight: 650;
  color: var(--kc-ink);
  letter-spacing: 0.005em;
}
label.option { display: inline; margin: 0; font-weight: 500; color: var(--kc-body); }
.form-required::after, label.js-form-required::after {
  content: "*";
  margin-left: 0.25rem;
  color: var(--kc-error);
  font-weight: 700;
}

input.form-text,
input.form-email,
input.form-tel,
input.form-url,
input.form-search,
input.form-number,
input.form-date,
input.form-time,
input.form-password,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="url"],
select,
select.form-select,
textarea,
.form-textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 2.9rem;
  padding: 0.65rem 0.85rem;
  font: 450 var(--kc-fs-base)/1.4 var(--kc-font-sans);
  color: var(--kc-ink);
  background: var(--kc-surface);
  border: 1px solid var(--kc-line-strong);
  border-radius: var(--kc-radius);
  box-shadow: inset 0 1px 2px rgba(14, 28, 22, 0.04);
  transition: border-color 0.15s var(--kc-ease), box-shadow 0.15s var(--kc-ease);
}
input[size]:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]) { width: 100%; }
textarea, .form-textarea { min-height: 7rem; resize: vertical; }
select, select.form-select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c6142' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.1rem;
  -webkit-appearance: none;
  appearance: none;
}
select[multiple] { background-image: none; padding-right: 0.85rem; min-height: 8rem; }
input::placeholder, textarea::placeholder { color: var(--kc-subtle); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--kc-green-400); }
input:focus, select:focus, textarea:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--kc-green-600);
  box-shadow: 0 0 0 4px rgba(27, 143, 95, 0.18);
}
input[disabled], select[disabled], textarea[disabled], input[readonly], textarea[readonly] {
  background: var(--kc-canvas);
  color: var(--kc-muted);
  cursor: not-allowed;
}
input.error, select.error, textarea.error, .form-item--error input, .form-item--error select {
  border-color: var(--kc-error) !important;
  box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.12);
}
.form-item--error-message, .form-item__error-message {
  margin-top: 0.35rem;
  font-size: var(--kc-fs-sm);
  font-weight: 600;
  color: var(--kc-error);
}
.description, .form-item__description, .form-item .description {
  margin-top: 0.35rem;
  font-size: var(--kc-fs-xs);
  line-height: 1.5;
  color: var(--kc-muted);
}
.field-prefix, .field-suffix { font-size: var(--kc-fs-sm); color: var(--kc-muted); }

/* Checkboxes and radios */
input[type="checkbox"], input[type="radio"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0 0.55rem 0 0;
  accent-color: var(--kc-green-700);
  vertical-align: -0.2em;
  cursor: pointer;
}
.form-type-checkbox, .form-type-radio, .js-form-type-checkbox, .js-form-type-radio { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: var(--kc-s2); }
.form-type-checkbox > .description, .form-type-radio > .description { flex-basis: 100%; padding-left: 1.7rem; }
.form-checkboxes, .form-radios { display: grid; gap: 0.2rem; }

/* Fieldsets and details */
fieldset, .kc-fieldset {
  min-width: 0;
  margin: 0 0 var(--kc-s6);
  padding: var(--kc-s5);
  border: 1px solid var(--kc-line);
  border-radius: var(--kc-radius-lg);
  background: var(--kc-surface-2);
}
legend, .fieldset__legend {
  padding: 0 0.5rem;
  font-family: var(--kc-font-display);
  font-size: var(--kc-fs-md);
  font-weight: 750;
  color: var(--kc-green-900);
}
.fieldset__legend .fieldset__label { margin: 0; font-size: inherit; }
details:not(.kc-account), .kc-details {
  margin: 0 0 var(--kc-s6);
  border: 1px solid var(--kc-line);
  border-radius: var(--kc-radius-lg);
  background: var(--kc-surface);
  overflow: hidden;
}
details:not(.kc-account) > summary {
  position: relative;
  display: block;
  padding: var(--kc-s4) var(--kc-s5) var(--kc-s4) 2.6rem;
  font-family: var(--kc-font-display);
  font-size: var(--kc-fs-md);
  font-weight: 750;
  color: var(--kc-green-900);
  background: linear-gradient(180deg, var(--kc-green-50), var(--kc-surface));
  border-bottom: 1px solid transparent;
  cursor: pointer;
  list-style: none;
}
details:not(.kc-account) > summary::-webkit-details-marker { display: none; }
details:not(.kc-account) > summary::before {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: calc(var(--kc-s4) + 0.8em);
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--kc-green-700);
  border-bottom: 2px solid var(--kc-green-700);
  transform: translateY(-50%) rotate(-45deg);
  transition: transform 0.2s var(--kc-ease);
}
details:not(.kc-account)[open] > summary { border-bottom-color: var(--kc-line); }
details:not(.kc-account)[open] > summary::before { transform: translateY(-50%) rotate(45deg); }
.details-wrapper { padding: var(--kc-s5); }

/* Two-column grid for long registration forms on wide screens. */
@media (min-width: 48rem) {
  .kc-form .details-wrapper,
  .kc-form fieldset > .fieldset__wrapper,
  .kc-form fieldset > .fieldset-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--kc-s5);
    align-items: start;
  }
  .kc-form .details-wrapper > :is(.form-type-textarea, .form-type-checkboxes, .form-type-radios, .form-type-managed-file, fieldset, details, table, .form-actions, .description, .password-confirm, .form-type-password-confirm, .js-form-type-password-confirm, .container-inline, .form-wrapper:not(.form-item)),
  .kc-form fieldset > :is(.fieldset__wrapper, .fieldset-wrapper) > :is(.form-type-textarea, .form-type-checkboxes, .form-type-radios, table, .form-actions, .description) {
    grid-column: 1 / -1;
  }
}

/* Inline containers ("container-inline" from the module's search forms). */
.container-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--kc-s3); }
.container-inline .form-item { margin: 0; }
.container-inline label { display: block; }
.container-inline input[type="text"], .container-inline select { width: auto; min-width: 12rem; }

/* Form actions */
.form-actions, .kc-form .form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kc-s3);
  margin-top: var(--kc-s6);
  padding-top: var(--kc-s5);
  border-top: 1px solid var(--kc-line);
}
.form-actions:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
input.form-submit, button.form-submit { min-width: 8rem; }
.form-actions .kc-btn--primary { min-width: 10rem; }

/* File upload */
input[type="file"] {
  display: block;
  max-width: 100%;
  padding: 0.55rem;
  font-size: var(--kc-fs-sm);
  border: 1px dashed var(--kc-line-strong);
  border-radius: var(--kc-radius);
  background: var(--kc-surface-2);
}
input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.45rem 0.8rem;
  border: 0;
  border-radius: var(--kc-radius-sm);
  background: var(--kc-green-700);
  color: #fff;
  font: 650 var(--kc-fs-xs)/1.2 var(--kc-font-sans);
  cursor: pointer;
}
.form-managed-file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kc-s2); }

/* Password widgets */
.password-strength__meter { height: 0.4rem; margin-top: 0.5rem; background: var(--kc-line); border-radius: var(--kc-radius-pill); overflow: hidden; }
.password-strength__indicator { height: 100%; background: var(--kc-gold-500); }
.password-strength__indicator.is-weak { background: var(--kc-error); }
.password-strength__indicator.is-fair { background: var(--kc-gold-500); }
.password-strength__indicator.is-good { background: var(--kc-green-500); }
.password-strength__indicator.is-strong { background: var(--kc-green-700); }
.password-confirm, .password-confirm-message { font-size: var(--kc-fs-xs); color: var(--kc-muted); margin-top: 0.3rem; }
.password-strength__title, .password-confirm__message { margin-top: 0.3rem; font-size: var(--kc-fs-xs); color: var(--kc-muted); }
.password-suggestions { margin-top: 0.5rem; padding: var(--kc-s3) var(--kc-s4); font-size: var(--kc-fs-xs); background: var(--kc-warning-bg); border-radius: var(--kc-radius-sm); }
.password-suggestions ul { margin: 0.3rem 0 0; }

/* The module wraps register fields in float:left inline styles; let the
   grid lay them out instead. */
.user-register-form div[style*="float"], .user-form div[style*="float"] { float: none !important; margin-right: 0 !important; width: auto !important; }
.user-register-form div[style*="clear"], .user-form div[style*="clear"] { display: none; }

/* Search block form */
.search-form .form-item { margin-bottom: var(--kc-s3); }
.kc-form .captcha { margin: var(--kc-s4) 0; padding: var(--kc-s4); border: 1px solid var(--kc-line); border-radius: var(--kc-radius); background: var(--kc-surface-2); }
