:root {
  /* Light theme variables */
  --color-input-text-light: var(--color-secondary-950);
  --color-input-text-dark: var(--color-secondary-50);

  /* Input colors - Light theme */
  --input-bg-light: var(--color-gray-50);
  --input-border-light: var(--color-gray-300);
  --input-text-light: var(--color-secondary-950);
  --input-placeholder-light: var(--color-gray-400);
  --input-focus-border-light: var(--color-primary-500);
  --input-disabled-bg-light: var(--color-gray-300);
  --input-disabled-text-light: var(--color-gray-500);

  /* Prefix/Icon colors - Light theme */
  --input-prefix-bg-light: var(--color-gray-200);
  --input-prefix-text-light: var(--color-secondary-950);

  /* Label colors - Light theme */
  --input-label-light: var(--color-secondary-950);
  --input-label-focus-light: var(--color-primary-500);
  --input-floating-label-light: var(--color-gray-500);

  /* File upload colors - Light theme */
  --file-button-bg-light: var(--color-primary-50);
  --file-button-bg-hover-light: var(--color-primary-100);
  --file-button-text-light: var(--color-primary-700);
  --valid-file-light: var(--color-primary-600);

  /* Select colors - Light theme */
  --select-arrow-light: var(--color-gray-500);
  --select-option-bg-light: var(--color-gray-50);

  /* Checkbox colors - Light theme */
  --checkbox-bg-light: var(--color-gray-50);
  --checkbox-border-light: var(--color-gray-300);
  --checkbox-checked-bg-light: var(--color-primary-500);
  --checkbox-checked-border-light: var(--color-primary-500);
  --checkbox-checked-icon-light: white;
  --checkbox-hover-border-light: var(--color-gray-400);
  --checkbox-focus-shadow-light: 0 0 0 3px
    rgba(var(--color-primary-500-rgb), 0.25);

  /* Dark theme variables */
  /* Input colors - Dark theme */
  --input-bg-dark: var(--color-gray-900);
  --input-border-dark: var(--color-gray-700);
  --input-text-dark: var(--color-secondary-50);
  --input-placeholder-dark: var(--color-gray-500);
  --input-focus-border-dark: var(--color-secondary-400);
  --input-disabled-bg-dark: var(--color-gray-800);
  --input-disabled-text-dark: var(--color-gray-600);

  /* Prefix/Icon colors - Dark theme */
  --input-prefix-bg-dark: var(--color-secondary-800);
  --input-prefix-text-dark: var(--color-secondary-50);

  /* Label colors - Dark theme */
  --input-label-dark: var(--color-gray-300);
  --input-label-focus-dark: var(--color-secondary-400);
  --input-floating-label-dark: var(--color-gray-400);

  /* File upload colors - Dark theme */
  --file-button-bg-dark: var(--color-secondary-800);
  --file-button-bg-hover-dark: var(--color-secondary-700);
  --file-button-text-dark: var(--color-secondary-50);
  --valid-file-dark: var(--color-primary-400);

  /* Select colors - Dark theme */
  --select-arrow-dark: var(--color-gray-400);
  --select-option-bg-dark: var(--color-gray-900);

  /* Checkbox colors - Dark theme */
  --checkbox-bg-dark: var(--color-gray-900);
  --checkbox-border-dark: var(--color-gray-700);
  --checkbox-checked-bg-dark: var(--color-secondary-400);
  --checkbox-checked-border-dark: var(--color-secondary-400);
  --checkbox-checked-icon-dark: var(--color-gray-900);
  --checkbox-hover-border-dark: var(--color-gray-600);
  --checkbox-focus-shadow-dark: 0 0 0 3px
    rgba(var(--color-secondary-400-rgb), 0.25);

  /* RGB values for opacity support */
  --color-primary-500-rgb: 59, 130, 246; /* Example value - replace with your actual RGB */
  --color-secondary-400-rgb: 167, 139, 250; /* Example value - replace with your actual RGB */

  /* Shadow variables */
  --shadow-small-focus: 0 0 0 3px rgba(var(--color-primary-500-rgb), 0.25);
  --shadow-small-focus-dark: 0 0 0 3px
    rgba(var(--color-secondary-400-rgb), 0.25);

  /* Transition variable */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Input validation - Light theme */
  --input-invalid-border-light: var(--color-red-500);
  --input-error-text-light: var(--color-red-600);
  --input-error-label-light: var(--color-red-600);
  --input-invalid-shadow-light: 0 0 0 3px rgba(var(--color-red-500-rgb), 0.25);

  /* Input validation - Dark theme */
  --input-invalid-border-dark: var(--color-red-600);
  --input-error-text-dark: var(--color-red-400);
  --input-error-label-dark: var(--color-red-400);
  --input-invalid-shadow-dark: 0 0 0 3px rgba(var(--color-red-600-rgb), 0.25);
}

/* ============ General Input Styles ============ */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem; /* 6px */
  position: relative;
}

.input-group.dark,
html.dark .input-group:not(.light) {
  color: var(--color-input-text-dark);
}

.input-group label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--input-label-light);
}

.input-group.dark label,
html.dark .input-group:not(.light) label {
  color: var(--input-label-dark);
}

.input-group .input-wrapper {
  display: flex;
  align-items: center;
  border: 0.125rem solid var(--color-gray-300); /* 2px */
  border-radius: 0.5rem; /* 8px */
  overflow: hidden;
  background: var(--color-gray-50);
  transition: var(--transition-smooth);
  width: 100%;
}

.input-group .input-wrapper input[type="number"] {
  appearance: textfield;
}

.input-group .input-wrapper input[type="number"]::-webkit-outer-spin-button,
.input-group .input-wrapper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-group.dark .input-wrapper,
html.dark .input-group:not(.light) .input-wrapper {
  background: var(--color-gray-900);
  border-color: var(--color-gray-700);
}

.input-group .input-wrapper:focus-within {
  border-color: var(--color-primary-500);
  box-shadow: var(--shadow-small-focus);
}

.input-group.dark .input-wrapper:focus-within,
html.dark .input-group:not(.light) .input-wrapper:focus-within {
  border-color: var(--color-secondary-400);
  box-shadow: var(--shadow-small-focus);
}

.input-group .input-wrapper input,
.input-group .input-wrapper textarea,
.input-group .input-wrapper input[type="date"] {
  flex: 1;
  border: none;
  padding: 0.75rem 1rem; /* 12px 16px */
  font-size: 1rem;
  background: transparent;
  color: var(--color-input-text-light);
}

