/* ==========================================================================
   GR Recharge — Loader (poori site + app me ek hi)
   --------------------------------------------------------------------------
   Teen cheezein is file me hain:
     1. .gr-ld      — poora screen dhakne wala loader (page badalna, form submit)
     2. .gr-ld-bar  — sabse upar patli line (background me chalne wale kaam)
     3. .gr-busy    — button ke andar ka chhota ghoomta chakkar
   JS: assets/js/loader.js
   Yahan koi inline style nahi chahiye, isliye member panel ki sakht CSP
   (script-src 'self') ke saath bina chhed-chhad ke chalta hai.
   ========================================================================== */

:root {
    /* Logo ke apne do rang — chakkar bhi wahi ghoomta hai jo logo me hai */
    --gr-ld-blue: #0679ac;
    --gr-ld-green: #259847;
    --gr-ld-ink: #0f172a;
}

/* ---------- 1. Poora screen wala loader ---------- */
.gr-ld {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8, 13, 28, .62);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
}

.gr-ld.is-on {
    opacity: 1;
    visibility: visible;
}

.gr-ld-card {
    background: #fff;
    border-radius: 22px;
    padding: 30px 34px 26px;
    box-shadow: 0 26px 60px rgba(2, 6, 23, .34);
    text-align: center;
    max-width: 320px;
    transform: translateY(8px) scale(.97);
    transition: transform .2s ease;
}

.gr-ld.is-on .gr-ld-card {
    transform: none;
}

/* ghoomta hua chakkar + beech me logo */
.gr-ld-spin {
    position: relative;
    width: 86px;
    height: 86px;
    margin: 0 auto 18px;
}

.gr-ld-spin::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 6px solid rgba(6, 121, 172, .15);
}

.gr-ld-spin::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 6px solid transparent;
    border-top-color: var(--gr-ld-blue);
    border-right-color: var(--gr-ld-green);
    animation: gr-ld-turn .85s linear infinite;
}

.gr-ld-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border-radius: 12px;
    object-fit: contain;
}

.gr-ld-msg {
    font-size: 15px;
    font-weight: 600;
    color: var(--gr-ld-ink);
    line-height: 1.45;
}

.gr-ld-sub {
    margin-top: 6px;
    font-size: 12.5px;
    color: #64748b;
}

/* ---------- 2. Sabse upar patli line ---------- */
.gr-ld-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 20001;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, var(--gr-ld-blue), var(--gr-ld-green));
    box-shadow: 0 0 10px rgba(6, 121, 172, .5);
    opacity: 0;
    transition: width .28s ease, opacity .3s ease;
    pointer-events: none;
}

.gr-ld-bar.is-on {
    opacity: 1;
}

/* ---------- 3. Button ke andar chakkar ---------- */
/* NOTE: button ko disabled NAHI karte — disabled button ka naam/value POST me
   jaata hi nahi, aur us se form ka submit adhoora chala jaata. Isliye sirf
   dikhne me busy karte hain aur click band kar dete hain. */
.gr-busy {
    pointer-events: none;
    opacity: .8;
}

.gr-busy::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: .55em;
    vertical-align: -.15em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: gr-ld-turn .7s linear infinite;
}

/* ---------- Page ke andar ka chhota loader (list/table refresh) ---------- */
.gr-ld-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 16px;
    color: #64748b;
    font-size: 14px;
}

.gr-ld-inline::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 3px solid rgba(6, 121, 172, .2);
    border-top-color: var(--gr-ld-blue);
    border-radius: 50%;
    animation: gr-ld-turn .8s linear infinite;
}

@keyframes gr-ld-turn {
    to { transform: rotate(360deg); }
}

/* Jinke phone par animation band hai (accessibility) — ghumana band,
   sirf halka jhilmilana, taki unhe bhi pata chale ki kaam chal raha hai */
@media (prefers-reduced-motion: reduce) {
    .gr-ld-spin::after,
    .gr-busy::after,
    .gr-ld-inline::before {
        animation: gr-ld-fade 1.4s ease-in-out infinite;
    }
    .gr-ld,
    .gr-ld-card,
    .gr-ld-bar { transition: none; }
}

@keyframes gr-ld-fade {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

/* Dark mode wale phone par card kaala rahe to aankh me na chubhe */
@media (prefers-color-scheme: dark) {
    .gr-ld-card {
        background: #111827;
        box-shadow: 0 26px 60px rgba(0, 0, 0, .6);
    }
    .gr-ld-msg { color: #f1f5f9; }
    .gr-ld-sub { color: #94a3b8; }
}

/* Chhapte (print) waqt loader kabhi na chhape */
@media print {
    .gr-ld,
    .gr-ld-bar { display: none !important; }
}

/* =====================================================================
 * App ke andar / bahar — kya dikhe kya nahi   (1 Oct 2026)
 * ---------------------------------------------------------------------
 * assets/js/appbanner.js <html> par nishani lagati hai: gr-android aur
 * gr-inapp. Wo file <head> me, defer ke bina chalti hai, isliye nishani
 * page banne se PEHLE lag jaati hai — koi jhalak (flash) nahi hoti.
 *
 *   .gr-only-app      -> sirf installed app ke andar
 *   .gr-hide-in-app   -> app ke andar mat dikhao (jaise "download karein")
 *   .gr-only-android  -> sirf Android ke BROWSER me (app me nahi)
 *
 * JS band ho to .gr-hide-in-app dikhega aur baaki do chhupe rahenge —
 * yaani aam visitor ko sahi cheez hi milti hai.
 * ===================================================================== */
.gr-only-app,
.gr-only-android { display: none; }

html.gr-inapp .gr-only-app { display: block; }
html.gr-inapp .gr-hide-in-app { display: none !important; }
html.gr-android:not(.gr-inapp) .gr-only-android { display: block; }

/* Neeche chipki hui "App download karein" patti */
.gr-appbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1045;                       /* bootstrap modal (1055) se neeche */
    background: #0f172a;
    color: #fff;
    padding: 10px 12px;
    box-shadow: 0 -6px 20px rgba(15, 23, 42, .25);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.gr-appbar .in { display: flex; align-items: center; gap: 12px; max-width: 760px; margin: 0 auto; }
.gr-appbar img { width: 38px; height: 38px; border-radius: 9px; background: #fff; padding: 3px; flex: 0 0 38px; }
.gr-appbar .t { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.gr-appbar .t b { display: block; font-size: 14px; }
.gr-appbar .t span { font-size: 11.5px; color: #94a3b8; }
.gr-appbar .go {
    flex: 0 0 auto; background: #16a34a; color: #fff; font-weight: 700; font-size: 13px;
    padding: 8px 16px; border-radius: 9px; text-decoration: none; white-space: nowrap;
}
.gr-appbar .go:hover { background: #15803d; color: #fff; }
.gr-appbar .x {
    flex: 0 0 auto; background: none; border: 0; color: #64748b;
    font-size: 17px; line-height: 1; padding: 6px 2px 6px 4px; cursor: pointer;
}
.gr-appbar .x:hover { color: #e2e8f0; }

@media print { .gr-appbar { display: none !important; } }