/* CAMBOPOST_AUTO_PAYMENT_UI_V1_20260914
   Auto-first payment shell: compact, PayWay-ready, manual review hidden as fallback. */
.subscribeModal:has(.autoPaymentPanel){
  width:min(560px,calc(100vw - 32px))!important;
  max-height:calc(100dvh - 32px)!important;
  padding:18px 20px 20px!important;
  border-radius:20px!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin!important;
}
.subscribeModal:has(.autoPaymentPanel) .subscribeHead{
  margin-bottom:10px!important;
  padding-bottom:12px!important;
  border-bottom:1px solid #eceef4!important;
}
.autoPaymentPanel{margin-top:0!important;padding-top:0!important;border-top:0!important}
.autoPaymentPanel .paymentInstructionsHead{padding:0 0 2px!important;background:transparent!important;border:0!important}
.autoPaymentPanel .paymentInstructionsHead span{font-size:7px!important;letter-spacing:1.25px!important}
.autoPaymentPanel .paymentInstructionsHead h3{font-size:20px!important;line-height:1.1!important;margin:3px 0 0!important}
.autoPaymentPanel .paymentInstructionsHead small{font-size:9px!important;margin-top:4px!important}
.autoPaymentPanel .paymentInstructionsHead>strong{font-size:8px!important;padding:6px 9px!important}
.autoPaymentPanel .paymentInstructionsHead>strong.awaiting{background:#fff6dd!important;color:#a06b00!important}
.autoPaymentPanel .paymentInstructionsHead>strong.submitted{background:#eef4ff!important;color:#356fd7!important}
.autoPaymentPanel .paymentInstructionsHead>strong.paid{background:#eaf9ef!important;color:#21844a!important}
.autoPaymentPanel .paymentInstructionsHead>strong.failed{background:#fff0f1!important;color:#ba4350!important}
.paymentOrderSummary{margin:10px 0 8px!important;padding:9px 11px!important;border:1px solid #eceef4!important;border-radius:11px!important;background:#fafbfe!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;color:#697182!important}
.paymentOrderSummary span{font-size:8px!important;line-height:1.25!important;min-width:0!important}
.paymentOrderSummary span:last-child{max-width:48%!important;text-align:right!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:#7a5be7!important;font-weight:800!important}
.paymentOrderSummary b{font-size:9px!important;color:#293042!important}
.autoPaymentPanel .paymentDue{margin:8px 0 10px!important;padding:10px 12px!important;border-radius:11px!important}
.autoPaymentPanel .paymentDue span{font-size:8px!important}
.autoPaymentPanel .paymentDue b{font-size:19px!important}
.autoPaymentPanel .paymentQrWrap{margin:8px auto 9px!important;gap:5px!important}
.autoPaymentPanel .paymentQrWrap img{width:min(190px,45vw)!important;padding:6px!important;border-radius:13px!important;box-shadow:0 8px 24px rgba(36,40,62,.06)!important}
.autoPaymentPanel .paymentQrWrap span{font-size:8px!important;color:#737b8c!important}
.autoPaymentWatcher{display:flex!important;align-items:center!important;gap:10px!important;margin:8px 0!important;padding:10px 11px!important;border:1px solid #e3e5f2!important;border-radius:12px!important;background:#f8f7ff!important}
.autoPaymentWatcher.verifying{background:#f4f8ff!important;border-color:#dce7fa!important}
.autoPaymentPulse{width:30px!important;height:30px!important;flex:0 0 30px!important;display:grid!important;place-items:center!important;border-radius:9px!important;background:#ede8ff!important;color:#6c4ce6!important}
.autoPaymentPulse svg{animation:cpPaymentSpin 2.2s linear infinite}
.autoPaymentWatcher b,.autoPaymentWatcher small,.autoPaymentWatcher em{display:block!important}
.autoPaymentWatcher b{font-size:9.5px!important;color:#2f3545!important}
.autoPaymentWatcher small{font-size:8px!important;color:#7e8695!important;margin-top:2px!important;line-height:1.35!important}
.autoPaymentWatcher em{font-size:7.5px!important;color:#bd5a64!important;margin-top:3px!important;font-style:normal!important}
@keyframes cpPaymentSpin{to{transform:rotate(360deg)}}
.paymentFallbackDetails{margin:8px 0 10px!important;border:1px solid #e7e9f0!important;border-radius:11px!important;background:#fff!important;overflow:hidden!important}
.paymentFallbackDetails>summary{list-style:none!important;cursor:pointer!important;padding:9px 11px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;font-size:8.5px!important;font-weight:800!important;color:#5d6575!important}
.paymentFallbackDetails>summary::-webkit-details-marker{display:none!important}
.paymentFallbackDetails>summary:after{content:'▾';margin-left:auto;color:#8b92a2;font-size:9px}
.paymentFallbackDetails[open]>summary:after{content:'▴'}
.paymentFallbackDetails>summary span{margin-left:auto!important;padding:3px 6px!important;border-radius:99px!important;background:#f1edff!important;color:#6b4ce0!important;font-size:6.5px!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.25px!important}
.paymentFallbackBody{padding:0 10px 10px!important;border-top:1px solid #f0f1f5!important}
.paymentFallbackHint{margin:8px 0!important;font-size:8px!important;line-height:1.45!important;color:#7f8797!important}
.paymentFallbackBody .paymentAccountRows{margin:9px 0 7px!important;gap:5px!important}
.paymentFallbackBody .paymentAccountRows>div{padding:8px 9px!important;border-radius:9px!important}
.paymentFallbackBody .paymentAccountRows span{font-size:7.5px!important}
.paymentFallbackBody .paymentAccountRows b{font-size:9px!important}
.paymentFallbackBody .paymentReferenceBox{margin:8px 0 0!important}
.paymentFallbackBody .paymentReferenceBox>label{font-size:8px!important}
.paymentFallbackBody .paymentReferenceBox>div{grid-template-columns:minmax(0,1fr) 106px!important;gap:6px!important}
.paymentFallbackBody .paymentReferenceBox input{height:40px!important;font-size:13px!important}
.paymentFallbackBody .paymentReferenceBox button{height:40px!important;padding:0 10px!important;font-size:8.5px!important}
.autoPaymentSuccess{display:flex!important;align-items:center!important;gap:12px!important;margin:14px 0!important;padding:15px!important;border:1px solid #cdebd8!important;border-radius:14px!important;background:#eefaf3!important}
.autoPaymentSuccess>span{width:40px;height:40px;flex:0 0 40px;border-radius:12px;background:#d9f4e4;color:#239653;display:grid;place-items:center}
.autoPaymentSuccess b{font-size:12px!important}.autoPaymentSuccess p{margin:3px 0 0!important;color:#647568!important;font-size:8.5px!important;line-height:1.45!important}
.autoPaymentFailed{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin:12px 0!important;padding:12px!important;border:1px solid #f1d6d9!important;border-radius:12px!important;background:#fff5f6!important}
.autoPaymentFailed b{font-size:10px!important}.autoPaymentFailed p{font-size:8px!important;margin:2px 0 0!important;color:#8e6b70!important}
.autoPaymentPanel .paymentDoneBtn{height:40px!important;margin-top:2px!important;border-radius:11px!important;font-size:9.5px!important}

/* Pricing: readable cards, no giant empty stretched columns. */
.modernPlans{align-items:start!important}
.modernPlan{height:auto!important;align-self:start!important}
@media(min-width:1181px){
  .modernPlans{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:15px!important}
  .modernPlan{padding:20px!important;border-radius:15px!important}
  .modernPlan .primary{min-height:43px!important;font-size:10px!important}
  .modernPlan .check{font-size:9.7px!important;line-height:1.45!important;margin:8px 0!important}
  .modernPlan .price{font-size:30px!important;margin:15px 0!important}
}
@media(min-width:1650px){.modernPlans{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(min-width:701px) and (max-width:1180px){
  .modernPlans{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
}

html[data-theme="dark"] .paymentOrderSummary,html[data-theme="dark"] .paymentFallbackDetails{background:#1d2430!important;border-color:#303947!important}
html[data-theme="dark"] .paymentOrderSummary b,html[data-theme="dark"] .autoPaymentWatcher b{color:#eef2f7!important}
html[data-theme="dark"] .autoPaymentWatcher{background:#211d31!important;border-color:#3a324e!important}
html[data-theme="dark"] .autoPaymentWatcher.verifying{background:#1c2837!important;border-color:#30425b!important}
html[data-theme="dark"] .autoPaymentPulse{background:#30284c!important;color:#c5b5ff!important}
html[data-theme="dark"] .paymentFallbackDetails>summary{color:#c3cad6!important}
html[data-theme="dark"] .paymentFallbackBody{border-color:#303947!important}

@media(max-width:700px){
  .subscribeModal:has(.autoPaymentPanel){width:100%!important;max-width:100%!important;max-height:92dvh!important;padding:0 12px calc(12px + env(safe-area-inset-bottom))!important;border-radius:20px 20px 0 0!important}
  .subscribeModal:has(.autoPaymentPanel) .subscribeHead{position:sticky!important;top:0!important;z-index:8!important;margin:0 -12px 8px!important;padding:13px 12px 10px!important;background:rgba(255,255,255,.97)!important;backdrop-filter:blur(12px)!important}
  .autoPaymentPanel .paymentInstructionsHead h3{font-size:18px!important}
  .autoPaymentPanel .paymentQrWrap img{width:min(176px,52vw)!important}
  .paymentOrderSummary{padding:8px 9px!important}
  .autoPaymentWatcher{padding:9px!important;gap:8px!important}
  .autoPaymentPulse{width:28px!important;height:28px!important;flex-basis:28px!important}
  .paymentFallbackDetails{margin-bottom:8px!important}
  .paymentFallbackBody .paymentReferenceBox>div{grid-template-columns:minmax(0,1fr) 96px!important}
  .paymentFallbackBody .paymentReferenceBox input{font-size:16px!important}
  .modernPlans{grid-template-columns:1fr!important;align-items:start!important}
  .modernPlan{height:auto!important}
}