/* intentionally empty: old public override styles removed to prevent collisions */

/* ===== FIX 2026-05-26: live detail order + riwayat responsif HP ===== */
body.cx-order-open{overflow:hidden;}
.cx-live-order-page{z-index:1900;}
.cx-live-order-page .cx-order-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.cx-live-order-page .cx-order-actions .btn{min-height:44px;border-radius:16px;}
.cx-live-order-page .cx-order-summary{align-content:start;}
.cx-live-order-page .cx-order-kv{min-width:0;}
.cx-live-order-page .cx-order-kv b{max-width:100%;overflow-wrap:anywhere;}
.cx-live-order-page .cx-order-back{white-space:nowrap;}

#historyCards .history-table-wrap,
#publicTxList .history-table-wrap{max-width:100%;}
#historyCards .history-order-table,
#publicTxList .history-order-table{table-layout:auto;}
#historyCards .history-item-cell,
#publicTxList .history-item-cell{min-width:150px;}
#historyCards .history-actions-inline{align-items:center;}
#historyCards .h-btn,
#publicTxList .h-btn{font-weight:900;cursor:pointer;}

@media (max-width:640px){
  .cx-live-order-page{padding:82px 10px 100px!important;}
  .cx-live-order-page .cx-order-shell{width:100%;}
  .cx-live-order-page .cx-order-hero{display:grid!important;grid-template-columns:1fr;gap:12px;margin-bottom:12px;}
  .cx-live-order-page .cx-order-title p{font-size:11px;margin:0 0 4px;}
  .cx-live-order-page .cx-order-title h1{font-size:28px;line-height:1.05;}
  .cx-live-order-page .cx-order-back{width:100%;min-height:44px;}
  .cx-live-order-page .cx-order-grid{grid-template-columns:1fr!important;gap:12px;}
  .cx-live-order-page .cx-order-panel{padding:16px;border-radius:22px;}
  .cx-live-order-page .cx-order-statusbar{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:12px;}
  .cx-live-order-page .cx-order-badge{justify-content:center;width:100%;min-height:34px;}
  .cx-live-order-page .cx-order-time{text-align:center;font-size:12px;}
  .cx-live-order-page .cx-order-step{padding:10px;border-radius:15px;}
  .cx-live-order-page .cx-order-step b{font-size:13px;}
  .cx-live-order-page .cx-order-step small{font-size:11px;line-height:1.35;}
  .cx-live-order-page .cx-order-message{font-size:13px;padding:13px;border-radius:16px;}
  .cx-live-order-page .cx-order-actions{display:grid;grid-template-columns:1fr;gap:8px;}
  .cx-live-order-page .cx-order-actions .btn{width:100%;justify-content:center;}
  .cx-live-order-page .cx-order-summary h2{font-size:20px;}
  .cx-live-order-page .cx-order-kv{display:grid!important;gap:6px;text-align:left;padding:12px;border-radius:15px;}
  .cx-live-order-page .cx-order-kv span{font-size:11px;}
  .cx-live-order-page .cx-order-kv b{text-align:left;font-size:13px;}

  #historyCards.history-cards,
  #publicTxList.public-tx-list{gap:12px;}
  #historyCards .history-table-wrap,
  #publicTxList .history-table-wrap{overflow:visible!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;}
  #historyCards .history-order-table,
  #publicTxList .history-order-table,
  #historyCards .history-order-table thead,
  #publicTxList .history-order-table thead,
  #historyCards .history-order-table tbody,
  #publicTxList .history-order-table tbody,
  #historyCards .history-order-table tr,
  #publicTxList .history-order-table tr,
  #historyCards .history-order-table td,
  #publicTxList .history-order-table td{display:block!important;width:100%!important;min-width:0!important;}
  #historyCards .history-order-table thead,
  #publicTxList .history-order-table thead{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;}
  #historyCards .history-order-table tr,
  #publicTxList .history-order-table tr{margin:0 0 12px!important;padding:14px!important;border:1px solid #e6eef9!important;border-radius:22px!important;background:#fff!important;box-shadow:0 12px 28px rgba(31,61,108,.08)!important;}
  #historyCards .history-order-table td,
  #publicTxList .history-order-table td{border:0!important;padding:8px 0!important;color:#263753!important;}
  #historyCards .history-order-table td::before,
  #publicTxList .history-order-table td::before{display:block;margin-bottom:4px;color:#72819a;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.09em;}
  #historyCards .history-order-table td:nth-child(1)::before{content:"Order ID";}
  #historyCards .history-order-table td:nth-child(2)::before{content:"Waktu";}
  #historyCards .history-order-table td:nth-child(3)::before{content:"Produk";}
  #historyCards .history-order-table td:nth-child(4)::before{content:"Harga";}
  #historyCards .history-order-table td:nth-child(5)::before{content:"Status";}
  #historyCards .history-order-table td:nth-child(6)::before{content:"Aksi";}
  #publicTxList .history-order-table td:nth-child(1)::before{content:"Email";}
  #publicTxList .history-order-table td:nth-child(2)::before{content:"Waktu";}
  #publicTxList .history-order-table td:nth-child(3)::before{content:"Produk";}
  #publicTxList .history-order-table td:nth-child(4)::before{content:"Harga";}
  #publicTxList .history-order-table td:nth-child(5)::before{content:"Status";}
  #historyCards .history-order-table td strong,
  #publicTxList .history-order-table td strong{display:block;overflow-wrap:anywhere;font-size:13px;line-height:1.35;}
  #historyCards .history-item-cell,
  #publicTxList .history-item-cell{font-weight:850;line-height:1.35;overflow-wrap:anywhere;}
  #historyCards .history-price-cell,
  #publicTxList .history-price-cell{font-size:16px;font-weight:900;color:#4b8ef1!important;}
  #historyCards .history-actions-inline{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;width:100%;}
  #historyCards .history-actions-inline .h-btn{width:100%;min-height:42px;border-radius:14px;padding:0 10px;}
  #historyCards .status-badge,
  #publicTxList .status-badge{min-height:28px;max-width:100%;white-space:normal;text-align:left;}
  #pagContainer.pagination-container{margin-top:10px;gap:8px;}
  #pagContainer .pager-btn{min-height:38px;border-radius:14px;}
}

