/* Result alerts + Get the App buttons, the two prompts and the iPhone install steps (kept outside the Tailwind build). */
.pwa-actions { display: flex; align-items: center; gap: 8px; }
.pwa-actions--mobile { margin-left: auto; margin-right: 8px; }
.pwa-actions--desktop { margin-left: 8px; }
@media (min-width: 768px) { .pwa-actions--mobile { display: none; } }
@media (max-width: 767.98px) { .pwa-actions--desktop { display: none; } }

.pwa-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px; border: 0; border-radius: 999px; font-weight: 700; font-size: 13.5px; line-height: 1; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, transform .15s; }
.pwa-btn:active { transform: scale(.96); }
.pwa-btn svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pwa-btn--alerts { background: #f71313; color: #fff; box-shadow: 0 0 0 3px rgba(247, 19, 19, .25); }
.pwa-btn--alerts:hover { background: #c60e0e; }
.pwa-btn--alerts.is-on { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .25); }
.pwa-btn--app { background: #fff; color: #242424; }
.pwa-btn--app:hover { background: #fde047; }
.pwa-btn:disabled { opacity: .7; cursor: default; }
.pwa-btn[hidden], .pwa-foot[hidden], [data-install-wrap][hidden] { display: none; }
@media (max-width: 560px) { .pwa-btn { width: 36px; padding: 0; justify-content: center; } .pwa-btn span { display: none; } }
.pwa-foot { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }

/* Shared prompt buttons */
.pwa-prompt-actions { display: flex; gap: 8px; flex: none; }
.pwa-prompt-yes, .pwa-prompt-no { height: 36px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap; border: 0; }
.pwa-prompt-yes { background: #f71313; color: #fff; }
.pwa-prompt-yes:hover { background: #c60e0e; }
.pwa-prompt-no { background: transparent; color: inherit; opacity: .75; }
.pwa-prompt-no:hover { opacity: 1; }

/* Bottom: turn on alerts (shown after the install card is answered). Sits below Google's ads in stacking and is
   moved above a bottom anchor ad by pwa.js, so it never covers an ad. */
.pwa-alerts-card { position: fixed; z-index: 2147483000; bottom: 12px; left: 50%; width: min(560px, calc(100% - 20px)); display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: #242424; color: #fff; border-top: 4px solid #fde047; box-shadow: 0 -6px 40px rgba(0, 0, 0, .3); transform: translate(-50%, 160%); transition: transform .3s ease, bottom .2s ease; }
.pwa-alerts-card.is-open { transform: translate(-50%, 0); }
.pwa-alerts-card p { margin: 0; font-size: 14px; line-height: 1.4; flex: 1; }
.pwa-alerts-card strong { color: #fde047; }
.pwa-alerts-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #f71313; animation: pwa-ring 1.6s ease-in-out 2; }
.pwa-alerts-icon svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes pwa-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-4deg); } }

/* Bottom: install the app (shown first) */
.pwa-install-card { position: fixed; z-index: 2147483000; bottom: 12px; left: 50%; width: min(560px, calc(100% - 20px)); display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: #fff; color: #111827; border-top: 4px solid #f71313; box-shadow: 0 -6px 40px rgba(0, 0, 0, .25); transform: translate(-50%, 160%); transition: transform .3s ease, bottom .2s ease; }
.pwa-install-card.is-open { transform: translate(-50%, 0); }
/* Out of the way while an ad scrolls behind the card (pwa.js), so an ad is never covered. */
.pwa-install-card.is-open.is-ducked, .pwa-alerts-card.is-open.is-ducked { transform: translate(-50%, 160%); }
.pwa-install-card img { flex: none; border-radius: 12px; }
.pwa-install-text { flex: 1; display: grid; gap: 2px; font-size: 13px; color: #4b5563; line-height: 1.35; }
.pwa-install-text strong { font-size: 15px; color: #111827; }
.pwa-install-card .pwa-prompt-no { color: #374151; }
@media (max-width: 560px) {
  .pwa-alerts-card, .pwa-install-card { flex-wrap: wrap; }
  .pwa-alerts-card .pwa-prompt-actions, .pwa-install-card .pwa-prompt-actions { width: 100%; justify-content: flex-end; }
}

/* iPhone install steps */
.ios-install { border: 0; border-radius: 18px; padding: 28px 24px 22px; max-width: 360px; width: calc(100% - 32px); text-align: center; box-shadow: 0 20px 50px rgba(15, 23, 42, .25); color: #111827; }
.ios-install::backdrop { background: rgba(15, 23, 42, .55); }
.ios-install img { margin: 0 auto 12px; border-radius: 14px; }
.ios-install h2 { font-size: 19px; font-weight: 700; margin-bottom: 14px; }
.ios-install ol { text-align: left; margin: 0 0 20px; padding-left: 20px; display: grid; gap: 10px; font-size: 14.5px; list-style: decimal; }
.ios-install ol svg { width: 16px; height: 16px; vertical-align: -3px; color: #0a84ff; display: inline; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ios-note { font-size: 13px; color: #6b7280; background: #f8fafc; border-radius: 10px; padding: 10px 12px; margin: -6px 0 16px; text-align: left; }
.ios-note[hidden] { display: none; }
.ios-install button { width: 100%; padding: 11px 16px; border: 0; border-radius: 999px; background: #f71313; color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }
.ios-install button:hover { background: #c60e0e; }