main {
    flex: 1; /* 使main区域扩展以填满剩余空间 */
    padding-top: 60px; /* 确保内容不会被fixed的header遮挡 */
    padding-bottom: 20px;
}

.customer-info {
    width: 80%;
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.customer-info h1 {
    margin-bottom: 20px;
}

.customer-info .info p {
    margin: 20px 0;
}

.edit-mode {
    display: none;
}



form {
    margin-bottom: 20px; /* form本身与其他元素之间的间隙 */
}

form label {
    display: block;
    margin-top: 10px; /* 标签与上一个元素的间隙 */
}

form input, form select {
    width: 100%;
    padding: 8px;
    margin-top: 5px; /* 输入框与对应label的间隙 */
    margin-bottom: 15px; /* 输入框与下一个元素的间隙 */
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid #ccc;
}

form button,
#info-display button,
button[id^="edit-child-button-"] {
    padding: 10px 20px;
    background-color: #ff9900;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 10px;
}

form button:hover,
#info-display button:hover,
button[id^="edit-child-button-"]:hover {
    background-color: #cc7a00;
} 

.info-container, .child-info-container {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 20px;
}

.left-column, .right-column {
    width: 48%;
}

.left-column h3{
    margin-top: 0px ;
}

.right-column {
    display: flex;
    justify-content: center;
    width: 90%;
    height: 50%;
}


.qr-section {
    width: 45%;
    text-align: center;
    margin-bottom: 20px;
}
.qr-section img {
    width: 80%;
}
.qr-section h3{
    margin-top: 0px ;
}

.child-section .toggle-button {
    margin-left: 10px;
    cursor: pointer;
}

.collapsible {
    background-color: #ffffffbf;
    color: rgb(0, 0, 0);
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    margin-bottom: 10px;
    font-weight: bold; /* 加粗字体 */
    margin-top: 30px;
    border-bottom: 1px solid #000000;
}

/* 折叠按钮激活状态和悬停效果 */
.active, .collapsible:hover {
    background-color: #ff9900bf;
}

/* 折叠按钮的符号样式 */
.collapsible:after {
    content: '\002B'; /* Unicode字符 "+" */
    color: rgb(0, 0, 0);
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

/* 激活状态下改变符号 */
.active:after {
    content: '\2212'; /* Unicode字符 "-" */
}

/* 折叠内容的默认隐藏样式 */
.content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    justify-content: space-between;
}

.wallet-section{
    margin-top: 20px;
    text-align: center;
}
.apple-wallet-button {
    border-radius: 5px;
    overflow: hidden; /* 确保圆角效果 */
    text-decoration: none;
    transition: opacity 0.2s ease;
    margin: 10px 0;
}
.apple-wallet-button:hover {
    opacity: 0.8;
}

/* 按钮图片样式 (使用SVG版本) */
.apple-wallet-button img {
    height: 40px; /* 标准高度 */
    width: auto;
}

/* 黑暗模式适配 */
@media (prefers-color-scheme: dark) {
    .apple-wallet-button img {
        /* 使用白色边框版本（如果有） */
        filter: brightness(0) invert(1);
    }
}

/* 响应式调整 */
@media (max-width: 768px) {
    .apple-wallet-button img {
        width: 60%; 
        height: auto;
    }
}

/* 按钮按下效果 */
.apple-wallet-button:active {
    transform: scale(0.98);
}

/* 确保按钮有足够点击区域 */
.apple-wallet-button {
    min-width: 120px;
    padding: 5px; /* 增加点击区域 */
}
@media (max-width: 1023px) and (min-width:769px) {
    .customer-info {
        width: 90%;
        max-width: 1200px;
        margin: 20px auto;
        padding: 20px;
        background: #f9f9f9;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }
    #cancel-button,
    button[id^="cancel-child-button-"]{
        margin-top: 15px;
    }

}

@media (max-width: 768px)and (min-width:432px) {
    .customer-info {
        width: 90%;
        max-width: 1200px;
        margin: 20px auto;
        padding: 20px;
        background: #f9f9f9;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }
    #cancel-button,
    button[id^="cancel-child-button-"]{
        margin-top: 15px;
    }
}

@media (max-width: 431px) {
    .customer-info {
        width: 90%;
        max-width: 1200px;
        margin: 20px auto;
        padding: 20px;
        background: #f9f9f9;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }
    .info-container, .child-info-container {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        padding: 5px;
        background-color: #f9f9f9;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    .left-column, .right-column {
        width: 100%;
    }
    .right-column{
        flex-direction: column;
    }
    .qr-section {
        width: 100%;
    }
    .content{
        flex-direction: column;
    }
    div[id^="child-info-display-"],
    #info-display{
        margin-bottom: 20px;
    }
}