/* ===== Viewcard Modal (popup) ===== */
.viewcard-modal{
  position: fixed;
  inset: 0;
  display: none;                 /* จะถูกเปิดด้วย JS -> display:flex */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);   /* ฉากมืด */
  z-index: 3000;                 /* สูงกว่า header ที่ z=1000 */
  padding: 16px;
}
.viewcard-modal[aria-hidden="true"]{ display:none; }

.viewcard-wrap{
  width: min(720px, 92vw);
  max-height: 90vh;
  overflow: auto;
  border-radius: 16px;
  background: #12131a;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.viewcard-content{
  position: relative;
  padding: 16px;
}

.viewcard-close{
  position: absolute;
  right: 12px; top: 8px;
  font-size: 26px; line-height: 1;
  cursor: pointer;
  color: #fff; opacity: .85;
}
.viewcard-close:hover{ opacity: 1; }

.viewcard-field{
  margin: 10px 0 12px;
}
.viewcard-field label{
  display: block;
  font-weight: 800;
  font-size: 12px;
  opacity: .85;
  margin-bottom: 6px;
}

/* กล่อง input + ปุ่ม copy */
.viewcard-copygroup{
  display: flex;
  gap: 8px;
}
.viewcard-copygroup input{
  flex: 1;
  background: #0f1118;
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
}
.viewcard-copygroup button{
  background: #0ea5ff;
  color: #000;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 900;
  cursor: pointer;
}
.viewcard-copygroup button:hover{
  filter: brightness(1.06);
}

/* ปุ่มปิดด้านล่าง */
.viewcard-btn-close{
  width: 100%;
  margin-top: 8px;
  background: #22263a;
  color: #e9ecff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
}
.viewcard-btn-close:hover{ filter: brightness(1.06); }

