/* Shared TT loader: option B. */
.op-tt-loader{display:inline-grid;place-items:center;position:relative;width:104px;height:104px;flex-shrink:0;vertical-align:middle}
.op-tt-loader img{width:43px;height:50px;object-fit:contain}
.op-tt-loader:before,.op-tt-loader:after{content:"";position:absolute;inset:3px;border:3px solid transparent;border-radius:50%;animation:op-tt-orbit 1.8s linear infinite}
.op-tt-loader:before{border-top-color:#e75677;transform:rotate(0deg)}
.op-tt-loader:after{border-top-color:#a899b9;animation-delay:-.9s}
@keyframes op-tt-orbit{to{transform:rotate(360deg)}}
#op-loading-screen{position:fixed;inset:0;z-index:1059;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.82)}
#op-loading-screen[hidden]{display:none!important}
[data-bs-theme="dark"] #op-loading-screen,[data-theme="dark"] #op-loading-screen{background:rgba(21,23,30,.88)}
.op-tt-loader.op-tt-small{width:26px;height:26px}
.op-tt-small img{width:10px;height:12px}
.op-tt-loader.op-tt-small:before,.op-tt-loader.op-tt-small:after{inset:0;border-width:2px}
@media(prefers-reduced-motion:reduce){.op-tt-loader:before,.op-tt-loader:after{animation-duration:4s}}

/* Initial navigation: cover the entire page until all boot work has finished.
   Later dialog/action loading keeps the existing translucent overlay. */
html[data-op-page-loading] #op-loading-screen{background:#fff}
html[data-op-page-loading][data-bs-theme="dark"] #op-loading-screen,
html[data-op-page-loading][data-theme="dark"] #op-loading-screen,
html[data-op-page-loading] [data-bs-theme="dark"] #op-loading-screen,
html[data-op-page-loading] [data-theme="dark"] #op-loading-screen{background:#15171e}
