﻿/* ABB品牌核心配色 */
:root {
    --abb-red: #ff0000;
    --abb-black: #000000;
    --abb-white: #ffffff;
    --abb-gray: #f0f0f0;
    --abb-gray2: #606060;
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: var(--abb-white);
    color: var(--abb-black);
    margin: 0;
    padding: 0;
    font-size: 18px;
}
/* 12列网格布局 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}


/* 隐藏状态 */
.panel-hidden {
    display: none;
}

/* 针对 h2 和 h3 标题 */
h2, h3 {
    position: relative; /* 必须保留，作为伪元素的定位基准 */
    /* 关键修改：将底部内边距改为顶部内边距，为红线留出空间 */
    padding-top: 15px; /* 红线与标题文字之间的垂直距离 */
    padding-bottom: 5px; /* 标题文字与下方内容之间的微小距离 */
    padding-left: 15px;

    margin-bottom: 20px; /*整个标题块与下方表单内容的距离 */
    color: var(--abb-black);
}

    /* 修改伪元素定位到顶部 */
    /*h2::after, h3::after {
        content: "";
        position: absolute;
        left: 15px;*/
        /* 关键修改：从 bottom 改为 top */
        /*top: 0;
        width: 60px;*/ /* 红线宽度 */
        /*height: 6px;*/ /* 红线厚度 */
        /*background-color: #ff0000;*/ /* ABB 红色 */
    /*}*/


/* ABB风格按钮 */
.abb-btn {
    background-color: var(--abb-red);
    color: var(--abb-white);
    width:40%;
    border: none;
    padding: 12px 32px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .abb-btn:hover {
        background-color: #cc0000;
    }
/* 表单控件样式 */
.abb-input, .abb-select, .abb-radio {
    border: 2px solid var(--abb-black);
    width: 100%; /* 占满父容器宽度 */
    padding: 15px; /* 左侧内部留白 15px */
    box-sizing: border-box; /* 关键：让 padding 包含在 width 内，防止溢出 */
    font-size: 18px;
    /*    box-sizing: border-box;*/
    margin-bottom: 12px; /* 标签与输入框之间的间距 */
}

/* 定义每个问题组的底部间距 */
.abb-question-group {
    margin-bottom: 24px; /* 根据视觉需求调整，20-30px 较为舒适 */
}

/* 标签样式优化 */
.abb-label {
    padding-left: 15px;
    display: block; /* 确保标签独占一行或块级显示 */
    margin-bottom: 8px; /* 标签与输入框之间的间距 */
    font-weight: 600;
    color: var(--abb-black);
}

/* 标签样式优化 */
.abb-label2 {
    padding-left: 15px;
    display: block; /* 确保标签独占一行或块级显示 */
    margin-bottom: 8px; /* 标签与输入框之间的间距 */
    font-weight: 400;
    color: var(--abb-gray2);
}



/* 标签样式优化 */
.abb-label3 {
    padding-left: 15px;
    display: inline-block;
    margin-bottom: 8px; /* 标签与输入框之间的间距 */
    font-weight: 600;
    color: var(--abb-black);
    width: 35%;
}



/* 标签样式优化 */
.abb-label4 {
    display: inline-block;
    margin-bottom: 8px; /* 标签与输入框之间的间距 */
    font-weight: 400;
    color: var(--abb-red);
    width: 35%;
}

/* 标签样式优化 */
.abb-label5 {
    padding-left: 15px;
    display: block; /* 确保标签独占一行或块级显示 */
    margin-bottom: 8px; /* 标签与输入框之间的间距 */
    font-weight: 600;
    font-size: 32px;
    color: var(--abb-red);
}

/* ABB风格按钮 */
.abb-btn2 {
    background-color: var(--abb-gray);
    color: var(--abb-red);
    width: 20%;
    border: none;
    padding: 2px 3px;
    font-weight: 600;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
}


/* 单选框组的内部间距 */
.abb-radio-group {
    display: flex;
    gap: 20px; /* 使用 Flexbox 的 gap 属性轻松控制单选按钮之间的水平间距 */
    align-items: center;
    margin-top: 8px;
}