.input-group.dark .input-wrapper input,
.input-group.dark .input-wrapper textarea,
.input-group.dark .input-wrapper input[type="date"],
html.dark .input-group:not(.light) .input-wrapper input,
html.dark .input-group:not(.light) .input-wrapper textarea,
html.dark .input-group:not(.light) .input-wrapper input[type="date"] {
  color: var(--color-input-text-dark);
}

.input-group .input-wrapper input:focus,
.input-group .input-wrapper textarea:focus,
.input-group .input-wrapper input[type="date"]:focus {
  outline: none;
}

.input-group .input-wrapper input::placeholder,
.input-group .input-wrapper textarea::placeholder,
.input-group .input-wrapper input[type="date"]::placeholder {
  color: var(--color-gray-400);
  transition: var(--transition-smooth);
}

.input-group.dark .input-wrapper input::placeholder,
.input-group.dark .input-wrapper textarea::placeholder,
.input-group.dark .input-wrapper input[type="date"]::placeholder,
html.dark .input-group:not(.light) .input-wrapper input::placeholder,
html.dark .input-group:not(.light) .input-wrapper textarea::placeholder,
html.dark
  .input-group:not(.light)
  .input-wrapper
  input[type="date"]::placeholder {
  color: var(--color-gray-500);
}

/* ============ Autocomplete/Autofill Input Styles ============ */
/* Chrome, Safari, Edge autofill background override */
.input-group.dark .input-wrapper input:-webkit-autofill,
.input-group.dark .input-wrapper input:-webkit-autofill:hover,
.input-group.dark .input-wrapper input:-webkit-autofill:focus,
.input-group.dark .input-wrapper input:-webkit-autofill:active,
html.dark .input-group:not(.light) .input-wrapper input:-webkit-autofill,
html.dark .input-group:not(.light) .input-wrapper input:-webkit-autofill:hover,
html.dark .input-group:not(.light) .input-wrapper input:-webkit-autofill:focus,
html.dark
  .input-group:not(.light)
  .input-wrapper
  input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--input-text-dark) !important;
  caret-color: var(--input-text-dark);
  transition: background-color 5000s ease-in-out 0s;
}

/* Firefox autofill background override */
.input-group.dark .input-wrapper input:autofill,
html.dark .input-group:not(.light) .input-wrapper input:autofill {
  background-color: var(--input-bg-dark) !important;
  color: var(--input-text-dark) !important;
}

/* For datalist suggestions and autocomplete dropdowns - browser compatibility varies */
input:-webkit-autofill option,
datalist option {
  background-color: var(--select-option-bg-light);
  color: var(--color-input-text-light);
}

html.dark input:-webkit-autofill option,
html.dark datalist option,
.input-group.dark input:-webkit-autofill option,
.input-group.dark datalist option {
  background-color: var(--select-option-bg-dark) !important;
  color: var(--color-input-text-dark) !important;
}

/* Enhance dropdown appearance - these can help with some browsers but not all */
@-moz-document url-prefix() {
  html.dark select option,
  html.dark input:-moz-autofill,
  html.dark input:-moz-autofill-preview {
    background-color: var(--input-bg-dark) !important;
    color: var(--input-text-dark) !important;
  }
}

/* ============ Prefix Input ============ */
.input-group.prefix .input-wrapper {
  display: flex;
}

.input-group.prefix .input-prefix {
  background: var(--color-gray-200);
  padding: 0.75rem 1rem; /* 12px 16px */
  color: var(--color-input-text-light);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3.125rem; /* 50px */
}

/* New styles for when input-prefix is applied directly to an <i> element */
.input-group.prefix .input-wrapper i.input-prefix {
  background: var(--color-gray-200);
  padding: 0.75rem 1rem; /* 12px 16px */
  color: var(--color-input-text-light);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch; /* Ensure it takes full height */
  margin: 0; /* Reset any potential margins */
}

.input-group.prefix.dark .input-prefix,
html.dark .input-group:not(.light).prefix .input-prefix,
.input-group.prefix.dark i.input-prefix,
html.dark .input-group:not(.light).prefix i.input-prefix {
  background: var(--color-secondary-800);
  color: var(--color-secondary-50);
}

/* ============ Textarea ============ */
.input-group .input-wrapper textarea {
  resize: vertical;
  min-height: 3rem; /* 120px */
}

/* ============ File Upload ============ */
.input-group.file-upload {
  align-items: center;
  gap: 0.75rem; /* 12px */
  cursor: pointer;
}

.input-group.file-upload * {
  cursor: pointer;
}

.input-group.file-upload .input-wrapper {
  gap: 0.75rem; /* 12px */
}

