/* Container cho input và label */
.input-container {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px
}

/* Base input styles */
.input-container input {
    width: 100%;
    height: 48px;
    border: 1px solid #DCDCDC;
    border-radius: 8px;
    padding: 12px;
    font-size: 16px;
    line-height: 24px;
    color: #292929;
    background: transparent;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* Remove default focus outline and keep border color unchanged */
.input-container input:focus {
    outline: none;
    border-color: #1C6EF3;
}

/* Floating label styles */
.input-container label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #7C7C7C;
    padding: 0 4px;
    transition: all 0.2s ease;
    pointer-events: none;
}

/* Error state */
.input-container.error input {
    border-color: #F54A3E;
    background-color: #FFFAF9;
}

.input-container.error label {
    color: #292929;
}

/* Password input specific styles */
.input-container .password-container {
    position: relative;
    width: 100%;
}

.input-container .password-toggle {
    position: absolute;
    right: 16px;
    top: 75%;
    transform: translateY(-75%);
    background: none;
    border: none;
    padding: 0;
    color: #828282;
    cursor: pointer;
}

/* Remove default placeholder since we're using label as placeholder */
.input-container input::placeholder {
    color: #BDBDBD;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

/* Error message */
.error-message {
    color: #FF9088;
    font-size: 14px;
    line-height: 20px;
}