.hmyt-pwa-pop { position: fixed; inset: 0; z-index: 999999; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease; font-family: inherit; direction: rtl; } .hmyt-pwa-pop.show { opacity: 1; visibility: visible; } .hmyt-pwa-pop-scrim { position: absolute; inset: 0; background: #00052a30; opacity: 0; transition: opacity .3s ease; pointer-events: none; cursor: pointer; backdrop-filter: blur(1px) } .hmyt-pwa-pop.show .hmyt-pwa-pop-scrim { opacity: 1; pointer-events: auto; } .hmyt-pwa-card { position: absolute; pointer-events: auto; box-sizing: border-box; width: calc(100% - 32px); max-width: 330px; background: #ffffff; border: 1px solid #ececf1; border-radius: 14px; padding: 16px; text-align: initial; transform: translateY(16px); opacity: 0; transition: transform .3s cubic-bezier(.22, .61, .36, 1), opacity .3s ease; box-shadow: -12px 0 45px rgba(0, 0, 0, 0.18); } .hmyt-pwa-card * { box-sizing: border-box; } .hmyt-pwa-pop.show .hmyt-pwa-card { transform: translateY(0); opacity: 1; animation: hmyt-pwa-card-pop .36s cubic-bezier(.22, .61, .36, 1) both; } @keyframes hmyt-pwa-card-pop { 0% { opacity: 0; transform: scale(.97); } 55% { transform: scale(1.012); } 100% { opacity: 1; transform: scale(1); } } .hmyt-pwa-pop.is-center .hmyt-pwa-card { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.96); } .hmyt-pwa-pop.is-center.show .hmyt-pwa-card { transform: translate(-50%, -50%) scale(1); animation-name: hmyt-pwa-card-pop-center; } @keyframes hmyt-pwa-card-pop-center { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.97); } 55% { transform: translate(-50%, -50%) scale(1.012); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .hmyt-pwa-pop.pos-top-right .hmyt-pwa-card { top: 24px; right: 24px; } .hmyt-pwa-pop.pos-top-center .hmyt-pwa-card { top: 24px; left: 50%; transform: translate(-50%, -16px); } .hmyt-pwa-pop.pos-top-left .hmyt-pwa-card { top: 24px; left: 24px; } .hmyt-pwa-pop.pos-bottom-right .hmyt-pwa-card { bottom: 24px; right: 24px; } .hmyt-pwa-pop.pos-bottom-center .hmyt-pwa-card { bottom: 24px; left: 50%; transform: translate(-50%, 16px); } .hmyt-pwa-pop.pos-bottom-left .hmyt-pwa-card { bottom: 24px; left: 24px; } .hmyt-pwa-pop.pos-top-right .hmyt-pwa-card, .hmyt-pwa-pop.pos-top-left .hmyt-pwa-card { transform: translateY(-16px); } .hmyt-pwa-pop.pos-top-right.show .hmyt-pwa-card, .hmyt-pwa-pop.pos-top-left.show .hmyt-pwa-card { transform: translateY(0); } .hmyt-pwa-pop.pos-top-center.show .hmyt-pwa-card, .hmyt-pwa-pop.pos-bottom-center.show .hmyt-pwa-card { transform: translateX(-50%); animation-name: hmyt-pwa-card-pop-horizontal-center; } @keyframes hmyt-pwa-card-pop-horizontal-center { 0% { opacity: 0; transform: translateX(-50%) scale(.97); } 55% { transform: translateX(-50%) scale(1.012); } 100% { opacity: 1; transform: translateX(-50%) scale(1); } } .hmyt-pwa-pop.pos-bottom .hmyt-pwa-card { left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; border-radius: 18px 18px 0 0; border-left: 0; border-right: 0; border-bottom: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transform-origin: center bottom; } .hmyt-pwa-pop.pos-bottom.show .hmyt-pwa-card { transform: translateY(0); } .hmyt-pwa-card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; padding-inline-end: 24px; } .hmyt-pwa-icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; overflow: hidden; background: #f3f4f6; border: 1px solid #eceef2; display: flex; align-items: center; justify-content: center; } .hmyt-pwa-icon img { width: 100%; height: 100%; object-fit: cover; display: block; } .hmyt-pwa-titles { min-width: 0; } .hmyt-pwa-titles h3 { margin: 0; font-size: 14.5px; font-weight: 700; color: #111827; line-height: 1.5; } .hmyt-pwa-titles p { margin: 2px 0 0; font-size: 11.5px; color: #9aa2b1; line-height: 1.55; } .hmyt-pwa-card-body { font-size: 12.5px; color: #4b5563; line-height: 1.7; } .hmyt-pwa-card-body > p { margin: 0; } .hmyt-pwa-steps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .hmyt-pwa-steps li { display: flex; align-items: center; gap: 9px; background: #f7f8fa; border: 1px solid #eef0f4; border-radius: 9px; padding: 8px 10px; font-size: 12px; color: #374151; line-height: 1.55; } .hmyt-pwa-steps .hmyt-pwa-step-num { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; } .hmyt-pwa-steps svg { height: 16px; width: auto; vertical-align: middle; flex: 0 0 auto; } .hmyt-pwa-actions { display: flex; gap: 8px; margin-top: 14px; } .hmyt-pwa-actions .hmyt-pwa-btn { flex: 1 1 auto; appearance: none; border: 0; min-height: unset; border-radius: 7px; padding: 8px 14px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: filter .18s ease, background-color .18s ease, color .18s ease; line-height: normal; } .hmyt-pwa-actions .hmyt-pwa-btn-primary { color: #fff; flex: 2 1 auto; } .hmyt-pwa-actions .hmyt-pwa-btn-primary:hover { color: #fff; opacity: .9; } .hmyt-pwa-btn-ghost { background: #f1f3f6; color: #374151; flex: 1 1 auto; } .hmyt-pwa-btn-ghost:hover { background: #e6e9ef; } .hmyt-pwa-card .hmyt-pwa-close { position: absolute; top: 12px; inset-inline-end: 12px; width: 27px; height: 27px; min-height: unset; border: 0; border-radius: 30px; background: #f3f4f6; color: #6b7280; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background-color .18s ease, color .18s ease; } .hmyt-pwa-close:hover { background: #e6e9ef; color: #111827; } .hmyt-pwa-close svg { width: 15px; height: 15px; display: block; } @media (max-width: 480px) { .hmyt-pwa-pop:not(.pos-bottom) .hmyt-pwa-card { max-width: calc(100% - 24px); } } @media (prefers-reduced-motion: reduce) { .hmyt-pwa-pop, .hmyt-pwa-pop-scrim, .hmyt-pwa-card { transition-duration: .01ms !important; } .hmyt-pwa-pop.show .hmyt-pwa-card { animation: none; } }