/* ==========================================================================
   Alternivite Design System — Forms
   Inputs, textareas, selects, checkboxes, radios, validation, hints
   ========================================================================== */

/* ==========================================================================
   FORM GROUP
   Wraps label + input + hint/error
   ========================================================================== */

.form-group {
   margin-bottom: var(--space-5);
}

/* ==========================================================================
   FORM LABEL
   ========================================================================== */

.form-label {
   display: block;
   font-size: var(--text-sm);
   font-weight: var(--font-medium);
   color: var(--text-primary);
   margin-bottom: var(--space-1-5);
}

/* Required indicator — appended via CSS */
.form-label-required::after {
   content: " *";
   color: var(--text-error);
}

/* ==========================================================================
   TEXT INPUT, TEXTAREA, SELECT — Shared styles
   ========================================================================== */

.form-input,
.form-textarea,
.form-select {
   display: block;
   width: 100%;
   padding: var(--space-3) var(--space-4);
   font-size: var(--text-sm);
   line-height: var(--leading-normal);
   color: var(--text-primary);
   background-color: var(--bg-primary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-lg);
   transition: border-color var(--duration-fast) var(--ease-default),
               box-shadow var(--duration-fast) var(--ease-default);
   appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
   color: var(--text-tertiary);
}

/* Hover state */
.form-input:hover,
.form-textarea:hover,
.form-select:hover {
   border-color: var(--color-neutral-400);
}

/* Focus state */
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
   outline: none;
   border-color: var(--border-focus);
   box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Disabled state */
.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   background-color: var(--bg-secondary);
}

/* ==========================================================================
   VALIDATION — Error state
   ========================================================================== */

.form-input-error,
.form-textarea-error {
   border-color: var(--border-error);
}

.form-input-error:focus,
.form-textarea-error:focus {
   box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.15);
}

/* ==========================================================================
   TEXTAREA
   ========================================================================== */

.form-textarea {
   min-height: 120px;
   resize: vertical;
}

/* ==========================================================================
   SELECT — Custom chevron
   ========================================================================== */

.form-select {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
   background-position: right var(--space-3) center;
   background-repeat: no-repeat;
   background-size: 1.5em 1.5em;
   padding-right: var(--space-10);
}

/* ==========================================================================
   HINT & ERROR MESSAGES
   ========================================================================== */

.form-hint {
   font-size: var(--text-xs);
   color: var(--text-tertiary);
   margin-top: var(--space-1-5);
}

.form-error {
   font-size: var(--text-xs);
   color: var(--text-error);
   margin-top: var(--space-1-5);
}

/* ==========================================================================
   CHECKBOX & RADIO — Custom styled
   ========================================================================== */

.form-check {
   display: flex;
   align-items: flex-start;
   gap: var(--space-3);
   cursor: pointer;
}

.form-check-input {
   width: var(--space-5);
   height: var(--space-5);
   margin-top: var(--space-0-5);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-md);
   appearance: none;
   cursor: pointer;
   transition: all var(--duration-fast) var(--ease-default);
   flex-shrink: 0;
}

/* Radio variant — circular */
.form-check-input[type="radio"] {
   border-radius: var(--radius-full);
}

/* Checked state — checkbox checkmark */
.form-check-input:checked {
   background-color: var(--interactive-primary);
   border-color: var(--interactive-primary);
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
   background-position: center;
   background-repeat: no-repeat;
   background-size: 0.75em 0.75em;
}

/* Checked state — radio dot */
.form-check-input[type="radio"]:checked {
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
   background-size: 1em 1em;
}

/* Focus ring for keyboard navigation */
.form-check-input:focus-visible {
   outline: 2px solid var(--border-focus);
   outline-offset: 2px;
}

/* Checkbox/radio label text */
.form-check-label {
   font-size: var(--text-sm);
   color: var(--text-primary);
   cursor: pointer;
}

/* ==========================================================================
   AUTH PAGE CHECKBOX — Simplified variant
   ========================================================================== */

.form-checkbox-label {
   display: flex;
   align-items: flex-start;
   gap: var(--space-2);
   font-size: var(--text-sm);
   color: var(--text-secondary);
   cursor: pointer;
}

.form-checkbox {
   margin-top: 2px;
   width: 16px;
   height: 16px;
   accent-color: var(--interactive-primary);
   cursor: pointer;
}

/* ==========================================================================
   FORM REQUIRED INDICATOR
   ========================================================================== */

.form-required {
   color: var(--color-error-500);
   font-weight: var(--font-bold);
}

/* ==========================================================================
   FORM LABEL OPTIONAL
   ========================================================================== */

.form-label-optional {
   font-weight: var(--font-normal);
   color: var(--text-tertiary);
   font-size: var(--text-xs);
}