/* 父容器：控制整体宽度基准 */
.custom-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%; /* 固定宽度（可改为100%自适应） */
    /*margin: 2rem;*/
    padding: 0;
    box-sizing: border-box; /* 确保宽度计算不包含padding和border */
    margin-bottom: 60px;
}

/* 输入框：与父容器宽度保持一致 */
.custom-color-select {
    width: 100%; /* 关键：继承父容器宽度 */
    height: 40px;
    padding: 0 30px 0 12px;
    font-size: 14px;
    border-radius: 4px;
    background-color: #fff;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #ccc;
    box-sizing: border-box; /* 确保padding和border不增加总宽度 */
    margin: 0;
}

/* 选项面板：严格与父容器宽度一致 */
.custom-options-panel {
    display: none;
    position: absolute;
    width: 100%; /* 关键：与父容器同宽 */
    min-width: 100%; /* 防止内容过窄 */
    max-width: 100%; /* 防止内容过宽 */
    top: 100%;
    left: 0;
    margin-top: 2px; /* 正确的间距 */
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 100;
    padding: 4px 0;
    box-sizing: border-box; /* 与输入框保持一致的盒模型 */
    /* 消除可能影响宽度的样式 */
    transform: none;
    overflow: visible;
}

/* 选项项：确保内容不溢出面板 */
.custom-option-item {
    padding: 8px 12px;
    cursor: pointer;
    white-space: nowrap; /* 防止文本换行导致面板变宽 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出显示省略号 */
}

.custom-color-select:focus {
    outline: none;
}

/* 隐藏原生选项（视觉上） */
.custom-color-select option {
    display: none;
}




.custom-option-item:hover {
    background-color: #f0f7ff;
}
/* Safari专用样式修复 */
@supports (-webkit-appearance: none) and (not (overflow: -webkit-marquee)) and (not (-ms-accelerator: true)) {
    .custom-color-select {
        /* 强制覆盖Safari默认样式 */
        -webkit-appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11l4-4H4l4 4z'/%3E%3C/svg%3E") !important;
        background-position: right 10px center !important;
        background-repeat: no-repeat !important;
    }
        /* 移除Safari默认的下拉箭头空间 */
        .custom-color-select::-webkit-calendar-picker-indicator {
            display: none !important;
            -webkit-appearance: none !important;
        }
    /* 确保选项面板在Safari中正常显示 */
    .custom-options-panel {
        -webkit-transform: translateZ(0); /* 启用硬件加速，避免闪烁 */
        z-index: 9999 !important; /* 确保在Safari中面板不会被遮挡 */
    }
}