/**
 * @file The till's loading looks (load_look.js builds the markup, includes/load_look.php the setting).
 *       Twin in the app: LoadLook.kt.
 */
.ll { display: flex; align-items: center; justify-content: center; min-width: 120px; min-height: 90px; }
.ll i { display: block; font-style: normal; }
.djk-loading-box .ll + .djk-loading-spinner { display: none; }
.ll-leave { position: fixed; inset: 0; z-index: 99998; background: rgba(17, 20, 27, .82); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.ll-leave .ll { transform: scale(1.4); }
.ll-preview { width: 140px; height: 110px; border-radius: 5px; background: #181b22; display: flex; align-items: center; justify-content: center; overflow: hidden; }

/* the last menu's tiles: a column and a two-wide grid */
.ll-menu { display: flex; gap: 5px; width: 150px; }
.ll-menu .c { width: 34%; display: flex; flex-direction: column; gap: 5px; }
.ll-menu .g { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; align-content: start; }
.ll-menu .c i { height: 18px; border-radius: 4px; }
.ll-menu .g i { height: 28px; border-radius: 4px; }
.ll-tiles i { animation: ll-fade 2.6s ease-out infinite both; }
.ll-slide i { animation: ll-slide 2.4s infinite both; }
.ll-blur i { animation: ll-blur 1.6s infinite; }
.ll-spring .g { grid-template-columns: repeat(3, 1fr); }
.ll-spring i { animation: ll-pop 2s infinite both; }
@keyframes ll-fade { 0% { opacity: 0; transform: translateY(6px); } 30%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ll-slide { 0% { transform: translateX(110%); opacity: 0; } 30%, 85% { transform: none; opacity: 1; } 100% { transform: translateX(-110%); opacity: 0; } }
@keyframes ll-blur { 0%, 100% { filter: blur(4px); opacity: .5; } 50% { filter: blur(0); opacity: 1; } }
@keyframes ll-pop { 0% { transform: scale(0); } 40% { transform: scale(1.15); } 60%, 100% { transform: scale(1); } }

/* cup with steam */
.ll-steam { position: relative; width: 34px; height: 46px; }
.ll-steam .cup { position: absolute; bottom: 0; width: 34px; height: 26px; border: 3px solid #e5e7eb; border-top: none; border-radius: 0 0 9px 9px; }
.ll-steam .st { position: absolute; bottom: 24px; width: 4px; height: 11px; border-radius: 2px; background: #94a3b8; animation: ll-steam 1.6s infinite; }
@keyframes ll-steam { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-30px) rotate(20deg); opacity: 0; } }

.ll-ring_house i { width: 46px; height: 46px; border-radius: 50%; border: 5px solid #262b36; border-top-color: #c27c0e; border-right-color: #3b82f6; animation: ll-rot 1s linear infinite; }
.ll-hand i { font-size: 34px; color: #fbbf24; animation: ll-wave 1s ease-in-out infinite; }
@keyframes ll-wave { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }

.ll-ring i { width: 38px; height: 38px; border-radius: 50%; border: 4px solid #262b36; border-top-color: #3b82f6; animation: ll-rot .8s linear infinite; }
.ll-ring2 { position: relative; }
.ll-ring2 i { position: absolute; border-radius: 50%; border: 3px solid transparent; }
.ll-ring2 i:first-child { width: 42px; height: 42px; border-top-color: #c27c0e; animation: ll-rot 1s linear infinite; }
.ll-ring2 i:last-child { width: 28px; height: 28px; border-top-color: #3b82f6; animation: ll-rot .8s linear infinite reverse; }
.ll-dots_jump, .ll-dots_blink { gap: 7px; }
.ll-dots_jump i, .ll-dots_blink i { width: 11px; height: 11px; border-radius: 50%; }
.ll-dots_jump i { background: #3b82f6; animation: ll-jump .7s infinite; }
.ll-dots_blink i { background: #e5e7eb; animation: ll-blink 1s infinite; }
.ll-pulse i { width: 32px; height: 32px; border-radius: 50%; background: #3b82f6; animation: ll-scale 1.2s ease-in-out infinite; }
.ll-bars { gap: 4px; }
.ll-bars i { width: 6px; height: 32px; border-radius: 3px; background: #22c55e; animation: ll-bar .9s infinite; }
.ll-ripple { position: relative; }
.ll-ripple i { position: absolute; width: 38px; height: 38px; border: 2px solid #60a5fa; border-radius: 50%; animation: ll-ripple 1.5s infinite; }
.ll-line i { position: relative; width: 120px; height: 4px; border-radius: 2px; background: #262b36; overflow: hidden; }
.ll-line i::after { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 4px; border-radius: 2px; background: #3b82f6; animation: ll-run 1.1s ease-in-out infinite; }
.ll-flip i { width: 30px; height: 30px; background: #c27c0e; animation: ll-flip 1.4s infinite; }
.ll-orbit { position: relative; }
.ll-orbit i { position: absolute; width: 9px; height: 9px; border-radius: 50%; animation: ll-orbit 1.2s linear infinite; }
.ll-orbit i:first-child { background: #f472b6; }
.ll-orbit i:last-child { background: #60a5fa; animation-delay: -.6s; }
.ll-arc i { width: 42px; height: 42px; border-radius: 50%; border: 4px solid transparent; border-top-color: #3b82f6; border-left-color: #3b82f6; animation: ll-rot .7s cubic-bezier(.5, .1, .5, .9) infinite; }
.ll-morph i { width: 28px; height: 28px; background: #16a34a; animation: ll-morph 1.4s ease-in-out infinite; }
.ll-pendulum i { width: 15px; height: 15px; border-radius: 50%; background: #fbbf24; animation: ll-swing 1s ease-in-out infinite; }
.ll-cutlery i { font-size: 34px; color: #c27c0e; animation: ll-jump 1s ease-in-out infinite; }
.ll-beer i { font-size: 34px; color: #f59e0b; animation: ll-scale 1.4s ease-in-out infinite; }
.ll-grid { display: grid; grid-template-columns: repeat(3, 9px); gap: 3px; min-width: 0; }
.ll-grid i { height: 9px; background: #3b82f6; animation: ll-blink 1.2s infinite; }
.ll-wheel i { width: 44px; height: 44px; border-radius: 50%; background: conic-gradient(#3b82f6 0 25%, #c27c0e 0 50%, #16a34a 0 75%, #be185d 0); -webkit-mask: radial-gradient(circle, transparent 13px, #000 14px); mask: radial-gradient(circle, transparent 13px, #000 14px); animation: ll-rot 1.4s linear infinite; }

@keyframes ll-rot { to { transform: rotate(360deg); } }
@keyframes ll-jump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes ll-blink { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes ll-scale { 0%, 100% { transform: scale(.6); } 50% { transform: scale(1.1); } }
@keyframes ll-bar { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes ll-ripple { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }
@keyframes ll-run { 0% { left: -40%; } 100% { left: 100%; } }
@keyframes ll-flip { 0% { transform: perspective(120px) rotateY(0); } 50% { transform: perspective(120px) rotateY(180deg); } 100% { transform: perspective(120px) rotateY(180deg) rotateX(180deg); } }
@keyframes ll-orbit { from { transform: rotate(0) translateX(18px) rotate(0); } to { transform: rotate(360deg) translateX(18px) rotate(-360deg); } }
@keyframes ll-morph { 0%, 100% { border-radius: 4px; transform: rotate(0); } 50% { border-radius: 50%; transform: rotate(180deg); } }
@keyframes ll-swing { 0%, 100% { transform: translateX(-18px); } 50% { transform: translateX(18px); } }
@media (prefers-reduced-motion: reduce) { .ll i, .ll i::after { animation-duration: 3s; } }