/**
 * Rajgir Parent Theme
 *
 * Component CSS — Forms
 *
 * Canonical path:
 * assets/css/components/forms.css
 *
 * Rajgir Form Component:
 *
 * Label
 *   ↓
 * Input
 *   ↓
 * Help
 *   ↓
 * Validation
 *   ↓
 * Error / Success
 *   ↓
 * Button
 *
 * Source authority:
 * REDC Volume 06 — Chapter 10
 * Forms, Input & Interaction Constitution
 *
 * Responsibilities:
 * - Reusable form presentation.
 * - Field presentation.
 * - Labels.
 * - Inputs.
 * - Help text.
 * - Validation presentation.
 * - Error presentation.
 * - Success presentation.
 * - Loading presentation.
 *
 * This file does NOT:
 * - validate business rules;
 * - authorize users;
 * - access databases;
 * - submit API requests;
 * - own authentication authority;
 * - own complaint authority;
 * - own booking authority;
 * - own marketplace authority.
 *
 * @package Rajgir
 */


/* ==========================================================================
   1. FORM COMPONENT FOUNDATION
   ========================================================================== */

.rg-form,
.rg-auth-form,
.rg-search-form {
	width: 100%;
	max-width: 100%;
}


/* ==========================================================================
   2. FORM FIELD
   ========================================================================== */

.rg-field,
.rg-form-field,
.rg-search-form__field {
	width: 100%;
	min-width: 0;
}


/* ==========================================================================
   3. FIELD GROUP
   ========================================================================== */

.rg-field,
.rg-form-field {
	display: flex;

	flex-direction: column;

	gap:
		var(--rajgir-space-form-field-gap);
}


/* ==========================================================================
   4. LABEL
   ========================================================================== */

.rg-field > label,
.rg-form-field > label,
.rg-form-label {
	display: inline-block;

	margin: 0;

	color:
		var(--rajgir-color-text);

	font-family:
		var(--rajgir-type-label-font-family);

	font-size:
		var(--rajgir-type-label-font-size);

	font-weight:
		var(--rajgir-type-label-font-weight);

	line-height:
		var(--rajgir-type-label-line-height);
}


/* ==========================================================================
   5. REQUIRED FIELD
   ========================================================================== */

.rg-field.is-required > label::after,
.rg-form-field.is-required > label::after,
.rg-form-label.is-required::after {
	content: " *";

	color:
		var(--rajgir-color-error);
}


/*
 * The semantic required attribute remains authoritative.
 *
 * This visual indicator must not be the only indication of requirement.
 */


/* ==========================================================================
   6. TEXT INPUTS
   ========================================================================== */

.rg-field input:not(
	[type="checkbox"],
	[type="radio"],
	[type="hidden"],
	[type="file"],
	[type="submit"],
	[type="button"],
	[type="reset"]
),
.rg-form-field input:not(
	[type="checkbox"],
	[type="radio"],
	[type="hidden"],
	[type="file"],
	[type="submit"],
	[type="button"],
	[type="reset"]
),
.rg-form-control,
.rg-search-form__input {
	display: block;

	width: 100%;
	max-width: 100%;

	min-height:
		var(--rajgir-form-control-min-height);

	padding:
		var(--rajgir-space-form-control-block)
		var(--rajgir-space-form-control-inline);

	border:
		1px solid var(--rajgir-color-border);

	border-radius:
		var(--rajgir-radius-control);

	background:
		var(--rajgir-color-background);

	color:
		var(--rajgir-color-text);

	font-family:
		var(--rajgir-font-family-ui);

	font-size:
		var(--rajgir-font-size-body);

	font-weight:
		var(--rajgir-font-weight-regular);

	line-height:
		var(--rajgir-line-height-body);
}


/* ==========================================================================
   7. SELECT
   ========================================================================== */

.rg-field select,
.rg-form-field select,
.rg-form-select {
	display: block;

	width: 100%;
	max-width: 100%;

	min-height:
		var(--rajgir-form-control-min-height);

	padding:
		var(--rajgir-space-form-control-block)
		var(--rajgir-space-form-control-inline);

	border:
		1px solid var(--rajgir-color-border);

	border-radius:
		var(--rajgir-radius-control);

	background:
		var(--rajgir-color-background);

	color:
		var(--rajgir-color-text);

	font-family:
		var(--rajgir-font-family-ui);

	font-size:
		var(--rajgir-font-size-body);

	line-height:
		var(--rajgir-line-height-body);
}


/* ==========================================================================
   8. TEXTAREA
   ========================================================================== */