@media (max-width:380px){
  #historyCards .history-actions-inline{grid-template-columns:1fr;}
  .cx-live-order-page .cx-order-title h1{font-size:25px;}
}

/* ===== FIX 2026-05-26: animasi live processing + sukses tanpa tombol cek status ===== */
.cx-live-order-page .cx-order-step.on{
  background:linear-gradient(135deg,#eef7ff,#fff);
  border:1px solid rgba(75,142,241,.22);
  box-shadow:0 10px 24px rgba(75,142,241,.10);
}
.cx-live-order-page .cx-order-step.on .cx-order-dot{
  animation:cxLivePulse 1.05s ease-in-out infinite;
}
.cx-live-order-page .cx-order-step.done .cx-order-dot::after{
  content:"✓";
  display:grid;
  place-items:center;
  width:16px;
  height:16px;
  color:#fff;
  font-size:10px;
  font-weight:900;
}
.cx-live-order-page .cx-order-message.cx-spinner-line{
  position:relative;
  overflow:hidden;
}
.cx-live-order-page .cx-order-message.cx-spinner-line::after{
  content:"";
  position:absolute;
  inset:0 auto 0 -40%;
  width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:cxLiveSweep 1.45s linear infinite;
}
.cx-live-complete{
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:18px;
  background:#e8fff6;
  color:#047857;
  font-weight:900;
}
.cx-live-complete .material-symbols-outlined{font-size:24px;}
@keyframes cxLivePulse{
  0%,100%{box-shadow:0 0 0 5px #edf6ff,0 0 0 0 rgba(75,142,241,.35);transform:scale(1);}
  50%{box-shadow:0 0 0 5px #edf6ff,0 0 0 8px rgba(75,142,241,0);transform:scale(1.08);}
}
@keyframes cxLiveSweep{to{left:110%;}}
.cx-live-running{
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:18px;
  background:#eef7ff;
  color:#2563eb;
  font-weight:900;
}
.cx-live-running .material-symbols-outlined{font-size:24px;animation:spin 1s linear infinite;}

/* ===== FIX 2026-05-26: modal Chrome lebih kecil + scroll aman ===== */
.modal{
  padding:14px!important;
  align-items:center!important;
  justify-content:center!important;
}
.modal .modal-panel{
  width:min(480px,calc(100vw - 34px))!important;
  max-width:calc(100vw - 34px)!important;
  max-height:min(86vh,calc(100dvh - 34px))!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  border-radius:26px!important;
  padding:22px!important;
  box-sizing:border-box!important;
}
.modal .modal-panel-wide,
#detailModal .modal-panel,
#resultModal .modal-panel{
  width:min(640px,calc(100vw - 34px))!important;
}
#cartModal .modal-panel{
  width:min(560px,calc(100vw - 34px))!important;
}
.modal .modal-panel h3{
  font-size:22px!important;
  line-height:1.12!important;
  margin-right:42px!important;
}
.modal .modal-close{
  width:36px!important;
  height:36px!important;
  right:14px!important;
  top:14px!important;
}
#detailContent,
#resultExtra,
#cartList{
  max-width:100%!important;
  overflow-wrap:anywhere!important;
}
.detail-actions,
.modal-actions,
.cart-actions,
.cx-cancel-actions{
  gap:8px!important;
  flex-wrap:wrap!important;
}
.cx-order-badge.processing-live{
  background:linear-gradient(135deg,#fef3c7,#f59e0b)!important;
  color:#5c3700!important;
  border:1px solid rgba(180,83,9,.22)!important;
  box-shadow:0 10px 24px rgba(245,158,11,.18)!important;
}

@media (max-width:800px){
  .modal{
    padding:10px!important;
    align-items:center!important;
  }
  .modal .modal-panel,
  #loginModal .modal-panel,
  #cartModal .modal-panel,
  #detailModal .modal-panel,
  #resultModal .modal-panel,
  .modal .modal-panel-wide{
    width:min(430px,calc(100vw - 20px))!important;
    max-width:calc(100vw - 20px)!important;
    max-height:calc(100dvh - 22px)!important;
    border-radius:22px!important;
    padding:18px 14px!important;
    margin:0!important;
  }
  .modal .modal-panel h3{
    font-size:20px!important;
    line-height:1.12!important;
    margin-bottom:8px!important;
  }
  .modal-copy,
  .modal .modal-panel p,
  .modal .history-table span,
  .modal .history-table b{
    font-size:12px!important;
    line-height:1.35!important;
  }
  .detail-actions .btn,
  #btnCheckStatusModal,
  #btnResultCheck,
  .modal .btn{
    min-height:42px!important;
    border-radius:15px!important;
    font-size:13px!important;
  }
  #detailContent .history-table,
  .history-table{
    gap:8px!important;
  }
}

@media (max-width:380px){
  .modal{
    padding:8px!important;
  }
  .modal .modal-panel,
  #loginModal .modal-panel,
  #cartModal .modal-panel,
  #detailModal .modal-panel,
  #resultModal .modal-panel,
  .modal .modal-panel-wide{
    width:calc(100vw - 16px)!important;
    max-width:calc(100vw - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
    padding:16px 12px!important;
    border-radius:20px!important;
  }
}

/* FIX 2026-05-26: modal nomor HP sebelum invoice */
.checkout-phone-panel{max-width:420px!important;width:min(92vw,420px)!important;padding:22px!important;border-radius:24px!important;max-height:88vh!important;overflow:auto!important}
.checkout-phone-panel h3{margin:4px 0 8px!important;font-size:22px!important;line-height:1.2!important}
.checkout-phone-field{display:grid!important;gap:8px!important;margin-top:14px!important;color:#4f607a!important;font-weight:900!important}
.checkout-phone-field input{width:100%!important;height:50px!important;border:1px solid #dbeafe!important;border-radius:16px!important;background:#fff!important;padding:0 14px!important;outline:0!important;color:#253553!important;font-weight:800!important;font-size:15px!important;box-sizing:border-box!important}
.checkout-phone-field input:focus{border-color:#4b8ef1!important;box-shadow:0 0 0 4px rgba(75,142,241,.14)!important}
.checkout-phone-field input.is-invalid{border-color:#ef4444!important;box-shadow:0 0 0 4px rgba(239,68,68,.13)!important}
.checkout-phone-hint{margin-top:9px!important;color:#64748b!important;font-size:13px!important;line-height:1.45!important}
.checkout-phone-hint.is-error{color:#dc2626!important;font-weight:800!important}
.checkout-phone-actions{display:flex!important;gap:10px!important;margin-top:18px!important;flex-wrap:wrap!important}
.checkout-phone-actions .btn{flex:1 1 140px!important;min-height:46px!important}
@media(max-width:540px){.checkout-phone-panel{width:min(90vw,360px)!important;max-height:82vh!important;padding:18px!important;border-radius:20px!important}.checkout-phone-panel h3{font-size:20px!important}.checkout-phone-field input{height:48px!important;font-size:14px!important}.checkout-phone-actions{gap:8px!important}.checkout-phone-actions .btn{min-height:44px!important;font-size:13px!important}}

/* ===== FIX 2026-05-26: pending payment hanya tampil Verifikasi Pembayaran ===== */
.cx-live-order-page .cx-order-step.payment-only{
  min-height:58px;
}
.cx-live-order-page .cx-order-step.payment-only small::after{
  content:" — otomatis dialihkan ke pembayaran";
}