/**
 * 产品属性样式优化
 * 让产品选项显示更规整统一
 */

/* 统一属性区块样式 */
#productAttributes {
    margin: 20px 0;
}

#attribsOptionsText {
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 15px;
    color: #333;
}

/* 统一每个属性块的样式 */
.attribBlock {
    margin-bottom: 15px;
}

/* 统一表单组样式 - 让所有选项看起来一致 */
.attribBlock .form-group,
.attribBlock .form-group.required {
    margin-bottom: 15px;
}

/* 统一标签样式 */
.attribBlock .control-label,
.attribBlock .attribsInput {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    color: #333;
    font-size: 14px;
}

/* 必填项标记 */
.attribBlock .form-group.required .control-label:after,
.attribBlock .form-group.required .attribsInput:after {
    content: " *";
    color: #f00;
}

/* 统一输入框和下拉框样式 */
.attribBlock select.form-control,
.attribBlock input[type="text"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* 输入框获得焦点时的样式 */
.attribBlock select.form-control:focus,
.attribBlock input[type="text"]:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

/* 下拉框特殊样式 */
.attribBlock select.form-control {
    height: 38px;
}

/* 文本输入框样式 */
.attribBlock input[type="text"] {
    height: 38px;
}

/* 移除默认的attribsInput特殊样式，使其与control-label一致 */
.attribsInput {
    font-weight: 600 !important;
}

/* 数量和添加到购物车按钮区域 */
.form-groups {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.form-groups .control-label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    color: #333;
    font-size: 14px;
}

.form-groups input[type="text"] {
    width: 80px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
}

.form-groups .btn {
    margin-top: 10px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .attribBlock select.form-control,
    .attribBlock input[type="text"] {
        font-size: 16px; /* 防止iOS自动缩放 */
    }
}
