/* Five visual treatments share one accessible, reusable overlay. */
.site-loader-host { position: relative !important; }
.site-loader-overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: #ffffffed; border-radius: inherit; padding: 20px; min-height: 160px; }
.site-loader-overlay--page { position: fixed; z-index: 1080; border-radius: 0; background: #faf8fd; min-height: 0; }
.site-loader-panel { text-align: center; color: var(--primary-dark, #3c2053); max-width: 340px; width: 100%; }
.site-loader-message { display: block; font-size: 19px; line-height: 1.4; overflow-wrap: anywhere; }
.site-loader-caption { display: block; margin-top: 8px; color: #6a5775; font-size: 14px; }
.site-loader-art { position: relative; height: 100px; width: 160px; margin: 0 auto 20px; color: var(--primary, #71318a); }
.site-loader-art svg { width: 30px; height: 30px; fill: currentColor; }
.site-loader-art i, .site-loader-art .sl-plane, .site-loader-art .sl-track { position: absolute; display: none; }
.site-loader-art--runway .sl-track { display: block; left: 10px; right: 10px; top: 68px; height: 4px; border-radius: 4px; background: repeating-linear-gradient(90deg,#e1d4e9 0 14px,transparent 14px 21px); }
.site-loader-art--runway .sl-plane { display: block; left: 12px; top: 27px; animation: sl-takeoff 1.8s ease-in-out infinite; }
.site-loader-art--runway .sl-plane svg { transform: rotate(45deg); width: 38px; height: 38px; }
.site-loader-art--orbit .sl-track { display: block; width: 80px; height: 80px; left: 40px; top: 10px; border: 2px dashed #d8c7e3; border-radius: 50%; }
.site-loader-art--orbit .sl-plane { display: grid; place-items: start center; inset: 0 30px; animation: sl-spin 2.4s linear infinite; }
.site-loader-art--orbit i:first-of-type { display: block; width: 16px; height: 16px; border-radius: 50%; background: #ffca2d; left: 72px; top: 42px; }
.site-loader-art--compass .sl-track { display: block; width: 78px; height: 78px; left: 41px; top: 11px; border: 5px solid #eee5f3; border-top-color: var(--primary, #71318a); border-right-color: #ffca2d; border-radius: 50%; animation: sl-spin 1.1s linear infinite; }
.site-loader-art--compass .sl-plane { display: grid; place-items: center; inset: 0; }
.site-loader-art--dots, .site-loader-art--bars { display: flex; align-items: center; justify-content: center; gap: 9px; }
.site-loader-art--dots i { display: block; position: static; width: 15px; height: 15px; background: currentColor; border-radius: 50%; animation: sl-bounce 1s ease-in-out infinite; }
.site-loader-art--dots i:nth-of-type(2) { animation-delay: .15s; background: #ffca2d; }
.site-loader-art--dots i:nth-of-type(3) { animation-delay: .3s; }
.site-loader-art--dots i:nth-of-type(4) { display: none; }
.site-loader-art--bars i { display: block; position: static; width: 12px; height: 40px; border-radius: 5px; background: currentColor; animation: sl-bar 1s ease-in-out infinite; }
.site-loader-art--bars i:nth-of-type(2) { animation-delay: .12s; }
.site-loader-art--bars i:nth-of-type(3) { animation-delay: .24s; background: #ffca2d; }
.site-loader-art--bars i:nth-of-type(4) { animation-delay: .36s; }
@keyframes sl-takeoff { 0%,100% { transform: translateX(0); opacity: .4; } 60% { transform: translate(95px,-14px); opacity: 1; } }
@keyframes sl-spin { to { transform: rotate(360deg); } }
@keyframes sl-bounce { 0%,80%,100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-12px); opacity: 1; } }
@keyframes sl-bar { 0%,100% { transform: scaleY(.4); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .site-loader-art * { animation: none !important; } }
.loader-demo { background: #faf8fd; padding: 44px 0; line-height: 1.5; }
.loader-demo h1, .loader-demo h2, .loader-demo h3 { color: var(--primary-dark); font-weight: 700; }
.loader-demo h1 { font-size: clamp(28px,4vw,40px); }
.loader-demo-intro { max-width: 780px; color: #675571; }
.loader-demo-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 16px; margin: 28px 0; }
.loader-demo-card { background: white; border: 1px solid #e6dced; border-radius: 12px; padding: 18px 12px; text-align: center; }
.loader-demo-card h2 { font-size: 17px; }
.loader-demo-card p { font-size: 13px; color: #675571; min-height: 40px; }
.loader-demo-card button { border: 1px solid var(--primary); color: var(--primary); background: #f6effa; padding: 9px 14px; border-radius: 7px; font-weight: 600; }
.loader-demo-card button[aria-pressed=true] { color: white; background: var(--primary); }
.loader-demo-section { background: white; border: 1px solid #e6dced; border-radius: 12px; padding: 24px; height: 100%; }
.loader-demo-section h2 { font-size: 24px; }
.loader-demo .offers-button { padding: 13px 20px; }
.loader-demo-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 20px; }
.loader-demo pre { font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; background: #f5eff8; padding: 18px; border-radius: 8px; }
.loader-demo-status { min-height: 24px; color: var(--primary); }
@media(max-width:991px) { .loader-demo-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:575px) { .loader-demo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; } .loader-demo-section { padding: 18px; } }

@media(max-width:575px) {
    .loader-demo-card [data-loader-art] { display: flex; justify-content: center; }
    .loader-demo-card .site-loader-art { flex-shrink: 0; transform: scale(.72); margin-bottom: 8px; }
}