/* smart-skeleton.css — ضعه في wwwroot/css واربطه مرة واحدة في App.razor أو index.html */
.shs-skeleton {
    --shs-red: #E05128;
    --shs-orange: #F79B1E;
    --shs-blue: #32ACE2;
    --shs-navy: #0A70B7;
    --shs-grey: #6D6E71;
    --shs-base: #EEF3F8;
    --shs-highlight: rgba(255, 255, 255, .85);
    --shs-radius: 14px;
    position: relative;
    display: block;
    box-sizing: border-box;
    width: var(--shs-width, 100%);
    height: var(--shs-height, 300px);
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--shs-radius);
    background: radial-gradient(ellipse at 50% 45%, #F7FAFD 0%, var(--shs-base) 70%);
    container-type: size;
    isolation: isolate;
    font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
}

    /* ---------- الأشكال ---------- */
    .shs-skeleton.shs-square {
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .shs-skeleton.shs-circle {
        height: auto;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
    }

    .shs-skeleton.shs-text {
        height: var(--shs-height, 16px);
        border-radius: 6px;
    }

    /* ---------- الوميض (Wave) ---------- */
    .shs-skeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(100deg, transparent 20%, var(--shs-highlight) 50%, transparent 80%);
        transform: translateX(-100%);
        animation: shs-wave 1.6s ease-in-out infinite;
    }

    [dir="rtl"] .shs-skeleton::after,
    .shs-skeleton[dir="rtl"]::after {
        animation-name: shs-wave-rtl;
    }

    .shs-skeleton.shs-pulse::after,
    .shs-skeleton.shs-fade::after,
    .shs-skeleton.shs-none::after {
        display: none;
    }

    .shs-skeleton.shs-pulse {
        animation: shs-pulse 1.4s ease-in-out infinite;
    }

    .shs-skeleton.shs-fade {
        animation: shs-fade 1.4s ease-in-out infinite alternate;
    }

/* خط ملوّن رفيع يتحرك أسفل الهيكل */
.shs-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    z-index: 3;
    background: linear-gradient(90deg, transparent, var(--shs-orange), var(--shs-red), var(--shs-blue), var(--shs-navy), transparent);
    background-size: 200% 100%;
    animation: shs-line 2.4s linear infinite;
    opacity: .75;
}

.shs-circle .shs-line,
.shs-text .shs-line {
    display: none;
}

/* ---------- البيت الزخرفي في الخلفية ---------- */
.shs-bg {
    position: absolute;
    width: 140%;
    height: 140%;
    left: -10%;
    top: -18%;
    z-index: 0;
    pointer-events: none;
}

.shs-bg-path {
    fill: none;
    stroke: #E3ECF5;
    stroke-width: 60;
    stroke-linejoin: round;
}

/* ---------- مركز الشعار ---------- */
.shs-center {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4cqmin;
    padding: 6cqmin;
    box-sizing: border-box;
}

.shs-logo-box {
    position: relative;
    width: min(46cqmin, 220px);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shs-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(50, 172, 226, .35);
    animation: shs-ripple 2.6s ease-out infinite;
}

.shs-ring-2 {
    border-color: rgba(247, 155, 30, .35);
    animation-delay: 1.3s;
}

.shs-logo {
    position: relative;
    width: 74%;
    height: 74%;
    overflow: visible;
}

.shs-seg {
    fill: none;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: shs-draw .15s ease-out forwards;
}

.shs-w38 {
    stroke-width: 38;
}

.shs-w24 {
    stroke-width: 24;
}

.shs-w18 {
    stroke-width: 18;
    stroke-linecap: round;
}

.shs-c-red {
    stroke: var(--shs-red);
}

.shs-c-orange {
    stroke: var(--shs-orange);
}

.shs-c-blue {
    stroke: var(--shs-blue);
}

.shs-c-navy {
    stroke: var(--shs-navy);
}

.shs-d1 {
    animation-delay: .01s;
}

.shs-d2 {
    animation-delay: .02s;
}

.shs-d3 {
    animation-delay: .03s;
}

.shs-d4 {
    animation-delay: .04s;
}

.shs-current {
    fill: none;
    stroke: #fff;
    stroke-width: 9;
    stroke-linecap: round;
    stroke-dasharray: 5 95;
    stroke-dashoffset: 100;
    animation: shs-flow 2.6s linear .2s infinite;
}

.shs-power {
    transform-origin: 585px 920px;
    animation: shs-power 1.8s ease-in-out .2s infinite;
}

/* ---------- النصوص ---------- */
.shs-brand {
    text-align: center;
    line-height: 1.15;
    color: var(--shs-grey);
}

.shs-brand-ar {
    font-size: clamp(14px, 6cqmin, 28px);
    font-weight: 500;
}

.shs-brand-en {
    direction: ltr;
    font-family: 'Century Gothic', 'Tajawal', 'Segoe UI', sans-serif;
    font-size: clamp(12px, 5cqmin, 24px);
    letter-spacing: .4px;
}

.shs-brand-tld {
    font-size: .5em;
}

.shs-wait {
    display: flex;
    align-items: center;
    gap: 8px;
    direction: rtl;
    font-size: clamp(12px, 4cqmin, 17px);
    font-weight: 700;
    color: #55565a;
}

.shs-dots {
    display: inline-flex;
    gap: 4px;
    direction: ltr;
}

.shs-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: shs-bounce 1.2s ease-in-out infinite;
}

.shs-dot-1 {
    background: var(--shs-red);
}

.shs-dot-2 {
    background: var(--shs-orange);
    animation-delay: .15s;
}

.shs-dot-3 {
    background: var(--shs-blue);
    animation-delay: .30s;
}

.shs-dot-4 {
    background: var(--shs-navy);
    animation-delay: .45s;
}

/* ---------- التكيّف مع حجم الحاوية ---------- */
@container (max-height: 260px) {
    .shs-wait {
        display: none;
    }
}

@container (max-height: 190px) {
    .shs-brand {
        display: none;
    }

    .shs-ring {
        display: none;
    }
}

@container (max-height: 90px) {
    .shs-center, .shs-bg {
        display: none;
    }
}

@container (max-width: 160px) {
    .shs-brand, .shs-wait {
        display: none;
    }
}

.shs-text .shs-center,
.shs-text .shs-bg {
    display: none;
}

.shs-circle .shs-brand,
.shs-circle .shs-wait,
.shs-circle .shs-bg {
    display: none;
}

/* ---------- الحركات ---------- */
@keyframes shs-wave {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

@keyframes shs-wave-rtl {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes shs-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .55;
    }
}

@keyframes shs-fade {
    from {
        opacity: 1;
    }

    to {
        opacity: .45;
    }
}

@keyframes shs-line {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: 0 0;
    }
}

@keyframes shs-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes shs-flow {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes shs-power {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

@keyframes shs-ripple {
    0% {
        transform: scale(.85);
        opacity: .9;
    }

    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

@keyframes shs-bounce {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: .5;
    }

    40% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shs-skeleton, .shs-skeleton::after,
    .shs-skeleton .shs-line, .shs-skeleton .shs-ring,
    .shs-skeleton .shs-current, .shs-skeleton .shs-power,
    .shs-skeleton .shs-dot {
        animation: none;
    }

        .shs-skeleton .shs-seg {
            animation: none;
            stroke-dashoffset: 0;
        }

        .shs-skeleton .shs-current {
            display: none;
        }
}