/* Orders and payments: cart, checkout, status pages, corporate flow, transfer page.
   Style-guide components from static/base.css; this file only lays them out. Token values only. */

/* page head: eyebrow, h1 and lede above the content */
.page-head { margin-bottom: var(--s5); }
.page-head h1 { margin-bottom: var(--s2); }
.page-head .lede { margin-top: 0; }
.closed-notice { max-width: 62ch; }

/* legal position sentence with the merchant's identity on its own line (brand 9.1) */
.legal-position { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3) var(--s4); margin-bottom: var(--s5); }
.legal-position__sentence { margin: 0; font-weight: 600; color: var(--navy); }
.legal-position__merchant { margin: var(--s1) 0 0; }

/* cart */
.cart-table td a { font-weight: 600; }
.cart-table__facts { display: block; font-size: 13px; color: var(--text-muted); margin-top: var(--s1); }
.cart-table .qty-form { display: inline-flex; gap: var(--s2); align-items: center; }
.cart-table input[type="number"] { width: calc(var(--s7) + var(--s6)); }
.cart-summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s4); box-shadow: var(--shadow-card); }
.cart-summary__label { display: block; font-size: 13px; color: var(--text-muted); }
.cart-empty .btn { margin-top: var(--s2); }

/* checkout */
.checkout-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--s6); align-items: start; }
@media (max-width: 760px) { .checkout-grid { grid-template-columns: 1fr; } }
.order-summary { position: sticky; top: var(--s4); box-shadow: var(--shadow-card); }
.order-summary .line { display: flex; justify-content: space-between; gap: var(--s3); padding-block: var(--s2); border-bottom: 1px solid var(--line); font-size: 14px; }
.order-summary .line:last-of-type { border-bottom: 0; }
.order-summary .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.order-summary .total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: var(--s2); font-weight: 600; color: var(--navy); }
.disclosure { font-size: 14px; color: var(--text-muted); margin: var(--s3) 0 0; }
/* A form on --paper-2 loses field-border contrast, so the consent box sits on --paper. */
.consent-box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3) var(--s4); }
.consent-box label { display: flex; gap: var(--s2); align-items: flex-start; font-weight: 500; }
.consent-box input[type="checkbox"] { flex: 0 0 auto; margin-top: var(--s1); }
.radio-list { list-style: none; padding: 0; margin: var(--s2) 0 0; }
.radio-list li { margin-bottom: var(--s2); }
.radio-list label { display: flex; gap: var(--s2); align-items: center; font-weight: 500; }

/* status pages: paid on the surface (Boník stands on a light ground), waiting and dead on the state tints */
.status-hero { padding: var(--s6); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); margin-bottom: var(--s5); }
.status-hero h1 { color: var(--navy); margin-bottom: var(--s2); }
.status-hero .lede { margin-top: 0; margin-bottom: var(--s4); }
.status-hero.is-paid { box-shadow: var(--shadow-card); }
.status-hero.is-paid .mascot { margin: 0 0 var(--s4); }
.status-hero.is-waiting { background: var(--info-bg); }
.status-hero.is-dead { background: var(--error-bg); }
.status-hero.is-waiting .lede, .status-hero.is-dead .lede { color: var(--text); }
.status-hero.is-waiting .eyebrow, .status-hero.is-dead .eyebrow { color: var(--navy); }
.status-hero .alert { margin: var(--s4) 0 0; }
@media (max-width: 760px) { .status-hero { padding: var(--s5) var(--s4); } }

.order-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s3); margin: 0 0 var(--s4); }
.order-facts > div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3) var(--s4); }
.order-facts dt { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.order-facts dd { margin: var(--s1) 0 0; font-family: var(--f-display); font-weight: 700; font-size: 20px; line-height: 1.25; color: var(--navy); font-variant-numeric: tabular-nums; }

.voucher-list { list-style: none; padding: 0; margin: 0; }
.voucher-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2) var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.voucher-list li:last-child { border-bottom: 0; }
.voucher-list .code { display: block; font-size: 20px; color: var(--navy); }
.voucher-list__facts { display: block; font-size: 13px; color: var(--text-muted); }

/* transfer instructions */
.transfer-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s6); align-items: start; }
@media (max-width: 760px) { .transfer-grid { grid-template-columns: 1fr; } }
.transfer-qr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s3); max-width: 260px; margin: 0; }
.transfer-qr svg { width: 100%; height: auto; }
.transfer-facts { margin: 0 0 var(--s4); }
.transfer-facts > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); padding-block: var(--s2); border-bottom: 1px solid var(--line); }
.transfer-facts > div:last-child { border-bottom: 0; }
.transfer-facts .label { color: var(--text-muted); font-size: 14px; }
.transfer-facts .value { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.transfer-facts .value.vs { font-family: var(--f-mono); letter-spacing: .08em; font-size: 18px; color: var(--navy); }
.transfer-facts .value.spayd { font-weight: 400; font-size: 13px; word-break: break-all; }
.transfer-facts__aside { font-weight: 400; font-size: 13px; color: var(--text-muted); }

/* dev payment page (development only) */
.dev-card { max-width: 480px; }
.fake-card { background: var(--navy); color: var(--paper); border-radius: var(--r-lg); padding: var(--s5); margin: var(--s4) 0; box-shadow: var(--shadow-card); }
.fake-card__label { font-size: 14px; color: var(--on-navy); }
.fake-card__amount { font-family: var(--f-display); font-weight: 700; font-size: clamp(24px, 3vw, 34px); color: var(--paper); margin-block: var(--s2); font-variant-numeric: tabular-nums; }

/* corporate */
.corp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: center; padding: var(--s6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: var(--s6); }
.corp-hero__image { width: 100%; height: auto; border-radius: var(--r-md); }
.corp-hero__list { margin: var(--s4) 0; }
.corp-hero__list li { margin-bottom: var(--s1); }
@media (max-width: 760px) {
  .corp-hero { grid-template-columns: 1fr; padding: var(--s5) var(--s4); }
  .corp-hero__image { order: -1; }
}
.corp-lines .line-row { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--s8) + var(--s6)); gap: var(--s3); margin-bottom: var(--s2); }
.corp-lines .line-row select { min-width: 0; }
@media (max-width: 760px) { .corp-lines .line-row { grid-template-columns: 1fr; } .corp-lines .line-row--head { display: none; } }
.merchant-block { padding-block: var(--s4); border-top: 1px solid var(--line); }
.merchant-block__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.merchant-block__name { font-size: 17px; margin: 0 var(--s2) 0 0; }
.merchant-block .table-wrap { margin-bottom: var(--s3); }
.order-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); border-top: 1px solid var(--line); padding-top: var(--s4); font-weight: 600; color: var(--navy); }

/* platební výzva: a printable document */
.podklad-actions { display: flex; flex-wrap: wrap; gap: var(--s2); max-width: 800px; margin: 0 auto var(--s4); }
.podklad { max-width: 800px; margin-inline: auto; background: var(--surface); padding: var(--s6); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.podklad__meta { color: var(--text-muted); }
.podklad__vs { font-family: var(--f-mono); letter-spacing: .08em; }
.podklad .parties { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin-bottom: var(--s5); }
.podklad .not-tax { border: 1px dashed var(--text-muted); padding: var(--s3) var(--s4); border-radius: var(--r-sm); margin-bottom: var(--s5); font-size: 14px; }
@media (max-width: 760px) { .podklad { padding: var(--s5) var(--s4); } .podklad .parties { grid-template-columns: 1fr; } }
@media print { .podklad { border: 0; padding: 0; box-shadow: none; } }