.topup-modal-overlay,.ui-modal-overlay.topup-modal-overlay{position:fixed;inset:0;z-index:var(--z-modal-backdrop);background:var(--bg-overlay-heavy);display:flex;align-items:flex-start;justify-content:center;padding:var(--space-4);padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom, 0px));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.topup-modal,.ui-modal-container.topup-modal{position:relative;display:block;width:100%;max-width:380px;max-height:calc(100vh - var(--space-8));max-height:calc(100dvh - var(--space-8));padding:var(--space-8);background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-xl);color:var(--text-primary);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;margin:auto 0}.topup-modal__close{position:absolute;top:var(--space-4);right:var(--space-4);width:var(--space-8);height:var(--space-8);border-radius:var(--radius-sm);background:transparent;border:none;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition-all);z-index:2}@media (hover:hover){.topup-modal__close:hover{background:var(--bg-accent-subtle);color:var(--text-secondary)}}.topup-modal__header{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-5)}.topup-modal__icon{width:var(--space-12);height:var(--space-12);border-radius:var(--radius-md);background:rgba(var(--brand-cyan-rgb),.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}.topup-modal__icon svg{color:var(--brand-cyan);filter:drop-shadow(0 0 8px rgba(var(--brand-cyan-rgb),.4))}.topup-modal__title{font-size:var(--text-lg);font-weight:var(--font-semibold);margin:0;display:flex;align-items:center;gap:var(--space-2-5);flex-wrap:wrap}.topup-modal__badge{padding:calc(var(--space-1) * .75) var(--space-2-5);border-radius:var(--radius-sm);background:rgba(var(--brand-cyan-rgb),.15);color:var(--brand-cyan);font-size:var(--text-ms);font-weight:var(--font-bold)}.topup-modal__details{display:flex;flex-direction:column;gap:var(--space-2-5);padding:var(--space-4);background:var(--bg-accent-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-md);margin-bottom:var(--space-3-5)}.topup-modal__detail{display:flex;align-items:center;gap:var(--space-2-5);font-size:var(--text-sm);color:var(--text-secondary)}.topup-modal__detail svg{color:var(--brand-cyan);flex-shrink:0;width:var(--space-4);height:var(--space-4)}.topup-modal__detail-label{flex:1}.topup-modal__detail-value{font-weight:var(--font-semibold);color:var(--text-primary)}.topup-modal__detail-value--credits{font-size:var(--text-base);color:var(--text-primary);font-variant-numeric:tabular-nums}.topup-modal__consent{display:flex;flex-direction:column;gap:var(--space-2-5);position:relative;margin-bottom:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--border-subtle)}.topup-modal .payment-consent-checkbox--checked .payment-consent-checkbox__box{background:var(--btn-primary-bg);border:1px solid var(--btn-primary-border)}.topup-modal .payment-consent-checkbox--checked .payment-consent-checkbox__checkmark{color:var(--brand-cyan)}.topup-modal .payment-consent-checkbox__content a{color:var(--text-secondary);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:2px}@media (hover:hover){.topup-modal .payment-consent-checkbox__content a:hover{color:var(--brand-cyan);text-decoration-color:initial}}.topup-modal__error{padding:var(--space-2-5) var(--space-3);border-radius:var(--radius-sm);background:var(--bg-error-subtle);border:1px solid var(--border-error);color:var(--brand-red);font-size:var(--text-ms);margin-bottom:var(--space-3)}.topup-modal__cta{width:100%;display:flex;align-items:center;justify-content:center;gap:var(--space-2-5);padding:var(--space-3-5) var(--space-5);border-radius:var(--radius-md);background:var(--btn-primary-bg);color:var(--btn-primary-color);font-size:var(--text-md);font-weight:var(--font-semibold);min-height:var(--tap-target-min);border:1px solid var(--btn-primary-border);box-shadow:var(--btn-primary-shadow);cursor:pointer;transition:var(--transition-all)}@media (hover:hover){.topup-modal__cta:hover:not(:disabled){background:var(--btn-primary-bg-hover);border-color:var(--btn-primary-border-hover);transform:translateY(calc(var(--space-1) * -.5));box-shadow:var(--btn-primary-shadow-hover)}}.topup-modal__cta:active:not(:disabled){transform:translateY(0)}.topup-modal__cta:disabled{opacity:.7;cursor:not-allowed}.topup-modal__cta--disabled{opacity:.5;cursor:not-allowed}@media (hover:hover){.topup-modal__cta--disabled:hover{transform:none;box-shadow:none}}.topup-modal__cta--loading{animation:topup-pulse-loading var(--dur-shimmer) ease-in-out infinite}@keyframes topup-pulse-loading{0%,to{opacity:.8}50%{opacity:1}}@media (hover:hover){.topup-modal__cta--loading:hover{transform:none!important}}.topup-modal__spinner{display:inline-block;width:var(--space-4-5);height:var(--space-4-5);border:2px solid rgba(var(--white-rgb),.2);border-top-color:var(--brand-cyan);border-radius:var(--radius-circle);animation:spin .6s linear infinite}@media (max-width:768px){.topup-modal-overlay,.ui-modal-overlay.topup-modal-overlay{align-items:flex-end;padding:0}.topup-modal,.ui-modal-container.topup-modal{width:100%;max-width:100%;max-height:calc(100vh - var(--space-2) - env(safe-area-inset-top, 0px));max-height:calc(100dvh - var(--space-2) - env(safe-area-inset-top, 0px));margin:0;padding:var(--space-6) max(var(--space-5),env(safe-area-inset-right,0px)) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)) max(var(--space-5),env(safe-area-inset-left,0px));border-radius:var(--radius-xl) var(--radius-xl) 0 0}.topup-modal__close{width:var(--tap-target-min);height:var(--tap-target-min);top:var(--space-3);right:max(var(--space-3),env(safe-area-inset-right,0px))}.topup-modal__cta{position:sticky;bottom:0;z-index:5;min-height:calc(var(--tap-target-min) + var(--space-2));margin:var(--space-2) calc(-1 * var(--space-5)) calc(-1 * env(safe-area-inset-bottom, 0px));padding-bottom:calc(var(--space-3-5) + env(safe-area-inset-bottom, 0px));border-radius:var(--radius-md) var(--radius-md) 0 0;box-shadow:0 calc(-1 * var(--space-3)) var(--space-6) calc(-1 * var(--space-3)) rgba(var(--black-rgb),.55),0 var(--space-2) var(--space-6) rgba(var(--brand-cyan-rgb),.3)}}@media (prefers-reduced-motion:reduce){.topup-modal__cta{animation:none;transition:none}}@media (max-width:480px){.topup-modal,.ui-modal-container.topup-modal{padding:var(--space-5) max(var(--space-4),env(safe-area-inset-right,0px)) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)) max(var(--space-4),env(safe-area-inset-left,0px));border-radius:var(--radius-lg) var(--radius-lg) 0 0}.topup-modal__header{gap:var(--space-3);margin-bottom:var(--space-4)}.topup-modal__icon{width:var(--tap-target-min);height:var(--tap-target-min)}.topup-modal__title{font-size:var(--text-base)}.topup-modal__details{padding:var(--space-3);gap:var(--space-2)}.topup-modal__detail{font-size:var(--text-ms)}.topup-modal__cta{font-size:var(--text-sm);margin-right:calc(-1 * var(--space-4));margin-left:calc(-1 * var(--space-4))}}@media (max-width:360px){.topup-modal,.ui-modal-container.topup-modal{padding:var(--space-4) max(var(--space-3),env(safe-area-inset-right,0px)) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)) max(var(--space-3),env(safe-area-inset-left,0px))}.topup-modal__close{top:var(--space-2);right:max(var(--space-2),env(safe-area-inset-right,0px))}.topup-modal__header{gap:var(--space-2-5);margin-bottom:var(--space-3)}.topup-modal__icon{width:var(--space-10);height:var(--space-10)}.topup-modal__title{font-size:var(--text-sm);line-height:1.3}.topup-modal__badge{font-size:var(--text-xs)}.topup-modal__details{padding:var(--space-3);gap:var(--space-2);margin-bottom:var(--space-3)}.topup-modal__detail{gap:var(--space-2);font-size:var(--text-ms)}.topup-modal__consent{gap:var(--space-2);margin-bottom:var(--space-3);padding-top:var(--space-3)}.topup-modal__cta{min-height:var(--tap-target-min);margin-right:calc(-1 * var(--space-3));margin-left:calc(-1 * var(--space-3));padding:var(--space-3);padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom, 0px));font-size:var(--text-sm)}}