/* ================================================================
   【全局基础层】隐藏冗余模块 + 页面固定宽度 + 全局字号重置
   核心作用：移除移动端默认的头部、底部导航，强制页面固定1012px宽度
   ================================================================ */

/* 隐藏页面冗余模块：头部、侧边栏、底部导航栏、页脚 */
#header,
#sidebar,
#bottom-navigation-bar,
#footer {
    display: none !important;
}

/* 强制页面核心容器统一固定为1012px宽度，消除响应式自适应 */
html,
body,
#page-body,
#container,
#section-area,
#goods-selection-main {
    width: 100% !important;       /* 宽度永远铺满当前可用屏幕 */
    min-width: 320px !important;  /* 最小宽度兜底，兼容小屏手机 */
    max-width: 100% !important;   /* 强制禁止超出屏幕宽度 */
    margin: 0 auto !important;    /* 大屏下内容自动居中，不贴边 */
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 全局默认字号与盒模型统一，避免各元素尺寸错乱 */
* {
    font-size: 45px !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
}


/* ================================================================
   【号码表格模块】手机号列表展示样式
   作用：统一号码列表布局、边框、吉祥号标签样式，隐藏订购按钮
   ================================================================ */

/* 全局盒模型统一，从根源解决宽度计算错乱、换行异常 */
.number-table,
.number-table * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 优化弹窗：隐藏温馨提示标题 */
.common-dialog .title {
    display: none !important;
}

