/**
 * birthdate.css — 出生日期「年/月/日」三下拉选择器样式
 * ===================================================
 * 配套 /js/birthdate.js。颜色/边框/字号由 JS 从原 <input type="date">
 * 的 computed style 继承并写为行内样式，故此处只负责布局与交互细节，
 * 深色页（report/daily/hepan）与浅色弹窗（index 个人中心）均可自适应。
 */

.bd-wrap {
    display: flex;
    gap: 8px;
    width: 100%;
    align-items: center;
}

.bd-wrap .bd-select {
    flex: 1 1 0;
    min-width: 0;                 /* 关键：允许在窄屏中收缩，避免溢出容器 */
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer;
    /* 自绘下拉箭头（去掉原生 appearance 后需补） */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 26px !important;   /* 覆盖 JS 继承来的 padding，留出箭头空间 */
    line-height: 1.4;
}

/* 年份最长（如「1990 年」），给它多一点空间 */
.bd-wrap .bd-year { flex: 1.35 1 0; }

.bd-wrap .bd-select:focus {
    border-color: #c8a86b !important;   /* 与站点金色主色一致 */
}

/* 下拉展开后的选项列表：部分浏览器会继承透明背景导致文字不可读，此处强制安全配色 */
.bd-wrap .bd-select option {
    background-color: #1a1a22;
    color: #e8e8ef;
}

/* 移动端：字号 ≥16px 可避免 iOS Safari 聚焦时自动放大页面 */
@media (max-width: 480px) {
    .bd-wrap { gap: 6px; }
    .bd-wrap .bd-select {
        font-size: 16px !important;
        background-position: right 8px center;
        padding-right: 22px !important;
    }
}

/* 打印报告时不应出现表单控件 */
@media print {
    .bd-wrap { display: none; }
}