/* ==========================================================================
   Components – Forms
   Accessible, large touch targets, clear error states. Works without JS.
   ========================================================================== */

.vg-form { display: grid; gap: 1.25rem; }
.vg-form__grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .vg-form__grid { grid-template-columns: 1fr 1fr; } .vg-form__field--full { grid-column: 1 / -1; } }

.vg-field { display: grid; gap: .4rem; }
.vg-field__label { font-size: var(--vg-text-sm); font-weight: 600; display: flex; gap: .3rem; align-items: baseline; }
.vg-field__req { color: var(--vg-accent-text); font-weight: 400; }
.vg-field__opt { color: var(--vg-text-muted); font-weight: 400; font-size: var(--vg-text-xs); }
.vg-field__input, .vg-field__select, .vg-field__textarea {
  width: 100%; min-height: 52px; padding: .8rem 1rem;
  background: var(--vg-white); color: var(--vg-black);
  border: 1.5px solid var(--vg-grey-300); border-radius: var(--vg-radius-sm);
  transition: border-color var(--vg-dur-fast) var(--vg-ease), box-shadow var(--vg-dur-fast) var(--vg-ease);
  -webkit-appearance: none; appearance: none;
}
.vg-field__textarea { min-height: 140px; resize: vertical; }
.vg-field__input:focus, .vg-field__select:focus, .vg-field__textarea:focus { outline: none; border-color: var(--vg-black); box-shadow: 0 0 0 3px var(--vg-yellow); }
.vg-field__input::placeholder, .vg-field__textarea::placeholder { color: var(--vg-grey-500); }
.vg-field__select-wrap { position: relative; }
.vg-field__select { padding-right: 2.75rem; cursor: pointer; }
.vg-field__select-wrap .vg-icon { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; pointer-events: none; color: var(--vg-grey-500); }
.vg-field.has-error .vg-field__input, .vg-field.has-error .vg-field__select, .vg-field.has-error .vg-field__textarea { border-color: var(--vg-error); }
.vg-field__error { font-size: var(--vg-text-xs); color: var(--vg-error); min-height: 0; }
.vg-field__error:empty { display: none; }
.vg-field__hint { font-size: var(--vg-text-xs); color: var(--vg-text-muted); }

.vg-form__actions { display: grid; gap: .75rem; }

.vg-form__privacy { font-size: var(--vg-text-xs); color: var(--vg-text-muted); margin: 0; }
.vg-form__privacy a { color: inherit; }
.vg-form__status { padding: 1rem 1.25rem; border-radius: var(--vg-radius-sm); font-size: var(--vg-text-sm); font-weight: 500; }
.vg-form__status:empty { display: none; }
.vg-form__status--ok { background: var(--vg-green-tint); color: var(--vg-green-deep); border-left: 3px solid var(--vg-green); }
.vg-form__status--error { background: #FBE9EC; color: var(--vg-error); border-left: 3px solid var(--vg-error); }
.vg-form.is-sent .vg-form__grid, .vg-form.is-sent .vg-form__actions { display: none; }
/* Honeypot – visually removed, still in DOM for bots */
.vg-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Form card on dark sections */
.vg-form-panel { background: var(--vg-white); color: var(--vg-black); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--vg-radius-md); border: var(--vg-border); }
.vg-form-panel__title { margin: 0 0 .5rem; font-size: var(--vg-text-lg); }
.vg-form-panel__lead { margin: 0 0 1.5rem; color: var(--vg-text-muted); font-size: var(--vg-text-sm); }

/* Search form */
.vg-search { display: flex; gap: .5rem; }
.vg-search .vg-field__input { flex: 1; }