:root {
    --munia-viewport-height: 100vh;
    --munia-viewport-top: 0px;
    --munia-dialog-bottom-gap: env(safe-area-inset-bottom, 0px);
}

.munia-payment-dialog {
    position:fixed; inset:var(--munia-viewport-top, 0px) 0 auto; z-index:12000;
    height:var(--munia-viewport-height, 100dvh); box-sizing:border-box;
    display:flex; align-items:center; justify-content:center;
    padding:16px 16px calc(16px + var(--munia-dialog-bottom-gap, 0px));
    background:rgba(0,0,0,.58); backdrop-filter:blur(3px);
}
.munia-payment-card {
    width:440px; max-width:100%; box-sizing:border-box;
    max-height:calc(var(--munia-viewport-height, 100dvh) - var(--munia-dialog-bottom-gap, 0px) - 32px);
    overflow-y:auto; overscroll-behavior:contain; padding:24px;
    background:var(--munia-surface, #fff); color:var(--munia-text, #17211d);
    border:1px solid var(--munia-line, #d8dfdc); border-radius:22px;
    box-shadow:0 20px 70px #0005;
}
.munia-payment-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.munia-payment-heading h2 { font-size:20px; line-height:1.3; margin:0; }
.munia-payment-summary { font-size:15px; line-height:1.5; margin:0 0 14px; }
.munia-payment-dialog button { font:inherit; cursor:pointer; transition:background-color .15s, border-color .15s; }
.munia-payment-dialog [hidden] { display:none !important; }
.munia-payment-dialog .munia-payment-close {
    flex:0 0 36px; height:36px; padding:0; border:0; border-radius:50%;
    background:transparent !important; color:var(--munia-muted, #64746b); font-size:25px;
}
.munia-payment-dialog .munia-payment-close:hover { background:var(--munia-control-hover, #edf1ef) !important; color:var(--munia-text, #17211d); }
.munia-payment-dialog .munia-payment-details-toggle {
    border:0; padding:4px 0; margin:0 0 14px;
    background:transparent !important; color:var(--munia-muted, #64746b); font-size:13px;
    text-decoration:underline; text-underline-offset:3px;
}
.munia-payment-dialog .munia-payment-details-toggle:hover { color:var(--munia-text, #17211d); }
.munia-payment-details {
    background:var(--munia-surface-soft, #f4f7f5); border:1px solid var(--munia-line, #d8dfdc);
    border-radius:12px; padding:12px; font-size:13px; line-height:1.5; margin:0 0 16px;
    color:var(--munia-muted, #64746b); overflow-wrap:anywhere;
}
.munia-payment-status { margin:0 0 8px; font-size:14px; line-height:1.5; }
.munia-payment-status.is-error { color:var(--munia-danger-text, #b42332); }
.munia-payment-hint { margin:0 0 18px; font-size:13px; line-height:1.5; color:var(--munia-muted, #64746b); }
.munia-payment-actions { display:flex; gap:10px; margin-top:6px; }
.munia-payment-dialog .munia-payment-actions button {
    display:inline-flex; align-items:center; justify-content:center; gap:8px; flex:1;
    min-height:46px; padding:11px 16px; border-radius:999px; font-weight:650;
}
.munia-payment-dialog .munia-payment-secondary {
    background:var(--munia-surface, #fff) !important; color:var(--munia-text, #17211d);
    border:1px solid var(--munia-line, #d8dfdc);
}
.munia-payment-dialog .munia-payment-secondary:hover { background:var(--munia-control-hover, #edf1ef) !important; border-color:var(--munia-line-strong, #a6b4ad); }
.munia-payment-dialog .munia-payment-primary {
    background:#0ac18e !important; border:1px solid #0ac18e; color:#06281f !important;
}
.munia-payment-dialog .munia-payment-primary:hover:not(:disabled) { background:#08ad7f !important; border-color:#08ad7f; }
.munia-payment-dialog .munia-payment-primary:active:not(:disabled) { background:#07996f !important; border-color:#07996f; }
.munia-payment-dialog .munia-payment-primary:disabled,
.munia-payment-dialog .munia-payment-primary:disabled:hover {
    background:#0ac18e !important; border-color:#0ac18e; color:#06281f !important;
    opacity:1; cursor:default;
}
.munia-payment-dialog button:focus-visible { outline:2px solid #0ac18e; outline-offset:3px; }
.munia-payment-spinner {
    display:inline-block; width:14px; height:14px; flex:0 0 14px;
    border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
    animation:munia-payment-spin .8s linear infinite;
}
@keyframes munia-payment-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .munia-payment-spinner { animation:none; } }
@media (max-width:480px) { .munia-payment-card { padding:20px; border-radius:18px; } }

@supports (height: 100dvh) {
    :root { --munia-viewport-height: 100dvh; }
}

@media (max-width: 768px) {
    body.munia-has-bnav {
        --munia-dialog-bottom-gap: var(--munia-bnav-measured-height,
            calc(var(--munia-bnav-h, 56px) + env(safe-area-inset-bottom, 0px)));
    }
}

/* Keep the whole scrollable card above navigation, including with a keyboard. */
#walletModal {
    z-index: 11000 !important;
    top: calc(var(--munia-viewport-top) + env(safe-area-inset-top, 0px) +
        (var(--munia-viewport-height) - env(safe-area-inset-top, 0px) -
        var(--munia-dialog-bottom-gap)) * .5) !important;
    max-height: calc(var(--munia-viewport-height) - env(safe-area-inset-top, 0px) -
        var(--munia-dialog-bottom-gap) - 24px) !important;
    max-width: calc(100% - 24px) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Match the wallet card, with local colors that stay legible on mint. */
#walletModal {
    --munia-text: #06281f;
    --munia-muted: #164536;
    --munia-line-strong: #087456;
    --munia-danger-text: #7a1828;
    background: #0ac18e !important;
    color: #06281f !important;
    border-color: #087456 !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 44px rgba(6, 40, 31, .28) !important;
}
#walletModal h3 { color: #06281f !important; }
#walletModal .wallet-modal-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
#walletModalTitleLink { color:inherit; text-decoration:none; min-width:0; }
#walletModalTitleLink[href]:hover { text-decoration:underline; text-underline-offset:4px; }
#walletModalSettings { display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex-shrink:0; border-radius:50%; color:inherit; }
#walletModalSettings:hover { background:rgba(255,255,255,.12); }
#walletModalSettings[hidden] { display:none !important; }
#walletModal input:not([hidden]),
#walletModal select {
    background: #eafbf5 !important;
    color: #06281f !important;
    border-color: #087456 !important;
    border-radius: 10px !important;
    color-scheme: light;
}
#walletModal input::placeholder { color: #416b5c !important; opacity: 1; }
html[data-theme="dark"] #walletModal input:not([hidden]),
html[data-theme="dark"] #walletModal select {
    background: #102d24 !important;
    color: #e7f4ee !important;
    border-color: #285244 !important;
    color-scheme: dark;
}
html[data-theme="dark"] #walletModal input::placeholder { color: #a4c1b2 !important; }
html[data-theme="dark"] #walletModal .pw-eye-btn { color: #b8d8c8 !important; }
html[data-theme="dark"] #walletModal .pw-eye-btn:hover:not(:disabled) { background: rgba(255,255,255,.12) !important; color: #fff !important; }
html[data-theme="dark"] #walletModal input:focus-visible,
html[data-theme="dark"] #walletModal select:focus-visible { outline-color: #b8f4d9; outline-offset: -3px; }
html[data-theme="dark"] #walletModal input:-webkit-autofill {
    -webkit-text-fill-color: #e7f4ee;
    box-shadow: inset 0 0 0 1000px #102d24;
    caret-color: #e7f4ee;
}
#walletModal #walletAddressContainer > div {
    background: rgba(255,255,255,.3) !important;
    color: #06281f !important;
    border-color: rgba(6,40,31,.3) !important;
    border-radius: 10px !important;
}
#walletModal #walletCopyBtn,
#walletModal #walletCloseButton,
#walletModal #internalWalletUnlockButton,
#walletModal #walletGuestSection a {
    box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 42px; padding: 10px 16px !important;
    border: 1px solid rgba(6,40,31,.3) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.15) !important;
    color: #06281f !important;
    font: 600 14px/1.3 Arial,sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease !important;
}
#walletModal #walletCopyBtn:hover:not(:disabled),
#walletModal #walletCloseButton:hover:not(:disabled),
#walletModal #walletGuestSection a:hover { background: rgba(255,255,255,.3) !important; }
#walletModal #internalWalletUnlockButton,
#walletModal #walletGuestSection a:first-child {
    background: #06281f !important; border-color: #06281f !important; color: #fff !important;
}
#walletModal #internalWalletUnlockButton:hover:not(:disabled),
#walletModal #walletGuestSection a:first-child:hover { background: #123e32 !important; }
#walletModal button:disabled { opacity: .5; cursor: wait !important; }
#walletModal #internalWalletUnlockButton:disabled:hover { background: #06281f !important; }
#walletModal #walletCopyBtn:disabled:hover,
#walletModal #walletCloseButton:disabled:hover { background: rgba(255,255,255,.15) !important; }
/* Keep the existing temporary copy confirmation while the pointer stays above it. */
#walletModal #walletCopyBtn[style*="rgb(22, 163, 74)"],
#walletModal #walletCopyBtn[style*="rgb(22, 163, 74)"]:hover:not(:disabled) {
    background: #06281f !important; color: #fff !important;
}
#walletModal .pw-eye-btn,
#walletModal #walletModalBalanceToggle { color: #164536 !important; border-radius: 6px !important; }
#walletModal .pw-eye-btn:hover:not(:disabled),
#walletModal #walletModalBalanceToggle:hover:not(:disabled) { background: rgba(6,40,31,.12) !important; color: #06281f !important; }
#walletModal .pw-eye-btn:disabled:hover,
#walletModal #walletModalBalanceToggle:disabled:hover { background: transparent !important; }
#walletModal button:focus-visible,
#walletModal a:focus-visible,
#walletModal input:focus-visible,
#walletModal select:focus-visible { outline: 2px solid #06281f; outline-offset: 2px; }
html[data-theme="dark"] #walletModal {
    --munia-text: #e7f4ee;
    --munia-muted: #a4c1b2;
    --munia-line-strong: #285244;
    --munia-danger-text: #ff9b9b;
    background: #0c211a !important;
    color: #e7f4ee !important;
    border-color: #285244 !important;
    box-shadow: 0 16px 44px rgba(0,0,0,.4) !important;
}
html[data-theme="dark"] #walletModal h3 { color: #e7f4ee !important; }
#walletSyncStatus {
    margin: 10px 0;
    color: var(--munia-muted, #164536);
    font: 400 13px/1.5 Arial, sans-serif;
}
#walletSyncStatus[data-state="offline"] { color: var(--munia-danger-text, #b42332); }
#walletSyncStatus[data-state="syncing"]::before {
    content: "";
    display: inline-block;
    width: 12px; height: 12px;
    box-sizing: border-box;
    margin-right: 8px;
    vertical-align: -2px;
    border: 2px solid #087456;
    border-right-color: transparent;
    border-radius: 50%;
    animation: munia-payment-spin 1s linear infinite;
}
html[data-theme="dark"] #walletSyncStatus[data-state="syncing"]::before {
    border-color: #0ac18e;
    border-right-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
    #walletSyncStatus[data-state="syncing"]::before { animation: none; }
}
html[data-theme="dark"] #walletModal #walletAddressContainer > div {
    background: #102d24 !important;
    color: #e7f4ee !important;
    border-color: #285244 !important;
}
html[data-theme="dark"] #walletModal :is(#walletCopyBtn, #walletCloseButton, #internalWalletUnlockButton, #walletGuestSection a) {
    background: #102d24 !important; color: #e7f4ee !important; border-color: #285244 !important;
}
html[data-theme="dark"] #walletModal :is(#walletCloseButton, #walletGuestSection a):hover:not(:disabled) { background: #1a4032 !important; }
html[data-theme="dark"] #walletModal :is(#walletCopyBtn, #internalWalletUnlockButton, #walletGuestSection a:first-child) {
    background: #0ac18e !important; color: #06281f !important; border-color: #0ac18e !important;
}
html[data-theme="dark"] #walletModal :is(#walletCopyBtn, #internalWalletUnlockButton, #walletGuestSection a:first-child):hover:not(:disabled) { background: #09b585 !important; }
html[data-theme="dark"] #walletModal #walletCloseButton:disabled:hover { background: #102d24 !important; }
html[data-theme="dark"] #walletModal :is(#walletCopyBtn, #internalWalletUnlockButton):disabled:hover { background: #0ac18e !important; }
html[data-theme="dark"] #walletModal button#walletCopyBtn[style*="rgb(22, 163, 74)"],
html[data-theme="dark"] #walletModal button#walletCopyBtn[style*="rgb(22, 163, 74)"]:hover:not(:disabled) {
    background: #164f3d !important; color: #e7f4ee !important; border-color: #3f7862 !important;
}
html[data-theme="dark"] #walletModal #walletModalBalanceToggle { color: #b8d8c8 !important; }
html[data-theme="dark"] #walletModal #walletModalBalanceToggle:hover:not(:disabled) { background: rgba(255,255,255,.12) !important; color: #fff !important; }
html[data-theme="dark"] #walletModal #walletModalBalanceToggle:disabled:hover { background: transparent !important; }
html[data-theme="dark"] #walletModal button:focus-visible,
html[data-theme="dark"] #walletModal a:focus-visible { outline-color: #0ac18e; }
@media (prefers-reduced-motion: reduce) {
    #walletModal button,
    #walletModal #walletGuestSection a { transition: none !important; }
}
#walletRegistrationForm button[type="submit"]:hover { background: #334155; color: #fff; }
#walletRegistrationForm button[type="submit"]:focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }

.wallet-safety-overlay,
#walletRecoveryOverlay {
    position: fixed;
    top: var(--munia-viewport-top) !important;
    bottom: auto !important;
    left: 0;
    right: 0;
    height: calc(var(--munia-viewport-height) - var(--munia-dialog-bottom-gap));
    box-sizing: border-box;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 12px !important;
    align-items: center;
    justify-content: center;
}

.wallet-safety-overlay {
    display: flex;
    z-index: 11000;
    background: rgba(0, 0, 0, .6);
}

.wallet-safety-overlay[hidden] { display: none !important; }

.wallet-safety-card,
#walletRecoveryOverlay .wrec-card {
    max-height: 100% !important;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
}

.wallet-safety-card {
    width: 460px;
    max-width: 100%;
    padding: 24px;
    border-radius: 14px;
    background: var(--munia-surface, #fff);
    color: var(--munia-text, #1e293b);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.wallet-safety-card h2 { margin: 0 0 16px; font-size: 1.25rem; }
.wallet-safety-card p { margin: 0 0 16px; font-size: 1rem; }
.wallet-safety-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.wallet-safety-actions a,
.wallet-safety-actions button {
    flex: 1 1 150px;
    box-sizing: border-box;
    padding: 11px 14px;
    border: 1px solid var(--munia-line, #cbd5e1);
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    color: var(--munia-text, #1e293b);
    background: var(--munia-surface, #fff);
}
#walletSafetyReminder .wallet-safety-actions a,
#walletSafetyReminder .wallet-safety-actions a:visited,
#walletSafetyReminder .wallet-safety-actions a:hover,
#walletSafetyReminder .wallet-safety-actions a:active { color: #fff !important; background: #1e293b; }
.wallet-safety-actions :focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }

@media (max-width: 400px) {
    .wallet-safety-card { padding: 18px; }
    #walletRecoveryOverlay .wrec-words { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #walletRecoveryOverlay .wrec-word { min-width: 0; }
    #walletRecoveryOverlay .wrec-word b { overflow-wrap: anywhere; }
}