.payment-success-dialog::backdrop,
.confirm-dialog::backdrop,
.gate-dialog::backdrop {
  background: var(--scrim-dialog);
}

.payment-success-dialog__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}

.payment-success-dialog h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

.payment-success-dialog__description {
  margin: var(--space-3) 0 0;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-note);
  white-space: pre-line;
}

.payment-success-dialog__details {
  margin: var(--space-5) 0 0;
}

.payment-success-dialog__details > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
}

.payment-success-dialog__details dt {
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.payment-success-dialog__details dd {
  margin: 0;
  text-align: right;
  font-size: var(--text-sm);
}

.payment-success-dialog__order {
  max-width: 230px;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  line-height: var(--leading-control);
}

.payment-success-dialog__actions {
  display: grid;
  /* One equal column per VISIBLE button. A fixed "1fr 1fr" left a dialog
     with a single action (the receipt is hidden when there is nothing to
     download) holding that button in the left half of an empty row. */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.payment-success-dialog__receipt,
.payment-success-dialog__download,
.payment-success-dialog__close,
.confirm-dialog__cancel,
.confirm-dialog__confirm,
.gate-pay,
.gate-cancel {
  min-height: var(--control-height);
  padding: 0 var(--space-4);
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  /* A label that wraps ("ქვითრის ჩამოტვირთვა" on a narrow row) stays
     centered line by line, not only as a block. */
  text-align: center;
  appearance: none;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition),
    color var(--transition), opacity var(--transition), box-shadow var(--transition),
    transform var(--transition);
}

.payment-success-dialog__receipt,
.payment-success-dialog__download {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: var(--weight-semibold);
}

/* When the CV is offered, it is the one primary action: the receipt is kept,
   one step back, in the way-out button's shape. */
.payment-success-dialog[data-offers-cv] .payment-success-dialog__receipt {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--ink);
  font-weight: var(--weight-medium);
}

.payment-success-dialog__download[hidden] {
  display: none;
}

.payment-success-dialog[data-offers-cv] .payment-success-dialog__receipt:hover {
  background: var(--surface-sunken);
  border-color: var(--line-strong);
  transform: none;
  box-shadow: none;
}

.payment-success-dialog__close {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
}

/* The primary action lifts; the way out answers in colour only. Both used to
   lift, which made "cancel" as eager as "pay". The download button's lift in
   app.css is the same rule, and covers .gate-pay, which carries its class. */
@media (hover: hover) {
  .payment-success-dialog__receipt:hover,
  .payment-success-dialog__download:hover,
  .confirm-dialog__confirm:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-btn);
  }
}

.payment-success-dialog__receipt:hover,
.payment-success-dialog__download:hover,
.confirm-dialog__confirm:hover,
.gate-pay:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.payment-success-dialog__close:hover,
.confirm-dialog__cancel:hover,
.gate-cancel:hover {
  background: var(--surface-sunken);
  border-color: var(--line-strong);
}

/* The press itself — the dim — is the global button rule in app.css. */
.payment-success-dialog__receipt:active,
.payment-success-dialog__download:active,
.confirm-dialog__confirm:active {
  transform: none;
  box-shadow: none;
}

/* The success tick, drawn: no shipped face has a ✓. The warning keeps its
   "!", which every face has. */
.payment-success-dialog__icon[data-tone="ok"]::before {
  content: "";
  width: 18px;
  height: 9px;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: translateY(-2px) rotate(-45deg);
}

.payment-success-dialog__icon[data-tone="warn"] {
  background: var(--warning);
}

.payment-success-dialog__support {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.payment-success-dialog__support a {
  color: var(--accent);
}

/* One box for every dialog in the product — gate, restore, confirm, receipt.
   One quiet paper-like surface; what differs between them is what they ask,
   never how big the thing asking is.

   The receipt used to have its own: 440px rather than 480px, and a nested
   __panel carrying the padding, border, background and shadow while the
   <dialog> itself was transparent with none of them. That bought twenty
   parallel rules and a forty-pixel step between the gate and the receipt —
   the two surfaces a paying customer sees back to back, where a change of
   size reads as a change of object.

   At phone width they were already identical; the block at the foot of this file
   has always clamped all three the same way. Only the desktop case diverged.
   tests/dialogs.test.mjs measures all four against each other at both. */
.payment-success-dialog,
.confirm-dialog,
.gate-dialog {
  width: min(92vw, 480px);
  max-width: 480px;
  max-height: 90vh;
  margin: auto;
  overflow: auto;
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-dialog);
}

