/* Commerce shares the Studio's capsule palette and legible working surfaces. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.commerce-notice { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 23px; padding: 17px 20px; border: 1px solid #715297; border-radius: 13px; background: #291a40; color: #d9c6eb; font-size: 12px; line-height: 1.8; }
.commerce-notice .icon { color: var(--yellow); margin-top: 3px; }
.commerce-notice p { flex: 1; }
.commerce-error { border-color: #b45262; color: #ffbcc6; background: #381425; }
.commerce-error .button { flex-shrink: 0; }
.commerce-stats .stat-value { font-size: clamp(19px, 2.1vw, 30px); overflow-wrap: anywhere; }
.commerce-order-filters { display: grid; grid-template-columns: minmax(180px, 1.6fr) repeat(2, minmax(150px, 1fr)); gap: 17px; padding: 21px; border-bottom: 1px solid var(--line); }
.commerce-order-filters .field { margin: 0; }
.commerce-text-button { padding: 0; background: transparent; border: 0; color: #ffe274; font-size: inherit; font-weight: 550; text-align: left; text-decoration: underline; text-underline-offset: 4px; }
.commerce-text-button:hover { color: #fff6cf; }
.commerce-badge.paid, .commerce-badge.delivered { color: #a0edbf; background: #193c32; border-color: #377151; }
.commerce-badge.under_review, .commerce-badge.pending_upload, .commerce-badge.awaiting_payment { color: #ffe39e; background: #473916; border-color: #766025; }
.commerce-badge.rejected, .commerce-badge.cancelled { color: #ffc0ca; background: #532032; border-color: #9c475c; }
.commerce-badge.confirmed, .commerce-badge.packing, .commerce-badge.shipped { color: #d3c7ff; background: #392b62; border-color: #7b62a7; }
.commerce-settings-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(290px, .9fr); align-items: start; gap: 24px; }
.commerce-settings-grid .card + .card { margin-top: 23px; }
.commerce-settings-grid .commerce-notice { margin-top: 23px; }
.commerce-settings-save { margin-top: 24px; }
.commerce-currency { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 20px; color: var(--muted); font-size: 12px; }
.commerce-currency strong { color: #eee1fa; font-weight: 500; }
.commerce-governorates { padding: 0; margin: 25px 0 0; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 15px; }
.commerce-governorates legend { margin-bottom: 9px; color: #dfc9f0; font-weight: 500; font-size: 12px; }
.commerce-governorate-actions { grid-column: 1 / -1; margin: 0 0 5px -8px; }
.commerce-check { display: flex; align-items: center; gap: 9px; font-size: 12px; line-height: 1.5; color: #e5d6f2; cursor: pointer; }
.commerce-check input { width: 16px; height: 16px; flex-shrink: 0; margin: 0; accent-color: var(--yellow); }
.commerce-save-row { display: flex; gap: 18px; align-items: center; justify-content: space-between; }
.commerce-save-row > p { color: var(--muted); font-size: 12px; }
.commerce-save-row + .form-error { margin: 12px 0 0; }
.commerce-stock-row { display: flex; gap: 22px; align-items: center; padding: 25px; border-bottom: 1px solid var(--line); }
.commerce-stock-row > img { width: 100px; height: 100px; object-fit: cover; border-radius: 13px; }
.commerce-stock-row > div { flex: 1; min-width: 0; }
.commerce-stock-row h2 { font: 400 17px/1.4 var(--display); color: #fff2c9; }
.commerce-stock-row p { color: var(--muted); margin-top: 8px; font-size: 12px; }
.commerce-stock-row .field { width: 170px; flex-shrink: 0; margin: 0; }
.commerce-warning { display: block; margin-top: 9px; color: #ffe08a; font-size: 11px; line-height: 1.8; }
.commerce-coupons { padding: 0 25px; }
.commerce-coupon { min-width: 0; padding: 20px 0; margin: 0; border: 0; border-bottom: 1px solid var(--line); }
.commerce-coupon legend { padding-top: 22px; font-size: 13px; font-weight: 550; color: #f1e0ff; }
.commerce-coupon-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.commerce-coupon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 17px; }
.commerce-coupon-grid .field { min-width: 0; }
.commerce-coupon-grid [name=code] { text-transform: uppercase; }
.commerce-order-detail { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(250px, .85fr); gap: 30px; padding: 27px; }
.commerce-order-detail section + section { margin-top: 27px; padding-top: 25px; border-top: 1px solid var(--line); }
.commerce-order-detail h3 { margin-bottom: 18px; color: #fff1c3; font-size: 15px; }
.commerce-detail-list { margin: 0; display: grid; gap: 13px; }
.commerce-detail-list > div { display: grid; gap: 5px; }
.commerce-detail-list dt { color: var(--muted); font-size: 10px; }
.commerce-detail-list dd { margin: 0; color: #f0dfff; font-size: 12px; white-space: pre-line; overflow-wrap: anywhere; }
.commerce-order-lines > div { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.commerce-order-lines strong { font-weight: 500; }
.commerce-order-lines small { display: block; font-size: 11px; color: var(--muted); margin-top: 5px; }
.commerce-totals { margin: 15px 0 0; display: grid; gap: 9px; font-size: 12px; }
.commerce-totals > div { display: flex; justify-content: space-between; gap: 12px; }
.commerce-totals dt { color: var(--muted); }
.commerce-totals dd { margin: 0; }
.commerce-totals .total { padding-top: 12px; border-top: 1px solid var(--line); color: var(--yellow); font-size: 17px; font-weight: 550; }
.commerce-totals .total dt { color: inherit; }
.commerce-review-help { margin-top: 20px; padding: 13px; border-left: 3px solid var(--yellow); background: #3b2e17; color: #ffecad; font-size: 11px; line-height: 1.9; }
.commerce-receipt { margin-top: 17px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #10091b; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.commerce-receipt .spinner { display: inline-block; vertical-align: middle; margin-right: 8px; }
.commerce-receipt-link { display: block; }
.commerce-receipt-link img { width: 100%; height: auto; max-height: 520px; object-fit: contain; border-radius: 7px; }
.commerce-receipt > small { display: block; margin-top: 10px; font-size: 10px; }
.commerce-receipt > .button { margin-top: 12px; }
#orderDialog .dialog-head p { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.commerce-publish-actions { display: none; }
@media (max-width: 1150px) {
  .commerce-settings-grid { grid-template-columns: minmax(0, 1fr); }
  .commerce-governorates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .commerce-order-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 17px; gap: 13px; }
  .commerce-order-filters > .field:first-child { grid-column: 1 / -1; }
  .commerce-order-detail { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 26px; }
  .commerce-order-detail > aside { padding-top: 25px; border-top: 1px solid var(--line); }
  .commerce-coupon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .commerce-coupons { padding: 0 17px; }
  .commerce-stock-row { padding: 20px; flex-wrap: wrap; gap: 15px; }
  .commerce-stock-row > img { width: 75px; height: 75px; }
  .commerce-stock-row > div { flex-basis: calc(100% - 95px); }
  .commerce-stock-row .field { width: 100%; }
  .commerce-notice { padding: 14px; flex-wrap: wrap; }
  .commerce-notice p { min-width: 160px; }
  .commerce-save-row { align-items: flex-start; flex-direction: column; gap: 14px; }
  .commerce-save-row .button { width: 100%; }
  .commerce-governorates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}