/* 弹窗【我知道了】按钮：居中+防裁切+样式优化，修复靠左问题 */
.confirm-btn.click-btn {
    /* 转为块级元素，margin auto 水平居中生效 */
    display: block !important;
    /* 左右自动边距 = 水平居中，上方间距20px */
    margin: 20px auto 0 auto !important;
    /* 按钮占弹窗85%宽度，自适应弹窗大小，不会太宽太窄 */
    width: 85% !important;
    /* 上下内边距，给文字充足垂直空间，解决文字裁切 */
    padding: 25px 80px !important;
    /* 强制文字单行，避免换行挤压高度 */
    white-space: nowrap !important;
    /* 文字内部居中 */
    text-align: center !important;
    line-height: 1.2 !important;
    /* 最小高度兜底，防止挤压变形 */
    min-height: 140px !important;
    height: auto !important;
    /* 沿用你设定的大号字体 */
    font-size: 70px !important;
    /* 圆角沿用你的参数 */
    border-radius: 16px !important;
}
/* ---------- 1. 外层容器 ---------- */
.number-table {
    width: 100% !important;
    margin: 40px 0 !important;
    border: 3px solid #000000 !important;
    border-radius: 20px !important;
    overflow: hidden !important; /* 保证圆角生效，裁剪内部溢出内容 */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- 2. 表头区域 ---------- */
.table-header {
    display: flex !important;
    width: 100% !important;
    background: #cccccc !important;
}

/* 表头单元格基础样式 */
.table-header-item {
    flex: 1 !important;
    padding: 15px 20px !important;
    text-align: center !important;
    font-size: 80px !important;
    font-weight: 600 !important;
    border-bottom: 3px solid #eee !important;
}

/* 隐藏表头第2、4列（订购操作列） */
.table-header-item:nth-child(2),
.table-header-item:nth-child(4) {
    display: none !important;
}

/* ---------- 3. 表体容器 ---------- */
.table-body {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    position: relative;
}

/* ---------- 4. 号码组（每组=号码+订购按钮） ---------- */
.number-order {
    flex: 0 0 50% !important; /* 每行2组，两列号码布局 */
    display: flex !important;
    align-items: center !important;
    border-bottom: 3px solid #f5f5f5 !important;
}

/* 最后一行去除下边框（视觉更整洁） */
.table-body > .number-order:nth-last-child(-n+2) {
    border-bottom: none !important;
}

/* ---------- 5. 单元格基础样式 ---------- */
.number-order-detail {
    flex: 1 !important;
    padding: 25px 20px !important;
    text-align: left !important;
    white-space: nowrap !important;
    font-size: 64px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

/* 号码列左对齐 */
.number-order-detail.number-left {
    justify-content: flex-start !important;
    color: #000000;
}

/* 隐藏每组内的订购按钮列（第2个单元格） */
.number-order .number-order-detail:nth-child(2) {
    display: none !important;
}

/* ---------- 6. 吉祥号标签 ---------- */
.beautiful-tag {
    /* 脱离文档流，铺满整个号码单元格 */
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    /* 外边框包裹整个单元格=包裹整串手机号 */
    border: 6px solid #0066a8 !important;
    border-radius: 16px !important;
    background: transparent !important;
    /* 文字居中+半透明效果 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(30, 111, 255, 0.55) !important;
    font-size: 48px !important;
    font-weight: 500 !important;
    /* 穿透点击，不会挡住号码选中、复制 */
    pointer-events: none !important;
    z-index: 2 !important;
}

/* ---------- 7. 订购按钮样式（已隐藏，保留便于后续恢复） ---------- */
.order-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}
.order-button .order-icon {
    width: 48px !important;
    height: 48px !important;
}
.order-button .order-text {
    font-size: 56px !important;
    color: #333;
}


/* ================================================================
   【地址选择模块】省份选择区域样式
   作用：白名单控制显示省份、高亮指定省份、隐藏下拉按钮与logo
   ================================================================ */

/* 地址选择外层容器 */
.address-selection {
    margin-left: -25px !important;
    padding-left: 0 !important;
    margin-bottom: 20px !important;
}

/* 下拉触发按钮基础样式（当前已整体隐藏，保留便于恢复） */
.address-selection .select-button {
    padding: 25px 40px !important;
    font-size: 85px !important;
    border: 5px solid #ffffff !important;
    border-radius: 20px !important;
    background-color: #ffffff !important;
}

/* 隐藏省份选择的下拉触发按钮（永久显示列表，无需点击展开） */
.address-selection .select-button {
    display: none !important;
}

/* 隐藏地址选择左侧logo */
.address-selection .logo {
    display: none !important;
}

/* 隐藏省份分组字母标签（A-G / H-J 等） */
.line-label {
    display: none !important;
}

/* 省份下拉列表容器：强制永久显示，无需点击展开 */
.address-list {
    margin-left: 0 !important;
    padding: 15px !important;
    display: block !important;
}

/* 省份选项通用基础样式 */
.address-item {
    margin: 0 10px 10px 0 !important;
    padding: 10px 15px !important;
    text-align: left !important;
    display: inline-block !important;
    border-radius: 4px !important;
}

/* 白名单机制：默认隐藏所有省份选项 */
.address-list .address-item {
    display: none !important;
}

/* 
   白名单放行：只显示指定 data-index 的省份
   新增省份直接复制一行，修改 data-index 数值即可
   索引对照表：
   0北京 1安徽 2重庆 3福建 4广东 5甘肃 6广西 7贵州
   8河北 9湖北 10黑龙江 11湖南 12河南 13海南 14吉林 15江苏 16江西
   17辽宁 18内蒙古 19宁夏 20青海 21四川 22山东 23上海 24山西 25陕西
   26天津 27新疆 28西藏 29云南 30浙江
*/
.address-list .address-item[data-index="12"],
.address-list .address-item[data-index="15"] {
    display: inline-block !important;
}

/* 单独定制：河南省高亮样式（data-index=12 专属） */
.address-item[data-index="12"] {
    font-size: 70px !important;        /* 字体放大突出 */
    text-align: center !important;     /* 文字居中 */
    padding: 15px 30px !important;    /* 内边距放大，按钮感更强 */
    background: #ffffff !important;    /* 背景色 */
    border: 8px solid #0066a8 !important; /* 边框高亮 */
    display: inline-block !important;
}


/* ================================================================
   【城市选择弹窗模块】城市列表样式
   作用：调整城市字号、高亮指定城市、放大关闭按钮
   ================================================================ */

/* 城市选择外层容器 */
.select-city {
    margin-bottom: 20px !important;
    padding: 10px 0 !important;
}

/* 城市选择按钮 */
.select-city-btn {
    padding: 10px 20px !important;
    font-size: 80px !important;
}

/* 城市列表项：统一字号与间距 */
.select-city-step .city-name {
    font-size: 40px !important;
    margin: 12px 18px !important;
    display: inline-block !important;
}

/* 单独高亮：平顶山市（列表第4个元素，顺序：郑州、开封、洛阳、平顶山...） */
.select-city-step .city-name:nth-child(4) {
    font-size: 78px !important;
    font-weight: bold !important;
    background: #ffffff !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    border: 8px solid #0066a8 !important;
}

/* 弹窗右上角关闭按钮：放大容器尺寸 */
.common-dialog .common-dialog-close {
    width: 80px !important;
    height: 80px !important;
    background-size: 100% 100% !important; /* 背景图跟随容器缩放 */
    top: 12px !important;           /* 距离顶部位置微调 */
    right: 12px !important;         /* 距离右侧位置微调 */
}

/* 关闭按钮内部图标：同步放大，保证清晰不变形 */
.common-dialog .common-dialog-close img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}


