/*
 * Payment and unlock surfaces
 *
 * These dialogs are created dynamically by several features. Keep their
 * viewport contract here so a long purchase explanation never pushes the
 * primary action below the browser's visible area on mobile.
 */

:root {
  --cid-payment-top-gap: max(
    16px,
    calc(var(--cid-shell-header-height, 50px) + env(safe-area-inset-top, 0px))
  );
  --cid-payment-bottom-gap: max(
    16px,
    calc(var(--cid-shell-footer-height, 56px) + env(safe-area-inset-bottom, 0px))
  );
}

/*
 * The visual viewport value is updated by scroll-stability.js when mobile
 * browser chrome changes. The svh fallback is stable during the first paint
 * and avoids reserving the hidden address-bar area.
 */
.modal-overlay.cid-payment-overlay.cid-unlock-confirmation {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100vw !important;
  height: 100svh !important;
  max-height: var(--cid-visual-height, 100svh) !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  padding: var(--cid-payment-top-gap)
    max(12px, env(safe-area-inset-right, 0px))
    var(--cid-payment-bottom-gap)
    max(12px, env(safe-area-inset-left, 0px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

.modal-overlay.cid-payment-overlay.cid-unlock-confirmation
  .cid-unlock-confirmation__card {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 1 auto !important;
  width: min(100%, 450px) !important;
  max-width: 450px !important;
  height: auto !important;
  max-height: calc(
    var(--cid-visual-height, 100svh) -
    var(--cid-payment-top-gap) -
    var(--cid-payment-bottom-gap)
  ) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  scrollbar-gutter: stable;
  scroll-padding-block: 12px;
}

.modal-overlay.cid-payment-overlay.cid-unlock-confirmation
  .cid-unlock-confirmation__card > * {
  min-width: 0;
}

.cid-unlock-confirmation__card h2,
.cid-unlock-confirmation__card p,
.cid-unlock-confirmation__included,
.cid-unlock-confirmation__included li,
.cid-unlock-confirmation__summary dt,
.cid-unlock-confirmation__summary dd {
  overflow-wrap: anywhere;
  word-break: normal;
}

.cid-unlock-confirmation__included {
  flex: 0 0 auto;
}

.cid-unlock-confirmation__included ul {
  min-width: 0;
}

.cid-unlock-confirmation__summary {
  flex: 0 0 auto;
}

.cid-unlock-confirmation__summary div {
  min-width: 0;
}

.cid-unlock-confirmation__summary dt {
  min-width: 0;
}

.cid-unlock-confirmation__summary dd {
  min-width: 0;
  max-width: 62%;
}

.cid-unlock-confirmation__actions {
  flex: 0 0 auto;
  min-width: 0;
  padding-bottom: max(2px, env(safe-area-inset-bottom, 0px));
}

.cid-unlock-confirmation__actions .tableaux-button {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

/*
 * The advanced decoder contains the longest explanation. Let it use the same
 * measured card height as every other paid confirmation instead of its old
 * vh-only limit, which can sit behind Safari's bottom browser chrome.
 */
.cid-plus-unlock-confirmation
  .cid-unlock-confirmation__card {
  width: min(100%, 450px) !important;
  max-width: 450px !important;
  max-height: calc(
    var(--cid-visual-height, 100svh) -
    var(--cid-payment-top-gap) -
    var(--cid-payment-bottom-gap)
  ) !important;
  padding-bottom: max(15px, env(safe-area-inset-bottom, 0px)) !important;
}

.cid-plus-unlock-validity {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}

.cid-plus-unlock-validity span,
.cid-plus-unlock-validity b {
  min-width: 0;
  overflow-wrap: anywhere;
}

/*
 * The wallet is a dedicated scroll surface rather than a floating dialog.
 * Reserve the persistent navigation and a little breathing room after the
 * last purchase control so the action can always be brought above it.
 */
#cidBalanceDialog.cid-wallet-view-container {
  top: calc(
    var(--cid-layout-header-height, 50px) +
    env(safe-area-inset-top, 0px)
  ) !important;
  right: 0 !important;
  bottom: auto !important;
  height: calc(
    var(--cid-visual-height, 100svh) -
    var(--cid-layout-header-height, 50px) -
    env(safe-area-inset-top, 0px)
  ) !important;
  max-height: none !important;
  min-height: 0 !important;
  scrollbar-gutter: stable;
  scroll-padding-bottom: calc(
    var(--cid-shell-footer-height, 56px) +
    32px +
    env(safe-area-inset-bottom, 0px)
  ) !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

#cidBalanceDialog.cid-wallet-view-container .cid-balance-page {
  min-width: 0;
  padding-bottom: 20px;
}

#cidBalanceDialog.cid-wallet-view-container .cid-balance-payment-actions {
  padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
}

#cidBalanceDialog.cid-wallet-view-container .cid-balance-payment-button {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .modal-overlay.cid-payment-overlay.cid-unlock-confirmation {
    align-items: flex-start !important;
    padding-top: var(--cid-payment-top-gap) !important;
    padding-bottom: var(--cid-payment-bottom-gap) !important;
  }

  .modal-overlay.cid-payment-overlay.cid-unlock-confirmation
    .cid-unlock-confirmation__card,
  .cid-plus-unlock-confirmation
    .cid-unlock-confirmation__card {
    width: 100% !important;
    max-width: 450px !important;
  }

  .cid-unlock-confirmation__summary dd {
    max-width: 58%;
  }
}