/**
 * Form Controls — Almutaheda Pack
 *
 * Components: text input, select, textarea, checkbox, radio,
 *             quantity control, validation states, helper/error text.
 * RTL: logical CSS properties throughout.
 */

/* ─── Shared field wrapper ────────────────────────────────────────── */

.alm-field {
	display:        flex;
	flex-direction: column;
	gap:            var(--alm-space-1-5);
}

/* ─── Label ───────────────────────────────────────────────────────── */

.alm-label {
	display:      block;
	font-size:    var(--alm-text-sm);
	font-weight:  var(--alm-weight-medium);
	color:        var(--alm-color-text-primary);
	line-height:  var(--alm-leading-snug);
}

.alm-label--required::after {
	content:     " *";
	color:       var(--alm-color-error);
	font-weight: var(--alm-weight-regular);
}

/* ─── Base control reset (shared by input, select, textarea) ─────── */

.alm-input,
.alm-select,
.alm-textarea {
	display:          block;
	width:            100%;
	font-family:      var(--alm-font-arabic);
	font-size:        var(--alm-text-base);
	color:            var(--alm-input-color);
	background-color: var(--alm-input-bg);
	border:           var(--alm-input-border);
	border-radius:    var(--alm-input-radius);
	padding-block:    var(--alm-input-padding-y);
	padding-inline:   var(--alm-input-padding-x);
	line-height:      var(--alm-leading-normal);
	transition:       border-color var(--alm-duration-base) var(--alm-easing-standard),
	                  box-shadow var(--alm-duration-base) var(--alm-easing-standard);
	appearance:       none;
	-webkit-appearance: none;
}

.alm-input::placeholder,
.alm-textarea::placeholder {
	color:   var(--alm-input-placeholder);
	opacity: 1;
}

/* ─── Text Input ──────────────────────────────────────────────────── */

.alm-input {
	min-height: var(--alm-input-height);
}

.alm-input:hover:not(:disabled):not([readonly]) {
	border-color: var(--alm-color-text-secondary);
}

.alm-input:focus {
	outline:      none;
	border:       var(--alm-input-border-focus);
	box-shadow:   0 0 0 var(--alm-focus-ring-width) rgba(205, 170, 125, 0.35);
}

.alm-input:disabled,
.alm-input[readonly] {
	background-color: var(--alm-input-bg-disabled);
	color:            var(--alm-color-text-muted);
	cursor:           not-allowed;
}

.alm-input[readonly] {
	cursor: default;
}

/* ─── Select ──────────────────────────────────────────────────────── */

.alm-select {
	min-height:           var(--alm-input-height);
	padding-inline-end:   var(--alm-space-10);
	cursor:               pointer;

	/* Custom dropdown arrow — direction-aware */
	background-image:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat:    no-repeat;
	background-position:  right var(--alm-space-4) center;
	background-size:      1rem;
}

[dir="rtl"] .alm-select {
	background-position: left var(--alm-space-4) center;
	padding-inline-start: var(--alm-space-10);
	padding-inline-end:   var(--alm-input-padding-x);
}

.alm-select:hover:not(:disabled) {
	border-color: var(--alm-color-text-secondary);
}

.alm-select:focus {
	outline:    none;
	border:     var(--alm-input-border-focus);
	box-shadow: 0 0 0 var(--alm-focus-ring-width) rgba(205, 170, 125, 0.35);
}

.alm-select:disabled {
	background-color: var(--alm-input-bg-disabled);
	color:            var(--alm-color-text-muted);
	cursor:           not-allowed;
}

/* ─── Textarea ────────────────────────────────────────────────────── */

.alm-textarea {
	min-height: 7rem;
	resize:     vertical;
}

.alm-textarea:hover:not(:disabled):not([readonly]) {
	border-color: var(--alm-color-text-secondary);
}

.alm-textarea:focus {
	outline:    none;
	border:     var(--alm-input-border-focus);
	box-shadow: 0 0 0 var(--alm-focus-ring-width) rgba(205, 170, 125, 0.35);
}

.alm-textarea:disabled {
	background-color: var(--alm-input-bg-disabled);
	color:            var(--alm-color-text-muted);
	cursor:           not-allowed;
}

/* ─── Checkbox ────────────────────────────────────────────────────── */

.alm-checkbox-wrap,
.alm-radio-wrap {
	display:     flex;
	align-items: flex-start;
	gap:         var(--alm-space-3);
	cursor:      pointer;
}