/* เล็กลงบนมือถือ */
@media (max-width: 600px){
  .viewcard-content{ padding: 14px; }
  .viewcard-copygroup{ flex-direction: column; }
  .viewcard-copygroup button{ width: 100%; }
}
/* ===== Buy History V2: payment metadata / view switch / export ===== */
.history-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:10px 0 12px;flex-wrap:wrap}
.view-switch{display:inline-flex;gap:6px;padding:4px;background:#111522;border:1px solid rgba(255,255,255,.1);border-radius:12px}
.tool-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:8px 12px;border-radius:9px;border:1px solid transparent;background:transparent;color:#cfd6ee;font-weight:800;cursor:pointer}
.tool-btn:hover{background:rgba(255,255,255,.06);color:#fff}.tool-btn.is-active{background:#242a3d;border-color:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.export-btn{background:linear-gradient(135deg,#0f5fff,#4338ca);color:#fff;box-shadow:0 8px 20px rgba(15,95,255,.24)}
.export-btn:hover{filter:brightness(1.08)}
.line-fees{color:#7dd3fc;font-weight:800;font-size:13px}.line-total{color:#c7d2fe;margin-left:4px}.line-payment{font-size:13px;color:#d9def5;font-weight:700}
.payment-pill{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;background:rgba(99,102,241,.14);border:1px solid rgba(129,140,248,.32);color:#c7d2fe;font-size:11px;font-weight:900;white-space:nowrap}
.orders-table-wrap{background:#121624;border:1px solid rgba(255,255,255,.09);border-radius:16px;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.22)}
.table-scroll{overflow:auto;max-width:100%}.orders-table{width:100%;border-collapse:separate;border-spacing:0;min-width:1100px;color:#e9ecff;font-size:12px}
.orders-table thead th{position:sticky;top:0;z-index:2;background:#1a1f30;color:#aeb8d4;text-align:left;padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.1);font-weight:900;white-space:nowrap}
.orders-table tbody td{padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.065);vertical-align:middle}.orders-table tbody tr:hover{background:rgba(255,255,255,.035)}
.orders-table .num{text-align:right;font-variant-numeric:tabular-nums}.order-cell{font-weight:900;color:#fff}.date-cell{white-space:nowrap;color:#aab3cc}.uid-cell{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ff75c8}.table-product{font-weight:900;color:#ffae4a}.table-product-sub{font-size:11px;color:#aeb7cf;margin-top:2px}.price-cell{color:#77f2a4;font-weight:900}.fee-cell{color:#7dd3fc;font-weight:900}.total-cell{color:#fff;font-weight:900}.table-empty{text-align:center!important;padding:30px!important;color:#a7afc9}.table-action{width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:#7c3aed;color:#fff;text-decoration:none}.table-status{display:inline-flex;padding:4px 8px;border-radius:999px;color:#fff;font-weight:900;font-size:11px}.table-status.status-pending{background:#0ea5ff}.table-status.status-success{background:#16a34a}.table-status.status-cancel{background:#ef4444}
.table-status-stack{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:150px}
.table-finish-time{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;background:linear-gradient(135deg,#0f5fff,#4338ca);border:1px solid rgba(125,211,252,.45);color:#e0f2fe;font-size:11px;font-weight:900;line-height:1;white-space:nowrap;box-shadow:0 4px 12px rgba(15,95,255,.18)}
.table-finish-time i{font-size:10px;color:#bfdbfe}
.history-modal{position:fixed;inset:0;z-index:12000;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;visibility:hidden;transition:.18s ease}.history-modal.is-open{opacity:1;visibility:visible}
.history-modal-card{position:relative;width:min(520px,96vw);background:linear-gradient(180deg,#171b2b,#0f1320);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:20px;box-shadow:0 24px 70px rgba(0,0,0,.5);color:#fff}.history-modal-close{position:absolute;right:12px;top:10px;width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:#202538;color:#fff;font-size:22px;cursor:pointer}.history-modal-title{font-size:18px;font-weight:900;display:flex;gap:9px;align-items:center;padding-right:40px}.history-modal-sub{font-size:12px;color:#9da8c5;margin-top:4px}
.export-format-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.format-card{display:flex;align-items:center;justify-content:center;gap:9px;min-height:68px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#101522;color:#cfd6ee;font-weight:900;cursor:pointer}.format-card input{display:none}.format-card i{font-size:20px}.format-card.is-selected{border-color:#6366f1;background:rgba(99,102,241,.14);box-shadow:inset 0 0 0 1px rgba(99,102,241,.2)}
.export-date-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.export-date-grid label{font-size:12px;color:#aeb7cf;font-weight:800}.export-date-grid input{width:100%;margin-top:6px;background:#0d111c;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px;outline:none;color-scheme:dark}.export-date-grid input:focus{border-color:#6366f1;box-shadow:0 0 0 2px rgba(99,102,241,.15)}
.export-status-box{margin-top:14px;padding:12px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.025)}.export-label{font-size:12px;font-weight:900;color:#aeb7cf;margin-bottom:9px}.check-chip{display:inline-block;margin:0 7px 7px 0;cursor:pointer}.check-chip input{display:none}.check-chip span{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.11);color:#9da8c5;font-size:12px;font-weight:800}.check-chip input:checked+span{background:rgba(22,163,74,.13);border-color:rgba(74,222,128,.35);color:#86efac}.check-chip:last-child input:checked+span{background:rgba(239,68,68,.12);border-color:rgba(248,113,113,.35);color:#fca5a5}
.export-error{min-height:18px;margin-top:8px;color:#fca5a5;font-size:12px;font-weight:800}.history-modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:8px}.modal-btn{border:0;border-radius:10px;padding:10px 14px;font-weight:900;cursor:pointer}.modal-btn.secondary{background:#252a3c;color:#fff;border:1px solid rgba(255,255,255,.1)}.modal-btn.primary{background:linear-gradient(135deg,#0f5fff,#4338ca);color:#fff}.modal-btn:disabled{opacity:.65;cursor:not-allowed}
@media(max-width:640px){.history-tools{align-items:stretch}.view-switch{flex:1}.view-switch .tool-btn{flex:1}.export-btn{flex:1}.export-date-grid{grid-template-columns:1fr}.history-modal-card{padding:18px 14px}.orders-table-wrap{border-radius:12px}}


/* ===== Buy History V3: page size + lifetime summary ===== */
.history-tools-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.page-size-control{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:4px 5px 4px 11px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#111522;color:#aeb7cf;font-size:12px;font-weight:800}
.page-size-control select{
  min-width:74px;
  height:36px;
  padding:0 34px 0 11px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.12);
  background-color:#202538;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23aeb7cf' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
  background-size:12px 8px;
  color:#fff;
  font-family:inherit;
  font-size:13px;
  font-weight:900;
  outline:none;
  cursor:pointer;
  color-scheme:dark;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
}
.page-size-control select::-ms-expand{display:none}
.page-size-control select:hover{border-color:rgba(255,255,255,.22);background-color:#252b40}
.page-size-control select:focus{border-color:#6366f1;box-shadow:0 0 0 2px rgba(99,102,241,.15)}
.page-size-control select option{background:#202538;color:#fff;font-family:inherit;font-weight:800}
.history-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:4px 0 14px}
.history-stat-card{display:flex;align-items:center;gap:13px;min-height:96px;padding:16px;border-radius:16px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(145deg,#161b2a,#111522);box-shadow:0 10px 28px rgba(0,0,0,.18);overflow:hidden;position:relative}
.history-stat-card.primary{background:linear-gradient(145deg,rgba(15,95,255,.22),rgba(67,56,202,.16)),#121725;border-color:rgba(99,102,241,.32)}
.history-stat-icon{flex:0 0 46px;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:rgba(99,102,241,.14);border:1px solid rgba(129,140,248,.22);color:#c7d2fe;font-size:18px}
.history-stat-card.primary .history-stat-icon{background:rgba(59,130,246,.18);color:#bfdbfe}
.history-stat-label{font-size:12px;color:#aeb7cf;font-weight:800;margin-bottom:3px}
.history-stat-value{font-size:22px;line-height:1.1;color:#fff;font-weight:950;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.history-stat-sub{margin-top:4px;font-size:10px;color:#7f8aa8;font-weight:700}
@media(max-width:820px){.history-stats{grid-template-columns:1fr}.history-stat-card{min-height:82px}.history-tools-left{width:100%}.page-size-control{margin-left:auto}}
@media(max-width:520px){.history-tools-left{display:grid;grid-template-columns:1fr 1fr}.view-switch{width:100%}.page-size-control{width:100%;margin:0;justify-content:space-between}.page-size-control select{min-width:70px}.history-stat-value{font-size:20px}}

/* ===== Buy History V5: search mode + today summary ===== */
.history-search-panel{
  margin:4px 0 14px;
  padding:14px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  background:linear-gradient(145deg,#141927,#101522);
  box-shadow:0 10px 28px rgba(0,0,0,.16);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.history-search-panel.is-active{
  border-color:rgba(96,165,250,.38);
  background:linear-gradient(145deg,rgba(15,95,255,.10),rgba(67,56,202,.08)),#111624;
  box-shadow:0 12px 34px rgba(15,95,255,.10);
}
.history-search-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.history-search-title{display:flex;align-items:center;gap:8px;color:#eef2ff;font-size:14px;font-weight:900}
.history-search-title i{color:#7dd3fc}
.history-search-sub{margin-top:3px;color:#7f8aa8;font-size:11px;font-weight:700}
.history-search-mode{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;background:rgba(37,99,235,.16);border:1px solid rgba(96,165,250,.34);color:#bfdbfe;font-size:11px;font-weight:900;white-space:nowrap}
.history-search-mode[hidden]{display:none!important}
.history-search-grid{display:grid;grid-template-columns:170px 170px minmax(220px,1fr) auto;gap:10px;align-items:end}
.history-search-field{display:flex;flex-direction:column;gap:6px;min-width:0;color:#aeb7cf;font-size:11px;font-weight:900}
.history-search-field>span{display:flex;align-items:center;justify-content:space-between;gap:6px}
.history-search-field small{color:#65708f;font-size:9px;font-weight:800;letter-spacing:.3px}
.history-search-field input{
  width:100%;height:40px;padding:0 11px;
  border:1px solid rgba(255,255,255,.11);border-radius:10px;
  background:#0d111c;color:#fff;font:800 12px "Noto Sans Thai",system-ui,sans-serif;
  outline:none;color-scheme:dark;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.history-search-field input::placeholder{color:#65708f;font-weight:700}
.history-search-field input:hover{border-color:rgba(255,255,255,.20);background:#101625}
.history-search-field input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.15);background:#101625}
.history-search-actions{display:flex;align-items:center;gap:7px}
.history-search-btn{height:40px;padding:0 13px;border-radius:10px;border:1px solid transparent;font-family:inherit;font-size:12px;font-weight:900;cursor:pointer;white-space:nowrap;transition:filter .18s ease,transform .18s ease,border-color .18s ease}
.history-search-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.history-search-btn.primary{background:linear-gradient(135deg,#0f5fff,#4338ca);color:#fff;box-shadow:0 7px 18px rgba(15,95,255,.20)}
.history-search-btn.secondary{background:#202538;border-color:rgba(255,255,255,.10);color:#dbe2f7}
.history-search-error{min-height:16px;margin-top:7px;color:#fca5a5;font-size:11px;font-weight:800}

.history-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.history-stat-card.today{background:linear-gradient(145deg,rgba(16,185,129,.15),rgba(5,150,105,.07)),#121725;border-color:rgba(52,211,153,.25)}
.history-stat-card.today .history-stat-icon{background:rgba(16,185,129,.13);border-color:rgba(52,211,153,.22);color:#a7f3d0}

@media(max-width:1050px){
  .history-search-grid{grid-template-columns:1fr 1fr}
  .history-search-uid{grid-column:1 / 2}
  .history-search-actions{grid-column:2 / 3;justify-content:flex-end}
  .history-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .history-search-panel{padding:12px}
  .history-search-head{align-items:center}
  .history-search-sub{max-width:230px}
  .history-search-grid{grid-template-columns:1fr}
  .history-search-uid,.history-search-actions{grid-column:auto}
  .history-search-actions{justify-content:stretch}
  .history-search-btn{flex:1}
  .history-stats{grid-template-columns:1fr}
}


/* ===== Buy History Table: order note ===== */
.table-order-note{
  margin-top:4px;
  color:#f87171;
  font-size:10.5px;
  font-weight:800;
  line-height:1.35;
  white-space:normal;
  overflow-wrap:anywhere;
}
.table-order-note-label{
  color:#fb7185;
  font-weight:900;
}