/* ================================================================
   【搜索筛选模块】号码搜索 + 靓号筛选 + 重置按钮
   ================================================================ */

/* 号码搜索栏外层容器 */
.number-search {
    margin-bottom: 20px !important;
    padding: 15px !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
}

/* 搜索栏文字标签 */
.number-search_label {
    margin-right: 10px !important;
}

/* 搜索输入框 */
.number-search_input {
    height: 80px !important;
    font-size: 40px !important;
    padding: 0 15px !important;
    flex: 1 !important;
    min-width: 300px !important;
    border: 3px solid #000 !important;
    font-weight: bold !important;
}

/* 搜索按钮 + 重置按钮基础样式 */
.number-search-button,
.search_reset {
    height: 80px !important;
    font-size: 40px !important;
    padding: 0 25px !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

/* 隐藏重置按钮 */
.bn-primary-btn.search_reset {
    display: none !important;
}

/* 靓号筛选区域 */
.number-beautify {
    margin-bottom: 20px !important;
}

/* 靓号筛选标签列表 */
.number-beautify ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 单个靓号筛选标签 */
.number-beautify li {
    padding: 15px 25px !important;
    font-size: 40px !important;
    margin: 0 !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
}

/* 随机选号按钮 */
.random-search {
    padding: 30px 80px !important;
    font-size: 40px !important;
    white-space: nowrap !important;
    display: inline-block !important;
    width: auto !important;
    line-height: 1 !important;
    height: auto !important;
}


/* ================================================================
   【底部页脚】
   ================================================================ */
.footer {
    text-align: left !important;
    margin-left: 350px !important;
    margin-top: 80px !important;
}


/* ================================================================
   【通用弹窗模块】弹窗遮罩 + 主体 + 内容区
   ================================================================ */

/* 弹窗最外层遮罩容器 */
.common-dialog-wrapper {
    position: fixed !important;
    top: 15vh !important;
    left: 5% !important;
    width: 90% !important;
    height: auto !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 9999 !important;
}

/* 弹窗主体框 */
.common-dialog {
    position: relative !important;
    width: 100% !important;
    max-height: 85vh !important;
    margin: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* 弹窗标题栏 */
.common-dialog .title {
    font-size: 60px !important;
    padding: 35px !important;
}

/* 弹窗内容区域 */
.common-dialog__body {
    padding: 70px !important;
    font-size: 220px !important;
}

/* 弹窗内按钮样式 */
.common-dialog__body button {
    padding: 60px 90px !important;
    font-size: 90px !important;
    height: auto !important;
}

/* 弹窗遮罩层（已隐藏） */
.common-dialog-model {
    display: none !important;
}


/* 放大【换一换】按钮，优化大小与排版 */
.bn-primary-btn.random-search {
    /* 增大内边距，整体放大按钮体积 */
    padding: 35px 90px !important;
    /* 调大字号，匹配你页面整体大号字体风格 */
    font-size: 65px !important;
    /* 最小高度兜底，防止被挤压变形 */
    min-height: 130px !important;
    height: auto !important;
    /* 文字居中 */
    text-align: center !important;
    line-height: 1.2 !important;
    /* 可选圆角，和你弹窗按钮风格统一 */
    border-radius: 16px !important;
    /* 按需水平居中，不需要可以删掉这一行 */
    display: block !important;
    margin: 30px auto 0 auto !important;
}