.rg-field textarea,
.rg-form-field textarea,
.rg-form-textarea {
	display: block;

	width: 100%;
	max-width: 100%;

	min-height:
		var(--rajgir-form-textarea-min-height);

	padding:
		var(--rajgir-space-form-control-block)
		var(--rajgir-space-form-control-inline);

	border:
		1px solid var(--rajgir-color-border);

	border-radius:
		var(--rajgir-radius-control);

	background:
		var(--rajgir-color-background);

	color:
		var(--rajgir-color-text);

	font-family:
		var(--rajgir-font-family-body);

	font-size:
		var(--rajgir-font-size-body);

	line-height:
		var(--rajgir-line-height-body);

	resize: vertical;
}


/* ==========================================================================
   9. PLACEHOLDER
   ========================================================================== */

.rg-field input::placeholder,
.rg-field textarea::placeholder,
.rg-form-field input::placeholder,
.rg-form-field textarea::placeholder,
.rg-search-form__input::placeholder {
	color:
		var(--rajgir-color-text-muted);

	opacity: 1;
}


/*
 * Placeholder is guidance only.
 *
 * It is never the replacement for a meaningful label.
 */


/* ==========================================================================
   10. CHECKBOX / RADIO
   ========================================================================== */

.rg-field input[type="checkbox"],
.rg-field input[type="radio"],
.rg-form-field input[type="checkbox"],
.rg-form-field input[type="radio"] {
	width:
		auto;

	min-height:
		auto;

	accent-color:
		var(--rajgir-color-interactive);
}


/* ==========================================================================
   11. CHECKBOX / RADIO LABEL
   ========================================================================== */

.rg-field label:has(
	input[type="checkbox"],
	input[type="radio"]
),
.rg-form-field label:has(
	input[type="checkbox"],
	input[type="radio"]
) {
	display: inline-flex;

	align-items: center;

	gap:
		var(--rajgir-space-icon-gap);
}


/* ==========================================================================
   12. INPUT FOCUS
   ========================================================================== */

.rg-field input:focus-visible,
.rg-field select:focus-visible,
.rg-field textarea:focus-visible,
.rg-form-field input:focus-visible,
.rg-form-field select:focus-visible,
.rg-form-field textarea:focus-visible,
.rg-search-form__input:focus-visible {
	outline:
		2px solid var(--rajgir-color-focus);

	outline-offset:
		2px;

	border-color:
		var(--rajgir-color-focus);
}


/* ==========================================================================
   13. INPUT INVALID
   ========================================================================== */

.rg-field input[aria-invalid="true"],
.rg-field select[aria-invalid="true"],
.rg-field textarea[aria-invalid="true"],
.rg-form-field input[aria-invalid="true"],
.rg-form-field select[aria-invalid="true"],
.rg-form-field textarea[aria-invalid="true"] {
	border-color:
		var(--rajgir-color-error);
}


/* ==========================================================================
   14. INPUT VALID
   ========================================================================== */

.rg-field input[aria-invalid="false"],
.rg-field select[aria-invalid="false"],
.rg-field textarea[aria-invalid="false"],
.rg-form-field input[aria-invalid="false"],
.rg-form-field select[aria-invalid="false"],
.rg-form-field textarea[aria-invalid="false"] {
	border-color:
		var(--rajgir-color-success);
}


/* ==========================================================================
   15. HELP TEXT
   ========================================================================== */

.rg-field__help,
.rg-form-help,
.rg-form-description {
	margin: 0;

	color:
		var(--rajgir-color-text-muted);

	font-family:
		var(--rajgir-font-family-body);

	font-size:
		var(--rajgir-font-size-small);

	line-height:
		var(--rajgir-line-height-small);
}


/* ==========================================================================
   16. ERROR MESSAGE
   ========================================================================== */

.rg-field__error,
.rg-form-error,
.rg-form-message--error,
.rg-auth-msg.err {
	margin: 0;

	color:
		var(--rajgir-color-error);

	font-family:
		var(--rajgir-font-family-body);

	font-size:
		var(--rajgir-font-size-small);

	line-height:
		var(--rajgir-line-height-small);
}


/* ==========================================================================
   17. SUCCESS MESSAGE
   ========================================================================== */

.rg-field__success,
.rg-form-success,
.rg-form-message--success,
.rg-auth-msg.ok {
	margin: 0;

	color:
		var(--rajgir-color-success);

	font-family:
		var(--rajgir-font-family-body);

	font-size:
		var(--rajgir-font-size-small);

	line-height:
		var(--rajgir-line-height-small);
}


/* ==========================================================================
   18. FORM STATUS
   ========================================================================== */

