/* Shared sizing comes last so nested payment names are never percentage-sized twice. */
.screen > *, .transaction-summary, .state-card { min-width: 0; }
.transaction-summary { height: auto; flex-shrink: 0; }
.selected-payment { flex-wrap: wrap; row-gap: 8px; }
.selected-payment > .transaction-label { flex: 0 0 auto; }
.selected-payment .payment-name-with-logo {
  flex: 0 1 auto; max-width: 100%; margin-left: auto;
}
.selected-payment .payment-name,
html.paypos-android-webview .transaction-summary .payment-name {
  min-width: 0; max-width: none; white-space: normal;
  word-break: normal; overflow-wrap: normal; overflow: visible; text-overflow: clip;
}
.payment-name-with-logo, .payment-detail-method { max-width: 100%; }
.payment-detail-method > span:last-child { white-space: normal; overflow-wrap: break-word; }
.payment-name-with-logo img, .payment-detail-method img {
  width: 40px; height: 30px; border-radius: 0; object-fit: contain;
}
.detail-row { flex-wrap: wrap; gap: 5px 12px; }
.detail-row > .detail-value { min-width: 0; margin-left: auto; overflow-wrap: anywhere; }
.link-information-list > div,
html.paypos-android-webview .link-information-list > div {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
}
.link-information-list dt,
html.paypos-android-webview .link-information-list dt {
  flex: 0 0 auto; max-width: 100%; margin-right: 0;
}
.link-information-list dd,
html.paypos-android-webview .link-information-list dd { flex: 1 1 auto; max-width: 100%; }
.link-information-list .link-url-row dd,
html.paypos-android-webview .link-information-list .link-url-row dd {
  flex-basis: 100%; text-align: left;
}
.link-url-value { display: block; overflow-wrap: anywhere; line-height: 1.5; }
/* Give each method mark a fixed, centered canvas with clear space on all sides. */
.payment-option > .icon {
  display: flex; align-self: center; align-items: center; justify-content: center;
  box-sizing: border-box; width: 42px; height: 42px; padding: 7px;
  flex-shrink: 0; line-height: 0; color: #17212b;
}
.payment-option > .icon > svg,
.payment-option > .icon > img,
.payment-option > .icon > .amex-payment-icon {
  display: block; flex: 0 0 auto; width: 28px; height: 28px;
  max-width: 100%; max-height: 100%; object-fit: contain;
}
/* The original AMEX bitmap already includes white clear space. Compensate for
   that margin so its blue mark has the same visual weight as the pictograms. */
.payment-option > .icon > .amex-payment-icon {
  width: 40px; height: 40px; max-width: 40px; max-height: 40px;
}
.payment-option .icon svg { fill: none; stroke: currentColor; }

/* Receipt entry owns a complete row; navigation keeps its normal button height. */
body[data-page="payment-detail"] .actions,
html.paypos-android-webview body[data-page="payment-detail"] .actions {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch; gap: 10px; margin-top: 14px;
}
body[data-page="payment-detail"] .actions > *,
html.paypos-android-webview body[data-page="payment-detail"] .actions > * {
  min-width: 0; margin: 0;
}
body[data-page="payment-detail"] .receipt-email-form,
body[data-page="payment-detail"] .receipt-print-actions { grid-column: 1 / -1; }
.receipt-print-actions[hidden] { display: none !important; }
.receipt-email-row { grid-template-columns: minmax(0, 1fr) auto; }
.receipt-email-row .button { width: auto; }
.actions > .button { display: flex; align-items: center; justify-content: center; min-height: 48px; height: auto; padding: 12px 16px; line-height: 1.3; }
.print-status:empty, .receipt-email-status:empty { display: none; }
@media (max-width: 359px) {
  .receipt-email-row { grid-template-columns: 1fr; }
  .receipt-email-row .button { width: 100%; }
  body[data-page="payment-detail"] .actions,
  html.paypos-android-webview body[data-page="payment-detail"] .actions { grid-template-columns: 1fr; }
}