.alm-checkbox,
.alm-radio {
	flex-shrink: 0;
	width:       1.25rem;
	height:      1.25rem;
	margin-block-start: 0.1em; /* optical alignment with label text */
	appearance:  none;
	-webkit-appearance: none;
	background-color: var(--alm-input-bg);
	border:      var(--alm-border-width-2) solid var(--alm-color-border);
	cursor:      pointer;
	transition:  border-color var(--alm-duration-fast) var(--alm-easing-standard),
	             background-color var(--alm-duration-fast) var(--alm-easing-standard);
}

.alm-checkbox {
	border-radius: var(--alm-radius-sm);
}

.alm-radio {
	border-radius: var(--alm-radius-full);
}

.alm-checkbox:hover:not(:disabled),
.alm-radio:hover:not(:disabled) {
	border-color: var(--alm-color-navy-primary);
}

/* Checked state — checkbox */
.alm-checkbox:checked {
	background-color: var(--alm-color-navy-primary);
	border-color:     var(--alm-color-navy-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M13.485 1.929a1 1 0 0 1 0 1.414L6.414 10.414a1 1 0 0 1-1.414 0L1.515 6.929a1 1 0 1 1 1.414-1.414L5.707 7.793l6.364-6.364a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: center;
	background-size:     0.75rem;
}

/* Indeterminate state — checkbox */
.alm-checkbox:indeterminate {
	background-color: var(--alm-color-navy-primary);
	border-color:     var(--alm-color-navy-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Crect x='3' y='7' width='10' height='2' rx='1'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: center;
	background-size:     0.75rem;
}

/* Checked state — radio */
.alm-radio:checked {
	background-color: var(--alm-color-navy-primary);
	border-color:     var(--alm-color-navy-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Ccircle cx='8' cy='8' r='3.5'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: center;
	background-size:     1rem;
}

.alm-checkbox:focus-visible,
.alm-radio:focus-visible {
	outline:        var(--alm-focus-ring-width) solid var(--alm-focus-ring-color);
	outline-offset: var(--alm-focus-ring-offset);
}

.alm-checkbox:disabled,
.alm-radio:disabled {
	opacity:        0.5;
	cursor:         not-allowed;
}

.alm-checkbox-label,
.alm-radio-label {
	font-size:   var(--alm-text-base);
	color:       var(--alm-color-text-primary);
	line-height: var(--alm-leading-snug);
}

/* ─── Quantity Control ────────────────────────────────────────────── */

.alm-qty {
	display:       inline-flex;
	align-items:   center;
	border:        var(--alm-border-standard);
	border-radius: var(--alm-radius-md);
	overflow:      hidden;
	height:        var(--alm-input-height);
}

.alm-qty__btn {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	width:            2.75rem;
	height:           100%;
	background-color: var(--alm-color-surface-subtle);
	border:           none;
	color:            var(--alm-color-text-primary);
	font-size:        var(--alm-text-lg);
	font-weight:      var(--alm-weight-medium);
	cursor:           pointer;
	transition:       background-color var(--alm-duration-fast) var(--alm-easing-standard);
	line-height:      1;
	user-select:      none;
}

.alm-qty__btn:hover:not(:disabled) {
	background-color: var(--alm-color-navy-primary-10);
	color:            var(--alm-color-navy-primary);
}

.alm-qty__btn:focus-visible {
	outline:        var(--alm-focus-ring-width) solid var(--alm-focus-ring-color);
	outline-offset: -2px;
}

.alm-qty__btn:disabled {
	opacity: 0.4;
	cursor:  not-allowed;
}

.alm-qty__input {
	width:          4rem;
	height:         100%;
	border:         none;
	border-inline:  var(--alm-border-standard);
	border-radius:  0;
	text-align:     center;
	font-size:      var(--alm-text-base);
	font-weight:    var(--alm-weight-medium);
	font-family:    var(--alm-font-latin); /* numerals always LTR */
	color:          var(--alm-color-text-primary);
	background:     var(--alm-color-white);
	-moz-appearance: textfield;
	padding:        0;
}

.alm-qty__input::-webkit-outer-spin-button,
.alm-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin:             0;
}

.alm-qty__input:focus {
	outline: none;
	background-color: var(--alm-color-navy-primary-10);
}

/* ─── Validation states ───────────────────────────────────────────── */

/* Error */
.alm-field--error .alm-input,
.alm-field--error .alm-select,
.alm-field--error .alm-textarea {
	border-color: var(--alm-color-error);
}

.alm-field--error .alm-input:focus,
.alm-field--error .alm-select:focus,
.alm-field--error .alm-textarea:focus {
	border-color: var(--alm-color-error);
	box-shadow:   0 0 0 var(--alm-focus-ring-width) rgba(197, 48, 48, 0.30);
}

/* Success */
.alm-field--success .alm-input,
.alm-field--success .alm-select,
.alm-field--success .alm-textarea {
	border-color: var(--alm-color-success);
}

.alm-field--success .alm-input:focus,
.alm-field--success .alm-select:focus,
.alm-field--success .alm-textarea:focus {
	border-color: var(--alm-color-success);
	box-shadow:   0 0 0 var(--alm-focus-ring-width) rgba(31, 122, 92, 0.25);
}

/* ─── Helper and error text ───────────────────────────────────────── */

.alm-field-helper {
	font-size:   var(--alm-text-sm);
	color:       var(--alm-color-text-muted);
	line-height: var(--alm-leading-snug);
}

.alm-field-error {
	display:      flex;
	align-items:  center;
	gap:          var(--alm-space-1);
	font-size:    var(--alm-text-sm);
	color:        var(--alm-color-error);
	font-weight:  var(--alm-weight-medium);
	line-height:  var(--alm-leading-snug);
}

/* Inline SVG icon before error message (optional) */
.alm-field-error::before {
	content:       "";
	display:       inline-block;
	width:         1rem;
	height:        1rem;
	flex-shrink:   0;
	background:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C53030' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") no-repeat center / contain;
}

.alm-field-success-msg {
	display:     flex;
	align-items: center;
	gap:         var(--alm-space-1);
	font-size:   var(--alm-text-sm);
	color:       var(--alm-color-success);
	font-weight: var(--alm-weight-medium);
}

/* ─── Input group (prefix/suffix) ─────────────────────────────────── */

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

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

.alm-input-group .alm-input:first-child {
	border-start-start-radius: var(--alm-input-radius);
	border-end-start-radius:   var(--alm-input-radius);
}

.alm-input-group .alm-input:last-child {
	border-start-end-radius: var(--alm-input-radius);
	border-end-end-radius:   var(--alm-input-radius);
}

.alm-input-addon {
	display:          flex;
	align-items:      center;
	padding-inline:   var(--alm-space-4);
	background-color: var(--alm-color-surface-subtle);
	border:           var(--alm-border-standard);
	color:            var(--alm-color-text-secondary);
	font-size:        var(--alm-text-sm);
	white-space:      nowrap;
}

.alm-input-addon:first-child {
	border-inline-end:         none;
	border-start-start-radius: var(--alm-input-radius);
	border-end-start-radius:   var(--alm-input-radius);
}

.alm-input-addon:last-child {
	border-inline-start:     none;
	border-start-end-radius: var(--alm-input-radius);
	border-end-end-radius:   var(--alm-input-radius);
}

/* ─── Form layout helpers ─────────────────────────────────────────── */

.alm-form-stack {
	display:        flex;
	flex-direction: column;
	gap:            var(--alm-space-5);
}

.alm-form-row {
	display:               grid;
	grid-template-columns: 1fr;
	gap:                   var(--alm-space-5);
}

@media (min-width: 640px) {
	.alm-form-row--2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.alm-form-row--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}


/* ═══════════════════════════════════════════════════════════════════
   BRAND FOUNDATION REFRESH — 2026
   ══════════════════════════════════════════════════════════════════ */

.alm-input,
.alm-select,
.alm-textarea {
	border-color: var(--alm-color-border-strong);
	background-color: rgba(255, 255, 255, 0.92);
}

.alm-input:hover:not(:disabled):not([readonly]),
.alm-select:hover:not(:disabled),
.alm-textarea:hover:not(:disabled):not([readonly]) {
	border-color: var(--alm-color-navy-secondary);
}

.alm-input:focus,
.alm-select:focus,
.alm-textarea:focus {
	border-color: var(--alm-color-sand-dark);
	box-shadow: 0 0 0 4px rgba(199, 154, 86, 0.18);
}

.alm-label {
	font-weight: var(--alm-weight-semibold);
}

.alm-field-help {
	color: var(--alm-color-text-muted);
}

.alm-checkbox,
.alm-radio {
	border-color: var(--alm-color-border-strong);
}

.alm-checkbox:checked,
.alm-radio:checked,
.alm-checkbox:indeterminate {
	background-color: var(--alm-color-navy-primary);
	border-color: var(--alm-color-navy-primary);
}

@media (max-width: 47.99rem) {
	.alm-input,
	.alm-select,
	.alm-textarea {
		font-size: 1rem;
	}
}