.ca-pwa-install-banner { position: fixed; z-index: 2147483000; inset-inline: 16px; bottom: max(16px,env(safe-area-inset-bottom)); width: min(520px,calc(100vw - 32px)); margin-inline: auto; padding: 17px 18px 16px; border: 1px solid var(--ca-line,#d9e4dd); border-radius: 20px; background: var(--ca-paper,#fffdf9); color: var(--ca-text,#2a332e); box-shadow: 0 18px 55px rgba(17,48,40,.22); font-family: "IRANSans",Tahoma,sans-serif; direction: rtl; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .2s ease,transform .2s ease,visibility .2s ease; box-sizing: border-box } .ca-pwa-install-banner.is-visible { opacity: 1; visibility: visible; transform: translateY(0) } .ca-pwa-install-banner * { box-sizing: border-box } .ca-pwa-install-close { position: absolute; top: 9px; inset-inline-start: 9px; width: 30px; height: 30px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--ca-line,#d9e4dd); border-radius: 50%; background: var(--ca-bg,#f4f7f4); color: var(--ca-muted,#69756e); font: 22px/1 Arial,sans-serif; cursor: pointer } .ca-pwa-install-close:hover,.ca-pwa-install-close:focus-visible { background: var(--ca-primary-soft,#e5efea); color: var(--ca-primary,#174e43); outline: 2px solid var(--ca-primary,#174e43); outline-offset: 2px } .ca-pwa-install-main { display: flex; align-items: center; gap: 13px; min-width: 0; padding-inline-end: 22px } .ca-pwa-install-icon { display: block; flex: 0 0 52px; width: 52px; height: 52px; object-fit: cover; border-radius: 14px; border: 1px solid var(--ca-line,#d9e4dd); background: var(--ca-bg,#f4f7f4) } .ca-pwa-install-copy { min-width: 0; flex: 1 1 auto } .ca-pwa-install-copy strong { display: block; margin: 0 0 3px; color: var(--ca-primary,#174e43); font-size: 14px; line-height: 1.7; font-weight: 900 } .ca-pwa-install-copy p { margin: 0; color: var(--ca-muted,#68736d); font-size: 11px; line-height: 1.9 } .ca-pwa-install-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--ca-line,#e0e7e1) } .ca-pwa-install-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 20px; border: 1px solid var(--ca-primary,#174e43); border-radius: 12px; background: var(--ca-primary,#174e43); color: #fff; font-family: inherit; font-size: 12px; font-weight: 900; line-height: 1.5; cursor: pointer; transition: background-color .16s ease,transform .16s ease,box-shadow .16s ease } .ca-pwa-install-action:hover,.ca-pwa-install-action:focus-visible { background: var(--ca-primary-hover,#103d34); color: #fff; transform: translateY(-1px); box-shadow: 0 7px 18px rgba(23,78,67,.18) } .ca-pwa-install-action:disabled { opacity: .65; cursor: wait; transform: none } .ca-pwa-install-hint { min-width: 0; color: var(--ca-muted,#68736d); font-size: 10px; line-height: 1.7 } @media (max-width:480px) { .ca-pwa-install-banner { inset-inline: 10px; bottom: max(10px,env(safe-area-inset-bottom)); width: calc(100vw - 20px); padding: 15px 14px 13px; border-radius: 17px } .ca-pwa-install-main { gap: 10px; padding-inline-end: 20px } .ca-pwa-install-icon { flex-basis: 46px; width: 46px; height: 46px; border-radius: 12px } .ca-pwa-install-copy strong { font-size: 13px } .ca-pwa-install-copy p { font-size: 10px } .ca-pwa-install-actions { gap: 9px; margin-top: 11px; padding-top: 11px } .ca-pwa-install-action { min-height: 40px; padding-inline: 15px } .ca-pwa-install-hint { font-size: 9px } } @media (prefers-reduced-motion:reduce) { .ca-pwa-install-banner,.ca-pwa-install-action { transition: none !important } }