.rg-form-status {
	margin: 0;

	font-family:
		var(--rajgir-font-family-body);

	font-size:
		var(--rajgir-font-size-small);

	line-height:
		var(--rajgir-line-height-small);
}


/* ==========================================================================
   19. FORM STATUS — ERROR
   ========================================================================== */

.rg-form-status[role="alert"],
.rg-form-status.is-error {
	color:
		var(--rajgir-color-error);
}


/* ==========================================================================
   20. FORM STATUS — SUCCESS
   ========================================================================== */

.rg-form-status[role="status"],
.rg-form-status.is-success {
	color:
		var(--rajgir-color-success);
}


/* ==========================================================================
   21. AUTH FORM
   ========================================================================== */

.rg-auth-form {
	display: none;

	width: 100%;
}


/* ==========================================================================
   22. AUTH FORM — ACTIVE
   ========================================================================== */

.rg-auth-form.active {
	display: flex;

	flex-direction: column;

	gap:
		var(--rajgir-space-form-section-gap);
}


/* ==========================================================================
   23. AUTH FIELD
   ========================================================================== */

.rg-auth-form .rg-field {
	position: relative;

	display: flex;

	flex-direction: column;

	gap:
		var(--rajgir-space-form-field-gap);
}


/* ==========================================================================
   24. AUTH INPUT
   ========================================================================== */

.rg-auth-form .rg-field input:not(
	[type="checkbox"],
	[type="radio"],
	[type="hidden"]
) {
	width: 100%;
}


/* ==========================================================================
   25. AUTH PASSWORD CONTROL
   ========================================================================== */

.rg-auth-form .rg-eye {
	position: absolute;

	right:
		var(--rajgir-space-control-edge);

	bottom:
		var(--rajgir-space-control-edge);

	z-index:
		var(--rajgir-layer-base);

	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-width:
		var(--rajgir-button-icon-size);

	min-height:
		var(--rajgir-button-icon-size);

	padding: 0;

	border: 0;

	background:
		transparent;

	color:
		var(--rajgir-color-text-muted);
}


/* ==========================================================================
   26. AUTH PASSWORD CONTROL — FOCUS
   ========================================================================== */

.rg-auth-form .rg-eye:focus-visible {
	outline:
		2px solid var(--rajgir-color-focus);

	outline-offset:
		2px;
}


/* ==========================================================================
   27. AUTH ROW
   ========================================================================== */

.rg-auth-row {
	display: flex;

	align-items: center;

	justify-content: space-between;

	gap:
		var(--rajgir-space-component-gap);

	flex-wrap: wrap;
}


/* ==========================================================================
   28. AUTH SUBMIT
   ========================================================================== */

.rg-auth-submit {
	width: 100%;
}


/* ==========================================================================
   29. AUTH MESSAGE
   ========================================================================== */

.rg-auth-msg {
	min-height:
		var(--rajgir-form-message-min-height);

	margin: 0;

	font-size:
		var(--rajgir-font-size-small);

	line-height:
		var(--rajgir-line-height-small);
}


/* ==========================================================================
   30. SEARCH FORM
   ========================================================================== */

.rg-search-form {
	width: 100%;
}


/* ==========================================================================
   31. SEARCH FORM FIELD
   ========================================================================== */

.rg-search-form__field {
	display: flex;

	align-items: stretch;

	width: 100%;

	gap:
		var(--rajgir-space-component-gap);
}


/* ==========================================================================
   32. SEARCH INPUT
   ========================================================================== */

.rg-search-form__input {
	flex:
		1 1 auto;

	min-width: 0;
}


/* ==========================================================================
   33. SEARCH SUBMIT
   ========================================================================== */

.rg-search-form__submit {
	flex:
		0 0 auto;
}


/* ==========================================================================
   34. FORM BUTTON LOADING
   ========================================================================== */

.rg-form [aria-busy="true"],
.rg-auth-form [aria-busy="true"] {
	cursor:
		wait;
}


/* ==========================================================================
   35. DISABLED CONTROLS
   ========================================================================== */

.rg-form input:disabled,
.rg-form select:disabled,
.rg-form textarea:disabled,
.rg-form button:disabled,
.rg-auth-form input:disabled,
.rg-auth-form select:disabled,
.rg-auth-form textarea:disabled,
.rg-auth-form button:disabled {
	cursor:
		not-allowed;

	opacity:
		var(--rajgir-state-disabled-opacity);
}


/* ==========================================================================
   36. READONLY CONTROLS
   ========================================================================== */

.rg-form input[readonly],
.rg-form textarea[readonly],
.rg-auth-form input[readonly],
.rg-auth-form textarea[readonly] {
	cursor:
		default;
}