.input-group.file-upload input[type="file"] {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.input-group.file-upload .file-name {
  flex: 1;
  padding: 0.75rem; /* 12px */
  border-radius: 0.375rem; /* 6px */
  font-size: 1rem;
  text-align: start;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.input-group.file-upload .file-name.valid-file {
  color: var(--color-primary-600);
  font-weight: bold;
}

.input-group.dark.file-upload .file-name,
html.dark .input-group:not(.light).file-upload .file-name {
  color: var(--color-input-text-dark);
}

.input-group.file-upload .file-prefix {
  display: flex;
  align-items: center;
  gap: 0.625rem; /* 10px */
  padding: 0.75rem 1rem; /* 12px 16px */
  background: var(--color-primary-50);
  font-weight: bold;
  border-radius: 0.5rem; /* 8px */
  cursor: pointer;
  transition: var(--transition-smooth);
  font-size: 1rem;
  white-space: nowrap;
}

.input-group.dark.file-upload .file-prefix,
html.dark .input-group:not(.light).file-upload .file-prefix {
  background: var(--color-secondary-800);
  color: var(--color-secondary-50);
}

.input-group.file-upload .file-prefix:hover {
  background: var(--color-primary-100);
}

.input-group.dark.file-upload .file-prefix:hover,
html.dark .input-group:not(.light).file-upload .file-prefix:hover {
  background: var(--color-secondary-700);
}

.input-group.file-upload .file-prefix svg {
  width: 1.25rem; /* 20px */
  height: 1.25rem; /* 20px */
  fill: currentColor;
}
/* ============ Floating Label ============ */
.input-group.floating {
  position: relative;
}

.input-group.floating .input-wrapper:has(input:focus),
.input-group.floating .input-wrapper:has(textarea:focus),
.input-group.floating .input-wrapper:has(input:not(:placeholder-shown)),
.input-group.floating .input-wrapper:has(textarea:not(:placeholder-shown)) {
  border: none;
  border-bottom: 0.125rem solid var(--input-border-light); /* Changed from var(--color-gray-300) */
}

.input-group.dark.floating:has(.input-wrapper input:focus),
.input-group.dark.floating:has(.input-wrapper textarea:focus),
.input-group.dark.floating:has(.input-wrapper input:not(:placeholder-shown)),
.input-group.dark.floating
  :has(.input-wrapper textarea:not(:placeholder-shown)),
html.dark .input-group:not(.light).floating:has(.input-wrapper input:focus),
html.dark .input-group:not(.light).floating:has(.input-wrapper textarea:focus),
html.dark
  .input-group:not(.light).floating:has(
    .input-wrapper input:not(:placeholder-shown)
  ),
html.dark
  .input-group:not(.light).floating:has(
    .input-wrapper textarea:not(:placeholder-shown)
  ) {
  border-bottom: 0.125rem solid var(--input-border-dark); /* Changed from var (--color-gray-700) */
}

.input-group.floating label {
  position: absolute;
  top: 50%;
  right: 1rem; /* 16px */
  transform: trangrayY(-50%);
  transition: var(--transition-smooth);
  padding: 0 0.3125rem; /* 0 5px */
  font-size: 1rem;
  color: var(
    --input-floating-label-light
  ); /* Changed from var(--color-gray-500) */
  pointer-events: none;
  background: transparent;
}

.input-group.dark.floating label,
html.dark .input-group:not(.light).floating label {
  color: var(
    --input-floating-label-dark
  ); /* Changed from var(--color-gray-400) */
}

.input-group.floating .input-wrapper input,
.input-group.floating .input-wrapper textarea {
  padding-top: 1.25rem; /* 20px */
}

.input-group.floating .input-wrapper input:focus + label,
.input-group.floating .input-wrapper textarea:focus + label,
.input-group.floating .input-wrapper input:not(:placeholder-shown) + label,
.input-group.floating .input-wrapper textarea:not(:placeholder-shown) + label {
  top: 0.5rem; /* 8px */
  right: 0.75rem; /* 12px */
  font-size: 0.75rem;
  color: var(
    --input-label-focus-light
  ); /* Changed from var(--color-primary-500) */
  padding: 0 0.25rem; /* 0 4px */
}

.input-group.dark.floating .input-wrapper input:focus + label,
.input-group.dark.floating .input-wrapper textarea:focus + label,
.input-group.dark.floating .input-wrapper input:not(:placeholder-shown) + label,
.input-group.dark.floating
  .input-wrapper
  textarea:not(:placeholder-shown)
  + label,
html.dark .input-group:not(.light).floating .input-wrapper input:focus + label,
html.dark
  .input-group:not(.light).floating
  .input-wrapper
  textarea:focus
  + label,
html.dark
  .input-group:not(.light).floating
  .input-wrapper
  input:not(:placeholder-shown)
  + label,
html.dark
  .input-group:not(.light).floating
  .input-wrapper
  textarea:not(:placeholder-shown)
  + label {
  color: var(
    --input-label-focus-dark
  ); /* Changed from var(--color-secondary-400) */
}

/* ============ Disabled & Readonly Inputs ============ */

.input-group input:read-only,
.input-group textarea:read-only,
.input-group input:disabled,
.input-group textarea:disabled {
  cursor: not-allowed;
}

.input-group:not(.file-upload)
  .input-wrapper:has(
    input:disabled,
    textarea:disabled,
    input[type="date"]:disabled
  ),
.input-group:not(.file-upload)
  .input-wrapper:has(
    input:read-only,
    textarea:read-only,
    input[type="date"]:read-only
  ) {
  background: var(
    --input-disabled-bg-light
  ); /* Changed from var(--color-gray-200) */
  border-color: var(
    --input-border-light
  ); /* Changed from var(--color-gray-300) */
  color: var(
    --input-disabled-text-light
  ); /* Fixed typo and changed from var (--color-gray-500) */
  cursor: not-allowed;
  box-shadow: none;
}

.input-group.dark:not(.file-upload)
  .input-wrapper:has(
    input:disabled,
    textarea:disabled,
    input[type="date"]:disabled
  ),
.input-group.dark:not(.file-upload)
  .input-wrapper:has(
    input:read-only,
    textarea:read-only,
    input[type="date"]:read-only
  ),
html.dark
  .input-group:not(.light)
  .input-wrapper:has(
    input:disabled,
    textarea:disabled,
    input[type="date"]:disabled
  ),
html.dark
  .input-group:not(.light)
  .input-wrapper:has(
    input:read-only,
    textarea:read-only,
    input[type="date"]:read-only
  ) {
  background: var(
    --input-disabled-bg-dark
  ); /* Changed from var(--color-gray-800) */
  border-color: var(
    --input-border-dark
  ); /* Changed from var(--color-gray-700) */
  color: var(
    --input-disabled-text-dark
  ); /* Changed from var(--color-gray-600) */
  box-shadow: none;
}

.input-group .input-wrapper:has(input:disabled, input:read-only):focus-within {
  box-shadow: none;
  border-color: var(
    --input-border-light
  ); /* Changed from var(--color-gray-300) */
}

.input-group.dark
  .input-wrapper:has(input:disabled, input:read-only):focus-within,
html.dark
  .input-group:not(.light)
  .input-wrapper:has(input:disabled, input:read-only):focus-within {
  box-shadow: none;
  border-color: var(
    --input-border-dark
  ); /* Changed from var(--color-gray-700) */
}

/* ============ Select Input Styles ============ */
.input-group .input-wrapper:has(select) {
  position: relative;
}

.input-group .input-wrapper select {
  flex: 1;
  border: none;
  padding: 0.75rem 1rem; /* 12px 16px */
  font-size: 1rem;
  background: transparent;
  color: var(--color-input-text-light);
  width: 100%;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.5rem; /* Space for the arrow */
  height: 3rem; /* Fixed height to align content */
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.input-group.dark .input-wrapper select,
html.dark .input-group:not(.light) .input-wrapper select {
  color: var(--color-input-text-dark);
}

.input-group .input-wrapper select:focus {
  outline: none;
}

.input-group .input-wrapper select option {
  background-color: var(--color-gray-50);
  color: var(--color-input-text-light);
}

.input-group.dark .input-wrapper select option,
html.dark .input-group:not(.light) .input-wrapper select option {
  background-color: var(--color-gray-900);
  color: var(--color-input-text-dark);
}

/* Select arrow using ::after pseudo-element */
.input-group .input-wrapper:has(select)::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 0.4rem solid transparent;
  border-right: 0.4rem solid transparent;
  border-top: 0.5rem solid var(--color-gray-500);
  pointer-events: none;
  transition: transform 0.2s ease;
}

/* Arrow rotation ONLY on focus (not on selected state) */
.input-group .input-wrapper:has(select:focus)::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Make sure it rotates back when not focused */
.input-group .input-wrapper:has(select:not(:focus))::after {
  transform: translateY(-50%) rotate(0deg);
}

/* RTL support for select arrow */
[dir="rtl"] .input-group .input-wrapper:has(select)::after {
  right: auto;
  left: 1rem;
}

/* No arrow option for select */
.input-group.no-arrow .input-wrapper:has(select)::after,
.input-group .input-wrapper.no-arrow:has(select)::after {
  display: none;
}

.input-group.no-arrow .input-wrapper select,
.input-group .input-wrapper.no-arrow select {
  padding-right: 1rem; /* Reset padding when no arrow is shown */
}

/* RTL support for select padding */
[dir="rtl"] .input-group .input-wrapper select {
  padding-right: 1rem;
  padding-left: 2.5rem; /* Space for the arrow in RTL */
}

/* Select in Floating Label - adjusted for better alignment */
.input-group.floating .input-wrapper select {
  padding-top: 1.5rem; /* Increased to improve text visibility */
  padding-bottom: 0.5rem; /* Balanced padding */
  height: 3.5rem; /* Increased for better label spacing */
}

/* Select Responsive Styles */
@media (max-width: 600px) {
  .input-group .input-wrapper select {
    padding: 0.625rem 0.875rem; /* 10px 14px */
    padding-right: 2.5rem; /* Space for the arrow */
    font-size: 0.9rem;
    height: 2.75rem; /* Adjusted for mobile */
  }

  .input-group.floating .input-wrapper select {
    padding-top: 1.25rem; /* 20px */
    padding-bottom: 0.425rem;
    height: 3.25rem; /* Adjusted for mobile */
  }

  [dir="rtl"] .input-group .input-wrapper select {
    padding-right: 0.875rem;
    padding-left: 2.5rem;
  }
}

/* Responsive Styles */
@media (max-width: 600px) {
  .input-group label {
    font-size: 0.8rem;
  }

  .input-group .input-wrapper input,
  .input-group .input-wrapper textarea,
  .input-group .input-wrapper input[type="date"] {
    padding: 0.625rem 0.875rem; /* 10px 14px */
    font-size: 0.9rem;
  }

  .input-group.prefix .input-prefix {
    padding: 0.625rem 0.875rem; /* 10px 14px */
    font-size: 0.9rem;
  }

  .input-group.file-upload .file-name {
    padding: 0.625rem; /* 10px */
    font-size: 0.9rem;
  }

  .input-group.file-upload .file-prefix {
    padding: 0.5rem 0.75rem; /* 8px 12px */
    font-size: 0.8rem;
  }
  .input-group.file-upload .file-prefix {
    padding: 0.5rem 0.75rem; /* 8px 12px */
    font-size: 0.8rem;
  }

  .input-group.floating label {
    font-size: 0.9rem;
    font-weight: 700;
  }

  .input-group.floating .input-wrapper input,
  .input-group.floating .input-wrapper textarea {
    padding-top: 1.125rem; /* 18px */
  }

  .input-group.floating .input-wrapper input:focus + label,
  .input-group.floating .input-wrapper textarea:focus + label,
  .input-group.floating .input-wrapper input:not(:placeholder-shown) + label,
  .input-group.floating
    .input-wrapper
    textarea:not(:placeholder-shown)
    + label {
    font-size: 0.7rem;
  }
}

/* ============ Input Validation Styles ============ */
.input-group .input-wrapper.invalid,
.input-group .input-wrapper:has(input:invalid:not(:placeholder-shown)),
.input-group .input-wrapper:has(textarea:invalid:not(:placeholder-shown)),
.input-group .input-wrapper:has(select:invalid:not(:placeholder-shown)) {
  border-color: var(--input-invalid-border-light);
}

.input-group.dark .input-wrapper.invalid,
.input-group.dark .input-wrapper:has(input:invalid:not(:placeholder-shown)),
.input-group.dark .input-wrapper:has(textarea:invalid:not(:placeholder-shown)),
.input-group.dark .input-wrapper:has(select:invalid:not(:placeholder-shown)),
html.dark .input-group:not(.light) .input-wrapper.invalid,
html.dark
  .input-group:not(.light)
  .input-wrapper:has(input:invalid:not(:placeholder-shown)),
html.dark
  .input-group:not(.light)
  .input-wrapper:has(textarea:invalid:not(:placeholder-shown)),
html.dark
  .input-group:not(.light)
  .input-wrapper:has(select:invalid:not(:placeholder-shown)) {
  border-color: var(--input-invalid-border-dark);
}

/* Focus state for invalid inputs */
.input-group .input-wrapper.invalid:focus-within,
.input-group
  .input-wrapper:has(input:invalid:not(:placeholder-shown)):focus-within,
.input-group
  .input-wrapper:has(textarea:invalid:not(:placeholder-shown)):focus-within,
.input-group
  .input-wrapper:has(select:invalid:not(:placeholder-shown)):focus-within {
  box-shadow: var(--input-invalid-shadow-light);
}

.input-group.dark .input-wrapper.invalid:focus-within,
.input-group.dark
  .input-wrapper:has(input:invalid:not(:placeholder-shown)):focus-within,
.input-group.dark
  .input-wrapper:has(textarea:invalid:not(:placeholder-shown)):focus-within,
.input-group.dark
  .input-wrapper:has(select:invalid:not(:placeholder-shown)):focus-within,
html.dark .input-group:not(.light) .input-wrapper.invalid:focus-within,
html.dark
  .input-group:not(.light)
  .input-wrapper:has(input:invalid:not(:placeholder-shown)):focus-within,
html.dark
  .input-group:not(.light)
  .input-wrapper:has(textarea:invalid:not(:placeholder-shown)):focus-within,
html.dark
  .input-group:not(.light)
  .input-wrapper:has(select:invalid:not(:placeholder-shown)):focus-within {
  box-shadow: var(--input-invalid-shadow-dark);
}

/* Error message styling */
.input-group .error-message {
  color: var(--input-error-text-light);
  font-size: 0.85rem;
  margin-top: 0.25rem;
  display: none;
}

.input-group.dark .error-message,
html.dark .input-group:not(.light) .error-message {
  color: var(--input-error-text-dark);
}

/* Show error message when input is invalid */
.input-group:has(.input-wrapper.invalid) .error-message,
.input-group:has(.input-wrapper input:invalid:not(:placeholder-shown))
  .error-message,
.input-group:has(.input-wrapper textarea:invalid:not(:placeholder-shown))
  .error-message,
.input-group:has(.input-wrapper select:invalid:not(:placeholder-shown))
  .error-message {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

/* Label error state styling */
.input-group:has(.input-wrapper.invalid) label,
.input-group:has(.input-wrapper input:invalid:not(:placeholder-shown)) label,
.input-group:has(.input-wrapper textarea:invalid:not(:placeholder-shown)) label,
.input-group:has(.input-wrapper select:invalid:not(:placeholder-shown)) label {
  color: var(--input-error-label-light);
}

.input-group.dark:has(.input-wrapper.invalid) label,
.input-group.dark:has(.input-wrapper input:invalid:not(:placeholder-shown))
  label,
.input-group.dark:has(.input-wrapper textarea:invalid:not(:placeholder-shown))
  label,
.input-group.dark:has(.input-wrapper select:invalid:not(:placeholder-shown))
  label,
html.dark .input-group:not(.light):has(.input-wrapper.invalid) label,
html.dark
  .input-group:not(.light):has(
    .input-wrapper input:invalid:not(:placeholder-shown)
  )
  label,
html.dark
  .input-group:not(.light):has(
    .input-wrapper textarea:invalid:not(:placeholder-shown)
  )
  label,
html.dark
  .input-group:not(.light):has(
    .input-wrapper select:invalid:not(:placeholder-shown)
  )
  label {
  color: var(--input-error-label-dark);
}

/* Group label error state styling */
.group-label:has(+ .input-group .input-wrapper.invalid),
.group-label:has(
    + .input-group .input-wrapper input:invalid:not(:placeholder-shown)
  ),
.group-label:has(
    + .input-group .input-wrapper textarea:invalid:not(:placeholder-shown)
  ),
.group-label:has(
    + .input-group .input-wrapper select:invalid:not(:placeholder-shown)
  ) {
  color: var(--input-error-label-light);
}

.group-label.dark:has(+ .input-group .input-wrapper.invalid),
.group-label.dark:has(
    + .input-group .input-wrapper input:invalid:not(:placeholder-shown)
  ),
.group-label.dark:has(
    + .input-group .input-wrapper textarea:invalid:not(:placeholder-shown)
  ),
.group-label.dark:has(
    + .input-group .input-wrapper select:invalid:not(:placeholder-shown)
  ),
html.dark .group-label:has(+ .input-group .input-wrapper.invalid),
html.dark
  .group-label:has(
    + .input-group .input-wrapper input:invalid:not(:placeholder-shown)
  ),
html.dark
  .group-label:has(
    + .input-group .input-wrapper textarea:invalid:not(:placeholder-shown)
  ),
html.dark
  .group-label:has(
    + .input-group .input-wrapper select:invalid:not(:placeholder-shown)
  ) {
  color: var(--input-error-label-dark);
}

/* Floating label error state adjustments */
.input-group.floating .input-wrapper.invalid input:focus + label,
.input-group.floating .input-wrapper.invalid textarea:focus + label,
.input-group.floating
  .input-wrapper:has(input:invalid:not(:placeholder-shown))
  input:focus
  + label,
.input-group.floating
  .input-wrapper:has(textarea:invalid:not(:placeholder-shown))
  textarea:focus
  + label,
.input-group.floating
  .input-wrapper.invalid
  input:not(:placeholder-shown)
  + label,
.input-group.floating
  .input-wrapper.invalid
  textarea:not(:placeholder-shown)
  + label,
.input-group.floating
  .input-wrapper:has(input:invalid:not(:placeholder-shown))
  input:not(:placeholder-shown)
  + label,
.input-group.floating
  .input-wrapper:has(textarea:invalid:not(:placeholder-shown))
  textarea:not(:placeholder-shown)
  + label {
  color: var(--input-error-label-light);
}

.input-group.dark.floating .input-wrapper.invalid input:focus + label,
.input-group.dark.floating .input-wrapper.invalid textarea:focus + label,
.input-group.dark.floating
  .input-wrapper:has(input:invalid:not(:placeholder-shown))
  input:focus
  + label,
.input-group.dark.floating
  .input-wrapper:has(textarea:invalid:not(:placeholder-shown))
  textarea:focus
  + label,
.input-group.dark.floating
  .input-wrapper.invalid
  input:not(:placeholder-shown)
  + label,
.input-group.dark.floating
  .input-wrapper.invalid
  textarea:not(:placeholder-shown)
  + label,
.input-group.dark.floating
  .input-wrapper:has(input:invalid:not(:placeholder-shown))
  input:not(:placeholder-shown)
  + label,
.input-group.dark.floating
  .input-wrapper:has(textarea:invalid:not(:placeholder-shown))
  textarea:not(:placeholder-shown)
  + label,
html.dark
  .input-group:not(.light).floating
  .input-wrapper.invalid
  input:focus
  + label,
html.dark
  .input-group:not(.light).floating
  .input-wrapper.invalid
  textarea:focus
  + label,
html.dark
  .input-group:not(.light).floating
  .input-wrapper:has(input:invalid:not(:placeholder-shown))
  input:focus
  + label,
html.dark
  .input-group:not(.light).floating
  .input-wrapper:has(textarea:invalid:not(:placeholder-shown))
  textarea:focus
  + label,
html.dark
  .input-group:not(.light).floating
  .input-wrapper.invalid
  input:not(:placeholder-shown)
  + label,
html.dark
  .input-group:not(.light).floating
  .input-wrapper.invalid
  textarea:not(:placeholder-shown)
  + label,
html.dark
  .input-group:not(.light).floating
  .input-wrapper:has(input:invalid:not(:placeholder-shown))
  input:not(:placeholder-shown)
  + label,
html.dark
  .input-group:not(.light).floating
  .input-wrapper:has(textarea:invalid:not(:placeholder-shown))
  textarea:not(:placeholder-shown)
  + label {
  color: var(--input-error-label-dark);
}

/* Input prefix error state adjustments */
.input-group.prefix .input-wrapper.invalid .input-prefix,
.input-group.prefix
  .input-wrapper:has(input:invalid:not(:placeholder-shown))
  .input-prefix {
  background-color: var(--color-red-100);
  color: var(--color-red-700);
}

.input-group.dark.prefix .input-wrapper.invalid .input-prefix,
.input-group.dark.prefix
  .input-wrapper:has(input:invalid:not(:placeholder-shown))
  .input-prefix,
html.dark .input-group:not(.light).prefix .input-wrapper.invalid .input-prefix,
html.dark
  .input-group:not(.light).prefix
  .input-wrapper:has(input:invalid:not(:placeholder-shown))
  .input-prefix {
  background-color: var(--color-red-900);
  color: var(--color-red-300);
}

/* ============ Checkbox Input Styles ============ */
.input-group.checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}

.input-group.checkbox label {
  cursor: pointer;
  margin-bottom: 0;
  flex: 1;
}

.input-group.checkbox .checkbox-wrapper {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* Automatically place checkbox on the correct side based on text direction */
html:not([dir="rtl"]) .input-group.checkbox {
  flex-direction: row;
}

html:not([dir="rtl"]) .input-group.checkbox .checkbox-wrapper {
  margin-right: 0.5rem;
}

html[dir="rtl"] .input-group.checkbox {
  flex-direction: row-reverse;
}

html[dir="rtl"] .input-group.checkbox .checkbox-wrapper {
  margin-left: 0.5rem;
}

/* Override classes for explicit positioning regardless of RTL/LTR */
.input-group.checkbox.checkbox-start {
  flex-direction: row;
}

.input-group.checkbox.checkbox-end {
  flex-direction: row-reverse;
}

.input-group.checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: 0.125rem solid var(--checkbox-border-light);
  border-radius: 0.25rem;
  background-color: var(--checkbox-bg-light);
  transition: var(--transition-smooth);
  margin: 0;
  padding: 0;
}

.input-group.dark.checkbox input[type="checkbox"],
html.dark .input-group:not(.light).checkbox input[type="checkbox"] {
  border-color: var(--checkbox-border-dark);
  background-color: var(--checkbox-bg-dark);
}

.input-group.checkbox input[type="checkbox"]:hover {
  border-color: var(--checkbox-hover-border-light);
}

.input-group.dark.checkbox input[type="checkbox"]:hover,
html.dark .input-group:not(.light).checkbox input[type="checkbox"]:hover {
  border-color: var(--checkbox-hover-border-dark);
}

.input-group.checkbox input[type="checkbox"]:focus {
  outline: none;
  box-shadow: var(--checkbox-focus-shadow-light);
}

.input-group.dark.checkbox input[type="checkbox"]:focus,
html.dark .input-group:not(.light).checkbox input[type="checkbox"]:focus {
  box-shadow: var(--checkbox-focus-shadow-dark);
}

/* Checkmark styles */
.input-group.checkbox input[type="checkbox"]:checked {
  background-color: var(--checkbox-checked-bg-light);
  border-color: var(--checkbox-checked-border-light);
}

.input-group.dark.checkbox input[type="checkbox"]:checked,
html.dark .input-group:not(.light).checkbox input[type="checkbox"]:checked {
  background-color: var(--checkbox-checked-bg-dark);
  border-color: var(--checkbox-checked-border-dark);
}

/* Custom checkmark icon */
.input-group.checkbox input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 40%; /* Slightly higher for better visual alignment */
  width: 30%;
  height: 60%;
  border: solid var(--checkbox-checked-icon-light);
  border-width: 0 0.125rem 0.125rem 0;
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;
}

.input-group.dark.checkbox input[type="checkbox"]:checked::after,
html.dark
  .input-group:not(.light).checkbox
  input[type="checkbox"]:checked::after {
  border-color: var(--checkbox-checked-icon-dark);
}

/* RTL Support */
[dir="rtl"] .input-group.checkbox label {
  order: 1;
}

[dir="rtl"] .input-group.checkbox .checkbox-wrapper {
  order: 2;
}

/* Disabled state */
.input-group.checkbox input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background-color: var(--input-disabled-bg-light);
  border-color: var(--input-border-light);
}

