/* Conferma del saldo: importo leggibile e scelta esplicita, prima del download. */
dialog.saldo-dialog {
  --saldo-ink: #073d61;
  --saldo-border: #d7e7ed;
  box-sizing: border-box;
  width: min(36rem, calc(100vw - 2rem));
  max-width: 36rem;
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 2rem;
  overflow: auto;
  overscroll-behavior: contain;
  color: #263e4b;
  border: 1px solid var(--saldo-border);
  border-radius: 24px;
  background: linear-gradient(150deg, #eff9fb 0, #fff 38%);
  box-shadow: 0 24px 90px rgba(3, 37, 59, .23);
  font: 1rem/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}
dialog.saldo-dialog::backdrop { background: rgba(3, 30, 47, .56); backdrop-filter: blur(4px); }
.saldo-dialog__eyebrow {
  margin: 0 2rem .75rem 0;
  color: #28728b;
  font-size: .7rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.saldo-dialog h2, .saldo-dialog__title {
  margin: 0 1rem .65rem 0;
  color: var(--saldo-ink);
  font-size: clamp(1.55rem, 5vw, 1.95rem);
  font-weight: 730;
  letter-spacing: -.045em;
  line-height: 1.18;
}
.saldo-dialog p { overflow-wrap: anywhere; }
.saldo-dialog__lead { margin: 0 0 1.3rem; color: #456573; }
.saldo-dialog__summary {
  margin: 1.35rem 0;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--saldo-border);
  border-radius: 16px;
  background: #f2f9fb;
}
.saldo-dialog__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: .35rem 0; }
.saldo-dialog__amount {
  color: var(--saldo-ink);
  font-size: clamp(2rem, 7vw, 2.6rem);
  font-weight: 750;
  letter-spacing: -.045em;
  line-height: 1.15;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.saldo-dialog__note { margin: 1rem 0; color: #47636f; font-size: .92rem; }
.saldo-dialog__actions { display: flex; flex-direction: column; gap: .65rem; margin-top: 1.5rem; }
.saldo-dialog__actions .bottone, .saldo-dialog__actions .btn, .saldo-dialog__actions button {
  min-height: 3.2rem;
  width: 100%;
  padding: .85rem 1.1rem;
  border: 1px solid #f3cf50;
  border-radius: 12px;
  color: #073d61;
  background: #ffe16b;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  line-height: 1.3;
}
.saldo-dialog__actions .bottone:hover, .saldo-dialog__actions .btn:hover { background: #fbd75a; }
.saldo-dialog__actions .bottone--fantasma, .saldo-dialog__actions .btn--ghost {
  color: #31576a;
  background: transparent;
  border-color: var(--saldo-border);
  font-weight: 550;
}
.saldo-dialog__actions .bottone--fantasma:hover, .saldo-dialog__actions .btn--ghost:hover { background: #f2f8fa; }
.saldo-dialog button:disabled { cursor: wait; opacity: .6; }
.saldo-dialog :focus-visible { outline: 3px solid #13799f; outline-offset: 3px; }
.saldo-dialog__status { margin: .8rem 0 0; font-size: .92rem; }
.saldo-dialog__status:empty { display: none; }
.saldo-dialog__row--totale { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--saldo-border); }
.saldo-dialog__status[data-tipo="errore"] { color: #9b2525; }
.saldo-dialog__status[data-tipo="ok"] { color: #247244; }
.saldo-dialog .avviso { padding: .8rem 1rem; margin: .8rem 0; font-size: .88rem; }
.saldo-dialog .StripeElement { margin: 1rem 0; }
@media (max-width: 480px) {
  dialog.saldo-dialog { width: calc(100vw - 1rem); padding: 1.4rem; border-radius: 20px; max-height: calc(100dvh - 1rem); }
  .saldo-dialog__summary { padding: 1rem; }
  .saldo-dialog__row { gap: .6rem; }
}

/* Le anteprime mostrano lo scatto intero, anche quando è verticale. */
.foto-griglia {
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.foto-griglia img {
  object-fit: contain;
  background: #f3f9fc;
}
.saldo-dialog__carta:not([hidden]) {
  padding: 1rem;
  margin-top: 1rem;
  border: 1px solid #d7e7ed;
  border-radius: 14px;
  background: #fff;
}

/* Il codice della sessione non va a capo a metà. */
.saldo-dialog__codice { white-space: nowrap; }

/* Un solo checkout, con mancia facoltativa prima della conferma. */
.saldo-tip { min-width: 0; margin: 1.25rem 0; padding: 1rem; border: 1px solid #c9e3eb; border-radius: 18px; background: #fff; }
.saldo-tip legend { padding: 0 .4rem; color: #073d61; font-weight: 750; font-size: 1.15rem; }
.saldo-tip p { margin: .25rem 0 .8rem; font-size: .9rem; }
.saldo-tip__value, .saldo-tip__custom { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.saldo-tip__value output { color: #08648a; font-size: 1.5rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.saldo-tip input[type=range] { width: 100%; height: 44px; margin: .2rem 0; padding: 0; accent-color: #087da7; cursor: pointer; }
.saldo-tip__custom > div { display: flex; align-items: center; gap: .4rem; }
.saldo-tip__custom input { box-sizing: border-box; width: 7.5rem; min-height: 44px; border: 1px solid #9bbecb; border-radius: 10px; padding: .5rem; font: inherit; text-align: right; color: #073d61; background: white; }
.saldo-tip small { display: block; margin: .7rem 0 0; font-size: .8rem; color: #526c78; }
.saldo-tip .saldo-tip__promise { margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid #e2edf2; font-size: .85rem; color: #247244; }
.saldo-tip:disabled { opacity: .8; }
@media (max-width: 480px) {
  dialog.saldo-dialog { padding: 1rem; }
  .saldo-dialog__carta:not([hidden]) { padding: .5rem; }
  .saldo-dialog__summary { padding: .85rem; }
  .saldo-dialog__row--totale { flex-wrap: wrap; }
  .saldo-tip { padding: .8rem; }
}