/* ─────────────────────────────────────────────
    GLOBAL LOADER — فروشگاه مواد غذایی
───────────────────────────────────────────── */

#globalLoader {
    --gl-bg: #eef0f4;
    --gl-text: #1f2430;
    --gl-brand: #4f6ef7;
    --gl-brand-2: #7b8ffc;
    --gl-green: #43b581;
    --gl-orange: #ff9f43;
    --gl-red: #ef5f6b;

    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    direction: rtl;
}

/* پس‌زمینه‌ی محو و تازه، نه یه پرده‌ی تیره‌ی خشک */
.loader__field {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 800px 500px at 15% 10%, rgba(67, 181, 129, 0.10), transparent 60%),
        radial-gradient(ellipse 800px 500px at 85% 90%, rgba(79, 110, 247, 0.10), transparent 60%),
        var(--gl-bg);
    backdrop-filter: blur(6px);
}

.loader__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 20px;
}

/* ─────────────────────────────────────────────
    نشان برند: حلقه + مدار محصولات + لوگو
───────────────────────────────────────────── */
.loader__mark {
    position: relative;
    width: 128px;
    height: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader__halo {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79, 110, 247, 0.16), transparent 70%);
    animation: glHaloPulse 2.6s ease-in-out infinite;
}

.loader__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.loader__ring-track {
    fill: none;
    stroke: rgba(31, 36, 48, 0.08);
    stroke-width: 3;
}
.loader__ring-arc {
    fill: none;
    stroke: var(--gl-brand);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 264;
    stroke-dashoffset: 210;
    animation: glRingSpin 1.6s cubic-bezier(.65,0,.35,1) infinite;
    transform-origin: 50% 50%;
}

/* سه‌تا نقطه‌ی رنگی (میوه/سبزی) که دور نشان می‌چرخن */
.loader__orbit {
    position: absolute;
    inset: 0;
    animation: glOrbitSpin 7s linear infinite;
}
.loader__produce {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin: -4.5px 0 0 -4.5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.loader__produce--1 {
    background: var(--gl-green);
    transform: rotate(0deg) translate(58px) rotate(0deg);
}
.loader__produce--2 {
    background: var(--gl-orange);
    transform: rotate(120deg) translate(58px) rotate(0deg);
}
.loader__produce--3 {
    background: var(--gl-red);
    transform: rotate(240deg) translate(58px) rotate(0deg);
}

.loader__logo {
    position: relative;
    z-index: 2;
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 16px;
    background: #fff;
    padding: 8px;
    box-shadow: 0 8px 20px rgba(31, 36, 48, 0.10);
    animation: glLogoBreathe 2.2s ease-in-out infinite;
}

/* ─────────────────────────────────────────────
    متن
───────────────────────────────────────────── */
.loader__word {
    margin: 0;
    font-family: "vazir", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--gl-text);
    letter-spacing: .2px;
    opacity: 0;
    animation: glWordIn .6s ease .15s forwards;
}
.loader__word-accent {
    font-weight: 800;
    color: var(--gl-brand);
}

/* ─────────────────────────────────────────────
    پروگرس بار
───────────────────────────────────────────── */
.loader__bar {
    position: relative;
    width: 168px;
    height: 6px;
    border-radius: 999px;
    background: rgba(31, 36, 48, 0.08);
    overflow: hidden;
}
.loader__bar-fill {
    display: block;
    height: 100%;
    width: 35%; /* اگه جایی با جی‌اس درصد واقعی ست میشه، همینجا اورراید میشه */
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gl-brand), var(--gl-green));
    transition: width .3s ease;
}
.loader__bar-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
    animation: glShimmer 1.4s linear infinite;
}

/* ─────────────────────────────────────────────
    KEYFRAMES
───────────────────────────────────────────── */
@keyframes glHaloPulse {
    0%, 100% { transform: scale(0.94); opacity: .7; }
    50%      { transform: scale(1.05); opacity: 1; }
}

@keyframes glRingSpin {
    0%   { transform: rotate(0deg); stroke-dashoffset: 210; }
    50%  { stroke-dashoffset: 40; }
    100% { transform: rotate(360deg); stroke-dashoffset: 210; }
}

@keyframes glOrbitSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes glLogoBreathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

@keyframes glWordIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes glShimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

/* ─────────────────────────────────────────────
    موبایل کوچک
───────────────────────────────────────────── */
@media (max-width: 360px) {
    .loader__mark { width: 108px; height: 108px; }
    .loader__logo { width: 46px; height: 46px; }
    .loader__produce--1,
    .loader__produce--2,
    .loader__produce--3 { transform: rotate(var(--a, 0deg)) translate(48px) rotate(0deg); }
    .loader__produce--1 { --a: 0deg; }
    .loader__produce--2 { --a: 120deg; }
    .loader__produce--3 { --a: 240deg; }
    .loader__bar { width: 140px; }
}

/* حرکت کمتر برای کاربرانی که ترجیح میدن انیمیشن محدود باشه */
@media (prefers-reduced-motion: reduce) {
    .loader__halo,
    .loader__ring-arc,
    .loader__orbit,
    .loader__logo,
    .loader__bar-fill::after {
        animation: none;
    }
}