/* ==========================================================================
   37. FILE INPUT
   ========================================================================== */

.rg-form input[type="file"] {
	max-width: 100%;

	font-family:
		var(--rajgir-font-family-ui);

	font-size:
		var(--rajgir-font-size-body);
}


/* ==========================================================================
   38. FORM FIELD WIDTH SAFETY
   ========================================================================== */

.rg-form input,
.rg-form select,
.rg-form textarea,
.rg-auth-form input,
.rg-auth-form select,
.rg-auth-form textarea {
	max-width: 100%;
}


/* ==========================================================================
   39. FORM ERROR ASSOCIATION
   ========================================================================== */

/*
 * Error presentation must be associated with the appropriate field
 * through semantic HTML / ARIA.
 *
 * Example:
 *
 * <input aria-describedby="field-error">
 * <p id="field-error" class="rg-field__error">...</p>
 *
 * CSS only presents the state.
 */


/* ==========================================================================
   40. FORM SUCCESS
   ========================================================================== */

/*
 * Success presentation must only be displayed when the authoritative
 * underlying operation has actually succeeded.
 *
 * CSS does not determine success.
 */


/* ==========================================================================
   41. FORM LOADING
   ========================================================================== */

.rg-form.is-loading,
.rg-auth-form.is-loading {
	position: relative;
}


/* ==========================================================================
   42. FORM LOADING INDICATOR
   ========================================================================== */

.rg-form.is-loading::after,
.rg-auth-form.is-loading::after {
	content: "";

	display: block;

	width:
		var(--rajgir-size-icon-sm);

	height:
		var(--rajgir-size-icon-sm);

	margin-top:
		var(--rajgir-space-component-gap);

	border:
		2px solid currentColor;

	border-right-color:
		transparent;

	border-radius:
		50%;

	animation:
		rajgir-form-spin
		var(--rajgir-motion-duration-fast)
		linear
		infinite;
}


/* ==========================================================================
   43. FORM LOADING ANIMATION
   ========================================================================== */

@keyframes rajgir-form-spin {

	to {
		transform:
			rotate(360deg);
	}

}


/* ==========================================================================
   44. FORM SECURITY / PRESENTATION BOUNDARY
   ========================================================================== */

/*
 * A CSS class must never be treated as proof of:
 *
 * - authorization;
 * - authentication;
 * - payment;
 * - booking;
 * - complaint status;
 * - marketplace permission;
 * - business permission.
 *
 * Backend/application authority remains authoritative.
 */


/* ==========================================================================
   45. FORM ANTI-PATTERN PROTECTION
   ========================================================================== */

/*
 * This component does not encourage:
 *
 * - placeholder-only labels;
 * - label-less controls;
 * - wrong input types;
 * - arbitrary client-side security;
 * - raw API error presentation;
 * - sensitive data in error messages;
 * - duplicate submission;
 * - uncontrolled dynamic fields.
 *
 * These are application/markup responsibilities, not CSS fixes.
 */


/* ==========================================================================
   46. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.rg-form.is-loading::after,
	.rg-auth-form.is-loading::after {
		animation: none;
	}

}


/* ==========================================================================
   47. FORM COMPONENT RESPONSIBILITY
   ========================================================================== */

/*
 * Component:
 *
 *     forms.css
 *
 * Behavior:
 *
 *     assets/js/components/form.js
 *
 * Feature modules may include:
 *
 *     auth.js
 *     complaint.js
 *     marketplace.js
 *
 * API:
 *
 *     REST / approved API contract
 *
 * Authority:
 *
 *     Backend / service / domain layer
 *
 * The Theme remains presentation-oriented.
 */


/* ==========================================================================
   48. RESPONSIVE BOUNDARY
   ========================================================================== */

/*
 * Mobile and responsive adjustments belong to:
 *
 * assets/css/responsive/
 *
 * This component file provides the reusable form foundation.
 */


/* ==========================================================================
   49. DESIGN TOKEN BOUNDARY
   ========================================================================== */

/*
 * Form visual language consumes centralized:
 *
 * Color
 * Typography
 * Spacing
 * Radius
 * Shadow
 * Motion
 *
 * tokens.
 *
 * Form-specific values must not become a second independent design system.
 */


/* ==========================================================================
   50. COMPONENT GOLDEN RULE
   ========================================================================== */

/*
 * SIMPLE
 * +
 * CLEAR
 * +
 * ACCESSIBLE
 * +
 * RESPONSIVE
 * +
 * VALIDATED
 * +
 * ACTIONABLE
 * +
 * SECURE
 *
 * The component presents the form.
 *
 * It does not own the authority behind the form.
 */