/**
 * bitmall 跨境商城 UI 补丁样式
 * 全局生效（不依赖 Apple 风格），轻量、仅覆盖跨境相关组件
 */

/* ── Header 货币 / 语言切换器 ── */
.site-header .actions .ripro-currency-switcher,
.site-header .actions .ripro-lang-switcher {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
}

.site-header .actions .ripro-currency-select {
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid rgba(125, 125, 125, 0.35);
    background: transparent;
    color: inherit;
    font-size: 13px;
    cursor: pointer;
    max-width: 130px;
}

.site-header .actions .ripro-lang-switcher .dropdown-toggle {
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
}

/* 移动端：切换器换行到搜索栏下方，避免挤压菜单 */
@media (max-width: 991.98px) {
    .site-header .actions .ripro-currency-switcher,
    .site-header .actions .ripro-lang-switcher {
        margin: 6px 6px 0 0;
    }
}

/* ── 结算弹窗金额明细 ── */
.ripro-checkout-summary {
    border: 1px solid rgba(125, 125, 125, 0.2);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    background: rgba(125, 125, 125, 0.04);
    font-size: 14px;
}

.ripro-checkout-summary .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.ripro-checkout-summary .row.sub {
    color: #6c757d;
    font-size: 13px;
}

.ripro-checkout-summary .row.total {
    border-top: 1px dashed rgba(125, 125, 125, 0.3);
    margin-top: 6px;
    padding-top: 8px;
    font-weight: 700;
    font-size: 16px;
}

.ripro-checkout-summary .val {
    font-variant-numeric: tabular-nums;
}

/* ── 购物车侧滑价格采用等宽数字，避免跳动 ── */
.cart-item-price,
.cart-total-price {
    font-variant-numeric: tabular-nums;
}

/* ── 商品页价格统一（去掉多单位混排时的行内错位）── */
.prices-info .price-item .text-success {
    font-variant-numeric: tabular-nums;
}

/* ── 卡片「已拥有」标签：沿用加入购物车按钮外观，置灰不可点 ── */
.btn-add-cart-mini.owned-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(25, 135, 84, 0.12);
    color: #198754;
    border: 1px solid rgba(25, 135, 84, 0.35);
    font-size: 14px;
    cursor: default;
}

.btn-add-cart-mini.owned-tag:hover {
    background: rgba(25, 135, 84, 0.18);
}

/* ── 虚拟商品交付提示 ── */
.virtual-delivery-note {
    display: inline-flex;
    align-items: center;
}

/* ============================================
   移动端适配补充（默认主题同样适用，全局生效）
   ============================================ */

/* 结算 / 购物车 offcanvas 面板：ecommerce-theme.css 已设 max-width:90vw（不溢出），
   这里在极窄屏（<400px）让它占满视口，避免两侧留白过多、按钮偏挤 */
.cart-offcanvas,
.offcanvas {
    max-width: 100vw;
}
@media (max-width: 400px) {
    .cart-offcanvas-panel {
        width: 100% !important;
        max-width: 100vw !important;
    }
}

/* 税务地区选择器与优惠码输入框在结算弹窗内占满宽度，避免挤压 */
.ripro-checkout-extra .ripro-tax-country-select,
.ripro-checkout-extra .ripro-coupon-input {
    width: 100%;
}
.ripro-checkout-extra .form-group,
.ripro-checkout-extra > div {
    margin-bottom: 12px;
}

