.cozymom-pwa-prompt {
position: fixed;
left: 12px;
right: 12px;
bottom: 12px;
z-index: 99998;
max-width: 480px;
margin: 0 auto;
background: #fff;
border: 1px solid #E8DDD0;
border-radius: 16px;
box-shadow: 0 10px 28px rgba(40, 25, 15, 0.18);
transform: translateY(140%);
opacity: 0;
transition: transform .4s cubic-bezier(.16, 1, .3, 1), opacity .25s ease;
-webkit-tap-highlight-color: transparent;
}
.cozymom-pwa-prompt.is-visible {
transform: translateY(0);
opacity: 1;
}
.cozymom-pwa__inner {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
}
.cozymom-pwa__icon {
width: 48px;
height: 48px;
flex: 0 0 48px;
border-radius: 12px;
object-fit: cover;
background: #FAF6F0;
border: 1px solid #F0E5D5;
}
.cozymom-pwa__text {
flex: 1 1 auto;
display: flex;
flex-direction: column;
line-height: 1.35;
min-width: 0;
}
.cozymom-pwa__text strong {
font-size: 15px;
font-weight: 700;
color: #2A1F18;
margin: 0;
}
.cozymom-pwa__text small {
font-size: 12.5px;
color: #7A6655;
margin-top: 3px;
}
.cozymom-pwa__share {
display: inline-block;
padding: 0 5px;
margin: 0 2px;
border: 1px solid #C84B3B;
border-radius: 5px;
color: #C84B3B;
font-weight: 700;
line-height: 1.45;
font-size: 12px;
}
.cozymom-pwa__install {
flex: 0 0 auto;
background: #C84B3B;
color: #fff;
border: 0;
padding: 10px 18px;
border-radius: 999px;
font-weight: 700;
font-size: 14px;
font-family: inherit;
cursor: pointer;
transition: background .2s ease, transform .12s ease;
}
.cozymom-pwa__install:hover { background: #B23B2D; }
.cozymom-pwa__install:active { transform: scale(.96); }
.cozymom-pwa__close {
flex: 0 0 auto;
background: transparent;
border: 0;
width: 30px;
height: 30px;
border-radius: 999px;
color: #7A6655;
font-size: 22px;
line-height: 1;
cursor: pointer;
padding: 0;
}
.cozymom-pwa__close:hover {
background: #F4ECE2;
color: #2A1F18;
} .cozymom-pwa__inner--ios .cozymom-pwa__text small {
font-size: 13px;
color: #5C4A3D;
} @supports (padding: max(0px)) {
.cozymom-pwa-prompt {
bottom: max(12px, env(safe-area-inset-bottom));
left: max(12px, env(safe-area-inset-left));
right: max(12px, env(safe-area-inset-right));
}
} .cozymom-hm-menu .menu-item.cozymom-pwa-menu-item > a,
.cozymom-pwa-menu-item > a.cozymom-pwa-install-link {
color: #C84B3B !important;
font-weight: 700;
position: relative;
}
.cozymom-hm-menu .cozymom-pwa-menu-item > a .cozy-icon,
.cozymom-pwa-menu-item > a.cozymom-pwa-install-link .cozy-icon {
animation: cozymom-pwa-menu-pop 2.4s ease-in-out 1.5s infinite;
}
.cozymom-pwa-menu-item > a.cozymom-pwa-install-link:hover {
color: #B23B2D !important;
}
@keyframes cozymom-pwa-menu-pop {
0%, 100% { transform: scale(1); }
50%      { transform: scale(1.18); }
} .cozymom-pwa-toast {
position: fixed;
left: 12px;
right: 12px;
bottom: 12px;
z-index: 99999;
max-width: 480px;
margin: 0 auto;
background: #2A1F18;
color: #FAF6F0;
border-radius: 14px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
transform: translateY(140%);
opacity: 0;
transition: transform .4s cubic-bezier(.16, 1, .3, 1), opacity .25s ease;
}
.cozymom-pwa-toast.is-visible {
transform: translateY(0);
opacity: 1;
}
.cozymom-pwa-toast__inner {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
}
.cozymom-pwa-toast__icon {
font-size: 22px;
flex: 0 0 auto;
}
.cozymom-pwa-toast__text {
flex: 1 1 auto;
display: flex;
flex-direction: column;
line-height: 1.4;
min-width: 0;
}
.cozymom-pwa-toast__text strong {
font-size: 14.5px;
font-weight: 700;
color: #fff;
}
.cozymom-pwa-toast__text small {
font-size: 12.5px;
color: #E8DDD0;
margin-top: 3px;
}
.cozymom-pwa-toast__text u {
text-decoration: underline;
text-underline-offset: 2px;
color: #FFC9C0;
}
.cozymom-pwa-toast__close {
flex: 0 0 auto;
background: transparent;
border: 0;
width: 28px;
height: 28px;
color: #E8DDD0;
font-size: 20px;
line-height: 1;
cursor: pointer;
padding: 0;
border-radius: 999px;
}
.cozymom-pwa-toast__close:hover {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
@supports (padding: max(0px)) {
.cozymom-pwa-toast {
bottom: max(12px, env(safe-area-inset-bottom));
left: max(12px, env(safe-area-inset-left));
right: max(12px, env(safe-area-inset-right));
}
}
.cozymom-pwa__icon--fallback {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
@media (prefers-reduced-motion: reduce) {
.cozymom-pwa-prompt,
.cozymom-pwa-toast,
.cozymom-hm-menu .cozymom-pwa-menu-item > a .cozy-icon,
.cozymom-pwa-menu-item > a.cozymom-pwa-install-link .cozy-icon {
animation: none !important;
transition: none !important;
}
}