.input-group.dark.checkbox input[type="checkbox"]:disabled,
html.dark .input-group:not(.light).checkbox input[type="checkbox"]:disabled {
  background-color: var(--input-disabled-bg-dark);
  border-color: var(--input-border-dark);
}

/* Add styles for better visibility of the switch ball when disabled */
.input-group.checkbox.switch input[type="checkbox"]:disabled::before {
  background-color: var(
    --color-gray-500
  ); /* Darker ball color for better contrast */
  opacity: 0.9; /* Less transparency for better visibility */
}

.input-group.dark.checkbox.switch input[type="checkbox"]:disabled::before,
html.dark
  .input-group:not(.light).checkbox.switch
  input[type="checkbox"]:disabled::before {
  background-color: var(
    --color-gray-400
  ); /* Lighter ball color for dark mode */
  opacity: 0.9; /* Less transparency for better visibility */
}

.input-group.checkbox:has(input[type="checkbox"]:disabled) label {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Alternative sizes */
.input-group.checkbox.sm .checkbox-wrapper {
  width: 1rem;
  height: 1rem;
}

.input-group.checkbox.lg .checkbox-wrapper {
  width: 1.5rem;
  height: 1.5rem;
}

/* Switch Style */
.input-group.checkbox.switch .checkbox-wrapper {
  width: 2.5rem;
  height: 1.25rem;
}

.input-group.checkbox.switch.sm .checkbox-wrapper {
  width: 2rem;
  height: 1rem;
}

.input-group.checkbox.switch.lg .checkbox-wrapper {
  width: 3rem;
  height: 1.5rem;
}

.input-group.checkbox.switch input[type="checkbox"] {
  border-radius: 1rem;
}

.input-group.checkbox.switch input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: calc(50% - 0.25rem);
  height: calc(100% - 0.25rem);
  border-radius: 50%;
  background-color: var(--checkbox-border-light);
  transition: var(--transition-smooth);
}

