/* Form Field Container */
.form-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
    flex: 1 1 0; 
    min-width: 0;
	align-self: stretch;
}

/* Form Field Label */
.form-field__label {
    color: var(--text-regular-secondary);
    font-style: normal;
    font-weight: 600;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-compact);
}

/* Required Label Indicator */

/* Form Input Wrapper with Icon */
.form-field__input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
    width: 100%;
}

.form-field__input-wrapper--with-icon {
    gap: var(--spacing-s);
}

.form-field__input-icon-wrapper {
    position: absolute;
    left: var(--spacing-m);
    display: flex;
    align-items: center;
    pointer-events: none;
    z-index: 1;
}

.form-field__input-icon-wrapper svg,
.form-field__input-icon-wrapper .form-field__input-icon,
.form-field__input-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    display: block;
    font-size: 1.25rem;
    line-height: 1;
}

/* Form Input Base Styles (shared by input and select) */
.form-field__input,
.form-field__select {
    padding: var(--spacing-s) var(--spacing-xs) var(--spacing-s) var(--spacing-m);
    align-self: stretch;
    width: 100%;
    border-radius: var(--border-radius-m);
    border: var(--border-width-thin) solid var(--border-highlight);
    transition: border-color var(--transition-base);
    overflow: hidden;
    color: var(--text-regular-default);
    text-overflow: ellipsis;
    font-size: var(--font-size-body);
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-normal);
    height: 3rem; /* Fixed height to prevent growth when errors appear */
    box-sizing: border-box;
}

/* Input placeholder color - matches select placeholder */
.form-field__input::placeholder {
    color: var(--text-regular-tertiary);
}

/* Input inside wrapper should use flex: 1 and maintain padding */
.form-field__input-wrapper .form-field__input {
    flex: 1;
    min-width: 0;
    width: auto;
}

/* Input with left icon needs left padding to make room for icon */
.form-field__input-wrapper--with-icon .form-field__input {
    padding-left: calc(var(--spacing-m) + 1.25rem + var(--spacing-s));
}

/* Form Input Focus State */
.form-field__input:focus,
.form-field__select:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Form Input Error State - must override focus state */
.form-field__input--error,
.form-field__select--error {
    border-color: var(--color-status-error);
}

/* Error state should persist even when focused */
.form-field__input--error:focus,
.form-field__select--error:focus {
    border-color: var(--color-status-error);
    outline: none;
}

/* Form Error Message */
.form-field__error {
    color: var(--color-status-error);
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-compact);
    flex-shrink: 0; /* Don't shrink error messages */
}

/* Form Select Specific Styles */
.form-field__select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23878FA9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-s) center;
    padding-right: var(--spacing-xxl);
    accent-color: var(--primary-color);
}

/* Style placeholder option */
.form-field__select option[value=""] {
    color: var(--text-regular-tertiary);
}

/* Style select when showing placeholder (empty/invalid value) - use :invalid for required fields */
.form-field__select:invalid {
    color: var(--text-regular-tertiary);
}

/* Checkbox Label Styles */
.form-field__checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    color: var(--text-regular-default);
    font-size: var(--font-size-body);
    position: relative;
}