/* ================================================
   浮动标签输入框 - Material Design 风格
   ================================================ */

.floating-input {
    position: relative;
    margin-bottom: 20px;
}

/* 输入框基础样式 - 保持原有样式不变 */
.floating-input input {
    width: 100%;
    padding: 16px !important;
    font-size: 16px !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    background: rgba(30, 30, 30, 0.8) !important;
    color: #fff !important;
    /* 使用更平滑的过渡效果 */
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    outline: none !important;
}

/* 焦点状态 - 测试用红色边框 */
.floating-input input:focus {
    border-color: #ff0000 !important;
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.4) !important;
    background: rgba(35, 35, 35, 0.9) !important;
}

/* 标签初始状态 - 在输入框内部 */
.floating-input label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.5);
    background: transparent;
    padding: 0 4px;
    pointer-events: none;
    /* 使用更长的时间和更平滑的缓动曲线 */
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    white-space: nowrap;
    z-index: 10;
    /* 确保平滑过渡所有属性 */
    will-change: transform, top, left, font-size, color, background, padding, border;
}

/* 标签上移状态 - 移动到边框线上，背景完全遮盖边框 */
.floating-input input:not(:placeholder-shown) + label,
.floating-input input.has-value + label {
    top: 0 !important;
    left: 12px !important;
    font-size: 0 !important;  /* 隐藏原文本 */
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    /* 使用完全不透明的深色背景 */
    background: #1e1e1e !important;
    /* 失去焦点时使用初始边框颜色 */
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    /* 加大 padding */
    padding: 3px 10px !important;
    transform: translateY(-50%) !important;
    border-radius: 6px !important;
    /* 确保在最上层 */
    z-index: 10 !important;
}

/* 焦点状态 - 红色边框和金色文字 */
.floating-input input:focus + label {
    top: 0 !important;
    left: 12px !important;
    font-size: 0 !important;
    font-weight: 600 !important;
    color: #ffd700 !important;
    background: #1e1e1e !important;
    /* 焦点时使用红色边框 */
    border: 2px solid #ff0000 !important;
    padding: 3px 10px !important;
    transform: translateY(-50%) !important;
    border-radius: 6px !important;
    z-index: 10 !important;
}

/* 使用伪元素显示简短文字 */
.floating-input input:focus + label::before,
.floating-input input:not(:placeholder-shown) + label::before,
.floating-input input.has-value + label::before {
    content: attr(data-short);
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* 焦点状态文字颜色 */
.floating-input input:focus + label::before {
    color: #ffd700 !important;
}

/* 非焦点状态文字颜色 */
.floating-input input:not(:placeholder-shown):not(:focus) + label::before,
.floating-input input.has-value:not(:focus) + label::before {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* 验证码输入框特殊样式 */
.captcha-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 100%;
}

.captcha-row .floating-input {
    flex: 1;
    margin-bottom: 0;
    min-width: 0;
    max-width: calc(100% - 160px);
}

.captcha-image {
    height: auto !important;
    width: 150px;
    /* 使用和输入框完全一样的边框样式 */
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    flex-shrink: 0;
}

.captcha-image:hover {
    border-color: #ffd700 !important;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.3) !important;
}

/* 错误状态 */
.floating-input input:invalid:not(:focus):not(:placeholder-shown) {
    border-color: #dc3545 !important;
}

.floating-input input:invalid:not(:focus):not(:placeholder-shown) + label {
    top: 0 !important;
    left: 12px !important;
    font-size: 0 !important;
    font-weight: 600 !important;
    color: #dc3545 !important;
    /* 使用不透明背景，和标签上移状态一致 */
    background: #1e1e1e !important;
    /* 添加红色边框（错误状态用深红色） */
    border: 2px solid #dc3545 !important;
    padding: 3px 10px !important;
    transform: translateY(-50%) !important;
    border-radius: 6px !important;
    z-index: 10 !important;
}

.floating-input input:invalid:not(:focus):not(:placeholder-shown) + label::before {
    content: attr(data-short);
    font-size: 12px !important;
    color: #dc3545 !important;
    font-weight: 600 !important;
}

.floating-input input:invalid:not(:focus):not(:placeholder-shown) + label::before {
    content: attr(data-short);
    font-size: 12px !important;
    color: #dc3545 !important;
    font-weight: 600 !important;
}

/* 动画效果 */
@keyframes labelFloat {
    from {
        top: 50%;
        font-size: 16px;
    }
    to {
        top: 0;
        font-size: 12px;
    }
}

/* 移除默认的浏览器自动填充样式 */
.floating-input input:-webkit-autofill,
.floating-input input:-webkit-autofill:hover,
.floating-input input.input-text:-webkit-autofill,
.floating-input input.input-text:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0 1000px rgba(35, 35, 35, 0.9) inset !important;
    -webkit-text-fill-color: #fff !important;
    /* 覆盖浏览器默认边框，使用CSS定义的初始边框 */
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    transition: background-color 5000s ease-in-out 0s, border-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* 自动填充且获得焦点时 - 使用红色边框 */
.floating-input input:-webkit-autofill:focus,
.floating-input input.input-text:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgba(35, 35, 35, 0.9) inset !important;
    -webkit-text-fill-color: #fff !important;
    border: 2px solid #ff0000 !important;
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.4) !important;
    background: rgba(35, 35, 35, 0.9) !important;
}

/* 浏览器自动填充后，标签也应该上移 */
.floating-input input:-webkit-autofill + label {
    top: 0 !important;
    left: 12px !important;
    font-size: 0 !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    background: #1e1e1e !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    padding: 3px 10px !important;
    transform: translateY(-50%) !important;
    border-radius: 6px !important;
    z-index: 10 !important;
}

.floating-input input:-webkit-autofill + label::before {
    content: attr(data-short);
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 600 !important;
}

/* 自动填充且获得焦点时 */
.floating-input input:-webkit-autofill:focus + label {
    color: #ffd700 !important;
    border: 2px solid #ff0000 !important;
}

.floating-input input:-webkit-autofill:focus + label::before {
    color: #ffd700 !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .floating-input input.input-text {
        font-size: 14px;
        padding: 14px 14px 6px 14px;
    }
    
    .floating-input label {
        font-size: 14px;
        left: 14px;
    }
    
    .floating-input input.input-text:focus + label,
    .floating-input input.input-text:valid + label,
    .floating-input input.input-text:not(:placeholder-shown) + label {
        font-size: 11px;
        left: 10px;
    }
}