/* A two-column view needs enough space for two readable cards, regardless of rotation. */
@media (min-width: 800px) {
  body[data-page="paypos-attente"] .screen,
  body[data-page="payment-detail"] .screen,
  html.paypos-android-webview body[data-page="paypos-attente"] .screen,
  html.paypos-android-webview body[data-page="payment-detail"] .screen {
    display: grid; width: 100%; max-width: 1280px; height: auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: none; gap: 0 24px; align-content: start; padding: 24px;
  }
  body[data-page="paypos-attente"] .screen > .topbar,
  body[data-page="payment-detail"] .screen > .topbar,
  body[data-page="paypos-attente"] .screen > h1,
  body[data-page="payment-detail"] .screen > h1 { grid-column: 1 / -1; }
  body[data-page="paypos-attente"] .transaction-summary,
  body[data-page="payment-detail"] .transaction-summary,
  body[data-page="paypos-attente"] .state-card,
  body[data-page="payment-detail"] .state-card,
  body[data-page="payment-detail"] .review-card { grid-column: 1; }
  body[data-page="paypos-attente"] .link-information,
  body[data-page="payment-detail"] .link-information,
  html.paypos-android-webview body[data-page="paypos-attente"] .link-information,
  html.paypos-android-webview body[data-page="payment-detail"] .link-information {
    grid-column: 2; grid-row: 3 / span 2; align-self: start; margin-top: 0;
  }
  body[data-page="paypos-attente"] .actions,
  html.paypos-android-webview body[data-page="paypos-attente"] .actions {
    display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  }
  html.paypos-android-webview body[data-page="paypos-attente"] .actions > * + * { margin: 0; }
  body[data-page="payment-detail"] .actions { grid-column: 1 / -1; }
  body[data-page="payment-detail"] .print-status { grid-column: 1 / -1; }
}
@media (max-width: 799px) {
  html.paypos-android-webview body[data-page="paypos-attente"] .screen,
  html.paypos-android-webview body[data-page="payment-detail"] .screen {
    display: block; max-width: 620px;
  }
  html.paypos-android-webview body[data-page="paypos-attente"] .actions { flex-direction: column; }
  html.paypos-android-webview body[data-page="paypos-attente"] .actions > * + * { margin: 8px 0 0; }
}

/* Increase actual text sizes on tablets; do not scale the whole WebView. */
@media (min-width: 700px) and (min-height: 500px) {
  body { --pos-copy-size: clamp(14px, 1.3vw, 18px); }
  body .screen h1, html.paypos-android-webview .screen h1 { font-size: clamp(24px, 2.2vw, 32px); }
  body .state-title { font-size: clamp(22px, 2vw, 28px); }
  body .amount { font-size: clamp(26px, 2.4vw, 34px); }
  body .transaction-label, body .detail-label, body .link-information-list > div,
  body .link-qr figcaption, body .reference-value, body .reference-input,
  body .payment-name, body .detail-value, body .state-message,
  body .review-card > p, body .receipt-email-form > label, body .receipt-email-row input {
    font-size: var(--pos-copy-size); line-height: 1.4;
  }
  body .link-information h2, body .review-card h2 { font-size: clamp(19px, 1.8vw, 24px); }
  body .actions .button { font-size: clamp(15px, 1.4vw, 19px); min-height: 52px; }
  body .receipt-email-form > small, body .delivery-status, body .link-id-value { font-size: clamp(12px, 1.1vw, 15px); }
  body .receipt-email-form { padding: 18px; }
  body .review-card > p { max-width: 100%; }
}

/* The Visa Germany artwork is retained byte-for-byte. Show its standalone
   V PAY mark (top-left 83 × 89 pixels) as an image sprite, without redrawing. */
.card-brand-logo--vpay { display: inline-block; position: relative; flex: 0 0 28px; width: 28px; height: 30px; overflow: hidden; }
.payment-name-with-logo .card-brand-logo--vpay img,
.payment-detail-method .card-brand-logo--vpay img { position: absolute; top: 0; left: 0; width: 124.72px; max-width: none; height: 72.47px; object-fit: fill; }

/* The UnionPay download includes its full artboard. Keep its original pixels
   and expose the mark with balanced clear space (450 × 300 at 950,650). */
.card-brand-logo--unionpay { display: inline-block; position: relative; flex: 0 0 45px; width: 45px; height: 30px; overflow: hidden; }
.payment-name-with-logo .card-brand-logo--unionpay img,
.payment-detail-method .card-brand-logo--unionpay img { position: absolute; top: -65px; left: -95px; width: 236.2px; max-width: none; height: 167px; object-fit: fill; }