/* „Pune Anuntat.ro pe ecranul telefonului” (public/js/pwa-install.js) */
.pwa-appicon { width: 48px; height: 48px; flex: none; border-radius: 12px; box-shadow: 0 1px 4px rgba(15, 23, 42, .18); background: #fff; }
.pwa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 10px; background: #2563eb; color: #fff; font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; text-decoration: none; }
.pwa-btn:hover { background: #1d4ed8; }
.pwa-btn svg { width: 18px; height: 18px; flex: none; }
.pwa-btn--sm { padding: 8px 12px; font-size: .85rem; white-space: nowrap; }
.pwa-btn--big { width: 100%; padding: 14px 18px; font-size: 1.05rem; margin-top: 14px; }
.pwa-x { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: #64748b; cursor: pointer; flex: none; }
.pwa-x svg { width: 20px; height: 20px; }

/* caseta din pagini */
[data-pwa-card][hidden] { display: none; }
.pwa-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid #bfdbfe; border-radius: 16px; background: linear-gradient(135deg, #eff6ff, #f8fafc 60%, #fffbeb); text-align: left; }
.pwa-card[hidden] { display: none; }
.pwa-card__body { display: grid; gap: 4px; min-width: 0; }
.pwa-card__body strong { font-size: 1.02rem; color: #0f172a; line-height: 1.3; }
.pwa-card__body span { font-size: .9rem; color: #334155; line-height: 1.5; }
.pwa-card__body .pwa-btn { justify-self: start; margin-top: 8px; }

/* bara de jos, deasupra meniului de jos al telefonului */
.pwa-banner { position: fixed; left: 8px; right: 8px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 45; display: flex; align-items: center; gap: 10px; padding: 10px 6px 10px 10px; border: 1px solid #dbeafe; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(15, 23, 42, .18); animation: pwa-up .25s ease-out; }
.pwa-banner[hidden] { display: none; }
.pwa-banner .pwa-appicon { width: 40px; height: 40px; border-radius: 10px; }
.pwa-banner__txt { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.pwa-banner__txt strong { font-size: .88rem; color: #0f172a; }
.pwa-banner__txt span { font-size: .78rem; color: #64748b; }
@keyframes pwa-up { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 420px) { .pwa-banner__txt span { display: none; } }
@media (min-width: 768px) { .pwa-banner { left: auto; right: 16px; bottom: 16px; max-width: 420px; } }

/* fereastra cu instalarea sau pașii */
.pwa-sheet-open { overflow: hidden; }
.pwa-sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.pwa-sheet__back { position: absolute; inset: 0; background: rgba(15, 23, 42, .5); }
.pwa-sheet__box { position: relative; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; background: #fff; box-shadow: 0 -10px 40px rgba(15, 23, 42, .25); animation: pwa-up .25s ease-out; color: #0f172a; }
@media (min-width: 640px) { .pwa-sheet { align-items: center; } .pwa-sheet__box { border-radius: 20px; } }
.pwa-sheet__box > .pwa-x { position: absolute; top: 10px; right: 10px; }
.pwa-sheet__head { display: flex; gap: 14px; align-items: center; padding-right: 36px; }
.pwa-sheet__head strong { display: block; font-size: 1.1rem; line-height: 1.3; }
.pwa-sheet__head span { display: block; margin-top: 2px; font-size: .88rem; color: #475569; line-height: 1.45; }
.pwa-intro { margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; font-size: .9rem; line-height: 1.5; }
.pwa-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.pwa-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; line-height: 1.5; color: #1e293b; }
.pwa-steps svg { display: inline-block; width: 20px; height: 20px; vertical-align: -4px; color: #2563eb; }
.pwa-n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: #2563eb; color: #fff; font-weight: 700; font-size: .85rem; }
.pwa-small { margin-top: 8px; font-size: .82rem; color: #64748b; text-align: center; }
.pwa-more { display: block; margin-top: 16px; text-align: center; font-size: .88rem; color: #2563eb; text-decoration: underline; }
.pwa-toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 70; transform: translate(-50%, 20px); opacity: 0; max-width: calc(100% - 32px); padding: 12px 16px; border-radius: 12px; background: #0f172a; color: #fff; font-size: .9rem; transition: opacity .25s, transform .25s; }
.pwa-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .pwa-banner, .pwa-sheet__box { animation: none; } }