.confirm-dialog__message {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  /* A message can quote a file name — one unbroken 50-character word, which
     ran straight out of the dialog on a phone. Break it rather than the box. */
  overflow-wrap: anywhere;
}

/* With a title, the title takes the display face and the message is body
   text under it: five lines of display type read as a wall. */
.confirm-dialog__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.confirm-dialog.has-title .confirm-dialog__message {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-note);
  color: var(--text-secondary);
}

.confirm-dialog__actions,
.gate-actions {
  display: grid;
  /* One equal column per VISIBLE button. A fixed "1fr 1fr" left a dialog
     with a single action (the receipt is hidden when there is nothing to
     download) holding that button in the left half of an empty row. */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.gate-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.confirm-dialog__cancel,
.gate-cancel {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
}

.confirm-dialog__confirm,
.gate-pay {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: var(--weight-semibold);
}

.confirm-dialog__confirm.is-destructive {
  border-color: var(--danger);
  background: var(--danger);
  color: var(--on-accent);
}

.confirm-dialog__confirm.is-destructive:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--on-accent);
}

.gate-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.gate-body {
  margin: var(--space-3) 0 0;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-note);
}

/* Empty until something happens, so it takes no room in the resting state. */
.gate-status:empty {
  display: none;
}

.gate-status {
  min-height: 1.5em;
  margin: var(--space-3) 0 0;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-note);
}

.gate-trust,
.gate-terms {
  margin: var(--space-4) 0 0;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-note);
}

/* Who is taking the money and where the next tap goes. Quiet — reassurance,
   not a sales pitch — but set apart, because the dialog used to name a price
   and a counterparty of nobody. */
.gate-trust {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

/* Under the actions, not above them: the refund terms are a thing to be able
   to check, not a step in the flow. */
.gate-terms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
}

.gate-trust + .gate-status {
  margin-top: var(--space-3);
}

.gate-terms a,
.gate-restore {
  color: var(--text-secondary);
}

/* Values a scan wrote that are still unchecked: one quiet line, in the
   review's slate, with the way to the check. */
.gate-note {
  margin: var(--space-3) 0 0;
  color: var(--review-ink);
  font-size: var(--text-sm);
  line-height: var(--leading-note);
}

.gate-note[hidden] {
  display: none;
}

.gate-note-action {
  min-height: var(--touch-min);
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Quiet, but still a thumb target: on a phone this is the primary route back
   in for someone who paid on another device. */
.gate-restore {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.gate-restore:hover,
.gate-terms a:hover {
  color: var(--accent);
}

.gate-pay:disabled,
.gate-cancel:disabled {
  cursor: default;
  opacity: 0.6;
}

/* The input inherits height, border and focus ring from the global input
   rule in app.css; this gives it room below the paragraph it follows. */
.restore-input {
  display: block;
  width: 100%;
  margin: 0 0 var(--space-4);
}

/* The order-number example. Sits directly under the input it describes. */
.gate-hint {
  margin: calc(var(--space-4) * -1 + var(--space-2)) 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-placeholder);
  font-family: var(--font-mono);
}

/* The actions stay in reach when a dialog has to scroll. On a small phone
   (320×568) the receipt ran past the screen and its Close button started below
   the fold, so the way out had to be found by scrolling inside the dialog.
   Sticky, so nothing moves when the dialog fits; the surface-coloured band is
   a spread shadow rather than padding for the same reason, and it keeps text
   scrolling underneath from showing between and around the buttons. */
.payment-success-dialog__actions,
.confirm-dialog__actions,
.gate-actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: var(--surface);
  box-shadow: 0 0 0 var(--space-3) var(--surface);
}

/* The app's own phone breakpoint, not one of the dialogs' own. They stacked
   at 560px while everything else in the product turned phone-shaped at
   600px, so a 561–600px screen showed phone chrome around desktop dialogs. */
@media screen and (max-width: 600px) {
  .payment-success-dialog,
  .confirm-dialog,
  .gate-dialog {
    width: min(92vw, 480px);
    padding: var(--space-5);
  }

  .payment-success-dialog__actions,
  .confirm-dialog__actions,
  .gate-actions {
    grid-auto-flow: row;
  }
}