/* RTL Support for switch ball position */
html[dir="rtl"] .input-group.checkbox.switch input[type="checkbox"]::before {
  left: auto;
  right: 0.125rem;
}

.input-group.dark.checkbox.switch input[type="checkbox"]::before,
html.dark
  .input-group:not(.light).checkbox.switch
  input[type="checkbox"]::before {
  background-color: var(--checkbox-border-dark);
}

.input-group.checkbox.switch input[type="checkbox"]:checked::before {
  left: calc(50% + 0.125rem);
  background-color: var(--checkbox-checked-icon-light);
}

/* RTL Support for checked switch ball position */
html[dir="rtl"]
  .input-group.checkbox.switch
  input[type="checkbox"]:checked::before {
  left: auto;
  right: calc(50% + 0.125rem);
}

.input-group.dark.checkbox.switch input[type="checkbox"]:checked::before,
html.dark
  .input-group:not(.light).checkbox.switch
  input[type="checkbox"]:checked::before {
  background-color: var(--checkbox-checked-icon-dark);
}

.input-group.checkbox.switch input[type="checkbox"]:checked::after {
  display: none;
}

/* Responsive Styles */
@media (max-width: 600px) {
  .input-group.checkbox {
    gap: 0.5rem;
  }

  .input-group.checkbox .checkbox-wrapper {
    width: 1.125rem;
    height: 1.125rem;
  }

  .input-group.checkbox.sm .checkbox-wrapper {
    width: 0.875rem;
    height: 0.875rem;
  }

  .input-group.checkbox.lg .checkbox-wrapper {
    width: 1.375rem;
    height: 1.375rem;
  }

  .input-group.checkbox.switch .checkbox-wrapper {
    width: 2.25rem;
    height: 1.125rem;
  }

  .input-group.checkbox.switch.sm .checkbox-wrapper {
    width: 1.75rem;
    height: 0.8c75rem;
  }

  .input-group.checkbox.switch.lg .checkbox-wrapper {
    width: 2.75rem;
    height: 1.375rem;
  }
}

