/* Shared glass treatment for the creator and app campaign dialog. */
.campaign-modal { padding: 24px !important; }

.campaign-backdrop {
  background: rgba(32, 31, 29, .28) !important;
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
}

.campaign-dialog,
.campaign-dialog--maker,
.campaign-dialog--app {
  width: min(1120px, calc(100vw - 48px)) !important;
  max-width: 1120px !important;
  max-height: min(820px, calc(100vh - 48px)) !important;
  padding: 30px 42px 42px !important;
  overflow: auto !important;
  border: 1px solid rgba(255, 255, 255, .82) !important;
  border-radius: 30px !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(246, 245, 242, .8)) !important;
  box-shadow: 0 32px 96px rgba(28, 27, 25, .2) !important;
  backdrop-filter: blur(30px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(125%) !important;
}

.campaign-tabs {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  z-index: 2;
  width: max-content !important;
  display: inline-flex !important;
  gap: 3px !important;
  margin: 0 0 34px !important;
  padding: 4px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(236, 235, 232, .78) !important;
  box-shadow: none !important;
}

.campaign-tabs button {
  min-height: 38px !important;
  padding: 7px 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #777 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px !important;
}

.campaign-tabs button::after { display: none !important; }
.campaign-tabs button:hover { color: #222 !important; }
.campaign-tabs button[aria-selected="true"] {
  color: #202124 !important;
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: 0 3px 12px rgba(28, 27, 25, .08) !important;
}

.campaign-close {
  top: 28px !important;
  right: 34px !important;
  width: 40px !important;
  height: 40px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .7) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px);
}

.campaign-close:hover { background: #fff !important; transform: scale(1.04); }
.campaign-close img { width: 16px !important; height: 16px !important; opacity: .62; }
.campaign-panel[hidden] { display: none !important; }

.campaign-panel--maker {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 290px !important;
  grid-template-areas:
    "status qr"
    "head qr"
    "points scan"
    "note note" !important;
  align-items: center !important;
  gap: 20px 58px !important;
  padding: 8px 18px 0 !important;
}

.maker-popup-status {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  grid-area: status;
  width: max-content;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: #4f4f4f !important;
  background: transparent !important;
}

.maker-popup-status i {
  width: 8px !important;
  height: 8px !important;
  margin-right: 9px !important;
  background: #ff6a00 !important;
  box-shadow: 0 0 0 6px rgba(255, 106, 0, .08);
}

.maker-popup-head { grid-area: head; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.maker-popup-head > span,
.app-popup-kicker,
.app-popup-seal,
.app-popup-line,
.app-popup-interaction-hint { display: none !important; }

.maker-popup-head h2,
.app-popup-copy h2 {
  margin: 0 !important;
  color: #202124 !important;
  font-size: 46px !important;
  font-weight: 560 !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
}

.maker-popup-head p,
.app-popup-copy > p {
  max-width: 620px;
  margin: 18px 0 0 !important;
  color: #696969 !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
}

.maker-popup-qr {
  grid-area: qr;
  width: 250px !important;
  height: 250px !important;
  justify-self: center;
  margin: 0 !important;
  padding: 16px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: 0 18px 50px rgba(50, 48, 44, .08) !important;
}

.maker-popup-qr img { width: 100% !important; height: 100% !important; object-fit: contain; }
.maker-popup-scan { grid-area: scan; justify-self: center; margin: -8px 0 0 !important; color: #777 !important; font-size: 14px !important; }
.maker-popup-scan img { width: 18px !important; height: 18px !important; opacity: .7; }

.maker-popup-points {
  grid-area: points;
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.maker-popup-points span,
.app-popup-capabilities span {
  width: auto !important;
  padding: 8px 13px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #555 !important;
  background: rgba(255, 255, 255, .68) !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

.maker-popup-note {
  grid-area: note;
  margin: 12px 0 0 !important;
  padding: 18px 0 0 !important;
  border: 0 !important;
  color: #999 !important;
  font-size: 13px !important;
  text-align: left !important;
}

.campaign-panel--app {
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(380px, 1.1fr) !important;
  gap: 54px !important;
  align-items: center !important;
  padding: 4px 18px 0 !important;
}

.app-popup-copy { position: static !important; inset: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; transform: none !important; }
.app-popup-capabilities { display: flex !important; flex-wrap: wrap; gap: 8px !important; margin: 24px 0 0 !important; padding: 0 !important; border: 0 !important; }
.app-popup-update { margin-top: 22px !important; color: #8b8b8b !important; font-size: 14px !important; }

.campaign-app-btn {
  min-height: 46px !important;
  margin-top: 24px !important;
  padding: 11px 22px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: #ff6a00 !important;
  box-shadow: 0 10px 24px rgba(255, 106, 0, .18) !important;
}

.campaign-app-btn:hover { background: #ff7a1a !important; transform: translateY(-1px); }
.app-popup-visual {
  min-height: 540px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.app-popup-visual::before,
.app-popup-visual::after { display: none !important; }
.app-popup-phone { position: relative !important; inset: auto !important; width: min(100%, 540px) !important; margin: 0 !important; filter: drop-shadow(0 24px 30px rgba(22, 29, 43, .16)); }
.app-popup-phone img { display: block; width: 100% !important; height: auto !important; max-height: 600px !important; object-fit: contain !important; }

@media (max-width: 820px) {
  .campaign-modal { padding: 10px !important; }
  .campaign-dialog,
  .campaign-dialog--maker,
  .campaign-dialog--app {
    width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;
    padding: 20px 18px 28px !important;
    border-radius: 24px !important;
  }
  .campaign-tabs { margin-bottom: 28px !important; }
  .campaign-tabs button { min-height: 36px !important; padding-inline: 13px !important; font-size: 13px !important; }
  .campaign-close { top: 20px !important; right: 20px !important; width: 36px !important; height: 36px !important; }
  .campaign-panel--maker {
    grid-template-columns: 1fr !important;
    grid-template-areas: "status" "head" "qr" "scan" "points" "note" !important;
    gap: 18px !important;
    padding: 4px 0 0 !important;
  }
  .maker-popup-head h2,
  .app-popup-copy h2 { font-size: 34px !important; line-height: 1.2 !important; }
  .maker-popup-head p,
  .app-popup-copy > p { margin-top: 14px !important; font-size: 15px !important; line-height: 1.7 !important; }
  .maker-popup-qr { width: 220px !important; height: 220px !important; margin-top: 2px !important; }
  .maker-popup-points { justify-content: center; }
  .maker-popup-note { margin-top: 0 !important; padding-top: 4px !important; text-align: center !important; }
  .campaign-panel--app { grid-template-columns: 1fr !important; gap: 26px !important; padding: 4px 0 0 !important; }
  .app-popup-visual { min-height: 300px !important; border-radius: 0 !important; }
  .app-popup-phone { width: min(100%, 360px) !important; height: auto !important; max-height: none !important; }
  .app-popup-phone img { width: 100% !important; height: auto !important; max-width: 100% !important; max-height: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .campaign-dialog,
  .campaign-panel,
  .campaign-app-btn,
  .campaign-close { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}