/* ============================================================
   买页「其他支付方式」提示（2026-09-16 新增）
   目的：站内只开了 USDT(BSC) 一个通道，很多客户只有微信/支付宝。
   这里在支付方式下方显式给出人工联系入口，避免他们以为不能买。
   按约定单独成文件，便于 review 与回滚，不改 liuneng.v2.css。
   ============================================================ */

.ln-pay-alt {
    display: block;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    border-radius: 10px;
    padding: 9px 13px;
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.ln-pay-alt b { font-weight: 800; }

/* 联系方式做成可点选复制的小标签，手机上好操作 */
.ln-pay-alt .ln-pay-wx {
    display: inline-block;
    background: #dbeafe;
    border: 1px solid #93c5fd;
    border-radius: 6px;
    padding: 0 6px;
    margin-left: 2px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    letter-spacing: .02em;
    user-select: all;
    -webkit-user-select: all;
}

/* ============================================================
   支付方式卡片（2026-09-20 新增）
   原来只有一个裸 radio + "USDT (BSC)" 一行字，太单薄，
   客户看不出这就是付款方式。改成带币种图标的圆角卡片。
   图标用内联 SVG：不额外发请求，也不依赖 CDN（站点 CSP 只放行少数域名）。
   ============================================================ */

.ln-paylist { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* 两个 USDT 并排占一行、微信独占一行。
   基类的 min-width:260px 必须在这里压掉 —— 容器只有 ~420px，
   两个 260px 永远挤不进一行，会各自换行（这就是改之前全堆成一列的原因）。 */
/* order 决定视觉顺序，DOM 顺序不用动（模板里排序会炸，见 git 之外的备份注释） */
.ln-payopt--half { flex: 1 1 calc(50% - 5px); min-width: 0; padding-right: 38px; order: 1; }
.ln-payopt--full { flex: 1 1 100%; order: 2; }
.ln-payopt--half .ln-payopt-text { min-width: 0; }
.ln-payopt--half .ln-payopt-text b,
.ln-payopt--half .ln-payopt-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-payopt--half .ln-payopt-text small { font-size: 11px; }
@media (max-width: 560px) {
  .ln-payopt--half { flex-basis: 100%; }      /* 手机上还是一行一个，别挤 */
}

.ln-payopt {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-width: 260px; padding: 12px 44px 12px 14px;
  border: 1.5px solid #e7e9ee; border-radius: 14px; background: #fff;
  cursor: pointer; transition: .16s ease; margin: 0;
}
.ln-payopt:hover { border-color: #c8ccd4; box-shadow: 0 2px 10px rgba(16,24,40,.06); }

/* 原生 radio 藏起来但保留在 DOM 里 —— 表单仍按 name=payway 提交 */
.ln-payopt > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.ln-payopt:has(> input:checked) { border-color: #0b0b0c; background: #fafafa; }
.ln-payopt:has(> input:focus-visible) { outline: 2px solid #2563eb; outline-offset: 2px; }

.ln-payopt-icons { display: inline-flex; flex: 0 0 auto; }
.ln-coin { width: 26px; height: 26px; display: block; }
.ln-coin + .ln-coin { margin-left: -8px; }   /* 轻微叠放，像一组币种标 */

.ln-payopt-text { display: flex; flex-direction: column; line-height: 1.35; }
.ln-payopt-text b { font-size: 14px; font-weight: 700; color: #0b0b0c; }
.ln-payopt-text small { font-size: 12px; color: #6b7280; }

/* 选中勾：用 CSS 画，避免再引一个图标字体 */
.ln-payopt-tick {
  position: absolute; right: 14px; top: 50%; width: 18px; height: 18px;
  margin-top: -9px; border: 1.5px solid #d1d5db; border-radius: 50%; transition: .16s;
}
.ln-payopt:has(> input:checked) .ln-payopt-tick { border-color: #0b0b0c; background: #0b0b0c; }
.ln-payopt:has(> input:checked) .ln-payopt-tick::after {
  content: ""; position: absolute; left: 5px; top: 2px;
  width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 不支持 :has() 的旧浏览器：卡片仍可点，只是没有选中态高亮 */
@supports not selector(:has(*)) {
  .ln-payopt > input[type="radio"] { position: static; opacity: 1; pointer-events: auto; }
  .ln-payopt-tick { display: none; }
}

@media (max-width: 480px) {
  .ln-payopt { min-width: 100%; }
  .ln-payopt--half { min-width: 100%; }
}

/* ══════════════ 微信内置浏览器 ══════════════
   微信不允许站外网页在微信内调起支付，所以微信里必须提前禁用微信支付。
   .ln-wxtip / .is-blocked 这两个类一直在 buy.blade.php 里用着，但从没写过样式：
   禁用态看起来和正常态一模一样，客户只会觉得「点不动」，不知道为什么。
   ══════════════════════════════════════ */

/* 顶部横幅：客户多半是从微信聊天点链接进来的，第一屏就要说清楚该怎么办，
   而不是等他滚到支付方式才发现微信支付是灰的。 */
.ln-wxbar {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 12px 0 0; padding: 14px 16px;
  border-radius: 14px; background: #fffbeb; border: 1px solid #fde68a;
  color: #92400e; font-size: 13.5px; line-height: 1.7;
}
.ln-wxbar-icon {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px;
  border-radius: 50%; background: #f59e0b; color: #fff;
  font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.ln-wxbar b { font-weight: 800; }
/* 主题把列表符号全局压掉了，这里显式写回来，否则「两种办法」底下
   两条会变成没有序号的悬挂缩进，看着像排版坏了 */
.ln-wxbar-steps { margin: 6px 0 0; padding-left: 20px; list-style: decimal; }
.ln-wxbar-steps li { margin: 2px 0; display: list-item; list-style: decimal; }

/* 被禁用的支付方式要一眼看出不可选 */
.ln-payopt.is-blocked {
  opacity: .55; filter: grayscale(1); cursor: not-allowed;
  border-style: dashed; background: #fafafa;
}
.ln-payopt.is-blocked:hover { border-color: #e7e9ee; box-shadow: none; }

.ln-wxtip {
  margin: 8px 0 0; padding: 10px 12px; border-radius: 10px;
  background: #fffbeb; color: #92400e; font-size: 12.5px; line-height: 1.7;
}
.ln-wxtip b { font-weight: 800; }