/* ============ Radio Input Styles ============ */
.input-group.radio {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}

.input-group.radio label {
  cursor: pointer;
  margin-bottom: 0;
  flex: 1;
}

.input-group.radio .radio-wrapper {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* Automatically place radio on the correct side based on text direction */
html:not([dir="rtl"]) .input-group.radio {
  flex-direction: row;
}

html:not([dir="rtl"]) .input-group.radio .radio-wrapper {
  margin-right: 0.5rem;
}

html[dir="rtl"] .input-group.radio {
  flex-direction: row-reverse;
}

html[dir="rtl"] .input-group.radio .radio-wrapper {
  margin-left: 0.5rem;
}

/* Override classes for explicit positioning regardless of RTL/LTR */
.input-group.radio.radio-start {
  flex-direction: row;
}

.input-group.radio.radio-end {
  flex-direction: row-reverse;
}

.input-group.radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: 0.125rem solid var(--checkbox-border-light);
  border-radius: 50%;
  background-color: var(--checkbox-bg-light);
  transition: var(--transition-smooth);
  margin: 0;
  padding: 0;
}

.input-group.dark.radio input[type="radio"],
html.dark .input-group:not(.light).radio input[type="radio"] {
  border-color: var(--checkbox-border-dark);
  background-color: var(--checkbox-bg-dark);
}

