/* Pop-up web2app — bottom sheet (mobile) → dialog (tablet) → dialog 2 cột + QR (desktop).
   Bê từ design canvas "Pop-up mở app.dc.html", đổi @container tapage → @media. */

/* z-index PHẢI cao hơn mọi overlay khác của trang tĩnh, nếu không pop-up bị vẽ
   ĐÈ BÊN DƯỚI: rào rAF kép vẫn qua, SHOWN vẫn bắn, cờ 1-lần/ngày vẫn cháy, mà
   không ai nhìn thấy gì — đúng loại event ma mà tính năng này sinh ra để diệt.
   Đang cạnh tranh trên /home/:
     .dialog-overlay      (create-horoscope-dialog.css)  10000
     .dialog-*            (create-horoscope-dialog.css)  10002
     .birth-place-dialog  (birth-place-dialog.css)       11000
     .chat-promo-modal    (chat-promo-modal.css)          9999
   Ai nâng z-index ở đây phải nâng cả hai dòng dưới lên trên số cao nhất. */

.w2a-scrim {
  position: fixed; inset: 0; z-index: 12000;
  background: rgba(20, 19, 79, .5);
}
.w2a-dialog {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 12001;
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 22px 20px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(20, 19, 79, .28);
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
}
.w2a-main { display: flex; flex-direction: column; align-items: center; text-align: center; }
.w2a-logo { display: block; width: 64px; height: 64px; margin: 0 auto 14px; }
.w2a-title {
  font-family: 'Philosopher', Georgia, serif;
  font-size: 22px; font-weight: 700; line-height: 1.32;
  color: #191970; max-width: 15em; text-wrap: pretty;
}
.w2a-sub {
  font-size: 14.5px; line-height: 1.6; color: #5E6B84;
  margin-top: 8px; max-width: 26em; text-wrap: pretty;
}
.w2a-actions {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 12px; width: 100%; margin-top: 20px;
}
/* Ghost link nằm TRÊN CTA ở mobile/tablet, DƯỚI ở desktop — chủ ý của design. */
.w2a-ghost {
  order: -1; align-self: center;
  background: transparent; border: 0; color: #191970;
  font: 500 14.5px/1.4 inherit; text-decoration: underline;
  cursor: pointer; padding: 4px;
}
.w2a-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 52px; border: 0; border-radius: 26px;
  background: #191970; color: #fff;
  font: 600 16px/1 inherit; text-decoration: none;
  cursor: pointer; transition: background .15s, transform .1s;
}
.w2a-cta:hover { background: #2A2A8A; }
.w2a-cta:active { transform: scale(.99); }
.w2a-qr { display: none; }

@media (min-width: 768px) {
  .w2a-dialog {
    left: 50%; top: 50%; right: auto; bottom: auto;
    transform: translate(-50%, -50%);
    width: 472px; border-radius: 24px; padding: 30px 32px 28px;
    box-shadow: 0 24px 64px rgba(20, 19, 79, .34);
  }
  .w2a-logo { width: 72px; height: 72px; }
  .w2a-title { font-size: 26px; }
  .w2a-sub { font-size: 15px; }
  .w2a-cta { width: auto; min-width: 220px; align-self: center; padding: 0 32px; }
  .w2a-actions { align-items: center; }
}

@media (min-width: 1024px) {
  .w2a-dialog { width: 720px; padding: 36px 40px; }
  .w2a-main { flex-direction: row; align-items: center; text-align: left; gap: 34px; }
  .w2a-copy { flex: 1; min-width: 0; }
  .w2a-logo { width: 60px; height: 60px; margin: 0 auto 16px; }
  .w2a-title { font-size: 28px; max-width: none; }
  .w2a-actions { align-items: flex-start; margin-top: 22px; }
  .w2a-ghost { order: 1; align-self: flex-start; padding-left: 0; }
  .w2a-cta { align-self: flex-start; }
  .w2a-qr {
    display: block; flex: none; width: 216px; text-align: center;
    padding: 18px 16px 14px; border: 1px solid #E8E4F0;
    border-radius: 18px; background: #F8F6FF;
  }
  .w2a-qr-code {
    display: block; width: 160px; height: 160px; margin: 0 auto;
    background: #fff; border-radius: 10px; padding: 8px; box-sizing: border-box;
  }
  .w2a-qr-code img { display: block; width: 100%; height: 100%; }
  .w2a-qr-cap { font-size: 12.5px; line-height: 1.5; color: #5E6B84; margin-top: 10px; }
  .w2a-qr-cap b { display: block; color: #191970; font-size: 13px; margin-bottom: 2px; }
}