/* 窄屏下：货币/语言切换器允许换行、不挤压菜单按钮 */
@media (max-width: 575.98px) {
    .site-header .actions {
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .site-header .actions .ripro-currency-switcher,
    .site-header .actions .ripro-lang-switcher {
        margin: 2px 6px 2px 0;
    }
    .site-header .actions .ripro-currency-select {
        max-width: 110px;
    }
}

/* 金额明细面板在小屏字号收敛，防止溢出 */
@media (max-width: 400px) {
    .ripro-checkout-summary {
        font-size: 13px;
        padding: 10px 12px;
    }
    .ripro-checkout-summary .row.total {
        font-size: 15px;
    }
}

/* ============================================
   购物车「立即结算」弹窗兜底样式
   主题未引入 Bootstrap modal 的 JS/CSS（cart.js 已用轻量 bootstrap.Modal 兜底），
   这里仅作用于结算弹窗，避免引入整包 Bootstrap 与主题已有通用类冲突。
   ============================================ */
#cartCheckoutModal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1080;
    display: none;
    overflow-y: auto;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5);
    opacity: 1;
}
#cartCheckoutModal.show {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
#cartCheckoutModal .modal-dialog {
    width: 100%;
    max-width: 520px;
    margin: 4vh auto;
}
#cartCheckoutModal .modal-content {
    position: relative;
    width: 100%;
    background: #ffffff;
    color: #212529;
    border-radius: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
    background-clip: padding-box;
}
#cartCheckoutModal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e9ecef;
}
#cartCheckoutModal .modal-body {
    padding: 1.25rem;
}
#cartCheckoutModal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid #e9ecef;
}
#cartCheckoutModal .modal-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}
#cartCheckoutModal .btn-close {
    cursor: pointer;
}
/* 暗色模式下结算弹窗配色 */
html[data-bs-theme="dark"]:not(.apple-style-enabled) #cartCheckoutModal .modal-content {
    background: #20212b;
    color: #e9e9f0;
    border-color: rgba(255, 255, 255, 0.12);
}
html[data-bs-theme="dark"]:not(.apple-style-enabled) #cartCheckoutModal .modal-header,
html[data-bs-theme="dark"]:not(.apple-style-enabled) #cartCheckoutModal .modal-footer {
    border-color: rgba(255, 255, 255, 0.12);
}
/* 弹窗打开时锁定页面滚动 */
body.modal-open {
    overflow: hidden;
}

/* ============================================
   结算弹窗「支付方式」选中态
   原主题 main.min.css 仅有 .pay-item（无 .pay-item.active 规则），且 hover 为绿色；
   购物车弹窗为「先选后确认」流程，这里补充选中高亮并统一为商城红（--ri-primary）。
   ============================================ */
#cartCheckoutModal .pay-item {
    border: 1px solid #e3e3e8;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: .5rem;
    background: #fff;
    color: #5b6270;
    font-weight: 500;
    transition: all .2s ease;
}
#cartCheckoutModal .pay-item > i {
    color: #9aa0ad;
    margin-right: 8px;
    transition: color .2s ease;
}
#cartCheckoutModal .pay-item:hover {
    color: var(--ri-primary, #FF4747);
    border-color: rgba(255, 71, 71, .5);
}
#cartCheckoutModal .pay-item:hover > i { color: var(--ri-primary, #FF4747); }
#cartCheckoutModal .pay-item.active {
    color: var(--ri-primary, #FF4747);
    border-color: var(--ri-primary, #FF4747);
    background: rgba(255, 71, 71, .07);
    box-shadow: 0 0 0 3px rgba(255, 71, 71, .12);
}
#cartCheckoutModal .pay-item.active > i { color: var(--ri-primary, #FF4747); }

/* 暗色模式 */
html[data-bs-theme="dark"]:not(.apple-style-enabled) #cartCheckoutModal .pay-item {
    background: #1b1f2a;
    border-color: rgba(255, 255, 255, .1);
    color: #c7cdd9;
}
html[data-bs-theme="dark"]:not(.apple-style-enabled) #cartCheckoutModal .pay-item > i { color: #8b93a3; }
html[data-bs-theme="dark"]:not(.apple-style-enabled) #cartCheckoutModal .pay-item:hover,
html[data-bs-theme="dark"]:not(.apple-style-enabled) #cartCheckoutModal .pay-item.active {
    color: #ff6b6b;
    border-color: #ff6b6b;
    background: rgba(255, 71, 71, .14);
}
html[data-bs-theme="dark"]:not(.apple-style-enabled) #cartCheckoutModal .pay-item:hover > i,
html[data-bs-theme="dark"]:not(.apple-style-enabled) #cartCheckoutModal .pay-item.active > i { color: #ff6b6b; }