.input-group.radio input[type="radio"]:hover {
  border-color: var(--checkbox-hover-border-light);
}

.input-group.dark.radio input[type="radio"]:hover,
html.dark .input-group:not(.light).radio input[type="radio"]:hover {
  border-color: var(--checkbox-hover-border-dark);
}

.input-group.radio input[type="radio"]:focus {
  outline: none;
  box-shadow: var(--checkbox-focus-shadow-light);
}

.input-group.dark.radio input[type="radio"]:focus,
html.dark .input-group:not(.light).radio input[type="radio"]:focus {
  box-shadow: var(--checkbox-focus-shadow-dark);
}

/* Radio checked styles */
.input-group.radio input[type="radio"]:checked {
  background-color: var(--checkbox-checked-bg-light);
  border-color: var(--checkbox-checked-border-light);
}

.input-group.dark.radio input[type="radio"]:checked,
html.dark .input-group:not(.light).radio input[type="radio"]:checked {
  background-color: var(--checkbox-checked-bg-dark);
  border-color: var(--checkbox-checked-border-dark);
}

/* Custom radio dot */
.input-group.radio input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: var(--checkbox-checked-icon-light);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.input-group.dark.radio input[type="radio"]:checked::after,
html.dark .input-group:not(.light).radio input[type="radio"]:checked::after {
  background-color: var(--checkbox-checked-icon-dark);
}

/* Disabled state for radio */
.input-group.radio input[type="radio"]:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background-color: var(--input-disabled-bg-light);
  border-color: var(--input-border-light);
}

.input-group.dark.radio input[type="radio"]:disabled,
html.dark .input-group:not(.light).radio input[type="radio"]:disabled {
  background-color: var(--input-disabled-bg-dark);
  border-color: var(--input-border-dark);
}

.input-group.radio:has(input[type="radio"]:disabled) label {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Alternative sizes for radio */
.input-group.radio.sm .radio-wrapper {
  width: 1rem;
  height: 1rem;
}

.input-group.radio.lg .radio-wrapper {
  width: 1.5rem;
  height: 1.5rem;
}

/* ============ Radio Group and Checkbox Group Styles ============ */
.radio-group,
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.radio-group.horizontal,
.checkbox-group.horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}

.radio-item,
.checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.375rem;
  transition: var(--transition-smooth);
}

.radio-item:hover,
.checkbox-item:hover {
  background-color: var(--color-gray-100);
}

.radio-item.dark:hover,
.checkbox-item.dark:hover,
html.dark .radio-item:hover,
html.dark .checkbox-item:hover {
  background-color: var(--color-gray-800);
}

.radio-item input[type="radio"],
.checkbox-item input[type="checkbox"] {
  margin: 0;
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 0.125rem solid var(--checkbox-border-light);
  background-color: var(--checkbox-bg-light);
  transition: var(--transition-smooth);
  flex-shrink: 0;
}

.radio-item input[type="radio"] {
  border-radius: 50%;
}

.checkbox-item input[type="checkbox"] {
  border-radius: 0.25rem;
}

.radio-item.dark input[type="radio"],
.checkbox-item.dark input[type="checkbox"],
html.dark .radio-item input[type="radio"],
html.dark .checkbox-item input[type="checkbox"] {
  border-color: var(--checkbox-border-dark);
  background-color: var(--checkbox-bg-dark);
}

.radio-item input[type="radio"]:hover,
.checkbox-item input[type="checkbox"]:hover {
  border-color: var(--checkbox-hover-border-light);
}

.radio-item.dark input[type="radio"]:hover,
.checkbox-item.dark input[type="checkbox"]:hover,
html.dark .radio-item input[type="radio"]:hover,
html.dark .checkbox-item input[type="checkbox"]:hover {
  border-color: var(--checkbox-hover-border-dark);
}

.radio-item input[type="radio"]:focus,
.checkbox-item input[type="checkbox"]:focus {
  outline: none;
  box-shadow: var(--checkbox-focus-shadow-light);
}

.radio-item.dark input[type="radio"]:focus,
.checkbox-item.dark input[type="checkbox"]:focus,
html.dark .radio-item input[type="radio"]:focus,
html.dark .checkbox-item input[type="checkbox"]:focus {
  box-shadow: var(--checkbox-focus-shadow-dark);
}

