/* ============================================================
   install-banner.css -- "Install the Vardan app" banner (1 Nov)
   Sirf phone par, page ke neeche, page ko rokta nahi.
   Sirf theme.css ke token -- koi hex rang nahi.
   z-index 900: WhatsApp card (50) ke upar, install card (1000) ke neeche.
   ============================================================ */
.ib {
  position: fixed; left: 10px; right: 10px; z-index: 900;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); color: var(--text); font-family: var(--font-body);
  border: 1px solid var(--border); border-radius: 18px;
  padding: 12px 12px 12px;
  box-shadow: 0 18px 40px -18px rgba(8,57,35,.5), 0 2px 8px -2px rgba(28,26,23,.12);
  transform: translateY(24px); opacity: 0;
  transition: transform var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease);
}
.ib.on { transform: none; opacity: 1; }
.ib.ios { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }   /* Safari ki neeche wali patti ke upar */
.ib-row { display: flex; align-items: center; gap: 10px; }
.ib-ico {
  flex: none; width: 42px; height: 42px; border-radius: 12px; overflow: hidden; background: var(--accent);
  box-shadow: 0 3px 0 0 var(--green-deep);
}
.ib-ico img { width: 100%; height: 100%; display: block; }
.ib-t { flex: 1; min-width: 0; }
.ib-t b { display: block; font-size: 13.5px; line-height: 1.25; color: var(--green-deep); font-family: var(--font-display); }
.ib-t small { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.35; color: var(--text-muted); }
.ib-x {
  flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent;
  color: var(--text-dim); font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.ib-x:hover { background: var(--surface-2); color: var(--text); }
.ib-act { display: flex; gap: 8px; margin-top: 10px; }
.ib-go {
  flex: 1; border: 0; border-radius: var(--r-pill); padding: 10px 14px; cursor: pointer;
  background: var(--accent); color: var(--on-accent); font: 600 13px var(--font-body);
}
.ib-go:hover { background: var(--accent-strong); }
.ib-go:disabled { opacity: .6; cursor: default; }
.ib-no {
  border: 1px solid var(--border); border-radius: var(--r-pill); padding: 10px 14px; cursor: pointer;
  background: transparent; color: var(--text-muted); font: 500 13px var(--font-body);
}
.ib-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.ib-steps li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; line-height: 1.35; counter-increment: ibstep; }
.ib-steps li::before {
  content: counter(ibstep); flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-light); color: var(--accent-strong); font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
}
.ib-share {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  padding: 1px 7px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); font-size: 11.5px;
}
.ib-share svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ib-arrow {
  position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 9px solid var(--surface);
}
/* Laptop / bade screen par kabhi nahi (JS bhi rokta hai -- ye dohri suraksha) */
@media (min-width: 821px) { .ib { display: none !important; } }
/* Installed app ke andar kabhi nahi */
html.app-mode .ib { display: none !important; }