/* Login + Download app modals, copied from the landing page (globals.css) so the basket
   page opens them in place. The landing design system's colours are scoped to the
   dialogs here because this page's tokens differ slightly. */
.dl-modal {
  --content-primary: #2b2b31;
  --content-secondary: #6f6f75;
  --content-tertiary: #97979e;
  --content-disable: #babac0;
  --surface-disable: #e4e4e7;
  --surface-dark-button: #0f0f13;
  --surface-background: #f8f8fa;
  --border-primary: #f2f2f2;
  --border-inverted: #2b2b31;
  --button-dark-gradient: linear-gradient(180deg, #0f0f13 0%, #210a1a 100%);
  padding: 0;
  border: 0;
  background: transparent;
  max-width: calc(100vw - 32px);
  margin: auto;
  overflow: visible;
  color: var(--content-primary);
}
.dl-modal::backdrop { background: rgba(0, 0, 0, 0.64); }
/* Subtle rise on open, reverse on close: transform/opacity only so it stays on the compositor */
.dl-modal[open] {
  animation: dl-modal-in 360ms cubic-bezier(0.32, 0.72, 0, 1) both;
  will-change: transform, opacity;
}
.dl-modal[open]::backdrop { animation: dl-fade-in 300ms ease-out both; }
.dl-modal.is-closing { animation: dl-modal-out 200ms cubic-bezier(0.4, 0, 1, 1) forwards; }
.dl-modal.is-closing::backdrop { animation: dl-fade-out 200ms ease-in forwards; }
@keyframes dl-modal-in { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes dl-modal-out { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d(0, 16px, 0); } }
@keyframes dl-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dl-fade-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .dl-modal[open], .dl-modal[open]::backdrop,
  .dl-modal.is-closing, .dl-modal.is-closing::backdrop { animation: none; }
}
/* Keep the scrollbar's space reserved so locking scroll doesn't shift the page mid-animation */
html { scrollbar-gutter: stable; }
html.scroll-locked { overflow: hidden; }

/* ---------- Download app (Playground 10518:45265) ---------- */
.dl-modal__panel {
  width: 420px;
  max-width: 100%;
  padding-bottom: 32px;
  background: linear-gradient(to bottom, #f8f4f6, #f8f8fa);
  border: 1px solid var(--border-primary);
  border-radius: 20px;
  overflow: hidden;
}
.dl-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; }
.dl-modal__title { margin: 0; font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: -0.5px; color: var(--content-primary); }
.dl-modal__close { display: block; width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.dl-modal__close img { display: block; margin: -0.5px; }
.dl-modal__qr-wrap {
  width: fit-content;
  margin: 23px auto 0;
  padding: 8px;
  background: linear-gradient(to bottom, rgba(35, 35, 36, 0.04), rgba(33, 10, 26, 0.04));
  border: 1px solid rgba(106, 31, 82, 0.08);
  border-radius: 12px;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.04);
}
.dl-modal__qr-card { display: flex; flex-direction: column; align-items: center; width: 200px; padding: 12px; background: var(--button-dark-gradient); border-radius: 12px; }
.dl-modal__qr { position: relative; width: 150px; height: 150px; overflow: hidden; }
.dl-modal__qr img { position: absolute; width: 146.18%; height: 109.63%; left: -23.09%; top: -4.82%; max-width: none; }
.dl-modal__qr-card p { margin: 0; font-size: 14px; font-weight: 600; line-height: 20px; text-align: center; color: #fff; }
.dl-modal__or { display: flex; align-items: center; gap: 17px; height: 16px; margin-top: 24px; padding: 0 32px; }
.dl-modal__or img { flex: 1 0 0; min-width: 1px; height: 1px; }
.dl-modal__or span { font-size: 12px; font-weight: 500; line-height: 16px; color: var(--content-tertiary); }
.dl-modal__sms { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; padding: 0 32px; }
.dl-modal__sms label { font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: -0.4px; color: var(--content-secondary); }
.dl-modal__field {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: #fff;
  border: 0.5px solid var(--border-primary);
  border-radius: 8px;
  font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: -0.4px;
}
.dl-modal__field:focus-within { border-color: #babac0; }
.dl-modal__flag { border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.dl-modal__prefix { color: var(--content-primary); }
.dl-modal__field input {
  flex: 1; min-width: 0;
  padding: 0 64px 0 0;
  border: 0; outline: 0; background: none;
  font: inherit; letter-spacing: inherit;
  color: var(--content-primary);
}
.dl-modal__field input::placeholder { color: var(--content-disable); }
.dl-modal__send {
  position: absolute; right: 5.5px; top: 50%;
  transform: translateY(-50%);
  padding: 8px 16px;
  border: 0; border-radius: 6px;
  background: var(--surface-dark-button);
  color: #fff;
  font: inherit; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: -0.3px;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.dl-modal__send:disabled { background: var(--surface-disable); color: var(--content-disable); cursor: not-allowed; }

/* ---------- Login (Playground 10774:67718) ---------- */
.login-modal {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  width: 400px; max-width: 100%;
  padding: 24px;
  background: var(--surface-background);
  border-radius: 20px;
}
.login-modal__close { position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.login-modal__close img { display: block; width: 100%; height: 100%; }
.login-modal__head { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 8px; }
.login-modal__title { margin: 0; font-size: 18px; font-weight: 600; line-height: 22px; letter-spacing: -0.5px; color: var(--content-primary); }
.login-modal__form { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.login-modal__field {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  background: #fff;
  border: 0.5px solid var(--border-inverted);
  border-radius: 100px;
  font-weight: 500; letter-spacing: -0.4px;
  cursor: text;
}
.login-modal__prefix { font-size: 14px; line-height: 20px; color: var(--content-primary); }
.login-modal__field input {
  flex: 1; min-width: 0;
  padding: 0; border: 0; outline: 0; background: none;
  font: inherit; font-size: 15px; line-height: 24px; letter-spacing: inherit;
  color: var(--content-primary);
}
.login-modal__field input::placeholder { color: var(--content-disable); }
.login-modal__submit {
  padding: 12px 16px;
  border: 0; border-radius: 100px;
  background: var(--button-dark-gradient);
  color: #fff;
  font: inherit; font-size: 14px; font-weight: 600; line-height: 20px;
  cursor: pointer;
}
.login-modal__submit:disabled { background: var(--surface-disable); color: var(--content-disable); cursor: not-allowed; }
.login-modal__legal { max-width: 287px; margin: 0; font-size: 11px; font-weight: 500; line-height: 16px; text-align: center; color: var(--content-tertiary); }
.login-modal__legal a { color: var(--content-primary); text-decoration: underline dotted; text-underline-offset: 2px; }
.dl-modal:focus { outline: none; }