/* Checked states */
.radio-item input[type="radio"]:checked,
.checkbox-item input[type="checkbox"]:checked {
  background-color: var(--checkbox-checked-bg-light);
  border-color: var(--checkbox-checked-border-light);
}

.radio-item.dark input[type="radio"]:checked,
.checkbox-item.dark input[type="checkbox"]:checked,
html.dark .radio-item input[type="radio"]:checked,
html.dark .checkbox-item input[type="checkbox"]:checked {
  background-color: var(--checkbox-checked-bg-dark);
  border-color: var(--checkbox-checked-border-dark);
}

/* Radio dot */
.radio-item input[type="radio"] {
  position: relative;
}

.radio-item input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: var(--checkbox-checked-icon-light);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.radio-item.dark input[type="radio"]:checked::after,
html.dark .radio-item input[type="radio"]:checked::after {
  background-color: var(--checkbox-checked-icon-dark);
}

/* Checkbox checkmark */
.checkbox-item input[type="checkbox"] {
  position: relative;
}

.checkbox-item input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 40%;
  width: 30%;
  height: 60%;
  border: solid var(--checkbox-checked-icon-light);
  border-width: 0 0.125rem 0.125rem 0;
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;
}

.checkbox-item.dark input[type="checkbox"]:checked::after,
html.dark .checkbox-item input[type="checkbox"]:checked::after {
  border-color: var(--checkbox-checked-icon-dark);
}

.radio-item label,
.checkbox-item label {
  margin: 0;
  cursor: pointer;
  font-weight: normal;
  flex: 1;
  color: var(--input-label-light);
}

.radio-item.dark label,
.checkbox-item.dark label,
html.dark .radio-item label,
html.dark .checkbox-item label {
  color: var(--input-label-dark);
}

.group-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--input-label-light);
  font-size: 0.9rem;
}

.group-label.dark,
html.dark .group-label {
  color: var(--input-label-dark);
}

.input-group label.required::after,
.group-label.required::after {
  content: " *";
  color: var(--color-red-500);
  font-weight: bold;
  font-size: 14px;
}

/* Responsive styles for radio and checkbox groups */
@media (max-width: 600px) {
  .radio-group,
  .checkbox-group {
    gap: 0.5rem;
  }

  .radio-group.horizontal,
  .checkbox-group.horizontal {
    gap: 0.75rem;
  }

  .radio-item,
  .checkbox-item {
    gap: 0.375rem;
    padding: 0.375rem;
  }

  .radio-item input[type="radio"],
  .checkbox-item input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
  }

  .group-label {
    font-size: 0.8rem;
  }
}

/* Example Usage */

/* <!-- ========== Input عادي ========== --> */

/* 
<div class="input-group dark">
  <label for="name">الاسم</label>
  <div class="input-wrapper">
    <input type="text" id="name" placeholder="أدخل اسمك">
  </div>
</div>
*/

/* <!-- ========== Input مع Prefix ========== --> */

/*
<div class="input-group dark prefix">
  <label for="price">السعر المطلوب</label>
  <div class="input-wrapper">
    <span class="input-prefix">💰</span>
    <input type="number" id="price" placeholder="أدخل المبلغ">
  </div>
</div>
*/

/* <!-- ========== Textarea ========== --> */

/*
<div class="input-group dark">
  <label for="notes">الملاحظات</label>
  <div class="input-wrapper">
    <textarea id="notes" placeholder="أدخل ملاحظاتك هنا"></textarea>
  </div>
</div>
*/

/* <!-- ========== Floating Input ========== */

/* ============ Image Preview for File Upload ============ */
.input-group.file-upload .image-preview {
  margin-top: 1rem;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 0.125rem solid var(--input-border-light);
  display: none;
  position: relative;
  transition: var(--transition-smooth);
}

.input-group.dark.file-upload .image-preview,
html.dark .input-group:not(.light).file-upload .image-preview {
  border-color: var(--input-border-dark);
}

.input-group.file-upload .image-preview.show {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

.input-group.file-upload .image-preview img {
  width: 100%;
  height: 12.5rem; /* 200px */
  object-fit: cover;
  display: block;
  transition: var(--transition-smooth);
}

.input-group.file-upload .image-preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(2px);
}

.input-group.file-upload .image-preview:hover .image-preview-overlay {
  opacity: 1;
}

.input-group.file-upload .image-preview-overlay .preview-text {
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.input-group.file-upload .remove-image {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: var(--color-red-500);
  color: white;
  border: none;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.input-group.file-upload .remove-image:hover {
  background: var(--color-red-600);
  transform: scale(1.1);
}

.input-group.file-upload .remove-image:active {
  transform: scale(0.95);
}

/* RTL Support for remove button */
html[dir="rtl"] .input-group.file-upload .remove-image {
  right: auto;
  left: 0.5rem;
}

/* Animation for fade in */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive styles for image preview */
@media (max-width: 768px) {
  .input-group.file-upload .image-preview img {
    height: 10rem; /* 160px */
  }
}

@media (max-width: 600px) {
  .input-group.file-upload .image-preview img {
    height: 9.375rem; /* 150px */
  }

  .input-group.file-upload .remove-image {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.9rem;
    top: 0.375rem;
    right: 0.375rem;
  }

  html[dir="rtl"] .input-group.file-upload .remove-image {
    right: auto;
    left: 0.375rem;
  }
}

/* Alternative sizes for image preview */
.input-group.file-upload.sm .image-preview img {
  height: 8rem; /* 128px */
}

.input-group.file-upload.lg .image-preview img {
  height: 15rem; /* 240px */
}

/* ============ Image Preview Usage Example ============ */

/*
<!-- File Upload with Image Preview -->
<div class="input-group file-upload">
    <span class="file-field-label">اختر صورة</span>
    <label class="input-wrapper" for="image_upload">
        <input name="image_upload" type="file" id="image_upload" class="file-input" accept="image/*">
        <span class="file-prefix">
            <svg viewBox="0 0 24 24">
                <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" />
            </svg>
            <span>اختر ملف</span>
        </span>
        <span class="file-name" id="image_upload_name">لم يتم اختيار ملف</span>
    </label>
    <div class="image-preview" id="image_upload_preview">
        <img id="image_upload_img" src="" alt="معاينة الصورة">
        <div class="image-preview-overlay">
            <div class="preview-text">معاينة الصورة</div>
        </div>
        <button type="button" class="remove-image" onclick="removeImage('image_upload')">×</button>
    </div>
</div>
*/