html[data-store-loading] { overflow: hidden; }
.store-loader { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 24px; background: #fcfdfb; color: #281640; text-align: center; direction: rtl; font-family: Tajawal, Arial, sans-serif; transition: opacity 240ms ease; }
.store-loader__content { width: min(100%, 400px); }
.store-loader__art { position: relative; width: 100%; aspect-ratio: 11/7; }
.store-loader__scene { display: block; width: 100%; height: auto; aspect-ratio: 11/7; }
.store-loader__bee { position:absolute; left:46%; top:34%; width:46px; height:30px; --distance: min(24vw, 96px); animation: loader-flight 5.8s ease-in-out infinite; }
.store-loader__bee-body { position:absolute; inset:6px 7px 0 0; border-radius:50%; background:repeating-linear-gradient(90deg, #f3b836 0 8px, #39264c 8px 14px); }
.store-loader__bee-head { position:absolute; right:0; bottom:3px; width:21px; height:21px; border-radius:50%; background:#39264c; }
.store-loader__bee-head::after { content:''; position:absolute; width:4px; height:4px; border-radius:50%; background:white; right:5px; top:5px; }
.store-loader__bee-wing { position:absolute; left:13px; top:-10px; width:17px; height:24px; border:1px solid #9fbbb9; border-radius:70% 70% 40% 40%; background:#e8f4ef; transform-origin:bottom center; animation:loader-wing 120ms ease-in-out infinite alternate; }
.store-loader__bee-wing::after { content:''; position:absolute; left:9px; top:0; width:14px; height:21px; border:1px solid #9fbbb9; border-radius:70% 70% 40% 40%; background:#f4faf8; transform:rotate(35deg); transform-origin:bottom center; }
.store-loader__name { margin: 0 0 10px; font-size: 26px; font-weight: 800; letter-spacing: 0; }
.store-loader__message { margin: 0; color: #5e6b5a; font-size: 15px; line-height: 1.8; }
.store-loader__progress { width: 72px; height: 3px; margin: 22px auto 0; overflow: hidden; background: #e4ebdf; direction: ltr; }
.store-loader__progress::after { content: ''; display: block; width: 28px; height: 100%; background: #d99f31; animation: loader-progress 1.2s ease-in-out infinite alternate; }
.store-loader__retry { margin-top: 22px; padding: 11px 22px; border: 0; border-radius: 6px; background: #2f1856; color: white; font: 700 14px Tajawal, Arial, sans-serif; cursor: pointer; }
.store-loader__retry:focus-visible { outline: 3px solid #d99f31; outline-offset: 4px; }
.store-loader[data-state='error'] .store-loader__progress { display: none; }
.store-loader[data-state='ready'] { opacity: 0; pointer-events: none; }
@keyframes loader-progress { to { transform: translateX(44px); } }
@keyframes loader-flight { 0%,100% {transform:translate(calc(-1 * var(--distance)),24px) rotate(-12deg)} 28% {transform:translate(0,-30px) rotate(8deg)} 50% {transform:translate(var(--distance),20px) rotate(10deg)} 70% {transform:translate(30px,0) rotate(-9deg)} }
@keyframes loader-wing { to {transform:scaleX(.4) rotate(15deg)} }
@media (prefers-reduced-motion: reduce) { .store-loader, .store-loader__bee, .store-loader__bee-wing, .store-loader__progress::after { animation: none; transition: none; } }