/* credit.css — วิดเจ็ตเครดิต iShip (ใช้ร่วม hub · แชท · หน้าแรก xo) — 2026-09-20 */
#creditWidget { position: relative; display: inline-block; font-family: inherit; }
.cw-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid #d1d5db; background: #f3f4f6; color: #111; font: inherit; font-size: var(--fs-sm); cursor: pointer; white-space: nowrap; }
.cw-pill b { font-weight: 800; } .cw-pill small { color: #6b7280; font-size: var(--fs-xs); }
.cw-pill.ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; } .cw-pill.ok small { color: #047857; }
.cw-pill.warn { background: #fffbeb; border-color: #fde68a; color: #92400e; } .cw-pill.warn small { color: #b45309; }
.cw-pill.bad { background: #fef2f2; border-color: #fecaca; color: #991b1b; } .cw-pill.bad small { color: #b91c1c; }
.cw-panel { position: absolute; right: 0; top: calc(100% + 6px); width: min(560px, 96vw); background: #fff; color: #111; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.18); padding: 12px 14px; z-index: 200; font-size: var(--fs-sm); text-align: left; }
.cw-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .cw-head b { font-size: var(--fs-md); } .cw-upd { color: #6b7280; font-size: var(--fs-xs); margin-left: auto; }
.cw-x { border: 0; background: none; font-size: var(--fs-md); cursor: pointer; color: #6b7280; padding: 2px 6px; }
.cw-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cw-st { background: #f9fafb; border: 1px solid #eef0f3; border-radius: 10px; padding: 6px 8px; } .cw-st small { display: block; color: #6b7280; font-size: var(--fs-xs); } .cw-st b { font-size: var(--fs-md); } .cw-st.bad b { color: #b91c1c; }
.cw-trend { margin: 8px 0; color: #374151; } .cw-trend .bad, .cw-note.bad { color: #b91c1c; }
.cw-topup { border-top: 1px dashed #e5e7eb; padding-top: 8px; margin-top: 4px; }
.cw-th { font-weight: 700; margin-bottom: 6px; }
.cw-amts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cw-btn { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid #10b981; background: #10b981; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.cw-btn:disabled { opacity: .55; cursor: wait; } .cw-btn.ghost { background: #fff; color: #374151; border-color: #d1d5db; font-weight: 600; }
.cw-custom { display: inline-flex; gap: 4px; } .cw-custom input { width: 96px; height: 32px; border: 1px solid #d1d5db; border-radius: 8px; padding: 0 8px; font: inherit; }
.cw-err { color: #b91c1c; min-height: 1em; margin-top: 4px; }
.cw-wait { display: flex; align-items: center; gap: 6px; color: #374151; margin-top: 6px; }
.cw-spin { width: 12px; height: 12px; border: 2px solid #d1d5db; border-top-color: #10b981; border-radius: 50%; animation: cwspin .8s linear infinite; display: inline-block; }
@keyframes cwspin { to { transform: rotate(360deg); } }
.cw-qr { display: flex; gap: 12px; align-items: center; } .cw-qr img { width: 180px; height: 180px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; }
.cw-qrtx { display: grid; gap: 4px; } .cw-qrtx b { font-size: var(--fs-lg); }
.cw-paid { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; border-radius: 10px; padding: 8px 10px; display: flex; gap: 8px; align-items: center; }
.cw-note { color: #6b7280; }
.cw-list { border-top: 1px dashed #e5e7eb; margin-top: 8px; padding-top: 6px; } .cw-lh { font-weight: 700; margin-bottom: 4px; } .cw-lh small { color: #6b7280; font-weight: 400; }
#cwRows { max-height: 260px; overflow: auto; }
.cw-row { display: grid; grid-template-columns: 76px 122px 1fr 74px 92px; gap: 6px; padding: 3px 0; border-bottom: 1px solid #f3f4f6; align-items: center; }
.cw-row .d { color: #6b7280; font-size: var(--fs-xs); } .cw-row .t { font-family: ui-monospace, monospace; font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; }
.cw-row .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cw-row .w { color: #6b7280; font-size: var(--fs-xs); text-align: right; }
.cw-row.go { cursor: pointer; } .cw-row.go:hover { background: #f0fdf4; }
.cw-row .w small { display: block; color: #9ca3af; }
.cw-row .a { text-align: right; font-weight: 700; } .cw-row .a small { display: block; font-weight: 600; color: #92400e; font-size: var(--fs-xs); }
.cw-row.over .a { color: #92400e; } .cw-row.over { background: #fffbeb; }
.cw-empty { color: #6b7280; padding: 6px 0; }
@media (max-width: 560px) { .cw-stats { grid-template-columns: 1fr 1fr; } .cw-row { grid-template-columns: 64px 1fr 70px; } .cw-row .n, .cw-row .w { display: none; } .cw-qr { flex-direction: column; } }
.cw-btn.cw-refresh { height: 28px; padding: 0 10px; font-size: var(--fs-xs); background: #2563eb; border-color: #2563eb; white-space: nowrap; }
.cw-btn.cw-refresh:disabled { opacity: .85; cursor: wait; background: #6b7280; border-color: #6b7280; }