/* Welcome pop-up (includes/welcome-popup.php). A card in the corner on
   desktop, a sheet at the bottom on phones that can be swiped away. */

.wp{
  position:fixed;
  right:max(20px, env(safe-area-inset-right));
  bottom:calc(20px + env(safe-area-inset-bottom));
  z-index:1250;
  width:min(380px, calc(100vw - 32px));
  padding:24px 22px 18px;
  border-radius:var(--radius-lg);
  background:rgba(16,16,16,.96);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  color:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.1);
  transform:translateY(24px);
  opacity:0;
  transition:transform .4s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}
.wp.is-open{ transform:none; opacity:1; }
.wp[hidden]{ display:none; }

.wp__close{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px; display:grid; place-items:center;
  border:0; border-radius:12px; background:transparent; color:rgba(255,255,255,.6); cursor:pointer;
}
.wp__close:hover{ color:#fff; background:rgba(255,255,255,.08); }

.wp__kicker{ margin:0 0 6px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.wp__title{ margin:0 40px 8px 0; font-size:30px; line-height:1.05; letter-spacing:.02em; color:#fff; }
.wp__text{ margin:0 0 16px; font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.75); }

.wp__form{ display:grid; gap:10px; }
.wp__form input[type="email"]{
  width:100%; min-height:48px; padding:12px 14px; font:inherit; font-size:16px;
  color:#fff; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:14px;
}
.wp__form input[type="email"]::placeholder{ color:rgba(255,255,255,.45); }
.wp__form input[type="email"]:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(242,140,24,.25); }
.wp__btn{ width:100%; min-height:48px; justify-content:center; font-size:19px; letter-spacing:.06em; }
.wp__hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.wp__msg{ margin:10px 0 0; font-size:13.5px; color:#fcd34d; }
.wp__fine{ margin:12px 0 0; font-size:12px; line-height:1.5; color:rgba(255,255,255,.5); }
.wp__fine a{ color:rgba(255,255,255,.75); text-decoration:underline; }

.wp__code{
  display:block; width:100%; margin:4px 0 14px; padding:16px 12px; cursor:copy;
  font:800 22px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.08em; color:#fff;
  background:rgba(242,140,24,.1); border:1.5px dashed rgba(242,140,24,.6); border-radius:14px;
}
.wp__code.is-copied::after{ content:"  Copied"; font-size:13px; font-family:inherit; letter-spacing:0; color:var(--accent-2); }

@media (max-width: 640px){
  .wp{
    left:0; right:0; bottom:0; width:auto;
    padding:28px 20px calc(18px + env(safe-area-inset-bottom));
    border-radius:24px 24px 0 0; border-bottom:0;
    transform:translateY(100%);
  }
  .wp::before{ content:""; position:absolute; top:8px; left:50%; width:38px; height:4px; margin-left:-19px; border-radius:4px; background:rgba(255,255,255,.25); }
  .wp__title{ font-size:27px; }
}

@media (prefers-reduced-motion: reduce){ .wp{ transition:none; } }

/* Cart drawer: the saved welcome code */
.cart-welcome-code{ margin:0 0 10px; padding:10px 12px; border-radius:12px; background:rgba(242,140,24,.1); color:#6b3d05; font-size:13.5px; line-height:1.4; }
.cart-welcome-code strong{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.04em; }