: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 SVG element */
.input-group.prefix .input-wrapper svg.input-prefix {
    background: var(--color-gray-200);
    padding: 0.75rem 1rem; /* 12px 16px */
    color: var(--color-input-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch; /* Ensure it takes full height */
    margin: 0; /* Reset any potential margins */
    width: auto;
    height: auto;
}

.input-group.prefix.dark .input-prefix,
html.dark .input-group:not(.light).prefix .input-prefix,
.input-group.prefix.dark svg.input-prefix,
html.dark .input-group:not(.light).prefix svg.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: translateY(-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>
*/