/* ================= 全局基础样式 ================ */

/* 重置默认样式，统一盒模型 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 设置全局字体与背景色 */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9; /* 全局浅灰背景 */
    color: #333; /* 全局字体颜色 */
}

main {
    padding: 8px; /* 页面内容区域的内边距 */
}

/* ================= 区块公共样式 ================ */

/* 所有 section 区块统一样式（外边距 + 边框 + 圆角等） */
section {
    margin-bottom: 4px; /* 下外边距设置为4px，控制元素之间的垂直间距 */
        background-color: #fff; /* 背景色设置为白色 (#fff) */
        border: 2px solid #ddd; /* 设置2px宽的边框，颜色为浅灰色 (#ddd) */
        padding: 10px; /* 内边距为10px，控制内容与边框的距离 */
        border-radius: 8px; /* 边框圆角半径为8px，使角变圆滑 */
        margin-left: 15px; /* 左外边距为20px，控制左侧与其他元素的距离 */
        margin-right: 15px; /* 右外边距为20px，控制右侧与其他元素的距离 */
}

/* ================= Banner 区域样式 ================ */

#banner img {
    width: 100%;         /* 宽度撑满容器 */
    height: auto;        /* 高度自适应 */
    margin-top: 0px;     /* 可根据需要调整 */
}

/* ================= 余额展示区域样式 ================ */

#mainNetTitle{
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 12px;
}

/* 余额文字和具体数值横向排列，背景高亮 */
.balance-group {
    display: flex;
    align-items: center;
    font-size: 12px;
    gap: 6px;                /* 元素间距 */
    margin-top: 8px;
    padding: 8px 12px;
    background-color: #f5f5f5;
    border-radius: 6px;
    border: 1px solid #ddd;
}

/* ================= 存款区域样式 ================ */

#deposit {
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 8px;
    margin-top: 10px;
}

/* 存款标题样式 */
#saveMoneyTitle {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 12px;
}

/* 输入框样式：右边为按钮留出空间 */
#depositAmount {
    width: 80%; /* 输入框宽度为100% */
        padding: 10px 40px 10px 12px; /* 内边距：上10px，右40px（给按钮留空间），下10px，左12px */
        box-sizing: border-box; /* 包括内边距和边框在内计算元素的总宽度 */
        font-size: 13px; /* 字体大小为13px */
        border: 1px solid #ccc; /* 1px的浅灰色边框 */
        border-radius: 5px; /* 圆角边框，半径为5px */
        position: relative; /* 设置定位属性为relative，以便给按钮定位 */
}

/* 最大按钮样式，定位在输入框右边 */
#maxButton {
   position: absolute; /* 使用绝对定位，使其相对于父元素（即输入框）定位 */
       right: 10px; /* 距离父容器右边10px */
       top: 50%; /* 垂直居中，50%为容器高度的50% */
       transform: translateY(-50%); /* 精确垂直居中，向上平移自身高度的一半 */
       padding: 6px 10px; /* 内边距：上下6px，左右10px */
       font-size: 14px; /* 字体大小为14px */
       background-color:#dc3545; /* 按钮背景颜色为鲜艳的蓝色 */
       color: white; /* 按钮文本颜色为白色 */
       border: none; /* 无边框 */
       border-radius: 4px; /* 圆角边框，半径为4px */
       cursor: pointer; /* 鼠标悬停时显示手型，表示可以点击 */
       height: 100%; /* 按钮的高度与输入框相同 */
       width: 60px; /* 按钮的宽度 */
}

/* 输入框 + 按钮容器样式（相对定位） */
.deposit-input-wrapper {
    position: relative; /* 相对定位，便于将按钮定位在输入框内 */
        margin-bottom: 10px; /* 下边距为10px */
}

/* ================= 币种选择区域样式 ================ */

.currency-selector {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 10px;
}

#currencySelectTitle {
    font-size: 13px;
    font-weight: bold;
    color: #333;
    width: 50px;
    text-align: left;
}

.custom-select {
    position: relative;
    width: 35%;
    font-size: 13px;
    cursor: pointer;
}

.selected {
    padding: 7px 30px 7px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.custom-select .dropdown { /* 限定为 .custom-select 内的 .dropdown */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    z-index: 10;
}

.custom-select .dropdown.hidden { /* 同样限定 */
    display: none;
}

.option {
    padding: 7px 12px;
    color: #333;
}

.option:hover {
    background-color: #f0f0f0;
}

.custom-select:focus-within .selected {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}
/* 可获得区域：一行显示 */
#receivedAmountTitle,
#receivedAmount,
#receivedAmountdanwei {
    font-size: 12px;
    margin-right: 4px;
}

/* 汇率区域：一行显示 */
#exchangeRateTitle,
#exchangeRate,
#exchangeRatedanwei {
    font-size: 12px;
    margin-right: 4px;
}

/* 存款按钮样式 */
#depositButton {
    width: calc(100% - 20px);
    padding: 10px;
    border-radius: 10px;
    border: none;
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
    margin-top: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ================= 银行信息展示样式 ================ */

#ReceiveTitle{
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 12px;
	 color: #dc3545;
}

/* 每行银行信息的通用布局（横向） */
.bank-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 13px;
    color: #333;
}

/* 银行信息标题列（固定宽度） */
.bank-row span:first-child {
    min-width: 90px;
    font-weight: bold;
	margin-right: 15px; /* 增加标题和内容之间的间距 */
}

#usdtBalance
{
    color: #28a745; /* 绿色，可替换成 #007bff 蓝色 或其他你喜欢的颜色 */
    font-weight: bold;
}
#receivedAmount
{
    color: #dc3545; /* 红色，可替换成 #007bff 蓝色 或其他你喜欢的颜色 */
    font-weight: bold;
}
#exchangeRate {
    color: #28a745; /* 绿色，可替换成 #007bff 蓝色 或其他你喜欢的颜色 */
    font-weight: bold;
}
/* 提示信息区域样式 */
#tips h2 {
    font-size: 16px; /* 标题字体大小调整 */
    margin-bottom: 10px; /* 下边距 */
}

#tips p {
    font-size: 14px; /* 字体大小调整 */
    margin-bottom: 5px; /* 下边距 */
}

/* 语言选择区样式 */
.language-selection {
    text-align: left; /* 左对齐 */
    max-width: 400px; /* 最大宽度 */
    margin: 0 auto; /* 居中 */
    z-index: 1;
}

/* 语言选择表单样式 */
#languageForm label {
    display: flex; /* 使用 flex 布局 */
    justify-content: space-between; /* 两边对齐 */
    align-items: center; /* 垂直居中 */
    padding: 10px; /* 内边距 */
    border: 1px solid #ccc; /* 边框 */
    border-radius: 5px; /* 圆角 */
    margin-bottom: 10px; /* 下边距 */
    background-color: #fff; /* 背景色 */
}

/* 语言选择输入框样式 */
#languageForm input[type="radio"] {
    appearance: none; /* 移除默认样式 */
    width: 20px; /* 宽度 */
    height: 20px; /* 高度 */
    border: 1px solid #ccc; /* 边框 */
    border-radius: 3px; /* 圆角 */
    cursor: pointer; /* 鼠标指针样式 */
    position: relative; /* 相对定位 */
}

/* 选中的语言选择输入框样式 */
#languageForm input[type="radio"]:checked {
    background-color: #007bff; /* 背景色 */
}