/* Humrah — install prompt. Bottom sheet on mobile, corner card on desktop. */
.pwa-install-scrim {
  position: fixed; inset: 0; background: var(--color-overlay, rgba(11,31,58,0.55));
  opacity: 0; pointer-events: none; transition: opacity var(--duration-base, 280ms) var(--ease-refined, ease);
  z-index: 998;
}
.pwa-install-scrim.show { opacity: 1; pointer-events: auto; }

.pwa-install-card {
  position: fixed; z-index: 999; left: 50%; bottom: 20px;
  width: min(420px, calc(100% - 32px));
  transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
  transition: transform var(--duration-base, 280ms) var(--ease-refined, ease), opacity var(--duration-base, 280ms) var(--ease-refined, ease);
  background: var(--color-surface, #fff); border-radius: var(--radius-lg, 14px);
  box-shadow: var(--shadow-lg, 0 20px 48px -12px rgba(11,31,58,.18));
  padding: 22px 22px 18px; border: 1px solid var(--color-border, #E7E2D8);
}
.pwa-install-card.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }

.pwa-install-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pwa-install-head img { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; }
.pwa-install-head h3 { font: var(--text-h4, 600 1.125rem/1.35 sans-serif); font-family: var(--font-serif); margin: 0; color: var(--color-text, #2B2B2B); }
.pwa-install-head p { font: var(--text-caption, 0.75rem/1.5 sans-serif); color: var(--color-text-muted, #6b6b6b); margin: 2px 0 0; }

.pwa-install-body { font: var(--text-body-sm, 0.875rem/1.55 sans-serif); color: var(--color-text-muted, #6b6b6b); margin: 0 0 16px; }

.pwa-install-steps { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.pwa-install-step { display: flex; align-items: center; gap: 10px; font: var(--text-body-sm, 0.875rem/1.55 sans-serif); color: var(--color-text, #2B2B2B); }
.pwa-install-step .badge { width: 22px; height: 22px; border-radius: 50%; background: var(--color-accent-soft, rgba(212,175,55,0.12)); color: var(--color-text-gold, #8a6d1f); display: flex; align-items: center; justify-content: center; font: var(--text-caption, 0.75rem); font-weight: 700; flex-shrink: 0; }
.pwa-install-step svg, .pwa-install-step i { width: 16px; height: 16px; flex-shrink: 0; }

.pwa-install-actions { display: flex; gap: 10px; align-items: center; }
.pwa-install-btn { flex: 1; background: var(--navy-900, #0B1F3A); color: #fff; border: none; border-radius: var(--radius-md, 10px); padding: 11px 16px; font: var(--text-button, 500 0.9375rem); text-align: center; cursor: pointer; }
.pwa-install-btn:hover { background: var(--navy-700, #17335c); }
.pwa-install-dismiss { background: none; border: none; color: var(--color-text-muted, #6b6b6b); font: var(--text-body-sm, 0.875rem); cursor: pointer; padding: 11px 8px; }
.pwa-install-close { position: absolute; top: 14px; right: 14px; background: none; border: none; color: var(--color-text-muted, #6b6b6b); cursor: pointer; padding: 4px; line-height: 0; }

@media (min-width: 640px) {
  .pwa-install-card { left: auto; right: 24px; bottom: 24px; transform: translateY(24px); }
  .pwa-install-card.show { transform: translateY(0); }
  .pwa-install-scrim { display: none; } /* only used as a focus scrim on mobile-width sheets */
}