/* 计算器弹窗（recharge-v2.html 内 calculator.html）
   参照 business/milkway 计算器样式做压缩优化：
   - 整体宽度 88rem → 75rem，最大高度不超视口、内部滚动，中小屏不再溢出；
   - 各字号整体降档：标题 3rem→2.5rem、标签/输入 2.25rem→1.75rem、
     总价 6.5rem→4.5rem、推荐行 1.875rem→1.5rem、提示 1.125rem→1rem 等；
   - 结果区由固定 70.5rem 改为 flex 自适应吃掉剩余宽度，超大金额自动换行不撑破布局。 */

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.modal-overlay.active {
    display: flex;
}

/* 弹窗主体：缩小宽度、限制最大高度并内部滚动 */
.calculator-wrapper {
    background: #141108;
    border: 1px solid #DFCD8F;
    border-radius: 1.25rem;
    width: 75rem;
    max-width: calc(100vw - 4rem);
    max-height: 90vh;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 200, 110, 0.32) rgba(0, 0, 0, 0.18);
}

.calculator-wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.calculator-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 4px;
}

.calculator-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 200, 110, 0.32);
    border-radius: 4px;
}

.calculator-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 200, 110, 0.55);
}

.calculator-container {
    padding: 3.5rem;
    position: relative;
}

.calc-header {
    position: relative;
}

.btn-wrapper {
    text-align: end;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    z-index: 14;
    right: 2rem;
    top: -2rem;
}

#closeModalBtn {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
    margin-top: 1rem;
    cursor: pointer;
}

p.header-title {
    font-size: 2.5rem;
    /*color: #FFC86E;*/
    text-align: center;
    font-weight: 500;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(90deg, #F2DBB6 0%, #FF9E2F 100%);
    white-space: nowrap;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

p.header-title br {
    display: none;
}

.calc-body {
    display: flex;
    gap: 2.5rem;
}

/* 输入列固定基准宽度，避免数字输入框固有宽度把结果区挤窄 */
.input-group {
    display: flex;
    flex-flow: column;
    gap: 2rem;
    justify-content: space-between;
    flex: 0 0 28rem;
    min-width: 0;
}

.input-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.25rem;
}

.input-row label {
    font-size: 1.75rem;
    color: #F2DBB6;
    font-weight: 400;
    text-align: left;
    width: 100%;
}

/* 隐藏 number 输入框的默认上下箭头 */
.calc-input::-webkit-outer-spin-button,
.calc-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.calc-input[type=number] {
    -moz-appearance: textfield; /* Firefox */
    appearance: textfield;
    background: #130F0C;
    border: none;
    font-size: 1.75rem;
    color: #FFFFFF;
    text-align: center;
    width: 70%;
    /* 允许输入框收缩，避免固有宽度把输入列撑宽、挤扁结果区 */
    min-width: 0;
}

.number-input-wrapper {
    background: #130F0C;
    border: 1px solid #494431;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
    max-width: 24rem;
    padding: 0.25rem;
}

button.btn-subtract,
button.btn-add {
    background: #28221A;
    border-radius: 4px;
    color: #FFFFFF;
    font-size: 1.75rem;
    border: none;
    padding: 0.375rem 0.75rem;
    cursor: pointer;
}

small.hint-text {
    font-size: 0.8125rem;
    color: #646464;
    font-weight: 400;
}

/* 结果区吃掉剩余宽度，随弹窗整体缩放 */
.result-group {
    background: #0F0D05;
    border-radius: 1.25rem;
    padding: 2.5rem 3rem;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-flow: column;
    justify-content: space-evenly;
}

.recommendation {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: left;
    gap: 0.25rem;
    font-size: 1.5rem;
    color: #6CBFF0;
    font-weight: 400;
    white-space: nowrap;
}

.result-group .spot {
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    background: #6CBFF0;
    border-radius: 50%;
}

.cost-all {
    font-size: 1.125rem;
    color: #FFC86E;
    font-weight: 400;
    border-bottom: 1px solid #FFC86E;
    /* 超大金额时在固定宽度内换行，避免撑破结果区 */
    overflow-wrap: anywhere;
}

.cost-all span.price-value {
    font-size: 4.5rem;
    color: #FFC86E;
    font-weight: 500;
}

/* 大额数字：超过 9 位（≥100万）缩一档，超过 12 位（≥10亿）再缩一档，避免撑破布局 */
.cost-all span.price-value.is-long {
    font-size: 3rem;
}

.cost-all span.price-value.is-xlong {
    font-size: 2.25rem;
}

#recommendation-sub {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #012337;
    border-radius: 0.625rem;
    font-size: 1.125rem;
    color: #6CBFF0;
    text-align: left;
    font-weight: 400;
}

/* 推荐副文本里的价格：默认继承所在行样式，仅大额时才降档 */
#recommendation-sub span.price-value {
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
}

#recommendation-sub span.price-value.is-long {
    font-size: 0.875rem;
}

#recommendation-sub span.price-value.is-xlong {
    font-size: 0.75rem;
}

.tips-container-wrapper {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-flow: column;
    gap: 1rem;
}

.tips-container {
    background: #012337;
    border-radius: 0.625rem;
    padding: 0.25rem 0.75rem;
    margin-top: 0.5rem;
}

.tip-item {
    font-size: 1rem;
    color: #FFFFFF;
    font-weight: 400;
    padding: 0.25rem 0;
    line-height: 1.6;
}

.tip-item:not(:last-child) {
    border-bottom: 1px solid #ffffff63;
}

.input-group .tips-container {
    width: 78%;
}

#goToBuy {
    background-image: linear-gradient(172deg, #F67E0A 0%, #FFC86E 100%);
    border: 2px solid #FFD09C;
    border-radius: 2.625rem;
    font-size: 1rem;
    color: #FFFFFF;
    font-weight: 600;
    padding: 0.75rem 2rem;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
}

/* hover 状态：颜色加深 + 上浮 + 阴影 */
#goToBuy:hover {
    background-image: linear-gradient(172deg, #E56A00 0%, #F5B85A 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(246, 126, 10, 0.4);
    border-color: #FFB80C;
}

/* 点击时的按压反馈 */
#goToBuy:active {
    transform: scale(0.97);
    box-shadow: 0 2px 10px rgba(246, 126, 10, 0.2);
}