:root {
    --input-color: #2C2048;  /* Main text color */
    --input-border: #2C2048; /* Primary border color */
    --input-background: #ffffff;
    --input-placeholder: #a0a0a0;

    --input-border-focus: #284b63;

    --group-color: var(--input-color);
    --group-border: var(--input-border);
    --group-background: #f8f9fa;

    --group-color-focus: #fff;
    --group-border-focus: var(--input-border-focus);
    --group-background-focus: #2C2048;
}

/* General Input Field */
.form-field {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid var(--input-border);
    background: var(--input-background);
    color: var(--input-color);
    transition: border-color 0.3s ease, background-color 0.3s ease;

    &::placeholder {
        color: var(--input-placeholder);
    }

    &:focus {
        outline: none;
        border-color: var(--input-border-focus);
        background-color: #f5f5f5;
    }
}

/* Grouped Input Fields */
.form-group {
    position: relative;
    display: flex;
    width: 100%;

    & > span,
    .form-field {
        white-space: nowrap;
        display: block;
    }

    .form-field {
        flex: 1 1 auto;
        width: 1%;
        z-index: 1;
        border-radius: 6px;
    }

    & > span {
        text-align: center;
        padding: 10px 12px;
        font-size: 14px;
        color: var(--group-color);
        background: var(--group-background);
        border: 1px solid var(--group-border);
        transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;
    }

    &:focus-within {
        & > span {
            color: var(--group-color-focus);
            background: var(--group-background-focus);
            border-color: var(--group-border-focus);
        }
    }
}

/* Select Field */
.form-field select {
    appearance: none;
    background-color: var(--input-background);
    border: 1px solid var(--input-border);
    cursor: pointer;
    padding-right: 35px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232C2048'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

/* Disabled Inputs */
input:disabled, textarea:disabled, select:disabled {
    background: #d9d9d9;
    color: #666;
    border: 1px solid #b0b0b0;
    cursor: not-allowed;
}