/* CAMBOPOST_PAYMENT_DARK_V2_20260914
   Compact dark KHQR checkout inspired by proven local payment flows.
   Keeps CamboPost branding and current payment logic intact. */

.modalShade:has(.autoPaymentPanel){
  background:rgba(4,7,14,.78)!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
}

.subscribeModal:has(.autoPaymentPanel){
  position:relative!important;
  width:min(420px,calc(100vw - 28px))!important;
  max-height:calc(100dvh - 26px)!important;
  padding:0!important;
  overflow:auto!important;
  border:1px solid #33415f!important;
  border-radius:17px!important;
  background:#172034!important;
  color:#eef2fb!important;
  box-shadow:0 26px 70px rgba(0,0,0,.48)!important;
  scrollbar-width:none!important;
}
.subscribeModal:has(.autoPaymentPanel)::-webkit-scrollbar{display:none!important}

/* Once a payment exists, the plan checkout header collapses into only the close control. */
.subscribeModal:has(.autoPaymentPanel) .subscribeHead{
  position:absolute!important;
  inset:0 0 auto 0!important;
  z-index:12!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  pointer-events:none!important;
}
.subscribeModal:has(.autoPaymentPanel) .subscribeHead>div{display:none!important}
.subscribeModal:has(.autoPaymentPanel) .closeModal{
  position:absolute!important;
  top:13px!important;
  right:13px!important;
  width:30px!important;
  height:30px!important;
  border:0!important;
  border-radius:8px!important;
  background:transparent!important;
  color:#919bb0!important;
  font-size:22px!important;
  pointer-events:auto!important;
}
.subscribeModal:has(.autoPaymentPanel) .closeModal:hover{background:#222d45!important;color:#fff!important}

.autoPaymentPanel{
  padding:0 18px 18px!important;
  margin:0!important;
  border:0!important;
}
.autoPaymentPanel .paymentInstructionsHead{
  min-height:58px!important;
  margin:0 -18px 13px!important;
  padding:18px 50px 12px 18px!important;
  display:block!important;
  border:0!important;
  border-bottom:1px solid #2a3650!important;
  border-radius:0!important;
  background:transparent!important;
}
.autoPaymentPanel .paymentInstructionsHead>div{display:block!important}
.autoPaymentPanel .paymentInstructionsHead span,
.autoPaymentPanel .paymentInstructionsHead small,
.autoPaymentPanel .paymentInstructionsHead>strong{display:none!important}
.autoPaymentPanel .paymentInstructionsHead h3{
  margin:0!important;
  color:transparent!important;
  font-size:0!important;
  line-height:1!important;
}
.autoPaymentPanel .paymentInstructionsHead h3:after{
  content:'ABA KHQR';
  display:block!important;
  color:#aeb8d0!important;
  font-size:17px!important;
  font-weight:900!important;
  letter-spacing:.15px!important;
}
.autoPaymentPanel .paymentInstructionsHead:after{
  content:'Scan the QR below to complete your CamboPost payment';
  display:block;
  margin-top:14px;
  color:#abb3c5;
  font-size:10px;
  line-height:1.45;
  text-align:center;
}

.paymentOrderSummary{display:none!important}
.autoPaymentPanel>.paymentDue{display:none!important}

/* KHQR ticket */
.khqrCheckoutCard{
  width:198px!important;
  margin:0 auto 6px!important;
  padding:0!important;
  border-radius:12px!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.khqrCheckoutHead{
  height:39px!important;
  border-radius:10px 10px 0 0!important;
  background:#e11b22!important;
  color:#fff!important;
  font-size:18px!important;
  font-weight:950!important;
  letter-spacing:.15px!important;
}
.khqrCheckoutMeta{
  min-height:64px!important;
  padding:10px 12px 8px!important;
  border:0!important;
  border-bottom:1px dashed #c8ccd4!important;
  background:#fff!important;
  display:block!important;
}
.khqrCheckoutMeta>div span{
  color:#303743!important;
  font-size:8px!important;
  letter-spacing:.25px!important;
}
.khqrCheckoutMeta>div b{
  margin-top:4px!important;
  color:#161b25!important;
  font-size:19px!important;
  line-height:1!important;
}
.khqrCheckoutMeta>div b small{font-size:8px!important;color:#818897!important}
.khqrCheckoutMeta em{display:none!important}
.khqrCheckoutQr{
  padding:13px 15px 14px!important;
  background:#fff!important;
  border-radius:0 0 10px 10px!important;
}
.khqrCheckoutQr img{
  width:168px!important;
  max-width:100%!important;
  aspect-ratio:1!important;
  object-fit:contain!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:#fff!important;
}
.khqrCheckoutTimer{
  height:auto!important;
  margin:11px -14px 0!important;
  padding:8px 6px 2px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  border-radius:0!important;
  background:transparent!important;
  color:#a8b1c4!important;
  font-size:9px!important;
}
.khqrCheckoutTimer:before{
  content:'';
  width:13px;
  height:13px;
  border:2px solid #3c4a67;
  border-top-color:#f0b83e;
  border-radius:50%;
  animation:cpDarkPaySpin 1s linear infinite;
}
.khqrCheckoutTimer b{color:#e4e9f2!important;font-size:11px!important;letter-spacing:.25px!important}
@keyframes cpDarkPaySpin{to{transform:rotate(360deg)}}

/* Auto-check becomes one quiet status line instead of another card. */
.autoPaymentWatcher{
  margin:6px 0 2px!important;
  padding:7px 4px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  border:0!important;
  background:transparent!important;
  text-align:left!important;
}
.autoPaymentPulse{
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  border-radius:50%!important;
  background:transparent!important;
  color:#f0b83e!important;
}
.autoPaymentPulse svg{width:13px!important;height:13px!important}
.autoPaymentWatcher b{color:#dfe5f1!important;font-size:9px!important;font-weight:800!important}
.autoPaymentWatcher small{display:none!important}
.autoPaymentWatcher em{color:#ff9da7!important;font-size:7.5px!important}

/* Fallback behaves like a small help link. */
.paymentFallbackDetails{
  margin:1px 0 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  overflow:visible!important;
}
.paymentFallbackDetails>summary{
  min-height:31px!important;
  padding:6px 3px!important;
  justify-content:center!important;
  color:#8f99ad!important;
  font-size:8px!important;
  font-weight:650!important;
}
.paymentFallbackDetails>summary span{
  margin-left:4px!important;
  padding:0!important;
  background:transparent!important;
  color:#f0b83e!important;
  font-size:8px!important;
  font-weight:800!important;
  text-transform:none!important;
  letter-spacing:0!important;
}
.paymentFallbackDetails>summary:after{display:none!important}
.paymentFallbackBody{
  margin-top:4px!important;
  padding:9px!important;
  border:1px solid #303c58!important;
  border-radius:10px!important;
  background:#11192a!important;
}
.paymentFallbackHint{color:#9ba5b9!important}
.paymentFallbackBody .paymentAccountRows>div,
.paymentFallbackBody .paymentReferenceBox input{
  border-color:#35415c!important;
  background:#1c2740!important;
  color:#e9edf6!important;
}
.paymentFallbackBody .paymentReferenceBox>label,
.paymentFallbackBody .paymentAccountRows span{color:#9aa5b8!important}
.paymentFallbackBody .paymentAccountRows b{color:#eef2f8!important}

.autoPaymentPanel .paymentDoneBtn{display:none!important}
.paymentDetailsMissing{background:#222c40!important;border-color:#3a4660!important;color:#b9c2d2!important}

.autoPaymentSuccess,
.autoPaymentFailed{margin-top:74px!important}

@media(max-width:700px){
  .modalShade:has(.autoPaymentPanel){padding:10px!important;place-items:center!important}
  .subscribeModal:has(.autoPaymentPanel){
    width:min(390px,calc(100vw - 20px))!important;
    max-width:390px!important;
    max-height:calc(100dvh - 20px)!important;
    border-radius:16px!important;
  }
  .autoPaymentPanel{padding:0 15px 15px!important}
  .autoPaymentPanel .paymentInstructionsHead{margin:0 -15px 11px!important;padding:17px 45px 11px 15px!important}
  .autoPaymentPanel .paymentInstructionsHead h3:after{font-size:16px!important}
  .autoPaymentPanel .paymentInstructionsHead:after{font-size:9px!important;margin-top:12px!important}
  .khqrCheckoutCard{width:188px!important}
  .khqrCheckoutHead{height:37px!important;font-size:17px!important}
  .khqrCheckoutMeta{padding:9px 11px 8px!important}
  .khqrCheckoutQr{padding:12px 14px 13px!important}
  .khqrCheckoutQr img{width:160px!important}
}

@media(max-width:360px){
  .khqrCheckoutCard{width:180px!important}
  .khqrCheckoutQr img{width:152px!important}
}