/* Page composition only. The app itself is rendered by app-ui/current. */
[data-loyalty-phone] { width:100%; display:grid; justify-items:center; }
[data-loyalty-phone] .danta-device { width:min(100%,390px); }
.loyalty-app-showcase { align-items:start; }
.loyalty-phone--map { padding-top:55px; }
.loyalty-app-bridge { align-self:center; }
.loyalty-phone-view { display:flex; gap:5px; align-items:center; padding:5px; border:1px solid #cbded2; border-radius:25px; background:#ffffff90; min-height:41px; }
.loyalty-phone-view button { border:0; border-radius:20px; background:transparent; color:#456451; font:600 12px/1.4 DantaDesignSans,Arial,sans-serif; padding:7px 14px; cursor:pointer; }
.loyalty-phone-view button[aria-pressed="true"] { background:#173f31; color:white; }
.loyalty-phone-view button:focus-visible { outline:3px solid #2c9966; outline-offset:3px; }
.loyalty-phone__caption { max-width:350px; }
.loyalty-phone__caption small { max-width:290px; line-height:1.6; }
.loyalty-preview-note { grid-column:1/-1; margin:5px 0 -25px; text-align:center; color:#617466; font-size:12px; line-height:1.6; }
.activity-phone__bubble { bottom:5px; right:-54px; }
.activity-phone [data-loyalty-phone] .danta-device { box-shadow:0 30px 60px #0005; }
@media(max-width:980px) { .activity-phone__bubble { right:-30px; } }
@media(max-width:820px) {
  .loyalty-phone--map { padding-top:0; }
  .loyalty-preview-note { max-width:340px; margin:0; }
}
@media(max-width:760px) {
  .activity-phone__bubble { right:auto; bottom:auto; margin:14px 0 0; }
}
@media(max-width:460px) {
  [data-loyalty-phone] .danta-device { border-width:7px; border-radius:40px; }
  [data-loyalty-phone] .dui-viewport { border-radius:33px; }
  [data-loyalty-phone] .dui-island { top:7px; height:18px; }
  .loyalty-phone-view button { padding:7px 10px; font-size:11px; }
}