/* Shared modal surface remains a right-side drawer; first-batch update only changes color, type, border and shadow. */
.modal-mask{
  align-items:stretch!important;
  justify-content:flex-end!important;
  padding:0!important;
  background:rgba(16,24,40,.22)!important;
  backdrop-filter:blur(4px)!important;
  overflow:hidden!important;
  transition:none!important;
}
.modal-mask.active{
  visibility:visible!important;
  opacity:1!important;
}
.modal-mask.active .modal-panel{
  transform:translateX(0)!important;
}
.modal-panel{
  height:100vh!important;
  max-height:100vh!important;
  width:min(760px,calc(100vw - 28px))!important;
  max-width:min(760px,calc(100vw - 28px))!important;
  margin:0!important;
  padding:22px 22px 0!important;
  border-radius:14px 0 0 14px!important;
  border:1px solid var(--lh-border,#e5e7eb)!important;
  border-right:0!important;
  background:var(--lh-surface,#fff)!important;
  color:var(--lh-text,#1f2328)!important;
  box-shadow:var(--lh-shadow-float,0 18px 40px rgba(16,24,40,.14))!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  transform:translateX(104%)!important;
  transition:none!important;
}
#paymentModal .modal-panel{
  width:min(700px,calc(100vw - 28px))!important;
  max-width:min(700px,calc(100vw - 28px))!important;
}
.modal-panel::before,
.modal-panel::after{
  display:none!important;
  content:none!important;
}
.modal-panel h3{
  flex:0 0 auto!important;
  margin:0 0 16px!important;
  padding:0 0 14px!important;
  border-bottom:1px solid var(--lh-border,#e5e7eb)!important;
  background:none!important;
  color:var(--lh-text,#1f2328)!important;
  -webkit-text-fill-color:var(--lh-text,#1f2328)!important;
  font-size:20px!important;
  font-weight:700!important;
  line-height:1.3!important;
  letter-spacing:0!important;
}
#modalBody,
#paymentBody{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:auto!important;
  padding:0 4px 20px 0!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(152,162,179,.72) rgba(244,245,243,.9)!important;
}
#modalBody::-webkit-scrollbar,
#paymentBody::-webkit-scrollbar{
  width:8px!important;
  height:8px!important;
}
#modalBody::-webkit-scrollbar-track,
#paymentBody::-webkit-scrollbar-track{
  background:#f4f5f3!important;
  border-radius:999px!important;
}
#modalBody::-webkit-scrollbar-thumb,
#paymentBody::-webkit-scrollbar-thumb{
  background:#c7ccd3!important;
  border-radius:999px!important;
  border:2px solid #f4f5f3!important;
}
.modal-panel .btn-group{
  flex:0 0 auto!important;
  position:sticky!important;
  bottom:0!important;
  margin:0 -22px!important;
  padding:14px 22px 18px!important;
  border-top:1px solid var(--lh-border,#e5e7eb)!important;
  background:rgba(255,255,255,.96)!important;
  backdrop-filter:blur(10px)!important;
  z-index:4!important;
}
.modal-panel .modal-grid{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;
  gap:14px!important;
}
.modal-panel .detail-table-wrap{
  max-height:420px!important;
}
@media(max-width:760px){
  .modal-panel,
  #paymentModal .modal-panel{
    width:100vw!important;
    max-width:100vw!important;
    border-radius:0!important;
    padding:18px 16px 0!important;
  }
  .modal-panel .btn-group{
    margin:0 -16px!important;
    padding:14px 16px 18px!important;
  }
  .modal-panel h3{
    font-size:19px!important;
  }
}