.bms-pwa {
position: fixed;
z-index: 100000;
right: 16px;
bottom: calc(16px + env(safe-area-inset-bottom));
left: 16px;
display: grid;
grid-template-columns: 56px minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
max-width: 520px;
margin-inline: auto;
padding: 14px 42px 14px 14px;
border: 1px solid rgba(7, 59, 92, 0.13);
border-radius: 18px;
background: #fff;
box-shadow: 0 16px 45px rgba(7, 59, 92, 0.2);
color: #073b5c;
opacity: 0;
transform: translateY(18px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.bms-pwa.is-visible {
opacity: 1;
transform: translateY(0);
}
.bms-pwa__icon {
display: block;
width: 56px;
height: 56px;
border-radius: 14px;
background: #f4fbff;
}
.bms-pwa__content {
min-width: 0;
}
.bms-pwa__content strong {
display: block;
font-size: 15px;
line-height: 1.25;
}
.bms-pwa__content p,
.bms-pwa__ios-help {
margin: 3px 0 0;
font-size: 13px;
line-height: 1.35;
color: #456271;
}
.bms-pwa__ios-help {
color: #073b5c;
}
.bms-pwa__action {
min-height: 40px;
padding: 8px 14px;
border: 0;
border-radius: 999px;
background: #073b5c;
color: #fff;
font: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.bms-pwa__close {
position: absolute;
top: 4px;
right: 7px;
display: grid;
width: 32px;
height: 32px;
padding: 0;
border: 0;
background: transparent;
color: #456271;
font: inherit;
font-size: 24px;
line-height: 1;
place-items: center;
cursor: pointer;
}
@media (max-width: 430px) {
.bms-pwa {
grid-template-columns: 48px minmax(0, 1fr);
}
.bms-pwa__icon {
width: 48px;
height: 48px;
}
.bms-pwa__action {
grid-column: 1 / -1;
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.bms-pwa {
transition: none;
}
}