/* Approved Phase 2 surfaces. Preserve existing per-surface colors and layouts.
   Admin/customer card primitives and explicitly reviewed public content cards. */
html body .ep-surface-v2 {
  --ep-card-v2-bg: rgba(255,255,255,.03);
  --ep-card-v2-border: rgba(255,255,255,.07);
  border-radius: 16px; background: var(--ep-card-v2-bg);
  border-color: var(--ep-card-v2-border); box-shadow: none;
  backdrop-filter: none; transform: none;
  transition: border-color 180ms ease;
}
html:not(.dark) body .ep-surface-v2 { --ep-card-v2-bg: #fff; --ep-card-v2-border: rgba(0,0,0,.08); }
html body .ep-surface-v2:hover { background: var(--ep-card-v2-bg); border-color: var(--ep-card-v2-border); box-shadow: none; transform: none; }
body:is(.ep-app,.ea-body) .ep-card { border-radius: 16px; }
body.ep-app .ep-card-head, body.ea-body .ea-card-head { padding: 16px 20px; }
body.ep-app .ep-card-body:not(.flush), body.ea-body .ea-card-body:not(.flush) { padding: 20px; }
/* display:contents preserves old inner IDs without adding a scrolling wrapper. */
.ep-modal-v2 > .ep-modal-frame { display: contents; }
#chargeWalletModal .ep-modal-head .fa-wallet { color: var(--ep-accent-2); }
#chargeWalletModal .ep-modal-close i { color: inherit; }
#tk-modal .ep-modal-body { flex: 1 1 auto; }
#tk-modal .tkm-head { align-items: center; }
#tk-modal .tkm-head .ep-title { font-size: 17px; }
#tk-modal .tkm-foot { padding-bottom: 2px; }
/* Existing admin dialog controllers and individual --w values are retained. */
body.ea-body .ea-modal { background: rgba(0,0,0,.62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
body.ea-body .ea-modal .ea-sheet {
  max-width: var(--w, 480px); border-radius: 16px;
  background: var(--ep-bg); border-color: var(--ep-border-2);
  animation: ep-surface-enter 180ms cubic-bezier(.23,1,.32,1);
}
body.ea-body .ea-sheet-head { padding: 20px 24px 16px; flex: none; }
body.ea-body .ea-sheet-body:not(.ea-sheet-2 .ea-sheet-body) { padding: 24px; overscroll-behavior: contain; }
body.ea-body .ea-sheet-foot { padding: 16px 24px 20px; flex: none; flex-wrap: wrap; background: var(--ep-surface); }
/* Purchase keeps its gateway/terms/discount handlers and responsive columns. */
#planRequest { backdrop-filter: none; }
#payment-modal { padding: 16px; background: rgba(0,0,0,.62); backdrop-filter: blur(5px); }
#payment-modal > .checkout-modal {
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  background: var(--ep-bg); backdrop-filter: none; border-radius: 16px;
  border-color: var(--ep-border-2); overscroll-behavior: contain;
  animation: ep-surface-enter 180ms cubic-bezier(.23,1,.32,1);
}
#payment-modal > .checkout-modal > .sticky { background: var(--ep-bg) !important; }
#payment-modal .icon-btn, #queueModal #closeQueueBtn {
  min-width: 44px; min-height: 44px; border-radius: 8px;
  color: var(--ep-ink-3); background: var(--ep-surface-2); border: 1px solid var(--ep-border);
}
#queueModal { background: rgba(0,0,0,.62); backdrop-filter: blur(5px); transition: opacity 180ms ease; }
#queueModal > .glass-dark {
  display: flex; flex-direction: column; background: var(--ep-bg); border-radius: 16px;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  backdrop-filter: none; transition: transform 180ms cubic-bezier(.23,1,.32,1);
}
#queueModal > .glass-dark > .sticky { flex: none; }
#queueModal > .glass-dark > .text-center { overflow-y: auto; min-height: 0; }
#queueModal > .scale-90 { transform: translateY(8px) scale(.98); }
#queueModal > .scale-100 { transform: none; }
@keyframes ep-surface-enter { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  body.ep-app .ep-card-head, body.ea-body .ea-card-head { padding: 14px 16px; }
  body.ep-app .ep-card-body:not(.flush), body.ea-body .ea-card-body:not(.flush) { padding: 16px; }
  body.ea-body .ea-sheet-head { padding: 14px 16px 12px; }
  body.ea-body .ea-sheet-body:not(.ea-sheet-2 .ea-sheet-body) { padding: 20px 16px; }
  body.ea-body .ea-sheet-foot { padding: 12px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  body.ea-body .ea-modal .ea-sheet, #payment-modal > .checkout-modal { animation: none; }
  #queueModal, #queueModal > .glass-dark, html body .ep-surface-v2 { transition: none; }
  #queueModal > .glass-dark { transform: none; }
}

#chargeWalletModal .ep-modal-head > .flex { flex: 1; min-width: 0; }
#chargeWalletModal .ep-modal-foot button[onclick="proceedToPayment()"] { order: -1; }