/**
 * Form Components
 * Remote Madam Design System
 */

/* ============================================
   FORM GROUP
   ============================================ */

.form-group {
	margin-bottom: var(--spacing-6);
}

.form-group--inline {
	display: flex;
	align-items: center;
	gap: var(--spacing-4);
}

.form-group--inline .form-label {
	margin-bottom: 0;
	min-width: 120px;
}

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

.form-label {
	display: block;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-white);
	margin-bottom: var(--spacing-2);
}

.form-label--required::after {
	content: '*';
	color: var(--color-error);
	margin-left: var(--spacing-1);
}

.form-label--inline {
	display: inline;
	margin-bottom: 0;
}

/* ============================================
   INPUT BASE
   ============================================ */

.form-control {
	width: 100%;
	padding: var(--spacing-3) var(--spacing-4);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-normal);
	color: var(--color-white);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-input);
	transition: all var(--transition-fast) ease;
}

.form-control::placeholder {
	color: var(--color-muted-light);
}

.form-control:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-light);
}

.form-control:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.form-control--sm {
	padding: var(--spacing-2) var(--spacing-3);
	font-size: var(--font-size-sm);
}

.form-control--lg {
	padding: var(--spacing-4) var(--spacing-5);
	font-size: var(--font-size-lg);
}

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

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

.form-control--textarea--sm {
	min-height: 80px;
}

.form-control--textarea--lg {
	min-height: 200px;
}

/* ============================================
   SELECT
   ============================================ */

.form-control--select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23A1A1AA' d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--spacing-4) center;
	padding-right: var(--spacing-10);
}

.form-control--select:focus {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23F55DAE' d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
}

/* ============================================
   CHECKBOX
   ============================================ */

.form-checkbox {
	display: flex;
	align-items: center;
	gap: var(--spacing-3);
	cursor: pointer;
}

.form-checkbox__input {
	width: 20px;
	height: 20px;
	appearance: none;
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all var(--transition-fast) ease;
	position: relative;
}

.form-checkbox__input:checked {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

.form-checkbox__input:checked::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='white' d='M8.5 2.5L3.5 7.5L1.5 5.5' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.form-checkbox__input:focus {
	outline: none;
	box-shadow: 0 0 0 3px var(--color-primary-light);
}

.form-checkbox__label {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-normal);
	color: var(--color-white);
}

/* ============================================
   RADIO
   ============================================ */

.form-radio {
	display: flex;
	align-items: center;
	gap: var(--spacing-3);
	cursor: pointer;
}

.form-radio__input {
	width: 20px;
	height: 20px;
	appearance: none;
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: all var(--transition-fast) ease;
	position: relative;
}

.form-radio__input:checked {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

.form-radio__input:checked::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	background-color: var(--color-white);
	border-radius: var(--radius-full);
}

.form-radio__input:focus {
	outline: none;
	box-shadow: 0 0 0 3px var(--color-primary-light);
}

.form-radio__label {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-normal);
	color: var(--color-white);
}

/* ============================================
   SWITCH
   ============================================ */

.form-switch {
	display: flex;
	align-items: center;
	gap: var(--spacing-3);
	cursor: pointer;
}

.form-switch__input {
	width: 48px;
	height: 24px;
	appearance: none;
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: all var(--transition-fast) ease;
	position: relative;
}

.form-switch__input:checked {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

.form-switch__input::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	background-color: var(--color-white);
	border-radius: var(--radius-full);
	transition: transform var(--transition-fast) ease;
}

.form-switch__input:checked::after {
	transform: translateX(24px);
}

.form-switch__input:focus {
	outline: none;
	box-shadow: 0 0 0 3px var(--color-primary-light);
}

.form-switch__label {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-normal);
	color: var(--color-white);
}

/* ============================================
   INPUT GROUP
   ============================================ */

.input-group {
	display: flex;
	align-items: stretch;
}

.input-group__prepend,
.input-group__append {
	display: flex;
	align-items: center;
	padding: 0 var(--spacing-4);
	background-color: var(--color-surface-hover);
	border: 1px solid var(--color-border);
	font-size: var(--font-size-sm);
	color: var(--color-muted);
}

.input-group__prepend {
	border-right: none;
	border-radius: var(--radius-input) 0 0 var(--radius-input);
}

.input-group__append {
	border-left: none;
	border-radius: 0 var(--radius-input) var(--radius-input) 0;
}

.input-group__control {
	flex: 1;
	border-radius: 0;
}

.input-group__control:first-child {
	border-radius: var(--radius-input) 0 0 var(--radius-input);
}

.input-group__control:last-child {
	border-radius: 0 var(--radius-input) var(--radius-input) 0;
}

.input-group__prepend + .input-group__control {
	border-radius: 0;
}

.input-group__control + .input-group__append {
	border-radius: 0;
}

/* ============================================
   FORM HELP TEXT
   ============================================ */

.form-help {
	display: block;
	margin-top: var(--spacing-2);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}

.form-help--error {
	color: var(--color-error);
}

.form-help--success {
	color: var(--color-success);
}

/* ============================================
   FORM ERROR
   ============================================ */

.form-control--error {
	border-color: var(--color-error);
}

.form-control--error:focus {
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* ============================================
   FORM SUCCESS
   ============================================ */

.form-control--success {
	border-color: var(--color-success);
}

.form-control--success:focus {
	box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* ============================================
   SEARCH INPUT
   ============================================ */

.search-input {
	position: relative;
}

.search-input__icon {
	position: absolute;
	left: var(--spacing-4);
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	color: var(--color-muted);
	pointer-events: none;
}

.search-input__control {
	padding-left: var(--spacing-10);
}

.search-input__clear {
	position: absolute;
	right: var(--spacing-4);
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	color: var(--color-muted);
	cursor: pointer;
	transition: color var(--transition-fast) ease;
}

.search-input__clear:hover {
	color: var(--color-white);
}

/* ============================================
   FILE INPUT
   ============================================ */

.file-input {
	position: relative;
}

.file-input__control {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.file-input__label {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-8);
	border: 2px dashed var(--color-border);
	border-radius: var(--radius-lg);
	background-color: var(--color-surface);
	transition: all var(--transition-fast) ease;
	cursor: pointer;
}

.file-input__label:hover {
	border-color: var(--color-primary);
	background-color: var(--color-surface-hover);
}

.file-input__icon {
	width: 48px;
	height: 48px;
	color: var(--color-muted);
	margin-bottom: var(--spacing-4);
}

.file-input__text {
	font-size: var(--font-size-base);
	color: var(--color-white);
	margin-bottom: var(--spacing-2);
}

.file-input__hint {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
}

/* ============================================
   FORM ACTIONS
   ============================================ */

.form-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--spacing-4);
	margin-top: var(--spacing-8);
}

.form-actions--center {
	justify-content: center;
}

.form-actions--start {
	justify-content: flex-start;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
	.form-group--inline {
		flex-direction: column;
		align-items: flex-start;
	}

	.form-group--inline .form-label {
		min-width: auto;
		margin-bottom: var(--spacing-2);
	}

	.form-actions {
		flex-direction: column;
		width: 100%;
	}

	.form-actions .btn {
		width: 100%;
	}
}