/* Vouxat trading info popup — shared by Spot, Margin and Futures trading pages. */
.mte-info-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 30px;border-radius:50%;border:1px solid rgba(244,196,78,.4);background:rgba(244,196,78,.14);color:#f4c44e;font-weight:900;font-size:13px;font-style:italic;font-family:Georgia,'Times New Roman',serif;cursor:pointer;line-height:1;padding:0}
.mte-info-btn:hover{background:rgba(244,196,78,.24)}
.mte-info-btn:active{transform:scale(.94)}

.mte-info-sheet-overlay{position:fixed;inset:0;background:rgba(4,8,14,.6);z-index:99998;opacity:0;pointer-events:none;transition:opacity .18s ease}
.mte-info-sheet-overlay.open{opacity:1;pointer-events:auto}
.mte-info-sheet{position:fixed;left:0;right:0;bottom:0;z-index:99999;background:#121b25;color:#f3f6fb;border-radius:20px 20px 0 0;padding:14px 20px calc(20px + env(safe-area-inset-bottom));max-height:80vh;overflow-y:auto;transform:translateY(100%);transition:transform .22s ease;box-shadow:0 -12px 40px rgba(0,0,0,.4);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.mte-info-sheet-overlay.open .mte-info-sheet{transform:translateY(0)}
.mte-info-sheet-handle{width:40px;height:4px;border-radius:3px;background:rgba(255,255,255,.2);margin:0 auto 14px}
.mte-info-sheet h3{margin:0 0 12px;font-size:18px;color:#f4c44e;padding-right:34px}
.mte-info-sheet-close{position:absolute;top:14px;right:16px;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#f3f6fb;cursor:pointer;font-size:15px;line-height:1}
.mte-info-sheet-body{font-size:14px;line-height:1.65;color:#c3ccd6}
.mte-info-sheet-body p{margin:0 0 12px}
.mte-info-sheet-body p:last-child{margin-bottom:0}

/* Light mode — follow the App Shell theme like the trading pages themselves. */
html:not([data-theme="dark"]) body:not(.dark-mode) .mte-info-sheet{background:#ffffff;color:#17202b}
html:not([data-theme="dark"]) body:not(.dark-mode) .mte-info-sheet-body{color:#425064}
html:not([data-theme="dark"]) body:not(.dark-mode) .mte-info-sheet-close{background:#f2f4f7;border-color:rgba(15,23,42,.12);color:#17202b}
html:not([data-theme="dark"]) body:not(.dark-mode) .mte-info-sheet-handle{background:rgba(15,23,42,.16)}

@media(max-width:480px){
	.mte-info-sheet{padding-left:16px;padding-right:16px}
}