/* Sarkit — "install this on your phone" UI.
 *
 * Lives on every page, signed in or not, because the page a shopkeeper opens
 * from a WhatsApp link is the login screen and that is exactly when installing
 * is worth offering.
 *
 * Palette is Sarkit's own (see css/sarkit-modern.css) rather than the teal the
 * old banner used. Tokens are namespaced and scoped to this component so it can
 * be dropped onto the auth layout, which has no app CSS at all.
 */
.ski-root{
    --ski-ink:#1e293b; --ski-ink-deep:#0f172a; --ski-dim:#64748b;
    --ski-card:#ffffff; --ski-sunk:#f8fafc; --ski-line:#e2e8f0;
    --ski-primary:#f59e0b; --ski-primary-ink:#1e293b; --ski-primary-hover:#d97706;
    --ski-scrim:rgba(15,23,42,.55);
    font-family:'Inter','Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    color:var(--ski-ink);
}
.ski-root[hidden]{display:none !important;}
.ski-ur{font-family:"Noto Nastaliq Urdu","Noto Sans Arabic","Jameel Noori Nastaleeq",serif;}

/* ── the nudge: a bar along the bottom, once, snoozeable ──────────────────── */
#ski-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:2147483000;
    display:flex; align-items:center; gap:12px;
    padding:12px 14px calc(12px + env(safe-area-inset-bottom));
    background:var(--ski-card); border-top:1px solid var(--ski-line);
    box-shadow:0 -6px 24px rgba(15,23,42,.10);
    animation:ski-up .22s ease-out;
}
@keyframes ski-up{from{transform:translateY(100%)}to{transform:none}}
#ski-bar img{flex:0 0 38px; width:38px; height:38px; border-radius:9px;}
#ski-bar-text{flex:1 1 auto; min-width:0; line-height:1.35;}
#ski-bar-text b{display:block; font-size:14px; font-weight:700;}
#ski-bar-text span{display:block; font-size:12.5px; color:var(--ski-dim);}
#ski-bar-go{
    flex:0 0 auto; padding:10px 16px; border:0; border-radius:8px; cursor:pointer;
    background:var(--ski-primary); color:var(--ski-primary-ink);
    font:inherit; font-size:14px; font-weight:700; white-space:nowrap;
}
#ski-bar-go:hover{background:var(--ski-primary-hover);}
#ski-bar-x{
    flex:0 0 auto; width:30px; height:30px; border:0; border-radius:8px; cursor:pointer;
    background:transparent; color:var(--ski-dim); font-size:19px; line-height:1;
}
#ski-bar-x:hover{background:var(--ski-sunk); color:var(--ski-ink);}

/* ── the sheet: what to actually do, per browser ──────────────────────────── */
#ski-sheet{
    position:fixed; inset:0; z-index:2147483001;
    display:flex; align-items:flex-end; justify-content:center;
    background:var(--ski-scrim); animation:ski-fade .16s ease-out;
}
@keyframes ski-fade{from{opacity:0}to{opacity:1}}
@media (min-width:640px){ #ski-sheet{align-items:center;} }
#ski-card{
    width:100%; max-width:440px; max-height:88vh; overflow-y:auto;
    background:var(--ski-card);
    border-radius:16px 16px 0 0; padding:20px 20px calc(20px + env(safe-area-inset-bottom));
    animation:ski-up .22s ease-out;
}
@media (min-width:640px){ #ski-card{border-radius:16px; padding-bottom:20px;} }
#ski-card header{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
#ski-card header img{flex:0 0 46px; width:46px; height:46px; border-radius:11px;}
#ski-card header div{flex:1 1 auto; min-width:0;}
#ski-card header b{display:block; font-size:16px; font-weight:700;}
#ski-card header span{display:block; font-size:12.5px; color:var(--ski-dim);}
#ski-card-x{
    flex:0 0 auto; width:32px; height:32px; border:0; border-radius:8px; cursor:pointer;
    background:var(--ski-sunk); color:var(--ski-dim); font-size:19px; line-height:1;
}
#ski-card-x:hover{color:var(--ski-ink);}
#ski-why{margin:0 0 14px; font-size:13.5px; line-height:1.6; color:var(--ski-dim);}

/* numbered steps for the browsers that cannot be driven by script */
.ski-steps{margin:0; padding:0; list-style:none; counter-reset:ski;}
.ski-steps li{
    counter-increment:ski; position:relative; padding:9px 0 9px 34px;
    font-size:14px; line-height:1.55; border-bottom:1px solid var(--ski-line);
}
.ski-steps li:last-child{border-bottom:0;}
.ski-steps li::before{
    content:counter(ski); position:absolute; left:0; top:9px;
    width:23px; height:23px; border-radius:50%;
    background:var(--ski-sunk); border:1px solid var(--ski-line);
    font-size:12px; font-weight:700; color:var(--ski-ink);
    display:flex; align-items:center; justify-content:center;
}
.ski-steps b{font-weight:700;}
.ski-steps .ski-ur{font-size:.95em;}

#ski-do{
    display:block; width:100%; margin-top:16px; padding:14px; border:0; border-radius:10px;
    background:var(--ski-primary); color:var(--ski-primary-ink); cursor:pointer;
    font:inherit; font-size:15px; font-weight:700;
}
#ski-do:hover{background:var(--ski-primary-hover);}
#ski-do[hidden]{display:none !important;}
#ski-copy{
    display:block; width:100%; margin-top:8px; padding:11px; border-radius:9px; cursor:pointer;
    background:transparent; border:1px solid var(--ski-line); color:var(--ski-dim);
    font:inherit; font-size:13px;
}
#ski-copy:hover{border-color:var(--ski-primary); color:var(--ski-ink);}
#ski-copy[hidden]{display:none !important;}
#ski-note{margin:12px 0 0; font-size:12px; line-height:1.55; color:var(--ski-dim); text-align:center;}
#ski-note[hidden]{display:none !important;}