/* Shared invoice + reservation-summary styles.
   Used by templates/partials/reservation_invoice.html, which both the
   pay page (/pay/r/<token>) and the customer portal include. */
.pay-section { padding:20px 24px; border-bottom:1px solid #e8ecf0; }
.pay-section:last-child { border-bottom:none; }
.pay-section-title { font-size:0.82rem; font-weight:700; color:#125078; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:12px; }
.pay-summary { display:flex; gap:12px; flex-wrap:wrap; }
.pay-summary-item { flex:1 1 120px; background:#f8fafc; border-radius:6px; padding:10px 12px; }
.pay-summary-label { font-size:0.68rem; color:#888; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:2px; }
.pay-summary-value { font-size:0.88rem; font-weight:600; color:#333; }
.pay-asset-value { color:#0D7F9F; font-weight:700; font-size:0.95rem; }
.pay-totals-wrap { display:flex; justify-content:flex-end; margin-top:14px; }
.pay-totals { width:100%; max-width:340px; border:1px solid #e2e8f0; border-radius:8px; overflow:hidden; font-size:0.88rem; }
.pay-totals-row { display:flex; justify-content:space-between; padding:8px 12px; border-bottom:1px solid #eef2f5; }
.pay-totals-row:last-child { border-bottom:none; }
.pay-totals-row.pay-totals-total { font-weight:700; color:#125078; }
.pay-totals-row.pay-totals-balance { background:linear-gradient(135deg,#FC7701,#FEB207); color:#fff; font-weight:700; }
.pay-invoice { width:100%; font-size:0.88rem; border-collapse:collapse; }
.pay-invoice td { padding:5px 0; }
.pay-invoice .inv-head { background:#125078; }
.pay-invoice .inv-head th { color:#fff; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; padding:9px 10px; text-align:left; }
.pay-invoice .inv-head th.inv-amt { text-align:right; }
.pay-invoice .inv-section { color:#888; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.04em; padding:10px 10px 4px; }
.pay-invoice .inv-indent { padding:5px 10px 5px 26px; }
.pay-invoice td.inv-amt { text-align:right; font-weight:600; padding-right:10px; }
.pay-invoice td:first-child { padding-left:10px; }
.pay-invoice .inv-sub { border-top:1px solid #eee; font-weight:600; }
.pay-invoice .inv-discount td { color:#0D7F9F; font-weight:600; }

@media (max-width: 480px) {
  .pay-section { padding:16px; }
  .pay-summary-item { flex:1 1 100%; }
}