/* Customer order detail: compact overview, then delivery and the historical bill. */
.order-detail-dialog { --order-surface: #fff; --order-page: var(--paper-100); --order-inset: clamp(.75rem, .6rem + .4vw, 1.125rem); }
.order-detail-dialog .dialog-head { gap: .5rem; border-bottom-color: var(--line-200); background: var(--order-surface); }
.order-detail-dialog .dialog-head h2 { font-size: var(--text-lg); }
.order-detail-dialog .dialog-head .close { order: -1; margin-left: 0; }
.order-detail-dialog .dialog-head .close .icon { --i: url(/assets/icons/chevron-left.svg); }
.order-detail-dialog .dialog-body { padding: .75rem; background: var(--order-page); gap: .75rem; }
.order-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: .625rem; min-width: 0; }
.order-detail-card { display: grid; min-width: 0; gap: .75rem; padding: var(--order-inset); border: 0; border-radius: var(--radius-lg); background: var(--order-surface); }
.order-detail-card > *, .order-detail-card :is(h3, p, strong, dd, dt, summary, .button) { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.order-detail-card h3 { font-size: var(--text-lg); }
.order-detail-dialog .status-block { gap: .75rem; }
.order-detail-dialog .status-top { align-items: center; justify-content: space-between; gap: .5rem; }
.order-detail-dialog .status-top .badge { padding: 0; border: 0; border-radius: 0; color: var(--ink-900); background: none; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height: 1.25; }
.order-detail-dialog .status-top .badge::before { display: none; }
.order-detail-dialog .status-block > p { color: var(--ink-600); font-size: var(--text-sm); line-height: 1.55; }
.order-mode { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: var(--text-xs); color: var(--ink-600); }
.order-mode .icon { width: 1rem; height: 1rem; }
.order-state-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.25rem), 1fr)); gap: .5rem .75rem; padding-block: .625rem; border-block: 1px solid var(--line-200); }
.order-state-summary > div { min-width: 0; }
.order-state-summary dt { color: var(--ink-600); font-size: var(--text-xs); }
.order-state-summary dd { margin-top: .2rem; font-size: var(--text-sm); font-weight: 600; }
.order-overview-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .5rem; }
.order-overview-actions .status-actions { margin: 0; gap: .5rem; }
.order-detail-dialog .chat-order-entry { max-width: 100%; min-width: 0; }
.order-detail-dialog .button { min-height: var(--control-min); height: auto; white-space: normal; padding: .5rem .75rem; line-height: 1.35; }
.order-information .detail-section { gap: .625rem; }
.order-information .detail-section h3 { font-size: var(--text-sm); font-weight: 500; color: var(--ink-600); }
.order-information .detail-section h3 .icon { width: 1rem; height: 1rem; }
.order-detail-dialog :is(.kv, .order-info-meta) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: .5rem .75rem; font-size: var(--text-sm); }
.order-info-meta dt { color: var(--ink-600); }
.order-remark { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; font-size: var(--text-sm); }
.order-remark > span { color: var(--ink-600); }
.order-disclosure { min-width: 0; }
.order-disclosure > summary { display: flex; min-height: var(--control-min); align-items: center; justify-content: center; gap: .375rem; cursor: pointer; list-style: none; color: var(--ink-600); font-size: var(--text-sm); line-height: 1.4; }
.order-disclosure > summary::-webkit-details-marker { display: none; }
.order-disclosure > summary .icon { flex: 0 0 1rem; width: 1rem; height: 1rem; }
.order-disclosure[open] > summary .icon { transform: rotate(180deg); }
.order-disclosure > summary:hover { color: var(--brand-700); }
.order-disclosure > summary:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; border-radius: var(--radius-sm); }
.order-disclosure[open] > summary { margin-bottom: .625rem; }
.order-disclosure-content { display: grid; gap: .75rem; min-width: 0; }
.order-information > .order-disclosure, .order-goods > .order-disclosure, .order-payment-card > .order-disclosure { border-top: 1px solid var(--line-200); }
.order-goods-overview { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .625rem; }
.order-thumb-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; min-width: 0; }
.order-item-thumb { position: relative; display: grid; flex: 0 0 auto; place-items: center; width: clamp(2.5rem, 11vw, 3.5rem); aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-sm); background: var(--paper-100); color: var(--ink-400); }
.order-item-thumb > .icon { width: 45%; height: 45%; }
.order-item-thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.order-items-count { color: var(--ink-600); font-size: var(--text-xs); padding-inline: .25rem; }
.order-goods-amount { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: .25rem .5rem; min-width: 0; margin-left: auto; }
.order-goods-amount > span { color: var(--ink-600); font-size: var(--text-xs); }
.order-goods-amount > strong { font-size: var(--text-lg); line-height: 1.35; font-variant-numeric: tabular-nums; text-align: right; }
.order-detail-dialog .order-detail-items li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'image name' 'image total'; align-items: start; gap: .25rem .625rem; padding: .625rem 0; border-bottom-style: solid; }
.order-detail-items .order-item-thumb { grid-area: image; width: clamp(3rem, 14vw, 4.25rem); }
/* Override the shared narrow-screen bill's full-row name placement: these rows have images. */
.order-detail-dialog .order-detail-items .line-name { grid-area: name; gap: .15rem; }
.order-detail-items .line-name strong { font-size: var(--text-base); }
.order-detail-items .line-name small { font-size: var(--text-xs); }
.order-detail-dialog .order-detail-items .line-total { grid-area: total; min-width: 0; max-width: 100%; justify-self: end; text-align: right; white-space: normal; font-size: var(--text-sm); }
.order-detail-dialog .totals { gap: .5rem; font-size: var(--text-sm); }
.order-detail-dialog .totals > div { flex-wrap: wrap; gap: .25rem .75rem; }
.order-detail-dialog .totals dd { min-width: 0; max-width: 100%; margin-left: auto; white-space: normal; text-align: right; overflow-wrap: anywhere; }
.order-detail-dialog .totals .grand { font-size: var(--text-lg); }
.order-detail-dialog .order-payment-card { gap: .625rem; }
.order-payment-card h3 { font-size: var(--text-base); }
.order-payment-card .v3-due { gap: .25rem; padding: .625rem .75rem; }
.order-payment-card .v3-due strong { font-size: var(--text-lg); }
.order-payment-card :is(.hint, .v3-due small) { font-size: var(--text-sm); }
.order-payment-card .v3-facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: .625rem; padding: 0; border: 0; background: none; }
.order-payment-card .v3-facts dd { font-size: var(--text-sm); }
.order-payment-card .v3-record { padding: .625rem; background: var(--order-page); border: 0; font-size: var(--text-sm); }
.order-payment-card .v3-record p { margin-top: .375rem; }
.order-payment-card .status-actions:empty { display: none; }
.order-detail-dialog .payment-v3 .status-actions > .button { flex: 1 1 10rem; }
.order-detail-dialog .order-timeline { gap: 0; padding-block: .25rem; }
.order-timeline > summary { justify-content: space-between; font-weight: 600; color: var(--ink-900); }
.order-timeline .order-disclosure-content { padding-bottom: .75rem; }
.order-timeline .detail-section > h3 { display: none; }
.order-detail-dialog .events .event-title { font-size: var(--text-sm); }
.order-detail-dialog .events .event-meta { font-size: var(--text-xs); }
@media (min-width: 600px) {
  .dialog.order-detail-dialog { --dialog-w: 42.5rem; }
  .order-detail-dialog .dialog-body { padding: 1rem; }
  .order-detail-layout { gap: .75rem; }
  .order-detail-dialog .order-detail-items li { grid-template-columns: auto minmax(0, 1fr) minmax(0, auto); grid-template-areas: 'image name total'; align-items: center; }
  .order-detail-dialog .order-detail-items .line-total { text-align: right; }
}
@media (max-width: 767px) {
  .order-detail-dialog .dialog-head { padding: max(.375rem, env(safe-area-inset-top)) .5rem .375rem; min-height: var(--control-min); }
  .order-detail-dialog .dialog-body { padding: .5rem .5rem calc(.75rem + env(safe-area-inset-bottom)); }
}
[data-theme="dark"] .order-detail-dialog { --order-surface: #292522; --order-page: #201d1a; }

/* Direction B visual language; retain the original order/payment state semantics. */
@media (max-width: 767px) {
  html:not([data-customer-design="b"]) body.customer-app .order-detail-dialog {
    --order-surface: #FFF; --order-page: #F6F6F6; --order-inset: 16px;
    --ink-900: #222; --ink-700: #454545; --ink-600: #696969; --line-200: #EEE;
    --paper-50: #FFF; --paper-100: #F6F6F6;
    color: #222; background: #F6F6F6;
  }
  html:not([data-customer-design="b"]) body.customer-app .order-detail-dialog .dialog-head { min-height: 56px; padding: max(6px, env(safe-area-inset-top)) 12px 6px; border: 0; }
  html:not([data-customer-design="b"]) body.customer-app .order-detail-dialog .dialog-head h2 { font-size: 20px; }
  html:not([data-customer-design="b"]) body.customer-app .order-detail-dialog .dialog-body { padding: 12px 12px calc(16px + env(safe-area-inset-bottom)); }
  html:not([data-customer-design="b"]) body.customer-app .order-detail-layout { gap: 12px; }
  html:not([data-customer-design="b"]) body.customer-app .order-detail-card { border-radius: 16px; box-shadow: none; }
  html:not([data-customer-design="b"]) body.customer-app .order-detail-dialog .status-top .badge { font-size: 24px; font-weight: 700; }
  html:not([data-customer-design="b"]) body.customer-app .order-detail-dialog .order-mode { padding: 6px 10px; border-radius: 20px; background: #F6F6F6; }
  html:not([data-customer-design="b"]) body.customer-app .order-detail-dialog .button { min-height: 44px; border-radius: 24px; padding: 10px 16px; font-size: 14px; box-shadow: none; }
  html:not([data-customer-design="b"]) body.customer-app .order-detail-dialog .button.primary { color: #FFFFFF; background: var(--brand-600); border-color: var(--brand-600); }
  html:not([data-customer-design="b"]) body.customer-app .order-detail-dialog .button.primary:hover:not(:disabled) { background: var(--brand-700); border-color: var(--brand-700); }
  html:not([data-customer-design="b"]) body.customer-app .order-detail-dialog .button.secondary { color: #222; background: white; border-color: #DDD; }
  html:not([data-customer-design="b"]) body.customer-app .order-detail-dialog .payment-v3 .status-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: 8px; }
  html:not([data-customer-design="b"]) body.customer-app .order-detail-dialog .button:disabled { color: #696969; background: #EEE; border-color: #EEE; opacity: 1; }
  html:not([data-customer-design="b"]) body.customer-app .order-detail-dialog .order-item-thumb { border-radius: 10px; }
  html:not([data-customer-design="b"]) body.customer-app .order-detail-dialog .order-goods-amount > strong { font-size: 22px; color: #222; }
  html:not([data-customer-design="b"]) body.customer-app .order-detail-dialog :is(button,summary,a):focus-visible { outline: 2px solid #222; outline-offset: 2px; }
}